/* ==========================================================================
   The Lemurian Time Engine — instrument styles
   ==========================================================================
   Namespaced beneath .archive-instrument--time-engine. Consumes only the
   shared foundation tokens (--instrument-*, including the machine-ink trio
   --instrument-machine-ink / -bright / -rule). Block-local tuning custom
   properties are defined as --time-engine-* on the root block; the
   gate-required .lte-reg-* / .lte-rel-* identity classes each set only
   --lte-accent. No resets, no body/html/bare-element rules outside the
   namespace, no imports, no external assets, no fonts.

   Visual language: technical occult instrument — a black-glass dial plate.
   Fine graphite rules carry structure; amber is documentary emphasis; green
   appears ONLY as the active-signal focus outline on the Engine's own
   controls (the contract fixes .lte-btn:focus-visible to
   --instrument-signal; it is applied uniformly to the lte controls so
   keyboard focus reads as one system); machine speech is cold phosphor via
   the foundation .ai-machine register, which this file frames with spacing
   but never redefines.

   THE DIAL IS PAINTED INLINE. time-engine.js sets fill, stroke,
   stroke-width, stroke-dasharray, opacity, and transform inline on every
   ring, wedge, glyph, chord, and the selection ring — inline is
   authoritative (theming-by-token via getComputedStyle, and exported plates
   stay self-contained). No rule below declares fill / stroke /
   stroke-dasharray / opacity / transform / display for SVG content. CSS
   touches the SVG only where the contract allows: type on the three
   .lte-svg-*label classes (sizes are SVG user units in the 1200-unit
   viewBox), cursor on .lte-dial / .lte-svg-glyph, and the focus-visible
   outline on .lte-svg-glyph (JS never sets outline inline).

   Motion: nothing is declared on SVG selectors (JS owns dial motion, gated
   on prefers-reduced-motion). The only transitions in this file are small
   hover/focus fades on buttons, list items, and inputs, and every one sits
   inside @media (prefers-reduced-motion: no-preference). No @keyframes.
   No !important. No z-index. No position: fixed.

   Register / relationship accents: colour is never the sole carrier of
   meaning — registers keep their line-style + glyph shape, relationship
   types their line-style + arrowhead, and every state is also text (labels,
   chips, aria-pressed, aria-current). The .lte-reg-* / .lte-rel-* identity
   classes carry a colour ACCENT only, never geometry.
   ========================================================================== */

.archive-instrument--time-engine {
  --time-engine-amber-wash: rgba(197, 138, 42, 0.07);  /* selected / featured tint */
  --time-engine-ink-edge: rgba(232, 227, 216, 0.45);   /* hover edge, sibling-standard */
  --time-engine-fictional-grey: #9aa0a6;               /* fictional-internal-date register grey */
  position: relative;
}

/* --- Header (server-rendered) -------------------------------------------- */

.archive-instrument--time-engine .lte-header {
  margin: 0 0 4px;
}

.archive-instrument--time-engine .lte-header > h1 {
  font-family: var(--instrument-font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.5cqw, 52px);
  line-height: 1.06;
  margin: 0 0 14px;
  color: var(--instrument-ink);
}

.archive-instrument--time-engine .lte-lede {
  font-family: var(--instrument-font-serif);
  font-size: clamp(16px, 1.6cqw, 19px);
  max-width: 62ch;
  color: var(--instrument-muted);
  margin: 0 0 12px;
}

/* Standfirst blockquote: thin amber left rule, serif, no quote marks. */
.archive-instrument--time-engine .lte-standfirst {
  font-family: var(--instrument-font-serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--instrument-ink);
  border-left: 2px solid var(--instrument-amber);
  padding: 2px 0 2px 14px;
  margin: 0 0 16px;
  max-width: 62ch;
  quotes: none;
}

/* Corpus status line ("Corpus data 2026-07-11 · 56 events …"). */
.archive-instrument--time-engine .lte-corner {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--instrument-muted);
  margin: 0 0 18px;
}

/* --- Layout ---------------------------------------------------------------
   Mobile-first single column; two columns from 1024px. Always minmax(0, …)
   — a bare fr track let the Cabinet's plate overflow the page once. */

.archive-instrument--time-engine .lte-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.archive-instrument--time-engine .lte-layout > * {
  min-width: 0; /* horizontal-scroll guard on every grid child */
}

.archive-instrument--time-engine .lte-dial-column {
  min-width: 0;
}

/* Square plate reserved before data arrives: CLS ≈ 0. */
.archive-instrument--time-engine .lte-dial-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--instrument-glass);
  border: 1px solid var(--instrument-rule);
}

/* The dial SVG root. Block + fluid width; the 1:1 viewBox keeps it square. */
.archive-instrument--time-engine .lte-dial {
  display: block;
  width: 100%;
  height: auto;
  cursor: default; /* no text cursor over plate labels */
}

/* Fold caption: reserved height so caption swaps add no layout shift. */
.archive-instrument--time-engine .lte-fold-caption {
  font-family: var(--instrument-font-serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--instrument-muted);
  min-height: 2.6em;
  max-width: 62ch;
  margin: 8px 0 0;
}

.archive-instrument--time-engine .lte-fold-caption[hidden] {
  display: none;
}

.archive-instrument--time-engine .lte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

/* --- Dial SVG: the only rules the contract allows -------------------------
   Type on the three label classes (SVG user units), cursor, and the glyph
   focus outline. Nothing here paints, hides, or moves dial geometry. */

.archive-instrument--time-engine .lte-svg-ringlabel {
  font-family: var(--instrument-font-mono);
  font-size: 19px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.archive-instrument--time-engine .lte-svg-spokelabel {
  font-family: var(--instrument-font-mono);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.archive-instrument--time-engine .lte-svg-glyphlabel {
  font-family: var(--instrument-font-mono);
  font-size: 21px;
  letter-spacing: 0.02em;
}

.archive-instrument--time-engine .lte-svg-glyph {
  cursor: pointer;
}

/* Outline only — JS never sets outline inline, so this cannot collide. */
.archive-instrument--time-engine .lte-svg-glyph:focus-visible {
  outline: 2px solid var(--instrument-signal);
}

/* --- Buttons --------------------------------------------------------------- */

.archive-instrument--time-engine .lte-btn {
  appearance: none;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--instrument-ink);
  background: transparent;
  border: 1px solid var(--instrument-rule);
  padding: 9px 14px;
  min-height: 36px;
  cursor: pointer;
}

.archive-instrument--time-engine .lte-btn:hover {
  border-color: var(--instrument-amber);
  color: var(--instrument-amber-bright);
}

.archive-instrument--time-engine .lte-btn:disabled,
.archive-instrument--time-engine .lte-filter:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.archive-instrument--time-engine .lte-btn--small {
  padding: 5px 9px;
  min-height: 28px;
  font-size: 11px;
}

/* Active-signal focus, applied to the Engine's own controls as one system. */
.archive-instrument--time-engine .lte-btn:focus-visible,
.archive-instrument--time-engine .lte-filter:focus-visible,
.archive-instrument--time-engine .lte-shelf-item:focus-visible,
.archive-instrument--time-engine .lte-member-btn:focus-visible,
.archive-instrument--time-engine .lte-index > summary:focus-visible {
  outline: 2px solid var(--instrument-signal);
  outline-offset: 2px;
}

/* --- Register / relationship filters --------------------------------------- */

.archive-instrument--time-engine .lte-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.archive-instrument--time-engine .lte-filter {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--instrument-ink);
  background: transparent;
  border: 1px solid var(--instrument-rule);
  padding: 7px 10px;
  min-height: 32px;
  cursor: pointer;
  text-align: left;
}

/* State dot: border/background only, empty content, redundant with
   aria-pressed + the amber border/text — never the sole carrier. */
.archive-instrument--time-engine .lte-filter::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  background: transparent;
}

.archive-instrument--time-engine .lte-filter:hover {
  border-color: var(--time-engine-ink-edge);
}

.archive-instrument--time-engine .lte-filter[aria-pressed="true"] {
  color: var(--instrument-amber-bright);
  border-color: var(--instrument-amber);
}

.archive-instrument--time-engine .lte-filter[aria-pressed="true"]::before {
  background: var(--instrument-amber);
  border-color: var(--instrument-amber-bright);
}

/* Tiny inline SVG sample injected by JS; this file only sizes the slot. */
.archive-instrument--time-engine .lte-filter-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 26px;
  height: 12px;
  vertical-align: middle;
}

/* --- Legends ---------------------------------------------------------------
   sample | label / description. The sample is a JS-injected inline SVG
   (paint inline, as on the dial); CSS reserves its 48×16 slot only. */

.archive-instrument--time-engine .lte-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.archive-instrument--time-engine .lte-legend-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 1px;
}

.archive-instrument--time-engine .lte-legend-sample {
  grid-row: span 2;
  align-self: center;
  width: 48px;
  height: 16px;
}

.archive-instrument--time-engine .lte-legend-label {
  grid-column: 2;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--instrument-ink);
}

.archive-instrument--time-engine .lte-legend-desc {
  grid-column: 2;
  font-family: var(--instrument-font-serif);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--instrument-muted);
}

/* --- Register / relationship identity classes (QA-gated) -------------------
   Exactly these 17 names. Each sets only the --lte-accent colour; the
   accent is consumed below as a border tint on legend rows, dossier
   kickers, relationship items, and segments. Never geometry, never the
   sole carrier of meaning (line-style / glyph / arrowhead / text carry it). */

.archive-instrument--time-engine .lte-reg-fictional-internal-date { --lte-accent: #9aa0a6; }
.archive-instrument--time-engine .lte-reg-documentary-event { --lte-accent: #e8e3d8; }
.archive-instrument--time-engine .lte-reg-documentary-publication { --lte-accent: #c58a2a; }
.archive-instrument--time-engine .lte-reg-retrospective-recollection { --lte-accent: #b3a68f; }
.archive-instrument--time-engine .lte-reg-later-canonization { --lte-accent: #d6c06a; }
.archive-instrument--time-engine .lte-reg-interpretive-anticipation { --lte-accent: #7fa08c; }
.archive-instrument--time-engine .lte-reg-machine-recirculation { --lte-accent: #8FB4BA; }
.archive-instrument--time-engine .lte-reg-future-address { --lte-accent: #a9c0d6; }

.archive-instrument--time-engine .lte-rel-precedes { --lte-accent: #9aa5ad; }
.archive-instrument--time-engine .lte-rel-anticipates { --lte-accent: #8a9bb4; }
.archive-instrument--time-engine .lte-rel-retroactively-names { --lte-accent: #c58a2a; }
.archive-instrument--time-engine .lte-rel-reframes { --lte-accent: #b3a68f; }
.archive-instrument--time-engine .lte-rel-reprints { --lte-accent: #b8b8b8; }
.archive-instrument--time-engine .lte-rel-misattributes { --lte-accent: #c96a4e; }
.archive-instrument--time-engine .lte-rel-corrects { --lte-accent: #9aac42; }
.archive-instrument--time-engine .lte-rel-predicts { --lte-accent: #7fa08c; }
.archive-instrument--time-engine .lte-rel-replies-to { --lte-accent: #a9c0d6; }

/* Accent application: a 3px edge tint wherever an identity class lands. */
.archive-instrument--time-engine .lte-legend-row[class*="lte-reg-"],
.archive-instrument--time-engine .lte-legend-row[class*="lte-rel-"],
.archive-instrument--time-engine .lte-dossier-kicker[class*="lte-reg-"],
.archive-instrument--time-engine .lte-rellist-item[class*="lte-rel-"] {
  border-left: 3px solid var(--lte-accent, var(--instrument-rule));
  padding-left: 8px;
}

.archive-instrument--time-engine .lte-segment[class*="lte-rel-"] {
  border-left-color: var(--lte-accent, var(--instrument-rule));
}

/* --- Panel (right column) --------------------------------------------------
   An open bench, not a card: sections separated by fine graphite rules. */

.archive-instrument--time-engine .lte-panel {
  min-width: 0;
}

.archive-instrument--time-engine .lte-panel-section {
  border-top: 1px solid var(--instrument-rule);
  padding: 16px 0;
}

.archive-instrument--time-engine .lte-panel-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.archive-instrument--time-engine .lte-panel-title {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  margin: 0 0 10px;
}

/* --- Circuit shelf ---------------------------------------------------------- */

.archive-instrument--time-engine .lte-shelf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.archive-instrument--time-engine .lte-shelf-item {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--instrument-font-serif);
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--instrument-ink);
  background: transparent;
  border: 1px solid var(--instrument-rule);
  border-left-width: 2px;
  padding: 9px 11px;
  cursor: pointer;
}

.archive-instrument--time-engine .lte-shelf-item:hover {
  border-color: var(--time-engine-ink-edge);
}

/* Circuit of the Week: amber left rule + slight panel lift. */
.archive-instrument--time-engine .lte-shelf-item--featured {
  border-left-color: var(--instrument-amber);
  background: var(--instrument-panel);
}

/* Active circuit: amber enclosure + wash; aria-current carries the state. */
.archive-instrument--time-engine .lte-shelf-item[aria-current="true"] {
  border-color: var(--instrument-amber);
  background: var(--time-engine-amber-wash);
}

.archive-instrument--time-engine .lte-shelf-meta {
  display: block;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--instrument-muted);
  margin-top: 3px;
}

/* Editorial note under the featured circuit. */
.archive-instrument--time-engine .lte-shelf-note {
  font-family: var(--instrument-font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--instrument-muted);
  border-left: 2px solid var(--instrument-amber);
  padding-left: 10px;
  margin: 6px 0 0;
}

/* --- Dossier -----------------------------------------------------------------
   The one card-like surface: an opened record on the bench. */

.archive-instrument--time-engine .lte-dossier {
  min-width: 0;
  background: var(--instrument-panel);
  border: 1px solid var(--instrument-rule);
  padding: 14px 16px;
}

.archive-instrument--time-engine .lte-dossier-kicker {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--instrument-muted);
  overflow-wrap: anywhere;
  margin: 0 0 6px;
}

.archive-instrument--time-engine .lte-dossier-title {
  font-family: var(--instrument-font-serif);
  font-weight: 400;
  font-size: clamp(19px, 1.9cqw, 24px);
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--instrument-ink);
}

/* Foundation .ai-chip rows: spacing only, chips stay foundation-owned. */
.archive-instrument--time-engine .lte-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.archive-instrument--time-engine .lte-dossier-body {
  font-family: var(--instrument-font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--instrument-ink);
}

.archive-instrument--time-engine .lte-dossier-body p {
  margin: 0 0 8px;
}

/* Dates: real and fictional on visibly different footings. */
.archive-instrument--time-engine .lte-dates {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 10px 0;
  font-size: 13.5px;
}

.archive-instrument--time-engine .lte-dates dt {
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  align-self: baseline;
}

.archive-instrument--time-engine .lte-dates dd {
  margin: 0;
  color: var(--instrument-ink);
  overflow-wrap: anywhere;
}

/* The verbatim fictional date: register-grey, dashed underline — never the
   amber documentary treatment. Off the clock, and it looks off the clock. */
.archive-instrument--time-engine .lte-dates-fictional {
  color: var(--time-engine-fictional-grey);
  border-bottom: 1px dashed rgba(154, 160, 166, 0.55);
  padding-bottom: 1px;
}

/* Relationships touching the event (mono, arrow lines). */
.archive-instrument--time-engine .lte-rellist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.archive-instrument--time-engine .lte-rellist-item {
  font-family: var(--instrument-font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--instrument-ink);
  border-top: 1px solid var(--instrument-rule);
  padding-top: 6px;
  overflow-wrap: anywhere;
}

.archive-instrument--time-engine .lte-rellist-item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Ordered circuit members; markers inherit the mono muted index style. */
.archive-instrument--time-engine .lte-members {
  margin: 8px 0 0;
  padding: 0 0 0 24px;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  color: var(--instrument-muted);
}

.archive-instrument--time-engine .lte-members li {
  margin: 0 0 6px;
}

.archive-instrument--time-engine .lte-member-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--instrument-font-serif);
  font-size: 14px;
  line-height: 1.4;
  color: var(--instrument-ink);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(232, 227, 216, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

.archive-instrument--time-engine .lte-member-btn:hover {
  color: var(--instrument-amber-bright);
}

/* Circuit segments: each annotated chord, ruled on the left. */
.archive-instrument--time-engine .lte-seglist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.archive-instrument--time-engine .lte-segment {
  border-left: 2px solid var(--instrument-rule);
  padding-left: 10px;
}

.archive-instrument--time-engine .lte-segment-annotation {
  font-family: var(--instrument-font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--instrument-ink);
  margin: 4px 0 0;
}

/* Stated omissions: documentary silence keeps a dashed, muted edge. */
.archive-instrument--time-engine .lte-omissions {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 10px;
  border-left: 2px dashed var(--instrument-rule);
  font-size: 13px;
  line-height: 1.5;
  color: var(--instrument-muted);
}

.archive-instrument--time-engine .lte-omissions li {
  margin: 0 0 6px;
}

/* Hypothesis block (amber top rule) with its criteria lists. */
.archive-instrument--time-engine .lte-hypothesis {
  border-top: 2px solid var(--instrument-amber);
  margin: 14px 0 0;
  padding: 10px 0 0;
}

.archive-instrument--time-engine .lte-criteria {
  margin: 6px 0 0;
  padding: 0 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--instrument-muted);
}

.archive-instrument--time-engine .lte-criteria li {
  margin: 0 0 4px;
}

/* Claims (AAP records). */
.archive-instrument--time-engine .lte-claims {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.archive-instrument--time-engine .lte-claim {
  border-top: 1px solid var(--instrument-rule);
  padding: 8px 0;
}

.archive-instrument--time-engine .lte-claim:first-child {
  border-top: 0;
  padding-top: 0;
}

.archive-instrument--time-engine .lte-claim-statement {
  font-family: var(--instrument-font-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--instrument-ink);
  margin: 0 0 4px;
}

.archive-instrument--time-engine .lte-claim-meta {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--instrument-muted);
  overflow-wrap: anywhere;
}

/* Explicit empty state — never a blank panel, never a fabricated record. */
.archive-instrument--time-engine .lte-empty {
  font-family: var(--instrument-font-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--instrument-muted);
  border: 1px dashed var(--instrument-rule);
  padding: 10px 12px;
  margin: 8px 0 0;
}

.archive-instrument--time-engine .lte-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.archive-instrument--time-engine .lte-note {
  font-family: var(--instrument-font-serif);
  font-size: 12.5px;
  color: var(--instrument-muted);
  margin: 8px 0 0;
}

/* --- Machine ink -------------------------------------------------------------
   Passages arrive wrapped in the foundation .ai-machine register (cold
   phosphor, hair rule, ⟡ marker — owned there). This file adds spacing
   composition and the two Engine-local inner blocks only. */

.archive-instrument--time-engine .lte-dossier .ai-machine {
  margin: 12px 0;
}

/* Quoted emission blockquote inside .ai-machine: margins/padding only. */
.archive-instrument--time-engine .lte-machine-quote {
  margin: 8px 0 6px;
  padding: 0;
}

/* model / session / hash / conditions rows; dd inherits the phosphor. */
.archive-instrument--time-engine .lte-machine-fields {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  margin: 8px 0 0;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
}

.archive-instrument--time-engine .lte-machine-fields dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  align-self: baseline;
}

.archive-instrument--time-engine .lte-machine-fields dd {
  margin: 0;
  color: inherit;
  word-break: break-all;
}

/* --- Compose -------------------------------------------------------------- */

.archive-instrument--time-engine .lte-compose {
  margin-top: 4px;
}

.archive-instrument--time-engine .lte-compose-list {
  margin: 8px 0 12px;
  padding: 0 0 0 24px;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  color: var(--instrument-muted);
}

.archive-instrument--time-engine .lte-compose-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  border-top: 1px solid var(--instrument-rule);
  padding: 5px 0;
}

.archive-instrument--time-engine .lte-compose-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.archive-instrument--time-engine .lte-field {
  display: block;
  margin: 0 0 10px;
}

.archive-instrument--time-engine .lte-field-label {
  display: block;
  font-family: var(--instrument-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  margin: 0 0 4px;
}

.archive-instrument--time-engine .lte-input,
.archive-instrument--time-engine .lte-textarea,
.archive-instrument--time-engine .lte-select {
  width: 100%;
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  color: var(--instrument-ink);
  background: var(--instrument-panel);
  border: 1px solid var(--instrument-rule);
  padding: 8px 10px;
  min-height: 36px;
}

.archive-instrument--time-engine .lte-input:focus,
.archive-instrument--time-engine .lte-textarea:focus,
.archive-instrument--time-engine .lte-select:focus {
  border-color: var(--instrument-amber);
}

.archive-instrument--time-engine .lte-textarea {
  min-height: 5.5em;
  resize: vertical;
  font-family: var(--instrument-font-serif);
  font-size: 14px;
}

/* Functional select chevron (sibling .cc-select idiom), not decoration. */
.archive-instrument--time-engine .lte-select {
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 49%, var(--instrument-muted) 50%),
                    linear-gradient(-45deg, transparent 49%, var(--instrument-muted) 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.archive-instrument--time-engine .lte-compose-error {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  color: var(--instrument-danger);
  border: 1px solid var(--instrument-danger);
  padding: 8px 10px;
  margin: 0 0 10px;
}

.archive-instrument--time-engine .lte-compose-error[hidden] {
  display: none;
}

.archive-instrument--time-engine .lte-compose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* --- No-JS text index (server-rendered, always complete) ------------------- */

.archive-instrument--time-engine .lte-index {
  margin-top: 24px;
  border: 1px solid var(--instrument-rule);
}

.archive-instrument--time-engine .lte-index > summary {
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--instrument-muted);
  padding: 12px 16px;
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.archive-instrument--time-engine .lte-index > summary:hover {
  color: var(--instrument-amber-bright);
}

.archive-instrument--time-engine .lte-index[open] > summary {
  border-bottom: 1px solid var(--instrument-rule);
}

.archive-instrument--time-engine .lte-index-group {
  padding: 14px 16px;
  border-bottom: 1px solid var(--instrument-rule);
}

.archive-instrument--time-engine .lte-index-group:last-child {
  border-bottom: 0;
}

.archive-instrument--time-engine .lte-index-group > h2 {
  font-family: var(--instrument-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--instrument-amber);
  margin: 0 0 8px;
}

.archive-instrument--time-engine .lte-index-group ol,
.archive-instrument--time-engine .lte-index-group ul {
  margin: 0 0 10px;
  padding-left: 22px;
}

.archive-instrument--time-engine .lte-index-item {
  border: 1px solid var(--instrument-rule);
  padding: 8px 12px;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
}

.archive-instrument--time-engine .lte-index-kicker {
  display: block;
  font-family: var(--instrument-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--instrument-muted);
  overflow-wrap: anywhere;
}

.archive-instrument--time-engine .lte-index a {
  color: var(--instrument-ink);
  text-decoration: underline;
  text-decoration-color: rgba(197, 138, 42, 0.5);
  text-underline-offset: 3px;
}

.archive-instrument--time-engine .lte-index a:hover {
  color: var(--instrument-amber-bright);
}

/* Dark spans: silence stays dashed and dim, in the index and the dossier. */
.archive-instrument--time-engine .lte-darkspans {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.archive-instrument--time-engine .lte-darkspan {
  border-left: 2px dashed var(--instrument-rule);
  padding-left: 10px;
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--instrument-muted);
}

/* --- Responsive ------------------------------------------------------------ */

@media (min-width: 1024px) {
  .archive-instrument--time-engine .lte-layout {
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  }
  .archive-instrument--time-engine .lte-panel {
    border-left: 1px solid var(--instrument-rule);
    padding-left: 18px;
  }
}

@media (max-width: 768px) {
  /* 44px touch targets for every essential control; text floors at 12px. */
  .archive-instrument--time-engine .lte-btn,
  .archive-instrument--time-engine .lte-btn--small,
  .archive-instrument--time-engine .lte-filter {
    min-height: 44px;
    min-width: 44px;
  }
  .archive-instrument--time-engine .lte-member-btn,
  .archive-instrument--time-engine .lte-shelf-item,
  .archive-instrument--time-engine .lte-select,
  .archive-instrument--time-engine .lte-index > summary {
    min-height: 44px;
  }
  .archive-instrument--time-engine .lte-btn--small {
    font-size: 12px;
  }
  .archive-instrument--time-engine .lte-field-label,
  .archive-instrument--time-engine .lte-dates dt,
  .archive-instrument--time-engine .lte-machine-fields dt {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .archive-instrument--time-engine .lte-layout {
    gap: 14px;
  }
  .archive-instrument--time-engine .lte-toolbar,
  .archive-instrument--time-engine .lte-actions {
    gap: 6px;
  }
  .archive-instrument--time-engine .lte-dossier {
    padding: 12px;
  }
  .archive-instrument--time-engine .lte-index-group,
  .archive-instrument--time-engine .lte-index > summary {
    padding: 12px;
  }
  .archive-instrument--time-engine .lte-dates,
  .archive-instrument--time-engine .lte-machine-fields {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .archive-instrument--time-engine .lte-legend-row {
    column-gap: 10px;
  }
}

/* --- Motion ------------------------------------------------------------------
   Chrome-only fades, opt-in. Dial motion is inline and JS-gated; nothing
   here transitions an SVG selector. */

@media (prefers-reduced-motion: no-preference) {
  .archive-instrument--time-engine .lte-btn,
  .archive-instrument--time-engine .lte-filter,
  .archive-instrument--time-engine .lte-shelf-item,
  .archive-instrument--time-engine .lte-member-btn,
  .archive-instrument--time-engine .lte-index > summary {
    transition: color 120ms linear, border-color 120ms linear, background-color 120ms linear;
  }
  .archive-instrument--time-engine .lte-input,
  .archive-instrument--time-engine .lte-textarea,
  .archive-instrument--time-engine .lte-select {
    transition: border-color 120ms linear;
  }
}