/* ui/shared-account.css */
/* Scoped shared entry tokens; never apply the preview's page-wide styles. */
.sokkos-account-button {
  min-width:44px; min-height:44px; padding:10px 14px;
  border:1px solid var(--account-border,#e6dfd6); border-radius:11px;
  background:var(--account-surface,#fffefa); color:var(--account-ink,#1d282c);
  font:inherit; font-size:16px; line-height:1.35; font-weight:550;
  cursor:pointer; white-space:normal;
}
.sokkos-account-button.sokkos-account-primary {
  --account-accent:#c8441a;--account-on-accent:#fff;
  background:var(--account-accent); border-color:var(--account-accent); color:var(--account-on-accent);
}
.sokkos-account-button:focus-visible {outline:3px solid #c8441a;outline-offset:3px}
.sokkos-account-button:disabled {cursor:default;opacity:.55}
[data-theme=dark] .sokkos-account-button, [data-sk-theme=dark] .sokkos-account-button {
  --account-border:#48545a;--account-surface:#20292e;--account-ink:#f5f1eb;
}
@media(max-width:650px) {.sokkos-account-button{padding:9px 11px}}


/* index.html */

  /* ---------- Design tokens — docs/DESIGN.md §1 ----------
     Paper, warm. There is NO blue background: the dark blue is the colour of ink and of
     book covers, never of the canvas. Values come from the source of the mock (counted by
     frequency), not from a screenshot. */
  :root{
    --paper:#dedad0;          /* the canvas                                        */
    --surface:#f2efe7;        /* the screen inside it                              */
    --card:#faf8f3;           /* a card                                            */
    --card-alt:#f6f4ee;       /* light fill; also the text that sits on ink        */
    --ink:#16283c;            /* body text, dark covers                            */
    --ink-2:rgba(22,40,60,.62);   /* secondary text                                */
    --ink-3:rgba(22,40,60,.55);   /* tertiary text                                 */
    --ink-4:rgba(22,40,60,.45);   /* eyebrows, the quietest label                  */
    --rule:rgba(22,40,60,.2);     /* outline of a control                          */
    --accent:#c8842c;         /* ochre                                             */
    --accent-2:#b3624a;       /* terracotta                                        */
    --sage:#6f8a5f;
    --sage-dark:#4d6740;
    --amber-dark:#8a5a17;
    /* Cover colours, rotated across the catalogue (DESIGN §3). */
    --cover-1:#16283c; --cover-2:#4d6740; --cover-3:#3b3630; --cover-4:#2c3e50;

    /* Names the rest of this stylesheet already speaks, pointed at the paper palette. */
    --bg:var(--paper); --card2:var(--surface);
    --txt:var(--ink); --mut:var(--ink-2);
    --acc:var(--accent);      /* secondary accent (ochre)     */
    --acc2:var(--accent-2);   /* primary accent (terracotta)  */
    /* Ochre AS TEXT on paper is 2.8:1 — readable to me on a good screen and not to the
       reader this product exists for. `amber-dark` is the mock's own dark ochre and the
       same accent one step down, so accents that carry WORDS use it (5.8:1) while accents
       that only draw a line or a hover keep the bright one. */
    --acc-txt:var(--amber-dark);
    --ok:var(--sage-dark);    /* success                      */
    --on-ink:var(--card-alt); /* text laid over ink or accent */
    --line:rgba(22,40,60,.15);
    --inset:var(--surface);   /* recessed field / chip        */
    --shadow:0 18px 44px rgba(22,40,60,.13);
    --r:14px;

    /* The column everything on the page lives in, and the inset from its edge. Declared once
       because the header and the canvas below it have to agree: when they did not, the title
       and the filters ran the full width of a 1280px screen while the catalogue sat in a
       920px sheet underneath, and nothing on the screen lined up with anything else. */
    --col:920px;
    --gutter:16px;

    /* Type. Serif for names, sans for the interface, mono for labels (DESIGN §2). */
    --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
    --sans:'IBM Plex Sans',system-ui,Segoe UI,Roboto,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{background:var(--paper)}
  body{
    background:var(--paper); color:var(--txt);
    font:1rem/1.5 var(--sans);
    -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
    padding-bottom:84px; /* room for floating create button */
  }
  button{font-family:inherit}
  ::selection{background:var(--acc2);color:var(--on-ink)}
  /* Eyebrow — mono, upper case, the quietest ink (DESIGN §2). Written once and pointed at
     the three labels that wear it, rather than as a class no element actually carries. */
  .recsec-title,.topic .tname,.card .side{
    font-family:var(--mono);font-size:0.65625rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-4);
  }

  /* ---------- Sticky header ----------
     The bar itself spans the window (it is the edge of the page, and its rule should reach
     both sides); its CONTENTS sit in the same column as the canvas below, so the title, the
     progress and the filters line up with the sections of the catalogue. */
  header{
    position:sticky; top:0; z-index:20;
    background:linear-gradient(180deg,var(--paper) 70%,rgba(222,218,208,.92));
    backdrop-filter:blur(6px);
    padding:12px 0 calc(12px + env(safe-area-inset-bottom,0));
    padding-top:calc(12px + env(safe-area-inset-top,0));
    border-bottom:1px solid var(--line);
  }
  header>.htop,header>.barrow,header>.filters{
    max-width:var(--col);margin-left:auto;margin-right:auto;
    padding-left:var(--gutter);padding-right:var(--gutter);
  }
  .htop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  h1{margin:0;font-family:var(--serif);font-size:1.4375rem;font-weight:600;letter-spacing:0}
  /* The second half of the wordmark carries the accent, so the name reads as one mark with
     a stress rather than two words of equal weight — the family name stays quiet, the
     product name is what the eye lands on. */
  h1 .wm{color:var(--acc-txt)}
  .pct{color:var(--mut);font-family:var(--mono);font-size:0.71875rem;font-weight:500;white-space:nowrap}
  .barrow{display:flex;align-items:center;gap:10px;margin-top:8px}
  .barrow .bar{flex:1;margin-top:0}
  .bar{height:6px;background:rgba(22,40,60,.1);border-radius:6px;overflow:hidden;margin-top:8px}
  .bar>i{display:block;height:100%;width:0;border-radius:6px;
    background:linear-gradient(90deg,var(--accent-2),var(--sage-dark));transition:width .4s ease}

  /* ---------- Interface-language switcher (header) ----------
     Self-names only: a beginner must recognise their own language, so these four
     labels are never translated and never replaced by a flag. */
  .uilang{position:relative;align-self:center}
  /* The chip: globe + a short self-designation of the CURRENT language (NL / РУС / УКР / EN —
     the same abbreviations these keyboards show, so each audience recognises its own). */
  .uilang summary{
    list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
    background:var(--card);color:var(--txt);border:1px solid var(--line);
    border-radius:20px;padding:4px 10px;font-size:0.75rem;font-weight:700;
    line-height:1.3;white-space:nowrap;transition:.15s;
  }
  .uilang summary::-webkit-details-marker{display:none}
  .uilang summary::after{content:'▾';color:var(--mut);font-size:0.625rem;line-height:1}
  .uilang summary:hover{border-color:var(--acc)}
  .uilang summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .uilang[open] summary{background:var(--card2);border-color:var(--acc)}
  .uilang .globe{font-size:0.8125rem;line-height:1}
  /* The menu: full self-names, never translated and never abbreviated. */
  .uimenu{
    position:absolute;top:calc(100% + 6px);left:0;z-index:40;
    background:var(--card2);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow);padding:5px;min-width:158px;
    display:flex;flex-direction:column;gap:2px;
  }
  .uimenu button{
    background:transparent;color:var(--txt);border:none;border-radius:8px;
    padding:9px 11px;font-size:0.875rem;font-weight:600;text-align:left;
    cursor:pointer;white-space:nowrap;transition:.12s;
  }
  .uimenu button:hover{background:var(--card)}
  .uimenu button[aria-pressed="true"]{background:var(--acc2);color:var(--on-ink)}
  .uimenu button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}

  /* ---------- Account ---------- */
  /* Outbound chip (currently: motor.sokkosai.com). Same shape as the language and account
     chips because it belongs to the same row of small controls — but it is a real <a> with
     a real href, so it middle-clicks and shows its destination in the status bar the way a
     link is supposed to. It opens in a NEW tab: this one leaves the site entirely, and a
     learner halfway through a block should not lose their place to a curiosity click. The
     ↗ says so before the click, and every outbound link on this page behaves the same. */
  .xsite{
    align-self:center;display:inline-flex;align-items:center;gap:5px;
    background:var(--card);color:var(--txt);border:1px solid var(--line);
    border-radius:20px;padding:4px 11px;font-size:0.75rem;font-weight:700;line-height:1.3;
    text-decoration:none;white-space:nowrap;transition:.15s;
  }
  .xsite:hover{border-color:var(--acc)}
  .xsite:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .xsite .xarrow{font-size:0.625rem;color:var(--mut)}
  footer{
    max-width:var(--col);margin:36px auto 0;
    padding:20px var(--gutter,16px) calc(84px + env(safe-area-inset-bottom,0));
    border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
    font-size:0.8125rem;color:var(--ink-3);
  }
  footer a{color:var(--acc-txt);text-decoration:none;border-bottom:1px solid transparent}
  footer a:hover{border-bottom-color:var(--acc)}
  footer a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  footer .xarrow{font-size:0.625rem;color:var(--ink-4);margin-left:3px}
  .fmark{
    font-family:var(--mono);font-size:0.65625rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-4);margin-right:auto;
  }
  .authchip{
    align-self:center;background:var(--card);color:var(--txt);border:1px solid var(--line);
    border-radius:20px;padding:4px 11px;font-size:0.75rem;font-weight:700;line-height:1.3;
    cursor:pointer;transition:.15s;white-space:nowrap;max-width:44vw;
    overflow:hidden;text-overflow:ellipsis;
  }
  .authchip:hover{border-color:var(--acc)}
  .authchip:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .authchip.in{border-color:var(--ok);color:var(--ok)}
  .htop > .sokkos-account-button{align-self:center}
  #authEntries{display:flex;align-items:center;gap:7px;min-width:0}
  .authchip.sokkos-account-button{
    border-radius:11px;padding:10px 14px;font-size:16px;font-weight:550;line-height:1.35;
  }
  .autherr{
    margin-top:12px;padding:10px 12px;border-radius:10px;background:#f7e9e4;
    border:1px solid var(--acc2);color:#7d3b28;font-size:0.8125rem;line-height:1.45;
  }
  .autherr[hidden]{display:none}
  .wholine{font-size:0.9375rem}
  .linkbtn{
    background:none;border:none;padding:4px 0;margin:0;font:inherit;font-size:0.8125rem;
    color:var(--acc-txt);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  }
  .linkbtn:hover{color:var(--txt)}
  .linkbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
  .authlinks{margin-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .recsec{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
  .recsec-status{margin-top:7px;font-size:0.875rem;color:var(--txt)}
  .recsec-note{margin-top:6px;font-size:0.78125rem;line-height:1.5;color:var(--mut)}
  .learner-prefs .pref-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:12px}
  .learner-prefs .pref-wide{grid-column:1/-1}
  .learner-prefs .pref-checks{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:7px}
  .learner-prefs .pref-checks label{display:flex;align-items:center;gap:6px;margin:0;color:var(--txt)}
  .learner-prefs select{width:100%;background:var(--card2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:9px}
  .learner-prefs [data-pref-error]{min-height:1.4em;margin-top:8px;color:var(--bad);font-size:0.78125rem}
  .learner-prefs [data-pref-error].ok{color:var(--good)}
  .recwarn-inline{
    margin-top:12px;padding:10px 12px;border-radius:10px;background:#f7e9e4;
    border:1px solid var(--acc2);color:#7d3b28;font-size:0.8125rem;line-height:1.45;
  }
  .recextra{margin-top:10px;font-size:0.84375rem;line-height:1.5;color:#7d3b28;font-weight:600}
  .recstill{margin-top:10px;font-size:0.78125rem;line-height:1.5;color:#7d3b28;opacity:.95}
  .wholine b{color:var(--acc-txt);word-break:break-word}

  /* Recovery code: the only way back into an account, so it is deliberately hard to skip. */
  .recwarn{border:1px solid var(--acc2);background:#f7e9e4;border-radius:14px;padding:16px}
  .recwarn .rw1{font-size:1.0625rem;font-weight:700;color:#7d3b28;margin-bottom:8px}
  .recwarn .rw2{font-size:0.84375rem;line-height:1.55;color:#7d3b28}
  .reccode{
    display:flex;gap:9px;align-items:center;margin:14px 0 12px;
    background:var(--inset);border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  }
  .reccode code{
    flex:1;min-width:0;color:var(--txt);word-break:break-all;user-select:all;
    font:700 0.9375rem/1.4 var(--mono);
  }

  /* tab rows (create-modal / account mode switchers) */
  .tabs{display:flex;gap:8px;margin-top:11px}
  .tabs button{
    flex:1;background:var(--card);color:var(--mut);
    border:1px solid var(--line);border-radius:10px;padding:9px 8px;
    font-size:0.875rem;font-weight:600;cursor:pointer;transition:.15s;
  }
  .tabs button.on{background:var(--card2);color:var(--txt);border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
  .tabs button:disabled{opacity:.55;cursor:default;box-shadow:none}
  /* Create-modal mode switcher (tabs reused, slightly tighter) */
  .tabs.cmode{margin-top:0;margin-bottom:4px}
  .tabs.cmode button{font-size:0.8125rem;padding:9px 6px}
  /* Hide obsolete product-registration entry points even under author display rules. */
  #authRegisterEntry[hidden],#whyRegister[hidden],#authMode [data-m="register"][hidden],#authCentralChoice[hidden]{display:none!important}

  /* Filters — DESIGN §4: the active one filled with ink, the rest outlined. */
  .filters{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
  .filters button{
    background:transparent;color:var(--ink-2);border:1px solid var(--rule);
    border-radius:5px;padding:8px 13px;font-size:0.78125rem;cursor:pointer;transition:.15s;
  }
  .filters button:hover{border-color:var(--accent);color:var(--ink)}
  .filters button.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

  /* Primary nav — same pill language as the filters row, one size up: this picks a whole
     screen, not a view of one. */
  .navtabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
  .navtabs button{
    background:transparent;color:var(--ink-2);border:1px solid var(--rule);
    border-radius:6px;padding:9px 15px;font-size:0.8125rem;font-weight:500;cursor:pointer;transition:.15s;
  }
  .navtabs button:hover{border-color:var(--accent);color:var(--ink)}
  .navtabs button.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
  /* An author `display` rule otherwise beats the UA's own `[hidden]{display:none}` — same
     specificity, author origin always wins over user-agent origin regardless of selector
     weight. Any element toggled by `.hidden` needs this named explicitly; the property alone
     reading `true` proves nothing about what is actually on screen. `.wn-act` found live,
     not by a reviewer or a test: a signed-in person opening the honest "Assignment isn't
     built yet" panel still saw "Create an account" / "I already have one" sitting under it
     — the very same trap, on a row this session did not add and did not think to re-check.
     It was reachable before this deploy too, on every OTHER refusal kind that also carries
     `actions:false` (limit/busy/spend/fault) — a signed-in person hitting a rate limit would
     have seen the same two buttons offering an account they already have. */
  .filters[hidden],.navtabs[hidden],.barrow[hidden],.whynote .wn-act[hidden]{display:none}

  /* ---------- Home (screen 1a) ---------- */
  .home{padding:26px var(--gutter,26px) 40px;display:flex;flex-direction:column;gap:22px;max-width:680px;margin:0 auto}
  .home-greet h2{font:600 1.625rem/1.3 var(--serif);color:var(--ink);margin:0 0 6px}
  .home-greet p{font-size:0.875rem;color:var(--ink-2);margin:0}
  .home-chat{background:var(--card);border:1px solid var(--rule);border-radius:8px;overflow:hidden;
    display:flex;flex-direction:column;height:min(58vh,480px)}
  .home-chat .chatbar{border-radius:0 0 8px 8px}
  .home-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .home-actions button{
    text-align:left;background:var(--card);border:1px solid var(--rule);border-radius:8px;
    padding:13px 16px;font:0.875rem var(--sans);color:var(--ink);cursor:pointer;transition:.15s;
  }
  .home-actions button:hover{border-color:var(--accent)}
  .home-actions button .lbl{font-weight:600}
  .home-analytics{background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:15px}
  .home-analytics h3{font:600 1.125rem/1.3 var(--serif);margin:0 0 10px;color:var(--ink)}
  .home-analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .home-analytics-item{min-width:0;border-top:1px solid var(--rule);padding-top:8px}
  .home-analytics-value{display:block;font:600 1.1875rem/1.2 var(--mono);color:var(--accent);overflow-wrap:anywhere}
  .home-analytics-label,.home-analytics-detail{display:block;color:var(--ink-2);font-size:0.75rem;line-height:1.4}
  .home-analytics-detail{margin:10px 0 0}
  .home-analytics-unavailable{margin:0;color:var(--ink-2);font-size:0.8125rem}
  @media(max-width:640px){.home-actions,.home-analytics-grid,.learner-prefs .pref-grid{grid-template-columns:1fr}.learner-prefs .pref-wide{grid-column:auto}}

  /* ---------- The canvas of the screen, and the grid inside it — DESIGN §3 + §4 ----------
     One element, not two. The mock gives the grid `padding:26px 44px 40px` and gives the
     canvas its paper, border and shadow; the padding is the same padding, so making the
     canvas ITSELF the grid is the honest reading rather than a wrapper that exists only to
     hold a `display:grid`.

     It is also load-bearing for the checks: `tools/check_auth_ui.py` walks `#app > *` in
     document order to decide which section a card belongs to. Wrapping the cards in a grid
     container of their own would have left that walk finding one wrapper and no cards — the
     check would have gone quiet rather than red. Sections and topic headings therefore span
     the whole row and the cards are the cells. */
  main{
    max-width:var(--col);margin:16px auto 0;
    background:var(--surface);border:1px solid rgba(22,40,60,.18);border-radius:7px;
    box-shadow:var(--shadow);
    padding:26px var(--gutter) 40px;   /* the grid's own padding, per the mock */
    overflow:hidden;                   /* a wide child scrolls itself, never the page */
    display:grid;gap:20px;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));
    align-content:start;
  }
  /* Room for three columns and for the mock's wider inset arrives together. */
  @media(min-width:760px){
    :root{--gutter:44px}
    main{grid-template-columns:repeat(3,1fr)}
  }
  /* On a phone the sheet goes edge to edge: a 10px rim of paper around a page that is
     already all page reads as a mistake, and it would put the header's text and the
     catalogue's text on two different left edges. */
  @media(max-width:700px){
    main{margin:10px 0 0;border-left:none;border-right:none;border-radius:0;gap:14px;
         padding-bottom:28px}
  }
  /* Everything that is not a card runs the full width of the grid — `.home` included: the
     Agent-home screen's wrapper is `#app`'s only child on that view, but like `.sec`/`.topic`/
     `.empty` it is not a card and was missing from this list. At ≥760px that left it pinned in
     main's column 1 of 3, ~413px wide against the left edge, with its own
     `max-width:680px;margin:0 auto` (line 234) never getting a container wide enough to apply
     against. */
  .sec,.empty,.home,.libmore,.libnote,.viewhead{grid-column:1 / -1}
  .sec{margin:2px 0 -6px}
  .sec:first-child{margin-top:0}
  .sec h2{
    font-family:var(--serif);font-size:1.625rem;font-weight:600;letter-spacing:0;
    color:var(--ink);text-transform:none;
    margin:0 0 9px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  }
  .sec h2 .cnt{
    font-family:var(--mono);font-size:0.71875rem;font-weight:500;color:var(--ink-3);white-space:nowrap;
  }

  .topic{
    display:flex;align-items:center;gap:10px;
    margin:8px 0 -6px;border-left:2px solid var(--accent);padding-left:10px;
  }
  .topic .tname{flex:1}
  .topic .tcount{font-family:var(--mono);font-size:0.65625rem;color:var(--ink-4)}
  .quizbtn{
    background:transparent;color:var(--amber-dark);border:1px solid var(--rule);
    border-radius:5px;padding:6px 12px;font-size:0.78125rem;cursor:pointer;transition:.15s;white-space:nowrap;
  }
  .quizbtn:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
  .quizbtn:disabled{opacity:.4;border-color:var(--line);color:var(--ink-3);cursor:default;background:transparent}

  /* ---------- One material, one tile — DESIGN §3 ----------
     The card is a cell of the grid declared on `main` above. It is `align-self:start` so a
     tall neighbour cannot stretch a short card's cover out of its 16/9. */
  .block{
    background:var(--card);border:1px solid rgba(22,40,60,.15);border-radius:8px;
    overflow:hidden;transition:border-color .2s,box-shadow .2s;align-self:start;
  }
  .block.done{border-color:var(--sage)}
  .block:hover{border-color:var(--rule);box-shadow:0 6px 18px rgba(22,40,60,.08)}
  /* The whole card is the button: cover and body together, one target, one focus ring. */
  .row{display:block;cursor:pointer;user-select:none}
  .row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

  /* The cover: 16/9, its name in the middle, the mark top right, the label bottom left. */
  .cover{
    position:relative;aspect-ratio:16/9;background:var(--cover-1);
    display:flex;align-items:center;justify-content:center;
  }
  .cover .ttl{
    font-family:var(--serif);font-size:1.25rem;line-height:1.25;font-weight:400;
    color:var(--card-alt);text-align:center;padding:0 20px;
    overflow-wrap:break-word;word-break:normal;
  }
  /* ENVELOPE iron rule 11 — every finished piece carries the mark. Never translated: it is
     an address, not a word. */
  .cover .mark{
    position:absolute;top:9px;right:11px;
    font-family:var(--mono);font-size:0.59375rem;color:rgba(246,244,238,.55);letter-spacing:.02em;
  }
  .cover .kind{
    position:absolute;left:11px;bottom:9px;
    font-family:var(--mono);font-size:0.625rem;color:rgba(246,244,238,.75);
  }
  /* Card body — DESIGN §3. */
  .cbody{padding:15px 16px;display:flex;flex-direction:column;gap:9px}
  /* The topic, as the card's eyebrow — the same treatment it had as a section heading, now
     travelling with the card so the grid can flow. See the note in render(). */
  /* The row is a flex container, so the truncation CANNOT live on it: `text-overflow` does
     not apply to a flex box, and the topic — an anonymous flex item — would keep its full
     width and shove the rating off the card, where `overflow:hidden` would simply eat it.
     The label gets its own element, and that element does the truncating. */
  .cbody .ctopic{
    font-family:var(--mono);font-size:0.65625rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-4);display:flex;align-items:baseline;gap:8px;
  }
  .cbody .ctopic .cname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .cbody .ctopic .crate{margin-left:auto;color:var(--acc-txt);letter-spacing:.06em;flex:none}

  /* ---------- The head of a view: what this screen is, and its own controls ---------- */
  .viewhead{margin:0 0 4px}
  .viewhead h2{
    font-family:var(--serif);font-size:1.625rem;font-weight:600;color:var(--ink);margin:0;
  }
  .viewhead .vsub{margin:5px 0 0;font-size:0.84375rem;color:var(--ink-3)}
  .vctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
  .vchips{display:flex;gap:6px;flex-wrap:wrap}
  .vscope{display:inline-flex;gap:0;margin:0 0 10px;border:1px solid var(--line,#d9d2c3);border-radius:12px;overflow:hidden;max-width:100%}
  .vscope button{font:inherit;font-weight:600;padding:10px 16px;min-height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;flex:1 1 auto}
  .vscope button+button{border-left:1px solid var(--line,#d9d2c3)}
  .vscope button.on{background:var(--ink);color:var(--on-ink)}
  .vscope button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .cbadge{display:inline-block;font-size:0.6875rem;line-height:1;padding:3px 7px;border-radius:999px;border:1px solid currentColor;opacity:.85;white-space:nowrap}
  .vchips button{
    background:transparent;color:var(--ink-2);border:1px solid var(--rule);
    border-radius:5px;padding:6px 12px;font-size:0.78125rem;cursor:pointer;transition:.15s;
    white-space:nowrap;font-family:inherit;
  }
  .vchips button:hover{border-color:var(--acc)}
  .vchips button.on{background:var(--ink);color:var(--card-alt);border-color:var(--ink)}
  .vchips button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .vfacets{margin-top:10px;width:100%}
  .vfacets summary{cursor:pointer;font-size:0.8125rem;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;min-height:32px}
  .vfacets .vf-count{background:var(--ink);color:var(--card-alt);border-radius:999px;font-size:0.6875rem;padding:1px 7px}
  .vfacets .vf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 10px;margin-top:8px;align-items:end}
  .vfacets .vf{display:flex;flex-direction:column;gap:3px;font-size:0.75rem;color:var(--mut)}
  .vfacets .vf select{font:inherit;font-size:0.875rem;padding:7px 8px;border:1px solid var(--rule);border-radius:8px;background:var(--card);color:var(--ink);min-width:0;width:100%;min-height:40px}
  .vfacets .vf select:focus-visible,.vfacets summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .vfacets .vf-reset{padding:7px 10px}
  .vfacets .vf-note{margin:10px 0 0;font-size:0.75rem;line-height:1.4;color:var(--mut)}
  .cbody .cfacts{color:var(--mut);font-size:0.75rem;margin-top:4px}
  .vsearch{
    display:flex;align-items:center;gap:7px;margin-left:auto;
    background:var(--card);border:1px solid var(--rule);border-radius:5px;padding:5px 11px;
    min-width:240px;flex:0 1 340px;
  }
  .vsearch:focus-within{border-color:var(--acc)}
  .vsearch span{font-size:0.75rem;opacity:.65;flex:none}
  .vsearch input{
    border:0;background:transparent;outline:none;font:inherit;font-size:0.8125rem;
    color:var(--txt);width:100%;min-width:0;
  }
  @media(max-width:700px){ .vsearch{margin-left:0;flex-basis:100%} }
  /* The quiz strip, a sibling of .row rather than a child — see the note in blockEl. The
     negative margin closes the gap .cbody's own bottom padding would otherwise leave, so it
     still reads as the last line of the card and not as a separate thing under it. */
  .cfoot{padding:0 16px 15px;margin-top:-7px}
  .cfoot .cquiz{padding:5px 11px;font-size:0.75rem}
  .cbody .cmeta{display:flex;align-items:baseline;gap:8px;min-width:0}
  .cbody .st{font-size:0.875rem;line-height:1;flex:none}
  .cbody .prog{
    font-family:var(--mono);font-size:0.6875rem;color:var(--ink-2);flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .cbody .date{font-family:var(--mono);font-size:0.625rem;color:var(--ink-4);white-space:nowrap}
  .cbody .bar{margin-top:0}

  /* The last cell of the catalogue: make one of your own (DESIGN §3). It does exactly what
     the floating button does — the same handler, not a second path to keep in step. */
  .maketile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    min-height:150px;padding:18px 16px;text-align:center;cursor:pointer;
    background:transparent;border:1px dashed var(--rule);border-radius:8px;
    color:var(--ink-2);font-family:inherit;transition:.15s;align-self:start;
  }
  .maketile:hover{border-color:var(--accent);color:var(--ink)}
  .maketile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .maketile .mt1{font-family:var(--serif);font-size:1.0625rem;color:var(--ink)}
  .maketile .mt2{font-size:0.78125rem;line-height:1.45;color:var(--ink-3)}

  /* The card body is never shown inside the card: a tap portals this node into the
     fullscreen view (see #bfBody below), which is where it becomes visible. */
  .body{display:none;padding:2px 14px 16px;border-top:1px solid var(--line)}

  audio,video{width:100%;margin-top:12px;border-radius:8px;background:var(--ink)}
  .media-variant{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--mut);font-size:0.75rem;font-weight:600}
  .media-variant select{max-width:100%;background:var(--card2);color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
  /* preload="none" means the browser has no frame dimensions until playback actually starts,
     so without this the element grows from a small intrinsic default to its real size right
     as someone starts watching — shifting everything above it, including the modal's own ×.
     1280x720 is the slides' real, fixed render size (tools/slide_lib.py), not a guess. */
  video{aspect-ratio:16/9}

  /* ---------- Per-phrase progress list ---------- */
  .phrases{margin-top:14px}
  .phead{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-family:var(--mono);font-size:0.6875rem;color:var(--ink-2)}
  .phead .pcnt{flex:1}
  .phead .pcnt b{color:var(--ok)}
  .ptoggle{
    background:var(--card2);color:var(--txt);border:1px solid var(--line);
    border-radius:14px;padding:4px 11px;font-size:0.75rem;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;
  }
  .ptoggle:hover{background:var(--card)}
  .ptoggle:disabled{opacity:.5;cursor:default}
  .plist{display:flex;flex-direction:column;gap:1px}
  .pitem{
    display:flex;align-items:flex-start;gap:9px;padding:6px 8px;border-radius:8px;
    cursor:pointer;transition:background .12s;font-size:0.875rem;line-height:1.35;
  }
  .pitem:hover{background:var(--inset)}
  .pitem input{width:18px;height:18px;accent-color:var(--ok);cursor:pointer;flex:none;margin-top:2px}
  .pitem .ptxt{flex:1;min-width:0;word-break:break-word;display:flex;flex-direction:column;gap:1px}
  .pmain{display:block}
  .pnum{font-family:var(--mono);color:var(--ink-4);font-size:0.6875rem;margin-right:1px}
  .pnl{font-weight:600;color:var(--txt)}
  .pru{color:var(--acc-txt)}
  .ptrack-unavailable{color:var(--mut);font-size:0.75rem}
  .pmain--tracks{display:grid;grid-template-columns:1.2rem minmax(0,1fr);gap:4px;align-items:start}
  .ptext-tracks{display:grid;gap:6px;min-width:0}
  .ptext-row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:start;min-width:0;line-height:1.5}
  .ptext-row>span:last-child{min-width:0;overflow-wrap:anywhere}
  .ptext-lang{font-family:var(--mono);font-size:0.6875rem;font-weight:600;line-height:1.8;color:var(--mut)}
  .pex.pex--tracks{display:grid;grid-template-columns:1.2rem minmax(0,1fr);gap:4px;margin-top:8px}
  .pex--tracks .ptext-tracks{margin-top:0}

  .pdash{color:var(--mut);margin:0 4px}
  /* example line — smaller and muted, sits under the main phrase */
  .pex{display:block;font-size:0.75rem;color:var(--mut);line-height:1.3}
  .pexru{color:var(--mut);opacity:.85}
  /* when a phrase is studied, mute the whole row */
  .pitem.on .pnl{color:var(--mut);text-decoration:line-through}
  .pitem.on .pru{color:var(--mut);opacity:.7}
  /* seekable phrase: clicking its text jumps the video to its timecode */
  .pitem.seek .ptxt{cursor:pointer}
  .pitem.seek .pnl{border-bottom:1px dotted var(--acc)}
  .pitem.seek .ptxt:hover .pnl{color:var(--acc-txt)}
  .soon{color:var(--mut);font-size:0.8125rem;margin-top:12px;font-style:italic;
    background:var(--inset);border-radius:10px;padding:11px 13px}

  .notewrap{margin-top:13px;position:relative}
  .notewrap label{display:block;font-size:0.75rem;color:var(--mut);margin-bottom:5px;font-weight:600}
  .cmt{
    width:100%;background:var(--inset);color:var(--txt);
    border:1px solid var(--line);border-radius:10px;padding:11px;
    font:0.875rem/1.45 var(--sans);resize:vertical;min-height:60px;
  }
  .cmt:focus{outline:none;border-color:var(--acc)}
  .save{font-size:0.75rem;color:var(--ok);opacity:0;transition:.3s;margin-left:8px}
  .save.show{opacity:1}

  /* Shared button styles (used by assistant, create, quiz, chat) */
  .btn{
    background:var(--acc2);color:var(--on-ink);border:none;border-radius:10px;
    padding:10px 15px;font-size:0.875rem;font-weight:600;cursor:pointer;transition:.15s;flex:none;
  }
  .btn:hover{filter:brightness(1.08)}
  .btn:disabled{opacity:.5;cursor:default;filter:none}
  .btn.ghost{background:var(--card2);color:var(--txt);border:1px solid var(--line)}
  .btn.ok{background:var(--ok);color:var(--on-ink)}

  /* ---------- Block: note + assistant (two separate zones) ---------- */
  /* Small label line; the model-credits sit muted to the right. */
  .alabel{display:flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--mut);margin-bottom:5px;font-weight:600}
  .alabel .models{margin-left:auto;font-weight:400;opacity:.75;font-size:0.6875rem;white-space:nowrap}
  /* Note zone */
  .note{margin-top:14px;border-top:1px dashed var(--line);padding-top:13px}
  /* Assistant (ask AI) zone */
  .assist{margin-top:14px;border-top:1px dashed var(--line);padding-top:13px}
  .assist .arow{display:flex;gap:8px;align-items:flex-end}
  .assist textarea.cmt{flex:1;min-height:46px}
  /* On narrow screens the buttons drop below the field. */
  @media(max-width:430px){
    .assist .arow{flex-wrap:wrap}
    .assist .arow textarea.cmt{flex:1 1 100%}
  }
  /* Video-generate button on a block */
  .vidgen{
    display:inline-flex;align-items:center;gap:7px;margin-top:12px;
    background:var(--card2);color:var(--txt);border:1px solid var(--acc);
    border-radius:10px;padding:9px 14px;font-size:0.8125rem;font-weight:600;cursor:pointer;transition:.15s;
  }
  .vidgen:hover{background:var(--card)}
  .vidgen:disabled{opacity:.6;cursor:default;border-color:var(--line)}
  .vidgen .spin{display:inline-block;animation:spin 1s linear infinite}
  .vstatus{
    display:flex;align-items:center;gap:8px;margin-top:12px;
    background:var(--inset);border:1px solid var(--line);border-radius:10px;
    padding:10px 12px;color:var(--mut);font-size:0.8125rem;font-weight:600;
  }
  /* Author display rules beat the UA [hidden] rule. Playback errors start hidden and only
     become visible after a real media error event, so preserve that state explicitly. */
  .vstatus[hidden]{display:none}
  .vstatus .spin{display:inline-block;animation:spin 1s linear infinite;color:var(--acc-txt)}
  .vstatus.fail{border-color:var(--acc2);color:var(--acc-txt)}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* Mic button + send button column */
  .mic{
    background:var(--card2);color:var(--txt);border:1px solid var(--line);
    border-radius:10px;width:44px;height:44px;font-size:1.125rem;cursor:pointer;flex:none;transition:.15s;line-height:1;
  }
  .mic:hover{background:var(--card)}
  .mic.rec{background:var(--acc2);border-color:var(--acc2);color:var(--on-ink);animation:pulse 1.1s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(179,98,74,.45)}50%{box-shadow:0 0 0 7px rgba(179,98,74,0)}}
  .mic:disabled{opacity:.5;cursor:default;animation:none}
  .recnote{font-size:0.75rem;color:var(--acc-txt);margin-top:6px;display:none;align-items:center;gap:6px}
  .recnote.on{display:flex}
  .recnote .dot{width:9px;height:9px;border-radius:50%;background:var(--acc2);animation:pulse 1.1s ease-in-out infinite}
  /* Conversation log (ты / ИИ pairs) */
  .convo{margin-top:11px;display:none;flex-direction:column;gap:8px}
  .convo.on{display:flex}
  .cmsg{max-width:92%;padding:9px 12px;border-radius:12px;font-size:0.875rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
  .cmsg.u{align-self:flex-end;background:var(--acc2);color:var(--on-ink);border-bottom-right-radius:4px}
  .cmsg.a{align-self:flex-start;background:var(--inset);border:1px solid var(--line);border-left:3px solid var(--acc);color:var(--txt);border-bottom-left-radius:4px}
  .cmsg.a.err{border-left-color:var(--acc2);color:var(--mut);font-style:italic}
  .cmsg.a strong{color:var(--acc-txt)}
  .cmsg.typing{color:var(--mut);font-style:italic}

  /* ---------- Empty / loading states ---------- */
  .empty{text-align:center;color:var(--mut);padding:60px 20px;font-size:0.9375rem}
  .empty .big{font-size:2.625rem;display:block;margin-bottom:12px}

  /* ---------- Floating create button ---------- */
  .fab{
    position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0));z-index:30;
    background:var(--acc2);color:var(--on-ink);border:none;border-radius:28px;
    padding:14px 20px;font-size:0.9375rem;font-weight:700;cursor:pointer;
    box-shadow:0 8px 22px rgba(22,40,60,.16);transition:.15s;
  }
  .fab:hover{filter:brightness(1.08)}
  /* Secondary FAB: AI chat (left side, card-toned to distinguish from create). */
  .fab.chat{
    right:auto;left:18px;background:var(--card2);color:var(--txt);
    border:1px solid var(--acc);box-shadow:0 8px 22px rgba(22,40,60,.16);
  }
  .fab.chat:hover{background:var(--card);filter:none}

  /* ---------- Chat modal ---------- */
  /* The chat modal flexes to a tall column so the message log scrolls
     while the composer stays pinned to the bottom. */
  /* Agent has a real reading column, with its composer anchored to the bottom. */
  #chatOv{overflow:hidden}
  #chatOv .modal.chat{display:flex;flex-direction:column;min-height:0;height:88vh;height:88dvh;
    max-height:88vh;max-height:88dvh;max-width:880px;margin:auto}
  #chatOv .chatlog,#homeChatDock .chatlog{flex:1 1 auto;min-height:0;overflow-y:auto;
    overscroll-behavior:contain;padding:clamp(16px,3vw,30px);
    display:flex;flex-direction:column;gap:14px}
  #chatOv .msg,#homeChatDock .msg{max-width:min(90%,760px);padding:14px 17px;border-radius:14px;
    font-size:clamp(1rem,1.5vw,1.125rem);line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
  #chatOv .chatbar,#homeChatDock .chatbar{flex:none;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0))}
  #chatOv .chatbar textarea{font-size:1rem;line-height:1.55;max-height:min(32dvh,220px)}
  #chatOv .chat-expand{background:var(--inset);color:var(--txt);border:1px solid var(--line);
    border-radius:9px;min-width:44px;min-height:44px;font:inherit;cursor:pointer}
  #chatOv.expanded{padding:0;align-items:stretch}
  #chatOv.expanded .modal.chat{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
    max-width:none;width:100%;margin:0;border:0;border-radius:0}
  #chatOv.expanded .mhead{border-radius:0}
  @media(max-width:600px){
    #chatOv{padding:0;align-items:stretch}
    #chatOv .modal.chat{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
      max-width:none;margin:0;border:0;border-radius:0}
    #chatOv .mhead{border-radius:0;padding-top:calc(10px + env(safe-area-inset-top,0))}
    #chatOv .msg{max-width:97%;font-size:1.0625rem;padding:12px 14px}
    #chatOv .chatbar{padding:10px 10px calc(10px + env(safe-area-inset-bottom,0))}
    #chatExpand{display:none!important}
  }

  .chatthreads{display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px;border-bottom:1px solid var(--line)}
  .chatthreads[hidden]{display:none}
  .chat-history-status{flex-basis:100%;font-size:0.75rem;color:var(--danger,#9b3535)}
  .chat-history-status[hidden]{display:none}
  .chatthreads select{min-width:0;flex:1;background:var(--inset);color:var(--txt);
    border:1px solid var(--line);border-radius:9px;padding:8px;font:inherit}
  .chatthreads button{white-space:nowrap}

  .msg.u{align-self:flex-end;background:var(--acc2);color:var(--on-ink);border-bottom-right-radius:4px}
  .msg.a{align-self:flex-start;background:var(--inset);border:1px solid var(--line);color:var(--txt);border-bottom-left-radius:4px}
  .msg.a.err{border-color:var(--acc2);color:var(--mut);font-style:italic}
  .msg.a strong{color:var(--acc-txt)}
  .chatmk{display:block;margin-top:9px;width:100%;padding:7px 10px;font-family:inherit;font-size:0.78125rem;font-weight:600;color:var(--acc-txt);background:transparent;border:1px solid var(--acc);border-radius:9px;cursor:pointer}
  /* Takes the place of an action that is currently unavailable for this account/state. */
  .chatnote{margin-top:9px;padding:7px 10px;font-size:0.75rem;line-height:1.4;color:var(--mut);
    border:1px dashed var(--line);border-radius:9px}
  .notegate{background:var(--inset);border:1px dashed var(--line);border-radius:12px;padding:14px}
  .notegate .ng1{font-size:0.875rem;font-weight:600;color:var(--txt);margin-bottom:7px}
  .notegate .ng2{font-size:0.8125rem;line-height:1.5;color:var(--mut)}
  .notegate .ng3{font-size:0.8125rem;line-height:1.5;color:var(--acc-txt);margin-top:9px}
  .chatmk:hover{background:var(--acc);color:var(--on-ink)}
  .chatmk:disabled{opacity:.6;cursor:default}
  .chat-ask-assistant{display:inline-block;margin-top:8px;padding:6px 10px;border:1px solid var(--acc);border-radius:8px;background:transparent;color:var(--acc-txt);font:inherit;font-size:0.75rem;cursor:pointer}
  .msg.typing{color:var(--mut);font-style:italic}
  .msg.typing .dots::after{content:'…';animation:dots 1.2s steps(4,end) infinite;display:inline-block}
  @keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'…'}}
  .chatempty{color:var(--mut);font-size:0.8125rem;text-align:center;margin:auto;padding:20px;font-style:italic;white-space:pre-line}
  .chatbar{
    display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);
    background:var(--card);border-radius:0 0 18px 18px;
  }
  .chatbar textarea{
    flex:1;background:var(--inset);color:var(--txt);border:1px solid var(--line);
    border-radius:12px;padding:10px 12px;font:0.875rem/1.4 var(--sans);resize:none;min-height:42px;max-height:120px;
  }
  .chatbar textarea:focus{outline:none;border-color:var(--acc)}
  .chatbar .btn{align-self:flex-end;padding:11px 16px}

  /* ---------- Modal (shared by quiz + create) ---------- */
  .overlay{
    position:fixed;inset:0;z-index:50;background:rgba(22,40,60,.42);
    display:none;align-items:flex-start;justify-content:center;
    padding:max(16px,env(safe-area-inset-top,0)) 12px 24px;overflow:auto;
  }
  .overlay.show{display:flex}
  .modal{
    background:var(--card);border:1px solid var(--line);border-radius:18px;
    width:100%;max-width:560px;margin:auto;box-shadow:var(--shadow);
    animation:pop .18s ease;
  }
  @keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
  .mhead{
    display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid var(--line);
    position:sticky;top:0;background:var(--card);border-radius:18px 18px 0 0;z-index:1;
  }
  .mhead h3{margin:0;font-family:var(--serif);font-size:1.1875rem;font-weight:600;flex:1}
  .mhead h3 .models{font-size:0.6875rem;font-weight:400;color:var(--mut);opacity:.8;margin-left:6px;white-space:nowrap}
  .mhead .x{
    background:var(--inset);color:var(--mut);border:1px solid var(--line);
    border-radius:9px;width:34px;height:34px;font-size:1.125rem;cursor:pointer;line-height:1;flex:none;
  }
  .mhead .x:hover{color:var(--txt)}
  .mbody{padding:16px}
  /* Create modal: cap height + scroll body so buttons never hide under the keyboard. */
  #createOv{padding:12px}
  .modal.create{display:flex;flex-direction:column;max-height:88vh}
  #createOv.lesson-operation-pending .mbody>:not(#createPending),
  #createOv.lesson-operation-pending .mfoot{display:none!important}
  #createPending .btn{margin:0 8px 8px 0}
  .modal.create .mbody{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
  .modal.create .mfoot{flex-shrink:0;border-radius:0 0 18px 18px}
  #createResultActions[hidden]{display:none!important}
  #createResultActions .btn{width:100%}
  #checkResults [role="alert"]{font-style:normal;font-size:0.875rem;line-height:1.5;color:var(--txt)}
  html[data-sk-theme="dark"] .modal.create .pill{background:var(--card)}

  /* ---------- Fullscreen block view (portaled .body) ---------- */
  /* A tapped block opens here: its real .body node is MOVED in, so all wiring
     and state are preserved. Only one is ever open → siblings collapse on their own. */
  .modal.block-full{display:flex;flex-direction:column;max-width:640px;max-height:92vh}
  .modal.block-full .mbody{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mhead .bficon{font-size:1.3125rem;flex:none;line-height:1}
  /* The card keeps its body hidden; here it is the content, so force it visible and drop
     the spacing the collapsed copy needed. */
  #bfBody .body{display:block;border-top:none;padding:0}
  /* On phones: edge-to-edge fullscreen, header clears the notch, footer clears the home bar. */
  @media(max-width:600px){
    #blockOv{padding:0;align-items:stretch}
    #blockOv .modal.block-full{
      width:100%;max-width:none;margin:0;border:none;border-radius:0;
      min-height:100vh;min-height:100dvh;max-height:100dvh;
    }
    #blockOv .mhead{border-radius:0;padding-top:calc(15px + env(safe-area-inset-top,0))}
    #blockOv .mbody{padding-bottom:calc(24px + env(safe-area-inset-bottom,0))}
  }

  /* ---------- Public library (stage 6) ---------- */
  /* The card itself is `.block` unmodified (same cover/cbody the private catalogue uses,
     DESIGN §3) — `.libcard` carries no rules of its own, it only marks the card as this
     feature's own, so a future `$$('.block')` walk knows not to assume every card is a
     course block. The detail modal caps height and scrolls, same as .modal.create. */
  .modal.lib-detail{display:flex;flex-direction:column;max-height:88vh}
  .modal.lib-detail .mbody{overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* One section of the detail view (content / rate / report) — same rule as .note/.assist,
     under its own name: those two are about a course block, this is about a public item,
     and a reader grepping for one should not land on the other. */
  .libsec{margin-top:14px;border-top:1px dashed var(--line);padding-top:13px}
  .libsec:first-child{margin-top:0;border-top:none;padding-top:0}
  /* A published material's phrase list. See libPhrasesHtml() for why Dutch is the one thing
     on this page always set in the serif. */
  .libphr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .libphr li{display:flex;flex-direction:column;gap:2px;padding-bottom:11px;border-bottom:1px solid var(--line)}
  .libphr li:last-child{border-bottom:none;padding-bottom:0}
  .libphr .pnl{font-family:var(--serif);font-size:1.03125rem;line-height:1.35;color:var(--ink)}
  .libphr .pru{font-size:0.8125rem;line-height:1.45;color:var(--ink-2)}
  .libphr .pex{margin-top:4px;font-family:var(--serif);font-size:0.84375rem;line-height:1.4;color:var(--ink-3)}
  .libphr .pex .pexru{font-family:var(--sans);font-size:0.78125rem;color:var(--ink-4)}
  /* Older materials keep one Markdown text; ui/legacy-text.js turns it into these few plain blocks. */
  .lib-text .lt-h,.lib-text .lt-p,.lib-text .lt-note{overflow-wrap:anywhere}
  .lib-text .lt-h{margin:18px 0 6px;font-size:0.8125rem;line-height:1.3;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
  .lib-text .lt-h:first-child,.lib-text .lt-note + .lt-h{margin-top:4px}
  .lib-text .lt-p{margin:0 0 8px;font-size:0.875rem;line-height:1.5;color:var(--ink)}
  .lib-text .lt-note{margin:0 0 10px;font-size:0.75rem;line-height:1.4;color:var(--ink-4)}
  .lib-text .lt-list{margin:0 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:0.875rem;line-height:1.45;color:var(--ink)}
  .lib-text .lt-list li{padding-left:2px;overflow-wrap:anywhere}
  .lib-text .lt-list strong{font-family:var(--serif);font-weight:600}
  .lib-text .lt-table-wrap{max-width:100%;overflow-x:auto;margin:10px 0}
  .lib-text .lt-table{width:100%;border-collapse:collapse;font-size:0.875rem;line-height:1.45}
  .lib-text .lt-table th,.lib-text .lt-table td{padding:7px;text-align:left;border:1px solid var(--line);overflow-wrap:anywhere}
  .lib-text code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.78125rem;padding:0 4px;border-radius:4px;background:var(--line)}
  /* Publishing one's own topic. */
  .pubrow{
    margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .pubstate{display:flex;align-items:center;gap:7px;font-size:0.8125rem;color:var(--ink-2);margin-right:auto}
  .pubdot{width:8px;height:8px;border-radius:50%;background:var(--ink-4);flex:none}
  .pubrow.live .pubdot{background:var(--ok)}
  .pubrow.live .pubstate{color:var(--ok)}
  .mfoot{
    padding:14px 16px calc(14px + env(safe-area-inset-bottom,0));
    border-top:1px solid var(--line);background:var(--card);
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  }
  .mfoot .pubundo{flex-basis:100%;margin-top:0}
  /* The flagged span, inside the phrase it belongs to — the reader sees WHERE it is, not
     just that something was found somewhere. */
  mark.pii{
    background:rgba(200,132,44,.24);color:inherit;
    border-bottom:1px solid var(--accent);border-radius:2px;padding:0 1px;
  }
  .piilist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
  .piilist li{display:flex;align-items:baseline;gap:9px;font-size:0.8125rem}
  .piicat{
    font-family:var(--mono);font-size:0.625rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-4);flex:none;min-width:96px;
  }
  .piival{color:var(--ink);word-break:break-word}
  .pubprev{margin-top:8px}
  /* The check status. Deliberately NOT shaped or coloured like the stars: it is a different
     claim about a different thing, and ENVELOPE asks for them to be told apart on sight. */
  .lcheck{
    align-self:flex-start;display:inline-block;
    font-family:var(--mono);font-size:0.59375rem;letter-spacing:.1em;text-transform:uppercase;
    border:1px solid var(--rule);border-radius:4px;padding:3px 7px;color:var(--ink-3);
  }
  .lcheck.ok{color:var(--sage-dark);border-color:rgba(77,103,64,.45)}
  .lcheck.flag{color:var(--accent-2);border-color:rgba(179,98,74,.45)}
  .lcheckrow{display:flex;align-items:baseline;gap:9px;margin-top:10px;flex-wrap:wrap}
  .lcheckrow .nores{margin-top:0;flex:1;min-width:180px}
  .libnote{
    margin-top:6px;padding:12px 14px;border:1px dashed var(--line);border-radius:6px;
    font-size:0.78125rem;line-height:1.5;color:var(--ink-3);background:var(--card-alt);
  }
  .libstars{display:flex;gap:4px;margin-top:6px}
  .libstars button{
    background:transparent;border:none;font-size:1.625rem;line-height:1;cursor:pointer;
    color:var(--line);padding:2px;transition:.15s;
  }
  .libstars button.on{color:var(--accent)}
  .libstars button:hover:not(:disabled){color:var(--acc-txt)}
  .libstars button:disabled{opacity:.5;cursor:default}
  .libmore{text-align:center;margin-top:4px}

  /* ---------- Quiz ---------- */
  .qfilter{margin-bottom:12px}
  .qdirection{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:10px;align-items:end}
  .qdirection label{display:grid;gap:6px;min-width:0;font-size:0.8125rem}
  .qdirection select{width:100%;min-width:0;min-height:44px;color:inherit;background:transparent;border:1px solid var(--line,#ccc);border-radius:8px;padding:8px}
  .qdirection button{min-height:44px;padding:0;font-size:1.4375rem}
  .qdirection-hint{margin:10px 0;line-height:1.5}
  button.card{display:block;width:100%;color:inherit;font-family:inherit;text-align:center;cursor:pointer}
  button.card>.side,button.card>.word,button.card>.tap,button.card>.ex{display:block}
  button.card .word{overflow-wrap:anywhere}
  .qchk{display:inline-flex;align-items:center;gap:7px;font-size:0.8125rem;color:var(--mut);cursor:pointer}
  .qchk input{width:17px;height:17px;accent-color:var(--ok);cursor:pointer}
  .qprogress{display:flex;justify-content:space-between;font-family:var(--mono);color:var(--ink-2);font-size:0.6875rem;margin-bottom:12px}
  .qprogress b{color:var(--ok)}
  .card{
    background:var(--inset);border:1px solid var(--line);border-radius:14px;
    padding:28px 20px;text-align:center;min-height:170px;
    display:flex;flex-direction:column;justify-content:center;gap:14px;cursor:pointer;
  }
  .card .word{font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.3}
  .card .nl{color:var(--acc-txt)}
  .card .ex{font-size:0.8125rem;color:var(--mut);font-style:italic;margin-top:4px}
  .card .tap{font-size:0.75rem;color:var(--mut);margin-top:6px}
  .qactions{display:flex;gap:10px;margin-top:14px}
  .qactions button{flex:1;padding:13px;font-size:0.9375rem;border-radius:12px}
  .qdone{text-align:center;padding:20px 6px}
  .qdone .score{font-family:var(--serif);font-size:2.25rem;font-weight:600;color:var(--ok);margin:10px 0}
  .qdone .sub{color:var(--mut);font-size:0.875rem;margin-bottom:18px}

  /* ---------- Create form ---------- */
  .field{margin-top:14px}
  .field:first-child{margin-top:0}
  .field label,.draft-fragment .draft-before-label{display:block;font-size:0.75rem;color:var(--mut);margin-bottom:5px;font-weight:600}
  .field .hint{color:var(--mut);font-size:0.75rem;font-weight:400;font-style:italic}
  textarea.paste,input.tin{
    width:100%;background:var(--inset);color:var(--txt);border:1px solid var(--line);
    border-radius:10px;padding:11px;font:0.875rem/1.5 var(--sans);
  }
  textarea.paste{resize:vertical;min-height:120px}
  textarea.paste:focus,input.tin:focus{outline:none;border-color:var(--acc)}
  .grid3{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
  @media(min-width:480px){.grid3{grid-template-columns:1fr 1fr 1fr}}
  .actions{display:flex;gap:10px;margin-top:16px}
  .actions .btn{flex:1;text-align:center;padding:13px}

  /* check results */
  .results{margin-top:14px}
  .rgroup{margin-top:12px}
  .rgroup h4{margin:0 0 7px;font-size:0.8125rem;font-weight:700;display:flex;align-items:center;gap:8px}
  .rgroup h4 .n{color:var(--mut);font-weight:500}
  .known h4{color:var(--mut)}
  .new h4{color:var(--ok)}
  .pill{
    display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;margin:6px 0;font-size:0.8125rem;
  }
  .pill.k{background:var(--inset);color:var(--mut);border:1px solid var(--line)}
  .pill.k .meta{margin-left:auto;font-size:0.6875rem;opacity:.8;white-space:nowrap}
  .pill.n{background:#eef1e9;border:1px solid var(--sage)}
  .pill.n .nl{font-weight:600;color:var(--txt)}
  .pill.n .arr{color:var(--mut)}
  .pill.n .ru{color:var(--acc-txt)}
  .pill.n small{display:block;font-size:0.75rem;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:2px}
  .pill.n .del{margin-left:auto;background:none;border:none;color:var(--mut);font-size:1rem;cursor:pointer;flex:none}
  .pill.n .del:hover{color:var(--acc2)}
  .pill.n{flex-wrap:wrap}
  .pill.n .nl,.pill.n .ru{min-width:0;overflow-wrap:anywhere}
  .draft-row-actions{display:flex;gap:4px;margin-left:auto}
  .draft-row-actions button{min-width:44px;min-height:44px}
  .draft-fragment{margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--inset)}
  .draft-fragment select,.draft-fragment textarea{width:100%;max-width:100%}
  .draft-fragment textarea{min-height:100px}
  .draft-fragment pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;padding:9px;background:var(--card);border-radius:6px}
  .nores{color:var(--mut);font-size:0.8125rem;font-style:italic;margin-top:6px}

  /* ---------- Always-visible recording control ----------
     Lives OUTSIDE #app, so no list rebuild can take it away, and it stays on screen when the
     block popup is closed: while the microphone is on, the user can always see that and stop
     it in one tap. */
  .recbar{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(88px + env(safe-area-inset-bottom,0));z-index:70;
    display:flex;align-items:center;gap:9px;
    background:var(--card2);color:var(--txt);border:1px solid var(--acc2);
    border-radius:22px;padding:7px 8px 7px 14px;box-shadow:var(--shadow);
    font-size:0.8125rem;font-weight:600;max-width:calc(100vw - 24px);white-space:nowrap;
  }
  .recbar[hidden]{display:none}
  .recbar .dot{width:9px;height:9px;border-radius:50%;background:var(--acc2);flex:none;
    animation:pulse 1.1s ease-in-out infinite}
  .recbar button{
    background:var(--acc2);color:var(--on-ink);border:none;border-radius:16px;padding:5px 13px;
    font-family:inherit;font-size:0.78125rem;font-weight:700;cursor:pointer;flex:none;
  }
  .recbar button:hover{filter:brightness(1.08)}
  .recbar button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

  .toast{
    position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);
    background:var(--card2);color:var(--txt);border:1px solid var(--acc);
    border-radius:12px;padding:11px 18px;font-size:0.875rem;z-index:60;
    opacity:0;pointer-events:none;transition:.3s;box-shadow:var(--shadow);
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* The answer a guest gets when they press something that needs an account (iron rule 7).
     Deliberately NOT an .overlay: an overlay would dim the catalogue and swallow clicks, and
     the rule says the guest keeps reading. This sits above the page, closes three ways, and
     leaves everything behind it live. */
  .whynote{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(88px + env(safe-area-inset-bottom,0));z-index:75;
    width:min(420px, calc(100vw - 24px));
    background:var(--card2);color:var(--txt);border:1px solid var(--acc);
    border-radius:14px;padding:14px 16px 13px;box-shadow:var(--shadow);
  }
  .whynote[hidden]{display:none}
  .whynote .x{
    position:absolute;top:6px;right:8px;background:none;border:none;color:var(--mut);
    font-size:1.25rem;line-height:1;cursor:pointer;padding:2px 6px;font-family:inherit;
  }
  .whynote .x:hover{color:var(--txt)}
  .whynote .wn-title{font-size:0.90625rem;font-weight:700;padding-right:22px}
  .whynote .wn-body{font-size:0.8125rem;line-height:1.5;color:var(--mut);margin-top:6px}
  .whynote .wn-extra{font-size:0.78125rem;line-height:1.45;color:var(--mut);margin-top:6px;opacity:.85}
  .whynote .wn-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
  .whynote .wn-act .btn{font-size:0.8125rem;padding:7px 14px}
  /* One window for every lesson (A0 and topics alike): 920 px on a desktop, edge to edge on a phone. */
  #libraryOv .modal.lib-detail{width:min(920px,calc(100vw - 32px));max-width:920px}
  /* The lesson window starts at the top of the screen and may use its whole height: switching Video / Audio with text
     never moves it, and a laptop's first screen holds the picture and the transport (UX H1, L7). */
  @media(min-width:601px){
    #libraryOv .modal.lib-detail{margin:0 auto auto;
      max-height:calc(100vh - max(16px,env(safe-area-inset-top,0px)) - 24px);max-height:calc(100dvh - max(16px,env(safe-area-inset-top,0px)) - 24px)}
  }
  @media(max-width:600px){
    #libraryOv{padding:0;align-items:stretch}
    #libraryOv .modal.lib-detail{width:100%;max-width:none;margin:0;border:none;border-radius:0;
      min-height:100vh;min-height:100dvh;max-height:100vh;max-height:100dvh}
    #libraryOv .mhead{border-radius:0;padding-top:calc(15px + env(safe-area-inset-top,0))}
    #libraryOv .mbody{padding-bottom:calc(24px + env(safe-area-inset-bottom,0))}
  }
  .topic-intro{margin-bottom:16px}
  .topic-level{font-size:0.75rem;font-weight:700;letter-spacing:.08em;color:var(--mut)}
  .topic-goal,.cgoal{line-height:1.55;margin:8px 0;color:var(--txt)}
  .cgoal{font-size:0.8125rem}
  .topic-controls,.topic-navigation{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .topic-controls .btn,.topic-navigation .btn{min-height:44px}
  .topic-controls .btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent,#fff)}
  .topic-controls .btn[aria-pressed="false"]{background:transparent;color:var(--txt);border-color:var(--line)}
  .topic-controls label{display:flex;align-items:center;gap:8px}
  .topic-controls [hidden]{display:none}
  .topic-video-voice{font-size:0.8125rem;color:var(--mut);margin-left:auto}
  .topic-text-controls{display:flex;flex-wrap:wrap;gap:8px 12px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:12px 0}
  .topic-text-controls legend{font-weight:600;padding:0 6px}
  .topic-language{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer}
  .topic-language:has(input:checked){background:var(--card2);border-color:var(--acc)}
  .topic-language:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
  .topic-language input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--acc)}
  .topic-text-hint{flex-basis:100%;margin:0;font-size:0.8125rem;color:var(--mut)}
  .topic-navigation{margin:12px 0}
  .topic-navigation .btn[aria-pressed="true"]{border-color:var(--acc);background:var(--card2)}
  .topic-phrase-count{min-width:48px;text-align:center;font-variant-numeric:tabular-nums}
  .topic-fullscreen-button{margin-left:auto}
  .topic-fullscreen{position:fixed;inset:0;z-index:100;overflow:auto;background:var(--bg);padding:16px;width:100vw;height:100dvh}
  .topic-media[hidden]{display:none}
  .topic-media video{display:block;width:100%;max-height:60vh;object-fit:contain;object-position:top;border-radius:12px;background:#101c31;margin:16px 0}
  .topic-media video:fullscreen{max-height:none;object-position:center;margin:0;border-radius:0}
  .topic-media video::cue{font-family:Arial,sans-serif;font-size:var(--topic-caption-font,1.375rem);line-height:1.25;color:#fff;background:rgba(16,28,49,.88);text-shadow:0 1px 2px #000}
  .topic-media audio{width:100%;margin:16px 0}
  .topic-progress{font-size:0.8125rem;color:var(--mut);margin:8px 0}
  .topic-chapters{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .topic-chapters .btn{text-align:left;white-space:normal;height:100%;width:100%}
  .topic-pages{display:flex;justify-content:space-between;gap:8px}
  .topic-pages[hidden]{display:none}
  .topic-text details{margin:12px 0;line-height:1.7}
  .topic-text details>div{padding:8px 0;border-bottom:1px solid var(--line)}
  .topic-quality{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:0.8125rem;color:var(--mut)}
  @media(max-width:600px){.topic-chapters{grid-template-columns:1fr}.topic-video-voice{width:100%;margin-left:0}.topic-fullscreen-button{margin-left:0}.topic-language{flex:1 1 130px}}

/* Two densities share the same functional player, account and course state. */
.ui-header-actions{display:contents}
.ui-mode-toggle{margin-left:auto;align-self:center;border:1px solid var(--line);border-radius:18px;
  background:var(--card);color:var(--txt);padding:5px 11px;font-size:0.75rem;font-weight:650;cursor:pointer}
.ui-mode-toggle:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px}
body[data-ui-mode="simple"] header{padding-top:calc(7px + env(safe-area-inset-top,0));padding-bottom:7px}
body[data-ui-mode="simple"] .navtabs{margin-top:6px}
body[data-ui-mode="simple"] .navtabs button{padding:6px 10px}
body[data-ui-mode="simple"] .navtabs button[data-tab="assignment"],
body[data-ui-mode="simple"] .navtabs button[data-tab="practice"]{display:none}
body[data-ui-mode="simple"] .filters{margin-top:5px}
body[data-ui-mode="simple"] .filters button{padding:5px 9px}
body[data-ui-mode="simple"] .viewhead .vsub{margin-bottom:5px}
.a0-primer p{font-size:0.8125rem;color:var(--mut);margin:0 0 10px}
.a0-letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:6px}
.a0-letter{background:var(--inset);padding:7px;border-radius:6px;display:flex;flex-direction:column;gap:2px}
.a0-letter strong{font-size:1rem}.a0-letter span{font-size:0.75rem}
.a0-primer h4{margin:14px 0 7px}
.a0-combinations{display:flex;flex-wrap:wrap;gap:6px}
.a0-combinations span{padding:5px 8px;background:var(--inset);border-radius:7px;font-size:0.75rem}
.empty-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.private-video-captions{display:none}
.private-video-captions[hidden]{display:none}
@media(max-width:600px){
  .ui-mode-toggle{margin-left:0}
  .user-rendition-status{display:block;min-width:0;max-width:100%}
  .private-video-captions{display:grid;gap:10px;box-sizing:border-box;width:100%;min-width:0;margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:clamp(1rem,4.6vw,1.25rem);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}
  .private-video-captions p{margin:0}.private-video-captions p+ p{color:var(--mut)}
}


/* ui/foundation.css */
/* SoKKoS foundation v1. Namespaced to avoid modifying road-scene colour semantics. */
html[data-sk-product]{
 --sk-space-1:4px;--sk-space-2:8px;--sk-space-3:12px;--sk-space-4:16px;--sk-space-5:24px;--sk-space-6:32px;
 --sk-bg:#f3f5f2;--sk-surface:#fff;--sk-inset:#e7efe8;--sk-ink:#182b27;--sk-muted:#52625a;--sk-line:#cbd5ce;
 --sk-accent:#245c47;--sk-on-accent:#fff;--sk-success:#325d36;--sk-danger:#8a352d;--sk-danger-soft:#fcebe7;
 --sk-radius:16px;--sk-small-radius:9px;--sk-gap:24px;--sk-padding:24px;--sk-serif:Georgia,'Times New Roman',serif;
 --sk-sans:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--sk-mono:ui-monospace,'SFMono-Regular',Consolas,monospace;
 --sk-shadow:0 16px 48px rgb(12 25 20 / 18%);--sk-border:1px solid var(--sk-line);--sk-page:min(95vw,1680px);
}
html[data-sk-layout="L2"],html[data-sk-layout="M3"]{--sk-bg:#f2eee6;--sk-surface:#fffcf5;--sk-inset:#eee5d7;--sk-ink:#312c26;--sk-muted:#685c51;--sk-line:#d4c8b7;--sk-accent:#88412b;--sk-radius:5px;--sk-small-radius:5px;--sk-gap:24px}
html[data-sk-layout="L3"]{--sk-bg:#f2f5f7;--sk-inset:#e3eff1;--sk-ink:#172d3a;--sk-muted:#4e6570;--sk-line:#c3d2d8;--sk-accent:#075e70;--sk-radius:8px;--sk-small-radius:6px;--sk-gap:20px}
html[data-sk-layout="L4"]{--sk-accent:#245c47;--sk-radius:20px;--sk-gap:32px}
html[data-sk-layout="L5"],html[data-sk-layout="M2"]{--sk-bg:#eff2f8;--sk-inset:#e4eaf4;--sk-ink:#202c44;--sk-muted:#53627c;--sk-line:#c8d1e0;--sk-accent:#344e91;--sk-radius:12px;--sk-small-radius:8px}
html[data-sk-layout="M4"]{--sk-bg:#eef3f6;--sk-inset:#e2edf3;--sk-ink:#1e2c38;--sk-muted:#536877;--sk-line:#c6d3dc;--sk-accent:#28526b;--sk-radius:8px;--sk-small-radius:6px}
html[data-sk-layout="M5"]{--sk-bg:#f4f5f5;--sk-inset:#e6eded;--sk-ink:#232e31;--sk-muted:#536266;--sk-line:#c8d3d4;--sk-accent:#31595b;--sk-radius:6px;--sk-small-radius:5px;--sk-gap:20px}
html[data-sk-product][data-sk-theme="dark"]{--sk-bg:#141e23;--sk-surface:#202c32;--sk-inset:#2c3e42;--sk-ink:#eef4f1;--sk-muted:#bdcbc5;--sk-line:#52646a;--sk-accent:#aad9c5;--sk-on-accent:#142c22;--sk-success:#b4d8ac;--sk-danger:#ffbdad;--sk-danger-soft:#402c2b;--sk-shadow:0 16px 48px rgb(0 0 0 / 40%)}
html[data-sk-layout="L2"][data-sk-theme="dark"],html[data-sk-layout="M3"][data-sk-theme="dark"]{--sk-bg:#231f1b;--sk-surface:#302a24;--sk-inset:#41382f;--sk-ink:#faf1e5;--sk-muted:#d0c1ae;--sk-line:#70614f;--sk-accent:#f0bca4;--sk-on-accent:#362316}
html[data-sk-layout="L3"][data-sk-theme="dark"],html[data-sk-layout="L5"][data-sk-theme="dark"],html[data-sk-layout="M2"][data-sk-theme="dark"],html[data-sk-layout="M4"][data-sk-theme="dark"]{--sk-bg:#141c24;--sk-surface:#202c37;--sk-inset:#2b3c4c;--sk-ink:#eff4f8;--sk-muted:#bacbd8;--sk-line:#526b80;--sk-accent:#b5d5ea;--sk-on-accent:#18303f}
html[data-sk-density="compact"]{--sk-gap:16px;--sk-padding:16px}
html[data-sk-product],html[data-sk-product] body{background:var(--sk-bg);color:var(--sk-ink)}
html[data-sk-product] body{font-family:var(--sk-sans);line-height:1.5}
html[data-sk-product] :is(button,a,input,textarea,select,summary){scroll-margin-block:100px;touch-action:manipulation}
html[data-sk-product] :focus-visible{outline:3px solid var(--sk-accent);outline-offset:3px}
html[data-sk-product] :is(button,summary,select){min-height:44px}
html[data-sk-product] :is(input,textarea,select){font:inherit;min-width:0}
html[data-sk-product] :is(input,select,textarea)::placeholder{color:var(--sk-muted);opacity:1}
html[data-sk-product] :is(h1,h2,h3,p,button,summary,textarea){overflow-wrap:anywhere}
html[data-sk-product] :is(img,video){max-width:100%}
html[data-sk-product] .sk-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;max-width:100%;padding:10px 14px;border:var(--sk-border);border-radius:var(--sk-small-radius);background:var(--sk-surface);color:var(--sk-ink);font:600 0.8125rem/1.4 var(--sk-sans);cursor:pointer;text-decoration:none}
html[data-sk-product] .sk-button:hover{background:var(--sk-inset)}
html[data-sk-product] .sk-primary{background:var(--sk-accent);border-color:var(--sk-accent);color:var(--sk-on-accent)}
html[data-sk-product] .sk-primary:hover{background:var(--sk-accent);filter:brightness(.94)}
.sk-button svg{width:20px;height:20px;flex:none}.sk-icon{padding:8px!important;font-size:1.5rem!important}
.sk-muted{color:var(--sk-muted);font-size:0.8125rem;line-height:1.6}
.sk-skip{position:fixed;left:12px;top:8px;z-index:120;transform:translateY(-180%);padding:12px 16px;background:var(--sk-surface);color:var(--sk-ink);border:var(--sk-border)}
.sk-skip:focus{transform:none}.sk-sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
html[data-sk-product] .sk-dialog{padding:0;width:min(1000px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);border:var(--sk-border);border-radius:16px;background:var(--sk-surface);color:var(--sk-ink);box-shadow:var(--sk-shadow);margin:auto;overflow:auto;font-family:var(--sk-sans)}
.sk-dialog:not([open]){display:none}.sk-dialog::backdrop{background:rgb(10 20 26 / 56%)}
.sk-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:var(--sk-border);background:var(--sk-surface);position:sticky;top:0;z-index:3}
.sk-dialog-head h2{font:650 1.375rem/1.3 var(--sk-sans);margin:0}.sk-dialog-body{padding:0 24px 16px}.sk-dialog-body>p{margin:18px 0}
.sk-choice-group{border:0;margin:20px 0;padding:0;min-width:0}.sk-choice-group legend{font:650 0.875rem var(--sk-sans);margin:0 0 12px;padding:0}
.sk-choice-row{display:flex;flex-wrap:wrap;gap:10px}.sk-choice{display:flex;align-items:center;gap:9px;min-height:44px;border:var(--sk-border);border-radius:8px;padding:10px 14px;cursor:pointer;font-size:0.875rem}
.sk-choice input,.sk-template input{accent-color:var(--sk-accent);width:18px;height:18px;flex:none;margin:0}
.sk-choice:has(input:checked),.sk-template:has(input:checked){border-color:var(--sk-accent);box-shadow:inset 0 0 0 1px var(--sk-accent);background:var(--sk-inset)}
.sk-choice:has(input:focus-visible),.sk-template:has(input:focus-visible){outline:3px solid var(--sk-accent);outline-offset:3px}
.sk-template-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.sk-template{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:12px;border:var(--sk-border);border-radius:10px;align-content:start;cursor:pointer;min-width:0}
.sk-template input{grid-column:1;grid-row:2;margin-top:2px}.sk-template-text{grid-column:2;grid-row:2;min-width:0}.sk-template strong{font-size:0.75rem;line-height:1.5;display:block}.sk-template small{font-size:0.6875rem;line-height:1.5;color:var(--sk-muted);display:block;margin-top:8px}
.sk-miniature{grid-column:1/-1;display:grid;grid-template-columns:1fr 3fr 1.3fr;grid-template-rows:10px 34px;gap:4px;background:var(--sk-bg);border:var(--sk-border);padding:6px;border-radius:5px;height:65px}
.sk-miniature i{background:var(--sk-line);border-radius:2px}.sk-miniature i:first-child{grid-column:1/-1;background:var(--sk-accent)}
.sk-mini-notebook{grid-template-columns:1fr 1fr}.sk-mini-notebook i:last-child{display:none}
.sk-mini-desk{grid-template-columns:.6fr 2.5fr 2fr}.sk-mini-focus{grid-template-columns:.3fr 4fr}.sk-mini-focus i:last-child{display:none}
.sk-mini-board{grid-template-columns:1fr 1fr 1fr}.sk-mini-exam{grid-template-columns:3fr 1fr}.sk-mini-exam i:last-child{display:none}
.sk-mini-night{grid-template-columns:3fr 1fr}.sk-mini-night i:last-child{display:none}.sk-mini-explorer{grid-template-columns:1.5fr 2fr}.sk-mini-explorer i:last-child{display:none}
.sk-preview-label{color:var(--sk-accent);font-size:0.8125rem;font-weight:600}.sk-dialog-foot{position:sticky;bottom:0;background:var(--sk-surface);border-top:var(--sk-border);display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:16px 24px;z-index:3}
.sk-dialog-foot .sk-reset{margin-right:auto}.sk-live{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:200;max-width:calc(100vw - 32px);padding:12px 18px;background:var(--sk-ink);color:var(--sk-bg);border-radius:10px;box-shadow:var(--sk-shadow);font-size:0.8125rem;pointer-events:none;opacity:0}
.sk-live.sk-visible{opacity:1}
.sk-context{min-width:0;border:var(--sk-border);border-radius:var(--sk-radius);background:var(--sk-surface);padding:var(--sk-padding)}
.sk-context h2{font:650 1.125rem/1.35 var(--sk-sans);margin:0 0 16px}.sk-context h3{font:650 1.0625rem/1.5 var(--sk-sans);margin:16px 0}
.sk-context select{width:100%;min-height:44px;padding:8px;background:var(--sk-surface);border:var(--sk-border);color:var(--sk-ink);border-radius:var(--sk-small-radius)}
.sk-context .sk-button{margin-top:12px;width:100%}.sk-phrase-list{margin:12px 0;padding:0;list-style:none}.sk-phrase-list li{border-bottom:var(--sk-border);padding:14px 0}
.sk-phrase-list strong{font:600 1.0625rem/1.5 var(--sk-sans);display:block;overflow-wrap:anywhere}.sk-phrase-list small{display:block;color:var(--sk-muted);font-size:0.8125rem;line-height:1.6;margin-top:5px;overflow-wrap:anywhere}
.sk-context-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.sk-context-top h2{margin:0}.sk-context-top .sk-button{width:auto;margin:0;font-size:0.75rem}
@media(max-width:760px){
 html[data-sk-product]{--sk-page:calc(100% - 24px);--sk-padding:16px;--sk-gap:14px}
 .sk-dialog{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:12px!important}
 .sk-dialog-head,.sk-dialog-body{padding-left:16px;padding-right:16px}.sk-dialog-head h2{font-size:1.1875rem}.sk-dialog-foot{padding:12px 16px;gap:8px}
 .sk-template-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sk-template:last-child{grid-column:1/-1;grid-template-columns:20px 130px minmax(0,1fr)}
 .sk-template:last-child .sk-miniature{grid-column:2;grid-row:1}.sk-template:last-child input{grid-column:1;grid-row:1}.sk-template:last-child .sk-template-text{grid-column:3;grid-row:1}
 .sk-dialog-foot .sk-reset{flex-basis:100%;margin:0}.sk-dialog-foot>.sk-button:not(.sk-reset){flex:1;padding-inline:10px;font-size:0.75rem}
 .sk-dialog-body>p{font-size:0.75rem}.sk-choice{font-size:0.75rem;padding:10px}.sk-choice-row{gap:8px}
}
@media(prefers-reduced-motion:reduce){html[data-sk-product] *,html[data-sk-product] *::before,html[data-sk-product] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){html[data-sk-product] .sk-template:has(input:checked),html[data-sk-product] .sk-choice:has(input:checked){outline:2px solid Highlight}.sk-miniature i{border:1px solid CanvasText}}


/* index.html */

.pace-controls{display:flex;flex-wrap:wrap;gap:8px 12px;border:1px solid var(--line);border-radius:10px;padding:12px;margin:12px 0;min-width:0}
.pace-controls legend{font-weight:600;padding:0 6px}.pace-controls label{display:flex;align-items:center;gap:5px;max-width:100%;flex-wrap:wrap;font-size:0.8125rem}
.pace-controls input[type=number]{width:75px;max-width:100%}.pace-plays,.pace-actions{display:flex;flex-wrap:wrap;gap:8px}.pace-status,.pace-duration,.pace-help{width:100%;margin:0;font-size:0.8125rem;color:var(--mut)}
.pace-speech{display:none}.pace-controls select{max-width:100%}


/* ui/lang-workspace.css */
/* Five layouts, one unchanged Lang application. Only presentation tokens and component geometry. */
html[data-sk-product="lang"]{
 --paper:var(--sk-bg);--surface:var(--sk-surface);--card:var(--sk-surface);--card-alt:var(--sk-inset);
 --ink:var(--sk-ink);--ink-2:var(--sk-muted);--ink-3:var(--sk-muted);--ink-4:var(--sk-muted);
 --rule:var(--sk-line);--line:var(--sk-line);--accent:var(--sk-accent);--accent-2:var(--sk-accent);
 --amber-dark:var(--sk-accent);--sage-dark:var(--sk-accent);--sage:var(--sk-accent);
 --on-ink:var(--sk-on-accent);--sans:var(--sk-sans);--serif:var(--sk-sans);--mono:var(--sk-mono);
 --col:1680px;--gutter:24px;--shadow:none;--sk-header-height:82px;
}
html[data-sk-product="lang"] body{padding-bottom:24px}
/* Prevent the legacy pre-shell geometry from becoming a visible first paint. The head
   bootstrap marks Lang pending before body parsing; the adapter reveals the real shell
   synchronously once it is assembled. A timed bootstrap fallback prevents a blank page
   if the adapter cannot finish loading. */
html[data-sk-product="lang"][data-sk-shell="pending"] body>*{visibility:hidden}
/* Identity callbacks can require explicit local proof before the workspace has finished
   becoming authoritative. Keep the workspace fenced, but never hide an already-open modal:
   otherwise the account proof exists in the DOM yet is visually inaccessible. */
html[data-sk-product="lang"][data-sk-shell="pending"] body>.overlay.show{visibility:visible}
#startupStatus{display:none}
html[data-sk-product="lang"][data-sk-shell="pending"] #startupStatus{
 visibility:visible;display:grid;min-height:75vh;place-content:center;gap:16px;padding:24px;text-align:center;
 color:var(--sk-ink);font-size:1rem;
}
#startupStatus strong{font-size:1.75rem}
#startupStatus span{color:var(--sk-muted)}
.sk-font-scale{display:inline-flex;align-items:center;gap:2px;flex-shrink:0}
.sk-font-scale .sk-button{min-width:34px;min-height:36px;padding:5px 7px;font-size:1rem}
.sk-font-scale output{min-width:3.2em;text-align:center;font-size:.75rem;font-variant-numeric:tabular-nums}
@media(max-width:600px){.sk-font-scale{gap:0}.sk-font-scale output{min-width:2.8em}.sk-font-scale .sk-button{min-width:32px;padding:5px}}

html[data-sk-product="lang"] header{padding:12px 0;background:var(--sk-bg);backdrop-filter:none;z-index:20}
html[data-sk-product="lang"] header>.htop,html[data-sk-product="lang"] header>.barrow,html[data-sk-product="lang"] header>.filters{width:var(--sk-page);padding:0;max-width:none;margin-inline:auto}
html[data-sk-product="lang"] .htop{align-items:center;gap:12px}
html[data-sk-product="lang"] h1{font:700 1.4375rem/1.2 var(--sk-sans);margin-right:auto}
html[data-sk-product="lang"] :is(.authchip,.xsite,.uilang summary){font-size:0.8125rem;min-height:44px;display:inline-flex;align-items:center;border-radius:12px;padding:9px 12px}
html[data-sk-product="lang"] .authchip{max-width:min(24vw,18rem);white-space:normal;overflow-wrap:anywhere;overflow:visible;line-height:1.25}
html[data-sk-product="lang"] .sk-lang-shell{width:var(--sk-page);margin:24px auto;display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--sk-gap);align-items:start}
html[data-sk-product="lang"] .sk-lang-nav{position:sticky;top:calc(var(--sk-header-height) + 20px);min-width:0}
html[data-sk-product="lang"] #navtabs{display:flex;flex-direction:column;margin:0;gap:8px}
html[data-sk-product="lang"] #navtabs button{border:0;border-radius:10px;min-height:48px;padding:12px 16px;text-align:left;font-size:0.9375rem;color:var(--sk-muted);font-weight:600;overflow-wrap:anywhere}
html[data-sk-product="lang"] #navtabs button.on{color:var(--sk-on-accent);background:var(--sk-accent)}
html[data-sk-product="lang"] :is(#navtabs,.sk-lang-nav,.sk-nav-toggle,.fab)[hidden]{display:none!important}
html[data-sk-product="lang"] #app{width:100%;max-width:none;margin:0;border:0;box-shadow:none;background:none;padding:0;min-width:0;overflow:visible;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,225px),1fr))}
html[data-sk-product="lang"] #app:has(>.home){display:block}
html[data-sk-product="lang"] .home{width:100%;max-width:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.72fr);grid-template-rows:auto auto minmax(380px,1fr);grid-template-areas:"greet greet" "actions actions" "chat context";gap:20px;align-items:start}
html[data-sk-product="lang"] .home-greet{grid-area:greet;min-width:0}
html[data-sk-product="lang"] .home-greet h2{font:650 clamp(1.375rem,2vw,2rem)/1.3 var(--sk-sans);overflow-wrap:anywhere}
html[data-sk-product="lang"] .home-greet p{font-size:0.875rem;color:var(--sk-muted)}
html[data-sk-product="lang"] .home-actions{grid-area:actions;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
html[data-sk-product="lang"] .home-actions button{padding:12px 16px;min-height:52px;background:var(--sk-surface);color:var(--sk-ink);border:1px solid var(--sk-line);border-radius:var(--sk-radius);line-height:1.45;font-size:0.875rem}
html[data-sk-product="lang"] .home-actions button:first-child{border-color:var(--sk-accent);background:var(--sk-inset)}
html[data-sk-product="lang"] .home-chat{grid-area:chat;height:clamp(360px,calc(100dvh - var(--sk-header-height) - 195px),860px);min-width:0;border-radius:var(--sk-radius);border:1px solid var(--sk-line);background:var(--sk-surface);align-self:stretch}
html[data-sk-product="lang"] .chatlog{min-height:100px;overscroll-behavior:contain;padding:clamp(16px,2vw,32px);gap:16px}
html[data-sk-product="lang"] .msg{font-size:1rem;line-height:1.65;max-width:min(92%,78ch);padding:13px 18px}
html[data-sk-product="lang"] .msg.u{background:var(--sk-accent);color:var(--sk-on-accent)}
html[data-sk-product="lang"] .msg.a{background:var(--sk-inset);color:var(--sk-ink);border-color:var(--sk-line)}
html[data-sk-product="lang"] .chatempty{font-size:0.9375rem;line-height:1.7;max-width:46ch;font-style:normal}
html[data-sk-product="lang"] .chatbar{padding:14px;align-items:flex-end;flex-shrink:0;min-width:0;background:var(--sk-surface)}
html[data-sk-product="lang"] .chatbar textarea{min-width:0;min-height:48px;flex:1;font-size:1rem;background:var(--sk-inset);line-height:1.45}
html[data-sk-product="lang"] .chatbar :is(.mic,.btn){min-height:48px;flex-shrink:0}
html[data-sk-product="lang"] .sk-lang-context{grid-area:context;max-height:calc(100dvh - var(--sk-header-height) - 195px);min-height:360px;overflow:auto;overscroll-behavior:contain}
html[data-sk-product="lang"] .sk-context-note{font-size:0.75rem;line-height:1.55;color:var(--sk-muted);border-top:1px solid var(--sk-line);padding-top:16px}
html[data-sk-product="lang"] .sk-material-label{display:block;font-size:0.8125rem;margin:12px 0 5px;color:var(--sk-muted)}
html[data-sk-product="lang"] .sk-material-detail>h3{margin:20px 0 8px}
html[data-sk-product="lang"] .sk-context-collection{margin:18px 0}
html[data-sk-product="lang"] .sk-context-collection>summary{padding-block:12px;cursor:pointer}
html[data-sk-product="lang"] .sk-material-board{display:grid;gap:10px;margin-block:12px}
html[data-sk-product="lang"] .sk-material-tile{background:var(--sk-inset);border:1px solid var(--sk-line);border-radius:10px;color:var(--sk-ink);padding:16px;text-align:left;font:600 0.9375rem/1.45 var(--sk-sans)}
html[data-sk-product="lang"] .sk-home-switch,html[data-sk-product="lang"] .sk-nav-toggle{display:none}
html[data-sk-product="lang"] .block{border-radius:var(--sk-radius)}
html[data-sk-product="lang"] .cover{background:var(--cover-1,#16283c)}
html[data-sk-product="lang"] .cover .ttl{color:#faf8f3}
html[data-sk-product="lang"] .cover .kind,html[data-sk-product="lang"] .cover .mark{color:#e0e5e8}
html[data-sk-product="lang"] .sk-lang-shell.sk-guest{grid-template-columns:minmax(0,1fr)}
html[data-sk-product="lang"] :is(.sec,.empty,.libmore,.libnote,.viewhead,.topic){grid-column:1/-1}
html[data-sk-product="lang"] footer{width:var(--sk-page);max-width:none;padding-inline:0;font-size:0.8125rem}
html[data-sk-product="lang"] :is(.modal,.mhead,.mfoot,.chatbar){color:var(--sk-ink);background:var(--sk-surface)}
html[data-sk-product="lang"] .modal{width:min(94vw,720px);border-radius:var(--sk-radius)}
html[data-sk-product="lang"] .modal.chat{max-width:900px}
html[data-sk-product="lang"] .modal.block-full{max-width:980px}
html[data-sk-product="lang"] :is(.mhead .x,.whynote .x){width:44px;height:44px;flex-shrink:0}
html[data-sk-product="lang"] .recbar button{min-height:44px}
html[data-sk-product="lang"] .btn{min-height:44px;background:var(--sk-accent);color:var(--sk-on-accent)}
html[data-sk-product="lang"] .btn.ghost{background:var(--sk-surface);color:var(--sk-ink)}
html[data-sk-product="lang"] :is(.autherr,.recwarn,.recwarn-inline){background:var(--sk-inset);color:var(--sk-ink);border-color:var(--sk-accent)}
html[data-sk-product="lang"] .recwarn :is(.rw1,.rw2),html[data-sk-product="lang"] :is(.recextra,.recstill){color:var(--sk-ink)}
html[data-sk-product="lang"] .fab{background:var(--sk-accent);color:var(--sk-on-accent)}
html[data-sk-product="lang"] .fab.chat{background:var(--sk-surface);color:var(--sk-ink)}
html[data-sk-product="lang"] .sk-skip{position:fixed;top:-100px;left:16px;padding:14px 20px;background:var(--sk-surface);color:var(--sk-ink);z-index:200}
html[data-sk-product="lang"] .sk-skip:focus{top:8px}

html[data-sk-product="lang"] .sk-phrases{list-style:none;padding:0;margin:14px 0}
html[data-sk-product="lang"] .sk-phrases li{padding:12px 0;border-bottom:1px solid var(--sk-line);display:flex;flex-direction:column;gap:5px}
html[data-sk-product="lang"] .sk-phrase-original{font-size:1.0625rem;font-weight:600;line-height:1.5}
html[data-sk-product] .sk-eyebrow{font:600 0.6875rem/1.5 var(--sk-mono);text-transform:uppercase;letter-spacing:.09em;color:var(--sk-muted);margin:0 0 8px}

/* L2: horizontal navigation and a two-page reading spread. */
html[data-sk-layout="L2"] .sk-lang-shell,html[data-sk-layout="L3"] .sk-lang-shell,html[data-sk-layout="L5"] .sk-lang-shell{grid-template-columns:minmax(0,1fr);gap:20px}
html:is([data-sk-layout="L2"],[data-sk-layout="L3"],[data-sk-layout="L5"]) .sk-lang-nav{position:static;border-bottom:1px solid var(--sk-line);padding-bottom:14px}
html:is([data-sk-layout="L2"],[data-sk-layout="L3"],[data-sk-layout="L5"]) #navtabs{flex-direction:row;flex-wrap:wrap;gap:6px}
html:is([data-sk-layout="L2"],[data-sk-layout="L3"],[data-sk-layout="L5"]) #navtabs button{text-align:center}
html[data-sk-layout="L2"] .home{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"greet greet" "actions actions" "context chat";column-gap:0;background:var(--sk-surface);padding:28px;border:1px solid var(--sk-line);border-radius:5px}
html[data-sk-layout="L2"] .sk-lang-context{border:0;border-right:1px solid var(--sk-line);border-radius:0;padding:12px 32px 12px 0;background:none}
html[data-sk-layout="L2"] .home-chat{border:0;background:none;padding-left:20px}
html[data-sk-layout="L2"] .home-greet h2,html[data-sk-layout="L2"] .sk-phrase-original{font-family:var(--sk-serif)}
html[data-sk-layout="L2"] :is(.home-chat,.sk-lang-context){height:clamp(360px,calc(100dvh - var(--sk-header-height) - 302px),900px);max-height:none}
/* L3: lesson first, a separate conversation panel. */
html[data-sk-layout="L3"] .home{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"greet greet" "actions actions" "context chat"}
html[data-sk-layout="L3"] .sk-phrases{counter-reset:phrase;display:grid;gap:10px}
html[data-sk-layout="L3"] .sk-phrases li{padding:16px 18px;background:var(--sk-inset);border:1px solid var(--sk-line);border-radius:8px}
html[data-sk-layout="L3"] .sk-phrase-original{font-size:1.25rem}
html[data-sk-layout="L3"] :is(.home-chat,.sk-lang-context){height:clamp(360px,calc(100dvh - var(--sk-header-height) - 268px),860px);max-height:none}
/* L4: narrow navigation and a large, quiet conversation. Context remains accessible below. */
html[data-sk-layout="L4"] .sk-lang-shell{grid-template-columns:126px minmax(0,1fr)}
html[data-sk-layout="L4"] #navtabs button{text-align:center;padding:15px 8px;font-size:0.8125rem;border:1px solid var(--sk-line);border-radius:16px}
html[data-sk-layout="L4"] .home{grid-template-columns:minmax(0,1fr);grid-template-areas:"greet" "actions" "chat" "context";max-width:1320px;margin:auto}
html[data-sk-layout="L4"] .home-chat{background:transparent;border:0}
html[data-sk-layout="L4"] .chatbar{border-radius:20px;border:1px solid var(--sk-line)}
html[data-sk-layout="L4"] .sk-lang-context{max-height:none;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px}
html[data-sk-layout="L4"] .sk-lang-context>.sk-material-detail{grid-column:2;grid-row:1/6}
html[data-sk-layout="L4"] .sk-context-note{grid-column:1/-1}
/* L5: collection-first board beside a persistent assistant. */
html[data-sk-layout="L5"] .home{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"greet chat" "actions chat" "context chat";grid-template-rows:auto auto 1fr}
html[data-sk-layout="L5"] .home-actions{grid-template-columns:1fr}
html[data-sk-layout="L5"] .home-chat{height:clamp(420px,calc(100dvh - var(--sk-header-height) - 122px),1100px);position:sticky;top:calc(var(--sk-header-height) + 20px)}
html[data-sk-layout="L5"] .sk-lang-context{max-height:none}
html[data-sk-layout="L5"] .sk-context-collection{border-top:1px solid var(--sk-line)}
html[data-sk-layout="L5"] .sk-material-board{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1200px){
 html[data-sk-product="lang"] .sk-lang-shell{gap:18px;grid-template-columns:170px minmax(0,1fr)}
 html[data-sk-product="lang"] .home{grid-template-columns:minmax(0,1fr) 280px;gap:16px}
 html:is([data-sk-layout="L2"],[data-sk-layout="L3"],[data-sk-layout="L5"]) .sk-lang-shell{grid-template-columns:1fr}
 html:is([data-sk-layout="L2"],[data-sk-layout="L3"],[data-sk-layout="L5"]) .home{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 html[data-sk-layout="L4"] .sk-lang-shell{grid-template-columns:110px minmax(0,1fr)}
 html[data-sk-layout="L4"] .home{grid-template-columns:1fr}
 html[data-sk-product="lang"] .sk-context{padding:18px}
 html[data-sk-product="lang"] .home-actions button{padding:10px;font-size:0.8125rem}
}
@media(max-width:1000px){
 html[data-sk-product="lang"] .htop{gap:8px}
 html[data-sk-product="lang"] :is(.authchip,.xsite,.uilang summary){font-size:0.75rem;padding:8px}
 html[data-sk-product="lang"] .sk-appearance-trigger>span{display:none}
 html[data-sk-product="lang"] .home{grid-template-columns:1fr;grid-template-areas:"greet" "actions" "chat" "context";grid-template-rows:auto auto auto auto}
 html[data-sk-product="lang"] .sk-lang-context{height:auto;max-height:none;min-height:0}
 html:is([data-sk-layout="L2"],[data-sk-layout="L3"],[data-sk-layout="L5"]) .home{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 html:is([data-sk-layout="L2"],[data-sk-layout="L3"]) .home{grid-template-areas:"greet greet" "actions actions" "context chat"}
 html[data-sk-layout="L5"] .home{grid-template-areas:"greet chat" "actions chat" "context chat"}
 html[data-sk-layout="L2"] .home{padding:20px}
 html[data-sk-product="lang"] .chatbar{flex-wrap:wrap}
 html[data-sk-product="lang"] .chatbar textarea{flex-basis:calc(100% - 64px)}
}
@media(max-width:760px){
 html[data-sk-product="lang"] header{padding:10px 0;position:sticky}
 html[data-sk-product="lang"] .htop{gap:8px;display:flex;flex-wrap:wrap}
 html[data-sk-product="lang"] h1{font-size:1.3125rem;flex:1;min-width:160px}
 html[data-sk-product="lang"] .authchip{max-width:130px}
 html[data-sk-product="lang"] .sk-nav-toggle{display:inline-flex;flex-shrink:0}
 html[data-sk-product="lang"] .sk-lang-shell{display:block;width:calc(100% - 24px);margin:16px auto}
 html[data-sk-product="lang"] .sk-lang-nav{display:none;position:static;border:1px solid var(--sk-line);border-radius:12px;padding:10px;margin-bottom:16px;background:var(--sk-surface)}
 html[data-sk-product="lang"] .sk-nav-open .sk-lang-nav{display:block}
 html[data-sk-product="lang"] #navtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 html[data-sk-product="lang"] #navtabs button{font-size:0.875rem;padding:10px;text-align:left}
 html[data-sk-product="lang"] .home{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"greet" "actions" "chat" "context";grid-template-rows:auto;gap:16px;padding:0;border:0;background:none}
 html[data-sk-product="lang"] .home-greet h2{font-size:1.4375rem}
 html[data-sk-product="lang"] .home-actions{grid-template-columns:1fr 1fr;gap:8px}
 html[data-sk-product="lang"] .home-actions button:first-child{grid-column:1/-1}
 html[data-sk-product="lang"] .home-chat{height:clamp(340px,calc(100dvh - var(--sk-header-height) - 282px),800px);position:static;padding:0;border:1px solid var(--sk-line);border-radius:var(--sk-radius);background:var(--sk-surface)}
 html[data-sk-product="lang"] .chatlog{padding:14px}
 html[data-sk-product="lang"] .msg{max-width:96%;font-size:1rem;padding:10px 12px}
 html[data-sk-product="lang"] .chatbar{padding:10px;gap:8px}
 html[data-sk-product="lang"] .sk-lang-context{padding:18px;border:1px solid var(--sk-line);display:block;max-height:none;height:auto;min-height:0;border-radius:var(--sk-radius)}
 html[data-sk-layout="L3"] .sk-home-switch{display:flex;gap:8px;grid-area:switch}
 html[data-sk-layout="L3"] .home{grid-template-areas:"greet" "actions" "switch" "chat" "context"}
 html[data-sk-layout="L3"] .home[data-panel="agent"] .sk-lang-context{display:none}
 html[data-sk-layout="L3"] .home[data-panel="material"] .home-chat{display:none}
 html[data-sk-layout="L3"] .sk-home-switch button[aria-pressed="true"]{background:var(--sk-accent);color:var(--sk-on-accent)}
 html[data-sk-layout="L2"] .home{grid-template-areas:"greet" "actions" "context" "chat"}
 html[data-sk-layout="L5"] .home{grid-template-areas:"greet" "actions" "context" "chat"}
 html[data-sk-product="lang"] #app{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:16px}
 html[data-sk-product="lang"] :is(.modal,.modal.block-full){width:100%;max-width:none}
 html[data-sk-product="lang"] .viewhead{flex-wrap:wrap}
 html[data-sk-product="lang"] .viewhead>*{max-width:100%}
 html[data-sk-product="lang"] .fab{font-size:0.8125rem;padding:12px 14px}
}

@media(max-width:760px){
 html[data-sk-layout="L3"] .home-chat{height:clamp(320px,calc(100dvh - var(--sk-header-height) - 340px),800px)}
 html[data-sk-product="lang"] .authchip{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
}

/* Production L1 shell hardening: the workspace fills the viewport, failures remain a real
   product state, and legacy actions live inside the workspace instead of screen corners. */
html[data-sk-product="lang"] body{
 min-height:100dvh;display:flex;flex-direction:column;padding-bottom:0;
}
html[data-sk-product="lang"] header{flex:none}
html[data-sk-product="lang"] .sk-lang-shell{
 flex:1 0 auto;min-height:calc(100dvh - var(--sk-header-height) - 118px);
 grid-template-rows:minmax(0,auto) auto;
}
html[data-sk-product="lang"] .sk-action-dock{
 grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:10px;
 padding-top:2px;min-width:0;
}
html[data-sk-product="lang"] .sk-action-dock:not(:has(.fab:not([hidden]))){display:none}
html[data-sk-product="lang"] .sk-action-dock .fab{
 position:static;inset:auto;z-index:auto;box-shadow:none;border-radius:12px;
 min-height:46px;padding:11px 16px;font-size:0.875rem;
}
html[data-sk-product="lang"] .sk-action-dock .fab.chat{margin-right:auto}
html[data-sk-product="lang"] #app:has(>.sk-load-error){display:block}
html[data-sk-product="lang"] .sk-load-error{
 min-height:clamp(320px,43dvh,470px);width:min(100%,920px);margin-inline:auto;padding:clamp(28px,4vw,54px);
 border:1px solid var(--sk-line);border-radius:calc(var(--sk-radius) + 2px);background:var(--sk-surface);
 display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
 color:var(--sk-ink);overflow:hidden;
}
html[data-sk-product="lang"] .sk-load-error .big{
 display:grid;place-items:center;width:52px;height:52px;margin:0 0 22px;
 border-radius:14px;background:var(--sk-inset);font-size:1.5625rem;
}
html[data-sk-product="lang"] .sk-load-title{
 display:block;font-size:clamp(1.4375rem,2.1vw,2.0625rem);line-height:1.2;max-width:26ch;
}
html[data-sk-product="lang"] .sk-load-hint{
 margin:10px 0 24px;max-width:46ch;color:var(--sk-muted);font-size:0.9375rem;line-height:1.6;
}
html[data-sk-product="lang"] .sk-load-retry{min-width:150px}
html[data-sk-product="lang"] footer{
 flex:none;margin-top:auto;width:var(--sk-page);padding:18px 0 calc(18px + env(safe-area-inset-bottom,0));
}
@media(max-width:760px){
 html[data-sk-product="lang"] .sk-lang-shell{min-height:calc(100dvh - var(--sk-header-height) - 92px)}
 html[data-sk-product="lang"] .sk-action-dock{position:static;bottom:auto;z-index:auto;padding:10px 0 0;background:none}
 html[data-sk-product="lang"] .sk-action-dock .fab{flex:1;justify-content:center;max-width:none}
 html[data-sk-product="lang"] .sk-action-dock .fab.chat{margin-right:0}
 html[data-sk-product="lang"] .sk-load-error{min-height:300px;width:100%;padding:28px 20px;align-items:flex-start;text-align:left}
 html[data-sk-product="lang"] .sk-load-error .big{margin-bottom:18px}
 html[data-sk-product="lang"] .sk-load-hint{margin-bottom:20px}
 html[data-sk-product="lang"] #app{border:0!important;box-shadow:none!important}
 html[data-sk-product="lang"] .chatbar textarea{min-height:64px;flex-basis:100%}
 html[data-sk-product="lang"] #sk-appearance-open>span{display:none}
 html[data-sk-product="lang"] .authchip{max-width:none}
 html[data-sk-product="lang"] .authchip.in{flex:1 1 120px;min-width:0;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
 html[data-sk-product="lang"] .xsite{max-width:148px;overflow:hidden;text-overflow:ellipsis}
 html[data-sk-product="lang"] footer{width:calc(100% - 24px);padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px))}
}

/* Shared account entry keeps its readable type through the tablet header rules. */
html[data-sk-product="lang"] #authChip.sokkos-account-button,
html[data-sk-product="lang"] #authRegisterEntry.sokkos-account-button{font-size:16px}


/* ui/studio.css */
/* Existing Language Studio design, integrated over the real application and its theme preferences. */
html[data-sk-product="lang"][data-studio="live"]{
 --sk-bg:#e8e4da;--sk-surface:#f7f4ec;--studio-card:#fffdf8;--sk-inset:#f4e6d4;
 --sk-ink:#14273b;--sk-muted:#65717d;--sk-line:rgba(20,39,59,.15);--sk-accent:#14273b;--sk-on-accent:#fff;
 --studio-ochre:#bd7426;--studio-rail:238px;--sk-radius:18px;--sk-small-radius:11px;
 --serif:Georgia,'Times New Roman',serif;--sk-shadow:0 20px 54px rgba(20,39,59,.12);
 --sk-page:100%;--sk-header-height:80px;
}
html[data-sk-product="lang"][data-studio="live"][data-sk-theme="dark"]{
 --sk-bg:#141d27;--sk-surface:#202b36;--studio-card:#26333f;--sk-inset:#34404a;
 --sk-ink:#f0eee7;--sk-muted:#c1cbd2;--sk-line:rgba(228,234,240,.19);--sk-accent:#e9dac4;--sk-on-accent:#192634;
 --studio-ochre:#e0a052;--sk-shadow:0 20px 54px rgba(0,0,0,.22);
}
html[data-studio="live"] body{background:radial-gradient(circle at 85% 0,rgba(189,116,38,.10),transparent 32rem),var(--sk-bg);min-height:100dvh;padding:0}
html[data-sk-product="lang"][data-studio="live"] .sk-lang-shell{
 display:grid;width:100%;max-width:none;margin:0;gap:0;grid-template-columns:var(--studio-rail) minmax(0,1fr);grid-template-rows:1fr;align-items:start;min-height:100dvh;
}
html[data-sk-product="lang"][data-studio="live"] .sk-lang-nav{
 position:sticky;top:0;height:100dvh;min-width:0;padding:28px 20px 22px;border:0;border-right:1px solid var(--sk-line);border-radius:0;
 background:var(--sk-surface);display:flex;flex-direction:column;gap:0;z-index:35;margin:0;
}
.studio-brand-group{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;margin:0 0 30px;min-width:0}
.studio-brand-group .studio-mark{display:none}
.studio-brand-group .studio-brand b{font-size:1.0625rem;white-space:nowrap}
.studio-brand-group .studio-brand small{font-size:0.5rem}
.studio-brand{display:flex;gap:10px;align-items:center;margin:0;line-height:1.3;color:inherit;text-decoration:none;border-radius:12px;min-width:0}
.studio-brand-credit{font:700 0.55rem/1.3 system-ui,sans-serif;color:inherit;text-decoration:none;opacity:.8;white-space:nowrap;flex:none}
.studio-brand-credit:hover,.studio-brand-credit:focus-visible{text-decoration:underline}
.studio-brand-credit:focus-visible{outline:2px solid var(--studio-ochre);outline-offset:3px}
@media(min-width:1001px){html[data-sk-product="lang"][data-studio="live"] .studio-main>header .sokkos-brand-group{display:none}}
.studio-brand:hover b{text-decoration:underline}
.brand-link{color:inherit;text-decoration:none}
.brand-link:hover{text-decoration:underline}
.studio-brand:focus-visible,.brand-link:focus-visible,.studio-rail-link:focus-visible{outline:2px solid var(--studio-ochre,#b87930);outline-offset:3px}
/* Outbound entry beside (not inside) the view tabs: it leaves the site, the four tabs do not. */
.studio-rail-extras{display:grid;gap:10px;margin-top:22px}
.studio-rail-link{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px;border:1px solid var(--studio-ochre);border-radius:12px;background:var(--studio-card);color:var(--sk-ink);text-decoration:none;font-size:0.875rem;font-weight:600;line-height:1.25}
.studio-rail-link:hover{background:var(--sk-inset)}
.studio-rail-link-icon{width:24px;text-align:center;font-size:1.1875rem;flex:none}
.studio-rail-link-label{flex:1;min-width:0}
.studio-rail-link .xarrow{font-size:0.75rem;color:var(--sk-muted)}
/* The rail exists from 1001px up; below that the header chip is the entry, so the destination is never shown twice. */
@media(min-width:1001px){html[data-sk-product="lang"][data-studio="live"] #xsiteMotor{display:none}}
.studio-mark{flex:none;width:33px;height:33px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font:700 0.75rem var(--sk-mono)}
.studio-brand b{display:block;font:500 1.25rem var(--sk-serif)}
.studio-brand small{display:block;color:var(--sk-muted);font-size:0.625rem;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
html[data-sk-product="lang"][data-studio="live"] #navtabs{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:0}
html[data-sk-product="lang"][data-studio="live"] #navtabs button{
 display:flex;align-items:center;gap:10px;min-height:48px;padding:12px;border:0;border-radius:12px;text-align:left;background:transparent;color:var(--sk-muted);font-size:0.875rem;line-height:1.25;cursor:pointer;
}
html[data-sk-product="lang"][data-studio="live"] #navtabs button::before{content:attr(data-icon);width:24px;text-align:center;font-size:1.1875rem;flex:none}
html[data-sk-product="lang"][data-studio="live"] #navtabs button:hover{background:var(--sk-inset)}
html[data-sk-product="lang"][data-studio="live"] #navtabs button.on{background:var(--sk-accent);color:var(--sk-on-accent)}
.studio-rail-bottom{display:grid;gap:9px;margin-top:auto;padding-top:30px}
.studio-rail-bottom button{border:1px solid var(--sk-line);background:var(--studio-card);color:var(--sk-ink);border-radius:11px;padding:10px 12px;text-align:left;font-size:0.75rem;cursor:pointer}
.studio-main{min-width:0;padding:24px 30px 38px}
html[data-sk-product="lang"][data-studio="live"] .studio-main>header{position:relative;top:auto;padding:0;background:none;border:0;backdrop-filter:none;margin:0 auto 18px;max-width:1260px;width:100%}
html[data-sk-product="lang"][data-studio="live"] .studio-main>header>.htop{display:flex;width:100%;max-width:none;margin:0;padding:0;gap:10px;min-height:44px;align-items:center;justify-content:flex-end}
html[data-sk-product="lang"][data-studio="live"] .studio-main>header h1{display:none}
html[data-sk-product="lang"][data-studio="live"] .sk-nav-toggle{display:none!important}
.studio-label{margin-right:auto;font:600 0.625rem/1.4 var(--sk-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sk-muted)}
html[data-sk-product="lang"][data-studio="live"] .studio-canvas{max-width:1260px;margin:0 auto;background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:24px;box-shadow:var(--sk-shadow);min-height:calc(100dvh - 145px);min-width:0}
.studio-view-head{padding:32px 36px 22px;border-bottom:1px solid var(--sk-line)}
.studio-view-head .studio-eyebrow{font:600 0.625rem/1.4 var(--sk-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--sk-muted);margin:0 0 8px}
.studio-view-head h2{font:500 2rem/1.12 var(--sk-serif);margin:0;letter-spacing:-.015em}
.studio-view-head .studio-subtitle{font-size:0.84375rem;line-height:1.6;color:var(--sk-muted);max-width:720px;margin:9px 0 0}
html[data-sk-product="lang"][data-studio="live"] #app{padding:26px 36px 34px;gap:16px;background:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,225px),1fr));min-width:0}
html[data-sk-product="lang"][data-studio="live"] #app:has(>.home),html[data-sk-product="lang"][data-studio="live"] #app:has(>.studio-view),html[data-sk-product="lang"][data-studio="live"] #app:has(>.sk-load-error){display:block}
html[data-sk-product="lang"][data-studio="live"] .studio-canvas>.barrow,html[data-sk-product="lang"][data-studio="live"] .studio-canvas>.filters{width:auto;max-width:none;margin:18px 36px 0;padding:0}
html[data-sk-product="lang"][data-studio="live"] .home{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);grid-template-rows:auto auto auto;grid-template-areas:"greet context" "chat context" "actions actions";gap:18px;padding:0;border:0;background:none;max-width:none;min-width:0}
html[data-sk-product="lang"][data-studio="live"] .home-greet{grid-area:greet;margin:0;padding:0;min-width:0}
html[data-sk-product="lang"][data-studio="live"] .home-greet h2{font:500 1.8125rem/1.2 var(--sk-serif);margin:0;letter-spacing:-.015em}
html[data-sk-product="lang"][data-studio="live"] .home-greet p{font-size:0.8125rem;line-height:1.65;margin:10px 0 0;color:var(--sk-muted)}
html[data-sk-product="lang"][data-studio="live"] .home-chat{grid-area:chat;height:360px;min-height:280px;padding:0;margin:0;border:1px solid var(--sk-line);border-radius:18px;background:var(--studio-card);position:static;min-width:0}
html[data-sk-product="lang"][data-studio="live"] .home-analytics{display:none}
html[data-sk-product="lang"][data-studio="live"] .sk-lang-context{grid-area:context;height:auto;max-height:none;min-height:0;padding:20px;background:var(--studio-card);border:1px solid var(--sk-line);border-radius:18px;display:block;overflow:visible}
html[data-sk-product="lang"][data-studio="live"] .sk-lang-context h2,html[data-sk-product="lang"][data-studio="live"] .sk-lang-context h3{font-family:var(--sk-serif);font-weight:500}
html[data-sk-product="lang"][data-studio="live"] .home-actions{grid-area:actions;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 0}
html[data-sk-product="lang"][data-studio="live"] .home-actions button{min-height:104px;background:var(--studio-card);border:1px solid var(--sk-line);border-radius:16px;padding:16px;text-align:left;font-size:0.8125rem;line-height:1.45;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:13px}
html[data-sk-product="lang"][data-studio="live"] .home-actions button::before{content:attr(data-icon);font:500 1.375rem/1 var(--sk-sans);color:var(--studio-ochre)}
html[data-sk-product="lang"][data-studio="live"] .home-actions button:hover{border-color:var(--studio-ochre);background:var(--sk-inset)}
html[data-sk-product="lang"][data-studio="live"] .home-actions button:first-child{grid-column:auto}
html[data-sk-product="lang"][data-studio="live"] .sk-home-switch{display:none}
html[data-sk-product="lang"][data-studio="live"] .chatlog{padding:20px;min-height:0}
html[data-sk-product="lang"][data-studio="live"] .chatempty{font-size:0.875rem;line-height:1.65;color:var(--sk-muted);max-width:42ch}
html[data-sk-product="lang"][data-studio="live"] .chatbar{background:var(--studio-card);border-radius:0 0 18px 18px;padding:12px;gap:8px}
html[data-sk-product="lang"][data-studio="live"] .chatbar textarea{background:var(--sk-surface);border-radius:12px;min-height:52px;font-size:1rem}
@media(max-width:600px){html[data-sk-product="lang"][data-studio="live"] .chatbar textarea{min-height:max(60px,3.75rem)}}
html[data-sk-product="lang"][data-studio="live"] .sk-action-dock{padding:0 36px 26px;display:flex;gap:10px;justify-content:flex-end}
html[data-sk-product="lang"][data-studio="live"] .sk-action-dock:not(:has(.fab:not([hidden]))){display:none}
html[data-sk-product="lang"][data-studio="live"] .studio-main>footer{width:100%;max-width:1260px;padding:22px 0 0;margin:0 auto;background:none}
.studio-view{min-width:0}
.studio-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.studio-card{background:var(--studio-card);border:1px solid var(--sk-line);border-radius:18px;padding:24px;min-width:0}
.studio-card-icon{display:block;color:var(--studio-ochre);font-size:1.75rem;margin-bottom:20px}
.studio-card h3{font:500 1.5rem/1.2 var(--sk-serif);margin:0 0 12px}
.studio-card p{font-size:0.8125rem;line-height:1.65;color:var(--sk-muted);margin:10px 0 18px}
.studio-card .btn{margin:10px 8px 0 0}
.studio-practice-picker{display:grid;gap:7px;margin:18px 0 4px;color:var(--sk-muted);font-size:0.75rem;line-height:1.4}
.studio-practice-picker select{box-sizing:border-box;width:100%;min-height:44px;padding:9px 10px;border:1px solid var(--sk-line);border-radius:10px;background:var(--sk-surface);color:var(--sk-ink);font:inherit;font-size:0.875rem}
.studio-practice-picker select:focus-visible{outline:2px solid var(--studio-ochre);outline-offset:2px}
.studio-badge{display:inline-flex;font:600 0.625rem/1.3 var(--sk-mono);padding:6px 9px;border:1px solid var(--sk-line);border-radius:999px;letter-spacing:.03em}
.studio-unavailable{color:var(--sk-muted);background:var(--sk-surface)}
.studio-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style-position:inside;padding:0;margin:24px 0}
.studio-steps li{padding:18px;background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:12px;color:var(--sk-muted);font-size:0.8125rem;line-height:1.5}
.studio-note{color:var(--sk-muted);font-size:0.75rem;line-height:1.65;margin:20px 0}
.studio-metric-value{font:500 2.375rem/1.2 var(--sk-serif)}
html[data-sk-product="lang"][data-studio="live"] .block{border-radius:16px;background:var(--studio-card);box-shadow:0 7px 22px rgba(20,39,59,.035)}
html[data-sk-product="lang"][data-studio="live"] .block .ttl{font-family:var(--sk-serif);font-weight:500}
html[data-sk-product="lang"][data-studio="live"] .sec{font-family:var(--sk-serif)}
html[data-sk-product="lang"][data-studio="live"] .viewhead{border:0;padding-top:0;background:none}
html[data-sk-product="lang"][data-studio="live"] .modal{background:var(--sk-surface)}
html[data-sk-product="lang"][data-studio="live"][data-sk-density="compact"] #app{padding:20px 28px 26px}
html[data-sk-product="lang"][data-studio="live"][data-sk-density="compact"] .studio-card{padding:18px}
@media(min-width:1450px){html[data-sk-product="lang"][data-studio="live"] .home-actions{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1001px) and (max-width:1100px){
 .studio-brand-group{flex-wrap:wrap;gap:4px}
 .studio-brand-credit{margin-left:0}
}
@media(max-width:1100px){
 html[data-sk-product="lang"][data-studio="live"]{--studio-rail:200px}
 .studio-main{padding:20px}
 html[data-sk-product="lang"][data-studio="live"] .home{grid-template-columns:1fr;grid-template-areas:"greet" "chat" "actions" "context"}
 .studio-card-grid{grid-template-columns:1fr}
 html[data-sk-product="lang"][data-studio="live"] .home-chat{height:340px}
}
@media(max-width:1000px) and (min-width:621px){
 html[data-sk-product="lang"][data-studio="live"] .sk-lang-shell{display:block}
 html[data-sk-product="lang"][data-studio="live"] .sk-lang-nav{position:relative;height:auto;padding:12px 18px;border-right:0;border-bottom:1px solid var(--sk-line)}
 .studio-brand-group,.studio-rail-bottom,.studio-rail-extras{display:none}
 html[data-sk-product="lang"][data-studio="live"] #navtabs{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap}
 html[data-sk-product="lang"][data-studio="live"] #navtabs button{padding:9px 11px;font-size:0.8125rem;min-height:44px;gap:6px}
 html[data-sk-product="lang"][data-studio="live"] #navtabs button::before{display:none}
 html[data-sk-product="lang"][data-studio="live"] .studio-main>header h1{display:block;margin-right:auto;font:500 1.4375rem var(--sk-serif)}
 .studio-label{display:none}
}
@media(max-width:620px){
 html[data-sk-product="lang"][data-studio="live"] body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
 html[data-sk-product="lang"][data-studio="live"] .sk-lang-shell{display:block;min-height:0}
 .studio-main{padding:10px 9px 20px}
 html[data-sk-product="lang"][data-studio="live"] .sk-lang-nav{position:fixed;top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));height:64px;width:auto;padding:5px;border:0;border-radius:17px;background:#14273b;box-shadow:0 15px 35px rgba(20,39,59,.25);display:block;z-index:40}
 .studio-brand-group,.studio-rail-bottom,.studio-rail-extras,.studio-label{display:none}
 html[data-sk-product="lang"][data-studio="live"] #navtabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;width:100%}
 html[data-sk-product="lang"][data-studio="live"] #navtabs button{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:4px 1px;border-radius:12px;text-align:center;color:#c4cfd9;font-size:0.5625rem;line-height:1.1;font-weight:500;overflow-wrap:anywhere}
 html[data-sk-product="lang"][data-studio="live"] #navtabs button::before{width:auto;font-size:1.125rem;line-height:1}
 html[data-sk-product="lang"][data-studio="live"] #navtabs button.on{background:#fffdf8;color:#14273b}
 html[data-sk-product="lang"][data-studio="live"] .studio-main>header{margin-bottom:12px;padding:0 4px}
 html[data-sk-product="lang"][data-studio="live"] .studio-main>header>.htop{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:7px}
 html[data-sk-product="lang"][data-studio="live"] .studio-main>header h1{display:block;grid-column:1;grid-row:1;font:500 1.375rem/1.2 var(--sk-serif);min-width:0;margin:0}
 html[data-sk-product="lang"][data-studio="live"] #uilang{grid-row:1;grid-column:2}
 html[data-sk-product="lang"][data-studio="live"] #uilang summary{width:44px;height:44px;padding:4px;justify-content:center;font-size:0.6875rem}
 html[data-sk-product="lang"][data-studio="live"] #uilang .globe{display:none}
 html[data-sk-product="lang"][data-studio="live"] #sk-appearance-open{grid-row:1;grid-column:3;width:44px;padding:8px}
 html[data-sk-product="lang"][data-studio="live"] #sk-appearance-open>span{display:none}
 html[data-sk-product="lang"][data-studio="live"] #authChip{grid-row:2;grid-column:1;max-width:100%;min-width:44px;min-height:44px;line-height:1.25;white-space:normal;text-overflow:clip;overflow:visible;font-size:16px;justify-content:center}
 html[data-sk-product="lang"][data-studio="live"] #authEntries{grid-row:2;grid-column:1;width:100%}
 html[data-sk-product="lang"][data-studio="live"] #authEntries>button{min-width:44px;min-height:44px;max-width:100%;padding:8px;font-size:16px;white-space:normal}
 html[data-sk-product="lang"][data-studio="live"] #xsiteMotor{grid-row:2;grid-column:2/4;min-height:44px;max-width:none;padding:5px;font-size:0.625rem;line-height:1.2;white-space:normal;text-align:center;justify-content:center;overflow:visible}
 html[data-sk-product="lang"][data-studio="live"] .studio-canvas{border-radius:17px;min-height:calc(100dvh - 192px)}
 .studio-view-head{padding:22px 18px 17px}.studio-view-head h2{font-size:1.6875rem}.studio-view-head .studio-subtitle{font-size:0.78125rem}
 html[data-sk-product="lang"][data-studio="live"] #app,html[data-sk-product="lang"][data-studio="live"][data-sk-density="compact"] #app{padding:18px 14px 24px;grid-template-columns:minmax(0,1fr);gap:14px}
 html[data-sk-product="lang"][data-studio="live"] .home{gap:16px}
 html[data-sk-product="lang"][data-studio="live"] .home-greet h2{font-size:1.5625rem}
 html[data-sk-product="lang"][data-studio="live"] .home-actions{grid-template-columns:1fr;gap:9px}
 html[data-sk-product="lang"][data-studio="live"] .home-actions button{min-height:76px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:14px;gap:16px}
 html[data-sk-product="lang"][data-studio="live"] .home-actions button::before{width:28px;flex:none;text-align:center}
 html[data-sk-product="lang"][data-studio="live"] .home-chat{height:360px}
 html[data-sk-product="lang"][data-studio="live"] .chatlog{padding:15px}
 html[data-sk-product="lang"][data-studio="live"] .sk-action-dock{padding:0 14px 20px;flex-wrap:wrap}
 html[data-sk-product="lang"][data-studio="live"] .studio-canvas>.barrow,html[data-sk-product="lang"][data-studio="live"] .studio-canvas>.filters{margin:16px 14px 0}
 .studio-card-grid,.studio-steps{grid-template-columns:1fr}.studio-card{padding:20px}.studio-card h3{font-size:1.375rem}
 html[data-sk-product="lang"][data-studio="live"] .sk-lang-context{padding:18px}
 html[data-sk-product="lang"][data-studio="live"] .studio-main>footer{padding:18px 4px 0}
}
@media(prefers-reduced-motion:reduce){html[data-studio="live"] *,html[data-studio="live"] *::before,html[data-studio="live"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The Studio heading owns the title; keep the original search/chip nodes and handlers. */
html[data-sk-product="lang"][data-studio="live"] .viewhead > h2,
html[data-sk-product="lang"][data-studio="live"] .viewhead > .vsub{display:none}
.studio-context-phrases{margin:16px 0}
.studio-context-phrases summary{cursor:pointer;font-size:0.75rem;color:var(--sk-muted);padding:10px 0;min-height:44px}
.studio-context-phrases[open] .sk-phrases{max-height:230px;overflow-y:auto;overscroll-behavior:contain}

/* Account/learning settings can open from an active lesson. Keep that dialog
   above the lesson overlay instead of relying on their document order. */
html[data-studio="live"] #authOv { z-index: 60; }
/* Only settings launched from an open lesson need the guaranteed top layer;
   do not reorder the global login and shared-auth dialogs. */
html[data-studio="live"] #authOv.lesson-settings-front,
#authOv.lesson-settings-front { z-index: 80; }
html[data-studio="live"] #pubOv { z-index: 55; }

/* Material source/target are distinct from interface, display and playback preferences. */
.create-language-panel{padding:16px;margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.create-language-panel h4{margin:0 0 12px;font-size:1rem;color:var(--txt)}
.create-language-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.create-language-panel .field{min-width:0;margin:0}
.create-language-panel label{display:block;margin-bottom:6px;font-size:0.875rem;line-height:1.4}
.create-language-panel select,.create-language-panel input{box-sizing:border-box;width:100%;min-height:44px;font:inherit;font-size:1rem;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--txt)}
.create-language-help{margin:12px 0;font-size:0.875rem;line-height:1.5;color:var(--mut)}
.lesson-language-summary{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:0.875rem;line-height:1.5;overflow-wrap:anywhere}
.lesson-language-summary .lesson-context{flex-basis:100%}
@media(max-width:540px){.create-language-grid{grid-template-columns:1fr}.create-language-panel{padding:12px}}

/* A tall creation form must not leave its primary action clipped below the scroll area. */
#createOv .modal.create{max-height:calc(100dvh - 24px)}
#createOv .mhead{flex-shrink:0}
/* Keep the request action reachable when translated help extends beyond the viewport. */
#createOv #genMode>.actions{position:sticky;bottom:0;z-index:1;background:var(--card);padding-block:8px}
#createBtn[hidden]{display:none!important}

.media-setting-note{margin-top:8px;padding:10px 12px;border:1px solid var(--sk-line);border-radius:10px;font-size:.88rem;line-height:1.45;color:var(--sk-muted);background:var(--studio-card)}
#confirmOv{z-index:100}
.overlay.confirm-underlay{pointer-events:none}
.confirm-dialog{max-width:520px}
.media-video-shell{position:relative;margin-top:12px;border-radius:8px;overflow:hidden;background:#07172b}
.media-video-shell video{display:block;margin-top:0;border-radius:0}
.media-text-overlay{position:absolute;left:16px;right:16px;bottom:52px;z-index:2;pointer-events:none;
 padding:9px 12px;border-radius:10px;background:rgba(7,23,43,.82);color:#fff;text-align:center;
 box-shadow:0 6px 18px rgba(0,0,0,.22);font-size:0.875rem;line-height:1.35;overflow-wrap:anywhere;word-break:normal;box-sizing:border-box}
.media-text-overlay[hidden]{display:none!important}
.media-text-overlay .pnl,.media-text-overlay .pru,.media-text-overlay .pex,.media-text-overlay .pexru{color:#fff!important;opacity:1}
.media-text-overlay .pex{margin-top:3px;font-size:0.75rem}
.media-text-overlay .pdash{color:rgba(255,255,255,.72)}
@media(max-width:600px){
 .media-text-overlay{position:static;max-width:100%;margin:0;padding:12px;font-size:1rem;text-align:left;
  border-radius:0;box-shadow:none;pointer-events:auto}
 .media-text-overlay .pex{font-size:0.875rem}
}
/* A search field never cuts its hint in the middle of a word: a hint that does not fit ends in an ellipsis. */
html[data-sk-product="lang"] #libQ{text-overflow:ellipsis}

/* The beginner navigation deliberately exposes the two useful primary destinations.
   Full four-rubric navigation is still available with one Advanced tap. Match the
   live Studio nav selector specificity; do not hide the actual sections or controls. */
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] #navtabs button[data-tab="assignment"],
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] #navtabs button[data-tab="practice"]{
  display:none;
}


/* Let the compact header grow when larger type needs another row. */
@media(max-width:620px){
 html[data-sk-product="lang"][data-studio="live"] .studio-main>header>.htop>.ui-header-actions{
   grid-row:2;grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;min-width:0;width:100%;
 }
 html[data-sk-product="lang"][data-studio="live"] .ui-header-actions .sk-font-scale{margin-left:auto;flex:0 0 auto}
 html[data-sk-product="lang"][data-studio="live"] .ui-header-actions .sk-font-scale .sk-button{min-width:44px;min-height:44px;padding:5px}
 html[data-sk-product="lang"][data-studio="live"] .ui-header-actions #uiModeToggle{
   flex:0 1 10em;width:auto;min-width:min-content;min-height:44px;padding:5px;font-size:0.625rem;line-height:1.2;
   margin:0;white-space:normal;overflow-wrap:normal;
 }
 html[data-sk-product="lang"][data-studio="live"] .ui-header-actions #xsiteMotor{
   flex:0 1 7.8em;width:auto;min-width:44px;max-width:none;min-height:44px;
   padding:5px;font-size:0.625rem;white-space:normal;overflow-wrap:anywhere;
 }
 html[data-sk-product="lang"][data-studio="live"] .ui-header-actions #authEntries{
   flex:1 1 140px;width:auto;min-width:44px;max-width:unset;display:flex;gap:3px;align-items:stretch;
 }
 html[data-sk-product="lang"][data-studio="live"] .ui-header-actions #authEntries>button{
   flex:1 1 auto;min-width:44px;min-height:44px;font-size:16px;padding:5px;overflow-wrap:anywhere;word-break:normal;
 }
}


/* Beginner mode: remove redundant editorial framing and advanced source taxonomy
   from the initial viewport. Existing scopes, queries and full filters remain reachable. */
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .studio-view-head{
  padding:14px 18px 7px;
}
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .studio-view-head .studio-eyebrow,
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .studio-view-head .studio-subtitle,
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .viewhead .vsub,
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .viewhead .vchips{
  display:none;
}
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .studio-view-head h2{
  font-size:1.5rem;line-height:1.25;
}
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .vscope{
  margin:0 0 8px;gap:5px;
}
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .vscope button{
  font-size:0.75rem;min-height:42px;padding:6px 10px;
}
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .viewhead{
  padding:5px 0 8px;margin-bottom:0;
}
html[data-sk-product="lang"][data-studio="live"] body[data-ui-mode="simple"] .vfacets{
  margin:3px 0 4px;padding:0;
}

/* Keep lesson actions above the mobile Studio navigation and its safe area. */
@media(max-width:620px){
 html[data-sk-product="lang"][data-studio="live"] #libraryOv{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
 html[data-sk-product="lang"][data-studio="live"] #libraryOv .modal{max-height:calc(100dvh - 112px - env(safe-area-inset-bottom,0px))}
}

/* LANG-06: a single first lesson action, bounded course and saved-topic lists. */
.first-lesson{grid-column:1/-1;background:var(--sk-surface,#fff);border:1px solid var(--sk-line,#d8dcdf);border-radius:16px;padding:24px;min-width:0}
.first-lesson h2{margin:0 0 12px;font-size:24px;line-height:1.25}
.first-lesson-language{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:12px 16px;margin:4px 0 16px;max-width:100%}
.first-lesson-language label{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;margin:0}
.first-lesson-choice-caption{display:block;font-size:14px;line-height:1.4;font-weight:600;color:var(--sk-ink,#15263c)}
.first-lesson-language select{box-sizing:border-box;display:block;width:100%;min-width:0;min-height:44px;
  padding:9px 12px;border:1px solid var(--sk-line,#d8dcdf);border-radius:10px;
  background:var(--sk-surface,#fff);color:var(--sk-ink,#15263c);
  font-family:inherit;font-size:16px;font-weight:500;line-height:1.35}
.first-lesson-language select:focus-visible{outline:2px solid var(--sk-accent,#397f8a);outline-offset:2px}
.first-lesson p{margin:0 0 20px;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.first-lesson-actions{display:flex;flex-wrap:wrap;gap:12px}
.first-lesson-actions .btn,.catalogue-more{min-width:44px;min-height:44px;font-size:16px}
.catalogue-more{grid-column:1/-1;justify-self:center;margin:12px 0}
#app .block[data-catalogue-kind]>.row .cbody>.bar,
#app .block[data-catalogue-kind]>.row .cmeta>.prog{display:none}
@media(max-width:600px){
  .first-lesson{padding:20px}
  .first-lesson-language{grid-template-columns:minmax(0,1fr);gap:12px}
  .first-lesson-actions{flex-direction:column}
  .first-lesson-actions .btn{width:100%}
}


/* ui/track-player.css */
/* Per-language lesson player: a text slide, phrase navigation, native audio and the two
   independent choices (which texts, which voices). Colours follow the page's own tokens and
   fall back to the brand navy / accent used by the course videos. */
.trk{display:flex;flex-direction:column;gap:12px;margin-top:12px}
/* `display:flex` above would otherwise defeat the hidden attribute (Text format, audio error note). */
.trk[hidden],.trk [hidden]{display:none!important}
.trk-slide{background:#0F1F3D;color:#fff;border-radius:14px;padding:22px 20px;min-height:168px;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / 8%)}
.trk-line{margin:0;font-size:var(--lesson-text-size,clamp(1.125rem,4.6vw,1.625rem));line-height:var(--lesson-text-leading,1.35);overflow-wrap:anywhere;
  padding-left:12px;border-left:3px solid transparent;color:rgb(255 255 255 / 86%);
  transition:color .15s,border-color .15s}
.trk-line.is-speaking{color:#fff;border-left-color:#C8441A}
.trk-line.trk-none{color:rgb(255 255 255 / 62%);font-size:0.9375rem;font-style:italic;border-left-color:transparent}
.trk-nav{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--mut,#52625a);font-size:0.8125rem;font-weight:600}
.trk-step{min-width:44px;min-height:44px;border-radius:999px;border:1px solid var(--line,#cbd5ce);
  background:var(--card2,#e7efe8);color:var(--txt,#182b27);font-size:1.5rem;line-height:1;cursor:pointer}
.trk-step:disabled{opacity:.4;cursor:default}
.trk-audio{width:100%}
.trk-pick{display:flex;flex-direction:column;gap:10px}
.trk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.trk-label{min-width:56px;color:var(--mut,#52625a);font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.trk-chip{min-width:48px;min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line,#cbd5ce);background:var(--card2,#e7efe8);color:var(--txt,#182b27);
  font:inherit;font-size:0.875rem;font-weight:700}
.trk-chip[aria-pressed="true"],.trk-chip[aria-checked="true"]{background:var(--acc2,#245c47);
  border-color:var(--acc2,#245c47);color:var(--on-ink,#fff)}
.trk-chip:focus-visible,.trk-step:focus-visible{outline:3px solid #C8441A;outline-offset:2px}
.trk-nonstop::before{content:'';display:inline-block;width:.7em;height:.7em;margin-right:8px;vertical-align:-1px;
  border:2px solid currentColor;border-radius:50%}
.trk-nonstop[aria-checked="true"]::before{background:currentColor}
.lib-media.trk-audio-only .trk-slide,.lib-media.trk-audio-only .trk-nav{display:none}
@media (max-width:520px){
  .trk-slide{padding:18px 14px}
  .trk-label{flex-basis:100%}
  .trk-nav{flex-wrap:wrap}
  .trk-fullscreen,.trk-watch{flex:1 0 100%;margin:0;white-space:normal}
  .trk-video{max-width:100%}
}

/* Full screen: the browser's own (the player element) or the same player laid over the page. */
.trk-fullscreen{margin-left:6px;white-space:nowrap}
html.trk-fs-lock{overflow:hidden}
.trk.trk-fs{position:fixed;inset:0;z-index:2000;box-sizing:border-box;margin:0;gap:16px;overflow:auto;justify-content:flex-start;scroll-padding:16px;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:#0F1F3D;color:#fff}
/* Expanded settings may exceed a phone's height. Keep the scroll origin before the
   phrase and let every row retain its usable height, rather than centering overflow. */
.trk.trk-fs > *{flex-shrink:0;min-width:0;max-width:100%}
.trk.trk-fs .trk-nav{min-width:0;flex-wrap:wrap}
.trk.trk-fs .trk-slide,.trk.trk-fs .trk-line{min-width:0;max-width:100%;overflow-wrap:anywhere}
.trk.trk-fs .trk-slide{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:18px;min-height:168px;padding:clamp(20px,5vw,56px);border-radius:16px}
.trk.trk-fs .trk-line{font-size:clamp(1.5rem,4.4vw,3.5rem);line-height:1.3}
.trk.trk-fs .trk-line.trk-none{font-size:clamp(1rem,2.2vw,1.375rem)}
.trk.trk-fs .trk-nav,.trk.trk-fs .trk-label,.trk.trk-fs .trk-count{color:rgb(255 255 255 / 78%)}
.trk.trk-fs .trk-step,.trk.trk-fs .trk-chip{border-color:rgb(255 255 255 / 34%);background:transparent;color:#fff}
.trk.trk-fs .trk-chip[aria-pressed="true"],.trk.trk-fs .trk-chip[aria-checked="true"]{background:#C8441A;border-color:#C8441A;color:#fff}
.trk.trk-fs .trk-pick{flex:none}
.trk.trk-fs .pace-controls{margin:0;border-color:rgb(255 255 255 / 34%)}
.trk.trk-fs .pace-controls label,.trk.trk-fs .pace-sound{min-height:44px}
.trk.trk-fs .pace-controls select,.trk.trk-fs .pace-controls input[type=number],.trk.trk-fs .pace-controls .btn{min-height:44px}
.trk.trk-fs .pace-controls select{min-width:44px}
.trk.trk-fs .pace-controls .btn{border-color:rgb(255 255 255 / 34%);background:transparent;color:#fff}
.trk.trk-fs .pace-status,.trk.trk-fs .pace-duration,.trk.trk-fs .pace-help{color:rgb(255 255 255 / 78%)}
.trk.trk-fs .pace-sound{display:flex;align-items:center;gap:8px}
@media (max-width:520px){
  .trk.trk-fs .trk-fullscreen{margin-left:0;white-space:normal}
}

/* Optional video of the same clip: replaces the picture of the slide while watched, never the controls. */
.trk-video{display:block;width:100%;max-height:60vh;border-radius:14px;background:#0F1F3D;margin-bottom:10px}
.trk-watch{margin-left:6px;white-space:nowrap}
.trk.trk-fs .trk-video{max-height:56vh}

/* Unified lesson (compact): the stage spacing comes from the layout; its full screen (the same look as a topic's, in the
   page theme, the picture sized to what the transport leaves) is "H3 Full screen" in lesson-layout.css. */
.trk.lesson-compact--unified{margin-top:0}
.lesson-compact--unified .trk-video{margin:0}

/* The immutable recording and common caption share one fitted picture. Only frame geometry lives here;
   typography and overflow presentation come from lesson-layout.css for every lesson. */
/* Video and caption share one fitted picture. The stage is a separate flexible height slot:
   in full screen the original video and readable caption fit the same remaining picture size. */
.lesson-compact--unified .trk-video-stage{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:0}
.lesson-compact--unified .trk-video-frame{position:relative;box-sizing:border-box;flex:0 0 auto;max-width:100%;
  width:min(100%,calc(min(50vh,480px) / var(--trk-video-inverse,.5625)));
  width:min(100%,calc(min(50dvh,480px) / var(--trk-video-inverse,.5625)));
  aspect-ratio:var(--trk-video-aspect,16/9)}
.lesson-compact--unified .trk-video-frame>.trk-video{display:block;width:100%;height:100%;max-height:none;margin:0;object-fit:contain}
@media(min-width:800px){
  /* Same 460px control reserve as lesson-layout.css: at 1366x768 the video is at most 308px high. */
  .lesson-compact--unified .trk-video-frame{width:min(100%,calc(clamp(200px,calc(100dvh - 460px),480px) / var(--trk-video-inverse,.5625)))}
}
/* The full-screen stage (not the entire media row) owns the aspect sizing. With external text,
   flex allocates its height first and the picture fits the remainder; the strip can scroll if needed. */
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs) .trk-video-stage{
  flex:1 1 0;min-height:0;container-type:size}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs) .trk-video-frame{
  width:min(100cqw,calc(100cqh / var(--trk-video-inverse,.5625)));max-height:100cqh;margin:auto}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs) .lesson-compact__media:has(>.trk-video-stage):has(>.lesson-compact__complement:not([hidden])){
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
.lesson-compact--unified .trk-readable-video-caption{z-index:3}


/* ui/bounded-picker.css */
/* Bounded chooser (ui/bounded-picker.js): a search field with a short list under it. */
.lp{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.lp-label{color:var(--sk-muted,var(--mut,#52625a));font-size:0.75rem;line-height:1.4}
.lp-input{box-sizing:border-box;width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--sk-line,var(--rule,#cbd5ce));
  border-radius:10px;background:var(--sk-surface,var(--card,#fff));color:var(--sk-ink,var(--ink,#16283c));font:inherit;font-size:0.9375rem}
.lp-input:focus-visible{outline:2px solid var(--studio-ochre,var(--acc,#c8842c));outline-offset:2px}
.lp-list{position:absolute;z-index:40;top:100%;left:0;right:0;margin:4px 0 0;padding:4px;list-style:none;max-height:min(340px,52vh);overflow:auto;
  border:1px solid var(--sk-line,var(--rule,#cbd5ce));border-radius:12px;background:var(--sk-surface,var(--card,#fff));
  box-shadow:0 12px 32px rgb(22 40 60 / 18%)}
.lp-list[hidden]{display:none}
.lp-list.lp-up{top:auto;bottom:100%;margin:0 0 4px}
.lp-opt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:44px;padding:9px 10px;border-radius:8px;
  cursor:pointer;color:var(--sk-ink,var(--ink,#16283c));font-size:0.9375rem;line-height:1.3}
.lp-opt-label{overflow-wrap:anywhere}
.lp-opt-hint{flex:none;color:var(--sk-muted,var(--mut,#52625a));font-size:0.75rem}
.lp-opt.is-active,.lp-opt:hover{background:rgb(200 132 44 / 16%)}
.lp-opt[aria-selected="true"] .lp-opt-label{font-weight:700}
.lp-none{padding:12px 10px;color:var(--sk-muted,var(--mut,#52625a));font-size:0.875rem}
.lp-more{position:sticky;bottom:-4px;margin:4px -4px -4px;padding:9px 14px;border-top:1px solid var(--sk-line,var(--rule,#cbd5ce));
  background:var(--sk-surface,var(--card,#fff));color:var(--sk-muted,var(--mut,#52625a));font-size:0.75rem;line-height:1.35;list-style:none}
.lp-label:empty{display:none}


/* ui/learning-path.css */
/* Minimal learning route. Extra tools are available, never expanded by an old preference. */
.learning-path-bar{display:flex;flex-direction:column;gap:12px;min-width:0;margin:12px 0}
.learning-direction{align-self:flex-start;padding:0;border:0;background:none;color:var(--sk-muted,var(--muted));font:inherit;font-size:0.8125rem;cursor:pointer;text-align:left}
.learning-direction::after{content:' \203A';font-size:1.125rem;margin-left:6px}
.learning-levels{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.learning-level{min-height:38px;padding:7px 14px;border:1px solid var(--sk-line,var(--line));border-radius:9px;background:var(--studio-card,var(--card));color:var(--sk-ink,var(--ink));font:600 0.8125rem/1.2 var(--sk-sans,Arial,sans-serif);cursor:pointer}
.learning-level[aria-pressed=true]{background:var(--sk-accent,var(--acc));color:var(--sk-on-accent,#fff);border-color:var(--sk-accent,var(--acc))}
.learning-level:focus-visible,.learning-direction:focus-visible{outline:2px solid var(--studio-ochre,#b87930);outline-offset:3px}
html[data-sk-product=lang][data-studio=live] #app:has(.learning-path-bar){gap:12px;padding-top:18px}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar){margin:0;padding:0 0 8px;min-width:0}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar)>.vsub,
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar)>h2{display:none}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vscope{margin:0 0 8px;font-size:0.8125rem}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vscope button{padding:10px 14px;min-height:40px;font-size:0.8125rem;line-height:1.2}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vctrl{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:0;min-width:0}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vsearch{flex:1 1 220px;margin:0;max-width:none;width:auto}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vsearch input{width:100%;min-height:42px;font-size:0.875rem}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vfacets{flex:0 1 auto;margin:0;padding:0;border:0;min-width:0}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vfacets>summary{min-height:42px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--sk-line);border-radius:9px;font-size:0.8125rem;background:var(--studio-card);cursor:pointer;box-sizing:border-box}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vfacets>summary::before{content:'+';font-size:1.0625rem}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vfacets[open]{flex-basis:100%;padding:10px;border:1px solid var(--sk-line);border-radius:12px}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vfacets[open]>summary::before{content:'\2212'}
html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vfacets .vchips{display:flex;gap:6px;margin:12px 0;flex-wrap:wrap}
html[data-sk-product=lang][data-studio=live] body[data-ui-mode=simple] .viewhead .vfacets[open] .vchips{display:flex!important}
html[data-sk-product=lang][data-studio=live] .libcard .cover{height:auto;min-height:0;padding:19px 17px 8px;background:var(--studio-card);color:var(--sk-ink);border:0;text-align:left;display:block}
html[data-sk-product=lang][data-studio=live] .libcard .cover .ttl{color:var(--sk-ink,var(--ink));font:600 1.0625rem/1.35 var(--sk-sans,Arial,sans-serif);text-align:left;margin:0;display:block;max-width:none;min-height:46px}
html[data-sk-product=lang][data-studio=live] .libcard .cover .mark,
html[data-sk-product=lang][data-studio=live] .libcard .cover .kind{display:none}
html[data-sk-product=lang][data-studio=live] .libcard .row{min-height:134px;display:flex;flex-direction:column;justify-content:space-between;background:var(--studio-card);border-radius:13px;overflow:hidden}
html[data-sk-product=lang][data-studio=live] .libcard .cbody{padding:0 17px 17px}
html[data-sk-product=lang][data-studio=live] .libcard .cbody>:not(.lesson-card-meta){display:none}
.lesson-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--sk-muted,var(--muted));font-size:0.75rem;line-height:1.3;padding-top:8px}
.lesson-card-meta::after{content:'\25B6';color:var(--sk-accent,var(--acc));border:1px solid var(--sk-line,var(--line));border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:0.625rem;flex:none}
html[data-sk-product=lang][data-studio=live] .libcard:hover{box-shadow:0 4px 14px rgba(20,39,59,.07);border-color:var(--studio-ochre)}
html[data-sk-product=lang][data-studio=live] .a0-letter-grid{grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:7px;margin:14px 0}
html[data-sk-product=lang][data-studio=live] .a0-letter{padding:10px;background:var(--studio-card);border-radius:8px}
html[data-sk-product=lang][data-studio=live] .a0-letter strong{font-size:1.1875rem}
html[data-sk-product=lang][data-studio=live] body[data-ui-mode=simple] .studio-view-head .studio-eyebrow,
html[data-sk-product=lang][data-studio=live] body[data-ui-mode=simple] .studio-view-head .studio-subtitle{display:none}
html[data-sk-product=lang][data-studio=live] body[data-ui-mode=simple] .studio-view-head{padding:18px 24px}
html[data-sk-product=lang][data-studio=live] body[data-ui-mode=simple] .studio-view-head h2{font:600 1.4375rem/1.2 var(--sk-sans,Arial,sans-serif)}
html[data-sk-product=lang][data-studio=live] body[data-ui-mode=simple] header .studio-label{display:none}
.learning-settings-basic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
.learning-settings-basic .field{min-width:0;margin:0}
.learning-settings-basic select{width:100%;min-height:42px}
.learning-settings-advanced,.learning-settings-playback{margin:12px 0;padding:10px 0;border-top:1px solid var(--sk-line,var(--line))}
.learning-settings-advanced>summary,.learning-settings-playback>summary{font-weight:600;cursor:pointer;padding:8px 2px;min-height:24px}
/* Lesson/Library Settings remains the single account/preferences component, but
   hides the unrelated account actions ONLY while opened from signed learning UI.
   Regular Account, registration, providers and recovery keep their exact DOM. */
#authOv.context-learning-settings .mbody>.actions,
#authOv.context-learning-settings #authCentralNotice,
#authOv.context-learning-settings #authWho>:not(#learnerPrefs){display:none!important}
#authOv.context-learning-settings .modal{display:flex;flex-direction:column;max-width:520px;max-height:calc(100dvh - 24px)}
#authOv.context-learning-settings .mbody{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
#authOv.context-learning-settings #learnerPrefs{margin:0;padding:0;border:0}
#authOv.context-learning-settings #learnerPrefs>.recsec-title{display:none}
#authOv.context-learning-settings .mhead{flex-shrink:0}
.learning-setup-overlay{position:fixed;inset:0;background:rgba(16,29,44,.45);z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.learning-setup{width:min(100%,440px);max-height:calc(100dvh - 40px);overflow:auto;padding:28px;background:var(--sk-surface,var(--card,#fff));color:var(--sk-ink,var(--ink,#172939));border-radius:18px;box-shadow:0 20px 70px rgba(0,0,0,.22);box-sizing:border-box}
.learning-setup h2{font:600 1.5625rem/1.2 var(--sk-sans,Arial,sans-serif);margin:0 0 8px}
.learning-setup-hint{font-size:0.875rem;color:var(--sk-muted,var(--muted));line-height:1.5;margin:0 0 20px}
.learning-setup-field{display:grid;gap:7px;margin:15px 0;font-size:0.875rem}
.learning-setup-field label{font-weight:600}
.learning-setup-field select{width:100%;padding:11px 12px;border:1px solid var(--sk-line,var(--line));border-radius:9px;background:var(--studio-card,var(--card));color:inherit;font:inherit}
.learning-setup-status{font-size:0.8125rem;min-height:1em;color:var(--err,#ad3f26)}
.learning-setup>.btn{width:100%;margin:4px 0;justify-content:center;min-height:44px}
.lesson-extra{padding:12px 0;border-top:1px solid var(--sk-line,var(--line));margin-top:12px;font-size:0.8125rem}
.lesson-extra>summary{cursor:pointer;font-weight:600;padding:6px 0}
@media(max-width:600px){
  html[data-sk-product=lang][data-studio=live] #app:has(.learning-path-bar){padding:14px 14px 86px;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-sk-product=lang][data-studio=live] .libcard .row{min-height:142px}
  html[data-sk-product=lang][data-studio=live] .libcard .cover{padding:14px 12px 5px}
  html[data-sk-product=lang][data-studio=live] .libcard .cover .ttl{font-size:0.875rem;min-height:57px}
  html[data-sk-product=lang][data-studio=live] .libcard .cbody{padding:0 12px 12px}
  .lesson-card-meta{font-size:0.6875rem;align-items:flex-end}
  .lesson-card-meta::after{width:25px;height:25px}
  .learning-path-bar{margin:7px 0 12px;gap:10px}
  .learning-levels{gap:5px}
  .learning-level{min-height:36px;padding:7px 10px;font-size:0.75rem}
  .learning-direction{font-size:0.75rem}
  html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vsearch{flex:1 1 170px}
  html[data-sk-product=lang][data-studio=live] .viewhead:has(.learning-path-bar) .vfacets>summary{padding:9px 10px;font-size:0.75rem}
  html[data-sk-product=lang][data-studio=live] body[data-ui-mode=simple] .studio-view-head{padding:15px}
  .learning-settings-basic{grid-template-columns:1fr}
  .learning-setup{padding:22px}
}
@media(prefers-reduced-motion:no-preference){.libcard{transition:border-color .15s,box-shadow .15s}}

/* Bind compact controls to the existing appearance tokens, including the owner's dark theme. */
html[data-studio=live] .lesson-compact{--lc-fg:var(--sk-ink,var(--ink));--lc-mut:var(--sk-muted,var(--ink-2));--lc-line:var(--sk-line,var(--rule));--lc-card:var(--studio-card,var(--card));--lc-surface:var(--studio-card,var(--card));--lc-acc:var(--sk-accent,var(--accent));--lc-on:var(--sk-on-accent,#fff)}
html[data-studio=live] body[data-ui-mode=simple] #app>.home{display:flex;flex-direction:column;gap:16px;max-width:none;margin:0}
html[data-studio=live] body[data-ui-mode=simple] .home-greet{margin:0}
html[data-studio=live] body[data-ui-mode=simple] .home-greet p{display:none}
html[data-studio=live] .home>.home-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.home-extra-actions{padding:10px 0;border-top:1px solid var(--sk-line,var(--rule))}
.home-extra-actions>summary{font-size:0.8125rem;font-weight:600;cursor:pointer;padding:8px 0}
.home-extra-actions .home-actions{margin:10px 0}
.home-extra-actions .home-analytics{margin-top:18px}
.learning-settings-basic .pref-wide{grid-column:auto}
.lesson-unavailable{font-size:0.8125rem;color:var(--sk-muted,var(--ink-2));padding:10px 0;margin:0}
@media(max-width:600px){html[data-studio=live] .home>.home-actions{grid-template-columns:1fr}.home>.home-actions button{padding:12px}}


/* ui/lesson-layout.css */
/* Compact lesson layout (site/ui/lesson-layout.js). Everything is namespaced under .lesson-compact
   and only applies when a player was mounted with compactControls: media or reading content
   first, one primary row, and configuration folded behind intentional disclosures. Colours are
   the page's own Studio tokens (--sk-*, switched by html[data-sk-theme]); the fallbacks are the
   light Studio values. The unified anatomy (DESIGN-SPEC §2) adds .lesson-compact--unified. */
.lesson-compact{--lc-fg:var(--sk-ink,var(--txt,#14273b));--lc-mut:#4f5b66;
  --lc-line:var(--sk-line,var(--line,rgb(20 39 59 / 15%)));--lc-line2:rgb(20 39 59 / 30%);
  --lc-card:var(--studio-card,var(--sk-surface,var(--card,#fffdf8)));--lc-surface:var(--studio-card,var(--sk-surface,var(--card,#fffdf8)));
  --lc-inset:var(--sk-inset,#f4e6d4);--lc-acc:var(--sk-accent,#14273b);--lc-on:var(--sk-on-accent,#fff);
  --lc-ochre:var(--studio-ochre,#bd7426);--lc-danger:var(--sk-danger,#8a352d);--lc-navy:#0F1F3D;--lc-focus:#C8441A;--lc-radius:12px;
  display:flex;flex-direction:column;gap:10px;width:100%;max-width:960px;min-width:0;margin-inline:auto;color:var(--lc-fg)}
html[data-sk-theme="dark"] .lesson-compact{--lc-line2:rgb(228 234 240 / 36%);--lc-mut:var(--sk-muted,var(--mut,#c1cbd2))}
/* L4: in every light theme the lesson's muted text is #4F5B66 (about 6.6:1 on the cream surface), also over the studio
   token binding of learning-path.css; the dark themes keep their own muted colour (8.7:1). */
html:not([data-sk-theme="dark"]) .lesson-compact.lesson-compact{--lc-mut:#4f5b66}
/* display:flex above must never defeat the hidden attribute. */
.lesson-compact[hidden],.lesson-compact [hidden]{display:none!important}

/* Every player control: words stay whole (the foundation's overflow-wrap:anywhere on buttons
   would split them), and every target is at least 44 × 44 CSS px (zero specificity: a component's
   own larger size always wins). */
.lesson-compact.lesson-compact :is(button,button *,[role="radio"],[role="switch"],.lesson-compact__position,.lesson-compact__phase,
  .lesson-compact__mode-label,.lesson-compact__mode-desc,.lesson-compact__group-title,.lesson-compact__reason){overflow-wrap:normal;word-break:normal;hyphens:manual}
:where(.lesson-compact) :where(button){min-width:44px;min-height:44px}
:where(.lesson-compact) :where(select,input:not([type="checkbox"]):not([type="radio"]):not([type="range"])){min-height:44px}
:where(.lesson-compact) :where(label:has(>input:is([type="checkbox"],[type="radio"]))){min-height:44px}

/* Stage: the media or reading content, always the first thing and never taller than half the screen. */
.lesson-compact__stage{display:flex;flex-direction:column;gap:8px;min-width:0}
.lesson-compact__stage .topic-media{width:100%}
.lesson-compact__stage video{display:block;width:100%;max-height:min(50vh,480px);max-height:min(50dvh,480px);
  background:var(--lc-navy);border-radius:var(--lc-radius);object-fit:contain}
.lesson-compact__stage audio{display:block;width:100%}
.lesson-compact__stage video:fullscreen{max-height:none}
.lesson-compact__stage video:-webkit-full-screen{max-height:none}
.lesson-compact__stage .trk-slide{min-height:120px;max-height:min(50vh,480px);max-height:min(50dvh,480px);overflow:auto;margin:0}
.lesson-compact__stage .topic-progress{margin:0;color:var(--lc-mut);font-size:0.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lesson-compact__stage .pace-sound{display:flex;align-items:center;gap:8px;min-height:44px}
.lesson-compact__stage .pace-help{margin:0;color:var(--lc-mut);font-size:0.75rem}

/* Primary row: Play/Pause, Next, Settings. */
.lesson-compact__bar{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch}
.lesson-compact[data-format="text"] .lesson-compact__bar{grid-template-columns:minmax(0,1fr)}
.lesson-compact__bar>button,.lesson-compact__disclosure,.lesson-compact__pane-tab{min-height:48px;padding:0 14px;border-radius:999px;
  border:1px solid var(--lc-line);background:var(--lc-card);color:var(--lc-fg);font:inherit;font-size:0.9375rem;font-weight:700;
  line-height:1.2;cursor:pointer;overflow-wrap:normal;word-break:normal}
.lesson-compact .lesson-compact__bar>button{overflow-wrap:normal;word-break:normal;white-space:nowrap}
.lesson-compact__bar>.lesson-compact__play{background:var(--lc-acc);border-color:var(--lc-acc);color:var(--lc-on)}
.lesson-compact__bar>button:disabled{opacity:.45;cursor:default}
.lesson-compact__status{grid-column:1/-1;text-align:center;color:var(--lc-mut);font-size:0.8125rem;font-weight:600}
.lesson-compact__settings-toggle[aria-expanded="true"],.lesson-compact__pane-tab[aria-pressed="true"]{border-color:var(--lc-acc);box-shadow:inset 0 0 0 1px var(--lc-acc)}
.lesson-compact:not(.lesson-compact--unified) .lesson-compact__settings-toggle[data-nonstop="on"]::after{content:'';display:inline-block;width:8px;height:8px;margin-left:8px;
  border-radius:50%;background:var(--lc-focus);vertical-align:middle}
.lesson-compact button:focus-visible{outline:3px solid var(--lc-focus);outline-offset:2px}
.lesson-compact__tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lesson-compact__tools>.trk-row{margin:0;flex:1 1 auto}
.lesson-compact__tools button,.lesson-compact__tools .topic-nonstop-control{min-height:44px;padding:8px 12px;
  border:1px solid var(--lc-line);border-radius:12px;background:var(--lc-card);color:var(--lc-fg);
  font:inherit;font-size:0.875rem;overflow-wrap:normal;word-break:normal;cursor:pointer}
.lesson-compact__tools .topic-nonstop-control{display:flex;align-items:center;gap:8px;flex:1 1 auto}
.lesson-compact__tools [aria-checked="true"],.lesson-compact__tools .topic-nonstop-control:has(:checked){border-color:var(--lc-focus);box-shadow:inset 0 0 0 1px var(--lc-focus)}
@media(max-width:767px){
  .lesson-compact__bar{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.3fr)}
  .lesson-compact__bar>button{padding:0 8px;font-size:0.875rem}
}

/* Folded areas. */
.lesson-compact__panel{display:flex;flex-direction:column;gap:12px;min-width:0;padding:12px;
  border:1px solid var(--lc-line);border-radius:var(--lc-radius);background:var(--lc-surface)}
.lesson-compact__group{display:flex;flex-direction:column;gap:10px;min-width:0}
.lesson-compact__group+.lesson-compact__group{border-top:1px solid var(--lc-line);padding-top:14px}
.lesson-compact__group-title{margin:0;font-size:0.9375rem;font-weight:700}
.lesson-compact__group-note{margin:0;color:var(--lc-mut);font-size:0.8125rem;line-height:1.45}
.lesson-compact__group .pace-controls{margin:0}
.pace-study-settings,.pace-transition-options{width:100%}
.pace-study-settings{display:flex;flex-direction:column;gap:8px}
.pace-controls [hidden]{display:none!important}
.pace-transition-options>summary{cursor:pointer;font-size:0.8125rem;padding:5px 0}
.pace-transition-options[open]>label{padding-top:8px}
.lesson-compact__contents,.lesson-compact__details{display:flex;flex-direction:column;gap:8px;min-width:0}
.lesson-compact__disclosure{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border-radius:var(--lc-radius)}
.lesson-compact__disclosure::after{content:'';flex:none;width:.55em;height:.55em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.lesson-compact__disclosure[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.lesson-compact__panes{display:flex;flex-wrap:wrap;gap:8px}
.lesson-compact__pane{min-width:0}
/* The pane tab already names the scene list. */
.lesson-compact__pane h4{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (min-width:768px){
  .lesson-compact__bar{grid-template-columns:repeat(3,minmax(128px,max-content)) minmax(0,1fr);justify-content:start}
  .lesson-compact[data-format="text"] .lesson-compact__bar{grid-template-columns:minmax(128px,max-content) minmax(0,1fr)}
  .lesson-compact__status{grid-column:auto;align-self:center;text-align:left}
  .lesson-compact__settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .lesson-compact__settings>.lesson-compact__group+.lesson-compact__group{border-top:0;padding-top:0;border-left:1px solid var(--lc-line);padding-left:14px}
  .lesson-compact__settings>:last-child:not(.lesson-compact__group){grid-column:1/-1}
}
@media (max-width:389px){
  .lesson-compact__bar>button{padding:0 8px;font-size:0.875rem}
}

/* ---------- Unified anatomy: format · stage · position · mode · transport · tools · settings · contents · details ---------- */
.lesson-compact--unified{--lesson-text-size:clamp(18px,4.6vw,26px);--lesson-text-leading:1.35;gap:12px}

/* Decorative icons are masks painted in the text colour, so they follow every theme. */
.lesson-compact__icon{flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--lc-icon) center/contain no-repeat;mask:var(--lc-icon) center/contain no-repeat}
.lesson-compact__icon--play{--lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6a1 1 0 0 0 1.5.86l10.7-6.8a1 1 0 0 0 0-1.72L9.5 4.34A1 1 0 0 0 8 5.2z'/%3E%3C/svg%3E")}
.lesson-compact__icon--pause{--lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E")}
.lesson-compact__icon--prev{--lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lesson-compact__icon--next{--lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lesson-compact__icon--again{--lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.6M4 4v4.5h4.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lesson-compact__icon--settings{--lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='7' r='2.2'/%3E%3Ccircle cx='10' cy='17' r='2.2'/%3E%3C/svg%3E")}
.lesson-compact__icon--fullscreen{--lc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
@media (forced-colors:active){.lesson-compact__icon{background:ButtonText}}

/* 1 · Format: a segmented radiogroup, 48 px options, the middle (longest) label gets more room. */
.lesson-compact__formats{display:flex;flex-direction:column;gap:6px;min-width:0}
.lesson-compact__segmented{display:flex;gap:4px;padding:4px;border:1px solid var(--lc-line);border-radius:14px;background:var(--lc-card);min-width:0}
.lesson-compact__segmented>.lesson-compact__option{flex:1 1 0;min-width:0;min-height:48px;padding:4px 6px;border:0;border-radius:10px;
  background:transparent;color:var(--lc-fg);font:inherit;font-size:0.875rem;font-weight:600;line-height:1.2;cursor:pointer}
.lesson-compact__segmented>[data-format="audio"]{flex-grow:1.5}
.lesson-compact__segmented>[aria-checked="true"]{background:var(--lc-acc);color:var(--lc-on)}
.lesson-compact__option[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.lesson-compact__reasons{display:flex;flex-direction:column;gap:2px}
.lesson-compact__reason{margin:0;color:var(--lc-mut);font-size:0.8125rem;line-height:1.45}

/* 2 · Stage additions: the complement strip under the video, the reading list, recovery, Text hint. */
.lesson-compact__media{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
/* The stage is the size reference of the strip below (cqi). */
.lesson-compact--unified .lesson-compact__stage{container-type:inline-size}
.lesson-compact__complement{display:flex;flex-direction:column;gap:2px;margin:0;padding:0 8px;color:var(--lc-mut);
  font-size:clamp(1rem,3.3cqi,1.375rem);font-weight:400;line-height:1.35;text-align:center;overflow-wrap:anywhere}
.lesson-compact__complement-line{margin:0;font-weight:400}

/* H1: the picture is a Play/Pause target; this glyph only says so while the lesson is paused (aria-hidden, no clicks). It
   sits in the lower right corner, clear of the centred sentence (burned text or caption) and of the picture's own
   labels; when a topic's caption panel covers the bottom of a narrow picture it moves to the top centre. */
.lesson-compact[data-tap] .lesson-compact__media video{cursor:pointer}
.lesson-compact__tap{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;background:rgb(15 31 61 / 78%);box-shadow:0 0 0 2px rgb(255 255 255 / 70%);pointer-events:none}
.lesson-compact__tap::before{content:'';width:20px;height:20px;margin-left:3px;background:#fff;
  -webkit-mask:var(--lc-play-icon) center/contain no-repeat;mask:var(--lc-play-icon) center/contain no-repeat}
.lesson-compact__media:has(.topic-caption-panel:not([hidden])) .lesson-compact__tap{top:10px;right:auto;bottom:auto;left:50%;transform:translateX(-50%)}
.lesson-compact{--lc-play-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6a1 1 0 0 0 1.5.86l10.7-6.8a1 1 0 0 0 0-1.72L9.5 4.34A1 1 0 0 0 8 5.2z'/%3E%3C/svg%3E")}
@media (forced-colors:active){.lesson-compact__tap{forced-color-adjust:none}}
.lesson-compact__reading{display:flex;flex-direction:column;gap:2px;min-width:0;padding:6px;border:1px solid var(--lc-line);border-radius:14px;background:var(--lc-card)}
.lesson-compact__text-hint{margin:0;color:var(--lc-mut);font-size:0.8125rem;line-height:1.45}
.lesson-compact__recover{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lesson-compact__recover-text{flex:1 0 100%;margin:0;color:var(--lc-danger);font-size:0.875rem;font-weight:600}
.lesson-compact__recover>button{min-height:44px;padding:0 16px;border:1px solid var(--lc-line2);border-radius:999px;background:var(--lc-card);
  color:var(--lc-fg);font:inherit;font-size:0.875rem;font-weight:700;cursor:pointer}

/* Lists (Contents phrases and scenes, the Text reading list): bounded windows with "Earlier" / "more". */
.lesson-compact__list{display:flex;flex-direction:column;gap:2px;min-width:0}
.lesson-compact__row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;width:100%;min-height:44px;margin:0;padding:10px 8px;
  border:1px solid transparent;border-radius:10px;background:transparent;color:var(--lc-fg);font:inherit;text-align:left}
button.lesson-compact__row{cursor:pointer}
button.lesson-compact__row:hover{background:var(--lc-inset)}
.lesson-compact__row[aria-current="true"]{background:var(--lc-inset);border-color:var(--lc-ochre)}
.lesson-compact__reading .lesson-compact__row+.lesson-compact__row{border-top-color:var(--lc-line);border-radius:0}
.lesson-compact__reading .lesson-compact__row[aria-current="true"]{border-radius:10px}
.lesson-compact__num{width:26px;height:26px;border-radius:50%;background:var(--lc-inset);color:var(--lc-fg);font-size:0.75rem;font-weight:700;line-height:26px;text-align:center}
.lesson-compact__row[aria-current="true"] .lesson-compact__num{background:var(--lc-acc);color:var(--lc-on)}
/* Muted text on the highlighted row would fall under 4.5:1; the current row keeps the ink colour. */
.lesson-compact__row[aria-current="true"] .lesson-compact__line{color:var(--lc-fg)}
.lesson-compact__lines{display:flex;flex-direction:column;gap:2px;min-width:0}
.lesson-compact__line{display:block;color:var(--lc-mut);font-size:0.875rem;line-height:1.4}
.lesson-compact__line:first-child{color:var(--lc-fg);font-size:0.9375rem;font-weight:600}
.lesson-compact__row-group{margin:10px 8px 2px;color:var(--lc-mut);font-size:0.75rem;font-weight:700;line-height:1.2;letter-spacing:.05em;text-transform:uppercase}
/* B11: the one line shown instead of a phrase list when no text language is selected. */
.lesson-compact__empty{margin:0;padding:12px 8px;color:var(--lc-mut);font-size:0.875rem;line-height:1.45;font-style:italic}
.lesson-compact__more{align-self:flex-start;min-height:44px;margin:4px;padding:0 16px;border:1px solid var(--lc-line2);border-radius:999px;
  background:var(--lc-card);color:var(--lc-fg);font:inherit;font-size:0.875rem;font-weight:600;cursor:pointer}
.lesson-compact__pane,.lesson-compact__pane--phrases,.lesson-compact__pane--scenes{display:flex;flex-direction:column;gap:6px}
.lesson-compact__pane[hidden]{display:none}
.lesson-compact__list--scenes{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.lesson-compact__scene{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:52px;padding:4px;
  border:1px solid var(--lc-line);border-radius:10px;background:var(--lc-surface)}
.lesson-compact__scene[data-current="true"]{background:var(--lc-inset);border-color:var(--lc-ochre)}
.lesson-compact__scene-go{width:100%;min-height:44px;padding:4px 10px;border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--lc-fg);font:inherit;font-size:0.90625rem;font-weight:600;text-align:left;cursor:pointer}
.lesson-compact__scene-source{align-self:flex-start;min-height:44px;margin-top:-6px;padding:0 10px;border:0;border-radius:8px;background:transparent;
  color:var(--lc-fg);font:inherit;font-size:0.8125rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 3 · Position and the live phase pill with its countdown bar. */
.lesson-compact__position{display:flex;flex-direction:column;gap:6px;min-width:0}
/* M7: one line; only the scene title gives way (ellipsis), so nothing below moves at a scene change. */
.lesson-compact__position-text{display:flex;min-width:0;margin:0;color:var(--lc-mut);font-size:0.8125rem;font-weight:600;line-height:1.4;white-space:nowrap}
.lesson-compact__position-phrase{flex:none}
.lesson-compact__position-scene{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:pre}
/* Screen-reader status lines: rendered, never seen. */
.lesson-compact__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.lesson-compact__phase{position:relative;display:flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:8px 12px 10px;overflow:hidden;
  border-radius:10px;background:var(--lc-inset);color:var(--lc-fg);font-size:0.875rem;font-weight:600;line-height:1.3}
.lesson-compact__phase-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--lc-ochre)}
.lesson-compact__countdown{flex:none;margin-inline-start:-4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lesson-compact__countdown::before{content:'·';margin-right:.3em}
.lesson-compact__countdown-bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--lc-ochre);transform-origin:left center;
  transform:scaleX(var(--lc-from,1));animation:lesson-compact-countdown linear forwards}
.lesson-compact__countdown-bar[data-running="false"]{animation-play-state:paused}
@keyframes lesson-compact-countdown{from{transform:scaleX(var(--lc-from,1))}to{transform:scaleX(0)}}
/* M3: a Study mode keeps the pill's room before Play, so the transport stays where the learner pressed. */
.lesson-compact__phase[data-kind="idle"]{visibility:hidden}
/* L1: paused inside an answer pause: an outlined, quiet pill ("Paused · Your turn ..."), the countdown halted. */
.lesson-compact__phase[data-paused="true"]{background:transparent;box-shadow:inset 0 0 0 1px var(--lc-line2)}
.lesson-compact__phase[data-paused="true"] :is(.lesson-compact__phase-dot,.lesson-compact__countdown-bar){background:var(--lc-mut)}
/* M4: "Next lesson ›" under "Lesson finished". */
.lesson-compact__next-lesson{align-self:flex-start;min-height:44px;padding:0 18px;border:1px solid var(--lc-acc);border-radius:999px;
  background:var(--lc-card);color:var(--lc-fg);font:inherit;font-size:0.9375rem;font-weight:700;cursor:pointer}
@media (prefers-reduced-motion:reduce){.lesson-compact__countdown-bar{animation:none;transform:scaleX(var(--lc-from,1))}}

/* 4 · Learning mode: 2 × 2 under 480 px, one row of options from 480 px. */
.lesson-compact__mode{display:flex;flex-direction:column;gap:6px;min-width:0}
.lesson-compact__mode-label{margin:0;color:var(--lc-mut);font-size:0.8125rem;font-weight:700;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.lesson-compact__modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.lesson-compact__modes>.lesson-compact__option{display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;padding:6px 12px;
  border:1px solid var(--lc-line2);border-radius:12px;background:var(--lc-card);color:var(--lc-fg);font:inherit;font-size:0.9375rem;font-weight:600;
  line-height:1.2;text-align:left;cursor:pointer}
.lesson-compact__modes>.lesson-compact__option::before{content:'';flex:none;box-sizing:border-box;width:16px;height:16px;border:2px solid var(--lc-mut);border-radius:50%}
.lesson-compact__modes>[aria-checked="true"]{background:var(--lc-acc);border-color:var(--lc-acc);color:var(--lc-on)}
.lesson-compact__modes>[aria-checked="true"]::before{border:5px solid var(--lc-on);background:var(--lc-acc)}
.lesson-compact__modes>.lesson-compact__option:nth-child(5):last-child{grid-column:1/-1}
.lesson-compact__mode-desc{margin:2px 0 0;color:var(--lc-mut);font-size:0.8125rem;line-height:1.45}
@media (min-width:480px){
  .lesson-compact__modes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .lesson-compact__modes>.lesson-compact__option:nth-child(5):last-child{grid-column:auto}
}

/* 5 · Transport, DOM order Play · Back · Again · Next. Below 768 px Play spans the row (52 px),
   the three phrase buttons share the next one (48 px). Labels wrap only at spaces. */
.lesson-compact.lesson-compact--unified .lesson-compact__bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* Video uses a custom transport: keep scrubbing visible on touch and desktop. */
.lesson-compact.lesson-compact--unified .lesson-compact__scrub{grid-column:1/-1;width:100%;min-height:44px;accent-color:var(--lc-acc);cursor:pointer;touch-action:pan-y}
.lesson-compact.lesson-compact--unified .lesson-compact__scrub[hidden]{display:none!important}
.lesson-compact.lesson-compact--unified .lesson-compact__scrub:disabled{opacity:.5;cursor:default}
.lesson-compact.lesson-compact--unified .lesson-compact__scrub:focus-visible{outline:3px solid var(--lc-focus);outline-offset:2px}
.lesson-compact.lesson-compact--unified .lesson-compact__bar>button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:48px;
  padding:4px 8px;border:1px solid var(--lc-line2);border-radius:999px;background:var(--lc-card);color:var(--lc-fg);font:inherit;
  font-size:0.875rem;font-weight:700;line-height:1.2;text-align:center;white-space:normal;cursor:pointer}
.lesson-compact.lesson-compact--unified .lesson-compact__bar>.lesson-compact__play{grid-column:1/-1;min-height:52px;font-size:1rem;
  background:var(--lc-acc);border-color:var(--lc-acc);color:var(--lc-on)}
.lesson-compact.lesson-compact--unified .lesson-compact__bar>button:disabled{opacity:.45;cursor:default}

/* Manual lesson navigation is distinct from the phrase transport, including in Text. */
.lesson-compact.lesson-compact--unified .lesson-compact__lesson-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lesson-compact.lesson-compact--unified .lesson-compact__lesson-nav>button{min-width:0;min-height:44px;margin:0;padding:8px;
  border:1px solid var(--lc-line2);border-radius:12px;background:var(--lc-card);color:var(--lc-fg);font:inherit;
  font-size:0.875rem;font-weight:600;line-height:1.3;white-space:normal;cursor:pointer}
.lesson-compact.lesson-compact--unified .lesson-compact__lesson-nav>button:disabled{opacity:.45;cursor:default}

/* L3: Contents "Phrases / Scenes" is the same segmented control as the format switch. */
.lesson-compact--unified .lesson-compact__panes{align-self:flex-start;display:flex;flex-wrap:nowrap;gap:4px;max-width:100%;padding:4px;
  border:1px solid var(--lc-line);border-radius:14px;background:var(--lc-card)}
.lesson-compact--unified .lesson-compact__panes>.lesson-compact__pane-tab{min-height:44px;padding:4px 18px;border:0;border-radius:10px;background:transparent;
  color:var(--lc-fg);font-size:0.875rem;font-weight:600;box-shadow:none}
.lesson-compact--unified .lesson-compact__panes>.lesson-compact__pane-tab[aria-pressed="true"]{background:var(--lc-acc);color:var(--lc-on);box-shadow:none}

/* 6 · Tools: Settings and Full screen side by side, the non-stop switch on its own line. */
.lesson-compact.lesson-compact--unified .lesson-compact__tools{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px}
.lesson-compact__tool-buttons{display:flex;gap:8px;min-width:0}
.lesson-compact__tool-buttons>*{flex:1 1 0;min-width:0}
.lesson-compact.lesson-compact--unified .lesson-compact__tool-buttons>button{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:4px 10px;border:1px solid var(--lc-line);border-radius:12px;background:var(--lc-card);color:var(--lc-fg);
  font:inherit;font-size:0.875rem;font-weight:600;line-height:1.2;text-align:center;cursor:pointer}
.lesson-compact__nonstop-row{display:flex;min-width:0}
.lesson-compact.lesson-compact--unified .lesson-compact__nonstop{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 12px;
  border:1px solid var(--lc-line);border-radius:12px;background:var(--lc-card);color:var(--lc-fg);font:inherit;text-align:left;cursor:pointer}
.lesson-compact .lesson-compact__nonstop[aria-checked="true"]{border-color:var(--lc-line);box-shadow:none}
.lesson-compact__knob{flex:none;position:relative;box-sizing:border-box;width:40px;height:24px;border:2px solid var(--lc-mut);border-radius:12px;background:transparent}
.lesson-compact__knob::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--lc-mut)}
.lesson-compact__nonstop[aria-checked="true"] .lesson-compact__knob{border-color:var(--lc-acc);background:var(--lc-acc)}
.lesson-compact__nonstop[aria-checked="true"] .lesson-compact__knob::after{left:18px;background:var(--lc-on)}
.lesson-compact__nonstop[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.lesson-compact__switch-text{display:flex;flex-direction:column;min-width:0}
.lesson-compact__switch-label{font-size:0.875rem;font-weight:700;line-height:1.3}
.lesson-compact__switch-hint,.lesson-compact__switch-reason{color:var(--lc-mut);font-size:0.78125rem;line-height:1.35}

/* 7 · Settings: the players' toggle chips (aria-pressed) and radio chips share one pill look;
   number chips (1/2/3, 0/1/3/6/10) keep the 44 px minimum. */
.lesson-compact.lesson-compact--unified .lesson-compact__settings :is(button[aria-pressed],button[role="radio"]){display:inline-flex;align-items:center;
  justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--lc-line2);border-radius:999px;
  background:var(--lc-card);color:var(--lc-fg);font:inherit;font-size:0.875rem;font-weight:600;line-height:1.2;cursor:pointer}
.lesson-compact.lesson-compact--unified .lesson-compact__settings :is(button[aria-pressed="true"],button[role="radio"][aria-checked="true"]){
  background:var(--lc-acc);border-color:var(--lc-acc);color:var(--lc-on)}
.lesson-compact.lesson-compact--unified .lesson-compact__settings button[aria-pressed="true"]::before{content:'✓';content:'✓'/'';font-size:0.8125rem}
.lesson-compact.lesson-compact--unified .lesson-compact__settings :is(button[aria-pressed],button[role="radio"]):is(:disabled,[aria-disabled="true"]){opacity:.5;cursor:not-allowed}
.lesson-compact--unified .lesson-compact__group-note{padding:8px 10px;border-radius:10px;background:var(--lc-inset);color:var(--lc-fg)}


@media (min-width:768px){
  .lesson-compact__segmented{align-self:flex-start;width:max-content;max-width:100%}
  .lesson-compact__segmented>.lesson-compact__option{flex:0 0 auto;padding:4px 18px;font-size:0.9375rem}
  .lesson-compact__position{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:16px}
  .lesson-compact__position-text{font-size:0.875rem}
  .lesson-compact__phase{padding:8px 14px 10px}
  .lesson-compact__mode{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:6px;align-items:center}
  .lesson-compact__mode>:not(.lesson-compact__mode-label){grid-column:2}
  .lesson-compact__modes>.lesson-compact__option{padding:6px 14px}
  /* Transport left and tools right on one line; the tools wrap below as a group when they do not fit. */
  .lesson-compact.lesson-compact--unified{flex-flow:row wrap;justify-content:space-between;align-items:center;column-gap:12px;row-gap:14px}
  .lesson-compact.lesson-compact--unified>*{flex:0 0 100%;max-width:100%}
  .lesson-compact.lesson-compact--unified>.lesson-compact__bar{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:8px}
  .lesson-compact.lesson-compact--unified .lesson-compact__bar>button{flex:0 0 auto;padding:4px 18px;font-size:0.9375rem;white-space:nowrap}
  .lesson-compact.lesson-compact--unified .lesson-compact__bar>.lesson-compact__play{min-width:150px;min-height:48px;font-size:0.9375rem}
  .lesson-compact.lesson-compact--unified>.lesson-compact__tools{display:contents}
  .lesson-compact.lesson-compact--unified .lesson-compact__tool-buttons{flex:0 1 auto;flex-wrap:wrap}
  .lesson-compact.lesson-compact--unified .lesson-compact__tool-buttons>*{flex:0 0 auto}
  .lesson-compact.lesson-compact--unified .lesson-compact__tool-buttons>button{padding:4px 14px;white-space:nowrap}
  .lesson-compact.lesson-compact--unified .lesson-compact__nonstop-row{flex:0 0 100%}
  .lesson-compact.lesson-compact--unified .lesson-compact__nonstop{width:auto;min-height:48px;padding:6px 14px}
  .lesson-compact--unified .lesson-compact__switch-text{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .lesson-compact__list--scenes{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* H1: the picture is sized from the screen height, so the format switch, the position, the learning mode and the
     transport fit on a laptop's first screen (measured reserve 460 px: window header, format switch, position with
     the phase pill, a two-line mode description, the transport and the gaps; 1366x768 gives a 308 px picture). */
  .lesson-compact--unified .lesson-compact__stage :is(video,.trk-slide){max-height:clamp(200px,calc(100vh - 460px),480px);max-height:clamp(200px,calc(100dvh - 460px),480px)}
  .lesson-compact--unified .lesson-compact__complement{font-size:clamp(0.75rem,min(3.3cqi,calc(clamp(12.5rem,calc(100dvh - 28.75rem),30rem) * .0587)),1.375rem)}
  .lesson-compact__reading{padding:8px 10px}
  .lesson-compact__reading .lesson-compact__row{grid-template-columns:30px minmax(0,1fr);gap:14px;padding:12px 8px}
  .lesson-compact__reading .lesson-compact__lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));column-gap:14px}
  .lesson-compact__reading .lesson-compact__line:first-child{font-size:1rem}
  .lesson-compact__reading .lesson-compact__line{font-size:0.9375rem}
}


/* One readable caption for timed tracks, fixed recordings and topics. The helper places its opaque
   surface over the actual fitted picture body; all reading space and scrolling stay inside it. */
.lesson-compact--unified .lesson-caption{position:absolute;inset:auto;box-sizing:border-box;max-width:100%;min-width:0;
  display:flex;align-items:center;justify-content:center;padding:8px;background:#0F1F3D;overflow:hidden;pointer-events:none}
.lesson-compact--unified .lesson-caption[hidden]{display:none}
.lesson-compact--unified .lesson-caption__block{box-sizing:border-box;flex:none;width:100%;max-width:100%;
  display:flex;flex-direction:column;justify-content:center;min-height:100%;gap:.5em;padding:12px 14px;border-radius:12px;background:#0F1F3D;color:#fff;
  font-family:Arial,sans-serif;font-size:calc(var(--lesson-text-size) * var(--lesson-caption-scale,1));line-height:var(--lesson-text-leading);text-align:center;
  overflow-wrap:anywhere;word-break:normal;hyphens:none}
.lesson-compact--unified .lesson-caption__line{display:block;margin:0;white-space:pre-line;overflow-wrap:anywhere}
.lesson-compact--unified .lesson-caption__notice{margin:0;font-size:.85em;line-height:1.35;color:#e5ebf3}
.lesson-compact--unified .lesson-caption.is-scrollable{align-items:flex-start;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;pointer-events:auto;touch-action:pan-y}
.lesson-compact--unified .lesson-caption.is-scrollable:focus-visible{outline:3px solid #C8441A;outline-offset:-3px}

/* ---------- H3 Full screen: one look for both players ----------
   Keyed on the layout's own flag (data-fullscreen="on") and the players' classes (.trk-fs, .topic-fullscreen), in the
   page's theme colours (light or dark). The picture takes the screen height that the position (with the phase), the
   learning mode (only on a screen at least 560 px tall) and the transport leave; the exit button sits beside the
   transport (from 768 px) or under it. Formats, Settings, the non-stop switch, Contents and About wait outside. */
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen){
  position:fixed;inset:0;z-index:2000;box-sizing:border-box;width:auto;height:auto;max-width:none;margin:0;overflow:auto;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;align-content:stretch;align-items:stretch;
  justify-content:stretch;gap:10px;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:var(--sk-surface,var(--card,#f7f4ec));color:var(--lc-fg)}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen)>*{grid-column:1/-1;min-width:0;max-width:none;margin:0}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen)>:is(.lesson-compact__formats,.lesson-compact__settings,.lesson-compact__contents,.lesson-compact__details),
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen)>.lesson-compact__lesson-nav,
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) :is(.lesson-compact__nonstop-row,.lesson-compact__settings-toggle){display:none}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen)>.lesson-compact__tools{justify-self:end}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) .lesson-compact__tool-buttons>button{flex:0 0 auto;padding:4px 14px;white-space:nowrap}
/* The stage fills the first grid row; inside it the picture (or the slide card) takes what the strip and caption leave. */
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen)>.lesson-compact__stage{display:flex;flex-direction:column;min-height:0}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) .lesson-compact__media{flex:1 1 0;min-height:120px}
/* An Audio reader can fill the stage while its immutable media elements stay hidden.
   Keep empty media out of the allocation and scroll the reader without shrinking its text. */
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) .lesson-compact__media:not(:has(>:not([hidden]))){display:none}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen)>.lesson-compact__stage>.lesson-compact__reading:not([hidden]){flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen)>.lesson-compact__stage>.lesson-compact__reading:not([hidden])>*{flex-shrink:0}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) .lesson-compact__media>.topic-media{flex:1 1 0;min-height:0;grid-template:minmax(0,1fr)/minmax(0,1fr)}
/* Captioned topic videos are 16:9. In portrait full screen, stretching the grid row vertically while video uses object-fit:contain
   puts its bottom-anchored caption outside the displayed video frame. Keep the grid and caption the same aspect-fitted picture. */
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) .lesson-compact__media>.topic-media:has(>video:not([hidden])){flex:0 1 auto;aspect-ratio:16/9;max-height:100%;width:100%;margin-block:auto}
/* Long topic text scrolls inside the actual fitted raster instead of growing the wrapper past it.
   The topic adapter excludes the authored header band, with the original 56px minimum clearance. */
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) .lesson-compact__stage video{flex:1 1 0;width:100%;height:100%;min-height:0;max-height:none;
  margin:0;border-radius:var(--lc-radius);background:transparent;object-fit:contain}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) .lesson-compact__stage .trk-slide{flex:1 1 0;min-height:0;max-height:none;overflow:auto;
  padding:clamp(16px,4vw,48px)}
.lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) .lesson-compact__stage .trk-line{font-size:clamp(1.5rem,min(4.4vw,7vh),3.5rem);line-height:1.3}
@media (max-height:559px){
  .lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen)>.lesson-compact__mode{display:none}
}
@media (min-width:768px){
  /* The exit button shares the transport's row: transport in the first column, the button in the second. */
  .lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen){grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen)>.lesson-compact__bar{grid-column:1;flex-wrap:wrap}
  .lesson-compact.lesson-compact--unified:is([data-fullscreen="on"],.trk-fs,.topic-fullscreen) .lesson-compact__tool-buttons{grid-column:2;align-self:center}
}

.lesson-compact__position-row{display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.lesson-compact__position-row .lesson-compact__position-text{flex:1 1 auto;min-width:0}
.lesson-compact__caption-size{display:flex;align-items:center;flex:none;gap:6px;min-height:44px;max-width:100%;font-size:1rem}
.lesson-compact__caption-size-label{font-size:1rem;white-space:nowrap}
.lesson-compact__caption-size select{min-height:44px;min-width:76px;padding:6px 8px;border:1px solid var(--lc-line);border-radius:10px;background:var(--lc-card);color:var(--lc-fg);font:inherit}
.lesson-compact__caption-size select:focus-visible{outline:3px solid var(--lc-focus);outline-offset:2px}

/* 7 · Settings › Learning pace of the unified lesson (learning-pace.js unifiedControls): labelled chip rows, a seconds
   field for Custom and for the pause between voices, and Wait for Next drawn as the same switch as Lessons in a row
   (a native checkbox with role=switch under a knob). The chips themselves use the Settings radio style above. */
.lesson-compact--unified .pace-controls{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;margin:0;padding:0;border:0}
.lesson-compact--unified :is(.pace-study-settings,.pace-plays){display:flex;flex-direction:column;gap:8px}
.lesson-compact--unified .pace-field-label{margin:0;color:var(--lc-fg);font-size:0.875rem;font-weight:600;line-height:1.3}
.lesson-compact--unified .pace-chips{display:flex;flex-wrap:wrap;gap:8px}
.lesson-compact--unified .pace-controls :is(.pace-response-field,.pace-transition-field){display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:0.875rem}
.lesson-compact--unified .pace-transition-field>.pace-field-label{flex:1 0 100%}
.lesson-compact--unified .pace-controls :is(.pace-response,.pace-transition){box-sizing:border-box;width:96px;min-height:44px;padding:0 10px;
  border:1px solid var(--lc-line2);border-radius:10px;background:var(--lc-card);color:var(--lc-fg);font:inherit}
.lesson-compact--unified .pace-controls .pace-switch{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 12px;
  border:1px solid var(--lc-line);border-radius:12px;background:var(--lc-card);color:var(--lc-fg);font-size:0.875rem;font-weight:700;line-height:1.3;cursor:pointer}
.lesson-compact--unified .pace-switch>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.lesson-compact--unified .pace-switch:has(>input:checked) .lesson-compact__knob{border-color:var(--lc-acc);background:var(--lc-acc)}
.lesson-compact--unified .pace-switch:has(>input:checked) .lesson-compact__knob::after{left:18px;background:var(--lc-on)}
.lesson-compact--unified .pace-switch:has(>input:focus-visible){outline:3px solid var(--lc-focus);outline-offset:2px}
.lesson-compact--unified .pace-controls .pace-duration{margin:0;color:var(--lc-mut);font-size:0.8125rem;line-height:1.45}

/* Authored worked examples remain in the phrase's reading row. */
.lesson-compact--unified .lesson-compact__examples{grid-column:2/-1;display:flex;flex-direction:column;gap:4px;min-width:0;color:var(--lc-mut);font-size:.94em}
.lesson-compact--unified .lesson-compact__example{display:block;white-space:pre-wrap;overflow-wrap:anywhere}
.lesson-compact--unified .lesson-compact__example::before{content:'▸ ';color:var(--lc-mut)}


/* Owned saved content uses the common reader and the existing block dialog. */
#blockOv.is-private-material .mhead{align-items:flex-start;min-width:0}
#blockOv.is-private-material #bfTitle{min-width:0;max-height:25dvh;overflow:auto;overflow-wrap:anywhere}
#blockOv.is-private-material .mhead>.x{flex:none;min-width:44px;min-height:44px}
#blockOv.is-private-material #bfBody{min-height:0;overflow:auto}
.private-material-reader .private-material-raw{box-sizing:border-box;max-width:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font:inherit;line-height:1.65}
.private-material-reader .private-material-status{margin:0 0 12px;overflow-wrap:anywhere}
.private-material-reader .private-material-status[hidden]{display:none}
.private-material-reader .private-material-raw-details{min-width:0;margin-top:12px}
.private-material-reader .private-material-raw-details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;overflow-wrap:anywhere}
.private-material-reader .private-material-raw-details>summary:focus-visible{outline:3px solid var(--lc-focus);outline-offset:2px}
.private-material-reader [data-private-material-refresh]{min-height:44px;white-space:normal}


/* Keep the existing private video and practice-audio links distinct and tappable. */
.lesson-compact__details .user-rendition-status{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lesson-compact__details .user-rendition-status>a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}


/* ui/topical-captions.css */
/* Noncompact players retain their native-wide / DOM-narrow fallback. Unified captions use the shared
   lesson-layout.css presenter at every width; only the existing topic frame geometry remains below. */
.topic-media .topic-caption-panel:not(.lesson-caption){box-sizing:border-box;width:100%;max-width:100%;margin:0 0 16px;padding:12px 14px;border-radius:12px;background:#101c31;color:#fff;
  font-family:Arial,sans-serif;font-size:clamp(1rem,4.6vw,1.25rem);line-height:1.35;text-align:center;overflow-wrap:anywhere;word-break:normal;hyphens:none;min-width:0}
.topic-media .topic-caption-panel[hidden]{display:none}
.topic-media .topic-caption-panel:not(.lesson-caption) .topic-caption-line{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.topic-media .topic-caption-panel:not(.lesson-caption) .topic-caption-line+.topic-caption-line{margin-top:.5em}
/* The panel sits directly under the picture it captions. */
.topic-media video:has(+ .topic-caption-panel:not([hidden])){margin-bottom:8px}
/* Unified lesson layout (compactControls): the stage spaces its own parts, so the video and its caption panel carry no outer
   margins; the whole player is what fills the screen, on the page surface rather than the browser's black backdrop. */
.lesson-compact .topic-media video{margin-top:0;margin-bottom:0;object-position:center}
.lesson-compact .topic-media .topic-caption-panel{margin:0}
.lesson-compact.topic-fullscreen{max-width:none}
/* The unified full screen (both players) is one rule set in lesson-layout.css ("H3 Full screen"). */
/* Unified: the common caption is positioned within the actual contain-fitted picture, below its
   scene header. It never contributes intrinsic height to the video wrapper. */
.lesson-compact--unified .topic-media{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.lesson-compact--unified .topic-media>*{grid-area:1/1;min-width:0}
.lesson-compact--unified .topic-media>video{align-self:start}
.lesson-compact--unified .topic-media video:has(+ .topic-caption-panel:not([hidden])){margin-bottom:0}
.lesson-compact--unified .topic-media>.topic-caption-panel{z-index:1}


/* index.html */

  .agent-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);flex:none}
  .agent-toolbar label{font-weight:600}.agent-toolbar select{min-height:44px;max-width:100%;font:inherit;flex:1;min-width:150px}
  #agentTargetHint{flex-basis:100%;font-size:1rem;color:var(--muted)}
  html[data-sk-product="lang"][data-studio="live"] .home{grid-template-columns:minmax(0,1fr);grid-template-areas:"greet" "chat" "actions" "context";grid-template-rows:auto auto auto auto}
  html[data-sk-product="lang"][data-studio="live"] .home-chat{height:var(--home-chat-height,480px);min-height:0;max-height:none;width:100%;box-sizing:border-box}
  #homeChatDock .chatbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
  #homeChatDock .chatbar textarea{width:100%;min-width:0}
  #homeChatDock .chatempty{padding:12px}
  /* Phones keep Send beside the input; a compact arrow leaves the input room for its
     wrapped placeholder. The text stays in the button as its accessible name. */
  @media(max-width:600px){
    #homeChatDock .chatbar{padding-left:12px;padding-right:12px}
    #homeChatDock #chatSend{width:48px;min-width:48px;padding:0;font-size:0;line-height:0}
    #homeChatDock #chatSend::before{content:"\27A4";font-size:20px;line-height:1}
  }
  #chatOv.expanded{top:var(--agent-top,0);height:var(--agent-height,100dvh);bottom:auto}
  #chatOv.expanded .modal.chat{height:100%;max-height:100%;max-width:none;width:100%;border-radius:0}
  #chatOv:fullscreen{background:var(--bg);width:100%;height:100%;padding:0}
  #chatOv .chatlog{min-height:0}
  @media(max-width:600px){
    #chatOv{top:var(--agent-top,0);height:var(--agent-height,100dvh);bottom:auto}
    #chatOv .modal.chat{height:100%;max-height:100%}
    .agent-toolbar{padding:8px 10px}
    #agentTargetHint{font-size:1rem}
    #chatOv button,#chatOv select,#chatOv textarea,
    #homeChatDock button,#homeChatDock select,#homeChatDock textarea{
      font-size:max(16px,1rem);min-height:44px;min-width:44px
    }
    #chatOv textarea,#homeChatDock textarea{min-height:max(60px,3.75rem)}
    #chatOv .chatnote,#chatOv .chatempty,
    #homeChatDock .chatnote,#homeChatDock .chatempty{font-size:max(16px,1rem)}
  }


/* index.html */

.sokkos-brand-group{display:flex;align-items:baseline;gap:9px;min-width:0;flex-wrap:wrap}
.sokkos-brand-group h1{margin:0;min-width:0}
.sokkos-brand-credit{font:700 0.625rem/1.3 system-ui,sans-serif;letter-spacing:.035em;color:inherit;opacity:.76;text-decoration:none;white-space:nowrap}
.sokkos-brand-credit:hover,.sokkos-brand-credit:focus-visible{text-decoration:underline}
.sokkos-footer-credit{white-space:normal}
@media(max-width:600px){.sokkos-brand-group{flex:0 1 auto;gap:3px 8px}.sokkos-brand-credit{font-size:0.5625rem}}