/* ============================================================
   CONTENT COMMAND — design system

   Voho's bones on white paper. Every neutral is a low-opacity mix
   of one ink variable, so the whole utility vocabulary inverts off
   a single line in dark mode. Flat fill, one hairline, generous
   radius — no glass, no glow, no gradient. Colour is area, never
   atmosphere: the brand blue appears as a slab, a pill, a rule, and
   nowhere else.
   ============================================================ */

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

:root{
  /* Ink. Near-black carrying a whisper of the accent's hue, which is
     what stops the greys reading as a default theme. */
  --ink-rgb: 18 18 29;

  --canvas:#FAFAFB;
  --surface:#FFFFFF;
  --raised:#F4F4F7;
  --sunken:#EFEFF3;

  --line:rgb(var(--ink-rgb) / .10);
  --line-mid:rgb(var(--ink-rgb) / .16);
  --line-strong:rgb(var(--ink-rgb) / .28);

  --text:#12121D;
  --text-dim:#4A4C5C;
  --text-faint:#5E6072;

  /* Signal. One blue, three tones: the fill, a deeper tone that clears
     contrast as text on paper, and a wash for areas.

     The blue is the one on the favicon and in the Brand kit — #0065DD — so
     the tab, the mark in the corner and every selected thing on the board are
     one colour rather than three that happen to be nearby. */
  --accent:#005ACB;
  --accent-bright:#3D8BFF;
  --accent-deep:#00479F;
  --accent-wash:rgba(0,101,221,.075);
  --accent-line:rgba(0,101,221,.30);
  /* Yellow on the blue, not white. It is the favicon's own pair and it is
     what makes a selected row look picked rather than merely filled.
     The blue is one step deeper than the favicon's #0065DD on purpose:
     yellow on #0065DD measures 3.97:1, which is under the readable line,
     and on this it is 4.7:1. Side by side the two blues are the same blue;
     the difference is only whether the label can be read. */
  --accent-ink:#FFDC00;
  /* The yellow that goes on the blue, from the same two-colour pair. */
  --accent-mark:#FFDC00;

  /* Status. Separate from the accent, and each one legible as text. */
  --ok:#04724D;      --ok-wash:#E2F5EC;      --ok-dot:#0BA46B;
  --warn:#8A5300;    --warn-wash:#FBF0DA;    --warn-dot:#D98E00;
  --bad:#B3261E;     --bad-wash:#FBE9E8;
  --idle-wash:rgb(var(--ink-rgb) / .05);

  --radius:.875rem;
  --radius-sm:calc(var(--radius) - 6px);
  --radius-md:calc(var(--radius) - 3px);
  --radius-lg:var(--radius);

  color-scheme:light;
}

/* ---- dark: same system, ink inverted ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink-rgb: 233 233 246;
    --canvas:#0A0A0F;
    --surface:#121218;
    --raised:#1A1A22;
    --sunken:#16161D;
    --line:rgb(var(--ink-rgb) / .09);
    --line-mid:rgb(var(--ink-rgb) / .15);
    --line-strong:rgb(var(--ink-rgb) / .28);
    --text:#ECECF4;
    --text-dim:#ADAFC1;
    --text-faint:#8C8EA4;
    /* Lifted off the brand blue for a dark ground: #0065DD on near-black is
       too dark to read as the signal colour. */
    /* The same fill in the dark, because the yellow has to sit on it there
       too. Text tones stay light — they are read against the page, not
       against the button. */
    --accent:#005ACB;
    --accent-bright:#7FB0FF;
    --accent-deep:#9CC5FF;
    --accent-wash:rgba(61,139,255,.16);
    --accent-line:rgba(61,139,255,.36);
    --accent-mark:#FFDC00;
    --accent-ink:#FFDC00;
    --ok:#3DD68C;      --ok-wash:#0C2C21;      --ok-dot:#3DD68C;
    --warn:#E5A93B;    --warn-wash:#2E2308;    --warn-dot:#E5A93B;
    --bad:#FF8A80;     --bad-wash:#331614;
    --idle-wash:rgb(var(--ink-rgb) / .07);
    color-scheme:dark;
  }
}

.transcript-list{display:grid;gap:18px;max-width:1000px}
.transcript-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:0 1px 2px rgb(0 0 0 / .03)}
.transcript-card-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.transcript-card h3{font-size:18px;line-height:1.3;margin:4px 0 0;color:var(--text)}
.transcript-text{white-space:pre-wrap;font-size:15px;line-height:1.75;color:var(--text-dim);margin:0;max-height:420px;overflow:auto}
.paneintro{max-width:760px;margin-bottom:28px}.paneintro h2{font-size:30px;margin:5px 0 8px}.paneintro .lede{margin:0}
:root[data-theme="dark"]{
  --ink-rgb: 233 233 246;
  --canvas:#0A0A0F;
  --surface:#121218;
  --raised:#1A1A22;
  --sunken:#16161D;
  --line:rgb(var(--ink-rgb) / .09);
  --line-mid:rgb(var(--ink-rgb) / .15);
  --line-strong:rgb(var(--ink-rgb) / .28);
  --text:#ECECF4;
  --text-dim:#ADAFC1;
  --text-faint:#8C8EA4;
  --accent:#005ACB;
  --accent-bright:#7FB0FF;
  --accent-deep:#9CC5FF;
  --accent-wash:rgba(61,139,255,.16);
  --accent-line:rgba(61,139,255,.36);
  --accent-mark:#FFDC00;
  --accent-ink:#FFDC00;
  --ok:#3DD68C;      --ok-wash:#0C2C21;      --ok-dot:#3DD68C;
  --warn:#E5A93B;    --warn-wash:#2E2308;    --warn-dot:#E5A93B;
  --bad:#FF8A80;     --bad-wash:#331614;
  --idle-wash:rgb(var(--ink-rgb) / .07);
  color-scheme:dark;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings:"cv11","ss01";
  font-optical-sizing:auto;
  font-size:15.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:var(--accent-ink)}

/* Display and body are the same geometric family, separated by weight
   and tracking rather than by width. */
h1,h2,h3,h4{
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-weight:600;letter-spacing:-.025em;line-height:1.1;
  margin:0;text-wrap:balance;
}
p{margin:0}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:'zero';letter-spacing:0}
/* the saved-at stamp reads as prose, not as a key */
.topbar .sub.mono{font-family:inherit;font-size:12.5px!important;letter-spacing:0}

/* Small caps set in the body face. Mono at 10-11px with .08em tracking is
   the hardest thing on a page to read quickly, and every label on the board
   was set that way — so the machine voice is now reserved for things that
   are actually machine output: URLs, hex codes, keys. */
.eyebrow{
  font-size:11.5px;font-weight:600;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);
}
.numeral{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.025em}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:244px minmax(0,1fr);min-height:100vh}
.rail{
  background:var(--surface);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1px;
  padding:18px 12px 14px;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 14px}
/* The same pair as the favicon: the brand blue with the brand yellow on it,
   rather than white. It is the one mark that is meant to be recognised
   rather than read. */
.brand-mark{
  width:34px;height:34px;border-radius:var(--radius-sm);background:var(--accent);
  color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:12.5px;
  letter-spacing:-.03em;flex:none;
}
.brand-name{font-weight:600;font-size:15px;line-height:1.2;letter-spacing:-.02em}
.brand-sub{
  font-size:11px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-faint);
}
/* Tightened. The rail was more space than rail: an 18px lead-in on every
   group label, a 14px gap between groups and a 14px spacer on top of that,
   which on a short screen left a column that looked full and read as
   crowded. The groups are still separated — just by enough to see, rather
   than by enough to notice. */
.rail-label{
  font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-faint);padding:14px 10px 5px;
}
.rail-label:first-of-type{padding-top:2px}
.navitem{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  box-sizing:border-box;text-decoration:none;cursor:pointer;
  padding:8px 12px;border-radius:11px;color:var(--text-dim);
  font-size:14.5px;font-weight:500;transition:background-color .18s ease,color .18s ease;
}
.navitem:hover{background:var(--raised);color:var(--text)}
.navitem[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
/* An icon rather than a dot. It is drawn in currentColor at one stroke
   weight, so it turns white with the label on the selected row and needs no
   rule of its own to do it. Held back a little while resting, full strength
   on hover and when selected — the row you are on should be the one thing on
   the rail that is not whispering. */
.navitem .navicon{flex:none;opacity:.62;transition:opacity .18s ease}
.navitem:hover .navicon{opacity:.9}
.navitem[aria-current="page"] .navicon{opacity:1}
.navitem .navlabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Kept for anything without an icon yet. */
.navitem .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45;flex:none}
.navitem[aria-current="page"] .dot{opacity:.85}
.navitem .count{
  margin-left:auto;padding-left:8px;font-size:12.5px;font-weight:500;
  font-variant-numeric:tabular-nums;opacity:.65;
}
.navitem[aria-current="page"] .count{opacity:.85}
.rail-spacer{flex:1 1 auto;min-height:8px}
.rail-foot{
  padding:14px 10px 0;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--text-faint);line-height:1.6;
}
.rail-foot b{color:var(--text-dim);font-weight:600}
.rolechip{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--accent-wash);color:var(--accent-deep);
  font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.railout{
  display:block;margin-top:7px;color:var(--text-faint);
  text-decoration:underline;text-underline-offset:2px;font-size:12.5px;
}
.railout:hover{color:var(--text)}
.rail-foot button{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;background:var(--canvas);
  border-bottom:1px solid var(--line);padding:16px 30px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.topbar h1{font-size:22px;letter-spacing:-.03em}
.topbar .sub{color:var(--text-dim);font-size:13px}
.spacer{flex:1 1 auto}
/* The board is a working table and wants the whole window. The reference
   tabs are prose and stay at a readable measure. */
/* 1180 was leaving a third of a wide monitor empty while the board's twelve
   columns fought for room. Prose is capped where it is written instead, so
   the extra width goes to tables and cards rather than to line length. */
.pane{padding:34px 40px 112px;width:100%;max-width:1560px}
.pane .lede,.pane .paneintro p,.pane .footnote{max-width:78ch}
.pane.pane-wide{max-width:none}

/* ---------- surfaces ----------
   Flat fill, one hairline, generous radius. A panel reads as paper
   on the canvas, not as glass floating above it. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}

.btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:var(--radius-md);border:1px solid var(--line-mid);
  background:var(--surface);font-size:13.5px;font-weight:600;color:var(--text);
  transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
.btn:hover{border-color:var(--line-strong);background:var(--raised)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-bright);border-color:var(--accent-bright);color:var(--accent-ink)}
.btn-primary:disabled{opacity:.6}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:var(--radius-sm)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--text-dim)}
.btn-ghost:hover{background:var(--raised);color:var(--text)}

.section{display:flex;flex-direction:column;gap:18px;margin-bottom:54px}
.section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.section-head h2{font-size:19px}
.section-head .note{color:var(--text-dim);font-size:14px}
.lede{color:var(--text-dim);font-size:16.5px;line-height:1.6;max-width:68ch}

/* ---------- stats ---------- */
/* Six tiles and two rows of chips sat between the top of the page and the
   work. All of it is doing a job — the tiles and the chips are the same
   filters from two directions — so none of it went, but all of it got out of
   the way: shorter tiles, smaller chips, tighter rows. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:9px;margin-bottom:16px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:10px 13px;display:flex;flex-direction:column;gap:1px;position:relative;overflow:hidden;
  font:inherit;text-align:left;cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease;
}
.stat:hover{border-color:var(--line-strong)}
.stat.on{border-color:var(--accent);background:var(--accent-wash)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bar,var(--line-mid))}
/* Nothing at this stage: still there to keep the row the same shape, but
   quiet enough that the eye skips it. */
.stat.zero{background:var(--canvas)}
.stat.zero .v,.stat.zero .k{color:var(--text-faint)}
.stat.zero::before{opacity:.35}
.stat.zero.on .v,.stat.zero.on .k{color:inherit}
.stat .k{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim)}
.stat .v{font-size:24px;line-height:1.05;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.03em}
/* The sentence under each number explained the tile once and then repeated
   itself forever. It is on the hover, where a thing you need once belongs. */
.stat .h{display:none}

/* ---------- filters ---------- */
/* Two deliberate rows: the controls you type into, then the states you
   filter by. Letting one flex row wrap is what made this look accidental. */
.filters{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.filterrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.search{
  flex:1 1 230px;min-width:190px;display:flex;align-items:center;gap:9px;
  background:var(--surface);border:1px solid var(--line-mid);border-radius:var(--radius-md);padding:0 12px;
}
.search:focus-within{border-color:var(--accent)}
.search input{border:0;background:none;outline:none;padding:8px 0;width:100%;font-size:14px}
.search input::placeholder{color:var(--text-faint)}
.chips{display:flex;gap:5px;flex-wrap:wrap}

/* A labelled row of filter chips. The key sits in the gutter so the two
   rows (status, owner) line up as one block rather than two loose bands. */
.chiprow{display:flex;align-items:flex-start;gap:10px}
.chiprow+.chiprow{margin-top:6px}
.chipkey{
  font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-faint);flex:none;
  min-width:48px;padding-top:6px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line-mid);background:transparent;
  font-size:12.5px;font-weight:500;letter-spacing:0;
  color:var(--text-dim);transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.chip:hover{border-color:var(--line-strong);color:var(--text)}
.chip .n{opacity:.65;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip[aria-pressed="true"] .n{opacity:.85}

/* The row that spells out which filters are on. It only exists while
   something is filtering, so it is allowed to sit tight under the chips. */
.sumrow{margin-top:11px}
/* Not a flex container: this is a sentence, and flex drops the whitespace
   between its items — which turned "4 of 39" into "4of 39". */
.sumtext{
  display:inline-block;padding:6px 0;
  font-size:13px;line-height:1.4;color:var(--text-dim);
}
.sumtext b{color:var(--text);font-variant-numeric:tabular-nums}
/* Dashed, so it reads as the way out of the row rather than one more chip
   to switch on. It is never pressed, so it never takes the accent fill. */
.clearchip{border-style:dashed;margin-left:6px}
.clearchip:hover{border-style:solid;border-color:var(--bad);color:var(--bad)}
select.sel{
  background:var(--surface);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:8px 11px;font-size:13.5px;font-weight:500;outline:none;
}
select.sel:focus{border-color:var(--accent)}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
table.board{width:100%;border-collapse:collapse;min-width:1080px}
th.sortable{padding:0}
.thbtn{
  display:flex;align-items:center;gap:6px;width:100%;
  border:0;background:transparent;cursor:pointer;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:11px 16px;
}
.thbtn:hover{color:var(--text)}
th.sortable.on .thbtn{color:var(--accent-deep)}
.thbtn .arrow{font-size:10px;line-height:1}

table.board th{
  text-align:left;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);font-weight:600;
  padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--sunken);
}
table.board th:first-child{border-top-left-radius:var(--radius-lg)}
table.board th:last-child{border-top-right-radius:var(--radius-lg)}
table.board td{padding:9px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
table.board tr:last-child td{border-bottom:0}
table.board tbody tr{transition:background-color .15s ease}
table.board tbody tr:hover{background:var(--raised)}
.rownum{font-size:12.5px;color:var(--text-faint);font-variant-numeric:tabular-nums;width:40px}

/* Width comes from the column the header was dragged to, falling back to the
   old fixed guess when it has never been touched. */
.titlecell{min-width:230px;max-width:var(--titlew,360px);width:var(--titlew,auto)}
/* One line, always. The title truncates and opens out only while it is being
   edited, so a long name never pushes the row to two. */
.titlerow{display:flex;align-items:center;gap:9px;min-width:0}
.refmark{flex:none;display:inline-flex;align-items:center;opacity:.85;transition:opacity .15s ease}
.notemark{
  flex:none;min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;
  background:var(--warn-wash);color:var(--warn);border:1px solid var(--warn-dot);
  cursor:pointer;transition:filter .15s ease;
}
.notemark:hover,.notemark:focus-visible{filter:brightness(.94)}
.notemark svg{opacity:.75}
/* No notes yet, but this person could write the first one. It carries no
   number, so it reads as an invitation rather than as a count of nothing. */
.notemark.empty{
  background:transparent;color:var(--text-faint);border-color:var(--line-mid);
  padding:0 4px;
}
.notemark.empty:hover,.notemark.empty:focus-visible{
  background:var(--accent-wash);color:var(--accent-deep);border-color:var(--accent);filter:none;
}

/* ---------- the notes, without leaving the board ----------
   The count told you a row had two notes, which is not the useful half. */
.notepop{width:min(420px,calc(100vw - 24px));padding:14px 16px 12px}
.np-top{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);
  padding-bottom:9px;margin-bottom:10px}
.np-top b{font-size:14px}
.np-top span{font-size:12px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;
  max-height:340px;overflow-y:auto}
.np-item{border-left:2px solid var(--line-mid);padding-left:10px}
.np-item.change{border-left-color:var(--warn-dot)}
.np-meta{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.np-meta b{font-size:12.5px}
.np-at{font-size:11px;color:var(--text-faint);margin-left:auto}
.np-tag{font-size:10.5px;font-weight:600;color:var(--warn);background:var(--warn-wash);
  border-radius:999px;padding:1px 7px}

/* A status change sits in the same column as the notes, because the order of
   the two against each other is the thing being read. It is marked out rather
   than dressed up: quieter than a note, since it is a fact about the row and
   not something somebody wrote. */
.np-item.np-status{border-left-color:var(--accent)}
.np-tag.status{color:var(--accent-deep);background:var(--accent-wash)}
.np-item.np-status p{color:var(--text)}
.np-item.np-none{border-left-color:var(--line);color:var(--text-faint);font-size:12px;
  line-height:1.5;padding-top:1px;padding-bottom:1px}
.np-item p{margin:0;font-size:13px;line-height:1.55;color:var(--text-dim);
  overflow-wrap:anywhere;white-space:pre-wrap}
.np-foot{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--text-faint)}
.refmark:hover{opacity:1}
.refmark.none .ytmark{background:var(--line-strong)}
.titlecell .t{
  font-weight:600;font-size:14.5px;line-height:1.45;letter-spacing:-.01em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The title opens the video like the rest of the row does, rather than
   putting a caret in the text. It is edited on the video's own page. */
.titlecell .tlink{
  flex:1 1 auto;color:inherit;text-decoration:none;cursor:pointer;
}
.titlecell .tlink:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.titlecell .tin{
  border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);
  padding:3px 6px;margin:-3px -6px;font-weight:600;font-size:14.5px;line-height:1.45;
  letter-spacing:-.01em;outline:none;min-height:22px;
  min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.titlecell .tin:focus{white-space:normal;overflow:visible;text-overflow:clip}
.titlecell .tin:hover{border-color:var(--line-mid)}
.titlecell .tin:focus{border-color:var(--accent);background:var(--surface)}
.titlecell .tin:empty::before{content:attr(data-ph);color:var(--text-faint);font-weight:500}
/* ---------- the hooks, on the video's own page ----------
   Three of them, meant to be read one after another and compared, so they are
   numbered, equal in weight, and separated enough that your eye does not run
   the three together into one paragraph. */
/* 680px was a column for one hook under the other. Six of them read two to a
   row now, and the section was still capped at not much over half the page —
   so the cards were narrow and the page was mostly empty beside them. */
.hooksec{display:flex;flex-direction:column;gap:14px;max-width:none}
.hookhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.hookhead > div{min-width:0}

/* The Save that belongs to the section it sits in. */
.btn-save-here{flex:none;min-width:82px}
.btn-save-here:disabled{opacity:.45;cursor:default;background:var(--line-strong);border-color:transparent}

/* Two to a row, the way the reference packs them. Six hooks stacked in full
   width was a page of scrolling to compare things that are meant to be read
   against each other — and comparing them is the whole job. */
/* Two to a row, like the reference. At the full width three would fit, but
   three narrow columns break a fifty-word hook over five lines — two wide
   ones hold it in two, which is how it is read out loud. */
.hooklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:10px;align-items:start}
/* The card the reference draws: a still on the left, a quiet line of what is
   known about the hook, and the hook itself as text you read rather than a
   box you stare into. The controls arrive on hover, so six of these read as
   six sentences instead of six forms. */
.hookcard{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  padding:13px 15px;transition:border-color .15s ease,box-shadow .15s ease;
}
.hookcard:hover{border-color:var(--line-mid)}
.hookcard.editing{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.hookthumb{
  width:64px;height:80px;border-radius:9px;object-fit:cover;display:block;flex:none;
  background:var(--raised);border:1px solid var(--line);
}
.hookthumb.none{display:grid;place-items:center}
.hookthumb.none i{font-style:normal;font-weight:700;font-size:15px;color:var(--text-faint)}
.hookbody{min-width:0;display:flex;flex-direction:column;gap:5px}
.hookmeta{display:flex;align-items:center;gap:8px;min-height:22px;padding-right:4px}
.hookmeta-t{
  font-size:12.5px;color:var(--text-faint);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px;
}
.hookdot{font-style:normal;opacity:.5}
/* Quiet until the card is under the cursor — and always there for a keyboard,
   which never hovers.

   Positioned out of the flow rather than laid out beside the meta: at opacity
   0 they still took their width, which squeezed "10 seconds · about right"
   down to "10 seconds · about rig" on every card. */
.hookacts{
  position:absolute;top:11px;right:13px;display:flex;gap:4px;
  padding-left:10px;background:var(--surface);
  /* max-content, not shrink-to-fit. With only `right` set, an absolutely
     positioned box is sized from where it would have sat in flow — which is
     after the meta text — so it was handed the ~90px left over and clipped
     "Delete" to "Del". */
  width:max-content;max-width:calc(100% - 26px);
  opacity:0;pointer-events:none;transition:opacity .14s ease;
}
.hookcard:hover .hookacts,.hookcard:focus-within .hookacts{pointer-events:auto}
.hookcard:hover .hookacts,.hookcard:focus-within .hookacts{opacity:1}
.hookact{
  flex:none;white-space:nowrap;
  border:1px solid var(--line);background:var(--canvas);border-radius:var(--radius-sm);
  padding:3px 9px;font:inherit;font-size:11.5px;font-weight:600;color:var(--text-dim);
  cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.hookact:hover{background:var(--raised);color:var(--text);border-color:var(--line-mid)}
/* Not ".del" — that is already a 26x26 icon bin elsewhere on this page, and
   sharing the name handed this button a fixed width and display:grid. */
.hookact.danger:hover{background:var(--bad-wash);color:var(--bad);border-color:var(--bad)}
.hooktext{
  margin:0;font-size:14.5px;line-height:1.6;letter-spacing:-.005em;cursor:text;
}
.hooktext.empty{color:var(--text-faint)}
.hookcard .hookin{
  display:block;width:100%;border:1px solid var(--line-mid);outline:none;resize:vertical;
  background:var(--canvas);border-radius:var(--radius-sm);
  padding:8px 10px;font:inherit;font-size:14.5px;line-height:1.6;color:var(--text);
  overflow:hidden;
}
.hookcard .hookin:focus{border-color:var(--accent);background:var(--surface)}
.hookcard .hookro{font-size:14.5px;line-height:1.6}
.hookbar{font-size:0}
.hookmeter{font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hookmeter.empty{color:var(--text-faint)}
.hookmeter.good{color:var(--ok)}
.hookmeter.short{color:var(--text-dim)}
.hookmeter.long{color:var(--warn)}

/* The recorded opening is reference, not work, so it folds away. */
.hookopen{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--canvas);max-width:680px}
.hookopen summary{
  cursor:pointer;padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--text-dim);
  list-style:none;display:flex;align-items:center;gap:10px;
}
.hookopen summary::-webkit-details-marker{display:none}
.hookopen summary::before{
  content:"";width:6px;height:6px;flex:none;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.5;transition:transform .18s ease;
}
.hookopen[open] summary::before{transform:rotate(45deg)}
.hookopen summary:hover{color:var(--text)}
.hookopen p{margin:0;padding:0 16px 15px 32px;font-size:13.5px;line-height:1.7;color:var(--text-dim);overflow-wrap:anywhere}
.hooknone{font-size:12.5px;color:var(--text-faint);margin:0}

/* The repo, beside the owner and the status rather than on every board row. */
.repochip{display:inline-flex;align-items:center;gap:7px}
.vchip-key{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}

.ytmark{width:15px;height:11px;border-radius:3px;background:#FF0033;flex:none;display:inline-block;position:relative}
.ytmark::after{content:"";position:absolute;left:5.5px;top:2.6px;border-left:4.5px solid #fff;border-top:2.9px solid transparent;border-bottom:2.9px solid transparent}

.cellinput{width:100%;border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);padding:4px 6px;margin:-4px -6px;font-size:13.5px}
.cellinput:hover{border-color:var(--line-mid)}
.cellinput:focus{border-color:var(--accent);background:var(--surface);outline:none}
.datecell{width:106px}
.datecell .cellinput{width:100%}
.ownercell{width:200px}
.ownerwrap{display:flex;align-items:center;gap:8px;min-width:0}
.ownerwrap .nm,.ownerwrap .pickbtn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:10px;font-weight:600;color:#fff;letter-spacing:-.02em}
.avatar.empty{background:var(--idle-wash);color:var(--text-faint);border:1px dashed var(--line-mid)}
.claim{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-deep);border:1px dashed var(--accent-line);padding:3px 8px;border-radius:999px;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.claim:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);border-style:solid}

/* Wider since the labels gained a number, and the number is the half worth
   keeping: a truncated "5. Ready to be Publi…" still tells you the stage. */
.statuscell{width:232px}
.stwrap{position:relative;display:block}
.st-dot{position:absolute;width:7px;height:7px;border-radius:50%;left:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.status-select{
  width:100%;appearance:none;border-radius:999px;padding:6px 23px 6px 23px;
  font-size:12.5px;font-weight:600;border:1px solid transparent;outline:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
}
.status-select:disabled{cursor:default;opacity:1;background-image:none;padding-right:14px}
.s-todo{background-color:var(--idle-wash);color:var(--text-dim)}
.s-todo-dot{background:var(--text-faint)}
.s-wip{background-color:var(--warn-wash);color:var(--warn)}
.s-wip-dot{background:var(--warn-dot)}
.s-pub{background-color:var(--accent-wash);color:var(--accent-deep)}
.s-pub-dot{background:var(--accent)}
.s-done{background-color:var(--ok-wash);color:var(--ok)}
.s-redo{background-color:var(--warn-wash);color:var(--warn)}
.s-redo-dot{background:var(--warn-dot)}
.s-done-dot{background:var(--ok-dot)}
/* between review and upload: green like Done, because the work is finished,
   but filled in rather than washed, because somebody still has to press go */
.s-ready{background-color:var(--ok-dot);color:#fff}
/* a halt, not a stage: the only red in the set, because it is the one that
   wants somebody to do something about it */
.s-blocked{background-color:var(--bad-wash);color:var(--bad)}
.s-blocked-dot{background:var(--bad)}
.s-ready-dot{background:#fff;opacity:.9}

/* The chips are short now, so these give the width back to the columns that
   hold readable text. */
.linkcell{width:162px}
.submittedcell{width:162px}
/* One line, not two. A column here cost every row on the board a second
   line for a field most rows do not have. */
.linkstack{display:flex;align-items:center;gap:6px;min-width:0}
.linkstack .linkrow{flex:1 1 auto;min-width:0}
.repomark{
  flex:none;display:grid;place-items:center;width:24px;height:24px;line-height:0;
  border-radius:var(--radius-sm);color:var(--text);text-decoration:none;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.repomark:hover{background:var(--accent-wash);color:var(--accent-deep)}
.repomark.none{color:var(--line-strong)}
.repomark.none:hover{color:var(--accent-deep)}
.repoedit{
  flex:none;width:18px;height:24px;color:var(--text-faint);font-size:11px;
  background:none;border:0;cursor:pointer;padding:0;
}
.repoedit:hover{color:var(--accent-deep)}
.repoinput{flex:none!important;width:104px!important;border:1px dashed var(--accent-line);background:var(--accent-wash)}
.linkrow{display:flex;align-items:center;gap:6px;font-size:13px;min-width:0}

/* Present is green, missing is red. The point is that a full board can be
   scanned for gaps without reading a single URL. */
.chip-link{
  /* Capped, or the chip sets the column's minimum width and squeezes the
     owner and status columns instead of ellipsing itself. */
  display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100px;
  background:var(--ok-wash);border:1px solid var(--ok-dot);border-radius:999px;
  padding:3px 5px 3px 10px;text-decoration:none;color:var(--ok);
  font-size:12.5px;font-weight:500;transition:background-color .15s ease;
}
.chip-link:hover{background:var(--ok-dot);color:#fff;text-decoration:none}
.chip-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:12px}
.chip-go{flex:none;opacity:.8;font-size:11px}
.chip-edit{
  flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:var(--radius-sm);
  color:var(--text-faint);font-size:11px;line-height:1;opacity:0;transition:opacity .15s ease;
}
tr:hover .chip-edit,.chip-edit:focus{opacity:1}
.chip-edit:hover{background:var(--raised);color:var(--text)}

.linkrow.missing .none{color:var(--bad);font-size:12.5px}
.linkinput{
  flex:1 1 auto;min-width:0;width:100%;border:1px solid transparent;background:transparent;
  border-radius:var(--radius-sm);padding:4px 8px;font-size:12.5px;
  color:var(--text-dim);text-overflow:ellipsis;
}
.linkrow.missing .linkinput{
  border:1px dashed var(--bad);background:var(--bad-wash);color:var(--bad);
}
.linkrow.missing .linkinput::placeholder{color:var(--bad);opacity:.75}
.linkinput:hover{border-color:var(--line-mid)}
.linkinput:focus{border-style:solid;border-color:var(--accent);background:var(--surface);outline:none;color:var(--text)}

/* A row's status, so the board reads at a glance. */
table.board tbody tr.s-done-row{background:rgb(11 164 107 / .06)}
table.board tbody tr.s-done-row:hover{background:rgb(11 164 107 / .12)}
table.board tbody tr.s-redo-row{background:var(--warn-wash)}
table.board tbody tr.s-redo-row:hover{background:rgb(217 142 0 / .18)}
table.board tbody tr.s-blocked-row{background:var(--bad-wash)}
table.board tbody tr.s-blocked-row:hover{background:rgb(179 38 30 / .13)}
table.board tbody tr.s-ready-row{background:rgb(11 164 107 / .12)}
table.board tbody tr.s-ready-row:hover{background:rgb(11 164 107 / .19)}
table.board tbody tr.s-pub-row{background:var(--accent-wash)}
table.board tbody tr.s-pub-row:hover{background:rgb(109 43 255 / .13)}

.rowtools{width:64px;white-space:nowrap}
/* A bin, not a cross. Every other cross on this page closes something; this
   one destroyed a row, and the two should not look alike. */
.del{
  display:grid;place-items:center;width:26px;height:26px;
  color:var(--text-faint);border-radius:var(--radius-sm);line-height:0;
  transition:background .15s ease,color .15s ease;
}
.del:hover,.del:focus-visible{background:var(--bad-wash);color:var(--bad)}
.emptyrow{padding:36px 16px;text-align:center;color:var(--text-dim)}

.banner{display:flex;gap:10px;align-items:flex-start;border-radius:var(--radius-lg);padding:12px 15px;font-size:13.5px;margin-bottom:20px;border:1px solid}
.banner b{font-weight:600}
.banner code{font-family:"IBM Plex Mono",monospace;font-size:12px}
.banner.warn{background:var(--warn-wash);border-color:color-mix(in srgb,var(--warn-dot) 40%,transparent);color:var(--text)}
.banner.info{background:var(--accent-wash);border-color:var(--accent-line);color:var(--text)}
.banner.bad{background:var(--bad-wash);border-color:color-mix(in srgb,var(--bad) 38%,transparent);color:var(--text)}

/* ---------- reference content ---------- */
/* ---------- playbook ----------
   Four phases on a rail, each holding its own steps. The rail carries the
   sense of order that four identical lists could not. */
.goalcard{
  background:var(--accent-wash);border:1px solid var(--accent-line);
  border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:34px;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.goalcard p{font-size:15.5px;line-height:1.6;max-width:66ch;margin:0}

.phases{list-style:none;margin:0;padding:0;counter-reset:ph}
.phase{position:relative;padding-left:58px;padding-bottom:34px}
.phase:last-child{padding-bottom:6px}
/* the rail, drawn between one marker and the next */
.phase::before{
  content:"";position:absolute;left:17px;top:38px;bottom:0;
  width:2px;background:var(--line);
}
.phase:last-child::before{display:none}
.phase-mark{
  counter-increment:ph;
  position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:500;
}
.phase-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;min-height:36px;margin-bottom:14px}
.phase-head h2{font-size:19px;margin:0}
.phase-note{color:var(--text-dim);font-size:14px}

.steps{counter-reset:s;list-style:none;margin:0;padding:4px 20px}
.step{
  counter-increment:s;
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:0}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--text-faint);
  padding-top:4px;font-weight:500;letter-spacing:.02em;
}
.step p{font-size:15.5px;line-height:1.6;max-width:72ch;margin:0}

.footnote{color:var(--text-faint);font-size:13.5px;margin-top:30px}
.bullets{display:flex;flex-direction:column;gap:13px;padding:0;margin:0;list-style:none;max-width:70ch}
/* A normal block, not a grid: grid put every child node — text, <b>, <a> —
   into its own cell, which stacked inline markup one word per line. The
   marker is positioned instead so content flows as ordinary inline text. */
.bullets li{position:relative;padding-left:27px;font-size:15.5px;line-height:1.6}
.bullets li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
.callout{
  border:1px solid var(--accent-line);background:var(--accent-wash);
  border-radius:var(--radius-lg);padding:15px 17px;display:flex;flex-direction:column;gap:7px;
}
.callout p{font-size:15.5px;line-height:1.6}
.kv{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);border-top:1px solid var(--line)}
.kv>div{padding:10px 2px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.kv .k{color:var(--text-dim);font-size:14px}
.kv .v{font-weight:600;font-size:15px}
.shot{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--raised)}
.figure{display:flex;flex-direction:column;gap:9px}
.figure figcaption{font-size:12.5px;color:var(--text-dim)}
.figure.tall{align-items:flex-start}
.figure.tall .shot{max-height:440px;width:auto;max-width:100%;object-fit:contain;padding:8px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}

.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.swatch{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.swatch .fill{height:92px}
.swatch .meta{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.swatch .nm{font-weight:600;font-size:14px;letter-spacing:-.01em}
.swatch .hx{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--text-dim)}
.swatch .hx:hover{color:var(--accent-deep)}

.linklist{display:flex;flex-direction:column}
.linkitem{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.linkitem:last-child{border-bottom:0}
.linkitem .nm{font-weight:600;font-size:14.5px;min-width:132px;letter-spacing:-.01em}
.linkitem .u{font-family:"IBM Plex Mono",monospace;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.secret{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.secret code{font-family:"IBM Plex Mono",monospace;font-size:13px;background:var(--raised);border:1px solid var(--line);padding:4px 10px;border-radius:var(--radius-sm)}
.msgbox{white-space:pre-wrap;font-size:15px;line-height:1.7;max-width:74ch;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:17px 19px}
/* Sub-heading inside a section, below the section's own h2. */
.subhead{
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  margin:26px 0 12px;color:var(--text);
}
.section>.subhead:first-child{margin-top:0}

/* ---------- owner picker ---------- */
.picker{position:relative;flex:1 1 auto;min-width:0}
.picker input{width:100%}
.pickmenu{
  position:fixed;z-index:200;max-height:min(300px,52vh);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  box-shadow:0 18px 44px -16px rgb(var(--ink-rgb) / .38);
  padding:5px;
}
.pickopt{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 10px;border:0;border-radius:var(--radius-sm);background:transparent;
  font:inherit;font-size:14px;color:var(--text);cursor:pointer;
}
.pickopt:hover,.pickopt[aria-selected="true"]{background:var(--raised)}
.pickopt .n{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:var(--text-faint);
}
.pickopt.add{color:var(--accent);font-weight:600}
.pickopt.clear{color:var(--text-faint);font-size:13px}
.pickdiv{height:1px;background:var(--line);margin:5px 2px}
.pickempty{padding:9px 10px;color:var(--text-faint);font-size:13px;line-height:1.45}
.ownername{font-size:14px;color:var(--text)}

/* ---------- date picker ---------- */
.datebtn{
  border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);
  padding:5px 9px;font:inherit;font-size:14px;color:var(--text);cursor:pointer;text-align:left;
  white-space:nowrap;
}
.datebtn:hover{background:var(--raised);border-color:var(--line)}
.datebtn.empty{color:var(--text-faint)}
.datemenu{
  position:fixed;z-index:200;padding:12px;
  background:var(--surface);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  box-shadow:0 18px 44px -16px rgb(var(--ink-rgb) / .38);
}
.dphead{display:flex;gap:6px;margin-bottom:11px}
.dpquick{
  flex:1;border:1px solid var(--line-mid);background:transparent;border-radius:999px;
  padding:5px 10px;font:inherit;font-size:12px;font-weight:500;color:var(--text);cursor:pointer;
}
.dpquick:hover{background:var(--raised)}
.dpquick.clear{color:var(--text-faint)}
.dpgrid{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start}
.dprows{
  display:grid;grid-template-rows:repeat(3,1fr);gap:2px;
  padding-top:26px;font-size:10.5px;color:var(--text-faint);line-height:1.2;
}
.dprows span{display:flex;align-items:center;height:32px}
.dpdays{display:grid;grid-template-columns:repeat(7,32px);gap:2px}
.dpweekdays{
  display:contents;
}
.dpweekdays span{
  height:24px;display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--text-faint);
}
.dpday{
  height:32px;border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);
  font:inherit;font-size:13px;color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums;
}
.dpday:hover{background:var(--raised)}
.dpday.past{color:var(--text-faint)}
.dpday.today{border-color:var(--line-strong);font-weight:600}
.dpday.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

/* ---------- submit ---------- */
.submitbtn{
  border:1px dashed var(--bad);background:var(--bad-wash);color:var(--bad);
  border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  white-space:nowrap;
}
.submitbtn:hover{background:var(--bad);border-color:var(--bad);color:#fff}
.trmark{
  flex:none;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;
  background:var(--ok-wash);color:var(--ok);
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
}
.modal-wide{max-width:600px}
.subguide{padding:0;margin:0 0 4px}
.subguide .step{padding:9px 0}
.subguide .step p{font-size:14.5px}
.field textarea{
  background:var(--canvas);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:10px 12px;font:inherit;font-size:14px;line-height:1.55;color:var(--text);
  outline:none;width:100%;resize:vertical;min-height:120px;
  transition:border-color .16s ease;
}
.field textarea:focus{border-color:var(--accent)}
.field textarea::placeholder{color:var(--text-faint)}

/* ---------- dialog ---------- */
.modal-back{
  position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;
  padding:6vh 20px 20px;overflow-y:auto;
  background:rgb(var(--ink-rgb) / .32);backdrop-filter:blur(2px);
}
.modal{
  width:100%;max-width:520px;background:var(--surface);
  border:1px solid var(--line-mid);border-radius:var(--radius-lg);
  box-shadow:0 24px 60px -20px rgb(var(--ink-rgb) / .35);
  display:flex;flex-direction:column;
}
.modal-head{display:flex;align-items:flex-start;gap:14px;padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.modal-head h2{font-size:19px;margin:0}
.modal-sub{margin:6px 0 0;color:var(--text-dim);font-size:13.5px;line-height:1.5;max-width:44ch}
.xbtn{
  margin-left:auto;flex:none;width:30px;height:30px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:transparent;color:var(--text-faint);
  font-size:21px;line-height:1;cursor:pointer;
}
.xbtn:hover{background:var(--raised);color:var(--text)}
.modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:15px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.flabel{font-size:13.5px;font-weight:500;color:var(--text-dim)}
.fhint{font-size:12px;color:var(--text-faint);line-height:1.45}
.field input,.field select{
  background:var(--canvas);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:9px 12px;font:inherit;font-size:14.5px;color:var(--text);outline:none;width:100%;
  transition:border-color .16s ease;
}
.field input:focus,.field select:focus{border-color:var(--accent)}
.field input::placeholder{color:var(--text-faint)}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:16px 24px 20px;border-top:1px solid var(--line)}

/* ---------- delete, confirmed ----------
   The row is named and the collateral is spelled out, because "are you sure"
   over an unnamed row is a question nobody can actually answer. */
.modal-sm{max-width:440px}
.delrow{
  display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:12px 14px;font-size:15px;
}
.delrow b{font-weight:600;letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere}
.delwho{margin-left:auto;font-size:12.5px;color:var(--text-faint);white-space:nowrap;padding-left:10px}
.delwarn{
  margin:0;font-size:13.5px;line-height:1.55;color:var(--bad);
  background:var(--bad-wash);border-radius:var(--radius-sm);padding:10px 12px;
}
.btn-danger{
  background:var(--bad);border-color:var(--bad);color:#fff;font-weight:600;
}
.btn-danger:hover{filter:brightness(1.06)}
@media (max-width:560px){ .frow{grid-template-columns:1fr} }

/* ---------- people ---------- */
/* Wider cards, and two columns of fields inside them. The card was a single
   stack of eight labels and their hints, which is a long way to scroll for a
   phone number. */
/* One column. It was a grid of three, which reads as a wall of tiles rather
   than a list of people — and a card that opens pushed the two beside it
   about. A list you go down, and opening one moves only what is below it. */
.people{display:flex;flex-direction:column;gap:10px;max-width:820px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pgrid .pfield.wide{grid-column:1 / -1}
@media (max-width:520px){.pgrid{grid-template-columns:1fr}}

/* Where the bank details start, and whether they are finished. */
.paygroup-head-sm{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:3px;padding-top:12px;border-top:1px solid var(--line);
}
.paygroup-head-sm>span{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.pmiss{
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bad);background:var(--bad-wash);border-radius:99px;padding:2px 8px;
}
.pdone{
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ok);background:var(--ok-wash);border-radius:99px;padding:2px 8px;
}
.pfield>span .req{
  font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--bad);background:var(--bad-wash);border-radius:3px;padding:1px 4px;margin-left:5px;
}
.person textarea{
  border:1px solid var(--line-mid);background:var(--canvas);border-radius:var(--radius-sm);
  padding:8px 10px;font:inherit;font-size:13px;line-height:1.5;color:var(--text);
  outline:none;resize:vertical;width:100%;
}
.person textarea:focus{border-color:var(--accent);background:var(--surface)}
.person{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:16px 18px 18px;
  display:flex;flex-direction:column;gap:13px;
}
.person-top{display:flex;align-items:center;gap:11px}
.person-id{min-width:0;flex:1}
.pname{
  border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);
  padding:3px 6px;margin:-3px -6px;width:100%;
  font:inherit;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--text);outline:none;
}
.pname:hover{background:var(--raised)}
.pname:focus{background:var(--canvas);border-color:var(--accent)}
.person-n{display:block;margin-top:3px;font-size:12px;color:var(--text-faint)}
.pfield{display:flex;flex-direction:column;gap:6px}
.pfield>span{font-size:12.5px;font-weight:500;color:var(--text-dim)}
.pfield input{
  background:var(--canvas);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:8px 11px;font:inherit;font-size:14px;color:var(--text);outline:none;width:100%;
  transition:border-color .16s ease;
}
.pfield input:focus{border-color:var(--accent)}
.pfield input.bad{border-color:var(--bad)}
.pwa{
  display:flex;align-items:stretch;
  border:1px solid var(--line-mid);border-radius:var(--radius-md);
  background:var(--canvas);overflow:hidden;transition:border-color .16s ease;
}
.pwa:focus-within{border-color:var(--accent)}
.pwa.bad{border-color:var(--bad)}
.pwa .cc{
  display:grid;place-items:center;padding:0 10px;flex:none;
  background:var(--raised);color:var(--text-dim);
  font-family:"IBM Plex Mono",monospace;font-size:13px;
  border-right:1px solid var(--line);
}
.pwa input{border:0;border-radius:0;background:transparent}
.perr{font-size:12px;color:var(--bad);line-height:1.45}
.pok{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--text-faint)}
/* Says what a field is for while it is empty, and gets out of the way as
   soon as there is a value or a problem to report instead. */
.phint{font-size:11.5px;color:var(--text-faint);line-height:1.45}
/* Nobody is paid until this exists, so it is a banner, not a footnote. */
.banknudge{margin:0 0 18px}
.prem{
  position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:transparent;color:var(--text-faint);
  font-size:17px;line-height:1;cursor:pointer;
}
.prem:hover{background:var(--bad-wash);color:var(--bad)}

/* ---------- one video: compare ---------- */
.backlink{
  display:inline-block;margin-bottom:18px;font-size:13.5px;color:var(--text-dim);
  text-decoration:none;
}
.backlink:hover{color:var(--text)}
.vhead{margin-bottom:22px}
.vhead h2{font-size:24px;margin:0 0 10px;letter-spacing:-.025em;max-width:60ch}
/* Where the title is actually changed now. Quiet until you go near it, the
   same as every other edit-in-place on the board. */
.vtitle{
  display:inline-block;border:1px solid transparent;border-radius:var(--radius-sm);
  padding:1px 6px;margin:-1px -6px;outline:none;min-width:2ch;
}
.vtitle:hover{border-color:var(--line-mid)}
.vtitle:focus{border-color:var(--accent);background:var(--canvas)}
.vtitle:empty::before{content:attr(data-ph);color:var(--text-faint)}
.vmeta{display:flex;gap:7px;flex-wrap:wrap}
.ratebtn{display:inline-block;margin-top:16px}
.vchip{
  border:1px solid var(--line-mid);border-radius:999px;padding:4px 11px;
  font-size:12.5px;font-weight:500;
}
.vchip.dim{color:var(--text-faint)}
/* the status control sits in the chip row rather than wearing a chip of its own */
.vchip.statuschip{padding:0;border:0;background:transparent}
.vchip.statuschip .stwrap{position:relative}
.vchip.statuschip .status-select{padding:5px 26px 5px 26px;font-size:12.5px}
.vchip.statuschip .claimed{display:none}

/* Who recorded it, and how to reach them — without leaving the page. */
.person-chip{position:relative;display:inline-flex;align-items:center;gap:7px;cursor:default;outline:none}
.person-chip:hover,.person-chip:focus-visible{border-color:var(--line-strong)}
.avatar.tiny{width:18px;height:18px;font-size:8.5px}
.pc-card{
  position:absolute;top:calc(100% + 7px);left:0;z-index:60;min-width:262px;
  display:none;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--line-mid);border-radius:var(--radius-lg);
  padding:14px;box-shadow:0 12px 34px rgb(0 0 0 / .12);cursor:auto;
  font-size:13px;font-weight:400;text-align:left;
}
.person-chip:hover .pc-card,.person-chip:focus-within .pc-card{display:flex}
/* keeps the pointer inside the chip while it travels to the card */
.pc-card::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.pc-head{display:flex;align-items:center;gap:10px;padding-bottom:11px;margin-bottom:7px;border-bottom:1px solid var(--line)}
.pc-head b{display:block;font-size:14px;letter-spacing:-.01em}
.pc-head small{display:block;font-size:12px;color:var(--text-faint);margin-top:1px}
.pc-row{
  display:flex;align-items:center;gap:9px;padding:7px 8px;margin:0 -8px;border-radius:var(--radius-sm);
  text-decoration:none;color:var(--text);
}
.pc-row:hover{background:var(--raised);text-decoration:none}
.pc-row.none{color:var(--text-faint)}
.pc-i{flex:none;width:16px;text-align:center;color:var(--text-faint);font-size:12px}
.pc-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.pc-go{flex:none;font-size:11px;font-weight:600;color:var(--ok);background:var(--ok-wash);border-radius:999px;padding:2px 8px}
.pc-fix{
  display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--accent-deep);text-decoration:none;
}
.pc-fix:hover{text-decoration:underline}
.vhead,.vmeta{overflow:visible}

/* ---------------- the two marks, top right ----------------

   The AI mark and Yar's are what the page is for — one gates the move to Get
   Feedback, the other sets the pay — and both used to be a tab away. They sit
   next to the title now, on every tab, big enough to read across a desk.

   They wear the board's own colour language, so a number means the same thing
   here as it does in the AI and Yar columns: green is 8 and up, amber is 5 to
   8, red is under 5. Tokens throughout, so it follows the theme. */
.vhead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px 24px;flex-wrap:wrap}
.vhead-main{flex:1 1 380px;min-width:0}
.vscores{display:flex;gap:10px;flex:0 0 auto;margin-left:auto;align-items:stretch}
/* The two videos this page is about, stacked beside the two marks it carries.
   They were a mark in the board's title cell and a link cell three columns
   over — findable, but not from here. */
.vlinks{display:flex;flex-direction:column;gap:8px;justify-content:center}
.vlink{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  border:1px solid var(--line-mid);border-radius:var(--radius-md);
  background:var(--surface);padding:8px 13px 8px 11px;white-space:nowrap;
  transition:border-color .14s ease,background .14s ease;
}
.vlink:hover{border-color:var(--accent);background:var(--raised)}
.vlink .platmark{flex:none}
.vlink span{display:flex;flex-direction:column;line-height:1.25}
.vlink b{font-size:13px;font-weight:600}
.vlink i{font-style:normal;font-size:11px;color:var(--text-faint)}
@media (max-width:900px){
  .vlinks{flex-direction:row;flex-wrap:wrap}
}
.vscore{
  display:flex;flex-direction:column;gap:1px;
  width:168px;padding:12px 14px 12px;
  border:1px solid var(--line-mid);border-radius:14px;background:var(--sunken);
  font:inherit;color:inherit;text-align:left;
}
.vscore-k{
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-faint);
}
.vscore b{
  font-size:42px;font-weight:600;letter-spacing:-.04em;line-height:1.04;
  font-variant-numeric:tabular-nums;
}
.vscore b i{font-style:normal;font-size:.38em;font-weight:500;color:var(--text-faint);margin-left:2px}
/* Two lines of room, so a verdict wraps instead of pushing the card wider
   than the one beside it. */
.vscore-s{font-size:11.5px;line-height:1.35;color:var(--text-dim);min-height:2.7em}

.vscore.good{border-color:var(--ok-dot);background:var(--ok-wash)}
.vscore.good b{color:var(--ok)}
.vscore.ok{border-color:var(--warn-dot);background:var(--warn-wash)}
.vscore.ok b{color:var(--warn)}
.vscore.poor{border-color:var(--bad);background:var(--bad-wash)}
.vscore.poor b{color:var(--bad)}
.vscore.none b{color:var(--text-faint)}

button.vscore{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}
button.vscore:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.07)}

/* On a phone the two cards take the full width rather than shrinking to
   something unreadable — they are the reason to open the page. */
@media (max-width:720px){
  .vscores{width:100%;margin-left:0}
  .vscore{flex:1 1 0;width:auto;padding:10px 12px}
  .vscore b{font-size:34px}
}

.ratebtn{display:none}

/* The two scripts stack, each behind its own header. Side by side they got
   a column each on a page that also has a 244px rail, which is not enough
   room for a transcript to be readable in either of them. */
.scripts{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
/* ---------------- the tab strips ----------------

   One control, not five loose pills. The old strip put a solid coloured lozenge
   next to four pieces of weak grey text, so the row read as one shouting
   button beside some labels rather than as a set of things you choose
   between — and it was written in hardcoded hex, which meant it kept its
   light-mode colours in the dark and the active tab went on wearing its
   light-mode fill.

   It is a track with a raised thumb now. The selected tab looks like a
   surface that has come forward, which is the same idea a physical segmented
   control uses and does not depend on colour alone to say which one is on.
   Everything is a token, so it follows the theme.

   The strip scrolls rather than wraps: five tabs reflowing onto two ragged
   lines on a phone moved the page under whatever somebody was reading. */
.video-tabs,.subtabs{
  display:flex;gap:2px;flex-wrap:nowrap;max-width:100%;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px;margin:24px 0 20px;
  border:1px solid var(--line);border-radius:14px;background:var(--sunken);
  width:max-content;
}
/* The video strip runs the full width and carries the one action that
   belongs to the tab you are on, so the panel below starts with content
   rather than with a row of buttons. */
.video-tabs{
  width:auto;align-items:center;gap:3px;
  background:var(--surface);border-color:var(--line-mid);
}
.video-tabs-end{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  padding-left:10px;flex:none;
}
.video-tab{display:flex;align-items:center;gap:7px}
.video-tab .navicon{width:15px;height:15px;flex:none;opacity:.75}
.video-tab.active .navicon{opacity:1}
.video-tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar{display:none}
.video-tab,.subtab{
  border:0;background:transparent;color:var(--text-dim);
  border-radius:10px;padding:8px 15px;font:inherit;font-size:13.5px;font-weight:600;
  white-space:nowrap;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.video-tab:hover,.subtab:hover{color:var(--text);background:rgb(var(--ink-rgb) / .05)}
.video-tab.active,.subtab.on{
  background:var(--surface);color:var(--text);
  box-shadow:0 1px 2px rgb(var(--ink-rgb) / .10),0 0 0 1px var(--line-mid);
}
/* A hairline of brand on the selected one. Enough to find at a glance,
   nowhere near enough to read as a call to action. */
/* Selected reads as selected on its own — a tinted chip with a brand outline,
   the way the reference does it — rather than a white chip needing an
   underline to be found. */
.video-tab.active{
  background:var(--accent-wash);color:var(--accent-deep);
  box-shadow:0 0 0 1px var(--accent);
}
.video-tab:focus-visible,.subtab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.video-tab-panel{display:none}
/* Left, not centred. `margin:0 auto` pushed every panel into the middle of a
   wide screen while the heading, the tab strip and the chips above it stayed
   hard left — so the page had two different left edges and the eye had to
   find the second one on every tab. */
.video-tab-panel.active{display:block;max-width:1180px;margin:0}
.video-tab-panel > :first-child{margin-top:0}
.video-tab-panel > :last-child{margin-bottom:0}
.video-tab-panel .review,.video-tab-panel .aiscore,.video-tab-panel .packaging{margin-top:0}
.script{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color .18s ease;
}
.script:hover{border-color:var(--line-mid)}
.script.open{border-color:var(--line-mid)}
.script-head{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:16px 18px;background:transparent;border:0;cursor:pointer;color:inherit;
}
.script-head:hover{background:var(--raised)}
.script-n{
  flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-mid);font-family:"IBM Plex Mono",monospace;
  font-size:12px;color:var(--text-faint);
}
.script.open .script-n{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-wash)}
.script-id{display:flex;flex-direction:column;gap:3px;min-width:0}
.script-title{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.script-note{font-size:13px;color:var(--text-faint);line-height:1.4}
.script-state{margin-left:auto;flex:none}
.pill{
  display:inline-block;border:1px solid var(--line-mid);border-radius:999px;
  padding:3px 10px;font-size:12px;font-weight:500;color:var(--text-faint);white-space:nowrap;
}
.pill.ok{border-color:var(--accent-line);background:var(--accent-wash);color:var(--accent-deep)}
.chev{
  flex:none;width:9px;height:9px;border-right:1.6px solid var(--text-faint);
  border-bottom:1.6px solid var(--text-faint);transform:rotate(45deg);
  margin:-4px 4px 0 2px;transition:transform .18s ease;
}
.script.open .chev{transform:rotate(-135deg);margin-top:2px}
.script-body{
  display:flex;flex-direction:column;gap:12px;
  padding:0 18px 18px;border-top:1px solid var(--line);padding-top:16px;
}
.script-link{
  align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--accent-deep);text-decoration:none;background:var(--accent-wash);
  border-radius:var(--radius-sm);padding:4px 9px;
}
.script-link:hover{background:var(--accent);color:var(--accent-ink)}
.script-empty{margin:0;color:var(--text-faint);font-size:14px}
.script-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.script-hint{font-size:12.5px;color:var(--text-faint)}
.tbody{
  max-height:360px;overflow-y:auto;white-space:pre-wrap;
  font-size:14px;line-height:1.7;color:var(--text-dim);
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:14px 16px;
}
.tbody mark{
  background:var(--bad-wash);color:var(--bad);
  border-radius:3px;padding:1px 2px;font-weight:500;
}
.tinput{
  background:var(--canvas);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:12px 14px;font:inherit;font-size:14px;line-height:1.7;color:var(--text);
  outline:none;width:100%;resize:vertical;transition:border-color .16s ease;
}
.tinput:focus{border-color:var(--accent)}
.tinput::placeholder{color:var(--text-faint)}

/* the stable number, so a video can be referred to out loud */
.vno{
  display:inline-block;margin-right:11px;font-variant-numeric:tabular-nums;
  color:var(--text-faint);font-weight:500;
}

/* ---------- review ---------- */
.review{margin-top:30px}
.section-head.sub{border-bottom:0;padding-bottom:0;margin-bottom:8px}
.section-head.sub h3{font-size:15px;margin:0}
.notes{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.cmt{
  border:1px solid var(--line);border-left:2px solid var(--line-strong);
  border-radius:var(--radius-md);background:var(--surface);padding:12px 15px;
}
.cmt.change{border-left-color:var(--warn-dot);background:var(--warn-wash)}
.cmt-top{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.cmt-by{font-weight:600;font-size:13.5px}
.cmt-tag{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--warn);border:1px solid var(--warn-dot);border-radius:999px;padding:1px 8px;
}
.cmt-at{font-size:12.5px;color:var(--text-faint)}
.cmt-x{margin-left:auto;color:var(--text-faint);font-size:16px;line-height:1;padding:2px 5px;border-radius:var(--radius-sm)}
.cmt-x:hover{background:var(--bad-wash);color:var(--bad)}
.cmt p{margin:0;font-size:14px;line-height:1.6;white-space:pre-wrap}
.notes-empty{margin:14px 0 0;font-size:14px;color:var(--text-faint);max-width:70ch;line-height:1.6}
.notebox{margin-top:14px}
.notebox textarea{
  width:100%;background:var(--canvas);border:1px solid var(--line-mid);
  border-radius:var(--radius-md);padding:11px 13px;font:inherit;font-size:14px;
  line-height:1.6;color:var(--text);outline:none;resize:vertical;
}
.notebox-foot{align-items:flex-end;gap:14px;flex-wrap:wrap}
.review-score{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;font-weight:600;white-space:nowrap}
.review-score-input{width:72px!important;padding:8px 9px!important}
.notebox textarea:focus{border-color:var(--accent)}
.notebox-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.notebox-who{font-size:12.5px;color:var(--text-faint);margin-right:auto}
.linkish{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}

/* ---------- packaging ---------- */
.packaging{margin-top:34px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0 18px}
.thumb{display:flex;flex-direction:column;gap:7px;min-width:0}
.thumb-key{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-faint);
}
.thumb img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--sunken);
}
.thumb-none{
  width:100%;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:0 16px;
  border:1px dashed var(--line-mid);border-radius:var(--radius-md);
  color:var(--text-faint);font-size:13px;background:var(--canvas);
}

/* ---------- the thumbnail somebody actually made ----------
   A file, handed over on the video it belongs to. The drop zone is the same
   one feedback screenshots use, sized for a 16:9 image instead of a crop. */
.thumbup{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.thumbdrop{min-height:132px}
.thumbshot{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line-mid);max-width:420px}
.thumbshot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--canvas)}
.thumb-x{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:16px;line-height:1;
  background:rgb(var(--ink-rgb) / .62);color:#fff;cursor:pointer;backdrop-filter:blur(2px);
}
.thumb-x:hover{background:var(--bad)}
.pfield i{font-style:normal;font-weight:400;color:var(--text-faint)}
.thumb-note{margin:0;font-size:12.5px;color:var(--text-faint);line-height:1.5}
.pfield.wide{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.pfield.wide > span{font-size:13px;font-weight:500;color:var(--text-dim)}
.pfield.wide input{
  width:100%;background:var(--canvas);border:1px solid var(--line-mid);
  border-radius:var(--radius-md);padding:10px 13px;font:inherit;font-size:14px;
  color:var(--text);outline:none;
}
.pfield.wide input:focus{border-color:var(--accent)}
.ro{font-size:14px;line-height:1.6;color:var(--text-dim)}
.ro.pre{white-space:pre-wrap;background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-md);padding:13px 15px}
.descwrap .tinput{font-size:13.5px;line-height:1.65}

/* ---------- the button, and what it opens ---------- */
.analyse-cta{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  border:1px solid var(--accent-line);background:var(--accent-wash);
  border-radius:var(--radius-lg);padding:22px 24px;
}
.analyse-cta.blocked{border-color:var(--line);background:var(--surface)}
.analyse-cta h3{margin:0 0 6px;font-size:18px;letter-spacing:-.02em}
.analyse-cta p{margin:0;font-size:14px;line-height:1.6;color:var(--text-dim);max-width:62ch}
.analyse-cta .btn{margin-left:auto;flex:none;padding:11px 20px;font-size:14.5px}
.analyse-cta .btn:disabled{cursor:not-allowed}

.report{
  border:1px solid var(--line-mid);border-radius:var(--radius-lg);
  background:var(--surface);padding:24px;
}
.report-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.report-head h2{font-size:22px;margin:7px 0 8px;letter-spacing:-.025em}
.report-head .lede{font-size:14.5px;margin:0}
.report-head .btn{margin-left:auto;flex:none}

.verdicts{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-bottom:24px}
.verdict{
  display:flex;flex-direction:column;gap:5px;
  border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:16px 18px;background:var(--canvas);
}
.verdict.ok{border-color:var(--ok-dot);background:var(--ok-wash)}
.verdict.warn{border-color:var(--warn-dot);background:var(--warn-wash)}
.verdict.bad{border-color:var(--bad);background:var(--bad-wash)}
.vlabel{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-dim);
}
.verdict b{font-size:34px;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.05}
.verdict.big b{font-size:44px}
.verdict b i{font-style:normal;font-size:.45em;font-weight:500;color:var(--text-faint);margin-left:3px}
.vsay{font-size:14px;line-height:1.5;font-weight:500}
.vsplit{font-size:12.5px;color:var(--text-faint);margin-top:3px;font-variant-numeric:tabular-nums}

/* Behind / ahead / level, not a bare plus or minus: the sign alone never said
   whether the gap was a problem. Readings with no better direction stay grey
   however far apart the two numbers are. */
.mark{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;border-radius:999px;padding:3px 11px;white-space:nowrap;
  background:var(--idle-wash);color:var(--text-faint);
}
.mark i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-weight:500;opacity:.85}
.mark.behind{background:var(--warn-wash);color:var(--warn)}
.mark.ahead{background:var(--ok-wash);color:var(--ok)}
.mark.level{background:var(--idle-wash);color:var(--text-faint)}
.mark.differs{background:transparent;border:1px solid var(--line-mid);color:var(--text-dim);padding:2px 10px}

/* ---------- what to change ----------
   Four cards, not four paragraphs. Each one opens with what it is worth,
   because that is the only number on the row you act on: the ranking already
   knows it, so printing it turns "these are in order" into "this one buys
   1.8 and that one 0.4".

   Mono is for figures here and nowhere else. It used to set the whole metric
   line, which meant a sentence like "questions, promises and direct address
   in the first 30 seconds" was typeset as if it were a number, wrapped onto
   three ragged lines, and read as noise. */
.todo{
  border:1px solid var(--line-mid);border-radius:var(--radius-lg);
  background:var(--canvas);padding:20px 22px 22px;margin-bottom:26px;
}
.todo.none{background:var(--ok-wash);border-color:var(--ok-dot)}
.todo.none p:last-child{margin:8px 0 0;font-size:14.5px;line-height:1.6;max-width:70ch}
.todo-head{margin-bottom:16px}
.todo-lede{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--text-dim);max-width:76ch}
.todo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}

.todo-item{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:15px 17px 16px;
  transition:border-color .15s ease;
}
.todo-item:hover{border-color:var(--line-mid)}

/* the title line: rank, instruction, and the prize */
.todo-top{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px}
.todo-n{
  flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;margin-top:1px;
}
.todo-top h4{
  margin:0;font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.35;
  flex:1 1 auto;min-width:0;
}
.todo-worth{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;
  background:var(--accent-wash);border:1px solid var(--accent-line);
  border-radius:var(--radius-sm);padding:5px 10px 6px;margin-top:-1px;
}
.todo-worth b{
  font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--accent-deep);letter-spacing:-.02em;
}
.todo-worth i{font-style:normal;font-size:10px;color:var(--text-faint);white-space:nowrap;margin-top:1px}

.todo-body{min-width:0}
.todo-body p{margin:0 0 9px;font-size:14px;line-height:1.6;color:var(--text-dim);max-width:74ch}
.todo-body p.how{margin-bottom:0;color:var(--text)}
.todo-body .ev{margin-top:12px}

/* mark, bar, what it is and what it counts for — one line, no wrapping */
.todo-meter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.tm-mark{
  flex:none;font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;border-radius:var(--radius-sm);padding:3px 8px;
  background:var(--idle-wash);color:var(--text);
}
.tm-mark i{font-style:normal;font-size:.72em;font-weight:500;opacity:.6;margin-left:1px}
.tm-mark.good{background:var(--ok-wash);color:var(--ok)}
.tm-mark.ok{background:var(--warn-wash);color:var(--warn)}
.tm-mark.poor{background:var(--bad-wash);color:var(--bad)}
.tm-track{
  flex:none;width:76px;height:6px;border-radius:999px;background:var(--sunken);
  overflow:hidden;position:relative;
}
.tm-track i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--text-faint)}
.tm-track.good i{background:var(--ok-dot)}
.tm-track.ok i{background:var(--warn-dot)}
.tm-track.poor i{background:var(--bad)}
.tm-key{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.005em}
.tm-weight{
  font-size:11.5px;color:var(--text-faint);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap;
}

/* the measurement, in prose type — it is a reading, not a figure */
.todo-now{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:0 0 10px!important;font-size:13.5px!important;color:var(--text-dim)!important;
}
.todo-now .ev-key{flex:none}

@media (max-width:640px){
  .todo-top{flex-wrap:wrap}
  .todo-worth{order:3;margin-left:35px}
}

/* the receipts under each instruction */
.ev{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.ev.cols{flex-direction:row;flex-wrap:wrap;gap:10px}
.ev-key{
  font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-faint);
}
.ev-side{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 260px}
.ev-side q{
  quotes:none;font-size:13.5px;line-height:1.55;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent-line);
  border-radius:var(--radius-sm);padding:9px 12px;
}
.ev-chip{
  display:inline-flex;align-items:baseline;gap:5px;
  background:var(--accent-wash);color:var(--accent-deep);
  border-radius:var(--radius-sm);padding:4px 9px;font-size:12.5px;
}
.ev-chip i{font-style:normal;font-size:11px;opacity:.7}
.ev-chip.bad{background:var(--warn-wash);color:var(--warn)}

.readings{margin-top:4px}
.readings > .eyebrow{display:block;margin-bottom:8px}

/* ---------- the readings, one line each ---------- */
.rtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--canvas)}
.rtable{width:100%;border-collapse:collapse;min-width:660px;font-size:13.5px}
.rtable thead th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-faint);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.rtable thead th.num{text-align:right}
.rtable thead th.gapcol{width:150px}

.rgrouprow th{
  text-align:left;font-size:12.5px;font-weight:600;color:var(--text);
  padding:14px 14px 7px;border-bottom:1px solid var(--line);background:transparent;
}
.rgrouprow span{font-weight:400;color:var(--text-faint);margin-left:9px;font-size:12px}
.rgrouprow:first-child th{padding-top:11px}

.rrow{border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:0}
.rrow:hover{background:var(--surface)}
.rrow td{padding:9px 14px;vertical-align:middle}
.rname{font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.runit{display:block;font-weight:400;font-size:11.5px;color:var(--text-faint);margin-top:1px}
.rnote{color:var(--text-faint);font-style:italic}
.rval{
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;
}
.rval.ref{color:var(--text-dim)}
.rval.ours{color:var(--text);font-weight:500}

/* One bar, growing from the middle: left of centre is below the reference,
   right of centre is above it. */
.rbar{width:150px}
.rtrack{position:relative;display:block;height:8px;border-radius:999px;background:var(--sunken)}
.rtrack b{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--line-strong);opacity:.55}
.rtrack i{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--text-faint)}
.rrow.behind .rtrack i{background:var(--warn-dot)}
.rrow.ahead .rtrack i{background:var(--ok-dot)}
.rrow.differs .rtrack i,.rrow.level .rtrack i{background:var(--line-strong)}
.rstate{text-align:right;white-space:nowrap}

/* the scorecard: a mark out of ten, filled from the left */
.score-note{margin:0 0 12px;font-size:13px;color:var(--text-faint);line-height:1.55;max-width:82ch}
.scoretable .rval.unit{text-align:left;font-family:inherit;font-size:13px;color:var(--text-dim);white-space:normal}
.scoretable .rval.weight{color:var(--text-faint);font-size:12px}
.scoretable .rbar{width:170px}
.scoretable .rbar > .rtrack{display:inline-block;vertical-align:middle;width:calc(100% - 40px)}
.scoretable .scoreval{display:inline-block;vertical-align:middle;margin-left:8px}
.rtrack i.fromleft{left:0}
.rrow.ahead .rtrack i.fromleft{background:var(--ok-dot)}
.rrow.level .rtrack i.fromleft{background:var(--warn-dot)}
.rrow.behind .rtrack i.fromleft{background:var(--bad)}
.scoreval{
  flex:none;width:30px;text-align:right;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);
}
.verdicts{grid-template-columns:1.25fr 1fr 1fr}
@media (max-width:980px){ .verdicts{grid-template-columns:1fr} }
.rstate .mark{margin-left:0}

.shared{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.shared-note{margin:7px 0 12px;font-size:13.5px;color:var(--text-dim)}
.chips-wrap{display:flex;flex-wrap:wrap;gap:6px}
.phrase{
  background:var(--bad-wash);color:var(--bad);border-radius:var(--radius-sm);
  padding:4px 9px;font-size:12.5px;
}

/* ---------- the AI score, with its working ----------
   The score is the reason the board sends you here, so it sits above the
   comparison and opens with the arithmetic rather than the table: the
   question a number on a board provokes is "out of what, and out of
   whose opinion", and one line of sums answers both. */
.aiscore{margin-top:34px;margin-bottom:34px}
.aitop{display:grid;grid-template-columns:minmax(200px,.7fr) 1.3fr;gap:16px;margin:18px 0 26px;align-items:start}
.aiwhere p{margin:0 0 11px;font-size:14px;line-height:1.65;color:var(--text-dim);max-width:74ch}
.aiwhere p:last-child{margin-bottom:0}
.aimath{
  font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.7;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 12px;color:var(--text-dim);overflow-x:auto;white-space:nowrap;
}
.aimath b{color:var(--text);font-size:15px}
@media (max-width:820px){ .aitop{grid-template-columns:1fr} }

/* the working: measurement, rule, mark, weight, and what it actually added */
.worktable{min-width:840px}
.worktable .rrule{
  font-size:12.5px;line-height:1.5;color:var(--text-faint);max-width:34ch;
  padding-right:18px;
}
.worktable .rval.adds{color:var(--text);font-weight:600;width:66px}
.worktable .rbar{width:150px}
.rrow.total{border-top:1px solid var(--line-mid);background:var(--sunken)}
.rrow.total .rname{font-weight:700}
.rrow.total .rval.unit{color:var(--text-faint);font-size:12.5px}
.rrow.total .rval.adds{font-size:14px}

/* one card, two cards: the score card moved out, so the row has to hold
   either the distance alone or the distance and the lifted phrasing */
.verdicts.one{grid-template-columns:1fr}
.verdicts.two{grid-template-columns:1.35fr 1fr}

/* ---------- the number's hover card, on the board ----------
   Fixed to the viewport because .tablewrap scrolls and would clip anything
   nested in a row, and inert so the cursor can pass over it. */
.scorepop{
  position:fixed;z-index:70;width:min(420px,calc(100vw - 24px));
  pointer-events:none;
  background:var(--surface);border:1px solid var(--line-mid);border-radius:var(--radius-lg);
  box-shadow:0 12px 34px rgb(0 0 0 / .16);padding:14px 16px 12px;
}
.scorepop[hidden]{display:none}

/* ---------- what a reading is, in plain words ----------
   Same floating card, different payload. Anything with a name we invented —
   "Signposting", "Pulling them forward" — carries a question mark and answers
   it on hover, because the name alone is meaningless to anyone who has not
   made videos before. */
.explainpop{width:min(360px,calc(100vw - 24px));padding:15px 17px 14px}
.xp-top{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:10px;
}
.xp-top b{font-size:14.5px;letter-spacing:-.015em}
.xp-w{
  margin-left:auto;font-size:11px;color:var(--text-faint);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;
}
.xp-plain{margin:0 0 11px;font-size:13.5px;line-height:1.62;color:var(--text)}
.xp-line{
  margin:0 0 7px;font-size:12.5px;line-height:1.55;color:var(--text-dim);
  display:flex;flex-direction:column;gap:2px;
}
.xp-line:last-child{margin-bottom:0}

/* the affordance: a name you can ask about looks like one */
.asks{cursor:help;position:relative}
.asks .qmark{
  display:inline-grid;place-items:center;width:14px;height:14px;margin-left:6px;
  border-radius:50%;background:var(--idle-wash);color:var(--text-faint);
  font-style:normal;font-size:9.5px;font-weight:700;vertical-align:1px;
  transition:background .15s ease,color .15s ease;
}
.asks:hover .qmark,.asks:focus-visible .qmark{background:var(--accent);color:var(--accent-ink)}
.worktable .rname.asks{white-space:nowrap}
.tm-key.asks{display:inline-flex;align-items:center}
.sp-top{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.sp-num{
  flex:none;min-width:46px;text-align:center;border-radius:var(--radius-sm);padding:5px 8px;
  font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;
  background:var(--idle-wash);color:var(--text);
}
.sp-num.good{background:var(--ok-wash);color:var(--ok)}
.sp-num.ok{background:var(--warn-wash);color:var(--warn)}
.sp-num.poor{background:var(--bad-wash);color:var(--bad)}
.sp-said{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-said b{font-size:13px;letter-spacing:-.01em}
.sp-said span{font-size:12.5px;color:var(--text-dim);line-height:1.45}
.sp-note{margin:0 0 10px;font-size:12px;line-height:1.55;color:var(--text-faint)}
.sp-rows{width:100%;border-collapse:collapse;font-size:12px}
.sp-rows td{padding:4px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.sp-rows tr:last-child td{border-bottom:0}
.sp-l{font-weight:600;white-space:nowrap;padding-right:10px!important}
.sp-u{color:var(--text-faint);width:100%;padding-right:10px!important}
.sp-m{
  font-family:"IBM Plex Mono",monospace;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:9px!important;
}
.sp-m.good{color:var(--ok)}
.sp-m.ok{color:var(--warn)}
.sp-m.poor{color:var(--bad)}
.sp-w{
  font-family:"IBM Plex Mono",monospace;color:var(--text-faint);text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.sp-off .sp-u{font-style:italic}
.sp-foot{
  margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:11.5px;color:var(--text-faint);
}
.sp-foot .mono{color:var(--text-dim)}

@media (max-width:820px){
  .verdicts{grid-template-columns:1fr}
  .analyse-cta .btn{margin-left:0;width:100%;justify-content:center}
  .bkey{width:58px}
  .bval{width:74px}
}
.btn-small{font-size:12px;padding:6px 10px;white-space:nowrap}

/* rows advertise that they open */
table.board tbody tr{cursor:pointer}

/* ---------- pay ---------- */
.payhead{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px 20px;margin-bottom:34px;
}
.payscale{margin-top:18px}
.payscale-bar{
  height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--line-mid) 0%,var(--accent) 100%);
}
.payscale-ends{
  display:flex;justify-content:space-between;gap:16px;margin-top:9px;
  font-size:12.5px;color:var(--text-faint);
}
.payscale-ends span:last-child{text-align:right}
.payscale-ends b{
  font-family:"IBM Plex Mono",monospace;font-weight:500;
  color:var(--text-dim);margin-right:5px;
}

.factors{display:flex;flex-direction:column;gap:2px}
.factor{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.factor:last-child{border-bottom:0}
.factor-n{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;
  color:var(--accent-deep);padding-top:3px;letter-spacing:.02em;
}
.factor-b h3{font-size:15.5px;font-weight:600;margin:0 0 5px;letter-spacing:-.01em}
.factor-b p{font-size:15px;line-height:1.6;color:var(--text-dim);max-width:66ch;margin:0}

/* The two ways past 1200. Set as a pair of slabs rather than bullets so they
   read as rates, which is what they are. */
.payplus{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.payplus-item{
  border:1px solid var(--accent-line);background:var(--accent-wash);
  border-radius:var(--radius-lg);padding:16px 18px;
}
.payplus-k{
  font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--accent-deep);
  margin-bottom:6px;
}
.payplus-item p{margin:0;font-size:14px;line-height:1.6;color:var(--text-dim)}
.paytag{display:inline-flex;align-items:baseline;gap:10px;font-weight:600;font-size:36px;letter-spacing:-.035em;line-height:1.05}
.paytag span{font-size:14px;font-weight:500;color:var(--text-dim);letter-spacing:0}
.toast{
  position:fixed;bottom:24px;right:24px;z-index:80;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:var(--radius-md);font-size:13.5px;font-weight:500;
}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{
    position:sticky;top:0;height:auto;flex-direction:row;align-items:center;gap:6px;
    overflow-x:auto;padding:10px 14px;z-index:30;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .brand{padding:0 12px 0 0;border-right:1px solid var(--line);margin-right:6px}
  .brand-sub{display:none}
  .rail-label,.rail-foot{display:none}
  .navitem{white-space:nowrap;padding:7px 12px}
  .navitem .count,.navitem .dot{display:none}
  .topbar{padding:13px 17px}
  .pane{padding:20px 17px 104px}
  /* tighter rail so the steps keep their measure on a phone */
  .phase{padding-left:42px;padding-bottom:26px}
  .phase-mark{width:30px;height:30px;font-size:12.5px}
  .phase::before{left:14px;top:32px}
  .steps{padding:2px 14px}
  .goalcard{padding:17px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ---------- sign-in ---------- */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:var(--canvas);color:var(--text)}
.logincard{
  width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 28px;
}
.logincard .logo{width:38px;height:38px;border-radius:10px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:700;font-size:14px;letter-spacing:-.02em}
.logincard h1{font-size:21px;margin:6px 0 0;letter-spacing:-.02em}
.logincard .lede{font-size:14px;margin:0 0 4px}
.logincard .field{display:flex;flex-direction:column;gap:6px}
.logincard .flabel{font-size:13px;font-weight:500;color:var(--text-dim)}
.logincard input{
  width:100%;background:var(--canvas);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:11px 13px;font:inherit;font-size:14.5px;color:var(--text);outline:none;
}
.logincard input:focus,.loginsel:focus{border-color:var(--accent)}
.loginsel{
  width:100%;background:var(--canvas);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:11px 13px;font:inherit;font-size:14.5px;color:var(--text);outline:none;
}
.logincard .fhint{font-size:12.5px;color:var(--text-faint)}
.loginerr{
  margin:0;font-size:13.5px;color:var(--bad);background:var(--bad-wash);
  border:1px solid var(--bad);border-radius:var(--radius-md);padding:9px 12px;
}
.loginbtn{justify-content:center;padding:11px;font-size:14.5px;margin-top:4px}
.loginbtn:disabled{opacity:.6}

/* the details dialog on first sign-in */
.obfoot{margin-right:auto;font-size:12.5px;color:var(--text-faint)}

/* ---------- the email log ----------
   One line each, because the question is usually "did it go" rather than
   "what did it say" \u2014 and the text is one click away when it is not. */
.maillist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:1000px}
.mailrow{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.mailrow.bad{border-color:var(--bad);background:var(--bad-wash)}
.mailrow.open{border-color:var(--line-mid)}
.mailhead{
  display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:11px 14px;
  font:inherit;text-align:left;cursor:pointer;color:inherit;
}
.mailhead:hover{background:var(--canvas)}
.mailrow.bad .mailhead:hover{background:rgb(179 38 30 / .07)}
.mailkind{
  flex:none;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--text-faint);border:1px solid var(--line);border-radius:999px;padding:2px 9px;white-space:nowrap;
}
.mailsub{flex:1 1 260px;min-width:0;font-size:14px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailto{flex:0 1 200px;min-width:0;font-size:12.5px;color:var(--text-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailwhen{flex:none;font-size:12px;color:var(--text-faint);white-space:nowrap}
.mailok{flex:none;font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap}
.mailok.yes{background:var(--ok-wash);color:var(--ok)}
.mailok.no{background:var(--bad);color:#fff}
.mailbody{padding:0 14px 14px;border-top:1px solid var(--line)}
.mailmeta{margin:11px 0 0;font-size:12.5px;color:var(--text-faint)}
.mailerr{margin:11px 0 0;font-size:12.5px;color:var(--bad);font-family:"IBM Plex Mono",monospace;
  overflow-wrap:anywhere}
.mailbody pre{
  margin:11px 0 0;background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;line-height:1.6;
  color:var(--text-dim);white-space:pre-wrap;overflow-wrap:anywhere;
}
@media (max-width:820px){
  .mailhead{flex-wrap:wrap;gap:8px}
  .mailsub{flex:1 1 100%}
  .mailto{flex:1 1 auto}
}

/* the working, on the page rather than in a tooltip: a number somebody is
   paid on should be checkable by the person being paid */
.payhow{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  margin-bottom:22px;max-width:900px;overflow:hidden}
.payhow.open{border-color:var(--line-mid)}
.payhow-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
  padding:14px 18px;font:inherit;text-align:left;cursor:pointer;color:inherit}
.payhow-head:hover{background:var(--canvas)}
.payhow-head b{font-size:14.5px;letter-spacing:-.01em}
.payhow-head span{font-size:12.5px;color:var(--text-faint)}
.payhow-head .acc-chev{margin-left:auto;width:9px;height:9px;border-right:2px solid var(--text-faint);
  border-bottom:2px solid var(--text-faint);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease}
.payhow.open .acc-chev{transform:rotate(-135deg) translate(-2px,-2px);border-color:var(--accent)}
.payhow-body{padding:2px 18px 18px;border-top:1px solid var(--line)}
.payhow-steps{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.payhow-steps li{font-size:13.5px;line-height:1.6;color:var(--text-dim);max-width:78ch}
.payhow-steps b{color:var(--text)}
.payhow-steps .mono{background:var(--sunken);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1px 6px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--text)}
.paysteps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px;max-width:560px}
.paystep{background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:10px 8px;text-align:center;display:flex;flex-direction:column;gap:1px}
.paystep b{font-family:"IBM Plex Mono",monospace;font-size:15px;font-variant-numeric:tabular-nums}
.paystep i{font-style:normal;font-size:10px;color:var(--text-faint)}
.paystep span{margin-top:3px;font-size:13px;font-weight:600;color:var(--ok);
  font-variant-numeric:tabular-nums}
.payhow-note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-faint);max-width:78ch}
@media (max-width:640px){ .paysteps{grid-template-columns:repeat(3,1fr)} }

/* ---------- payments ----------
   The recommendation and the amount actually paid sit side by side on
   purpose: one is a formula, the other is a decision. */
.paytotals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:26px;max-width:620px}
.paytotal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;
  display:flex;flex-direction:column;gap:2px}
.paytotal.owed{border-color:var(--warn-dot);background:var(--warn-wash)}
.paytotal .k{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)}
.paytotal b{font-size:24px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.paytotal.owed b{color:var(--warn)}
.paytotal .h{font-size:12px;color:var(--text-faint)}

.paygroup{margin-bottom:22px;max-width:900px}
.paygroup-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.paygroup-head .avatar{width:28px;height:28px;font-size:11px;flex:none}
.paygroup-head b{font-size:15.5px;letter-spacing:-.015em}
.paygroup-n{font-size:12px;color:var(--text-faint)}
.paygroup-owed{margin-left:auto;font-size:13px;font-weight:600;color:var(--warn);font-variant-numeric:tabular-nums}
.payrows{display:flex;flex-direction:column;gap:8px}
.payrow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:11px 14px;
}
.payrow.paid{background:var(--canvas);opacity:.72}
.payvid{
  flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:2px;background:none;border:0;padding:0;
  font:inherit;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.payvid:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.paywhy{flex:none;display:flex;align-items:center;gap:6px;cursor:help}
.paywhy b{font-size:12.5px;padding:3px 9px;border-radius:999px}
.paywhy i{font-style:normal;font-size:11px;color:var(--text-faint)}
.payrec{flex:none;font-size:13px;color:var(--text-faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.payin{
  flex:none;width:104px;background:var(--canvas);border:1px solid var(--line-mid);
  border-radius:var(--radius-sm);padding:7px 10px;font:inherit;font-size:14px;
  font-variant-numeric:tabular-nums;color:var(--text);outline:none;
}
.payin:focus{border-color:var(--accent)}
/* An amount somebody set by hand should not look like one the formula
   produced — this is the difference between a decision and a default. */
.payin.moved{border-color:var(--accent);font-weight:600}
.payin.ro{flex:none;width:auto;border-color:transparent;background:none;font-weight:600}
.paidwhen{flex:1 1 auto;text-align:right;font-size:11.5px;color:var(--ok);font-weight:600}
.btn-sm{font-size:12.5px;padding:6px 12px}
@media (max-width:700px){ .payvid{flex:1 1 100%} .payin{width:88px} }

/* ---------- everything ever said about your videos ----------
   Unread carries a purple edge and the video it was about is a button, not a
   label: the note you are reading is only useful next to the thing it was
   written about. */
.fb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:820px}
.fb-item{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-md);padding:14px 16px 12px;
}
.fb-item.seen{border-left-color:var(--line-mid)}
.fb-item.change{border-left-color:var(--warn-dot)}
.fb-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.fb-video{
  display:inline-flex;align-items:center;gap:2px;background:none;border:0;padding:0;
  font:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--text);
  cursor:pointer;text-align:left;min-width:0;
}
.fb-video:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
.fb-owner{
  font-size:11.5px;color:var(--text-faint);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px;white-space:nowrap;
}
.fb-at{margin-left:auto;font-size:12px;color:var(--text-faint);white-space:nowrap}
.fb-text{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-dim);white-space:pre-wrap;overflow-wrap:anywhere}
.fb-foot{display:flex;align-items:center;gap:10px;margin-top:10px}
.fb-by{font-size:12px;color:var(--text-faint)}
.fb-foot .cmt-seen{margin-left:auto}
.navitem .count.unread{background:var(--accent);color:var(--accent-ink)}
@media (max-width:640px){ .fb-at{margin-left:0;width:100%} }

/* ---------- add feedback ----------
   The old one squeezed a two-line sentence and a two-line button into a
   footer built for neither. Wider, and the button does not wrap. */
.modal-fb{max-width:580px}
.modal-fb .modal-body{gap:20px}
.modal-fb textarea{
  background:var(--canvas);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:11px 13px;font:inherit;font-size:14.5px;line-height:1.6;color:var(--text);
  outline:none;width:100%;resize:vertical;transition:border-color .16s ease;
}
.modal-fb textarea:focus{border-color:var(--accent)}
.modal-fb .flabel i{font-style:normal;font-weight:400;color:var(--text-faint);margin-left:5px}
.fb-count{color:var(--text-faint)}
.modal-fb .modal-foot .btn{white-space:nowrap}
.modal-fb .obfoot{max-width:26ch;line-height:1.45}

/* the picker, and what it becomes once something is in it */
.fb-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1.5px dashed var(--line-strong);border-radius:var(--radius-md);
  padding:20px 16px;cursor:pointer;color:var(--text-dim);text-align:center;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.fb-drop:hover{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-deep)}
.fb-drop.busy{opacity:.65;cursor:progress}
.fb-drop input{display:none}
.fb-drop span{font-size:14px;font-weight:600}
.fb-drop small{font-size:12px;color:var(--text-faint)}
/* Something has to happen while a file is over the box, or a drop that landed
   an inch outside it looks exactly like a drop that worked. */
.fb-drop.dragging,.thumbshot.dragging{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-deep)}
.thumbshot.dragging{outline:2px solid var(--accent);outline-offset:2px}
.fb-shot{position:relative;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--canvas)}
.fb-shot img{display:block;width:100%;max-height:260px;object-fit:contain}
.fb-shot-x{
  position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:rgb(var(--ink-rgb) / .62);color:#fff;border:0;font-size:17px;line-height:1;cursor:pointer;
}
.fb-shot-x:hover{background:rgb(var(--ink-rgb) / .82)}

/* and where it turns up afterwards */
.cmt-img{display:block;margin-top:9px;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;max-width:420px}
.cmt-img img{display:block;width:100%;height:auto}
.np-img{display:block;margin-top:7px;width:100%;border-radius:var(--radius-sm);border:1px solid var(--line)}
.obfoot b{color:var(--text-dim)}
.modal-body .field+.field{margin-top:16px}
.modal-body .pwa{display:flex;align-items:center;border:1px solid var(--line-mid);border-radius:var(--radius-md);background:var(--canvas);overflow:hidden}
.modal-body .pwa.bad{border-color:var(--bad)}
.modal-body .pwa .cc{padding:0 10px;font-size:14px;color:var(--text-faint);border-right:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
.modal-body .pwa input{border:0;background:transparent;flex:1 1 auto;padding:11px 12px;font:inherit;font-size:14.5px;color:var(--text);outline:none}
.modal-body input.bad{border-color:var(--bad)}

/* ---------- applicants ---------- */
.apptable td{vertical-align:top;padding:14px 16px}
.appwhen{white-space:nowrap;color:var(--text-faint);font-size:12.5px}
.appwho{min-width:250px}
.appwho .t{display:block;font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.appmail{display:block;font-size:12.5px;color:var(--accent-deep);text-decoration:none;margin-top:2px}
.appmail:hover{text-decoration:underline}
.appmore{margin-top:7px}
.appmore summary{font-size:12.5px;color:var(--text-faint);cursor:pointer;list-style:none}
.appmore summary::-webkit-details-marker{display:none}
.appmore summary::before{content:"▸ ";}
.appmore[open] summary::before{content:"▾ ";}
.appmore p{margin:7px 0 0;font-size:13px;line-height:1.6;color:var(--text-dim);max-width:60ch}
.apptools{font-size:13px;color:var(--text-dim);max-width:200px}
.app-sel{width:auto;min-width:132px}
tr.app-yes{background:rgb(11 164 107 / .07)}
tr.app-no{opacity:.55}
tr.app-reviewing{background:var(--warn-wash)}

/* ---------- claimed-since ---------- */
.claimed{
  display:block;margin-top:6px;font-size:11.5px;color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}
/* the board's version: on the line that is already there, and only once it
   has been sitting long enough to be worth saying */
.stwrap{display:flex;align-items:center;gap:5px}
.stwrap .status-select{flex:1 1 auto;min-width:0}
.stale{
  flex:none;font-style:normal;font-size:10.5px;font-weight:700;cursor:help;
  background:var(--warn-wash);color:var(--warn);border-radius:999px;padding:2px 6px;
  font-variant-numeric:tabular-nums;
}
.stale.bad{background:var(--bad-wash);color:var(--bad)}
.claimed.warn{color:var(--warn);font-weight:500}
.claimed.bad{color:var(--bad);font-weight:600}

/* ---------- rail: your profile ---------- */
.railme{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
  padding:7px 8px;margin:0 -8px 4px;border-radius:var(--radius-md);
}
.railme:hover{background:var(--raised);text-decoration:none}
.railme .avatar{width:26px;height:26px;font-size:10px;flex:none}
.railme-t{min-width:0}
.railme-t b{display:block;font-size:13px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railme-t small{display:block;font-size:11.5px;color:var(--text-faint)}
[aria-current="page"].railme{background:var(--accent-wash)}

/* ---------- profile ---------- */
.profilehead{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.profilehead h2{font-size:24px;margin:0 0 4px;letter-spacing:-.025em}
.profilehead .lede{margin:0;font-size:14.5px}
.avatar.big{width:52px;height:52px;font-size:18px;flex:none}
.profile .people{max-width:520px}

/* ---------- the team table ---------- */
.teamtable td{vertical-align:middle}
.teamtable .num{text-align:right;font-variant-numeric:tabular-nums;width:96px;white-space:nowrap}
.teamtable th.num{text-align:right}
/* the flex lives on an inner span: a td that is itself a flex container
   drops out of table layout and takes its row borders with it */
.teamwho{width:230px}
.teamwho .tw{display:flex;align-items:center;gap:10px;min-width:0}
.teamwho .t{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamtable .num b{font-size:16px}
.teamtable .num small{display:block;font-size:11px;color:var(--text-faint);font-weight:500}
.warnnum{color:var(--warn);font-weight:600}

/* ---------- leaderboard ----------
   A ladder, not a podium. Three cards at the top answered "who is winning",
   which is the one question the table already answers in its first row, and
   pushed everybody below fourth off the screen to do it. The milestones
   answer the question the table cannot: what the next thing costs you. */
.lbwrap{max-width:1080px}
.lbhero{text-align:center;padding:6px 0 26px}
.lbhero h2{font-size:27px;letter-spacing:-.03em;margin:0 0 8px}
.lbhero p{margin:0 auto;max-width:60ch;font-size:14.5px;line-height:1.6;color:var(--text-dim)}

/* the ladder */
.tiers{margin-bottom:26px}
.tier-row{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:12px}
.tier{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;opacity:.45;
  transition:opacity .2s ease}
.tier.got{opacity:1}
.tier-l{font-size:12px;font-weight:600;color:var(--text-dim);white-space:nowrap}
.tier-e{font-size:23px;line-height:1;filter:grayscale(1)}
.tier.got .tier-e{filter:none}
.tier-track{position:relative;height:13px;border-radius:999px;background:var(--sunken);
  border:1px solid var(--line)}
.tier-track i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.tier-dot{
  position:absolute;top:50%;transform:translate(-50%,-50%);min-width:34px;height:26px;
  display:grid;place-items:center;padding:0 8px;border-radius:999px;
  background:var(--ok-dot);color:#04240f;border:2px solid var(--surface);
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:700;
  box-shadow:0 2px 8px rgb(var(--ink-rgb) / .22);
}

/* where you stand, and what the sort is */
.youbar{
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px;
}
.youbar .avatar{width:30px;height:30px;font-size:11px;flex:none}
.you-t{font-size:14px;color:var(--text-dim)}
.you-t b{color:var(--text)}
.lbsorts{display:flex;align-items:center;gap:6px;margin-left:auto;flex-wrap:wrap}
.lbsorts .chipkey{margin-right:2px}

/* the table */
.lbcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden}
.lbtable{width:100%;border-collapse:collapse;font-size:14.5px}
.lbtable thead th{
  text-align:left;font-size:12px;font-weight:600;color:var(--text-faint);
  padding:13px 18px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.lbtable thead th.num,.lbtable td.num{text-align:right}
.lbtable td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.lbtable tbody tr:last-child td{border-bottom:0}
.lbtable tbody tr:hover{background:var(--canvas)}
.lbtable tr.me{background:var(--accent-wash)}
.lbtable tr.me:hover{background:var(--accent-wash)}
.lbtable .num{font-variant-numeric:tabular-nums;white-space:nowrap;width:104px;color:var(--text-dim)}
.lbtable .num.strong{color:var(--text);font-weight:600}
.lbrank{width:74px}
.medal{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font-size:13px;font-weight:700;color:#3a2a05;
  box-shadow:inset 0 -2px 0 rgb(0 0 0 / .12);
}
.m1{background:linear-gradient(160deg,#FFD770,#E3A008)}
.m2{background:linear-gradient(160deg,#E4E7EC,#AEB4BE);color:#33383F}
.m3{background:linear-gradient(160deg,#E0A878,#B07B4F);color:#3B2412}
.plainrank{display:inline-block;width:28px;text-align:center;color:var(--text-faint);
  font-variant-numeric:tabular-nums}
.lbwho{display:flex;align-items:center;gap:10px;min-width:0}
.lbwho .avatar{width:32px;height:32px;font-size:11.5px;flex:none}
.lbname{font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tier-badge{font-size:15px;line-height:1;flex:none;cursor:help}
.lbmark{
  display:inline-block;min-width:44px;text-align:center;border-radius:999px;padding:4px 10px;
  font-weight:600;font-variant-numeric:tabular-nums;background:var(--idle-wash);color:var(--text);
}
.lbmark.good{background:var(--ok-wash);color:var(--ok)}
.lbmark.ok{background:var(--warn-wash);color:var(--warn)}
.lbmark.poor{background:var(--bad-wash);color:var(--bad)}
.lbdash{color:var(--text-faint);cursor:help}
.lbfoot{margin:14px 2px 0;font-size:12.5px;line-height:1.6;color:var(--text-faint);max-width:80ch}

@media (max-width:820px){
  .tier-l{display:none}
  .lbcard{overflow-x:auto}
  .lbtable{min-width:620px}
  .lbsorts{margin-left:0;width:100%}
}

/* an applicant who sent details but no video yet: a state to act on, not a
   blank, so it reads as "chase this one" rather than "nothing here" */
.waiting{
  display:inline-block;font-size:11.5px;font-weight:600;white-space:nowrap;
  background:var(--warn-wash);color:var(--warn);
  border-radius:999px;padding:3px 10px;cursor:help;
}

/* the two average columns: the board's chip, so 6.2 here reads as 6.2 there */
.teamtable .avgcell{width:88px}
.teamtable .avgcell .score{display:inline-block;min-width:40px}
.teamtable .avgcell small{margin-top:3px}
.teamfoot td{
  border-top:1px solid var(--line-mid);background:var(--sunken);
  padding-top:11px;padding-bottom:11px;
}
.teamfoot .teamwho{font-weight:600;font-size:13px;color:var(--text-dim)}
.crown{color:var(--warn-dot);font-size:15px}
.teamcontact{font-size:12.5px;line-height:1.5}
.teamcontact a{display:block;color:var(--accent-deep);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamcontact a:hover{text-decoration:underline}
.teamcontact a.wa{color:var(--ok)}
.teamcontact .none{display:block;color:var(--text-faint)}

/* ---------- urgent ---------- */
.urgentcell{width:106px}
.utag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:3px 9px;background:var(--bad-wash);color:var(--bad);
  border:1px solid var(--bad);cursor:help;
}
.utag.off{background:transparent;border-color:transparent;color:var(--text-faint);font-weight:500;letter-spacing:0;text-transform:none}
.utoggle{
  font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  border-radius:999px;padding:3px 8px;border:1px dashed var(--line-mid);
  background:transparent;color:var(--text-faint);cursor:pointer;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.utoggle:hover{border-color:var(--bad);color:var(--bad)}
.utoggle.on{background:var(--bad-wash);border:1px solid var(--bad);color:var(--bad)}
.udue{
  display:block;margin-top:5px;font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--text-faint);
}
.udue.soon{color:var(--warn);font-weight:600}
.udue.over{color:var(--bad);font-weight:700}
/* Urgent sits at the top of the board whatever it is sorted by, so the block
   needs to read as a block rather than as a run of rows that happen to be
   first. The bar down the left is what does that. */
table.board tbody tr.is-urgent{box-shadow:inset 3px 0 0 var(--bad)}
table.board tbody tr.is-over{background:var(--bad-wash)}
table.board tbody tr.is-over:hover{background:rgb(179 38 30 / .12)}

/* ---------- last on the board ---------- */
.teamseen{width:180px}
.seen{display:block;font-size:13px;color:var(--text-dim);white-space:nowrap}
.seen.warm{color:var(--warn);font-weight:500}
.seen.cold{color:var(--bad);font-weight:600}
.seen.never{color:var(--text-faint);font-style:italic}
.seen.dim{color:var(--text-faint)}
.seen.sub{display:block;margin-top:2px;font-size:11px;color:var(--text-faint);font-style:normal;font-weight:400;white-space:normal}

/* ---------- FAQ ---------- */
.faq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;max-width:820px}
.faq-item{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line)}
.faq-item:first-child{border-top:0;padding-top:0}
.faq-n{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-mid);color:var(--text-faint);
  font-family:"IBM Plex Mono",monospace;font-size:12px;margin-top:1px;
}
.faq-body{min-width:0}
.faq-body h3{margin:0 0 8px;font-size:17px;font-weight:600;letter-spacing:-.015em}
.faq-body p{margin:0;font-size:15px;line-height:1.65;color:var(--text-dim);max-width:70ch}
.faq-body b{color:var(--text);font-weight:600}
.faq-more{
  display:inline-block;margin-top:11px;font-size:13.5px;font-weight:600;
  color:var(--accent-deep);text-decoration:none;
}
.faq-more:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- scores ---------- */
.scorecell{width:62px;text-align:center}
.score{
  display:inline-block;min-width:34px;padding:3px 7px;border-radius:999px;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  text-decoration:none;background:var(--idle-wash);color:var(--text-dim);
}
a.score:hover{text-decoration:none;filter:brightness(.95)}
.score.good{background:var(--ok-wash);color:var(--ok)}
.score.ok{background:var(--warn-wash);color:var(--warn)}
.score.poor{background:var(--bad-wash);color:var(--bad)}
.score.none{background:transparent;color:var(--text-faint);font-weight:400;min-width:0}
.yarscore{
  width:46px!important;min-width:46px;max-width:46px;height:30px;padding:3px 7px;border:1px solid var(--line-mid);border-radius:999px;
  background:var(--canvas);color:var(--text);text-align:center;
  font:700 13px inherit;font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.yarscore::-webkit-outer-spin-button,.yarscore::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.yarscore:focus{outline:none;border-color:var(--accent)}
.yarscore.good{background:var(--ok-wash);border-color:var(--ok-dot);color:var(--ok)}
.yarscore.ok{background:var(--warn-wash);border-color:var(--warn-dot);color:var(--warn)}
.yarscore.poor{background:var(--bad-wash);border-color:var(--bad);color:var(--bad)}
/* ---------- competitors, editable ----------
   The list was a constant in the source, so adding a channel was a deploy.
   Same row shape as the read-only version, with the two halves typed into. */
.complist{display:flex;flex-direction:column;gap:8px}
.comprow{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:9px 12px;
}
.comprow .platmark{flex:none}
/* The brand mark beside a competitor. Every one of these rows used to carry
   the YouTube play button whatever site it pointed at. */
.platmark{width:15px;height:15px;flex:none;display:inline-block;vertical-align:middle}
.linkitem .platmark{flex:none}
.comprow input{
  background:var(--canvas);border:1px solid transparent;border-radius:var(--radius-sm);
  padding:7px 9px;font:inherit;font-size:14px;color:var(--text);outline:none;min-width:0;
  transition:border-color .15s ease,background .15s ease;
}
.comprow input:hover{border-color:var(--line)}
.comprow input:focus{border-color:var(--accent);background:var(--surface)}
.compname{flex:0 1 210px;font-weight:600}
.compurl{flex:1 1 auto;font-size:13px;color:var(--text-dim);font-family:"IBM Plex Mono",monospace}
.compopen{
  flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:var(--radius-sm);
  color:var(--accent-deep);text-decoration:none;font-size:14px;
}
.compopen:hover{background:var(--accent-wash)}
.compopen.none{color:var(--text-faint);opacity:.45;cursor:default}
@media (max-width:700px){
  .comprow{flex-wrap:wrap}
  .compname{flex:1 1 100%}
  .compurl{flex:1 1 100%}
}

/* The bin is the only tool left out here. Messages moved to the single mark
   beside the title, so a row has one place to go for feedback, not two. */
.rowtools .del{display:inline-grid;vertical-align:middle}

/* a note that has been ticked stops shouting */
.notemark.allread{background:var(--idle-wash);color:var(--text-faint);border-color:var(--line-mid)}

.cmt-seen{
  display:inline-flex;align-items:center;gap:4px;margin-left:8px;
  font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px;cursor:pointer;
  border:1px solid var(--line-mid);background:transparent;color:var(--text-faint);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.cmt-seen:hover{border-color:var(--ok-dot);color:var(--ok);background:var(--ok-wash)}
.cmt-seen.on{background:var(--ok-wash);border-color:var(--ok-dot);color:var(--ok)}
.cmt-tag.blocked,.np-tag.blocked{background:var(--bad-wash);color:var(--bad)}
#block-why{
  background:var(--canvas);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  padding:11px 13px;font:inherit;font-size:14.5px;line-height:1.6;color:var(--text);
  outline:none;width:100%;resize:vertical;transition:border-color .16s ease;
}
#block-why:focus{border-color:var(--accent)}
.modal-sm .obfoot{margin:0}
.np-seen{
  display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;
  color:var(--ok);background:var(--ok-wash);border-radius:999px;padding:1px 7px;
}
/* room for two more columns */
.titlecell{min-width:210px;max-width:var(--titlew,300px);width:var(--titlew,auto)}
.datecell{width:96px}
.linkcell{width:150px}
.submittedcell{width:150px}

/* Auto table layout hands a column whatever its content demands and takes it
   back from the ones that can ellipsis — which was Owner and Status. Keeping
   the link chips and the score inputs narrow is what actually holds the
   widths below, not the width declarations. */
.linkrow{gap:4px}
.chip-edit{width:16px;height:16px}

/* ---------------- how long the video runs ----------------
   Coloured against the target rather than merely shown, so a board of short
   videos is visible at a glance instead of only turning up in the pay. */
.lencell{width:82px;white-space:nowrap}
.len{display:inline-flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums}
.len i{font-style:normal;font-size:10.5px;color:var(--muted)}
.lenin{
  width:42px;border:1px solid transparent;background:none;border-radius:var(--radius-sm);
  padding:3px 5px;font:inherit;font-size:13px;text-align:right;color:inherit;outline:none;
}
.lenin:hover{border-color:var(--line-mid);background:var(--surface)}
.lenin:focus{border-color:var(--accent);background:var(--surface)}
.len.good{color:var(--ok);font-weight:600}
.len.ok{color:var(--text)}
.len.short{color:var(--bad);font-weight:600}
.len.none{color:var(--text-faint)}
.lenrow{display:flex;align-items:center;gap:8px}
.lenrow input{width:88px}
.lenrow i{font-style:normal;font-size:13px;color:var(--text-dim)}

/* The hand-in checklist. Four things, and which of them are done. */
.ntcheck{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ntcheck li{
  display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  border:1px solid var(--line-mid);border-radius:99px;padding:5px 13px 5px 7px;
}
.ntcheck li i{
  width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-style:normal;font-size:10px;font-weight:800;
}
.ntcheck li.on{border-color:rgb(11 164 107 / .4);color:var(--ok)}
.ntcheck li.on i{background:var(--ok);color:#fff}
.ntcheck li.off{color:var(--text-dim)}
.ntcheck li.off i{border:1.5px dashed var(--line-strong)}

/* Summary and chapters, beside the thumbnail they ship with. */
.packfields{display:flex;flex-direction:column;gap:16px;margin-bottom:22px}
.pfield .req{
  font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bad);background:var(--bad-wash);border-radius:4px;padding:1px 5px;margin-left:6px;
}
.phint{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--text-dim);margin:2px 0 6px}
.tinput.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;line-height:1.7}
.descex{
  margin:0 0 12px;padding:14px 16px;border:1px solid var(--line-mid);border-radius:var(--radius-md);
  background:var(--sunken);font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;line-height:1.65;color:var(--text-dim);white-space:pre-wrap;
  max-height:340px;overflow-y:auto;
}

/* ---------------- contact cards ----------------
   Seven identical white boxes were seven things to tell apart by reading.
   Each takes a faint tint from the same hue as its avatar — enough to find
   somebody by colour, not enough to shout. Collapsed by default, because the
   only card worth reading is the one being filled in. */
.peoplebar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 12px;flex-wrap:wrap;
}
.person{
  background:hsl(var(--ph) 62% 97%);
  border:1px solid hsl(var(--ph) 40% 88%);
  padding:0;gap:0;overflow:hidden;
}
.person.done{background:hsl(var(--ph) 30% 98%);border-color:hsl(var(--ph) 20% 90%)}
.person-top{
  width:100%;display:flex;align-items:center;gap:11px;cursor:pointer;
  border:0;background:none;padding:13px 15px;font:inherit;text-align:left;
}
.person-top:disabled{cursor:default}
.person-top:hover:not(:disabled){background:hsl(var(--ph) 55% 95%)}
.person-id{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.pnameline{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.person .person-n{font-size:11.5px;color:var(--text-dim)}
.pchev{font-style:normal;font-size:9px;color:var(--muted);flex:none}
.person-top .pmiss,.person-top .pdone{flex:none}
.person-body{
  display:flex;flex-direction:column;gap:13px;
  padding:2px 15px 16px;border-top:1px solid hsl(var(--ph) 30% 91%);
}
.person.open{box-shadow:0 2px 10px rgb(0 0 0 / .05)}
.person .prem{top:auto;bottom:12px;right:14px}
.person input,.person textarea{background:var(--surface)}

/* Whether the thumbnail has been handed over, at a glance down the column. */
.thumbcell{width:52px;text-align:center}
.thumbok{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:11px;font-weight:800;
}
.thumbok.yes{background:var(--ok-wash);color:var(--ok)}
.thumbok.no{background:var(--bad-wash);color:var(--bad)}

/* What is coming to the pay, said before it arrives. */
.paysoon{
  margin-top:14px;padding:13px 15px;border:1px solid var(--warn-dot);
  border-left-width:3px;border-radius:var(--radius-md);background:var(--warn-wash);
}
.paysoon b{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:5px}
.paysoon p{margin:0;font-size:13.5px;line-height:1.6}
/* An estimate reads differently from a number somebody looked up. */
.len.est{opacity:.75}
.len.est i{font-style:italic}

/* Payments is two tabs over one page now. */
.paytabs{display:flex;gap:7px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:12px}
.paytab{
  border:1px solid var(--line-mid);background:var(--surface);border-radius:var(--radius-md);
  padding:8px 15px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text-dim);cursor:pointer;
}
.paytab:hover{border-color:var(--line-strong);color:var(--text)}
.paytab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.paysoon.on{border-color:var(--bad);background:var(--bad-wash)}

/* Which board a person works on. Two teams became one rail, and the roster is
   the one place that has to say who does what — a name with no chip beside it
   is the question this page exists to answer. */
.person-n{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.person-n em{font-style:normal;color:var(--text-faint)}
.teamchip{
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid transparent;line-height:1.5;
}
.teamchip.t-video{background:var(--accent-wash);color:var(--accent-deep);border-color:var(--accent)}
.teamchip.t-skool{background:hsl(158 60% 94%);color:hsl(158 70% 24%);border-color:hsl(158 45% 70%)}

/* Breathing room between the three groups on the rail. The rail is nine
   entries now rather than nineteen, and the gaps are what make three groups
   of three read as three groups rather than one list of nine. */
.rail-gap{height:8px}
/* The tab strip inside a page. Same shape as the one Payments already had —
   it is one control now, used by every page that holds more than one thing. */
/* .subtabs and .subtab are styled with .video-tabs above — one strip,
   one set of rules, so the two can never drift apart. */

/* ---------------- the handbook ----------------
   It used to be one flat list with every answer open, which is a wall of
   prose you have to read from the top. It is a list of questions now: you
   scan it, and open the one you came for. */
.faq-search{
  display:flex;align-items:center;gap:9px;max-width:460px;margin:0 0 22px;
  background:var(--surface);border:1px solid var(--line-mid);border-radius:999px;padding:9px 15px;
  color:var(--text-faint);
}
.faq-search:focus-within{border-color:var(--accent);color:var(--accent-deep)}
.faq-search input{flex:1;border:0;background:transparent;font:inherit;font-size:14px;color:var(--text);outline:none}
.faq-x{border:0;background:transparent;font-size:19px;line-height:1;color:var(--text-faint);cursor:pointer;padding:0 2px}
.faq-x:hover{color:var(--text)}
.faq-count{margin:-10px 0 18px;font-size:13px;color:var(--text-faint)}

.qalist{display:flex;flex-direction:column;gap:8px;max-width:820px}
.qa{border:1px solid var(--line-mid);border-radius:var(--radius-md);background:var(--surface);overflow:hidden}
.qa.open{border-color:var(--line-strong)}
.qa-q{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:0;background:transparent;font:inherit;font-size:15.5px;font-weight:600;color:var(--text);
  padding:16px 18px;cursor:pointer;letter-spacing:-.01em;
}
.qa-q:hover{background:var(--surface-2)}
.qa-q span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.qa-q em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--text-faint)}
.qa-chev{
  flex:none;width:9px;height:9px;border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);
  transform:rotate(45deg);transition:transform .15s ease;margin-bottom:3px;
}
.qa.open .qa-chev{transform:rotate(-135deg);margin-bottom:-3px}
.qa-a{padding:0 18px 18px 18px;border-top:1px solid var(--line)}
.qa-a p{margin:14px 0 0;font-size:15px;line-height:1.68;color:var(--text-dim);max-width:70ch}
.qa-a b{color:var(--text);font-weight:600}
/* A whole reference page folded in needs the full width back. */
.qa-wide{padding-top:18px}
.qa-big .qa-q{font-size:16px}
.faq-more-head{
  margin:32px 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-faint);
}

/* A note about Skool work, in the one feedback list. It needs to say what it
   was about, the way a video note names its video. */
.fb-src{
  font-size:12px;font-weight:600;color:hsl(158 70% 28%);
  background:hsl(158 60% 94%);border:1px solid hsl(158 45% 78%);
  padding:2px 9px;border-radius:999px;
}
.fb-about{margin:6px 0 0;font-size:12.5px;color:var(--text-faint)}

/* Roles. Two of them, and somebody can have both — so they are toggles you
   can see the state of, not a dropdown that hides the other answer. */
.rolepick{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.rolebtn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line-mid);background:var(--surface);border-radius:999px;
  padding:7px 14px 7px 9px;font:inherit;font-size:13px;font-weight:600;color:var(--text-dim);
}
.rolebtn:hover{border-color:var(--line-strong);color:var(--text)}
.rolebtn.on{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-deep)}
.rolebox{
  width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;font-size:11px;font-style:normal;line-height:1;flex:none;
}
.rolebtn.on .rolebox{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rolenote{display:block;margin-top:7px;font-size:12px;color:var(--text-faint)}
.teamchip.t-none{background:var(--surface-2);color:var(--text-faint);border-color:var(--line-mid)}

/* ---------- the Saves ----------

   One control, three states and no fourth: there is something to save, it is
   saving, it is saved. The same three everywhere they appear — in a section,
   in the header, as a mark in a table row — so that two of them on screen at
   once can never look like they disagree.

   It is always drawn, including when there is nothing to do. A button that
   only appears when it has work is a button nobody learns the position of,
   and "where is the button" was half of what was being asked. */
.saveunit{display:flex;align-items:center;gap:10px;margin-left:auto}
.savesay{font-size:12.5px;color:var(--text-dim);white-space:nowrap}
.saveunit .savebtn{
  border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;
  white-space:nowrap;transition:background .14s ease,color .14s ease,border-color .14s ease;
}
/* Something to save: the one state that asks for a press, and the only one
   that looks like it does. */
.saveunit.pending .savebtn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);cursor:pointer}
.saveunit.pending .savebtn:hover{filter:brightness(1.06)}
.saveunit.pending .savesay{color:var(--accent-deep);font-weight:600}
.saveunit.busy .savebtn{background:var(--surface);border-color:var(--line-mid);color:var(--text-dim);cursor:default}
.saveunit.done .savebtn{background:var(--ok-wash);border-color:color-mix(in srgb,var(--ok-dot) 45%,transparent);color:var(--ok);cursor:default}
/* Nothing to do. Present, legible, and plainly not asking for anything. */
.saveunit.clean .savebtn{background:transparent;border-color:transparent;color:var(--text-faint);cursor:default;padding-left:6px;padding-right:6px}
.saveunit.bad .savebtn{background:var(--bad-wash);border-color:color-mix(in srgb,var(--bad) 42%,transparent);color:var(--bad);cursor:pointer}
.saveunit.bad .savesay{color:var(--bad);font-weight:600}
@media (prefers-color-scheme:dark){
  .saveunit.done .savebtn{background:color-mix(in srgb,var(--ok-dot) 16%,transparent);color:#7FE3B6}
  .saveunit.pending .savesay{color:var(--accent-bright)}
}

/* ---------- the one in the header ----------
   On every page, whichever board is showing: the answer to "is my work in?"
   that does not depend on having scrolled to the right box. */
.hsave{
  display:flex;align-items:center;gap:9px;
  border:1px solid var(--line-mid);border-radius:999px;
  padding:5px 8px 5px 12px;background:var(--surface);white-space:nowrap;
}
.hsave-dot{width:8px;height:8px;border-radius:50%;background:var(--ok-dot);flex:none}
.hsave-t{display:flex;flex-direction:column;line-height:1.2;font-size:12.5px;font-weight:600;color:var(--text)}
.hsave-t small{font-weight:400;font-size:11px;color:var(--text-faint);letter-spacing:0}
.hsave .btn{padding:4px 11px;font-size:12px;border-radius:999px}
.hsave.clean{border-color:var(--line)}
.hsave.clean .hsave-t{font-weight:500;color:var(--text-dim)}
.hsave.pending{border-color:var(--accent-line);background:var(--accent-wash)}
.hsave.pending .hsave-dot{background:var(--accent)}
.hsave.pending .btn{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.hsave.busy .hsave-dot{background:var(--warn-dot);animation:savepulse 1s ease-in-out infinite}
.hsave.bad{border-color:color-mix(in srgb,var(--bad) 42%,transparent);background:var(--bad-wash)}
.hsave.bad .hsave-dot{background:var(--bad)}
.hsave.bad .hsave-t{color:var(--bad)}
@keyframes savepulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.hsave.busy .hsave-dot{animation:none}}

/* ---------- the mark in a table row ----------
   Everything in the board table is a press rather than a paragraph, so every
   row saves itself and none of them needs a button. They do need to say so,
   and this says it where the eye already is. */
.rowsave{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-left:6px;vertical-align:middle;background:transparent;
}
.rowsave.pending{background:var(--accent)}
.rowsave.busy{background:var(--warn-dot);animation:savepulse 1s ease-in-out infinite}
.rowsave.done{background:var(--ok-dot)}
.rowsave.bad{background:var(--bad)}
@media (prefers-reduced-motion:reduce){.rowsave.busy{animation:none}}

/* The pages people apply through. The address you send somebody was in one
   sentence of the empty state, so it disappeared the moment the first
   application arrived — which is exactly when you start sending it about. */
.hirelist{display:flex;flex-direction:column;gap:12px;max-width:820px}
.hirecard{border:1px solid var(--line-mid);border-radius:var(--radius-md);background:var(--surface);padding:16px 18px}
.hiretop{display:flex;align-items:baseline;gap:12px}
.hiretop b{font-size:15.5px;letter-spacing:-.01em}
.hiren{font-size:12.5px;color:var(--text-faint)}
.hirenote{margin:6px 0 12px;font-size:13.5px;color:var(--text-dim);line-height:1.55;max-width:64ch}
.hirelink{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hirelink code{
  flex:1 1 320px;min-width:0;overflow:auto;white-space:nowrap;
  background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 11px;font-size:12.5px;color:var(--text-dim);
}

/* The stat sheets. Typed in, so the cells are fields rather than text — but
   quiet ones, so a table of numbers still reads as a table of numbers. */
.statsheet .num{text-align:right;font-variant-numeric:tabular-nums}
.statsheet .sheetin{
  width:100%;border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);
  padding:5px 7px;font:inherit;font-size:13.5px;color:var(--text);outline:none;
  font-variant-numeric:tabular-nums;
}
.statsheet td.num .sheetin{text-align:right}
.statsheet .sheetin:hover{border-color:var(--line-mid)}
.statsheet .sheetin:focus{border-color:var(--accent);background:var(--canvas)}
.statsheet .up{color:hsl(158 70% 30%);font-weight:600}
.statsheet .down{color:var(--bad);font-weight:600}
.statsheet .rowx{
  border:0;background:transparent;color:var(--text-faint);font-size:17px;line-height:1;
  cursor:pointer;padding:2px 6px;border-radius:var(--radius-sm);
}
.statsheet .rowx:hover{color:var(--bad);background:var(--surface-2)}

/* Urgency on the video page itself, so it can be read and set by somebody
   who opened the video to work on it rather than only from the board. */
.vchip.urgentchip{display:inline-flex;align-items:center;gap:8px}
.vchip.urgentchip.on{border-color:var(--bad);background:var(--bad-wash)}
.vchip.urgentchip .udue{display:inline;margin:0}

/* The Save over the payment amounts. Money is the one place a save must never
   happen from under somebody halfway through typing a number. */
.payhead-save{margin:22px 0 6px}

/* ---------- the accounts we hand out ----------
   One card each, and the password line is deliberately a sentence rather than
   a field: there is nowhere on this board to keep one that is safer than a
   message, and a page that could hold a password is a page somebody will
   eventually screenshot. */
.accounts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:900px}
.account{
  border:1px solid var(--line-mid);border-radius:var(--radius-md);background:var(--surface);
  padding:16px 18px;display:flex;flex-direction:column;gap:10px;
}
.account-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.account-top b{font-size:15.5px;letter-spacing:-.01em}
.account-at{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--text-faint)}
.account-what{margin:0;font-size:13px;color:var(--text-dim);line-height:1.5}
.account .secret{margin-top:2px}
.account-ask{
  font-size:12.5px;font-weight:600;color:var(--warn);
  background:var(--warn-wash);border:1px solid color-mix(in srgb,var(--warn-dot) 40%,transparent);
  border-radius:999px;padding:3px 11px;
}

/* A page that is on the rail and not written yet. It says so rather than
   showing an empty table, which reads as broken rather than as unbuilt. */
.paneintro.coming .eyebrow{color:var(--warn)}
.paneintro.coming{max-width:56ch}

/* ---------- faces ----------
   Everybody has one whether or not they have uploaded anything: two initials
   on a colour taken from the name, so it is the same colour on every page. A
   photo simply takes its place. */
.avatar.has-img{background:var(--raised);padding:0;overflow:hidden}
.avatar.has-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Your own, on your profile, with the way to change it. */
.avatarpick{position:relative;display:inline-block;cursor:pointer;border-radius:50%;flex:none}
.avatarpick.ro{cursor:default}
.avatarpick-o{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  background:rgb(0 0 0 / .55);color:#fff;font-size:11.5px;font-weight:600;
  opacity:0;transition:opacity .16s ease;
}
.avatarpick:hover .avatarpick-o,.avatarpick:focus-within .avatarpick-o{opacity:1}
.avatarpick.ro .avatarpick-o{display:none}
.avatarerr{margin:6px 0 0;font-size:13px;color:var(--bad)}
.avatarclear{
  margin-top:6px;background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  color:var(--text-faint);text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.avatarclear:hover{color:var(--bad)}

/* ---------- who is on this ----------
   A row of faces at the top of a board, so "whose work is this" is answered
   before anybody asks. Hovering one gives the name and the address. */
.whoson{display:flex;align-items:center;gap:10px;margin:0 0 18px}
.whoson-k{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}
.whoson-list{display:flex;align-items:center}
/* Overlapped, so a team reads as a group rather than as a queue. */
.whoson-list .avatar{margin-left:-8px;border:2px solid var(--canvas);cursor:default}
.whoson-list .avatar:first-child{margin-left:0}
.whoson-list .avatar:hover{z-index:2;transform:translateY(-1px)}
.whoson .avatar{transition:transform .14s ease}
.whoson-none{font-size:13px;color:var(--text-faint)}

/* ---------- ideas ----------
   A post starts as a line somebody wrote down. Every one of these pages opens
   on the same three things the video board shows — what it is, whose it is,
   where it is up to — so moving between them costs nothing to learn. */
.ideablurb{margin:0 0 18px;max-width:70ch}
.idearow-add{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.idearow-add .saveunit{margin-left:auto}
.idealist{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);overflow:hidden;
}
.idearow{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;
  width:100%;text-align:left;background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:14px 18px;font:inherit;cursor:pointer;
  color:inherit;transition:background-color .14s ease;
}
.idearow:last-child{border-bottom:0}
.idearow:hover{background:var(--raised)}
.idea-t{font-size:14.5px;font-weight:600;letter-spacing:-.01em;min-width:0}
.idea-src{
  display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--text-faint);
}
.idea-who{display:flex;align-items:center;gap:8px;white-space:nowrap}
.idea-name{font-size:13px;color:var(--text-dim)}
.idea-none{font-size:13px;color:var(--text-faint)}
.idea-st{
  border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--idle-wash);color:var(--text-dim);
}
.idea-st.st-work{background:var(--warn-wash);color:var(--warn)}
.idea-st.st-check{background:var(--accent-wash);color:var(--accent-deep)}
.idea-st.st-done{background:var(--ok-wash);color:var(--ok)}
@media (max-width:640px){
  .idearow{grid-template-columns:1fr;gap:8px}
  .idea-who,.idea-st{justify-self:start}
}

/* What opens when a row is pressed. Small on purpose: an idea is a sentence,
   a person and a state, and asking for more up front is how a list stops
   being written in. */
.ideacard{
  margin-top:22px;border:1px solid var(--line-mid);border-radius:var(--radius-lg);
  background:var(--surface);padding:18px 20px 20px;
}
/* So the panel stops at the content rather than running to the far edge with
   the last third of it empty. 560 + 300 + the gap, plus the padding. */
.ideapage{max-width:922px}
.ideafields{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.ideafoot{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.ideafoot .saveunit{margin-left:0;margin-right:auto}

/* ---------- the card behind a face ----------
   The browser's own tooltip arrives after a second, cannot be styled and cuts
   a phone number in half. This is the same information, immediately, and
   legible. It costs nothing until somebody hovers: it is markup that is
   already there, hidden. */
.facewrap{position:relative;display:inline-flex;flex:none}
.facecard{
  position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(3px);
  z-index:80;min-width:190px;max-width:280px;padding:11px 13px;
  background:var(--surface);border:1px solid var(--line-mid);border-radius:var(--radius-md);
  box-shadow:0 10px 30px rgb(var(--ink-rgb) / .14);
  display:flex;flex-direction:column;gap:5px;text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.facewrap:hover .facecard,.facewrap:focus-within .facecard{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.facecard b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.facecard-r{
  display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--text-dim);
  font-family:"IBM Plex Mono",monospace;word-break:break-all;
}
.facecard-r i{
  font-style:normal;font-family:inherit;font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);
  flex:none;width:62px;font-family:Inter,system-ui,sans-serif;
}
.facecard-r.none{color:var(--text-faint);font-family:inherit}
/* Near the top of the page there is no room above, so it drops below. */
.whoson .facecard,.idearow .facecard{bottom:auto;top:calc(100% + 9px);transform:translateX(-50%) translateY(-3px)}
.whoson .facewrap:hover .facecard,.idearow .facewrap:hover .facecard{transform:translateX(-50%) translateY(0)}

/* The number in front of each idea, so a list can be talked about out loud:
   "number three needs a thumbnail". */
.idea-n{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--text-faint);flex:none;
}
/* A number, a title, and a dot. Nothing else earns a column here. */
/* A number, a picture, a title, and a dot. The picture earns its column:
   an idea is nearly always somebody else's video, and the thumbnail is half
   of why it was worth writing down. */
.idearow{grid-template-columns:auto 1fr auto;text-decoration:none}
.idearow.has-thumb{grid-template-columns:auto auto 1fr auto}
.idea-thumb{
  flex:none;width:64px;aspect-ratio:16/9;border-radius:7px;overflow:hidden;
  background:var(--raised);border:1px solid var(--line);display:block;
}
.idea-thumb img{display:block;width:100%;height:100%;object-fit:cover}
/* Instagram and TikTok publish no still we are allowed to link to, so those
   rows get the same lettered tile a person with no avatar gets. */
.idea-thumb.empty{display:grid;place-items:center;background:var(--raised)}
.idea-thumb.empty i{font-style:normal;font-size:13px;color:var(--text-faint)}
@media (max-width:640px){
  .idearow{grid-template-columns:auto 1fr auto}
  .idearow.has-thumb{grid-template-columns:auto auto 1fr auto}
  .idea-thumb{width:52px}
}
.idea-dot{
  width:7px;height:7px;border-radius:50%;background:transparent;flex:none;
}
.idea-dot.st-work{background:var(--warn-dot)}
.idea-dot.st-check{background:var(--accent)}
.idea-dot.st-done{background:var(--ok-dot)}
.ideapage{margin-top:4px}

/* ---------- arrears ----------
   One person, one list, both boards. It was two tabs, and "what do we owe
   Asif" meant opening both and adding them up by hand. */
.arrearsrow{grid-template-columns:1fr auto auto;gap:18px}
.arrears-paid{font-size:13px;color:var(--text-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.arrears-owed{
  font-size:13px;font-weight:600;color:var(--text-dim);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.arrears-owed.due{color:var(--bad)}
.arrearsrows .payrow{
  display:grid;grid-template-columns:1fr auto 92px 110px 150px;align-items:center;gap:14px;
}
/* The working is a row of its own, not a sixth column. Without this the
   panel lands in the grid's first column, and the title next to it collapses
   to an ellipsis to make room. */
.arrearsrows .payrow > .payshow,
.arrearsrows .payrow > .paywork{grid-column:1/-1}
.arrearsrows .payrow > .payshow{justify-self:start}
.pay-where{font-size:12.5px;color:var(--text-faint);white-space:nowrap}
.pay-date{font-size:12.5px;color:var(--text-faint);white-space:nowrap}
.pay-amt{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pay-state{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.subtabs .n{
  margin-left:6px;font-size:11.5px;font-variant-numeric:tabular-nums;opacity:.7;
}
@media (max-width:820px){
  .arrearsrows .payrow{grid-template-columns:1fr auto;row-gap:6px}
  .pay-amt,.pay-state{justify-self:start;text-align:left}
}

/* ---------- manual time ---------- */
.timeform{
  border:1px solid var(--line-mid);border-radius:var(--radius-lg);background:var(--surface);
  padding:18px 20px 20px;margin-bottom:22px;display:flex;flex-direction:column;gap:14px;
}
.timeform .frow{display:flex;gap:14px;flex-wrap:wrap}
.timeform .field{flex:1 1 160px}
.timeform .btn{align-self:flex-start}

/* ---------- the post, and the recipe beside it ----------
   Somebody opening an idea is nearly always here to read or copy what was
   written, so the post is first and biggest and the thinking sits under it.
   The skill file goes alongside on a wide screen and underneath on a narrow
   one — it is reference, not chrome. */
/* Sized to the post, not to the window.
   The left column used to be 1fr, so on a wide screen it stretched to 752px
   around a card capped at 560 — a hundred and ninety pixels of nothing
   between the post and the sidebar, on the page whose whole job is showing
   what the post looks like. A post has a natural width; the column is that
   width, and the page ends where the content does. */
.ideacols{
  display:grid;grid-template-columns:minmax(0,560px) 300px;gap:20px;
  align-items:start;margin-top:14px;
}
@media (max-width:980px){.ideacols{grid-template-columns:minmax(0,1fr)}}
.ideacols .ideafields{margin-top:0}
.postbox{
  font-family:"IBM Plex Mono",monospace;font-size:13.5px;line-height:1.7;
  white-space:pre-wrap;min-height:220px;
}
.field .flabel{display:flex;align-items:center;gap:10px}
.ideacopy{margin-left:auto}

.skillbox{
  border:1px solid var(--line-mid);border-radius:var(--radius-md);
  background:var(--sunken);overflow:hidden;position:sticky;top:16px;
}
.skillhead{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:0;padding:13px 14px;font:inherit;cursor:pointer;color:inherit;
}
.skillhead:hover{background:var(--raised)}
.skillmark{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  background:var(--accent);color:var(--accent-ink);border-radius:5px;padding:3px 5px;flex:none;
}
.skillname{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;color:var(--text)}
.skillhint{margin-left:auto;font-size:11.5px;color:var(--text-faint);white-space:nowrap}
.skillbody{
  border-top:1px solid var(--line);padding:14px;max-height:60vh;overflow-y:auto;
  font-size:13px;line-height:1.6;color:var(--text-dim);background:var(--surface);
}
.skillbody h3{font-size:13.5px;font-family:"IBM Plex Mono",monospace;color:var(--text);margin:0 0 10px}
.skillbody h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin:14px 0 6px}
.skillbody p{margin:0 0 8px}
.skillbody ul{margin:0 0 8px;padding-left:17px;display:flex;flex-direction:column;gap:5px}
.skillbody b{color:var(--text);font-weight:600}

/* ---------- how it will look ----------
   A post is a thing people see. These are mock-ups of the three places it
   goes: same shape, same furniture, same fold. The counts are zeros — the
   point is the length and the cut-off, which are what actually decide
   whether a post works. */
.pvwrap{display:flex;flex-direction:column;gap:6px}
.pvlabel{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}

/* The preview cards.
   Each platform keeps its own type, colour and chrome, because the question
   these answer is "what will this look like when it is up" and an answer in
   this board's own styling does not answer it. They deliberately do not
   follow the board's theme: LinkedIn is white in a dark room too. */
.pv{
  border:1px solid #e0e0e0;border-radius:10px;background:#fff;color:#000000e6;
  overflow:hidden;max-width:560px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  box-shadow:0 1px 2px rgb(0 0 0 / .06);
}
.pv-row{display:flex;gap:11px;padding:14px 15px 0;align-items:flex-start}
.pv-av{width:48px;height:48px;border-radius:50%;flex:none;object-fit:cover;display:block}
.pv-av-i{display:grid;place-items:center;color:#fff;font-size:15px;font-weight:600;font-style:normal}
.pv-main{min-width:0;flex:1}
.pv-head{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pv-head b{font-weight:600}
.pv-body{padding:4px 15px 12px;line-height:1.5;white-space:normal;word-break:break-word}
.pv-empty{color:#8b98a5;font-style:italic}
/* Base for the previews that are not X or LinkedIn — Instagram and Skool
   both lean on these. They were scoped into the two platform blocks when
   those were rewritten, which left the Instagram card's caption grey-on-grey
   and its action row unaligned. */
.pv-dim{color:#536471;font-size:14px}
.pv-acts{
  display:flex;justify-content:space-between;gap:10px;padding:6px 15px 14px;
  color:#536471;font-size:13px;max-width:420px;
}
.pv-i{flex:none}
.pv-act{display:inline-flex;align-items:center;gap:7px}
.pv-act i{font-style:normal}
.pv-foot{
  border-top:1px solid var(--line);padding:8px 15px;font-size:12px;
  color:var(--text-faint);background:var(--sunken);
  font-family:inherit;
}
.pv-foot.warn{color:var(--warn)}
.pv-foot.bad{color:var(--bad);font-weight:600}

/* ---- X ----
   Chirp is not ours to ship, so the stack falls to the system face at the
   weights X actually uses. Light card, because the board is light and a
   black rectangle in the middle of this page reads as an error. */
.pv-x{border-radius:16px;color:#0f1419;border-color:#eff3f4}
.pv-x .pv-head{font-size:15px;gap:3px}
.pv-x .pv-head b{font-weight:700;letter-spacing:-.01em}
.pv-x .pv-dim{color:#536471;font-size:15px;font-weight:400}
.pv-x .pv-badge{margin:0 1px}
.pv-x .pv-body{padding-left:0;padding-right:15px;font-size:15px}
.pv-x .pv-body a,.pv-x .pv-at{color:#1d9bf0;text-decoration:none}
.pv-x .pv-acts{
  display:flex;justify-content:space-between;gap:10px;padding:8px 15px 14px 0;
  color:#536471;font-size:13px;max-width:430px;
}
.pv-x .pv-act{transition:color .14s ease}
.pv-x .pv-act:hover.a-reply{color:#1d9bf0}
.pv-x .pv-act:hover.a-rt{color:#00ba7c}
.pv-x .pv-act:hover.a-like{color:#f91880}
.pv-x .pv-act:hover.a-views{color:#1d9bf0}

/* ---- LinkedIn ----
   Rounder, greyer, and every line of the byline a step quieter than the one
   above it — which is most of what makes a LinkedIn post recognisable before
   you have read a word of it. */
.pv-li{border-radius:8px;border-color:#0000001a}
.pv-li .pv-head{font-size:14px;line-height:1.3;gap:4px}
.pv-li .pv-head b{font-weight:600;color:#000000e6}
.pv-li .pv-deg{font-size:12px;color:#00000099;font-weight:400}
.pv-li .pv-dim{color:#00000099}
.pv-li .pv-sub{font-size:12px;line-height:1.35;display:flex;align-items:center;gap:4px}
.pv-li .pv-ell{color:#00000099;font-size:20px;line-height:1;padding:2px 2px 0}
.pv-li .pv-body{padding:12px 15px 6px;font-size:14px;line-height:1.43}
.pv-li .pv-body a{color:#0a66c2;text-decoration:none}
.pv-more{
  background:none;border:0;padding:0 0 0 4px;font:inherit;font-size:14px;
  color:#00000099;cursor:pointer;
}
.pv-more:hover{color:#0a66c2;text-decoration:underline}
.pv-react{
  display:flex;align-items:center;gap:4px;padding:8px 15px;
  border-bottom:1px solid #0000001a;font-size:12px;
}
.pv-react .pv-dim{font-size:12px;color:#00000099}
.pv-react .pv-cmt{margin-left:auto}
.pv-emo{display:inline-flex;align-items:center;margin-right:3px}
.pv-rx{
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid #fff;margin-right:-4px;
}
.pv-rx:last-child{margin-right:2px}
.pv-globe{opacity:.8}
.pv-li-acts{
  display:flex;justify-content:space-around;gap:4px;padding:4px 8px;
  color:#00000099;font-size:14px;font-weight:600;
}
.pv-li-acts .pv-act{padding:10px 8px;border-radius:4px;flex:1;justify-content:center}
.pv-li-acts .pv-act:hover{background:#00000014}

/* Instagram: a square, because that is what decides whether it is readable. */
.pv-ig{max-width:430px}
.pv-ig-head{align-items:center;padding:11px 13px;gap:9px}
.pv-ig-head .pv-av{width:32px;height:32px}
.pv-ig-head b{font-size:14px}
.pv-ig-more{margin-left:auto}
/* Instagram's row: three on the left, save pushed to the right, all drawn
   rather than typed as emoji — the bookmark glyph in particular rendered as
   a little red-and-white sticker on every platform we checked. */
.pv-ig-acts{justify-content:flex-start;gap:15px;padding:10px 13px;color:#000}
.pv-ig-acts .pv-i{width:23px;height:23px;stroke-width:1.4}
.pv-ig-acts .pv-save{margin-left:auto;display:inline-flex}
/* The slide is a picture of a finished post, not a piece of this board, so
   it keeps its own paper and its own ink in both themes — inverting it in
   dark mode would preview a carousel nobody is going to publish. Cream
   ground, one headline, hand-drawn rule, mono body, save-for-later footer:
   the shape every carousel worth copying is already built to.

   Sized in cqw so the type holds its proportions whether the preview is
   drawn at 430px in the side column or narrower on a phone. */
.pv-slide{
  --sl-paper:#F6F0E6;
  --sl-ink:#14140F;
  --sl-hi:#F4511E;
  container-type:inline-size;
  position:relative;aspect-ratio:1/1;padding:30px 26px 60px;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--sl-paper);color:var(--sl-ink);
}
.pv-slide-t{width:100%;max-height:100%;overflow:auto;text-align:center}
/* The kicker every reference carousel puts above the headline: small, tracked,
   in the accent, naming the category before the claim lands. */
.pv-sl-brow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:600;
  font-size:clamp(9px,2.7cqw,12px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--sl-hi);margin-bottom:10px;
}
/* The proof chip — a star and a number on ink. In the references this is what
   turns a claim into something you believe: 189,000 stars, 31,389, +10k this
   week. Ink rather than the accent, so it never competes with the headline. */
.pv-sl-pill{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  background:var(--sl-ink);color:var(--sl-paper);border-radius:999px;
  padding:7px 15px;font-weight:700;
  font-size:clamp(10px,3cqw,14px);line-height:1.15;
}
.pv-sl-pill svg{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.pv-sl-head{
  font-family:Anton,"Arial Narrow",Inter,sans-serif;font-weight:400;
  font-size:clamp(21px,9cqw,42px);line-height:.95;text-transform:uppercase;
  overflow-wrap:anywhere;
}
.pv-hi{font-style:normal;color:var(--sl-hi)}
.pv-sl-rule{display:block;width:min(76%,290px);height:13px;margin:9px auto 0;overflow:visible}
.pv-sl-rule path{fill:none;stroke:var(--sl-hi);stroke-width:2.6;stroke-linecap:round}
.pv-sl-note{
  font-family:Caveat,"Segoe Script",cursive;font-weight:700;
  font-size:clamp(15px,5.4cqw,25px);line-height:1.12;margin-top:13px;
  transform:rotate(-1.6deg);
}
.pv-sl-body{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(10.5px,3.4cqw,15px);line-height:1.5;margin-top:15px;
  white-space:pre-wrap;color:rgb(20 20 15 / .82);
}
.pv-sl-foot{
  position:absolute;left:22px;right:22px;bottom:17px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:clamp(10px,3cqw,13px);font-weight:600;
}
.pv-sl-handle,.pv-sl-save{display:flex;align-items:center;gap:6px;min-width:0}
.pv-sl-handle .ig{width:1.5em;height:1.5em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9}
.pv-sl-handle .ig .dot{fill:currentColor;stroke:none}
/* The handle and the ask are in the same hand as the aside, the way the
   reference carousels sign them. */
.pv-sl-handle,.pv-sl-save{
  font-family:Caveat,"Segoe Script",cursive;font-weight:700;
  font-size:clamp(13px,4.2cqw,19px);
}
.pv-sl-save{flex:none}
.pv-sl-save .bm{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.pv-count{
  position:absolute;top:12px;right:12px;background:rgb(0 0 0 / .55);color:#fff;
  border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;
}
/* On cream, a white disc with no edge is invisible — it needs the lift. */
.pv-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  border:0;background:#fff;color:#111;font-size:17px;line-height:1;cursor:pointer;
  box-shadow:0 1px 5px rgb(0 0 0 / .22);
}
.pv-nav.prev{left:10px}
.pv-nav.next{right:10px}
.pv-dots{display:flex;justify-content:center;gap:5px;padding:9px}
.pv-dots i{width:6px;height:6px;border-radius:50%;background:#c7c7c7}
.pv-dots i.on{background:#0095f6}
.pv-ig-acts{max-width:none;padding:2px 13px 8px;font-size:19px;gap:14px;justify-content:flex-start}
.pv-save{margin-left:auto}
.pv-cap{padding:0 13px 12px;font-size:14px;line-height:1.45}
.pv-cap b{font-weight:600}

/* ---------------- the prompt, and deleting a row ----------------

   The prompt sits above the words because that is the order the work happens
   in: build it, paste it into a model, drop the answer in the box. Folded by
   default — it is long, and most of the time you copy it without reading it. */
.iprompt{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;margin-bottom:2px;
  border:1px solid var(--accent-line,var(--line));border-radius:var(--radius-md);
  background:var(--accent-wash,var(--sunken));
}
.iprompt-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.iprompt-top .flabel{flex:1 1 auto;min-width:0}
.iprompt-body{
  margin:0;padding:11px 12px;max-height:280px;overflow:auto;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;
}
.iprompt-f{margin:0;font-size:11.5px;color:var(--text-faint)}

/* A row's delete. Out of the way until the row is under the cursor, and it
   asks once before it does anything. */
.idearow-wrap{position:relative}
.idearow-wrap .idearow{padding-right:64px}
.idea-del{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--text-faint);font:inherit;font-size:16px;line-height:1;
  padding:4px 8px;cursor:pointer;opacity:0;
  transition:opacity .12s,color .12s,border-color .12s,background-color .12s;
}
.idearow-wrap:hover .idea-del,.idea-del:focus-visible{opacity:1}
.idea-del:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-wash)}
.idea-del.armed{
  opacity:1;font-size:12px;font-weight:700;
  color:var(--bad);border-color:var(--bad);background:var(--bad-wash);
}
/* No hover on a touch screen, so it is simply always there. */
@media (hover:none){ .idea-del{opacity:1} }

/* ---------------- Skool ----------------

   Drawn to the feed's own proportions, because a preview that is only roughly
   right is a preview nobody trusts. The three that matter: the title sits well
   above the body rather than beside it in weight, the picture is a square to
   the right of the words, and the card breathes — Skool's padding is generous
   and cramping it was most of what made this read as "not Skool".

   Its own colours, like every card here. This is meant to look like Skool,
   not like this board. */
.pv-sk{
  max-width:none;background:#fff;color:#101828;border-radius:12px;
  border:1px solid #e4e7ec;
}
@media (prefers-color-scheme:dark){
  .pv-sk{background:#16181c;color:#e7e9ea;border-color:#2f3336}
}
.pv-sk.pinned{border:2px solid #f5c518}
.sk-pin{
  display:flex;justify-content:flex-end;align-items:center;gap:7px;
  padding:16px 22px 0;font-size:15px;font-weight:700;color:#101828;
}
.sk-pin svg{fill:currentColor}
@media (prefers-color-scheme:dark){.sk-pin{color:#e7e9ea}}

.sk-top{display:flex;gap:13px;align-items:center;padding:18px 22px 0}
.pv-sk.pinned .sk-top{padding-top:8px}
.sk-avwrap{position:relative;flex:none;display:block}
.sk-av{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block}
.sk-av.pv-av-i{display:grid;place-items:center;color:#fff;font-size:16px;font-weight:600;font-style:normal}
.sk-lvl{
  position:absolute;left:-2px;bottom:-2px;min-width:20px;height:20px;padding:0 4px;
  border-radius:999px;background:#2563eb;color:#fff;border:2.5px solid #fff;
  font-size:11px;font-weight:700;font-style:normal;line-height:15px;text-align:center;
}
@media (prefers-color-scheme:dark){.sk-lvl{border-color:#16181c}}
.sk-who{min-width:0}
.sk-name{font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.sk-meta{
  display:flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:600;color:#667085;margin-top:2px;
}
.sk-bub{display:inline-flex;color:#98a2b3}
.sk-bub svg{width:15px;height:15px}

.sk-mid{display:flex;gap:24px;align-items:flex-start;padding:14px 22px 0}
.sk-words{min-width:0;flex:1}
.sk-title{
  display:flex;align-items:baseline;gap:10px;
  margin:0 0 10px;font-size:26px;font-weight:700;line-height:1.22;
  letter-spacing:-.022em;word-break:break-word;
}
.sk-new{width:9px;height:9px;border-radius:50%;background:#2563eb;flex:none;transform:translateY(-3px)}
/* Skool clamps the body in the feed — the card is a door, not the room. */
.sk-body{
  font-size:17px;line-height:1.5;color:#344054;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media (prefers-color-scheme:dark){.sk-body{color:#c9ccd1}}
.sk-thumb{
  position:relative;flex:none;width:138px;height:138px;border-radius:10px;
  overflow:hidden;border:1px solid #e4e7ec;background:#f4f5f7;
}
@media (prefers-color-scheme:dark){.sk-thumb{border-color:#2f3336;background:#22252a}}
.sk-thumb-m{width:100%;height:100%;object-fit:cover;display:block}
.sk-more{
  position:absolute;right:6px;bottom:6px;padding:2px 8px;border-radius:999px;
  background:rgba(0,0,0,.66);color:#fff;font-size:12px;font-weight:700;
}

.sk-foot{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:18px 22px 20px;font-size:15px;color:#667085;
}
.sk-stat{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.sk-stat svg{fill:none;stroke:currentColor;stroke-width:1.7}
.sk-stat.on{color:#2563eb}
.sk-stat.on svg{fill:currentColor;stroke:none}
.sk-faces{display:flex;margin-left:-4px}
.sk-face{width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-left:-9px;object-fit:cover;display:block}
.sk-face:first-child{margin-left:0}
@media (prefers-color-scheme:dark){.sk-face{border-color:#16181c}}
.sk-face.pv-av-i{display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;font-style:normal}
.sk-last{margin-left:auto;font-size:14.5px;color:#98a2b3}

/* ---- the feed around the post ----
   Skool's own chrome: the composer and the category rail. The rail scrolls
   rather than wraps, because that is how it behaves on a phone and a wrapped
   second row of chips reads as a different product. Fixed light greys, not
   the board's tokens: this is a picture of Skool, so it stays Skool-coloured
   in dark mode the same way the Instagram slide stays cream. */
.sk-feed{
  background:#F7F7F8;border-radius:14px;padding:16px 16px 18px;
  display:flex;flex-direction:column;gap:14px;
}
@media (prefers-color-scheme:dark){.sk-feed{background:#0E1013}}

.sk-compose{
  display:flex;align-items:center;gap:14px;background:#fff;color:#101828;
  border:1px solid #e4e7ec;border-radius:12px;padding:14px 16px;
}
@media (prefers-color-scheme:dark){
  .sk-compose{background:#16181c;color:#e7e9ea;border-color:#2f3336}
}
.sk-compose-av{width:44px;height:44px}
.sk-compose-t{flex:1;min-width:0;font-size:21px;color:#98a2b3;letter-spacing:-.01em}
.sk-live{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  border:1px solid #d0d5dd;border-radius:999px;padding:9px 17px;
  font-size:15px;font-weight:600;color:#344054;
}
@media (prefers-color-scheme:dark){.sk-live{border-color:#2f3336;color:#c9ccd1}}

.sk-tabs{
  display:flex;align-items:center;gap:9px;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
.sk-tabs::-webkit-scrollbar{display:none}
.sk-tab{
  flex:none;background:#fff;border:1px solid #e4e7ec;border-radius:999px;
  padding:9px 17px;font-size:15px;font-weight:500;color:#344054;white-space:nowrap;
}
.sk-tab i{font-style:normal}
/* The lit chip is the post's own category — where this post actually lands. */
.sk-tab.on{background:#8a8f98;border-color:#8a8f98;color:#fff;font-weight:600}
.sk-tab-more{color:#667085}
@media (prefers-color-scheme:dark){
  .sk-tab{background:#16181c;border-color:#2f3336;color:#c9ccd1}
  .sk-tab.on{background:#4a4f57;border-color:#4a4f57;color:#fff}
}
.sk-filter{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid #e4e7ec;color:#344054;
}
@media (prefers-color-scheme:dark){
  .sk-filter{background:#16181c;border-color:#2f3336;color:#c9ccd1}
}

/* ---- the poll strip ---- */
.sk-poll{display:flex;align-items:center;gap:12px;padding:16px 22px 0;font-size:15px}
.sk-poll-tag{
  border:1px solid #0aa06e;border-radius:999px;padding:4px 14px;
  font-weight:600;color:#0aa06e;
}
.sk-poll b{color:#0aa06e;font-weight:700}

.sk-cmts{border-top:1px solid #e4e7ec;padding:16px 22px;display:flex;flex-direction:column;gap:16px}
@media (prefers-color-scheme:dark){.sk-cmts{border-color:#2f3336}}
.sk-cmt{display:flex;gap:12px;align-items:flex-start}
.sk-cmt-av{width:36px;height:36px;border-radius:50%;flex:none;object-fit:cover;display:block}
.sk-cmt-av.pv-av-i{display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;font-style:normal}
.sk-cmt-in{min-width:0}
.sk-cmt b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.sk-cmt p{margin:3px 0 0;font-size:15.5px;line-height:1.5;color:#344054;word-break:break-word}
@media (prefers-color-scheme:dark){.sk-cmt p{color:#c9ccd1}}

/* The few fields only a Skool post has. */
.skfields{display:flex;flex-direction:column;gap:10px}
.skfields .narrow{max-width:110px}
.ckrow{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-dim)}

/* ---------------- pictures and clips ----------------

   Inside a post they sit edge to edge under the words, the way every one of
   these platforms shows them. Two or more share a row and crop to a common
   height, so three portrait screenshots do not make a card three screens
   tall. */
.pv-media{display:grid;gap:2px;margin:2px 0 10px;background:var(--line)}
.pv-media.n1{grid-template-columns:1fr}
.pv-media.n2{grid-template-columns:1fr 1fr}
.pv-media.n3,.pv-media.n4{grid-template-columns:1fr 1fr}
.pv-m{display:block;width:100%;background:#000}
.pv-media.n1 .pv-m{max-height:420px;object-fit:contain}
.pv-media.n2 .pv-m,.pv-media.n3 .pv-m,.pv-media.n4 .pv-m{height:170px;object-fit:cover}
.pv-x .pv-media,.pv-li .pv-media{border-radius:12px;overflow:hidden;margin-left:15px;margin-right:15px}

/* The editor's own strip: what is attached, and how to take it off. */
.imedia{display:flex;flex-direction:column;gap:7px}
.imedia-grid{display:flex;flex-wrap:wrap;gap:8px}
.imedia-i{
  position:relative;width:96px;height:72px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line-mid);background:var(--sunken);
}
.imedia-t{width:100%;height:100%;object-fit:cover;display:block;background:#000}
/* A PDF is read, not glanced at, so it gets a page-shaped tile with the
   browser's own viewer in it and a way out to a full tab. */
.imedia-i.doc{width:260px;height:330px;background:var(--raised)}
.imedia-doc{position:relative;display:block;width:100%;height:100%}
.imedia-doc iframe{width:100%;height:100%;border:0;display:block;background:var(--surface)}
.imedia-open{
  position:absolute;left:0;right:0;bottom:0;padding:7px 10px;
  background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:600;
  text-align:center;text-decoration:none;
}
.imedia-open:hover{background:rgba(0,0,0,.85)}
@media (max-width:560px){.imedia-i.doc{width:100%;height:300px}}
.imedia-x{
  position:absolute;top:3px;right:3px;width:20px;height:20px;border:0;
  border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:14px;
  line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;
}
.imedia-x:hover{background:rgba(0,0,0,.82)}
.imedia-add{
  width:96px;height:72px;border:1px dashed var(--line-strong);border-radius:10px;
  display:grid;place-items:center;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--text-dim);background:var(--sunken);
  transition:border-color .14s,color .14s;
}
.imedia-add:hover{border-color:var(--text-faint);color:var(--text)}
.imedia-add input{display:none}
.imedia-add.busy{cursor:progress;color:var(--text-faint)}
.imedia-hint{font-size:11.5px;color:var(--text-faint)}

/* The working, folded away — real, and not what you came to look at. */
.ideameta{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--sunken)}
.ideameta summary{
  padding:11px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-dim);
  list-style:none;
}
.ideameta summary::-webkit-details-marker{display:none}
.ideameta summary::before{content:"▸ ";color:var(--text-faint)}
.ideameta[open] summary::before{content:"▾ "}
.ideameta-in{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}
.sourcebox{display:flex;gap:18px;align-items:center;margin:0 0 22px;padding:16px;border:1px solid var(--line,#e5e7eb);border-radius:16px;background:linear-gradient(135deg,#f8fbff,#fff)}
.sourcevideo-media{position:relative;flex:0 0 220px;aspect-ratio:16/9;overflow:hidden;border-radius:11px;background:#111}
.sourcevideo-media img{display:block;width:100%;height:100%;object-fit:cover}
.sourceplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#06f;color:#fff;text-decoration:none;box-shadow:0 4px 18px #0006}
.sourcevideo-info{min-width:0}.sourcevideo-info h3{margin:4px 0;font-size:17px}.sourcevideo-info p{margin:5px 0 12px;color:var(--muted,#667085);font-size:13px}.source-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:700px){.sourcebox{align-items:stretch;flex-direction:column}.sourcevideo-media{flex-basis:auto;width:100%}}

/* ---------- an idea's own page ----------
   The reference on the left, held still while the working is read beside it.
   The five tabs are the passes somebody makes over a video — what was said,
   why it worked, how it opened, how it was told, what was on screen — and
   each is an ordinary field on the idea, so all of it saves with the list. */
.istudio{padding:0;border:0;background:transparent;margin-top:4px}
.istudio-top{
  display:flex;align-items:flex-start;gap:16px;
  padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:18px;
}
.istudio-top h2{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.015em;min-width:0}
.istudio-nav{display:flex;gap:6px;margin-left:auto;flex:none}
.istudio-arrow{
  display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line-mid);background:var(--surface);
  color:var(--text-dim);text-decoration:none;font-size:14px;
  transition:background-color .14s ease,color .14s ease;
}
.istudio-arrow:hover{background:var(--raised);color:var(--text)}
.istudio-arrow.off{opacity:.3;pointer-events:none}

.istudio-cols{display:grid;grid-template-columns:340px minmax(0,1fr);gap:26px;align-items:start}
.istudio-side{position:sticky;top:18px;display:flex;flex-direction:column;gap:12px}

.istudio-player{
  position:relative;aspect-ratio:16/9;width:100%;border-radius:12px;overflow:hidden;
  background:#0b0b10;border:1px solid var(--line);
}
.istudio-player iframe{display:block;width:100%;height:100%;border:0}
.istudio-out{
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;color:#fff;font-weight:600;font-size:13.5px;
}
.istudio-play{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--accent);font-style:normal;font-size:13px;
}
.istudio-none{
  display:grid;place-items:center;background:var(--raised);
  color:var(--text-faint);font-size:13px;text-align:center;padding:0 18px;
}

.istudio-facts{display:flex;flex-wrap:wrap;gap:6px}
.istudio-fact{
  border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;
  background:var(--idle-wash);color:var(--text-dim);white-space:nowrap;
}
.istudio-fact.st-work{background:var(--warn-wash);color:var(--warn)}
.istudio-fact.st-check{background:var(--accent-wash);color:var(--accent-deep)}
.istudio-fact.st-done{background:var(--ok-wash);color:var(--ok)}
.istudio-fact.on{background:var(--accent-wash);color:var(--accent-deep)}

/* The four things you do to an idea, each with the letter that does it. */
.istudio-acts{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);overflow:hidden;
}
.istudio-act{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 13px;border:0;border-bottom:1px solid var(--line);
  background:transparent;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--text-dim);cursor:pointer;transition:background-color .14s ease,color .14s ease;
}
.istudio-act:last-child{border-bottom:0}
.istudio-act span{min-width:0;flex:1}
.istudio-act:hover{background:var(--raised);color:var(--text)}
.istudio-act.lead{color:var(--accent-deep)}
.istudio-act.on{background:var(--accent-wash);color:var(--accent-deep)}
.istudio-act kbd{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  border:1px solid var(--line-mid);border-radius:5px;padding:1px 6px;
  color:var(--text-faint);background:var(--canvas);flex:none;
}
.istudio-ref{font-size:12.5px;color:var(--text-faint);word-break:break-all}

.istudio-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.istudio-sum{display:flex;flex-direction:column;gap:7px}
.istudio-sumbox,.istudio-box{
  width:100%;border:1px solid var(--line-mid);border-radius:var(--radius-md);
  background:var(--canvas);padding:11px 13px;font:inherit;font-size:14px;line-height:1.6;
  color:inherit;resize:vertical;
}
.istudio-sumbox:focus,.istudio-box:focus{border-color:var(--accent);outline:none}

.istudio-tabs{
  display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);
  margin-bottom:-8px;padding-bottom:0;
}
.istudio-tab{
  position:relative;display:flex;align-items:center;gap:6px;white-space:nowrap;
  border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:600;
  color:var(--text-faint);padding:9px 13px;cursor:pointer;border-bottom:2px solid transparent;
  transition:color .14s ease,border-color .14s ease;
}
.istudio-tab:hover{color:var(--text-dim)}
.istudio-tab.on{color:var(--accent-deep);border-bottom-color:var(--accent)}
/* A dot for a pass somebody has already made, so a glance says what is left. */
.istudio-has{width:5px;height:5px;border-radius:50%;background:var(--ok-dot);flex:none}

.istudio-pane{display:flex;flex-direction:column;gap:9px}
.istudio-pane-head{display:flex;align-items:center;gap:10px}
.istudio-pane-head b{font-size:14px}
.istudio-pane-head .btn{margin-left:auto}
.istudio-count{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--text-faint);
  border:1px solid var(--line);border-radius:999px;padding:2px 9px;
}
.istudio-ro{white-space:pre-wrap;line-height:1.7}

.istudio-bank{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.istudio-hook{
  display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);
  padding:9px 12px;font:inherit;cursor:pointer;color:inherit;
  transition:border-color .14s ease,background-color .14s ease;
}
.istudio-hook:hover{border-color:var(--accent);background:var(--raised)}
.istudio-hook span{font-size:13.5px;font-weight:600;line-height:1.5}
.istudio-hook small{font-size:11.5px;color:var(--text-faint)}
.istudio-bank-none{margin:8px 0 0;font-size:12.5px;color:var(--text-faint);line-height:1.6}

.istudio-script{margin-top:4px}

@media (max-width:1000px){
  .istudio-cols{grid-template-columns:minmax(0,1fr);gap:20px}
  .istudio-side{position:static}
  .istudio-player{max-width:520px}
}

/* ---------- hooks: the tools above them, and where one came from ----------
   A hook is a guess; six of them is a shortlist. The row above says how many
   there are and offers the two ways to get another — write it, or have one
   written against the script. */
.hooktools{display:flex;align-items:center;gap:9px;margin:0 0 14px;flex-wrap:wrap}
.hooktools-n{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--text-faint);
}
/* Only on hooks that actually have a provenance. A hook somebody typed says
   nothing here rather than borrowing a channel name it never came from. */
.hookfrom{
  border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;white-space:nowrap;
  background:var(--accent-wash);color:var(--accent-deep);
}
.hookno .hookfrom + .btn{margin-left:auto}

/* ---------- the six that come back ---------- */
/* Wider than the rest so six candidates sit two to a row and can be compared
   without scrolling one past the other. */
.modal-xwide{max-width:820px}
.hookgen-body{max-height:min(64vh,620px);overflow-y:auto}
.hookgen-lede,.hookgen-full{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-dim)}
.hookgen-full{color:var(--warn)}
.hookgen-wait{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-dim)}
.hookgen-spin,.hookgen-wait .spin{
  width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid var(--line-mid);border-top-color:var(--accent);
  animation:hookspin .7s linear infinite;
}
@keyframes hookspin{to{transform:rotate(360deg)}}
.hookgen-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.hookgen-card{
  display:flex;flex-direction:column;gap:8px;padding:13px 15px;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
}
.hookgen-card.used{opacity:.62}
.hookgen-top{display:flex;align-items:center;gap:9px}
.hookgen-top .btn{margin-left:auto}
.hookgen-done{
  margin-left:auto;font-size:11.5px;font-weight:600;
  border-radius:999px;padding:3px 9px;background:var(--ok-wash);color:var(--ok);
}
.hookgen-text{margin:0;font-size:15px;line-height:1.6;font-weight:600;letter-spacing:-.01em}
.hookgen-why{margin:0;font-size:12.5px;line-height:1.55;color:var(--text-faint)}

/* ---------- the working, on the row ----------
   The arithmetic was always computed and always correct; it lived in a title
   attribute, which is a tooltip nobody hovers and a phone cannot show at all.
   That is how "how was this number reached" became a question asked in chat
   instead of answered on the page. */
.payshow{
  flex:none;background:none;border:0;padding:4px 0;font:inherit;font-size:12px;font-weight:600;
  color:var(--text-faint);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.payshow:hover{color:var(--accent-deep)}
.payshow.on{color:var(--accent-deep)}
.paywork{
  flex:1 1 100%;margin-top:4px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--canvas);
}
.paywork-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.paywork-step{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.paywork-step:last-child{border-bottom:0}
.paywork-k{font-size:13.5px;font-weight:600}
.paywork-v{
  font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:600;white-space:nowrap;
}
.paywork-step.bad .paywork-v{color:var(--bad)}
/* Waiting on a review is not a bad mark, and must not be coloured like one. */
.paywork-step.pending .paywork-v{color:var(--warn)}
.paywork-note{
  grid-column:1/-1;margin:2px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-faint);
}
.paywork-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line-mid);
  font-size:13.5px;
}
.paywork-total b{font-size:15px;font-variant-numeric:tabular-nums}
.paywork-total.over b{color:var(--ok)}
.paywork-total.over span{color:var(--text-faint)}
.paywork-foot{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--text-faint)}

/* A real sum, worked through, under the rules. */
.payeg{
  margin-top:16px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--surface);
}
.payeg > b{font-size:13.5px}
.payeg p{margin:7px 0 0;font-size:13px;line-height:1.6;color:var(--text-dim)}
.payeg-steps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.payeg-steps li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;
}
.payeg-steps li:last-child{border-bottom:0}
.payeg-steps b{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- the algorithm, published ----------
   The three factors above say what is being judged; this says what the board
   does with the judgement. A team told only the first cannot check the
   second, which is how "how was this number reached" became a chat message. */
.algo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.algo-step{
  display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);
}
.algo-k{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.algo-v{
  font-size:13px;font-weight:600;white-space:nowrap;color:var(--accent-deep);
  font-variant-numeric:tabular-nums;
}
.algo-step p{grid-column:1/-1;margin:4px 0 0;font-size:13.5px;line-height:1.65;color:var(--text-dim)}
.algo-step.bad .algo-v{color:var(--bad)}
.algo-step.good .algo-v{color:var(--ok)}

/* Nine readings, in weighted order — which is the order worth working in. */
.scorecard{display:flex;flex-direction:column;gap:10px}
.sc-row{
  display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;
  padding:15px 16px;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);
}
.sc-w{text-align:center;padding-top:2px}
.sc-w b{display:block;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sc-w i{display:block;font-style:normal;font-size:10.5px;line-height:1.3;color:var(--text-faint);margin-top:2px}
.sc-b{min-width:0}
.sc-b h3{margin:0;font-size:15px;letter-spacing:-.01em}
.sc-b p{margin:6px 0 0;font-size:13.5px;line-height:1.65;color:var(--text-dim)}
.sc-rule,.sc-fix{
  margin-top:9px;padding:9px 12px;border-radius:var(--radius-sm);
  font-size:12.5px;line-height:1.6;
}
.sc-rule{background:var(--sunken,var(--canvas));color:var(--text-dim)}
.sc-fix{background:var(--accent-wash);color:var(--accent-deep)}
.sc-rule span,.sc-fix span{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:3px;opacity:.75;
}
.sc-fix span{text-transform:none;font-size:12.5px;letter-spacing:0;opacity:1;margin-bottom:2px}
@media (max-width:640px){
  .sc-row{grid-template-columns:1fr;gap:8px}
  .sc-w{text-align:left;display:flex;align-items:baseline;gap:7px}
  .sc-w i{margin-top:0}
  .algo-step{grid-template-columns:1fr}
}

/* ---------- tables ----------
   The time pages were lists of rows that happened to line up. A grant of
   money-per-hour and a log of hours are both tabular by nature: same columns,
   every row, with headers that say what each one is. */
.tbl{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);overflow:hidden;
}
.tbl-head,.tbl-row{display:grid;gap:14px;align-items:center;padding:11px 15px}
.tbl-head{
  background:var(--raised);border-bottom:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);
}
.tbl-row{border-bottom:1px solid var(--line);font-size:13.5px}
.tbl-row:last-child{border-bottom:0}
.tbl-row.paid{background:var(--canvas);opacity:.72}
.tbl-c{min-width:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tbl-c.who b{font-weight:600;white-space:nowrap}
.tbl-c.amt{font-weight:600;font-variant-numeric:tabular-nums}
.tbl-c.end{justify-content:flex-end;gap:6px}
.tbl-c.mono{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--text-dim)}
.tbl-sub{
  flex-basis:100%;font-style:normal;font-size:12px;color:var(--text-faint);
}
.tbl-tag{
  font-style:normal;font-size:11px;color:var(--text-faint);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap;
}
.tbl-alloc .tbl-head,.tbl-alloc .tbl-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 150px 40px}
.tbl-time .tbl-head,.tbl-time .tbl-row{
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 104px 70px 96px 96px 132px;
}
.tbl-c .ratein{
  width:88px;background:var(--canvas);border:1px solid var(--line-mid);
  border-radius:var(--radius-sm);padding:6px 9px;font:inherit;font-size:13.5px;
  font-variant-numeric:tabular-nums;color:inherit;outline:none;
}
.tbl-c .ratein:focus{border-color:var(--accent);background:var(--surface)}
.tbl-c .ratein + i{font-style:normal;font-size:11.5px;color:var(--text-faint)}
.timealloc{margin-bottom:28px}

@media (max-width:900px){
  .tbl-head{display:none}
  .tbl-row{grid-template-columns:1fr !important;gap:6px;padding:13px 15px}
  .tbl-c.end{justify-content:flex-start}
}

/* ---------- logging an hour, on one line ----------
   Every control is self-describing — a name, a task with its rate, a date,
   minutes, and what it was for — so a row of labels above them was a second
   row of height buying nothing. */
.tlrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tlrow > *{height:38px}
.tlrow .sel,.tlrow input{
  background:var(--canvas);border:1px solid var(--line-mid);border-radius:var(--radius-sm);
  padding:0 10px;font:inherit;font-size:13.5px;color:inherit;outline:none;min-width:0;
}
.tlrow .sel:focus,.tlrow input:focus{border-color:var(--accent);background:var(--surface)}
.tlrow .tl-who{flex:0 1 150px}
.tlrow .tl-kind{flex:0 1 250px}
.tlrow .tl-date{flex:0 1 150px}
.tlrow .tl-mins{flex:0 1 96px;font-variant-numeric:tabular-nums}
.tlrow .tl-note{flex:1 1 180px}
.tlrow .tl-go{flex:none;padding:0 18px}
.tlrow .ro.tl-kind{
  display:flex;align-items:center;color:var(--text-faint);font-size:13px;
  border:1px dashed var(--line-mid);border-radius:var(--radius-sm);padding:0 10px;
}
@media (max-width:760px){
  .tlrow > *{height:auto}
  .tlrow .sel,.tlrow input{padding:9px 10px}
  .tlrow .tl-note{flex-basis:100%}
}

/* ---------- tasks, and who may claim them ----------
   Two tables because they are two things: what a task is worth, and who is
   allowed to bill it. One row per task, one row per person. */
.tbl-tasks .tbl-head,.tbl-tasks .tbl-row{grid-template-columns:minmax(0,1.3fr) 200px 40px}
/* Person, their rate, then what they may log — the rate moved here from
   the task table, so this row grew a column and that one lost one. */
.tbl-who .tbl-head,.tbl-who .tbl-row{grid-template-columns:minmax(0,1fr) 150px minmax(0,2fr) 40px}
.tbl-c.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tbl-none{font-style:normal;font-size:12.5px;color:var(--text-faint)}
/* A granted task, on the person who has it. The rate rides along so the
   assignment table never has to be read against the task table. */
.taskchip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-mid);border-radius:999px;background:var(--canvas);
  padding:4px 5px 4px 11px;font-size:12.5px;font-weight:600;white-space:nowrap;
}
.taskchip-p{font-style:normal;font-weight:400;font-size:11px;color:var(--text-faint)}
.taskchip button{
  width:18px;height:18px;flex:none;border:0;background:none;border-radius:50%;
  display:grid;place-items:center;font-size:14px;line-height:1;color:var(--text-faint);
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.taskchip button:hover{background:var(--bad-wash);color:var(--bad)}
.sel.taskadd{
  border:1px dashed var(--line-mid);background:transparent;border-radius:999px;
  padding:4px 8px;font-size:12px;color:var(--text-faint);cursor:pointer;
}
.sel.taskadd:hover{border-color:var(--accent);color:var(--accent-deep)}
@media (max-width:900px){
  .tbl-tasks .tbl-row,.tbl-who .tbl-row{grid-template-columns:1fr !important}
}
/* The task's name, edited where it is read. */
.taskname{
  width:100%;min-width:0;background:var(--canvas);border:1px solid transparent;
  border-radius:var(--radius-sm);padding:6px 9px;font:inherit;font-size:13.5px;
  font-weight:600;color:inherit;outline:none;
}
.taskname:hover{border-color:var(--line-mid)}
.taskname:focus{border-color:var(--accent);background:var(--surface)}

/* ---------- the Vault's source accounts ----------
   The people already listed on Competitors, shown on the shelf they feed.
   Read from that list rather than copied into this one: they are the same
   fact, and two copies would disagree within a week. */
.vaultsrc{
  margin:0 0 16px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);overflow:hidden;
}
.vaultsrc > summary{
  cursor:pointer;padding:11px 15px;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:9px;list-style:none;
}
.vaultsrc > summary::-webkit-details-marker{display:none}
.vaultsrc > summary::after{content:"▾";margin-left:auto;color:var(--text-faint);font-size:11px}
.vaultsrc[open] > summary::after{content:"▴"}
.vaultsrc > summary i{
  font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-faint);border:1px solid var(--line);border-radius:999px;padding:2px 8px;
}
.vaultsrc-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;
  padding:0 15px 12px;
}
.vaultsrc-item{
  display:flex;align-items:center;gap:8px;min-width:0;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 11px;
}
.vaultsrc-item:hover{border-color:var(--accent);background:var(--raised)}
.vaultsrc-item b{font-size:13px;white-space:nowrap}
.vaultsrc-item span{
  font-size:11.5px;color:var(--text-faint);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-left:auto;
}
.vaultsrc-foot{margin:0;padding:0 15px 13px;font-size:12px;color:var(--text-faint);line-height:1.6}

/* ---------- dragging a column wider ----------
   The titles are long and the column was a fixed guess at how much of one you
   need to see. Grab the edge of the header, the way a spreadsheet does it;
   double-click puts it back. Remembered per browser, because it is one
   person's preference about their own screen. */
.board thead th{position:relative}
.colgrip{
  position:absolute;top:0;right:-4px;width:9px;height:100%;
  cursor:col-resize;z-index:2;
}
.colgrip::after{
  content:"";position:absolute;top:22%;bottom:22%;left:3px;width:2px;
  border-radius:2px;background:transparent;transition:background .14s ease;
}
.colgrip:hover::after{background:var(--accent)}
body.col-resizing{cursor:col-resize;user-select:none}
body.col-resizing .colgrip::after{background:var(--accent)}
/* The title column is the one that can be widened, so it is the one that
   wraps to a second line when there is room for it rather than always
   clipping to a single one. */
.titlecell .tlink{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}

/* ---------- the reference's own opening ----------
   The first thirty seconds of the video we are answering, sitting first among
   the hooks. Tinted, because it is the one card here nobody wrote and nobody
   can edit — it is the bar, not a candidate. */
.hookcard.refhook{background:var(--accent-wash);border-color:var(--accent)}
.hookcard.refhook:hover{border-color:var(--accent)}
.hookcard.refhook .hooktext{color:var(--text);cursor:default}
.refhook-tag{
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-deep);
}
.hookcard.refhook .hookmeta-t{color:var(--accent-deep)}

/* ---------- what the distance number means ----------
   52 out of 100 of what, and is up good or bad? The card carries its own
   scale: where the target band sits, where this one landed, and the two
   readings underneath — because a red card at 52 is explained by the copied
   phrasing rather than by the 52. */
.vscore.wide{min-width:250px}
.distbar{
  position:relative;display:block;height:5px;margin:7px 0 5px;
  border-radius:999px;background:var(--line);overflow:hidden;
}
.distband{
  position:absolute;top:0;bottom:0;left:50%;right:28%;
  background:var(--ok-dot);opacity:.55;
}
.distmark{
  position:absolute;top:-3px;width:3px;height:11px;border-radius:2px;
  background:var(--text);transform:translateX(-1px);
}
.distends{
  display:flex;justify-content:space-between;gap:6px;
  font-size:9.5px;line-height:1.4;letter-spacing:.01em;color:var(--text-faint);
}
.distends i{font-style:normal;white-space:nowrap}
.distparts{
  margin-top:6px;padding-top:6px;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.5;color:var(--text-faint);
}
/* The card's big-number rule is `.vscore b`, and these sit inside a .vscore —
   so every one of them came out at 42px and pushed the card to the height of
   the page. Same specificity, so the size has to be said again here. */
.distparts b{
  font-size:10.5px;font-weight:700;line-height:1.5;letter-spacing:0;
  color:var(--text-dim);
}
.distparts b.warn{color:var(--warn)}
.distparts b.bad{color:var(--bad)}

/* The too-similar gate. Red, because it is the one modal on this board that
   is not asking a question — it is saying something is wrong. */
.tcverdict{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--bad);
  background:var(--bad-wash);border:1px solid var(--bad);border-radius:8px;padding:10px 12px}
.tcnums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.tcnums>div{background:var(--raised);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px}
.tcnums b{display:block;font-size:22px;line-height:1.1;color:var(--bad)}
.tcnums span{display:block;margin-top:3px;font-size:11.5px;color:var(--text-dim);line-height:1.35}
.tclead{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--text-dim)}
.tclist{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:5px}
.tclist li{font-size:12.5px;line-height:1.4;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--bad-wash);border-left:3px solid var(--bad);border-radius:0 5px 5px 0;
  padding:6px 9px;color:var(--text)}

/* The team, as a wall of faces. Not a table: the question this page answers
   is "who is on this" and a face answers it faster than a row. */
.teamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.teamcard{
  display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  padding:18px 12px 15px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-md);text-decoration:none;color:inherit;
  transition:border-color .16s ease,background-color .16s ease;
}
.teamcard:hover{border-color:var(--line-strong);background:var(--raised)}
.teamname{font-size:14px;font-weight:600;color:var(--text);margin-top:4px;
  display:flex;align-items:center;gap:6px}
.teamyou{
  font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--accent-wash);border-radius:999px;padding:2px 6px;
}
.teamwhere{font-size:11.5px;font-weight:600;color:var(--text-dim)}
.teamwork{font-size:11.5px;color:var(--text-faint)}

/* The line saying where something came from.
   It was a bordered panel with a gradient, sixteen pixels of padding and a
   button, wrapped around one domain name — the largest thing on the page
   carrying the least. */
.srcline{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  padding:7px 13px 7px 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);text-decoration:none;color:var(--text);
  font-size:13px;max-width:100%;
  transition:border-color .15s ease,background-color .15s ease;
}
.srcline:hover{border-color:var(--accent);background:var(--accent-wash)}
.srcline b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srcline-k{color:var(--text-faint);font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;flex:none}
.srcline-go{color:var(--text-faint);font-size:11.5px;flex:none;margin-left:2px}
.srcline:hover .srcline-go{color:var(--accent)}

/* Which shelf this came off, on its own page, where the heading above has
   already said the rest. */
.ideabadge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:2px;
}

/* The idea page's right-hand column.
   It held one chip and a column of white space; the working that used to be
   folded under the post lives here now, which is what a sidebar is for. */
.ideaside{display:flex;flex-direction:column;gap:14px;min-width:0}
.ideaside .ideameta{background:var(--surface)}
.ideaside-h{
  margin:0;padding:12px 14px 0;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);
}
.ideaside .ideameta-in{padding:12px 14px 14px}
/* Two fields side by side in a 300px column is two fields nobody can read. */
.ideaside .frow{grid-template-columns:1fr;display:grid;gap:12px}
.ideaside .footnote{margin:0;font-size:11.5px;overflow-wrap:anywhere}

/* Which shelf, and what it came after — one row. */
.ideatop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ideatop .ideabadge{margin:0}
.ideatop .srcline{padding:5px 11px 5px 8px;font-size:12.5px}
.ideatop .sourcebox{margin:0;width:100%}

/* ---------- the Vault, shown ----------
   A shelf of examples is a shelf of posts, not a list of their names. Two
   columns where there is room, one where there is not; the cards keep their
   own platform's width and the column follows them. */
.ideafeed{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
  gap:16px;align-items:start;
}
@media (max-width:900px){.ideafeed{grid-template-columns:minmax(0,1fr)}}
.ideafeed-i{
  position:relative;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--surface);padding:12px 13px 13px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ideafeed-i:hover{border-color:var(--line-strong);box-shadow:0 2px 12px rgb(var(--ink-rgb)/.06)}
/* One link over the whole card. Everything under it is inert, so a click
   opens the example instead of following a link inside somebody else's post
   or stepping a carousel to its second slide. */
.ideafeed-go{position:absolute;inset:0;z-index:2;border-radius:inherit}
.ideafeed-pv{pointer-events:none;margin-top:9px}
.ideafeed-pv .pv{max-width:none;box-shadow:none}
.ideafeed-h{display:flex;align-items:baseline;gap:8px;min-width:0}
.ideafeed-t{
  font-size:13.5px;font-weight:600;line-height:1.35;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ideafeed-h .idea-src{margin-left:auto;flex:none}
.ideafeed-none{
  color:var(--text-faint);font-size:12.5px;font-style:italic;
  border:1px dashed var(--line-mid);border-radius:10px;padding:16px;text-align:center;
}
.ideafeed-i .idea-del{position:absolute;top:8px;right:8px;z-index:3}

/* A hook: the frame it was said over, and the words. */
.pv-hook{border-color:var(--line)}
.pv-hook-art{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.pv-hook-art img{width:100%;height:100%;object-fit:cover;display:block}
.pv-hook-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:#f00;box-shadow:0 3px 16px #0007;
}
.pv-hook-body{padding:13px 15px 14px}
.pv-hook-k{
  font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-faint);display:block;margin-bottom:6px;
}
.pv-hook-t{
  margin:0;font-size:16px;line-height:1.45;font-weight:500;color:var(--text);
  text-wrap:pretty;
}
/* The LinkedIn deck keeps LinkedIn's square corners on its slide. */
.pv-lic-slide{border-top:1px solid #0000001a;border-bottom:1px solid #0000001a}

/* LinkedIn's mark on a LinkedIn deck: a filled tile, not an outline camera. */
.pv-sl-foot .ig.li{fill:currentColor;stroke:none}
.pv-sl-foot .ig.li .glyph{fill:var(--sl-bg,#fff)}

/* In the feed a slide is something you glance at, so it is capped rather
   than given its full square — six of those down a column is a scroll, not
   a shelf. Full size on the example's own page, where you went to look. */
.ideafeed-pv .pv-slide{max-height:340px}
.ideafeed-pv .pv-hook-art{max-height:220px}

/* Which part of the video a note was about, beside who wrote it. */
.cmt-about{
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-deep);background:var(--accent-wash);
  border-radius:999px;padding:2px 7px;white-space:nowrap;
}
/* Three buttons in this one, so it needs the room to breathe. */
.modal-foot .btn + .btn{margin-left:0}

/* ---------- emailing the team ---------- */
.mailform{display:flex;flex-direction:column;gap:16px;max-width:720px;margin-top:18px}
.mailto{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);padding:13px 14px}
.mailto-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mailto-acts{margin-left:auto;display:flex;gap:6px}
.mailto .chips{gap:6px}
/* Somebody with no address is shown rather than hidden: "why is Najm not on
   this list" is a worse question than seeing why. */
.chip.nomail{opacity:.55;cursor:default;border-style:dashed}
.chip-x{font-style:normal;font-size:10px;color:var(--text-faint);margin-left:6px}
.mailto .obfoot{margin:9px 0 0}
.mailsend{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mailsend .obfoot{margin:0}
.mailresult{margin-bottom:4px}
.mailresult b{font-weight:600}

/* ---------- the dashboard ----------
   The numbers take the page; the live rail takes a fifth of it down the
   right, because it is there to be glanced at rather than read.

   Every tile carries the colour of the thing it counts and the shape of the
   last two months underneath. A page of identical white boxes tells you the
   numbers exist; it does not tell you which are yours to worry about, and
   that was the whole complaint. */
/* The rail is read at a glance but the lines are "Changes asked for" and a
   name, which wrapped onto three lines at a fifth of the page. A fixed 320
   fits them on one and stops the numbers losing room as the window grows. */
.dashwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media (max-width:1100px){.dashwrap{grid-template-columns:minmax(0,1fr)}}
.dashmain{min-width:0}
.dashacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px}

/* One hue per thing counted, so a tile is recognisable before it is read. */
[data-tone]{--tone:var(--accent);--tone-wash:var(--accent-wash)}
[data-tone="ccm"]{--tone:#E8542F;--tone-wash:#FDF0EC}
[data-tone="avc"]{--tone:#C8A21B;--tone-wash:#FBF6E4}
[data-tone="ccz"]{--tone:#7B4BD8;--tone-wash:#F3EEFD}
[data-tone="ig"]{--tone:#D62976;--tone-wash:#FDEDF4}
[data-tone="li"]{--tone:#0A66C2;--tone-wash:#E9F1FA}
[data-tone="tw"]{--tone:#111;--tone-wash:#F0F0F0}
[data-tone="yt"]{--tone:#E62117;--tone-wash:#FDECEB}
@media (prefers-color-scheme:dark){
  [data-tone="ccm"]{--tone-wash:#2A1610}[data-tone="avc"]{--tone-wash:#241F0B}
  [data-tone="ccz"]{--tone-wash:#1D1430}[data-tone="ig"]{--tone-wash:#2A0F1C}
  [data-tone="li"]{--tone-wash:#0C1B2B}[data-tone="tw"]{--tone:#eee;--tone-wash:#1A1A1A}
  [data-tone="yt"]{--tone-wash:#2A0F0D}
}

.dgroup{margin-top:26px}
.dgroup-h{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.dgroup-mark{width:3px;height:15px;border-radius:2px;background:var(--tone);flex:none}
.dgroup-h h3{margin:0;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.dgroup-h .note{font-size:11.5px}

.dtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:11px}
.dtiles.hero{grid-template-columns:repeat(auto-fill,minmax(208px,1fr))}
.dtile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:stretch;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px 0;font:inherit;cursor:pointer;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.dtile:hover{border-color:var(--tone);transform:translateY(-1px);
  box-shadow:0 6px 20px rgb(var(--ink-rgb)/.07)}
.dtile.on{border-color:var(--tone);background:var(--tone-wash)}
/* A bar in the thing's own colour along the top edge. */
.dtile::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tone);opacity:.85}
.dtile-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:5px}
.dtile-k{font-size:11.5px;font-weight:600;color:var(--text-dim);line-height:1.3}
.dtile-k i{font-style:normal;font-weight:400;color:var(--text-faint)}
.dtile-v{
  font-size:30px;line-height:1;font-weight:600;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.dtile.hero .dtile-v{font-size:38px}
.dtile-d{font-size:10.5px;color:var(--text-faint);padding:0 0 11px;margin-top:6px}

/* The change, as a pill rather than a sentence. */
.dpill{
  margin-left:auto;flex:none;font-size:10.5px;font-weight:700;
  border-radius:999px;padding:3px 7px;letter-spacing:-.01em;white-space:nowrap;
}
.dpill.up{color:hsl(158 64% 26%);background:hsl(158 60% 92%)}
.dpill.down{color:var(--bad);background:var(--bad-wash)}
.dpill.flat{color:var(--text-faint);background:var(--raised)}
@media (prefers-color-scheme:dark){.dpill.up{color:hsl(158 60% 70%);background:hsl(158 40% 14%)}}

/* The last two months, under the number. */
.dspark{display:block;width:100%;height:34px;margin:9px 0 0;overflow:visible}
.dspark-l{fill:none;stroke:var(--tone);stroke-width:1.8;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.dspark-a{fill:var(--tone);opacity:.1;stroke:none}

/* The chart */
.dchart{
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:15px 17px 13px;margin-bottom:8px;
}
.dchart-h{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.dchart-h h3{margin:0;font-size:16px}
.dchart-tabs{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.dchart-sum{display:flex;align-items:baseline;gap:10px;margin:8px 0 4px}
.dchart-now{font-size:34px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.dchart-svg{display:block;width:100%;height:190px;overflow:visible}
.dchart-line{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round;stroke-linecap:round}
.dchart-area{fill:var(--accent);opacity:.09;stroke:none}
.dchart-dot{fill:var(--surface);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.dchart-x{display:flex;justify-content:space-between;font-size:11px;color:var(--text-faint);margin-top:2px}
/* ---------- the communities ----------
   Their own panels, in their own colours. They were two more rows of the
   same grid, which made "how is AVC doing" a question you answered by
   reading labels to work out which half you were looking at. */
.dcomms-h{margin-top:30px}
.dcomms{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.dcomm{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--surface);
}
.dcomm-h{
  display:flex;align-items:center;gap:11px;padding:13px 15px;
  background:var(--tone-wash);border-bottom:1px solid var(--line);
}
/* The community's own square, the way it looks in a Skool sidebar. */
.dcomm-mark{
  width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--tone);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
[data-tone="avc"] .dcomm-mark{background:#111;color:#F5D90A}
.dcomm-id{display:flex;flex-direction:column;min-width:0;gap:1px}
.dcomm-id b{font-size:14.5px;font-weight:600;line-height:1.2}
.dcomm-id i{font-style:normal;font-size:11.5px;color:var(--text-dim)}
.dcomm-go{
  margin-left:auto;flex:none;font-size:11px;color:var(--text-faint);
  text-decoration:none;white-space:nowrap;
}
.dcomm-go:hover:not(.dim){color:var(--tone);text-decoration:underline}
.dcomm-body{padding:13px 14px 14px}
.dcomm .dtiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
.dcomm .dtile{border-radius:11px;padding:11px 12px 0}
.dcomm .dtile-v{font-size:23px}
/* Members is the number the room is judged on. */
.dcomm .dtile.big{grid-column:span 2}
.dcomm .dtile.big .dtile-v{font-size:32px}

.dsheet{margin-top:30px}

/* The live rail.
   Full height and scrolling inside itself, because it is the one part of
   this page that is still moving and a feed that stops halfway down the
   screen does not read as one. */
.dashmail{
  border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:12px 4px 4px 13px;position:sticky;top:14px;
  height:calc(100vh - 150px);min-height:320px;
  display:flex;flex-direction:column;overflow:hidden;
}
.mrail-h{display:flex;align-items:center;gap:8px;padding-right:9px;margin-bottom:10px;flex:none}
.mrail-h h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
.mrail-live{
  display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:hsl(158 64% 30%);
  background:hsl(158 60% 93%);border-radius:999px;padding:3px 8px 3px 6px;
}
@media (prefers-color-scheme:dark){.mrail-live{color:hsl(158 60% 70%);background:hsl(158 40% 14%)}}
.mrail-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
  animation:mpulse 1.8s ease-in-out infinite}
@keyframes mpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.mrail-n{margin-left:auto;font-size:10.5px;color:var(--text-faint);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.mrail-dot{animation:none}}

.mrail{
  list-style:none;margin:0;padding:0 9px 8px 0;flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;
}
/* A line per email: a coloured dot for what it was, what it was, when, and
   who to. The dot is what makes a column of text scan as activity. */
.mrow{
  /* Two columns: what it was, and when. The name goes underneath both,
     starting at the left edge — spanning it from the second column put it
     under the timestamp, hanging off the right. */
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:1px 8px;padding:8px 8px 8px 18px;border-radius:9px;
  font-size:12px;line-height:1.35;
}
.mrow:hover{background:var(--raised)}
.mrow-dot{
  position:absolute;left:6px;top:12px;width:6px;height:6px;border-radius:50%;
  background:var(--k,var(--accent));
}
.mrow[data-kind="feedback"]{--k:#0A66C2}
.mrow[data-kind="changes"]{--k:#D98E00}
.mrow[data-kind="broadcast"]{--k:hsl(158 60% 38%)}
.mrow[data-kind="application"]{--k:#7B4BD8}
.mrow[data-kind="chase"]{--k:#E8542F}
.mrow.bad{--k:var(--bad)}
.mrow-k{font-weight:600;color:var(--text)}
.mrow-t{color:var(--text-faint);font-size:10.5px;text-align:right;white-space:nowrap}
.mrow-w{grid-column:1/-1;color:var(--text-dim);font-size:11.5px}
.mrow-x{color:var(--bad);font-weight:600}
.mrow.bad .mrow-k{color:var(--bad)}
/* New since the last poll: lit, then it settles. */
.mrow.fresh{animation:mland .55s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i,0)*28ms)}
@keyframes mland{
  from{opacity:0;transform:translateY(-6px);background:var(--accent-wash)}
  60%{opacity:1;background:var(--accent-wash)}
  to{opacity:1;transform:none;background:transparent}
}
@media (prefers-reduced-motion:reduce){.mrow.fresh{animation:none}}
.mrail-empty{color:var(--text-faint);font-size:12px;margin:4px 0}

/* The offer to go and get the words. */
.idea-import{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.idea-import span{flex:1;min-width:0}
.idea-import .btn{flex:none}

/* Sign-in: the second way in, and the note that says a code is coming. */
.loginalt{
  display:block;width:100%;margin-top:10px;padding:8px 4px;
  background:none;border:0;font:inherit;font-size:12.5px;
  color:var(--text-dim);cursor:pointer;text-align:center;
}
.loginalt:hover{color:var(--accent);text-decoration:underline}
.loginnote{
  margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--ok);
  background:var(--ok-wash);border:1px solid var(--ok-dot);
  border-radius:8px;padding:9px 11px;
}
/* Six digits, spaced so they can be read back off the email. */
.codein{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px;letter-spacing:.35em;text-align:center;
}