/* Layout: one column on narrow screens, two from 820px (see the end of this sheet). Three tabs, as on the Generator: pure tone, binaural, isochronic. Each lists its protocols.
   The two kinds of session share one screen: the list for the chosen kind, the chosen protocol opened out into
   its steps, volume, and a sticky bar with the one Start / Stop button. A pure tone protocol is a screen of its own,
   shown under the list; the first one is the Spiritual Awakening Protocol. */
:root {
  /* single night-sky look, by choice: the page stays dark in every viewer theme */
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  --c-bin: #B7A2FF;
  --c-iso: #5FD3C0;
  --c-pure: #E3A0BE;
  --mode: var(--c-bin);
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* each kind carries the hue it has on the Generator */
.app[data-mode="bin"] { --mode: var(--c-bin); }
.app[data-mode="iso"] { --mode: var(--c-iso); }
.app[data-mode="pure"] { --mode: var(--c-pure); }

body {
  background: radial-gradient(900px 420px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}
.app {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
header { display: flex; flex-direction: column; gap: 4px; }
.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
.lede { margin: 0; color: var(--muted); max-width: 56ch; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the three tabs */
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--tab-c);
}
.tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tab-c); flex: none; }
.tab[data-mode="bin"] { --tab-c: var(--c-bin); }
.tab[data-mode="iso"] { --tab-c: var(--c-iso); }
.tab[data-mode="pure"] { --tab-c: var(--c-pure); }
/* a ring round the dot of the tab whose sound is playing; on the pure tone tab also when an Awakening session is due */
.tab.live::before, .tab.due:not([aria-selected="true"])::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tab-c) 35%, transparent); }
/* each tab's screen is its own column */
.screen { display: flex; flex-direction: column; gap: 16px; }
.awhead { display: flex; flex-direction: column; gap: 4px; }
.awtitle { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--c-pure); text-wrap: balance; }
.tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--tab-c) 16%, var(--surface-2));
  border-color: var(--tab-c);
  font-weight: 600;
}
.modeinfo { margin: -4px 0 0; color: var(--muted); min-height: 3em; max-width: 56ch; }

/* the list of protocols */
.protolist { display: flex; flex-direction: column; gap: 6px; }
.proto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
}
.proto b { font-weight: 600; font-size: 0.95rem; }
.proto span { font-size: 0.78rem; color: var(--muted); }
.proto[aria-pressed="true"] { background: color-mix(in srgb, var(--mode) 16%, var(--surface-2)); border-color: var(--mode); }
/* the one that is playing carries a dot */
.proto.live b::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--mode); vertical-align: 1px; }

/* the chosen protocol */
.pname { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; color: var(--mode); text-wrap: balance; }
.pmeta { margin: -8px 0 0; font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }
.panelbody { display: flex; flex-direction: column; gap: 10px; }
.protoobj { margin: 0; font-size: 0.9rem; }
.protoobj b { font-weight: 600; color: var(--mode); }
.protosteps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.protosteps li { padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; font-size: 0.86rem; color: var(--muted); }
.protosteps b { display: block; font-weight: 600; color: var(--ink); }
.protosteps .when { font-family: var(--font-mono); font-weight: 400; font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.protosteps li.on { border-left-color: var(--mode); background: color-mix(in srgb, var(--mode) 12%, transparent); }
.protonote { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 0.8rem; }
.protostatus { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--mode); }
.protostatus:empty { display: none; }
.notice {
  margin: 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.88rem;
}
.notice b { font-weight: 600; }

input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; height: 28px; }
.slidrow { display: flex; align-items: center; gap: 12px; }
.slidrow output { font-family: var(--font-mono); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }

/* sticky play bar */
.dock {
  position: sticky;
  bottom: var(--dock-bottom, 0px);   /* on top of the tab bar */
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-inline: -16px;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.play {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.play[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
/* how far through the session */
#sBar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
#sBar i { display: block; width: 0; height: 100%; border-radius: 2px; background: var(--accent); }
.timeleft { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.now { color: var(--ink); }

.help { font-size: 0.88rem; color: var(--muted); }
.help summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help p { margin: 8px 0 0; max-width: 60ch; }
.fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }
.legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   /* small enough that the longest translation stays clearly shorter than the company name */
  color: var(--muted);
  text-align: center;
}
.legal p { margin: 0; }
.legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}
/* ---------- the Awakening screen: its own styles, confined to it ---------- */
#awScreen {
  
  color-scheme: dark;
  --bg: #0A0F24;
  --bg-glow: #1A2350;
  --surface: #121935;
  --surface-2: #1B2447;
  --ink: #E7EBF8;
  --muted: #9BA7CA;
  --line: #2A3561;
  --accent: #9DB4FF;
  --accent-ink: #0A0F24;
  --scope-bg: #050817;
  --scope-grid: #182043;
  --scope-trace: #E3A0BE;
  --scope-trace-2: #F2B84B;
  --scope-label: #8D99C0;
  --c-matrix: #E3A0BE;
  --c-routine: #B7A2FF;
  --c-progress: #5FD3C0;
  --c-morning: #F2B84B;
  --c-night: #9DB4FF;
  --ok: #5FD3C0;
  --mode: var(--c-matrix);
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
#awScreen[data-mode="matrix"] { --mode: var(--c-matrix); --scope-trace: #E3A0BE; }
#awScreen[data-mode="routine"] { --mode: var(--c-routine); --scope-trace: #B7A2FF; }
#awScreen[data-mode="progress"] { --mode: var(--c-progress); --scope-trace: #5FD3C0; }
#awScreen {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#awScreen header { display: flex; flex-direction: column; gap: 4px; }
#awScreen .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#awScreen h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-wrap: balance;
}
#awScreen .lede { margin: 0; color: var(--muted); max-width: 56ch; }
#awScreen a { color: var(--accent); }
#awScreen a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#awScreen .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#awScreen .stack { display: flex; flex-direction: column; gap: 14px; }
#awScreen .label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#awScreen button { font: inherit; color: inherit; cursor: pointer; }
#awScreen button:focus-visible, #awScreen input:focus-visible, #awScreen .seg input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
#awScreen .next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
#awScreen .next[data-phase="ready"], #awScreen .next[data-phase="due"] {
  border-color: var(--c-morning);
  background: color-mix(in srgb, var(--c-morning) 10%, var(--surface));
}
#awScreen .next[data-phase="ready"] .label, #awScreen .next[data-phase="due"] .label { color: var(--c-morning); }
#awScreen .next[data-phase="session"] { border-color: var(--c-routine); }
#awScreen .next[data-phase="session"] .label { color: var(--c-routine); }
#awScreen .next[data-phase="complete"] .label { color: var(--ok); }
#awScreen .nexttitle { margin: 0; font-weight: 600; font-size: 1.05rem; }
#awScreen .nextwhen { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 56ch; }
#awScreen .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#awScreen .btn {
  padding: 9px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
}
#awScreen a.btn { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
#awScreen .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
#awScreen .actions.flat { margin-top: 0; }
#awScreen .calgroup { display: flex; flex-direction: column; gap: 12px; }
#awScreen .calrow { display: flex; flex-direction: column; gap: 6px; }
#awScreen .calname { font-size: 0.88rem; font-weight: 600; }
#awScreen .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#awScreen .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--tab-c);
}
#awScreen .tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tab-c); flex: none; }
#awScreen .tab[data-mode="matrix"] { --tab-c: var(--c-matrix); }
#awScreen .tab[data-mode="routine"] { --tab-c: var(--c-routine); }
#awScreen .tab[data-mode="progress"] { --tab-c: var(--c-progress); }
#awScreen .tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--tab-c) 16%, var(--surface-2));
  border-color: var(--tab-c);
  font-weight: 600;
}
#awScreen .modeinfo { margin: -4px 0 0; color: var(--muted); min-height: 3em; max-width: 56ch; }
#awScreen .engine {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--mode);
}
#awScreen .engine::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mode); flex: none; }
#awScreen .engine small { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#awScreen .engine.plain { color: var(--ink); }
#awScreen .engine.plain::before { background: var(--accent); }
#awScreen .scope {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--scope-bg);
  border: 1px solid var(--line);
}
#awScreen .scope canvas { display: block; width: 100%; height: 180px; }
#awScreen .scope .tag {
  position: absolute;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--scope-label);
  pointer-events: none;
}
#awScreen .scope .tag.l { left: 12px; }
#awScreen .scope .tag.r { right: 12px; }
#awScreen .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
#awScreen .dot.l { background: var(--scope-trace); }
#awScreen .dot.r { background: var(--scope-trace-2); margin-left: 6px; }
#awScreen .dot.m { background: var(--c-morning); }
#awScreen .dot.n { background: var(--c-night); }
#awScreen .readout { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#awScreen .readout .big {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.8rem, 9vw, 2.6rem);
  line-height: 1.1;
  color: var(--mode);
  font-variant-numeric: tabular-nums;
}
#awScreen .readout .unit { font-family: var(--font-mono); font-size: 1.15rem; color: var(--muted); }
#awScreen .noteline { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); min-height: 1.4em; overflow-wrap: anywhere; }
#awScreen .theme { margin: -8px 0 0; font-weight: 500; }
#awScreen .flist { display: flex; flex-direction: column; gap: 6px; }
#awScreen .frow {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
}
#awScreen .frow .fnum { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
#awScreen .frow .fnum b { font-weight: 500; font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
#awScreen .frow .ftext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#awScreen .frow .ftext strong { font-weight: 600; }
#awScreen .frow .ftext span { font-size: 0.88rem; color: var(--muted); }
#awScreen .frow[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mode) 16%, var(--surface-2));
  border-color: var(--mode);
}
#awScreen .frow[aria-pressed="true"] .fnum b { color: var(--mode); }
#awScreen .sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
#awScreen .session {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
  min-width: 0;
}
#awScreen .session[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mode) 16%, var(--surface-2));
  border-color: var(--mode);
}
#awScreen .shead {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#awScreen .shead .dur { margin-left: auto; }
#awScreen .sfreq { font-size: 0.88rem; color: var(--muted); }
#awScreen .sfreq b { font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; color: var(--mode); font-variant-numeric: tabular-nums; }
#awScreen .squote { font-size: 1.05rem; line-height: 1.4; text-wrap: balance; }
#awScreen .sdone { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok); }
#awScreen .progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
}
#awScreen .linkbtn { background: none; border: 0; padding: 4px 0; color: var(--accent); text-decoration: underline; font-size: 0.82rem; }
#awScreen .check { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; cursor: pointer; }
#awScreen .check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
#awScreen .remrow { display: flex; flex-wrap: wrap; gap: 12px; }
#awScreen .field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); }
#awScreen input[type="time"] {
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#awScreen .note { margin: 0; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }
#awScreen .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#awScreen .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}
#awScreen .stat b { font-family: var(--font-mono); font-weight: 500; font-size: 1.7rem; line-height: 1.1; color: var(--mode); font-variant-numeric: tabular-nums; }
#awScreen .stat span { font-size: 0.74rem; color: var(--muted); }
#awScreen .bar { height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
#awScreen .bar span { display: block; height: 100%; width: 0; background: var(--mode); }
#awScreen .motiv { margin: 0; font-size: 1.02rem; text-wrap: balance; }
#awScreen .rows { display: flex; flex-direction: column; gap: 6px; }
#awScreen .drow { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
#awScreen .drow .dname { align-self: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
#awScreen .cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  min-width: 0;
}
#awScreen .cell .cf { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
#awScreen .cell .cs { font-size: 0.72rem; color: var(--muted); }
#awScreen .cell.done { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
#awScreen .cell.done .cs { color: var(--ok); }
#awScreen .cell.upnext { border-color: var(--c-morning); }
#awScreen .cell.upnext .cs { color: var(--c-morning); }
#awScreen input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; height: 28px; }
#awScreen .seg { display: flex; flex-wrap: wrap; gap: 6px; }
#awScreen .seg input { position: absolute; opacity: 0; pointer-events: none; }
#awScreen .seg label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}
#awScreen .seg input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
#awScreen .slidrow { display: flex; align-items: center; gap: 12px; }
#awScreen .slidrow output { font-family: var(--font-mono); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
#awScreen .notice {
  margin: 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
}
#awScreen .notice b { font-weight: 600; }
#awScreen .preset-group { display: flex; flex-direction: column; gap: 8px; }
#awScreen .presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
#awScreen .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  min-width: 0;
}
#awScreen .chip b { font-family: var(--font-mono); font-weight: 500; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
#awScreen .chip span { font-size: 0.72rem; color: var(--muted); }
#awScreen .chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mode) 16%, var(--surface-2));
  border-color: var(--mode);
}
#awScreen .chip[aria-pressed="true"] b { color: var(--mode); }
#awScreen .dock {
  position: sticky;
  bottom: var(--dock-bottom, 0px);   
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-inline: -16px;
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
#awScreen .toast {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
  border: 1px solid var(--ok);
  border-radius: 10px;
}
#awScreen .toasttitle { margin: 0; font-weight: 600; color: var(--ok); }
#awScreen .toastmsg { margin: 0; font-size: 0.92rem; }
#awScreen .quick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#awScreen .quick .label { margin-right: 4px; }
#awScreen .qbtn {
  padding: 6px 10px;
  font-size: 0.82rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#awScreen .qbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
#awScreen .play {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
#awScreen .play[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
#awScreen .timeleft { margin: 0; text-align: center; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
#awScreen .now { color: var(--mode); }
#awScreen .help { font-size: 0.88rem; color: var(--muted); }
#awScreen .help summary { cursor: pointer; color: var(--ink); font-weight: 500; }
#awScreen .help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#awScreen .help p { margin: 8px 0 0; max-width: 60ch; }
#awScreen .fineprint { margin: 0; font-size: 0.82rem; color: var(--muted); max-width: 60ch; }
#awScreen .legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;   
  color: var(--muted);
  text-align: center;
}
#awScreen .legal p { margin: 0; }
#awScreen .legal .org {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink);
}
#awScreen .mode[hidden] { display: none; }
@media (max-width: 380px) {
#awScreen .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; }
}
/* the page already gives the column its width and margins */
#awScreen { max-width: none; margin: 0; padding: 0; }

/* top of the page: beside the title, the language drop-down (a flag). The title and the text under it run alongside it.
   Moving between pages is done from the bar along the bottom on phones and tablets, and from the bar across the top on computers (see the end of this sheet). */
.app > header { display: block; }
.app > header::after { content: ""; display: block; clear: both; }
.app > header h1 + .lede, .app > header .titleline + .lede { margin-top: 6px; }
.tools { float: right; display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px 14px; }
.langpick { position: relative; }
.langbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.langbtn[aria-expanded="true"] { border-color: var(--accent); }
/* the one line at the bottom of every page sits in the middle, over the company name */
.fineprint, #awScreen .fineprint { max-width: none; margin-inline: auto; text-align: center; }
/* a short line set beside the title */
.titleline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.titleline .eyebrow { font-size: 0.64rem; letter-spacing: 0.06em; white-space: nowrap; }
.langpick svg { display: block; width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.langmenu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.langmenu button {
  display: flex;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.langmenu button:hover { background: var(--surface-2); }
.langmenu button[aria-selected="true"] { background: var(--surface-2); border-color: var(--accent); }
.langbtn:focus-visible, .langmenu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* longer words in other languages still fit the tabs on narrow phones */
@media (max-width: 380px) { .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; } }

/* ================= website format =================
   A bar across the top of every page: the mark and the name on the left, the flag in the right corner.
   On phones and tablets the pages run along the bottom, each a sign over its name; a play bar that sticks
   to the bottom of a page rests on top of them (--dock-bottom). On computers the pages move up into the
   bar across the top. */
:root { --nav-h: 56px; --tabbar-h: 60px; --dock-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
body { padding-top: var(--nav-h); padding-bottom: var(--tabbar-h); }

.topbar {
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.topbar-in { display: flex; align-items: center; gap: 10px; height: var(--nav-h); max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.brand { flex: none; display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; border-radius: 8px; }
.brandmark { display: block; width: auto; height: 28px; overflow: visible; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.topbar .tools { flex: none; float: none; margin: 0 0 0 auto; }

/* the pages, along the bottom */
.navlinks {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: calc(var(--tabbar-h) - 1px);   /* with its top line, the bar is --tabbar-h tall */
  padding: 0 max(6px, calc(50% - 280px)) env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.navlinks a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.navlinks a svg { display: block; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.navlinks a:hover { color: var(--ink); }
.navlinks a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.navlinks a[aria-current="page"] svg { stroke-width: 2.1; }
.navlinks a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* a dot on Account says someone is signed in */
.navlinks a[data-in="true"]::after { content: ""; position: absolute; top: 7px; left: calc(50% + 6px); width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ok, #5FD3C0); }
/* six names side by side: smaller letters on narrower phones, so the longest (Générateur, Protocolos) still fit */
@media (max-width: 380px) { .navlinks { padding-inline: 2px; } .navlinks a { font-size: 0.64rem; letter-spacing: -0.01em; } }
@media (max-width: 340px) { .navlinks a { font-size: 0.58rem; } .navlinks a svg { width: 23px; height: 23px; } }

/* computers (a wide screen worked with a mouse or trackpad): the pages sit in the bar across the top */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  :root { --nav-h: 64px; --dock-bottom: env(safe-area-inset-bottom, 0px); }
  body { padding-bottom: 0; }
  .topbar { background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .topbar-in { gap: 14px; padding-inline: 32px; }
  .brandmark { height: 30px; }
  .topbar .tools { margin-left: 0; }
  .navlinks { position: static; display: flex; gap: 2px; height: auto; margin-left: auto; padding: 0; border: 0; background: none; }
  .navlinks a { flex-direction: row; gap: 8px; padding: 8px 13px; border-radius: 8px; font-size: 0.93rem; }
  .navlinks a svg { display: none; }
  .navlinks a:hover { background: var(--surface); }
  .navlinks a[aria-current="page"] { background: var(--surface-2); }
  .navlinks a:focus-visible { outline-offset: 3px; }
  .navlinks a[data-in="true"]::after { position: static; border: 0; }
}

.tabname { display: none; }

/* From 820px the page opens into two columns: the words, the wave display and Play on the left; the kinds of
   protocol, the protocols and their settings on the right. Every block keeps its place in the page; the page
   itself works out how far down its column each one starts (see the end of the page). */

/* the rhythm display of the guided sessions, made like the generator's */
#sessions { --scope-bg: #050817; --scope-grid: #182043; --scope-label: #8D99C0; }
#sessions .scope { position: relative; border-radius: 10px; overflow: hidden; background: var(--scope-bg); border: 1px solid var(--line); }
#sessions .scope canvas { display: block; width: 100%; height: 180px; }
#sessions .scope .tag { position: absolute; top: 10px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--scope-label); pointer-events: none; }
#sessions .scope .tag.l { left: 12px; }
#sessions .scope .tag.r { right: 12px; }

@media (min-width: 820px) {
  body { background: radial-gradient(1400px 520px at 50% 0, var(--bg-glow), transparent 72%) no-repeat var(--bg); }
  .app { max-width: 1200px; padding-inline: clamp(20px, 3vw, 32px); padding-block: 40px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 48px); row-gap: 0; align-items: start; }

  /* the parts of the page dissolve: their blocks stand straight in the two columns */
  .app .screen:not([hidden]), .app #awScreen:not([hidden]) { display: contents; }
  .app .col-l, .app .col-r { grid-row: 1; align-self: start; min-width: 0; }
  .app .col-l { grid-column: 1; }
  .app .col-r { grid-column: 2; }
  .app :is(#sessions, #pure) .fineprint { grid-column: 1 / -1; grid-row: 2; margin-top: 56px; }
  .app #pure #genLink { grid-row: 3; margin-top: 10px; }
  .app > .legal { grid-column: 1 / -1; grid-row: 4; margin-top: 16px; }

  .app > header h1 { font-size: clamp(2rem, 3.6vw, 2.6rem); letter-spacing: -0.02em; }
  .app > header .titleline + .lede { margin-top: 14px; }
  .app > header .lede { max-width: 50ch; font-size: 1.04rem; line-height: 1.6; }
  .tabname { display: flex; align-items: center; gap: 10px; margin: 30px 0 0; color: var(--k, var(--ink)); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
  .tabname::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
  .app :is(#sessions, #pure) .modeinfo { margin-bottom: 0; max-width: 50ch; min-height: 0; font-size: 1.04rem; line-height: 1.6; }
  .app #pure .awhead .lede { max-width: 50ch; }

  .app > .tabs { gap: 8px; }
  .app > .tabs .tab { padding: 13px 6px; font-size: 0.95rem; }

  /* on the left the wave display stands larger and Play sits right under it, no longer a bar */
  .app :is(#sessions, #pure) .dock { bottom: auto; margin-inline: 0; padding: 0; border: 0; background: none; }
  .app :is(#sessions, #pure) .scope canvas { height: 260px; }
}

/* the volume sits in the bar with Start and Play, so it can be changed at any moment of a session */
.dockvol { display: flex; align-items: center; gap: 12px; }
.dockvol .label { flex: none; }
.dockvol input[type="range"], #awScreen .dockvol input[type="range"] { flex: 1; width: auto; min-width: 0; }
.dockvol output { flex: none; min-width: 4ch; text-align: right; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* the 7-day routine of the Binaural and Isochronic tabs: the same look as the Awakening screen's */
#sessions { --c-matrix: #E3A0BE; --c-routine: #B7A2FF; --c-progress: #5FD3C0; --c-morning: #F2B84B; --c-night: #9DB4FF; --ok: #5FD3C0; }
#sessions .next {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
#sessions .next[data-phase="ready"], #sessions .next[data-phase="due"] {
  border-color: var(--c-morning);
  background: color-mix(in srgb, var(--c-morning) 10%, var(--surface));
}
#sessions .next[data-phase="ready"] .label, #sessions .next[data-phase="due"] .label { color: var(--c-morning); }
#sessions .next[data-phase="session"] { border-color: var(--c-routine); }
#sessions .next[data-phase="session"] .label { color: var(--c-routine); }
#sessions .next[data-phase="complete"] .label { color: var(--ok); }
#sessions .nexttitle { margin: 0; font-weight: 600; font-size: 1.05rem; }
#sessions .nextwhen { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 56ch; }
#sessions .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#sessions .btn {
  padding: 9px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
}
#sessions a.btn { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
#sessions .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
#sessions .actions.flat { margin-top: 0; }
#sessions .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#sessions .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--tab-c);
}
#sessions .tab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tab-c); flex: none; }
#sessions .tab[data-mode="matrix"] { --tab-c: var(--c-matrix); }
#sessions .tab[data-mode="routine"] { --tab-c: var(--c-routine); }
#sessions .tab[data-mode="progress"] { --tab-c: var(--c-progress); }
#sessions .tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--tab-c) 16%, var(--surface-2));
  border-color: var(--tab-c);
  font-weight: 600;
}
#sessions .engine {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--mode);
}
#sessions .engine::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mode); flex: none; }
#sessions .engine small { font-family: var(--font-mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#sessions .engine.plain { color: var(--ink); }
#sessions .engine.plain::before { background: var(--accent); }
#sessions .sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
#sessions .session {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
  min-width: 0;
}
#sessions .session[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mode) 16%, var(--surface-2));
  border-color: var(--mode);
}
#sessions .shead {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
#sessions .shead .dur { margin-left: auto; }
#sessions .sfreq { font-size: 0.88rem; color: var(--muted); }
#sessions .sfreq b { font-family: var(--font-mono); font-weight: 500; font-size: 1.5rem; color: var(--mode); font-variant-numeric: tabular-nums; }
#sessions .squote { font-size: 1.05rem; line-height: 1.4; text-wrap: balance; }
#sessions .sdone { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok); }
#sessions .progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
}
#sessions .linkbtn { background: none; border: 0; padding: 4px 0; color: var(--accent); text-decoration: underline; font-size: 0.82rem; }
#sessions .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#sessions .stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}
#sessions .stat b { font-family: var(--font-mono); font-weight: 500; font-size: 1.7rem; line-height: 1.1; color: var(--mode); font-variant-numeric: tabular-nums; }
#sessions .stat span { font-size: 0.74rem; color: var(--muted); }
#sessions .bar { height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
#sessions .bar span { display: block; height: 100%; width: 0; background: var(--mode); }
#sessions .motiv { margin: 0; font-size: 1.02rem; text-wrap: balance; }
#sessions .rows { display: flex; flex-direction: column; gap: 6px; }
#sessions .drow { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
#sessions .drow .dname { align-self: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
#sessions .cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  min-width: 0;
}
#sessions .cell .cf { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
#sessions .cell .cs { font-size: 0.72rem; color: var(--muted); }
#sessions .cell.done { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); }
#sessions .cell.done .cs { color: var(--ok); }
#sessions .cell.upnext { border-color: var(--c-morning); }
#sessions .cell.upnext .cs { color: var(--c-morning); }
#sessions .preset-group { display: flex; flex-direction: column; gap: 8px; }
#sessions .presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
#sessions .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  min-width: 0;
}
#sessions .chip b { font-family: var(--font-mono); font-weight: 500; font-size: 0.98rem; font-variant-numeric: tabular-nums; }
#sessions .chip span { font-size: 0.72rem; color: var(--muted); }
#sessions .chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mode) 16%, var(--surface-2));
  border-color: var(--mode);
}
#sessions .chip[aria-pressed="true"] b { color: var(--mode); }
#sessions .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; }
#sessions .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
#sessions .dot.m { background: var(--c-morning); }
#sessions .dot.n { background: var(--c-night); }
#sessions .rmode[hidden], #sessions #chooser[hidden], #sessions #detail[hidden] { display: none; }
#sessions .rmode { display: flex; flex-direction: column; gap: 16px; }
#sessions .session .squote { font-weight: 600; }
@media (max-width: 380px) { #sessions .tab { padding: 10px 3px; gap: 5px; font-size: 0.84rem; } }

/* fix (Oct 2026): the footer always comes after every section, whichever tab is open.
   It had a fixed grid row, so the sections of the open tab (which flow into the page grid) were placed below it. */
.app > footer.legal { grid-row: auto; order: 999; }
.app :is(#sessions, #pure) .fineprint { grid-row: auto; order: 998; }

/* Oct 2026: band headings in the lists, the single-frequency pure tone protocols */
.plgroup { margin: 14px 0 2px; }
.protolist .plgroup:first-child, #pureLib > .plgroup:first-child { margin-top: 0; }
.pnote { margin: 0 0 8px; font-size: 0.8rem; color: var(--muted); }
#pureLibBox .protolist { margin-bottom: 6px; }
#pureLibNow { margin: 0 0 8px; }

/* the pure tone protocol: no engine choice, beat or instructions under it (Oct 2026) */
#awScreen #beatBlock, #awScreen #quick { display: none !important; }

/* 14 Oct 2026: every protocol and every group opens and closes on its own */
.chev { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; color: var(--muted); }
.proto.acc { position: relative; padding-right: 42px; }
.proto.acc .chev { position: absolute; right: 12px; top: 50%; margin-top: -9px; }
.proto.acc[aria-expanded="true"] .chev, .pgrouphead[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--mode); }
.pgrouphead { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.pgrouphead .pgname { flex: 1; font-weight: 600; font-size: 0.95rem; }
.pgrouphead .pgcount { font-family: var(--font-mono); font-size: 0.75rem; color: var(--mode); }
.pgrouphead[aria-expanded="true"] { border-color: color-mix(in srgb, var(--mode) 60%, var(--line)); }
.pgroupbody { display: flex; flex-direction: column; gap: 6px; padding: 0 0 6px 10px; border-left: 2px solid color-mix(in srgb, var(--mode) 40%, transparent); margin-left: 6px; }
.pgroupbody[hidden] { display: none; }
.purerest[hidden] { display: none !important; }

/* 14 Oct 2026: the same header for every list; a sounding one shows a dot */
.pgrouphead.live .pgname::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--mode); vertical-align: 1px; }
#pureList, #pureRestA, #pureRestB { gap: 6px; }
#pureLibBox #pureLibLabel { display: none; }

/* 14 Oct 2026: the pure tone protocols in one window; what a row holds sits indented under it, as in the band groups */
.purewin #pureList { display: flex; flex-direction: column; gap: 6px; }
.purewin .prow1 { display: flex; flex-direction: column; gap: 6px; }
.purewin .pgbody { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 8px 12px; margin-left: 6px; border-left: 2px solid color-mix(in srgb, var(--mode) 40%, transparent); }
.purewin .pgbody[hidden] { display: none; }
#awScreen .purewin .pgbody > .panel, #awScreen .purewin .pgbody > .next, .purewin .pgbody > .panel { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.purewin .pgbody > .tabs { margin: 0; }
.purewin .pgbody .pnote { margin: 0; }

/* 14 Oct 2026: each group and protocol in its own colour, like the protocol titles and their labels */
.pgrouphead .pgname { color: var(--g, var(--ink)); }
.pgrouphead .pgcount, .pgrouphead .chev { color: var(--g, var(--mode)); }
.pgrouphead { border-left: 3px solid var(--g, var(--line)); }
.pgrouphead:hover { background: color-mix(in srgb, var(--g, var(--mode)) 8%, var(--surface-2)); }
.pgrouphead[aria-expanded="true"] { border-color: var(--g, var(--mode)); background: color-mix(in srgb, var(--g, var(--mode)) 12%, var(--surface-2)); }
.pgrouphead[aria-expanded="true"] .chev { color: var(--g, var(--mode)); }
.pgroupbody, .purewin .pgbody { border-left-color: color-mix(in srgb, var(--g, var(--mode)) 55%, transparent); }
.pgroupbody .proto[aria-pressed="true"], .purewin .pgbody .proto[aria-pressed="true"] { border-color: var(--g, var(--mode)); background: color-mix(in srgb, var(--g, var(--mode)) 14%, var(--surface-2)); }
.pgroupbody .proto b, .purewin .pgbody .proto b { color: var(--ink); }
.pgroupbody .proto:hover, .purewin .pgbody .proto:hover { border-color: color-mix(in srgb, var(--g, var(--mode)) 50%, var(--line)); }
.pgrouphead.live .pgname::after { background: var(--g, var(--mode)); }

/* 16 Oct 2026 · layering in the pure tone window */
.layerbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--mode, #8FD3FF) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--mode, #8FD3FF) 6%, transparent); }
.layerbar .lswitch { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border: 1px solid rgba(143, 208, 255, 0.25); border-radius: 999px; background: rgba(6, 28, 61, 0.6); color: inherit; font: inherit; font-size: 0.88rem; cursor: pointer; }
.layerbar .lswitch i { position: relative; width: 30px; height: 16px; border-radius: 999px; background: #1D4A82; transition: background 0.2s; }
.layerbar .lswitch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #CFE6FF; transition: transform 0.2s; }
.layerbar .lswitch[aria-pressed="true"] i { background: var(--mode, #8FD3FF); }
.layerbar .lswitch[aria-pressed="true"] i::after { transform: translateX(14px); background: #04112A; }
.layerbar .lswitch em { font: 600 0.62rem/1 var(--font-mono, monospace); font-style: normal; letter-spacing: 0.1em; padding: 3px 6px; border-radius: 999px; border: 1px solid rgba(143, 208, 255, 0.3); }
.layerbar .lswitch[aria-pressed="true"] em { background: var(--mode, #8FD3FF); color: #04112A; border-color: transparent; }
.layerbar .lcap { margin: 0; flex: 1 1 200px; font-size: 0.8rem; color: var(--muted); }
.layerbar .lchips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.layerbar .lchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border: 1px solid color-mix(in srgb, var(--mode, #8FD3FF) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--mode, #8FD3FF) 14%, transparent); color: inherit; font: 0.78rem/1.2 var(--font-mono, monospace); cursor: pointer; }
.layerbar .lchip b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(4, 17, 42, 0.5); font-weight: 400; }
.layerbar .lchip:hover b { background: #FF8A95; color: #04112A; }
.layerbar .lclear { padding: 4px 10px; border: 1px solid rgba(143, 208, 255, 0.25); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 0.78rem; cursor: pointer; }
.layerbar .lclear:hover { color: #fff; border-color: #8FD0FF; }

/* 16 Oct 2026 · sessions inside Matrix and Diamond */
.sessbox { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed rgba(143, 208, 255, 0.2); }
.sessbox .sesslbl { margin: 6px 0 0; }
.sessbox .lswitch { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border: 1px solid rgba(143, 208, 255, 0.25); border-radius: 999px; background: rgba(6, 28, 61, 0.6); color: inherit; font: inherit; font-size: 0.88rem; cursor: pointer; }
.sessbox .lswitch i { position: relative; width: 30px; height: 16px; border-radius: 999px; background: #1D4A82; }
.sessbox .lswitch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #CFE6FF; transition: transform 0.2s; }
.sessbox .lswitch[aria-pressed="true"] i { background: var(--g, var(--mode)); }
.sessbox .lswitch[aria-pressed="true"] i::after { transform: translateX(14px); background: #04112A; }
.sessbox .lswitch em { font: 600 0.62rem/1 var(--font-mono, monospace); font-style: normal; letter-spacing: 0.1em; padding: 3px 6px; border-radius: 999px; border: 1px solid rgba(143, 208, 255, 0.3); }
.sessbox .lswitch[aria-pressed="true"] em { background: var(--g, var(--mode)); color: #04112A; border-color: transparent; }
.sessbox .protolist { display: flex; flex-direction: column; gap: 6px; }
.sessrow { display: flex; gap: 6px; align-items: stretch; }
.sessrow .proto { flex: 1; }
.sessrow:not(.tonerow) .proto span { font-family: var(--font-mono, monospace); font-size: 0.76rem; }
.sessdel { flex: none; width: 36px; border: 1px solid rgba(143, 208, 255, 0.2); border-radius: 10px; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.sessdel:hover { color: #04112A; background: #FF8A95; border-color: transparent; }
.sbnew { align-self: flex-start; padding: 8px 14px; border: 1px dashed color-mix(in srgb, var(--g, var(--mode)) 60%, transparent); border-radius: 10px; background: transparent; color: var(--g, var(--mode)); font: inherit; font-size: 0.88rem; cursor: pointer; }
.sbnew:hover { background: color-mix(in srgb, var(--g, var(--mode)) 10%, transparent); }
.sessbuild { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--g, var(--mode)) 40%, transparent); border-radius: 12px; background: rgba(6, 28, 61, 0.5); }
.sessbuild .label { margin: 0; }
.sbname { padding: 8px 10px; border: 1px solid rgba(143, 208, 255, 0.25); border-radius: 8px; background: #061C3D; color: inherit; font: inherit; }
.sbtones { display: flex; flex-wrap: wrap; gap: 6px; }
.sbtones button { padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--g, var(--mode)) 45%, transparent); border-radius: 999px; background: transparent; color: inherit; font: 0.8rem/1 var(--font-mono, monospace); cursor: pointer; }
.sbtones button:hover { background: color-mix(in srgb, var(--g, var(--mode)) 18%, transparent); }
.sbsteps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.sbsteps li { padding-left: 4px; }
.sbsteps li > * { vertical-align: middle; }
.sbsteps li span { display: inline-block; min-width: 82px; font-family: var(--font-mono, monospace); font-size: 0.85rem; }
.sbsteps select { margin: 0 6px; padding: 4px 6px; border: 1px solid rgba(143, 208, 255, 0.25); border-radius: 6px; background: #061C3D; color: inherit; font: inherit; font-size: 0.82rem; }
.sbsteps li button { width: 26px; height: 26px; border: 1px solid rgba(143, 208, 255, 0.2); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.sbtotal { margin: 0; font: 0.78rem var(--font-mono, monospace); color: var(--muted); }
.sbact { display: flex; gap: 8px; }
.sbsave { padding: 8px 18px; border: 0; border-radius: 10px; background: var(--g, var(--mode)); color: #04112A; font: inherit; font-weight: 600; cursor: pointer; }
.sbsave[disabled] { opacity: 0.4; cursor: default; }
.sbcancel { padding: 8px 14px; border: 1px solid rgba(143, 208, 255, 0.25); border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }

/* 16 Oct 2026 · wave shape for the pure tones, under the display (Pure tones tab only) */
.waverow { display: none; }
.app[data-mode="pure"] .waverow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.waverow .label { margin-right: 4px; }
.waverow button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(143, 208, 255, 0.22); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 0.84rem; cursor: pointer; }
.waverow button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.waverow button:hover { border-color: rgba(143, 208, 255, 0.5); }
.waverow button[aria-pressed="true"] { border-color: var(--mode, #E3A0BE); background: color-mix(in srgb, var(--mode, #E3A0BE) 18%, transparent); color: #fff; }

/* 16 Oct 2026 · a wave shape per tone (layered chips, own session steps) */
.layerbar .lchip { padding: 3px 4px 3px 4px; gap: 4px; cursor: default; }
.layerbar .lchip .lx { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(4, 17, 42, 0.5); color: inherit; font-size: 0.8rem; cursor: pointer; }
.layerbar .lchip .lx:hover { background: #FF8A95; color: #04112A; }
.lwave { display: inline-grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 1px solid rgba(143, 208, 255, 0.25); border-radius: 999px; background: rgba(4, 17, 42, 0.45); color: rgba(207, 230, 255, 0.6); cursor: pointer; vertical-align: middle; }
.lwave svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lwave.own { color: #fff; border-color: var(--g, var(--mode, #E3A0BE)); background: color-mix(in srgb, var(--g, var(--mode, #E3A0BE)) 25%, transparent); }
.lwave:hover { color: #fff; }
.sbsteps .lwave { margin-left: 4px; }
.sessrow .proto span svg { width: 13px; height: 13px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sessbuild .sbsave { color: #04112A !important; opacity: 1; } .sessbuild .sbsave[disabled] { opacity: 0.4; }

/* layering inside each family */
.pgbody > .layerbar { margin: 0 0 4px; }

/* 16 Oct 2026 · the wave button beside each tone */
.tonerow .lwave.big { flex: none; width: 40px; height: auto; border-radius: 10px; }
.tonerow .lwave.big svg { width: 18px; height: 18px; }
.tonerow .lwave[hidden] { display: none; }

/* rename a saved session */
.sessdel.ren svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sessdel.ren:hover, .sessdel.ok:hover { background: var(--g, var(--mode)); color: #04112A; }
.sessrow .sbrename { flex: 1; min-width: 0; }