/* LORE console - the three looks, ONE DEFINITION (2026-10-16).
 *
 * Hologram, Scholastic and Dusk are the course timeline's looks and three of the console's themes. Inside a course the
 * timeline wore them with their character; every other page wore their colours and nothing else (QA slice T, T1 to T3).
 * Their CHARACTER is defined HERE, once, as custom properties, and both the timeline (timeline.css draws its room and its
 * cards from them) and every console page (the rules below) are drawn from the same definitions:
 *
 *   --look-ground        the light over the page's ground (layers, drawn over --bg; the timeline's over --tl-bg)
 *   --look-vignette      the shade at the edges (Scholastic's paper, Dusk's dusk); the hologram's room keeps its scan lines
 *   --look-card-shadow   a card's glow (Hologram), its shadow on the desk (Scholastic), its soft shadow (Dusk)
 *   --look-lit-edge      a glass card's lit top edge (Hologram)
 *   --look-ruled         an index card's ruled lines, --look-margin its red rule and --look-margin-ink that rule's ink
 *   --look-card-edge     a card's own edge (the index card's, the matte card's); the hologram's card takes the hairline
 *
 * A look's COLOURS (its palette) stay where they were: the timeline's --tl-... in timeline.css, the console's in
 * console.css's theme blocks, held to each other value for value by the theme suite (6b); --look-glass, the hologram's
 * glass (the timeline's --tl-glass), stands among them there. Nothing below names a colour a look's palette does not.
 *
 * WHY ONE SELECTOR NAMES BOTH. A custom property is worked out on the element that declares it, so the unit a timeline
 * card is drawn in (--tl-u, set on each card by timeline.css) reaches a definition only when the card itself declares it:
 * the shadow and the ruled lines are declared on `:root[data-theme=...]` for the console (no --tl-u there: 1px) and on
 * the look's `.tl-card` for the timeline, in the same rule. The hologram is the timeline's own look (a .tl with no other),
 * so its definitions are declared on every .tl as well as on the Hologram theme's page; each other look's on its own .tl.
 *
 * LORE Blue, Dark, Light and Easy reading define none of it: their pages stay flat, as console.css says (2026-10-11).
 * Every rule below for a page weighs exactly what the component's own rule does (:where() counts nothing), and this file
 * is linked after the component stylesheets: it wins over the component's plain rule by coming later, and a state of the
 * component (a hover, a selection, a warning) still wins over it by weighing more.
 *
 * Contrast (test_console_looks_ui.js measures it from this file and console.css, in every look): every text colour 4.5:1
 * on every card and on the page, wherever a glow or a vignette lies; the edge of a button or a field 3:1. Less motion
 * asked for: nothing here moves. Forced colours: no glow, no picture on a ground, plain edges.
 */

/* ==== The definitions ==== */

/* Hologram: a lit ground (two glows of its colour), glass cards with a soft glow of it and a lit top edge. */
:root[data-theme="hologram"], .tl {
  --look-ground: radial-gradient(1200px 520px at 50% 108%, rgba(107, 210, 255, .13), transparent 70%),
    radial-gradient(900px 500px at 12% -10%, rgba(107, 210, 255, .07), transparent 70%);
  --look-card-shadow: 0 0 22px rgba(107, 210, 255, .12), inset 0 0 28px rgba(107, 210, 255, .07);
  --look-lit-edge: linear-gradient(90deg, transparent, var(--tl-holo, var(--accent)), transparent);
}
/* Scholastic: paper under a desk lamp, index cards (a red rule, blue lines, a shadow on the desk). */
:root[data-theme="scholastic"], .tl[data-look="scholastic"] {
  --look-ground: radial-gradient(1200px 620px at 50% 0%, rgba(255, 255, 255, .55), transparent 70%);
  --look-vignette: radial-gradient(ellipse at 50% 46%, transparent 55%, rgba(98, 78, 40, .07) 100%);
  --look-margin-ink: #C24A3C;
  --look-margin: linear-gradient(var(--look-margin-ink), var(--look-margin-ink));
  --look-card-edge: #C8BDA6;
}
:root[data-theme="scholastic"], .tl[data-look="scholastic"] .tl-card {
  --look-ruled: repeating-linear-gradient(to bottom, transparent 0, transparent calc(16 * var(--tl-u, 1px)),
    rgba(60, 100, 170, .20) calc(16 * var(--tl-u, 1px)), rgba(60, 100, 170, .20) calc(17 * var(--tl-u, 1px)));
  --look-card-shadow: 0 calc(5 * var(--tl-u, 1px)) calc(12 * var(--tl-u, 1px)) rgba(60, 42, 20, .20);
}
/* Dusk: a quiet light from above, a vignette, matte cards with a soft shadow. Nothing glows. */
:root[data-theme="dusk"], .tl[data-look="dusk"] {
  --look-ground: radial-gradient(1200px 620px at 50% 0%, rgba(255, 255, 255, .035), transparent 70%);
  --look-vignette: radial-gradient(ellipse at 50% 46%, transparent 58%, rgba(0, 0, 0, .28) 100%);
  --look-card-edge: #3E424A;
}
:root[data-theme="dusk"], .tl[data-look="dusk"] .tl-card {
  --look-card-shadow: 0 calc(5 * var(--tl-u, 1px)) calc(14 * var(--tl-u, 1px)) rgba(0, 0, 0, .35);
}

/* ==== Every page, under the three looks ==== */

/* The ground: the page, the sign-in page and the row of tabs, which sticks over the page and is drawn on the same ground
   fixed to the window, so the two are one; and the band where it carries no school's colour, in the two looks whose band
   is then their ground (Scholastic's is its ink, and keeps it). */
:where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) body,
:where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .signin,
:where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .tabs {
  background: var(--look-vignette, none), var(--look-ground), var(--bg); background-attachment: fixed;
}
:where(:root[data-theme="hologram"], :root[data-theme="dusk"]) .topbar {
  background: var(--brand, var(--look-vignette, none), var(--look-ground), var(--bg)); background-attachment: fixed;
}

/* Cards. Every surface the console draws as a card: the plain card, a course, the answer on Who needs help, a student,
   the corrections' inbox, the house pages' head and cards, a question, an edit in a lesson's history, a figure's tile,
   the theme picker, and a dialog. */
/* Hologram: glass over the lit ground, its glow, its lit top edge, the tinted hairline. A dialog and the theme picker
   float over the page's words, so their glass is solid: nothing shows through. */
:where(:root[data-theme="hologram"]) .card, :where(:root[data-theme="hologram"]) .course-card,
:where(:root[data-theme="hologram"]) .att-hero, :where(:root[data-theme="hologram"]) .sc,
:where(:root[data-theme="hologram"]) .stack > .inbox-card, :where(:root[data-theme="hologram"]) .house-hero,
:where(:root[data-theme="hologram"]) .oc, :where(:root[data-theme="hologram"]) .hc,
:where(:root[data-theme="hologram"]) .qcard, :where(:root[data-theme="hologram"]) .hist-card,
:where(:root[data-theme="hologram"]) .stat {
  background: var(--look-lit-edge) 0 0 / 100% 1px no-repeat, var(--look-glass);
  box-shadow: var(--look-card-shadow);
}
:where(:root[data-theme="hologram"]) .modal, :where(:root[data-theme="hologram"]) .theme-pop {
  background: var(--look-lit-edge) 0 0 / 100% 1px no-repeat, var(--surface-1);
  box-shadow: var(--look-card-shadow), var(--shadow-lg);
}
/* Scholastic: index cards. Every card is paper with the card's edge and its shadow on the desk, and its title stands over
   the red rule. A card of a card's size (a course, a student, a figure's tile, a question, a house card, an edit) is ruled
   as an index card is, under its title band; a panel that holds a page's worth of words, forms and tables is not, because
   blue lines through every line of a long text are hard to read (the timeline's cards hold three lines). */
:where(:root[data-theme="scholastic"]) .card, :where(:root[data-theme="scholastic"]) .att-hero,
:where(:root[data-theme="scholastic"]) .stack > .inbox-card, :where(:root[data-theme="scholastic"]) .house-hero {
  border-color: var(--look-card-edge);
  box-shadow: var(--look-card-shadow);
}
:where(:root[data-theme="scholastic"]) .course-card, :where(:root[data-theme="scholastic"]) .sc,
:where(:root[data-theme="scholastic"]) .oc, :where(:root[data-theme="scholastic"]) .hc,
:where(:root[data-theme="scholastic"]) .qcard, :where(:root[data-theme="scholastic"]) .hist-card,
:where(:root[data-theme="scholastic"]) .stat {
  background: var(--look-ruled) 0 3.25rem / 100% 100% no-repeat, var(--surface-1);
  border-color: var(--look-card-edge);
  box-shadow: var(--look-card-shadow);
}
:where(:root[data-theme="scholastic"]) .modal, :where(:root[data-theme="scholastic"]) .theme-pop {
  border-color: var(--look-card-edge);
  box-shadow: var(--look-card-shadow), var(--shadow-lg);
}
:where(:root[data-theme="scholastic"]) .card .card-head { border-bottom: 1px solid var(--look-margin-ink); padding-bottom: var(--space-2); }
/* Dusk: matte cards with a soft shadow; the hairlines inside them are its sage (console.css). */
:where(:root[data-theme="dusk"]) .card, :where(:root[data-theme="dusk"]) .course-card,
:where(:root[data-theme="dusk"]) .att-hero, :where(:root[data-theme="dusk"]) .sc,
:where(:root[data-theme="dusk"]) .stack > .inbox-card, :where(:root[data-theme="dusk"]) .house-hero,
:where(:root[data-theme="dusk"]) .oc, :where(:root[data-theme="dusk"]) .hc,
:where(:root[data-theme="dusk"]) .qcard, :where(:root[data-theme="dusk"]) .hist-card,
:where(:root[data-theme="dusk"]) .stat {
  border-color: var(--look-card-edge);
  box-shadow: var(--look-card-shadow);
}
:where(:root[data-theme="dusk"]) .modal, :where(:root[data-theme="dusk"]) .theme-pop {
  border-color: var(--look-card-edge);
  box-shadow: var(--look-card-shadow), var(--shadow-lg);
}

/* Labels, figures and times: the looks' typewriter and monospace faces, as their timeline sets its times and labels.
   Hologram: every label in the mono face, letter-spaced, and every figure; Scholastic: the same in Courier Prime;
   Dusk: its times. */
:where(:root[data-theme="hologram"]) .t-eyebrow, :where(:root[data-theme="hologram"]) th,
:where(:root[data-theme="hologram"]) .stat-label, :where(:root[data-theme="hologram"]) .theme-pop h2 {
  font-family: var(--font-mono); letter-spacing: .08em;
}
:where(:root[data-theme="scholastic"]) .t-eyebrow, :where(:root[data-theme="scholastic"]) th,
:where(:root[data-theme="scholastic"]) .stat-label, :where(:root[data-theme="scholastic"]) .theme-pop h2 {
  font-family: var(--font-mono); letter-spacing: .04em;
}
:where(:root[data-theme="hologram"], :root[data-theme="scholastic"]) .stat-value,
:where(:root[data-theme="hologram"], :root[data-theme="scholastic"]) .att-count,
:where(:root[data-theme="hologram"], :root[data-theme="scholastic"]) td.num,
:where(:root[data-theme="hologram"], :root[data-theme="scholastic"]) .tnum,
:where(:root[data-theme="hologram"], :root[data-theme="scholastic"]) .cover-time,
:where(:root[data-theme="hologram"], :root[data-theme="scholastic"]) time,
:where(:root[data-theme="dusk"]) .tnum, :where(:root[data-theme="dusk"]) .cover-time, :where(:root[data-theme="dusk"]) time {
  font-family: var(--font-mono);
}
/* The tab in force: the hologram's strip glows under it, as the timeline's strip does under its stack. */
:where(:root[data-theme="hologram"]) .tab[aria-selected="true"]::after { box-shadow: 0 0 10px var(--accent); }

/* Forced colours: no glow, no picture on a ground, and plain edges. */
@media (forced-colors: active) {
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) body,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .signin,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .tabs,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .topbar { background-image: none; }
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .card,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .course-card,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .att-hero,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .sc,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .stack > .inbox-card,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .house-hero,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .oc,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .hc,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .qcard,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .hist-card,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .stat,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .modal,
  :where(:root[data-theme="hologram"], :root[data-theme="scholastic"], :root[data-theme="dusk"]) .theme-pop {
    background-image: none; box-shadow: none; border-color: CanvasText;
  }
  :where(:root[data-theme="scholastic"]) .card .card-head { border-bottom-color: CanvasText; }
  :where(:root[data-theme="hologram"]) .tab[aria-selected="true"]::after { box-shadow: none; }
}