/* Aditor design system — dark-first, orange accent, glassmorphic, SF Pro, minimalist.
   Anchored to aditor-ops/knowledge/style-guides/aditor-design-guidelines.md and the
   aditor-drive primitives (--hair, --radius, pill buttons, --font, iOS system colors).
   No purple/pink/blue gradients. */
:root {
  --bg: #0b0b0d; /* near-black canvas */
  --panel: rgba(28, 28, 32, 0.66); /* glassmorphic dark card — fill up so frames behind don't muddy text */
  --panel-2: rgba(255, 255, 255, 0.06); /* nested surface; a step lighter than canvas = lighten-to-elevate (HIG) */
  --ink: #f5f5f7; /* light text on dark */
  --ink2: #c7c7cc;
  --muted: #8e8e93; /* iOS secondary label (shared w/ drive) */
  --hair: rgba(255, 255, 255, 0.1); /* hairline on dark */
  --accent: #ff5b3a; /* Aditor brand orange (drive .brand-dot) */
  --accent-soft: rgba(255, 91, 58, 0.14);
  --blocker: #ff453a; /* iOS red (dark) */
  --polish: #ffd60a; /* iOS yellow — distinct from brand orange */
  --ok: #30d158; /* iOS green (dark) */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter,
    system-ui, sans-serif;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  min-height: 100vh;
  background: var(--bg);
}
/* subtle single-hue orange bloom (guideline: keep gradients subtle if used at all) */
.glass-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 600px at 14% -12%, rgba(255, 91, 58, 0.1), transparent 58%),
    radial-gradient(900px 620px at 100% 0, rgba(255, 255, 255, 0.04), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
header {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 15px 24px;
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
  background: rgba(18, 18, 22, 0.6);
  border-bottom: 1px solid var(--hair);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand {
  font-weight: 680;
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand::before {
  /* Aditor brand-dot motif (drive .brand-dot) — small orange dot, not a chunky chip */
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.muted {
  color: var(--muted);
}
.frosted {
  background: var(--panel);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
  border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: var(--shadow);
  margin: 22px auto;
  padding: 26px;
  max-width: 980px;
}
h1#headline {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -0.02em;
}
/* file picker — iOS pill */
.filebtn {
  display: inline-block;
  margin-top: 16px;
  cursor: pointer;
}
.filebtn input {
  display: none;
}
.filebtn span {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  color: var(--ink);
  font-weight: 600;
  transition: background 0.15s, transform 0.12s;
}
.filebtn span:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.inputs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.link-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--fg, #fff);
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.link-input::placeholder { color: var(--muted, rgba(255,255,255,0.4)); }
.link-input:focus { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.09); }
/* inviting drop-zone instead of a bare button (theme-aware via tokens) */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  padding: 32px 20px;
  border: 1.5px dashed var(--hair);
  border-radius: 16px;
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out, ease), background 160ms var(--ease-out, ease),
    transform 120ms var(--ease-out, ease);
}
.dropzone input {
  display: none;
}
.dz-icon {
  width: 30px;
  height: 30px;
  color: var(--accent);
}
.dz-title {
  font-weight: 620;
  letter-spacing: -0.01em;
}
.dz-title b {
  color: var(--accent);
  font-weight: 700;
}
.dz-hint {
  font-size: 12.5px;
  color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .dropzone:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--hair));
  }
}
.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.orline {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}
.orline::before,
.orline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
}
.linkrow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 220px;
}
.linkrow input {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 9px 13px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.linkrow input::placeholder {
  color: var(--muted);
}
.linkrow input:focus {
  outline: none;
  border-color: rgba(255, 91, 58, 0.5);
}
.linkgo {
  flex: 0 0 auto;
  border: 0;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.14s var(--ease-out, ease);
}
.linkgo:active {
  transform: scale(0.97);
}
#status {
  margin-top: 12px;
  min-height: 20px;
  color: var(--muted);
}
/* safe-zone overlay — orange bars on top/bottom/sides of every preview */
.safe-zone-wrap {
  position: relative;
  display: block;
  line-height: 0; /* collapse whitespace gap under media */
}
.safe-zone-wrap .probe {
  width: 100%;
  height: 100%;
  max-height: none; /* wrapper controls height via aspect-ratio */
  object-fit: fill;
}
.sz-bar {
  position: absolute;
  pointer-events: none;
  background: rgba(255, 91, 58, 0.28);
  border-style: dashed;
  border-color: rgba(255, 91, 58, 0.7);
  border-width: 0;
  z-index: 2;
}
.sz-top    { top: 0;   left: 0; right: 0;  height: 14%; border-bottom-width: 1px; }
.sz-bottom { bottom: 0; left: 0; right: 0; height: 20%; border-top-width: 1px; }
.sz-left   { top: 0; bottom: 0; left: 0;   width: 8%;  border-right-width: 1px; }
.sz-right  { top: 0; bottom: 0; right: 0;  width: 8%;  border-left-width: 1px; }
.video-time {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 3;
  letter-spacing: 0.02em;
}

/* probe player (click-to-seek target) — sits above the findings, full width */
.probe {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 0;
  border: none;
  background: #000;
}
.probe[hidden] {
  display: none; /* respect the hidden attr; the player only appears after analysis */
}
/* status header + tally */
.status-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.badge {
  padding: 5px 13px;
  border-radius: 980px;
  font-weight: 650;
  font-size: 13px;
}
.badge.blocked {
  background: rgba(255, 69, 58, 0.16);
  color: var(--blocker);
}
.badge.clean {
  background: rgba(48, 209, 88, 0.16);
  color: var(--ok);
}
.tally {
  display: flex;
  gap: 18px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 20px;
}
.tally b {
  color: var(--ink);
  font-weight: 650;
}
.briefing-loaded {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.7;
  cursor: default;
}
/* bento grid of finding tiles; the open tile spans the full width (single-open accordion) */
.bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
}
.bento .finding[open] {
  grid-column: 1 / -1;
}
.clean-note {
  grid-column: 1 / -1;
  padding: 6px 2px;
}
@media (max-width: 720px) {
  .bento {
    grid-template-columns: 1fr;
  }
}
.finding {
  position: relative;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--panel-2);
  cursor: pointer;
  transition: background 0.12s;
}
.finding:hover {
  background: rgba(255, 255, 255, 0.07);
}
/* compact summary: ONE scannable line — severity icon + short title + count + ts + chevron */
.finding > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  outline: none;
}
.finding > summary::-webkit-details-marker {
  display: none;
}
.sev {
  display: inline-flex;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}
.sev svg {
  width: 100%;
  height: 100%;
}
.sev.blocker {
  color: var(--blocker);
}
.sev.polish {
  color: var(--polish);
}
.f-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.count {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink2);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 1px 8px;
}
summary .ts {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chev {
  color: var(--muted);
  font-size: 16px;
  transition: transform 0.18s var(--ease-out, ease);
}
.finding[open] > summary .chev {
  transform: rotate(90deg);
}
/* body: detail revealed on expand */
.f-body {
  padding-top: 12px;
}
.f-what {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.45;
}
.f-fix {
  color: var(--ink2);
  font-size: 13px;
  margin-top: 5px;
}
.why-line {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 10px;
}
.dismiss {
  margin-top: 12px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--muted);
  border-radius: 9px;
  padding: 5px 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dismiss:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink2);
}
.finding.dismissed {
  opacity: 0.5;
}
.finding.dismissed .f-title {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
}
.finding.dismissed .f-body {
  display: none;
}
/* extra timestamps for grouped repeats */
.more-ts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.seekchip {
  border: 1px solid var(--hair);
  background: var(--panel-2);
  color: var(--ink2);
  border-radius: 8px;
  padding: 3px 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.seekchip:hover {
  background: rgba(255, 255, 255, 0.08);
}
/* must-fix reads as an error: red gradient OUTLINE (1px ring) + very subtle glow.
   Masked pseudo-element paints only the ring, so the card interior stays translucent
   (no red wash) and the rounded corners are respected. */
.finding.blocker {
  border-color: transparent;
  box-shadow: 0 8px 30px rgba(255, 69, 58, 0.12);
}
.finding.blocker::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 69, 58, 0.9), rgba(255, 69, 58, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.finding.blocker:hover {
  box-shadow: 0 10px 38px rgba(255, 69, 58, 0.2);
}
/* inspo-copycat hero: aligned-flip comparison + confidence chip with threshold + caveat */
.match {
  margin-top: 14px;
}
.match-compare[data-mode="2up"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.match-compare figure {
  margin: 0;
}
.match-compare img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.06);
  display: block;
}
.inspo-missing {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px dashed var(--hair);
  background: rgba(255,255,255,0.03);
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 12px;
}
.match-compare figcaption {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 5px;
}
/* flip mode: one aligned viewport, crossfade your-frame ↔ inspo on click (TinEye) */
.match-compare[data-mode="flip"] {
  position: relative;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  cursor: pointer;
}
.match-compare[data-mode="flip"] figure {
  position: absolute;
  inset: 0;
  transition: opacity 0.25s ease;
}
.match-compare[data-mode="flip"] img {
  width: 100%;
  height: 100%;
}
.match-compare[data-mode="flip"] figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  margin: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 3px 9px;
  border-radius: 7px;
}
.match-compare[data-mode="flip"] .m-inspo {
  opacity: 0;
}
.match-compare[data-mode="flip"].show-inspo figure {
  opacity: 0;
}
.match-compare[data-mode="flip"].show-inspo .m-inspo {
  opacity: 1;
}
.match-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.conf-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-weight: 760;
  font-size: 20px;
  color: var(--blocker);
  font-variant-numeric: tabular-nums;
}
.conf-chip small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.flip {
  margin-left: auto;
  border: 1px solid var(--hair);
  background: var(--panel-2);
  color: var(--ink2);
  border-radius: 10px;
  padding: 5px 13px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.flip:hover {
  background: rgba(255, 255, 255, 0.08);
}
/* confidence as a decision rule: fill = match %, tick = threshold that flagged it (Argos) */
.conf-band {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  margin: 11px 0 7px;
}
.conf-band i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct);
  border-radius: 999px;
  background: var(--blocker);
}
.conf-band u {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--thr);
  width: 2px;
  border-radius: 2px;
  background: var(--ink2);
}
.match-note {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.5;
}
/* success screen after clean delivery */
.success-screen {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 28px 16px;
}
.success-emoji-row { font-size: 32px; line-height: 1; letter-spacing: 4px; }
.success-title { font-size: 20px; font-weight: 650; color: var(--fg); margin: 0; }
.success-sub { font-size: 14px; color: var(--muted); margin: 0; max-width: 360px; line-height: 1.6; }
.success-link-row {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px;
  background: rgba(255,255,255,0.06); border-radius: 8px; padding: 8px 12px;
}
.success-link {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--muted);
}
.success-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.success-trello {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 12px; font-weight: 650; font-size: 14px;
  background: #0052CC; color: #fff; text-decoration: none;
  transition: transform 0.12s, opacity 0.15s;
}
.success-trello:hover { transform: translateY(-1px); opacity: 0.9; }
.success-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.success-modal { width: 420px; max-width: 94vw; background: rgba(26,26,30,0.97);
  border: 1px solid var(--hair); border-radius: 24px; padding: 36px 28px 28px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.success-close { margin-top: 8px; padding: 10px 32px; border-radius: 12px; border: 1px solid var(--hair);
  background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.success-close:hover { background: rgba(255,255,255,0.06); }

/* submit footer */
.footer {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.progress-banner {
  text-align: center; font-size: 13px; color: var(--muted);
  padding: 6px 1rem 2px; margin: 0; letter-spacing: 0.01em;
}
.batch-submit {
  display: flex;
  justify-content: center;
  padding: 12px 1rem;
}
.batch-submit button.submit {
  width: 100%;
  max-width: 720px;
}
.batch-done {
  font-size: 18px;
  font-weight: 650;
  color: var(--ok);
  margin: 0;
  padding: 20px 0;
}

button.submit {
  padding: 11px 22px;
  border-radius: 12px;
  border: 0;
  font: inherit;
  font-weight: 650;
  color: #fff;
  background: var(--ok); /* clean → green "go" */
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 3px 14px rgba(48, 209, 88, 0.3);
}
button.submit:hover:not([disabled]) {
  transform: translateY(-1px);
}
button.submit[disabled] {
  background: rgba(255, 255, 255, 0.1);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}
#submit-msg {
  font-size: 13px;
}
.embed-open {
  position: fixed; top: 10px; right: 14px; z-index: 50;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em;
  color: #ffcbb8; text-decoration: none; white-space: nowrap;
  background: rgba(24,14,11,0.9); border: 1px solid rgba(255,91,58,0.4);
  padding: 5px 11px; border-radius: 999px; backdrop-filter: blur(6px);
}
.embed-open:hover { color: #fff; border-color: rgba(255,91,58,0.75); }

/* embed: hide chrome */
body.embed header {
  display: none;
}
body.embed .frosted {
  margin-top: 10px;
}

/* ── EMBEDDED IN THE HUB (hub.aditor.ai opens this in a modal with ?embed=1) ──────────────────
   In the modal everything read oversized — a landscape video filled the whole panel and pushed the
   comments off-screen entirely. This is a compact theme for that context ONLY: the standalone tool
   at review.aditor.ai is untouched. Video is hard-capped (by height AND width, so a 16:9 clip can't
   dominate), and the score bar / comments are scaled down to dashboard size. */
/* Same shape as the standalone dashboard — video LEFT, comments RIGHT — just scaled down. It only
   collapses to a stack when the modal is genuinely too narrow for two columns (container query
   below). */
body.embed .upload-card {
  grid-template-columns: 320px 1fr;
  grid-template-areas:
    "header header"
    "score score"
    "preview report"
    "preview msg";
}
body.embed .card-preview { position: sticky; top: 8px; height: auto; padding: 6px 12px; align-items: flex-start; }
body.embed .card-preview .safe-zone-wrap,
body.embed .card-preview video,
body.embed .card-preview img {
  width: auto; height: auto; max-height: 420px; max-width: 100%; margin: 0 auto;
}
body.embed .card-report { max-height: none; overflow: visible; }
body.embed .card-header { padding: 8px 12px; }
body.embed .card-name { font-size: 0.82rem; }
/* score bar */
body.embed .cs-panel.cs-bar { padding: 8px 10px; gap: 8px; }
body.embed .cs-ring { width: 38px; height: 38px; font-size: 0.85rem; border-width: 2px; }
body.embed .cs-overall-h { font-size: 0.85rem; }
body.embed .cs-overall-sub { font-size: 0.68rem; }
body.embed .cs-dims.cs-wrap { gap: 4px; }
body.embed .cs-dim { padding: 4px 7px; min-width: 56px; border-radius: 8px; }
body.embed .cs-dim-name { font-size: 0.58rem; }
body.embed .cs-dim-score { font-size: 0.82rem; }
body.embed .cs-dim-score small { font-size: 0.52rem; }
body.embed .cs-dim-trend { font-size: 0.54rem; }
/* comments */
body.embed .fb-title { font-size: 0.86rem; margin: 10px 0 6px; }
body.embed .fb-sec-label { font-size: 0.68rem; }
body.embed .fb-item { padding: 7px 9px; gap: 8px; margin-bottom: 6px; border-radius: 9px; }
body.embed .fb-thumb { width: 34px; height: 48px; font-size: 0.55rem; }
body.embed .fb-line { font-size: 0.78rem; line-height: 1.42; }
body.embed .fb-ts { font-size: 0.7rem; }

/* ----- Motion (emil-design-eng): purposeful, <300ms UI, custom ease-out, reduced-motion-safe.
   Report/cards are seen per-upload (occasional → entrance warranted); only transform/opacity
   animate; the match band reveals crossing the threshold. ----- */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.99); } /* never scale(0) — starts visible */
  to { opacity: 1; transform: none; }
}
@keyframes bandFill {
  from { width: 0; }
  to { width: var(--pct); }
}
@keyframes fadeOnly {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* report entrance: top sections rise, then cards stagger within each column */
.status-bar { animation: riseIn 260ms var(--ease-out) both; }
.tally { animation: riseIn 260ms var(--ease-out) 40ms both; }
.footer { animation: riseIn 260ms var(--ease-out) 220ms both; }
.bento .finding { animation: cardIn 300ms var(--ease-out) both; }
.bento .finding:nth-child(2) { animation-delay: 60ms; }
.bento .finding:nth-child(3) { animation-delay: 100ms; }
.bento .finding:nth-child(4) { animation-delay: 140ms; }
.bento .finding:nth-child(n + 5) { animation-delay: 180ms; }
/* the confidence fill grows past the threshold tick (explanatory; longer reveal is OK here) */
.conf-band i { animation: bandFill 650ms var(--ease-out) 240ms both; }
/* press feedback — every pressable scales slightly */
.filebtn span,
.dismiss,
.flip,
.seekchip {
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out),
    transform 140ms var(--ease-out);
}
.submit {
  transition: transform 140ms var(--ease-out), box-shadow 200ms var(--ease-out), opacity 200ms;
}
.finding {
  transition: background 150ms var(--ease-out), opacity 200ms var(--ease-out);
}
.filebtn span:active,
.dismiss:active,
.flip:active,
.seekchip:active,
.submit:active:not([disabled]) {
  transform: scale(0.97);
}
/* flip crossfade — blur masks the swap so it reads as one transform, not two images */
.match-compare[data-mode="flip"] figure {
  transition: opacity 280ms var(--ease-out), filter 280ms var(--ease-out);
}
.match-compare[data-mode="flip"] .m-inspo {
  filter: blur(5px);
}
.match-compare[data-mode="flip"].show-inspo figure:not(.m-inspo) {
  filter: blur(5px);
}
.match-compare[data-mode="flip"].show-inspo .m-inspo {
  filter: none;
}
/* hover lift only on real pointers; default (touch) has no lift */
.submit:hover:not([disabled]) {
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .submit:hover:not([disabled]) {
    transform: translateY(-1px);
  }
}
/* respect reduced motion: keep fades for comprehension, drop movement/blur/scale */
@media (prefers-reduced-motion: reduce) {
  .status-bar,
  .tally,
  .footer,
  .bento .finding {
    animation: fadeOnly 200ms var(--ease-out) both;
  }
  .conf-band i,
  .match-compare[data-mode="flip"] figure {
    animation: none;
  }
  .match-compare[data-mode="flip"] .m-inspo,
  .match-compare[data-mode="flip"].show-inspo figure:not(.m-inspo) {
    filter: none;
  }
  .filebtn span:active,
  .dismiss:active,
  .flip:active,
  .seekchip:active,
  .submit:active:not([disabled]) {
    transform: none;
  }
}

/* ===== White-label theming — per-project branding (data-theme + --accent + logo).
   The page is fully tokenized, so a brand re-skins by overriding :root tokens.
   JS sets body[data-theme] + inline --accent + the logo from project.branding.
   Freiheit Media = light + their blue. Unbranded stays Aditor dark/orange. ===== */
.brand-logo { height: 22px; width: auto; display: block; }
.brand.has-logo::before { display: none; } /* the logo replaces the orange brand-dot */

body[data-theme="light"] {
  --bg: #f5f7fb; /* bright canvas */
  --panel: #ffffff; /* solid white card — drop the glass wash on light */
  --panel-2: #eef1f7; /* nested surface */
  --ink: #111722; /* dark charcoal text */
  --ink2: #3a4452;
  --muted: #687081; /* AA secondary on white */
  --hair: rgba(17, 23, 34, 0.1);
  --accent: #2f6bff; /* Freiheit blue (JS overrides inline per brand) */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --blocker: #e11d2a; /* deeper red — readable on white */
  --polish: #b45309; /* amber — replaces bright yellow that vanishes on white */
  --ok: #16a34a; /* deeper green — white button label passes AA-large */
  --shadow: 0 1px 2px rgba(17, 23, 34, 0.06), 0 14px 34px rgba(17, 23, 34, 0.1);
}
body[data-theme="light"] header {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: var(--hair);
}
body[data-theme="light"] .glass-bg {
  background:
    radial-gradient(1100px 600px at 14% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    radial-gradient(900px 620px at 100% 0, rgba(17, 23, 34, 0.035), transparent 55%),
    var(--bg);
}
/* re-point the dark-mode white-alpha hovers/fills to dark-alpha so they read on white */
body[data-theme="light"] .filebtn span:hover,
body[data-theme="light"] .finding:hover,
body[data-theme="light"] .seekchip:hover,
body[data-theme="light"] .flip:hover,
body[data-theme="light"] .dismiss:hover {
  background: rgba(17, 23, 34, 0.05);
}
body[data-theme="light"] .count { background: rgba(17, 23, 34, 0.06); }
body[data-theme="light"] .conf-band { background: rgba(17, 23, 34, 0.1); }
body[data-theme="light"] .match-compare img { background: rgba(17, 23, 34, 0.04); }
body[data-theme="light"] .linkrow input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
body[data-theme="light"] .probe { box-shadow: 0 10px 30px rgba(17, 23, 34, 0.18); }

/* ===== Juicy + secure primary CTAs — same-hue gradient depth, glossy top edge,
   accent glow, spring press. Submit gets a lock (the secure delivery action). ===== */
.linkgo {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 84%, #fff), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 4px 14px color-mix(in srgb, var(--accent) 42%, transparent);
  transition: transform 0.14s var(--ease-out, ease), box-shadow 0.18s var(--ease-out, ease),
    filter 0.14s var(--ease-out, ease);
}
@media (hover: hover) and (pointer: fine) {
  .linkgo:hover {
    transform: translateY(-1px);
    filter: saturate(1.08) brightness(1.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 7px 20px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}
.linkgo:active {
  transform: translateY(0) scale(0.95);
}

button.submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 86%, #fff), var(--ok));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 20px color-mix(in srgb, var(--ok) 40%, transparent);
}
button.submit::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  button.submit:hover:not([disabled]) {
    transform: translateY(-1px);
    filter: saturate(1.06) brightness(1.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
      0 9px 26px color-mix(in srgb, var(--ok) 52%, transparent);
  }
}
button.submit:active:not([disabled]) {
  transform: translateY(0) scale(0.98);
}
button.submit[disabled] {
  background: var(--panel-2);
  box-shadow: none;
}
button.submit[disabled]::before {
  opacity: 0.4;
}

/* ── Multi-video queue cards ── */
#queue {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  max-width: 1240px;
  margin: 0 auto;
}
.upload-card {
  background: var(--panel-1, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px;
  overflow: hidden;
  /* Video left, feedback right (spec D34). Header spans the top; on wide screens the
     preview column is fixed-width and stays put while the report column scrolls. */
  display: grid;
  grid-template-columns: minmax(440px, 600px) 1fr;
  grid-template-areas:
    "header header"
    "score score"
    "preview report"
    "preview msg";
  align-items: start;
}
.card-header { grid-area: header; }
.card-score { grid-area: score; padding: 0 1rem; }
.card-score:empty { display: none; }
/* The video fills a tall fixed height on the left and STAYS put (sticky); the comments scroll
   INSIDE their own column on the right — so hovering the feedback scrolls the feedback, not the
   whole page, and the whole card fits ~one screen. --card-h = viewport minus the header/score bar. */
.upload-card { --card-h: clamp(440px, calc(100vh - 190px), 940px); }
.card-preview {
  grid-area: preview; height: var(--card-h); padding: 1rem; position: sticky; top: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.card-preview .safe-zone-wrap, .card-preview video, .card-preview img {
  height: 100%; width: auto; max-width: 100%; display: block; border-radius: 8px;
}
.card-report { grid-area: report; max-height: var(--card-h); overflow-y: auto; min-height: 0; }
.card-msg { grid-area: msg; }
@media (max-width: 720px) {
  .upload-card { grid-template-columns: 1fr; grid-template-areas: "header" "score" "preview" "report" "msg"; }
  /* On mobile everything stacks and the page scrolls normally — no fixed height / inner scroll. */
  .card-preview { position: static; height: auto; }
  .card-preview .safe-zone-wrap, .card-preview video, .card-preview img { width: 100%; height: auto; }
  .card-report { max-height: none; overflow: visible; }
}
/* EMBEDDED (hub.aditor.ai opens this tool in a modal iframe): the viewport breakpoint above never
   fires there — the iframe is wide but the CARD is narrow, so the 440px-min preview column starved
   the feedback column to ~150px and every note wrapped one word per line. Container queries stack on
   the CARD's own width, so it lays out correctly at any embed size. */
#queue { container-type: inline-size; }
@container (max-width: 940px) {
  .upload-card,
  body.embed .upload-card { grid-template-columns: 1fr; grid-template-areas: "header" "score" "preview" "report" "msg"; }
  body.embed .card-preview { position: static; }
  .card-preview { position: static; height: auto; padding: 0.5rem 1rem; }
  /* In a modal the card must show the VIDEO AND the first comments without scrolling, so everything
     tightens up: a shorter video, a compact score bar, and smaller dimension tiles. */
  .card-preview .safe-zone-wrap, .card-preview video, .card-preview img {
    width: auto; height: auto; max-height: 38vh; max-width: 100%; margin: 0 auto;
  }
  .card-report { max-height: none; overflow: visible; }
  .cs-panel.cs-bar { padding: 10px 12px; gap: 10px; }
  .cs-ring { width: 44px; height: 44px; font-size: 0.95rem; }
  .cs-overall-h { font-size: 0.92rem; }
  .cs-overall-sub { font-size: 0.72rem; }
  .cs-dims.cs-wrap { gap: 5px; flex: 1 1 100%; }
  .cs-dim { padding: 5px 8px; min-width: 62px; }
  .cs-dim-name { font-size: 0.62rem; }
  .cs-dim-score { font-size: 0.95rem; }
  .cs-dim-score small { font-size: 0.58rem; }
  .fb-item { padding: 9px 11px; gap: 9px; }
  .fb-thumb { width: 40px; height: 58px; }
  .fb-line { font-size: 0.86rem; line-height: 1.45; }
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  gap: 1rem;
}
.card-name {
  font-size: 0.875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-status {
  font-size: 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.card-report {
  padding: 0 1rem;
}
.card-msg {
  padding: 0.5rem 1rem 0.75rem;
  margin: 0;
}

/* ── Processing state: unmistakable "we're on it" while the check runs ── */
.card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.upload-card.processing {
  position: relative;
  border-color: var(--accent-soft);
}
/* indeterminate accent sweep across the top edge — constant motion => linear */
.upload-card.processing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: cardScan 1.1s linear infinite;
  z-index: 1;
}
@keyframes cardScan {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}
.upload-card.processing .card-status {
  color: var(--accent);
}
.upload-card.processing .card-status::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite; /* fast spinner => feels faster (Emil) */
  flex-shrink: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .upload-card.processing::before { animation: none; width: 100%; background: var(--accent-soft); }
  .upload-card.processing .card-status::before { animation: none; border-top-color: var(--accent-soft); }
}
/* "check another" — small pill so the uploader can return without burying submit */
.check-another {
  display: block;
  margin: 0.75rem auto 2rem;
  padding: 0.5rem 1.1rem;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--ink2);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .check-another:hover { color: var(--ink); border-color: var(--ink2); }
}
.check-another:active { transform: scale(0.97); }

/* ── Dispute form ── */
.dispute-btn {
  background: none;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  border-radius: 6px;
  color: var(--muted, #888);
  cursor: pointer;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.3rem 0.6rem;
}
.dispute-btn:hover { color: var(--fg, #fff); border-color: var(--fg, #fff); }
.dispute-form { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.dispute-note {
  background: var(--panel-2, rgba(255,255,255,0.05));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 6px;
  color: inherit;
  font-size: 0.85rem;
  padding: 0.5rem;
  resize: vertical;
  width: 100%;
}
.dispute-actions { display: flex; gap: 0.5rem; }
.appeal-frames { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; margin: 8px 0; }
.appeal-frame { height: 180px; width: auto; border-radius: 6px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--border, rgba(255,255,255,0.1)); cursor: pointer; }
.appeal-frame:hover { opacity: 0.85; }
.appeal-finding { font-size: 13px; color: var(--text, #c0c5d0); font-style: italic; margin: 6px 0 4px; }
.appeal-note { font-size: 12px; color: var(--muted, #6e7488); margin-bottom: 4px; }
.appeal-links { display: flex; gap: 12px; font-size: 12px; margin: 6px 0; }
.appeal-resolved { font-size: 13px; margin-top: 8px; }
.appeal-resolved.approved { color: var(--ok, #34d399); }
.appeal-resolved.rejected { color: var(--err, #ff5b3a); }
.reject-wrap textarea { width: 100%; box-sizing: border-box; }

/* ── Overview split columns ── */
.ov-flagged-title { color: var(--err, #ff5b3a); }
.ov-clean-title { color: var(--ok, #34d399); }
.ov-count { font-size: 0.8rem; font-weight: 400; opacity: 0.7; }

/* ── Scorecard table ── */
.sc-scroll { overflow-x: auto; border-radius: 14px; border: 1px solid var(--hair, rgba(255,255,255,0.07)); }
.sc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sc-table thead { background: var(--panel-2, rgba(255,255,255,0.04)); }
.sc-table th { padding: 10px 16px; text-align: center; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; color: var(--ink2); white-space: nowrap; border-bottom: 1px solid var(--hair, rgba(255,255,255,0.07)); }
.sc-table th:first-child, .sc-table td:first-child { text-align: left; }
.sc-table td { padding: 11px 16px; text-align: center; border-bottom: 1px solid var(--hair, rgba(255,255,255,0.04)); color: var(--ink); white-space: nowrap; }
.sc-table tr:last-child td { border-bottom: 0; }
.sc-table td.sc-label { font-weight: 600; color: var(--ink2); min-width: 180px; }
.sc-table td.sc-total { font-weight: 700; background: var(--panel-2, rgba(255,255,255,0.04)); border-left: 1px solid var(--hair, rgba(255,255,255,0.07)); }
.sc-table td.good { color: #34d399; }
.sc-table td.ok { color: #fbbf24; }
.sc-table td.bad { color: #ff5b3a; }
.sc-section-head td { background: var(--panel-2, rgba(255,255,255,0.04)); padding: 6px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink2); border-bottom: 1px solid var(--hair, rgba(255,255,255,0.07)); }

/* ── Scorecard filter bar ── */
.sc-filterbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.sc-fb-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-fb-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.sc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sc-on-track  { background: rgba(29,185,84,0.12); border-color: rgba(29,185,84,0.3); color: #1db954; }
.sc-on-track  .sc-dot { background: #1db954; }
.sc-at-risk   { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.3); color: #fbbf24; }
.sc-at-risk   .sc-dot { background: #fbbf24; }
.sc-off-track { background: rgba(255,91,58,0.12); border-color: rgba(255,91,58,0.3); color: #ff5b3a; }
.sc-off-track .sc-dot { background: #ff5b3a; }
.sc-refresh { font-size: 15px; padding: 5px 9px; }

/* ── Pre-delivery checklist modal ── */
.checklist-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.checklist-backdrop[hidden] { display: none; }
.checklist-card { width: 440px; max-width: 94vw; max-height: 80vh; overflow-y: auto;
  background: rgba(26,26,30,0.96); border: 1px solid var(--hair); border-radius: 20px;
  padding: 24px; box-shadow: 0 40px 90px rgba(0,0,0,0.65); display: flex; flex-direction: column; gap: 12px; }
.checklist-title { font-size: 18px; font-weight: 700; margin: 0; }
.checklist-sub { margin: 0; font-size: 13px; }
.checklist-items { display: flex; flex-direction: column; gap: 10px; margin: 4px 0; }
.checklist-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--hair); }
.checklist-item input[type=checkbox] { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }
.checklist-item:has(input:checked) { border-color: rgba(255,91,58,0.4); background: rgba(255,91,58,0.06); }
.checklist-label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 500; }
.checklist-note { font-size: 12px; font-weight: 400; margin-top: 2px; }
.checklist-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.btn-ghost {
  padding: 9px 18px; border-radius: 10px; border: 1px solid var(--hair);
  background: transparent; color: var(--muted); font: inherit; font-size: 14px;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { border-color: var(--fg, #fff); color: var(--fg, #fff); }
.btn-primary {
  padding: 9px 18px; border-radius: 10px; border: 0;
  background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s, transform 0.12s;
}
.btn-primary:hover:not([disabled]) { opacity: 0.88; transform: translateY(-1px); }
.btn-primary[disabled] { background: rgba(255,255,255,0.1); color: var(--muted); cursor: not-allowed; }

/* ── Frame.io folder picker ── */
.folder-picker { margin-top: 20px; padding: 20px; border-radius: 16px; display: flex; flex-direction: column; gap: 14px; }
.folder-picker-title { font-size: 15px; font-weight: 700; margin: 0; }
.folder-picker-sub { font-size: 13px; margin: 0; }
.folder-setall { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 12px; flex-wrap: wrap; }
.setall-btn { padding: 4px 11px; border-radius: 8px; border: 1px solid var(--hair, rgba(255,255,255,0.14)); background: transparent; color: var(--ink2, #d0d0d3); font-size: 12px; cursor: pointer; }
.setall-btn:hover { border-color: var(--accent, #ff5b3a); color: var(--ink, #f5f5f7); }
.folder-picker-list { display: flex; flex-direction: column; gap: 8px; }
.folder-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 12px; background: var(--panel-2, rgba(255,255,255,0.04)); border: 1px solid var(--hair, rgba(255,255,255,0.08)); }
.folder-name { font-size: 14px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-type-toggle { display: flex; gap: 4px; flex-shrink: 0; }
.ftog { padding: 5px 12px; border-radius: 8px; border: 1px solid var(--hair, rgba(255,255,255,0.1));
  background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; }
.ftog.active.ftog-ad { background: var(--accent, #ff5b3a); border-color: var(--accent, #ff5b3a); color: #fff; }
.ftog.active.ftog-broll { background: rgba(99,179,120,0.2); border-color: #63b378; color: #63b378; }
.ftog.active.ftog-static { background: rgba(96,165,250,0.2); border-color: #60a5fa; color: #7db8ff; }
.ftog:not(.active):hover { border-color: var(--fg, #fff); color: var(--fg, #fff); }
.folder-load-btn { align-self: flex-end; }

/* ── Session restore ── */
.session-banner { margin-bottom: 12px; padding: 16px 20px; border-radius: 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid rgba(255,255,255,0.08); }
.session-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.session-title { font-size: 15px; font-weight: 700; }
.session-meta { font-size: 13px; }
.session-sub { font-size: 13px; margin: 0; line-height: 1.6; }
.session-reset-btn, .btn-ghost-small { background: none; border: 1px solid var(--hair, rgba(255,255,255,0.12)); border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.session-reset-btn:hover, .btn-ghost-small:hover { border-color: var(--fg, #fff); color: var(--fg, #fff); }
.card-restored-actions { padding: 4px 0 2px; }
.approved-status { color: #63b378; font-weight: 600; }
.recheck-btn { font-size: 12px; }
.replacement-upload { display: inline-block; margin-top: 8px; cursor: pointer; }
.replacement-btn { display: inline-block; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }

/* ── Craft audit (advisory Gemini pass) ─────────────────────────────────── */
.craft-audit {
  margin-top: 16px;
  padding: 16px;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
}
.craft-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.craft-title { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.craft-badge { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.craft-loading { color: var(--muted); font-size: 13px; }
.craft-overall { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.craft-ring {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums;
  border: 3px solid var(--hair);
}
.craft-ring.good { border-color: var(--ok); }
.craft-ring.mid { border-color: var(--polish); }
.craft-ring.low { border-color: var(--blocker); }
.craft-overall-note { font-size: 13px; color: var(--ink2); }
.craft-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.craft-dim { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 12px; }
.craft-dim-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink2); }
.craft-score { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.craft-score.good { color: var(--ok); }
.craft-score.mid { color: var(--polish); }
.craft-score.low { color: var(--blocker); }
.craft-note { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.craft-bottleneck {
  background: rgba(255, 214, 10, 0.08);
  border: 1px solid rgba(255, 214, 10, 0.25);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
.craft-bottleneck strong { font-size: 12px; color: var(--polish); display: block; margin-bottom: 4px; }
.craft-bottleneck p { font-size: 13px; color: var(--ink2); line-height: 1.5; }
.craft-try { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.craft-steps { padding-left: 20px; font-size: 13px; color: var(--ink2); line-height: 1.8; margin-bottom: 8px; }
.craft-scriptnote { font-size: 12px; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 10px; margin-top: 4px; line-height: 1.5; }

/* ── Editor feedback (redesign per approved mockup) ──────────────────────────── */
.fb-wrap { padding: 4px 0 12px; }
.fb-head { font-size: 16px; font-weight: 600; color: var(--ink, #f5f5f7); padding: 6px 0 14px; }
.fb-head-clean { color: var(--good, #30d158); }
.fb-clean { font-size: 15px; color: var(--good, #30d158); padding: 8px 0; }

.fb-sections { display: flex; flex-direction: column; gap: 22px; }
.fb-sec-title {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted, #8e8e93);
}
.fb-sec-fix  { color: #ff5b3a; }
.fb-sec-good { color: #30d158; }

.fb-list { display: flex; flex-direction: column; gap: 11px; }
.fb-item {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 18px 20px; border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.015);
}
.fb-fix  { border-color: rgba(255,91,58,0.35); }
.fb-good { border-color: rgba(48,209,88,0.28); }
.fb-nice { border-color: rgba(255,255,255,0.1); }
.fb-thumb {
  flex: 0 0 auto; width: 44px; height: 78px; object-fit: cover;
  border-radius: 6px; border: 0.5px solid rgba(255,255,255,0.12); background: #26262b;
}
.fb-thumb-none {
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
  font-size: 10px; color: var(--muted, #8e8e93); font-variant-numeric: tabular-nums;
}
.fb-body { min-width: 0; display: flex; gap: 14px; align-items: baseline; flex: 1; }
.fb-ts {
  flex: 0 0 auto; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--muted, #8e8e93); background: none; border: none; cursor: pointer; padding: 0;
}
.fb-fix  .fb-ts { color: #ff5b3a; }
.fb-good .fb-ts { color: #30d158; }
.fb-ts:hover { opacity: 0.75; }
.fb-line { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink, #f5f5f7); }

/* ── Craft score panel (spec D20/D55) — top of the feedback column ────────────── */
.craft-loading { font-size: 13px; color: var(--muted, #8e8e93); padding: 10px 0; }
.cs-shares { font-size: 12.5px; font-style: italic; color: var(--muted, #8e8e93); margin: 0 0 10px; }
.cs-panel {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 14px; padding: 18px; margin-bottom: 22px;
}
/* Full-width bar variant: ring + trend on the left, dimension tiles in a wrapping row. */
.cs-panel.cs-bar { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.cs-bar .cs-overall { margin-bottom: 0; flex: 0 0 auto; }
.cs-dims.cs-wrap { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 480px; grid-template-columns: none; }
.cs-dims.cs-wrap .cs-dim { flex: 1 1 92px; min-width: 92px; }
.cs-overall { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.cs-ring {
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: #f5f5f7;
  border: 4px solid var(--accent, #ff5b3a);
}
.cs-ring b { font-weight: 700; }
.cs-ring.cs-good { border-color: #30d158; }
.cs-ring.cs-mid  { border-color: #ffd60a; }
.cs-ring.cs-low  { border-color: #ff5b3a; }
.cs-overall-h { margin: 0; font-size: 18px; font-weight: 600; }
.cs-overall-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted, #8e8e93); }
.cs-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
/* One clean row of equal-width tiles per group; scrolls sideways only if truly cramped. */
.cs-tilegroup { margin-top: 14px; }
.cs-tilegroup:first-of-type { margin-top: 0; }
.cs-tilegroup-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted, #8e8e93); margin-bottom: 8px;
}
.cs-dims.cs-row { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; overflow-x: auto; }
.cs-dim {
  background: rgba(255,255,255,0.03); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.cs-dim-name { font-size: 12px; color: var(--muted, #8e8e93); }
.cs-dim-score { font-size: 20px; font-weight: 600; }
.cs-dim-score small { font-size: 11px; font-weight: 400; color: var(--muted, #8e8e93); }
.cs-dim-trend { font-size: 11px; }
.cs-tr-up   { color: #30d158; }
.cs-tr-down { color: #ffd60a; }
.cs-tr-flat { color: var(--muted, #8e8e93); }
.cs-good { color: #30d158; }
.cs-mid  { color: #ffd60a; }
.cs-low  { color: #ff5b3a; }

/* Compact hook-only panel (shared-body variants) — no /100 ring, just the hook score. */
.cs-hookonly { display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 16px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border, rgba(255,255,255,0.07));
  border-radius: 12px; margin-bottom: 22px; }
.cs-hookonly-label { font-size: 14px; color: var(--muted, #8e8e93); }
.cs-hookonly-score { font-size: 22px; font-weight: 700; }
.cs-hookonly-score small { font-size: 12px; font-weight: 400; color: var(--muted, #8e8e93); }

/* ── Loading scene: one fun stand-in while the whole batch processes ──────────── */
.loading-scene {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 64px 20px; text-align: center;
}
.ls-title { margin: 8px 0 0; font-size: 18px; font-weight: 600; color: var(--ink, #f5f5f7); }
.ls-line { margin: 0; font-size: 14px; color: var(--muted, #8e8e93); }
.ls-timer { margin: 2px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted, #8e8e93); }
.ls-sub { margin: 10px 0 0; font-size: 13px; color: var(--muted, #8e8e93); max-width: 420px; line-height: 1.5; }
/* A little clapperboard that claps on a loop. */
.ls-clap { position: relative; width: 84px; height: 64px; }
.ls-clap-body {
  position: absolute; bottom: 0; width: 84px; height: 50px;
  background: #1f1f24; border: 2px solid var(--accent, #ff5b3a); border-radius: 6px;
}
.ls-clap-top {
  position: absolute; top: 0; left: 0; width: 84px; height: 16px;
  background: repeating-linear-gradient(45deg, var(--accent, #ff5b3a) 0 8px, #1f1f24 8px 16px);
  border-radius: 4px; transform-origin: 6px 14px; transform: rotate(-24deg);
  animation: clap 1.1s ease-in-out infinite;
}
@keyframes clap {
  0%, 100% { transform: rotate(-24deg); }
  20%, 60% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .ls-clap-top { animation: none; transform: rotate(0deg); } }

/* ── AI-analysis dashboard loading scene (neural core, Aditor orange) ─────────── */
.ls-dash {
  position: relative;
  max-width: 1120px; margin: 20px auto 0; padding: 24px 26px;
  background: radial-gradient(120% 130% at 50% 40%, #170f0c 0%, #08080a 62%);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; overflow: hidden;
}
/* Blurred first frame of the ad as a soft backdrop, so each processing view is recognisable as its
   own ad rather than an identical generic screen (Alan's ask). Sits behind the content. */
.ls-dash.ls-has-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: var(--ls-ff); background-size: cover; background-position: center;
  filter: blur(34px) saturate(1.15); opacity: 0.16;
}
.ls-dash > * { position: relative; z-index: 1; }
.ls-dash-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.ls-dash-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.ls-dash-sub { font-size: 11.5px; color: #8a8378; margin-top: 3px; letter-spacing: 0.06em; }
.ls-dash-t { text-align: right; }
.ls-dash-timer { font-size: 24px; font-weight: 700; color: var(--accent, #ff5b3a); font-variant-numeric: tabular-nums; }
.ls-dash-elapsed { font-size: 10px; color: #8a8378; letter-spacing: 0.12em; }
.ls-dash-body { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: center; }
.ls-scan {
  position: relative; aspect-ratio: 9/16; max-height: 340px; border-radius: 14px; overflow: hidden;
  background: #14100f; border: 1px solid rgba(255,91,58,0.4); box-shadow: 0 0 44px rgba(255,91,58,0.18);
}
.ls-scan-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: saturate(1.1) contrast(1.05); }
.ls-scan-grid {
  position: absolute; inset: 0; background-image:
    linear-gradient(rgba(255,91,58,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,91,58,0.10) 1px, transparent 1px);
  background-size: 22px 22px; mix-blend-mode: screen;
}
.ls-scan-line {
  position: absolute; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent, #ff5b3a), transparent);
  box-shadow: 0 0 16px var(--accent, #ff5b3a); animation: lsScan 3s ease-in-out infinite;
}
@keyframes lsScan { 0%{top:2%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:96%;opacity:0} }
.ls-scan-cap { position: absolute; bottom: 8px; left: 10px; right: 10px; font-size: 10.5px; color: #ffb59e; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-shadow: 0 1px 3px #000; }
.cs-dim-score.cs-na { color: #7d7d85; font-weight: 600; }
.ls-core-wrap { display: flex; justify-content: center; position: relative; }
.ls-core-wrap canvas { width: 100%; max-width: 640px; height: auto; }
/* Floating "what it's analysing" status labels around the living brain. */
.ls-core-labels { position: absolute; inset: 0; pointer-events: none; }
.ls-clabel {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 11px; letter-spacing: 0.03em; color: #ffcbb8; white-space: nowrap;
  background: rgba(24,14,11,0.62); border: 1px solid rgba(255,91,58,0.32);
  padding: 3px 10px; border-radius: 999px; text-shadow: 0 1px 4px #000;
  opacity: 0; transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 0.55s ease, transform 0.55s ease;
  box-shadow: 0 0 18px rgba(255,91,58,0.12);
}
.ls-clabel.on { opacity: 0.94; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .ls-clabel { transition: opacity 0.2s; } }

.ls-dims { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-top: 8px; }
.ls-dim {
  position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px; padding: 9px 8px; font-size: 11px; color: #8a8378; text-align: center;
  letter-spacing: 0.02em; transition: color .3s, border-color .3s, background .3s;
}
.ls-dim-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #4a4038; margin-left: 5px; vertical-align: middle; }
.ls-dim-on { color: #f5f5f7; border-color: rgba(255,91,58,0.5); background: rgba(255,91,58,0.08); }
.ls-dim-on .ls-dim-dot { background: var(--accent, #ff5b3a); box-shadow: 0 0 8px var(--accent, #ff5b3a); }

.ls-dash-foot {
  margin-top: 18px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 13px;
  display: flex; justify-content: space-between; font-size: 12.5px; color: #8a8378; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.ls-dash-foot > span:first-child { color: var(--accent, #ff5b3a); }
.ls-dash-count { color: #f5f5f7; }
@media (max-width: 680px) {
  .ls-dash-body { grid-template-columns: 1fr; }
  .ls-scan { max-height: 240px; margin: 0 auto; }
  .ls-dims { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ls-scan-line { animation: none; } }

/* Shared-body variant note (D56) */
.cs-shares { font-size: 12px; color: var(--muted, #8e8e93); margin: 0 0 8px; font-style: italic; }

/* On-demand craft trigger (big batches) */
.craft-cta {
  padding: 10px 18px; border-radius: 10px; border: 1px solid var(--accent, #ff5b3a);
  background: transparent; color: var(--accent, #ff5b3a); font-size: 14px; font-weight: 500;
  cursor: pointer; margin-bottom: 12px;
}
.craft-cta:hover { background: rgba(255,91,58,0.12); }

.craft-cta-hint { font-size: 12px; color: var(--muted, #8e8e93); margin-left: 10px; }

.fb-lead { color: var(--ink, #fff); font-weight: 600; }

/* Closed-tab restore prompt */
.reopen-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 1240px; margin: 16px auto 0; padding: 14px 18px;
  background: var(--accent-soft, rgba(255,91,58,0.14)); border: 1px solid rgba(255,91,58,0.3);
  border-radius: 12px; font-size: 14px; color: var(--ink, #f5f5f7);
}
.reopen-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.reopen-btn {
  padding: 8px 16px; border-radius: 9px; border: 1px solid var(--accent, #ff5b3a);
  background: var(--accent, #ff5b3a); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
.reopen-btn:hover { opacity: 0.9; }
.reopen-x {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14);
  background: transparent; color: var(--muted, #8e8e93); font-size: 13px; cursor: pointer; line-height: 1;
}
.reopen-x:hover { color: var(--ink, #fff); border-color: rgba(255,255,255,0.3); }

.ls-dash-note { margin-top: 12px; font-size: 12.5px; color: #8a8378; text-align: center; }

/* The editor's own link to the finished review — quiet, but the one actionable thing on screen. */
.card-link {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 26px auto 0; padding: 14px 18px; max-width: 640px;
  background: #141416; border: 1px solid #232327; border-radius: 12px;
}
.card-link a { color: var(--accent); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.card-link a:hover { text-decoration: underline; }
.card-link-copy {
  margin-left: auto; background: #1d1d21; color: #c9c9cf; border: 1px solid #2c2c32;
  border-radius: 8px; padding: 7px 12px; font-size: 0.8rem; cursor: pointer;
}
.card-link-copy:hover { background: #26262b; color: #fff; }


/* Scorecard: a metric we do not measure states that once, instead of printing zeros that read
   as "nothing was on time and nothing was late" — an impossibility that looked like broken data. */
.sc-table .sc-note { color: var(--muted, #8a8a92); font-size: 0.82rem; font-style: italic; padding: 8px 10px; }