/* Layout: one phone-width column; a sticky seat bar on top, screens swap below it. */
:root {
  --bg: #f3f5f4; --surface: #ffffff; --ink: #18211e; --muted: #5d6b66; --line: #d8dfdc;
  --maple: #b3261e; --maple-soft: #fbe9e7; --ok: #1f7a4d; --ok-soft: #e3f3ea;
  --on-maple: #ffffff; --warn: #9a5b00; --warn-soft: #fdf0d9; --focus: #1d5fa8; --loot: #e0a10e;
  --f-display: "Lexend", "Be Vietnam Pro", system-ui, sans-serif;
  --f-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121715; --surface: #1b2220; --ink: #e8eeeb; --muted: #9aa9a3; --line: #2e3935;
  --maple: #f07167; --maple-soft: #3a1f1d; --ok: #5cc98f; --ok-soft: #173126;
  --on-maple: #1a0b0a; --warn: #f0b75a; --warn-soft: #3a2b12; --focus: #7fb2ef; --loot: #f5c04a; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #121715; --surface: #1b2220; --ink: #e8eeeb; --muted: #9aa9a3; --line: #2e3935;
  --maple: #f07167; --maple-soft: #3a1f1d; --ok: #5cc98f; --ok-soft: #173126;
  --on-maple: #1a0b0a; --warn: #f0b75a; --warn-soft: #3a2b12; --focus: #7fb2ef; --loot: #f5c04a; color-scheme: dark }
* { box-sizing: border-box }
html { scrollbar-gutter: stable }   /* the tab bar jumped 7 px whenever a page grew a scrollbar (teacher 9 Oct) */
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f-body); }
.wrap { max-width: 34rem; margin: 0 auto; padding-inline: 16px; padding-block: 0 48px; display: flex; flex-direction: column; gap: 16px }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.01em }
h1 { font-size: 1.45rem } h2 { font-size: 1.15rem } h3 { font-size: 1rem }
p { margin: 0 }
.muted { color: var(--muted) } .small { font-size: .85rem }
.num { font-variant-numeric: tabular-nums }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.back-in { max-width: 34rem; margin: 0 auto; padding: 0 16px 8px }
.backbtn { font: 600 .88rem var(--f-body); color: var(--focus); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; min-height: 36px }
.backbtn:hover { border-color: var(--focus) }
.bar-in { max-width: 34rem; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 10px; justify-content: space-between }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600 }
.brand svg { width: 24px; height: 24px; fill: var(--maple); transform: rotate(12deg) }   /* the logo: the tilted leaf (teacher 9 Oct) */
.tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px }
.tab { border: 0; background: transparent; color: var(--muted); font: 600 .82rem var(--f-body); padding: 6px 12px; border-radius: 999px; cursor: pointer }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .95rem var(--f-body); padding: 12px 16px; border-radius: 10px; cursor: pointer; min-height: 46px }
.btn.primary { background: var(--maple); border-color: var(--maple); color: var(--on-maple) }
.btn.block { width: 100% }
.btn:disabled { opacity: .5; cursor: default }
.btn.link { border: 0; background: none; padding: 6px 0; min-height: 0; color: var(--focus); font-weight: 500 }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
.pick { display: grid; gap: 10px }
.pick .btn { text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 8px }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); white-space: nowrap }
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent }
.chip.bad { background: var(--maple-soft); color: var(--maple); border-color: transparent }
.note { background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-size: .85rem }
/* week grid: 7 columns of day + two toggles */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px }
.day { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center }
.day .d { font-size: .72rem; color: var(--muted); font-weight: 600 }
.day.today .d { color: var(--maple) }
.tick { border: 1px solid var(--line); background: var(--bg); color: var(--muted); border-radius: 8px; font: 700 .8rem var(--f-body); padding: 8px 0; cursor: pointer }
.tick[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff }
.tick:disabled { opacity: .35; cursor: default }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--muted) }
/* form */
.q { display: flex; flex-direction: column; gap: 8px; padding-block: 4px }
.q > label, .q > .ql { font-weight: 600 }
.seg { display: flex; flex-wrap: wrap; gap: 6px }
.seg button { flex: 1 0 auto; min-width: 2.6rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 600 .95rem var(--f-body); padding: 10px 10px; border-radius: 9px; cursor: pointer }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.seg.days button { min-width: 0; flex: 1 1 0; padding: 10px 0 }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=date], textarea, select { width: 100%; font: 400 1rem var(--f-body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px }
textarea { min-height: 4.5rem; resize: vertical }
.hint { font-size: .8rem; color: var(--muted) }
.prefill { font-size: .78rem; color: var(--ok) }
details > summary { cursor: pointer; font-weight: 600; padding-block: 4px }
.sticky-submit { position: sticky; bottom: 0; padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--bg) 30%) }
/* aide */
.rows { display: flex; flex-direction: column; gap: 10px }
.row { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface) }
.row-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap }
.seatcode { font: 600 1.05rem var(--f-display) }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 6px 12px; font-size: .85rem }
.facts b { display: block; font-size: .7rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase }
.facts .mismatch { color: var(--maple); font-weight: 700 }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem }
.checks label { display: inline-flex; gap: 6px; align-items: center }
.hw-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding-block: 8px; border-top: 1px solid var(--line) }
.hw-item:first-of-type { border-top: 0 }
.hw-item .n { font-weight: 700; color: var(--maple); font-size: .8rem; padding-top: 2px }
.words { width: 100%; border-collapse: collapse; font-size: .9rem }
.words td { padding: 6px 4px; border-top: 1px solid var(--line); vertical-align: top }
.words td:first-child { font-weight: 600; white-space: nowrap; padding-right: 10px }
.tablewrap { overflow-x: auto; margin-inline: -4px }
table.aide { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 0 }
table.aide th, table.aide td { padding: 7px 5px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap }
table.aide thead th { font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); line-height: 1.25 }
table.aide thead th .muted { text-transform: none; letter-spacing: 0 }
table.aide tr.flag > th { box-shadow: inset 3px 0 0 var(--maple) }
table.aide tr.detail td { white-space: normal; max-width: 0; background: var(--bg); display: table-cell }
table.aide tr.detail td > * + * { margin-top: 6px }
.seatbtn { border: 0; background: none; color: var(--ink); font: 600 .95rem var(--f-display); padding: 4px 2px 4px 6px; cursor: pointer; text-decoration: underline dotted var(--muted) }
.mark { font-size: .8rem; font-weight: 700; margin-left: 2px } .mark.ok { color: var(--ok) } .mark.warn { color: var(--warn) }
table.aide td > select:not(.appsel) { min-width: 7.5rem }   /* Admin seats: never squeeze a dropdown to «T'» on a phone; the table scrolls instead (9 Oct) */
.td-rc { line-height: 1.15 }
.appsel { width: auto; padding: 4px 6px; font-size: .9rem; margin-left: 4px; border-radius: 7px }
.bad { color: var(--maple); font-weight: 700 }
/* home: one column on phones, two on desktop */
.home-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) }
.home-grid .col { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.hw-item .body { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
ul.steps { margin: 0; padding-left: 1.1rem; font-size: .85rem; display: flex; flex-direction: column; gap: 3px }
ul.steps li.no { list-style: none; margin-left: -1.1rem; color: var(--maple) }
ul.steps li.no::before { content: "✗ "; font-weight: 700 }
ul.steps.ex { color: var(--muted) }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.small-btn { min-height: 38px; padding: 7px 12px; font-size: .85rem; text-decoration: none; display: inline-flex; align-items: center }
.proof-wrap { display: flex; flex-direction: column; gap: 4px }
.proof { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px dashed var(--line); border-radius: 10px; min-height: 64px; align-items: center }
.proof.over { border-color: var(--focus); background: var(--bg) }
.thumb { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line) }
.thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block }
.thumb .x { position: absolute; top: 2px; right: 2px; border: 0; border-radius: 6px; background: var(--ink); color: var(--bg); font: 700 .75rem var(--f-body); padding: 1px 6px; cursor: pointer }
.thumb .x.sure { background: var(--maple); color: var(--on-maple) }
.addimg { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; background: var(--bg); color: var(--muted); font: 600 .85rem var(--f-body); cursor: pointer; border: 1px solid var(--line) }
.next { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 64px }
.proof.flat { border: 0; padding: 0; min-height: 0 }
.pfig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; color: var(--muted) }
.lightbox { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px }
.seg.vert { flex-direction: column } .seg.vert button { text-align: left; font-weight: 500 }
.seg button.right { background: var(--ok); border-color: var(--ok); color: #fff }
.seg button.wrong { background: var(--maple); border-color: var(--maple); color: var(--on-maple) }
.quiz fieldset { border: 0; padding: 0; margin: 0; border-top: 1px solid var(--line); padding-top: 12px }
.quiz legend { padding: 0; margin-bottom: 8px }
.unsure { color: var(--muted) } .okc { color: var(--ok); font-weight: 700 }
.linkish { border: 0; background: none; color: var(--focus); font: inherit; cursor: pointer; padding: 0 }
.wide-only { display: none }
.aide-wide { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "table" "side" }
.a-head { grid-area: head } .a-table { grid-area: table; min-width: 0 } .a-side { grid-area: side; display: flex; flex-direction: column; gap: 16px }
@media (min-width: 900px) {
  .wrap, .bar-in, .back-in { max-width: 76rem }
  .home-grid { grid-template-columns: 24rem minmax(0, 1fr); align-items: start }
  .home-grid .col:first-child { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)) }
  form#rf, form.quiz, form#pwf, .wrap > .card:only-child:not(.rm-card) { max-width: 44rem; width: 100%; margin-inline: auto }
  .hw-item { grid-template-columns: 4rem 1fr; padding-block: 12px }
  .thumb, .addimg { width: 88px; height: 88px }
  .wide-only { display: table-cell }
  .narrow-only { display: none }
  table.aide { font-size: .9rem }
  .aide-wide { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: "table head" "table side"; grid-template-rows: auto 1fr; align-items: start }
}
/* next-session vocabulary + grammar */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px }
ol.vocab { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px }
ol.vocab li { background: var(--bg); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0 }
ol.vocab .w { font: 600 1.02rem var(--f-display); letter-spacing: -0.005em }
ol.vocab .m { font-size: .9rem }
ol.vocab .vnote { font-size: .8rem; color: var(--muted) }
ol.vocab .ex { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums }
.gram { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px }
.gcard { background: var(--bg); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.gcard h4 { margin: 0; font: 600 .98rem var(--f-display); display: flex; gap: 8px; align-items: baseline; text-wrap: balance }
.gnum { flex: none; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: .75rem; transform: translateY(-1px) }
.gcard p { line-height: 1.55 }
ul.gex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px }
ul.gex li.pair { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: .88rem }
ul.gex .from { font-style: italic; color: var(--muted); min-width: 0 }
ul.gex .arr { color: var(--maple); font-weight: 700 }
ul.gex .to { font-weight: 700; font-variant-numeric: tabular-nums }
ul.gex li.solo { font-size: .88rem; font-style: italic }
.hw-what { margin: 0; line-height: 1.5 } .hw-done { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--ok-soft); color: var(--ink) } .hw-done b { color: var(--ok) }
.pw-show { font-size: .82rem; padding: 2px 6px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); user-select: all }
ol.steps { margin: 0; padding-left: 1.3rem; font-size: .85rem; display: flex; flex-direction: column; gap: 3px }
p.dont { color: var(--maple) }
@media (min-width: 560px) { ol.vocab { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1100px) { .gram { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
ul.gpts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; line-height: 1.5 }
ul.gpts li.line { padding-left: 14px; position: relative }
ul.gpts li.line::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted) }
ul.gpts li.pair { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; background: var(--surface); border-radius: 8px; padding: 6px 10px }
ul.gpts .pnote { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); padding-top: 2px }
ul.gpts .from { font-style: italic } ul.gpts .arr { color: var(--maple); font-weight: 700 } ul.gpts .to { font-weight: 700; font-variant-numeric: tabular-nums }
.gex-wrap { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px }
.pr-frame { width: 100%; height: 34rem; border: 1px solid var(--line); border-radius: 10px; background: #fff }
.vbox:empty { display: none }
.rm-frame { width: 100%; height: calc(100vh - 200px); min-height: 28rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg) }
@media (min-width: 900px) { .wrap:has(.rm-card) { max-width: 96rem } }
.rm-seg button { flex: 0 0 auto; padding: 7px 12px; font-size: .85rem }
[hidden] { display: none !important }
.tab { white-space: nowrap }
@media (max-width: 480px) { .brand span { display: none } .tab { padding: 6px 9px } }
.t-sm { display: none }
.tabs { min-width: 0; overflow-x: auto; scrollbar-width: none } .tabs::-webkit-scrollbar { display: none }
@media (max-width: 480px) { .tab { padding: 6px 8px; font-size: .78rem } .tabs { gap: 2px } .t-lg { display: none } .t-sm { display: inline !important } .bar-in:has(.tabs:not([hidden])) .brand { display: none } .bar-in:has(.tabs:not([hidden])) { justify-content: center } }
.rm-card.rm-max { position: fixed; inset: 0; z-index: 25; border-radius: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(10px + env(safe-area-inset-bottom, 0px)); max-width: none }
.rm-card.rm-max .rm-frame { height: auto; flex: 1; min-height: 0 }
.rm-card.rm-max #rm-back { display: none }
.rg-cards { display: flex; flex-direction: column; gap: 14px }
.rg-kv { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 6px 12px; margin: 0; align-items: center }
.rg-kv dt { font-size: .78rem; font-weight: 600; color: var(--muted) } .rg-kv dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0 } .rg-kv dd.col { flex-direction: column; align-items: flex-start }
.mono-txt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86rem; overflow-wrap: anywhere }
.mono-in { font-family: ui-monospace, Menlo, Consolas, monospace; width: 15rem; max-width: 100% }
.rg-sites { display: grid; grid-template-columns: 9rem repeat(3, minmax(0, 1fr)); gap: 8px 12px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px }
.rg-sites .h { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted) }
.rg-sites .svc { display: flex; flex-direction: column; gap: 4px; align-items: flex-start }
.rg-date { display: flex; gap: 4px; align-items: center; min-width: 0 } .rg-date input { padding: 6px 8px; min-width: 0 }
.rg-sect > .btn.link { align-self: flex-start }
.rg-cap { display: none; font-size: .72rem; color: var(--muted); font-weight: 600 }
.rg-sect { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px } .rg-sect h4 { margin: 0; font: 600 .95rem var(--f-display) }
.rg-ho { background: var(--warn-soft); border-radius: 10px; padding: 12px; border: 0 }
.rg-hist { list-style: none; padding-left: 0 }
.chip.muted-chip { background: transparent } .chip.dashed { background: transparent; border: 1.5px dashed var(--warn); color: var(--warn) }
.rg-matrix td, .rg-matrix th { white-space: nowrap }
@media (max-width: 700px) { .rg-cap { display: block; flex-basis: 100% } .rg-date { flex-wrap: wrap } .rg-date input { flex: 1 } .rg-sites { grid-template-columns: minmax(0, 1fr) } .rg-sites .h { display: none } .rg-sites .svc { grid-column: 1 / -1; flex-direction: row } .rg-kv { grid-template-columns: 1fr } }
.who { display: inline-flex; align-items: center; gap: 8px; text-align: left }
.pdot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.12) }
.seatcode-sm { font-size: .72rem; color: var(--muted); font-weight: 500 }
.seatbtn .who b { font-weight: 600 }
.seatgrid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)) }
.rg-color { width: auto; padding: 4px 8px; font-size: .85rem }
#tab-out { color: var(--maple) }
/* loading screen (teacher 9 Oct 22:19: "something related to maple leaves"): one leaf drifting down, the brand's own
   leaf and colour. The ONE place the leaf moves (FR 95 says never moving; this exception is the teacher's).
   Reduced motion: the leaf stands still. The page's corner leaf is not added to this card. */
.card.loading { align-items: center; text-align: center; padding-block: 28px 24px }
#app > .card.loading::after { display: none !important }
.leaf-fall { position: relative; width: 84px; height: 84px }
.leaf-fall svg { position: absolute; left: 22px; top: 6px; width: 40px; height: 40px; fill: var(--maple); transform: rotate(12deg) }
@media (prefers-reduced-motion: no-preference) {
  .leaf-fall svg { animation: leaf-drift 2.6s ease-in-out infinite }
  @keyframes leaf-drift {
    0%   { transform: translate(-14px, -6px) rotate(-10deg); opacity: 0 }
    15%  { opacity: 1 }
    35%  { transform: translate(12px, 12px) rotate(26deg) }
    60%  { transform: translate(-10px, 26px) rotate(-6deg) }
    85%  { opacity: 1 }
    100% { transform: translate(8px, 40px) rotate(18deg); opacity: 0 }
  }
}
/* Admin's two views (teacher 9 Oct 14:25): Report · Seats & settings, a pill switch like the tabs */
.subtabs { display: inline-flex; align-self: flex-start; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-top: 12px }
.subtab { border: 0; background: transparent; color: var(--muted); font: 600 .9rem var(--f-body); padding: 8px 16px; border-radius: 999px; cursor: pointer; min-height: 38px; white-space: nowrap }
.subtab[aria-pressed="true"] { background: var(--ink); color: var(--bg) }
/* ---- Lịch dạy (teach.js, W-A53): money-free teaching desk ---- */
.td { display: grid; gap: 18px }
.td-top { display: grid; gap: 18px }
@media (min-width: 900px) { .td-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) } }
.td-today { display: grid; gap: 6px; margin-top: 8px }
.td-lesson { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface) }
.td-who { display: inline-flex; gap: 8px; align-items: center; min-width: 0 }
.td-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.td-pill { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--bg); color: var(--muted) }
.td-pill.done { background: var(--ok-soft); color: var(--ok) } .td-pill.off { background: var(--maple-soft); color: var(--maple) }
.td-pill.warn { background: var(--warn-soft); color: var(--warn) } .td-pill.now { background: var(--focus); color: var(--surface) }
.td-pill.soon { background: color-mix(in srgb, var(--focus) 14%, var(--surface)); color: var(--focus) }
.td-planner textarea { width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); color: var(--ink); font: inherit }
.td-proposal { border: 1px dashed var(--focus); border-radius: 10px; padding: 12px; display: grid; gap: 8px; background: color-mix(in srgb, var(--focus) 7%, var(--surface)) }
.td-proposal ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 3px }
.td-add { color: var(--ok) } .td-rem { color: var(--maple) } .td-chg { color: var(--focus) } .td-q { color: var(--warn); font-weight: 600; margin: 0 }
/* week grid: a horizontal time axis per day; scrolls sideways on a phone */
.td-week { --lane: 2.9rem; min-width: 760px; display: grid }   /* rem, so lanes grow with «Chữ to» (9 Oct) */
.td-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); border-top: 1px solid var(--line) }
.td-row.weekend { background: color-mix(in srgb, var(--bg) 60%, transparent) }
.td-row.today { background: color-mix(in srgb, var(--focus) 8%, transparent) } .td-row.today .td-lbl b { color: var(--focus) }
.td-head { border-top: 0 } .td-head .td-track { height: 22px }
.td-lbl { display: flex; flex-direction: column; justify-content: center; padding: 2px 6px; font-size: .8rem; line-height: 1.15; cursor: pointer }   /* tight, so the row is exactly one lesson high: blocks no longer float (9 Oct) */
.td-track { position: relative; height: calc(var(--lanes, 1) * var(--lane)) }
.td-hour { position: absolute; top: 2px; transform: translateX(-50%); font-size: .66rem; color: var(--muted) } .td-hour.odd { font-weight: 400 }   /* no fade: it failed contrast (2.3:1), 9 Oct */
.td-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: .6 }
.td-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--maple); z-index: 2 }
.td-blk, .td-busy { position: absolute; height: var(--lane); border: 0; border-radius: 6px; padding: 3px 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; overflow: hidden; line-height: 1.15; text-align: center; font: inherit ; line-height: 1.15}
.td-blk { background: var(--c); z-index: 1; cursor: pointer }
.td-blk.done { background: color-mix(in srgb, var(--c) 34%, #1b2220); color: #eef2f0 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, #1b2220) }   /* taught = deep, upcoming = bright, in light and dark alike (teacher 9 Oct: light was washed out) */
.td-blk.done .td-t::after { content: " ✓"; font-weight: 800 }   /* taught is marked, not only coloured */
.td-busy .td-t, .td-busy .td-n { background: var(--surface); color: var(--ink); padding: 0 6px; border-radius: 4px }
.td-blk.off { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, var(--surface)) 0 6px, var(--surface) 6px 12px); box-shadow: inset 0 0 0 1px var(--maple) } .td-blk.off .td-n { text-decoration: line-through }
.td-blk.now { box-shadow: inset 0 0 0 2px var(--focus) }
.td-busy { top: 0; bottom: 0; height: auto; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, var(--surface)) 0 8px, color-mix(in srgb, var(--c) 45%, var(--surface)) 8px 16px) }
.td-t { font-size: .68rem; font-weight: 600; opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums }
.td-n { font-size: .8rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
/* the week as a list on phones (10 Oct): same data as the grid, one day under another */
.td-agenda { display: none; gap: 10px } .td-taptip { display: none }
.td-ad { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line) }
.td-ad.today .td-adh b { color: var(--focus) }
.td-adh { display: flex; gap: 8px; align-items: center; font-size: .9rem }
.td-ai { display: grid; grid-template-columns: 4px auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer }
.td-ai .td-bar { align-self: stretch; border-radius: 2px; background: var(--c) }
.td-at { font-size: .82rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums }
.td-an { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.td-ai.done .td-bar { background: color-mix(in srgb, var(--c) 34%, #1b2220) }
.td-ai.off { opacity: .8 } .td-ai.off .td-an { text-decoration: line-through } .td-ai.off .td-bar { background: var(--maple) }
.td-ai.now { box-shadow: inset 0 0 0 2px var(--focus) }
.td-ai.busy { cursor: default; background: repeating-linear-gradient(135deg, var(--surface) 0 8px, color-mix(in srgb, var(--c) 18%, var(--surface)) 8px 16px) }
@media (max-width: 640px) {
  #td-root .tablewrap:has(> #tdWeek) { display: none }
  .td-agenda { display: grid } .td-dragtip { display: none } .td-taptip { display: inline }
  .td-ai { grid-template-columns: 4px minmax(0, 1fr) auto } .td-ai .td-at { grid-column: 2 } .td-ai .td-an { grid-column: 2 } .td-ai .td-pill { grid-column: 3; grid-row: 1 / span 2 } .td-ai .td-bar { grid-row: 1 / span 2 }
}
.td-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px } .td-legend span { display: inline-flex; gap: 6px; align-items: center }
.td-sw { width: 20px; height: 11px; border-radius: 3px; background: var(--c) } .td-sw.done { background: color-mix(in srgb, var(--c) 34%, #1b2220) }
.td-sw.off { background: repeating-linear-gradient(135deg, var(--maple-soft) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--maple) }
.td-sw.busy { background: repeating-linear-gradient(135deg, #ffcc99 0 3px, color-mix(in srgb, #ffcc99 50%, var(--surface)) 3px 6px) }
.td-missing { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); margin-top: 8px; font-size: .85rem }
.td-chip { font: inherit; font-size: .78rem; padding: 2px 8px; border-radius: 6px; border: 0; border-left: 3px solid var(--c); background: var(--surface); color: var(--ink); cursor: grab }
/* register */
.td-regrow { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line) }
@media (min-width: 900px) { .td-regrow { grid-template-columns: 160px minmax(0, 1fr) 150px; align-items: center } }
.td-cells { display: flex; flex-wrap: wrap; gap: 5px }
.td-rc { font: inherit; font-size: .78rem; min-width: 54px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; line-height: 1.1; font-variant-numeric: tabular-nums }
.td-rc small { display: block; font-size: .62rem; color: var(--muted) }
.td-rc.done { background: var(--ok-soft); border-color: var(--ok); color: var(--ok) }
.td-rc.off { background: var(--maple-soft); border-color: var(--maple); color: var(--maple); text-decoration: line-through }
.td-rc.today { box-shadow: 0 0 0 2px var(--focus) }
.td-paints { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 6px }
.td-paint { font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: grab; user-select: none; touch-action: manipulation; border: 1.5px solid }
.td-paint.off { background: var(--maple-soft); color: var(--maple); border-color: var(--maple) }
.td-paint.on { background: var(--ok-soft); color: var(--ok); border-color: var(--ok) }
.td-paint[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--focus); transform: scale(1.04) }
.td-armed .td-rc { touch-action: none; cursor: crosshair }
.td-rc.td-over, .td-rc.td-painted { box-shadow: 0 0 0 2px var(--focus); transform: scale(1.06) }
/* calendar + day panel */
.td-calgrid { display: grid; gap: 16px } @media (min-width: 900px) { .td-calgrid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) } }
.td-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.td-hd { font-size: .72rem; color: var(--muted); text-align: center; font-weight: 600 }
.td-cday { min-height: 58px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: var(--surface); cursor: pointer; display: grid; align-content: start; gap: 3px }
.td-cday.out { background: transparent; border-style: dashed } .td-cday.out .num { color: var(--muted) } .td-cday.out .td-dots { opacity: .5 }   /* was opacity .4: failed contrast, 9 Oct */ .td-cday.today { border-color: var(--focus) } .td-cday.sel { outline: 2px solid var(--focus) }
.td-dots { display: flex; flex-wrap: wrap; gap: 3px } .td-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c) }
.td-dots i.done { box-shadow: 0 0 0 1.5px var(--ok) } .td-dots i.off { opacity: .3 }
.td-daypanel { display: grid; gap: 8px; align-content: start }
.td-dayitem { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px }
/* classes */
.td-classes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) }
.td-cls { border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 12px 16px; background: var(--surface); display: grid; gap: 6px }
.td-cls h3 { margin: 0; font-size: 1rem; display: flex; gap: 8px; align-items: center }
.td-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .85rem; margin: 0 } .td-kv dt { color: var(--muted) } .td-kv dd { margin: 0 }
.td-seats summary { cursor: pointer; color: var(--focus) }
.td-seatpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 10px; margin-top: 6px }
.td-log { display: grid; gap: 4px; max-height: 240px; overflow: auto }
[draggable="true"] { cursor: grab } .td-dragging { opacity: .4 } .td-over { outline: 2px solid var(--focus) !important }
/* student: my own lessons only */
.lich-next { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--focus) 9%, var(--surface)); border-left: 4px solid var(--focus) }
.lich-next b { font-size: 1.1rem }
.lich-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px }
.lich-strip > div { border: 1px solid var(--line); border-radius: 8px; padding: 5px 2px; text-align: center; font-size: .72rem; min-height: 54px; display: grid; align-content: start; gap: 3px }
.lich-strip .d { color: var(--muted); font-weight: 600 } .lich-strip .today { border-color: var(--focus) } .lich-strip .today .d { color: var(--focus) }
.lich-strip .t { font-weight: 700; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--focus) 14%, var(--surface)); border-radius: 5px; padding: 1px 0 }
.lich-strip .t.off { text-decoration: line-through; color: var(--maple); background: var(--maple-soft) }
ul.lich-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px }
ul.lich-list li { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; padding: 4px 0; border-top: 1px solid var(--line) }
ul.lich-list li.off span:first-child { text-decoration: line-through; color: var(--muted) }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: .9rem; z-index: 20; max-width: calc(100% - 32px) }
.toast.bad { background: var(--maple); color: var(--on-maple) }
@media (prefers-reduced-motion: no-preference) { .toast { animation: up .2s ease-out } @keyframes up { from { transform: translate(-50%, 8px); opacity: 0 } } }

/* ---- display settings (teacher 9 Oct: "design for people with disability in mind"; FR 42 «Chữ to», A302) ----
   One SETTINGS button for everyone (a gear; was «Aa» until 10 Oct, teacher: "turn the Aa button into the setting button and
   put all the accessibility options in it"): theme, text size, and how motion and read-aloud behave; this device only. */
.bar-right { display: flex; align-items: center; gap: 8px; min-width: 0; position: relative }
.dispbtn { flex: none; display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .9rem var(--f-display); cursor: pointer }
.dispbtn[aria-expanded="true"] { border-color: var(--focus) }
.disp { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(19rem, calc(100vw - 32px)); box-shadow: 0 8px 28px rgba(0,0,0,.18) }
.disp h2 { font-size: 1rem }
.disp .eyebrow { margin-top: 2px }
.disp .seg button { flex: 1 1 0 }
/* Settings switches (teacher 10 Oct 16:48): each accessibility option is on/off; the state is the knob's side AND its colour */
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line) }
.sw-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.switch { flex: none; position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--line); background: var(--line); cursor: pointer; padding: 0 }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25) }
.switch[aria-checked="true"] { background: var(--focus); border-color: var(--focus) } .switch[aria-checked="true"] .knob { left: 22px }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="reduce"]) .switch .knob { transition: left .15s } }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
:root[data-contrast="more"] { --muted: var(--ink); --line: var(--ink) }
:root[data-contrast="more"] body { font-weight: 500 }
:root[data-say="off"] button.say { display: none !important }
/* Admin clock (teacher 10 Oct 16:48) */
.clock-now { font-size: 1rem; margin: 4px 0 6px } .clock-now b { font: 600 2rem/1 var(--f-display); margin-right: 6px }
.clock-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 6px } .clock-dl dt { color: var(--muted) } .clock-dl dd { margin: 0 } .clock-dl b { white-space: nowrap }
/* Schedule: lessons per student in the month */
.td-monthsum { margin-top: 14px; display: flex; flex-direction: column; gap: 8px }
.td-monthsum .tbl { overflow-x: auto }
.td-sum { border-collapse: collapse; width: 100%; font-size: .88rem } .td-sum th, .td-sum td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line) }
.td-sum th { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em } .td-sum .num { text-align: right; font-variant-numeric: tabular-nums }
:root[data-size="lg"] { font-size: 18px }
:root[data-size="lg"] body { font-size: 20px; line-height: 1.9 }
:root[data-size="lg"] .small, :root[data-size="lg"] .hint { font-size: .95rem }
@media (max-width: 480px) { .bar-in:has(.tabs:not([hidden])) .bar-right { width: 100%; justify-content: center } }
/* ---- maple leaf (teacher 9 Oct, FR 95): the logo's leaf, once at the top-right of the FIRST box of each
   column on every screen. Never in the background, never on labels or lists, never moving. ---- */
:root { --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50%202%20L56%2015%20L62%2011%20L59%2033%20L71%2021%20L74%2029%20L89%2025%20L84%2041%20L92%2045%20L70%2061%20L73%2068%20L53%2065%20L52%2092%20L47%2065%20L27%2068%20L30%2061%20L8%2045%20L16%2041%20L11%2025%20L26%2029%20L29%2021%20L41%2033%20L38%2011%20L44%2015%20L50%202%20Z'/%3E%3C/svg%3E"); --leaf-tint: var(--maple) }
.leafy, #app > .card:first-child:not(.rm-card), .home-grid > .col > .card:first-child, .aide-wide > .card:first-child,
.aide-wide > .a-side > .card:first-child, .td-top > .card { position: relative }
#app > .card:first-child:not(.rm-card)::after, .home-grid > .col > .card:first-child::after, #app:has(> .aide-wide, > .td)::before {
  content: ""; position: absolute; width: 30px; height: 30px; top: 14px; right: 14px; transform: rotate(12deg); pointer-events: none;
  background: var(--leaf-tint); -webkit-mask: var(--leaf) center / contain no-repeat; mask: var(--leaf) center / contain no-repeat }
#app > .card:first-child:not(.rm-card) > :first-child, .home-grid > .col > .card:first-child > :first-child, .aide-wide > .card:first-child > :first-child,
.aide-wide > .a-side > .card:first-child > :first-child, .td-top > .card > :first-child { padding-right: 40px }
/* staff pages: the leaf belongs to the PAGE, not a box: same spot on Week, Schedule and Admin (teacher 9 Oct) */
#app:has(> .aide-wide, > .td) { position: relative }
#app:has(> .aide-wide, > .td)::before { z-index: 2; right: 30px }
@media (min-width: 900px) { .aide-wide:not(:has(> .a-head)) > .a-side { grid-area: auto; grid-column: 2; grid-row: 1 / span 2 } }   /* Admin's right column started 16 px low */
/* Admin: track + lane diagram (teacher 9 Oct: "could be visually explained better") */
.lanes-fig { min-width: 560px } .lanes-fig svg { width: 100%; height: auto; display: block }
.lanes-fig text { font: 600 13px var(--f-body); fill: var(--ink) } .lanes-fig .sub { font-weight: 400; fill: var(--muted); font-size: 12px }
.lanes-fig .box { fill: var(--bg); stroke: var(--line) } .lanes-fig .a { stroke: var(--ink) } .lanes-fig .b { stroke: var(--focus) } .lanes-fig .c { stroke: var(--maple) }
.lanes-fig .ah-a { fill: var(--ink) } .lanes-fig .ah-b { fill: var(--focus) } .lanes-fig .ah-c { fill: var(--maple) }
.lanes-fig .lab-b { fill: var(--focus) } .lanes-fig .lab-c { fill: var(--maple) }
label.follow { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap }
table.aide td, table.aide th[scope=row] { vertical-align: middle }
.remind { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px } .remind h3 { font-size: .95rem }
.rm-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--line) }
ul.keyline { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: .88rem }




/* unfinished = a "dropped item" glow (teacher 9 Oct). Colour is never the only cue: a «Chưa xong» chip says it in words.
   Reduced motion: a still ring, no pulse. */
.todo { position: relative; box-shadow: 0 0 0 2px var(--loot), 0 0 14px 2px color-mix(in srgb, var(--loot) 55%, transparent); border-radius: 12px }
.hw-item.todo { padding-inline: 10px; margin-block: 6px; border-top-color: transparent }
.tick.todo { border-color: var(--loot) }
@media (prefers-reduced-motion: no-preference) {
  .todo { animation: loot 1.8s ease-in-out infinite }
  @keyframes loot { 0%, 100% { box-shadow: 0 0 0 2px var(--loot), 0 0 6px 0 color-mix(in srgb, var(--loot) 35%, transparent) }
                    50% { box-shadow: 0 0 0 2px var(--loot), 0 0 20px 5px color-mix(in srgb, var(--loot) 65%, transparent) } } }
.chip.todo-chip { background: color-mix(in srgb, var(--loot) 22%, transparent); color: var(--ink); border: 1px solid var(--loot) }
/* mục 4's reading as an expand */
details.fold { padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 10px }
details.fold > summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none }
details.fold > summary::-webkit-details-marker { display: none }
details.fold > summary::before { content: "▸"; color: var(--maple); transition: transform .15s }
details.fold[open] > summary::before { transform: rotate(90deg) }
details.fold > summary .fold-t { font: 600 1.02rem var(--f-display) }
/* the weekly report: questions that must be answered vs the optional part */
.q.req { border-left: 4px solid var(--loot); background: color-mix(in srgb, var(--loot) 9%, transparent); border-radius: 0 10px 10px 0; padding: 10px 12px }
.req-key { display: flex; align-items: center; gap: 8px; color: var(--muted) }
.req-dot { width: 14px; height: 14px; border-left: 4px solid var(--loot); background: color-mix(in srgb, var(--loot) 18%, transparent); border-radius: 0 3px 3px 0; flex: none }
summary.opt-sum { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 }
summary.opt-sum .opt-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--focus) }
/* read aloud + Vietnamese under each example */
.w-row { display: flex; align-items: center; gap: 6px; justify-content: space-between }
button.say { flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--focus); cursor: pointer; padding: 0 }
button.say:hover { border-color: var(--focus) }
.vi { display: block; font-size: .82rem; color: var(--muted); font-style: normal; font-weight: 400; border-left: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); padding-left: 8px; margin-top: 2px }
ul.gex li.pair .vi { grid-column: 1 / -1 }
/* Admin seats: one line per row */
table.aide td, table.aide th[scope=row] { vertical-align: middle }