/* ==========================================================================
   console.css — lab-console, implementing the "Instrument" design language.
   Single stylesheet, single `lc-` prefix, no build step, light only.

   Governing rule: colour is data, ink is structure. Every hairline, every
   panel edge, every table rule is 1px solid black on ivory paper — structure
   never needs colour to read. A colour only ever appears because it encodes
   a value: a bar's length, a status, an active step. Panels are not cards:
   a panel's fill is identical to the page's fill, so the only thing that
   makes a region a "panel" is the black line around it. No shadows, no
   rounded corners anywhere — a hairline is the entire vocabulary for depth.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------------

   Contrast, WCAG 2.2, background is always --lc-paper (#fefdf7) unless noted:

     --lc-dim          #786e64  vs paper  4.89:1  (>=4.5 required, passes)
     --lc-blue         #1c5ff3  vs paper  5.18:1  — same pair the other way
                        round (paper text on a solid blue fill) is also 5.18:1
     --lc-red          #d02c4a  vs paper  4.98:1
     --lc-purple       #6540f3  vs paper  5.75:1
     --lc-green        #30a27d  vs paper  3.13:1  — FAILS 4.5:1 for text, so
                        it is fill-only (dot squares, meter/gauge bars), where
                        WCAG's 3:1 non-text minimum is what applies and this
                        clears it. Anywhere the colour carries text or a
                        state-signalling border instead (a pill, a badge, the
                        note rail, the ok tick) use --lc-green-text, darkened
                        to #24795d, 5.19:1 — one safe token instead of tracking
                        two different minimums per use site.
     --lc-amber        #e19321  vs paper  2.45:1  — fails even the 3:1
                        non-text minimum, so it is fill-only too (bars, dot
                        squares, never a border or a glyph). Text/border use
                        --lc-amber-text, darkened to #925f15, 5.33:1.
     paper on solid --lc-ink fill:                 20.61:1
     paper on solid --lc-blue fill (brand tile,
       active nav item, primary button):            5.18:1

   ---------------------------------------------------------------------- */

:root {
  /* Paper: page and panel share one fill on purpose (see file header). */
  --lc-paper: #fefdf7;
  --lc-paper-alt: #fefbec;
  --lc-inset: #f7f3e0;
  --lc-ink: #000000;
  --lc-dim: #786e64;

  /* Accents. Bright values are for fills (bars, dot squares, meters) where
     WCAG's 3:1 non-text minimum applies; "-text" values are for anything
     that is itself text or a state-signalling border, where 4.5:1 applies.
     Blue, red and purple clear 4.5:1 already, so they need no second value. */
  --lc-blue: #1c5ff3;
  --lc-green: #30a27d;
  --lc-green-text: #24795d;
  --lc-amber: #e19321;
  --lc-amber-text: #925f15;
  --lc-red: #d02c4a;
  --lc-purple: #6540f3;

  /* Type. No webfonts — the OS's own mono and sans stacks. */
  --lc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  --lc-font-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif;

  /* Spacing scale. Every gap, padding and margin in this file is one of
     these seven values. */
  --lc-space-2: 2px;
  --lc-space-4: 4px;
  --lc-space-6: 6px;
  --lc-space-8: 8px;
  --lc-space-12: 12px;
  --lc-space-16: 16px;
  --lc-space-24: 24px;

  /* The page frame is the black `body` padding around `.lc-page` — its own
     token because the frame's thickness changes at the mobile breakpoint
     and two rules need to change with it in lockstep (the padding itself,
     and the `.lc-page` min-height calc below). Pinning both to this one
     custom property is what keeps them from drifting out of sync, which is
     exactly what happened before: the calc was hard-coded to the desktop
     value and went 8px stale under 900px. */
  --lc-frame: var(--lc-space-8);
}

/* 2. Base -------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--lc-frame);
  background: var(--lc-ink);
  font-family: var(--lc-font-mono);
  font-size: 12px;
  line-height: 1.3;
  color: var(--lc-ink);
  /* Kills double-tap-to-zoom and its 300ms tap delay on touch. Pinch zoom is
     deliberately left alone: it is the escape hatch WCAG 2.2 SC 1.4.4
     requires, and iOS has ignored `user-scalable=no` since iOS 10 anyway —
     this only ever removes the double-tap gesture, never the pinch one. */
  touch-action: manipulation;
}

/* The black body padding (--lc-frame) is the page frame; `.lc-page` is the
   ivory document sitting inside it. Panel fill below is this same colour —
   a panel is never a lighter or darker region, only a bordered one. */
.lc-page {
  background: var(--lc-paper);
  min-height: calc(100vh - (var(--lc-frame) * 2));
  display: flex;
  flex-direction: column;
}

h1, h2, h3, p {
  margin: 0;
}

/* Prose is the one place sans serif is used; everything else in this file
   is mono, because everything else is UI or data. */
p {
  font-family: var(--lc-font-sans);
}

a {
  color: var(--lc-blue);
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--lc-blue);
  outline-offset: 1px;
}

.lc-mono {
  font-family: var(--lc-font-mono);
}

.lc-dim {
  color: var(--lc-dim);
}

.lc-strong {
  font-weight: 700;
}

.lc-spring {
  flex: 1 1 auto;
}

/* Documented vocabulary, not yet consumed by any template: a vertical
   hairline divider for a bar that needs to group its controls. */
.lc-sep {
  width: 1px;
  align-self: stretch;
  background: var(--lc-ink);
}

.lc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Generic vertical stack — used wherever a form, a card body or a fact list
   needs evenly spaced children and nothing more opinionated than that. */
.lc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-12);
  min-width: 0;
}

/* A row of controls or facts: buttons, a hint, a right-aligned action. */
.lc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-space-8);
  min-width: 0;
}

/* Term/value pairs in an inspector panel. Mono throughout — these are
   hostnames, IDs and counts, not prose. */
.lc-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--lc-space-4) var(--lc-space-12);
  margin: 0;
  font-size: 11px;
  min-width: 0;
}

.lc-facts dt {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lc-dim);
  white-space: nowrap;
}

.lc-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 3. Banner ------------------------------------------------------------------ */

/* A flex item's `min-width` defaults to `auto`, not `0` — it refuses to
   shrink below its own content's min-content width and widens the flex
   container instead of yielding to it. `.lc-page` is a column flex
   container, so every direct child that can hold text needs `min-width: 0`
   here (and on `.lc-nav`, `.lc-subnav`, `.lc-strip`, `.lc-footer` below) or
   the whole page grows wider than the viewport and scrolls sideways. */
.lc-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-space-12);
  padding: var(--lc-space-8) var(--lc-space-16);
  background: var(--lc-paper);
  border-bottom: 1px solid var(--lc-ink);
  min-width: 0;
}

.lc-brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  background: var(--lc-blue);
  color: var(--lc-paper);
  font-weight: 700;
  font-size: 14px;
}

.lc-brand {
  font-weight: 700;
  font-size: 14px;
}

.lc-clock {
  margin-left: auto;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

/* 4. Nav ---------------------------------------------------------------------

   Two strips stack under the banner. The top strip owns the fill: the
   current page is a solid blue tab. The second strip (sub-nav, one section's
   own pages) owns colour+underline instead — a second fill would compete
   with the first for the eye's "where am I" read.
   ---------------------------------------------------------------------- */

.lc-nav {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--lc-ink);
  background: var(--lc-paper);
  min-width: 0;
}

.lc-nav-item {
  display: flex;
  align-items: center;
  padding: var(--lc-space-6) var(--lc-space-12);
  color: var(--lc-ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.lc-nav-item[aria-current="page"] {
  background: var(--lc-blue);
  color: var(--lc-paper);
}

.lc-nav-aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--lc-space-8);
  padding: 0 var(--lc-space-12);
}

.lc-subnav {
  display: flex;
  align-items: stretch;
  background: var(--lc-paper-alt);
  border-bottom: 1px solid var(--lc-ink);
  min-width: 0;
}

.lc-subnav-item {
  display: flex;
  align-items: center;
  padding: var(--lc-space-4) var(--lc-space-12);
  color: var(--lc-ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.lc-subnav-item[aria-current="page"] {
  color: var(--lc-blue);
  border-bottom-color: var(--lc-blue);
}

/* 5. Strip --------------------------------------------------------------------
   A full-width row of stat cells, and the same cell shape reused inside the
   banner: a tiny uppercase label over a larger value, cells divided by a
   vertical hairline instead of a gap so the row reads as one instrument. */

.lc-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--lc-paper);
  border-bottom: 1px solid var(--lc-ink);
  min-width: 0;
}

.lc-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--lc-space-2);
  padding: var(--lc-space-6) var(--lc-space-12);
  min-width: 0;
}

.lc-stat + .lc-stat {
  border-left: 1px solid var(--lc-ink);
}

.lc-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lc-dim);
  white-space: nowrap;
}

.lc-stat-value {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* 6. Shell --------------------------------------------------------------------- */

.lc-body {
  display: flex;
  /* flex-start, not the default stretch: a stretched flex item cannot be
     sticky, and .lc-tree-col below depends on being sticky. */
  align-items: flex-start;
  gap: var(--lc-space-16);
  flex: 1 1 auto;
  padding: var(--lc-space-16);
  min-width: 0;
}

.lc-tree-col {
  flex: 0 0 200px;
  position: sticky;
  top: var(--lc-space-8);
  min-width: 0;
}

/* No modifier for "no tree column" — .lc-main is flex: 1 1 auto regardless,
   so on a page with nothing beside it, it simply fills the row. */
.lc-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-16);
}

/* 7. Heading ------------------------------------------------------------------- */

.lc-heading {
  padding-bottom: var(--lc-space-8);
  border-bottom: 1px solid var(--lc-ink);
}

.lc-heading-name {
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}

/* Inline, not block — it sits on the same line as the name by ordinary text
   flow, no flexbox required for two spans that are already inline. */
.lc-heading-clause {
  font-size: 16px;
  color: var(--lc-blue);
}

.lc-heading-caption {
  display: block;
  margin-top: var(--lc-space-4);
  font-family: var(--lc-font-sans);
  font-size: 12px;
  color: var(--lc-dim);
}

/* 8. Panels ---------------------------------------------------------------------

   A panel is a region, not a card: its fill is --lc-paper, identical to the
   page. The 1px black border is the only thing that says "this is a panel". */

.lc-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
  gap: var(--lc-space-16);
  min-width: 0;
}

.lc-panel {
  border: 1px solid var(--lc-ink);
  background: var(--lc-paper);
  min-width: 0;
}

.lc-panel--wide {
  grid-column: 1 / -1;
}

.lc-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-space-8);
  padding: var(--lc-space-6) var(--lc-space-12);
  border-bottom: 1px solid var(--lc-ink);
}

.lc-panel-name {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  min-width: 0;
}

.lc-panel-sub {
  font-family: var(--lc-font-sans);
  font-size: 11px;
  color: var(--lc-dim);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Outlined, never filled: the badge's own colour never becomes a background,
   only a border and the text inside it. Fill stays reserved for the small
   set of things fill is meaningful for (dots, meters, the active nav tab). */
.lc-panel-badge {
  margin-left: auto;
  padding: var(--lc-space-2) var(--lc-space-6);
  border: 1px solid var(--lc-ink);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.lc-panel-badge--ok { border-color: var(--lc-green-text); color: var(--lc-green-text); }
.lc-panel-badge--warn { border-color: var(--lc-amber-text); color: var(--lc-amber-text); }
.lc-panel-badge--fail { border-color: var(--lc-red); color: var(--lc-red); }
/* --info is documented vocabulary, not yet consumed by any template. */
.lc-panel-badge--info { border-color: var(--lc-blue); color: var(--lc-blue); }
.lc-panel-badge--machine { border-color: var(--lc-purple); color: var(--lc-purple); }

.lc-panel-body {
  padding: var(--lc-space-12) var(--lc-space-16);
}

/* A body holding nothing but a full-bleed table drops its padding — the
   table's own hairlines are the edge. */
.lc-panel-body--flush {
  padding: 0;
}

/* 9. Table ------------------------------------------------------------------

   Two survivor rules from the previous stylesheet live here: the
   container-query reflow, and the wrap-not-truncate cell rule.
   ---------------------------------------------------------------------- */

/* The table's own box is the sizing context, not the viewport: a panel is
   ~340px wide whether the monitor is 900px or 2560px, so a media query would
   leave exactly the case that needs help unfixed. Container queries key off
   the element's own width instead. */
.lc-table-wrap {
  container-type: inline-size;
  min-width: 0;
}

.lc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--lc-font-mono);
  font-size: 11px;
}

.lc-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--lc-space-2) var(--lc-space-6);
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--lc-ink);
  color: var(--lc-paper);
}

.lc-table td {
  padding: var(--lc-space-2) var(--lc-space-6);
  border-top: 1px solid var(--lc-ink);
  /* Cells wrap instead of truncating: these tables sit in panels as narrow
     as 340px, where a nowrap cell hid the hostname behind an ellipsis.
     `anywhere` because the things that overflow — hostnames, URLs, OIDC
     client IDs — are unbroken tokens with no space to break at. Top-aligned
     so a one-line cell does not float against a three-line neighbour. */
  overflow-wrap: anywhere;
  vertical-align: top;
}

.lc-table tbody tr:first-child td {
  border-top: 0;
}

.lc-table tbody tr:nth-child(even) td {
  background: var(--lc-paper-alt);
}

.lc-table .lc-num {
  text-align: right;
}

/* Narrow leading column for a status dot — never wraps, it is one glyph. */
.lc-table .lc-col-icon {
  width: 22px;
  padding-right: 0;
  text-align: center;
  white-space: nowrap;
}

/* Trailing column that hugs its button instead of sharing the row's width.
   Documented vocabulary, not yet consumed by any template. */
.lc-table .lc-col-action {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

/* Selection is a colour, not a decoration: a pale fill plus a blue rule on
   the leading edge, the same blue that marks "current" everywhere else. */
.lc-table tr.lc-selected td {
  background: var(--lc-paper-alt);
}

.lc-table tr.lc-selected td:first-child {
  border-left: 2px solid var(--lc-blue);
}

/* Below ~460px of table width there is no honest way to keep columns: four
   of them leaves ~80px each, which shreds every field. So the row stops
   being a row and becomes a record — each field on its own full-width line,
   in source order. The status dot stays inline with the first field rather
   than burning a line, and the header is dropped because a stacked record
   has no columns left to label. */
@container (max-width: 460px) {
  .lc-table thead {
    display: none;
  }

  .lc-table,
  .lc-table tbody {
    display: block;
  }

  .lc-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--lc-space-6);
    padding: var(--lc-space-6) var(--lc-space-6);
    border-top: 1px solid var(--lc-ink);
  }

  .lc-table tbody tr:first-child {
    border-top: 0;
  }

  .lc-table td {
    display: block;
    flex: 1 0 100%;
    padding: 0;
    border-top: 0;
  }

  /* Keyed off the class, not a position, so this holds for any column count. */
  .lc-table td.lc-col-icon {
    flex: 0 0 auto;
    width: auto;
  }

  .lc-table td.lc-col-icon + td {
    flex: 1 1 auto;
  }

  .lc-table td.lc-col-action {
    text-align: right;
  }
}

/* 10. Tree --------------------------------------------------------------------- */

.lc-tree {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
}

.lc-tree ul {
  margin: 0;
  padding: 0 0 0 var(--lc-space-12);
  list-style: none;
}

.lc-tree-row {
  display: flex;
  align-items: baseline;
  gap: var(--lc-space-6);
  padding: var(--lc-space-2) var(--lc-space-6);
  min-width: 0;
}

/* This row is a <button type="button"> so it stays keyboard-operable, so it
   needs a full button reset to still look like a tree row and not a browser
   button. */
.lc-tree-row--group {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

/* The whole row navigates, not just the text of the label. */
.lc-tree-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: none;
  color: inherit;
}

a.lc-tree-label {
  text-decoration: underline;
}

/* .lc-tree-meta is documented vocabulary, not yet consumed by any template. */
.lc-tree-count,
.lc-tree-meta {
  flex: none;
  color: var(--lc-dim);
}

.lc-tree-row.lc-selected {
  background: var(--lc-paper-alt);
  border-left: 2px solid var(--lc-blue);
  font-weight: 700;
}

.lc-caret {
  flex: none;
  width: 9px;
}

.lc-caret::before {
  content: "+";
}

[data-open="true"] > .lc-tree-row > .lc-caret::before {
  content: "\2212";
}

[data-open="false"] > ul {
  display: none;
}

/* The disclosure is inert above the 900px breakpoint: console.js opens it
   and the summary is hidden, so the tree simply renders. See §15 for the
   collapsed-width version, where the summary becomes the visible control. */
.lc-disclosure > summary {
  display: none;
}

/* 11. Status: dots, ticks, pills, notices, meters ------------------------------- */

/* Hard square glyphs, never soft. Colour is never the only signal — every
   dot has adjacent text saying the same thing. Fill-only colours are safe
   here because a bordered decorative square only needs the 3:1 non-text
   minimum, not the 4.5:1 text minimum. */
.lc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid var(--lc-ink);
  background: var(--lc-paper);
}

.lc-dot--ok { background: var(--lc-green); }
.lc-dot--warn { background: var(--lc-amber); }
.lc-dot--fail { background: var(--lc-red); }
/* --info is documented vocabulary, not yet consumed by any template. */
.lc-dot--info { background: var(--lc-blue); }
.lc-dot--machine { background: var(--lc-purple); }

.lc-tick {
  display: inline-block;
  width: 9px;
  font-size: 11px;
}

.lc-tick::before {
  content: "\00b7";
}

.lc-tick--ok {
  color: var(--lc-green-text);
}

.lc-tick--ok::before {
  content: "\2713";
}

/* Outlined, never filled — same reasoning as the panel badge above. */
.lc-pill {
  display: inline-block;
  padding: var(--lc-space-2) var(--lc-space-6);
  border: 1px solid var(--lc-ink);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.lc-pill--ok { border-color: var(--lc-green-text); color: var(--lc-green-text); }
.lc-pill--warn { border-color: var(--lc-amber-text); color: var(--lc-amber-text); }
.lc-pill--fail { border-color: var(--lc-red); color: var(--lc-red); }
/* --info is documented vocabulary, not yet consumed by any template. */
.lc-pill--info { border-color: var(--lc-blue); color: var(--lc-blue); }
.lc-pill--machine { border-color: var(--lc-purple); color: var(--lc-purple); }

/* A notice is a rule plus a label on paper, never a filled block — the only
   solid colour fills in this language are dots, meters and the active nav
   tab. The left rail carries the state; the body stays plain prose. */
.lc-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lc-space-8);
  padding: var(--lc-space-8) var(--lc-space-12);
  background: var(--lc-paper);
  border: 1px solid var(--lc-ink);
  border-left-width: 3px;
  font-family: var(--lc-font-sans);
}

.lc-note-label {
  font-family: var(--lc-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.lc-note--ok { border-left-color: var(--lc-green-text); }
.lc-note--warn { border-left-color: var(--lc-amber-text); }
.lc-note--fail { border-left-color: var(--lc-red); }

/* Flat bar, hard edges, no gradient. Blue fill because a meter always reads
   as "current value", the same clause the active nav tab and the primary
   button carry. */
.lc-meter {
  display: block;
  height: 10px;
  background: var(--lc-paper);
  border: 1px solid var(--lc-ink);
}

.lc-meter > i {
  display: block;
  height: 100%;
  background: var(--lc-blue);
}

.lc-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--lc-space-16);
}

.lc-gauge {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-4);
  min-width: 0;
  font-size: 11px;
}

.lc-kpi {
  display: flex;
  align-items: baseline;
  gap: var(--lc-space-6);
  min-width: 0;
}

.lc-kpi b {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
}

/* 12. Forms -------------------------------------------------------------------- */

.lc-fields {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-12);
  min-width: 0;
}

.lc-field {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-4);
  min-width: 0;
}

.lc-field > span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lc-dim);
}

.lc-check-label {
  display: flex;
  align-items: center;
  gap: var(--lc-space-6);
  font-size: 12px;
}

.lc-input {
  width: 100%;
  padding: var(--lc-space-4) var(--lc-space-8);
  background: var(--lc-paper);
  color: var(--lc-ink);
  border: 1px solid var(--lc-ink);
  font-family: var(--lc-font-mono);
  font-size: 12px;
  line-height: 1.4;
}

textarea.lc-input {
  resize: vertical;
}

.lc-check {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--lc-ink);
}

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-space-4);
  padding: var(--lc-space-4) var(--lc-space-12);
  background: var(--lc-paper);
  color: var(--lc-ink);
  border: 1px solid var(--lc-ink);
  font-family: var(--lc-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  min-height: 26px;
}

.lc-btn--primary {
  background: var(--lc-ink);
  color: var(--lc-paper);
}

/* Where the portal will send the visitor once they authenticate. */
.lc-target {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lc-space-8);
  padding: var(--lc-space-8) var(--lc-space-12);
  border: 1px solid var(--lc-ink);
  background: var(--lc-paper);
  font-family: var(--lc-font-sans);
  min-width: 0;
}

.lc-target-host {
  font-family: var(--lc-font-mono);
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lc-secret {
  display: block;
  padding: var(--lc-space-8);
  border: 1px solid var(--lc-ink);
  background: var(--lc-inset);
  font-family: var(--lc-font-mono);
  word-break: break-all;
}

/* The enrolment QR is a real bitmap and needs a frame no other component
   provides. Its quiet zone must stay pure white, not --lc-paper's warm
   off-white, or some scanners misread the module boundary. */
.lc-qr {
  display: block;
  margin: 0 auto;
  padding: var(--lc-space-6);
  border: 1px solid var(--lc-ink);
  background: #fff;
}

/* 13. Portal --------------------------------------------------------------------
   The one place a page is a single centred column with nothing beside it —
   the login, enrolment and password forms have no tree, no panels to share
   the row with. */

.lc-centered {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lc-space-16);
  padding: var(--lc-space-24) var(--lc-space-16);
  min-width: 0;
}

.lc-centered > * {
  width: 100%;
  max-width: 420px;
}

/* 14. Footer ---------------------------------------------------------------- */

.lc-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-space-12);
  padding: var(--lc-space-16);
  background: var(--lc-paper);
  border-top: 1px solid var(--lc-ink);
  min-width: 0;
}

.lc-footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lc-space-16);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.lc-footer-note {
  font-family: var(--lc-font-sans);
  font-size: 11px;
  color: var(--lc-dim);
}

/* 15. Responsive --------------------------------------------------------------
   One breakpoint. Below it the tree stacks above the content and collapses
   into a native disclosure, so a thirty-item list is not something you
   scroll past to reach the page. */

@media (max-width: 900px) {
  /* Mobile spacing is two numbers, not three. Thinning the frame to
     --lc-space-4 here changes it everywhere that reads --lc-frame (the
     body padding above and the `.lc-page` min-height calc together, so
     they can't drift out of sync the way the old hard-coded calc did).
     The one gutter between the frame and the content is --lc-space-12,
     reused as-is for `.lc-body`'s padding and gap and, below, for every
     panel body's padding — so nothing between the frame and a panel's
     content is a number invented just for this breakpoint. */
  :root {
    --lc-frame: var(--lc-space-4);
  }

  .lc-body {
    flex-direction: column;
    gap: var(--lc-space-12);
    padding: var(--lc-space-12);
  }

  .lc-panel-body {
    padding: var(--lc-space-12);
  }

  .lc-tree-col {
    position: static;
    flex: none;
    width: 100%;
  }

  .lc-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  /* `.lc-subnav-item` is the same nowrap tab pattern as `.lc-nav-item`
     above, but with no scroll escape hatch it is a live copy of the bug
     that made `.lc-strip` overflow: a row of unbreakable labels (the
     admin section alone has four) that cannot shrink and cannot wrap. It
     gets the same fix as `.lc-nav` rather than `min-width: 0`, because
     shrinking the items would just make adjacent labels overlap instead
     of scroll. */
  .lc-subnav {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  /* A caption competing with a badge for the same line is exactly §2's
     overlap bug; giving it the full width below the breakpoint means it
     never shares a row with the badge in the first place. */
  .lc-panel-sub {
    flex: 1 0 100%;
  }

  .lc-disclosure > summary {
    display: flex;
    align-items: center;
    gap: var(--lc-space-8);
    padding: var(--lc-space-8) var(--lc-space-12);
    background: var(--lc-paper);
    border: 1px solid var(--lc-ink);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    min-height: 44px;
  }

  /* iOS zooms the viewport in whenever it focuses a control whose text is
     under 16px, and does not zoom back out afterwards — the layout is left
     scaled and scrolling sideways. 16px is a threshold, not a preference:
     it is not about wanting bigger form text, only about staying the one
     pixel size iOS will not override. The desktop 12px density above is
     untouched because this rule only applies under the breakpoint. */
  .lc-input,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}