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

   This site uses the instrument-datasheet language (css/datasheet.css, the
   same family as Conjoyn/DiskVerdict). PER-SITE COLOR LIVES HERE — the whole
   page re-tints by remapping the accent tokens below; everything else inherits
   from site.css (chrome) + datasheet.css (the printed sheet). */

/* ── Accent: Magpie teal (Theme.accent = #1F9BA6) ───────────────
   The app's UI accent — the iridescent magpie-tail teal. The icon keeps its
   orange beak as a spark, but the site leads with the teal. */
:root {
  color-scheme: light;             /* the datasheet is a light "printed" sheet — no OS dark remap */
  --accent:      #1F9BA6;          /* the app's brand teal (Theme.accent) */
  --accent-soft: rgba(31, 155, 166, 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 Magpie's teal. Re-assert on .sheet: custom props
   inherit from the nearest ancestor, so the sheet + every accent element inside
   it pick up #1F9BA6, while datasheet.css's :root value AND the link order (which
   keeps the sheet light) stay untouched. The sheet is always light, so the light
   brand hue is correct in every OS appearance. (Mirrors diskverdict.css.) */
.sheet { --accent: #1F9BA6; }

/* ── 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 "M" glyph keeps its own
   font-family (set in site.css), so the logo square is untouched. */
.brand,
.nav a {
  font-family: var(--mono);
}

/* ── Inline code / flag 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), 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. Force it to match its <span> spec-chip siblings — same font, size,
   colour, baseline. Higher specificity (.rule .download-stats) wins regardless
   of stylesheet order. (Mirrors diskverdict.css.) */
.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 */
}

/* ── Screenshot frames: real captures are FLOATING WINDOWS ───────────
   Magpie's app shots are windows WITH a baked drop-shadow on a transparent
   margin (⌘⇧4 window grabs), not solid rectangles. datasheet.css frames its
   screenshots in an instrument panel (plate derived from --card/--line + ink border + object-fit:
   cover), which would crop these windows and box the baked shadow twice. Strip
   that framing inside the sheet so each window floats on the cream sheet — the
   dark window on the light page (matches Conjoyn/DiskVerdict, and today's
   "window floats on the light page" decision). Higher specificity (.sheet ...)
   beats datasheet.css's 2-class selectors. */
.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 draws a 1px line that cuts the transparent margin */
  height: auto;                   /* the width/height HTML attrs otherwise pin height → landscape shot squished portrait */
  object-fit: contain;
}

/* ── 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 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 (the bug fixed across the family 2026-07-10). Removed so the
   chrome matches the portal, which never had a dark block. Do NOT re-add one.
   (The app screenshots are dark windows floating on the light sheet by design —
   that's the app shown in its own mode, not page chrome.) */

/* ── Utility pages (support / imprint / privacy) — 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
   Magpie's FLAGSHIP paper. Scoped to `body.util` so the app pages keep 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); }