/* design_version 1. Generated by bun Design/gen.ts from Design/components.css: edit there, never this copy. */
/* The lw-* components (Design/, PAL-1311). Every value is a tokens.css custom property; grid column templates, motion timings and
   percentages are the only literals (bun Design/design-check.ts). Edit here, then bun Design/gen.ts: every consumer holds a byte copy. */

body { margin: 0; background: var(--surface-page); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

/* Motion (Mist, 2026-10-04): short ease-out only; index.html switches all of it off under reduced motion. */
@keyframes lw-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lw-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes lw-grow { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lw-twinkle { 0%, 100% { transform: rotate(0) scale(1); opacity: 1; } 50% { transform: rotate(90deg) scale(.82); opacity: .7; } }

/* Shimmering text: a band of the accent sweeping across ink-2, for a label whose work is under way (Explain). */
.lw-shimmer-text { background: linear-gradient(90deg, var(--ink-2) 35%, var(--accent) 50%, var(--ink-2) 65%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lw-shimmer 1.6s linear infinite; }

/* Preview and layout helpers */
.lw-stage { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-16); }
.lw-row { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; }
.lw-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.lw-dim { color: var(--ink-dim); }
.lw-ink-2 { color: var(--ink-2); }
a.lw-link, .lw-link { color: var(--accent); }
.lw-link:hover { color: var(--accent-hover); }

/* Labels shared by every component: sentence case, weight rather than uppercase micro-type (Blackbird .lbl) */
.lw-label { margin: 0; font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); color: var(--ink); }
.lw-label--dim { color: var(--ink-dim); }
.lw-heading { margin: 0; font-family: var(--font-label); font-size: var(--fs-heading); font-weight: var(--w-semibold); }
.lw-heading--sub { font-size: var(--fs-body); }
.lw-title { margin: 0; font-family: var(--font-label); font-size: var(--fs-heading); font-weight: var(--w-bold); letter-spacing: var(--track-tight); }

/* Status: the chip. Marker shape carries rank without colour: circle best, diamond middle, square worst, ring outside the scales. */
.lw-status { --lw-fg: var(--not-scored); --lw-bg: var(--not-scored-fill);
  display: inline-flex; align-items: center; gap: var(--chip-gap);
  padding: var(--chip-pad-y) var(--chip-pad-end) var(--chip-pad-y) var(--chip-pad-start);
  border-radius: var(--radius-pill); background: var(--lw-bg); color: var(--lw-fg);
  font-family: var(--font-label); font-size: var(--fs-meta); font-weight: var(--w-bold); letter-spacing: var(--track-label); line-height: var(--lh-chip); white-space: nowrap; }
.lw-status__marker { display: inline-block; flex: none; width: var(--marker); height: var(--marker); box-sizing: border-box;
  background: var(--lw-fg); border: var(--marker-stroke) solid var(--lw-fg); border-radius: 50%; }
/* All six status pills are SOLID (owner 2026-10-02): the fill is the status colour, text and marker are on-status, in every context. Red means worst on either axis (act, broken). On a white page the yellow / green / orange / cyan edges are 1.4-2.7:1: decorative, the word and marker carry the meaning. */
.lw-status--good, .lw-status--watch, .lw-status--act, .lw-status--working, .lw-status--degraded, .lw-status--broken { --lw-fg: var(--on-status); }
.lw-status--good { --lw-bg: var(--good); }
.lw-status--watch { --lw-bg: var(--watch); }
.lw-status--act { --lw-bg: var(--act); }
.lw-status--working { --lw-bg: var(--working); }
.lw-status--degraded { --lw-bg: var(--degraded); }
.lw-status--broken { --lw-bg: var(--broken); }
.lw-status--on-us { --lw-fg: var(--on-us); --lw-bg: var(--on-us-fill); box-shadow: inset 0 0 0 var(--hairline) var(--on-us); }
.lw-status--not-scored, .lw-status--paused, .lw-status--unknown, .lw-status--info, .lw-status--dormant { --lw-fg: var(--not-scored); --lw-bg: var(--not-scored-fill); }
.lw-status--watch .lw-status__marker, .lw-status--degraded .lw-status__marker { border-radius: var(--radius-marker); transform: rotate(45deg); }
.lw-status--act .lw-status__marker, .lw-status--broken .lw-status__marker { border-radius: var(--radius-marker); }
.lw-status--on-us .lw-status__marker, .lw-status--not-scored .lw-status__marker,
.lw-status--paused .lw-status__marker, .lw-status--unknown .lw-status__marker, .lw-status--info .lw-status__marker { background: transparent; }
/* Outside the scales and unfilled: the line-strong outline carries the chip (inset, so it adds no width) */
.lw-status--not-scored, .lw-status--paused, .lw-status--unknown, .lw-status--info, .lw-status--dormant { box-shadow: inset 0 0 0 var(--hairline) var(--line-strong); }

/* A figure coloured by its band (pane scores only; tile figures stay ink) */
.lw-figure { font-family: var(--font-sans); font-size: var(--fs-figure); font-weight: var(--w-semibold); letter-spacing: var(--track-figure); line-height: var(--lh-figure); font-variant-numeric: tabular-nums; color: var(--ink); }
.lw-figure--lg { font-size: var(--fs-figure-lg); }
.lw-figure--good { color: var(--good-text); }
.lw-figure--watch { color: var(--watch-text); }
.lw-figure--degraded { color: var(--degraded-text); }
.lw-figure--act { color: var(--act-text); }
.lw-figure--broken { color: var(--broken-text); }
.lw-figure--working { color: var(--working-text); }
.lw-figure--not-scored { color: var(--not-scored); }

/* StatTile */
.lw-tile { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-14) var(--space-16);
  background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); min-width: 0; }
.lw-tile--outside { border-style: dashed; border-color: var(--line-strong); }
.lw-tile__label { font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); line-height: var(--lh-tile-label); color: var(--accent); }
.lw-tile__note { font-size: var(--fs-meta); color: var(--ink-dim); }

/* ScoreGroup: the Participant | Engineering pair. Set form = two labelled tile groups; one form = the pane's two scores. */
.lw-scoregroup { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-28); }
.lw-group { display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; }
.lw-group__head { display: flex; align-items: center; gap: var(--space-12); }
.lw-group__rule { flex-grow: 1; height: var(--hairline); background: var(--line); }
.lw-group__note { font-size: var(--fs-meta); color: var(--ink-dim); }
.lw-group--eng .lw-tile { background-color: var(--on-us-fill); }
/* One panel split by hairlines, not separate cards (Mist, 2026-10-04): the gap shows the line-soft ground between flat tiles. */
.lw-group__tiles { display: grid; grid-template-columns: repeat(var(--lw-tiles, 4), minmax(0, 1fr)); gap: var(--hairline);
  background: var(--line-soft); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.lw-group__tiles .lw-tile { border: 0; border-radius: 0; height: 100%; }
.lw-group__tiles .lw-tile--outside { background-color: var(--surface); }
/* The pane's pair sits on the drawer, ruled above and below, with no box of its own (Mist, 2026-10-04: fewer boxes inside boxes). */
.lw-scoregroup--one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: var(--space-16) 0; border-block: var(--hairline) solid var(--line); }
.lw-scoreside { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-2) var(--space-22) var(--space-2) 0; min-width: 0; }
.lw-scoreside + .lw-scoreside { padding-left: var(--space-22); border-left: var(--hairline) solid var(--line-soft); }
.lw-scoreside__value { display: flex; align-items: center; gap: var(--space-12); }
.lw-scoreside__note { font-size: var(--fs-meta); color: var(--ink-dim); }

/* ScopeLine */
.lw-scope { display: flex; align-items: baseline; gap: var(--space-10); flex-wrap: wrap; padding: var(--space-12) var(--space-16);
  background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); }
.lw-scope__count { font-size: var(--fs-body); font-weight: var(--w-semibold); }
.lw-scope__sep, .lw-scope__hidden { color: var(--ink-dim); }
.lw-scope__action { margin-left: auto; }

/* Buttons and the Toolbar */
.lw-toolbar { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; }
.lw-toolbar__pos { font-size: var(--fs-meta); color: var(--ink-dim); }
.lw-toolbar__spacer { flex-grow: 1; }
/* Flat, three levels (Mist, 2026-10-04): primary = accent fill, secondary (the default) = control-2 with a line edge, quiet = no fill until hovered. */
.lw-btn { min-height: var(--control); padding: 0 var(--space-14); background: var(--control-2); color: var(--ink);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); transition: background-color .15s ease-out, border-color .15s ease-out;
  font: inherit; font-size: var(--fs-control); cursor: pointer; }
.lw-btn:hover { background: var(--control-2-hover); border-color: var(--line-strong); }
.lw-btn:focus-visible { outline: none; }
/* :focus-visible alone, so a page with scripts off (no page.js data-kbd) still shows the ring; browsers skip it on a click. */
.lw-btn:focus-visible { box-shadow: var(--focus-ring); }
.lw-btn--sm { min-height: var(--control-sm); }
.lw-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-ink); font-weight: var(--w-semibold); }
.lw-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.lw-btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.lw-btn--quiet:hover { background: var(--control-3-hover); border-color: transparent; color: var(--ink); }
.lw-btn:disabled, .lw-btn:disabled:hover { background: var(--control-3); border-color: var(--line-soft); color: var(--ink-dim); cursor: default; }
/* A select or text input: the quiet fill with a line edge, set slightly into the page */
.lw-field { min-height: var(--control-sm); padding: var(--space-4) var(--space-10); background: var(--control-3); color: var(--ink);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-control); transition: border-color .15s ease-out; }
.lw-field:hover { border-color: var(--line-strong); }
.lw-field:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Identity line and study chip */
/* UserHeader: the drawer's top block. Line 1 the name (or the ULID while names are hidden), line 2 the dates, line 3 the small ULID and the study chip. */
.lw-userhdr { display: flex; flex-direction: column; gap: var(--space-6); }
.lw-userhdr__name { margin: 0; font-family: var(--font-label); font-size: var(--fs-heading); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: var(--lh-lead); overflow-wrap: anywhere; }
.lw-userhdr__name--id { font-family: var(--font-mono); font-weight: var(--w-medium); letter-spacing: 0; }
.lw-userhdr__dates { display: flex; align-items: baseline; gap: var(--space-2) var(--space-8); flex-wrap: wrap; font-size: var(--fs-body); color: var(--ink-2); }
.lw-userhdr__ids { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; font-size: var(--fs-meta); color: var(--ink-dim); }
.lw-userhdr__sep { color: var(--ink-dim); }
.lw-userhdr__id { font-family: var(--font-mono); color: var(--ink-2); }
/* Tag: a small outlined chip for a plain label beside text (an engineering mark, a value word), never a status. */
.lw-tag { display: inline-block; padding: 0 var(--tag-pad-x); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-pill);
  font-family: var(--font-label); font-size: var(--fs-meta); line-height: var(--lh-chip); color: var(--ink-2); white-space: nowrap; }
.lw-study { padding: var(--tag-pad-y) var(--tag-pad-x); background: var(--control-3); box-shadow: inset 0 0 0 var(--hairline) var(--line); border-radius: var(--radius-pill); color: var(--study); }

/* HoverCard: Means / From / Source */
.lw-anchor { display: inline-flex; align-items: center; gap: var(--space-10); padding: var(--space-10) var(--space-14);
  background: var(--surface); border: var(--hairline) solid var(--line-accent); border-radius: var(--radius-md); }
.lw-anchor__label { font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); color: var(--ink-dim); }
.lw-anchor__value { font-family: var(--font-mono); font-size: var(--fs-heading); font-weight: var(--w-medium); }
.lw-hover { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16) var(--space-18);
  background: var(--surface-glass); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: var(--hairline) solid var(--line-pop); border-radius: var(--radius-pop);
  box-shadow: var(--shadow-pop); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.lw-hover__section { display: flex; flex-direction: column; gap: var(--space-2); }
.lw-hover__section--from { gap: var(--space-4); }
.lw-hover__label { font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); color: var(--accent); }
.lw-hover__row { display: flex; justify-content: space-between; gap: var(--space-12); font-size: var(--fs-meta); }
.lw-hover__key { flex: 1 1 50%; min-width: 0; color: var(--ink-2); }
.lw-hover__val { flex: 0 1 auto; max-width: 60%; font-family: var(--font-mono); text-align: right; overflow-wrap: anywhere; }
.lw-hover__row--prose { flex-direction: column; gap: var(--space-2); }
.lw-hover__row--prose .lw-hover__val { max-width: none; font-family: var(--font-sans); font-size: var(--fs-meta); line-height: var(--lh-body); text-align: left; color: var(--ink); }
.lw-hover__sum { margin-top: var(--space-4); padding-top: var(--space-6); border-top: var(--hairline) solid var(--line-soft); font-family: var(--font-mono); font-size: var(--fs-meta); }
.lw-hover__source { font-size: var(--fs-meta); color: var(--ink-2); }
.lw-hover__codes { font-family: var(--font-mono); font-size: var(--fs-debug); color: var(--ink-dim); }

/* AskBlock */
/* On the drawer, under the score pair's rule, with no box of its own: the lead's size carries it (Mist, 2026-10-04). */
.lw-ask { display: flex; flex-direction: column; gap: var(--space-14); padding: 0; }
.lw-ask__part { display: flex; flex-direction: column; gap: var(--space-4); }
.lw-ask__text { margin: 0; font-size: var(--fs-heading); line-height: var(--lh-lead); font-weight: var(--w-semibold); letter-spacing: var(--track-tight); text-wrap: balance; }
.lw-ask__text--none { color: var(--ink-2); }
.lw-ask__happening { margin: 0; font-size: var(--fs-body); color: var(--ink-soft); }
.lw-flag { margin: 0; padding: var(--space-8) var(--space-12); border-radius: var(--radius-sm); background: var(--flag-fill); color: var(--watch-text); font-size: var(--fs-body); }

/* DetailsTable (and the participant list, which shares the grammar) */
.lw-table { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.lw-table--details { --lw-cols: 140px 160px minmax(0, 1fr) 120px; }
.lw-table--list { --lw-cols: 224px 130px minmax(0, 1fr) 130px 180px; }
.lw-table__head, .lw-table__row { display: grid; grid-template-columns: var(--lw-cols); gap: var(--space-16); }
.lw-table__head { padding: var(--space-10) var(--space-18); border-bottom: var(--hairline) solid var(--line);
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); color: var(--ink-dim); }
.lw-table__row { align-items: start; padding: var(--space-12) var(--space-18); border-bottom: var(--hairline) solid var(--line-soft); }
.lw-table__row:last-child { border-bottom: 0; }
.lw-table__row { color: var(--ink-rest); transition: background-color .12s ease-out; }
/* Only a row a click opens (the list) highlights; a details row in the drawer has nowhere deeper to go (owner, 2026-10-04). */
.lw-table__row[data-user]:hover { background: var(--accent-softer); }
.lw-table__area { font-weight: var(--w-semibold); }
.lw-table__text { display: flex; flex-direction: column; gap: var(--space-6); }
/* The chip sits at the top, level with the note's first line however many lines the note wraps to (owner, 2026-10-04). */
.lw-table__eng { display: flex; align-items: flex-start; gap: var(--space-8); font-size: var(--fs-meta); color: var(--ink-2); }
.lw-table__eng > .lw-status { flex: none; }
.lw-table__eng > :last-child { padding-top: var(--chip-pad-y); }
.lw-table__since { font-size: var(--fs-body); color: var(--ink-2); }
.lw-table__foot { font-size: var(--fs-meta); color: var(--ink-dim); }
.lw-table__score { display: flex; align-items: center; gap: var(--space-8); }
.lw-table__score .lw-mono { font-size: var(--fs-body); }

/* CodeChip: layer 3 and hover only */
.lw-code { display: inline-block; padding: var(--code-pad-y) var(--code-pad-x); border-radius: var(--radius-code);
  background: var(--line-soft); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-meta); line-height: var(--lh-body); white-space: nowrap; }

/* CauseRow: an engineering cause at layer 2 */
.lw-causes { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); overflow: hidden;
  --lw-cols: 140px minmax(0, 1fr) 120px 150px 140px; }
.lw-cause { color: var(--ink-rest); display: grid; grid-template-columns: var(--lw-cols); gap: var(--space-16); align-items: center;
  padding: var(--space-12) var(--space-18); border-bottom: var(--hairline) solid var(--line-soft); }
.lw-cause:last-child { border-bottom: 0; }
.lw-cause--head { padding: var(--space-10) var(--space-18); border-bottom-color: var(--line);
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); color: var(--ink-dim); }
.lw-cause__value { font-family: var(--font-sans); font-size: var(--fs-heading); font-weight: var(--w-semibold); letter-spacing: var(--track-figure); line-height: var(--lh-figure); font-variant-numeric: tabular-nums; }
.lw-cause__what { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.lw-cause__reason { font-weight: var(--w-semibold); }
.lw-cause__area { font-size: var(--fs-meta); color: var(--ink-dim); }
.lw-cause__count { font-family: var(--font-mono); font-size: var(--fs-body); }

/* Disclosure: every <details> in a layer-3 view (Mist, 2026-10-04). A flat panel whose summary row carries a chevron that turns when open;
   a nested disclosure is a quieter row inside it with the same chevron, never a native marker. */
.lw-disclosure, details.l3 { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); overflow: clip; }
details.l3 > summary, details.l3 details > summary, .lw-disclosure > summary { list-style: none; display: flex; align-items: center; gap: var(--space-10); cursor: pointer;
  transition: background-color .12s ease-out; }
details.l3 > summary::-webkit-details-marker, details.l3 details > summary::-webkit-details-marker, .lw-disclosure > summary::-webkit-details-marker { display: none; }
details.l3 > summary::before, details.l3 details > summary::before, .lw-disclosure > summary::before {
  content: ''; flex: none; width: var(--space-6); height: var(--space-6); margin: 0 var(--space-2);
  border-right: var(--marker-stroke) solid var(--ink-dim); border-bottom: var(--marker-stroke) solid var(--ink-dim); transform: rotate(-45deg); transition: transform .15s ease-out; }
details.l3[open] > summary::before, details.l3 details[open] > summary::before, .lw-disclosure[open] > summary::before { transform: rotate(45deg); }
details.l3 > summary, .lw-disclosure > summary { padding: var(--space-12) var(--space-16);
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: var(--track-label); }
details.l3 > summary:hover, .lw-disclosure > summary:hover { background: var(--accent-softer); }
details.l3[open] > summary { border-bottom: var(--hairline) solid var(--line-soft); }
details.l3 > :not(summary) { margin-inline: var(--space-16); }
details.l3 > summary + * { margin-top: var(--space-12); }
details.l3[open] { padding-bottom: var(--space-14); }
details.l3 > table.plain.fit { width: calc(100% - 2 * var(--space-16)); }
details.l3 details { border-top: var(--hairline) solid var(--line-soft); }
details.l3 details:last-child { border-bottom: var(--hairline) solid var(--line-soft); }
details.l3 details > summary { padding: var(--space-6) var(--space-4); font-size: var(--fs-meta); color: var(--ink-2); }
details.l3 details > summary:hover { color: var(--ink); background: var(--accent-softer); }
details.l3 details[open] > summary { color: var(--ink); }
details.l3 details > :not(summary) { margin: var(--space-2) 0 var(--space-10) var(--space-22); }

/* Loading shapes: the shape of what is coming, shimmering, instead of a word, so nothing jumps when it lands. */
.lw-skel { display: flex; flex-direction: column; gap: var(--space-10); }
.lw-skel__line { height: var(--space-12); border-radius: var(--radius-code); background: linear-gradient(90deg, var(--line-soft) 30%, var(--line) 50%, var(--line-soft) 70%);
  background-size: 200% 100%; animation: lw-shimmer 1.3s linear infinite; }
.lw-skel__line--lg { height: var(--space-28); width: 60%; }
.lw-skel__line--block { height: var(--space-56); }
.lw-skel__line--short { width: 40%; }
.lw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ===== The one rail (ruling 18): every coloured edge on a rounded box. A 3px fully rounded bar, inset 6px top, bottom and from the left,
   inside a box that keeps all four rounded corners. Set --lw-rail to colour it. border-left on a rounded box is never used. */
.lw-rail, .lw-banner, .lw-callout, .lw-toast { --lw-rail: var(--line-strong); position: relative; padding-left: calc(var(--rail-inset) * 2 + var(--rail-width) + var(--space-6)); border-radius: var(--radius-card); }
.lw-rail::before, .lw-banner::before, .lw-callout::before, .lw-toast::before { content: ''; position: absolute; left: var(--rail-inset); top: var(--rail-inset); bottom: var(--rail-inset); width: var(--rail-width);
  border-radius: var(--radius-pill); background: var(--lw-rail); }
/* A callout or finding: a flat panel with the rail. */
.lw-callout { padding-block: var(--space-12); padding-right: var(--space-16); background: var(--surface); border: var(--hairline) solid var(--line); }
.lw-callout--accent { --lw-rail: var(--accent); }

/* ===== Freshness banner (PAL-1311 section 3): shown only when something is wrong. Rail colour and marker shape per state; words from words.json. */
.lw-banner { display: flex; align-items: center; gap: var(--space-10); padding-block: var(--space-12); padding-right: var(--space-16);
  background: var(--surface); border: var(--hairline) solid var(--line); font-size: var(--fs-body); color: var(--ink); }
.lw-banner__word { font-weight: var(--w-semibold); }
.lw-banner__text { color: var(--ink-2); }
.lw-banner__actions { margin-left: auto; display: flex; gap: var(--space-8); }
.lw-banner__marker { flex: none; width: var(--marker); height: var(--marker); box-sizing: border-box; background: var(--lw-rail); border: var(--marker-stroke) solid var(--lw-rail); border-radius: 50%; }
.lw-banner--behind { --lw-rail: var(--degraded); }
.lw-banner--behind .lw-banner__marker { border-radius: var(--radius-marker); transform: rotate(45deg); }
.lw-banner--not-updating { --lw-rail: var(--broken); }
.lw-banner--not-updating .lw-banner__marker { border-radius: var(--radius-marker); }
.lw-banner--building, .lw-banner--paused, .lw-banner--unknown { --lw-rail: var(--not-scored); }
.lw-banner--paused .lw-banner__marker, .lw-banner--unknown .lw-banner__marker { background: transparent; }
.lw-banner--building .lw-banner__marker { background: transparent; border-color: var(--line-strong); border-top-color: var(--not-scored); animation: lw-spin .9s linear infinite; }
@keyframes lw-spin { to { transform: rotate(360deg); } }
.lw-asof { font-size: var(--fs-meta); color: var(--ink-dim); }

/* ===== page.js parts. Info card: a dotted underline on what has one; the card is .lw-hover, placed by page.js (no native title tooltips). */
.lw-info { text-decoration: underline dotted var(--ink-dim); text-underline-offset: var(--space-4); cursor: help; }
.lw-info:hover, .lw-info[aria-expanded="true"] { text-decoration-color: var(--accent); }
.lw-pop { position: fixed; left: 0; top: 0; z-index: 40; max-width: min(var(--info-max), calc(100vw - 2 * var(--space-8))); box-sizing: border-box;
  opacity: 0; transition: opacity .12s ease-out; }
.lw-pop.lw-on { opacity: 1; }
/* Label tip: icon-only buttons only. One line plus its shortcut, on a dark chip. */
.lw-tip { position: fixed; left: 0; top: 0; z-index: 50; padding: var(--space-4) var(--space-8); border-radius: var(--radius-code);
  background: var(--ink); color: var(--on-ink); font-size: var(--fs-meta); line-height: var(--lh-chip); white-space: nowrap; pointer-events: none; }
.lw-tip__key { margin-left: var(--space-8); font-family: var(--font-mono); opacity: .7; }
/* Menu: opens on click, never hover; 120ms fade; Esc or an outside click closes it and focus returns. */
.lw-menu { display: flex; flex-direction: column; min-width: calc(var(--control) * 5); padding: var(--space-4); background: var(--surface-raised);
  border: var(--hairline) solid var(--line-pop); border-radius: var(--radius-sheet); box-shadow: var(--shadow-pop); }
.lw-menu[hidden] { display: none; }
.lw-menu__item { display: flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--space-10); border: 0; border-radius: var(--radius-code);
  background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-control); text-align: left; cursor: pointer; }
.lw-menu__item:hover, .lw-menu__item:focus-visible { background: var(--control-3-hover); outline: none; }
.lw-menu__sep { height: var(--hairline); margin: var(--space-4) 0; background: var(--line); }
/* Sortable table header: a th holding a button; page.js sets aria-sort. */
.lw-sort { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.lw-sort::after { content: ''; display: inline-block; width: var(--space-6); margin-left: var(--space-4); }
[aria-sort="ascending"] > .lw-sort::after { content: '\2191'; }
[aria-sort="descending"] > .lw-sort::after { content: '\2193'; }
/* Toasts: bottom right, stacked, 6s; an error stays until closed. Past tense. */
.lw-toasts { position: fixed; right: var(--space-16); bottom: var(--space-16); z-index: 60; display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-end; }
.lw-toast { --lw-rail: var(--accent); display: flex; align-items: flex-start; gap: var(--space-10); max-width: var(--info-max); padding-block: var(--space-10); padding-right: var(--space-12);
  background: var(--surface-raised); border: var(--hairline) solid var(--line-pop); box-shadow: var(--shadow-pop); font-size: var(--fs-body); animation: lw-in .15s ease-out; }
.lw-toast--error { --lw-rail: var(--broken); }
.lw-toast__more { display: block; margin-top: var(--space-4); font-size: var(--fs-meta); color: var(--ink-dim); white-space: pre-line; }
.lw-toast__close { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .lw-pop, .lw-toast, .lw-banner--building .lw-banner__marker { transition: none; animation: none; } }

/* ===== Explainer parts (ruling 25; from the warehouse docs site): walkthrough, Q&A rows, pitch, numbered steps, timeline, peek, prompt.
   Reading text is fs-read on a reading page. */
.lw-read { font-size: var(--fs-read); line-height: 1.6; color: var(--ink-rest); }
/* Walkthrough: steps as rows, scenarios as columns; hairlines only, no boxes. A .lw-walk__head row names the columns. */
.lw-walk { margin: var(--space-16) 0 0; }
.lw-walk__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); padding: var(--space-16) 0;
  border-top: var(--hairline) solid var(--line-soft); }
.lw-walk__row p { margin: 0; }
.lw-walk__head { border-top: 0; padding-top: 0; font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); color: var(--ink-dim); }
.lw-walk__n { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--w-semibold); color: var(--accent); }
/* Q&A rows: the question as a label, the answer as body. */
.lw-qa { margin: var(--space-12) 0 var(--space-24); }
.lw-qa__row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.4fr); gap: var(--space-24); padding: var(--space-16) 0; border-top: var(--hairline) solid var(--line-soft); }
.lw-qa__q { margin: 0; font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); color: var(--ink); }
.lw-qa__a { margin: 0; }
/* Pitch: three short reasons side by side (the problem, the technique, what it unlocks), a hairline above, no boxes. */
.lw-pitch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); margin: var(--space-24) 0 var(--space-12);
  padding-top: var(--space-16); border-top: var(--hairline) solid var(--line-soft); }
.lw-pitch p { margin: 0; }
/* Numbered steps: the one numbered strip for a flow, one column per step (the columns are in the kit: Tool and Report parts section). */
.lw-steps { list-style: none; margin: var(--space-24) 0 0; padding: 0; display: grid; gap: var(--space-8); counter-reset: lw-st; }
.lw-steps > li { counter-increment: lw-st; padding: var(--space-12) var(--space-16); background: var(--surface); border-radius: var(--radius-card); }
.lw-steps > li::before { content: counter(lw-st, decimal-leading-zero); display: block; margin-bottom: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-dim); }
/* Timeline: a proportional track; an event's and a band's position come from data-x and data-w (kit: Tool and Report parts section). */
.lw-timeline { position: relative; height: calc(var(--space-56) * 2.7); margin: var(--space-32) 0 0; }
.lw-timeline__track { position: absolute; left: 0; right: 0; top: calc(var(--space-56) + var(--space-18)); height: var(--marker-stroke); background: var(--line-strong); }
.lw-timeline__band { position: absolute; top: calc(var(--space-56) + var(--space-10)); height: var(--space-18);
  background: var(--accent-soft); border-radius: var(--radius-code); }
.lw-timeline__ev { position: absolute; top: 0; width: calc(var(--space-56) * 2); margin-left: calc(var(--space-56) * -1); text-align: center; font-size: var(--fs-label); }
.lw-timeline__dt { display: block; font-family: var(--font-mono); font-weight: var(--w-semibold); }
.lw-timeline__what { display: block; color: var(--ink-dim); }
/* Peek: one or two lines and a deep link on a raised card, only where opening the element in place is too much. Placed like an info card. */
.lw-peek { padding: var(--space-8) var(--space-12); background: var(--surface-raised); border: var(--hairline) solid var(--line-pop); border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-pop); font-size: var(--fs-label); line-height: var(--lh-body); color: var(--ink); }
/* Prompt: the one way to show a sentence to say to Claude. An input-box card, an "Ask Claude" mark bottom left, Copy bottom right (page.js data-copy). */
.lw-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-12); padding: var(--space-12) var(--space-12) var(--space-8) var(--space-16);
  background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-card); transition: border-color .15s ease-out; }
.lw-prompt:hover, .lw-prompt:focus-within { border-color: var(--accent); }
.lw-prompt__text { order: 1; flex: 1 0 100%; margin: 0; overflow-wrap: anywhere; }
.lw-prompt__label { order: 2; font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); color: var(--ink-dim); }
.lw-prompt .lw-btn { order: 3; margin-left: auto; }
@media (max-width: 639.98px) {
  .lw-walk__row, .lw-qa__row, .lw-pitch { grid-template-columns: 1fr; gap: var(--space-8); }
  .lw-walk__head { display: none; }
  .lw-steps { grid-template-columns: 1fr; }
  .lw-timeline { height: auto; display: flex; flex-direction: column; gap: var(--space-12); padding-left: var(--space-18); border-left: var(--marker-stroke) solid var(--line-strong); }
  .lw-timeline__track { display: none; }
  .lw-timeline__band, .lw-timeline__ev { position: static; width: auto; margin: 0; text-align: left; }
}

/* ===== kit: primitives (InfoCard, Menu, Toast, Confirm, Banner) and charts. Owned by kit/*.tsx and kit/chart/. */
/* A closed info card: .lw-hover sets display, which would otherwise beat the hidden attribute. */
.lw-hover[hidden], .lw-chart__readout[hidden] { display: none; }
/* Confirm: a native <dialog>, the one place a task is finished or cancelled. No red button; a prod action types its target. */
.lw-confirm { width: min(calc(var(--info-max) * 1.2), calc(100vw - 2 * var(--space-16))); box-sizing: border-box; padding: var(--space-24);
  background: var(--surface-raised); color: var(--ink); border: var(--hairline) solid var(--line-pop); border-radius: var(--radius-sheet); box-shadow: var(--shadow-pop); }
.lw-confirm[open] { animation: lw-grow .15s ease-out; }
.lw-confirm::backdrop { background: var(--surface-glass); }
.lw-confirm__form { display: flex; flex-direction: column; gap: var(--space-16); margin: 0; }
.lw-confirm__heading { margin: 0; font-size: var(--fs-heading); font-weight: var(--w-semibold); }
.lw-confirm__body { color: var(--ink-2); }
.lw-confirm__gate { display: flex; flex-direction: column; gap: var(--space-6); font-size: var(--fs-label); color: var(--ink-2); }
.lw-confirm__target { padding: var(--code-pad-y) var(--code-pad-x); border-radius: var(--radius-code); background: var(--control-3); font-family: var(--font-mono); color: var(--ink); }
.lw-confirm__actions { display: flex; justify-content: flex-end; gap: var(--space-8); }
/* Charts: server-drawn SVG. A series' colour is its position (s1..s4 = chart-1..4), Other is neutral; status colours only tint bands. */
.lw-chart { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.lw-chart__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
.lw-chart__s1 { --lw-s: var(--chart-1); }
.lw-chart__s2 { --lw-s: var(--chart-2); }
.lw-chart__s3 { --lw-s: var(--chart-3); }
.lw-chart__s4 { --lw-s: var(--chart-4); }
.lw-chart__other { --lw-s: var(--ink-dim); }
.lw-chart__grid { stroke: var(--chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lw-chart__axis { stroke: var(--chart-axis); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lw-chart__tick { fill: var(--ink-dim); font-size: var(--fs-meta); }
.lw-chart__cat { fill: var(--ink-2); }
.lw-chart__line { fill: none; stroke: var(--lw-s); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lw-chart__dot { fill: var(--lw-s); }
.lw-chart__bar { fill: var(--lw-s); }
.lw-chart__value { fill: var(--ink-2); font-size: var(--fs-meta); }
.lw-chart__leader { stroke: var(--lw-s); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lw-chart__label { fill: var(--ink); font-size: var(--fs-meta); }
.lw-chart__band { opacity: var(--band-alpha); }
.lw-chart__band--good { fill: var(--good); }
.lw-chart__band--watch { fill: var(--watch); }
.lw-chart__band--act { fill: var(--act); }
.lw-chart__guide { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
/* The readout: an info card's look, shown at once with no fade, beside the pointer. */
.lw-chart__readout { position: absolute; z-index: 30; min-width: calc(var(--control) * 4); padding: var(--space-8) var(--space-12); gap: var(--space-4); pointer-events: none; }
.lw-chart__readout-title { font-size: var(--fs-meta); font-weight: var(--w-semibold); color: var(--ink); }
.lw-chart__key { display: inline-block; flex: none; width: var(--space-10); height: var(--space-10); margin-right: var(--space-6); border-radius: var(--radius-marker); background: var(--lw-s); }
.lw-legend { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); margin: 0; padding: 0; list-style: none; font-size: var(--fs-meta); color: var(--ink-2); }
.lw-legend__item { display: inline-flex; align-items: center; gap: var(--space-6); }
.lw-spark { display: inline-block; vertical-align: middle; overflow: visible; }
.lw-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--control) * 6), 1fr)); gap: var(--space-16) var(--space-24); }
.lw-multiples__name { font-size: var(--fs-label); font-weight: var(--w-semibold); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .lw-confirm[open] { animation: none; } }

/* ===== kit: Tool and Report parts. Owned by kit/tool/ and kit/report/. */
/* One focus ring for every kit control, on :focus-visible alone, so a page with scripts off (no page.js data-kbd) still shows it. */
:is(.lw-counts__tile, .lw-views__item, .lw-list__table, .lw-list__sort, .lw-seg__item, .lw-tabs__tab, .lw-switch, .lw-chip,
  .lw-toc__link, .lw-section__anchor, .lw-info):focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lw-stats__link:focus-visible { outline: none; }
.lw-stats__link:focus-visible::after { box-shadow: var(--focus-ring); }
.lw-drawer:focus-visible { outline: none; }

/* Count tiles: each a filter link; the one in force is marked with the accent edge, figures stay ink. */
.lw-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--hairline); background: var(--line-soft);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.lw-counts__tile { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12) var(--space-16); background: var(--surface);
  color: var(--ink); text-decoration: none; transition: background-color .12s ease-out; }
.lw-counts__tile:hover { background: var(--accent-softer); }
.lw-counts__tile[aria-current] { background: var(--accent-soft); box-shadow: inset 0 calc(var(--rail-width) * -1) 0 var(--accent); }
.lw-counts__label { font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); color: var(--ink-2); }
.lw-counts__note { font-size: var(--fs-meta); color: var(--ink-dim); }

/* Views: Focus, the role's starred views, All. Links, so a view is an address. */
.lw-views { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.lw-views__item { display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--control-sm); padding: 0 var(--space-12);
  border-radius: var(--radius-pill); color: var(--ink-2); font-size: var(--fs-control); text-decoration: none; }
.lw-views__item:hover { background: var(--control-3-hover); color: var(--ink); }
.lw-views__item[aria-current] { background: var(--control-2); color: var(--ink); font-weight: var(--w-semibold); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.lw-views__item--all { margin-left: var(--space-8); }
.lw-views__star { color: var(--accent); }
.lw-views__count { font-size: var(--fs-meta); color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* Dense list: a real table. The cursor row (j/k) and the open row carry the accent tint; a dim row is out of focus but listed. */
.lw-list { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); overflow: auto; }
.lw-list__table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.lw-list__table th { position: sticky; top: 0; z-index: 1; padding: var(--space-8) var(--space-12); background: var(--surface); border-bottom: var(--hairline) solid var(--line);
  font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); color: var(--ink-dim); text-align: left; white-space: nowrap; }
.lw-list__table td { padding: var(--space-6) var(--space-12); border-bottom: var(--hairline) solid var(--line-soft); color: var(--ink-rest); vertical-align: middle; }
.lw-list__table tr:last-child td { border-bottom: 0; }
.lw-list__row { cursor: pointer; transition: background-color .12s ease-out; }
.lw-list__row:hover, .lw-list__row--cursor { background: var(--accent-softer); }
.lw-list__row[aria-current] { background: var(--accent-soft); }
.lw-list__row[aria-selected="true"] td:first-child { box-shadow: inset var(--rail-width) 0 0 var(--accent); }
.lw-list__row--dim td { color: var(--ink-dim); }
.lw-list__num { text-align: right; font-variant-numeric: tabular-nums; }
.lw-list__table th.lw-list__num { text-align: right; }
.lw-list__check { width: var(--control-sm); }
.lw-list__check input { width: var(--space-16); height: var(--space-16); margin: 0; accent-color: var(--accent); }
.lw-list__open { color: inherit; text-decoration: none; }
.lw-list__menu { width: var(--control-sm); text-align: right; }
.lw-list__menu > * { opacity: 0; transition: opacity .12s ease-out; }
.lw-list__row:hover .lw-list__menu > *, .lw-list__row--cursor .lw-list__menu > *, .lw-list__menu:focus-within > * { opacity: 1; }
@media (pointer: coarse) { .lw-list__menu > * { opacity: 1; } }
.lw-list__sort { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.lw-list__sort::after { content: ''; display: inline-block; width: var(--space-6); margin-left: var(--space-4); }
[aria-sort="ascending"] > .lw-list__sort::after { content: '\2191'; }
[aria-sort="descending"] > .lw-list__sort::after { content: '\2193'; }
.lw-list-skel { padding: var(--space-16); }

/* Empty: what is empty and why, then the one thing to do. */
.lw-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding: var(--space-28) var(--space-24);
  background: var(--surface); border: var(--hairline) dashed var(--line-strong); border-radius: var(--radius-md); }
.lw-empty__title { margin: 0; font-family: var(--font-label); font-size: var(--fs-heading); font-weight: var(--w-semibold); }
.lw-empty__text { color: var(--ink-2); max-width: calc(var(--info-max) * 1.6); }

/* Drawer: one item, beside the list; "what to do" first. A full-width sheet on a narrow page. */
.lw-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; gap: var(--space-16);
  width: min(100%, calc(var(--info-max) * 1.6)); box-sizing: border-box; padding: var(--space-16) var(--space-18); overflow-y: auto;
  background: var(--surface-raised); border-left: var(--hairline) solid var(--line-pop); box-shadow: var(--shadow-pop); animation: lw-in .15s ease-out;
  padding-bottom: max(var(--space-24), env(safe-area-inset-bottom)); }
.lw-drawer__head { display: flex; align-items: flex-start; gap: var(--space-10); }
.lw-drawer__title { flex: 1; margin: 0; font-family: var(--font-label); font-size: var(--fs-heading); font-weight: var(--w-bold); letter-spacing: var(--track-tight);
  line-height: var(--lh-lead); overflow-wrap: anywhere; }
.lw-drawer__pos { padding-top: var(--space-6); font-size: var(--fs-meta); color: var(--ink-dim); white-space: nowrap; }
.lw-drawer__todo { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-16); border-bottom: var(--hairline) solid var(--line); }
.lw-drawer__todo-text { font-size: var(--fs-heading); font-weight: var(--w-semibold); line-height: var(--lh-lead); text-wrap: balance; }
.lw-drawer__body { display: flex; flex-direction: column; gap: var(--space-16); }

/* Segmented: 2-4 choices on one quiet track; the chosen one raised. */
.lw-seg { display: inline-flex; gap: var(--space-2); padding: var(--space-2); background: var(--control-3); border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm); }
.lw-seg__item { min-height: calc(var(--control-sm) - var(--space-6)); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-code);
  background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-control); cursor: pointer; }
.lw-seg__item:hover { color: var(--ink); }
.lw-seg__item[aria-checked="true"] { background: var(--surface-raised); color: var(--ink); font-weight: var(--w-semibold); box-shadow: inset 0 0 0 var(--hairline) var(--line); }

/* Tabs: an underline on the chosen tab. */
.lw-tabs { display: flex; gap: var(--space-4); border-bottom: var(--hairline) solid var(--line); overflow-x: auto; }
.lw-tabs__tab { display: inline-flex; align-items: center; min-height: var(--control); padding: 0 var(--space-12); border: 0; background: none;
  color: var(--ink-2); font: inherit; font-size: var(--fs-control); text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 calc(var(--marker-stroke) * -1) 0 transparent; }
.lw-tabs__tab:hover { color: var(--ink); }
.lw-tabs__tab[aria-selected="true"] { color: var(--ink); font-weight: var(--w-semibold); box-shadow: inset 0 calc(var(--marker-stroke) * -1) 0 var(--accent); }

/* Switch: acts when flipped. */
.lw-switch { display: inline-flex; align-items: center; gap: var(--space-10); min-height: var(--control-sm); padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: var(--fs-control); cursor: pointer; }
.lw-switch__track { position: relative; flex: none; width: calc(var(--space-18) * 2); height: calc(var(--space-10) * 2); border-radius: var(--radius-pill);
  background: var(--line-strong); transition: background-color .15s ease-out; }
.lw-switch__thumb { position: absolute; top: var(--space-2); left: var(--space-2); width: var(--space-16); height: var(--space-16); border-radius: 50%;
  background: var(--surface-raised); box-shadow: var(--shadow-pop); transition: transform .15s ease-out; }
.lw-switch[aria-checked="true"] .lw-switch__track { background: var(--accent); }
.lw-switch[aria-checked="true"] .lw-switch__thumb { transform: translateX(var(--space-16)); }

.lw-select { display: inline-flex; align-items: center; gap: var(--space-8); }

/* Chips: stackable filters; an on chip carries the accent. */
.lw-chips { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.lw-chip { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--space-12); border: var(--hairline) solid var(--line);
  border-radius: var(--radius-pill); background: var(--control-3); color: var(--ink-2); font: inherit; font-size: var(--fs-control); text-decoration: none; cursor: pointer; }
.lw-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.lw-chip[aria-pressed="true"], .lw-chip[aria-current] { background: var(--accent-soft); border-color: var(--line-accent); color: var(--ink); font-weight: var(--w-semibold); }

/* Search: '/' focuses it; the key hint hides once it has focus. */
.lw-search { position: relative; display: inline-flex; align-items: center; }
.lw-search__box { min-width: calc(var(--info-max) * .6); padding-right: var(--space-28); }
.lw-search__key { position: absolute; right: var(--space-8); padding: 0 var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-code);
  font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--ink-dim); pointer-events: none; }
.lw-search__box:focus + .lw-search__key { display: none; }

/* Report: header, stat row, then a left-aligned 760px reading column (wide: the page's width) with the page index in a right-hand
   column from 1024px, above the column below that. A page with no index (the stats link to the sections) is the column alone. */
.lw-report { display: flex; flex-direction: column; gap: var(--space-24); }
.lw-report__head { display: flex; flex-direction: column; gap: var(--space-8); max-width: calc(var(--info-max) * 2); }
.lw-report__scope { margin: 0; font-size: var(--fs-meta); color: var(--ink-dim); }
.lw-report__title { margin: 0; font-family: var(--font-label); font-size: var(--fs-section); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: var(--lh-lead); color: var(--ink); }
.lw-report__standfirst { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-lead); color: var(--ink-2); }
.lw-report__body { display: grid; grid-template-columns: minmax(0, 760px); gap: var(--space-24); }
.lw-report__body--wide { grid-template-columns: minmax(0, 1fr); }
.lw-report__body--wide :is(.lw-section > p, .lw-method > div) { max-width: 760px; }
.lw-report__body > .lw-toc { order: -1; }
.lw-report__column { display: flex; flex-direction: column; gap: var(--space-40); min-width: 0; }
@media (min-width: 1024px) {
  .lw-report__body--index { grid-template-columns: minmax(0, 760px) 200px; gap: var(--space-40); }
  .lw-report__body--index.lw-report__body--wide { grid-template-columns: minmax(0, 1fr) 200px; }
  .lw-report__body > .lw-toc { order: 0; position: sticky; top: var(--space-16); align-self: start; }
}

.lw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-16); margin: 0; padding: var(--space-16) 0;
  border-block: var(--hairline) solid var(--line); }
.lw-stats__item { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.lw-stats__label { font-family: var(--font-label); font-size: var(--fs-label); font-weight: var(--w-semibold); color: var(--ink-2); }
.lw-stats__value { display: flex; align-items: baseline; gap: var(--space-4); margin: 0; }
.lw-stats__unit { font-size: var(--fs-meta); color: var(--ink-dim); }
/* A stat with an address: the link covers the cell (LogWatch's count tiles); the label's info card stays above it. */
.lw-stats__item--link { position: relative; margin: calc(var(--space-6) * -1) calc(var(--space-8) * -1); padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-md); }
.lw-stats__item--link:hover { background: var(--accent-softer); }
.lw-stats__item--link .lw-info { position: relative; z-index: 1; }
.lw-stats__link { color: inherit; text-decoration: none; }
.lw-stats__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.lw-toc { display: flex; flex-direction: column; gap: var(--space-6); font-size: var(--fs-label); }
.lw-toc__list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lw-toc__link { display: block; padding: var(--space-4) var(--space-8); border-radius: var(--radius-code); color: var(--ink-2); text-decoration: none; }
.lw-toc__link:hover { background: var(--control-3-hover); color: var(--ink); }

.lw-section { display: flex; flex-direction: column; gap: var(--space-16); scroll-margin-top: var(--space-16); }
.lw-section > p { margin: 0; }
.lw-section__title { margin: 0; font-family: var(--font-label); font-size: var(--fs-title); font-weight: var(--w-bold); letter-spacing: var(--track-tight); }
.lw-section__anchor { color: inherit; text-decoration: none; }
.lw-section__anchor:hover::after { content: '#'; margin-left: var(--space-8); color: var(--ink-dim); }
.lw-finding { display: flex; flex-direction: column; gap: var(--space-4); }
.lw-finding__label { color: var(--accent); }
.lw-method { padding-top: var(--space-24); border-top: var(--hairline) solid var(--line); font-size: var(--fs-body); color: var(--ink-2); }

/* Figure frame: title, subtitle with unit, chart, legend, Table and Copy, caption naming its block. */
.lw-fig { display: flex; flex-direction: column; gap: var(--space-10); margin: 0; }
.lw-fig__head { display: flex; flex-direction: column; gap: var(--space-2); }
.lw-fig__title { margin: 0; font-family: var(--font-label); font-size: var(--fs-heading); font-weight: var(--w-semibold); color: var(--ink); }
.lw-fig__subtitle { margin: 0; font-size: var(--fs-meta); color: var(--ink-dim); }
.lw-fig__chart { min-width: 0; }
.lw-fig__tools { display: flex; align-items: flex-start; gap: var(--space-8); }
.lw-fig__table { flex: 1; min-width: 0; }
.lw-fig__table[open] > .lw-dtable-wrap { margin: var(--space-8) var(--space-12) var(--space-12); }
.lw-fig__caption { font-size: var(--fs-meta); color: var(--ink-dim); }

/* Report table: page.js sorts it (th > .lw-sort). */
.lw-dtable-wrap { overflow-x: auto; }
.lw-dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.lw-dtable__caption { padding-bottom: var(--space-8); font-size: var(--fs-meta); color: var(--ink-dim); text-align: left; }
.lw-dtable th { padding: var(--space-6) var(--space-10); border-bottom: var(--hairline) solid var(--line); font-family: var(--font-label); font-size: var(--fs-label);
  font-weight: var(--w-semibold); color: var(--ink-dim); text-align: left; white-space: nowrap; }
.lw-dtable td { padding: var(--space-6) var(--space-10); border-bottom: var(--hairline) solid var(--line-soft); vertical-align: top; }
/* A cell's stacked lines (a pill and its words per line), under the cell's lead text. */
.lw-dtable__lines { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: var(--fs-meta); }
.lw-dtable__chips { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.lw-dtable__num, .lw-dtable th.lw-dtable__num { text-align: right; font-variant-numeric: tabular-nums; }

/* Under 640px: tables stack, a row becomes a block; the section list is a plain list above the column. */
@media (max-width: 639.98px) {
  .lw-list__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lw-list__table tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-10); padding: var(--space-10) var(--space-12);
    border-bottom: var(--hairline) solid var(--line-soft); }
  .lw-list__table td { padding: 0; border: 0; }
  .lw-drawer { width: 100%; border-left: 0; }
  .lw-report__title { font-size: var(--fs-title); }
}
@media (prefers-reduced-motion: reduce) { .lw-drawer, .lw-switch__thumb, .lw-switch__track, .lw-counts__tile, .lw-list__row, .lw-list__menu > * { transition: none; animation: none; } }

/* Steps: one equal column per step without a count; one column under 640px. */
.lw-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Timeline positions with no inline style (the shell's CSP has no style-src): data-x is a left edge and data-w a band's width, a whole
   percent as three digits ("037"); the tens and the units are added. */
.lw-timeline [data-x] { left: calc(var(--lw-x10, 0%) + var(--lw-x1, 0%)); }
.lw-timeline [data-w] { width: calc(var(--lw-w10, 0%) + var(--lw-w1, 0%)); }
.lw-timeline [data-x^="01"] { --lw-x10: 10%; } .lw-timeline [data-x^="02"] { --lw-x10: 20%; } .lw-timeline [data-x^="03"] { --lw-x10: 30%; } .lw-timeline [data-x^="04"] { --lw-x10: 40%; } .lw-timeline [data-x^="05"] { --lw-x10: 50%; }
.lw-timeline [data-x^="06"] { --lw-x10: 60%; } .lw-timeline [data-x^="07"] { --lw-x10: 70%; } .lw-timeline [data-x^="08"] { --lw-x10: 80%; } .lw-timeline [data-x^="09"] { --lw-x10: 90%; } .lw-timeline [data-x="100"] { --lw-x10: 100%; }
.lw-timeline [data-x$="1"] { --lw-x1: 1%; } .lw-timeline [data-x$="2"] { --lw-x1: 2%; } .lw-timeline [data-x$="3"] { --lw-x1: 3%; } .lw-timeline [data-x$="4"] { --lw-x1: 4%; } .lw-timeline [data-x$="5"] { --lw-x1: 5%; }
.lw-timeline [data-x$="6"] { --lw-x1: 6%; } .lw-timeline [data-x$="7"] { --lw-x1: 7%; } .lw-timeline [data-x$="8"] { --lw-x1: 8%; } .lw-timeline [data-x$="9"] { --lw-x1: 9%; }
.lw-timeline [data-w^="01"] { --lw-w10: 10%; } .lw-timeline [data-w^="02"] { --lw-w10: 20%; } .lw-timeline [data-w^="03"] { --lw-w10: 30%; } .lw-timeline [data-w^="04"] { --lw-w10: 40%; } .lw-timeline [data-w^="05"] { --lw-w10: 50%; }
.lw-timeline [data-w^="06"] { --lw-w10: 60%; } .lw-timeline [data-w^="07"] { --lw-w10: 70%; } .lw-timeline [data-w^="08"] { --lw-w10: 80%; } .lw-timeline [data-w^="09"] { --lw-w10: 90%; } .lw-timeline [data-w="100"] { --lw-w10: 100%; }
.lw-timeline [data-w$="1"] { --lw-w1: 1%; } .lw-timeline [data-w$="2"] { --lw-w1: 2%; } .lw-timeline [data-w$="3"] { --lw-w1: 3%; } .lw-timeline [data-w$="4"] { --lw-w1: 4%; } .lw-timeline [data-w$="5"] { --lw-w1: 5%; }
.lw-timeline [data-w$="6"] { --lw-w1: 6%; } .lw-timeline [data-w$="7"] { --lw-w1: 7%; } .lw-timeline [data-w$="8"] { --lw-w1: 8%; } .lw-timeline [data-w$="9"] { --lw-w1: 9%; }
@media (max-width: 639.98px) {
  .lw-steps { grid-auto-flow: row; }
  .lw-timeline [data-w] { width: auto; }
}