/* TimeCodeEditor — overrides on top of site.css + datasheet.css
   Only what differs from the shared Luces Umbrarum design system.

   PER-SITE COLOR LIVES HERE. The whole page re-tints by remapping the
   accent below; everything else inherits. The datasheet paper stock
   (--paper/--card/--line/--ink/--muted) is NOT set here: this site is
   the FLAGSHIP variant, and canonical datasheet.css already carries the
   FLAGSHIP pale blue on :root (STYLE-BIBLE §3). A variant only overrides
   paper when it is NOT flagship (see the portal's subpage.css sage). */

/* ── Accent: TimeCodeEditor gold (Theme.acc1 = #FFB23E) ──────────
   The app's "highlight" accent. Chosen over the app's acc2 orange
   #F0622A on purpose — that hue is Conjoyn's, and the two sites would
   read as twins. Gold is distinct and still from the app's own palette.
   Gold is LIGHT, which drives the ink choice on every accent-filled
   surface below (see .rule .dl). */
:root {
  color-scheme: light;             /* light-only site — see the note at the foot */
  --accent:      #FFB23E;          /* the app's brand gold (Theme.acc1) */
  --accent-soft: rgba(255, 178, 62, 0.20);
}

/* Datasheet accent = brand, not the shared terracotta.
   datasheet.css sets :root{--accent:#D9846A} and is linked AFTER this file, so
   by source order its :root wins over the :root above — the sheet would show the
   generic terracotta instead of TimeCodeEditor's gold. Re-assert on .sheet:
   custom props inherit from the nearest ancestor, so the sheet + every accent
   element inside it pick up #FFB23E, while datasheet.css's :root value AND the
   link order (which keeps the sheet light) stay untouched. */
.sheet { --accent: #FFB23E; }

/* ── Nav typography: join the datasheet's monospace instrument face ──
   site.css leaves the shared nav/brand in --font-body (Inter) while the
   datasheet content is all --mono (JetBrains Mono) — that seam reads as
   "different fonts on top". Pull the wordmark + nav links into --mono so
   the whole page is one instrument. The .brand-mark "T" glyph keeps its
   own font-family (set in site.css), so the logo square is untouched. */
.brand,
.nav a {
  font-family: var(--mono);
}

/* ── Rule-strip DOWNLOAD button: dark ink, not white ─────────────────
   datasheet.css hardcodes `.rule .dl { color:#fff }`, which is correct on
   every other site's accent (Conjoyn #F0622A, DiskVerdict #E68033, Magpie
   #1F9BA6 — all mid-dark). TimeCodeEditor's gold is far lighter: white on
   #FFB23E measures 1.80:1, well under the 4.5:1 floor, so the label washes
   out. Dark ink on the same gold measures 9.10:1.

   This mirrors the call already made for this site's nav CTA (see the old
   .nav-cta / CLAUDE.md note: "gold is too light for white text") — the nav
   button itself is gone under the datasheet anatomy (STYLE-BIBLE §2.2: the
   rule strip is the sole download path), so the contrast problem moved here
   with it. Overriding .dl in the per-site layer is the same slot the bible
   grants Aloft for its green download button (§2.5) — the brand hue stays
   exactly the app's, only the label ink adapts. */
.sheet .rule .dl {
  color: #241F18;
}

/* ── Inline code / filename chips ─────────────────────────────── */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--ghost);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--ink);
}

/* Keyboard-shortcut chip inside the §02 procedure copy */
.kbd {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 2px;
  white-space: nowrap;
}

/* ── Datasheet rule strip: fold the download-stats chip into the row ──
   `.download-stats` is a shared marketing component (site.css): body font,
   its own size/colour (--ink-soft), and a `margin-top:14px` meant for the
   hero. Dropped into the mono datasheet rule strip it reads as a different
   font on a different baseline (the 7px misalignment fixed portal-side on
   2026-07-14). Force it to match its <span> spec-chip siblings — same font,
   size, colour, and baseline. Higher specificity (.rule .download-stats) so
   it wins regardless of stylesheet order. */
.rule .download-stats {
  margin: 0;
  min-height: 0;
  font: inherit;        /* JetBrains Mono, 12px — matches the sibling chips */
  color: inherit;       /* var(--muted), not the lighter --ink-soft */
}

/* ── No dark theme (deliberate — light-only) ─────────────────────
   This site is the light "printed datasheet" (see datasheet.css): the
   .sheet is always light, so the page stays light in every OS appearance.
   A @media (prefers-color-scheme: dark) block used to remap the shared
   site.css chrome tokens here, but datasheet.css (loaded LAST) pins --ink
   dark globally — so the dark chrome rendered dark-ink-on-dark-surface:
   an invisible wordmark + a sub-AA footer. Removed at the 2026-07-15
   datasheet port, matching the removal DiskVerdict/Conjoyn/Magpie made on
   2026-07-10. Do NOT re-add one — `./check-invariants.sh` enforces this.
   (The screenshot <picture> in index.html still swaps to -dark variants by
   design — the app shown in the viewer's mode, a floating window on the
   light sheet, not page chrome.) */

/* ── Utility pages (support / imprint) — datasheet anatomy on FLAGSHIP paper ──
   The shared datasheet.css carries the anatomy (.sheet/.dochead/.sec/.featgrid/
   .foot); the portal's utility pages get their link + action-arrow styling from
   subpage.css's `body.util` block, which this dedicated site doesn't load. Mirror
   the variant-independent parts here — all token-driven, so they auto-theme to
   TimeCodeEditor's FLAGSHIP paper (accent #FFB23E). Scoped to `body.util` so the
   app page keeps bare links. */
body.util .sheet a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
body.util .sheet a:hover { text-decoration-color: var(--accent); }
body.util .sheet .featgrid p .go {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  font-weight: 600;
}
body.util .sheet .featgrid p .go:hover { text-decoration-color: var(--accent); }

/* ── Screenshot frames: real captures are FLOATING WINDOWS (mirrors magpie.css) ──
   The app shots are ⌘⇧4 window grabs — a baked drop-shadow on a transparent
   margin. datasheet.css's instrument-panel framing would box the shadow and
   cover-crop the window; strip it so each dark window floats on the pale sheet
   (STYLE-BIBLE §2.7). Higher specificity (.sheet …) beats datasheet.css. */
.sheet .fn .shotwrap,
.sheet .fn .shotwrap.shot {
  background: transparent;
  overflow: visible;              /* don't clip the baked window shadow */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.sheet .fn .shotwrap img {
  height: auto;                   /* natural aspect — no cover-crop */
  object-fit: contain;
}
.sheet .shots2 .shot {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 6px 6px 0;
}
.sheet .shots2 .shot img {
  border: 0;                      /* datasheet's 1px line would cut the transparent margin */
  height: auto;                   /* HTML width/height attrs otherwise squish the aspect */
  object-fit: contain;
}