/* public/academy-hall.css — the look of the room, the yin triad (docs/astras-palace/01-throne.md, "The six
   conformations, resolved — two triads"): the spine (Jueyin), the record with the console attached (Shaoyin), the Eye
   (Taiyin), and the room's own palettes, cut out of public/yiyang-proofs.html on 2026-10-10 so that Yiyang's page and
   the Central Hall (/academy/central) wear one shell. Every rule here was Yiyang's page's, moved, not reworded; the
   card, the terminal and the screen (the yang) stay with the page that owns them. The [Y] lines are Yuriy's, exact.
   Engine: public/academy-hall.js. */

/* Every color is a token; the three palettes redefine the tokens. */
:root {
  --bg: #0B1530; --bg-2: #0F1B3C; --panel: #14224A; --panel-2: #1A2A57; --line: rgba(224,184,76,0.22);
  --gold: #E0B84C; --off: #F4EEDD; --mute: #B8B9BF; --x: #FF6B6B; --y: #FFFFFF; --z: #6FA8FF;
  --ok: #7FD39B; --bad: #FF8A80; --paper-1: #101C40; --paper-2: #0D1838; --veil: rgba(6,10,24,0.72);
  --p-wood: #7FD39B; --p-fire: #FF8A80; --p-earth: #E0B84C; --p-metal: #C9CED8; --p-water: #6FA8FF;
  --f-display: "Spectral", Georgia, serif; --f-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-zh: "Ma Shan Zheng", "Noto Serif SC", "Songti SC", serif; --f-zh-text: "Noto Serif SC", "Songti SC", serif;
  --hdr: 118px; --stage-min: 240px;
  color-scheme: dark;
}
body[data-theme="oxblood"] {
  --bg: #2A0A12; --bg-2: #33101A; --panel: #3E1220; --panel-2: #4A1828; --line: rgba(230,190,85,0.24);
  --gold: #E6BE55; --off: #F6EFE0; --mute: #CDB8B0; --x: #FF7B72; --y: #FFFFFF; --z: #7DB4FF;
  --ok: #8FD9A8; --bad: #FF9A90; --paper-1: #350E18; --paper-2: #2F0C15; --veil: rgba(26,6,11,0.74);
  --p-wood: #8FD9A8; --p-fire: #FF9A90; --p-earth: #E6BE55; --p-metal: #D9CCC6; --p-water: #7DB4FF;
}
body[data-theme="ink"] {
  --bg: #0A0A0C; --bg-2: #111114; --panel: #17161A; --panel-2: #201F24; --line: rgba(221,182,80,0.22);
  --gold: #DDB650; --off: #F2EDE0; --mute: #A9A69E; --x: #FF4D4D; --y: #FFFFFF; --z: #5E9BFF;
  --ok: #77CF92; --bad: #FF7A70; --paper-1: #141417; --paper-2: #101012; --veil: rgba(4,4,6,0.76);
  --p-wood: #77CF92; --p-fire: #FF7A70; --p-earth: #DDB650; --p-metal: #C4C1BA; --p-water: #5E9BFF;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--off); font-family: var(--f-ui); font-size: 20px; line-height: 1.5;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: background-color .3s ease;
}
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.page { max-width: 1640px; margin: 0 auto; padding: 10px 18px 14px; }
.pip { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.pip.wood { background: var(--p-wood); } .pip.fire { background: var(--p-fire); } .pip.earth { background: var(--p-earth); } .pip.metal { background: var(--p-metal); } .pip.water { background: var(--p-water); }
.note-small { font-size: 13px; color: var(--mute); margin: 6px 0 0; }
.small-btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--off); white-space: nowrap; }
.small-btn:hover { border-color: var(--gold); }
@keyframes blink { 50% { opacity: .25; } }

/* ── the header: the record console ([Y] "make it say the record, and it should go on top") ── */
.console { position: sticky; top: 0; z-index: 30; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; margin-bottom: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.c-bar { display: flex; align-items: center; gap: 10px; padding: 7px 12px; flex-wrap: nowrap; }
.swatch { border: 1.5px solid var(--gold); background: var(--bg); border-radius: 999px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; }
.swatch .sw { display: inline-flex; gap: 4px; }
.swatch .sw i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: .45; display: inline-block; }
.swatch .sw i.on { opacity: 1; box-shadow: 0 0 0 2px var(--off); }
.swatch .sw i[data-t="midnight"] { background: #0B1530; } .swatch .sw i[data-t="oxblood"] { background: #2A0A12; } .swatch .sw i[data-t="ink"] { background: #0A0A0C; }
.swatch .nm { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.brand .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--p-wood); box-shadow: 0 0 0 3px rgba(127,211,155,.18); }
.way-out { color: var(--mute); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.way-out:hover { color: var(--gold); }
.where-mini { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 40px; flex: 1 1 0; }
.where-mini b { color: var(--off); font-family: var(--f-display); font-size: 16px; font-weight: 600; }
.where-mini .zh { font-family: var(--f-zh); color: var(--gold); font-size: 18px; margin-left: 6px; }
.rec-state { font-size: 12.5px; color: var(--mute); white-space: nowrap; max-width: 26ch; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.rec-state[data-state="ok"] { color: var(--ok); } .rec-state[data-state="hold"] { color: var(--gold); } .rec-state[data-state="bad"] { color: var(--bad); }
.rec-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.rec-dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); display: inline-block; }
.rec-dot[data-on="true"] { color: var(--bad); } .rec-dot[data-on="true"] i { background: var(--bad); animation: blink 1.2s infinite; }
.rec-btn { border: 1.5px solid var(--bad); background: transparent; color: var(--bad); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.rec-btn[aria-pressed="true"] { background: var(--bad); color: var(--bg); }
.stop-btn { border: 1.5px solid var(--gold); background: transparent; color: var(--gold); border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.stop-btn:hover { background: rgba(255,255,255,.05); }
.stop-btn[disabled] { opacity: .4; cursor: default; }
/* the Shaoyin: a small pill in the top layer of the header, between the Academy's name and the recording, always
   shown (the class, the consent, the language, the last send, in short); it expands into a panel holding the layers
   and the records this class has held ([Y] "The shaoyin should live in the top layer of the header… It should fit
   squarely between where the recording lives and where it says Tesseract academy.") */
.shaoyin { flex: none; }
.sh-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px; padding: 4px 10px 4px 9px; font-size: 12px; font-weight: 600; color: var(--mute); white-space: nowrap; max-width: 100%; }
.sh-pill:hover, .sh-pill[aria-expanded="true"] { border-color: var(--gold); }
.sh-pill .sh-k { color: var(--gold); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.sh-pill .sh-m { display: inline-flex; align-items: center; gap: 4px; }
.sh-pill .sh-m + .sh-m::before { content: "·"; opacity: .5; margin-right: 2px; }
.sh-m[data-state="ok"] { color: var(--ok); } .sh-m[data-state="hold"] { color: var(--gold); } .sh-m[data-state="bad"] { color: var(--bad); }
.sh-pill .sh-caret { font-size: 10px; opacity: .7; }
.sh-panel { position: fixed; z-index: 60; width: min(640px, calc(100vw - 20px)); background: var(--panel); border: 1.5px solid var(--gold); border-radius: 16px; padding: 10px 12px 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); font-size: 12.5px; color: var(--mute); }
.sh-panel[hidden] { display: none; }
.sh-panel h4 { margin: 8px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.sh-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; }
.sh-item { white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sh-item[data-state="ok"] { color: var(--ok); } .sh-item[data-state="hold"] { color: var(--gold); } .sh-item[data-state="bad"] { color: var(--bad); }
.sh-btn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; color: var(--off); }
.sh-btn:hover { border-color: var(--gold); }
.sh-btn[data-state="ok"] { border-color: var(--ok); color: var(--ok); } .sh-btn[data-state="hold"] { border-color: var(--gold); color: var(--gold); } .sh-btn[data-state="bad"] { border-color: var(--bad); color: var(--bad); }
.sh-lang { display: inline-flex; align-items: center; gap: 5px; }
.sh-lang select { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--off); font-size: 12px; padding: 1px 4px; }
.sh-heard { flex: 1 1 100%; color: var(--off); font-style: italic; white-space: normal; }
.sh-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.sh-list li { border-left: 3px solid var(--line); padding-left: 8px; color: var(--mute); }
.sh-list li[data-kind="transcript"] { border-color: var(--z); color: var(--off); } .sh-list li[data-kind="wrong"] { border-color: var(--bad); } .sh-list li[data-kind="right"] { border-color: var(--ok); } .sh-list li[data-kind="flag"] { border-color: var(--gold); }
.sh-list .t { color: var(--gold); font-weight: 700; margin-right: 4px; }
.c-line { display: flex; align-items: flex-end; gap: 8px; padding: 0 12px 6px; }
.console[data-open="false"] .c-line, .console[data-open="false"] .c-pull { display: none; }
.c-field { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 6px; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 16px; padding: 4px 6px; }
.c-field:focus-within { border-color: var(--gold); }
.c-field textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; padding: 7px 4px; font-size: 15px; line-height: 1.4; min-height: 36px; max-height: 120px; outline: none; color: var(--off); }
.c-ico { width: 38px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); display: grid; place-items: center; font-size: 17px; flex: none; }
.c-ico:hover { border-color: var(--gold); }
.c-ico[aria-pressed="true"] { border-color: var(--bad); color: var(--bad); animation: blink 1.4s infinite; }
.c-save { border: 0; background: var(--gold); color: var(--bg); border-radius: 12px; padding: 8px 14px; font-weight: 700; font-size: 14px; flex: none; }
.c-pull-btn { width: 100%; border: 0; border-top: 1px dashed var(--line); background: transparent; color: var(--mute); font-size: 12.5px; font-weight: 700; padding: 5px; letter-spacing: .04em; border-radius: 0 0 22px 22px; }
.c-pull-btn:hover { color: var(--gold); }
.console[data-open="false"] .c-pull-btn { display: none; }
.c-pull { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .9fr); gap: 14px; padding: 4px 12px 12px; border-top: 1px dashed var(--line); }
.c-pull[hidden] { display: none; }
.c-pull h4 { margin: 8px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); }
.c-pull .box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.c-pull input { width: 100%; margin-top: 8px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-size: 13.5px; }
.why-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--z); margin-bottom: 4px; }
.log { list-style: none; margin: 0; padding: 0; max-height: 210px; overflow: auto; font-size: 13px; color: var(--mute); display: flex; flex-direction: column; gap: 4px; }
.log li { border-left: 3px solid var(--line); padding-left: 8px; }
.log li[data-kind="wrong"] { border-color: var(--bad); } .log li[data-kind="right"] { border-color: var(--ok); } .log li[data-kind="flag"] { border-color: var(--gold); }
.end-btn { width: 100%; border: 1.5px solid var(--gold); background: transparent; color: var(--gold); border-radius: 12px; padding: 9px; font-weight: 700; font-size: 14px; margin-top: 6px; }
.end-btn:hover { background: rgba(255,255,255,.05); }

/* ── the three columns ── */
.grid { display: grid; grid-template-columns: 290px minmax(0, 1fr) 82px; gap: 18px; align-items: start; transition: grid-template-columns .28s ease; }
/* the folds (2026-10-12): a folded spine or Eye leaves the grid entirely; its thin bar lives at the edge of the screen */
.grid.spine-closed { grid-template-columns: minmax(0, 1fr) 82px; }
.grid.eye-closed { grid-template-columns: 290px minmax(0, 1fr); }
.grid.spine-closed.eye-closed { grid-template-columns: minmax(0, 1fr); }
.grid.spine-closed > .spine, .grid.eye-closed > .eye { display: none; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }

/* the spine: its own scroll ([Y] "the spine should have its own distinct scroll") */
.spine { position: sticky; top: calc(var(--hdr) + 12px); max-height: calc(100vh - var(--hdr) - 26px); display: flex; flex-direction: column; padding: 12px; min-width: 0; }
.spine-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; flex: none; }
.spine-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.spine-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-right: 4px; }
.grid.spine-closed .spine-body, .grid.spine-closed .spine-head h2 { display: none; }
.grid.spine-closed .spine { padding: 10px 6px; align-items: center; }
.path { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--mute); margin: 0 0 8px; }
.path span:not(:last-child)::after { content: "›"; margin-left: 4px; opacity: .6; }
.path span:last-child { color: var(--gold); font-weight: 600; }
details.curr { border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: 6px 0; margin-bottom: 8px; }
details.curr summary { cursor: pointer; font-size: 13px; color: var(--mute); list-style: none; }
details.curr summary::-webkit-details-marker { display: none; }
details.curr summary::before { content: "▸ "; } details.curr[open] summary::before { content: "▾ "; }
.lessons { list-style: none; margin: 6px 0 0; padding: 0; }
.lessons li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 6px; border-radius: 8px; color: var(--mute); }
.lessons li button { all: unset; cursor: pointer; color: var(--off); }
.lessons li[data-here="true"] { background: rgba(255,255,255,.05); color: var(--off); font-weight: 600; }
.lessons li[data-status="planned"], .lessons li[data-status="reference"] { opacity: .55; }
.chip { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--gold); white-space: nowrap; }
.lessons li[data-status="taught"] .chip { color: var(--mute); }
.classlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); margin: 8px 0 2px; }
.stacks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.stack-btn { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 12px; color: var(--off); }
.stack-btn:hover { background: var(--panel-2); }
.stack-btn[aria-current="true"] { background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--gold); font-weight: 700; }
.stack-n { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--gold); }
.stack-btn[data-done="true"] .stack-n { background: var(--gold); color: var(--bg); }
.stack-t { display: flex; flex-direction: column; min-width: 0; }
.stack-t span { font-size: 14px; line-height: 1.25; }
.stack-t small { font-size: 10.5px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.leaves { list-style: none; margin: 2px 0 6px 34px; padding: 0; border-left: 1px dashed var(--line); }
.leaves button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 3px 8px; font-size: 13px; color: var(--mute); border-radius: 6px; }
.leaves button[aria-current="true"] { color: var(--off); background: rgba(255,255,255,.06); }
.leaves button[data-solved="true"] .pip { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ok); }

/* ── the Eye: every lens opens over the card ── */
.eye { position: sticky; top: calc(var(--hdr) + 12px); display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 12px 8px; }
.eye-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--mute); }
.lens { width: 62px; height: 58px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--panel-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; }
.lens:hover { border-color: var(--gold); }
.lens[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.lens .g { font-size: 18px; line-height: 1; }
.lens .l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--off); }
.overlay { position: absolute; top: 0; bottom: 0; left: 30px; right: 30px; z-index: 40; background: var(--veil); border-radius: 28px; display: flex; align-items: flex-start; justify-content: center; padding: 22px; backdrop-filter: blur(3px); }
.overlay[hidden] { display: none; }
.ov-card { width: min(900px, 100%); max-height: 100%; overflow: auto; background: var(--panel); border: 1.5px solid var(--gold); border-radius: 22px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ov-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.ov-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--gold); }
.x-btn { background: transparent; border: 1px solid var(--line); border-radius: 10px; width: 34px; height: 32px; font-size: 16px; color: var(--mute); }
.ov-body { font-size: 16.5px; line-height: 1.55; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15.5px; }
.keys kbd { font-family: var(--f-ui); font-weight: 700; color: var(--gold); border: 1px solid var(--line); border-radius: 7px; padding: 1px 8px; background: var(--bg-2); white-space: nowrap; }
.lookup-chip { position: fixed; z-index: 80; border: 1.5px solid var(--gold); background: var(--panel); color: var(--gold); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.lookup-chip[hidden] { display: none; }

/* ── narrow screens: one column, the card first ── */
@media (max-width: 1080px) {
  .grid, .grid.spine-closed, .grid.eye-closed, .grid.spine-closed.eye-closed { grid-template-columns: minmax(0, 1fr); }
  /* the phone: the spine is a drawer from the left edge, the Eye a bar along the bottom; both fold away */
  .grid > .spine { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 340px); max-height: none; z-index: 66; border-radius: 0 20px 20px 0; box-shadow: 0 0 0 100vmax var(--veil); }
  .grid > .eye { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); top: auto; z-index: 64; box-shadow: 0 -10px 30px rgba(0,0,0,.45); padding: 8px; gap: 8px; }
  .grid > .eye .eye-title { display: none; }
  .grid > .eye .lens { width: 54px; height: 50px; }
  .grid > .eye .screen-ctl { width: auto; flex-direction: row; padding: 6px 8px; }
  .grid > .eye .screen-ctl .sc-grid { grid-template-columns: repeat(5, auto); }
  .grid > .eye .screen-ctl .sc-wide { grid-column: auto; width: auto; padding: 0 7px; }
  body:not(.eye-folded) .page { padding-bottom: 120px; }
  .grid > main { order: 1; } .grid > .eye { order: 2; } .grid > .spine { order: 3; }
  .eye { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .overlay { left: 0; right: 0; padding: 10px; position: fixed; top: 10px; bottom: 10px; }
  .c-pull { grid-template-columns: 1fr; }
  .c-bar { flex-wrap: wrap; }
  .console { position: static; }
  .where-mini { flex-basis: 100%; order: 9; }
}
@media (max-width: 560px) { body { font-size: 16px; } .page { padding: 8px 10px 30px; } .brand span:last-child { display: none; } .c-bar { flex-wrap: wrap; } .where-mini { flex-basis: 100%; order: 9; } .sh-pill { font-size: 11.5px; gap: 5px; padding: 3px 8px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* compactBar (2026-10-11 20:15): the console in the top bar, nothing to its left but the palette */
.console.compact .brand, .console.compact .way-out, .console.compact .where-mini, .console.compact .sh-pill { display: none; }
.console.compact .c-bar .c-line { flex: 1; min-width: 0; padding: 0; align-items: center; }
.console.compact .c-bar .c-line .c-field { flex: 1; min-width: 0; }
.console.compact .c-pull-btn { margin-top: 0; }
@media (max-width: 760px) { .console.compact .c-bar { flex-wrap: wrap; } .console.compact .c-bar .c-line { order: 9; flex-basis: 100%; } }

/* 2026-10-11 21:01: the console is always there in the compact bar (Hide folds only what is under it); glyph icons; the pull-down as one small button */
.console.compact[data-open="false"] .c-bar .c-line { display: flex; }
.console.compact .c-ico { color: var(--off); }
.console.compact .c-pull-btn.pull-mini { width: 34px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--off); font-size: 14px; display: grid; place-items: center; flex: none; }
.console.compact .c-pull-btn.pull-mini:hover { border-color: var(--gold); color: var(--gold); }
.console.compact[data-open="false"] .c-pull-btn.pull-mini { display: grid; }

/* ── the folds (the Sovereign, 2026-10-12 10:26–10:28): the record shrinks to a thin bar at the top of the screen, the spine to a
   thin bar at the left edge, each with one arrow to bring it back; the Eye is one button (a picture of an eye) beside Hide ── */
.console[data-open="false"], .console.compact[data-open="false"] { display: none; }
body.top-folded .page { padding-top: 16px; }
.fold-top { position: fixed; top: 0; left: 0; right: 0; height: 6px; z-index: 62; background: var(--panel-2); border-bottom: 1.5px solid var(--gold); }
.fold-left { position: fixed; top: 0; bottom: 0; left: 0; width: 6px; z-index: 62; background: var(--panel-2); border-right: 1.5px solid var(--gold); }
.fold-top[hidden], .fold-left[hidden] { display: none; }
.fold-tab { position: absolute; display: grid; place-items: center; padding: 0; background: var(--panel-2); border: 1.5px solid var(--gold); color: var(--gold); font-size: 15px; line-height: 1; opacity: .8; }
.fold-tab:hover, .fold-tab:focus-visible { opacity: 1; background: var(--panel); }
/* 10:55: "The arrow sticks out too much from the tab both on the side and on top. Move the arrow on the spine to the top and the
   arrow on the header to the right." */
.fold-top .fold-tab { top: 3px; right: 16px; width: 34px; height: 16px; font-size: 12px; border-top: 0; border-radius: 0 0 9px 9px; }
.fold-top .fold-eye { right: 58px; width: 34px; color: var(--off); }
.fold-top .fold-eye svg { width: 15px; height: 15px; }
.fold-top .fold-eye[aria-pressed="true"] { color: var(--gold); }
.fold-left .fold-tab { left: 3px; top: 10px; width: 16px; height: 32px; font-size: 12px; border-left: 0; border-radius: 0 9px 9px 0; }
.fold-top[data-rec="true"] { background: var(--bad); border-color: var(--bad); animation: blink 1.6s infinite; }
.fold-top[data-rec="true"] .fold-tab:not(.fold-eye) { border-color: var(--bad); color: var(--bad); }
.eye-btn { display: inline-grid; place-items: center; width: 38px; height: 32px; padding: 0; color: var(--mute); }
.eye-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
@media (max-width: 1080px) {
  .console { margin-bottom: 10px; }
}
.why-lead { margin: 0 0 6px; font-family: var(--f-display); font-size: 25px; line-height: 1.35; color: var(--off); }
.why-rest { margin: 0; font-size: 17.5px; line-height: 1.5; color: var(--mute); }
.who-chip { flex: none; font-size: 13px; font-weight: 700; color: var(--gold); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.who-chip[hidden] { display: none; }

/* ── the record in the Eye (2026-10-12 14:27): the Shaoyin pill leaves the bar; the Record lens holds its three parts as tabs,
   one open at a time, each with a line of action words on top ── */
.console.rec-in-eye #shaoyin { display: none; }
.rec-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.rec-tab { font: 700 17px/1.2 var(--f-ui); padding: 10px 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel-2); color: var(--off); cursor: pointer; }
.rec-tab[aria-selected="true"] { border-color: var(--gold); color: var(--bg); background: var(--gold); }
.rec-sum { margin: 0 0 14px; font: 600 20px/1.35 var(--f-display); color: var(--gold); }
.rec-pane .box { background: transparent; border: 0; padding: 0; }
.aq-from { margin: 18px 0 8px; font: 700 18px/1.3 var(--f-ui); color: var(--off); }
.aq-list { margin: 0 0 8px; padding-left: 28px; font: 500 20px/1.45 var(--f-display); color: var(--off); }
.aq-list li { margin: 0 0 10px; }
.aq-none { font-size: 18px; color: var(--off); }
.rec-pane .sh-rows { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; font-size: 16px; }
.rec-pane .sh-list { max-height: 55vh; overflow: auto; font-size: 16px; }
.rec-pane .end-btn, .rec-pane .small-btn { font-size: 16px; }

/* ── the fold arrows (2026-10-12 14:27): "just a bit bigger and a contrasting color from the pallete" — the palette's blue ── */
.fold-top { height: 8px; border-bottom-color: var(--z); }
.fold-left { width: 8px; border-right-color: var(--z); }
.fold-tab { border-color: var(--z); color: var(--bg); background: var(--z); opacity: 1; font-weight: 800; }
.fold-tab:hover, .fold-tab:focus-visible { background: var(--z); filter: brightness(1.15); }
.fold-top .fold-tab { width: 46px; height: 24px; font-size: 17px; }
.fold-top .fold-eye { right: 70px; width: 46px; color: var(--bg); }
.fold-top .fold-eye svg { width: 19px; height: 19px; }
.fold-top .fold-eye[aria-pressed="true"] { color: var(--bg); box-shadow: 0 0 0 2px var(--gold) inset; }
.fold-left .fold-tab { width: 24px; height: 46px; font-size: 17px; }
.fold-top[data-rec="true"] .fold-tab:not(.fold-eye) { background: var(--bad); color: var(--bg); }
/* the panels' own fold buttons, in the same colour so they read as one control */
#spineToggle, #consoleToggle { border-color: var(--z); color: var(--z); font-weight: 700; }
.console.rec-in-eye .c-pull-btn, .console.rec-in-eye .c-pull { display: none !important; }
.rec-pane #consentBtn { display: none; }

/* a deck's stacks and cards dragged into a new order on the spine (2026-10-24; public/academy-order.js): the grip shows a row
   that moves, the row being dragged dims, a line shows where it will land; reset puts the deck's own order back */
.leaves .grip { color: var(--mute); opacity: .55; font-size: 12px; margin-right: -2px; cursor: grab; touch-action: none; user-select: none; }
.leaves li.drag-row:hover .grip { opacity: 1; color: var(--gold); }
.leaves li.dragging { opacity: .4; }
body.spine-dragging, body.spine-dragging * { cursor: grabbing !important; user-select: none; }
.leaves li.drop-before { box-shadow: inset 0 3px 0 var(--gold); }
.leaves li.drop-after { box-shadow: inset 0 -3px 0 var(--gold); }
.order-reset { margin: 4px 0 8px 34px; border: 1.5px solid var(--gold); background: transparent; color: var(--gold); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.order-reset:hover { background: var(--gold); color: var(--bg); }

/* ── scroll bars that fit the room (2026-10-28): [Y] "I want to avoid scrolling but if the scroll bars are going to be there make
   them fit the the outline make them fit the coloration and everything" · "it should be a border I can Mouse over like the scroll
   bars make it make it fit right". A thin bar in the room's own gold on a clear track; under the mouse it darkens on the line's
   track so it can be found and dragged. Every palette brings its own --gold and --line. Written by Claude (Cadence), not
   dictated. ── */
html, .page, .page * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 55%, transparent) transparent; }
.page *:hover { scrollbar-color: var(--gold) color-mix(in srgb, var(--line) 45%, transparent); }
@supports not (scrollbar-color: red blue) {
  .page ::-webkit-scrollbar { width: 10px; height: 10px; }
  .page ::-webkit-scrollbar-track { background: transparent; }
  .page ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
  .page ::-webkit-scrollbar-thumb:hover { background-color: var(--gold); }
}

/* the size dial in the Eye (academy-central.js, sizeDial): A− and A+, the share, and the dial itself */
.size-ctl .size-read { font-variant-numeric: tabular-nums; }
.size-dial { width: 52px; margin: 2px 0 0; accent-color: var(--gold); cursor: pointer; }

/* a subject on the spine folds; open, it shows its newest deck and keeps the earlier ones tucked (academy-central.js) */
.subj-fold { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.subj-fold:hover, .subj-more:hover { color: var(--gold); }
.subj-more { background: none; border: 1px dashed var(--line); border-radius: 10px; padding: 4px 10px; margin: 2px 0 4px; font-size: 12px; color: var(--mute); cursor: pointer; width: 100%; text-align: left; }