/* ============================================================
   FRAME/SHIFT shared components
   One implementation each. Pages consume these + tokens.css.
   Hierarchy comes from spacing, type scale and ≤2 surface
   levels above the page background — not from outlines.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  min-width: 1100px;
}

::selection { background: var(--accent-soft); }

/* Machine data — the highest-signal content in the app */
.mono, .fs-table td.mono, .tc, .vfxid {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ── App shell ─────────────────────────────────────────────
   One persistent top nav on every page. Rendered by js/shell.js
   into <header class="fs-shell" data-shell>. */
.fs-shell {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  height: 52px;
  background: var(--surface-1);
  position: sticky;
  top: 0;
  z-index: 50;
}

.fs-shell-brand { display: flex; align-items: center; flex-shrink: 0; }
.fs-shell-brand img { height: 22px; width: auto; display: block; }

.fs-shell-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; }

.fs-shell-nav a {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
}
.fs-shell-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.fs-shell-nav a.active { color: var(--ink); background: var(--accent-soft); }

.fs-shell-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.fs-shell-prod {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ── Page scaffold ───────────────────────────────────────── */
.fs-page { padding: var(--sp-5); max-width: 1680px; margin: 0 auto; }

.fs-page-head { margin-bottom: var(--sp-5); }
.fs-page-head h1 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.fs-page-head .fs-page-note { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 2px; max-width: 70ch; }

/* Section label — small, muted, letter-spaced; replaces bordered boxes */
.fs-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fs-section { margin-bottom: var(--sp-6); }
.fs-section > .fs-label { display: block; margin-bottom: var(--sp-3); }

/* Surface — the ONLY panel chrome. Max two levels above --bg. */
.fs-panel { background: var(--surface-1); border-radius: var(--radius-lg); padding: var(--sp-4); }

/* ── Buttons ─────────────────────────────────────────────── */
.fs-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--ink);
  white-space: nowrap;
  transition: filter 0.1s ease;
}
.fs-btn:hover { filter: brightness(1.12); }
[data-theme='soft-morning'] .fs-btn:hover { filter: brightness(0.96); }
.fs-btn:disabled { opacity: 0.45; cursor: default; filter: none; }

.fs-btn-primary { background: var(--accent); color: var(--accent-fg); }
.fs-btn-danger { background: transparent; color: var(--danger); }
.fs-btn-danger:hover { background: var(--danger); color: var(--danger-fg); filter: none; }
.fs-btn-ghost { background: transparent; color: var(--ink-muted); }
.fs-btn-ghost:hover { color: var(--ink); background: var(--surface-2); filter: none; }

/* ── Inputs ──────────────────────────────────────────────── */
.fs-field { display: flex; flex-direction: column; gap: 5px; }
.fs-field > label, .fs-field > .fs-label { font-size: var(--text-xs); }

input[type='text'], input[type='number'], input[type='search'], input[type='password'],
input[type='email'], select, textarea {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  width: 100%;
}
textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
select { cursor: pointer; }

/* Mono inputs for machine data (timecodes, IDs, paste boxes) */
input.mono, textarea.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Status badge ────────────────────────────────────────── */
.fs-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.fs-badge[data-status='NEW'] { background: var(--status-new-bg); color: var(--status-new-fg); }
.fs-badge[data-status='TURNED OVER'] { background: var(--status-turned-bg); color: var(--status-turned-fg); }
.fs-badge[data-status='ON HOLD'] { background: var(--status-hold-bg); color: var(--status-hold-fg); }
.fs-badge[data-status='OMIT'] { background: var(--status-omit-bg); color: var(--status-omit-fg); }
.fs-badge[data-status='APPROVED'] { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.fs-badge[data-status='REVIEW'] { background: var(--status-review-bg); color: var(--status-review-fg); }

/* ── Table — the workhorse ───────────────────────────────── */
.fs-table-wrap { overflow: auto; border-radius: var(--radius-md); background: var(--surface-1); }

.fs-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }

.fs-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: 9px 10px;
  box-shadow: inset 0 -1px 0 var(--line);
  white-space: nowrap;
}

.fs-table tbody td { padding: 7px 10px; vertical-align: middle; }
.fs-table tbody tr { box-shadow: inset 0 -1px 0 var(--line); }
.fs-table tbody tr:last-child { box-shadow: none; }
.fs-table tbody tr:hover { background: var(--surface-2); }
.fs-table tbody tr.selected { background: var(--accent-soft); }

.fs-table td.mono { font-size: var(--text-sm); }
.fs-table input[type='checkbox'] { width: auto; accent-color: var(--accent); cursor: pointer; }

/* Contextual bulk-action bar — appears above a table when rows selected */
.fs-bulkbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
}
.fs-bulkbar[hidden] { display: none; }

/* ── Drop zone (EDL / ALE upload) ────────────────────────── */
.fs-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  background: var(--surface-1);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.fs-drop:hover, .fs-drop.dragover { border-color: var(--accent); background: var(--surface-2); color: var(--ink); }
.fs-drop .fs-drop-hint { font-size: var(--text-xs); color: var(--ink-faint); }
.fs-drop .mono { color: var(--ink); }

/* ── Stat strip — compact inline figures, not bordered cards ── */
.fs-stats { display: flex; gap: var(--sp-5); align-items: baseline; flex-wrap: wrap; }
.fs-stat { display: flex; align-items: baseline; gap: 7px; }
.fs-stat strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}
.fs-stat .fs-label { font-weight: 500; }

/* ── Detail sections (shot view) ─────────────────────────── */
.fs-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--sp-4); align-items: baseline; }
.fs-kv dt { font-size: var(--text-xs); color: var(--ink-muted); letter-spacing: var(--label-tracking); text-transform: uppercase; }
.fs-kv dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--ink); }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  background: var(--surface-2);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
  max-width: 420px;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Empty state ─────────────────────────────────────────── */
.fs-empty { color: var(--ink-faint); font-size: var(--text-sm); padding: var(--sp-6); text-align: center; }