/* OPS MODE'S SKIN. Chosen by Joe 2026-09-06 from five drawn options
   (docs/design/2026-09-06-ops-skin-options.html): option D, "Studio Light".
   Light grey ground, white floating cards, the nav in a left sidebar on a
   computer. (It carried a colour stripe per pipeline stage until the board
   was replaced by Clients on 2026-09-07.) The first skin (2026-09-06
   morning) was dark so a screenshot of our own screens could never pass for
   a client's portal; Joe chose light anyway, so the HQ mark in the
   sidebar and the sidebar itself now carry that job — no client screen has
   either.

   Only variables and a handful of components change; the markup is the
   product's. Every colour that is a *choice* sits in the --hq-* block at the
   top, so a colourway swap is that block and nothing else. */
body.ops-mode{
  /* ---- colourway: Indigo & Mint (the one drawn in option D) ---- */
  --hq-bg:#F3F5F8; --hq-card:#FFFFFF;
  --hq-ink:#1B1F2A; --hq-ink-soft:#4B5263; --hq-ink-faint:#6B7280;
  --hq-line:#E5E8EE; --hq-line-soft:#EDF0F4; --hq-fill:#EEF0F6;
  --hq-accent:#6C5CE7; --hq-accent-deep:#5A4BD1; --hq-accent-wash:#ECEAFB;
  --hq-brand-a:#6C5CE7; --hq-brand-b:#00B894;
  --hq-pos:#00A377; --hq-neg:#E0475B; --hq-neg-wash:#FDECEF; --hq-mid:#FDCB6E;
  --warm-fill:#FFF4D6; --warm-ink:#8A5A00;

  /* ---- the product's tokens, pointed at the colourway ---- */
  --paper:var(--hq-card); --paper-deep:var(--hq-bg); --ink:var(--hq-ink); --ink-soft:var(--hq-ink-soft); --ink-faint:var(--hq-ink-faint);
  --accent:var(--hq-accent); --accent-lift:var(--hq-accent-deep); --accent-wash:var(--hq-accent-wash);
  --border:var(--hq-line); --border-soft:var(--hq-line-soft); --tint:#F7F8FB;
  --warn:var(--hq-neg); --warn-wash:var(--hq-neg-wash);
  --tab-fill:transparent; --tab-name:var(--hq-ink-faint); --tab-rule:var(--hq-line);
  --flag-fill:transparent; --flag-name:var(--hq-neg);
  --dark:var(--hq-card); --dark-soft:var(--hq-fill); --on-dark:var(--hq-ink-soft);
  --shadow-1:0 1px 2px rgba(20,30,60,.06); --shadow-2:0 8px 24px rgba(20,30,60,.06);
  background:var(--hq-bg); color:var(--ink);
}

/* ---- the bar: white, ink text, a brand square before the wordmark ---- */
body.ops-mode .topnav{ background:var(--hq-card); border-bottom:1px solid var(--hq-line); }
body.ops-mode .topnav .wm{ color:var(--ink); font-family:var(--font-sans); font-weight:700; display:flex; align-items:center; gap:8px; }
body.ops-mode .topnav .wm::before{ content:''; width:22px; height:22px; border-radius:6px; flex:none;
  background:linear-gradient(135deg,var(--hq-brand-a),var(--hq-brand-b)); }
body.ops-mode .topnav .wm::after{ content:' · HQ'; color:var(--hq-accent); font-weight:700; }
body.ops-mode .topnav .links button{ color:var(--hq-ink-soft); opacity:1; border-radius:8px; }
body.ops-mode .topnav .links button .g{ color:#9AA1B1; opacity:1; }
body.ops-mode .topnav .links button.on{ background:var(--hq-fill); color:var(--ink); box-shadow:none; }
body.ops-mode .topnav .links button.on .g{ color:var(--hq-accent); }
body.ops-mode .topnav .tool{ color:var(--hq-ink-soft); }
body.ops-mode .topnav .capture{ background:var(--hq-accent); color:#fff; border-color:transparent; border-radius:8px; }
body.ops-mode .topnav .capture:hover{ background:var(--hq-accent-deep); }
body.ops-mode .topnav .links{ scrollbar-color:var(--hq-line) transparent; }
body.ops-mode .topnav .links::-webkit-scrollbar-thumb{ background:var(--hq-line); }

/* ---- on a computer the bar stands up and becomes the sidebar ---- */
@media (min-width:901px){
  body.ops-mode .topnav{ position:fixed; left:0; top:0; bottom:0; width:220px; height:auto;
    flex-direction:column; align-items:stretch; gap:0; padding:20px 14px 16px;
    border-bottom:0; border-right:1px solid var(--hq-line); }
  body.ops-mode .topnav .wm{ margin:0 8px 22px; }
  body.ops-mode .topnav .links{ flex:0 0 auto; flex-direction:column; align-items:stretch; overflow:visible; gap:2px; }
  body.ops-mode .topnav .links button{ width:100%; justify-content:flex-start; gap:10px; padding:9px 10px; font-size:13.5px; }
  body.ops-mode .topnav .links button .g{ width:16px; text-align:center; font-size:13px; }
  body.ops-mode .topnav .links button.on{ font-weight:600; }
  body.ops-mode .topnav .bdg{ margin-left:auto; }
  body.ops-mode .topnav .tools{ margin-top:auto; flex-direction:column; gap:8px; align-items:stretch; }
  body.ops-mode .topnav .capture{ justify-content:center; padding:10px; }
  body.ops-mode .topnav .tools .tool{ text-align:left; padding:8px 10px; border-radius:8px; font-size:15px; }
  body.ops-mode .topnav .tool:hover{ background:var(--hq-fill); }
  body.ops-mode .main{ margin-left:220px; }
  body.ops-mode .topbar{ display:none; }   /* the sidebar already says where you are and holds sign out */
  body.ops-mode .screen{ max-width:1180px; padding:28px 30px 64px; }
}

/* ---- furniture: everything that was a hairline box floats as a white card ---- */
body.ops-mode .card, body.ops-mode .tile, body.ops-mode .under{
  background:var(--hq-card); border:0; border-radius:14px; box-shadow:var(--shadow-1), var(--shadow-2); }
body.ops-mode .card{ padding:20px; }
body.ops-mode .under{ padding:14px 18px; margin-top:10px; }
body.ops-mode .under.rows, body.ops-mode .under.tight{ padding:10px 18px; }
body.ops-mode .band{ margin:24px 0 0; align-items:baseline; }
body.ops-mode .band .lbl{ padding:0 6px 0 2px; font-size:11px; letter-spacing:.1em; }
body.ops-mode .band .n{ padding:0 8px 0 0; }
body.ops-mode .band .ln{ height:1px; }
body.ops-mode .band .more{ color:var(--hq-accent); }
body.ops-mode .band .range-pick{ background:var(--hq-fill); color:var(--ink); border-radius:8px; }
body.ops-mode .filters{ background:transparent; border-bottom:0; }
body.ops-mode .filters .range{ background:var(--hq-card); border-radius:8px; }
body.ops-mode .ptitle h1{ font-size:24px; font-weight:700; }
body.ops-mode .psub{ color:var(--hq-ink-faint); }
body.ops-mode .btn{ border-radius:8px; }
body.ops-mode .btn-primary{ background:var(--hq-accent); color:#fff; }
body.ops-mode .btn-primary:hover{ background:var(--hq-accent-deep); }
body.ops-mode .btn-secondary{ border-color:var(--hq-line); color:var(--ink); background:var(--hq-card); }
body.ops-mode input, body.ops-mode select, body.ops-mode textarea{ background:var(--hq-card); color:var(--ink); border-color:var(--hq-line); border-radius:8px; }
body.ops-mode .field input, body.ops-mode .field select, body.ops-mode .field textarea{ border-radius:8px; }

/* The ganged figures: each one its own card. The money gang colours its
   first two figures (in green, out red) and the stage gang wears a stripe per
   stage — ops.js adds the classes; nothing about the numbers changes. */
body.ops-mode .gang{ background:transparent; gap:12px; }
body.ops-mode .gang .t{ background:var(--hq-card); border-left:0; border-radius:14px; padding:16px 18px; box-shadow:var(--shadow-1), var(--shadow-2); }
body.ops-mode .gang .k{ color:var(--hq-ink-faint); font-size:11px; }
body.ops-mode .gang .v{ font-size:28px; }
body.ops-mode .gang .t.pos .v{ color:var(--hq-pos); }
body.ops-mode .gang .t.neg .v, body.ops-mode .gang .t.flag .v{ color:var(--hq-neg); }
body.ops-mode .gang .t.flag .k{ color:var(--hq-neg); }
body.ops-mode .gang.clients{ gap:8px; margin-top:12px; }
body.ops-mode .gang.clients .t{ padding:12px 14px; border-top:4px solid var(--hq-accent); border-radius:12px; }
body.ops-mode .gang.clients .v{ font-size:24px; }
@media (max-width:900px){
  body.ops-mode .gang{ flex-wrap:wrap; gap:8px; }
  body.ops-mode .gang .t{ flex:1 1 40%; min-width:calc(50% - 8px); border-top:0; border-left:0; padding:12px 14px; }
  body.ops-mode .gang .t:nth-child(even){ border-left:0; }
  body.ops-mode .gang.clients .t{ border-top:4px solid var(--hq-accent); }
  body.ops-mode .gang .v{ font-size:22px; }
}

/* ---- the pipeline board ---- */
/* ---- Clients (2026-09-07). The board is gone; this is a list, because a
   list of what needs a person reads top to bottom on a phone and a board of
   six mostly-empty columns does not. ---- */
.ops-clients{ display:flex; flex-direction:column; gap:10px; }
.ops-client{ background:var(--hq-card); border:1px solid var(--hq-line); border-left:4px solid var(--hq-line);
  border-radius:12px; padding:12px 14px; cursor:pointer; }
.ops-client:hover{ border-color:var(--hq-accent); }
.ops-client .co{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:15px; }
.ops-client .meta{ font-size:12px; color:var(--hq-ink-faint); display:flex; gap:10px; flex-wrap:wrap; margin-top:5px; }
.ops-why{ font-size:12.5px; color:var(--hq-ink-soft); margin-top:6px; }
.ops-why.bad{ color:var(--hq-neg); }
.ops-due{ font-size:12.5px; color:var(--hq-ink-soft); margin-top:4px; }
.ops-due.late{ color:var(--hq-neg); font-weight:600; }

/* An enquiry carries a name and a line of detail. The product's .row-main
   lays its children out side by side, which squeezed the company name into a
   two-word-wide column on a phone (found on the local drive). Here the name
   sits above its detail line, at every width. */
.ops-enquiry .row-main{ flex-direction:column; align-items:flex-start; gap:2px; }
@media (max-width:900px){
  .ops-enquiry{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
  .ops-enquiry .row-main{ width:100%; }
}

/* One pill, three states. The colour is the whole message, so the words
   beside it never have to repeat it. */
.ops-portal{ display:inline-block; padding:1px 8px; border-radius:99px; font-size:11px; font-weight:650; }
.ops-portal.ok{ background:#E4F7F0; color:#00795C; }
.ops-portal.watch{ background:var(--warm-fill); color:var(--warm-ink); }
.ops-portal.broken{ background:var(--hq-neg-wash); color:#C0313F; }
.ops-status{ font-size:11px; font-weight:650; color:var(--hq-ink-faint); text-transform:uppercase; letter-spacing:.06em; }

/* A client whose portal is broken wears it on the edge of the card, so the
   list is readable at a glance without reading a word of it. */
.ops-client:has(.ops-portal.broken){ border-left-color:var(--hq-neg); }
.ops-client:has(.ops-portal.watch){ border-left-color:var(--hq-mid); }
.ops-client:has(.ops-portal.ok){ border-left-color:var(--hq-pos); }

.ops-quiet{ color:var(--hq-neg); font-weight:600; }

/* Decisions: what happened, one row per session-log entry. A coloured dot
   for the mood set in the log; grey when a heading carried no mood emoji at
   all, never a guessed colour. */
.ops-happened-row{ display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px solid var(--hq-line-soft); }
.ops-happened-row:last-child{ border-bottom:none; }
.ops-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#C5CAD6; flex:0 0 auto; }
.ops-dot.green{ background:var(--hq-pos); }
.ops-dot.yellow{ background:var(--hq-mid); }
.ops-dot.red{ background:var(--hq-neg); }

/* ---- the calendar (2026-09-07) ---- */
body.ops-mode .cal-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
body.ops-mode .cal-nav{ display:flex; align-items:center; gap:6px; }
body.ops-mode .cal-title{ font-weight:650; margin-left:8px; }
body.ops-mode .cal-people{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
body.ops-mode .cal-person{ border:0; border-radius:99px; padding:4px 12px; font-size:12.5px; font-weight:600; cursor:pointer; background:var(--ev); color:#fff; }
body.ops-mode .cal-person.off{ background:var(--hq-fill); color:var(--hq-ink-faint); text-decoration:line-through; }
body.ops-mode .cal-ev{ display:flex; gap:6px; align-items:baseline; width:100%; min-height:24px; box-sizing:border-box; position:relative; border:0; border-left:3px solid var(--src, var(--ev)); border-radius:6px; padding:3px 6px; font-size:12px; text-align:left; cursor:pointer; background:color-mix(in srgb, var(--ev) 18%, white); color:var(--hq-ink); overflow:hidden; }
body.ops-mode .cal-ev .cal-ev-t{ color:var(--hq-ink-faint); flex:none; }
body.ops-mode .cal-ev:not(.wrap) .cal-ev-t:not(:empty)::after{ content:' · '; }
body.ops-mode .cal-ev .cal-ev-n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
body.ops-mode .cal-ev.wrap{ flex-direction:column; align-items:flex-start; gap:0; }
body.ops-mode .cal-ev.wrap .cal-ev-n{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
body.ops-mode .cal-ev.busy{ background:repeating-linear-gradient(135deg, #E9EBF0 0 6px, #F4F5F8 6px 12px); color:var(--hq-ink-faint); border-left-color:#C5CAD6; }
body.ops-mode .cal-ev.busy .cal-ev-n{ font-weight:500; }
/* A twin — the same event on both partners' calendars — merges into one
   full-width chip with a two-colour stripe instead of a plain left border. */
body.ops-mode .cal-ev.twin{ border-left:0; padding-left:9px; }
body.ops-mode .cal-ev.twin::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(to bottom, var(--ev) 50%, var(--ev2) 50%); }
/* week */
body.ops-mode .cal-week{ background:var(--hq-card); border-radius:14px; box-shadow:var(--shadow-1), var(--shadow-2); }
body.ops-mode .cal-week-head, body.ops-mode .cal-week-allday{ display:grid; grid-template-columns:56px repeat(7, 1fr); border-bottom:1px solid var(--hq-line); }
body.ops-mode .cal-week-head{ position:sticky; top:0; z-index:3; background:var(--hq-card); border-radius:14px 14px 0 0; }
body.ops-mode .cal-dayhead{ padding:10px 6px; text-align:center; }
body.ops-mode .cal-dayhead .cal-dow{ display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--hq-ink-faint); }
body.ops-mode .cal-dayhead .cal-dom{ display:inline-block; font-size:18px; font-weight:700; min-width:30px; line-height:30px; border-radius:50%; }
body.ops-mode .cal-dayhead.today .cal-dom{ background:var(--hq-accent); color:#fff; }
body.ops-mode .cal-allday-cell{ min-height:28px; padding:3px; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--hq-line-soft); }
body.ops-mode .cal-week-allday .cal-gutter{ font-size:10px; color:var(--hq-ink-faint); padding:6px 4px; text-align:right; }
body.ops-mode .cal-week-body{ display:grid; grid-template-columns:56px repeat(7, 1fr); position:relative; }
body.ops-mode .cal-hours .cal-hour{ height:44px; font-size:10px; color:var(--hq-ink-faint); text-align:right; padding-right:6px; transform:translateY(-6px); }
body.ops-mode .cal-daycol{ position:relative; border-left:1px solid var(--hq-line-soft); }
body.ops-mode .cal-daycol.today{ background:color-mix(in srgb, var(--hq-accent) 4%, white); }
body.ops-mode .cal-hourline{ height:44px; border-bottom:1px solid var(--hq-line-soft); }
body.ops-mode .cal-daycol .cal-ev{ position:absolute; flex-direction:row; align-items:baseline; gap:4px; white-space:nowrap; }
body.ops-mode .cal-daycol .cal-ev.wrap{ flex-direction:column; align-items:flex-start; white-space:normal; }
/* month */
body.ops-mode .cal-month{ display:grid; grid-template-columns:repeat(7, 1fr); gap:1px; background:var(--hq-line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-1), var(--shadow-2); }
body.ops-mode .cal-month-dow{ background:var(--hq-card); padding:8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--hq-ink-faint); text-align:center; }
body.ops-mode .cal-month-cell{ background:var(--hq-card); min-height:104px; padding:6px; display:flex; flex-direction:column; gap:2px; }
body.ops-mode .cal-month-cell.dim{ background:#F9FAFC; color:var(--hq-ink-faint); }
body.ops-mode .cal-month-num{ font-size:12px; font-weight:600; margin-bottom:2px; }
body.ops-mode .cal-month-cell.today .cal-month-num{ color:var(--hq-accent); }
body.ops-mode .cal-more{ border:0; background:none; color:var(--hq-accent); font-size:11px; text-align:left; cursor:pointer; padding:2px 0; }
/* agenda */
body.ops-mode .cal-agenda{ background:var(--hq-card); border-radius:14px; box-shadow:var(--shadow-1), var(--shadow-2); padding:6px 14px; }
body.ops-mode .cal-agenda-day{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--hq-ink-faint); margin:14px 0 6px; }
body.ops-mode .cal-agenda-row{ display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:center; padding:4px 0; }
body.ops-mode .cal-agenda-time{ font-size:12.5px; color:var(--hq-ink-soft); }
/* the event-details pop-up */
body.ops-mode .cal-backdrop{ position:fixed; inset:0; background:rgba(20,30,60,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; }
body.ops-mode .cal-modal{ background:var(--hq-card); width:100%; max-width:440px; border-radius:14px; box-shadow:0 20px 60px rgba(20,30,60,.28); padding:20px; }
body.ops-mode .cal-modal h2{ font-size:18px; margin-bottom:4px; }
body.ops-mode .cal-modal-sub{ color:var(--hq-ink-faint); font-size:13px; margin-bottom:10px; }
@media (max-width:900px){
  body.ops-mode .cal-agenda-row{ grid-template-columns:90px 1fr; }
  body.ops-mode .cal-month-cell{ min-height:64px; }
}
/* Connections' Calendars card */
body.ops-mode .cal-source-row{ display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--hq-line-soft); flex-wrap:wrap; }
body.ops-mode .cal-source-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
body.ops-mode .cal-source-who{ flex:1; min-width:160px; }
body.ops-mode .cal-source-name{ font-weight:600; }
body.ops-mode .cal-add{ margin-top:14px; }
/* ---- Health (PR 2, 2026-09-07) ---- */
.hq-health{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--hq-card); border:1px solid var(--hq-line); border-radius:14px;
  padding:14px 16px; margin:0 0 var(--sp-4); font:inherit; color:var(--hq-ink); cursor:pointer;
}
.hq-health.big{ cursor:default; padding:18px; }
.hq-health .dot{ width:12px; height:12px; border-radius:999px; flex:none; background:var(--hq-line); }
.hq-health.big .dot{ width:18px; height:18px; }
.hq-health .dot.green{ background:var(--hq-pos); box-shadow:0 0 0 4px rgba(0,163,119,.15); }
.hq-health .dot.amber{ background:var(--hq-mid); box-shadow:0 0 0 4px rgba(253,203,110,.25); }
.hq-health .dot.red{ background:var(--hq-neg); box-shadow:0 0 0 4px rgba(224,71,91,.18); }
.hq-health .line{ font-weight:600; flex:1; }
.hq-health .more{ color:var(--hq-ink-faint); font-size:13px; }
.hq-reason{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--hq-line-soft); font-size:14px; }
.hq-reason .dot{ width:10px; height:10px; border-radius:999px; flex:none; margin-top:5px; }
.hq-reason .dot.red{ background:var(--hq-neg); }
.hq-reason .dot.amber{ background:var(--hq-mid); }
table.data td.good{ color:var(--hq-pos); }
table.data td.bad{ color:var(--hq-neg); }

/* Shared work inherits HQ's palette. */
.work-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.work-toolbar input{min-width:0;flex:1;padding:10px;border:1px solid var(--hq-line);border-radius:8px}
.work-coverage{padding:14px;background:var(--warm-fill);color:var(--warm-ink);border-radius:10px}
.work-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px;border-bottom:1px solid var(--hq-line)}
.work-row p{margin:5px 0}.work-error{color:#ad2739;white-space:pre-wrap}
.work-dialog{width:min(680px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--hq-line);border-radius:16px;padding:24px;color:var(--hq-ink);background:white}
.work-dialog::backdrop{background:#17203477}.work-dialog>.btn{margin:5px}.work-dialog .muted-note{white-space:pre-wrap}
.work-field{display:grid;gap:5px;margin:15px 0;font-size:14px;font-weight:600}
.work-field input,.work-field textarea,.work-field select{width:100%;padding:10px;border:1px solid #c8cdda;border-radius:7px;font:inherit;background:white;color:#1b1f2a}
.work-field textarea{min-height:70px;resize:vertical}
@media(max-width:600px){.work-row{align-items:flex-start;flex-direction:column}}

/* Shared agenda: stack cards on phones; keep email preview contained. */
.agenda-section{margin:16px 0;padding:20px}.agenda-section h2{font-size:18px;margin:0 0 14px}.agenda-email{width:100%;height:850px;border:1px solid var(--line,#ddd);border-radius:16px;background:#f3f5f8}.agenda-section .work-row p{overflow-wrap:anywhere}.agenda-section .work-row:last-child{border-bottom:0}

.home-link{cursor:pointer;transition:background .15s,box-shadow .15s}.home-link:hover{background:rgba(108,92,231,.06)}.home-link:focus-visible{outline:3px solid #6c5ce7;outline-offset:3px}.home-workday{padding:20px;margin:20px 0}.home-filter{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:16px 0}#money-ledger,#money-statement,#client-enquiries,#decision-history{scroll-margin-top:85px}

/* Cold Outreach (2026-09-29, Joe's notes): the stage counts in one row with the
   Call booked split under its number, and a table whose rows are all one line and
   one height, so the list reads as a grid. Long names cut with an ellipsis; the
   full text is in the cell's tooltip. */
body.ops-mode .gang.outreach-gang .t .split{ font-size:11px; color:var(--hq-ink-faint); margin-top:4px; white-space:nowrap; }
.outreach-table table.data{ table-layout:fixed; }
.outreach-table table.data th:nth-child(1){ width:22%; } .outreach-table table.data th:nth-child(2){ width:17%; }
.outreach-table table.data th:nth-child(3){ width:16%; } .outreach-table table.data th:nth-child(4){ width:11%; }
.outreach-table table.data th:nth-child(5){ width:23%; } .outreach-table table.data th:nth-child(6){ width:11%; }
.outreach-table table.data td{ height:44px; padding-top:0; padding-bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.outreach-table table.data td.when{ font-variant-numeric:tabular-nums; }
.outreach-table table.data td.who a{ color:var(--hq-accent); text-decoration:none; font-weight:600; }
.outreach-table table.data td.who a:hover{ text-decoration:underline; }

/* Cold to hot (Joe, 2026-09-29): icy blue for not contacted through red for a call
   booked, in the order the cards run. The card gets a tinted top edge and number;
   the Stage column gets the same colour as a pill. */
body.ops-mode{ --heat-queued:#8ecae6; --heat-invited:#4ea8de; --heat-accepted:#2ec4b6; --heat-messaged:#e9c46a;
  --heat-emailed:#f4a261; --heat-replied:#f3722c; --heat-demo:#ee5d4b; --heat-booked:#e63946; }
body.ops-mode .gang.outreach-gang .t.heat{ border-top:5px solid var(--heat); background:linear-gradient(180deg, color-mix(in srgb, var(--heat) 14%, var(--hq-card)), var(--hq-card) 70%); }
body.ops-mode .gang.outreach-gang .t.heat .v{ color:color-mix(in srgb, var(--heat) 70%, #1d2433); }
.s-queued{ --heat:var(--heat-queued); } .s-invited{ --heat:var(--heat-invited); } .s-accepted{ --heat:var(--heat-accepted); }
.s-messaged{ --heat:var(--heat-messaged); } .s-emailed{ --heat:var(--heat-emailed); } .s-replied{ --heat:var(--heat-replied); }
.s-demo{ --heat:var(--heat-demo); } .s-booked{ --heat:var(--heat-booked); }
.heat-pill{ display:inline-block; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:650; line-height:1.4;
  background:color-mix(in srgb, var(--heat) 20%, #fff); color:color-mix(in srgb, var(--heat) 60%, #1d2433); border:1px solid color-mix(in srgb, var(--heat) 45%, #fff); }

/* Cold Outreach, redesigned 2026-09-30: Today and Coming up above the list, a filter and search bar, and a row
   that opens into the person. Same palette and heat colours as above. */
body.ops-mode .gang.outreach-gang{ display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:10px; }
body.ops-mode .gang.outreach-gang .t{ padding:14px 14px; }
body.ops-mode .gang.outreach-gang .k{ letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.ops-mode .gang.outreach-gang .t{ min-width:0; }
.outreach-count-note{ margin:6px 0 18px; }
.outreach-plan{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:16px; margin:0 0 26px; align-items:start; }
.outreach-plan .card{ padding:16px 18px; margin:0; }
.op-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.op-head h2{ font-size:15px; font-weight:700; margin:0; color:var(--hq-ink); }
.op-n{ font-size:12px; font-weight:700; color:#fff; background:var(--hq-neg); border-radius:99px; padding:1px 8px; }
.op-empty{ font-size:14px; color:var(--hq-ink-soft); padding:6px 0; }
.op-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; margin:0 0 8px; border:1px solid var(--hq-line);
  border-left:4px solid var(--heat); border-radius:10px; background:color-mix(in srgb, var(--heat) 6%, #fff); }
.op-row:last-child{ margin-bottom:0; }
.op-main{ flex:1; min-width:0; }
.op-do{ font-size:12px; font-weight:700; letter-spacing:.02em; color:color-mix(in srgb, var(--heat) 55%, #1d2433); }
.op-who{ margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-name{ all:unset; cursor:pointer; font-weight:650; color:var(--hq-ink); }
.op-name:hover, .op-name:focus-visible{ color:var(--hq-accent); text-decoration:underline; }
.op-firm{ color:var(--hq-ink-soft); font-size:14px; }
.op-why{ font-size:12.5px; color:var(--hq-ink-faint); margin-top:2px; }
.op-acts{ display:flex; gap:6px; flex-shrink:0; }
.op-day{ padding:8px 0; border-top:1px solid var(--hq-line-soft); }
.op-day:first-of-type{ border-top:0; padding-top:0; }
.op-day-head{ display:flex; justify-content:space-between; gap:10px; font-size:14px; }
.op-date{ font-weight:700; color:var(--hq-ink); font-variant-numeric:tabular-nums; }
.op-what{ color:var(--hq-ink-soft); }
.op-names{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.op-chip{ all:unset; cursor:pointer; font-size:12.5px; padding:3px 9px; border-radius:99px; background:var(--hq-fill); color:var(--hq-ink-soft); }
.op-chip:hover, .op-chip:focus-visible{ background:var(--hq-accent-wash); color:var(--hq-accent-deep); }
.op-still{ margin-top:12px; padding-top:10px; border-top:1px solid var(--hq-line-soft); font-size:13px; color:var(--hq-ink-faint); display:grid; gap:3px; }
.outreach-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; }
.outreach-bar .seg{ flex-wrap:wrap; }
.outreach-search{ flex:1; min-width:180px; max-width:280px; margin-left:auto; padding:8px 12px; border:1px solid var(--hq-line); border-radius:8px; font:inherit; font-size:14px; background:#fff; color:var(--hq-ink); }
.outreach-table tr.op-line{ cursor:pointer; }
.outreach-table tr.op-line:hover td{ background:var(--hq-line-soft); }
.outreach-table tr.op-line.is-open td{ background:var(--hq-accent-wash); }
.outreach-table tr.op-line:focus-visible{ outline:2px solid var(--hq-accent); outline-offset:-2px; }
.outreach-table td.next.k-now, .op-card-next.k-now{ color:var(--hq-neg); font-weight:650; }
.outreach-table td.next.k-soon, .op-card-next.k-soon{ color:var(--hq-ink); font-weight:600; }
.outreach-table td.next.k-hold, .outreach-table td.next.k-skip, .outreach-table td.next.k-queue{ color:var(--hq-ink-faint); }
.outreach-table td.who.guessed a{ font-style:italic; }
.outreach-table tr.op-detail-row td{ height:auto; white-space:normal; overflow:visible; padding:0; background:#FAFBFD; border-bottom:1px solid var(--hq-line); }
.op-detail{ padding:16px 18px 18px; cursor:default; font-size:14px; line-height:1.5; color:var(--hq-ink); white-space:normal; }
.op-detail-grid{ display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:22px; }
.op-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hq-ink-faint); margin-bottom:6px; }
.op-strong{ font-weight:650; }
.op-dim{ color:var(--hq-ink-faint); font-size:13px; }
.op-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.op-detail a{ color:var(--hq-accent); text-decoration:none; font-weight:600; }
.op-detail a:hover{ text-decoration:underline; }
.op-email{ margin-top:4px; overflow-wrap:anywhere; }
.op-hook{ font-weight:550; }
.op-steps{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.op-steps li{ display:flex; justify-content:space-between; gap:12px; padding-left:14px; position:relative; }
.op-steps li::before{ content:''; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--hq-accent); }
.op-steps li.op-due::before{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--hq-ink-faint); }
.op-steps li.op-due{ color:var(--hq-ink-soft); }
.op-when{ font-variant-numeric:tabular-nums; color:var(--hq-ink-soft); white-space:nowrap; }
.op-sent{ margin-top:16px; }
.op-sent blockquote{ margin:0; padding:10px 14px; border-left:3px solid var(--hq-accent); background:#fff; border-radius:0 8px 8px 0; color:var(--hq-ink-soft); white-space:pre-wrap; }
.outreach-cards .op-card{ cursor:pointer; flex-direction:column; align-items:stretch; }
.outreach-cards .op-card .row-main{ flex-direction:column; align-items:flex-start; gap:2px; }
.outreach-cards .op-card .row-text{ font-weight:600; }
.outreach-cards .op-card.is-open{ background:var(--hq-accent-wash); }
.outreach-cards .op-card .op-detail{ padding:4px 16px 16px; background:#fff; margin:0 8px 8px; border-radius:10px; }
.op-card-sub{ display:flex; align-items:center; gap:8px; margin-top:4px; font-size:13px; flex-wrap:wrap; }
.outreach-fold{ margin-top:34px; border-top:1px solid var(--hq-line); padding-top:14px; }
.outreach-fold > summary{ cursor:pointer; font-size:13px; font-weight:650; color:var(--hq-ink-soft); padding:4px 0; }
@media (max-width:1100px){ body.ops-mode .gang.outreach-gang{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:900px){
  .outreach-plan{ grid-template-columns:minmax(0, 1fr); }
  .op-detail-grid{ grid-template-columns:1fr; gap:14px; }
  .outreach-search{ max-width:none; margin-left:0; }
  .op-row{ flex-wrap:wrap; }
}
@media (max-width:560px){ body.ops-mode .gang.outreach-gang{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* 2026-09-30, round 2: LinkedIn replies and Demos sent, the numbered conversation, marking a demo. */
.outreach-head-acts{ display:flex; gap:8px; align-items:center; }
.outreach-talk{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); margin-top:-10px; }
.op-count{ font-size:12px; font-weight:700; color:var(--hq-ink-soft); background:var(--hq-fill); border-radius:99px; padding:1px 8px; }
.op-list-row{ all:unset; box-sizing:border-box; display:block; width:100%; cursor:pointer; padding:10px 12px; margin:0 0 8px; border:1px solid var(--hq-line); border-radius:10px; }
.op-list-row:last-child{ margin-bottom:0; }
.op-list-row:hover, .op-list-row:focus-visible{ border-color:var(--hq-accent); background:var(--hq-accent-wash); }
.op-list-top{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.op-list-name{ font-weight:650; color:var(--hq-ink); white-space:nowrap; }
.op-list-firm{ color:var(--hq-ink-soft); font-size:13.5px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-list-when{ color:var(--hq-ink-faint); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.op-list-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:4px; font-size:13px; }
.op-msgno{ font-weight:700; color:color-mix(in srgb, var(--heat-replied) 70%, #1d2433); }
.op-yourturn{ font-size:11.5px; font-weight:700; color:#fff; background:var(--hq-neg); border-radius:99px; padding:1px 8px; }
.op-list-quote{ margin-top:5px; font-size:13px; color:var(--hq-ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-demo-url{ font-weight:600; color:var(--hq-accent); }
.op-list-next.k-now{ color:var(--hq-neg); font-weight:650; } .op-list-next.k-soon{ color:var(--hq-ink); font-weight:600; } .op-list-next.k-wait{ color:var(--hq-ink-faint); }
.op-demo{ margin-top:14px; padding-top:12px; border-top:1px solid var(--hq-line-soft); display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:14px; }
.op-label.op-inline{ display:inline; margin:0 4px 0 0; }
.op-demo-input{ flex:1; min-width:220px; max-width:420px; margin-left:0; }
.op-textbtn{ all:unset; cursor:pointer; font-size:13px; color:var(--hq-ink-faint); text-decoration:underline; margin-left:6px; }
.op-textbtn:hover{ color:var(--hq-neg); }
.op-msg{ padding:10px 14px; border-radius:10px; margin:0 0 8px; max-width:88%; }
.op-msg.mine{ background:#fff; border:1px solid var(--hq-line); border-left:3px solid var(--hq-accent); }
.op-msg.theirs{ background:color-mix(in srgb, var(--heat-replied) 9%, #fff); border:1px solid color-mix(in srgb, var(--heat-replied) 30%, #fff); margin-left:auto; }
.op-msg-meta{ display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:4px; }
.op-msg-who{ font-weight:700; color:var(--hq-ink-soft); }
.op-msg-text{ white-space:pre-wrap; color:var(--hq-ink); font-size:14px; }
@media (max-width:1100px){ body.ops-mode .gang.outreach-gang{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
@media (max-width:900px){ .outreach-talk{ grid-template-columns:minmax(0, 1fr); margin-top:0; } .op-msg{ max-width:100%; } .outreach-head-acts .btn{ padding-left:10px; padding-right:10px; } }
@media (max-width:560px){ body.ops-mode .gang.outreach-gang{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* Count cards open their people (2026-09-30). */
body.ops-mode .gang.outreach-gang .t.heat{ cursor:pointer; transition:transform .12s, box-shadow .12s; }
body.ops-mode .gang.outreach-gang .t.heat:hover{ transform:translateY(-2px); }
body.ops-mode .gang.outreach-gang .t.heat:focus-visible{ outline:2px solid var(--hq-accent); outline-offset:2px; }
body.ops-mode .gang.outreach-gang .t.heat.on{ box-shadow:0 0 0 2px var(--heat), var(--shadow-1), var(--shadow-2); }
.outreach-bar .seg.dimmed button.on{ background:transparent; color:inherit; box-shadow:none; }
.op-filter{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; padding:8px 12px; margin:0 0 10px; border-radius:8px; font-size:14px;
  background:color-mix(in srgb, var(--heat) 12%, #fff); border:1px solid color-mix(in srgb, var(--heat) 40%, #fff); color:var(--hq-ink); }
.op-filter .op-textbtn{ margin-left:auto; }

/* What gets replies (2026-09-30). */
.outreach-works{ padding:16px 18px; margin:-10px 0 26px; }
.op-works-grid{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:20px; }
.op-mini-table{ width:100%; border-collapse:collapse; font-size:14px; }
.op-mini-table th{ text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--hq-ink-faint); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--hq-line); }
.op-mini-table td{ padding:9px 8px; border-bottom:1px solid var(--hq-line-soft); color:var(--hq-ink); }
.op-mini-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.op-mini-row{ cursor:pointer; }
.op-mini-row:hover td{ background:var(--hq-line-soft); }
.op-mini-row.on td{ background:var(--hq-accent-wash); }
.op-mini-row:focus-visible{ outline:2px solid var(--hq-accent); outline-offset:-2px; }
.op-filter:not([class*="s-"]){ --heat:var(--hq-accent); }
@media (max-width:900px){ .op-works-grid{ grid-template-columns:minmax(0, 1fr); } .outreach-works{ margin-top:0; } }

/* A follow-up date set by hand (2026-09-30). */
.op-follow{ margin-top:14px; }
.op-follow + .op-demo{ margin-top:8px; padding-top:8px; }
.op-follow-now{ font-weight:600; }
.op-date{ display:none; flex:0 0 auto; min-width:0; max-width:170px; padding:5px 8px; }

/* Content (2026-10-06): the content calendar, app/ops-content.js. The week is one white card with a hairline
   between days; each post is a small bordered card inside it, the Cold Outreach row's shape. The five steps are
   five bars: filled up to where the post is, each one a button. Indigo while it is being made, mint once posted. */
.cc-total-note{ margin:8px 2px 0; }
body.ops-mode .under.cc-week{ margin-top:16px; padding:4px 18px; }
.cc-day{ display:grid; grid-template-columns:96px minmax(0, 1fr); gap:14px; padding:14px 0; border-top:1px solid var(--hq-line-soft); }
.cc-day:first-child{ border-top:0; }
.cc-dayhead{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding-top:2px; }
.cc-dow{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--hq-ink-faint); }
.cc-date{ font-size:15px; font-weight:650; color:var(--hq-ink); }
.cc-day.today .cc-dow{ color:var(--hq-accent); }
.cc-day.today .cc-date{ color:var(--hq-accent-deep); }
.cc-add{ margin-top:6px; width:28px; height:28px; border-radius:99px; border:1px dashed var(--hq-line); background:var(--hq-card);
  color:var(--hq-ink-faint); font-size:17px; line-height:1; cursor:pointer; }
.cc-add:hover, .cc-add:focus-visible{ border-style:solid; border-color:var(--hq-accent); color:var(--hq-accent-deep); background:var(--hq-accent-wash); }
.cc-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; align-items:start; }
.cc-none{ font-size:14px; color:var(--hq-ink-faint); padding:4px 0; }

.cc-post{ --cc:var(--hq-accent); border:1px solid var(--hq-line); border-left:4px solid var(--cc); border-radius:10px;
  background:color-mix(in srgb, var(--cc) 4%, #fff); padding:10px 12px; min-width:0; }
.cc-post.s-posted{ --cc:var(--hq-pos); }
.cc-post-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cc-where{ display:flex; gap:5px; flex-wrap:wrap; }
.cc-plat{ font-size:11.5px; font-weight:650; padding:2px 8px; border-radius:99px; background:var(--hq-fill); color:var(--hq-ink-soft); }
.cc-who{ font-size:12px; font-weight:700; padding:2px 9px; border-radius:99px; flex:none; }
.cc-who.w-joe{ background:var(--hq-accent-wash); color:var(--hq-accent-deep); }
.cc-who.w-fritz{ background:color-mix(in srgb, var(--hq-brand-b) 16%, #fff); color:#00745A; }
.cc-title{ all:unset; display:block; cursor:pointer; margin-top:8px; font-size:15.5px; font-weight:700; color:var(--hq-ink); line-height:1.3; }
.cc-title:hover, .cc-title:focus-visible{ color:var(--hq-accent-deep); text-decoration:underline; }
.cc-hook{ font-size:13.5px; color:var(--hq-ink-soft); margin-top:2px; line-height:1.4; text-wrap:pretty; }
.cc-hook.none{ color:var(--hq-ink-faint); font-style:italic; }
.cc-steps{ margin-top:10px; }
.cc-bars{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; }
.cc-bar{ all:unset; cursor:pointer; padding:8px 0; display:block; }
.cc-bar-fill{ display:block; height:6px; border-radius:99px; background:var(--hq-line); transition:background .15s; }
.cc-bar.done .cc-bar-fill{ background:var(--cc); }
.cc-bar.now .cc-bar-fill{ box-shadow:0 0 0 2px color-mix(in srgb, var(--cc) 30%, #fff); }
.cc-bar:hover .cc-bar-fill{ background:color-mix(in srgb, var(--cc) 55%, #fff); }
.cc-bar.done:hover .cc-bar-fill{ background:var(--cc); opacity:.8; }
.cc-bar:focus-visible{ outline:2px solid var(--hq-accent); outline-offset:1px; border-radius:4px; }
.cc-stepline{ display:flex; align-items:center; gap:8px; min-height:34px; }
.cc-back{ all:unset; cursor:pointer; width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--hq-line); background:var(--hq-card); color:var(--hq-ink-soft); font-size:17px; box-sizing:border-box; }
.cc-back:hover:not(:disabled), .cc-back:focus-visible{ border-color:var(--hq-accent); color:var(--hq-accent-deep); }
.cc-back:disabled{ opacity:.35; cursor:default; }
.cc-now{ flex:1; min-width:0; font-size:13.5px; color:var(--hq-ink); }
.cc-of{ color:var(--hq-ink-faint); font-size:12.5px; }
body.ops-mode .cc-next{ flex:none; min-height:30px; font-size:13px; white-space:nowrap; }
.cc-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:6px; padding-top:8px; border-top:1px solid var(--hq-line-soft); font-size:13px; }
.cc-results{ color:var(--hq-ink); font-weight:600; }
.cc-linkbtn{ all:unset; cursor:pointer; color:var(--hq-accent-deep); font-weight:600; }
.cc-linkbtn:hover, .cc-linkbtn:focus-visible{ text-decoration:underline; }
.cc-open{ margin-left:auto; }
.cc-out{ color:var(--hq-accent-deep); font-weight:600; text-decoration:none; }
.cc-out:hover{ text-decoration:underline; }

/* The library. */
.cc-lib-row{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1.4fr) auto; gap:14px; align-items:center;
  padding:11px 0; border-top:1px solid var(--hq-line-soft); }
.cc-lib-row:first-child{ border-top:0; }
.cc-lib-name{ font-weight:650; font-size:15px; }
.cc-lib-note{ font-size:13px; color:var(--hq-ink-faint); }
.cc-ready{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:99px; white-space:nowrap; justify-self:start; }
.cc-ready.r-ready{ background:color-mix(in srgb, var(--hq-pos) 14%, #fff); color:#00704F; }
.cc-ready.r-swap{ background:var(--warm-fill); color:var(--warm-ink); }
.cc-ready.r-client{ background:var(--hq-neg-wash); color:#B0283B; }
.cc-lib-link{ min-width:0; font-size:13px; }
.cc-path{ display:block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:var(--hq-ink-soft); overflow-wrap:anywhere; }
.cc-path.none{ font-family:inherit; color:var(--hq-ink-faint); }

/* The post and library forms, inside Shared work's dialog. */
.cc-dialog-title{ font-size:19px; margin:0 0 4px; }
.cc-part{ margin:20px 0 -4px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hq-ink-faint); }
.cc-form .work-field{ margin:12px 0; }
.cc-pills{ border:0; margin:12px 0; padding:0; min-width:0; }
.cc-pills legend{ padding:0; margin-bottom:6px; font-size:14px; font-weight:600; }
.cc-pill-row{ display:flex; flex-wrap:wrap; gap:6px; }
.cc-pill{ position:relative; display:inline-flex; cursor:pointer; }
.cc-pill input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.cc-pill span{ display:inline-block; padding:6px 12px; border-radius:99px; border:1px solid var(--hq-line); background:var(--hq-card);
  font-size:13.5px; font-weight:600; color:var(--hq-ink-soft); }
.cc-pill input:checked + span{ background:var(--hq-accent); border-color:var(--hq-accent); color:#fff; }
.cc-pill input:focus-visible + span{ outline:2px solid var(--hq-accent); outline-offset:2px; }
.cc-nums{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; align-items:end; }
.cc-nums .work-field{ margin:0; }
.cc-err{ color:var(--hq-neg); font-size:14px; font-weight:600; min-height:1px; margin-top:10px; }
.cc-err:empty{ margin:0; }
.cc-dialog-acts{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.cc-delete{ margin-left:auto; }

/* The Content Studio (2026-10-06): the two tabs, the pieces on a post, and the Library. Each type has one color:
   footage grey, clip indigo, demo amber, final mint. A piece that has left the Drive folder is faded, never hidden. */
.cc-tabs{ display:flex; gap:4px; margin:4px 0 14px; border-bottom:1px solid var(--hq-line); }
.cc-tab{ all:unset; cursor:pointer; padding:9px 14px 10px; font-size:14.5px; font-weight:650; color:var(--hq-ink-faint);
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.cc-tab:hover{ color:var(--hq-ink); }
.cc-tab.on{ color:var(--hq-accent-deep); border-bottom-color:var(--hq-accent); }
.cc-tab:focus-visible{ outline:2px solid var(--hq-accent); outline-offset:2px; border-radius:6px; }

/* Video rules (app/ops-video-rules.js, HQ video editor step 4). */
.vr-lede{ margin:0 0 16px; color:var(--hq-ink-soft); font-size:15px; max-width:62ch; }
.vr-group{ margin:0 0 22px; }
.vr-h{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--hq-ink-faint); margin:0 0 8px; }
.vr-rule{ background:#fff; border:1px solid var(--hq-line); border-radius:12px; padding:14px 16px; margin:0 0 8px; max-width:760px; }
.vr-rule.off .vr-text{ color:var(--hq-ink-faint); text-decoration:line-through; text-decoration-color:rgba(0,0,0,.25); }
.vr-text{ margin:0 0 4px; font-size:15.5px; line-height:1.45; color:var(--hq-ink); text-wrap:pretty; }
.vr-meta{ font-size:13px; color:var(--hq-ink-faint); }
.vr-ex{ margin:8px 0 0; font-size:13.5px; color:var(--hq-ink-soft); }
.vr-ex summary{ cursor:pointer; font-weight:600; }
.vr-ex ul{ margin:6px 0 0; padding-left:18px; }
.vr-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.vr-input{ width:100%; box-sizing:border-box; font:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--hq-line); border-radius:10px; resize:vertical; }
.vr-new{ border-color:var(--hq-accent); }
/* Where each rule applies (2026-10-07): the filter, the words on each rule, and the picker. */
.vr-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 14px; max-width:760px; }
.vr-filter-lead{ font-size:14px; font-weight:600; color:var(--hq-ink-soft); }
.vr-count{ margin:-6px 0 14px; font-size:13px; color:var(--hq-ink-faint); }
.vr-scope{ display:inline-block; margin:2px 0 4px; padding:2px 9px; border-radius:99px; background:var(--hq-fill); font-size:12.5px; font-weight:600; color:var(--hq-ink-soft); }
.vr-pick{ margin-top:10px; padding-top:10px; border-top:1px solid var(--hq-line); }
.vr-pick-row{ margin:0 0 10px; }
.vr-pick-label{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--hq-ink-faint); margin:0 0 6px; }
@media (max-width:640px){ .vr-actions .btn{ min-height:44px; } .vr-chips .cc-chip{ padding:10px 14px; } .vr-filter-lead{ flex-basis:100%; } .vr-filter{ flex:1 1 140px; min-width:0; } }
.cc-pieces{ font-size:12.5px; color:var(--hq-ink-soft); margin-top:6px; line-height:1.4; overflow-wrap:anywhere; }
.cc-pieces-k{ font-weight:700; color:var(--hq-ink); }

.cc-kind{ --k:var(--hq-ink-faint); font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap;
  background:color-mix(in srgb, var(--k) 13%, #fff); color:color-mix(in srgb, var(--k) 78%, #000); }
.k-footage{ --k:#6B7280; } .k-clip{ --k:var(--hq-accent); } .k-demo{ --k:#C98A00; } .k-final{ --k:var(--hq-pos); }

.cc-drive{ background:var(--hq-card); border:1px solid var(--hq-line); border-radius:14px; padding:14px 18px; margin:0 0 16px; }
.cc-drive.off{ border-color:color-mix(in srgb, var(--hq-accent) 35%, #fff); background:color-mix(in srgb, var(--hq-accent) 4%, #fff); }
.cc-drive-title{ font-size:16px; margin:0 0 6px; }
.cc-drive-steps{ margin:0 0 12px; padding-left:20px; font-size:14px; color:var(--hq-ink-soft); line-height:1.5; text-wrap:pretty; }
.cc-drive-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cc-drive-words{ min-width:0; }
.cc-drive-sub{ font-size:13px; color:var(--hq-ink-faint); margin-top:2px; }
.cc-drive-err{ font-size:13.5px; color:var(--hq-neg); font-weight:600; margin-top:4px; }
.cc-drive-acts{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13.5px; }
.cc-drive-form .work-field{ margin:4px 0 6px; }
.cc-drive.off .cc-drive-form{ margin-top:18px; padding-top:14px; border-top:1px solid var(--hq-line); }

body.ops-mode .under.cc-library{ padding:14px 18px; }
.cc-filters{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; }
.cc-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.cc-chip{ all:unset; cursor:pointer; padding:6px 12px; border-radius:99px; border:1px solid var(--hq-line); background:var(--hq-card);
  font-size:13.5px; font-weight:600; color:var(--hq-ink-soft); }
.cc-chip[aria-pressed="true"]{ background:var(--hq-accent); border-color:var(--hq-accent); color:#fff; }
.cc-chip:focus-visible{ outline:2px solid var(--hq-accent); outline-offset:2px; }
.cc-filter-right{ display:flex; gap:8px; flex-wrap:wrap; min-width:0; }
.cc-build-filter{ padding:8px 10px; border:1px solid #c8cdda; border-radius:8px; font:inherit; font-size:14px; background:#fff; color:var(--hq-ink); max-width:100%; }
body.ops-mode .cc-search{ width:240px; max-width:100%; margin:0; }
.cc-count{ font-size:12.5px; color:var(--hq-ink-faint); margin:10px 0 2px; }
.cc-empty, .cc-none-match{ padding:12px 0 4px; }

.cc-item{ display:grid; grid-template-columns:72px minmax(0, 1fr) auto; gap:14px; align-items:start; padding:14px 0; border-top:1px solid var(--hq-line-soft); }
.cc-items .cc-item:first-child{ border-top:0; }
.cc-item[hidden]{ display:none; }
.cc-item.gone{ opacity:.6; }
.cc-thumb{ --k:#6B7280; position:relative; width:72px; height:72px; border-radius:10px; overflow:hidden;
  background:color-mix(in srgb, var(--k) 12%, #fff); display:flex; align-items:center; justify-content:center; }
.cc-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cc-thumb-go{ cursor:pointer; }
.cc-thumb-go:hover{ box-shadow:0 0 0 2px var(--accent, #6d5ce8); }
.cc-play{ position:absolute; right:5px; bottom:5px; width:22px; height:22px; border-radius:50%; background:rgba(17,17,17,.78); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; }
.cc-player-dialog{ width:min(460px, 94vw); }
.cc-preparing{ display:inline-block; font-size:12px; font-weight:600; color:#92400E; background:#FEF3C7; border-radius:6px; padding:2px 8px; }
.cc-preparing-note{ display:block; margin:0 0 10px; font-size:13px; line-height:1.4; text-wrap:balance; }
.cc-player{ display:block; width:100%; aspect-ratio:9/16; max-height:72vh; border:0; border-radius:12px; background:#000; }
/* The original file in the browser's own player: its own shape, wider for a landscape video. */
.cc-player-dialog.wide{ width:min(920px, 94vw); }
.cc-video{ aspect-ratio:auto; height:auto; object-fit:contain; }
.cc-fallback-note{ margin:0 0 10px; font-size:13px; line-height:1.45; color:#4B5563; text-wrap:pretty; }
/* Google's player gives up height to the lines above it, so Close stays on screen on a phone. */
.cc-fallback-note ~ .cc-player{ max-height:56vh; }
.cc-preparing-note ~ .cc-player{ max-height:46vh; }
.cc-thumb-k{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb, var(--k) 78%, #000); }
.cc-thumb img + .cc-thumb-k{ display:none; }
.cc-item-main{ min-width:0; }
.cc-item .cc-title{ margin-top:0; }
.cc-item-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; font-size:13px; color:var(--hq-ink-faint); }
.cc-gone{ font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--hq-neg-wash); color:#B0283B; }
.cc-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.cc-tag{ font-size:12px; padding:1px 8px; border-radius:6px; background:var(--hq-fill); color:var(--hq-ink-soft); }
.cc-used{ margin-top:8px; font-size:13px; color:var(--hq-ink); line-height:1.45; }
.cc-used-none{ color:var(--hq-ink-faint); }
.cc-used-line{ overflow-wrap:anywhere; }
.cc-item-acts{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; font-size:13.5px; max-width:220px; }
.cc-item-acts .cc-path{ text-align:right; }

/* In the dialogs: the pieces on a post, and where an item has been used. */
.cc-piece-list{ display:grid; gap:6px; margin-top:8px; }
.cc-piece-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--hq-line); border-radius:9px; font-size:14px; }
.cc-piece-title{ flex:1; min-width:0; overflow-wrap:anywhere; }
.cc-piece-note{ margin-top:8px; }
.cc-attach{ display:flex; align-items:flex-end; gap:8px; margin-top:10px; }
.cc-attach .work-field{ flex:1; min-width:0; margin:0; }
.cc-attach .btn{ min-height:42px; }
.cc-drive-facts{ margin:12px 0; padding:10px 12px; border-radius:9px; background:var(--hq-fill); font-size:14px; color:var(--hq-ink-soft); }
.cc-nums.cc-nums-2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

@media (max-width:900px){
  .cc-day{ grid-template-columns:minmax(0, 1fr); gap:8px; }
  .cc-dayhead{ flex-direction:row; align-items:center; gap:8px; }
  .cc-add{ margin:0 0 0 auto; }
  .cc-lib-row{ grid-template-columns:minmax(0, 1fr) auto; gap:8px 12px; }
  .cc-lib-link{ grid-column:1 / -1; }
  .cc-plan{ grid-column:1 / -1; justify-self:start; }
  .cc-item{ grid-template-columns:64px minmax(0, 1fr); }
  .cc-thumb{ width:64px; height:64px; }
  .cc-item-acts{ grid-column:2; flex-direction:row; align-items:center; flex-wrap:wrap; max-width:none; }
  .cc-item-acts .cc-path{ text-align:left; }
}
@media (max-width:560px){
  .cc-cards{ grid-template-columns:minmax(0, 1fr); }
  body.ops-mode .under.cc-week{ padding:4px 14px; }
  .cc-nums{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .cc-nums .work-field{ margin:12px 0 0; }
  .cc-delete{ margin-left:0; }
  .cc-filter-right{ width:100%; }
  .cc-build-filter, body.ops-mode .cc-search{ flex:1 1 140px; width:auto; }
  .cc-nums.cc-nums-2{ grid-template-columns:minmax(0, 1fr); }
  .cc-attach{ flex-direction:column; align-items:stretch; }
}

/* ================================================================ the video editor (app/ops-video.js)
   Content › Editor: the list of edits, then a timeline. Everything here is prefixed ve-. */
.ve-list{ padding:4px 0; }
.ve-row{ all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:14px; padding:14px 18px; cursor:pointer;
  border-top:1px solid var(--hq-line-soft); }
.ve-row:first-child{ border-top:0; }
.ve-row:hover{ background:var(--tint); }
.ve-row:focus-visible{ outline:2px solid var(--hq-accent); outline-offset:-2px; border-radius:10px; }
.ve-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ve-row-title{ font-size:15.5px; font-weight:650; color:var(--hq-ink); overflow-wrap:anywhere; text-wrap:balance; }
.ve-row-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; color:var(--hq-ink-faint); }
.ve-row-right{ display:flex; align-items:center; gap:10px; flex:none; }
.ve-row-job{ font-size:13px; color:var(--hq-accent-deep); font-weight:600; }
.ve-list-note{ margin-top:10px; }
.ve-plat{ font-size:12px; font-weight:650; color:var(--hq-ink-soft); background:var(--hq-fill); border-radius:6px; padding:2px 7px; }
.ve-pill{ font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; background:var(--hq-fill); color:var(--hq-ink-soft); white-space:nowrap; }
.ve-pill.ve-st-approved{ background:var(--hq-accent-wash); color:var(--hq-accent-deep); }
.ve-pill.ve-st-delivered{ background:#E3F6EF; color:#00785A; }

/* ---- one edit, on a computer: the page gets the whole width ---- */
body.ops-mode .screen:has(.ve-edit){ max-width:none; }
.ve-edit{ --ve-frame-h:clamp(220px, calc(100vh - 580px), 560px); display:flex; flex-direction:column; gap:10px; }
.ve-top{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap;
  background:var(--hq-card); border-radius:14px; padding:10px 14px; box-shadow:var(--shadow-1), var(--shadow-2); }
.ve-top-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.ve-titlebox{ min-width:0; }
.ve-title{ font-size:18px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.ve-top-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:3px; font-size:13px; color:var(--hq-ink-faint); }
.ve-version{ font:inherit; font-size:13px; color:var(--hq-ink); border:1px solid var(--hq-line); border-radius:7px; padding:3px 6px; background:#fff; }
.ve-dirty{ font-size:12px; font-weight:700; color:var(--warm-ink); background:var(--warm-fill); border-radius:999px; padding:2px 9px; }
.ve-acts{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ve-strips{ display:flex; flex-direction:column; gap:6px; }
.ve-strips:empty{ display:none; }
.ve-strip{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; border-radius:10px; padding:8px 14px; font-size:14px; font-weight:600; }
.ve-strip-text{ flex:1 1 260px; min-width:0; }
.ve-strip-warn{ background:var(--warm-fill); color:var(--warm-ink); }
.ve-strip-bad{ background:var(--hq-neg-wash); color:#A3283A; }
.ve-strip-info{ background:var(--hq-accent-wash); color:var(--hq-accent-deep); }
.ve-strip-good{ background:#E3F6EF; color:#00785A; }
.ve-problems{ flex-basis:100%; margin:2px 0 0 18px; padding:0; font-weight:500; font-size:13.5px; }

.ve-body{ display:flex; gap:12px; align-items:stretch; min-height:0; }
.ve-player{ flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--hq-card); border-radius:14px;
  padding:12px; box-shadow:var(--shadow-1), var(--shadow-2); }
.ve-frame{ position:relative; height:var(--ve-frame-h); aspect-ratio:9 / 16; overflow:hidden; border-radius:10px; background:#111; }
.ve-stage{ position:absolute; left:0; top:0; width:1080px; height:1920px; transform-origin:0 0; overflow:hidden; }
.ve-vids, .ve-layer{ position:absolute; inset:0; }
.ve-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.ve-vid.on{ opacity:1; }
.ve-audio{ display:none; }
.ve-controls{ display:flex; align-items:center; gap:10px; }
.ve-play{ min-width:74px; }
.ve-time{ font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--hq-ink-soft); white-space:nowrap; }

/* The text looks, copied from ops/video-studio/editor/styles/ (a test keeps these identical to the files).
   The stage is 1080x1920 like the renderer's page and is scaled down as a whole. ve-js and ve-bs are the safe
   looks (2026-10-08): the same two, inside Instagram's safe zone, for every new cut. */
@font-face{ font-family:I; src:url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight:100 900; }
.ve-stage .ve-jo-c{position:absolute;left:120px;width:840px;top:1410px;text-align:center;font:900 62px/1.1 I,Arial,sans-serif;color:#fff;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance;-webkit-text-stroke:9px #000;paint-order:stroke fill;text-shadow:0 4px 18px rgba(0,0,0,.55)}
.ve-stage .ve-bb-wrap{position:absolute;left:0;width:1080px;top:150px;text-align:center}
.ve-stage .ve-bb-l{display:inline-block;max-width:960px;box-sizing:border-box;background:#000;color:#fff;font:900 80px/88px I,Arial,sans-serif;letter-spacing:-.015em;padding:14px 32px 16px;border-radius:16px;white-space:normal;text-wrap:balance}
.ve-stage .ve-js-c{position:absolute;left:120px;width:840px;bottom:704px;text-align:center;font:900 62px/1.1 I,Arial,sans-serif;color:#fff;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance;-webkit-text-stroke:9px #000;paint-order:stroke fill;text-shadow:0 4px 18px rgba(0,0,0,.55)}
.ve-stage .ve-bs-wrap{position:absolute;left:0;width:1080px;top:290px;text-align:center}
.ve-stage .ve-bs-l{display:inline-block;max-width:950px;box-sizing:border-box;background:#000;color:#fff;font:900 80px/88px I,Arial,sans-serif;letter-spacing:-.015em;padding:14px 27px 16px;border-radius:16px;white-space:normal;text-wrap:balance}

.ve-side{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; max-height:calc(var(--ve-frame-h) + 66px); overflow:auto; }
.ve-ins, .ve-final, .ve-lib{ background:var(--hq-card); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-1), var(--shadow-2); }
.ve-ins-title{ font-size:15px; font-weight:700; margin:0 0 6px; }
.ve-ins-note{ font-size:13.5px; color:var(--hq-ink-faint); margin:4px 0; text-wrap:pretty; }
.ve-ins-file{ font-size:13px; color:var(--hq-ink-soft); margin-bottom:8px; overflow-wrap:anywhere; }
.ve-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px 12px; margin:8px 0; }
.ve-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ve-field-wide{ margin:6px 0; }
.ve-flabel{ font-size:12px; font-weight:650; color:var(--hq-ink-soft); }
.ve-input{ font:inherit; font-size:14px; color:var(--hq-ink); border:1px solid var(--hq-line); border-radius:8px; padding:6px 9px; background:#fff; min-width:0; }
.ve-input:focus{ outline:2px solid var(--hq-accent); outline-offset:0; border-color:transparent; }
.ve-input[aria-invalid="true"]{ border-color:var(--hq-neg); }
.ve-text{ resize:vertical; line-height:1.4; }
.ve-ferr{ font-size:12px; font-weight:600; color:var(--hq-neg); min-height:0; }
.ve-ferr:empty{ display:none; }
.ve-range{ width:100%; accent-color:var(--hq-accent); }
.ve-ins-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ve-allvoice{ grid-template-columns:minmax(0, 240px); border-top:1px solid var(--hq-line-soft); padding-top:10px; }
.ve-final-video{ width:100%; max-height:240px; background:#000; border-radius:10px; }
.ve-path{ font-size:12.5px; color:var(--hq-ink-soft); background:var(--hq-fill); border-radius:7px; padding:6px 8px; overflow-wrap:anywhere; }
.ve-postcap{ margin-top:10px; }

.ve-lib-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ve-lib-list{ display:flex; flex-direction:column; margin-top:6px; }
.ve-lib-folder{ font-size:12px; font-weight:700; color:var(--hq-ink-faint); text-transform:uppercase; letter-spacing:.04em; margin:10px 0 4px; overflow-wrap:anywhere; }
.ve-lib-row{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; cursor:grab; font-size:13.5px; }
.ve-lib-row:hover{ background:var(--tint); }
.ve-lib-name{ flex:1; min-width:0; overflow-wrap:anywhere; }
.ve-lib-kind{ font-size:11px; font-weight:700; color:var(--hq-accent-deep); background:var(--hq-accent-wash); border-radius:5px; padding:1px 6px; }
.ve-lib-len{ font-variant-numeric:tabular-nums; color:var(--hq-ink-faint); font-size:12.5px; white-space:nowrap; }
.ve-lib-acts{ display:flex; gap:4px; flex:none; }

/* ---- the tracks ---- */
.ve-tracks{ background:var(--hq-card); border-radius:14px; box-shadow:var(--shadow-1), var(--shadow-2); padding:8px 0 10px; }
.ve-tbar{ display:flex; align-items:center; gap:6px; padding:0 12px 8px; flex-wrap:wrap; }
.ve-zoom{ margin-left:auto; display:flex; gap:2px; }
.ve-twrap{ display:flex; }
.ve-thead{ flex:none; width:78px; border-right:1px solid var(--hq-line); }
.ve-lh{ display:flex; align-items:center; padding-left:12px; font-size:12px; font-weight:650; color:var(--hq-ink-soft); box-sizing:border-box; }
.ve-tscroll{ flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; }
.ve-lanes{ position:relative; user-select:none; -webkit-user-select:none; touch-action:none; }
.ve-lane{ position:relative; box-sizing:border-box; border-bottom:1px solid var(--hq-line-soft); }
.ve-lane.drop{ background:var(--hq-accent-wash); }
.ve-lh-ruler, .ve-lane-ruler{ height:24px; }
.ve-lh-clip, .ve-lane-clip{ height:58px; }
.ve-lh-caption, .ve-lane-caption{ height:34px; }
.ve-lh-hook, .ve-lane-hook{ height:34px; }
.ve-lh-voice, .ve-lane-voice{ height:44px; }
.ve-lh-music, .ve-lane-music{ height:34px; }
.ve-lane-ruler{ cursor:ew-resize; background:var(--tint); }
.ve-tick{ position:absolute; top:0; height:100%; border-left:1px solid var(--hq-line); padding-left:3px; font-size:10.5px; line-height:24px;
  color:var(--hq-ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none; }
.ve-endmark{ position:absolute; top:0; height:100%; border-left:2px solid var(--hq-ink-soft); pointer-events:none; }
.ve-block{ position:absolute; top:4px; bottom:4px; box-sizing:border-box; border-radius:7px; overflow:hidden; cursor:grab;
  display:flex; align-items:center; border:2px solid transparent; outline:none; }
.ve-block.sel{ border-color:var(--hq-ink); box-shadow:0 0 0 2px #fff inset; }
.ve-block.drag{ z-index:5; opacity:.85; cursor:grabbing; box-shadow:0 6px 18px rgba(20,30,60,.25); }
.ve-blabel{ position:relative; z-index:1; padding:0 10px; font-size:11.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.ve-b-clip{ background:#3B4A6B; color:#fff; align-items:flex-end; }
.ve-b-clip .ve-blabel{ background:rgba(0,0,0,.45); border-radius:5px; margin:0 0 3px 6px; padding:1px 6px; }
.ve-film{ position:absolute; left:0; top:0; bottom:0; overflow:hidden; pointer-events:none; }
.ve-film-img{ position:absolute; top:0; height:100%; max-width:none; }
.ve-hold{ position:absolute; right:0; top:0; bottom:0; background:repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px);
  font-size:10px; color:#fff; display:flex; align-items:flex-start; justify-content:center; padding-top:2px; pointer-events:none; }
.ve-b-cap{ background:#FDF0C4; color:#5B4300; }
.ve-b-hook{ background:#1B1F2A; color:#fff; }
.ve-b-voice{ background:#00A377; color:#fff; }
.ve-wave{ position:absolute; left:0; top:4px; height:32px; pointer-events:none; }
.ve-b-music{ background:#8E7DF0; color:#fff; }
.ve-addmusic{ position:absolute; top:2px; min-height:28px; }
.ve-h{ position:absolute; top:0; bottom:0; width:9px; z-index:2; cursor:ew-resize; }
.ve-h-l{ left:0; } .ve-h-r{ right:0; }
.ve-block.sel .ve-h{ background:rgba(255,255,255,.55); }
.ve-block:hover .ve-h{ background:rgba(255,255,255,.35); }
.ve-playhead{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--hq-neg); z-index:6; pointer-events:none; }
.ve-dropmark{ position:absolute; top:24px; height:58px; width:3px; margin-left:-1px; background:var(--hq-accent); z-index:7; pointer-events:none; }

.ve-dialog .ve-preview-video{ width:100%; max-height:70vh; background:#000; border-radius:10px; }

/* ---- pinned notes (Mac) ---- */
.ve-pin{ all:unset; position:absolute; top:2px; width:16px; height:20px; margin-left:-8px; z-index:4; cursor:pointer;
  background:var(--hq-mid); border-radius:4px 4px 4px 0; box-shadow:0 1px 3px rgba(20,30,60,.3); }
.ve-pin::after{ content:''; position:absolute; left:0; bottom:-6px; width:2px; height:6px; background:#B7860B; }
.ve-pin.sel, .ve-pin:focus-visible{ outline:2px solid var(--hq-ink); outline-offset:1px; }
.ve-notes{ border-top:1px solid var(--hq-line-soft); margin-top:10px; padding-top:10px; }
.ve-notes-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.ve-note-row{ all:unset; box-sizing:border-box; width:100%; display:flex; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; font-size:13.5px; }
.ve-note-row:hover{ background:var(--tint); }
.ve-note-row:focus-visible{ outline:2px solid var(--hq-accent); }
.ve-note-at{ flex:none; font-variant-numeric:tabular-nums; font-weight:650; color:#8A6A00; }
.ve-note-text{ min-width:0; overflow-wrap:anywhere; text-wrap:balance; }
.ve-notebody{ font-size:15px; line-height:1.45; margin:6px 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.ve-notetext{ width:100%; box-sizing:border-box; }

/* ---- one edit, on a phone: watch, quick fixes, notes, save ---- */
.ve-phone{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:12px; }
.ve-phone .btn{ min-height:44px; font-size:14px; }
.ve-phone .ve-back{ align-self:flex-start; padding-left:0; }
.ve-phone-title{ font-size:20px; font-weight:700; text-wrap:balance; }
.ve-pmeta{ font-size:14px; gap:8px; }
.ve-phone .ve-plat, .ve-phone .ve-pill, .ve-phone .ve-dirty{ font-size:13px; padding:4px 10px; }
.ve-pselect{ -webkit-appearance:none; appearance:none; font-size:16px; min-height:44px; padding:0 34px 0 12px; border-radius:10px;
  background:#fff linear-gradient(45deg, transparent 50%, var(--hq-ink-soft) 50%) no-repeat calc(100% - 18px) 50% / 6px 6px,
  linear-gradient(-45deg, transparent 50%, var(--hq-ink-soft) 50%) no-repeat calc(100% - 13px) 50% / 6px 6px; }
.ve-pselect{ background-color:#fff; }
.ve-upselect{ padding-right:34px !important; background:#fff linear-gradient(45deg, transparent 50%, var(--hq-ink-soft) 50%) no-repeat calc(100% - 18px) 50% / 6px 6px,
  linear-gradient(-45deg, transparent 50%, var(--hq-ink-soft) 50%) no-repeat calc(100% - 13px) 50% / 6px 6px; background-color:#fff; }
.ve-pplayer{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.ve-pvideo{ width:100%; height:min(62vh, calc((100vw - 64px) * 16 / 9)); background:#000; border-radius:12px; }
.ve-pwait{ width:100%; box-sizing:border-box; height:min(62vh, calc((100vw - 64px) * 16 / 9)); display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
  background:#1B1F2A; color:#fff; border-radius:12px; font-size:17px; font-weight:650; text-wrap:balance; }
.ve-plabel{ font-size:13px; color:var(--hq-ink-faint); font-weight:600; }
.ve-psec{ display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--hq-line-soft); padding-top:12px; }
.ve-psec-title{ font-size:15px; font-weight:700; margin:0; }
.ve-prow{ box-sizing:border-box; width:100%; display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 10px;
  border:1px solid var(--hq-line); border-radius:10px; background:#fff; font-size:15px; text-align:left; }
button.ve-prow{ all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 10px;
  border:1px solid var(--hq-line); border-radius:10px; background:#fff; font-size:15px; cursor:pointer; }
button.ve-prow:focus-visible{ outline:2px solid var(--hq-accent); }
button.ve-prow:active{ background:var(--tint); }
.ve-pfile.on{ border-color:var(--hq-accent); background:var(--hq-accent-wash); }
.ve-pat{ flex:none; font-size:13px; font-weight:650; color:var(--hq-ink-faint); font-variant-numeric:tabular-nums; }
.ve-pwords{ flex:1; min-width:0; overflow-wrap:anywhere; text-wrap:balance; line-height:1.35; }
.ve-pnote-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ve-pnote .ve-pat{ color:#8A6A00; }
.ve-pacts{ display:flex; gap:6px; flex-wrap:wrap; flex:none; }
.ve-pclip, .ve-pnote{ flex-wrap:wrap; }
.ve-pnote{ flex-direction:column; align-items:stretch; }
.ve-pnote .ve-pacts{ justify-content:flex-start; }
.ve-pedit{ display:flex; flex-direction:column; gap:8px; padding:10px; border:2px solid var(--hq-accent); border-radius:10px; background:#fff; }
.ve-pinput{ font-size:16px; width:100%; box-sizing:border-box; }
.ve-pswap{ display:flex; flex-direction:column; gap:6px; padding:0 0 6px 14px; border-left:3px solid var(--hq-accent-wash); }
.ve-pwide{ width:100%; }
.ve-pstep{ display:flex; align-items:center; gap:14px; }
.ve-pstepbtn{ min-width:56px; font-size:22px !important; }
.ve-pspeed{ font-size:20px; font-weight:700; min-width:64px; text-align:center; font-variant-numeric:tabular-nums; }
.ve-pbar{ display:grid; grid-template-columns:auto minmax(0, 1fr) minmax(0, 1fr); gap:8px; position:sticky; bottom:76px; z-index:3;
  background:var(--hq-card); padding:8px 0; border-top:1px solid var(--hq-line-soft); }
.ve-pnote-save{ margin-top:-6px; }
.ve-phone .ve-final{ width:100%; box-sizing:border-box; box-shadow:none; padding:10px 0 0; border-top:1px solid var(--hq-line-soft); }
.ve-phone .ve-final textarea{ font-size:16px; }
.ve-phone-note{ font-size:14px; font-weight:600; color:var(--hq-ink-soft); margin:0; }
.ve-phone .ve-strip{ font-size:15px; }
.ve-phone .ve-ins-note{ font-size:14px; }

/* ---- after Approve: one-tap whys ---- */
.ve-asks{ background:var(--hq-card); border:2px solid var(--hq-accent-wash); border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; gap:10px; }
.ve-asks-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.ve-asks-title{ font-size:14px; font-weight:700; color:var(--hq-accent-deep); }
.ve-ask{ display:flex; flex-direction:column; gap:4px; }
.ve-ask-q{ font-size:14.5px; font-weight:650; }
.ve-ask-about{ font-size:13px; color:var(--hq-ink-faint); overflow-wrap:anywhere; text-wrap:balance; }
.ve-ask-opts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.ve-chip{ all:unset; box-sizing:border-box; cursor:pointer; font-size:13.5px; font-weight:600; padding:6px 12px; min-height:34px; display:inline-flex; align-items:center;
  border:1px solid var(--hq-line); border-radius:999px; background:#fff; color:var(--hq-ink); }
.ve-chip:hover{ border-color:var(--hq-accent); }
.ve-chip.on{ background:var(--hq-accent); border-color:var(--hq-accent); color:#fff; }
.ve-chip:focus-visible{ outline:2px solid var(--hq-accent); outline-offset:2px; }
.ve-phone .ve-chip{ min-height:44px; font-size:15px; padding:8px 14px; }
.ve-phone .ve-asks .btn{ min-height:44px; }

/* ---- the cold viewer's check of a Claude draft ---- */
.ve-audit{ border-top:1px solid var(--hq-line-soft); margin-top:10px; padding-top:10px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.ve-phone .ve-audit{ border:1px solid var(--hq-line); border-radius:12px; padding:12px; margin:0; }
.ve-apills{ display:flex; flex-wrap:wrap; gap:6px; }
.ve-apill{ display:inline-flex; align-items:baseline; gap:6px; font-size:13px; padding:4px 10px; border-radius:999px; background:var(--hq-fill); color:var(--hq-ink-soft); }
.ve-apill strong{ color:var(--hq-ink); font-variant-numeric:tabular-nums; }
.ve-apill.good{ background:#E3F6EF; } .ve-apill.mid{ background:var(--warm-fill); } .ve-apill.low{ background:var(--hq-neg-wash); }
.ve-swipe{ all:unset; cursor:pointer; font-size:14px; font-weight:650; color:var(--hq-accent-deep); text-decoration:underline; text-underline-offset:3px; }
.ve-swipe:focus-visible{ outline:2px solid var(--hq-accent); outline-offset:2px; }
.ve-phone .ve-swipe{ min-height:44px; display:inline-flex; align-items:center; font-size:15px; }
.ve-afixes{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.45; display:flex; flex-direction:column; gap:4px; }
.ve-afixes li{ text-wrap:balance; overflow-wrap:anywhere; }
.ve-phone .ve-afixes{ font-size:15px; }
.ve-report-text{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.55; max-height:65vh; overflow:auto; padding:2px; }
.ve-rl{ text-wrap:pretty; min-height:1.55em; }
.ve-draft{ font-size:12px; font-weight:700; color:var(--hq-accent-deep); background:var(--hq-accent-wash); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.ve-phone .ve-apill, .ve-row .ve-draft{ font-size:13px; }

/* ---- uploads ---- */
.ve-upsummary{ font-size:14px; font-weight:650; color:var(--hq-accent-deep); margin:-4px 0 10px; }
.ve-upsummary:empty{ display:none; }
.ve-updialog select, .ve-updialog input[type="text"]{ font-size:16px; }
.ve-upselect{ -webkit-appearance:none; appearance:none; font:inherit; font-size:16px; min-height:44px; border:1px solid var(--hq-line); border-radius:8px; padding:0 10px; background:#fff; }
.ve-upfiles{ font-size:15px; min-height:44px; }
.ve-uplist{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.ve-uplist:empty{ display:none; }
.ve-uprow{ border:1px solid var(--hq-line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.ve-uptop{ display:flex; gap:8px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; }
.ve-upname{ font-weight:650; font-size:15px; overflow-wrap:anywhere; min-width:0; }
.ve-upidea{ font-size:12.5px; color:var(--hq-ink-faint); }
.ve-upbar{ height:8px; border-radius:99px; background:var(--hq-fill); overflow:hidden; }
.ve-upfill{ height:100%; background:var(--hq-accent); border-radius:99px; transition:width .2s; }
.ve-up-done .ve-upfill{ background:var(--hq-pos); }
.ve-up-failed .ve-upfill, .ve-up-paused .ve-upfill{ background:var(--hq-neg); }
.ve-upstatus{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:14px; color:var(--hq-ink-soft); }
.ve-up-failed .ve-upstatus, .ve-up-paused .ve-upstatus{ color:#A3283A; font-weight:600; }
.ve-up-done .ve-upstatus{ color:#00785A; font-weight:650; }
@media (min-width:901px){ .ve-pbar{ bottom:0; } }
@media (max-width:560px){
  .ve-row{ flex-wrap:wrap; padding:12px 14px; }
  .ve-row-right{ width:100%; justify-content:flex-start; }
}
.ve-b-voice .ve-blabel{ background:rgba(0,0,0,.35); border-radius:5px; margin-left:4px; padding:0 5px; }

/* ================================================================ the Studio editor (Joe's pick C, 2026-10-07)
   One edit on a computer takes the whole screen, dark like Instagram's Edits: footage tiles left, the video as
   big as fits in the middle, Claude's chat right, a filmstrip below that opens into every track. Everything is
   scoped to .ve-studio, so the phone view and the edits list keep HQ's light look. */
body:has(.ve-studio){ overflow:hidden; }
.ve-studio{
  --vs-bg:#0B0B0D; --vs-stage:#050506; --vs-panel:#141417; --vs-panel2:#1C1C21; --vs-panel3:#26262C; --vs-line:#2A2A31;
  --vs-text:#F4F4F6; --vs-muted:#A1A1AB; --vs-dim:#73737D; --vs-accent:#8B7CF6; --vs-ok:#3DDC97; --vs-warn:#F2C14E; --vs-bad:#F27166;
  position:fixed; inset:0; z-index:16; display:grid; grid-template-rows:60px minmax(0, 1fr); gap:0;
  background:var(--vs-bg); color:var(--vs-text); font-size:14px; color-scheme:dark;
}
.ve-studio button{ font:inherit; }
.ve-studio :focus-visible{ outline:2px solid var(--vs-accent); outline-offset:2px; }

/* ---- top bar ---- */
.ve-studio .ve-top{ display:flex; align-items:center; gap:14px; padding:0 16px; background:var(--vs-bg); border-bottom:1px solid var(--vs-line);
  border-radius:0; box-shadow:none; flex-wrap:nowrap; min-width:0; }
.ve-studio .ve-top-left{ flex:1 1 auto; min-width:0; }
.ve-studio .ve-back{ all:unset; cursor:pointer; color:var(--vs-muted); font-weight:550; padding:6px 8px; border-radius:8px; white-space:nowrap; }
.ve-studio .ve-back:hover{ background:var(--vs-panel2); color:var(--vs-text); }
.ve-studio .ve-title{ font-size:16px; font-weight:650; color:var(--vs-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ve-studio .ve-top-meta{ margin:0; font-size:12.5px; color:var(--vs-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.ve-plats{ display:flex; gap:4px; background:var(--vs-panel); padding:4px; border-radius:999px; flex:none; }
.ve-platbtn{ all:unset; cursor:pointer; padding:5px 12px; border-radius:999px; color:var(--vs-muted); font-weight:550; font-size:13px; }
.ve-platbtn.on{ background:var(--vs-panel3); color:var(--vs-text); }
.ve-platbtn:hover{ color:var(--vs-text); }
.ve-studio .ve-acts{ display:flex; align-items:center; gap:8px; flex:none; flex-wrap:nowrap; }
.ve-ibtn, .ve-tbtn{ all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:34px; padding:0 12px; border-radius:999px; background:var(--vs-panel); border:1px solid var(--vs-line); color:var(--vs-text);
  font-size:13px; font-weight:600; white-space:nowrap; }
.ve-ibtn{ width:34px; padding:0; font-size:16px; }
.ve-ibtn:hover:not([disabled]), .ve-tbtn:hover:not([disabled]){ border-color:var(--vs-accent); }
.ve-ibtn[disabled], .ve-tbtn[disabled]{ opacity:.38; cursor:default; }
.ve-save{ background:var(--vs-accent); border-color:var(--vs-accent); color:#fff; }
.ve-approve{ all:unset; box-sizing:border-box; cursor:pointer; min-height:36px; padding:0 18px; border-radius:999px; background:#fff; color:#000;
  font-weight:700; font-size:14px; display:inline-flex; align-items:center; white-space:nowrap; }
.ve-approve.done{ background:var(--vs-ok); }
.ve-approve[disabled]{ opacity:.5; cursor:default; }
.ve-menu{ position:relative; }
.ve-pop{ display:none; position:absolute; right:0; top:calc(100% + 8px); width:340px; max-height:min(70vh, 520px); overflow:auto; z-index:5;
  background:var(--vs-panel2); border:1px solid var(--vs-line); border-radius:14px; padding:6px; box-shadow:0 20px 50px rgba(0,0,0,.55); }
.ve-menu.open .ve-pop{ display:block; }
.ve-moremenu .ve-pop{ width:260px; }
.ve-vrow{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; }
.ve-vrow:hover{ background:var(--vs-panel3); }
.ve-vrow.cur{ box-shadow:inset 3px 0 0 var(--vs-accent); }
.ve-vtxt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ve-vtxt b{ font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.ve-vtxt span{ font-size:12px; color:var(--vs-muted); }
.ve-vacts{ display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex:none; }
.ve-vbtn{ all:unset; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--vs-text); padding:7px 10px; border-radius:8px; display:block; text-align:left; }
.ve-moremenu .ve-vbtn{ width:100%; box-sizing:border-box; }
.ve-vbtn:hover:not([disabled]){ background:var(--vs-panel3); }
.ve-vbtn[disabled]{ opacity:.4; cursor:default; }
.ve-vgo{ color:var(--vs-accent); }

/* ---- the three columns ---- */
.ve-studio .ve-body{ display:grid; grid-template-columns:260px minmax(0, 1fr) 380px; gap:0; min-height:0; align-items:stretch; }
.ve-shelf{ background:var(--vs-panel); border-right:1px solid var(--vs-line); overflow-y:auto; padding:14px 12px 20px; min-height:0; }
.ve-shelf-title{ font-size:11.5px; font-weight:700; color:var(--vs-muted); text-transform:uppercase; letter-spacing:.06em; margin:2px 2px 10px; }
.ve-shelf-note{ color:var(--vs-muted); font-size:13px; margin:4px 2px; text-wrap:pretty; }
.ve-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
/* No all:unset here: it switches off HTML dragging in Chrome (2026-10-07), and these tiles drag onto the tracks. */
.ve-tile{ box-sizing:border-box; margin:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; justify-content:flex-start; border-radius:12px; overflow:hidden;
  background:var(--vs-panel2); border:1px solid var(--vs-line); }
.ve-tile:hover{ border-color:var(--vs-accent); }
.ve-tile:active{ cursor:grabbing; }
.ve-tpic{ position:relative; display:block; aspect-ratio:3 / 4; background:#000; overflow:hidden; }
.ve-tframe{ position:absolute; max-width:none; width:auto; pointer-events:none; }
.ve-tpic.voice{ background:linear-gradient(160deg,#0f2a20,#0b1a14); display:flex; align-items:center; justify-content:center; }
.ve-tmic{ font-size:28px; }
.ve-tused{ position:absolute; left:6px; top:6px; font-size:10.5px; font-weight:700; background:var(--vs-accent); color:#fff; padding:2px 6px; border-radius:5px; }
.ve-tlen{ position:absolute; right:6px; bottom:6px; font:600 10.5px/1 ui-monospace, Menlo, monospace; background:rgba(0,0,0,.72); padding:3px 5px; border-radius:5px; }
.ve-ttx{ display:flex; flex-direction:column; padding:7px 8px 9px; min-width:0; }
.ve-ttx b{ font-size:12.5px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.ve-ttx span{ color:var(--vs-muted); font-size:11.5px; line-height:1.3; margin-top:1px; }
.ve-tile-more .ve-tpic{ background:var(--vs-panel3); display:flex; align-items:center; justify-content:center; }
.ve-tplus{ font-size:28px; color:var(--vs-muted); }

.ve-center{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--vs-stage); }
.ve-studio .ve-strips{ padding:10px 16px 0; }
.ve-studio .ve-strip{ border-radius:10px; font-size:13.5px; }
.ve-studio .ve-strip-warn{ background:#3A2E10; color:#F7D98A; }
.ve-studio .ve-strip-bad{ background:#3B1A1E; color:#F6A6AE; }
.ve-studio .ve-strip-info{ background:#211D3D; color:#C9C1FF; }
.ve-studio .ve-strip-good{ background:#10291F; color:#8FE8C0; }
.ve-studio .ve-player{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:transparent; box-shadow:none; border-radius:0; padding:14px 16px 10px; }
.ve-studio .ve-frame{ height:calc(100% - 46px); max-width:100%; border-radius:16px; box-shadow:0 0 0 1px #1d1d22, 0 30px 80px rgba(0,0,0,.6); }
.ve-studio .ve-controls{ gap:12px; position:relative; z-index:1; }
.ve-studio .ve-play.btn{ all:unset; box-sizing:border-box; cursor:pointer; min-width:84px; min-height:34px; padding:0 16px; border-radius:999px; background:#fff; color:#000;
  font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; justify-content:center; }
.ve-studio .ve-time{ color:var(--vs-muted); }

/* ---- the filmstrip and tracks ---- */
.ve-studio .ve-tracks{ background:var(--vs-panel); border-top:1px solid var(--vs-line); border-radius:0; box-shadow:none; padding:8px 0 10px; flex:none; }
.ve-studio .ve-tbar{ padding:0 12px 8px; gap:8px; }
.ve-tlabel{ font-size:12px; font-weight:650; color:var(--vs-muted); }
.ve-grow{ flex:1; }
.ve-studio .ve-zoom{ margin-left:auto; gap:4px; }
.ve-tracksbtn{ margin-left:auto; }
.ve-studio .ve-zoom + .ve-tracksbtn{ margin-left:8px; }
.ve-studio .ve-thead{ border-right:1px solid var(--vs-line); }
.ve-studio .ve-lh{ color:var(--vs-muted); }
.ve-studio .ve-lane{ border-bottom:1px solid #1f1f25; }
.ve-studio .ve-lane-ruler{ background:var(--vs-panel2); }
.ve-studio .ve-tick{ border-left-color:var(--vs-line); color:var(--vs-dim); }
.ve-studio .ve-endmark{ border-left-color:var(--vs-muted); }
.ve-studio .ve-b-clip{ background:#2A3550; }
.ve-studio .ve-b-cap{ background:rgba(242,193,78,.16); color:#F8DE9C; border-color:rgba(242,193,78,.35); }
.ve-studio .ve-b-hook{ background:#E9E9EE; color:#000; }
.ve-studio .ve-block.sel{ border-color:#fff; box-shadow:0 0 0 2px var(--vs-accent) inset; }
.ve-studio .ve-playhead{ background:#fff; }
.ve-studio .ve-addmusic{ all:unset; cursor:pointer; position:absolute; top:6px; font-size:12px; color:var(--vs-muted); }
.ve-studio .ve-collapsed .ve-thead{ display:none; }
.ve-studio .ve-collapsed .ve-lane-caption, .ve-studio .ve-collapsed .ve-lane-hook,
.ve-studio .ve-collapsed .ve-lane-voice, .ve-studio .ve-collapsed .ve-lane-music{ display:none; }
.ve-studio .ve-collapsed .ve-lane-clip{ height:64px; }

/* ---- the right column: chat, or the picked block's details ---- */
.ve-studio .ve-side{ background:var(--vs-panel); border-left:1px solid var(--vs-line); display:flex; flex-direction:column; gap:0; max-height:none;
  min-height:0; overflow:hidden; }
.ve-chat{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.ve-chathead{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--vs-line); }
.ve-av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#D97757,#8B7CF6); display:grid; place-items:center;
  font-weight:800; font-size:13px; color:#fff; flex:none; }
.ve-chatwho{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ve-chatwho b{ font-size:14px; }
.ve-chatwho span{ color:var(--vs-muted); font-size:12px; }
.ve-notesbtn{ all:unset; cursor:pointer; font-size:12.5px; font-weight:600; padding:5px 9px; border-radius:999px; background:var(--vs-panel2); border:1px solid var(--vs-line); }
.ve-msgs{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.ve-m{ max-width:92%; padding:10px 12px; border-radius:14px; font-size:13.5px; line-height:1.45; text-wrap:pretty; overflow-wrap:anywhere; }
.ve-m-ai{ align-self:flex-start; background:var(--vs-panel2); border:1px solid var(--vs-line); border-top-left-radius:4px; }
.ve-m-me{ align-self:flex-end; background:var(--vs-accent); color:#fff; border-top-right-radius:4px; display:flex; flex-direction:column; gap:3px; }
.ve-m-at{ font-size:11.5px; opacity:.8; }
.ve-m-sys{ align-self:center; color:var(--vs-muted); font-size:12.5px; padding:2px 8px; text-align:center; }
.ve-m-err{ color:var(--vs-bad); }
.ve-score{ color:var(--vs-warn); }
.ve-more{ all:unset; cursor:pointer; color:var(--vs-accent); font-weight:600; }
.ve-working{ color:var(--vs-muted); }
.ve-dots{ display:inline-block; width:22px; height:8px; vertical-align:middle;
  background:radial-gradient(circle, var(--vs-muted) 3px, transparent 3.5px) 0 50% / 8px 8px repeat-x; animation:ve-blink 1s infinite; }
@keyframes ve-blink{ 50%{ opacity:.35; } }
.ve-applied{ display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--vs-line); font-size:12.5px; font-weight:600; color:var(--vs-ok); }
.ve-revert{ all:unset; cursor:pointer; margin-left:auto; color:var(--vs-text); background:var(--vs-panel3); border-radius:8px; padding:4px 10px; font-weight:600; }
.ve-usage{ display:block; margin-top:6px; font-size:11.5px; color:var(--vs-dim); }
.ve-chips{ display:flex; flex-direction:column; gap:6px; padding:0 16px 10px; }
.ve-chipq{ all:unset; box-sizing:border-box; cursor:pointer; font-size:12.5px; line-height:1.35; padding:8px 11px; border-radius:12px; background:var(--vs-panel2);
  border:1px solid var(--vs-line); text-wrap:pretty; }
.ve-chipq:hover{ border-color:var(--vs-accent); }
.ve-studio .ve-askrow{ display:flex; gap:8px; align-items:flex-end; padding:12px 14px 14px; border-top:1px solid var(--vs-line); }
.ve-studio .ve-askbox{ flex:1; resize:none; min-height:46px; max-height:140px; padding:11px 13px; border-radius:14px; background:var(--vs-panel2); border:1px solid var(--vs-line);
  color:var(--vs-text); font:inherit; font-size:14px; line-height:1.4; outline:none; }
.ve-studio .ve-askbox:focus{ border-color:var(--vs-accent); }
.ve-askbox[disabled]{ opacity:.55; }
.ve-send{ all:unset; cursor:pointer; width:46px; height:46px; border-radius:50%; background:var(--vs-accent); color:#fff; display:grid; place-items:center;
  font-size:18px; font-weight:700; flex:none; }
.ve-send[disabled]{ opacity:.4; cursor:default; }
.ve-backchat{ all:unset; cursor:pointer; color:var(--vs-accent); font-weight:600; font-size:13px; margin:0 0 8px; }
.ve-studio .ve-ins, .ve-studio .ve-final, .ve-studio .ve-lib{ background:transparent; box-shadow:none; border-radius:0; padding:14px 16px; overflow-y:auto; min-height:0; }
.ve-studio .ve-final{ border-top:1px solid var(--vs-line); flex:none; max-height:45%; }
.ve-studio .ve-lib{ flex:1 1 auto; }
.ve-studio .ve-ins{ flex:1 1 auto; }
.ve-studio .ve-ins-title{ color:var(--vs-text); }
.ve-studio .ve-ins-note, .ve-studio .ve-ins-file, .ve-studio .ve-flabel{ color:var(--vs-muted); }
.ve-studio .ve-input{ background:var(--vs-panel2); border-color:var(--vs-line); color:var(--vs-text); }
.ve-studio .ve-path{ background:var(--vs-panel2); color:var(--vs-muted); }
.ve-studio .btn-secondary, .ve-studio .btn-ghost{ background:var(--vs-panel2); color:var(--vs-text); border:1px solid var(--vs-line); }
.ve-studio .btn-ghost{ background:transparent; }
.ve-studio .btn-primary{ background:var(--vs-accent); color:#fff; }
.ve-studio .danger{ color:var(--vs-bad); }
.ve-studio .ve-lib-row:hover, .ve-studio .ve-note-row:hover{ background:var(--vs-panel2); }
.ve-studio .ve-lib-kind{ background:#211D3D; color:#C9C1FF; }
.ve-studio .ve-lib-folder, .ve-studio .ve-lib-len{ color:var(--vs-muted); }
.ve-studio .ve-notes{ border-top:0; margin-top:0; padding-top:0; }
.ve-studio .ve-asks{ background:var(--vs-panel2); border-color:#2E2852; }
.ve-studio .ve-asks-title{ color:#C9C1FF; }
.ve-studio .ve-chip{ background:var(--vs-panel3); border-color:var(--vs-line); color:var(--vs-text); }
.ve-studio .ve-chip.on{ background:var(--vs-accent); border-color:var(--vs-accent); }
.ve-studio .ve-apill{ background:var(--vs-panel3); color:var(--vs-muted); }
.ve-studio .ve-apill strong{ color:var(--vs-text); }

/* Narrower laptop windows: the shelf and chat give up width before the video does. */
@media (max-width:1280px){ .ve-studio .ve-body{ grid-template-columns:200px minmax(0, 1fr) 330px; } }
@media (max-width:1100px){ .ve-studio .ve-body{ grid-template-columns:168px minmax(0, 1fr) 300px; } .ve-studio .ve-tiles{ grid-template-columns:minmax(0, 1fr); } }
.ve-studio .ve-askbox[disabled]{ background:var(--vs-panel2); color:var(--vs-muted); }
/* Caption blocks show two lines of their words instead of a few letters. */
.ve-studio .ve-lh-caption, .ve-studio .ve-lane-caption{ height:46px; }
.ve-studio .ve-b-cap .ve-blabel{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.25; padding:0 7px; text-overflow:clip; }
.ve-studio .btn{ text-transform:none; letter-spacing:normal; }

/* ---- the big window: pick the seconds and the part of the picture (Studio) ---- */
dialog.ve-picker{
  --vs-panel:#141417; --vs-panel2:#1C1C21; --vs-panel3:#26262C; --vs-line:#2A2A31; --vs-text:#F4F4F6; --vs-muted:#A1A1AB; --vs-accent:#8B7CF6; --vs-ok:#3DDC97;
  width:min(1400px, 94vw); height:min(900px, 90vh); max-width:none; max-height:none; padding:0; border:1px solid var(--vs-line); border-radius:18px;
  background:#0B0B0D; color:var(--vs-text); color-scheme:dark; overflow:hidden; box-shadow:0 30px 120px rgba(0,0,0,.7); }
dialog.ve-picker[open]{ display:grid; grid-template-rows:auto minmax(0, 1fr) auto; }
dialog.ve-picker::backdrop{ background:rgba(0,0,0,.72); }
dialog.ve-picker button{ font:inherit; }
dialog.ve-picker .ve-tbtn, dialog.ve-picker .ve-approve{ font-size:13.5px; }
.ve-pk-head{ display:flex; align-items:baseline; gap:12px; padding:14px 18px; border-bottom:1px solid var(--vs-line); }
.ve-pk-title{ font-size:17px; font-weight:650; margin:0; }
.ve-pk-sub{ color:var(--vs-muted); font-size:13px; }
.ve-pk-body{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; min-height:0; }
.ve-pk-body.audio{ grid-template-columns:minmax(0, 1fr); }
.ve-pk-stage{ position:relative; min-height:0; overflow:hidden; background:#050506; user-select:none; -webkit-user-select:none; touch-action:none; }
.ve-pk-stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.ve-pk-stage audio{ display:none; }
.ve-pk-box{ position:absolute; border:2px solid #fff; border-radius:6px; box-shadow:0 0 0 9999px rgba(0,0,0,.55); cursor:move; }
.ve-pk-grip{ position:absolute; right:-9px; bottom:-9px; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--vs-accent); cursor:nwse-resize; }
.ve-pk-side{ border-left:1px solid var(--vs-line); background:var(--vs-panel); padding:16px; display:flex; flex-direction:column; align-items:center; gap:12px; overflow:auto; }
.ve-pk-label{ align-self:flex-start; font-size:11.5px; font-weight:700; color:var(--vs-muted); text-transform:uppercase; letter-spacing:.06em; }
.ve-pk-out{ width:100%; max-width:240px; height:auto; aspect-ratio:9 / 16; border-radius:12px; background:#000; }
.ve-pk-wave{ position:absolute; left:24px; right:24px; top:20%; height:60%; width:calc(100% - 48px); }
.ve-pk-trim{ border-top:1px solid var(--vs-line); background:var(--vs-panel); padding:14px 18px 16px; display:flex; flex-direction:column; gap:12px; }
.ve-pk-strip{ position:relative; height:64px; border-radius:10px; background:#000 left center / auto 100% repeat-x; cursor:pointer; touch-action:none; }
.ve-pk-sel{ position:absolute; top:0; bottom:0; border-top:3px solid var(--vs-accent); border-bottom:3px solid var(--vs-accent); box-shadow:0 0 0 9999px rgba(0,0,0,.6); pointer-events:none;
  background:transparent; }
.ve-pk-strip{ overflow:hidden; }
.ve-pk-h{ position:absolute; top:0; bottom:0; width:16px; margin-left:-8px; background:var(--vs-accent); border-radius:6px; cursor:ew-resize; z-index:2; }
.ve-pk-h::after{ content:''; position:absolute; left:6px; top:22px; bottom:22px; width:4px; border-radius:2px; background:rgba(255,255,255,.85); }
.ve-pk-ph{ position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:#fff; pointer-events:none; z-index:3; }
.ve-pk-row{ display:flex; align-items:center; gap:12px; }
.ve-pk-span{ font-variant-numeric:tabular-nums; color:var(--vs-muted); font-size:13.5px; }

/* ---- the player: click to play, a play mark while paused, and the listening volume ---- */
.ve-studio .ve-frame{ cursor:pointer; }
.ve-bigplay{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; transition:opacity .18s; }
.ve-bigplay.off{ opacity:0; }
.ve-bigplay span{ width:68px; height:68px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; box-shadow:0 6px 24px rgba(0,0,0,.4); }
.ve-bigplay span::after{ content:''; margin-left:6px; border-left:22px solid #000; border-top:13px solid transparent; border-bottom:13px solid transparent; }
.ve-edit:not(.ve-studio) .ve-bigplay{ display:none; }
.ve-vol{ display:flex; align-items:center; gap:6px; }
.ve-mute{ all:unset; cursor:pointer; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:16px; }
.ve-studio .ve-mute:hover{ background:var(--vs-panel2); }
.ve-volrange{ -webkit-appearance:none; appearance:none; width:110px; height:4px; border-radius:2px; cursor:pointer;
  background:linear-gradient(90deg, #fff var(--fill, 100%), rgba(255,255,255,.22) var(--fill, 100%)); }
.ve-volrange::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; border:0; }
.ve-volrange::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:#fff; border:0; }
.ve-edit:not(.ve-studio) .ve-volrange{ background:var(--hq-line); }

/* ---------------------------------------------------------------- Forms
   The Forms screen (app/ops-forms.js, 2026-10-09). The table and the phone
   cards are the product's own; this only adds the range bar, the up/down
   colors, the "what they said" lines and the card numbers. */
.forms-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.forms-span{ font-size:13px; color:var(--hq-ink-soft); }
.forms-empty{ margin-bottom:14px; }
table.data td.forms-nodata, .forms-delta.forms-nodata{ color:var(--hq-ink-faint); font-style:italic; }
table.data td.forms-quit, .forms-quit{ color:var(--hq-neg); }
.forms-request .row-main{ min-width:0; }
.forms-said{ display:flex; flex-direction:column; gap:3px; margin-top:6px; font-size:13.5px; max-width:72ch; }
.forms-line{ display:flex; gap:8px; min-width:0; }
.forms-line .k{ flex:none; width:150px; color:var(--hq-ink-faint); }
.forms-line .v{ flex:1; min-width:0; overflow-wrap:anywhere; }
.forms-stage{ font-size:12.5px; color:var(--hq-ink-soft); white-space:nowrap; padding:0 var(--sp-4, 16px) 10px; }
.forms-q{ cursor:default; overflow-wrap:anywhere; }
.forms-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; width:100%; }
.forms-card-head .row-text{ font-weight:600; cursor:default; }
.forms-delta{ font-size:12.5px; white-space:nowrap; color:var(--hq-ink-soft); }
.forms-delta.good{ color:var(--hq-pos); } .forms-delta.bad{ color:var(--hq-neg); }
.forms-card-nums{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; width:100%; margin-top:6px; }
.forms-num .v{ font-size:17px; font-weight:650; font-variant-numeric:tabular-nums; }
.forms-num .k{ font-size:11.5px; color:var(--hq-ink-faint); }
.forms-cards .row-main{ flex-direction:column; align-items:flex-start; gap:2px; }
@media (max-width:600px){
  .forms-line{ flex-direction:column; gap:0; }
  .forms-line .k{ width:auto; font-size:12px; }
}

/* Phone views: no scrollbar, always centered (.claude/rules/phone-previews.md). */
@media (max-width:720px){ html{ scrollbar-width:none; } html::-webkit-scrollbar{ display:none; } }

/* ==================================================================== Content, look E (2026-10-07)
   Joe's pick from the options page: "E · Breakaway", the website's dark green, Bricolage Grotesque headings and Inter
   body. Scoped: only inside .cv-look-e (the wrapper app/ops-content.js puts round every Content screen, the Videos
   drawer and the New video window), so the rest of HQ keeps Studio Light. HQ's own --hq-* tokens and the product's
   tokens are re-pointed here too, so the Files view, the Editor and Video rules follow without their own rules.
   The fonts are the website's own files, served from this worker's /assets/fonts (the page policy allows only
   'self'). Contract: docs/superpowers/specs/2026-10-07-content-videos-contract.md. */
@font-face{ font-family:"Bricolage Grotesque"; font-style:normal; font-weight:200 800; font-stretch:100%; font-display:swap;
  src:url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/inter-latin.woff2") format("woff2"); }

.cv-look-e{
  --cv-bg:#0A120F; --cv-panel:#101C18; --cv-card:#101C18; --cv-card2:#14241F; --cv-line:#1D2E28; --cv-col:#0D1814; --cv-thumb:#06100C;
  --cv-ink:#F1F6F3; --cv-soft:#93A69E; --cv-accent:#3EE0A6; --cv-accent-ink:#06231A; --cv-chip:#16271F; --cv-chip-ink:#C9DAD2;
  --cv-idea:#6F8780; --cv-film:#F2C14E; --cv-edit:#5FB7FF; --cv-ready:#C39BFF; --cv-posted:#3EE0A6;
  --cv-head:"Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cv-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cv-r:16px; --cv-shadow:0 0 0 1px rgba(62,224,166,.04), 0 12px 30px rgba(0,0,0,.35);

  /* HQ's tokens, pointed at look E */
  --hq-bg:#0A120F; --hq-card:#101C18; --hq-ink:#F1F6F3; --hq-ink-soft:#B9C8C1; --hq-ink-faint:#93A69E;
  --hq-line:#1D2E28; --hq-line-soft:#16241F; --hq-fill:#16271F;
  --hq-accent:#3EE0A6; --hq-accent-deep:#3EE0A6; --hq-accent-wash:rgba(62,224,166,.12);
  --hq-pos:#3EE0A6; --hq-neg:#FF8593; --hq-neg-wash:rgba(255,133,147,.12); --hq-mid:#F2C14E;
  --warm-fill:rgba(242,193,78,.14); --warm-ink:#F2C14E;
  --paper:#101C18; --paper-deep:#0A120F; --ink:#F1F6F3; --ink-soft:#B9C8C1; --ink-faint:#93A69E;
  --accent:#3EE0A6; --accent-lift:#3EE0A6; --accent-wash:rgba(62,224,166,.12);
  --border:#1D2E28; --border-soft:#16241F; --tint:#14241F; --warn:#FF8593; --warn-wash:rgba(255,133,147,.12);
  --tab-name:#93A69E; --tab-rule:#1D2E28; --flag-name:#FF8593;
  --dark:#101C18; --dark-soft:#16271F; --on-dark:#B9C8C1;
  --shadow-1:0 0 0 1px rgba(62,224,166,.04); --shadow-2:0 12px 30px rgba(0,0,0,.35);
  --font-sans:var(--cv-body);
  color:var(--cv-ink); font-family:var(--cv-body); color-scheme:dark;
}
/* The ground under the section, and only while Content is the screen. */
body.ops-mode:has(#screen > .cv-root){ background:#0A120F; }

body.ops-mode .cv-look-e .ptitle h1{ font-family:var(--cv-head); font-weight:800; font-size:30px; letter-spacing:-.03em; line-height:1.1; }
body.ops-mode .cv-look-e .ptitle h1::after{ content:"."; color:var(--cv-accent); }
.cv-look-e h2, .cv-look-e h3{ font-family:var(--cv-head); }
body.ops-mode .cv-look-e .btn{ text-transform:none; letter-spacing:0; font-size:13.5px; font-weight:650; border-radius:10px; }
body.ops-mode .cv-look-e .btn-primary, body.ops-mode .cv-look-e .btn-primary:hover{ background:var(--cv-accent); color:var(--cv-accent-ink); font-weight:700; }
body.ops-mode .cv-look-e .btn-primary:hover{ filter:brightness(1.08); }
body.ops-mode .cv-look-e .btn-secondary{ background:var(--cv-card2); border-color:var(--cv-line); color:var(--cv-ink); }
body.ops-mode .cv-look-e .btn-ghost{ color:var(--cv-ink); }
body.ops-mode .cv-look-e .cc-tab{ font-family:var(--cv-body); color:var(--cv-soft); }
body.ops-mode .cv-look-e .cc-tab:hover{ color:var(--cv-ink); }
body.ops-mode .cv-look-e .cc-tab.on{ color:var(--cv-accent); border-bottom-color:var(--cv-accent); }
.cv-look-e .cc-chip[aria-pressed="true"]{ color:var(--cv-accent-ink); }
.cv-look-e a{ color:var(--cv-accent); }
.cv-look-e .empty{ color:var(--cv-soft); background:transparent; }
.cv-look-e .work-field input, .cv-look-e .work-field textarea, .cv-look-e .work-field select,
.cv-look-e .ve-input{ background:var(--cv-card2); color:var(--cv-ink); border-color:#2A4038; }
.cv-look-e input::placeholder, .cv-look-e textarea::placeholder{ color:#6F8780; }
.work-dialog.cv-look-e{ background:var(--cv-panel); border-color:var(--cv-line); color:var(--cv-ink); }
.work-dialog.cv-look-e::backdrop{ background:rgba(2,8,6,.7); }

/* The Files view (the Library) and Video rules mix a few colors with white; on look E they mix with the dark ground. */
.cv-look-e .cc-drive.off{ border-color:rgba(62,224,166,.35); background:rgba(62,224,166,.05); }
.cv-look-e .cc-drive-title{ color:var(--cv-ink); }
.cv-look-e .cc-kind{ background:color-mix(in srgb, var(--k) 18%, #101C18); color:color-mix(in srgb, var(--k) 70%, #fff); }
.cv-look-e .k-footage, .cv-look-e .cc-thumb{ --k:#93A69E; } .cv-look-e .k-demo{ --k:#F2C14E; }
.cv-look-e .cc-thumb{ background:color-mix(in srgb, var(--k) 14%, #0D1814); }
.cv-look-e .cc-thumb.k-clip{ --k:var(--hq-accent); } .cv-look-e .cc-thumb.k-demo{ --k:#F2C14E; } .cv-look-e .cc-thumb.k-final{ --k:var(--hq-pos); }
.cv-look-e .cc-thumb-k{ color:color-mix(in srgb, var(--k) 70%, #fff); }
.cv-look-e .cc-build-filter{ background:var(--cv-card2); border-color:#2A4038; color:var(--cv-ink); }
.cv-look-e .cc-ready.r-ready{ background:rgba(62,224,166,.14); color:#7EF0C4; }
.cv-look-e .cc-ready.r-client, .cv-look-e .cc-gone{ background:rgba(255,133,147,.14); color:#FFB3BC; }
.cv-look-e .cc-preparing{ background:rgba(242,193,78,.16); color:#F7D27A; }
.cv-look-e .cc-path{ color:var(--cv-soft); }
.cv-look-e .vr-rule{ background:var(--cv-card); border-color:var(--cv-line); }
.cv-look-e .vr-rule.off .vr-text{ text-decoration-color:rgba(255,255,255,.3); }
.cv-look-e .vr-input{ background:var(--cv-card2); color:var(--cv-ink); border-color:#2A4038; }
.cv-look-e .vr-new{ border-color:var(--cv-accent); }

/* ---- the bar: views, filter chips, show archived ---- */
.cv-headacts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.cv-bar{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; margin:0 0 16px; }
.cv-seg{ display:flex; background:var(--cv-card2); border-radius:999px; padding:3px; flex:none; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.cv-segb{ all:unset; cursor:pointer; line-height:1.3; padding:6px 13px; border-radius:999px; font-size:13px; font-weight:600; color:var(--cv-soft); white-space:nowrap; }
.cv-segb:hover{ color:var(--cv-ink); }
.cv-segb.on{ background:var(--cv-card); color:var(--cv-ink); box-shadow:0 1px 3px rgba(0,0,0,.35); }
.cv-segb:focus-visible, .cv-fl:focus-visible, .cv-card:focus-visible, .cv-ev:focus-visible, .cv-retype:focus-visible, .cv-x:focus-visible{ outline:2px solid var(--cv-accent); outline-offset:2px; }
.cv-filters{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; flex:1 1 320px; min-width:0; }
.cv-fl{ all:unset; cursor:pointer; line-height:1.3; border:1px solid var(--cv-line); background:var(--cv-card); color:var(--cv-ink); border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.cv-fl:hover{ border-color:#2E4A40; }
.cv-fl.on{ background:var(--cv-ink); color:var(--cv-bg); border-color:var(--cv-ink); }
.cv-sep{ width:1px; height:18px; background:var(--cv-line); margin:0 2px; }
.cv-arch-toggle{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--cv-soft); cursor:pointer; white-space:nowrap; }
.cv-arch-toggle input{ accent-color:var(--cv-accent); width:16px; height:16px; margin:0; }
.cv-note{ font-size:13px; color:var(--cv-soft); margin:10px 2px; text-wrap:pretty; }
.cv-empty{ background:var(--cv-card); border:1px dashed var(--cv-line); border-radius:var(--cv-r); padding:28px; text-align:center; color:var(--cv-soft); }
.cv-error{ color:var(--cv-ink); }
.cv-linkbtn{ all:unset; cursor:pointer; color:var(--cv-accent); font-weight:600; font-size:13px; text-decoration:none; }
.cv-linkbtn:hover{ text-decoration:underline; }
.cv-linkbtn:focus-visible{ outline:2px solid var(--cv-accent); outline-offset:2px; border-radius:4px; }
.cv-btn{ all:unset; cursor:pointer; background:var(--cv-card2); color:var(--cv-ink); border:1px solid var(--cv-line); border-radius:10px; padding:7px 12px; font-size:13px; font-weight:600; text-align:center; }
.cv-btn:hover:not(:disabled){ border-color:#2E4A40; }
.cv-btn:disabled{ opacity:.45; cursor:default; }
.cv-btn:focus-visible{ outline:2px solid var(--cv-accent); outline-offset:2px; }
.cv-btn.cv-icon{ padding:7px 12px; font-size:16px; line-height:1; }

/* ---- stage colors and format colors ---- */
.cv-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; background:var(--cv-idea); }
.cv-dot.s-film{ background:var(--cv-film); } .cv-dot.s-edit{ background:var(--cv-edit); }
.cv-dot.s-ready{ background:var(--cv-ready); } .cv-dot.s-posted{ background:var(--cv-posted); }
.cv-fmt i{ display:inline-block; width:7px; height:7px; border-radius:2px; background:#f59e0b; }
.cv-fmt.f-how-to i{ background:#ef4444; } .cv-fmt.f-website-demo i{ background:#10b981; } .cv-fmt.f-behind i{ background:#3b82f6; }
.cv-fmt.f-case-study i{ background:#ec4899; } .cv-fmt.f-motion-piece i{ background:#8b5cf6; }

/* ---- the board ---- */
.cv-board{ display:grid; grid-template-columns:repeat(5, minmax(184px, 1fr)); gap:12px; overflow-x:auto; padding-bottom:6px; align-items:start; scroll-snap-type:x proximity; }
.cv-col{ background:var(--cv-col); border-radius:var(--cv-r); padding:8px; min-width:0; scroll-snap-align:start; }
.cv-colh{ display:flex; align-items:center; gap:8px; margin:0; padding:4px 4px 10px; font:700 12.5px/1.2 var(--cv-body); text-transform:uppercase; letter-spacing:.05em; color:var(--cv-soft); }
.cv-colh .cv-dot{ width:9px; height:9px; }
.cv-colname{ white-space:nowrap; }
.cv-count{ font-style:normal; margin-left:auto; font-weight:600; }
.cv-cards{ display:flex; flex-direction:column; gap:10px; }
.cv-none{ margin:4px 6px 8px; font-size:13px; color:#6F8780; }

/* ---- a card ---- */
.cv-card{ background:var(--cv-card); border:1px solid var(--cv-line); border-radius:var(--cv-r); box-shadow:var(--cv-shadow); overflow:hidden; cursor:pointer; transition:transform .15s ease, border-color .15s ease; min-width:0; }
.cv-card:hover{ transform:translateY(-2px); border-color:#2A4038; }
.cv-card.archived{ opacity:.6; }
.cv-thumb{ position:relative; aspect-ratio:4 / 5; background:var(--cv-thumb); overflow:hidden; }
.cv-thumb.wide{ aspect-ratio:16 / 10; }
.cv-thumb img, .cv-thumb video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cv-thumb video{ opacity:0; transition:opacity .2s; }
.cv-thumb.playing video{ opacity:1; }
.cv-idea{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:12px; text-align:center;
  background:linear-gradient(160deg, rgba(245,158,11,.2), transparent 70%); }
.cv-idea.f-how-to{ background:linear-gradient(160deg, rgba(239,68,68,.2), transparent 70%); }
.cv-idea.f-website-demo{ background:linear-gradient(160deg, rgba(16,185,129,.2), transparent 70%); }
.cv-idea.f-behind{ background:linear-gradient(160deg, rgba(59,130,246,.2), transparent 70%); }
.cv-idea.f-case-study{ background:linear-gradient(160deg, rgba(236,72,153,.2), transparent 70%); }
.cv-idea.f-motion-piece{ background:linear-gradient(160deg, rgba(139,92,246,.2), transparent 70%); }
.cv-ic{ font-size:44px; line-height:1; }
.cv-il b{ display:block; font:800 15px/1.2 var(--cv-head); letter-spacing:-.03em; color:var(--cv-ink); text-wrap:balance; }
.cv-il span{ font-size:12px; color:var(--cv-soft); }
.cv-plats{ position:absolute; top:8px; left:8px; right:8px; display:flex; gap:4px; flex-wrap:wrap; }
.cv-pl{ font:700 10px/1 var(--cv-body); padding:4px 5px; border-radius:6px; background:rgba(0,0,0,.62); color:#fff; display:inline-flex; align-items:center; gap:4px; }
.cv-pl .cv-dot{ width:6px; height:6px; }
.cv-cb{ padding:10px 11px 11px; }
.cv-title{ margin:0; font:800 15px/1.25 var(--cv-head); letter-spacing:-.03em; color:var(--cv-ink); text-wrap:pretty; overflow-wrap:anywhere; }
.cv-line{ margin:3px 0 8px; font-size:12.5px; line-height:1.35; color:var(--cv-soft); text-wrap:pretty; }
.cv-dtitle, .cv-dline, .cv-evt, .cv-shelf-h, .cv-note, .cv-empty, .cv-sub{ text-wrap:pretty; }
.cv-chips{ display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.cv-chip{ font-size:11px; font-weight:600; line-height:1.3; padding:3px 7px; border-radius:999px; background:var(--cv-chip); color:var(--cv-chip-ink); display:inline-flex; align-items:center; gap:5px; max-width:100%; }
.cv-cold{ color:#F2C14E; } .cv-views{ color:var(--cv-accent); } .cv-arch{ color:#FF8593; }

/* ---- by tool ---- */
.cv-shelf{ margin-bottom:24px; }
.cv-shelf-h{ margin:0 0 2px; font:800 19px/1.2 var(--cv-head); letter-spacing:-.03em; color:var(--cv-ink); }
.cv-sub{ font-size:13px; color:var(--cv-soft); margin-bottom:10px; }
.cv-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:12px; align-items:start; }

/* ---- calendar ---- */
.cv-calbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cv-caltitle{ font:800 17px/1.2 var(--cv-head); letter-spacing:-.02em; margin-left:6px; }
.cv-cal{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; }
.cv-dow{ font-size:12px; font-weight:700; color:var(--cv-soft); text-transform:uppercase; letter-spacing:.05em; padding:0 4px; }
.cv-day{ background:var(--cv-card); border:1px solid var(--cv-line); border-radius:12px; min-height:118px; padding:7px; min-width:0; }
.cv-day.past{ background:#0D1814; }
.cv-day.today{ outline:2px solid var(--cv-accent); outline-offset:-1px; }
.cv-dayh{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--cv-soft); }
.cv-dayh b{ font-weight:700; }
.cv-daydow{ display:none; }
.cv-todaytag{ font-size:10.5px; font-weight:700; color:var(--cv-accent-ink); background:var(--cv-accent); border-radius:999px; padding:1px 6px; }
.cv-ev{ all:unset; box-sizing:border-box; cursor:pointer; display:block; width:100%; margin-top:6px; border-radius:8px; padding:6px 7px; font-size:12px; font-weight:600; line-height:1.25;
  background:var(--cv-card2); border-left:4px solid var(--cv-idea); color:var(--cv-ink); overflow-wrap:anywhere; }
.cv-ev:hover{ background:#1A2E27; }
.cv-ev.s-film{ border-left-color:var(--cv-film); } .cv-ev.s-edit{ border-left-color:var(--cv-edit); }
.cv-ev.s-ready{ border-left-color:var(--cv-ready); } .cv-ev.s-posted{ border-left-color:var(--cv-posted); }
.cv-ev small{ display:block; font-weight:500; color:var(--cv-soft); margin-top:2px; }

/* ---- the drawer ---- */
.cv-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(580px, 100%); z-index:60; background:var(--cv-panel); color:var(--cv-ink);
  border-left:1px solid var(--cv-line); box-shadow:-20px 0 50px rgba(0,0,0,.45); transform:translateX(105%); visibility:hidden;
  transition:transform .25s ease, visibility 0s linear .25s; overflow:auto; overscroll-behavior:contain; font-size:14px; }
.cv-drawer.open{ transform:none; visibility:visible; transition:transform .25s ease; }
.cv-drin{ padding:0 20px 40px; }
.cv-dhead{ position:sticky; top:0; z-index:3; height:0; display:flex; justify-content:flex-end; pointer-events:none; }
.cv-x{ all:unset; pointer-events:auto; cursor:pointer; margin:12px 12px 0 0; box-shadow:0 0 0 4px var(--cv-panel); width:36px; height:36px; border-radius:999px; background:var(--cv-card2); color:var(--cv-ink);
  font-size:20px; line-height:36px; text-align:center; }
.cv-x:hover{ background:#1F362E; }
.cv-dtop{ display:grid; grid-template-columns:150px minmax(0, 1fr); gap:16px; align-items:start; padding-top:18px; }
.cv-dtop .cv-thumb{ border-radius:12px; cursor:pointer; }
.cv-dinfo{ min-width:0; padding-right:44px; }
.cv-dtitle{ margin:0 0 6px; font:800 24px/1.15 var(--cv-head); letter-spacing:-.03em; }
.cv-dline{ margin:0 0 10px; color:var(--cv-soft); line-height:1.4; }
.cv-dline.none .cv-retype{ font-style:italic; color:#6F8780; }
.cv-retype{ all:unset; cursor:text; border-radius:6px; overflow-wrap:anywhere; }
.cv-retype:hover{ background:var(--cv-card2); box-shadow:0 0 0 4px var(--cv-card2); }
.cv-retype-in{ width:100%; margin:0 0 8px; }
.cv-dtitle-in{ font:800 22px/1.2 var(--cv-head); letter-spacing:-.03em; }
.cv-code{ display:inline-block; font:500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--cv-soft); background:var(--cv-card2); padding:4px 8px; border-radius:6px; overflow-wrap:anywhere; margin:0 6px 6px 0; }
.cv-stages{ display:flex; gap:4px; margin:18px 0 6px; }
.cv-stages div{ flex:1; height:6px; border-radius:3px; background:var(--cv-line); }
.cv-stages.s-idea div.on{ background:var(--cv-idea); } .cv-stages.s-film div.on{ background:var(--cv-film); } .cv-stages.s-edit div.on{ background:var(--cv-edit); }
.cv-stages.s-ready div.on{ background:var(--cv-ready); } .cv-stages.s-posted div.on{ background:var(--cv-posted); }
.cv-stlab{ display:flex; justify-content:space-between; gap:4px; font-size:11px; color:#6F8780; margin-bottom:14px; }
.cv-stlab span{ flex:1; text-align:center; }
.cv-stlab span:first-child{ text-align:left; } .cv-stlab span:last-child{ text-align:right; }
.cv-stlab .now{ color:var(--cv-ink); font-weight:700; }
.cv-sec{ margin:20px 0 8px; font:700 12px/1.2 var(--cv-body); text-transform:uppercase; letter-spacing:.06em; color:var(--cv-soft); }
.cv-grid, .cv-pgrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 12px; }
.cv-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cv-field.wide{ grid-column:1 / -1; }
.cv-flabel{ font-size:12px; font-weight:600; color:var(--cv-soft); }
body.ops-mode .cv-in, .cv-in{ font:inherit; font-size:14px; color:var(--cv-ink); background:var(--cv-card2); border:1px solid #2A4038; border-radius:9px; padding:7px 10px; min-width:0; width:100%; box-sizing:border-box; }
.cv-in:focus{ outline:2px solid var(--cv-accent); outline-offset:0; border-color:transparent; }
textarea.cv-in{ resize:vertical; line-height:1.4; }
.cv-prow{ background:var(--cv-card2); border:1px solid var(--cv-line); border-left:4px solid var(--cv-idea); border-radius:12px; padding:10px 12px 12px; margin-bottom:10px; }
.cv-prow.s-film{ border-left-color:var(--cv-film); } .cv-prow.s-edit{ border-left-color:var(--cv-edit); }
.cv-prow.s-ready{ border-left-color:var(--cv-ready); } .cv-prow.s-posted{ border-left-color:var(--cv-posted); }
.cv-prow .cv-in{ background:var(--cv-panel); }
.cv-phead{ display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.cv-pname{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14.5px; margin-right:auto; }
.cv-off{ color:#FF8593; }
.cv-nums{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; margin-top:10px; }
.cv-nums .cv-in{ padding:6px 8px; font-variant-numeric:tabular-nums; }
.cv-addrow{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.cv-addrow .cv-in{ flex:1; }
.cv-files{ display:flex; flex-direction:column; }
.cv-file{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:8px 0; border-top:1px solid var(--cv-line); font-size:13.5px; }
.cv-file:first-child{ border-top:0; }
.cv-kind{ flex:none; width:64px; color:var(--cv-soft); font-size:12px; font-weight:600; }
.cv-fname{ flex:1 1 160px; min-width:0; overflow-wrap:anywhere; color:var(--cv-ink); }
a.cv-fname{ color:var(--cv-accent); }
.cv-badge{ font-size:11px; font-weight:700; color:var(--cv-accent-ink); background:var(--cv-accent); border-radius:999px; padding:2px 8px; }
.cv-taste{ display:flex; flex-wrap:wrap; }
.cv-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; padding-top:14px; border-top:1px solid var(--cv-line); }

/* ---- New video ---- */
.cv-newplats{ border:0; padding:0; margin:14px 0 4px; }
.cv-newplats legend{ font-size:14px; font-weight:600; margin-bottom:6px; padding:0; }
.cv-newplat{ display:grid; grid-template-columns:minmax(0, 1fr) 170px; gap:10px; align-items:center; padding:6px 0; border-top:1px solid var(--cv-line); }
.cv-newplat:first-of-type{ border-top:0; }
.cv-check{ display:inline-flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.cv-check input{ accent-color:var(--cv-accent); width:18px; height:18px; margin:0; }
.cv-newplat .cv-in:disabled{ opacity:.4; }

/* ---- phones and small laptops ---- */
@media (max-width:900px){
  .cv-board{ grid-template-columns:repeat(5, minmax(250px, 78vw)); }
  .cv-cal{ grid-template-columns:1fr; gap:6px; }
  .cv-dow{ display:none; }
  .cv-daydow{ display:inline; }
  .cv-day{ min-height:0; }
  .cv-day.empty .cv-dayh{ opacity:.7; }
}
@media (max-width:640px){
  body.ops-mode .cv-look-e .ptitle h1{ font-size:26px; }
  .cv-drawer{ width:100%; border-left:0; }
  .cv-drin{ padding:0 14px 48px; }
  .cv-dtop{ grid-template-columns:110px minmax(0, 1fr); gap:12px; }
  .cv-dtitle{ font-size:21px; }
  .cv-stlab{ font-size:10px; gap:2px; }
  .cv-stlab span{ white-space:nowrap; }
  .cv-nums{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .cv-grid, .cv-pgrid{ grid-template-columns:minmax(0, 1fr); }
  .cv-newplat{ grid-template-columns:minmax(0, 1fr) 150px; }
  .cv-segb{ padding:7px 11px; }
  /* One row of filters that slides sideways, so the board starts high on the screen. */
  .cv-filters{ flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -12px; padding:0 12px; }
  .cv-filters::-webkit-scrollbar, .cv-seg::-webkit-scrollbar{ display:none; }
  .cv-fl{ padding:7px 12px; }
  .cv-thumb{ aspect-ratio:1 / 1; }
  .cv-board{ grid-template-columns:repeat(5, minmax(240px, 80vw)); margin:0 -12px; padding:0 12px 6px; scroll-padding:0 12px; }
}
body.cv-drawer-open{ overflow:hidden; }
@media (min-width:901px){ body.cv-drawer-open{ overflow:auto; } }
@media (prefers-reduced-motion:reduce){ .cv-drawer, .cv-card{ transition:none; } .cv-card:hover{ transform:none; } }

/* Videos drawer: a help line under a field */
.cv-help{display:block;margin-top:4px;font-size:12px;color:var(--cv-soft, #93A69E)}

/* Videos: filter rows, Type above Platform (Joe, 2026-10-07) */
.cv-filterrows{ flex:1 1 100%; display:flex; flex-direction:column; gap:8px; min-width:0; }
.cv-filterrows .cv-filters{ flex:none; }
.cv-frow{ width:70px; flex:none; font:600 11px/1 var(--cv-body); letter-spacing:.06em; text-transform:uppercase; color:var(--cv-soft); }
.cv-arch-toggle{ margin-left:auto; }
@media (max-width: 700px){ .cv-frow{ width:auto; margin-right:4px; } }

/* Videos drawer: the way into the editor, at the top (Joe, 2026-10-07) */
.cv-editbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 4px; }
.cv-editbtn{ display:inline-flex; align-items:center; gap:6px; padding:11px 16px; border-radius:12px; background:var(--cv-accent); color:var(--cv-accent-ink);
  font:700 14px/1 var(--cv-body); text-decoration:none; }
.cv-editbtn.ghost{ background:var(--cv-card2); color:var(--cv-ink); border:1px solid var(--cv-line); }
.cv-editbtn:hover{ filter:brightness(1.08); }
.cv-editbtn:focus-visible{ outline:2px solid var(--cv-accent); outline-offset:2px; }
.cv-editbar .cv-help{ flex:1 1 100%; margin:2px 0 0; }
.cv-pill{ padding:6px 10px; border-radius:999px; background:var(--cv-chip); }
.cv-editbar a.cv-editbtn, .cv-editbar a.cv-editbtn:visited{ color:var(--cv-accent-ink); }
.cv-editbar a.cv-editbtn.ghost, .cv-editbar a.cv-editbtn.ghost:visited{ color:var(--cv-ink); }

/* Videos: Needs sorting, the helper's questions about dropped footage, above the board (drop-and-sort, 2026-10-07) */
.cv-sort{ background:var(--cv-panel); border:1px solid rgba(242,193,78,.35); border-radius:var(--cv-r); padding:14px 14px 16px; margin:0 0 16px; }
.cv-sort-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 12px; }
.cv-sort-t{ margin:0; font:800 18px/1.2 var(--cv-head); letter-spacing:-.02em; color:var(--cv-ink); }
.cv-sort-t::before{ content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--cv-film); margin-right:8px; vertical-align:middle; }
.cv-sort-h .cv-sub{ font-size:13px; color:var(--cv-soft); text-wrap:pretty; }
.cv-sort-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
.cv-q{ background:var(--cv-card2); border:1px solid var(--cv-line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.cv-q.answered{ opacity:.85; }
.cv-qfiles{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.cv-qfile{ display:flex; align-items:center; gap:8px; font-size:13px; min-width:0; }
.cv-qkind{ flex:none; font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; background:rgba(95,183,255,.16); color:#A9D6FF; }
.cv-qkind.k-audio{ background:rgba(195,155,255,.16); color:#DCC6FF; }
.cv-qname{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cv-ink); }
.cv-qlen{ flex:none; color:var(--cv-soft); font-variant-numeric:tabular-nums; }
.cv-qline{ margin:0; font-size:14px; line-height:1.45; color:var(--cv-ink); text-wrap:pretty; }
.cv-qacts{ display:flex; flex-direction:column; gap:8px; }
body.ops-mode .cv-look-e .cv-qyes{ white-space:normal; text-align:left; line-height:1.3; padding-top:9px; padding-bottom:9px; }
.cv-qpick{ display:flex; gap:8px; min-width:0; }
.cv-qpick .cv-in{ flex:1 1 auto; background:var(--cv-panel); }
.cv-qgo{ flex:none; }
.cv-qnew{ text-align:left; white-space:normal; line-height:1.3; }
.cv-qfiling{ margin:0; font-weight:700; font-size:14px; color:var(--cv-film); }
.cv-qfor{ margin:-6px 0 0; font-size:13px; color:var(--cv-soft); text-wrap:pretty; }
@media (max-width:640px){
  .cv-sort{ margin-left:-4px; margin-right:-4px; padding:12px; }
  .cv-sort-list{ grid-template-columns:minmax(0, 1fr); }
  .cv-qpick{ flex-wrap:wrap; }
  .cv-qpick .cv-in{ flex-basis:100%; min-height:44px; }
  .cv-qgo, .cv-qnew{ min-height:44px; box-sizing:border-box; }
  .cv-qgo{ flex:1 1 auto; }
}