/* ============================================================
   Sruti — one stylesheet, no framework.
   Tokens first; every component reads from them so light and
   dark stay in step.
   ============================================================ */

:root{
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F4F2EC;
  --ink:#1A1C20;
  --ink-2:#4E525A;
  --ink-3:#7B7F88;
  --line:#E3DFD7;
  --line-strong:#CFC9BD;
  --brass:#9A6A28;
  --brass-ink:#7A5320;
  --brass-soft:#F3E9D6;
  --peacock:#1B5E7E;
  --peacock-soft:#E2EFF4;
  --good:#2C6B4C;
  --good-soft:#E3F0E8;
  --warn:#8C6714;
  --warn-soft:#F6EDD6;
  --bad:#95382F;
  --bad-soft:#F7E5E2;
  --shadow:0 1px 2px rgba(26,28,32,.05), 0 10px 28px -20px rgba(26,28,32,.35);
  --radius:4px;

  --f-display:"Literata",Georgia,serif;
  --f-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --f-ml:"Noto Sans Malayalam","Manjari",var(--f-body);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14161A; --surface:#1C1F24; --surface-2:#22262C;
    --ink:#EAE8E3; --ink-2:#AFB3BA; --ink-3:#7F838C;
    --line:#2C3038; --line-strong:#3B4049;
    --brass:#D3A053; --brass-ink:#E4B871; --brass-soft:#2E2718;
    --peacock:#6DB4D2; --peacock-soft:#17303B;
    --good:#78C395; --good-soft:#182B21;
    --warn:#D9B45A; --warn-soft:#2C2515;
    --bad:#E2887C; --bad-soft:#2E1D1B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#14161A; --surface:#1C1F24; --surface-2:#22262C;
  --ink:#EAE8E3; --ink-2:#AFB3BA; --ink-3:#7F838C;
  --line:#2C3038; --line-strong:#3B4049;
  --brass:#D3A053; --brass-ink:#E4B871; --brass-soft:#2E2718;
  --peacock:#6DB4D2; --peacock-soft:#17303B;
  --good:#78C395; --good-soft:#182B21;
  --warn:#D9B45A; --warn-soft:#2C2515;
  --bad:#E2887C; --bad-soft:#2E1D1B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -20px rgba(0,0,0,.9);
}

/* ============================================================
   Palettes
   ------------------------------------------------------------
   Brass & Peacock is the default and lives in :root above. Each
   alternative overrides the same thirteen tokens and nothing
   else — no component knows a theme exists.

   Every palette needs three blocks, because "dark" has three
   states: the OS says dark and the user hasn't chosen (media
   query), and the user chose dark explicitly ([data-theme]).
   Generated from one table; edit that, not this.
   ============================================================ */

/* ---------- indigo ---------- */
:root[data-palette="indigo"]{
  --paper:#F6F7FA; --surface:#FFFFFF; --surface-2:#ECEEF4;
  --ink:#161822; --ink-2:#474C5C; --ink-3:#767C8D;
  --line:#DFE2EB; --line-strong:#C5C9D6;
  --brass:#33408C; --brass-ink:#2A3676; --brass-soft:#E5E8F6;
  --peacock:#9A5A2C; --peacock-soft:#F6EAE0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-palette="indigo"]{
    --paper:#111319; --surface:#181B23; --surface-2:#1F232D;
    --ink:#E8E9EF; --ink-2:#A9AEBE; --ink-3:#7B8091;
    --line:#262A35; --line-strong:#343947;
    --brass:#8FA0EA; --brass-ink:#A9B6F2; --brass-soft:#1B2038;
    --peacock:#DFA477; --peacock-soft:#2B1F16;
  }
}
:root[data-theme="dark"][data-palette="indigo"]{
  --paper:#111319; --surface:#181B23; --surface-2:#1F232D;
  --ink:#E8E9EF; --ink-2:#A9AEBE; --ink-3:#7B8091;
  --line:#262A35; --line-strong:#343947;
  --brass:#8FA0EA; --brass-ink:#A9B6F2; --brass-soft:#1B2038;
  --peacock:#DFA477; --peacock-soft:#2B1F16;
}

/* ---------- palm ---------- */
:root[data-palette="palm"]{
  --paper:#F7F5EE; --surface:#FFFFFF; --surface-2:#EFEBDF;
  --ink:#1B1D18; --ink-2:#4C5147; --ink-3:#7C8175;
  --line:#E1DCCC; --line-strong:#C8C2AE;
  --brass:#2F6146; --brass-ink:#27523B; --brass-soft:#E1EDE5;
  --peacock:#8A6A1F; --peacock-soft:#F2E9D2;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-palette="palm"]{
    --paper:#12150F; --surface:#1A1E17; --surface-2:#212619;
    --ink:#E9EAE2; --ink-2:#AFB4A6; --ink-3:#7F8578;
    --line:#2A3024; --line-strong:#3A4132;
    --brass:#79BE96; --brass-ink:#8FCEA9; --brass-soft:#1A2A1F;
    --peacock:#D5B15C; --peacock-soft:#2A2413;
  }
}
:root[data-theme="dark"][data-palette="palm"]{
  --paper:#12150F; --surface:#1A1E17; --surface-2:#212619;
  --ink:#E9EAE2; --ink-2:#AFB4A6; --ink-3:#7F8578;
  --line:#2A3024; --line-strong:#3A4132;
  --brass:#79BE96; --brass-ink:#8FCEA9; --brass-soft:#1A2A1F;
  --peacock:#D5B15C; --peacock-soft:#2A2413;
}

/* ---------- kumkum ---------- */
:root[data-palette="kumkum"]{
  --paper:#F3F4F6; --surface:#FFFFFF; --surface-2:#E8EAEE;
  --ink:#15181C; --ink-2:#464C55; --ink-3:#757C87;
  --line:#DDE0E6; --line-strong:#C3C8D1;
  --brass:#B03A2E; --brass-ink:#8F2E24; --brass-soft:#F8E5E2;
  --peacock:#3B5566; --peacock-soft:#E5EAEE;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-palette="kumkum"]{
    --paper:#101216; --surface:#171A1F; --surface-2:#1E222A;
    --ink:#E7E9ED; --ink-2:#A8AEB8; --ink-3:#7A818C;
    --line:#252A32; --line-strong:#333944;
    --brass:#E88478; --brass-ink:#F09E93; --brass-soft:#2C1A17;
    --peacock:#8FB2C6; --peacock-soft:#182530;
  }
}
:root[data-theme="dark"][data-palette="kumkum"]{
  --paper:#101216; --surface:#171A1F; --surface-2:#1E222A;
  --ink:#E7E9ED; --ink-2:#A8AEB8; --ink-3:#7A818C;
  --line:#252A32; --line-strong:#333944;
  --brass:#E88478; --brass-ink:#F09E93; --brass-soft:#2C1A17;
  --peacock:#8FB2C6; --peacock-soft:#182530;
}

/* ---------- night ---------- */
:root[data-palette="night"]{
  --paper:#F4F4F2; --surface:#FFFFFF; --surface-2:#EAEAE6;
  --ink:#17181A; --ink-2:#4A4D52; --ink-3:#787C82;
  --line:#DEDEDA; --line-strong:#C5C5C0;
  --brass:#A8681B; --brass-ink:#8A5514; --brass-soft:#F6EAD8;
  --peacock:#1F6E77; --peacock-soft:#E0EFF0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-palette="night"]{
    --paper:#0E0F12; --surface:#15171B; --surface-2:#1C1F25;
    --ink:#EDEAE4; --ink-2:#B0B4BC; --ink-3:#7E838C;
    --line:#232830; --line-strong:#323842;
    --brass:#E0A548; --brass-ink:#EFBA68; --brass-soft:#2B2213;
    --peacock:#63B7C4; --peacock-soft:#12292E;
  }
}
:root[data-theme="dark"][data-palette="night"]{
  --paper:#0E0F12; --surface:#15171B; --surface-2:#1C1F25;
  --ink:#EDEAE4; --ink-2:#B0B4BC; --ink-3:#7E838C;
  --line:#232830; --line-strong:#323842;
  --brass:#E0A548; --brass-ink:#EFBA68; --brass-soft:#2B2213;
  --peacock:#63B7C4; --peacock-soft:#12292E;
}

*{box-sizing:border-box}
/* The hidden attribute has to beat any display we set ourselves. The UA
   rule for [hidden] is display:none, but it loses to an author rule of
   equal specificity — .spoken-tag{display:block} was rendering tags the
   markup had explicitly hidden. One guard, so it can't happen again. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.ml{font-family:var(--f-ml);line-height:1.75;}

/* ---------- shell ---------- */
.topbar{
  position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1120px;margin:0 auto;padding:0 22px;height:58px;
  display:flex;align-items:center;gap:22px;
}
.brand{
  font-family:var(--f-display);font-weight:700;font-size:1.22rem;
  letter-spacing:-.015em;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:9px;
}
.brand-mark{
  flex:none;width:30px;height:30px;border-radius:5px;display:block;
  border:1px solid var(--line);background:var(--surface-2);
}
.nav{display:flex;gap:3px;margin-left:6px;flex:1;flex-wrap:wrap}
.nav a{
  padding:6px 11px;border-radius:3px;font-size:14px;font-weight:500;
  color:var(--ink-2);text-decoration:none;
}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--brass-soft);color:var(--brass-ink)}
.whoami{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-3)}
.whoami img{width:26px;height:26px;border-radius:50%;border:1px solid var(--line)}
.whoami form{margin:0}

main{max-width:1120px;margin:0 auto;padding:30px 22px 90px}
.narrow{max-width:760px}

/* ---------- headings ---------- */
.page-head{margin-bottom:24px}
.crumb{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;display:block;text-decoration:none;
}
a.crumb:hover{color:var(--brass-ink)}
h1{
  font-family:var(--f-display);font-weight:700;font-size:2rem;line-height:1.15;
  letter-spacing:-.02em;margin:0;text-wrap:balance;
}
h1 .sub-ml{display:block;font-size:1.15rem;font-weight:400;color:var(--ink-2);margin-top:4px}
h2{font-family:var(--f-display);font-weight:600;font-size:1.28rem;letter-spacing:-.01em;margin:0 0 2px}
h3{font-size:.98rem;font-weight:600;margin:0 0 2px}
.lede{color:var(--ink-3);font-size:14.5px;margin:6px 0 0;max-width:64ch}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin:34px 0 14px;flex-wrap:wrap;
}
.section-head:first-child{margin-top:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-body);font-size:14px;font-weight:600;line-height:1;
  padding:9px 15px;border-radius:3px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer;
  transition:background .13s,border-color .13s,color .13s;
}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--brass);border-color:var(--brass);color:#fff}
.btn-primary:hover{background:var(--brass-ink);border-color:var(--brass-ink)}
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary{color:#17130B}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-primary{color:#fff}}
.btn-sm{padding:6px 11px;font-size:13px}
.btn-quiet{border-color:transparent;background:transparent;color:var(--ink-3)}
.btn-quiet:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{border-color:transparent;background:transparent;color:var(--bad)}
.btn-danger:hover{background:var(--bad-soft)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- google button ---------- */
.google-btn{
  display:inline-flex;align-items:center;gap:11px;padding:12px 20px;
  border:1px solid var(--line-strong);border-radius:3px;background:var(--surface);
  color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;box-shadow:var(--shadow);
}
.google-btn:hover{background:var(--surface-2)}

/* ---------- cards & lists ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;
}
.stack{display:flex;flex-direction:column;gap:14px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}

.rows{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
}
.row{
  display:flex;align-items:center;gap:16px;padding:14px 18px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.row:last-child{border-bottom:none}
a.row:hover{background:var(--surface-2)}
.row-main{flex:1;min-width:0}
.row-title{font-weight:600;font-size:15px;color:var(--ink)}
.row-title .ml{font-weight:500;color:var(--ink-2);font-size:14.5px}
.row-meta{font-size:13px;color:var(--ink-3);margin-top:1px;display:flex;gap:12px;flex-wrap:wrap}
.row-meta .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12.5px}
.row-actions{display:flex;gap:6px;align-items:center;flex:none}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;border:1px solid var(--line);background:var(--surface-2)}
.avatar-fallback{
  display:grid;place-items:center;font-family:var(--f-display);font-weight:700;
  font-size:14px;color:var(--brass-ink);background:var(--brass-soft);
}

.empty{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:34px 26px;text-align:center;color:var(--ink-3);font-size:14.5px;
}
.empty strong{display:block;color:var(--ink);font-size:15.5px;font-weight:600;margin-bottom:5px}

/* ---------- pills ---------- */
.pill{
  display:inline-block;font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:2px;white-space:nowrap;
}
.p-good{background:var(--good-soft);color:var(--good)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-bad{background:var(--bad-soft);color:var(--bad)}
.p-info{background:var(--peacock-soft);color:var(--peacock)}
.p-brass{background:var(--brass-soft);color:var(--brass-ink)}

/* ---------- forms ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
label .opt{font-weight:400;color:var(--ink-3)}
/* Every text-ish control, listed explicitly. A type missing from here — tel
   and date were — falls back to the browser's own box: a different height and
   border sitting next to the styled ones, which is exactly what it looks like. */
input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=number],input[type=search],input[type=password],
input[type=date],input[type=time],input[type=datetime-local],input[type=month],
select,textarea{
  width:100%;font-family:inherit;font-size:14.5px;line-height:1.4;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:3px;
  padding:9px 11px;min-height:38px;
}
/* The native select is a different height from an input at the same padding,
   so it draws its own chevron instead. */
select{
  appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237B7F88' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
  text-overflow:ellipsis;
}
input[type=file]{
  width:100%;font-family:inherit;font-size:13.5px;color:var(--ink-2);
  padding:7px 0;
}
input[type=file]::file-selector-button{
  font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:3px;
  padding:6px 11px;margin-right:11px;cursor:pointer;
}
input[type=file]::file-selector-button:hover{background:var(--surface-2)}
/* Ticks and radios pick up the brass rather than the browser's blue. */
input[type=checkbox],input[type=radio]{accent-color:var(--brass)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:-1px;border-color:var(--brass)}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.75}
textarea{resize:vertical;min-height:78px;line-height:1.55}
.field{margin-bottom:14px}
.field-row{display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start}

/* A form whose fields wrap onto as many rows as they need, with the buttons
   set apart underneath rather than crowding the last field. */
.form-grid{display:grid;gap:2px 18px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));align-items:start}
.form-grid .field{margin-bottom:14px}
.form-actions{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:6px;padding-top:16px;border-top:1px solid var(--line);
}
.form-actions .hint{margin:0}
.hint{font-size:12.5px;color:var(--ink-3);margin-top:5px}

/* ============================================================
   Speaking a lesson note
   ------------------------------------------------------------
   Two boxes to one field: the Malayalam he said and the English
   a student abroad reads. The Malayalam one stays hidden until
   there is Malayalam in it, so typing a note by hand is still
   one box and one place to look.
   ============================================================ */
/* Microphone first, then the label. Baseline alignment was for two
   pieces of text; one of them is now a button, so centre them. */
.spoken-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.spoken-head label{margin:0;flex:1;min-width:0}
.spoken-ml{margin-bottom:8px}
.spoken-tag{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:3px;
}
.spoken-ml .spoken-tag{font-family:var(--f-ml);letter-spacing:0;font-size:11px;text-transform:none}
.spoken textarea.ml{font-family:var(--f-ml);line-height:1.75}

/* Carries the accent, because it is the primary way this field gets
   filled: the teacher does not type Malayalam and his phone cannot
   dictate it. A quiet grey pill on the far right read as a secondary
   option, which is backwards. */
.mic{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:var(--f-body);font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--brass);background:var(--brass-soft);color:var(--brass-ink);
  padding:7px 14px;border-radius:16px;
}
.mic:hover{background:var(--brass);color:var(--paper);border-color:var(--brass)}
.mic:hover .mic-dot{background:var(--paper)}
.mic:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.mic:disabled{opacity:.6;cursor:default}
.mic-dot{width:8px;height:8px;border-radius:50%;background:var(--brass-ink);flex:none}
[data-mic-state="recording"] .mic{border-color:var(--bad);color:var(--bad)}
[data-mic-state="recording"] .mic-dot{background:var(--bad);animation:micpulse 1.1s ease-in-out infinite}
[data-mic-state="working"] .mic-dot{background:var(--brass)}
@keyframes micpulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .mic-dot{animation:none!important} }

.mic-status{font-size:12.5px;color:var(--ink-3);margin:6px 0 0}
.mic-status.is-bad{color:var(--bad)}
.mic-status.is-ok{color:var(--good)}
/* Something came back, but not what was asked for. */
.mic-status.is-warn{color:var(--warn)}

/* Reading one back: his Malayalam, then the English under it. */
.said-en{margin:3px 0 0;font-size:.92em;color:var(--ink-3)}
.resume-text .ml{font-family:var(--f-ml);line-height:1.6;margin:0}
/* Standing in for a missing stopping note — his words, but quieter. */
.resume-text.is-fallback{color:var(--ink-3)}
.resume-text .said-en{font-family:var(--f-body);font-size:.85em;margin-top:6px}
.lesson-field .ml{font-family:var(--f-ml);line-height:1.7}

/* ---------- disclosure ---------- */
details.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
details.panel > summary{
  padding:13px 18px;cursor:pointer;font-weight:600;font-size:14.5px;
  list-style:none;display:flex;align-items:center;gap:9px;
}
details.panel > summary::-webkit-details-marker{display:none}
details.panel > summary::before{
  content:"+";font-family:var(--f-mono);color:var(--brass);font-size:15px;width:12px;
}
details.panel[open] > summary::before{content:"−"}
details.panel > summary:hover{background:var(--surface-2)}
.panel-body{padding:4px 18px 18px;border-top:1px solid var(--line)}

/* "Add a recording" — a panel, but the loudest one on the page, because it
   is the thing the teacher came to do. Shut by default: the recorder, the
   two tabs and the audience picker between them filled a screen of space
   above the takes, on every visit, whether or not anything was being
   recorded. The summary carries the heading so the closed state still reads
   as a section rather than as a stray button. */
/* Controls on a disclosure's summary line — the group reorder arrows.
   Same shape as the recording cards: they have to work while the section
   is shut, which is when you are actually sorting. */
.disc-actions{display:flex;gap:2px;align-items:center;flex:none;margin-left:8px}
.disc-actions button{
  font-family:var(--f-mono);padding:4px 8px;line-height:1;min-width:26px;
  justify-content:center;opacity:.55;
}
details.disc > summary:hover .disc-actions button,
.disc-actions button:focus-visible{opacity:1}
.disc-actions button[disabled]{opacity:.2}
@media (max-width:560px){ .disc-actions button{opacity:1} }

details.addrec{margin:30px 0 14px}
details.addrec > summary{padding:15px 18px;gap:10px;flex-wrap:wrap}
details.addrec > summary::before{font-size:17px}
.addrec-t{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink)}
.addrec-s{font-weight:400;font-size:13.5px;color:var(--ink-3)}
details.addrec[open] > summary{border-bottom:1px solid var(--line)}
details.addrec[open] .panel-body{border-top:none}
/* On a phone the subtitle drops under the heading rather than squeezing it. */
@media (max-width:560px){
  .addrec-s{flex-basis:100%;margin-left:22px}
}

/* ---------- collapsible sections ---------- *
   Plain <details>. disclose.js only remembers what you left open. */
details.disc{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
}
details.disc + details.disc{margin-top:10px}
details.disc > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:12px 16px;font-size:15px;font-weight:600;color:var(--ink);
}
details.disc > summary::-webkit-details-marker{display:none}
details.disc > summary:hover{background:var(--surface-2)}
details.disc[open] > summary{border-bottom:1px solid var(--line)}
.disc-mark{
  width:0;height:0;flex:none;margin-left:2px;
  border-left:5px solid var(--brass);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .12s ease;
}
/* Any <details> that shows a mark, not only .disc ones — the recording
   cards carry the mark without the class, and their chevron sat pointing
   right while the card was wide open. */
details[open] > summary .disc-mark{transform:rotate(90deg)}
.disc-title{flex:1;min-width:0}
.disc-meta{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap;
}
.disc-body{padding:14px 16px 16px}

.disc-all{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.disc-all .btn{white-space:nowrap}
.disc-all-note{font-size:12px;color:var(--ink-3)}

/* A group of songs reads as a heading, so it gets heading weight. */
details.disc-group > summary{font-family:var(--f-display);font-size:17px;font-weight:600}
details.disc-group .disc-body{padding:14px 14px 16px}

/* ---------- song page ---------- */
.rec{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  padding:16px 18px;
}
.rec + .rec{margin-top:12px}
.rec-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:11px;flex-wrap:wrap}
.rec-title{font-weight:600;font-size:15px}
.rec-meta{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.03em;display:flex;gap:11px;flex-wrap:wrap}
audio,video{width:100%;display:block;border-radius:3px}
video{background:#000;max-height:420px}

.controls{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
}
.ctrl-group{display:flex;align-items:center;gap:8px}
.ctrl-label{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.speeds{display:flex;gap:2px;background:var(--surface-2);border-radius:3px;padding:2px}
.speeds button{
  font-family:var(--f-mono);font-size:12px;font-weight:500;padding:4px 9px;
  border:none;background:transparent;color:var(--ink-2);border-radius:2px;cursor:pointer;
}
.speeds button:hover{color:var(--ink)}
.speeds button[aria-pressed="true"]{background:var(--brass);color:#fff}
:root[data-theme="dark"] .speeds button[aria-pressed="true"]{color:#17130B}
.loop-state{font-family:var(--f-mono);font-size:11.5px;color:var(--brass-ink);font-variant-numeric:tabular-nums}

/* ---------- notes ---------- */
.note{
  border-left:3px solid var(--peacock);background:var(--peacock-soft);
  padding:13px 16px;border-radius:0 3px 3px 0;
}
.note + .note{margin-top:10px}
.note-body{font-size:14.5px;color:var(--ink-2);white-space:pre-wrap;margin:0}
.note-body:has(+ .note-img){margin-bottom:10px}
.note-img{max-width:100%;border-radius:3px;border:1px solid var(--line);display:block;margin-top:10px}
.note-meta{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--peacock);margin-bottom:6px;display:flex;justify-content:space-between;gap:10px;align-items:center;
}

/* ---------- recorder ---------- */
.recorder{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:20px 22px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.rec-status{font-size:13.5px;color:var(--ink-3);margin-top:12px;min-height:20px}
.progress{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:12px;display:none}
.progress.on{display:block}
.progress-fill{height:100%;width:0;background:var(--brass);transition:width .2s}

.dropzone{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:28px;text-align:center;color:var(--ink-3);font-size:14.5px;cursor:pointer;
  background:var(--surface);
}
.dropzone.over{border-color:var(--brass);background:var(--brass-soft);color:var(--brass-ink)}
.dropzone strong{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}

.queue{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.qitem{
  display:flex;align-items:center;gap:12px;font-size:13.5px;
  border:1px solid var(--line);border-radius:3px;padding:9px 13px;background:var(--surface);
}
.qitem .qname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qitem .qsize{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs button{
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-3);
  background:none;border:none;border-bottom:2px solid transparent;
  padding:9px 14px;cursor:pointer;margin-bottom:-1px;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--brass-ink);border-bottom-color:var(--brass)}

/* ---------- misc ---------- */
.flash{
  padding:12px 16px;border-radius:3px;font-size:14px;margin-bottom:20px;
  border-left:3px solid var(--good);background:var(--good-soft);color:var(--good);
}
.flash.err{border-left-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.meter-wrap{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-3)}
.meter{flex:1;max-width:230px;height:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--brass)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:640px){
  main{padding:22px 16px 70px}
  /* Two rows on a phone: the name and your menu, then the sections in one
     line that scrolls sideways — instead of the sections wrapping into two
     ragged lines and pushing the menu onto a third. */
  .topbar-in{padding:8px 16px 0;height:auto;min-height:52px;flex-wrap:wrap;gap:6px 10px}
  .brand{font-size:1.08rem;min-height:40px}
  .whoami{order:2;margin-left:auto;min-height:40px}
  .nav{
    order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav:empty,div.nav:not(:has(a)){display:none}
  .nav a{flex:none;white-space:nowrap}
  .topbar-in:not(:has(.nav a)){padding-bottom:8px}
  h1{font-size:1.6rem}
  .row{gap:12px;padding:13px 14px;flex-wrap:wrap}
  /* A row with several buttons puts them on their own line under the text
     rather than squeezing the text into a column a word wide. */
  .row-main{min-width:min(100%,190px)}
  .row-actions{flex-wrap:wrap}
  .row-actions > form{flex-wrap:wrap}
  .whoami .who-name{display:none}
}
/* Fingers, not a mouse pointer: nothing tappable under about 34px. */
@media (pointer:coarse){
  .btn{min-height:40px}
  .btn.btn-sm{min-height:34px;padding:7px 12px}
  a.crumb{padding:7px 0;margin-bottom:4px}
  .nav a{padding:9px 12px}
  .disc-actions button{min-width:32px;min-height:32px;opacity:1}
}

/* ============================================================
   Lesson log
   The resume card is the most important thing on a student's
   page, so it gets the one strong border on the screen.
   ============================================================ */

.resume{
  border:1px solid var(--brass);border-left:4px solid var(--brass);
  background:var(--brass-soft);border-radius:var(--radius);
  padding:18px 22px;margin-bottom:6px;
}
.resume-eyebrow{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;
}
.resume-eyebrow .dotsep{opacity:.5}
.resume-text{
  font-family:var(--f-display);font-size:1.18rem;line-height:1.45;color:var(--ink);
  margin:0;text-wrap:pretty;
}
.resume-sub{font-size:14px;color:var(--ink-2);margin:10px 0 0}
.resume-sub b{font-weight:600;color:var(--ink)}
.resume-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chip{
  font-size:12.5px;padding:3px 9px;border-radius:11px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
}
.resume-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

.tally{
  display:inline-flex;gap:0;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--surface);
  max-width:100%;
}
.tally > div{padding:12px 20px;border-right:1px solid var(--line);min-width:108px}
.tally > div:last-child{border-right:none}
.tally .t-num{
  font-family:var(--f-display);font-size:1.5rem;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.tally .t-lab{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:2px;
}
.tally .ongoing .t-num{color:var(--brass-ink)}

.lesson{border-bottom:1px solid var(--line);padding:15px 18px}
.lesson:last-child{border-bottom:none}
.lesson.is-ongoing{background:var(--brass-soft)}
.lesson-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.lesson-date{font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums}
.lesson-dur{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.lesson-head .spacer{flex:1}
.lesson-field{margin-top:8px;font-size:14px;color:var(--ink-2)}
.lesson-field .fl{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:2px;
}
.lesson-field p{margin:0;white-space:pre-wrap}
.lesson-field.stop .fl{color:var(--brass-ink)}
.lesson-field.stop p{color:var(--ink);font-weight:500}
.lesson-edit{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-strong)}
.lesson-edit summary{
  cursor:pointer;font-size:12.5px;color:var(--ink-3);list-style:none;
}
.lesson-edit summary::-webkit-details-marker{display:none}
.lesson-edit summary:hover{color:var(--ink)}
.lesson-edit[open] summary{margin-bottom:12px}

.songpick{
  display:grid;gap:2px 14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  max-height:190px;overflow-y:auto;border:1px solid var(--line-strong);
  border-radius:3px;padding:10px 12px;background:var(--surface);
}
.songpick label{
  display:flex;align-items:center;gap:8px;margin:0;padding:3px 0;
  font-size:14px;font-weight:400;color:var(--ink-2);cursor:pointer;
}
.songpick input{width:auto;margin:0;flex:none}
.songpick label:hover{color:var(--ink)}

.statuspick{display:flex;gap:10px;flex-wrap:wrap}
.statuspick label{
  display:flex;align-items:flex-start;gap:9px;margin:0;font-weight:400;
  border:1px solid var(--line-strong);border-radius:3px;padding:10px 13px;
  cursor:pointer;flex:1;min-width:210px;background:var(--surface);
}
.statuspick label:has(input:checked){border-color:var(--brass);background:var(--brass-soft)}
.statuspick input{width:auto;margin:2px 0 0;flex:none}
.statuspick b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.statuspick span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}

/* ============================================================
   Search
   ============================================================ */
.searchbox{display:flex;gap:8px;margin-bottom:20px;max-width:520px}
.searchbox input{flex:1}

/* ============================================================
   Reordering recordings
   ============================================================ */
.reorder{display:flex;gap:2px}
.reorder form{margin:0}
.reorder button{
  font-family:var(--f-mono);padding:6px 9px;line-height:1;min-width:30px;justify-content:center;
}

/* ============================================================
   Schedule
   Two clocks side by side is the whole point of this screen, so
   the times get the visual weight and everything else recedes.
   ============================================================ */
.sched{display:flex;flex-direction:column;gap:22px}
/* overflow is visible on purpose: the Change panel hangs out of the
   bottom of this card, and clipping it is exactly the bug that hid it.
   The corners are therefore rounded on the pieces inside instead. */
.sched-day{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.sched-date{border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0}
.sched-items > .sched-row:last-child{border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px)}
.sched-day.is-today{border-color:var(--brass)}
.sched-date{
  display:flex;align-items:center;gap:10px;padding:10px 18px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.sched-day.is-today .sched-date{background:var(--brass-soft)}
.sd-day{
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);
}
.sched-items{display:flex;flex-direction:column}
.sched-row{
  display:flex;align-items:center;gap:14px;padding:13px 18px;
  border-bottom:1px solid var(--line);
  position:relative; /* the Change panel spans this row, not its button */
}
/* A row with its panel open has to paint above the rows below it, or their
   backgrounds and borders show through the panel's shadow. */
.sched-row:has(details.change[open]){z-index:31}
.sched-row:last-child{border-bottom:none}
.sched-row.is-skipped{opacity:.62}
.sched-row.is-skipped .sched-times{text-decoration:line-through}

.sched-who{flex:1;min-width:150px;display:flex;flex-wrap:wrap;align-items:baseline;gap:7px}
.sched-who a{font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none}
.sched-who a:hover{color:var(--brass-ink)}
.sched-loc{font-size:12.5px;color:var(--ink-3)}
.sched-loc::before{content:"· "}
.slot-label{
  font-size:11.5px;color:var(--peacock);background:var(--peacock-soft);
  padding:2px 7px;border-radius:10px;
}
.sched-reason{font-size:12.5px;color:var(--ink-3);font-style:italic}

.sched-times{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:14px;color:var(--ink-2);min-width:290px;
}
.sched-times .ist b,.sched-times .local b{
  font-family:var(--f-mono);font-size:14.5px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.sched-times .arrow{color:var(--ink-3)}
.zone{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-3);text-transform:uppercase;
}
.local-unknown{font-size:12.5px;color:var(--warn)}

.sched-actions{display:flex;align-items:center;gap:8px;flex:none}
.sched-actions .dur{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3)}
.sched-actions form{margin:0}

/* The Change panel.
 *
 * It hangs off the ROW, not off the little button, and spans the row's
 * full width. Anchoring it to the button made it a 330px column three
 * forms deep — 450px tall, against a day card 102px tall — and since
 * .sched-day clipped its overflow, all but the first few pixels were
 * simply cut off. Two fixes, and both are needed: the card no longer
 * clips (see .sched-day above), and the panel is now wide and short
 * instead of narrow and tall, so it fits under the row it belongs to.
 */
.change > summary{list-style:none;cursor:pointer}
.change > summary::-webkit-details-marker{display:none}
.change-body{
  position:absolute;left:0;right:0;top:calc(100% - 5px);z-index:30;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
  display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.change-body form{margin:0;min-width:0}
.change-body label{display:block}
.change-body input{margin-bottom:8px}
.move-row{display:flex;gap:8px}
/* A rule apiece when they stack, none when they sit side by side — a
   divider drawn for a column layout looks like a mistake in a stacked one. */
@media (max-width:719px){
  .change-body form + form{padding-top:20px;border-top:1px solid var(--line)}
  .change-body{gap:0}
}
@media (max-width:760px){
  .sched-row{flex-wrap:wrap}
  .sched-times{min-width:0;width:100%}
}
/* No position:static fallback on narrow screens any more. That existed
   because the panel used to hang off the little Change button and would
   run off the right edge of a phone; anchored left:0/right:0 to the row
   it is by definition as wide as the page and no wider. Left static, it
   sized itself inside .sched-actions and pushed the page sideways. */

/* ---------- slots ---------- */
.slot-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.zone-form{min-width:270px}
.zone-form label{margin-bottom:4px}
.zone-row{display:flex;gap:8px}
.zone-row select{flex:1}
.slot-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 0;border-top:1px solid var(--line);
  position:relative; /* the Edit panel spans this row, not its button */
}
/* A row with its panel open has to paint above the rows below it, or their
   backgrounds and borders show through the panel's shadow. */
.slot-row:has(details.change[open]){z-index:31}
.slot-when{flex:1;min-width:190px}
.slot-when b{font-size:14.5px}
.slot-time{display:block;font-family:var(--f-mono);font-size:12px;color:var(--ink-3);margin-top:1px}
.slot-local{font-size:13.5px;color:var(--ink-2);min-width:150px}
.slot-row form{margin:0}
.tzpick{margin-top:16px;max-width:400px}
.tzpick label{margin-bottom:4px}
.loc{color:var(--ink-3)}
.row.is-done .row-title{color:var(--ink-2)}
.row.is-done{background:linear-gradient(90deg,var(--good-soft) 0 3px,transparent 3px)}

/* ============================================================
   Song page
   ============================================================ */
.part-block{margin-bottom:22px}
.part-head{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-ink);padding-bottom:7px;margin-bottom:10px;
  border-bottom:1px solid var(--line-strong);display:flex;gap:9px;align-items:baseline;
}
.part-head .num{color:var(--ink-3);font-size:11px}
.part-tag{
  font-size:11.5px;color:var(--brass-ink);background:var(--brass-soft);
  padding:2px 8px;border-radius:10px;margin-left:7px;font-weight:500;
}
.rec-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* A part of the song, collapsible. Borderless, so the recordings inside
   keep being the cards. */
details.disc-part{border:none;background:transparent;margin-bottom:20px}
details.disc-part.disc-self{margin-top:26px}
details.disc-part + details.disc-part{margin-top:0}
details.disc-part > summary,
details.disc-part[open] > summary{
  padding:0 0 7px;border-bottom:1px solid var(--line-strong);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;color:var(--brass-ink);
}
details.disc-part > summary:hover{background:transparent;color:var(--ink)}
details.disc-part > summary .disc-meta{color:var(--ink-3)}
details.disc-part .disc-body{padding:12px 0 0}

/* One recording, collapsed to a line you can scan. */
details.rec{padding:0}
details.rec > summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:10px;
  padding:14px 18px;border-radius:var(--radius);
}
details.rec > summary::-webkit-details-marker{display:none}
details.rec > summary:hover{background:var(--surface-2)}
details.rec[open] > summary{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
details.rec > summary .disc-mark{margin-top:6px}
.rec-sum{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rec-sum-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.rec-sum-top .rec-title{font-weight:600;font-size:15px}
.rec-sum-desc{
  font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
details.rec[open] .rec-sum-desc{display:none}
.rec-body{padding:14px 18px 16px}

/* The move buttons ride on the title line, so you can reorder a list of
   takes without opening a single one. The form itself lives outside the
   <details> (a <form> can't be nested in a <summary>) and is reached by
   the buttons' form= attribute; it holds nothing visible. */
.mv-form{display:none}
.rec-order{
  flex:none;display:flex;gap:2px;align-items:center;align-self:flex-start;margin-top:2px;
}
.rec-order button{
  font-family:var(--f-mono);padding:5px 8px;line-height:1;min-width:28px;
  justify-content:center;opacity:.55;
}
details.rec > summary:hover .rec-order button,
.rec-order button:focus-visible{opacity:1}
.rec-order button[disabled]{opacity:.2}
@media (max-width:560px){
  .rec-order button{opacity:1}
}

/* An inline expansion, not a floating panel — the old popover was clipped
   by the list's own overflow and never appeared. */
.inline-edit{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.inline-edit > summary{
  cursor:pointer;font-size:13px;color:var(--ink-3);list-style:none;
  display:flex;align-items:center;gap:7px;
}
.inline-edit > summary::-webkit-details-marker{display:none}
.inline-edit > summary::before{content:"+";font-family:var(--f-mono);color:var(--brass)}
.inline-edit[open] > summary::before{content:"−"}
.inline-edit > summary:hover{color:var(--ink)}
.inline-edit-body{padding-top:14px}

/* ============================================================
   Week calendar
   ============================================================ */
.cal-week{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
/* overflow:hidden above keeps the grid's corners rounded, but it would also
   slice off a chip's cancel panel — or a day's add-class panel — the moment
   one opens, so it lifts, just for as long as one is. */
.cal-week:has(.cal-day details.change[open]){overflow:visible}
.cal-day{
  background:var(--surface);min-height:132px;padding:0;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;position:relative;
}
/* A day with any panel open — a chip's cancel, or its own add-class — has to
   paint above the days beside it, or their backgrounds show through. */
.cal-day:has(details.change[open]){z-index:33}
.cal-day:hover{background:var(--surface-2)}
.cal-day.is-today{background:var(--brass-soft)}
.cal-day.is-empty{background:var(--paper)}
/* Both the day header and each chip are links, so they need the underline and
   the browser's link blue taken off explicitly. */
a.cal-head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:8px 10px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
a.cal-head:hover .cal-num{color:var(--brass-ink)}
.cal-dow{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.cal-num{font-family:var(--f-display);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.cal-day.is-today .cal-num{color:var(--brass-ink)}
.cal-body{padding:8px;display:flex;flex-direction:column;gap:6px;flex:1}
.cal-chip-wrap{position:relative}
/* A chip with its cancel panel open has to paint above the chips below it
   and above neighbouring days, or their backgrounds show through. */
.cal-chip-wrap:has(details.change[open]){z-index:32}
.cal-chip{
  border-left:3px solid var(--peacock);background:var(--peacock-soft);
  border-radius:0 3px 3px 0;padding:5px 26px 5px 8px;font-size:12.5px;line-height:1.35;
  display:block;text-decoration:none;color:inherit;
}
a.cal-chip:hover{filter:brightness(.97);box-shadow:0 0 0 1px var(--line-strong)}
.cal-chip.is-skipped{border-left-color:var(--ink-3);background:var(--surface-2);text-decoration:line-through;opacity:.7}
.cal-chip.is-moved{border-left-color:var(--brass);background:var(--brass-soft)}
.cal-chip.is-missed{border-left-color:var(--bad);background:var(--bad-soft)}
.cal-time{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);display:block}
.cal-name{font-weight:600;color:var(--ink);display:block}
.cal-local{font-size:11px;color:var(--ink-3);display:block}
/* The zone label inside a calendar chip. Quieter than elsewhere: the
   column is narrow, and the name is there to remove a doubt rather than
   to be read every time. */
.cal-time .zone,
.cal-local .zone{font-size:9.5px;letter-spacing:.05em;opacity:.85}
.cal-none{color:var(--line-strong);text-align:center;padding-top:14px}

/* The quick cancel (×) / undo (↺) button riding the top-right corner of a
   chip, and the small panel the × opens. The chip's own right padding
   (above) leaves it room so it never sits over the chip's own text. */
.cal-x-btn{
  position:absolute;top:4px;right:4px;z-index:2;
  width:17px;height:17px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-3);font-size:12px;line-height:1;cursor:pointer;padding:0;margin:0;
}
.cal-x-btn:hover{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.cal-x-form{position:absolute;top:0;right:0;margin:0}
/* ---- The calendar's pop-ups: quick add, quick cancel ----
 *
 * One look for both. On a wide screen they hang off the thing that opened
 * them — opening rightwards from the first four days and leftwards from
 * the last three, so none runs off the edge of the grid. On a phone they
 * become a sheet from the bottom of the screen (see the media query
 * below), because a pop-up anchored in a 340px column is a pop-up you
 * have to pan around to fill in.
 */
.cal-pop{
  left:auto;right:0;top:calc(100% + 6px);width:292px;max-width:calc(100vw - 32px);
  display:block;padding:0;overflow:hidden;
  border-radius:10px;border-color:var(--line);
  box-shadow:0 2px 6px rgba(26,28,32,.06), 0 18px 40px -12px rgba(26,28,32,.32);
  text-align:left;cursor:auto;
}
.cal-day:nth-child(-n+4) .cal-pop{left:0;right:auto}
.cal-pop-head{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 12px 10px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);
}
.cal-pop-titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cal-pop-kicker{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.cal-pop-title{font-family:var(--f-display);font-size:1.02rem;font-weight:600;line-height:1.3;color:var(--ink)}
.cal-pop-sub{font-size:12.5px;color:var(--ink-2)}
.cal-pop-close{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid transparent;
  background:transparent;color:var(--ink-3);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;margin:-2px -2px 0 0;
}
.cal-pop-close:hover{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.cal-pop form{margin:0;padding:14px 16px 16px}
.cal-pop label{font-size:12px;margin-bottom:5px;display:block}
.cal-pop input,.cal-pop select{margin-bottom:12px;width:100%}
.cal-pop-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cal-pop-hint{font-size:12px;color:var(--ink-3);margin:-2px 0 14px;line-height:1.45}
.cal-pop-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:2px}
.cal-pop-actions .btn{min-width:84px;justify-content:center}
/* In a pop-up whose whole point is cancelling a class, that is the main
   button, so it gets a filled one rather than the quiet red text used for
   a Remove sitting among other controls. */
.cal-pop .btn-danger{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.cal-pop .btn-danger:hover{filter:brightness(.93);background:var(--bad)}

/* The "+ Add a class" button that opens it — quiet until it's wanted. */
.cal-add{margin-top:auto;position:relative}
.cal-add > summary{
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:11.5px;color:var(--ink-3);min-height:28px;
  border:1px dashed var(--line-strong);border-radius:6px;padding:4px 6px;
  list-style:none;cursor:pointer;transition:color .12s,border-color .12s,background .12s;
}
.cal-add > summary::-webkit-details-marker{display:none}
.cal-add > summary:hover,
.cal-add[open] > summary{color:var(--brass-ink);border-color:var(--brass);border-style:solid;background:var(--surface)}

/* An iPad held upright (810-834px) still gets the seven-day grid; only a
   phone-width screen stacks the days. */
@media (max-width:720px){
  .cal-week{grid-template-columns:1fr}
  .cal-day{min-height:0}
  /* Days stack on a phone, so the add button can take a proper tap. */
  .cal-add > summary{min-height:38px;font-size:13px}
  .cal-x-btn{width:28px;height:28px;font-size:15px;top:6px;right:6px}
  .cal-chip{padding-right:40px}

  /* The pop-ups become a sheet from the bottom of the screen. */
  .cal-pop,
  .cal-day:nth-child(-n+4) .cal-pop{
    position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;
    max-height:88vh;overflow-y:auto;z-index:4;
    border-radius:16px 16px 0 0;border-bottom:none;
    padding-bottom:env(safe-area-inset-bottom);
    animation:cal-sheet-up .18s ease-out;
  }
  .cal-pop-head{padding:16px 14px 12px 20px;position:sticky;top:0}
  .cal-pop-head::before{
    content:"";position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;
    border-radius:2px;background:var(--line-strong);
  }
  .cal-pop-title{font-size:1.15rem}
  .cal-pop form{padding:16px 20px 20px}
  .cal-pop label{font-size:13px}
  /* 16px or iOS zooms the page the moment a field is tapped. */
  .cal-pop input,.cal-pop select{font-size:16px;min-height:46px}
  .cal-pop-actions .btn{flex:1;min-height:46px;font-size:15px}
  /* The dimmed page behind the sheet. It is the summary's own ::after, so
     tapping it is tapping the summary — the details closes, no script. */
  .cal-x[open] > summary::after,
  .cal-add[open] > summary::after{
    content:"";position:fixed;inset:0;z-index:3;cursor:default;
    background:rgba(20,22,26,.42);animation:cal-fade .18s ease-out;
  }
  .cal-day:has(details.change[open]){z-index:45}
  body.has-pop{overflow:hidden}
  /* The sticky header would otherwise sit between the dimmed page and the
     day the sheet belongs to, half-covered. While a sheet is up the page
     cannot scroll anyway, so it simply stops being sticky. */
  body.has-pop .topbar{position:relative}
}
@media (min-width:721px) and (max-width:900px){
  .cal-body{padding:6px}
  .cal-chip{font-size:12px;padding:5px 22px 5px 6px}
  .cal-add > summary{font-size:11px;padding:4px 2px}
  .cal-pop{width:272px}
  /* A column here is ~100px: the "IST" after each time is what pushed it
     onto a second line, and the page heading already says Indian time. */
  .cal-time .zone{display:none}
}
@keyframes cal-sheet-up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes cal-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .cal-pop,.cal-x[open] > summary::after,.cal-add[open] > summary::after{animation:none}
}

/* ---------- one day ---------- */
.day-actions{
  display:flex;flex-direction:column;gap:10px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.day-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.day-form input[type=text]{flex:1;min-width:180px}
.day-label{font-size:13px;color:var(--ink-3)}

/* ============================================================
   Month calendar — a student's class history at a glance
   ============================================================ */
.monthcal{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:14px 16px}
.mc-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.mc-title{font-weight:600;font-size:14.5px}
.mc-key{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.mc-key span{display:flex;align-items:center;gap:5px}
.mc-key i{width:9px;height:9px;border-radius:2px;display:inline-block}
.k-past{background:var(--good)}
.k-missed{background:var(--bad)}
.k-skipped{background:var(--ink-3)}
.k-upcoming{background:var(--brass)}
.mc-dows{
  display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-3);text-align:center;
}
.mc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
/* Square, but only up to a point. On a wide screen an unbounded
   aspect-ratio:1 gave a month of 190px cells holding one dot each —
   a page of empty boxes. */
.mc-cell{
  aspect-ratio:1;min-height:40px;max-height:78px;
  border:1px solid var(--line);border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:12px;color:var(--ink-2);position:relative;
}
.mc-cell.is-blank{border-color:transparent}
.mc-cell.is-today{border-color:var(--brass);border-width:2px}
.mc-num{font-variant-numeric:tabular-nums}
.mc-dot{width:6px;height:6px;border-radius:50%;background:var(--brass)}
.mc-cell.is-past .mc-dot{background:var(--good)}
.mc-cell.is-past{background:var(--good-soft)}
.mc-cell.is-missed .mc-dot{background:var(--bad)}
.mc-cell.is-missed{background:var(--bad-soft)}
.mc-cell.is-skipped .mc-dot{background:var(--ink-3)}
.mc-cell.is-skipped{background:var(--surface-2)}
.mc-cell.is-upcoming{background:var(--brass-soft)}
a.mc-cell{text-decoration:none;color:var(--ink-2);cursor:pointer}
a.mc-cell:hover{border-color:var(--peacock);box-shadow:0 0 0 2px var(--peacock-soft)}

/* ============================================================
   Student list controls
   ============================================================ */
.listbar{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.listbar .searchbox{margin-bottom:0}
.showall label{
  display:flex;align-items:center;gap:8px;margin:0;
  font-size:13.5px;font-weight:400;color:var(--ink-2);cursor:pointer;
}
.showall input{width:auto;margin:0}
.showall .num{color:var(--ink-3)}
.sched-row.is-missed{background:var(--bad-soft)}
.sched-row.is-missed .sched-times{text-decoration:line-through;opacity:.75}

/* ============================================================
   Student tabs
   ============================================================ */
.student-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.sh-who{flex:1;min-width:180px}
.sh-who h1{font-size:1.7rem}
.stabs{
  display:flex;gap:2px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);margin-bottom:26px;
}
.stab{
  padding:9px 15px;font-size:14px;font-weight:600;color:var(--ink-3);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  display:flex;align-items:center;gap:7px;
}
.stab:hover{color:var(--ink)}
.stab.is-on{color:var(--brass-ink);border-bottom-color:var(--brass)}
.stab-n{
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  background:var(--surface-2);color:var(--ink-3);padding:1px 6px;border-radius:9px;
}
.stab.is-on .stab-n{background:var(--brass-soft);color:var(--brass-ink)}

/* ============================================================
   Today, at the top of the week
   ============================================================ */
.today-strip{
  border:1px solid var(--brass);border-radius:var(--radius);
  background:var(--brass-soft);padding:0;margin-bottom:22px;overflow:hidden;
}
.today-strip.is-quiet{border-color:var(--line);background:var(--surface)}
.today-head{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-ink);padding:10px 18px;border-bottom:1px solid var(--brass);
}
.today-strip.is-quiet .today-head{color:var(--ink-3);border-bottom-color:var(--line)}
.today-none{margin:0;padding:16px 18px;color:var(--ink-3);font-size:14px}
.today-row{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.today-row:last-child{border-bottom:none}
.today-row.is-off{opacity:.62}
.today-who{flex:1;min-width:140px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.today-who b{font-size:15px}
.today-time{font-family:var(--f-mono);font-size:14px;text-align:right}
.today-time b{font-weight:500}
.today-local{display:block;font-size:11.5px;color:var(--ink-3)}

/* ============================================================
   One class
   ============================================================ */
.class-head{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.class-who{flex:1;min-width:190px}
.class-who h1{font-size:1.8rem}
.class-when{text-align:right;min-width:150px}
.cw-line{font-family:var(--f-mono);font-size:1.15rem;font-variant-numeric:tabular-nums}
.cw-line b{font-weight:500}
.cw-local{font-size:.95rem;color:var(--ink-2);margin-top:2px}
.cw-meta{font-size:12.5px;color:var(--ink-3);margin-top:5px}
@media (max-width:640px){
  .class-when{text-align:left;width:100%}
}

/* ============================================================
   Descriptions
   ============================================================ */
.rec-desc{
  margin:0 0 11px;font-size:14px;color:var(--ink-2);line-height:1.55;
  white-space:pre-wrap;max-width:68ch;
}
.note-title{margin:0 0 4px;font-weight:600;font-size:14.5px;color:var(--ink)}

/* ============================================================
   Who a recording or note is for
   ============================================================ */
.aud-choice{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.aud-choice label{
  display:flex;align-items:center;gap:9px;margin:0;font-weight:400;
  border:1px solid var(--line-strong);border-radius:3px;padding:9px 13px;
  cursor:pointer;flex:1;min-width:200px;background:var(--surface);
}
.aud-choice label:has(input:checked){border-color:var(--brass);background:var(--brass-soft)}
.aud-choice input{width:auto;margin:0;flex:none}
.aud-choice b{font-size:13.5px;font-weight:600;color:var(--ink)}

.aud-who{
  display:grid;gap:2px 14px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  max-height:180px;overflow-y:auto;border:1px solid var(--line-strong);
  border-radius:3px;padding:10px 12px;background:var(--surface);margin-bottom:10px;
}
.aud-who label{
  display:flex;align-items:center;gap:8px;margin:0;padding:3px 0;
  font-size:14px;font-weight:400;color:var(--ink-2);cursor:pointer;
}
.aud-who label:hover{color:var(--ink)}
.aud-who input{width:auto;margin:0;flex:none}
.audience .btn-row{margin-top:0;align-items:center;gap:12px}

/* ============================================================
   Notes that belong to a recording
   ============================================================ */
.rec-notes{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rec-notes-head{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px;display:flex;gap:8px;align-items:baseline;
}
.rec-notes-head .num{color:var(--brass-ink)}
.note-tools{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.note-tools .inline-edit{margin-top:0;border-top:none;padding-top:0}
.rec-tools{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.rec-tools .inline-edit{margin-top:0;border-top:none;padding-top:0;flex:1;min-width:230px}
/* An open editor gets the whole width rather than half of it. */
.rec-tools .inline-edit[open]{flex-basis:100%}
.note-tools .inline-edit[open]{flex-basis:100%}
.note-count{
  font-family:var(--f-mono);font-size:11px;color:var(--ink-3);letter-spacing:.03em;
}
.req{color:var(--brass-ink);font-weight:500;font-size:12px}
input.needs-value{border-color:var(--bad);background:var(--bad-soft)}

/* A class kept on a past week for someone who has since paused or finished. */
.cal-chip.is-former{opacity:.72}
.cal-former{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--warn);display:block;
}

/* A WhatsApp number that opens the chat. */
a.wa{color:var(--good);text-decoration:none;font-weight:500}
a.wa:hover{text-decoration:underline}

/* Saving a note: the words as a text file, the notation as an image. */
.note-dl{
  font-size:13px;color:var(--peacock);text-decoration:none;font-weight:500;
  display:inline-flex;align-items:center;gap:5px;
}
.note-dl::before{content:"↓";font-family:var(--f-mono);font-size:12px}
.note-dl:hover{text-decoration:underline}

/* ============================================================
   A recording the student hasn't been given
   ============================================================ */
.rec.is-locked{
  border-style:dashed;background:var(--surface-2);padding:14px 18px;
}
.rec.is-locked + .rec.is-locked{margin-top:10px}
.rec.is-locked .rec-title{color:var(--ink-2)}
.rec.is-locked .rec-desc{color:var(--ink-3)}
.rec.is-locked .lock{font-size:13px;filter:grayscale(1);opacity:.75}
.locked-foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;
}
.locked-foot form{margin:0}
.locked-note{font-size:13px;color:var(--ink-3)}

/* ============================================================
   Each person's own colours
   ============================================================ */
.themepick{position:relative;flex:none}
.themepick > summary{
  list-style:none;cursor:pointer;display:grid;place-items:center;
  width:30px;height:30px;border:1px solid var(--line-strong);border-radius:50%;
  background:var(--surface);
}
.themepick > summary::-webkit-details-marker{display:none}
.themepick > summary:hover{border-color:var(--brass)}
.themepick > summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.tp-dot{width:13px;height:13px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.tp-menu{
  position:absolute;right:0;top:38px;z-index:60;min-width:212px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:6px;
}
.tp-h{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:8px 9px 5px;
}
.tp-opt{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  font-family:var(--f-body);font-size:13.5px;font-weight:500;color:var(--ink);
  background:none;border:0;border-radius:3px;padding:7px 9px;cursor:pointer;
}
.tp-opt:hover{background:var(--surface-2)}
.tp-opt.is-on{background:var(--brass-soft);color:var(--brass-ink);font-weight:600}
.tp-opt:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
@media (max-width:520px){
  .tp-menu{position:fixed;right:10px;left:10px;top:56px;min-width:0}
}

/* An admin inside someone else's practice. Deliberately loud and
   deliberately sticky: the one mistake this prevents is changing a
   teacher's data while believing you are in your own. */
.visiting{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 16px; font-size:13px; font-weight:600;
  background:var(--brass-700,#7a5420); color:#fff;
  border-bottom:1px solid rgba(0,0,0,.2);
}
.visiting .btn{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.35) }
.visiting .btn:hover{ background:rgba(255,255,255,.28) }
@media (max-width:560px){ .visiting{ flex-direction:column; align-items:stretch; text-align:center } }
.row.is-dim{ opacity:.55 }
.crumb{ margin:0 0 10px; font-size:13px }
.crumb a,.row-title > a{color:inherit;text-decoration:none}
.crumb a:hover,.row-title > a:hover{color:var(--brass-ink)}

/* ------------------------------------------------------------------
   Which hat?

   One person can be the admin, a teacher in their own practice and a
   student in somebody else's, all at once. None of those is more true
   than the others, so the chooser gives them equal weight rather than
   promoting one and hiding the rest behind a menu.
   ------------------------------------------------------------------ */
.hat-list{display:grid;gap:12px}
.hat-form{margin:0}
.hat{
  display:grid;gap:3px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);padding:15px 17px;cursor:pointer;
  font-family:var(--f-body);color:var(--ink);
  transition:border-color .12s,background .12s;
}
.hat:hover{border-color:var(--brass);background:var(--surface-2)}
.hat:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.hat.is-now{border-color:var(--brass);background:var(--brass-soft)}
.hat-role{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.hat.is-now .hat-role{color:var(--brass-ink)}
.hat-name{font-family:var(--f-display);font-size:1.25rem;font-weight:600;line-height:1.25}
.hat-name .sub-ml{display:block;font-size:1rem;font-weight:400;color:var(--ink-2);margin-top:2px}
.hat-what{font-size:13.5px;color:var(--ink-2)}
.hat-now{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brass-ink);margin-top:4px;
}
/* The menu row that leads here. It is an anchor rather than a button,
   so it needs the text-decoration reset that .tp-opt never needed. */
.tp-link{text-decoration:none;display:block}

/* ------------------------------------------------------------------
   The student's own header.

   Their name is not news to them, so it is set quietly and the space
   goes to the one thing worth knowing on every screen: when they are
   next on, on both clocks. A student in Perth reading "7:00 pm" cannot
   tell whose evening that is, and the cost of guessing wrong is missing
   the class.
   ------------------------------------------------------------------ */
.me-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:4px 0 18px;
}
.me-who h1{margin:0;font-size:1.9rem;line-height:1.15}
.me-who .lede{margin:2px 0 0;font-size:13.5px}

.me-next{
  display:grid;grid-template-columns:auto auto;gap:1px 14px;align-items:baseline;
  background:var(--surface);border:1px solid var(--line-strong);
  border-left:3px solid var(--peacock);border-radius:0 var(--radius) var(--radius) 0;
  padding:10px 16px;min-width:230px;
}
.me-next-lab{
  grid-column:1/-1;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.me-next-when{font-family:var(--f-display);font-size:1.05rem;font-weight:600;color:var(--ink)}
.me-next-in{
  justify-self:end;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--peacock);
}
.me-next-time{font-size:14px;font-weight:600;color:var(--ink)}
.me-next-ist{justify-self:end;font-size:12px;color:var(--ink-3)}
.me-next.is-none{border-left-color:var(--line-strong)}
.me-next-none{grid-column:1/-1;font-size:13.5px;color:var(--ink-3)}

@media (max-width:620px){
  .me-head{align-items:stretch}
  .me-next{width:100%}
  .me-who h1{font-size:1.55rem}
}

/* A section heading's explanatory line should not push the action
   button off to the horizon. */
.section-head .lede{max-width:56ch}



/* ------------------------------------------------------------------
   Started, and finished.

   Two dates sitting under the song title where they can be read in one
   glance and, for the teacher, corrected in place — the start date is
   right by default only when the song was assigned on the day it was
   actually begun.
   ------------------------------------------------------------------ */
.progress-strip{
  display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  margin:-4px 0 20px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--brass);border-radius:0 var(--radius) var(--radius) 0;
}
.ps-item{display:flex;flex-direction:column;gap:3px;margin:0}
.ps-lab{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
}
.ps-item b{font-size:14.5px;font-weight:600}
.progress-strip input[type="date"]{padding:5px 8px;font-size:13.5px}
.ps-hint{flex:1;min-width:180px;font-size:12px;color:var(--ink-3);text-align:right}
@media (max-width:620px){
  .ps-hint{text-align:left}
}

/* Newer / older, at the end of a page of lessons. */
.pager{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--line);
}
.pager-at{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.btn.is-off{opacity:.4;cursor:default}

/* Placing somebody who signed in and belongs nowhere.

   The admin column is narrow and a practice name is long, so the two
   selects and the button get their own line under the person rather
   than being squeezed into what is left beside them — which truncated
   the practice name, which is the one thing you must read before you
   press the button. */
.place-row{flex-wrap:wrap}
.place-row .row-actions{flex:1 0 100%;justify-content:flex-start;gap:10px;margin-top:4px}
.place-form{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.place-form select{
  /* The global rule is width:100%, which is right in a stacked form and
     wrong on a row of controls — it made each select take the whole
     line and stack them three deep. */
  width:auto;min-width:150px;max-width:230px;
  padding:5px 26px 5px 9px;font-size:13px;min-height:0;
}
.place-row .btn{white-space:nowrap}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   Whose turn is it? — the profiles behind one sign-in
   ============================================================ */
a.who-name{color:inherit;text-decoration:none;border-bottom:1px dotted transparent}
a.who-name:hover{border-bottom-color:var(--ink-3)}
.prof-page{max-width:640px;margin:6vh auto 0;text-align:center}
.prof-page .lede{margin:12px auto 28px;max-width:48ch}
.prof-list{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  text-align:left;
}
.prof-form{margin:0}
.prof{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:22px 16px 18px;text-align:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  font:inherit;color:inherit;box-shadow:var(--shadow);
  transition:border-color .13s,transform .13s,box-shadow .13s;
}
.prof:hover{border-color:var(--brass);transform:translateY(-1px)}
.prof:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.prof.is-now{border-color:var(--brass);background:var(--brass-soft)}
.prof .avatar{width:64px;height:64px;font-size:26px;margin-bottom:4px}
.prof-name{font-family:var(--f-display);font-size:1.15rem;font-weight:600;line-height:1.25}
.prof-where{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.prof-now{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-ink);margin-top:2px;
}
.prof-add{
  margin:22px auto 0;max-width:460px;text-align:left;
  border:1px dashed var(--line-strong);border-radius:12px;background:var(--surface);
}
.prof-add[open]{border-style:solid}
.prof-add > summary{
  list-style:none;cursor:pointer;padding:14px 18px;font-weight:600;font-size:14px;color:var(--brass-ink);
}
.prof-add > summary::-webkit-details-marker{display:none}
.prof-add-form{padding:0 18px 16px;margin:0}
.prof-add-row{display:flex;gap:8px}
.prof-add-row input{flex:1}
.prof-add .hint{margin:10px 0 0}
.prof-foot{margin-top:26px;font-size:13px;color:var(--ink-3)}
@media (max-width:520px){
  .prof-page{margin-top:3vh}
  .prof-list{grid-template-columns:1fr 1fr;gap:10px}
  .prof{padding:18px 10px 14px}
  .prof .avatar{width:54px;height:54px;font-size:22px}
  .prof-add-row input{font-size:16px}
}

/* "Who do you mean?" — one address, several people */
.who-page{max-width:560px;margin:4vh auto 0}
.who-page .lede{margin:10px 0 22px}
.who-list{display:grid;gap:10px;margin:0}
.who-opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  font:inherit;color:inherit;box-shadow:var(--shadow);transition:border-color .13s;
}
.who-opt:hover{border-color:var(--brass)}
.who-opt .avatar{width:42px;height:42px;font-size:17px}
.who-opt-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.who-opt-text b{font-size:15.5px}
.who-opt-text span{font-size:13px;color:var(--ink-3)}
.who-opt.is-new{border-style:dashed}

/* ============================================================
   Phones — overrides that must come after the rules they override
   (the section tabs and today's strip are defined further up than the
   general phone block, so theirs would otherwise win).
   ============================================================ */
@media (max-width:640px){
  /* The section tabs scroll sideways too, rather than wrapping. */
  .stabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .stabs::-webkit-scrollbar{display:none}
  .stab{flex:none;white-space:nowrap}
  /* Today's classes: the name on one line, the time and the button under it. */
  .today-row{flex-wrap:wrap;gap:8px 12px;padding:12px 14px}
  .today-who{flex:1 1 calc(100% - 48px);min-width:0}
  .today-time{flex:1;text-align:left;margin-left:46px}
}

/* ============================================================
   Touch screens — after everything they adjust, so they win
   ============================================================ */
@media (pointer:coarse){
  /* The playback speeds, the little "Edit this …" openers under a lesson or
     a recording, and the calendar's cancel button on an iPad-width grid. */
  .speeds button{min-height:34px;min-width:40px}
  .inline-edit > summary,
  .lesson-edit > summary{min-height:36px;align-items:center}
  .lesson-edit > summary{display:flex}
  /* A tick box is a small thing to hit with a thumb. Its label is the big
     target, but the box itself should not be a pinprick either. */
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
}
/* An iPad's seven-day grid: phones already have bigger ones (above). */
@media (pointer:coarse) and (min-width:721px){
  .cal-x-btn{width:24px;height:24px;font-size:13px;top:3px;right:3px}
  .cal-chip{padding-right:28px}
  .cal-add > summary{min-height:34px}
}

/* The admin's error list */
.err-ref{font-family:var(--f-mono);font-size:13px;color:var(--bad);margin-right:8px}
.err-path{font-family:var(--f-mono);font-size:13px;color:var(--ink-2);word-break:break-all}
.err-msg{margin-top:6px;font-size:14px;color:var(--ink);word-break:break-word}
.err-stack summary{cursor:pointer;font-size:12.5px;color:var(--ink-3);margin-top:6px}
.err-stack pre{white-space:pre-wrap;word-break:break-all;font-size:11.5px;background:var(--surface-2);padding:10px;border-radius:4px;max-height:320px;overflow:auto}

/* Catalogue helpers */
.cat-tools{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:flex-start;margin-top:4px}
.cat-tools .inline-edit{margin-top:8px;border-top:none;padding-top:0}
.cat-tools .inline-edit[open]{flex:1 1 100%}
.cat-row .row-title a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-strong)}
.cat-row .row-title a:hover{border-bottom-color:var(--brass)}
.cat-del > summary::before{content:"×"}
.cat-del[open] > summary::before{content:"−"}
.cat-group-del{margin-top:12px}
.cat-group-del .inline-edit{border-top:none;margin-top:0;padding-top:0}
.cat-tools .pill,.cat-group-del .pill{margin-top:10px}
.inline-form{display:inline;margin:0 0 0 6px}
.del-reason{font-size:13.5px;color:var(--ink-2);font-style:italic;margin-top:4px}
.p-bad-text{color:var(--bad)}
.sh-pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* A helper's view of who is learning one song (/me/catalogue/song/:id). */
/* Sits among the summaries beside it ("+ Edit details") and matches them. */
.cat-tools a.cat-who{margin-top:8px;font-size:13px;color:var(--ink-3);text-decoration:none;
  display:flex;align-items:center;gap:7px}
.cat-tools a.cat-who::before{content:"→";font-family:var(--f-mono);color:var(--brass)}
.cat-tools a.cat-who:hover{color:var(--ink)}
@media (pointer:coarse){.cat-tools a.cat-who{min-height:36px}}
.sa-card{margin:6px 0 26px}
.sa-card h3{margin:0 0 12px}
.sa-me{margin:0 0 14px}
.sa-pick label{display:block;margin-bottom:6px}
.sa-pick-row{display:flex;gap:10px;align-items:center}
.sa-pick-row select{flex:1;min-width:0}
.sa-card .hint{margin:12px 0 0}
.sa-n{font-weight:400;color:var(--ink-3);font-size:.8em;margin-left:4px}
.sa-row .row-actions form{margin:0}
@media (max-width:520px){
  .sa-pick-row{flex-direction:column;align-items:stretch}
  .sa-row{gap:10px;padding:12px 14px;flex-wrap:nowrap}
  .sa-row .row-main{min-width:0}
  .sa-row .row-actions{flex:none}
  .sa-row .row-actions .btn{padding-left:8px;padding-right:8px}
}

/* ============================================================
   The recorder — one big button (views/recorder.ts, recorder.js)
   Red for recording whatever the palette: it is the one colour
   everybody already reads as "this is recording".
   ============================================================ */
.recorder.rx,.rx-edit-host{--rx-red:#D93025;--rx-red-soft:#FBE9E7}
:root[data-theme="dark"] .recorder.rx,:root[data-theme="dark"] .rx-edit-host{--rx-red:#F0584B;--rx-red-soft:#3A1C19}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .recorder.rx,:root:not([data-theme="light"]) .rx-edit-host{--rx-red:#F0584B;--rx-red-soft:#3A1C19}
}
.recorder.rx{border-radius:10px;padding:0;overflow:hidden}
.rx-stage{padding:22px 22px 20px;text-align:center}
.rx-top{display:flex;justify-content:center;min-height:38px;margin-bottom:14px}
.rx-kind{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:3px;background:var(--surface-2)}
.rx-kind label{margin:0;cursor:pointer}
.rx-kind input{position:absolute;opacity:0;width:1px;height:1px}
.rx-kind span{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-3);border-radius:999px;padding:6px 14px}
.rx-kind svg{width:16px;height:16px}
.rx-kind input:checked + span{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.rx-kind input:focus-visible + span{outline:2px solid var(--brass);outline-offset:1px}
.rx-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rx-red);background:var(--rx-red-soft);border-radius:999px;padding:5px 11px;align-self:center}
.rx-live i{width:8px;height:8px;border-radius:50%;background:var(--rx-red);animation:pulse 1.4s ease-in-out infinite}
.rx-live.paused i{animation:none;opacity:.45}
.rx-cam{display:block;width:100%;max-width:420px;aspect-ratio:16/9;object-fit:cover;margin:0 auto 14px;border-radius:8px;background:#000;transform:scaleX(-1)}
.rx-time{font-family:var(--f-mono);font-size:2.6rem;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.rx-time small{font-size:.42em;color:var(--ink-3);font-weight:400;margin-left:6px}
.rx-wave{display:block;width:100%;max-width:720px;height:64px;margin:16px auto 18px}
.rx-ctrls{display:flex;align-items:center;justify-content:center;gap:34px}
.rx-big{width:84px;height:84px;border-radius:50%;border:4px solid var(--surface);padding:0;cursor:pointer;
  background:var(--rx-red);box-shadow:0 0 0 2px var(--rx-red),0 6px 18px rgba(217,48,37,.28);display:grid;place-items:center;
  transition:transform .12s ease,background .15s ease}
.rx-big:active{transform:scale(.95)}
.rx-big:focus-visible{outline:3px solid var(--brass);outline-offset:4px}
.rx-big span{display:block;width:0;height:0;border-radius:6px;background:var(--rx-red);transition:width .15s ease,height .15s ease}
.rx-big.stop{background:var(--surface);box-shadow:0 0 0 3px var(--rx-red),0 6px 18px rgba(217,48,37,.22)}
.rx-big.stop span{width:30px;height:30px}
.rx-big[disabled]{opacity:.5;cursor:progress}
.rx-side{display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;font-size:12.5px;color:var(--ink-3);font-weight:600;
  background:none;border:0;cursor:pointer;padding:0;min-width:56px}
.rx-side[hidden]{display:flex;visibility:hidden}
.rx-c{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.rx-c svg{width:18px;height:18px}
.rx-side:hover .rx-c{border-color:var(--ink-3);color:var(--ink)}
.rx-side:focus-visible .rx-c{outline:2px solid var(--brass);outline-offset:2px}
.rx-label{margin-top:12px;font-weight:600;font-size:14.5px}
.rx-hint{margin:4px auto 0;max-width:520px;min-height:20px}

/* ---------- after Stop: name, save ---------- */
.rx-done{padding:20px 22px;border-top:1px solid var(--line)}
.rx-stage[hidden] + .rx-done{border-top:0}
.rx-done .rx-fields{margin-top:14px;padding-top:0;border-top:0}
/* ---------- Edit audio: cutting parts out of a saved recording ---------- */
.rx-edit-host{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.rx-edit-host[hidden]{display:none}
.rx-edit-actions{margin-top:16px}
.rx-edit-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:14px}
.rx-edit-head h3{margin:0;font-size:16px}
.rx-edit-head .muted{font-size:13px;color:var(--ink-3);max-width:560px}
.rx-box{position:relative;height:110px;border-radius:8px;background:var(--surface-2);margin-top:48px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.rx-box:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.rx-box canvas{position:absolute;left:0;top:10px;width:100%;height:90px}
.rx-segs{position:absolute;inset:0;border-radius:8px;overflow:hidden}
.rx-seg{position:absolute;top:0;bottom:0}
.rx-seg + .rx-seg{border-left:2px solid var(--surface)}
.rx-seg.cut{background:repeating-linear-gradient(135deg,rgba(217,48,37,.13) 0 8px,rgba(217,48,37,.04) 8px 16px)}
.rx-seg.sel{box-shadow:inset 0 0 0 2px var(--peacock);border-radius:3px}
.rx-tag{position:absolute;left:5px;top:5px;font-family:var(--f-mono);font-size:10.5px;font-weight:600;border-radius:4px;padding:1px 6px;
  background:var(--surface);color:var(--ink-2);pointer-events:none}
.rx-seg.cut .rx-tag{color:var(--rx-red);text-decoration:line-through}
.rx-split{position:absolute;top:0;bottom:0;width:18px;margin-left:-9px;cursor:ew-resize;z-index:2}
.rx-split::after{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--ink-3);opacity:.5}
.rx-split:hover::after,.rx-split.drag::after{opacity:1;background:var(--peacock)}
.rx-head{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ink);z-index:3;pointer-events:none}
.rx-head::before{content:"";position:absolute;top:-1px;left:-5px;border:6px solid transparent;border-top:8px solid var(--ink)}
.rx-pop{border:1px solid rgba(255,255,255,.1);position:absolute;z-index:4;top:-46px;transform:translateX(-50%);background:#15181C;color:#fff;border-radius:8px;display:flex;gap:2px;padding:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);white-space:nowrap}
.rx-pop[hidden]{display:none}
.rx-pop::after{content:"";position:absolute;left:var(--arrow,50%);bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#15181C}
.rx-pop button{font:inherit;font-size:12.5px;font-weight:600;color:#fff;background:none;border:0;padding:6px 10px;border-radius:5px;display:flex;align-items:center;gap:6px;cursor:pointer}
.rx-pop button:hover{background:#2A2E35}
.rx-pop button.d{color:#FF8A80}
.rx-pop button.k{color:#8FD6A6}
.rx-pop svg{width:15px;height:15px}
.rx-scale{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);margin-top:6px}
.rx-list{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:14px}
.rx-li{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line);font-size:14px}
.rx-li:last-child{border-bottom:0}
.rx-li.sel{background:var(--surface-2)}
.rx-sw{width:10px;height:28px;border-radius:3px;background:var(--peacock);flex:none}
.rx-li.cut .rx-sw{background:repeating-linear-gradient(135deg,var(--rx-red) 0 3px,var(--rx-red-soft) 3px 6px)}
.rx-li .txt{flex:1;min-width:0;font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-li.cut .txt{color:var(--ink-3);text-decoration:line-through}
.rx-li .txt b{font-family:var(--f-mono);font-weight:600;margin-right:6px}
.rx-lplay{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;color:var(--ink-2);cursor:pointer;flex:none;padding:0}
.rx-lplay svg{width:14px;height:14px}
.rx-lplay.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.rx-tog{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;font-size:12px;font-weight:600;flex:none}
.rx-tog button{font:inherit;border:0;background:none;padding:6px 11px;color:var(--ink-3);cursor:pointer;min-width:64px}
.rx-tog button + button{min-width:84px}
.rx-tog button.on{background:var(--peacock);color:#fff}
.rx-tog button.on.x{background:var(--rx-red)}
.rx-tools{margin-top:14px}
.rx-ib{display:inline-flex;align-items:center;gap:7px}
.rx-ib svg{width:16px;height:16px}
.rx-fields{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
[data-player] audio,[data-player] video{width:100%;margin-top:4px}
[data-player]:empty{display:none}
@media (max-width:560px){
  .rx-stage{padding:20px 16px 18px}
  .rx-ctrls{gap:26px}
  .rx-done{padding:16px 12px}
  .rx-li{gap:8px;padding:8px 8px 8px 10px;font-size:13px}
  /* No room for a play button per row here; tapping the row selects the
     part, and the bar above the waveform plays it. */
  .rx-lplay{display:none}
  .rx-tog button{min-width:0;padding:6px 9px}
  .rx-tog button + button{min-width:74px}
  .rx-tools{flex-wrap:nowrap}
  .rx-tools .btn-primary{flex:1;justify-content:center;min-width:0}
  .rx-tools .btn-quiet{padding-left:10px;padding-right:10px}
  .rx-tools .btn-quiet span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

/* ---------- Edit audio: Advanced (volume, clean-up, reverb) ---------- */
.rx-gain{font-family:var(--f-mono);font-size:11.5px;font-weight:600;color:var(--brass-ink);background:var(--brass-soft);
  border-radius:4px;padding:1px 5px;margin-left:6px;text-decoration:none;display:inline-block}
.rx-ab{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:2px;background:var(--surface-2);margin-left:auto}
.rx-ab[hidden]{display:none}
.rx-ab button{font:inherit;font-size:12.5px;font-weight:600;border:0;background:none;color:var(--ink-3);border-radius:999px;padding:6px 12px;cursor:pointer}
.rx-ab button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.rx-adv{margin-top:16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.rx-adv > summary{cursor:pointer;list-style:none;padding:12px 16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rx-adv > summary::-webkit-details-marker{display:none}
.rx-adv > summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(-45deg);align-self:center;margin-right:2px;transition:transform .15s ease}
.rx-adv[open] > summary::before{transform:rotate(45deg)}
.rx-adv[open] > summary{border-bottom:1px solid var(--line);background:var(--surface-2)}
.fx-sum-t{font-weight:700;font-size:14.5px}
.fx-sum-s{font-size:13px;color:var(--ink-3)}
.fx-on{margin-left:auto;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-ink);background:var(--brass-soft);border-radius:999px;padding:3px 9px;align-self:center}
.fx-on[hidden]{display:none}
.rx-adv-body{display:block}
.fx-all{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.fx-all[hidden]{display:none}
/* presets: four one-tap cards */
.fx-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px 16px}
.fx-preset{position:relative;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;font:inherit;cursor:pointer;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--surface);padding:12px 34px 12px 13px;color:var(--ink);transition:border-color .12s ease,box-shadow .12s ease}
.fx-preset b{display:block;font-size:14px}
.fx-preset span{display:block;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:3px}
.fx-preset:hover{border-color:var(--ink-3)}
.fx-preset:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.fx-preset[aria-pressed="true"]{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass-soft);
  background:linear-gradient(var(--brass-soft),var(--surface) 75%)}
.fx-preset[aria-pressed="true"]::after{content:"✓";position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;
  background:var(--brass);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
/* what's on, in a line */
.fx-fine{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2)}
.fx-fine-t{font-size:13px;font-weight:700}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.fx-chip{font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-2);white-space:nowrap}
.fx-chip-none{font-size:12.5px;color:var(--ink-3)}
.fx-more{font:inherit;font-size:13px;font-weight:600;color:var(--brass-ink);background:none;border:0;padding:4px 0;cursor:pointer;white-space:nowrap}
.fx-more::after{content:"›";display:inline-block;margin-left:5px;transition:transform .15s ease}
.fx-more[aria-expanded="true"]::after{transform:rotate(90deg)}
.fx-mod{padding:16px 18px 6px;border-right:1px solid var(--line);min-width:0}
.fx-mod:nth-of-type(3){border-right:0}
.fx-mod h4{margin:0 0 6px;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.fx-row{padding:10px 0 12px;border-top:1px solid var(--line)}
.fx-mod h4 + .fx-row{border-top:0}
.fx-row-head{display:flex;align-items:center;gap:10px;min-height:32px}
.fx-name{flex:1;min-width:0;margin:0;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25}
.fx-name small{display:block;font-size:12px;font-weight:400;color:var(--ink-3);margin-top:1px}
.fx-val{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2);
  background:var(--surface-2);border-radius:5px;padding:3px 7px;min-width:52px;text-align:center}
.fx-row.is-off .fx-val{color:var(--ink-3)}
.fx-part{font-family:var(--f-mono);font-size:12px;font-weight:700;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;
  background:var(--peacock);color:#fff;flex:none}
.fx-icon{width:30px;height:30px;border-radius:7px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.fx-icon svg{width:14px;height:14px}
.fx-icon:disabled{opacity:.35;cursor:default}

/* the switch */
.fx-switch{position:relative;width:34px;height:20px;flex:none;margin:0;cursor:pointer}
.fx-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.fx-switch span{position:absolute;inset:0;border-radius:999px;background:var(--line-strong);transition:background .15s ease}
.fx-switch span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease}
.fx-switch input:checked + span{background:var(--brass)}
.fx-switch input:checked + span::after{transform:translateX(14px)}
.fx-switch input:focus-visible + span{outline:2px solid var(--brass);outline-offset:2px}

/* the slider: a thin track, filled from --a to --b */
.fx-range{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:8px 0 0;padding:0;border:0;background:transparent;cursor:pointer;
  --a:0%;--b:0%}
.fx-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--line) var(--a),var(--brass) var(--a),var(--brass) var(--b),var(--line) var(--b))}
.fx-range::-moz-range-track{height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--line) var(--a),var(--brass) var(--a),var(--brass) var(--b),var(--line) var(--b))}
.fx-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;margin-top:-6px;
  background:var(--surface);border:2px solid var(--brass);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.fx-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--brass)}
.fx-range:disabled{cursor:default;opacity:.4}
.fx-range:focus,.fx-range:focus-visible{outline:none;border:0;box-shadow:none}
.fx-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--brass-soft)}
.fx-center::-webkit-slider-runnable-track{background:
  linear-gradient(var(--ink-3),var(--ink-3)) 50% 50%/1px 10px no-repeat,
  linear-gradient(to right,var(--line) var(--a),var(--brass) var(--a),var(--brass) var(--b),var(--line) var(--b))}
.fx-scale{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10px;color:var(--ink-3);margin-top:2px}

/* a row of choices */
.fx-seg{display:flex;margin-top:8px;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--surface)}
.fx-seg button{flex:1;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);background:none;border:0;
  border-left:1px solid var(--line);padding:7px 4px;cursor:pointer;white-space:nowrap}
.fx-seg button:first-child{border-left:0}
.fx-seg button:hover{background:var(--surface-2)}
.fx-seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.fx-seg button:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.fx-from{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12px;color:var(--ink-3);font-weight:500}
.fx-from select{flex:1;min-width:0;font-size:12.5px;padding:5px 8px;margin:0;height:auto}
.fx-row.is-off .fx-from{display:none}
.fx-foot{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 18px;border-top:1px solid var(--line);background:var(--surface-2);font-size:12px}
.fx-foot .muted{color:var(--ink-3);max-width:640px}
@media (max-width:900px){
  .fx-all{grid-template-columns:1fr}
  .fx-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-mod{border-right:0;border-bottom:1px solid var(--line);padding:14px 16px 4px}
  .fx-mod:nth-of-type(3){border-bottom:0}
}
@media (max-width:560px){
  .rx-tools{flex-wrap:wrap}
  .rx-ab{margin-left:0}
  .fx-foot{flex-direction:column;align-items:flex-start}
  .fx-presets{gap:8px;padding:12px}
  .fx-preset{padding:10px 30px 10px 11px}
  .fx-preset span{font-size:11.5px}
  .fx-fine{padding:10px 12px}
  .fx-fine-t{flex:1}
  .fx-chips{order:3;flex-basis:100%}
}
/* ---------- an edited recording's two copies ---------- */
.rx-copies{margin-top:14px;padding:12px 14px;border-radius:8px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 25%,transparent)}
.rx-copies-head strong{display:block;font-size:14px;color:var(--warn)}
.rx-copies-head .muted{font-size:13px;color:var(--ink-2)}
.rx-copies-orig{display:flex;align-items:center;gap:10px;margin:10px 0}
.rx-copies-orig audio{flex:1;min-width:0;height:36px}
.rx-copies .btn-row{gap:8px}
.rx-copies form{margin:0}