/* ==========================================================================
   Lie-theory series (vision/lie-theory/*) — the few domain-shaped styles its
   pages share on top of guide.css: the matrix readout grid that
   Lie.matHTML() emits, pass/fail tags, and the "concept map" rows used on the
   hub-style recap sections.

   This file is a SUPPLEMENT. Every lie-theory page includes guide-head.html
   first and then this one, so every `.g-` class it restates is a deliberate
   re-statement of guide.css's value and not a second definition — and every
   class named below is loaded on pages that carry their own inline <style>
   block, so the spellings are a contract in both directions.

   Consumes the token layer in assets/css/theme.css and nothing else. No raw
   hex, no bare rem for a space, no bare millisecond. The two literals that
   survive are marked where they occur and explained.
   ========================================================================== */

/* KaTeX's visually hidden MathML is position:absolute, so it escapes the overflow-x:auto of a
 * non-positioned .g-math or .g-table-wrap and widens the page on phones. Make the wrapper its containing block. */
.g-math.g-katex, .g-table-wrap { position: relative; }


/* --------------------------------------------------------------------------
   The matrix readout
   --------------------------------------------------------------------------
   RECESSED. `Lie.matHTML()` emits a grid of numbers with no card around it in
   the old design, which meant a block of figures floated in the page. It is
   given the kit's well treatment here — a `surface-2` fill, a hairline, no
   elevation — because a `surface-2` fill is dimmer than the surface it sits
   in and is read BY that fill. A cast shadow on it would assert the opposite.

   The two vertical rules are structural, not decorative: they are the walls
   of the matrix, and they are the one place in this series where a rule is
   load-bearing rather than a border between things. They are hairlines
   because the numbers are the thing, not the box. */
.lie-mat {
  display: inline-grid; gap: var(--space-hair) var(--space-4);
  padding: var(--space-2) var(--space-4);
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  line-height: var(--text-sm-lh);
  font-variant-numeric: tabular-nums;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--c-border-strong);
  border-right: 2px solid var(--c-border-strong);
}
.lie-mat span { text-align: end; white-space: pre; }

/* `hi` marks the entry the page is talking about and `lo` the entries that
   are structurally zero. `hi` is a SELECTION, not a verdict — but it is a
   selection of a non-zero quantity, so it takes the ok ink rather than the
   accent: the two lines below it make the distinction explicit, and a reader
   scanning a residual readout is reading pass/fail, not navigation. */
.lie-mat span.hi { color: var(--color-ok-ink); font-weight: 600; }
.lie-mat span.lo { color: var(--color-text-subtle); }

.lie-matlabel { font-size: var(--text-micro); color: var(--color-text-muted); margin: var(--space-2) 0 0; }
.lie-mats { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); align-items: flex-start; }


/* --------------------------------------------------------------------------
   Verdict tags
   --------------------------------------------------------------------------
   The migration the token layer was built for. `.ok` and `.bad` on this
   series were a hand-picked green and a borrowed series colour, and `.hi`
   was a blue; the theme now gives pass/fail their own semantics, independent
   of the categorical series palette, which is what they always meant —
   `Lie.matHTML`'s callers pass 'ok' when a residual is under a threshold and
   'bad' when it is not. `.k` drops its 0.65 opacity for a real colour, which
   no longer dims a child span the way opacity did. */
.g-readout .ok, .lie-ok { color: var(--color-ok-ink); font-weight: 600; }
.g-readout .bad, .lie-bad { color: var(--color-bad-ink); font-weight: 600; }
.g-readout .hi { color: var(--color-ok-ink); font-weight: 600; }
.g-readout .k { color: var(--color-text-subtle); }


/* --------------------------------------------------------------------------
   Concept map
   --------------------------------------------------------------------------
   A two-column label/definition grid with a rule between every row. The label
   column is the bold one and stays narrow so a dozen terms line up; the
   definition column takes the rest. `border-bottom` rather than a grid gap,
   because the rule IS the structure here — it is what makes a reader
   scanning the label column able to track their eye across to the prose. */
.lie-map {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
}
.lie-map > div {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.lie-map > div:nth-child(odd) { font-weight: 600; color: var(--color-text); }


/* --------------------------------------------------------------------------
   Line legend
   --------------------------------------------------------------------------
   Sized off `--chart-legend-size`, the token the chart layer reserves for
   exactly this: a row of series names and rules beside a plot. A legend entry
   is not a control — no href, no tabindex, not focusable — so there is no
   hover and no press state here and the `i` rules are a diagram of what the
   canvas draws, not something to point at. */
.lie-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--chart-legend-size); margin-top: var(--space-2); }
.lie-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.lie-legend i { display: inline-block; width: 14px; height: 3px; border-radius: var(--radius-1); }
/* `!important` is preserved deliberately: pages set the background of these
   rules inline from the series palette, and an inline style only loses to an
   `!important` declaration, never to a class selector. This one is the dashed
   line style and it must win over whatever fill the canvas gave the element. */
.lie-legend i.dash { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important; }


/* --------------------------------------------------------------------------
   A control override
   --------------------------------------------------------------------------
   The Lie pages put a bare <select> directly in the control column rather
   than inside a `.g-field`, so guide.css's field-scoped select rule does not
   reach it. Re-stated here in the same vocabulary as guide.css's version, and
   with `font: inherit` first so the page's own label typography still drives
   the control's metrics. */
.g-controls select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}
.g-controls select:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* A button, so it does get a hover — behind a real pointer, because a sticky
   hover on touch leaves a permanently lit control. */
.lie-check {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: var(--text-label-sm);
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .lie-check:hover { background: var(--color-surface-2); border-color: var(--c-border-strong); }
}
.lie-check:active { border-color: var(--c-border-strong); }
.lie-check:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }


/* --------------------------------------------------------------------------
   The Jacobian table
   --------------------------------------------------------------------------
   `.lie-jtable` is a `.g-cheat` with a different last column, so it inherits
   guide.css's whole table treatment and only adds the two things that are
   specific to it. The residual is a number a reader is comparing down a
   column, so it holds tabular figures and never wraps. */
.lie-jtable td { vertical-align: middle; }
.lie-jtable .lie-res {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   Code
   --------------------------------------------------------------------------
   RECESSED like every other reading surface here, and for the same reason.
   `.c` marks a comment in the snippet; the old 0.55 opacity is expressed as a
   muted colour so it cannot dim anything nested inside the span. */
.lie-code {
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  line-height: 1.6;
  white-space: pre;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-inset);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: var(--space-2) 0 var(--space-4);
}
.lie-code .c { color: var(--color-text-subtle); }


/* --------------------------------------------------------------------------
   Narrow viewports
   --------------------------------------------------------------------------
   The concept map stacks: the label row keeps its rule under it only when it
   is no longer the first of a pair, and the matrix readout tightens a step
   because two columns of figures on a 320px screen need the room. */
@media (max-width: 640px) {
  .lie-map { grid-template-columns: 1fr; }
  .lie-map > div:nth-child(odd) { border-bottom: none; padding-bottom: 0; }
  .lie-mat {
    font-size: var(--text-micro);
    gap: var(--space-hair) var(--space-2);
  }
}


/* --------------------------------------------------------------------------
   Scrollbars
   --------------------------------------------------------------------------
   Scoped to this file's own scrollers rather than declared globally, and the
   standard properties sit behind a POSITIVE Blink/WebKit test. Because a
   non-`auto` `scrollbar-width` makes the user agent ignore
   `::-webkit-scrollbar` outright, putting them in an ordinary block would
   replace the 10px transparent-track scrollbar with the browser default in
   every Blink engine. `:-webkit-any-link` is Blink/WebKit-only, so asking for
   its ABSENCE is a positive test for the engines that need the standard
   properties. */
:where(.lie-code) {
  -webkit-overflow-scrolling: touch;
}
@supports not (selector(:-webkit-any-link)) {
  :where(.lie-code) {
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
  }
}
:where(.lie-code)::-webkit-scrollbar { width: 10px; height: 10px; }
:where(.lie-code)::-webkit-scrollbar-track { background: transparent; }
:where(.lie-code)::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--radius-sm); }
:where(.lie-code)::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); }