/* The site look: cream + dusty indigo. The old dark & brass look is this same site with
   <html data-theme="dark"> (preview with ?theme=dark) and the git tag dark-brass-v2. */

:root:not([data-theme="dark"]) {
  --page: #F4EDE0; --band: #EDE4D3; --card: #FBF7EE; --card-hover: #F6F0E3;
  --line: rgba(43,36,32,.14); --line-2: rgba(43,36,32,.26);
  --ink: #2B2420; --muted: #5B4D43;
  --acc-s: #4F5B7A; --acc: #4F5B7A; --acc-2: #3C4661; --acc-1: #DFE2EB; --on-acc: #F4EDE0;
  --acc-d: #A9B3CE; --acc-d2: #C0C8DD; /* the accent, lightened for dark rooms */
  --paper: #FFFCF6; --paper-ink: #2B2420; --paper-muted: #5B4D43;
  --shade: 43,36,32; --page-rgb: 244,237,224; --warm: #A94E30; --warm-ink: #8F4426;
  color-scheme: light;
  scrollbar-color: #B9AC97 var(--page);
}

/* Only the video frame and small dark boxes stay dark; they use a lighter accent so it shows on black. */
:root:not([data-theme="dark"]) :is(.prac, .side .box.dark, .track .cover, .player, .frame-play) {
  --ink: #F2EBDD; --muted: #C2B8A8; --line: rgba(242,235,221,.12); --line-2: rgba(242,235,221,.22);
  --acc: var(--acc-d); --acc-2: var(--acc-d2); --acc-1: #2A2926; --on-acc: #1C1A18; --shade: 0,0,0;
  --card: #2C2824; --card-hover: #34302B; --band: #24211E;
  color: var(--ink);
}

/* Glows and highlights that were hard-coded brass follow the accent. */
:root:not([data-theme="dark"]) .list li a[aria-current="true"] { background: color-mix(in srgb, var(--acc-d) 16%, transparent); }

/* Header: cream. Footer stays dark (its own tokens in chrome.css). */
:root:not([data-theme="dark"]) .top {
  --c-page: var(--page); --c-ink: var(--ink); --c-muted: var(--muted); --c-line: var(--line);
  --c-acc: var(--acc); --c-acc-2: var(--acc-2); --c-on-acc: var(--on-acc);
}

/* Round play buttons sit on photos: keep them cream with dark icons. */
:root:not([data-theme="dark"]) :is(.stage-play span, .thumb .hint, .next-card .ph .play, .frame-play .play,
  .start .ph .play, .lesson .ph .play, .row .ph .k) { color: #1C1A18; }

/* White-on-dark hairlines and bars become dark-on-cream. */
:root:not([data-theme="dark"]) :is(.my-courses .bar, .meter, .mini .mb, .list .lh .prog i) { background: rgba(43,36,32,.12); }
:root:not([data-theme="dark"]) .eps li a:hover { background: rgba(43,36,32,.05); }
:root:not([data-theme="dark"]) :is(.frame, .letter, .note, .note-card, .teacher-note, .st-body .note, .content-block--quote) {
  box-shadow: 0 24px 40px -30px rgba(43,36,32,.35);
}
:root:not([data-theme="dark"]) :is(.letter .ans, .note-card .from) { border-top-color: #CDBFA9; }
:root:not([data-theme="dark"]) :is(.search input:focus, .entrance form input:focus, .nb textarea:focus) {
  box-shadow: 0 0 0 4px rgba(79,91,122,.2);
}

/* ---- Home page, after asomemusic.com (the client's reference), on cream ----
   inset photo, a short bar over every section title, big thin numerals,
   centred titles under square photos, a coloured footer. */
:root:not([data-theme="dark"]) body.home .stage { margin: 12px 12px 0; }
:root:not([data-theme="dark"]) body.home :is(.season-head, .between-sec .wrap, .live, .join-head, .letters-sec .wrap, #s2-title) h2::before,
:root:not([data-theme="dark"]) body.home #s2-title::before { content: ""; display: block; width: 120px; height: 6px; margin-bottom: 24px; background: var(--acc); }
:root:not([data-theme="dark"]) body.home .thumb { border-radius: 2px; }
:root:not([data-theme="dark"]) body.home .ep :is(.t, .m) { text-align: center; }
:root:not([data-theme="dark"]) body.home .between { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
:root:not([data-theme="dark"]) body.home .between li { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "k h d" "k p d"; column-gap: 32px; align-items: start; padding: 36px 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
:root:not([data-theme="dark"]) body.home .between li:last-child { border-bottom: 1px solid var(--line); }
:root:not([data-theme="dark"]) body.home .between .k { grid-area: k; display: block; width: auto; height: auto; background: none; color: var(--acc); font: 200 96px/.9 var(--sans); letter-spacing: -.04em; }
:root:not([data-theme="dark"]) body.home .between .k::before { content: "0"; }
:root:not([data-theme="dark"]) body.home .between h3 { grid-area: h; margin-top: 0; }
:root:not([data-theme="dark"]) body.home .between p { grid-area: p; }
:root:not([data-theme="dark"]) body.home .between :is(.mini, .jot) { grid-area: d; margin-top: 0; }
:root:not([data-theme="dark"]) .foot { --c-d2: var(--acc); --c-ink: #F4EDE0; --c-muted: rgba(244,237,224,.86); --c-line: rgba(244,237,224,.26); --c-acc: #F4EDE0; --c-acc-2: #fff; }
@media (max-width: 860px) {
  :root:not([data-theme="dark"]) body.home .between li { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "k h" "k p" "d d"; column-gap: 20px; }
  :root:not([data-theme="dark"]) body.home .between .k { font-size: 64px; }
  :root:not([data-theme="dark"]) body.home .between :is(.mini, .jot) { margin-top: 18px; }
}
@media (max-width: 600px) { :root:not([data-theme="dark"]) body.home .stage { margin: 8px 8px 0; } }

/* the path's fork lines were brass */
:root:not([data-theme="dark"]) .fork::before { border-color: color-mix(in srgb, var(--acc-d) 55%, transparent); }
:root:not([data-theme="dark"]) .fork::after { background: color-mix(in srgb, var(--acc-d) 55%, transparent); }

/* ---- Page heads, sign-in and the two photo sections: light, with the standard teal ---- */
:root:not([data-theme="dark"]) :is(.phead, .entrance) { background: var(--band); }
:root:not([data-theme="dark"]) :is(.phead, .entrance)::before { background: radial-gradient(55% 60% at 88% 0%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 70%); }
:root:not([data-theme="dark"]) :is(.stepb .n, .level-head .n, .topics button.is-active, .view button[aria-pressed="true"]) { background: var(--acc); color: var(--on-acc); }
:root:not([data-theme="dark"]) :is(.stage .lead, .end .lead) { color: var(--muted); }
:root:not([data-theme="dark"]) .stage {
  background: linear-gradient(90deg, rgba(var(--page-rgb),.94) 0%, rgba(var(--page-rgb),.88) 40%, rgba(var(--page-rgb),.35) 60%, rgba(var(--page-rgb),0) 76%), var(--stage-photo) 50% 28%/cover no-repeat, var(--page); }
:root:not([data-theme="dark"]) .end {
  background: linear-gradient(90deg, rgba(var(--page-rgb),.94) 0%, rgba(var(--page-rgb),.82) 32%, rgba(var(--page-rgb),.2) 58%, rgba(var(--page-rgb),0) 100%), var(--end-photo) 60% 40%/cover no-repeat, var(--page); }
:root:not([data-theme="dark"]) .stage::before { background: var(--page); }
:root:not([data-theme="dark"]) .stage-play b { padding: 6px 14px; border-radius: 999px; background: rgba(20,17,14,.62); color: #fff; }
@media (max-width: 860px) {
  /* phone: the photo sits on top, the words on solid page colour, so the headline never rests on the photo */
  :root:not([data-theme="dark"]) .stage { display: block; min-height: 0; padding-top: calc(64vw - 28px); background: var(--page); }
  :root:not([data-theme="dark"]) .stage::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 64vw; z-index: 0;
    background: var(--stage-photo) 60% 28%/cover no-repeat;
    -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
  :root:not([data-theme="dark"]) .stage .wrap { padding-bottom: 48px; }
}
@media (max-width: 600px) {
  :root:not([data-theme="dark"]) .end { background: linear-gradient(0deg, rgba(var(--page-rgb),.94) 0%, rgba(var(--page-rgb),.86) 32%, rgba(var(--page-rgb),.45) 62%, rgba(var(--page-rgb),.05)), var(--end-photo) 60% 30%/cover no-repeat, var(--page); }
}

/* ---- Other accents, kept in case: ?theme=sage / clay / navy / wine (teal is the default) ---- */
:root[data-theme="sage"] { --acc-s: #3F5A47; --acc: #3F5A47; --acc-2: #2F4737; --acc-1: #DDE4D6; --acc-d: #9DB8A4; --acc-d2: #B4CBB9; }
:root[data-theme="clay"] { --acc-s: #A84B2A; --acc: #A84B2A; --acc-2: #8F3E21; --acc-1: #F0D9CB; --acc-d: #D98A66; --acc-d2: #E6A283; }
:root[data-theme="navy"] { --acc-s: #2F4A5E; --acc: #2F4A5E; --acc-2: #223849; --acc-1: #D9E2E8; --acc-d: #8FB0C8; --acc-d2: #A9C3D6; }
:root[data-theme="wine"] { --acc-s: #6B2D3A; --acc: #6B2D3A; --acc-2: #55222D; --acc-1: #EBD9DC; --acc-d: #D08A98; --acc-d2: #DDA3AF; }
:root:is([data-theme="sage"], [data-theme="clay"], [data-theme="navy"], [data-theme="wine"]) .top { --c-acc: var(--acc); --c-acc-2: var(--acc-2); }

:root:not([data-theme="dark"]) :is(.prac, .side .box.dark) { background: color-mix(in srgb, #000 30%, var(--acc-s)); }

/* the video room is light like the rest; only the picture is dark */
:root:not([data-theme="dark"]) .room { background: var(--band); }
:root:not([data-theme="dark"]) .list li a:hover { background: rgba(43,36,32,.06); }
:root:not([data-theme="dark"]) .list li a[aria-current="true"] { background: color-mix(in srgb, var(--acc) 12%, transparent); }
:root:not([data-theme="dark"]) .list .next { background: rgba(43,36,32,.05); }
:root:not([data-theme="dark"]) .list .next:hover { background: rgba(43,36,32,.09); }
:root:not([data-theme="dark"]) .list ol { scrollbar-color: rgba(43,36,32,.25) transparent; }

/* ---- More combinations (page colour + accent): ?theme=mist / blush / olive / plum / ink ---- */
:root[data-theme="mist"]  { --page: #E9EEEA; --band: #DFE6E1; --card: #F6F9F7; --card-hover: #EFF4F1; --paper: #FBFDFC; --page-rgb: 233,238,234; }
:root[data-theme="blush"] { --page: #F6E9E1; --band: #EEDDD3; --card: #FCF5F0; --card-hover: #F8EEE7; --paper: #FFFBF8; --page-rgb: 246,233,225; }
:root[data-theme="olive"] { --page: #F1EEDD; --band: #E8E4CD; --card: #FAF8EC; --card-hover: #F5F2E0; --paper: #FFFEF6; --page-rgb: 241,238,221;
  --acc-s: #5A6330; --acc: #5A6330; --acc-2: #464D24; --acc-1: #E4E6CC; --acc-d: #B7C27D; --acc-d2: #C9D294; }
:root[data-theme="plum"]  { --acc-s: #56304F; --acc: #56304F; --acc-2: #43243E; --acc-1: #E8D9E4; --acc-d: #C99BC0; --acc-d2: #D9B3D1; }
:root[data-theme="ink"]   { --page: #FAF7F2; --band: #F1ECE3; --card: #FFFFFF; --card-hover: #FAF7F2; --paper: #FFFFFF; --page-rgb: 250,247,242;
  --acc-s: #2B2420; --acc: #2B2420; --acc-2: #14100D; --acc-1: #E7E1D7; --acc-d: #E4DACA; --acc-d2: #F4EDE0; }

/* ---- Happy and warm: ?theme=sunrise / honey / peach / meadow / berry ---- */
:root[data-theme="sunrise"] { --page: #FBF1D9; --band: #F5E6C2; --card: #FFF9EA; --card-hover: #FCF1DA; --paper: #FFFCF3; --page-rgb: 251,241,217;
  --acc-s: #B63C25; --acc: #B63C25; --acc-2: #962F1B; --acc-1: #F6D9D0; --acc-d: #F0917A; --acc-d2: #F5AA96; }
:root[data-theme="honey"] { --page: #FAEBCD; --band: #F2DDB0; --card: #FFF6E2; --card-hover: #FBEFD3; --paper: #FFFAEC; --page-rgb: 250,235,205;
  --acc-s: #8F5210; --acc: #8F5210; --acc-2: #73400B; --acc-1: #F1DDBB; --acc-d: #E6B25E; --acc-d2: #EEC47F; }
:root[data-theme="peach"] { --page: #FCE6D8; --band: #F6D8C5; --card: #FFF4EC; --card-hover: #FCEBDF; --paper: #FFF9F4; --page-rgb: 252,230,216; }
:root[data-theme="meadow"] { --page: #F7F2D7; --band: #EEE8C0; --card: #FDFBEC; --card-hover: #F8F4DC; --paper: #FFFEF4; --page-rgb: 247,242,215;
  --acc-s: #2A7048; --acc: #2A7048; --acc-2: #1F5636; --acc-1: #D8EAD9; --acc-d: #86CBA0; --acc-d2: #A3D9B7; }
:root[data-theme="berry"] { --page: #FCE9E3; --band: #F5D8CF; --card: #FFF6F2; --card-hover: #FCEDE7; --paper: #FFFAF8; --page-rgb: 252,233,227;
  --acc-s: #A8324F; --acc: #A8324F; --acc-2: #892640; --acc-1: #F4D6DE; --acc-d: #EE93A9; --acc-d2: #F3AEBE; }

/* ---- Calm and professional, quieter accents: ?theme=linen / oat / pine / mocha / denim ---- */
:root[data-theme="linen"] { --page: #F4F1EA; --band: #EBE6DB; --card: #FBF9F4; --card-hover: #F6F3EC; --paper: #FFFDF9; --page-rgb: 244,241,234;
  --acc-s: #3D4A52; --acc: #3D4A52; --acc-2: #2A353B; --acc-1: #DDE2E5; --acc-d: #A9BAC4; --acc-d2: #C0CDD5; }
:root[data-theme="oat"] { --page: #F0EADF; --band: #E7DFD0; --card: #F9F5EC; --card-hover: #F4EEE2; --paper: #FDFAF3; --page-rgb: 240,234,223;
  --acc-s: #8A4B45; --acc: #8A4B45; --acc-2: #6F3B36; --acc-1: #EBD8D4; --acc-d: #D9A39B; --acc-d2: #E4B9B2; }
:root[data-theme="pine"] { --page: #F3F1EA; --band: #EAE7DC; --card: #FBFAF5; --card-hover: #F6F4EC; --paper: #FEFDF9; --page-rgb: 243,241,234;
  --acc-s: #26392F; --acc: #26392F; --acc-2: #172319; --acc-1: #DCE3DC; --acc-d: #9CB8A6; --acc-d2: #B4CBBB; }
:root[data-theme="mocha"] { --page: #EFEAE2; --band: #E5DED3; --card: #F8F5EF; --card-hover: #F3EFE7; --paper: #FCFAF6; --page-rgb: 239,234,226;
  --acc-s: #6B5646; --acc: #6B5646; --acc-2: #53433A; --acc-1: #E6DDD4; --acc-d: #CDB39F; --acc-d2: #DBC6B6; }
:root[data-theme="denim"] { --page: #F3EFE6; --band: #EAE5D8; --card: #FBF9F2; --card-hover: #F6F2E9; --paper: #FFFDF8; --page-rgb: 243,239,230;
  --acc-s: #4A6178; --acc: #4A6178; --acc-2: #384C60; --acc-1: #DCE3EA; --acc-d: #9DB6CC; --acc-d2: #B5C9DB; }

/* ---- Warm beige page (unchanged), quiet accents: ?theme=pewter / graphite / bronze / moss / clayrose / fig ---- */
:root[data-theme="pewter"] { --acc-s: #66645F; --acc: #66645F; --acc-2: #4F4D49; --acc-1: #E4E0D8; --acc-d: #C9C6BE; --acc-d2: #DAD7D0; }
:root[data-theme="graphite"] { --acc-s: #4C4845; --acc: #4C4845; --acc-2: #34312F; --acc-1: #E4DFD8; --acc-d: #CFC8BF; --acc-d2: #E0DAD2; }
:root[data-theme="bronze"] { --acc-s: #7E5F36; --acc: #7E5F36; --acc-2: #61492A; --acc-1: #EBDFC9; --acc-d: #D8B98A; --acc-d2: #E4CBA4; }
:root[data-theme="moss"] { --acc-s: #6D6E4E; --acc: #6D6E4E; --acc-2: #55563B; --acc-1: #E4E3CF; --acc-d: #BFC094; --acc-d2: #D0D1AB; }
:root[data-theme="clayrose"] { --acc-s: #97594E; --acc: #97594E; --acc-2: #7A463D; --acc-1: #EFD9D3; --acc-d: #DDA598; --acc-d2: #E8BBB0; }
:root[data-theme="fig"] { --acc-s: #6E4A5A; --acc: #6E4A5A; --acc-2: #573A47; --acc-1: #E9DAE0; --acc-d: #CFA3B6; --acc-d2: #DDBCCB; }

/* ---- Denim family, all on the original warm beige: ?theme=denimsand / chambray / harbor / lagoon / dusk / indigo ---- */
:root[data-theme="denimsand"] { --acc-s: #4A6178; --acc: #4A6178; --acc-2: #384C60; --acc-1: #DCE3EA; --acc-d: #9DB6CC; --acc-d2: #B5C9DB; }
:root[data-theme="chambray"] { --acc-s: #4C6A84; --acc: #4C6A84; --acc-2: #3A5268; --acc-1: #DCE5EC; --acc-d: #A6BFD3; --acc-d2: #BDD0E0; }
:root[data-theme="harbor"] { --acc-s: #3F5F73; --acc: #3F5F73; --acc-2: #2E4757; --acc-1: #D9E3EA; --acc-d: #93B3C7; --acc-d2: #AEC6D5; }
:root[data-theme="lagoon"] { --acc-s: #44707A; --acc: #44707A; --acc-2: #325761; --acc-1: #D9E6E8; --acc-d: #97C1C9; --acc-d2: #B1D2D8; }
:root[data-theme="dusk"] { --acc-s: #5E6488; --acc: #5E6488; --acc-2: #494E6E; --acc-1: #E0E2EE; --acc-d: #B0B5D6; --acc-d2: #C6CAE3; }
:root[data-theme="indigo"] { --acc-s: #4F5B7A; --acc: #4F5B7A; --acc-2: #3C4661; --acc-1: #DFE2EB; --acc-d: #A9B3CE; --acc-d2: #C0C8DD; }

/* the little player in "Between episodes" is a light card, not a black box */
:root:not([data-theme="dark"]) .mini { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="teal"] { --acc-s: #1E5A5C; --acc: #1E5A5C; --acc-2: #154547; --acc-1: #D5E4E4; --acc-d: #7DBCBC; --acc-d2: #98CDCD; }

/* ---- Audit fixes ---- */
/* the count on the selected filter chip was accent on accent */
:root:not([data-theme="dark"]) :is(.topics button.is-active span) { color: var(--on-acc); opacity: .85; }
/* video controls use the lighter accent, not brass */
:root:not([data-theme="dark"]) :is(.player, .outcomes-card, .member-player) { --focus: var(--acc-d); --accent: var(--acc-d); --color-accent-warm: var(--acc-d); --color-semantic-success: var(--acc-d); --accent-soft: color-mix(in srgb, #000 55%, var(--acc-s)); }

/* ---- One warm note (clay) in small places, so the indigo does not carry everything ---- */
:root:not([data-theme="dark"]) :is(.when .d b, .stage .card-title) { background: var(--warm); color: #fff; }
:root:not([data-theme="dark"]) .letter .ans b { color: var(--warm-ink); }
:root:not([data-theme="dark"]) .foot { box-shadow: inset 0 1px 0 var(--warm); }  /* a hairline, not a 4px stripe (design checker: side-tab) */

/* ---- More warm, muted accents on the beige: ?theme=cinnamon / adobe / dustyrose / cocoa / mauve / goldbrown ---- */
:root[data-theme="cinnamon"] { --acc-s: #8B573A; --acc: #8B573A; --acc-2: #6F452D; --acc-1: #EFDDD1; --acc-d: #DDA98A; --acc-d2: #E8BEA5; }
:root[data-theme="adobe"] { --acc-s: #96573F; --acc: #96573F; --acc-2: #7A4632; --acc-1: #F0DDD3; --acc-d: #DFA58F; --acc-d2: #E8BCAB; }
:root[data-theme="dustyrose"] { --acc-s: #94575C; --acc: #94575C; --acc-2: #7A464B; --acc-1: #EFDADC; --acc-d: #DDA3A8; --acc-d2: #E7BABE; }
:root[data-theme="cocoa"] { --acc-s: #6F4E3A; --acc: #6F4E3A; --acc-2: #583D2D; --acc-1: #E9DDD3; --acc-d: #CFAE97; --acc-d2: #DCC3B2; }
:root[data-theme="mauve"] { --acc-s: #85606B; --acc: #85606B; --acc-2: #6C4D57; --acc-1: #EBDFE2; --acc-d: #D2AAB6; --acc-d2: #DFC4CC; }
:root[data-theme="goldbrown"] { --acc-s: #8A6428; --acc: #8A6428; --acc-2: #6F5020; --acc-1: #EEE1C6; --acc-d: #DDB874; --acc-d2: #E7CB94; }