/* ============================================================
   Syri Atlas — design system
   Tokens defined in DESIGN.md. Paper chrome, near-black media wells.
   ============================================================ */

:root {
  /* Newsprint, not the near-white of every tool in this category. The page has
     a real tone, so reading surfaces sit ABOVE it in lightness instead of the
     usual white cards on grey. That inversion is most of what separates this
     from the competition at a glance, and it costs nothing to render. */
  --paper:       oklch(0.945 0.017 76);
  --paper-raise: oklch(0.982 0.009 80);
  --paper-sink:  oklch(0.916 0.021 72);
  --ink:         oklch(0.190 0.020 52);
  --ink-2:       oklch(0.435 0.018 56);
  --ink-3:       oklch(0.585 0.016 60);
  --line:        oklch(0.856 0.018 70);
  --line-soft:   oklch(0.896 0.014 74);

  /* Ochre, not alert-yellow. Deep enough to read as a decision rather than a
     warning, and far from every client brand colour, so a client mark is never
     confused with an app control. */
  --amber:       oklch(0.700 0.145 64);
  --amber-deep:  oklch(0.560 0.130 55);
  --amber-wash:  oklch(0.940 0.050 76);

  --well:        oklch(0.170 0.014 55);
  --well-2:      oklch(0.245 0.014 55);
  --well-3:      oklch(0.320 0.014 55);
  --well-ink:    oklch(0.945 0.008 80);
  --well-ink-2:  oklch(0.700 0.010 68);

  /* Semantic colour is desaturated on purpose. Twenty-eight rows of "fine"
     should not shout; only trouble earns full chroma. */
  --live:        oklch(0.560 0.200 25);
  --ok:          oklch(0.570 0.105 150);
  --warn:        oklch(0.680 0.140 65);
  --err:         oklch(0.525 0.175 27);

  --pop-shadow: 0 1px 2px oklch(0.2 0.01 62 / 0.06), 0 8px 24px oklch(0.2 0.01 62 / 0.10);

  /* Three faces, three jobs: chrome, headlines, numbers. Nothing decorative. */
  --news: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-w: 232px;
  --topbar-h: 52px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--amber-wash); }

/* Without this a keyboard user tabs the whole sidebar again on every page.
   Off-screen until focused, then it lands on the first real control. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 0 0 4px 0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }
.content:focus { outline: none; }

/* Visible to screen readers only — used to say what a bare count refers to. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------- typography primitives ---------------- */

.t-micro {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-meta  { font-size: 12px; color: var(--ink-2); }
.t-sec   { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.t-title { font-size: 19px; font-weight: 600; letter-spacing: -0.012em; margin: 0; }
.mono    { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; }
.num     { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   Shell
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* ---------------- sidebar ---------------- */

.sidebar {
  background: var(--paper-sink);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 16px 14px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 24px; height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ink);
  border-radius: 5px;
  color: var(--paper);
}
.brand-name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
}
.brand-env {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 4px;
}

.nav {
  padding: 10px 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.nav-group + .nav-group { margin-top: 18px; }
.nav-label { padding: 0 8px 6px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  border-radius: 5px;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.nav-item:hover { background: oklch(0.92 0.008 80); color: var(--ink); }
.nav-item[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}
.nav-item[aria-current="page"] .nav-count { color: oklch(0.75 0.01 70); }
.nav-item svg { flex: none; opacity: 0.9; }
.nav-text { flex: 1; font-weight: 500; }
.nav-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.sidebar-foot {
  border-top: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 12px;
}

.meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.meter-track {
  height: 4px;
  background: oklch(0.90 0.008 80);
  border-radius: 2px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: width 300ms var(--ease);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  margin: -6px;
  border: 0;
  background: transparent;
  border-radius: 5px;
  width: calc(100% + 12px);
  cursor: pointer;
  text-align: left;
}
.user-chip:hover { background: oklch(0.92 0.008 80); }
.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex: none;
}

/* ---------------- topbar ---------------- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.topbar {
  height: var(--topbar-h);
  flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
}
.topbar-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.topbar-sub {
  color: var(--ink-3);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* client switcher — the single most important control in the app */
.client-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 4px 5px;
  background: var(--paper-raise);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 150ms var(--ease);
}
.client-switch:hover { border-color: var(--ink-3); }
.client-dot {
  width: 18px; height: 18px;
  border-radius: 4px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: oklch(1 0 0);
}
.client-switch-text { display: grid; line-height: 1.25; }
.client-switch-text b { font-size: 13px; font-weight: 600; }
.client-switch-text span { font-size: 10px; color: var(--ink-3); }

.lang-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--paper-raise);
}
.lang-toggle button {
  border: 0;
  background: transparent;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------------- content ---------------- */

.content { flex: 1; overflow-y: auto; min-height: 0; }
.page { padding: 22px 24px 60px; }
.page.wide { max-width: none; }
.page-head { margin-bottom: 20px; }
.page-head p { margin: 5px 0 0; color: var(--ink-2); max-width: 68ch; }

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.section-head .t-sec { flex: none; }
.section-head .rule { flex: 1; height: 1px; background: var(--line-soft); }

/* ============================================================
   Controls
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--paper-raise);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), opacity 150ms var(--ease);
}
.btn:hover { background: oklch(0.965 0.006 82); border-color: var(--ink-3); }
.btn:active { background: oklch(0.94 0.007 80); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--paper-raise); border-color: var(--line); }

.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-primary:hover { background: oklch(0.28 0.014 62); border-color: oklch(0.28 0.014 62); }
.btn-primary:active { background: oklch(0.16 0.014 62); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: oklch(0.94 0.007 80); border-color: transparent; color: var(--ink); }

.btn-danger { color: var(--err); }
.btn-danger:hover { background: oklch(0.96 0.02 28); border-color: var(--err); }

.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-lg { padding: 9px 18px; font-size: 15px; }
.btn-icon { padding: 6px; }

.btn.loading { pointer-events: none; opacity: 0.7; }
.btn.loading .spin {
  width: 12px; height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.field { display: grid; gap: 5px; }
.field > label { font-size: 12px; font-weight: 500; color: var(--ink-2); }

.input, .select, .textarea {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-raise);
  transition: border-color 150ms var(--ease);
}
.input:hover, .select:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--amber);
  outline-offset: -1px;
  border-color: var(--amber-deep);
}
.input::placeholder { color: var(--ink-3); }
.textarea { resize: vertical; min-height: 70px; line-height: 1.55; }

.select {
  appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search svg { position: absolute; left: 8px; color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 28px; }

/* segmented control */
.seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--paper-sink);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.seg button {
  border: 0;
  background: transparent;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--paper-raise); color: var(--ink); box-shadow: 0 1px 1px oklch(0.2 0.01 62 / 0.08); }

/* switch */
.switch {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 30px; height: 17px;
  flex: none;
  border-radius: 9px;
  background: oklch(0.86 0.008 78);
  position: relative;
  transition: background 150ms var(--ease);
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper-raise);
  box-shadow: 0 1px 2px oklch(0.2 0.01 62 / 0.2);
  transition: transform 150ms var(--ease);
}
.switch input:checked + .switch-track { background: var(--ink); }
.switch input:checked + .switch-track::after { transform: translateX(13px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--amber); outline-offset: 2px; }

/* range */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: oklch(0.88 0.008 78);
  border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--paper-raise);
  box-shadow: 0 1px 2px oklch(0.2 0.01 62 / 0.25);
}
input[type="range"]::-moz-range-track { height: 3px; background: oklch(0.88 0.008 78); border-radius: 2px; }
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--paper-raise);
}

/* ---------------- chips, badges, tags ---------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--paper-sink);
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip-amber { background: var(--amber-wash); border-color: oklch(0.88 0.07 82); color: var(--amber-deep); }
.chip-ok    { background: oklch(0.96 0.03 155); border-color: oklch(0.88 0.06 155); color: oklch(0.45 0.10 155); }
.chip-err   { background: oklch(0.96 0.025 28); border-color: oklch(0.89 0.05 28); color: var(--err); }
.chip-live  { background: oklch(0.96 0.03 26); border-color: oklch(0.88 0.07 26); color: var(--live); }

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot-run  { background: var(--amber); }
.dot-ok   { background: var(--ok); }
.dot-err  { background: var(--err); }
.dot-wait { background: var(--ink-3); }
.dot-live { background: var(--live); animation: pulse 1.6s var(--ease) infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 oklch(0.575 0.205 26 / 0.5); }
  60%      { opacity: 1; box-shadow: 0 0 0 5px oklch(0.575 0.205 26 / 0); }
}

/* type-of-work tag: the taxonomy that drives the dashboard */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.tag i {
  width: 3px;
  height: 11px;
  border-radius: 1px;
  flex: none;
  background: var(--kind, var(--ink-3));
}

/* ---------------- panels & tables ---------------- */

.panel {
  background: var(--paper-raise);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.panel-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  min-width: 0;
}
/* basis, not flex:1 — a crowded header wraps instead of crushing the title to "S.." */
.panel-head .t-sec { flex: 1 1 190px; min-width: 0; }
.panel-head .search { min-width: 150px; }
.panel-body { padding: 14px; }
.panel-body.flush { padding: 0; }

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper-sink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tbody tr { transition: background 120ms var(--ease); }
.table tbody tr:hover { background: oklch(0.975 0.006 82); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .right { text-align: right; }
.table .row-actions { opacity: 0; transition: opacity 120ms var(--ease); }
.table tbody tr:hover .row-actions { opacity: 1; }

.thumb {
  width: 46px; height: 28px;
  border-radius: 4px;
  background: var(--well);
  flex: none;
  object-fit: cover;
  display: grid;
  place-items: center;
  color: var(--well-ink-2);
  overflow: hidden;
  position: relative;
}
.thumb.v { width: 24px; height: 30px; }

.filecell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.filecell-text { min-width: 0; }
.filecell-text b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- empty & loading states ---------------- */

.empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 56px 24px;
  color: var(--ink-2);
}
.empty-mark {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--paper-sink);
  border: 1px solid var(--line);
  color: var(--ink-3);
  margin-bottom: 4px;
}
.empty b { color: var(--ink); font-size: 15px; font-weight: 600; }
.empty p { margin: 0; max-width: 44ch; }
.empty .btn { margin-top: 10px; }

.skel {
  background: linear-gradient(90deg, oklch(0.94 0.006 80) 25%, oklch(0.965 0.005 80) 37%, oklch(0.94 0.006 80) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------------- dropzone ---------------- */

.drop {
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: var(--paper-raise);
  padding: 40px 24px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.drop:hover { border-color: var(--ink-3); background: oklch(0.99 0.005 84); }
.drop.over { border-color: var(--amber-deep); background: var(--amber-wash); }
.drop b { font-size: 15px; }
.drop .t-meta { max-width: 46ch; }
.drop-mark {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--paper-sink);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.drop-or {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 11px;
}
.drop-or::before, .drop-or::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ============================================================
   Media wells — the only dark surfaces in the product
   ============================================================ */

.well {
  background: var(--well);
  border-radius: 8px;
  color: var(--well-ink);
  overflow: hidden;
}
.well .t-micro, .well .t-meta { color: var(--well-ink-2); }

.stage {
  position: relative;
  background: var(--well);
  display: grid;
  place-items: center;
  overflow: hidden;
  container-type: inline-size;
}
.stage-16 { aspect-ratio: 16 / 9; }
.stage-916 { aspect-ratio: 9 / 16; }
.stage-45 { aspect-ratio: 4 / 5; }
.stage-11 { aspect-ratio: 1 / 1; }

/* Stand-in for real footage. Layered like a lit interior: wall, key light,
   subject mass, rim light, vignette. Reads as a frame, not a grey box. */
.frame {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 30% at 71% 20%, oklch(0.80 0.06 235 / 0.42), transparent 72%),
    radial-gradient(30% 46% at 45% 78%, oklch(0.26 0.03 40 / 0.96), transparent 74%),
    radial-gradient(34% 24% at 45% 44%, oklch(0.62 0.055 52 / 0.85), transparent 76%),
    radial-gradient(85% 65% at 24% 26%, oklch(0.50 0.04 235 / 0.6), transparent 70%),
    linear-gradient(172deg, oklch(0.50 0.038 242) 0%, oklch(0.34 0.026 248) 52%, oklch(0.22 0.018 250) 100%);
}
/* vignette as a gradient so it scales with the frame, unlike a px box-shadow */
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(115% 105% at 50% 45%, transparent 42%, oklch(0.11 0.01 250 / 0.62) 100%);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, oklch(1 0 0 / 0.016) 0 1px, transparent 1px 3px);
}
.frame-b { filter: hue-rotate(52deg) saturate(1.15); }
.frame-c { filter: hue-rotate(140deg) saturate(0.85) brightness(1.06); }
.frame-d { filter: hue-rotate(206deg) brightness(0.94); }
.frame-e { filter: hue-rotate(300deg) saturate(0.9); }

.stage-label {
  position: absolute;
  bottom: 8px; left: 8px;
  z-index: 3;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--well-ink);
  background: oklch(0.14 0.01 62 / 0.72);
  backdrop-filter: blur(3px);
  padding: 2px 6px;
  border-radius: 4px;
}
.stage-badge {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 4px;
  background: oklch(0.14 0.01 62 / 0.72);
  color: var(--well-ink);
}
.stage-badge.live { background: var(--live); color: oklch(0.99 0 0); }

/* the band the render will discard, marked on the source preview */
.src-cut {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
  background: oklch(0.14 0.01 62 / 0.55);
  border-top: 1.5px dashed oklch(0.575 0.205 26 / 0.85);
}
/* the channel bar along the top edge */
.src-cut.top {
  top: 0; bottom: auto;
  border-top: 0;
  border-bottom: 1.5px dashed oklch(0.575 0.205 26 / 0.85);
}
.src-cut.top span { top: auto; bottom: 5px; }

/* the clock column on the left edge */
.src-cut.side {
  top: 0; bottom: 0; left: 0; right: auto;
  border-top: 0;
  border-right: 1.5px dashed oklch(0.575 0.205 26 / 0.85);
}
.src-cut.side span { top: 6px; right: auto; left: 5px; writing-mode: vertical-rl; }

.src-cut span {
  position: absolute;
  top: 5px; right: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: oklch(0.85 0.12 26);
}

/* safe-zone overlay used in brand kit + reel preview */
.safe {
  position: absolute;
  z-index: 2;
  border: 1px dashed oklch(1 0 0 / 0.30);
  pointer-events: none;
}
.safe-top    { top: 0; left: 0; right: 0; height: 13%; border-width: 0 0 1px; background: oklch(0.14 0.01 62 / 0.28); }
.safe-bottom { bottom: 0; left: 0; right: 0; height: 19%; border-width: 1px 0 0; background: oklch(0.14 0.01 62 / 0.28); }
.safe-tag {
  position: absolute;
  right: 5px;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.55);
}
.safe-top .safe-tag { bottom: 3px; }
.safe-bottom .safe-tag { top: 3px; }

/* burned-in caption preview */
.cap {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 22%;
  z-index: 4;
  text-align: center;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: oklch(0.99 0 0);
  text-wrap: balance;
}
/* the highlight colour is the client's accent, never a product colour */
.cap .hot { color: var(--cap-accent, var(--amber)); }
.cap-shadow   { text-shadow: 0 2px 10px oklch(0.1 0 0 / 0.85), 0 1px 2px oklch(0.1 0 0 / 0.9); }
.cap-box .w   { background: oklch(0.14 0.01 62 / 0.82); padding: 1px 5px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cap-box .hot { background: var(--cap-accent, var(--amber)); color: oklch(0.99 0 0); }
.cap-outline  { -webkit-text-stroke: 3px oklch(0.14 0.01 62); paint-order: stroke fill; }

.wm {
  position: absolute;
  z-index: 4;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  color: oklch(1 0 0 / 0.88);
  text-shadow: 0 1px 4px oklch(0.1 0 0 / 0.6);
}

/* ---------------- transport & timeline ---------------- */

.transport {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--well-2);
  color: var(--well-ink);
}
.tbtn {
  border: 0;
  background: transparent;
  color: var(--well-ink);
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 150ms var(--ease);
}
.tbtn:hover { background: oklch(1 0 0 / 0.10); }
.tbtn.primary { background: var(--well-ink); color: var(--well); }
.tbtn.primary:hover { background: oklch(1 0 0 / 0.85); }
.tc { font-family: var(--mono); font-size: 11.5px; letter-spacing: -0.01em; }
.tc-dim { color: var(--well-ink-2); }

.timeline {
  position: relative;
  height: 62px;
  background: var(--well);
  border-top: 1px solid oklch(1 0 0 / 0.08);
  cursor: crosshair;
  user-select: none;
  overflow: hidden;
}
.wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 1px;
  pointer-events: none;
}
.wave i {
  flex: 1;
  background: var(--well-3);
  border-radius: 1px;
  min-width: 1px;
}
.sel {
  position: absolute;
  top: 0; bottom: 0;
  background: oklch(0.780 0.152 76 / 0.18);
  border-left: 2px solid var(--amber);
  border-right: 2px solid var(--amber);
  z-index: 2;
}
.sel-grip {
  position: absolute;
  top: 0; bottom: 0;
  width: 9px;
  cursor: ew-resize;
  z-index: 3;
}
.sel-grip::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 16px;
  background: var(--well);
  border-radius: 1px;
  opacity: 0.7;
}
.sel-grip.l { left: -5px; } .sel-grip.r { right: -5px; }
.sel-dur {
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--well);
  background: var(--amber);
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
}
.playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: oklch(0.99 0 0);
  z-index: 4;
  pointer-events: none;
}
.playhead::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid oklch(0.99 0 0);
}
.ruler {
  display: flex;
  height: 17px;
  background: var(--well-2);
  color: var(--well-ink-2);
  font-family: var(--mono);
  font-size: 9px;
  align-items: center;
}
.ruler span {
  flex: 1;
  padding-left: 4px;
  border-left: 1px solid oklch(1 0 0 / 0.12);
}
/* candidate clip markers laid over the timeline */
.cand {
  position: absolute;
  bottom: 3px;
  height: 5px;
  border-radius: 2px;
  background: oklch(0.610 0.125 155 / 0.85);
  z-index: 1;
}

/* ============================================================
   Dashboard
   ============================================================ */

.dash {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.jobrow {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.jobrow:last-child { border-bottom: 0; }
.jobrow-main { min-width: 0; display: grid; gap: 5px; }
.jobrow-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.jobrow-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobrow-bar { height: 3px; background: oklch(0.91 0.008 80); border-radius: 2px; overflow: hidden; }
.jobrow-bar i { display: block; height: 100%; background: var(--amber); border-radius: 2px; transition: width 400ms var(--ease); }
.jobrow-bar.wait i { background: var(--ink-3); }
.jobrow-stage { display: flex; justify-content: space-between; gap: 10px; }

/* usage split — one stacked bar, not a donut */
.usage-bar {
  display: flex;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  gap: 1px;
  margin-bottom: 12px;
}
.usage-bar i {
  background: var(--kind);
  transition: filter 150ms var(--ease);
  position: relative;
}
.usage-bar i:hover { filter: brightness(1.12); }
.usage-legend { display: grid; gap: 7px; }
.usage-legend-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 9px;
  align-items: baseline;
  font-size: 12px;
}
.usage-legend-row .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--kind); align-self: center; }
.usage-legend-row .pct { color: var(--ink-3); font-size: 11px; min-width: 30px; text-align: right; }

.statline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.statline > div { display: grid; gap: 1px; }
.statline b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; font-family: var(--mono); }

.clientrow {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.clientrow:hover { background: oklch(0.975 0.006 82); }
.clientrow:last-child { border-bottom: 0; }

/* ============================================================
   Brand kits
   ============================================================ */

.kit-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.kitlist { display: grid; }
.kititem {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 9px;
  align-items: center;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.kititem:hover { background: oklch(0.975 0.006 82); }
.kititem[aria-pressed="true"] { background: var(--amber-wash); }
.kititem:last-of-type { border-bottom: 0; }
.kititem-text { min-width: 0; }
.kititem-text b { display: block; font-weight: 500; font-size: 13px; }

.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px;
  border-radius: 4px;
  border: 1px solid oklch(0.2 0.01 62 / 0.14);
  cursor: pointer;
  position: relative;
  transition: transform 150ms var(--ease);
}
.swatch:hover { transform: translateY(-1px); }
.swatch[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
}

.posgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 76px;
}
.posgrid button {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background: var(--paper-raise);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: background 120ms var(--ease);
}
.posgrid button:hover { background: var(--paper-sink); }
.posgrid button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }

/* Kuadër shembull për të parë watermark-un aty ku do të bjerë vërtet. */
.wm-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: var(--well);
  overflow: hidden;
  margin-bottom: 10px;
}
.wm-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  height: auto;
  cursor: grab;
  user-select: none;
}

.capstyles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.capstyle {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0;
  background: var(--well);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
  transition: border-color 150ms var(--ease);
}
.capstyle:hover { border-color: var(--ink-3); }
.capstyle[aria-pressed="true"] { border-color: var(--amber-deep); outline: 2px solid var(--amber); outline-offset: 1px; }
.capstyle-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  font-size: 9.5px;
  padding: 3px;
  text-align: center;
  background: oklch(0.14 0.01 62 / 0.8);
  color: var(--well-ink);
}

.kit-preview { position: sticky; top: 0; display: grid; gap: 10px; }

/* ============================================================
   Transcript
   ============================================================ */

.tx-layout {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* long transcripts scroll inside the panel rather than pushing the page down */
.tx-scroll {
  max-height: 460px;
  overflow-y: auto;
  padding-right: 6px;
  border-top: 1px solid var(--line-soft);
  padding-top: 8px;
}

.tx-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 9px;
  padding: 9px 11px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  align-items: center;
  transition: background 120ms var(--ease);
}
.tx-item:hover { background: oklch(0.975 0.006 82); }
.tx-item[aria-pressed="true"] { background: var(--amber-wash); }
.tx-item-text { min-width: 0; }
.tx-item-text b { display: block; font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 14px; }
.tab {
  border: 0;
  background: transparent;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.turn {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  padding: 7px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.turn:hover { background: oklch(0.975 0.006 82); }
.turn.cur { background: var(--amber-wash); }
.turn-tc {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  padding-top: 2px;
  text-align: right;
}
.turn-body { min-width: 0; }
.turn-spk { font-size: 11px; font-weight: 600; color: var(--amber-deep); margin-bottom: 1px; }
.turn-text { line-height: 1.62; max-width: 72ch; }
.turn mark { background: var(--amber); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.lowconf {
  border-bottom: 1.5px dotted var(--warn);
  cursor: help;
}

.keypoints { display: grid; gap: 9px; counter-reset: kp; max-width: 74ch; }
.keypoint {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
}
.keypoint::before {
  counter-increment: kp;
  content: counter(kp);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  height: 18px;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.keypoint a {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber-deep);
  text-decoration: none;
  border-bottom: 1px solid oklch(0.62 0.135 66 / 0.3);
}
.keypoint a:hover { border-bottom-color: var(--amber-deep); }

.spk-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.spk-row:last-child { border-bottom: 0; }
.spk-bar { height: 4px; background: oklch(0.91 0.008 80); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.spk-bar i { display: block; height: 100%; background: var(--ink-3); border-radius: 2px; }

/* ============================================================
   Reel studio
   ============================================================ */

/* Two columns. The left one is the whole job in order — the source, the cut
   taken out of it, the result that cut produces, and the button that renders it
   — so the eye runs straight down one path. The right column is everything that
   changes the result. Both are sized to their content rather than stretched, and
   the pair is centred, so a wide screen adds margin instead of dead space
   inside the panels. */
.reel-layout {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(320px, 460px);
  justify-content: center;
  gap: 16px;
  align-items: start;
}
.reel-src  { display: grid; gap: 12px; }
.reel-opts { display: grid; gap: 10px; align-items: start; }

@media (max-width: 1080px) {
  .reel-layout { grid-template-columns: minmax(0, 1fr); justify-content: stretch; row-gap: 12px; }

  /* Gogo's order, and the same one the two-column layout reads in: the source
     and its result first, then the words, then the furniture that frames them,
     then render. The preview sits directly under the source it came from, so
     a change to the trim is judged without scrolling.

     `display: contents` promotes the children of both wrappers to grid items
     so they can be ordered against each other; without it the preview and the
     settings cannot be sequenced, because they live in different wrappers. */
  .reel-layout .reel-src,
  .reel-layout .reel-opts { display: contents; }
  .reel-layout .reel-preview { order: 1; }
  .reel-layout .reel-opts > * { order: 2; }
  .reel-layout .reel-go { order: 3; }

  /* At full width the 9:16 preview is taller than a laptop screen. Capping it
     keeps it glanceable — measured 3073px of scroll before this, same job. */
  .reel-layout .rp {
    max-height: 62vh;
    width: auto;
    margin-inline: auto;
  }
}

/* Each moment the composition changes gets a frame, captioned with what it
   shows, so moving an element is visible wherever that element appears. */
.pv-moments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.pv-moment { margin: 0; display: grid; gap: 6px; min-width: 0; }
.pv-moment figcaption {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-3);
}
.pv-moment figcaption .mono {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--paper-sink);
  border: 1px solid var(--line-soft);
  color: var(--ink-2);
}

/* The source player is a reference, not the deliverable: cap it so the
   timeline and the preview are both on screen without scrolling. Capping the
   WIDTH (not the height) keeps the 16:9 box exactly 16:9 — clamping height
   against aspect-ratio instead leaves the element wider than its video and
   opens a blank strip beside it. */
.reel-layout .stage-16 {
  max-width: calc(40vh * 16 / 9);
  margin-inline: auto;
}
/* the capped stage no longer spans the panel, so the panel carries the same
   dark ground and the space either side reads as letterboxing */
.reel-layout .stage-host { background: var(--well); }
/* the panel is dark all through, so its header needs its own light ground —
   the default ink is near-black and would vanish against the well */
.reel-layout .stage-host .panel-head {
  background: var(--paper-raise);
  border-bottom: 1px solid var(--line-soft);
}
/* the transport wraps rather than clipping its zoom buttons off the edge */
.reel-layout .transport { flex-wrap: wrap; row-gap: 6px; }
.reel-layout .transport .spacer { flex-basis: 0; }

/* The frames now sit under the source rather than beside it, so the column
   carries both: cap the pair so the whole path — video, cut, result, render —
   stays within a screen or so of scrolling. */
.pv-moments { max-width: 520px; margin-inline: auto; }
.reel-go    { max-width: 520px; margin-inline: auto; width: 100%; }

/* These are schematics, not previews — the real preview is in the left column.
   Packing them tighter keeps the whole controls column within reach instead of
   spending three screens of scroll on thumbnails. */
/* auto-FILL, not auto-fit: with only two styles to show, auto-fit collapses the
   empty tracks and stretches the two into giant thumbnails */
.reel-opts .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.reel-opts .tpl { padding: 4px; gap: 4px; }
.reel-opts .tpl-name { font-size: 9.5px; }

/* One movable element of a reel template: its on/off switch, timing, and the
   two sliders that nudge it. Grouped in a card so it is obvious which pair of
   sliders belongs to which box once several are listed. */
.tpl-el {
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--paper-sink);
}
.tpl-el.off { opacity: 0.45; }
.tpl-el.off .xy { pointer-events: none; }
/* axis label · typed value · slider — three fixed columns so both rows line up
   however wide the numbers get */
.xy {
  display: grid;
  grid-template-columns: auto 58px minmax(0, 1fr);
  gap: 6px 8px;
  align-items: center;
}
.xy label {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.xy input[type="range"] { width: 100%; margin: 0; }
/* the number is the exact way in: type a coordinate straight off the spec
   sheet instead of hunting for it with the slider */
.xy-num {
  width: 100%;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  text-align: right;
}
.xy-num:focus {
  outline: 2px solid var(--amber);
  outline-offset: -1px;
  border-color: var(--amber-deep);
}
.tpl-el .btn { justify-self: start; }

.segchips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--line-soft); }
.segchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-raise);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.segchip:hover { border-color: var(--ink-3); }
.segchip[aria-pressed="true"] { background: var(--amber-wash); border-color: var(--amber-deep); }
.segchip x {
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  border-radius: 4px;
  color: var(--ink-3);
}
.segchip x:hover { background: oklch(0.90 0.01 78); color: var(--err); }

.opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.opt-row:last-child { border-bottom: 0; }
.opt-row > div:first-child { min-width: 0; }
.opt-row b { display: block; font-weight: 500; font-size: 13px; }

/* ============================================================
   Clip studio
   ============================================================ */

.clipgrid { display: grid; gap: 14px; }

.clipcard {
  display: grid;
  /* wide enough that a 16:9 clip is still legible, since clips now keep
     whatever format they came in as */
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raise);
  transition: border-color 150ms var(--ease);
}
.clipcard:hover { border-color: var(--ink-3); }
/* start-aligned so the actions sit under the video instead of drifting to the
   middle of a tall card */
.clipcard-media { display: grid; gap: 6px; align-content: start; }
.clipcard-body { min-width: 0; display: grid; gap: 9px; align-content: start; }
.clipcard-head { display: flex; align-items: flex-start; gap: 12px; }
.clipcard-head > div:first-child { flex: 1; min-width: 0; }
.clipcard-sum { color: var(--ink-2); line-height: 1.55; max-width: 78ch; margin: 0; }

.article { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 9px; }
.article-body { font-size: 13px; line-height: 1.55; margin: 0 0 8px; white-space: pre-wrap; }

.score {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  position: relative;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  background: conic-gradient(var(--amber) calc(var(--v) * 1%), oklch(0.91 0.008 80) 0);
}
.score::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--paper-raise);
  border-radius: 50%;
}
.score span { position: relative; z-index: 1; }
.score small {
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 1;
}

.titles { display: grid; gap: 4px; }
.title-opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.title-opt:hover { border-color: var(--ink-3); background: var(--paper-raise); }
.title-opt[aria-pressed="true"] { border-color: var(--amber-deep); background: var(--amber-wash); }
.title-opt-i {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  width: 14px;
}
.title-opt-t { font-weight: 500; }
.title-opt-len { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* provenance: every AI output shows its source line */
.source {
  border-left: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: 9px;
  margin-top: 2px;
}
.source-q {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
  font-style: italic;
  max-width: 76ch;
  margin: 3px 0 0;
}

/* ============================================================
   Live
   ============================================================ */

.live-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.buffer {
  position: relative;
  height: 46px;
  background: var(--well);
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
}
.buffer-edge {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 44px;
  background: linear-gradient(90deg, transparent, oklch(0.575 0.205 26 / 0.22));
  pointer-events: none;
  z-index: 2;
}
.buffer-now {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 2px;
  background: var(--live);
  z-index: 3;
}
.mark {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--ok);
  z-index: 2;
}
.mark::after {
  content: attr(data-l);
  position: absolute;
  top: 2px; left: 3px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ok);
}

.hotkeys { display: flex; gap: 14px; flex-wrap: wrap; }
kbd {
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--paper-raise);
  color: var(--ink-2);
}

.capture {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
.capture:last-child { border-bottom: 0; }
.capture-acts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }

/* ============================================================
   Popover / toast / misc
   ============================================================ */

.pop {
  position: fixed;
  z-index: 60;
  background: var(--paper-raise);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: var(--pop-shadow);
  padding: 5px;
  min-width: 232px;
  animation: popin 140ms var(--ease);
}
@keyframes popin { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.pop-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
.pop-item:hover { background: var(--paper-sink); }
.pop-sep { height: 1px; background: var(--line-soft); margin: 4px 0; }

.toasts {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 80;
  display: grid;
  gap: 8px;
  justify-items: end;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: var(--paper);
  padding: 9px 13px;
  border-radius: 8px;
  box-shadow: var(--pop-shadow);
  font-size: 13px;
  animation: toastin 200ms var(--ease);
  max-width: 380px;
}
@keyframes toastin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.toast .dot { box-shadow: none; }
.toast-action {
  margin-left: 10px;
  flex: none;
  background: oklch(1 0 0 / 0.14);
  border-color: oklch(1 0 0 / 0.28);
  color: inherit;
}
.toast-action:hover { background: oklch(1 0 0 / 0.24); }

.note {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-sink);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}
.note svg { margin-top: 1px; color: var(--ink-3); }
.note b { color: var(--ink); font-weight: 600; }
.note-warn { background: oklch(0.975 0.03 82); border-color: oklch(0.88 0.06 82); }
.note-warn svg { color: var(--amber-deep); }

.hr { height: 1px; background: var(--line-soft); border: 0; margin: 16px 0; }

/* Three headlines to read, not three controls to operate. */
.titlelist {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 5px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.titlelist li::marker { color: var(--ink-3); font-size: 11px; }

/* The clip's own words. Capped and scrollable: a twelve-minute segment carries
   far more transcript than a card should ever grow to hold. */
.cliptx {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--paper-sink);
  max-height: 260px;
  overflow: auto;
}
.cliptx p { margin: 0 0 7px; font-size: 13px; line-height: 1.5; }
.cliptx p:last-of-type { margin-bottom: 10px; }
.cliptx .mono { margin-right: 6px; }

/* A cut clip's own first frame, standing in for the placeholder. Inert on
   purpose: the play button is the way into the clip, so the poster must not
   swallow the click or offer its own controls. */
.clip-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--well);
  pointer-events: none;
}

/* ---------------- the run window ----------------------------------------
   The only thing in the product that sits over the page. It is used by Clip
   Studio's history so opening a run's YouTube or reel clips does not take the
   editor off whatever they were doing. */
.win-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* warm like every other neutral in this product; the first version of this
     scrim was tinted blue and read as a different application */
  background: oklch(0.15 0.01 62 / 0.55);
  display: grid;
  place-items: center;
  padding: 24px;
  /* the scrim itself is the click target that closes the window, so it must
     not be the thing that scrolls when the panel is taller than the viewport */
  overflow: auto;
}
.win {
  width: min(1100px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  /* the one shadow token, not a second one invented here */
  box-shadow: var(--pop-shadow);
}

/* The window is already a raised surface. Its cards keep their outline so the
   grid stays readable, but drop the raised fill — a panel tinted lighter than
   the panel it sits on is the nested card this product refuses. */
.win .clipcard { background: transparent; }
.win-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  flex: none;
  min-width: 0;
}
.win-body { padding: 14px; overflow: auto; min-height: 0; }

.stack   { display: grid; gap: 14px; min-width: 0; }
.stack-s { display: grid; gap: 8px; min-width: 0; }

/* Grid and flex children default to min-width:auto, so one wide table
   blows out every ancestor. Opt the whole content area out of that. */
.dash > *, .kit-layout > *, .tx-layout > *, .reel-layout > *, .live-layout > *,
.reel-src > *, .reel-opts > *, .pv-moments > *,
.stack > *, .stack-s > * { min-width: 0; }

.scroll-x { overflow-x: auto; min-width: 0; }
.table-wrap { min-width: 0; overflow-x: auto; }
.table-wrap .table { min-width: 620px; }
.row     { display: flex; align-items: center; gap: 8px; }
.row-w   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer  { flex: 1; }
.trunc   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Photo branding — one photo in, two branded templates out
   ============================================================ */

.photo-layout {
  display: grid;
  grid-template-columns: 328px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* whole image visible, with a real 4:5 crop rectangle over it */
.cropper {
  position: relative;
  background: var(--well);
  border-radius: 8px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.cropper.dragging { cursor: grabbing; }
.cropper-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  display: block;
}
/* everything outside the crop is dimmed by a ring drawn with a huge shadow */
.cropper-veil { position: absolute; inset: 0; pointer-events: none; }

.cropbox {
  position: absolute;
  box-shadow: 0 0 0 9999px oklch(0.12 0.01 62 / 0.62);
  outline: 1px solid oklch(1 0 0 / 0.9);
  cursor: move;
}
/* rule-of-thirds guides inside the crop */
.cropbox::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, transparent 33.2%, oklch(1 0 0 / 0.28) 33.2% 33.4%, transparent 33.4%),
    linear-gradient(to right, transparent 66.5%, oklch(1 0 0 / 0.28) 66.5% 66.7%, transparent 66.7%),
    linear-gradient(to bottom, transparent 33.2%, oklch(1 0 0 / 0.28) 33.2% 33.4%, transparent 33.4%),
    linear-gradient(to bottom, transparent 66.5%, oklch(1 0 0 / 0.28) 66.5% 66.7%, transparent 66.7%);
  opacity: 0;
  transition: opacity 150ms var(--ease);
}
.cropper:hover .cropbox::after, .cropper.dragging .cropbox::after { opacity: 1; }

.cropbox-h {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid oklch(0.995 0 0);
  z-index: 2;
}
.cropbox-h.nw { top: -2px; left: -2px; border-width: 3px 0 0 3px; cursor: nwse-resize; }
.cropbox-h.ne { top: -2px; right: -2px; border-width: 3px 3px 0 0; cursor: nesw-resize; }
.cropbox-h.sw { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; cursor: nesw-resize; }
.cropbox-h.se { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; cursor: nwse-resize; }

/* the variant image is now a real <img> driven by the crop rect */
.pv-img { position: absolute; max-width: none; display: block; }

.variants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

/* the rendered variant. cqw units so it is identical at any size. */
.pv {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 5px;
  background: var(--well);
  container-type: inline-size;
  background-repeat: no-repeat;
}
.pv-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    oklch(0.12 0.01 250 / 0) 40%,
    oklch(0.12 0.01 250 / 0.34) 66%,
    oklch(0.12 0.01 250 / 0.74) 84%,
    oklch(0.12 0.01 250 / 0.93) 100%);
}
/* logo sits top-left by default; the Ekskluzive variant (pv-tr) mirrors it
   to the top-right, matching the source design */
.pv-logo-slot { position: absolute; top: 4%; left: 6%; z-index: 4; }
.pv-tr .pv-logo-slot { left: auto; right: 6%; }

/* ---------------- GOGO designs: absolute design-space placement ----------
   Positions come straight from the Canva files as percentages of the design
   canvas, so the preview is the same geometry the renderer uses rather than
   an approximation of it. Container queries make the text scale with the
   box, which is what keeps it honest at any panel size. */
.pv-gogo, .rp-gogo { container-type: inline-size; }

/* a dark floor under white text, so a busy photo cannot swallow the headline */
.gp-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
}

/* font family/weight/stretch are set inline per box, from the same face
   table the renderer uses — see FACES in data.js */
.gp-box {
  position: absolute;
  z-index: 4;
  /* pre-line so a line break typed in the field shows up here too — HTML
     would otherwise collapse it to a space and the preview would disagree
     with the render. `pre-line` (not `pre-wrap`) also collapses runs of
     spaces, matching how the renderer tokenises each line. */
  white-space: pre-line;
  /* the background hugs each wrapped line, exactly like Canva's effect and
     like the per-line fillRect the server draws */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.gp-box span {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* shrink-to-fit wrapper: the outer box's text-align centres THIS, so the
   block sits centred while its own lines stay left-aligned inside it */
.gp-inner {
  display: inline-block;
  max-width: 100%;
}
.gp-quote {
  position: absolute;
  z-index: 4;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1;
}
.gp-logo {
  position: absolute;
  z-index: 5;
  height: auto;
  object-fit: contain;
}
/* a very soft drop shadow so a white mark survives a pale photograph;
   drop-shadow follows the logo's alpha rather than boxing it */
.gp-logo-shadow { filter: drop-shadow(0 0.4cqw 2.4cqw rgba(0, 0, 0, 0.40)); }
.gp-logo-mark {
  display: flex;
  align-items: center;
  gap: 0.9cqw;
  color: oklch(0.995 0 0);
}
.gp-mark {
  width: 33%; aspect-ratio: 1;
  border-radius: 50%;
  border: 0.5cqw solid oklch(0.995 0 0);
  position: relative;
  flex: none;
}
.gp-mark::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: var(--logo-eye, oklch(0.45 0.17 255));
}
.gp-word {
  font-family: "Open Sans", var(--sans);
  font-stretch: 87.5%;
  font-weight: 800;
  font-size: 4.2cqw;
  line-height: 1;
  white-space: nowrap;
}

/* two lockup families: `centred` is the stock design, `lower` is GOGO's */
.pv-lock { position: absolute; z-index: 4; }

.pv-lock.centred {
  left: 6%; right: 6%;
  bottom: 6.4%;
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
}
.pv-lock.lower {
  left: 6%; right: 8%;
  bottom: 6%;
  text-align: left;
}

.pv-chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 2.6cqw;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: oklch(0.995 0 0);
  padding: 0.9cqw 1.9cqw;
  margin-bottom: 1.5cqw;
  line-height: 1;
}
.pv-lock.centred .pv-chip {
  font-size: 2.35cqw;
  letter-spacing: 0.09em;
  padding: 1.05cqw 1.9cqw;
  margin-bottom: 2.4cqw;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 6.4cqw;
  line-height: 1.34;
  color: oklch(0.995 0 0);
  margin: 0;
  white-space: pre-line;   /* typed line breaks survive, as in the render */
}
/* the stock title: Anton, uppercase, centred.
   6.48cqw is TITLE_SIZE (70) over the 1080 canvas — keep the two in step or
   the preview stops being the render. See TITLE_SIZE in data.js. */
.pv-title.anton {
  font-family: "Anton", var(--sans);
  font-weight: 400;
  font-size: 6.48cqw;
  /* Albanian Ë and Ç carry marks above cap height; at 1.04 the diaeresis
     collided with the line above. Titles run 3 to 4 lines, so this matters. */
  line-height: 1.22;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.pv-rule {
  width: 62%;
  height: 0.42cqw;
  min-height: 1px;
  margin: 3.1cqw 0 2.9cqw;
}
/* Ekskluzive boxes every wrapped line, same clone-per-line trick as the
   reel lockup's rp-title, just white-on-dark instead of translucent */
.pv-title.boxed span {
  background: var(--title-box, oklch(0.08 0 0));
  padding: 0.5cqw 1.3cqw;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.pv-logo {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  color: oklch(0.995 0 0);
}
.pv-logo-mark {
  width: 5.2cqw; height: 5.2cqw;
  border-radius: 50%;
  border: 0.62cqw solid oklch(0.995 0 0);
  position: relative;
  flex: none;
}
.pv-logo-mark::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--logo-eye, oklch(0.45 0.17 255));
}
.pv-logo-text {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 5.4cqw;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* the lower designs put the wordmark in the top corner, where it reads
   smaller than the stock one sitting under the title */
.pv-logo-slot .pv-logo-mark { width: 5.6cqw; height: 5.6cqw; border-width: 0.65cqw; }
.pv-logo-slot .pv-logo-text { font-size: 4.3cqw; }

.variant-card { display: grid; gap: 7px; }
.variant-card .row { justify-content: space-between; }
.variant-name { font-size: 11.5px; font-weight: 500; }

.photo-empty {
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
  color: var(--ink-2);
  cursor: pointer;
  padding: 20px;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.photo-empty:hover { border-color: var(--ink-3); background: var(--paper-raise); }
.photo-empty.over { border-color: var(--amber-deep); background: var(--amber-wash); }

/* ============================================================
   Reel timeline, reworked — the drag-only version was unusable
   ============================================================ */

.tl2 {
  position: relative;
  height: 96px;
  background: var(--well);
  border-top: 1px solid oklch(1 0 0 / 0.08);
  user-select: none;
  touch-action: none;
  overflow: hidden;
}
.tl2 .wave i { background: var(--well-3); }

/* Panning translates this wrapper rather than re-laying the track out, so the
   gesture survives — a rerender mid-drag would destroy the element holding
   pointer capture. Committed to a real window on release. */
.tl2-pan { position: absolute; inset: 0; }
.tl2.pannable { cursor: grab; }
.tl2.panning  { cursor: grabbing; }
/* drawing a new cut is the double-click gesture, so it gets its own cursor
   for as long as it is held */
.tl2.drawing, .tl2.drawing * { cursor: crosshair; }

/* real frames from the source, captured once and laid out by timecode */
.strip-f {
  position: absolute;
  top: 0;
  height: 68px;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.92;
}
.strip-miss { background: var(--well-2); }
/* with a filmstrip present the waveform drops to a lane underneath it */
.tl2.has-strip .wave {
  top: auto;
  bottom: 0;
  height: 28px;
  align-items: flex-end;
  background: oklch(0.14 0.01 250 / 0.75);
}
.tl2.has-strip .wave i { opacity: 0.85; }

.strip-progress {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: oklch(1 0 0 / 0.12);
  z-index: 6;
}
.strip-progress i {
  display: block;
  height: 100%;
  background: var(--amber);
  transition: width 200ms var(--ease);
}

.tl2-sel {
  position: absolute;
  top: 0; bottom: 0;
  /* light enough to read the filmstrip through */
  background: oklch(0.780 0.152 76 / 0.13);
  box-shadow: inset 0 2px 0 var(--amber), inset 0 -2px 0 var(--amber);
  z-index: 2;
  cursor: grab;
}
.tl2-sel.moving { cursor: grabbing; }
/* everything outside the selection dims, so in and out are unmistakable */
.tl2-mask {
  position: absolute;
  top: 0; bottom: 0;
  background: oklch(0.12 0.01 250 / 0.55);
  z-index: 1;
  pointer-events: none;
}

/* Thin visual line, wide invisible hit area. The in and out points read as
   precise marks rather than fat slabs covering the frames underneath. */
.tl2-h {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--amber);
  cursor: ew-resize;
  z-index: 5;
}
.tl2-h::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -7px; right: -7px;
}
/* flag at the top so the mark is findable without widening the line */
.tl2-h::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0; height: 0;
  border-top: 7px solid var(--amber);
}
.tl2-h.l::after { left: 0; border-right: 6px solid transparent; }
.tl2-h.r::after { right: 0; border-left: 6px solid transparent; }
.tl2-h:hover, .tl2-h.hot { background: oklch(0.86 0.16 82); width: 3px; }

.tl2-cap {
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--well);
  background: var(--amber);
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
}

/* sentence boundaries from the transcript — cuts land on speech, not mid-word */
.tl2-snap {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: oklch(0.60 0.12 155 / 0.55);
  z-index: 1;
  pointer-events: none;
}
.tl2-outro {
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  background: repeating-linear-gradient(45deg, oklch(0.52 0.13 320 / 0.35) 0 5px, oklch(0.52 0.13 320 / 0.16) 5px 10px);
  border-left: 1px solid oklch(0.62 0.13 320);
  z-index: 3;
  pointer-events: none;
}
.tl2-outro span {
  position: absolute;
  bottom: 4px; left: 4px;
  font-size: 8.5px;
  letter-spacing: 0.05em;
  color: oklch(0.85 0.06 320);
}

/* timecode entry — typing 1:05:02 is faster than any drag */
.tcin {
  font-family: var(--mono);
  font-size: 12px;
  width: 78px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-raise);
  text-align: center;
}
.tcin:focus { outline: 2px solid var(--amber); outline-offset: -1px; border-color: var(--amber-deep); }
.tcin.bad { border-color: var(--err); background: oklch(0.98 0.02 28); }

.nudge {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.nudge button {
  border: 0;
  background: var(--paper-raise);
  padding: 3px 7px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
}
.nudge button:hover { background: var(--paper-sink); color: var(--ink); }
.nudge button + button { border-left: 1px solid var(--line); }

.seg-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 120ms var(--ease);
}
.seg-row:last-child { border-bottom: 0; }
.seg-row:hover { background: oklch(0.975 0.006 82); }
.seg-row[aria-current="true"] { background: var(--amber-wash); }
.seg-row-i {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  height: 18px;
  display: grid;
  place-items: center;
}
.seg-row[aria-current="true"] .seg-row-i { border-color: var(--amber-deep); color: var(--amber-deep); }

/* ============================================================
   Branded reel composition
   Blurred fill behind, source video fitted per template, lockup on top.
   ============================================================ */

.rp {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--well);
  border-radius: 8px;
  overflow: hidden;
  container-type: inline-size;
}
.rp-11 { aspect-ratio: 1 / 1; }
.rp-45 { aspect-ratio: 4 / 5; }

/* the blurred backdrop is the same frame, scaled up and pushed down */
.rp-bg {
  position: absolute;
  inset: -8%;
  filter: blur(6cqw) brightness(0.52) saturate(1.15);
  transform: scale(1.18);
}
.rp-bg > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* window holding the fitted source */
.rp-win {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
  background: oklch(0.10 0.01 250);
}
/* height and offset are set inline from the same crop maths the renderer uses */
.rp-win > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-win.square { aspect-ratio: 1 / 1; }
.rp-win.fill   { top: 0; bottom: 0; }

.rp-logo {
  position: absolute;
  top: 4.5%; left: 5.5%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  color: oklch(0.995 0 0);
}
/* logo position is a property of the lockup style (rp-logo-tl/tr/tc on the
   .rp root), independent of the crop template */
.rp-logo-tr .rp-logo, .rp-logo-tr .rp-logo-img { left: auto; right: 7%; }
.rp-logo-tc .rp-logo, .rp-logo-tc .rp-logo-img { left: 50%; transform: translateX(-50%); }
.rp-logo-mark {
  width: 6.4cqw; height: 6.4cqw;
  border-radius: 50%;
  border: 0.75cqw solid oklch(0.995 0 0);
  position: relative;
  flex: none;
}
.rp-logo-mark::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: var(--logo-eye, oklch(0.45 0.17 255));
}
.rp-logo-text {
  font-weight: 700;
  font-size: 6.2cqw;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* the client's real logo, when one has been uploaded */
.rp-logo-img {
  position: absolute;
  top: 4.5%; left: 5.5%;
  z-index: 4;
  height: 7.5cqw;
  width: auto;
  object-fit: contain;
}
.pv-logo-img {
  height: 7.4cqw;
  width: auto;
  max-width: 60%;
  object-fit: contain;
}

.rp-lock {
  position: absolute;
  left: 5.5%; right: 7%;
  z-index: 4;
  text-align: left;
}
.rp-chip {
  display: inline-block;
  font-size: 3.1cqw;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: oklch(0.995 0 0);
  padding: 0.9cqw 2cqw;
  margin-bottom: 1.6cqw;
  line-height: 1;
}
/* per-line boxes, exactly like the reference: an inline span whose
   background clones onto every wrapped line */
.rp-title {
  white-space: pre-line;   /* typed line breaks survive, as in the render */
  font-size: 5.1cqw;
  /* line-height must exceed text height + 2× vertical padding or the cloned
     boxes stack on top of each other */
  line-height: 1.78;
  margin: 0;
  color: oklch(0.995 0 0);
}
.rp-title span {
  /* lighter than pure black, and warm-neutral so it sits on any footage */
  background: oklch(0.26 0.014 250 / 0.66);
  padding: 0.55cqw 1.4cqw;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Podkast / Reels & Shorts: opaque white box, dark text — matches the
   source Canva designs instead of the classic translucent dark box */
.rp-title.inverted span {
  background: oklch(0.995 0 0);
  color: oklch(0.1 0 0);
}
.rp-ad {
  position: absolute;
  left: 5.5%; right: 5.5%;
  z-index: 3;
  aspect-ratio: 16 / 9;
  border: 1px dashed oklch(1 0 0 / 0.35);
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 2.6cqw;
  letter-spacing: 0.08em;
  color: oklch(1 0 0 / 0.5);
}
.rp-ad.top { top: 5%; }
.rp-ad.bottom { bottom: 4.5%; }

/* outro tail marker on the preview */
.rp-outro {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  height: 3px;
  background: linear-gradient(to right, transparent, oklch(0.62 0.13 320));
}

/* ---------------- template picker ---------------- */

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}
.tpl {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-raise);
  padding: 5px;
  cursor: pointer;
  display: grid;
  gap: 5px;
  text-align: left;
  transition: border-color 150ms var(--ease);
}
.tpl:hover { border-color: var(--ink-3); }
.tpl[aria-pressed="true"] { border-color: var(--amber-deep); outline: 2px solid var(--amber); outline-offset: 1px; }
.tpl[disabled] { opacity: 0.4; cursor: not-allowed; }
.tpl-name { font-size: 11px; line-height: 1.3; color: var(--ink-2); }
.tpl[aria-pressed="true"] .tpl-name { color: var(--ink); font-weight: 500; }

/* schematic, not a live render: cheap and readable at 112px */
.tpl-mini {
  position: relative;
  aspect-ratio: 9 / 16;
  background: oklch(0.20 0.015 250);
  border-radius: 4px;
  overflow: hidden;
}
.tpl-mini i {
  position: absolute;
  left: 0; right: 0;
  background: repeating-linear-gradient(45deg, oklch(0.55 0.01 250) 0 3px, oklch(0.46 0.01 250) 3px 6px);
}
.tpl-mini u {
  position: absolute;
  left: 8%;
  height: 3.5%;
  background: var(--tpl-accent, oklch(0.45 0.17 255));
  width: 26%;
  border-radius: 1px;
}
.tpl-mini b {
  position: absolute;
  left: 8%; right: 12%;
  height: 3%;
  background: oklch(0.92 0.005 250 / 0.85);
  border-radius: 1px;
}
.tpl-mini s {
  position: absolute;
  border: 1px dashed oklch(1 0 0 / 0.45);
  border-radius: 2px;
  left: 8%; right: 8%;
  height: 11%;
}
.tpl-mini em {
  position: absolute;
  top: 4%; left: 7%;
  width: 8%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid oklch(1 0 0 / 0.9);
}
.tpl-mini em.logo-tr { left: auto; right: 7%; }
.tpl-mini em.logo-tc { left: 50%; transform: translateX(-50%); }

.fmt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--paper-sink);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
}

/* ---------------- reels list ---------------- */

.reel-row-title {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fits the viewport instead of scrolling sideways. The title column absorbs
   whatever is left after the fixed ones. */
.table-fit { table-layout: fixed; width: 100%; }
.table-fit td, .table-fit th { overflow: hidden; }
/* under table-layout:fixed, `auto` does NOT absorb the leftover space; 100%
   does, and the px columns below still win their share */
.table-fit .col-title  { width: 100%; }
.table-fit .col-tpl    { width: 15%; min-width: 92px; }
.table-fit .col-status { width: 96px; }
.table-fit .col-when   { width: 132px; }
.table-fit .col-act    { width: 132px; }
.table-fit .filecell-text { min-width: 0; }
.table-fit .t-meta.row { flex-wrap: nowrap; overflow: hidden; }

/* headers carry the classes, cells do not, so drop columns by position or the
   header and body stop lining up */
@media (max-width: 1100px) {
  .table-fit th:nth-child(2), .table-fit td:nth-child(2),
  .table-fit th:nth-child(4), .table-fit td:nth-child(4) { display: none; }
}
@media (max-width: 780px) {
  .table-fit th:nth-child(3), .table-fit td:nth-child(3) { display: none; }
}

/* ============================================================
   Outro
   ============================================================ */

.outro-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-raise);
}
.outro-thumb {
  width: 54px; height: 42px;
  border-radius: 4px;
  background: var(--well);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--well-ink-2);
}
.fade-strip {
  height: 20px;
  border-radius: 4px;
  background: linear-gradient(to right, oklch(0.18 0.01 62), oklch(0.52 0.13 320));
  position: relative;
  margin-top: 5px;
}
.fade-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(to right, oklch(0.18 0.01 62) 0%, transparent var(--fade, 30%));
}

/* ============================================================
   Fullscreen
   ============================================================ */

/* Any media surface can be blown up. The button only appears on hover so it
   does not clutter a dense list. */
.fs-host { position: relative; }
.fs-btn {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 4px;
  background: oklch(0.14 0.01 62 / 0.62);
  color: oklch(0.97 0 0);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms var(--ease), background 150ms var(--ease);
}
.fs-host:hover .fs-btn, .fs-btn:focus-visible { opacity: 1; }
.fs-btn:hover { background: oklch(0.14 0.01 62 / 0.85); }

/* the element itself while it is the fullscreen target */
:fullscreen { background: oklch(0.12 0.008 62); }
.fs-host:fullscreen { display: grid; place-items: center; }
.fs-host:fullscreen video,
.fs-host:fullscreen img { width: 100%; height: 100%; object-fit: contain; }
.fs-host:fullscreen .fs-btn { opacity: 1; }
/* a 9:16 composition must not stretch to a 16:9 screen */
.rp:fullscreen, .pv:fullscreen, .crop:fullscreen, .cropper:fullscreen {
  width: auto; height: 100vh; aspect-ratio: auto;
}

/* ============================================================
   Inline player — watch a finished reel without leaving the list
   ============================================================ */

.player-row > td { background: var(--paper-sink); padding: 0; }
.player {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border-top: 1px solid var(--line);
}
.player-stage {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--well);
  border-radius: 8px;
  overflow: hidden;
}
.player-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.player-meta { display: grid; gap: 10px; align-content: start; min-width: 0; }
.player-meta h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.player-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-size: 12px;
}
.player-facts dt { color: var(--ink-3); }
.player-facts dd { margin: 0; }

@media (max-width: 860px) {
  .player { grid-template-columns: minmax(0, 1fr); }
  .player-stage { max-width: 260px; }
}

/* ============================================================
   Sign in
   ============================================================ */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--paper);
}
.login-card {
  width: 100%;
  max-width: 348px;
  display: grid;
  gap: 18px;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.login-brand .brand-mark { width: 30px; height: 30px; border-radius: 7px; }
.login-brand .brand-name { font-size: 22px; }

.login-panel {
  background: var(--paper-raise);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  display: grid;
  gap: 14px;
}
.login-panel h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.login-err {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  background: oklch(0.96 0.025 28);
  border: 1px solid oklch(0.89 0.05 28);
  color: var(--err);
  font-size: 13px;
  line-height: 1.5;
}
.login-foot {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.6;
}
.login-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   Rack — the row system for lists of made things

   A table says "compare these cells". These pages hold finished video,
   and the question is "which one is this", answered by looking at it.
   So the media is sized to be recognised, the title carries the weight,
   and the column headers and vertical rules are gone: uppercase headers
   over ruled columns are the loudest spreadsheet signal an interface has.

   Still rows, still dense. Density was never the problem; sameness was.
   ============================================================ */

.pagehead {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 4px;
}
.pagehead h1 {
  font-family: var(--news);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.006em;
  margin: 0;
  line-height: 1.08;
}
.pagehead .pagecount {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  padding-bottom: 5px;
}
.pagehead .pageact {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
}
.pagelede {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 26px;
  max-width: 62ch;
}

.rack { border-top: 1px solid var(--line); }

.rack-row {
  display: grid;
  grid-template-columns: var(--rack-media, 46px) minmax(0, 1fr) 172px 96px 78px;
  gap: 20px;
  align-items: center;
  padding: 13px 10px 13px 0;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: background 160ms var(--ease);
}
.rack-row:hover { background: var(--paper-raise); }

/* An account with one client drops that column entirely rather than leaving a
   gap where it used to be. The templates are spelled out per case because a
   hidden grid child shifts every later item one column to the left. */
.rack-noclient .rack-row { grid-template-columns: var(--rack-media, 46px) minmax(0, 1fr) 96px 78px; }
.rack-noclient .rack-job { grid-template-columns: 44px minmax(0, 1fr) 92px; }

/* The poster is the figure of the page. At icon size it is decoration;
   at this size an editor recognises the shot without opening it. */
.poster {
  width: var(--rack-media, 46px);
  height: var(--rack-media-h, 82px);
  border-radius: 5px;
  background: var(--well);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px oklch(0.98 0 0 / 0.07);
}
.poster video,
.poster .frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.poster .poster-dur {
  position: absolute;
  left: 3px;
  bottom: 3px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--well-ink);
  background: oklch(0.13 0.008 62 / 0.72);
  padding: 1px 3px;
  border-radius: 2px;
  letter-spacing: -0.02em;
}

/* ---- 16:9 poster, used by the stitch history ----
   A merged video is landscape, so its poster is too. Same mechanism as the
   reel and clip posters: the file's own first frame, never a placeholder. */
.poster-wide {
  width: 76px;
  height: 43px;
  border-radius: 4px;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: block;
}
.poster-wide video { object-fit: cover; }
.poster-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--well-ink);
  background: oklch(0.15 0.01 55 / 0.30);
  opacity: 0;
  transition: opacity 140ms var(--ease);
}
.poster-wide:hover .poster-play,
.poster-wide:focus-visible .poster-play,
.stitch-run.is-open .poster-play { opacity: 1; }

.stitch-player {
  padding: 0 14px 14px;
  background: var(--paper-raise);
  border-bottom: 1px solid var(--line-soft);
}
.stitch-player video {
  width: 100%;
  max-height: 56vh;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: var(--well);
  display: block;
  object-fit: contain;
}

.rack-title {
  font-family: var(--news);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0 0 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rack-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-3);
}
/* Real rows carry a whole headline in this field, not the short category the
   demo data implied, so it is capped rather than allowed to wrap the line. */
.rack-sub .kat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.055em;
  max-width: 24ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rack-sub .sep { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-3); flex: none; }

/* Which client owns this is the one unrecoverable error in the product,
   so it gets a legible mark and the name, not a 12px square. */
.rack-client {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Not `.mark` — that name is taken by the absolutely positioned timeline
   mark, and inheriting its `position` dropped this out of the row. */
.rack-mark {
  width: 19px;
  height: 19px;
  border-radius: 3px;
  flex: none;
  display: grid;
  place-items: center;
  color: oklch(0.99 0 0);
  font-size: 8.5px;
  font-weight: 700;
}
.rack-client .nm {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rack-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.rack-status i { width: 5px; height: 5px; border-radius: 50%; flex: none; }

.rack-when {
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.42;
  letter-spacing: -0.02em;
  /* a full date is ten characters and must not break across three lines */
  white-space: nowrap;
}
.rack-when b { display: block; font-weight: 500; color: var(--ink-2); }

/* At rest a row is a picture and a headline. The controls arrive when the
   pointer does, so six rows are not thirty blue links. Keyboard users get
   them on focus-within, which is why this is not display:none. */
.rack-ops {
  position: absolute;
  right: 8px;
  top: 1px;
  bottom: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 28px;
  opacity: 0;
  pointer-events: none;
  /* Opaque, so what it covers is hidden cleanly instead of colliding with it.
     The strip is wider than the columns that fade out at narrow widths. */
  background: linear-gradient(90deg, transparent, var(--paper-raise) 26px);
  transition: opacity 140ms var(--ease);
}
.rack-row:hover .rack-ops,
.rack-row:focus-within .rack-ops { opacity: 1; pointer-events: auto; }
.rack-row:hover .rack-when,
.rack-row:hover .rack-status,
.rack-row:focus-within .rack-when,
.rack-row:focus-within .rack-status { opacity: 0; transition: opacity 140ms var(--ease); }

/* ---- job variant: one list, running work at the top of it ----
   Two panels where the first is usually an empty box taught nothing and cost
   a third of the screen. A running job is the same job a minute earlier, so
   it belongs in the same list, carrying a bar instead of an outcome. */
.rack-job {
  grid-template-columns: 44px minmax(0, 1fr) 128px 92px;
  gap: 16px;
  padding: 11px 10px 11px 0;
}
.poster-sq {
  width: 44px;
  height: 44px;
  border-radius: 4px;
}
.poster-sq video, .poster-sq .frame { object-fit: cover; }
/* A job whose output this page cannot point at gets its kind, not an invented
   frame. A fabricated thumbnail beside a real one devalues both. */
.rack-kind {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: var(--paper-sink);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.rack-progress {
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  margin: 7px 0 5px;
  max-width: 260px;
}
.rack-progress i {
  display: block;
  height: 100%;
  background: var(--amber);
  transition: width 300ms var(--ease);
}
.rack-progress.wait i {
  width: 100% !important;
  background: linear-gradient(90deg, var(--line), var(--amber), var(--line));
  background-size: 200% 100%;
  animation: rack-wait 1.5s linear infinite;
}
@keyframes rack-wait { from { background-position: 200% 0 } to { background-position: -200% 0 } }

.rack-out { font-size: 12px; color: var(--ink-2); }
.rack-out.err { color: var(--err); }

/* ---- filter bar ---- */
.filterbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--paper-raise);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
}
.fchip:hover { border-color: var(--ink-3); color: var(--ink); }
.fchip.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.fchip i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.fchip .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: -0.02em;
}
.fchip.on .n { color: oklch(0.76 0.02 74); }
.filtersearch { margin-left: auto; width: 220px; }

/* A section is a heading and a hairline. Not a card: white cards on grey is
   the house style of every tool in this category, including the one we are
   trying not to look like. */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 34px 0 2px;
}
.sec-head:first-child { margin-top: 0; }
.sec-head h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.008em;
  margin: 0;
}
.sec-head .n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.sec-head .aside { margin-left: auto; font-size: 12px; color: var(--ink-3); }

.rack-open { background: var(--paper-raise); }
.rack-panel {
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-raise);
  padding: 0 0 20px;
}

/* ============================================================
   Responsive — structural, not fluid
   ============================================================ */

@media (max-width: 1180px) {
  /* the timestamp is the first thing an editor can do without */
  .rack-row { grid-template-columns: var(--rack-media, 46px) minmax(0, 1fr) 150px 92px; }
  .rack-noclient .rack-row { grid-template-columns: var(--rack-media, 46px) minmax(0, 1fr) 92px; }
  .rack-noclient .rack-job { grid-template-columns: 44px minmax(0, 1fr) 92px; }
  .rack-when { display: none; }
  /* Narrow enough that the action strip reaches the client column. The name
     yields; the mark does not. Which client this belongs to is the one thing
     an editor must never have to guess. */
  .rack-row:hover .rack-client .nm,
  .rack-row:focus-within .rack-client .nm { opacity: 0; transition: opacity 140ms var(--ease); }
  .photo-layout { grid-template-columns: 268px minmax(0, 1fr); }
  .kit-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .kit-preview { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 260px)); }
  .dash, .reel-layout, .live-layout { grid-template-columns: minmax(0, 1fr); }
  .kit-preview { position: static; }
}

@media (max-width: 860px) {
  :root { --sidebar-w: 60px; }
  .brand-name, .brand-env, .nav-text, .nav-count, .sidebar-foot .meter-head, .sidebar-foot .meter-track { display: none; }
  .nav-label { display: none; }
  .nav-item { justify-content: center; }
  .user-chip { justify-content: center; }
  .user-chip > div:not(.avatar) { display: none; }
  /* no room at 60px wide; "Dil" in the account popover still reaches it */
  .sidebar-signout { display: none; }
  .tx-layout { grid-template-columns: minmax(0, 1fr); }
  .clipcard { grid-template-columns: minmax(0, 1fr); }
  .photo-layout { grid-template-columns: minmax(0, 1fr); }
  /* the client mark stays: it is the one thing that must never be guessed */
  .rack-row { grid-template-columns: var(--rack-media, 46px) minmax(0, 1fr) 40px; }
  .rack-noclient .rack-row,
  .rack-noclient .rack-job { grid-template-columns: var(--rack-media, 46px) minmax(0, 1fr); }
  .rack-client .nm, .rack-status span { display: none; }
  .pagehead h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}