/* Estonian-arm beginner boxes for the shared guide/tool components
   (EstonianGuide, PiiGuide) and the Estonian guide pages. Served as a static
   file and linked only from the ET pages, so the English twin pages stay
   byte-identical (an inline style would add a hash to the site-wide CSP list).
   Box styles mirror src/components/guides/{BeforeYouStart,KeyTerms,OutcomeChecklist}.astro. */
.before-you-start{margin:24px 0;max-width:760px;padding:18px 22px;background:var(--paper-warm);border:1px solid var(--rule-strong);border-radius:14px;color:var(--ink)}
.before-you-start .bys-title{margin:0 0 12px;font:600 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.bys-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.bys-list li{position:relative;padding-left:30px;font-size:15px;line-height:1.55}
.bys-list li::before{content:'';position:absolute;left:0;top:2px;width:16px;height:16px;border:1.5px solid var(--accent-blue);border-radius:4px;background:#fff}
.bys-meta{margin:12px 0 0;font-size:15px;line-height:1.55}
.key-terms{margin:24px 0;max-width:760px;padding:18px 22px;background:var(--paper-warm);border:1px solid var(--rule);border-radius:14px;color:var(--ink)}
.key-terms .kt-title{margin:0 0 12px;font:600 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.kt-list{margin:0;display:grid;gap:8px}
.kt-row{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:6px 14px;align-items:baseline;font-size:15px;line-height:1.55}
.kt-row dt{font-weight:700;color:var(--ink-heading)}
.kt-row dt::after{content:':';margin-left:10px;font-weight:400;color:var(--ink-muted)}
.kt-row dd{margin:0}
@media (max-width:560px){.kt-row{grid-template-columns:1fr;gap:0}.kt-row dt::after{content:none}}
.outcome-checklist{margin:24px 0;max-width:760px;padding:18px 22px;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:14px;color:#14532d}
.outcome-checklist .oc-title{margin:0 0 12px;font:600 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#166534}
.oc-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.oc-list li{position:relative;padding-left:30px;font-size:15px;line-height:1.55}
.oc-list li::before{content:'';position:absolute;left:0;top:2px;width:16px;height:16px;border:1.5px solid #166534;border-radius:4px;background:#fff}
.filled-example{margin:22px 0;padding:18px 22px;border:1px solid #c5d6df;border-radius:12px;background:#f0f7fa}
.filled-example p{margin-top:0}
.filled-example pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:14px 16px;background:#fff;border:1px solid #d2e0e6;border-radius:8px;font:14px/1.6 ui-monospace,monospace;color:#143d59}
.advanced-note{border-left:4px solid #c2410c;background:#fff7f0;padding:16px 22px;margin:22px 0}
.advanced-note ul{margin:12px 0;padding-left:22px}
.advanced-note li{margin:6px 0}
.advanced-note a{color:#075985;text-underline-offset:4px}

.tshoot{margin:24px 0;max-width:760px;display:grid;gap:10px}
.tshoot-row{padding:16px 20px;border:1px solid var(--rule);border-left:4px solid #c2410c;border-radius:10px;background:var(--paper-warm)}
.tshoot-row p{margin:0 0 6px;font-size:15px;line-height:1.55}
.tshoot-row p:last-child{margin-bottom:0}
.tshoot-symptom{font-weight:700;color:var(--ink-heading)}
.tshoot code{font:14px/1.6 ui-monospace,monospace;background:#fff;border:1px solid #d2e0e6;border-radius:6px;padding:1px 5px}

/* Screenshot slots. Kept out of ScreenshotSlot.astro on purpose: that component
   is imported by the shared ET/EN wrappers, so a scoped style there would leak
   into the Estonian bundles. English surfaces load this file only. */
.screenshot-slot{margin:24px 0;max-width:760px}
.screenshot-slot img{display:block;width:100%;height:auto;border:1px solid var(--rule-strong);border-radius:14px;background:#fff}
.screenshot-slot figcaption{margin-top:10px;font-size:14px;line-height:1.55;color:var(--ink-muted)}

/* Language-scoped responsive figure for guide illustrations whose labels are drawn into the
   artwork. Kept in the language stylesheet so a static file change never alters any page HTML. */
.guide-flow-figure img{display:block;width:100%;height:auto;max-width:100%;border-radius:12px}
.guide-flow-figure figcaption{margin-top:12px}