:root{--ink:#17213b;--muted:#667085;--paper:#fbfaf7;--card:#fff;--line:#dedbd2;--orange:#f06424;--orange-dark:#c9470d;--blue:#2f5fca;--mint:#dff7ec;--shadow:0 18px 50px rgba(23,33,59,.09)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5}button,input,select,textarea{font:inherit;color:inherit}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;min-height:72px;padding:12px clamp(18px,4vw,64px);background:rgba(251,250,247,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:20px;font-weight:750;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--orange);color:#fff;font-weight:900;box-shadow:0 5px 0 #b83d08}.brand b{color:var(--orange)}nav{display:flex;gap:4px;flex:1}.nav-link{border:0;background:transparent;border-radius:10px;padding:10px 12px;font-size:14px;font-weight:700;cursor:pointer}.nav-link.active,.nav-link:hover{background:#f3ede5;color:var(--orange-dark)}main{max-width:1180px;margin:auto;padding:40px clamp(18px,4vw,48px) 80px}.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,.6fr);gap:38px;align-items:end;padding:38px 0 58px}.hero h1{font-size:clamp(34px,5vw,62px);line-height:1.02;letter-spacing:-.045em;max-width:850px;margin:8px 0 18px}.hero p:not(.eyebrow){font-size:18px;max-width:720px;color:var(--muted)}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:900;color:var(--orange-dark)}.boundary-card{display:flex;flex-direction:column;gap:7px;padding:20px;border:1px solid #bdd9cc;border-radius:18px;background:var(--mint)}.boundary-card span,.muted,.timezone-note,.form-note{color:var(--muted)}.view{display:none}.view.active{display:block}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 20px}.section-heading h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;margin:4px 0}.segmented{display:inline-flex;padding:4px;border:1px solid var(--line);border-radius:14px;background:#fff}.segmented button{border:0;background:transparent;padding:9px 13px;border-radius:10px;font-weight:800;cursor:pointer}.segmented button.active{background:var(--ink);color:#fff}.filter-card{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end;padding:18px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800}input,select,textarea{width:100%;border:1px solid #cfcac0;border-radius:10px;background:#fff;padding:10px 11px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,95,202,.12)}.button{border:1px solid transparent;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;text-decoration:none;text-align:center}.button.primary{background:var(--orange);color:#fff;box-shadow:0 4px 0 #b83d08}.button.primary:hover{background:var(--orange-dark)}.button.secondary{background:#fff;border-color:var(--line)}.button.danger{background:#fff1ed;color:#a62e00}.button.wide{width:100%;margin-top:6px}.button.google{background:#fff;border-color:#bfc4cf}.button small{font-weight:600;color:var(--muted)}.timezone-note{font-size:13px}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}.teacher-card,.panel,.list-card{border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}.teacher-card{padding:20px;display:flex;flex-direction:column;gap:14px}.teacher-head{display:flex;gap:12px;align-items:center}.avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#f3e9dc;font-weight:900;color:var(--orange-dark)}.teacher-card h3,.panel h3{margin:0}.teacher-card p{margin:0;color:var(--muted);font-size:14px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip,.status,.pilot-pill{display:inline-flex;border-radius:999px;padding:5px 9px;background:#f1f3f7;font-size:12px;font-weight:800}.slot-row,.button-row{display:flex;gap:8px;flex-wrap:wrap}.slot{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 9px;font-size:12px;font-weight:750;cursor:pointer}.teacher-card .button{margin-top:auto}.stack{display:grid;gap:14px}.list-card{padding:18px;display:flex;justify-content:space-between;gap:20px;align-items:center}.list-card h3,.list-card p{margin:2px 0}.status.confirmed,.status.completed{background:var(--mint);color:#17613f}.status.requested{background:#fff2cc;color:#765500}.progress{height:9px;background:#ebe7de;border-radius:999px;overflow:hidden;margin-top:12px}.progress span{display:block;height:100%;background:var(--orange)}.homework-items{display:grid;gap:8px;margin-top:12px}.homework-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:11px}.homework-item input{width:19px;height:19px}/* Reported as "awfully stretched on laptop": CSS grid's default align-items is
   `stretch`, so every panel in a row was forced to match the TALLEST sibling in
   that row. "Public profile" (name, headline, country, repeatable teach/speaks
   rows, specialties, rate, contacts…) sits beside "Mentor application" (legal
   name, country, one checkbox, one button) — a long form and a short one in the
   same row, so the short one stretched to match, leaving a large dead space
   below its submit button. `align-items:start` lets each panel size to its own
   content, which is what "two cards side by side" should mean. */
.workspace-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.panel{padding:20px}.full-width{grid-column:1/-1}.stack-form{display:grid;gap:13px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.availability-form{display:grid;grid-template-columns:1.1fr .8fr .8fr 1.5fr auto;gap:8px;margin:16px 0}.compact{gap:8px}.availability-line{display:flex;justify-content:space-between;align-items:center;background:#f7f6f2;padding:10px;border-radius:10px;font-size:13px}.builder-row{display:grid;grid-template-columns:1.2fr 2fr .5fr auto;gap:8px;margin-bottom:8px}
.builder-row-ai{grid-column:1/-1;display:flex;gap:8px;margin-top:-2px}
.builder-row-ai input{flex:1;min-width:0}.remove{border:0;background:#fff1ed;color:#a62e00;border-radius:9px;cursor:pointer}.empty{padding:32px;border:1px dashed #bbb4a7;border-radius:16px;text-align:center;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;padding:24px clamp(18px,4vw,64px);border-top:1px solid var(--line);font-size:13px;color:var(--muted)}footer a{color:inherit}dialog{border:0;border-radius:22px;padding:0;width:min(92vw,480px);box-shadow:0 30px 90px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(17,24,39,.58);backdrop-filter:blur(3px)}.dialog-card{position:relative;display:grid;gap:13px;padding:28px}.dialog-card h2{margin:0}.dialog-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:23px;cursor:pointer}.or{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.or:before,.or:after{content:"";height:1px;background:var(--line);flex:1}.toast{position:fixed;right:20px;bottom:20px;z-index:30;background:var(--ink);color:#fff;padding:13px 16px;border-radius:12px;box-shadow:var(--shadow)}@media(max-width:900px){.topbar{flex-wrap:wrap;gap:8px}.topbar nav{order:3;width:100%;overflow:auto}.nav-link{white-space:nowrap}.hero{grid-template-columns:1fr}.filter-card{grid-template-columns:1fr 1fr}.filter-card .button{grid-column:1/-1}.card-grid{grid-template-columns:1fr 1fr}.availability-form{grid-template-columns:1fr 1fr}.workspace-grid{grid-template-columns:1fr}.full-width{grid-column:auto}}@media(max-width:620px){main{padding-top:22px}.topbar{position:static}.topbar>.button{margin-left:auto}.hero{padding:20px 0 36px}.card-grid,.filter-card,.form-row{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.segmented{width:100%}.segmented button{flex:1}.list-card{align-items:flex-start;flex-direction:column}.builder-row{grid-template-columns:1fr 1fr}.builder-row input:nth-child(2){grid-column:1/-1}footer{flex-direction:column}}


/* #201 — cross-product switch (Zeriko / World / Teach). home.html and world.html
   already carry this pill; Teach had no way back to either, so it read as a
   separate site rather than the third Zeriko surface. */
.zk-product-toggle{display:inline-flex;align-items:center;gap:2px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:3px;white-space:nowrap}
.zk-product-toggle a{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;text-decoration:none;color:var(--ink)}
.zk-product-toggle a.zk{color:#c9470d}
.zk-product-toggle a.world{color:#15336e}
.zk-product-toggle a.active{background:var(--ink);color:#fff}
@media(max-width:620px){.zk-product-toggle a{padding:6px 9px;font-size:12px}}


/* #202 — structured language / specialty pickers replacing the free-text boxes. */
.lang-fieldset{border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;margin:0;display:grid;gap:10px}
.lang-fieldset legend{font-size:13px;font-weight:900;padding:0 6px}
.lang-fieldset .muted{font-size:12px;margin:0}
.lang-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto minmax(0,1fr) auto;gap:8px;align-items:center}
.lang-row.speaks{grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr) auto}
.lang-row .to{font-size:12px;font-weight:800;color:var(--muted);text-align:center}
.specialty-picker{display:flex;flex-wrap:wrap;gap:7px}
.specialty-picker label{flex-direction:row;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12.5px;font-weight:750;cursor:pointer;background:#fff}
.specialty-picker label:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.specialty-picker input{width:15px;height:15px;margin:0}
@media(max-width:620px){.lang-row{grid-template-columns:1fr 1fr;gap:6px}.lang-row .to{display:none}.lang-row .remove{grid-column:2;justify-self:end;width:34px;height:34px}}

/* #202 — "Also speaks: ..." on a mentor card. Its own rule so it reads as a fact
   line under the chips rather than as another paragraph of the bio. */
.speaks-line{font-size:12.5px;margin:2px 0 0;line-height:1.45}
.speaks-line strong{color:var(--ink)}


/* ══ NOTIFICATIONS (gap analysis §4) ══════════════════════════════════════════
   Teach's first out-of-band surface. Anchored to the topbar rather than a full
   page, because a notification you have to navigate to is one more dead end. */
.bell-wrap{position:relative;display:flex;align-items:center}
.bell{position:relative;border:1px solid var(--line);background:#fff;border-radius:12px;width:42px;height:42px;font-size:18px;cursor:pointer;line-height:1}
.bell:hover{background:#f7f6f2}
.bell-dot{position:absolute;top:5px;right:5px;width:10px;height:10px;border-radius:50%;background:var(--orange);border:2px solid #fff}
.notif-panel{position:absolute;top:52px;right:0;z-index:40;width:min(92vw,380px);max-height:min(70vh,520px);display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
/* 32px keeps the close target tappable without competing with "Mark all read". */
.notif-close{flex:0 0 auto;width:32px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--ink-2,#64748b);font-size:15px;line-height:1;cursor:pointer}
.notif-close:hover{background:var(--line)}
/* The account button is an identity, not a headline: never let it set the header's width. */
/* Reported as "still ugly and big": the earlier fix only capped the WIDTH and
   shortened the text (full email → the part before @). The button chrome never
   changed — it was still `.button.secondary`, the same bordered, padded,
   heavy-weight treatment as a real call-to-action like "Save profile", so even
   a short identity string sat in the header looking like the loudest thing on
   the page after the brand. An identity readout should be quiet; it is not
   something anyone is being asked to DO. Ghost styling, .nav-link-sized padding
   and font, a visible border only on hover so it still reads as clickable. */
#account-button{max-width:min(46vw,220px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:transparent;border-color:transparent;padding:8px 10px;font-size:13px;font-weight:700;color:var(--muted)}
#account-button:hover{border-color:var(--line);color:var(--ink)}
.text-button{border:0;background:none;color:var(--blue);font-size:12px;font-weight:800;cursor:pointer;padding:0}
.notif-list{overflow-y:auto;padding:6px}
.notif-item{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;width:100%;text-align:left;border:0;background:none;padding:11px 10px;border-radius:11px;cursor:pointer;font:inherit}
.notif-item:hover{background:#f7f6f2}
.notif-item.unread{background:#fff7f2}
.notif-item .ico{font-size:17px;line-height:1.3}
.notif-item .t{font-weight:800;font-size:13.5px;margin:0}
.notif-item .d{color:var(--muted);font-size:12.5px;margin:2px 0 0;line-height:1.4}
.notif-item .ago{color:var(--muted);font-size:11px;margin:3px 0 0}
.notif-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:13px}
@media(max-width:620px){.notif-panel{position:fixed;top:auto;bottom:12px;left:12px;right:12px;width:auto;max-height:66vh}}



/* ══ MOBILE HARDENING ══════════════════════════════════════════════════════
   See the block comment in the commit: five causes of horizontal overflow, of
   which the product pill in the header was one I introduced. */

/* (2) Nothing may paint outside the page box. `clip` rather than `hidden`
   because `hidden` on <body> silently kills position:sticky on the topbar. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* (3) Long unbreakable strings — meeting URLs are the common one now. */
h1, h2, h3, p, a, span, label, li, td { overflow-wrap: anywhere; }
/* …but never break the short, fixed strings where a mid-word break looks broken. */
.status, .chip, .pilot-pill, .button, .nav-link, .zk-product-toggle a { overflow-wrap: normal; }

/* (4) Let every grid and flex child actually shrink. */
.filter-card > *, .workspace-grid > *, .lang-row > *, .form-row > *,
.availability-form > *, .builder-row > *, .list-card > *, .public-filters > * { min-width: 0; }

/* (1) The header. Wraps by default now instead of only under a media query, so
   there is no width at which it can overflow — the pill drops to its own line
   when it stops fitting, at whatever width that happens to be. */
.topbar { flex-wrap: wrap; row-gap: 8px; }
.topbar .brand { flex: 0 1 auto; min-width: 0; }
.topbar .brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tables and pre blocks scroll inside themselves rather than widening the page. */
.dialog-card pre, .panel pre { overflow-x: auto; max-width: 100%; }

@media (max-width: 900px) {
  /* The pill is navigation between three products — it belongs with the nav row,
     not squeezed against the account button. */
  .zk-product-toggle { order: 4; }
  .topbar > .button, .bell-wrap { order: 2; }
}

@media (max-width: 700px) {
  /* (5) The gap between 900 and 620 that nothing covered. */
  .hero { padding: 16px 0 28px; }
  .hero h1 { font-size: clamp(28px, 8vw, 44px); }
  .workspace-grid { grid-template-columns: 1fr; }
  .availability-form { grid-template-columns: 1fr 1fr; }
  .availability-form button { grid-column: 1 / -1; }
  .section-heading { flex-direction: column; align-items: flex-start; }
  .provider-row { flex-direction: column; }
  .provider-row .button { width: 100%; }
}

@media (max-width: 620px) {
  main { padding-left: 14px; padding-right: 14px; }
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar .brand { font-size: 17px; }
  .topbar .brand-mark { width: 32px; height: 32px; }
  .brand b { display: inline; }
  /* Full-width taps: a 90px button in a corner is the classic mobile miss. */
  .list-card .button-row, .dialog-card .button-row { width: 100%; }
  .list-card .button-row .button, .dialog-card .button-row .button { flex: 1 1 140px; }
  dialog { width: 100%; max-width: 100%; margin: 0; border-radius: 18px 18px 0 0; }
  .dialog-card { padding: 22px 18px 26px; }
  /* Bottom-sheet behaviour: a centred modal on a phone is mostly backdrop. */
  dialog { position: fixed; top: auto; bottom: 0; max-height: 92vh; overflow-y: auto; }
  footer { flex-direction: column; gap: 8px; }
}

/* iOS zooms the whole page in when a focused input is under 16px. That zoom is
   what most "it doesn't resize" reports on iPhone actually are. */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }
}

/* The confirm dialog's provider shortcuts. */
.provider-row { display: flex; flex-wrap: wrap; gap: 8px; }
.provider-row .button { flex: 1 1 auto; text-align: center; }


/* Review + time-off controls in the workspace. */
.star-picker { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; }
.star-picker legend { font-size: 12px; padding: 0 6px; }
.star-picker label { flex-direction: row; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: #fff; }
.star-picker label:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.star-picker input { width: 15px; height: 15px; margin: 0; }
.star-picker span { color: #b8860b; letter-spacing: 1px; }
.star-picker label:has(input:checked) span { color: #ffd24a; }
.timeoff-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin: 12px 0; }
#extra-avail-form { grid-template-columns: 1fr 1fr 1fr auto; }
@media (max-width: 700px) {
  .timeoff-form { grid-template-columns: 1fr 1fr; }
  .timeoff-form button { grid-column: 1 / -1; }
}

/* ── Paintable availability calendar (teach.js renderAvailGrid) ──
   AVAIL_ROW_PX in teach.js MUST match the height set here (16px) — it is what
   the grid uses to compute where to open its default scroll position. */
.booking-calendar{display:grid;gap:8px}
.booking-cal-nav{display:flex;align-items:center;justify-content:center;gap:12px}
.booking-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.booking-cal-day{display:flex;flex-direction:column;gap:6px;min-width:0}
.booking-cal-daylabel{text-align:center;font-size:11px;font-weight:800;color:var(--muted);line-height:1.3}
.booking-cal-day.is-today .booking-cal-daylabel{color:var(--ink)}
.booking-cal-times{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow-y:auto}
.booking-cal-pill{border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:5px 2px;font-size:11px;font-weight:700;cursor:pointer;text-align:center}
.booking-cal-pill.active{border-color:var(--ink);background:#f3ede5}
.booking-cal-none{display:block;text-align:center;color:var(--muted);font-size:12px;padding:6px 0}
@media(max-width:620px){.booking-cal-grid{grid-template-columns:repeat(7,minmax(38px,1fr));overflow-x:auto}.booking-cal-pill{font-size:10px}}

/* Every one of these sets its own `display`, which beats the browser's native
   [hidden]{display:none} at equal specificity (author CSS always wins over
   the UA stylesheet). Every one of these is also toggled via .hidden in
   teach.js — el.hidden=true was flipping the DOM property correctly the
   whole time, with zero visual effect, because this override was missing.
   Confirmed root cause of "the notification panel can't be closed" (it was
   never actually hidden, .notif-panel{display:flex} always won) and "the
   hero banner never disappears" (.hero{display:grid} did the same). */
.stack[hidden],.notif-panel[hidden],.hero[hidden],.lesson-calendar[hidden],.avail-week-nav[hidden],.segmented[hidden]{display:none}
.lesson-calendar{display:grid;gap:10px;margin-bottom:16px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}
.lesson-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;font-weight:800;color:var(--muted)}
.lesson-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:4px}
.lesson-cal-cell{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;border-radius:8px;padding:6px 2px;font:inherit;font-size:12px;cursor:default}
.lesson-cal-cell.empty{visibility:hidden}
.lesson-cal-cell.has-lessons{cursor:pointer;background:#f7f6f2}
.lesson-cal-cell.has-lessons:hover{background:#efe9df}
.lesson-cal-cell.is-today span:first-child{font-weight:800;text-decoration:underline}
.lesson-cal-dots{display:flex;gap:2px;min-height:6px}
.lesson-cal-dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.lesson-cal-dot.requested{background:#d97706}
.lesson-cal-dot.confirmed{background:#16a34a}
.lesson-cal-dot.completed{background:#64748b}
.lesson-cal-dot.cancelled{background:#dc2626}
.lesson-cal-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--muted)}
.lesson-cal-legend span{display:inline-flex;align-items:center;gap:5px}
@keyframes lesson-flash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px var(--ink)}}
.lesson-hub.flash{animation:lesson-flash 1.6s ease}
.pending-chip{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;background:#fff2cc;color:#7a5b00;vertical-align:middle;margin-left:4px}
#mentor-today{border:1px solid var(--line);background:#fbfaf7}
.today-block{margin-top:14px}
.today-block:first-of-type{margin-top:10px}
.today-label{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.today-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.today-block .today-row:first-of-type{border-top:0;padding-top:0}
.today-actions{margin-top:16px}
.avail-mode-toggle{display:flex;gap:6px;margin:10px 0 4px}
.avail-mode{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:750;cursor:pointer}
.avail-mode.active{border-color:var(--ink);background:#f3ede5}
.avail-week-nav{display:flex;align-items:center;gap:10px;margin:6px 0;flex-wrap:wrap}
.avail-week-arrow{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:16px;line-height:1;cursor:pointer}
.avail-week-label{font-weight:800;font-size:13.5px}
.avail-toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.avail-tool{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:7px 11px;font-size:12.5px;font-weight:750;cursor:pointer}
.avail-tool.active{border-color:var(--ink);background:#f3ede5}
.avail-swatch{display:inline-block;width:12px;height:12px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}
.avail-swatch-auto{background:#dff7ec}
.avail-swatch-request{background:#fff2cc}
.avail-swatch-existing{background:#e3e8fb}
.avail-swatch-off{background:#fff;background-image:linear-gradient(45deg,transparent 45%,#c33 45%,#c33 55%,transparent 55%)}
.avail-grid-wrap{max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.avail-grid{display:grid;grid-template-columns:52px repeat(7,1fr);user-select:none;touch-action:none}
.avail-corner{position:sticky;top:0;left:0;z-index:3;background:#fff;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.avail-daylabel{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--line);border-left:1px solid #eee;text-align:center;font-size:11px;font-weight:800;color:var(--muted);padding:6px 0}
.avail-timelabel{position:sticky;left:0;z-index:1;background:#fff;border-right:1px solid var(--line);font-size:9.5px;color:var(--muted);text-align:right;padding-right:6px;line-height:16px;height:16px}
.avail-timelabel-half{border-top:none}
.avail-cell{border:0;border-top:1px solid #f1efe9;border-left:1px solid #f1efe9;height:16px;padding:0;cursor:pointer;background:#fff}
.avail-cell-hour{border-top-color:#e2ddd0}
.avail-cell-off{background:#fff}
.avail-cell-auto{background:#dff7ec}
.avail-cell-request{background:#fff2cc}
.avail-cell-existing{background:#e3e8fb}
.avail-cell:hover{filter:brightness(0.94)}
@media(max-width:620px){
  .avail-toolbar{gap:4px}
  .avail-tool{padding:6px 8px;font-size:11.5px}
  .avail-grid-wrap{max-height:360px}
}

/* ── Mentor onboarding status (renderMentorOnboarding in teach.js) ── */
.pilot-pill.pill-approved { background: var(--mint); color: #17613f; }
.pilot-pill.pill-pending { background: #fff2cc; color: #765500; }
.pilot-pill.pill-warn { background: #fff1ed; color: #a62e00; }
#mentor-onboarding-banner { background: #f3ede5; border: 1px solid var(--line); font-size: 14px; }
#mentor-onboarding-banner a { color: var(--orange-dark); font-weight: 800; }
#mentor-approved-gate { text-align: center; }

/* Workflow navigation: one role, one home, direct paths to the work. */
.topbar .role-switch{flex:0 0 auto}
.topbar .role-switch button{padding:7px 10px;font-size:12px}
.nav-link[hidden],.segmented[hidden],.hero[hidden]{display:none!important}
.workflow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px}
.workflow-card{display:flex;flex-direction:column;align-items:flex-start;padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.workflow-card h2{font-size:19px;margin:0 0 7px}
.workflow-card p{color:var(--muted);font-size:14px;margin:0 0 18px;flex:1}
.workflow-jumps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.workflow-jumps button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;font-weight:750;cursor:pointer}
.workflow-jumps button:hover{border-color:var(--orange);color:var(--orange-dark)}
.workflow-jumps button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.workflow-jumps button:disabled{opacity:.5;cursor:not-allowed}
#view-teacher [data-mentor-section]:not(.is-current){display:none!important}
#view-home h1{font-size:clamp(30px,4vw,48px);margin:3px 0}
.lesson-preview{align-items:center}
.lesson-preview h3{margin:6px 0 2px}
.lesson-preview p{margin:0;color:var(--muted)}
.lesson-back{margin:0 0 16px}
#lesson-detail .lesson-hub{display:block}
#lesson-detail .lesson-hub>.button-row{margin-top:20px}
.lesson-practice{margin-top:14px;padding:18px}
.lesson-practice h3{margin:0 0 10px}
.lesson-practice-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding:10px 0}
.lesson-practice-row span{color:var(--muted);font-size:13px}
.lesson-practice-row button{margin-left:auto}
.lesson-stages{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}
.lesson-stages span{padding:5px 9px;border-radius:999px;background:#f1f3f7;color:var(--muted);font-size:12px;font-weight:750}
.lesson-stages span.done{background:var(--mint);color:#17613f}
.lesson-stages span.current{background:#fff2cc;color:#765500}
@media(max-width:900px){.topbar .role-switch{order:2}.topbar nav{order:3}}
.my-mentors{margin:0 0 38px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#f3ede5}
.my-mentors .card-grid{margin-top:0}
.my-mentors .teacher-card{min-width:0}
.lesson-time-zones{padding:14px 16px;margin:0 0 16px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:12px;font-size:14px;overflow-wrap:anywhere}
.lesson-change{margin-top:14px;padding:18px}
.lesson-change h3{margin:0 0 8px}
.lesson-profile-action{margin-top:14px}
.residence-card{margin-top:24px;padding:20px}
.residence-card h2{margin:0 0 6px;font-size:18px}
.residence-card .form-row{margin:12px 0}
.lesson-length-control{max-width:260px;margin-top:15px}
/* ── The header, as two predictable rows ──
   Seven tasks, a role switch, a bell and an account do not fit on one line
   below a very wide screen, and letting them try is what produced nav labels
   broken over two and three lines ("Become / a / mentor"). Labels never wrap;
   below 1400px the tasks take a row of their own that scrolls sideways if it
   must, and the role switch, bell and account sit together on the right. */
.nav-link{white-space:nowrap}
.topbar{gap:16px}
/* #app is focused by script on every view change so a screen reader starts at
   the new content. It is not a control, so it must not draw a focus ring
   around the entire page. */
main:focus{outline:none}
@media(max-width:1400px){
  .topbar nav{order:5;flex:1 0 100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .topbar .role-switch{margin-left:auto}
}
@media(max-width:620px){
  .account-name{display:none}
  .topbar .bell-wrap{margin-left:auto}
  .topbar .role-switch{margin-left:0}
}

/* The `hidden` attribute must always win. `label{display:flex}`, `.panel`,
   `.button` and friends all set a display of their own, which silently beats
   the browser's [hidden]{display:none} — the cause of three separate "it never
   disappears" reports listed further up. One rule instead of a growing list. */
[hidden]{display:none!important}
.teacher-card.flash{animation:lesson-flash 1.6s ease}
.check-row{flex-direction:row;align-items:flex-start;gap:10px;font-weight:650}
.check-row input{flex:0 0 auto;width:20px;height:20px;margin-top:2px}
.check-row small{font-weight:500}

/* Time changes and counter-proposals. */
.reschedule-custom-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;margin-bottom:10px}
.lesson-change-pending{border-color:#f0c36d;background:#fffaf0}
.lesson-change-reason{font-style:italic;color:var(--muted)}
.lesson-practice-item{padding:8px 0 8px 4px;font-size:14px}
.lesson-response{margin:6px 0 0 26px;padding:8px 10px;background:#f7f6f2;border-radius:10px;font-size:13.5px;white-space:pre-wrap}
/* One practice task: instruction, then its type and length on their own line,
   then the way to answer. The tick is an ordinary row, not a framed block. */
.practice-task{display:grid;gap:8px;padding:16px 0 4px;border-top:1px solid var(--line)}
.practice-task:first-child{border-top:0;padding-top:4px}
.practice-task>strong{display:block;font-size:15.5px}
.practice-task>small{display:block;margin-top:-4px}
.practice-task>a{justify-self:start;font-size:14px}
label.homework-item{flex-direction:row;justify-content:flex-start;border:0;padding:2px 0;font-weight:650}
.practice-task>.button{justify-self:start}
/* Practice the mentor has given: a table on a wide screen, stacked cards on a phone. */
.partner-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.partner-panel-head h3{margin:0}
.partner-panel-head>.muted{font-size:13px}
.practice-filter{flex-direction:row;align-items:center;gap:8px}
.practice-filter select{width:auto;min-width:170px}
.practice-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.practice-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer}
.practice-chip b{margin-left:4px;color:var(--muted)}
.practice-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.practice-chip.active b{color:#fff}
.practice-chip.alert:not(.active){border-color:#f3c3b2;background:#fff1ed;color:#a62e00}
.practice-chip.alert:not(.active) b{color:#a62e00}
.practice-head,.practice-row{display:grid;grid-template-columns:1.1fr 2fr 1.1fr .9fr 1.3fr auto;gap:12px;align-items:center}
.practice-head{padding:0 10px 6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.practice-row{padding:10px;border-top:1px solid var(--line);font-size:14px}
.practice-row.is-late{background:#fff8f5}
.practice-row small{display:block;color:var(--muted);font-size:12px}
.practice-row .button{padding:7px 12px;font-size:13px}
.status.late{background:#fff1ed;color:#a62e00}
@media(max-width:800px){
  .practice-head{display:none}
  .practice-row{grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 10px}
  .practice-row>span[data-label]::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .practice-row>span[data-label="Practice"],.practice-row>span:last-child{grid-column:1/-1}
  .practice-row>span:last-child .button{width:100%}
}
/* Matchmaking and open rooms. */
.partner-suggest,.partner-rooms{padding:16px 18px;margin-bottom:14px}
.partner-suggest{background:#f3f8ff;border-color:#cfe0f7}
.partner-rooms-note{margin:0 0 10px;font-size:13px}
.suggest-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.suggest-row .avatar{flex:0 0 auto;width:42px;height:42px;border-radius:50%;font-size:14px}
.suggest-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.suggest-main>span{color:var(--muted);font-size:13px}
.suggest-row .button{flex:0 0 auto}
.room-row.mine{border-color:#bdd9cc;background:var(--mint)}
.partner-lang{grid-template-columns:110px minmax(0,1.4fr) minmax(0,1.2fr) 40px}
.partner-lang-kind{font-size:12px;font-weight:800;color:var(--muted)}
.partner-lang.learns .partner-lang-kind{color:var(--orange-dark)}
@media(max-width:620px){
  .suggest-row{flex-wrap:wrap}
  .suggest-row>.button,.suggest-row>.button-row{flex:1 1 100%}
  .suggest-row>.button-row .button{flex:1}
  .partner-lang{grid-template-columns:1fr 1fr 40px}
  .partner-lang-kind{grid-column:1/-1}
  .lang-row.partner-lang .remove{grid-column:auto;justify-self:stretch;width:auto}
}
/* A task row has five controls (type, instruction, resource, minutes, remove);
   the grid had four columns, so the remove button wrapped onto a line of its
   own and stretched into a wide bar. */
.builder-row{grid-template-columns:minmax(0,1.1fr) minmax(0,2.2fr) minmax(0,1fr) 72px 40px;align-items:center;padding:12px 0;border-top:1px solid var(--line);margin-bottom:0}
.builder-row:first-child{border-top:0}
.builder-row>.remove{height:40px;font-size:18px}
@media(max-width:700px){
  .builder-row{grid-template-columns:1fr 72px 40px}
  .builder-row>select,.builder-row>[name=itemLabel]{grid-column:1/-1}
}
/* The AI practice panel in the builder. */
.plan-cook{background:#fbfaf7}
.plan-grid{display:grid;grid-template-columns:1.3fr .8fr 1.1fr;gap:12px}
.plan-cook-actions{align-items:center}
.plan-cook-actions .muted{font-size:13px;flex:1;min-width:200px}
.builder-row-preview .exercise-text{margin:8px 0 0;font-size:13px}
.exercise select{max-width:100%}
.exercise-translation{font-size:13px;color:var(--muted)}
.exercise-translation summary{cursor:pointer;font-weight:700}
.exercise-result.model{background:#f0f9ff;color:#1e4e79}
@media(max-width:700px){.plan-grid{grid-template-columns:1fr}}
/* Generated quizzes: the mentor's preview in the builder, the learner's quiz. */
.builder-row-preview{grid-column:1/-1;padding:10px 12px;border:1px dashed #cfcac0;border-radius:10px;background:#fbfaf7;font-size:13px}
.builder-row-preview ol{margin:8px 0;padding-left:20px;display:grid;gap:4px}
.builder-key{color:#17613f;font-weight:700}
.exercise{display:grid;gap:10px;margin-top:8px}
.exercise .lesson-response{margin-left:0}
.exercise-text{padding:10px 12px;background:#f7f6f2;border-radius:10px;white-space:pre-wrap}
.exercise ol{margin:0;padding-left:22px;display:grid;gap:12px}
.exercise li p{margin:0 0 6px;font-weight:650}
.exercise-options{display:flex;flex-wrap:wrap;gap:6px}
.exercise-options label{flex-direction:row;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:#fff;cursor:pointer;font-weight:650}
.exercise-options label:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.exercise-options input{width:15px;height:15px;margin:0}
.exercise-result{margin:6px 0 0!important;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:500!important}
.exercise-result.right{background:var(--mint);color:#17613f}
.exercise-result.wrong{background:#fff1ed;color:#a62e00}
.practice-visibility{margin:0}

/* Language partners. Same compartment pattern as the mentor workspace. */
#view-partners [data-partner-section]:not(.is-current){display:none!important}
.partner-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 16px}
.partner-step{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:13.5px}
.partner-step strong{font-size:14.5px}
.partner-step span{color:var(--muted);flex:1}
.partner-step.done{background:var(--mint);border-color:#bdd9cc}
.partner-step.done strong{color:#17613f}
.partner-step.warn{grid-column:1/-1;background:#fff1ed;border-color:#f3c3b2}
.partner-search{padding:16px 18px}
.partner-filters{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.partner-search .form-note{margin:10px 0 0;font-size:13px}
.partner-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.partner-subhead{margin:22px 0 10px;font-size:17px}
.partner-subhead:first-child{margin-top:0}
.partner-duration{display:flex;flex-wrap:wrap;gap:8px}
.partner-duration label{flex-direction:row;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:#fff;cursor:pointer}
.partner-duration label:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.partner-duration input{width:15px;height:15px;margin:0}
.partner-public{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#f7f6f2}
.partner-public:has(input:checked){background:var(--mint);border-color:#bdd9cc}
.partner-photo-row{display:flex;gap:14px;align-items:center}
.partner-photo-row label{flex:1;min-width:0}
.partner-photo-preview .avatar{width:64px;height:64px;border-radius:20px;font-size:20px}
.avatar.photo{object-fit:cover}
.partner-slot-form{grid-template-columns:1.3fr 1fr 1fr auto}
.partner-card .chip.match{background:var(--mint);color:#17613f}
.partner-meet-hint{font-size:13px!important;padding:8px 10px;border-radius:10px;background:#f7f6f2}
.partner-meet-hint.ready{background:var(--mint);color:#17613f!important}
.partner-invite .button-row{justify-content:flex-end}
/* ── The messenger (both chats) ──
   Read like a messaging app, not filled in like a form: person on top, bubbles
   on two sides, composer pinned to the bottom. A fixed-height column so the
   history is the only part that scrolls; full screen on a phone. */
dialog.chat-dialog{width:min(94vw,540px);height:min(86vh,740px);max-height:none;overflow:hidden;border-radius:18px}
.chat-card{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--ink);color:#fff}
.chat-head .dialog-close{position:static;flex:0 0 auto;width:38px;height:38px;border:0;background:transparent;color:#fff;font-size:20px}
.chat-head .dialog-close:hover,.chat-menu summary:hover{background:rgba(255,255,255,.14)}
.chat-avatar{flex:0 0 auto;display:flex}
.chat-avatar .avatar{width:40px;height:40px;border-radius:50%;font-size:14px}
.chat-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.chat-who strong,.chat-who small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-who small{color:#c4cbdb;font-size:12px}
.chat-menu{position:relative;flex:0 0 auto}
.chat-menu summary{list-style:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:20px;cursor:pointer}
.chat-menu summary::-webkit-details-marker{display:none}
.chat-menu>div{position:absolute;right:0;top:42px;z-index:5;display:grid;min-width:160px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.chat-menu>div button{border:0;background:none;text-align:left;padding:12px 14px;font-weight:700;cursor:pointer}
.chat-menu>div button:hover{background:#f7f6f2}
.chat-menu>div button:last-child{color:#a62e00}
.chat-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:#fff8e8;border-bottom:1px solid var(--line);font-size:13px;line-height:1.35}
.chat-strip>span{min-width:0}
.chat-strip .button{flex:0 0 auto;padding:7px 12px;font-size:13px;box-shadow:none;min-height:0}
.chat-history{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:12px 12px 14px;background:#efe9df}
.chat-day{align-self:center;margin:10px 0 6px;padding:3px 11px;border-radius:8px;background:#fff;color:var(--muted);font-size:11.5px;font-weight:700;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.chat-day:first-child{margin-top:0}
.chat-empty{align-self:center;margin:auto;max-width:280px;padding:12px 16px;border-radius:12px;background:#fff8e8;color:var(--muted);font-size:13px;text-align:center}
.bubble{max-width:80%;margin-top:6px;padding:6px 9px 5px;border-radius:3px 12px 12px 12px;background:#fff;align-self:flex-start;box-shadow:0 1px 1px rgba(0,0,0,.09)}
.bubble.mine{align-self:flex-end;border-radius:12px 3px 12px 12px;background:#d9fdd3}
.bubble.follows{margin-top:0;border-radius:12px}
.bubble.pending{opacity:.65}
.bubble p{display:inline;margin:0;font-size:14.5px;line-height:1.4;white-space:pre-wrap;color:var(--ink)}
.bubble small{float:right;margin:7px 0 -1px 12px;font-size:10.5px;color:#7b8494}
/* `footer.` on purpose: the composer is a <footer>, and the page footer's own
   rules (column layout on phones, large padding) would otherwise apply to it
   and drop the send button under the text box. */
footer.chat-compose{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-end;gap:8px;padding:8px 10px;background:#f7f6f2;border-top:1px solid var(--line);font-size:inherit;color:inherit}
.chat-compose textarea{flex:1;min-width:0;resize:none;max-height:120px;border-radius:21px;padding:10px 15px;line-height:1.35}
.chat-send{flex:0 0 auto;width:42px;height:42px;border:0;border-radius:50%;background:var(--orange);color:#fff;font-size:16px;cursor:pointer}
.chat-send:hover{background:var(--orange-dark)}
/* The conversation list: one tappable row per person. */
.chat-row{display:flex;align-items:center;gap:12px;width:100%;margin-top:-1px;padding:12px 14px;border:1px solid var(--line);background:#fff;text-align:left;font:inherit;cursor:pointer}
.chat-row:first-child{margin-top:0;border-radius:16px 16px 0 0}
.chat-row:last-child{border-radius:0 0 16px 16px}
.chat-row:only-child{border-radius:16px}
.chat-row:hover{background:#faf8f4}
.chat-row .avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%}
.chat-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-row-main>span{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row-time{flex:0 0 auto;align-self:flex-start;color:var(--muted);font-size:12px}
#thread-list,#partner-threads{gap:0}
@media(max-width:620px){
  dialog.chat-dialog{inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .bubble{max-width:86%}
}
@media(max-width:900px){
  .partner-layout,.partner-status,.partner-filters{grid-template-columns:1fr}
  .partner-slot-form{grid-template-columns:1fr 1fr}
  .partner-slot-form label:first-child,.partner-slot-form button{grid-column:1/-1}
}
@media(max-width:620px){
  .reschedule-custom-row{grid-template-columns:1fr 1fr}
  .reschedule-custom-row label:first-child{grid-column:1/-1}
  .workflow-jumps{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .workflow-jumps button{white-space:nowrap;flex:0 0 auto;min-height:42px}
  .today-row{align-items:stretch;flex-direction:column}
  .today-row .button-row .button{flex:1 1 140px}
  .partner-invite .button-row{justify-content:stretch}
  .bubble{max-width:92%}
  .toast{left:12px;right:12px;bottom:12px}
}
@media(max-width:620px){
  .topbar{padding:8px 12px;gap:6px}
  .topbar .brand{font-size:17px}
  .topbar nav{order:4;display:flex;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 0;scrollbar-width:thin}
  .topbar .role-switch{order:3;width:100%}
  .topbar .role-switch button{flex:1;min-height:42px}
  .topbar #account-button{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-link,.button,.slot{min-height:42px}
  .my-mentors{padding:14px;margin-bottom:25px}
  .my-mentors .teacher-card,.workflow-card{width:100%}
  .lesson-preview,.lesson-preview>div,#lesson-detail .lesson-hub>div{width:100%;min-width:0}
  .lesson-preview>.button,.lesson-change .button-row>.button{width:100%}
  #lesson-detail .lesson-hub>.button-row .button{flex:1 1 100%}
  .lesson-stages{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px}
  .lesson-stages span{white-space:nowrap}
  dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto}
  .dialog-card{padding:22px 16px}
  .booking-cal-grid{max-width:100%;overflow-x:auto}
}

/* OCT-10 — student workspace: sidebar on wide screens, stacked on phones/Fold. */
.tlw { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 18px; }
.tlw-side, .tlw-main { min-width: 0; }
.tlw-side .btn { display: block; width: 100%; text-align: left; margin: 4px 0; overflow-wrap: anywhere; }
.tlw-side .btn[aria-current="true"] { font-weight: 800; }
.tlw-picker, .tlw-text, .tlw-field input, .tlw-field select { width: 100%; box-sizing: border-box; }
.tlw-field { display: grid; gap: 4px; margin: 8px 0; }
.tlw-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.tlw-tabs [aria-selected="true"] { font-weight: 800; text-decoration: underline; }
.tlw-proposal, .tlw-set { padding: 10px; border: 1px solid currentColor; border-radius: 10px; margin: 8px 0; opacity: .95; }
.tlw-live__text { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) { .tlw { grid-template-columns: minmax(0, 1fr); } }

/* UP09-B oral homework */
.tlw-oral { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line, #e5e7eb); }
.tlw-oral__controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.tlw-written-form { flex-basis: 100%; }
.tlw-answers { display: grid; gap: 10px; margin-top: 10px; }
.tlw-answer { padding: 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; overflow-wrap: anywhere; }
.tlw-written { margin: 6px 0; white-space: pre-wrap; }
.tlw-feedback { margin: 6px 0 0; font-weight: 600; }