/* study.css - the bar around the study page. Tokens come from tokens.css (linked first in study.html); every value has a fallback. */
html, body { margin: 0; height: 100%; background: var(--bg, #fff); color: var(--ink, #172033); }
.sbar { display: flex; align-items: center; gap: var(--s3, 12px); height: 48px; box-sizing: border-box; padding: 0 var(--s4, 16px); background: var(--surface, #fff); border-bottom: 1px solid var(--line, #e1e5ec); font: var(--fw, 400) var(--fs-md, 1rem)/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sbar a { display: inline-flex; align-items: center; min-height: var(--tap, 44px); color: var(--accent, #1f5eff); font-weight: var(--fw-b, 600); text-decoration: none; }
.sbar .tl-lang { margin-left: auto; min-height: var(--tap, 44px); font: inherit; color: var(--ink, #172033); background: var(--surface, #fff); border: 1px solid var(--line, #e1e5ec); border-radius: var(--r-s, 8px); padding: 0 var(--s2, 8px); }
.snote, .stoast { margin: 0; padding: var(--s2, 8px) var(--s3, 12px); font: var(--fs-sm, .875rem)/1.4 system-ui, sans-serif; background: var(--warn-soft, #fbeee4); color: var(--ink, #172033); border-bottom: 1px solid var(--line, #e1e5ec); }
.stoast a { color: inherit; font-weight: var(--fw-b, 600); }
.stoast .stext { user-select: text; overflow-wrap: anywhere; font-weight: var(--fw-b, 600); }
#frame { display: block; width: 100%; height: calc(100vh - 49px); border: 0; }
#msg { font: var(--fs-md, 1rem) system-ui, sans-serif; padding: var(--s5, 24px); color: var(--ink, #172033); }
.swait { display: flex; justify-content: center; padding: 48px 0; font: var(--fs-md, 1rem) system-ui, sans-serif; color: var(--ink, #172033); }
.swait:empty { display: none; }
/* the "test learnt" moment: one card over the page, the check is drawn once (study-B3-04) */
.sdone { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: var(--s4, 16px); background: color-mix(in srgb, var(--ink, #172033) 45%, transparent); }
.sdone[hidden] { display: none; }
.sdone-card { box-sizing: border-box; width: min(100%, 24rem); display: flex; flex-direction: column; align-items: center; gap: var(--s3, 12px); text-align: center; padding: var(--s5, 24px); background: var(--surface, #fff); color: var(--ink, #172033); border: 1px solid var(--line, #e1e5ec); border-radius: var(--r-m, 16px); box-shadow: var(--e2, 0 12px 32px rgb(16 24 40 / .16)); font: var(--fw, 400) var(--fs-md, 1rem)/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sdone-card h2 { margin: 0; font-size: var(--fs-lg, 1.25rem); }
.sdone-card p { margin: 0; color: var(--muted, #566074); font-size: var(--fs-sm, .875rem); }
.sdone-check { width: 64px; height: 64px; }
.sdone-check circle { fill: var(--accent-soft, #e9effe); stroke: none; }
.sdone-check path { fill: none; stroke: var(--ok, #157347); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sbtn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; min-height: var(--tap, 44px); padding: 0 var(--s4, 16px); border-radius: var(--r-s, 8px); background: var(--accent, #1f5eff); color: var(--on-accent, #fff); font-weight: var(--fw-b, 600); text-decoration: none; }
.slink { min-height: var(--tap, 44px); padding: 0 var(--s3, 12px); background: none; border: 0; color: var(--accent, #1f5eff); font: inherit; font-weight: var(--fw-b, 600); text-decoration: underline; cursor: pointer; }
.sbtn:focus-visible, .slink:focus-visible { outline: 3px solid var(--warn, #9a3d06); outline-offset: 2px; }
/* the streak chip (study-B6-02): a quiet count of past days, never a warning */
.sstreak { margin-left: auto; padding: 2px var(--s3, 12px); border: 1px solid var(--line, #e1e5ec); border-radius: var(--r-pill, 999px); color: var(--muted, #566074); font-size: var(--fs-sm, .875rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sstreak + .tl-lang { margin-left: var(--s3, 12px); }
/* the grade this list was made for (R3-sys-11), and the buttons of the two notices (R3-rage-9, R3-rage-10) */
.sgrade { margin-left: auto; padding: 2px var(--s3, 12px); border: 1px solid var(--line, #e1e5ec); border-radius: var(--r-pill, 999px); color: var(--muted, #566074); font-size: var(--fs-sm, .875rem); white-space: nowrap; }
.sstreak + .sgrade { margin-left: var(--s2, 8px); }
.sgrade + .tl-lang, .sstreak + .tl-lang { margin-left: var(--s3, 12px); }
.snote .slink { padding: 0 var(--s2, 8px); }
.snote a.slink { display: inline-flex; align-items: center; }
#reload { margin: 0 var(--s5, 24px); }
/* phone header (L04-12): the back link is "<- Back" on one line, the language select shrinks to an icon-size tap target */
.sb-arrow { margin-inline-end: var(--s1, 4px); }
.sb-short { display: none; }
@media (max-width: 560px) {
  .sb-long { display: none; }
  .sb-short { display: inline; }
  .sbar a { white-space: nowrap; }
  .sbar .tl-lang { width: var(--tap, 44px); padding: 0; color: transparent; appearance: none; -webkit-appearance: none; cursor: pointer;
    background: var(--surface, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23788' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E") center / 22px no-repeat; }
  .sbar .tl-lang option { color: var(--ink, #172033); }
}
/* round 3 AX: the language select edge is 3:1 (L12-1) and shows in Windows High Contrast (L12-10) */
.sbar .tl-lang { border-color: var(--off, #7a8496); }
@media (forced-colors: active) { .sbar .tl-lang { border-color: ButtonText; } }