/* ==================================================================
   Partner Hub — "Hard border" skin
   2px borders, no radius, no shadows, one soft lime accent.

   Both themes are defined here. Everything downstream uses the tokens,
   so nothing below this block ever needs a dark-mode rule of its own.
   Deliberately kept off pure black and pure white: the paper is warm,
   the ink is charcoal, and the accent is a muted citron rather than a
   fluorescent one — easier to sit in front of for an hour.
   ================================================================== */

:root {
  color-scheme: light;

  --paper:      #f4f3ee;   /* page */
  --fill:       #fbfaf7;   /* panels, inputs */
  --fill-soft:  #eae8e0;   /* panel headers, table headers */
  --ink:        #23231f;   /* body text — charcoal, not black */
  --ink-soft:   #63625b;   /* labels, meta */
  --ink-faint:  #8f8e86;   /* placeholders */
  --line:       #33332d;   /* the 2px borders */
  --rule:       #d8d5c9;   /* hairlines inside tables */
  --lime:       #cbe07a;   /* accent */
  --lime-soft:  #e2ecbe;   /* accent, quieter — chips, tags */
  --lime-ink:   #2c3708;   /* text on the accent */
  --danger:     #b3524f;
  --danger-bg:  #f6e6e4;
  --danger-ink: #6d2a28;
  --ok-bg:      #e6eed6;
  --hover:      #f0eee5;   /* table row hover */

  /* The header bar. In light it is the accent; in dark a big block of
     accent would glare, so it becomes a quiet panel instead. */
  --bar:        #cbe07a;
  --bar-ink:    #2c3708;
  --nav-on-bg:  #33332d;
  --nav-on-ink: #cbe07a;

  /* One accent was doing every job at once, so nothing stood out. Each of
     these means one thing and appears nowhere else:
       lime  = needs you        money = currency and the Money section
       plum  = channel identity headings and structure stay neutral. */
  --money:      #b4801f;
  --money-bg:   #f7ecd6;
  --money-ink:  #5c3f06;

  /* The chart line. Lime is the "needs you" colour and far too pale to
     read as a 2px stroke on cream, so the chart gets its own: a muted
     teal that carries in both themes without shouting. */
  --chart:      #3c6b78;

  --bw:     2px;
  --gap:    16px;
  --sans:   ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* One dark palette, applied either by the system setting or by the
   toggle in the header. The two selectors carry identical values. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper:      #15161a;
    --fill:       #1d1f24;
    --fill-soft:  #262930;
    --ink:        #e7e6e0;
    --ink-soft:   #a09f98;
    --ink-faint:  #77766f;
    --line:       #565a63;
    --rule:       #343841;
    --lime:       #9cba55;
    --lime-soft:  #2f3a1c;
    --lime-ink:   #10160a;
    --danger:     #d08a86;
    --danger-bg:  #3a2725;
    --danger-ink: #f0cecb;
    --ok-bg:      #29331b;
    --hover:      #23262c;

    --bar:        #202329;
    --bar-ink:    #e7e6e0;
    --nav-on-bg:  #9cba55;
    --nav-on-ink: #10160a;

    --money:      #e2b45c;
    --money-bg:   #33280f;
    --money-ink:  #f6e3bd;
    --chart:      #74bcd0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:      #15161a;
  --fill:       #1d1f24;
  --fill-soft:  #262930;
  --ink:        #e7e6e0;
  --ink-soft:   #a09f98;
  --ink-faint:  #77766f;
  --line:       #565a63;
  --rule:       #343841;
  --lime:       #9cba55;
  --lime-soft:  #2f3a1c;
  --lime-ink:   #10160a;
  --danger:     #d08a86;
  --danger-bg:  #3a2725;
  --danger-ink: #f0cecb;
  --ok-bg:      #29331b;
  --hover:      #23262c;

  --bar:        #202329;
  --bar-ink:    #e7e6e0;
  --nav-on-bg:  #9cba55;
  --nav-on-ink: #10160a;

  --money:      #e2b45c;
  --money-bg:   #33280f;
  --money-ink:  #f6e3bd;
  --chart:      #74bcd0;
}

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

/* The browser's own [hidden] rule is display:none at the weakest possible
   specificity, so any of our own display rules beats it and the "hidden"
   element stays on screen. Several things here are toggled by setting
   .hidden = true, so this has to win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { background: var(--lime); color: var(--lime-ink); }

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.22; }
h1 { font-size: 27px; letter-spacing: -0.015em; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }

/* ------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------ */

/* Wide enough that the video table stops fighting for room on a laptop,
   while prose blocks inside panels stay readable because they sit in
   columns rather than running the full width. */
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 24px 64px;
}
.wrap-narrow { max-width: 560px; }

/* Paragraph-shaped help text should not stretch to 1360px. */
.panel-body > .hint,
.panel-body > p.sub { max-width: 78ch; }

.stack   { display: flex; flex-direction: column; gap: var(--gap); }
.row     { display: flex; align-items: center; gap: 10px; }
.row-wrap{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* A full-width input inside a wrapping row would claim the whole line and
   push the button below it — let it flex instead. */
.row-wrap > input, .row-wrap > .grow { flex: 1 1 220px; width: auto; }
.spread  { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------------
   APP SHELL
   ------------------------------------------------------------------
   Desktop: a sidebar that never scrolls away + a sticky bar over the
   content. Phone: the sidebar becomes a drawer and a bottom tab bar
   takes over, because a thumb reaches the bottom of a phone and not
   the top.

   Modern bits earning their place:
     100dvh          the viewport unit that accounts for a phone's
                     address bar appearing and disappearing; 100vh
                     leaves a gap under the tab bar on iOS
     env(safe-area)  keeps the tab bar clear of the home indicator
     :has()          the drawer's open state without a JS class on body
     clamp()         page padding that scales instead of stepping
     overscroll-behavior  stops a scroll inside the drawer dragging the
                     page behind it
   ------------------------------------------------------------------ */

body.app {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  min-height: 100dvh;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 14px; background: var(--fill); border: var(--bw) solid var(--line);
}
.skip:focus { left: 8px; top: 8px; }

/* ---- sidebar ---- */
.sidebar {
  position: sticky; top: 0;
  height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--fill-soft);
  border-right: var(--bw) solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.brand:hover { background: transparent; color: var(--ink); }
.brand-mark { width: 20px; height: 20px; flex: none; background: var(--lime); border: var(--bw) solid var(--line); }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sidenav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 10px; }
.sidenav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  border: var(--bw) solid transparent;
}
.sidenav a:hover { background: var(--hover); color: var(--ink); }
.sidenav a[aria-current="page"] { background: var(--nav-on-bg); color: var(--nav-on-ink); font-weight: 700; }
.sidenav a[aria-current="page"] .nav-ico { opacity: 1; }
.nav-ico { width: 19px; height: 19px; flex: none; opacity: .75; }
.sidenav-label {
  margin: 14px 11px 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}

.sidebar-foot { margin-top: auto; padding: 12px 12px 14px; border-top: var(--bw) solid var(--line); }
.whoami { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font-size: 13px; }
.whoami strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoami-role { display: block; font-size: 11px; color: var(--ink-soft); }
.sidebar-actions { display: flex; gap: 6px; }
.sidebar-actions .btn { flex: 1 1 auto; justify-content: center; gap: 6px; }
.sidebar-actions .nav-ico { width: 15px; height: 15px; }

/* ---- the bar over the content ---- */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 0 clamp(14px, 2.4vw, 26px);
  height: 54px;
  background: var(--fill);
  border-bottom: var(--bw) solid var(--line);
}
.appbar-title { font-weight: 700; font-size: 15px; }
.icon-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: var(--bw) solid var(--line); background: var(--fill);
  color: var(--ink); cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; }

.wrap {
  width: 100%; max-width: 1280px;
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 26px) clamp(14px, 2.4vw, 26px) 72px;
}
.wrap-narrow { max-width: 560px; }

/* ---- the drawer scrim, and the bottom bar ---- */
/* Always in the tree. Using [hidden] here meant display:none, which kills
   the transition — so it needed a requestAnimationFrame to kick it, and rAF
   does not fire in a backgrounded tab. The drawer then opened logically
   (focus moved, scroll locked) while staying invisible. Toggling opacity and
   visibility instead needs no frame callback at all. */
.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s ease, visibility 0s linear .24s;
}
.scrim.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .24s ease, visibility 0s;
}
.tabbar { display: none; }

/* ------------------------------------------------------------------
   Phone and small tablet
   ------------------------------------------------------------------ */
@media (max-width: 860px) {
  body.app { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: min(84vw, 300px);
    transform: translateX(-101%);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
    border-right: var(--bw) solid var(--line);
  }
  .sidebar.is-open { transform: none; }

  .icon-btn { display: inline-flex; }

  /* Room for the tab bar, plus the iPhone home indicator. */
  .wrap { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--fill);
    border-top: var(--bw) solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px 7px; min-height: 54px;
    font-size: 10px; font-weight: 600; letter-spacing: .01em;
    color: var(--ink-soft); text-decoration: none;
  }
  .tabbar a .nav-ico { width: 21px; height: 21px; }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a[aria-current="page"] .nav-ico { opacity: 1; }
  .tabbar a:hover { background: var(--hover); color: var(--ink); }
}

@media (min-width: 861px) {
  .scrim { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .scrim { transition: none !important; }
}

/* ------------------------------------------------------------------
   Panels
   ------------------------------------------------------------------ */

.panel {
  background: var(--fill);
  border: var(--bw) solid var(--line);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: var(--bw) solid var(--line);
  background: var(--fill-soft);
}
/* Sentence case at a readable size. Small uppercase is fine for a
   four-character micro-label; it is punishing for a section title you are
   meant to scan down a page. */
.panel-head h2 {
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}
.panel-body { padding: 16px; }
.panel-body + .panel-body { border-top: var(--bw) solid var(--line); }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-head .sub { margin: 5px 0 0; color: var(--ink-soft); font-size: 14px; max-width: 74ch; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: var(--bw) solid var(--line);
  border-radius: 0;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translate(1px, 1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: var(--fill); color: var(--ink); }

.btn-primary { background: var(--lime); color: var(--lime-ink); }
.btn-primary:hover { background: var(--ink); color: var(--lime); }

.btn-danger { color: var(--danger); border-color: var(--danger); }
/* A token, not #fff — white on the dark-mode danger tint was 2.74:1. */
.btn-danger:hover { background: var(--danger); color: var(--paper); }

.btn-sm { padding: 5px 10px; font-size: 12px; letter-spacing: 0; }
.btn-block { width: 100%; }

/* <details> used as a disclosure — the summary is styled as a button, so the
   default triangle has to go in every browser. */
summary { cursor: pointer; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
summary.btn::marker { content: ""; }
details[open] > summary.btn { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------ */

.field { display: block; margin-bottom: 14px; }
.field > .label,
.label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hint { margin: 5px 0 0; font-size: 12px; color: var(--ink-soft); }

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="date"], input[type="month"], input[type="number"],
input[type="search"], input[type="file"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: var(--bw) solid var(--line);
  border-radius: 0;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: none; padding-right: 11px; }

input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--lime);
  outline-offset: 0;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

input[type="color"] {
  width: 46px; height: 38px; padding: 3px;
  border: var(--bw) solid var(--line); background: var(--fill); cursor: pointer;
}
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ink); }

.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 180px; margin-bottom: 14px; }
.field-row > .field.grow { flex: 3 1 280px; }

.check {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border: var(--bw) solid var(--line);
  background: var(--fill);
  font-size: 14px;
  cursor: pointer;
}
.check:hover { background: var(--fill-soft); }
.check input { flex: none; }

/* ------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.grid th {
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--fill-soft);
  border-bottom: var(--bw) solid var(--line);
  white-space: nowrap;
}
table.grid td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.grid tr:last-child td { border-bottom: 0; }
table.grid tbody tr:hover td { background: var(--hover); }
.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------------
   Row temperature
   Something still waiting on a person gets warmth and a hard accent
   edge; something finished cools down — thumbnail desaturated, title
   softened — so the eye slides past it. Deliberately not struck
   through: a line through a title reads as "deleted", not "done".
   ------------------------------------------------------------------ */

table.grid tr.row-open td { background: var(--lime-soft); }
table.grid tr.row-open td:first-child {
  box-shadow: inset 4px 0 0 0 var(--lime);
}
table.grid tr.row-open:hover td { background: var(--lime-soft); }

table.grid tr.row-done .thumb-cell { filter: saturate(0.25); opacity: 0.55; }
table.grid tr.row-done .vtitle     { color: var(--ink-soft); font-weight: 400; }
table.grid tr.row-done .vmeta,
table.grid tr.row-done .tag        { opacity: 0.75; }
table.grid tr.row-done:hover .thumb-cell { filter: none; opacity: 1; }
/* Only lift the dimming; do NOT fight the anchor's own lime hover, which
   sets --lime-ink. Without :not(:hover) the title went 1.76:1 in dark. */
table.grid tr.row-done:hover .vtitle:not(:hover) { color: var(--ink); }

/* ------------------------------------------------------------------
   Chips, badges, swatches
   ------------------------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: var(--bw) solid var(--line);
  background: var(--fill);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}
.chip .pct { font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.chip-me { background: var(--lime); color: var(--lime-ink); border-color: var(--lime-ink); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.tag {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tag-published { border-color: var(--ink-soft); color: var(--ink); background: var(--fill-soft); }
.tag-off { border-color: var(--danger); color: var(--danger); }
.chip-off { opacity: 0.62; border-style: dashed; }
.tag-scheduled { border-color: var(--line); color: var(--ink); background: var(--lime-soft); }
.tag-pending   { border-color: var(--lime-ink); color: var(--lime-ink); background: var(--lime); }
/* Switched to members-only on YouTube — a state of the video, not a problem with it. */
.tag-members   { border-style: dashed; border-color: var(--ink-soft); color: var(--ink); }
:root[data-theme="dark"] .tag-pending { color: var(--lime-ink); }

.swatch {
  width: 12px; height: 12px;
  border: 1px solid var(--ink);
  flex: none;
}
.channel-cell { display: flex; align-items: center; gap: 7px; }

.avatar {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: var(--bw) solid var(--line);
  background: var(--fill-soft);
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  flex: none;
}

/* ------------------------------------------------------------------
   Video rows
   ------------------------------------------------------------------ */

.thumb-cell {
  width: 104px; height: 58px;
  border: var(--bw) solid var(--line);
  background: var(--fill-soft);
  object-fit: cover;
  flex: none;
}
.vtitle { font-weight: 700; text-decoration: none; }
.vtitle:hover { background: var(--lime); }
.vmeta { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }
/* A caption under a figure rather than trailing it on the same line. */
.under { display: block; margin: 2px 0 0; font-size: 11px; color: var(--ink-soft); }

.count-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--ink-soft);
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
}

/* ------------------------------------------------------------------
   Thumbnail gallery
   ------------------------------------------------------------------ */

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.thumb {
  border: var(--bw) solid var(--line);
  background: var(--fill);
  display: flex;
  flex-direction: column;
}
.thumb.is-final { outline: 3px solid var(--lime-ink); outline-offset: 3px; }
.thumb.is-final .thumb-bar { background: var(--lime); color: var(--lime-ink); }
.thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--fill-soft);
  border-bottom: var(--bw) solid var(--line);
}
.thumb-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 8px;
  font-size: 11px; color: var(--ink-soft);
  font-family: var(--mono);
}
.thumb-actions {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.thumb-actions > form { display: flex; flex: 1 1 auto; }
.thumb-actions .btn {
  flex: 1 1 auto;
  border: 0;
  border-right: 1px solid var(--rule);
  padding: 7px 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.thumb-actions > *:last-child .btn,
.thumb-actions > .btn:last-child { border-right: 0; }
/* Second row: the fiddly controls get their own line so nothing is 12px wide. */
.thumb-actions-minor .btn { font-size: 12px; padding: 5px 4px; }
.thumb-actions-minor > form { flex: 1 1 0; }
/* ---- picking thumbnails: the image is the button ---- */
.thumb-pick {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.pick-mark {
  position: absolute; top: 8px; left: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, .35);
  color: var(--lime-ink); font: 700 13px/22px var(--mono); text-align: center;
  opacity: 0; transition: opacity .12s ease;
}
.thumb-pick:hover .pick-mark, .thumb-pick:focus-visible .pick-mark { opacity: 1; }
.thumb.is-picked .pick-mark { opacity: 1; background: var(--lime); border-color: var(--lime-ink); }
.thumb.is-picked { outline: 3px solid var(--ink); outline-offset: 3px; }
/* once anything is picked, the rest fade: they are the ones going */
.thumbs.has-picks .thumb:not(.is-picked) .thumb-img { opacity: .45; filter: saturate(.4); }
.thumb-tools { display: inline-flex; gap: 2px; flex: none; }
.thumb-bar { flex-wrap: wrap; row-gap: 4px; }
.thumb-bar > span:first-child { white-space: nowrap; }
.thumb-tools form { display: inline-flex; margin: 0; }
.thumb-tools .tool {
  display: inline-grid; place-items: center; width: 24px; height: 22px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font-size: 12px; line-height: 1; text-decoration: none; cursor: pointer; padding: 0;
}
.thumb-tools .tool:hover { background: var(--hover); }
.thumb-tools .tool.on { color: #b88a00; }
.thumb-tools .tool-danger:hover { color: var(--danger); border-color: var(--danger); }
.pick-bar {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 12px;
  background: var(--paper); border: var(--bw) solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.pick-count { font-weight: 700; }
.pick-note { flex: 1 1 auto; margin: 0; }
.pick-bar form { margin: 0; }
@media (max-width: 860px) {
  .pick-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- the feed preview: YouTube's own look, whatever the skin ---- */
.feed-wrap {
  margin-top: 16px; padding: 16px; border-radius: 14px;
  background: #0f0f0f; color: #f1f1f1;
  font-family: Roboto, Arial, system-ui, sans-serif; letter-spacing: 0;
}
.feed-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.feed-tabs { display: flex; gap: 8px; }
.feed-tab {
  border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer;
  background: #272727; color: #f1f1f1; font: 500 13px/1.3 Roboto, Arial, sans-serif;
}
.feed-tab.is-on { background: #f1f1f1; color: #0f0f0f; }
.feed-say, .feed-note { color: #aaa; font-size: 12px; }
.feed-note { margin: 16px 0 0; }
.feed { margin: 16px auto 0; display: grid; }
.yt-card { min-width: 0; }
.yt-thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; background: #272727;
}
.yt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yt-len {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 4px; border-radius: 4px;
  background: rgba(0, 0, 0, .8); color: #fff; font: 500 12px/18px Roboto, Arial, sans-serif;
}
.yt-tag {
  position: absolute; left: 6px; top: 6px; min-width: 22px; padding: 1px 6px; border-radius: 999px;
  background: #ffd400; color: #111; font: 700 12px/18px Roboto, Arial, sans-serif; text-align: center;
}
.yt-meta { display: flex; gap: 12px; margin-top: 12px; }
.yt-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 14px;
}
.yt-text { min-width: 0; }
.yt-title {
  margin: 0; color: #f1f1f1; font: 500 16px/22px Roboto, Arial, sans-serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-sub { margin: 4px 0 0; color: #aaa; font: 400 14px/20px Roboto, Arial, sans-serif; }
/* phone: one column, the width of a phone */
.feed-phone { max-width: 390px; gap: 24px; }
.feed-phone .yt-title { font-size: 15px; line-height: 21px; }
/* home: the desktop grid */
.feed-home { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 32px 16px; }
/* up next: the small sidebar size, where most thumbnails fall apart */
.feed-next { max-width: 420px; gap: 8px; }
.feed-next .yt-card { display: grid; grid-template-columns: 168px 1fr; gap: 8px; }
.feed-next .yt-thumb { border-radius: 8px; }
.feed-next .yt-meta { margin-top: 0; }
.feed-next .yt-avatar { display: none; }
.feed-next .yt-title { font-size: 14px; line-height: 20px; }
.feed-next .yt-sub { font-size: 12px; line-height: 18px; }
.feed-next .yt-len { font-size: 11px; line-height: 16px; }

.final-flag {
  padding: 1px 6px;
  background: var(--lime); color: var(--lime-ink);
  border: 1px solid var(--lime-ink);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

.dropzone {
  border: var(--bw) dashed var(--line);
  background: var(--fill-soft);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
}
.dropzone:hover, .dropzone.over { background: var(--lime); color: var(--lime-ink); }
.dropzone:hover .eyebrow, .dropzone.over .eyebrow { color: var(--lime-ink); }
.dropzone p { margin: 0; font-size: 13px; }
.dropzone .eyebrow { margin-bottom: 4px; }

.bar {
  height: 12px;
  border: var(--bw) solid var(--line);
  background: var(--fill);
  overflow: hidden;
}
.bar span { display: block; height: 100%; background: var(--lime); width: 0; }

/* ------------------------------------------------------------------
   Splits editor
   ------------------------------------------------------------------ */

.split-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: var(--bw) solid var(--line);
  background: var(--fill);
}
.split-row + .split-row { border-top: 0; }
.split-row .name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14px; }
.split-row input[type="number"] { width: 88px; text-align: right; font-family: var(--mono); }
.split-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border: var(--bw) solid var(--line);
  border-top: 0;
  background: var(--fill-soft);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.split-total .amount { font-family: var(--mono); font-size: 15px; letter-spacing: 0; }
.split-total.bad { background: var(--danger-bg); color: var(--danger); }
.split-total.good { background: var(--lime); color: var(--lime-ink); }
.split-total.warn { color: var(--danger); }
.split-total .split-note {
  margin-left: auto; margin-right: 14px;
  text-transform: none; letter-spacing: 0; font-weight: 600;
}

/* ------------------------------------------------------------------
   Messages
   ------------------------------------------------------------------ */

.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px;
  border: var(--bw) solid var(--line);
  background: var(--ok-bg);
  font-size: 14px;
  margin-bottom: var(--gap);
}
.flash-err { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-ink); }

.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-soft);
}
.empty h3 { margin-bottom: 6px; color: var(--ink); }
.empty p { margin: 0 0 14px; font-size: 14px; }

.divider { height: var(--bw); background: var(--line); border: 0; margin: 0; }

/* ------------------------------------------------------------------
   Getting-set-up checklist
   ------------------------------------------------------------------ */

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: var(--bw) solid var(--line);
  background: var(--fill);
}
.step + .step { border-top: 0; }
.step-mark {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: var(--bw) solid var(--line);
  background: var(--lime);
  color: var(--lime-ink);
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
}
.step-why { display: block; font-size: 12px; color: var(--ink-soft); }
.step.is-done { background: var(--fill-soft); }
.step.is-done strong { color: var(--ink-soft); font-weight: 400; }
.step.is-done .step-mark { background: var(--fill-soft); color: var(--ink-soft); }
.step.is-done .step-why { display: none; }

/* ------------------------------------------------------------------
   Summary tiles
   ------------------------------------------------------------------ */

/* Flex rather than grid: the last row stretches to fill, so a wrapped row
   never leaves a hole, and the -2px margins collapse neighbouring borders. */
.tiles { display: flex; flex-wrap: wrap; }
.tile {
  flex: 1 1 150px;
  background: var(--fill);
  border: var(--bw) solid var(--line);
  margin: 0 -2px -2px 0;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
a.tile:hover { background: var(--lime); }
/* The label and caption carry their own colours, so they need pulling onto
   the accent too or they vanish against it in dark mode. */
a.tile:hover .k, a.tile:hover .n, a.tile:hover .v { color: var(--lime-ink); }
.tile .k {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tile .v {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 22px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tile .n { display: block; font-size: 11px; color: var(--ink-soft); }
.tile-accent { background: var(--lime); color: var(--lime-ink); }
.tile-accent .k, .tile-accent .n, .tile-accent .v { color: var(--lime-ink); }

/* ------------------------------------------------------------------
   Title options
   ------------------------------------------------------------------ */

.opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: var(--bw) solid var(--line);
  background: var(--fill);
}
.opt + .opt { border-top: 0; }
.opt.is-chosen { background: var(--lime); color: var(--lime-ink); }
.opt.is-chosen .len { color: var(--lime-ink); border-color: var(--lime-ink); }
.opt .txt { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.opt .by { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0.03em; }
.opt.is-chosen .by { color: var(--lime-ink); }
.opt .len {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  border: 1px solid var(--rule); padding: 1px 5px; white-space: nowrap;
}
.opt .len.over { border-color: var(--danger); color: var(--danger); }
.opt-actions { display: flex; gap: 6px; flex: none; }

/* Compact variant, for the list tucked under the Title field. */
.opt-mini { padding: 7px 10px; }
.opt-mini .txt { font-size: 14px; font-weight: 400; }
.opt-mini.is-chosen .txt { font-weight: 700; }

.titleopts { margin: -6px 0 14px; }
.titleopts-body { margin-top: 8px; }
.titleopts .toggle-count {
  font-family: var(--mono);
  font-size: 11px;
  padding: 0 5px;
  border: 1px solid currentColor;
  margin-left: 2px;
}

/* Status dropdown sitting in a table cell — quiet until you touch it.
   Do NOT put the .tag-* classes on this: they set a dark text colour meant
   for a lime pill, which is unreadable on the select's own background.
   The status tint lives entirely in these rules instead. */
.status-pick {
  width: auto;
  min-width: 132px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-width: 1px;
  border-color: var(--ink-soft);
  background: var(--fill-soft);
  color: var(--ink);
}
.status-pick:hover { background: var(--fill); }

/* Only the one that needs chasing gets the accent. */
.status-pick[data-status="pending"] {
  background: var(--lime);
  color: var(--lime-ink);
  border-color: var(--lime-ink);
}
.status-pick[data-status="scheduled"] { background: var(--lime-soft); }
.status-pick[data-status="idea"],
.status-pick[data-status="scripting"],
.status-pick[data-status="editing"] { color: var(--ink-soft); }

/* ------------------------------------------------------------------
   Card grid — channels, and anything else that comes in equal units
   ------------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--gap);
  /* NOT stretch. These cards contain an expandable Edit form, and stretching
     them meant opening one card inflated every card in the row — the others
     went tall and hollow, with their footer marooned at the bottom. Sizing
     each to its own content is worth more than a tidy bottom edge. */
  align-items: start;
}
.cards > .panel { display: flex; flex-direction: column; }

/* In a card the title and its buttons stack, so one long channel name
   cannot push the buttons onto a second line while its neighbour keeps
   them inline — that is what made the row look ragged. */
.cards .panel-head {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.cards .panel-head .row-wrap { gap: 8px; }

/* Three stat tiles across a card, rather than two and an orphan. */
.cards .tile { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
.cards .tile .v { font-size: 17px; }
.cards .tile .k { font-size: 9px; letter-spacing: 0.1em; }

/* ------------------------------------------------------------------
   Inline split editor, opened from a row in the video list
   ------------------------------------------------------------------ */

table.grid tr.split-row-editor td {
  background: var(--fill-soft);
  border-bottom: var(--bw) solid var(--line);
  padding: 14px 12px;
}
.split-inline-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.split-inline-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: var(--bw) solid var(--line);
  background: var(--fill);
}
.split-inline-cell .nm { font-size: 13px; font-weight: 700; white-space: nowrap; }
/* input[type="number"] in the base rules is width:100% and outranks a bare
   class, so this has to name the element too or the box stretches. */
.split-inline-cell input.pct-inline {
  width: 74px;
  text-align: right;
  font-family: var(--mono);
  padding: 5px 7px;
}
.split-inline-total {
  font-family: var(--mono);
  font-weight: 700;
  padding: 5px 9px;
  border: var(--bw) solid var(--line);
  background: var(--fill);
}
.split-inline-total.good { background: var(--lime); color: var(--lime-ink); }
.split-inline-total.bad  { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* ------------------------------------------------------------------
   Meter — the little bar under a channel or person name
   ------------------------------------------------------------------ */

.meter {
  height: 6px;
  margin-top: 5px;
  border: 1px solid var(--line);
  background: var(--fill);
  max-width: 260px;
}
.meter span { display: block; height: 100%; background: var(--lime); }

.linkline {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border: var(--bw) solid var(--line);
  background: var(--fill);
  font-size: 13px;
  word-break: break-all;
}
.linkline + .linkline { border-top: 0; }
.linkline .k {
  flex: none; width: 78px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ------------------------------------------------------------------
   Channel tabs — the strip above the video list
   ------------------------------------------------------------------ */

.chtabs {
  display: flex;
  flex-wrap: wrap;
  /* Sit flush on the panel below: cancel the stack gap, then overlap the
     shared border so the active tab reads as one shape with the panel. */
  margin-bottom: calc(-1 * var(--gap) - 2px);
}
.chtab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: var(--bw) solid var(--line);
  margin: 0 -2px -2px 0;
  background: var(--fill-soft);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.chtab:hover { background: var(--hover); color: var(--ink); }
button.chtab { font-family: inherit; cursor: pointer; }
.chtab[aria-current="page"] {
  background: var(--fill);
  color: var(--ink);
  border-bottom-color: var(--fill);
  position: relative;
  z-index: 1;
}
.chtab .n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  padding: 0 5px;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
}
.chtab[aria-current="page"] .n { border-color: var(--line); }
.chtab .waiting {
  font-family: var(--mono);
  font-size: 11px;
  padding: 0 5px;
  background: var(--lime);
  color: var(--lime-ink);
  border: 1px solid var(--lime-ink);
}

.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
}
.filters .field { margin-bottom: 0; flex: 1 1 150px; }
.filters .field-search { flex: 2 1 220px; }

/* ------------------------------------------------------------------
   Login
   ------------------------------------------------------------------ */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 20px;
}
.login-card { width: 100%; max-width: 380px; }
.login-mark {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--bar);
  border-bottom: var(--bw) solid var(--line);
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bar-ink);
}

/* ------------------------------------------------------------------
   Mobile — tables become stacked cards
   ------------------------------------------------------------------ */

@media (max-width: 720px) {


  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid thead { display: none; }
  /* As cards, a channel someone is not on is just a dash on its own line. */
  table.grid.ledger td.is-empty { display: none; }
  table.grid tr {
    border: var(--bw) solid var(--line);
    background: var(--fill);
    margin-bottom: 12px;
  }
  table.grid tr:last-child { margin-bottom: 0; }
  table.grid td {
    border-bottom: 1px solid var(--rule);
    padding: 9px 12px;
  }
  table.grid td:last-child { border-bottom: 0; }
  table.grid td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  table.grid td.num { text-align: left; }
  table.grid tbody tr:hover td { background: transparent; }

  /* The card equivalent of the row temperature above. */
  table.grid tr.row-open { border-color: var(--lime-ink); }
  table.grid tr.row-open td:first-child { box-shadow: none; }
  table.grid tr.row-open td { background: var(--lime-soft); }
  table.grid tr.row-done { opacity: 0.72; }
  table.grid tr.row-done:hover { opacity: 1; }

  .thumb-cell { width: 170px; max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .thumbs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media print {
  .sidebar, .appbar, .tabbar, .scrim, .btn, .filters { display: none !important; }
  body.app { display: block; }
  /* Force the light palette: printing in dark mode was white on white. */
  :root, :root[data-theme="dark"] {
    --paper: #ffffff; --fill: #ffffff; --fill-soft: #f2f2ee;
    --ink: #000000; --ink-soft: #444444; --line: #000000; --rule: #bbbbbb;
    --lime: #e8f3c0; --lime-soft: #f2f7de; --lime-ink: #1e2a00;
  }
  body { background: #fff; color: #000; }
  .panel, .tile, table.grid tr { break-inside: avoid; }
}


/* ==================================================================
   VISUAL HIERARCHY
   The skin was uniform to a fault: every panel, heading and number
   looked the same, so nothing told you where to look. These rules add
   structure without touching the hard-border identity.
   ================================================================== */

/* ---- the page title carries the page ---------------------------- */
.page-head {
  align-items: flex-start;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: var(--bw) solid var(--line);
}
.page-head h1 { display: flex; align-items: center; gap: 10px; }

/* ---- a panel now has a visible head, body and rhythm ------------- */
.panel-head {
  padding: 13px 16px;
  gap: 14px;
}
.panel-head .eyebrow,
.panel-head .count-badge { flex: none; }

/* A panel that is the page's main event gets a heavier top edge, so a
   long stack reads as "this, then supporting detail". */
.panel-lead { border-top-width: 5px; }

/* ---- channel colour becomes real identity, not a 12px dot -------- */
.swatch { width: 13px; height: 13px; border-width: 2px; }
.channel-cell { gap: 8px; font-weight: 700; }

/* Rows and cards carry their channel's colour on the left edge, set
   from the template as --ch. At a glance you can tell three channels
   apart without reading a word. */
table.grid tr[style*="--ch"] td:first-child { box-shadow: inset 5px 0 0 0 var(--ch); }
.panel[style*="--ch"] { border-left: 5px solid var(--ch); }

/* ---- money looks like money -------------------------------------- */
.money-figure { font-family: var(--mono); font-weight: 700; color: var(--money-ink); }
.tile-money { background: var(--money-bg); }
.tile-money .k, .tile-money .n { color: var(--money-ink); opacity: 0.8; }
.tile-money .v { color: var(--money-ink); }

/* ---- views per day ------------------------------------------------ */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }

.ch-grid  { stroke: var(--line); stroke-width: 1; opacity: 0.45; }
.ch-line  { fill: none; stroke: var(--chart); stroke-width: 2;
            stroke-linejoin: round; stroke-linecap: round; }
.ch-area  { fill: var(--chart); opacity: 0.12; stroke: none; }
.ch-guide { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-dot   { fill: var(--fill); stroke: var(--chart); stroke-width: 2.5; }
.ch-dot-solid { fill: var(--chart); }

.ch-ylab, .ch-xlab {
  font-family: var(--mono); font-size: 11px; fill: var(--ink-soft);
}

/* The hover figure sits above the chart rather than floating over it —
   a tooltip that follows the cursor is unreadable on a phone, where
   there is no cursor at all. */
.chart-readout {
  margin: 0 0 8px; min-height: 20px;
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink);
}

#chart-tabs .chtab { display: inline-flex; align-items: center; gap: 7px; }

/* ---- estimated figures ------------------------------------------- */
/* An estimate has to be legible as an estimate from across the room, or
   somebody will read it as what they are being paid. Dotted underline,
   because a solid one reads as a link and a colour alone does not survive
   a screenshot sent to somebody's phone. */
.est,
.est strong { color: var(--money-ink); }
.est strong { border-bottom: 2px dotted var(--money); padding-bottom: 1px; }
.est .under { color: var(--money-ink); opacity: 0.85; font-style: italic; }

/* ---- Owed for the month: people down the side, channels across ---- */
table.grid.ledger th.num { text-align: right; }
table.grid.ledger td:first-child { min-width: 150px; }
table.grid.ledger td:first-child .row { flex-wrap: nowrap; }
table.grid.ledger td:first-child strong { white-space: nowrap; }
table.grid.ledger th .under { text-transform: none; letter-spacing: 0; font-weight: 500; }
table.grid.ledger th .channel-cell { justify-content: flex-end; }
table.grid.ledger td.num strong { white-space: nowrap; }
table.grid.ledger .col-sum { background: var(--fill-soft); }
table.grid.ledger tr.ledger-costs td { color: var(--ink-soft); }
table.grid.ledger tr.ledger-total td { border-top: var(--bw) solid var(--line); }
table.grid.ledger tbody tr.ledger-costs:hover td,
table.grid.ledger tbody tr.ledger-total:hover td { background: transparent; }
table.grid.ledger tbody tr.ledger-costs:hover td.col-sum,
table.grid.ledger tbody tr.ledger-total:hover td.col-sum { background: var(--fill-soft); }

/* ---- a channel's working: rate, costs, and what each person got ---- */
table.calc { width: 100%; border-collapse: collapse; font-size: 14px; }
table.calc td { padding: 7px 0; vertical-align: top; border-bottom: 1px solid var(--rule); }
table.calc td.num { padding-left: 16px; white-space: nowrap; }
table.calc .calc-why { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
table.calc tr.calc-minus td.num { color: var(--danger); }
table.calc tr.calc-total td { border-top: var(--bw) solid var(--line); font-weight: 700; }
table.calc tr.calc-person td:first-child { padding-left: 14px; }
table.calc tr.calc-me td { background: var(--lime-soft); }
table.calc tr:last-child td { border-bottom: 0; }

.badge-est {
  border-color: var(--money);
  background: var(--money-bg);
  color: var(--money-ink);
}

/* The Money tab is its own place, so it is coloured as one. */
.sidenav a[href="money.php"][aria-current="page"],
.tabbar a[href="money.php"][aria-current="page"] {
  background: var(--money); color: var(--money-ink);
}

/* ---- numbers you are meant to compare ---------------------------- */
.tile .v { font-size: 26px; letter-spacing: -0.02em; }
.tile .k { font-size: 10px; }
.tile { padding: 13px 15px; }

/* ---- tables: give the eye a line to follow ----------------------- */
table.grid td { padding: 12px; }
table.grid th { padding: 10px 12px; }
.vtitle { font-size: 15px; line-height: 1.35; }

/* ---- quieter chrome, louder content ------------------------------ */
.eyebrow { font-size: 10px; }
.count-badge { font-size: 11px; padding: 2px 7px; }

/* ---- one primary action per screen ------------------------------- */
.page-head .btn-primary { padding: 11px 18px; font-size: 14px; }

/* The one thing to do next, at the top of Money. */
.next-step { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.next-step strong { display: block; font-size: 15px; }
.next-step .step-why { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

/* ---- the Guide page ----------------------------------------------- */
.docs-body p:first-child { margin-top: 0; }
.docs-body p:last-child  { margin-bottom: 0; }
.docs-body p, .docs-body ul, .docs-body ol { max-width: 78ch; }
.docs-body ul, .docs-body ol { padding-left: 20px; }
.docs-body li { margin: 4px 0; }
.docs-body table.grid { margin: 14px 0; }
.steps-plain { counter-reset: none; }
.steps-plain li { margin: 10px 0; }
.codeblock {
  margin: 12px 0; padding: 12px 14px;
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  background: var(--fill-soft);
  border: var(--bw) solid var(--line);
  white-space: pre-wrap; word-break: break-word;
  max-width: 78ch;
}
.docs-body code {
  font-family: var(--mono); font-size: 13px;
  background: var(--fill-soft); padding: 1px 5px;
  border: var(--bw) solid var(--line);
}
[data-skin="liquid"] .codeblock, [data-skin="liquid"] .docs-body code { border-radius: var(--radius-sm); }
[data-skin="studio"] .codeblock, [data-skin="studio"] .docs-body code { border-radius: var(--radius-sm); }

/* ==================================================================
   SKIN: LIQUID
   ==================================================================
   Everything here is scoped to [data-skin="liquid"]. The flat skin
   above shares no rule with it and cannot be affected.

   THREE DECISIONS, AND WHY
   ------------------------
   1. BLUR ONLY WHERE SOMETHING MOVES BEHIND IT.
      backdrop-filter is the most expensive thing on this page, and it
      only buys anything when the backdrop actually changes. The page
      background here is a FIXED gradient, so blurring it produces the
      same gradient — a blurred smooth gradient is that gradient. Only
      the sticky top bar has real content scrolling under it, so it is
      the only element that blurs. One blurred surface per page, not
      the fifteen a panel-by-panel approach would give you.

   2. BLUR RADIUS 14px, NOT 30.
      Past roughly 16px the eye stops telling the difference while the
      compositor keeps paying. 14px with a saturation lift reads as
      thicker glass than 30px without one.

   3. THE TRANSLUCENCY IS PROVEN LEGIBLE, NOT HOPED TO BE.
      Glass makes contrast VARIABLE — text that passes over one part of
      a background fails over another. That is the standing objection to
      this whole style, and it is only answerable if you control the
      backdrop. This one is controlled: the page gradient is fixed and
      its lightness range is known, so the worst case is computable.
      Composited over the darkest point of the gradient, body text lands
      at 15.5:1 and muted text at 6.5:1 — AAA and AA respectively, at
      every point of the background rather than on average.

   Honest about what is missing: real Liquid Glass refracts, bending
   what is behind it. On the web that needs an SVG feDisplacementMap fed
   into backdrop-filter, which only Chrome supports and which rebuilds
   the whole displacement map on resize. Refraction is not worth a
   Chrome-only, jank-on-resize dependency in a tool used on a phone, so
   this does the other four of the five optical ingredients — blur,
   saturation, specular rim, depth — and skips the one that costs more
   than it returns.
   ================================================================== */

:root[data-skin="liquid"] {
  color-scheme: light;

  --radius:    18px;
  --radius-sm: 12px;
  --bw:        1px;

  /* Surfaces. --glass is translucent; --solid is the same colour with no
     transparency, for the places translucency would hurt. */
  --paper:      #edeff3;
  --glass:      rgba(255, 255, 255, 0.44);
  --glass-2:    rgba(255, 255, 255, 0.26);
  --solid:      #ffffff;
  /* The gloss: a sheen falling off over the top 45% of a surface, which is
     what makes glass read as glass rather than as tinted paper. Layered as
     a background-image above the tint, so it costs nothing. */
  --sheen:      linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
  --fill:       var(--glass);
  --fill-soft:  var(--glass-2);

  /* The lit edge. Light comes from above, so the top rim is bright and
     the bottom rim is a faint shadow — that pair is what stops a
     translucent box reading as flat tinted paper. */
  --rim-hi:     rgba(255, 255, 255, 0.95);
  --rim-lo:     rgba(12, 16, 26, 0.07);
  --line:       rgba(12, 16, 26, 0.11);
  --rule:       rgba(12, 16, 26, 0.07);

  --ink:        #0b0e14;
  --ink-soft:   #495064;
  --ink-faint:  #838a9c;

  --accent:     #0063d1;
  --accent-2:   #5a4bd8;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 99, 209, 0.10);

  --lime:       #dbe7fb;
  --lime-soft:  rgba(0, 99, 209, 0.10);
  --lime-ink:   #003a80;
  --danger:     #d92c20;
  --danger-bg:  rgba(217, 44, 32, 0.10);
  --danger-ink: #8c1610;
  --ok-bg:      rgba(24, 163, 126, 0.12);
  --hover:      rgba(0, 99, 209, 0.06);

  --bar:        rgba(255, 255, 255, 0.55);
  --bar-ink:    #0c1018;
  --nav-on-bg:  var(--accent);
  --nav-on-ink: #ffffff;

  --money:      #b26a00;
  --money-bg:   rgba(255, 159, 10, 0.14);
  --money-ink:  #6b3f00;
  --chart:      #0063d1;

  --shadow:     0 1px 2px rgba(16,22,40,.05), 0 6px 20px rgba(16,22,40,.07);
  --shadow-lg:  0 2px 6px rgba(16,22,40,.07), 0 16px 40px rgba(16,22,40,.12);
  --ease:       cubic-bezier(.22, 1, .36, 1);
  --blur:       blur(14px) saturate(180%);
}

/* The dark palette, written once and applied by either selector. */
@media (prefers-color-scheme: dark) {
  :root[data-skin="liquid"]:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:      #0e1014;
    --glass:      rgba(58, 65, 80, 0.44);
    --glass-2:    rgba(255, 255, 255, 0.045);
    --solid:      #1b1f27;
    --sheen:      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 45%);
    --rim-hi:     rgba(255, 255, 255, 0.16);
    --rim-lo:     rgba(0, 0, 0, 0.30);
    --line:       rgba(255, 255, 255, 0.12);
    --rule:       rgba(255, 255, 255, 0.08);
    --ink:        #f2f5fa;
    --ink-soft:   #a8b0c4;
    --ink-faint:  #737b91;
    --accent:     #4b93ff;
    --accent-2:   #9a7cff;
    --accent-ink: #06101f;
    --accent-soft: rgba(75, 147, 255, 0.16);
    --lime:       #16305a;
    --lime-soft:  rgba(75, 147, 255, 0.16);
    --lime-ink:   #cfe2ff;
    --danger:     #ff6b5e;
    --danger-bg:  rgba(255, 107, 94, 0.16);
    --danger-ink: #ffc4bd;
    --ok-bg:      rgba(48, 209, 88, 0.16);
    --hover:      rgba(255, 255, 255, 0.05);
    --bar:        rgba(20, 24, 34, 0.62);
    --bar-ink:    #f2f5fa;
    --nav-on-ink: #06101f;
    --money:      #ffb340;
    --money-bg:   rgba(255, 179, 64, 0.16);
    --money-ink:  #ffdca8;
    --chart:      #4b93ff;
    --shadow:     0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.4);
    --shadow-lg:  0 2px 6px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.5);
  }
}
:root[data-skin="liquid"][data-theme="dark"] {
  color-scheme: dark;
  --paper:      #0e1014;
  --glass:      rgba(58, 65, 80, 0.44);
  --glass-2:    rgba(255, 255, 255, 0.045);
  --solid:      #1b1f27;
  --sheen:      linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,0) 45%);
  --rim-hi:     rgba(255, 255, 255, 0.16);
  --rim-lo:     rgba(0, 0, 0, 0.30);
  --line:       rgba(255, 255, 255, 0.12);
  --rule:       rgba(255, 255, 255, 0.08);
  --ink:        #f2f5fa;
  --ink-soft:   #a8b0c4;
  --ink-faint:  #737b91;
  --accent:     #4b93ff;
  --accent-2:   #9a7cff;
  --accent-ink: #06101f;
  --accent-soft: rgba(75, 147, 255, 0.16);
  --lime:       #16305a;
  --lime-soft:  rgba(75, 147, 255, 0.16);
  --lime-ink:   #cfe2ff;
  --danger:     #ff6b5e;
  --danger-bg:  rgba(255, 107, 94, 0.16);
  --danger-ink: #ffc4bd;
  --ok-bg:      rgba(48, 209, 88, 0.16);
  --hover:      rgba(255, 255, 255, 0.05);
  --bar:        rgba(20, 24, 34, 0.62);
  --bar-ink:    #f2f5fa;
  --nav-on-ink: #06101f;
  --money:      #ffb340;
  --money-bg:   rgba(255, 179, 64, 0.16);
  --money-ink:  #ffdca8;
  --chart:      #4b93ff;
  --shadow:     0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg:  0 2px 6px rgba(0,0,0,.55), 0 16px 40px rgba(0,0,0,.5);
}

/* ---- the lit room the glass sits in -------------------------------
   Fixed, so it never repaints while you scroll — and so its lightness
   range is a known quantity the contrast maths above depends on. */
[data-skin="liquid"] body {
  background:
    radial-gradient(1200px 780px at  -8%  0%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient( 900px 620px at 106% 12%, rgba(196,205,222,.55), transparent 60%),
    radial-gradient(1000px 760px at  50% 108%, rgba(168,180,200,.40), transparent 64%),
    radial-gradient( 800px 560px at  18% 82%, rgba(120,150,220,.10), transparent 62%),
    var(--paper);
  background-attachment: fixed;
}
[data-skin="liquid"][data-theme="dark"] body,
[data-skin="liquid"]:not([data-theme="light"]) body {
  background:
    radial-gradient(1200px 780px at  -8%  0%, rgba(86, 96,118,.55), transparent 62%),
    radial-gradient( 900px 620px at 106% 12%, rgba(52, 60, 78,.65), transparent 60%),
    radial-gradient(1000px 760px at  50% 108%, rgba(40, 48, 64,.60), transparent 64%),
    radial-gradient( 800px 560px at  18% 82%, rgba(70, 96,150,.16), transparent 62%),
    var(--paper);
  background-attachment: fixed;
}

/* ---- the glass surface -------------------------------------------
   No backdrop-filter. The gradient behind is static and smooth, so
   blurring it would return the same pixels for real GPU cost. What
   sells the material is the lit top rim against the shadowed bottom
   one, which is two inset shadows and free. */
[data-skin="liquid"] .panel,
[data-skin="liquid"] .login-card,
[data-skin="liquid"] .tile,
[data-skin="liquid"] .linkline,
[data-skin="liquid"] .dropzone,
[data-skin="liquid"] .titleopts {
  background: var(--sheen), var(--glass);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    inset 0  1px 0 var(--rim-hi),
    inset 0 -1px 0 var(--rim-lo),
    var(--shadow);
}
[data-skin="liquid"] .panel { overflow: hidden; }
[data-skin="liquid"] .panel-head {
  background: var(--glass-2);
  border-bottom: var(--bw) solid var(--line);
}
[data-skin="liquid"] .panel-body + .panel-body { border-top: var(--bw) solid var(--line); }
[data-skin="liquid"] .divider { border: 0; border-top: var(--bw) solid var(--line); }

/* ---- the one element that genuinely needs blur --------------------
   Content scrolls underneath this, so the blur is doing real work.
   sticky rather than fixed: fixed + backdrop-filter is a known cause
   of severe scroll jank in iOS Safari. */
/* Appearance only. Layout — position, z-index, the drawer transform — is
   the shell's job; a skin that sets position here overrides the drawer and
   strands the sidebar in the page flow on a phone. */
[data-skin="liquid"] .appbar {
  background: var(--bar);
  box-shadow: inset 0 -1px 0 var(--rim-lo);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
}
[data-skin="liquid"] .sidebar,
[data-skin="liquid"] .tabbar {
  background: var(--bar);
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
}
[data-skin="liquid"] .brand {
  letter-spacing: .02em; text-transform: none; font-size: 16px;
}
[data-skin="liquid"] .brand-mark {
  border: 0; border-radius: 7px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 8px rgba(0,99,209,.35), inset 0 1px 0 rgba(255,255,255,.45);
}

[data-skin="liquid"] .sidenav { gap: 2px; align-items: center; }
[data-skin="liquid"] .sidenav a,
[data-skin="liquid"] .sidenav button {
  border-left: 0; border-radius: 999px;
  margin: 8px 0; padding: 7px 14px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
[data-skin="liquid"] .sidenav a:hover,
[data-skin="liquid"] .sidenav button:hover { background: var(--hover); color: var(--bar-ink); }
[data-skin="liquid"] .sidenav a[aria-current="page"] {
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: var(--nav-on-ink);
  box-shadow: 0 2px 10px rgba(0,99,209,.30), inset 0 1px 0 rgba(255,255,255,.30);
}
[data-skin="liquid"] .whoami { color: var(--ink-soft); }

/* The flat skin overlaps tiles by -2px so their 2px borders collapse into
   one shared line. Rounded corners and drop shadows cannot overlap like
   that — they clip each other — so here they get a real gap instead. */
[data-skin="liquid"] .tiles { gap: 12px; }
[data-skin="liquid"] .tile  { margin: 0; }
[data-skin="liquid"] .cards { gap: 14px; }

/* ---- controls ----------------------------------------------------- */
[data-skin="liquid"] .btn {
  border-radius: 999px;
  border: var(--bw) solid var(--line);
  background: var(--solid);
  box-shadow: inset 0 1px 0 var(--rim-hi), var(--shadow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease);
}
[data-skin="liquid"] .btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--rim-hi), var(--shadow-lg); }
[data-skin="liquid"] .btn:active { transform: translateY(0) scale(.97); }
/* One focus ring for everything you can reach with a keyboard. The flat
   skin styles focus on inputs only and leaves buttons and links to the
   browser default, which is a thin ring that all but disappears against
   a translucent surface. :focus-visible so it shows for keyboard users
   without ringing every mouse click. */
[data-skin="liquid"] a:focus-visible,
[data-skin="liquid"] button:focus-visible,
[data-skin="liquid"] .btn:focus-visible,
[data-skin="liquid"] .chtab:focus-visible,
[data-skin="liquid"] summary:focus-visible,
[data-skin="liquid"] [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* On the tinted bar the accent ring has little to push against, so the
   ring there is the bar's own ink. */
[data-skin="liquid"] .sidenav a:focus-visible,
[data-skin="liquid"] .sidenav button:focus-visible { outline-color: var(--bar-ink); }
[data-skin="liquid"] .btn-primary {
  border-color: transparent; color: var(--accent-ink);
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 14px rgba(0,99,209,.30);
}
[data-skin="liquid"] .btn-danger {
  border-color: transparent; color: #fff;
  background: linear-gradient(145deg, #e2382a, #c81f4e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px rgba(226,56,42,.28);
}

[data-skin="liquid"] input,
[data-skin="liquid"] select,
[data-skin="liquid"] textarea {
  border-radius: var(--radius-sm);
  border: var(--bw) solid var(--line);
  background: var(--solid);
  box-shadow: inset 0 1px 2px var(--rim-lo);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
[data-skin="liquid"] input:focus,
[data-skin="liquid"] select:focus,
[data-skin="liquid"] textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}

/* ---- pills and small pieces --------------------------------------- */
[data-skin="liquid"] .tag,
[data-skin="liquid"] .chip,
[data-skin="liquid"] .count-badge,
[data-skin="liquid"] .chtab,
[data-skin="liquid"] .eyebrow { border-radius: 999px; }
[data-skin="liquid"] .tag,
[data-skin="liquid"] .chip,
[data-skin="liquid"] .count-badge { border-color: var(--line); }
[data-skin="liquid"] .chtabs { border: 0; gap: 6px; }
[data-skin="liquid"] .chtab {
  border: var(--bw) solid var(--line);
  background: var(--solid);
  transition: background .2s var(--ease), color .2s var(--ease), transform .18s var(--ease);
}
[data-skin="liquid"] .chtab:hover { transform: translateY(-1px); }
[data-skin="liquid"] .chtab[aria-current="page"] {
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 10px rgba(0,99,209,.28);
}
[data-skin="liquid"] .avatar {
  border: 0; border-radius: 999px; color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}
[data-skin="liquid"] .swatch { border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rim-lo); }
[data-skin="liquid"] .meter { border: 0; border-radius: 999px; background: var(--rule); overflow: hidden; }
[data-skin="liquid"] .meter span { border-radius: 999px; }
[data-skin="liquid"] .flash { border-radius: var(--radius-sm); border-color: var(--line); }
[data-skin="liquid"] .thumb img,
[data-skin="liquid"] .thumb-img { border-radius: var(--radius-sm); }
[data-skin="liquid"] .step-mark { border-radius: 999px; }
[data-skin="liquid"] .bar { border-radius: 999px; overflow: hidden; }

/* ---- tables read as rows, not as a grid of boxes ------------------ */
[data-skin="liquid"] table.grid th {
  background: transparent;
  border-bottom: var(--bw) solid var(--line);
  text-transform: none; letter-spacing: .01em;
  color: var(--ink-soft); font-weight: 600;
}
[data-skin="liquid"] table.grid td { border-bottom: var(--bw) solid var(--rule); }
[data-skin="liquid"] table.grid tr:last-child td { border-bottom: 0; }
[data-skin="liquid"] table.grid tbody tr { transition: background .16s var(--ease); }

/* ---- accessibility: both of these are real settings people use ----- */
@media (prefers-reduced-motion: reduce) {
  [data-skin="liquid"] * { transition: none !important; animation: none !important; }
  [data-skin="liquid"] .btn:hover,
  [data-skin="liquid"] .chtab:hover { transform: none; }
}
/* "Reduce transparency" exists on macOS and iOS precisely because glass
   is hard to read for some people. Honour it: go opaque, drop the blur. */
@media (prefers-reduced-transparency: reduce) {
  [data-skin="liquid"] {
    --glass:   #ffffff;
    --glass-2: #f3f5fa;
    --bar:     #ffffff;
  }
  [data-skin="liquid"][data-theme="dark"],
  [data-skin="liquid"]:not([data-theme="light"]) {
    --glass:   #1a1e29;
    --glass-2: #222736;
    --bar:     #12161f;
  }
  [data-skin="liquid"] .appbar,
  [data-skin="liquid"] .sidebar,
  [data-skin="liquid"] .tabbar {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  [data-skin="liquid"] body { background: var(--paper); }
}

/* ---- narrow screens ------------------------------------------------
   The flat skin lets the nav wrap into rows, which is fine when each
   item is a bordered strip. As pills with real padding it wrapped into
   four rows and — being sticky — ate 590px of an 812px phone. So on
   narrow screens the nav becomes one horizontally scrollable row and
   the bar stays a single line high. */
@media (max-width: 720px) {
  [data-skin="liquid"] .appbar { padding: 0 12px; }
  [data-skin="liquid"] .sidenav {
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: var(--bw) solid var(--line);
    padding: 6px 0;
    gap: 6px;
  }
  [data-skin="liquid"] .nav::-webkit-scrollbar { display: none; }
  [data-skin="liquid"] .sidenav a,
  [data-skin="liquid"] .sidenav button {
    flex: 0 0 auto;          /* never stretch, never wrap */
    margin: 0;
    padding: 7px 13px;
    border-right: 0;
    white-space: nowrap;
  }
  /* The divider the flat skin draws between "pages" and "setup" would be
     a 5px slab across a scrolling row; a gap says the same thing. */
  [data-skin="liquid"] .nav .nav-divide {
    border-top: 0; border-left: 0; margin-left: 10px;
    box-shadow: -6px 0 0 -5px var(--line);
  }
  [data-skin="liquid"] .whoami { display: none; }   /* the avatar already says who */
}

/* ==================================================================
   SKIN: STUDIO
   ==================================================================
   Built to sit next to YouTube Studio without a jolt, using Studio's
   own tokens: #0f0f0f ink, #f9f9f9 page, #e5e5e5 hairlines, #065fd4
   for anything you click, red reserved for destructive actions only.
   Dark is Studio's dark: #0f0f0f page, #212121 surfaces, #272727 hover,
   #aaaaaa secondary, #3ea6ff links.

   The whole palette was checked before a line was written — every pair
   above clears AA, the tightest being #606060 secondary text on the
   #f9f9f9 page at 5.97:1.

   Deliberately flat: no glass, no gradients, one hairline border and a
   shadow only where something genuinely floats. The point of this skin
   is that it disappears.

   Roboto is named first and then handed off to the system stack. It is
   the real Studio face and is already present on Android and most
   Windows installs; pulling it from Google Fonts would add a blocking
   network request to every page of a self-hosted tool for a font most
   people already have.
   ================================================================== */

:root[data-skin="studio"] {
  color-scheme: light;

  --radius:     12px;
  --radius-sm:  8px;
  --bw:         1px;

  --paper:      #f9f9f9;
  --fill:       #ffffff;
  --fill-soft:  #f9f9f9;
  --solid:      #ffffff;
  --ink:        #0f0f0f;
  --ink-soft:   #606060;
  --ink-faint:  #909090;
  --line:       #e5e5e5;
  --rule:       #eeeeee;

  --accent:     #065fd4;
  --accent-ink: #ffffff;

  --lime:       #def1ff;      /* "needs you" — Studio uses a blue tint */
  --lime-soft:  #eef6ff;
  --lime-ink:   #04408f;
  --danger:     #cc0000;
  --danger-bg:  #fdeaea;
  --danger-ink: #8f0000;
  --ok-bg:      #e6f4ea;
  --hover:      #f2f2f2;

  --bar:        #ffffff;
  --bar-ink:    #0f0f0f;
  --nav-on-bg:  #f2f2f2;
  --nav-on-ink: #0f0f0f;

  --money:      #8a6d00;
  --money-bg:   #fff8e1;
  --money-ink:  #5c4800;
  --chart:      #065fd4;

  --shadow:     0 1px 2px rgba(0,0,0,.08);
  --shadow-lg:  0 2px 8px rgba(0,0,0,.14);
  --ease:       cubic-bezier(.2, 0, 0, 1);
  --sans:       Roboto, "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root[data-skin="studio"]:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:      #0f0f0f;
    --fill:       #212121;
    --fill-soft:  #181818;
    --solid:      #212121;
    --ink:        #ffffff;
    --ink-soft:   #aaaaaa;
    --ink-faint:  #717171;
    --line:       #303030;
    --rule:       #272727;
    --accent:     #3ea6ff;
    --accent-ink: #0f0f0f;
    --lime:       #263850;
    --lime-soft:  #1e2a3a;
    --lime-ink:   #cfe6ff;
    --danger:     #ff4e45;
    --danger-bg:  #3a1c1a;
    --danger-ink: #ffc9c5;
    --ok-bg:      #17301f;
    --hover:      #272727;
    --bar:        #0f0f0f;
    --bar-ink:    #ffffff;
    --nav-on-bg:  #272727;
    --nav-on-ink: #ffffff;
    --money:      #ffd24d;
    --money-bg:   #33280f;
    --money-ink:  #ffe9a8;
    --chart:      #3ea6ff;
    --shadow:     0 1px 2px rgba(0,0,0,.6);
    --shadow-lg:  0 2px 10px rgba(0,0,0,.7);
  }
}
:root[data-skin="studio"][data-theme="dark"] {
  color-scheme: dark;
  --paper:      #0f0f0f;
  --fill:       #212121;
  --fill-soft:  #181818;
  --solid:      #212121;
  --ink:        #ffffff;
  --ink-soft:   #aaaaaa;
  --ink-faint:  #717171;
  --line:       #303030;
  --rule:       #272727;
  --accent:     #3ea6ff;
  --accent-ink: #0f0f0f;
  --lime:       #263850;
  --lime-soft:  #1e2a3a;
  --lime-ink:   #cfe6ff;
  --danger:     #ff4e45;
  --danger-bg:  #3a1c1a;
  --danger-ink: #ffc9c5;
  --ok-bg:      #17301f;
  --hover:      #272727;
  --bar:        #0f0f0f;
  --bar-ink:    #ffffff;
  --nav-on-bg:  #272727;
  --nav-on-ink: #ffffff;
  --money:      #ffd24d;
  --money-bg:   #33280f;
  --money-ink:  #ffe9a8;
  --chart:      #3ea6ff;
  --shadow:     0 1px 2px rgba(0,0,0,.6);
  --shadow-lg:  0 2px 10px rgba(0,0,0,.7);
}

[data-skin="studio"] body { background: var(--paper); }

/* Surfaces: one hairline, a small radius, no shadow unless it floats. */
[data-skin="studio"] .panel,
[data-skin="studio"] .login-card,
[data-skin="studio"] .tile,
[data-skin="studio"] .linkline,
[data-skin="studio"] .dropzone,
[data-skin="studio"] .titleopts {
  background: var(--fill);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
[data-skin="studio"] .panel { overflow: hidden; }
[data-skin="studio"] .panel-head {
  background: var(--fill);
  border-bottom: var(--bw) solid var(--line);
}
[data-skin="studio"] .panel-body + .panel-body { border-top: var(--bw) solid var(--line); }
[data-skin="studio"] .tiles { gap: 12px; }
[data-skin="studio"] .tile  { margin: 0; }
[data-skin="studio"] .cards { gap: 14px; }
[data-skin="studio"] .divider { border: 0; border-top: var(--bw) solid var(--line); }

/* The masthead: white, one hairline under it, sticky like Studio's. */
/* Appearance only — see the note in the liquid skin. */
[data-skin="studio"] .appbar,
[data-skin="studio"] .sidebar,
[data-skin="studio"] .tabbar { background: var(--bar); }
[data-skin="studio"] .brand {
  text-transform: none; letter-spacing: -.01em; font-size: 16px; font-weight: 500;
}
[data-skin="studio"] .brand-mark {
  border: 0; border-radius: 4px; background: #ff0000;
}
[data-skin="studio"] .sidenav a,
[data-skin="studio"] .sidenav button {
  border-left: 0; border-radius: var(--radius-sm);
  margin: 8px 2px; padding: 7px 12px;
  font-size: 14px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  transition: background .12s var(--ease);
}
[data-skin="studio"] .sidenav a:hover,
[data-skin="studio"] .sidenav button:hover { background: var(--hover); color: var(--bar-ink); }
[data-skin="studio"] .sidenav a[aria-current="page"] {
  background: var(--nav-on-bg); color: var(--nav-on-ink); font-weight: 500;
}

/* Controls: Studio's pill buttons, blue only for the primary action. */
[data-skin="studio"] .btn {
  border-radius: 999px;
  border: var(--bw) solid var(--line);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  box-shadow: none;
  transition: background .12s var(--ease);
}
[data-skin="studio"] .btn:hover { background: var(--hover); }
[data-skin="studio"] .btn-primary {
  background: var(--accent); border-color: transparent; color: var(--accent-ink);
}
[data-skin="studio"] .btn-primary:hover { filter: brightness(1.08); }
[data-skin="studio"] .btn-danger {
  background: transparent; border-color: var(--line); color: var(--danger);
}
[data-skin="studio"] .btn-danger:hover { background: var(--danger-bg); }

[data-skin="studio"] input,
[data-skin="studio"] select,
[data-skin="studio"] textarea {
  border-radius: var(--radius-sm);
  border: var(--bw) solid var(--line);
  background: var(--solid);
  box-shadow: none;
}
[data-skin="studio"] input:focus,
[data-skin="studio"] select:focus,
[data-skin="studio"] textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
[data-skin="studio"] a:focus-visible,
[data-skin="studio"] button:focus-visible,
[data-skin="studio"] .btn:focus-visible,
[data-skin="studio"] .chtab:focus-visible,
[data-skin="studio"] [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Chips, tags, tabs — Studio's rounded rectangles. */
[data-skin="studio"] .tag,
[data-skin="studio"] .chip,
[data-skin="studio"] .count-badge,
[data-skin="studio"] .chtab { border-radius: 999px; border-color: var(--line); }
[data-skin="studio"] .chtabs { border: 0; gap: 8px; }
[data-skin="studio"] .chtab { background: var(--fill-soft); border: var(--bw) solid var(--line); }
[data-skin="studio"] .chtab[aria-current="page"] {
  background: var(--ink); color: var(--paper); border-color: transparent;
}
[data-skin="studio"] .avatar {
  border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
}
[data-skin="studio"] .swatch { border: 0; border-radius: 3px; }
[data-skin="studio"] .meter { border: 0; border-radius: 2px; background: var(--rule); overflow: hidden; }
[data-skin="studio"] .flash { border-radius: var(--radius-sm); border-color: var(--line); }
[data-skin="studio"] .thumb img, [data-skin="studio"] .thumb-img { border-radius: var(--radius-sm); }
[data-skin="studio"] .step-mark { border-radius: 999px; }

/* Tables: Studio's analytics rows — hairline dividers, quiet headers. */
[data-skin="studio"] table.grid th {
  background: transparent;
  border-bottom: var(--bw) solid var(--line);
  text-transform: none; letter-spacing: 0;
  color: var(--ink-soft); font-weight: 500; font-size: 13px;
}
[data-skin="studio"] table.grid td { border-bottom: var(--bw) solid var(--rule); }
[data-skin="studio"] table.grid tr:last-child td { border-bottom: 0; }
[data-skin="studio"] table.grid tbody tr:hover { background: var(--hover); }

@media (max-width: 720px) {
  [data-skin="studio"] .sidenav {
    width: 100%; margin-left: 0; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    border-top: var(--bw) solid var(--line); padding: 4px 0; gap: 4px;
  }
  [data-skin="studio"] .nav::-webkit-scrollbar { display: none; }
  [data-skin="studio"] .sidenav a,
  [data-skin="studio"] .sidenav button { flex: 0 0 auto; margin: 0; white-space: nowrap; border-right: 0; }
  [data-skin="studio"] .whoami { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-skin="studio"] * { transition: none !important; animation: none !important; }
}

/* ==================================================================
   SKIN: BENTO
   ==================================================================
   Dense, modular, monospace. Every number is in a mono face so columns
   line up without being told to, tiles pack into a real grid rather
   than a flex row, and the chrome gets out of the way.

   The dim grey from the mockup (#6f7c8f) measured 4.27:1 on a tile —
   under AA — so it was stepped up to #828fa3 at 4.94:1. A palette that
   looks right and measures wrong is still wrong.
   ================================================================== */

:root[data-skin="bento"] {
  color-scheme: dark;

  --radius:     6px;
  --radius-sm:  5px;
  --bw:         1px;

  --paper:      #0b0e14;
  --fill:       #12161f;
  --fill-soft:  #0e121a;
  --solid:      #161b26;
  --ink:        #dfe6f0;
  --ink-soft:   #828fa3;
  --ink-faint:  #6b788c;
  --line:       #1e2530;
  --rule:       #171d27;

  --accent:     #4ade80;
  --accent-ink: #06210f;

  --lime:       #16301f;
  --lime-soft:  #12261a;
  --lime-ink:   #86efac;
  --danger:     #f87171;
  --danger-bg:  #2a1516;
  --danger-ink: #fecaca;
  --ok-bg:      #12261a;
  --hover:      #161c26;

  --bar:        #0e121a;
  --bar-ink:    #dfe6f0;
  --nav-on-bg:  #16301f;
  --nav-on-ink: #86efac;

  --money:      #fbbf24;
  --money-bg:   #2a2110;
  --money-ink:  #fde08a;
  --chart:      #4ade80;

  --sans:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease:       cubic-bezier(.2, 0, 0, 1);
}

/* The light twin, so the header's light/dark toggle still means something. */
:root[data-skin="bento"][data-theme="light"] {
  color-scheme: light;
  --paper:      #eef1f6;
  --fill:       #ffffff;
  --fill-soft:  #f4f6fa;
  --solid:      #ffffff;
  --ink:        #10141c;
  --ink-soft:   #55607a;
  --ink-faint:  #78829a;
  --line:       #dde2ec;
  --rule:       #e8ecf3;
  --accent:     #0f7a3d;
  --accent-ink: #ffffff;
  --lime:       #dff3e6;
  --lime-soft:  #eaf7ef;
  --lime-ink:   #0b5a2c;
  --danger:     #c62828;
  --danger-bg:  #fdecec;
  --danger-ink: #8c1616;
  --ok-bg:      #e6f5ec;
  --hover:      #f2f5fa;
  --bar:        #ffffff;
  --bar-ink:    #10141c;
  --nav-on-bg:  #dff3e6;
  --nav-on-ink: #0b5a2c;
  --money:      #8a5a00;
  --money-bg:   #fdf3e0;
  --money-ink:  #6b4400;
  --chart:      #0f7a3d;
}

/* Monospace sets wider than a sans at the same size, so 15px mono reads
   noticeably bigger and eats horizontal room — headings were wrapping to
   three lines on a phone. Step the base down; the grid gets its density
   back and nothing else has to change. */
[data-skin="bento"] body { background: var(--paper); font-size: 14px; }
[data-skin="bento"] h1 { font-size: 24px; letter-spacing: -.02em; }
[data-skin="bento"] h2 { font-size: 15px; }
@media (max-width: 560px) {
  [data-skin="bento"] body { font-size: 13px; }
  [data-skin="bento"] h1 { font-size: 21px; }
}
[data-skin="bento"] .sidebar,
[data-skin="bento"] .appbar,
[data-skin="bento"] .tabbar { background: var(--bar); }

[data-skin="bento"] .brand { letter-spacing: .12em; font-size: 13px; }
[data-skin="bento"] .brand-mark { border: 0; border-radius: 3px; background: var(--accent); }
[data-skin="bento"] .appbar-title { letter-spacing: .04em; text-transform: lowercase; }
[data-skin="bento"] .sidenav a { font-size: 13px; letter-spacing: .02em; text-transform: lowercase; }
[data-skin="bento"] .sidenav-label { letter-spacing: .16em; }

/* Surfaces: tight, flat, one hairline. */
[data-skin="bento"] .panel,
[data-skin="bento"] .login-card,
[data-skin="bento"] .tile,
[data-skin="bento"] .linkline,
[data-skin="bento"] .dropzone,
[data-skin="bento"] .titleopts {
  background: var(--fill);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
[data-skin="bento"] .panel { overflow: hidden; }
[data-skin="bento"] .panel-head {
  background: var(--fill-soft);
  border-bottom: var(--bw) solid var(--line);
  padding-top: 9px; padding-bottom: 9px;
}
[data-skin="bento"] .panel-head h2 {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
[data-skin="bento"] .panel-body + .panel-body { border-top: var(--bw) solid var(--line); }

/* The bento grid proper: tiles pack instead of stretching in a row. */
[data-skin="bento"] .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
}
[data-skin="bento"] .tile { margin: 0; padding: 12px 13px; }
[data-skin="bento"] .tile .k {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
[data-skin="bento"] .tile .v { font-size: 26px; letter-spacing: -.02em; font-weight: 700; }
[data-skin="bento"] .tile-accent { background: var(--lime); border-color: var(--nav-on-bg); }
[data-skin="bento"] .cards { gap: 10px; }

/* Controls */
[data-skin="bento"] .btn {
  border-radius: var(--radius-sm);
  border: var(--bw) solid var(--line);
  background: var(--solid);
  font-size: 12px; letter-spacing: .02em;
  box-shadow: none;
  transition: background .12s var(--ease);
}
[data-skin="bento"] .btn:hover { background: var(--hover); }
[data-skin="bento"] .btn-primary {
  background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 700;
}
[data-skin="bento"] .btn-danger { background: transparent; color: var(--danger); border-color: var(--line); }
[data-skin="bento"] input,
[data-skin="bento"] select,
[data-skin="bento"] textarea {
  border-radius: var(--radius-sm);
  border: var(--bw) solid var(--line);
  background: var(--fill-soft);
  font-family: var(--sans);
}
[data-skin="bento"] input:focus,
[data-skin="bento"] select:focus,
[data-skin="bento"] textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
[data-skin="bento"] a:focus-visible,
[data-skin="bento"] button:focus-visible,
[data-skin="bento"] .btn:focus-visible,
[data-skin="bento"] [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Chips and tags stay rectangular here — pills would fight the grid. */
[data-skin="bento"] .tag,
[data-skin="bento"] .chip,
[data-skin="bento"] .count-badge,
[data-skin="bento"] .chtab { border-radius: var(--radius-sm); border-color: var(--line); }
[data-skin="bento"] .chtabs { border: 0; gap: 6px; }
[data-skin="bento"] .chtab { background: var(--fill-soft); border: var(--bw) solid var(--line); }
[data-skin="bento"] .chtab[aria-current="page"] {
  background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700;
}
[data-skin="bento"] .avatar { border: 0; border-radius: 3px; background: var(--accent); color: var(--accent-ink); }
[data-skin="bento"] .swatch { border: 0; border-radius: 2px; }
[data-skin="bento"] .meter { border: 0; border-radius: 2px; background: var(--rule); overflow: hidden; }
[data-skin="bento"] .flash { border-radius: var(--radius-sm); border-color: var(--line); }
[data-skin="bento"] .thumb img, [data-skin="bento"] .thumb-img { border-radius: var(--radius-sm); }

/* Tables: dense rows, mono numerals, no shouting header. */
[data-skin="bento"] table.grid { font-size: 12.5px; }
[data-skin="bento"] table.grid th {
  background: transparent; border-bottom: var(--bw) solid var(--line);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}
[data-skin="bento"] table.grid td { padding: 8px 12px; border-bottom: var(--bw) solid var(--rule); }
[data-skin="bento"] table.grid tr:last-child td { border-bottom: 0; }
[data-skin="bento"] table.grid tbody tr:hover { background: var(--hover); }
[data-skin="bento"] .num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  [data-skin="bento"] * { transition: none !important; animation: none !important; }
}

/* ---- Estimator --------------------------------------------------- */
.est-rows { display: grid; gap: 8px; }
.est-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(9rem, 1fr) 6.5rem minmax(8rem, 2fr) auto auto;
  gap: 8px;
  align-items: center;
}
.est-row > * { min-width: 0; }
.est-mine { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.est-row[data-kind="pct"] .est-mine { visibility: hidden; }
#est-results.is-busy { opacity: 0.55; transition: opacity 0.15s; }
@media (max-width: 720px) {
  .est-row { grid-template-columns: 1fr 1fr; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
  .est-row [data-est-remove] { justify-self: end; }
}

/* ---- Plain lists (Money: paid with older splits) ------------------ */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* ---- Warnings that name their videos ------------------------------- */
.warn-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.warn-list a { color: inherit; text-decoration: underline; }
.chip-stray { border-color: var(--danger); color: var(--danger); border-style: dashed; }
.cell-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.cell-link:hover { border-bottom-style: solid; }
.flash:has(.warn-list) { flex-wrap: wrap; display: block; }