/* public/academy-card.css — the card face a deck brings into a room (public/academy-card.js): the card, the screen,
   the terminal, Back and Next. The lesson page's rules (public/yiyang-proofs.html, 2026-10-10), carried over and
   scoped under .face so they never reach the room's own classes; .sheet became .lifted, the terminal .term, the side
   buttons .side, because the room already uses those names. The tokens and palettes are the room's (academy-hall.css).
   Written by Claude, 2026-10-11; not dictated. */
.face[hidden] { display: none !important; }
.face .card { position: relative; height: calc(100vh - var(--hdr) - 38px); min-height: 560px; display: flex; flex-direction: column; padding: 18px 24px 12px; border-radius: 28px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.35), 8px 8px 0 -1px var(--paper-1), 16px 16px 0 -2px var(--paper-2); }
.face .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex: none; }
.face .kicker { font-size: calc(16px * var(--face-text, 1)); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--z); }
.face .card-title { margin: 2px 0 2px; font-family: var(--f-display); font-weight: 600; font-size: calc(clamp(30px, 2.9vw, 46px) * var(--face-text, 1)); line-height: 1.1; color: var(--off); }
.face .sub { margin: 0; color: var(--mute); font-size: calc(22px * var(--face-text, 1)); max-width: 860px; }
.face .badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.face .badge { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: calc(16px * var(--face-text, 1)); font-weight: 700; color: var(--off); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.face .face-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.face .stage { position: relative; flex: 1; min-height: var(--stage-min, 240px); border-radius: 20px; background: var(--bg); border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent); padding: 6px; }
.face .stage-canvas { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; touch-action: none; }
.face .stage-canvas canvas { display: block; }
.face .stage-off { height: 100%; display: grid; place-items: center; color: var(--mute); font-size: calc(19.5px * var(--face-text, 1)); text-align: center; padding: 20px; }
.face .stage.full { position: fixed; inset: 10px; z-index: 70; padding: 8px; box-shadow: 0 0 0 100vmax var(--veil); }
.face .transport { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 6px; z-index: 3; }
.face .transport button { width: 36px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--off); font-size: calc(18px * var(--face-text, 1)); display: grid; place-items: center; opacity: .3; transition: opacity .2s; }
.face .stage:hover .transport button, .face .transport button:focus-visible, .face .stage.full .transport button { opacity: .85; }
.face .transport button:hover { opacity: 1; border-color: var(--gold); }
.face .transport button[data-glow="true"] { border-color: var(--gold); color: var(--gold); opacity: 1; }
.face .term { position: relative; flex: none; border-radius: 20px; background: var(--bg); border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent); padding: 14px 18px; color: var(--off); }
.face .face-body.lifted .term { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 86%; overflow: auto; box-shadow: 0 -16px 40px rgba(0,0,0,.4); }
.face .face-body.lifted[data-sheet="down"] .term { max-height: 104px; overflow: hidden; }
.face .face-body.lifted .stage { margin-bottom: 92px; }
.face .face-body.lifted[data-sheet="down"] .term::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(transparent, var(--bg)); border-radius: 0 0 20px 20px; }
.face .sheet-btn { display: none; }
.face .face-body.lifted .sheet-btn { display: inline-flex; }
.face .term-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; }
.face .term-tag { font-size: calc(15.5px * var(--face-text, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.face .q { font-family: var(--f-display); font-size: calc(28.5px * var(--face-text, 1)); line-height: 1.38; margin: 0 0 12px; color: var(--off); }
.face .opts { display: flex; flex-direction: column; gap: 8px; }
.face .opt { width: 100%; text-align: left; border: 1.5px solid var(--line); background: var(--panel); border-radius: 14px; padding: 11px 14px; font-size: calc(23px * var(--face-text, 1)); font-weight: 500; display: flex; align-items: center; gap: 12px; transition: border-color .15s, transform .15s; }
.face .opt:hover { border-color: var(--gold); transform: translateY(-1px); }
.face .opt .key { width: 28px; height: 28px; border-radius: 8px; background: var(--panel-2); display: grid; place-items: center; font-weight: 700; font-size: calc(17.5px * var(--face-text, 1)); flex: none; color: var(--gold); }
.face .opt[data-state="right"] { border-color: var(--ok); background: rgba(127,211,155,.08); }
.face .opt[data-state="wrong"] { border-color: var(--bad); background: rgba(255,138,128,.07); }
.face .fb { margin-top: 12px; padding: 11px 14px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); font-size: calc(21.5px * var(--face-text, 1)); line-height: 1.45; }
.face .fb[data-ok="true"] { border-color: var(--ok); } .face .fb[data-ok="false"] { border-color: var(--bad); }
.face .fb b { color: var(--gold); }
.face .principle { margin-top: 10px; padding: 11px 14px; border-radius: 14px; border: 1.5px dashed var(--z); background: rgba(111,168,255,.06); font-size: calc(21px * var(--face-text, 1)); line-height: 1.45; }
.face .principle b { color: var(--z); text-transform: uppercase; font-size: calc(15.5px * var(--face-text, 1)); letter-spacing: .12em; display: block; margin-bottom: 2px; }
.face .explain { font-family: var(--f-display); font-size: calc(26px * var(--face-text, 1)); line-height: 1.55; margin: 0; color: var(--off); }
.face .row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.face .answer { border: 0; background: var(--gold); color: var(--bg); font-weight: 700; padding: 9px 18px; border-radius: 12px; font-size: calc(21px * var(--face-text, 1)); }
.face .answer.ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.face .num-in { width: 7ch; padding: 9px 10px; border-radius: 12px; border: 1.5px solid var(--gold); background: var(--panel); font-size: calc(26px * var(--face-text, 1)); text-align: center; }
.face .sentence { font-family: var(--f-display); font-size: calc(27.5px * var(--face-text, 1)); margin: 6px 0; }
.face .blank { display: inline-block; min-width: 76px; padding: 0 8px; border-bottom: 2px solid var(--gold); text-align: center; color: var(--gold); font-weight: 600; }
.face .blank[data-next="true"] { background: rgba(255,255,255,.06); border-radius: 6px 6px 0 0; }
.face .wordbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.face .wbtn { border: 1.5px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 15px; font-size: calc(22px * var(--face-text, 1)); font-weight: 600; }
.face .wbtn:hover { border-color: var(--gold); }
.face .wbtn[disabled] { opacity: .35; cursor: default; }
.face .match { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.face .mbtn { text-align: left; border: 1.5px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 12px; font-size: calc(21px * var(--face-text, 1)); min-height: 42px; display: flex; align-items: center; gap: 8px; }
.face .mbtn[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(224,184,76,.25); }
.face .mbtn[data-paired] { border-color: var(--z); }
.face .mbtn[data-state="right"] { border-color: var(--ok); } .face .mbtn[data-state="wrong"] { border-color: var(--bad); }
.face .pairtag { font-size: calc(15.5px * var(--face-text, 1)); font-weight: 700; color: var(--z); min-width: 1.2em; }
.face .lettertag { font-size: calc(15.5px * var(--face-text, 1)); font-weight: 700; color: var(--gold); min-width: 1.2em; }
.face .order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.face .order li { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); background: var(--panel); border-radius: 12px; padding: 7px 10px; font-size: calc(21.5px * var(--face-text, 1)); }
.face .order li[data-state="wrong"] { border-color: var(--bad); } .face .order li[data-state="right"] { border-color: var(--ok); }
.face .order .n, .face .lines .n { width: 24px; height: 24px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; font-size: calc(15.5px * var(--face-text, 1)); font-weight: 700; color: var(--gold); flex: none; }
.face .order .mv { margin-left: auto; display: flex; gap: 4px; }
.face .order .mv button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; width: 32px; height: 30px; }
.face .lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.face .lines li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; border: 1.5px solid var(--line); background: var(--panel); border-radius: 12px; padding: 7px 10px; font-size: calc(21.5px * var(--face-text, 1)); }
.face .lines li[data-state="right"] { border-color: var(--ok); } .face .lines li[data-state="wrong"] { border-color: var(--bad); }
.face .lines .reason { grid-column: 2 / 4; font-size: calc(18px * var(--face-text, 1)); color: var(--mute); }
.face .lines .done-reason { color: var(--ok); font-size: calc(19px * var(--face-text, 1)); }
.face .walkbar { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.face .walkbar .count { margin-left: auto; color: var(--mute); font-size: calc(17px * var(--face-text, 1)); }
.face .card-foot { flex: none; display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 10px; min-height: 22px; }
.face .dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.face .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.face .dots i[data-here="true"] { background: var(--gold); transform: scale(1.3); }
.face .dots i[data-solved="true"] { background: var(--ok); }
/* the back cover button at the bottom of the card (Cadence, 2026-10-29) */
.face .back-cover-btn { border: 1.5px solid var(--gold); background: transparent; color: var(--gold); border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: calc(13px * var(--face-text, 1)); white-space: nowrap; cursor: pointer; }
.face .back-cover-btn:hover, .face .back-cover-btn[aria-pressed="true"] { background: var(--gold); color: var(--bg); }
.face .back-cover-btn[hidden] { display: none; }
.face .side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 8; width: 48px; height: 92px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-2); color: var(--off); font-size: 34px; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.face .side.prev { left: -28px; } .face .side.next { right: -28px; background: var(--gold); color: var(--bg); border-color: var(--gold); }
.face .side small { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: -18px; }
.face .side[disabled] { opacity: .3; cursor: default; }
.face .note-small { font-size: calc(17px * var(--face-text, 1)); color: var(--mute); margin: 8px 0 0; }
/* the head's right side: the badges, and the tag that marks a card to use again or for another deck */
.face .head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.face .tag-wrap { position: relative; }
.face .tag-btn { border: 1.5px solid var(--line); background: var(--panel-2); color: var(--off); border-radius: 999px; padding: 4px 12px; font-size: calc(17px * var(--face-text, 1)); font-weight: 700; white-space: nowrap; }
.face .tag-btn:hover { border-color: var(--gold); }
.face .tag-btn[data-on="true"] { border-color: var(--gold); color: var(--gold); }
.face .tag-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 280px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--gold); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.face .tag-pop[hidden] { display: none; }
.face .tag-pop b { color: var(--gold); font-size: calc(17px * var(--face-text, 1)); text-transform: uppercase; letter-spacing: .1em; }
.face .tag-row { display: flex; gap: 6px; }
.face .tag-in { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--off); font-size: calc(18px * var(--face-text, 1)); }
.face .tag-say { margin: 0; font-size: calc(17px * var(--face-text, 1)); color: var(--off); min-height: 1em; }
.face .small-btn.ghost { background: transparent; }
/* buttons on the screen, and the panel each opens over the drawing */
.face .screen-btns { position: absolute; left: 14px; top: 12px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 28px); }
.face .screen-btns[hidden] { display: none; }
.face .screen-btn { border: 1.5px solid var(--gold); background: var(--bg); color: var(--off); border-radius: 999px; padding: 5px 13px; font-size: calc(17.5px * var(--face-text, 1)); font-weight: 700; box-shadow: 3px 3px 0 rgba(0,0,0,.55); }
.face .screen-btn:hover { background: var(--panel-2); }
.face .screen-btn[aria-pressed="true"] { background: var(--gold); color: var(--bg); }
.face .screen-panel { position: absolute; left: 14px; bottom: 14px; z-index: 4; width: min(640px, calc(100% - 28px)); max-height: calc(100% - 70px); overflow: auto; padding: 12px 14px; border-radius: 14px; background: var(--bg); color: var(--off); border: 2px solid var(--gold); box-shadow: 6px 6px 0 rgba(0,0,0,.6); font-size: calc(20px * var(--face-text, 1)); line-height: 1.5; }
.face .screen-panel[hidden] { display: none; }
.face .screen-panel p { margin: 6px 0 0; }
.face .sp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.face .sp-head b { color: var(--gold); font-family: var(--f-display); font-size: calc(23.5px * var(--face-text, 1)); }
.face .sp-close { border: 0; background: transparent; color: var(--off); font-size: calc(21px * var(--face-text, 1)); }
/* a cover is all screen: the drawing over the whole card, Back and Next still on its sides */
.face.cover .card-head, .face.cover .term, .face.cover .dots { display: none; }
.face.cover .card { padding: 10px; }
.face.cover .face-body { margin-top: 0; }
.face.cover .stage { padding: 0; border-width: 2px; }
@media (max-width: 1080px) {
  .face .card { height: auto; min-height: 0; padding: 16px 14px 12px; }
  .face .stage { flex: none; height: 300px; }
  .face .face-body.lifted .term { position: relative; max-height: none; overflow: visible; box-shadow: none; }
  .face .face-body.lifted[data-sheet="down"] .term { max-height: none; overflow: visible; }
  .face .face-body.lifted .sheet-btn { display: none; }
  .face .side { position: static; transform: none; width: auto; height: 44px; padding: 0 18px; font-size: calc(21px * var(--face-text, 1)); display: inline-flex; gap: 8px; align-items: center; }
  .face .side small { margin: 0; font-size: calc(15.5px * var(--face-text, 1)); }
  .face .card-foot { justify-content: space-between; }
  .face .match { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .face .stage { height: 250px; } .face .q { font-size: calc(24.5px * var(--face-text, 1)); } }

/* 2026-10-11 20:06 notes: the screen's controls live in the Eye ("Screen"), not on the drawing; the terminal never overlaps
   the screen, it scrolls in its own box; fill gives the card to the screen; inscreen works the terminal inside the screen */
.face .transport { display: none; }
.face .stage.full .transport { display: flex; }
.face .term { max-height: 42%; overflow: auto; }
.face.fill .term { display: none; }
.face.inscreen .stage > .term { position: absolute; inset: 22px 8%; max-height: none; overflow: auto; z-index: 4; display: flex; flex-direction: column; justify-content: center; box-shadow: 6px 6px 0 rgba(0,0,0,.55); }
.face.inscreen .stage > .term > * { width: 100%; max-width: 860px; margin-left: auto; margin-right: auto; }
.face .term-links { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.face .term-links a { color: var(--gold); font-size: calc(19.5px * var(--face-text, 1)); font-weight: 600; text-decoration: none; }
.face .term-links a:hover { text-decoration: underline; }

/* split (2026-10-11 20:28): the screen on the left, the terminal on the right */
@media (min-width: 1081px) {
  .face.split .face-body { flex-direction: row; }
  .face.split .stage { flex: 1.15; }
  .face.split .face-body > .term { flex: 1; max-height: none; overflow: auto; display: flex; flex-direction: column; justify-content: center; }
}
/* full screen: a thin strip on each side for the card before and after (2026-10-11 20:25) */
.face .fs-nav { display: none; }
.face .stage.full .fs-nav { display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 26px; height: 120px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--off); font-size: calc(26px * var(--face-text, 1)); opacity: .55; }
.face .stage.full .fs-nav:hover { opacity: 1; border-color: var(--gold); color: var(--gold); }
.face .stage.full .fs-prev { left: 4px; } .face .stage.full .fs-next { right: 4px; }

/* a Read terminal on top of the screen (10:55 "only on a read terminal"); first ordered for every card (the Sovereign, 2026-10-12 09:51: "we're going to put the terminal
   on top of the screen… now it's like the screen is quite big and your eyes go you have to go all the way down"; 10:05 "on all
   of the cards I want the default to have the terminal on top"). A split card keeps the screen left and the terminal right. */
.face.read-term .face-body > .term { order: -1; }
@media (min-width: 1081px) { .face.split .face-body > .term { order: 0; } }

/* a Read terminal in layers (2026-10-12): the point in one larger sentence, then its parts beneath, each with a small heading */
.face .lead { margin: 0 0 10px; font-family: var(--f-display); font-size: calc(30px * var(--face-text, 1)); line-height: 1.3; color: var(--off); }
.face .parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 22px; }
.face .part { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); padding-left: 10px; }
.face .part-h { font-size: calc(15px * var(--face-text, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.face .part-t { font-size: calc(20px * var(--face-text, 1)); line-height: 1.45; color: var(--mute); }
@media (max-width: 560px) { .face .lead { font-size: calc(26px * var(--face-text, 1)); } }
.face .parts-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.face .parts-nav i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); display: inline-block; }
.face .parts-nav i[data-here="true"] { background: var(--gold); }
.face .parts-btn { border: 1px solid var(--line); background: var(--panel); color: var(--off); border-radius: 999px; padding: 3px 12px; font-size: calc(17px * var(--face-text, 1)); font-weight: 600; }
.face .parts-btn:hover:not([disabled]) { border-color: var(--gold); color: var(--gold); }
.face .parts-btn[disabled] { opacity: .35; cursor: default; }

/* the cover, a law (the Sovereign, 2026-10-12 12:41: "the cover should be completely filling the screen as a rule law every time with a
   button on the middle right end that says open. Make it about twice as big and more square than the current one. Like a door knob. More
   ornate. Make it look Hutsel… There is no back button on the cover."). The cover fills the whole window; Back is gone; Next becomes Open,
   a square knob in Hutsul colours: a carved diamond in red, green, yellow and black on dark wood. */
.face.cover .card { position: fixed; inset: 0; z-index: 75; height: auto; min-height: 0; border-radius: 0; padding: 0; border: 0; box-shadow: none; }
.face.cover .face-body, .face.cover .stage { height: 100%; margin: 0; border-radius: 0; border: 0; padding: 0; }
.face.cover .stage-canvas { border-radius: 0; }
.face.cover .side.prev, .face.cover .card-foot .dots, .face.cover .fs-nav { display: none; }
.face.cover .side.next { position: fixed; right: 4vw; top: 50%; left: auto; transform: translateY(-50%); z-index: 80; width: 132px; height: 148px; border-radius: 22px; padding: 14px 10px 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: #3a1f12; border: 3px solid #e2b23a; color: #f6e7c6; box-shadow: 0 0 0 5px #1b0d07, 0 0 0 8px #c8372d, 0 18px 40px rgba(0,0,0,.55); font-size: 0; }
.face.cover .side.next .knob { width: 84px; height: 84px; display: block; background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='2' y='2' width='96' height='96' rx='14' fill='%231b0d07'/><g transform='rotate(45 50 50)'><rect x='22' y='22' width='56' height='56' fill='%23c8372d'/><rect x='30' y='30' width='40' height='40' fill='%23e2b23a'/><rect x='38' y='38' width='24' height='24' fill='%232f7d43'/><rect x='45' y='45' width='10' height='10' fill='%23f6e7c6'/></g><g fill='%23e2b23a'><path d='M50 4 l5 7 h-10z'/><path d='M50 96 l5 -7 h-10z'/><path d='M4 50 l7 5 v-10z'/><path d='M96 50 l-7 5 v-10z'/></g><g fill='%23c8372d'><circle cx='12' cy='12' r='4'/><circle cx='88' cy='12' r='4'/><circle cx='12' cy='88' r='4'/><circle cx='88' cy='88' r='4'/></g></svg>"); }
.face.cover .side.next small { margin: 0; font-size: calc(22px * var(--face-text, 1)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #f6e7c6; }
.face.cover .side.next:hover { box-shadow: 0 0 0 5px #1b0d07, 0 0 0 8px #e2b23a, 0 18px 44px rgba(0,0,0,.6); }
.face.cover .side.next:hover .knob { transform: rotate(45deg); transition: transform .4s ease; }
@media (max-width: 1080px) { .face.cover .side.next { right: 16px; width: 104px; height: 118px; } .face.cover .side.next .knob { width: 64px; height: 64px; } }

/* sign in (2026-10-12 12:41) */
.face .signin-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 6px 0 10px; }
.face .signin-btn { border: 1.5px solid var(--line); background: var(--panel); border-radius: 16px; padding: 14px 10px; font-family: var(--f-display); font-size: calc(28.5px * var(--face-text, 1)); color: var(--off); }
.face .signin-btn:hover { border-color: var(--gold); }
.face .signin-btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.face .signin-btn.open { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.face .signin-drop { border: 1.5px solid var(--gold); background: var(--panel); border-radius: 16px; padding: 14px 18px 16px; margin: 0 0 12px; box-shadow: 0 14px 34px rgba(0,0,0,.45); animation: signin-drop .18s ease-out; }
.face .signin-drop[hidden] { display: none; }
@keyframes signin-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.face .signin-for { margin: 0 0 6px; font-family: var(--f-display); font-size: calc(26px * var(--face-text, 1)); color: var(--gold); }
.face .signin-about { margin: 0 0 14px; font-size: calc(21px * var(--face-text, 1)); line-height: 1.5; color: var(--off); }
.face .signin-iam { display: block; width: 100%; border: 0; border-radius: 12px; padding: 12px; background: var(--gold); color: var(--bg); font-family: var(--f-display); font-size: calc(26px * var(--face-text, 1)); font-weight: 700; }
.face .signin-iam:hover { filter: brightness(1.08); }
.face .signin-none { border: 1px dashed var(--line); background: transparent; border-radius: 12px; padding: 8px 14px; font-size: calc(18px * var(--face-text, 1)); color: var(--mute); }
.face .signin-none:hover { border-color: var(--gold); color: var(--gold); }

/* the screen's controls in the terminal (2026-10-12 12:41): rows of buttons; a row that is a line of the figure draws as one */
.face .ctl-rows { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.face .ctl-row { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 640px; }
.face .ctl-label { flex: none; width: 92px; font-size: calc(15.5px * var(--face-text, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); text-align: right; }
.face .ctl-btns { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.face .ctl-btn { flex: 1 1 0; min-width: 0; border: 1.5px solid var(--line); background: var(--panel); border-radius: 12px; padding: 9px 12px; font-size: calc(21px * var(--face-text, 1)); font-weight: 600; color: var(--off); }
.face .ctl-btn:hover { border-color: var(--gold); }
.face .ctl-btn[aria-pressed="true"], .face .ctl-btn[data-flash="true"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.face .ctl-row.line .ctl-btns { gap: 14%; }
.face .ctl-row.line .ctl-btn { border: 0; border-radius: 8px; padding: 12px; font-weight: 700; color: var(--bg); }
.face .ctl-row.line.broken .ctl-btn { background: var(--off); }
.face .ctl-row.line.solid .ctl-btn { background: var(--gold); }
.face .ctl-row.line .ctl-btn:hover { filter: brightness(1.1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 40%, transparent); }
.face .ctl-row.line .ctl-btn[aria-pressed="true"], .face .ctl-row.line .ctl-btn[data-flash="true"] { box-shadow: 0 0 0 3px var(--gold), 0 0 18px color-mix(in srgb, var(--gold) 60%, transparent); }
/* a terminal of controls or the sign-in gets the room it needs, so nothing scrolls out of sight */
.face.ctl-term .term { max-height: 62%; flex: none; }
.face.ctl-term .stage { min-height: 200px; }
.face.ctl-term .ctl-rows { gap: 7px; }
.face.ctl-term .ctl-btn { padding: 7px 10px; font-size: calc(19.5px * var(--face-text, 1)); }
.face.ctl-term .ctl-row.line .ctl-btn { padding: 9px 10px; }
.face.ctl-term .term .q { margin: 0 0 8px; font-size: calc(23.5px * var(--face-text, 1)); }

/* Everything bigger (the Sovereign, 2026-10-12: "up the font size significantly for everything across the board" · "let's bring the
   font size Up by Five Points" · "you need to make everything bigger that's the most important thing"): every size above was
   multiplied by 1.3 on 12 Oct. */
/* the sign-in: "None of these", solid and earthy, above the line for a typed name (12 Oct 13:51, 15:25); his name across the bottom; the note centred */
.face .signin-earthy { display: block; width: 100%; margin: 18px 0 10px; padding: 16px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #7a5a34, #5b3f22); color: #f6ead2; font: 700 calc(24px * var(--face-text, 1))/1.2 var(--f-display); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.35); cursor: pointer; }
.face .signin-earthy:hover, .face .signin-earthy:focus-visible { filter: brightness(1.1); outline: none; }
.signin-typed { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.signin-type { flex: 1; min-width: 0; font: 600 calc(22px * var(--face-text, 1))/1.2 var(--f-ui); padding: 16px 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel-2); color: var(--off); }
.signin-type:focus { outline: none; border-color: var(--gold); }
.face .signin-go { flex: none; padding: 16px 20px; border-radius: 14px; border: 2px solid var(--gold); background: var(--gold); color: var(--bg); font: 700 calc(20px * var(--face-text, 1)) var(--f-ui); cursor: pointer; }
.face .signin-note { text-align: center; }
.face .signin-none { display: block; width: 100%; margin-top: 14px; font: 700 calc(24px * var(--face-text, 1))/1.2 var(--f-display); padding: 14px; border-radius: 14px; border: 2px solid var(--line); color: var(--off); }
.tag-why { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tag-why textarea { font: calc(16px * var(--face-text, 1))/1.4 var(--f-ui); min-height: 64px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--off); }

/* screen buttons in their own colours (14:58), and the window they open, larger, its first sentence big */
.face .screen-btn.has-col { border: 2px solid var(--btn); color: var(--btn); font-weight: 800; font-size: calc(18px * var(--face-text, 1)); padding: 10px 16px; }
.face .screen-btn.has-col[aria-pressed="true"] { background: var(--btn); color: #111; }
.face .screen-panel.has-col { border: 3px solid var(--btn); }
.face .screen-panel { font-size: calc(19px * var(--face-text, 1)); line-height: 1.5; }
.face .screen-panel .sp-lead { font: 700 calc(26px * var(--face-text, 1))/1.3 var(--f-display); color: var(--btn, var(--gold)); margin: 0 0 12px; }
/* the quiz: arrows top and bottom */
.quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0; }
.quiz-arrow { width: 52px; height: 40px; border-radius: 12px; border: 2px solid var(--z); background: var(--panel-2); color: var(--z); font-size: calc(20px * var(--face-text, 1)); font-weight: 800; cursor: pointer; }
.quiz-arrow:disabled { opacity: .3; cursor: default; }
.quiz-count { font-size: calc(16px * var(--face-text, 1)); color: var(--mute); font-weight: 600; }
.quiz-typed { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.quiz-type { flex: 1; font: 600 calc(20px * var(--face-text, 1)) var(--f-ui); padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel-2); color: var(--off); }
/* the doors */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 10px; }
.door-btn { --btn: var(--gold); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 20px; border-radius: 16px; border: 3px solid var(--btn); background: var(--panel-2); color: var(--off); cursor: pointer; transition: transform .12s, background .12s; }
.door-btn b { font: 700 calc(26px * var(--face-text, 1))/1.15 var(--f-display); color: var(--btn); }
.door-btn span { font-size: calc(17px * var(--face-text, 1)); line-height: 1.4; color: var(--off); }
.door-btn:hover, .door-btn:focus-visible { transform: translateY(-2px); background: var(--panel); outline: none; }

/* the terminal's own open/close button on the card */
.face .term-toggle { border: 1.5px solid var(--z); background: var(--panel-2); color: var(--z); border-radius: 999px; padding: 5px 14px; font-size: calc(16px * var(--face-text, 1)); font-weight: 700; white-space: nowrap; }
.face.term-off .term { display: none; }
.face.term-off .stage { flex: 1 1 auto; }

/* the screen as a place to point at (2026-10-16): the view holds the drawing and the highlighter's ink, zoomed together;
   the tools sit on the screen, top right; the screen folds away like the terminal. [Y] "where possible make it so I can
   highlight on the screen"; "the screen should be collapsible just like the terminal"; "if possible I should be able to
   scroll in more and really zoom in"; "a button I can press / I think preferably on the screen". */
.face { --mark: var(--gold); }
.face .view { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; }
.face .zoom { position: relative; width: 100%; height: 100%; transform-origin: 0 0; }
.face .ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.face.marking .view { cursor: crosshair; touch-action: none; }
.face.zoomed .view { cursor: grab; }
.face.marking.zoomed .view { cursor: crosshair; }
.face .screen-tools { position: absolute; right: 12px; top: 12px; z-index: 4; display: flex; flex-direction: column; gap: 6px; }
.face .screen-tools button { width: 40px; height: 38px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel); color: var(--off); font-size: calc(19px * var(--face-text, 1)); font-weight: 700; display: grid; place-items: center; opacity: .45; transition: opacity .2s, border-color .2s; }
.face .screen-tools button[hidden] { display: none; }
.face .stage:hover .screen-tools button, .face .screen-tools button:focus-visible { opacity: .9; }
.face .screen-tools button:hover { opacity: 1; border-color: var(--gold); }
.face .screen-tools button:disabled { opacity: .2; cursor: default; }
.face .screen-tools .st-mark[aria-pressed="true"] { opacity: 1; border-color: var(--mark); background: var(--mark); color: var(--bg); }
.face .screen-tools .st-erase[aria-pressed="true"] { opacity: 1; border-color: var(--gold); background: var(--panel); color: var(--gold); }
.face.erasing .view, .face.erasing.zoomed .view { cursor: cell; }
.face .screen-tools .st-reset { font-size: calc(13px * var(--face-text, 1)); }
.face.cover .screen-tools { display: none; }
.face .screen-toggle { margin-right: 6px; }
.face.screen-off .stage { display: none; }
.face.screen-off .term { flex: 1 1 auto; max-height: none; }
.face .screen-btns { max-width: calc(100% - 84px); }

/* the card's words half as large again (2026-10-22). [Y] "Cadence you need to make the font larger"; "everything should
   have a much large not much larger maybe 50 to 75% larger phone"; "but I still think it should be made larger". One
   number, --face-text, scales every font on the card face above, and the drawings' small words on the screen
   (academy-card.js, the same number read from here); 1.5 is the low end of what he asked, so the screen keeps its room.
   The small boxes that hold a letter or an icon grow with it so nothing spills; only the Back and Next arrows at the
   card's sides keep their size, since their box sits over the card. Written by Claude (Cadence); not dictated. */
.face { --face-text: 1.5; }
.face .transport button { width: calc(36px * var(--face-text, 1)); height: calc(34px * var(--face-text, 1)); }
.face .screen-tools button { width: calc(40px * var(--face-text, 1)); height: calc(38px * var(--face-text, 1)); }
.face .opt .key { width: calc(28px * var(--face-text, 1)); height: calc(28px * var(--face-text, 1)); }
.face .order .n, .face .lines .n { width: calc(24px * var(--face-text, 1)); height: calc(24px * var(--face-text, 1)); }
.face .lines li { grid-template-columns: calc(26px * var(--face-text, 1)) 1fr auto; }
.face .ctl-label { width: calc(92px * var(--face-text, 1)); }
.face .screen-btns { max-width: calc(100% - 84px * var(--face-text, 1)); }

/* ── 2026-10-24, after Sophie's class: the room pieces her next deck depends on. Written by Claude (Opus 5.5); not dictated. ──
   The top of the card folds to one line. [Y] "there's just so much stuff up at the top of the card I should be able to make
   that smaller just shrink it to one line and a button I can press to open it again." Folded, the head is the title and the
   buttons on one line; the kicker, the sub, the badges and the tag wait until it is opened. */
.face .head-fold { border: 1.5px solid var(--line); background: var(--panel-2); color: var(--off); border-radius: 999px; padding: 5px 14px; font-size: calc(16px * var(--face-text, 1)); font-weight: 700; white-space: nowrap; }
.face .head-fold:hover { border-color: var(--gold); }
.face.head-min .card-head { align-items: center; }
.face.head-min .card-head > div:first-child { min-width: 0; flex: 1; }
.face.head-min .kicker, .face.head-min .sub, .face.head-min .badges, .face.head-min .tag-wrap { display: none; }
.face.head-min .card-title { margin: 0; font-size: calc(19px * var(--face-text, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face.head-min .head-right { flex-direction: row; align-items: center; gap: 8px; flex: none; }
.face.head-min .face-body { margin-top: 8px; }
.face.head-min .card { padding-top: 10px; }
/* the terminal and screen buttons say what they will do. [Y] "the terminal and screen buttons are confusing." */
.face .term-toggle { display: inline-flex; align-items: center; gap: 6px; }
.face .term-toggle[aria-pressed="false"] { background: var(--z); color: var(--panel); }
.face .head-right .term-toggle, .face .head-right .head-fold { font-size: calc(11px * var(--face-text, 1)); padding: 3px 10px; }

/* the layers: their words over the top of the drawing, the bar along its foot (the drawing is told how much they take) */
.face .layer-cap { position: absolute; left: 10px; right: calc(16px + 40px * var(--face-text, 1)); top: 10px; z-index: 4; pointer-events: none; display: flex; flex-direction: column; gap: 6px; }
.face .layer-cap[hidden] { display: none; }
.face .layer-cap > * { pointer-events: auto; }
.face .layer-say { margin: 0; align-self: flex-start; max-width: 100%; padding: 8px 14px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); font-family: var(--f-display); font-size: calc(16px * var(--face-text, 1)); line-height: 1.28; color: var(--off); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.face .layer-say[hidden] { display: none; }
.face .ov-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.face .ov-head[hidden] { display: none; }
.face .ov-back { border: 2px solid var(--btn, var(--gold)); background: var(--btn, var(--gold)); color: var(--panel); border-radius: 999px; padding: 6px 16px; font-size: calc(15px * var(--face-text, 1)); font-weight: 800; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.face .ov-title { font-family: var(--f-display); font-size: calc(20px * var(--face-text, 1)); color: var(--btn, var(--gold)); background: color-mix(in srgb, var(--panel) 88%, transparent); padding: 2px 10px; border-radius: 8px; }
.face .ov-lead { font-family: var(--f-display); font-size: calc(16px * var(--face-text, 1)); color: var(--off); background: color-mix(in srgb, var(--panel) 88%, transparent); padding: 2px 10px; border-radius: 8px; }
.face.ov-open .screen-btns { display: none; }
.face .layer-bar { position: absolute; left: 10px; right: 10px; margin: 0 auto; width: fit-content; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.12); max-width: calc(100% - 20px); flex-wrap: nowrap; justify-content: center; }
.face .layer-bar[hidden] { display: none; }
.face .lb-btn { border: 1.5px solid var(--line); background: var(--panel); color: var(--off); border-radius: 999px; padding: 3px 12px; font-size: calc(12px * var(--face-text, 1)); font-weight: 800; min-height: calc(22px * var(--face-text, 1)); white-space: nowrap; }
.face .lb-btn:hover:not([disabled]) { border-color: var(--gold); color: var(--gold); }
.face .lb-btn[disabled] { opacity: .3; cursor: default; }
.face .lb-play { background: var(--x); border-color: var(--x); color: var(--panel); }
.face .lb-play[aria-pressed="true"] { background: var(--panel); color: var(--x); }
.face .lb-next { background: var(--gold); border-color: var(--gold); color: var(--panel); }
.face .lb-next:hover:not([disabled]), .face .lb-play:hover { color: var(--panel); border-color: var(--off); }
.face .lb-play[aria-pressed="true"]:hover { color: var(--x); }
/* the cover's Open knob waits while an overlay is open, so it never covers what the overlay shows */
.face.cover.ov-open .side.next { display: none; }
.face .lb-dots { display: inline-flex; gap: 5px; align-items: center; }
.face .lb-dot { width: calc(15px * var(--face-text, 1)); height: calc(15px * var(--face-text, 1)); border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); color: var(--mute); font-size: calc(8.5px * var(--face-text, 1)); font-weight: 800; display: grid; place-items: center; padding: 0; }
.face .lb-dot[data-seen="true"] { background: var(--panel-2); color: var(--off); }
.face .lb-dot[data-here="true"] { background: var(--gold); border-color: var(--gold); color: var(--panel); transform: scale(1.1); }
.face.cover .layer-bar { bottom: 18px; }
.face .screen-btn.has-art::after { content: " ⧉"; opacity: .7; }

/* a formula is said aloud when tapped */
.face .say-f { cursor: pointer; border-bottom: 2px dotted color-mix(in srgb, var(--z) 70%, transparent); border-radius: 3px; padding: 0 1px; }
.face .say-f:hover, .face .say-f:focus-visible { background: color-mix(in srgb, var(--z) 14%, transparent); outline: none; }
.face .say-f[data-said="true"] { background: color-mix(in srgb, var(--z) 24%, transparent); }

/* the pen, the text box, and the terminal as a second surface to mark */
.face { --pen: var(--off); } /* the palette's own text colour, as #438 set it */
.face .ink-notes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.face .term-notes { inset: 0 auto auto 0; width: 100%; height: 0; overflow: visible; }
.face .ink-note { position: absolute; pointer-events: auto; min-width: 2ch; max-width: 60%; padding: 2px 6px; border: 1.5px dashed color-mix(in srgb, var(--pen) 60%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--pen); font-family: var(--f-display); font-size: calc(20px * var(--face-text, 1)); font-weight: 600; line-height: 1.2; white-space: pre-wrap; outline: none; transform: translate(-2px, -50%); }
.face .ink-note:focus { border-style: solid; }
.face .ink-note, .face.marking .term .ink-note { user-select: text; -webkit-user-select: text; cursor: text; }
.face .term-ink { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }
.face .term { position: relative; }
.face.marking .term { cursor: crosshair; touch-action: none; user-select: none; }
.face.marking .term .term-ink { pointer-events: auto; }
.face.texting .view, .face.texting .term { cursor: text; }
.face.erasing .term { cursor: cell; }
.face .screen-tools .st-pen[aria-pressed="true"] { opacity: 1; border-color: var(--pen); background: var(--pen); color: var(--panel); }
.face .screen-tools .st-text[aria-pressed="true"] { opacity: 1; border-color: var(--z); background: var(--z); color: var(--panel); }
.face .screen-tools .st-text { font-family: var(--f-display); }
.face .screen-tools .st-ink.chosen { opacity: 1; border-color: currentColor; }
.face.marking .screen-tools button { opacity: .9; }

/* lines, spaced apart (the back cover) */
.face .say-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7em; }
.face .say-lines li { font-family: var(--f-display); font-size: calc(24px * var(--face-text, 1)); line-height: 1.5; color: var(--off); padding-left: 1.1em; position: relative; }
.face .say-lines li::before { content: "◆"; position: absolute; left: 0; top: .1em; font-size: .7em; color: var(--x); }
@media (max-width: 700px) { .face .layer-bar { flex-wrap: wrap; border-radius: 18px; } .face .lb-dots { order: 9; width: 100%; justify-content: center; } }

/* the border between the screen and the terminal, to drag (2026-10-29, Cadence). [Y] "can we get like one of those like I Mouse
   over the border and it moves up and down kind of thing". It sits in the gap between the two; while it is held the terminal
   takes the height it is given. Hidden wherever there is no border to move. */
.face .term-grip { flex: none; height: 12px; margin: -12px 0; position: relative; z-index: 6; cursor: row-resize; touch-action: none; border-radius: 6px; }
.face .term-grip::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 4px; transform: translate(-50%, -50%); border-radius: 2px; background: color-mix(in srgb, var(--gold) 35%, transparent); transition: background .15s, width .15s; }
.face .term-grip:hover::after, .face .term-grip:focus-visible::after, .face.gripping .term-grip::after { width: 120px; background: var(--gold); }
.face .term-grip:focus-visible { outline: none; }
.face.read-term .face-body > .term-grip { order: -1; }
.face.read-term .face-body > .term { order: -2; }
@media (min-width: 1081px) { .face.split .face-body > .term-grip { display: none; } .face.split .face-body > .term { order: 0; } }
.face.cover .term-grip, .face.fill .term-grip, .face.inscreen .term-grip, .face.term-off .term-grip, .face.screen-off .term-grip, .face .face-body.lifted .term-grip { display: none; }
.face.term-sized:not(.split):not(.inscreen):not(.screen-off) .face-body > .term { height: var(--term-h); max-height: none; flex: none; overflow: auto; }
.face.gripping, .face.gripping * { user-select: none; -webkit-user-select: none; }

/* the back cover's talk box: press and talk, the words appear as they are heard (Cadence, 2026-10-29) */
.face .talk-box { display: block; width: 100%; min-height: 4.2em; margin-top: 14px; padding: 12px 16px; text-align: left; cursor: pointer; background: transparent; border: 1px dashed var(--line); border-radius: 10px; color: var(--off); font: inherit; font-size: calc(21px * var(--face-text, 1)); line-height: 1.5; }
.face .talk-box:hover, .face .talk-box:focus-visible { border-color: var(--gold); outline: none; }
.face .talk-box[aria-pressed="true"] { border-style: solid; border-color: var(--gold); }
.face .talk-box .talk-hint { display: block; font-size: .72em; letter-spacing: .04em; color: var(--gold); margin-bottom: 4px; }
.face .talk-box .talk-now { opacity: .55; }