/* tool-skin.css — "Cutting Room" skin for tool pages (production).
   Loaded on every tool page AFTER its own CSS. It AUGMENTS the existing shared
   chrome rather than replacing it, so search (⌘K), share, consent, theme and
   EN/ES keep working untouched:
     1) tighten the dark palette to the exact Cutting Room tokens,
     2) restyle the .topbar into a wordmark header (mark + "Editools.app"),
     3) add a running 29.97 DF hero timecode above the tool's H1,
     4) give the body CR flavor (mono-red kickers).
   Additive and reversible — each tool's working layout is untouched. Paired
   with assets/tool-skin.js (injects the wordmark, back link and TC strip). */

/* 1 — exact CR palette on the dark theme (later cascade wins over tokens.css) */
:root[data-theme="dark"] {
  --paper: #14171C; --surface: #1B1F26; --surface-2: #20252d;
  --ink: #E9EBEF; --muted: #8B95A3; --g-1: #a7adb4; --g-2: #8B95A3; --g-3: #79828c;
  --line: rgba(233, 235, 239, 0.12); --line-2: rgba(233, 235, 239, 0.18);
  --accent: #FF4A3F; --red: #FF4A3F;
}
body.cr-skin { background: var(--paper); }

/* Safety net: a field that never got an authored background falls back to the
   UA's white — invisible with light ink in dark mode (bit us on temp-vo's
   textarea). :where() keeps specificity at ZERO, so this only beats the UA
   default; any tool's own field styling still wins. Vars flip with the theme. */
:where(body.cr-skin) :where(textarea, select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"])) {
  background-color: var(--surface);
  color: var(--ink);
}
:where(body.cr-skin) :where(textarea, input)::placeholder { color: var(--g-3); }

/* 2 — header: wordmark + slim CR chrome. .topbar keeps its shared behavior. */
body.cr-skin .topbar { border-bottom: 1px solid var(--line); align-items: center; }
body.cr-skin .brand,
body.cr-skin .brand:hover,
body.cr-skin .brand:visited { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
body.cr-skin .brand img.cr-brand-ico { width: 32px !important; height: 32px; }
body.cr-skin .cr-brand-name { font: 800 21px "Manrope", sans-serif; letter-spacing: -0.5px; color: var(--ink); white-space: nowrap; }
body.cr-skin .cr-brand-name i { font-style: normal; color: var(--accent); }
body.cr-skin .cr-back { font: 600 13px "Manrope", sans-serif; color: var(--muted); text-decoration: none; white-space: nowrap; }
body.cr-skin .cr-back:hover { color: var(--ink); }
/* the sitewide "blue-light" warm control is dropped in the CR look */
body.cr-skin .warm-toggle { display: none !important; }
/* the legacy tool sub-bar is folded into the header's ← link */
body.cr-skin .tool-subheader { display: none !important; }

/* 3 — hero timecode strip above the tool's H1 */
body.cr-skin .cr-tc-strip { display: flex; gap: 16px; align-items: baseline; margin: 0 0 6px; }
body.cr-skin .cr-tc-strip #crTc { font: 500 19px "DM Mono", monospace; color: var(--accent); letter-spacing: 1.5px; }
body.cr-skin .cr-tc-fps { font: 400 12px "DM Mono", monospace; color: var(--muted); letter-spacing: 1px; }

/* 4 — CR flavor: mono-red kickers (safe, generic — only where .kicker exists) */
body.cr-skin .kicker { font-family: "DM Mono", monospace !important; color: var(--accent) !important; font-weight: 500 !important; letter-spacing: 1.2px; }