/* ============================================================
   WRITER/PERFORMER — "1C" SKIN
   ============================================================
   A pure override layer. Nothing in writer-performer.html or
   shared.css needs to change. Add TWO lines as the LAST thing
   in <head>, after the tool's own inline <style>:

     <link rel="stylesheet" href="wp-fonts-nitti.css">
     <link rel="stylesheet" href="wp-1c-skin.css">

   Type is Nitti Grotesk (Typekit kit xii1spb), in four roles:
     nitti-grotesk            interface labels, buttons, tabs
     nitti-grotesk-condensed  display — character names, headlines
     nitti-grotesk-light      long-form copy, help text
     nitti-typewriter-normal  the script page and all numeric readouts
   The family caps at 700, so display weight is condensed 700 rather
   than a black — narrower and heavier-looking at poster scale.

   It works because the app is already fully token-driven and
   already zero-radius. Three moves do most of the job:
     1. Retune the tokens (palette + type).
     2. Promote hairlines to 2px ink rules between major zones.
     3. Re-cut four pieces of chrome: header cells, tab strip,
        transport bar, active line.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

html[data-theme="light"], html[data-theme="paper"], :root {
  /* Ground cools off and loses the sepia. Ink goes near-black. */
  --bg:      #f3f2f2;
  --panel:   #f3f2f2;
  --panel-2: #eae9e9;
  --panel-3: #e0dfdf;
  --panel2:  #eae9e9;
  --panel3:  #e0dfdf;
  --ink:     #201e1d;
  --muted:   #7d7979;

  /* Rules are the structure, so they carry real weight. */
  --line: rgba(32, 30, 29, 0.4);

  --accent:      #ec3013;
  --accent-dim:  rgba(236, 48, 19, 0.10);
  --accent-glow: rgba(236, 48, 19, 0.22);
  --accent-ink:  #f3f2f2;
  --amber:       #ec3013;
  --amber-dim:   rgba(236, 48, 19, 0.10);
  --amber-glow:  rgba(236, 48, 19, 0.22);

  --sage:     #605d5d;
  --sage-dim: rgba(96, 93, 93, 0.12);

  /* Interface = Nitti Grotesk. The page = Nitti Typewriter. Never mixed. */
  --font-body:    "nitti-grotesk", system-ui, sans-serif;
  --font-mono:    "nitti-grotesk", system-ui, sans-serif;
  --font-display: "nitti-grotesk-condensed", "nitti-grotesk", sans-serif;
  --font-light:   "nitti-grotesk-light", "nitti-grotesk", sans-serif;
  --script-font:  "nitti-typewriter-normal", "Courier New", monospace;
  --ui-size: 12.5px;
}

html[data-theme="dark"], html[data-theme="noir"] {
  --bg:      #201e1d;
  --panel:   #201e1d;
  --panel-2: #2d2b2b;
  --panel-3: #383535;
  --panel2:  #2d2b2b;
  --panel3:  #383535;
  --ink:     #f3f2f2;
  --muted:   #9b9797;
  --line:    rgba(243, 242, 242, 0.28);
  --accent:      #ec3013;
  --accent-dim:  rgba(236, 48, 19, 0.16);
  --accent-ink:  #f3f2f2;
  --amber:       #ec3013;
  --amber-dim:   rgba(236, 48, 19, 0.16);
}

/* ---------- 2. INTERFACE TYPE ----------
   Every label in the chrome becomes small, heavy, tracked and
   uppercase. This single change is most of what reads as "1c". */

/* Interface labels — the regular cut. */
.section-title, label, .eyebrow,
nav.tabs button, .tab-btn {
  font-family: "nitti-grotesk", system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Display slots — the condensed cut. The wordmark and the transport
   character name are the two biggest after the cast cards, so they must
   NOT be caught by the rule above. */
.disp, header h1, .tool-header h1 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-title { font-size: 10.5px; color: var(--muted); }
.disp { font-size: 10.5px; }
.details-label, label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }

/* Numeric readouts stay typewriter — they belong to the script,
   not to the interface. */
.cue-counter, .status-line, #header-credits,
.ns-text .sub, .cast-card .voice-meta, .help-text {
  font-family: "nitti-typewriter-normal", "Courier New", monospace !important;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- 3. HEADER: DIVIDED CELLS, NOT SPACED ITEMS ----------
   In 1c nothing floats in the bar; each cluster is a walled cell. */

header, .tool-header {
  border-top: none;
  border-bottom: 2px solid var(--ink);
  height: 46px;
  gap: 0;
}
.header-brand {
  border-right: 2px solid var(--ink);
  padding: 0 18px;
}
.header-tab-divider { display: none; }

/* Right cluster: each control is a walled cell, flush to the next.
   Icon buttons become 46px-tall full-height cells divided by hairlines,
   so the right edge reads as structure rather than floating glyphs. */
.header-right {
  border-left: 1px solid var(--line);
  padding: 0;
  gap: 0;
  align-self: stretch;
  align-items: stretch;
}
.header-project {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-right: 1px solid var(--line);
}
.header-project .project-name {
  font-family: "nitti-typewriter-normal", monospace;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.header-project .project-status {
  font-family: "nitti-grotesk", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.header-right .icon-btn,
.header-right button.icon-btn {
  width: 42px;
  height: auto;
  align-self: stretch;
  padding: 0;
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
}
.header-right .icon-btn:last-child { border-right: none; }

/* The download button is wrapped in .download-menu-wrap, so the cell
   rules must apply to the WRAPPER; the button itself goes borderless. */
.header-right .download-menu-wrap {
  display: flex;
  align-self: stretch;
  border-right: 1px solid var(--line);
  position: relative;
}
.header-right .download-menu-wrap > .icon-btn { border-right: none; }
.header-right > *:last-child { border-right: none; }
.header-right .download-menu-wrap .download-menu {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  right: 0;
  left: auto;
}
.header-right .download-menu-wrap .download-menu button {
  border: none;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
  padding: 11px 14px;
}
.header-right .download-menu-wrap .download-menu button:last-child { border-bottom: none; }
.header-right .icon-btn svg { width: 16px; height: 16px; stroke-width: 1.8; }
.header-right .icon-btn:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--line);
}
.header-right .icon-btn:active:not(:disabled) { background: var(--accent); color: #f3f2f2; }
.header-right .icon-btn.active {
  background: var(--accent);
  color: #f3f2f2;
  border-top: none;
}
.header-right .icon-btn:disabled { opacity: 0.3; }
.header-right .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#header-credits {
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line);
}
header h1, .tool-header h1 { font-size: 11px; letter-spacing: 0.1em; }

/* ---------- 4. TAB STRIP: THE ACTIVE TAB IS A SOLID INK BLOCK ---------- */

nav.tabs { border-bottom: none; }
nav.tabs button, .tab-btn {
  border-top: none !important;
  border-right: 1px solid var(--line);
  padding: 0 18px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  align-self: stretch;
}
nav.tabs button:hover:not(.active) {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
nav.tabs button.active, .tab-btn.active {
  background: var(--ink) !important;
  color: var(--bg) !important;
  font-weight: 700;
  border-top-color: transparent !important;
}

/* ---------- 5. BUTTONS: FLUSH LEFT, SQUARE, HEAVY ---------- */

button, .btn {
  font-family: "nitti-grotesk", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-color: var(--line);
  color: var(--ink);
  padding: 0.65rem 0.9rem;
}
button:hover:not(:disabled), .btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-color: var(--ink);
}
button:active:not(:disabled) { background: color-mix(in srgb, var(--ink) 14%, transparent); }
button.primary, .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #f3f2f2;
}
button.primary:hover:not(:disabled) { background: #dd2b0f; opacity: 1; }
button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input, select, textarea { font-family: "nitti-grotesk", system-ui, sans-serif; font-size: 12.5px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* ---------- 6. THE SCRIPT PAGE ----------
   The page itself barely changes — it was already right. The
   current line is the one place red runs as a field. */

.script-page { max-width: 620px; }
.p-line { padding: 4px 12px; }
.p-line.active-line {
  background: var(--accent-dim);
  box-shadow: inset 3px 0 0 var(--accent);
}
.p-line.active-line[data-type="Character"] .p-text { color: var(--accent); }
.p-line[data-type="Scene Heading"] { border-top-width: 2px; }
.p-line[data-type="Scene Heading"] .p-text {
  text-decoration: none;
  letter-spacing: 0.06em;
}

/* ---------- 7. SIDE PANELS: WALLED, LABELLED, RULED ---------- */

.script-area { border-right: 1px solid var(--line); }
.search-panel, .cast-drawer { background: var(--panel-2); }
.cast-drawer { border-left: 2px solid var(--ink); }
.drawer-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.section-title { border-bottom-width: 1px; }

/* ---------- 8. TRANSPORT: A SOLID INK FIELD ----------
   The one piece of chrome that inverts. Squares, not circles. */

.perf-top.perf-bottom {
  background: var(--ink);
  border-top: 2px solid var(--ink);
  padding: 14px 20px;
}
.perf-bottom .ns-text .disp {
  color: var(--bg);
  font-family: var(--font-display) !important;
  font-size: 17px;
  letter-spacing: 0.04em;
}
.perf-bottom .ns-text .sub  { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.perf-bottom .ns-photo {
  border-radius: 0;
  width: 44px; height: 44px;
  border: none;
  background: var(--accent);
  color: #f3f2f2;
}
.perf-bottom .ns-photo svg { color: #f3f2f2; }
.perf-bottom .ns-photo.speaking { border: none; outline: 2px solid var(--bg); outline-offset: -2px; }
.perf-bottom .transport button {
  border-radius: 0;
  width: 36px; height: 36px;
  border-color: color-mix(in srgb, var(--bg) 35%, transparent);
  color: var(--bg);
}
.perf-bottom .transport button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg) 15%, transparent);
  border-color: var(--bg);
}
.perf-bottom .transport button.play-btn {
  width: 46px; height: 46px;
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
}
.perf-bottom .transport button.play-btn:hover:not(:disabled) { background: #fff; }
.perf-bottom .cue-counter { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.perf-bottom .perf-actions button {
  color: var(--bg);
  border-color: color-mix(in srgb, var(--bg) 35%, transparent);
}
.perf-bottom .perf-actions button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--bg) 15%, transparent);
  border-color: var(--bg);
}
.status-line {
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  font-size: 11px;
  padding: 5px 20px;
}

/* ---------- 9. CAST CARDS: THE NAME IS THE GRAPHIC ---------- */

.cast-card { border-color: var(--line); }
.cast-list .cast-card .cast-name .name-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.gender-tag-inline {
  font-family: "nitti-typewriter-normal", monospace;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}
.cast-list .cast-card .photo-wrap { border-radius: 0; }
.cast-list .cast-card .photo-wrap .photo-clip { border-radius: 0; }
.cast-drawer .cast-card .photo-wrap,
.cast-drawer .cast-card .photo-wrap .photo-clip { border-radius: 0; }
select.needs-voice { border-color: var(--accent); color: var(--accent); }

/* ---------- 10. VIEW-MODE TOGGLE + PILLS ---------- */

.view-mode-btn, .pill {
  border-radius: 0;
  font-family: "nitti-grotesk", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.pill.accent { background: var(--accent-dim); border-color: var(--accent); color: #ae1800; }
::selection { background: rgba(236, 48, 19, 0.3); }
::-webkit-scrollbar-thumb { background: var(--line); }

/* ---------- 11. THE LIGHT CUT ----------
   Nitti Grotesk Light carries running copy and helper text, so the
   interface labels (regular/bold) stay clearly a different register. */

.help-text, .settings-desc, .field-hint, .empty-state p, .modal-body p {
  font-family: var(--font-light) !important;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Nitti Grotesk sits slightly wider than Archivo at the same size, so
   tracked uppercase labels get a hair less letter-spacing to fit. */
.disp, .section-title, .details-label, label,
nav.tabs button, .tab-btn, button, .btn {
  letter-spacing: 0.1em;
}
.header-project .project-status { letter-spacing: 0.12em; }

/* Display headlines use the condensed cut everywhere. Section 2 already
   claims .disp and header h1 with !important; these are the rest. */
h2, h3, .display-lg, .cast-name .name-display {
  font-family: var(--font-display);
  font-weight: 700;
}
