/* ============================================================
   Ellm Tree v2 — Cross-kit bespoke widgets
   Lives in v2/ui_kits/kit.css. Loaded on EVERY v2 page after
   theme.css and before any per-kit (app/marketing/docs) sheet.

   Per CLAUDE.md: this is for widgets Bulma doesn't have a
   primitive for. Anything that targets a stock Bulma class
   (.button, .input, .table…) belongs in theme.css, not here.

   Naming: every selector here is `et-` prefixed. Modifiers are
   joined with a single dash (`et-plate-no`, `et-sheet-head`)
   to match the v1 kit's flat convention.
   ============================================================ */

/* ============================================================
   et-sheet — page-level container with masthead + colophon
   Use:
     <main class="et-sheet">
       <header class="et-sheet-head">
         <div class="et-sheet-title">…</div>
         <div class="et-sheet-meta">…</div>
       </header>
       … plates / content …
       <footer class="et-sheet-foot">
         <span>…</span><span class="et-sheet-foot-mid">…</span><span>…</span>
       </footer>
     </main>
   ============================================================ */
.et-sheet {
  max-width: 1180px;
  margin: 48px auto;
  padding: 0 var(--sp-8);
}

/* Masthead — bottom hairline + green underrule. Two columns:
   left = title block, right = metadata block. */
.et-sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--sp-8);
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 36px;
  position: relative;
}
.et-sheet-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px; background: var(--green-600);
}

/* Title block — eyebrow caps over a real <h1>/.title.is-1 */
.et-sheet-title h1, .et-sheet-title .title {
  margin: 0 0 6px;
}
.et-sheet-title .et-eyebrow {
  margin-bottom: 8px;
}
.et-sheet-title .et-lead {
  font-family: var(--font-prose);
  color: var(--meta);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin: 4px 0 0;
  max-width: 56ch;
}

/* Meta block — right-aligned mono caps stack */
.et-sheet-meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  line-height: 1.7;
}
.et-sheet-meta b {
  color: var(--green-700);
  font-weight: 700;
}

/* Colophon — mirrors masthead (top hairline + green overrule) */
.et-sheet-foot {
  margin-top: 48px;
  padding-top: 14px;
  border-top: 1.5px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  position: relative;
}
.et-sheet-foot::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -6px;
  height: 1.5px; background: var(--green-600);
}
.et-sheet-foot-mid {
  color: var(--green-700);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
}
.et-sheet-foot-mid::before {
  content: '';
  width: 9px; height: 9px;
  background: var(--green-600);
  display: inline-block;
}
.et-sheet-foot > :last-child { text-align: right; }

/* ============================================================
   et-wm — stacked pixel wordmark beside the brand mark
   Two short words ("ELLM" / "TREE"), 2-line stacked, mono caps,
   tracked. Default size matches the navbar lockup (small contexts);
   pass `--wm-size` to grow. Color is brand green with a sharp ink
   step-shadow so the lockup reads as a stamp on paper.
   Use:
     <span class="et-wm"><span>ELLM</span><span>TREE</span></span>
   ============================================================ */
.et-wm {
  --wm-size: 12px;
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-weight: var(--fw-black);
  font-size: var(--wm-size);
  line-height: 0.9;
  letter-spacing: 0.18em;
  color: var(--green-600);
  text-shadow: 1px 1px 0 var(--ink);
}
.et-wm > span {
  display: block;
  padding: 0;
}
/* Display variant — used on holding/marketing pages and beside the
   64–88px tree mark. Larger glyphs warrant a deeper 3-step shadow
   so the stamped feel scales with the type. */
.et-wm.is-display {
  --wm-size: 40px;
  letter-spacing: 0.22em;
  text-shadow:
    1px 1px 0 var(--ink),
    2px 2px 0 var(--ink),
    3px 3px 0 var(--ink);
}

/* ============================================================
   et-plate — bordered specimen frame with hanging label + number
   Use:
     <section class="et-plate">
       <span class="et-plate-label">Plate · Substrate</span>
       <span class="et-plate-no">No. 01</span>
       <h2 class="title is-3">…</h2>
       <p class="et-plate-sub">…</p>
       … content …
     </section>
   ============================================================ */
.et-plate {
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  padding: 28px 26px 26px;
  position: relative;
  margin: 36px 0;
  /* Subtle blurred lift — paper sitting on paper, not a card. */
  box-shadow: 0 2px 8px rgba(10, 40, 23, 0.06),
              0 8px 24px rgba(10, 40, 23, 0.05);
}
.et-plate-label,
.et-plate-no {
  position: absolute;
  top: -9px;
  background: var(--paper);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: 18px;
}
.et-plate-label { left: 22px;  color: var(--meta); }
.et-plate-no    { right: 22px; color: var(--green-700); font-weight: 700; }

/* Plate subtitle — readable prose, sits under the title */
.et-plate-sub {
  font-family: var(--font-prose);
  color: var(--ink-2);
  font-size: var(--text-md);             /* 17px — readable, not tiny */
  line-height: var(--leading-relaxed);
  margin: 4px 0 22px;
  max-width: 72ch;
}

/* ============================================================
   et-eyebrow — small caps overline above a heading
   Use: <div class="et-eyebrow">Section · Folio 02</div>
   ============================================================ */
.et-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  display: inline-block;
}
.et-eyebrow.is-green { color: var(--green-700); font-weight: 700; }
.et-eyebrow.is-ink   { color: var(--ink); font-weight: 700; }

/* ============================================================
   et-swatch — color card primitive
   Use:
     <div class="et-swatch">
       <div class="et-swatch-chip is-paper"></div>
       <div class="et-swatch-meta">
         <span class="et-swatch-name">Paper</span>
         <span class="et-swatch-hex">#f6f1e3 · --paper</span>
         <span class="et-swatch-role">Page ground</span>
       </div>
     </div>
   ============================================================ */
.et-swatch {
  border: 1px solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.et-swatch-chip {
  height: 84px;
  border-bottom: 1px solid var(--ink);
}
.et-swatch-meta {
  padding: 9px 11px 11px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.et-swatch-name {
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink);
  font-weight: 700;
}
.et-swatch-hex  { color: var(--meta); }
.et-swatch-role { color: var(--green-700); font-weight: 700; margin-top: 3px; }

/* ============================================================
   et-typerow / et-specrow — left-gutter spec row
   A 140px gutter on the left for a label, content on the right.
   Used for type specimens, but generally useful for any
   "label · value" layout with a hairline divider.
   ============================================================ */
.et-specrow {
  border-top: 1px solid var(--ink-glass-12);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 28px;
  align-items: baseline;
}
.et-specrow:first-child { border-top: 0; padding-top: 0; }
.et-specrow-gut {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  line-height: 1.65;
}
.et-specrow-gut b {
  color: var(--ink);
  display: block;
  font-weight: 700;
}

/* ============================================================
   et-demorow — flex row of UI controls with a left label
   Use:
     <div class="et-demorow">
       <span class="et-demorow-label">Buttons</span>
       <button class="button">…</button> …
     </div>
   ============================================================ */
.et-demorow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--ink-glass-12);
}
.et-demorow:first-child { border-top: 0; padding-top: 0; }
.et-demorow-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  width: 110px;
  flex-shrink: 0;
}
.et-demorow.is-block {
  display: block;
}
.et-demorow.is-block .et-demorow-label {
  width: auto;
  margin-bottom: 12px;
}

/* ============================================================
   et-grid-N — simple uniform grids inside plates
   Catalog system uses these constantly; cleaner than re-typing
   `style="display: grid; grid-template-columns: repeat(N, 1fr)"`.
   ============================================================ */
.et-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.et-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.et-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.et-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.et-grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;     }

/* ============================================================
   et-rule — horizontal hairline rule with optional green tick
   ============================================================ */
.et-rule {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: var(--sp-6) 0;
}
.et-rule.is-thick { border-top-width: 1.5px; }
.et-rule.is-green { border-top-color: var(--green-600); }

/* ============================================================
   et-stack-* — vertical rhythm utilities. Use sparingly; prefer
   primitives that bake in their own spacing.
   ============================================================ */
.et-stack-sm { margin-top: 14px; }
.et-stack-md { margin-top: 28px; }
.et-stack-lg { margin-top: 48px; }

/* ============================================================
   et-swatch-chip color modifiers
   So pages don't need style="background: var(--x)" on every chip.
   ============================================================ */
.et-swatch-chip.is-paper   { background: var(--paper);   }
.et-swatch-chip.is-paper-2 { background: var(--paper-2); }
.et-swatch-chip.is-paper-3 { background: var(--paper-3); }
.et-swatch-chip.is-ink     { background: var(--ink);     }
.et-swatch-chip.is-ink-2   { background: var(--ink-2);   }
.et-swatch-chip.is-meta    { background: var(--meta);    }
.et-swatch-chip.is-brand,
.et-swatch-chip.is-green-700 { background: var(--green-700); }
.et-swatch-chip.is-amber   { background: var(--amber-600); }
.et-swatch-chip.is-sky     { background: var(--sky-600);  }

.et-swatch-name.is-brand { color: var(--green-700); }

/* ============================================================
   et-scale — 8-tile color ramp with mono caption legend
   Use:
     <div class="et-scale">
       <div class="et-scale-tiles">
         <div class="et-scale-tile" data-tone="950"></div>
         ... 8 tiles ...
       </div>
       <div class="et-scale-legend">
         <span>950</span>... <span class="is-marked">700 ★</span> ...
       </div>
     </div>
   ============================================================ */
.et-scale-tiles {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--ink);
}
.et-scale-tile { height: 70px; }
.et-scale-tile[data-tone="950"] { background: var(--green-950); }
.et-scale-tile[data-tone="900"] { background: var(--green-900); }
.et-scale-tile[data-tone="800"] { background: var(--green-800); }
.et-scale-tile[data-tone="700"] { background: var(--green-700); }
.et-scale-tile[data-tone="600"] { background: var(--green-600); }
.et-scale-tile[data-tone="500"] { background: var(--green-500); }
.et-scale-tile[data-tone="400"] { background: var(--green-400); }
.et-scale-tile[data-tone="200"] { background: var(--green-200); }
.et-scale-legend {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--meta);
}
.et-scale-legend .is-marked {
  color: var(--green-700);
  font-weight: 700;
}

/* ============================================================
   et-fields — 2-col grid for form controls. Inputs sit on
   one row, full-width children (.textarea by default) span
   both columns. Capped width so fields don't sprawl.
   ============================================================ */
.et-fields {
  flex: 1;
  min-width: 0;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}
.et-fields .textarea,
.et-fields .is-full {
  grid-column: 1 / -1;
}

/* ============================================================
   et-specrow extras — kill stock margins on Bulma titles inside
   spec rows, and provide a UI-body type specimen class.
   ============================================================ */
.et-specrow .title,
.et-specrow > p,
.et-specrow .caps {
  margin: 0;
}
.et-ui-body {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--ink);
  line-height: var(--leading-normal);
}

/* Prose sample — IBM Plex paragraph at the standard reading
   measure. Used inside type specimens and any place a single
   paragraph of prose should sit cleanly without inheriting the
   plate's wider container. */
.et-prose-sample {
  font-family: var(--font-prose);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink);
  margin: 0;
  max-width: 64ch;
}

/* ============================================================
   et-demorow modifiers
   ============================================================ */
.et-demorow.is-top { align-items: flex-start; }
/* Tables and pagination dropped into a demorow shouldn't carry
   stock Bulma margins — the row itself owns the spacing. */
.et-demorow .table { margin: 0; }
.et-demorow .pagination { justify-content: flex-start; }

/* ============================================================
   et-kpi — single statistic card (value + label + delta).
   Catalog interpretation of the v1 "KPI strip":
     paper-2 plate, hairline ink border, no glow.
     Value: big mono number in ink.
     Label: small caps in meta.
     Delta: mono row with ▲/▼ glyph, green for up, amber for down.
   Use:
     <div class="et-kpi">
       <span class="et-kpi-value">3.4M</span>
       <span class="et-kpi-label">Tokens / Day</span>
       <span class="et-kpi-delta is-up">▲ +12% vs last week</span>
     </div>
   Grid wrapper: <div class="et-grid-4"> (already provided).
   ============================================================ */
.et-kpi {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.et-kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--green-900);
}
.et-kpi-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  font-weight: var(--fw-bold);
  margin-top: 8px;
}
.et-kpi-delta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  color: var(--meta);
  font-weight: var(--fw-semibold);
  margin-top: 4px;
}
.et-kpi-delta.is-up   { color: var(--green-700); }
.et-kpi-delta.is-down { color: var(--amber-600); }
.et-kpi-delta.is-flat { color: var(--meta); }

/* ============================================================
   et-node — pipeline block node. Three sub-types: trunk, branch,
   leaf. The catalog interpretation is flat, hairline, paper-on-
   ink — no glow, no inset highlights from v1.
     trunk  = ink fill, paper digit
     branch = green-700 fill, paper digit
     leaf   = paper-2 fill, ink digit, green hairline
   Sizing baked at 56×56 to match v1; use is-lg for 72×72.
   ============================================================ */
.et-node {
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--fw-black);
  font-size: var(--text-base);
  letter-spacing: 0;
  background: var(--paper-2);
  color: var(--ink);
  position: relative;
}
.et-node.is-trunk  { background: var(--ink);       color: var(--paper); border-color: var(--ink); }
.et-node.is-branch { background: var(--green-700); color: var(--paper); border-color: var(--green-900); }
.et-node.is-leaf   { background: var(--paper-2);   color: var(--ink);   border-color: var(--green-700); }
.et-node.is-lg { width: 72px; height: 72px; font-size: var(--text-lg); }

/* Node frame — graph-paper inset for laying out a row of nodes
   inside a specimen plate or editor scratch surface. */
.et-node-frame {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 28px 24px;
  background-image:
    linear-gradient(to right,  var(--ink-glass-08) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-glass-08) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 180px;
}
.et-node-row {
  display: flex;
  gap: 36px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.et-node-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.et-node-cell-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--meta);
  font-weight: var(--fw-bold);
}

/* ============================================================
   et-chart — chart panel frame. A bordered plate with a header
   strip (title + right-aligned tag) and a body slot for ECharts
   to mount into.
   Use:
     <div class="et-chart">
       <header class="et-chart-head">
         <span class="et-chart-title">Token Throughput</span>
         <span class="tag">Last 14 days · tokens/sec</span>
       </header>
       <div class="et-chart-body" id="chart-throughput"></div>
     </div>
   The body sets min-height so the chart has room before ECharts
   resizes it. Add .is-tall to the body for a taller panel.
   ============================================================ */
.et-chart {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.et-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 12px 18px;
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-3);
}
.et-chart-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink);
}
.et-chart-body {
  padding: 16px 18px;
  min-height: 240px;
  background: var(--paper-2);
}
.et-chart-body.is-tall { min-height: 320px; }

/* ============================================================
   et-feature — feature card for marketing/landing surfaces.
   Icon frame on top, mono title, prose body. Catalog-flat:
   hairline border, no shadow, no hover lift.
   ============================================================ */
.et-feature {
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.et-feature-icon {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  background: var(--paper-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.et-feature-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.et-feature-title {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.et-feature-body {
  font-family: var(--font-prose);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
  margin: 0;
}

/* ============================================================
   et-status — inline status badge with pulse dot. The catalog
   replacement for v1's pulse pill ("System Version 1.0.0 Active").
   ============================================================ */
.et-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--ink);
}
.et-status-dot {
  width: 8px;
  height: 8px;
  background: var(--green-700);
  display: inline-block;
  animation: et-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.et-status.is-warn   { border-color: var(--amber-600); }
.et-status.is-warn   .et-status-dot { background: var(--amber-600); }
.et-status.is-danger { border-color: #b91c1c; }
.et-status.is-danger .et-status-dot { background: #b91c1c; }
@keyframes et-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Brand lockup — for navbar / holding / marketing contexts, use
   the existing .et-wm wordmark (see top of file) inside a plain
   <a> with the tree mark as a sibling <img>. The app navbar tunes
   padding/sizing via .navbar-item.is-brand in ui_kits/app/kit.css.
   No separate .et-brand-lockup primitive — keep one canonical
   wordmark class, not two. */

/* ============================================================
   Alpine.js x-cloak — hides any element marked `x-cloak` until
   Alpine has initialized, so `x-show`/`x-if`-controlled elements
   don't flash visible during the brief window between the HTML
   landing in the DOM and Alpine processing the directives. The
   attribute is removed by Alpine on init, so the rule applies
   only to the pre-init flash.
   Recommended by the Alpine docs; any page using x-show/x-if
   should add x-cloak to the controlled elements.
   ============================================================ */
[x-cloak] { display: none !important; }

/* ============================================================
   Small utilities replacing former inline style="" attributes,
   so the admin/platform pages run under a strict CSP style-src
   'self' (no 'unsafe-inline'). See internal/securityheaders.
   ============================================================ */

/* Visually-disabled control (e.g. the Enterprise-tier radio when the
   provisioner isn't wired): dimmed and not-allowed cursor. */
.et-disabled-control { opacity: 0.55; cursor: not-allowed; }

/* Scrollable preformatted block (MDM bundle preview). */
.et-pre-scroll { max-height: 320px; overflow: auto; }

/* ============================================================
   Accessibility utilities.
   ============================================================ */

/* Visually hidden but exposed to assistive tech (labels, live-region
   captions, off-screen status text). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link: the first focusable element on the page. Hidden
   off-screen until it receives keyboard focus, then slides into view at
   the top-left so keyboard/screen-reader users can jump past the nav. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }

/* ============================================================
   Respect the user's reduced-motion preference. Neutralizes the
   et-status-dot pulse, htmx indicators, and any transitions across
   every surface that loads this stylesheet.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}