/* Self-hosted variable fonts (latin subset, SIL OFL). No external font
   requests: both files ship from /static/fonts. */
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:300 700;
  font-display:swap;
  src:url('/static/fonts/spacegrotesk-latin.woff2') format('woff2');
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;
  font-display:swap;
  src:url('/static/fonts/jetbrainsmono-latin.woff2') format('woff2');
}
/* GetLogOff v3: the owner's approved skin (adopted 2026-08-20).
   White cards on a warm cream canvas, a dark sidebar, teal as the one
   primary accent, Space Grotesk type with JetBrains Mono details.
   Gold is deliberately reserved for the approval gate, the one control the
   big tools do not have.
   Variable and class names are unchanged from v1/v2 so templates keep
   working; the reskin is a token remap plus the sidebar block. */
:root{
  --bg:#EFEDE8;              /* app canvas: warm cream */
  --bg-2:#E7E4DE;
  --panel:#ffffff;
  --panel-2:#F7F5F0;
  --line:rgba(20,23,26,.12);
  --line-soft:rgba(20,23,26,.07);
  --ink:#14171A;
  --ink-dim:#4A5056;
  --ink-faint:#82868D;
  --brand:#0B7F7E;           /* primary: teal, links + active states */
  --brand-deep:#095F5E;
  --brand-soft:#DFF2F1;
  --brand-line:rgba(11,127,126,.3);
  --brand-bright:#0EA5A4;    /* highlight teal, small solid accents */
  --brand-bright-ink:#04302F;
  --amber:#8A5A0B;           /* the gate. gold text tone on cream */
  --amber-deep:#6B551A;
  --amber-ink:#3b2c07;
  --amber-soft:#FAF0D8;
  --amber-line:#E6CE96;      /* 1px hairline on gold chips and boxes */
  --amber-edge:#D69A2C;      /* 3px status edges and swatches */
  --gold-grad:linear-gradient(135deg,#F2C14E,#D9A02A);
  --green:#1B7A44;
  --green-soft:#DEF2E2;
  --green-line:#BEE0C6;
  --red:#BC3A25;
  --red-soft:#FBE9E3;
  --red-line:#F0C5B8;
  --blue:#2E62B8;
  --blue-soft:#E4EDF9;
  --blue-line:#C3D6ED;
  --serif:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:12px;
  --shadow:0 1px 2px rgba(20,23,26,.05),0 1px 3px rgba(20,23,26,.08);
  --shadow-lg:0 8px 24px rgba(20,23,26,.10);
  --sidebar-w:230px;
  --sidebar-bg:#14171A;      /* the dark rail */
  --sidebar-ink:#F3F1EC;
  --sidebar-dim:#C9CDD3;
  --sidebar-faint:#9AA0A8;
  --sidebar-line:rgba(255,255,255,.09);
  --sidebar-hover:rgba(255,255,255,.07);
  --sidebar-active:rgba(14,165,164,.16);
  --sidebar-active-ink:#7FE6E4;
}
*{margin:0;padding:0;box-sizing:border-box}
/* the hidden attribute always wins, even over classes that set display
   (the combine bar and its checkboxes were visible before their toggle
   because .combine-bar/.combine-pick set display:flex) */
[hidden]{display:none!important}
html{color-scheme:light}
body{
  background:var(--bg);color:var(--ink);
  font:14.5px/1.55 var(--serif);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ── app shell: sidebar + content ─────────────────────────── */
.shell{display:flex;min-height:100vh}
/* the dark rail: the one dark surface in the product */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--sidebar-bg);color:var(--sidebar-ink);color-scheme:dark;
  display:flex;flex-direction:column;gap:4px;
  padding:16px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.content{flex:1;min-width:0;display:flex;flex-direction:column}

.logo{display:flex;align-items:center;gap:10px;font-weight:800;
  letter-spacing:.01em;font-size:15px;padding:2px 8px 14px}
.logo .mark{width:26px;height:26px;display:grid;place-items:center;flex:none}
.mark .marksvg{width:24px;height:24px;display:block}
.logo .working{display:block;color:var(--sidebar-faint);font-weight:500;
  font-size:10.5px;letter-spacing:.02em;margin-top:1px}

/* Each item is its own faintly raised block: the separation and depth come
   from spacing, a soft fill, and a hairline edge, not from letter chips. */
nav{display:flex;flex-direction:column;gap:7px}
nav a{
  display:flex;align-items:center;gap:10px;
  color:var(--sidebar-dim);text-decoration:none;font-size:13.5px;
  font-weight:600;padding:10px 13px;border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
nav a.active{color:var(--sidebar-active-ink);background:var(--sidebar-active);
  border-color:rgba(14,165,164,.35);
  box-shadow:0 2px 6px rgba(0,0,0,.35)}
nav a:hover{color:var(--sidebar-ink);background:var(--sidebar-hover);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 2px 6px rgba(0,0,0,.35)}
nav a.active:hover{color:var(--sidebar-active-ink);
  background:var(--sidebar-active)}
nav .badge{background:var(--brand-bright);color:var(--brand-bright-ink);
  font-size:10.5px;font-weight:800;
  border-radius:99px;padding:1px 7px;margin-left:auto}

/* workspace dropdown (top of sidebar) */
.ws-switch{display:flex;flex-direction:column;gap:4px;margin:2px 0 14px;
  padding:0 4px}
.ws-switch label{font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sidebar-faint)}
.ws-switch select{width:100%;background:rgba(255,255,255,.06);
  border:1px solid var(--sidebar-line);border-radius:9px;
  color:var(--sidebar-ink);
  font:600 13px/1.4 inherit;padding:8px 10px;cursor:pointer}
.ws-switch select:focus{outline:none;border-color:var(--brand-bright);
  box-shadow:0 0 0 3px rgba(14,165,164,.25)}

/* client switcher (sidebar section) */
.switcher{display:flex;flex-direction:column;gap:3px;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--sidebar-line)}
.switcher .lbl{font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sidebar-faint);padding:0 12px 6px}
.client-pill{
  display:flex;align-items:center;gap:8px;text-decoration:none;
  font-size:12.5px;font-weight:600;color:var(--sidebar-dim);
  border-radius:8px;padding:7px 12px;
}
.client-pill::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--sidebar-faint);flex:none}
.client-pill:hover{background:var(--sidebar-hover);color:var(--sidebar-ink)}
.client-pill.active{background:var(--sidebar-active);
  color:var(--sidebar-active-ink)}
.client-pill.active::before{background:var(--brand-bright)}
.client-pill .lock{font-size:10px;margin-left:auto}

/* user chip pinned at the sidebar bottom */
.whoami{margin-top:auto;display:flex;flex-direction:column;gap:2px;
  font-size:12px;color:var(--sidebar-dim);
  border-top:1px solid var(--sidebar-line);padding:12px 12px 2px}
/* role chip: teal like every other informational pill; gold would
   read as "waiting on a human", which a role is not. The base rule is
   the light scheme (the white account popover); the sidebar button
   instance gets the dark override below. */
.whoami .role{align-self:flex-start;font-size:9px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep);
  background:var(--brand-soft);border-radius:99px;padding:2px 8px}
.whoami-btn .role{color:var(--sidebar-active-ink);
  background:var(--sidebar-active)}
.whoami form{display:inline}
.linkbtn{background:none;border:0;color:var(--ink-faint);font:inherit;
  font-size:11.5px;cursor:pointer;padding:2px 0;border-radius:6px;text-align:left}
.linkbtn:hover{color:var(--red)}

/* ── trust banner (every page) ────────────────────────────── */
.trustbar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-bottom:1px solid var(--amber-line);background:var(--amber-soft);
  padding:8px 28px;font-size:12.5px;color:var(--amber-deep);
}
.trustbar b{color:var(--amber);font-weight:700}

/* flash messages */
.flashes{padding:12px 34px 0}
.flash{border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:8px;
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.flash.ok{background:var(--green-soft);color:var(--green);border-color:var(--green-line)}
.flash.err{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}
/* one-shot device-key reveal: monospace, selectable in a single tap */
.flash code.devkey{display:inline-block;margin-top:6px;padding:6px 10px;
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  word-break:break-all;user-select:all;-webkit-user-select:all}

main{padding-bottom:50px}

/* ── HOME: feed ───────────────────────────────────────────── */
.feed-head{padding:26px 34px 14px;border-bottom:1px solid var(--line-soft)}
.feed-head h1{font-size:22px;font-weight:750;letter-spacing:-.01em}
.feed-head .sub{color:var(--ink-dim);font-size:13.5px;margin-top:5px}
.feed-head .sub b{color:var(--amber)}
.feed{padding:10px 34px 20px;max-width:980px}
.daymark{display:flex;align-items:center;gap:14px;margin:22px 0 14px;
  color:var(--ink-faint);font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase}
.daymark::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.item{display:flex;gap:14px;padding:10px 0}
.who{
  width:36px;height:36px;min-width:36px;border-radius:11px;display:grid;
  place-items:center;font-size:11px;font-weight:800;letter-spacing:.02em;
}
.who.cutter{background:var(--brand-soft);color:var(--brand-deep)}
.who.publisher{background:var(--green-soft);color:var(--green)}
.who.runner{background:var(--blue-soft);color:var(--blue)}
.who.you{background:#F6E7DB;color:#9C5230}
.item .body{min-width:0;flex:1}
.item .head{font-size:13.5px;color:var(--ink-dim)}
.item .head b{color:var(--ink);font-weight:650}
.item .head .t{color:var(--ink-faint);font-size:11.5px;margin-left:8px;
  font-family:var(--mono)}
.item .detail{font-size:13px;color:var(--ink-dim);margin-top:3px;line-height:1.5}
.item .detail .hl{color:var(--green);font-weight:600}
.item .detail a{color:var(--blue);text-decoration:none;
  font-family:var(--mono);font-size:12px}
.item .detail a:hover{text-decoration:underline}
.done-line{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:12px;color:var(--green);font-weight:600}

/* approval card */
.ask{
  margin-top:10px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--amber-edge);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);
}
.ask.gated{border-color:var(--amber-line);border-left-width:4px;
  border-left-color:var(--amber-edge);
  background:linear-gradient(180deg,#FDFAEE,var(--panel))}
.ask-top{display:flex;gap:14px;padding:14px}
.thumb{
  width:104px;min-width:104px;aspect-ratio:9/16;border-radius:9px;
  position:relative;overflow:hidden;border:1px solid var(--line);
  display:block;text-decoration:none;
  background:
    radial-gradient(80px 60px at 32% 24%,#E4E0D6 0%,transparent 70%),
    radial-gradient(110px 90px at 72% 62%,#EAE3D2 0%,transparent 70%),
    linear-gradient(165deg,#F1EFE9 0%,#E5E1D8 55%,#D7D2C6 100%);
}
.thumb .play{position:absolute;inset:0;margin:auto;width:30px;height:30px;
  border-radius:50%;background:rgba(20,23,26,.65);
  border:1px solid rgba(255,255,255,.5);display:grid;place-items:center}
.thumb .play::after{content:"";border-left:8px solid #fff;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  margin-left:2px}
.thumb .pill{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;
  white-space:nowrap;background:var(--ink);color:#fff;font-size:8px;
  font-weight:800;padding:3px 7px;border-radius:99px}
.ask-main{flex:1;min-width:0}
.ask-title{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.ask-title a{text-decoration:none}
.ask-title a:hover{color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.chip{font-size:10.5px;font-weight:700;border-radius:99px;padding:3px 9px;
  border:1px solid var(--line);color:var(--ink-dim);background:var(--panel)}
.chip.slot{color:var(--green);border-color:var(--green-line);background:var(--green-soft);
  font-family:var(--mono)}
.chip.gate{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft)}
.chip.client{color:var(--blue);border-color:var(--blue-line);background:var(--blue-soft)}
.cap{margin-top:9px;font-size:12.5px;color:var(--ink-dim);line-height:1.55;
  border:1px solid var(--line-soft);background:var(--bg);border-radius:9px;
  padding:8px 11px;white-space:pre-wrap}
.fc{margin-top:7px;font-size:11.5px;color:var(--ink-faint)}
.fc .tag{color:var(--ink-faint);font-weight:800;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;margin-right:7px}
.fc code{font:600 11px var(--mono);color:var(--ink-dim)}
.ask-foot{display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--line-soft);padding:11px 14px;background:var(--bg)}
.notes-input{
  flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;color:var(--ink);font:13px/1.4 inherit;font-family:inherit;
  padding:9px 12px;
}
.notes-input::placeholder{color:var(--ink-faint)}
.notes-input:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.btn{border:0;border-radius:10px;font-weight:750;font-size:13px;cursor:pointer;
  padding:10px 18px;font-family:inherit}
.btn:hover{filter:brightness(1.04)}
/* the gold button IS the gate. nothing else gets this treatment */
.btn-ok{background:var(--gold-grad);color:var(--amber-ink);white-space:nowrap;
  box-shadow:var(--shadow)}
.btn-notes{background:var(--panel);color:var(--ink-dim);
  border:1px solid var(--line)}
.btn-notes:hover{color:var(--ink);border-color:var(--ink-faint)}
/* shadowed out: the control exists but the moment for it has not arrived */
.btn:disabled,.btn:disabled:hover{opacity:.45;cursor:not-allowed;filter:none}
.btn-notes:disabled:hover{color:var(--ink-dim);border-color:var(--line)}
/* empty state: one quiet sentence; the action link is teal */
.empty{color:var(--ink-faint);font-size:13px;padding:14px 0}
.empty a{color:var(--brand);font-weight:600}

/* ── PIPELINE: board ──────────────────────────────────────── */
.strip{display:flex;align-items:flex-end;justify-content:space-between;
  padding:26px 34px 8px}
.strip h1{font-size:22px;font-weight:750;letter-spacing:-.01em}
.strip .sub{color:var(--ink-dim);font-size:13.5px;margin-top:5px}
.strip .sub b{color:var(--amber);font-weight:700}
.board{display:flex;gap:14px;padding:18px 34px 40px;align-items:flex-start}
.col{flex:1;min-width:0}
.col-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px}
.col-head h2{font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.count{font:600 11px var(--mono);color:var(--ink-dim);background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:1px 8px}
.col-body{display:flex;flex-direction:column;gap:10px}
.card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 14px;box-shadow:var(--shadow)}
.fname{font:600 12.5px var(--mono);color:var(--ink);overflow-wrap:anywhere;word-break:normal}
.fname a{text-decoration:none}
.fname a:hover{color:var(--brand)}
.meta{font-size:12px;color:var(--ink-faint);margin-top:3px}
.meta em{font-style:normal;color:var(--ink-dim)}
.stage{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;
  color:var(--ink-dim)}
.spin{width:11px;height:11px;border:2px solid var(--line);
  border-top-color:var(--brand);border-radius:50%;
  animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* the gate column */
.col.gate{flex:1.6}
.gatewrap{
  border:1px solid var(--amber-line);border-radius:16px;
  background:linear-gradient(180deg,#FDFAEE,#FAF3DE);
  padding:12px;
}
.gate .col-head h2{color:var(--amber)}
.gate-note{font-size:11.5px;color:var(--ink-dim);padding:0 4px 10px;
  line-height:1.45}
.gate-note b{color:var(--ink)}
.approve-mini{display:flex;gap:11px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  margin-bottom:10px;box-shadow:var(--shadow)}
.approve-mini.gated{border-color:var(--amber-line)}
.mini-thumb{width:38px;height:64px;min-width:38px;border-radius:7px;
  border:1px solid var(--line);
  background:linear-gradient(160deg,#EBE8E1,#DBD6CB);display:block}
.approve-mini .t{font-size:13px;font-weight:650;overflow-wrap:anywhere;word-break:normal}
.approve-mini .t a{text-decoration:none}
.approve-mini .t a:hover{color:var(--brand)}
.approve-mini .m{font-size:11.5px;color:var(--ink-faint);margin-top:2px}
.waiting{margin-left:auto;font-size:11px;color:var(--amber);font-weight:700;
  white-space:nowrap}
.gate-fence{display:flex;flex-direction:column;align-items:center;gap:6px;
  align-self:stretch;padding-top:38px;width:26px}
.fence-line{flex:1;width:1px;background:repeating-linear-gradient(180deg,
  var(--amber-edge) 0 6px,transparent 6px 12px);opacity:.7}
.fence-lock{font-size:13px;color:var(--amber)}
.fence-label{writing-mode:vertical-rl;font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);opacity:.9}

/* scheduled + live cards */
.sched-card .when{font:700 11px var(--mono);color:var(--green)}
.sched-card .t{font-size:13px;font-weight:650;margin-top:4px;
  overflow-wrap:anywhere;word-break:normal}
.sched-card .m{font-size:11.5px;color:var(--ink-faint);margin-top:3px}
.approved-by{display:flex;align-items:center;gap:6px;margin-top:9px;
  font-size:10.5px;color:var(--ink-faint)}
.tick{color:var(--green);font-weight:800}
.live-card{border-left:3px solid var(--blue)}
.live-card .t{font-size:13px;font-weight:650;overflow-wrap:anywhere;word-break:normal}
.live-card a{color:var(--blue);text-decoration:none;font:600 11px var(--mono)}
.live-card a:hover{text-decoration:underline}
.fail-card{border-left:3px solid var(--red)}
.fail-card .t{color:var(--red)}

/* ── NEW POST form ────────────────────────────────────────── */
.formwrap{max-width:720px;padding:26px 34px}
.formwrap h1{font-size:22px;font-weight:750;letter-spacing:-.01em;
  margin-bottom:4px}
.formwrap .sub{color:var(--ink-dim);font-size:13.5px;margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:10.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:6px}
.field input[type=text],.field input[type=number],.field input[type=email],
.field input[type=password],
.field input[type=datetime-local],.field select,.field textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;color:var(--ink);font:13.5px/1.5 inherit;
  font-family:inherit;padding:10px 13px;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field .hint{font-size:11.5px;color:var(--ink-faint);margin-top:5px;
  line-height:1.45}
.field .hint code{font-family:var(--mono);color:var(--ink-dim)}
.field-row{display:flex;gap:14px}
.field-row .field{flex:1}
.form-foot{display:flex;align-items:center;gap:12px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--line-soft)}
.form-foot .note{font-size:12px;color:var(--ink-faint);line-height:1.45;flex:1}
.form-foot .note b{color:var(--ink-dim)}

/* ── login ────────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(600px 400px at 20% 0%,var(--brand-soft) 0%,transparent 60%),
    radial-gradient(500px 380px at 90% 100%,var(--amber-soft) 0%,transparent 60%),
    var(--bg)}
.login-card{width:100%;max-width:420px;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:30px 28px;
  box-shadow:var(--shadow-lg)}
.login-card .brand{display:flex;align-items:center;gap:11px;margin-bottom:6px}
/* The ring stands on the card itself. A gold key behind a gold ring reads
   as a power button, which the brand sheet rules out. */
.login-card .brand .mark{width:30px;height:30px;display:grid;
  place-items:center}
.login-card .brand .mark .marksvg{width:28px;height:28px;display:block}
.login-card .brand .name{font-weight:800;font-size:17px;letter-spacing:.01em}
.login-card .tag{color:var(--ink-faint);font-size:11.5px;margin-bottom:22px}
.login-card h1{font-size:19px;font-weight:750;margin-bottom:6px}
.login-card p.lede{color:var(--ink-dim);font-size:13px;line-height:1.55;
  margin-bottom:18px}
.login-card input[type=email],
.login-card input[type=password]{width:100%;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font:14px/1.5 inherit;padding:12px 14px}
.login-card input[type=email]:focus,
.login-card input[type=password]:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.login-card input+input{margin-top:10px}
.login-card .btn{width:100%;margin-top:12px;padding:12px}
.login-note{margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line-soft);font-size:11.5px;
  color:var(--ink-faint);line-height:1.55}
.login-note b{color:var(--ink-dim)}
.sent-box{background:var(--green-soft);border:1px solid var(--green-line);
  color:var(--green);border-radius:11px;padding:14px;font-size:13px;
  line-height:1.55}
.dev-link{margin-top:12px;font:11px var(--mono);overflow-wrap:anywhere;word-break:normal;
  color:var(--blue)}

/* ── generic panels / tables ──────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;
  box-shadow:var(--shadow)}
.panel h2{font-size:15px;font-weight:750;margin-bottom:4px}
.panel .desc{color:var(--ink-faint);font-size:12px;line-height:1.5;
  margin-bottom:14px}
.wrap{padding:22px 34px 60px;max-width:1100px}
.wrap h1{font-size:22px;font-weight:750;letter-spacing:-.01em}
.wrap .sub{color:var(--ink-dim);font-size:13.5px;margin-top:5px;
  margin-bottom:18px}
/* page header row: h1 + status pills + actions on one wrapping line */
.head-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.head-row h1,.head-row h2{flex:1;min-width:200px}
.head-main{flex:1;min-width:240px}
.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* wide tables scroll inside their card; the page never scrolls sideways */
.table-scroll{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
table.grid th{text-align:left;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);padding:6px 10px;
  border-bottom:1px solid var(--line)}
table.grid td{padding:9px 10px;border-bottom:1px solid var(--line-soft);
  color:var(--ink-dim)}
table.grid td b{color:var(--ink)}
.status-pill{display:inline-block;font-size:10px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;border-radius:99px;
  padding:3px 9px;border:1px solid var(--line);background:var(--panel)}
.st-uploaded,.st-processing{color:var(--blue);border-color:var(--blue-line);
  background:var(--blue-soft)}
.st-awaiting_approval{color:var(--amber);border-color:var(--amber-line);
  background:var(--amber-soft)}
.st-approved,.st-publishing{color:var(--green);border-color:var(--green-line);
  background:var(--green-soft)}
.st-posted{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.st-failed{color:var(--red);border-color:var(--red-line);background:var(--red-soft)}
.st-rejected{color:var(--ink-faint)}
/* platform connection statuses (glo/worker/publishers.py) */
.st-live{color:var(--green);border-color:var(--green-line);background:var(--green-soft)}
.st-needs_app_review{color:var(--amber);border-color:var(--amber-line);
  background:var(--amber-soft)}
.st-not_built{color:var(--ink-faint)}
.conn-sub{display:flex;align-items:center;gap:8px;font-size:13.5px;
  font-weight:750;margin:18px 0 8px}
.conn-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  margin-top:10px;background:var(--panel)}
.conn-card .conn-head{display:flex;align-items:center;gap:8px;font-size:13px}
.conn-card .conn-req{font-size:11.5px;color:var(--ink-faint);margin-top:5px;
  line-height:1.5}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.btn-danger{background:var(--panel);border:1px solid var(--red-line);color:var(--red)}
.btn-link{background:none;border:0;color:var(--brand);cursor:pointer;
  font:inherit;font-size:12.5px}

/* ── connections: network tile grid + guided connect flows ── */
.conn-grid{display:grid;gap:12px;margin-top:4px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.conn-tile{display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;transition:border-color .15s,box-shadow .15s}
.conn-tile:hover{border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.conn-tile-head{display:flex;align-items:center;gap:10px}
.conn-glyph{display:inline-flex;flex:0 0 auto}
.conn-glyph-ig{color:#c13584}
.conn-glyph-fb{color:#1877f2}
.conn-glyph-yt{color:#d92d2d}
.conn-tile-name{font-size:13.5px;font-weight:750}
.conn-tile-what{font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.conn-tile-none{font-size:11.5px;color:var(--ink-faint);line-height:1.5;
  padding:4px 0}
/* Stacked, not a single row: a narrow tile (230px min, three-column grid)
   cannot fit a label, a meta line, a status pill, and a Disconnect button
   on one line without the label collapsing to a sliver. The label gets its
   own full-width line, the meta line sits beneath it, and the status pill
   plus Disconnect get a third line that never competes with the label. */
.conn-acct{display:flex;flex-direction:column;gap:6px;padding:9px 0;
  border-top:1px solid var(--line-soft)}
.conn-acct-id{display:flex;flex-direction:column;gap:2px;min-width:0;
  width:100%}
.conn-acct-name{font-size:12.5px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.conn-acct-meta{font-size:10.5px;color:var(--ink-faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.conn-acct-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.conn-tile-foot{margin-top:auto;padding-top:4px}
.st-connected{color:var(--green);border-color:var(--green-line);
  background:var(--green-soft)}
.st-off{color:var(--ink-faint)}
.conn-flow{margin-top:14px;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;background:var(--panel-2)}
.conn-flow-head{display:flex;align-items:flex-start;gap:10px}
.conn-flow-head .conn-sub{margin:0}
.conn-flow-head .conn-close{margin-left:auto;flex:0 0 auto}
.conn-flow .desc{margin:8px 0 0}
.conn-step{margin-top:14px}
.conn-step-title{font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.conn-check{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px}
.conn-check li{position:relative;padding-left:22px;font-size:12.5px;
  line-height:1.55;color:var(--ink-dim)}
.conn-check li::before{content:"";position:absolute;left:2px;top:5px;
  width:9px;height:9px;border-radius:99px;border:2px solid var(--green)}
.conn-check a,.conn-check-note a{color:var(--brand);white-space:nowrap}
.conn-check-note{font-size:11.5px;color:var(--ink-faint);margin-top:8px}
.conn-coming{margin-top:16px;font-size:11.5px;color:var(--ink-faint)}
@media (max-width:640px){.conn-grid{grid-template-columns:1fr}}

/* ── upload / dropzone ────────────────────────────────────── */
.dropzone{border:2px dashed #D3CDBF;border-radius:18px;background:var(--panel);
  padding:46px 24px;text-align:center;
  transition:border-color .15s,background .15s;cursor:pointer}
.dropzone.hot{border-color:var(--brand);background:var(--brand-soft)}
.dropzone .big{font-size:17px;font-weight:700;margin-bottom:6px}
.dropzone .small{color:var(--ink-faint);font-size:12.5px;line-height:1.6}
.dropzone input[type=file]{display:none}
.uplist{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.uprow{background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.uprow .nm{font:600 12.5px var(--mono);overflow-wrap:anywhere;word-break:normal}
.uprow .st{font-size:11.5px;color:var(--ink-faint);margin-top:4px}
.uprow.err{border-color:var(--red-line)}
.uprow.err .st{color:var(--red)}
.uprow.ok{border-left:3px solid var(--green)}
.upload-hint{color:var(--ink-faint);font-size:12.5px;line-height:1.6;
  margin-top:10px;text-align:center}
.upnext{margin-top:18px;display:flex;justify-content:flex-end}
.bar{height:6px;background:var(--line-soft);border-radius:99px;margin-top:9px;
  overflow:hidden}
.bar > i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand));
  transition:width .2s}

/* ── post detail ──────────────────────────────────────────── */
.detail-grid{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.detail-media{width:290px;min-width:260px}
/* phone-frame preview, the pattern every scheduler uses for the composer */
.detail-media video{width:100%;border-radius:22px;border:8px solid var(--ink);
  background:#000;box-shadow:var(--shadow-lg)}
.detail-media .noprev{aspect-ratio:9/16;border-radius:22px;
  border:8px solid var(--line);display:grid;place-items:center;
  color:var(--ink-faint);font-size:12px;text-align:center;padding:20px;
  background:var(--panel)}
/* client-chosen cover photo, under the phone-frame preview */
.coverbox{border:1px solid var(--line);border-radius:12px;
  background:var(--panel-2);padding:13px 15px;margin-top:14px}
.coverbox .cover-head{font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint)}
.coverbox .cover-thumb{display:block;width:100%;border-radius:10px;
  border:1px solid var(--line);margin-top:9px;background:#000}
.coverbox .cover-file{display:block;width:100%;font-size:11.5px;
  color:var(--ink-dim);margin:10px 0 8px}
.coverbox form + form{margin-top:8px}
.coverbox .hint{font-size:11px;color:var(--ink-faint);line-height:1.5;
  margin-top:9px}
.detail-main{flex:1;min-width:320px}
.gatebox{border:1px solid var(--amber-line);border-radius:14px;
  background:linear-gradient(180deg,#FDFAEE,#FAF3DE);
  padding:16px 18px;margin-top:18px;box-shadow:var(--shadow)}
.gatebox h3{font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber);margin-bottom:8px}
.gatebox .why{font-size:12px;color:var(--ink-dim);line-height:1.55;
  margin-bottom:12px}
.gatebox .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.locked{border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  margin-top:18px;background:var(--panel-2);color:var(--ink-dim);
  font-size:12.5px;line-height:1.6}
.locked b{color:var(--ink)}
.timeline{margin-top:22px}
.timeline .row{display:flex;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line-soft);font-size:12px;color:var(--ink-dim)}
.timeline .row .ts{font:11px var(--mono);color:var(--ink-faint);min-width:118px}
.timeline .row.failure{color:var(--red)}
.errbox{background:var(--red-soft);border:1px solid var(--red-line);border-radius:11px;
  padding:12px 14px;margin-top:14px;font:11.5px/1.6 var(--mono);
  color:#8C3517;white-space:pre-wrap;max-height:220px;overflow:auto}

/* ── calendar (flat list bits kept for the unscheduled strip) ─ */
.cal-day{margin-bottom:20px}
.cal-day .dh{display:flex;align-items:center;gap:12px;margin-bottom:9px;
  font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.cal-day .dh::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.cal-item{display:flex;gap:12px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;
  margin-bottom:8px;box-shadow:var(--shadow)}
.cal-item .time{font:600 12px var(--mono);color:var(--green);min-width:74px}
.cal-item .ttl{font-size:13px;font-weight:650;flex:1;min-width:0;
  word-break:break-word}
.cal-item .ttl a{text-decoration:none}
.cal-item .ttl a:hover{color:var(--brand)}
.cal-item.pending{border-left:3px solid var(--amber-edge)}
.cal-item.pending .time{color:var(--amber)}
.cal-item.bad{border-left:3px solid var(--red)}

/* month grid + week view */
.wrap-cal{max-width:1280px}
.cal-top{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.cal-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin-bottom:18px}
/* ── segmented control: THE tab pattern, shared by every screen ──
   Calendar views/nav, Insights tabs and range picker, and the billing
   cycle toggle all render as one white segmented bar. The active
   segment is teal; gold stays reserved for the gate. */
.cal-views,.cal-nav,.ins-tabs,.ins-ranges,.cycle-toggle{
  display:inline-flex;gap:0;background:var(--panel);
  border:1px solid var(--line);border-radius:9px;padding:2px;
  box-shadow:var(--shadow)}
.cal-views .client-pill,.cal-nav .client-pill,.ins-tabs a,.ins-pill,
.cycle-opt{text-decoration:none;font-size:12.5px;font-weight:700;
  color:var(--ink-dim);border-radius:7px;padding:6px 13px;
  white-space:nowrap}
.ins-tabs a:hover,.ins-pill:hover{color:var(--ink);background:var(--panel-2)}
.cal-views .client-pill.active,.cal-nav .client-pill.active,
.ins-tabs a.active,.ins-pill.active{
  background:var(--brand-soft);color:var(--brand-deep)}
.cal-views .client-pill::before,.cal-nav .client-pill::before{display:none}
.cal-heading{font-size:18px;font-weight:750;margin:2px 0 12px}
.calgrid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
  margin-bottom:8px}
.calgrid-head div{font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 4px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;
  margin-bottom:8px}
.calcell{background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:8px;min-height:96px;display:flex;
  flex-direction:column;gap:5px;min-width:0}
.calgrid-week .calcell{min-height:220px}
.calcell.out{background:transparent;border-style:dashed;opacity:.6}
/* today is a wayfinding mark, not a gate state: teal, never gold */
.calcell.today{border-color:var(--brand);
  box-shadow:inset 0 0 0 1px var(--brand-soft)}
.calcell .dnum{font:600 11.5px var(--mono);color:var(--ink-faint);
  display:flex;align-items:center;gap:6px}
.calcell.today .dnum{color:var(--brand-deep)}
.today-tag{font-size:8.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-deep);
  background:var(--brand-soft);border-radius:99px;padding:1px 6px}
.calchip{display:block;text-decoration:none;border:1px solid var(--line);
  border-left-width:3px;border-radius:8px;background:var(--panel);
  padding:4px 7px;min-width:0;box-shadow:var(--shadow)}
.calchip:hover{border-color:var(--brand)}
.calchip .t{display:block;font:700 10px var(--mono)}
.calchip .n{display:block;font-size:11px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calchip .c{display:block;font-size:9.5px;color:var(--blue)}
.calchip.pending{border-left-color:var(--amber-edge);background:#FDFAEE}
.calchip.pending .t{color:var(--amber)}
.calchip.sched{border-left-color:var(--green)}
.calchip.sched .t{color:var(--green)}
.calchip.live{border-left-color:var(--blue)}
.calchip.live .t{color:var(--blue)}
.calchip.bad{border-left-color:var(--red);background:#FDF7F4}
.calchip.bad .t{color:var(--red)}
/* which network a chip publishes to; status stays the border color */
.pdot{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:5px;vertical-align:baseline;background:var(--ink-faint)}
.pdot.p-instagram{background:#c026d3}
.pdot.p-facebook_reels{background:#1877f2}
.pdot.p-youtube_shorts{background:#ef4444}
.pkey{display:inline-flex;align-items:center;gap:4px;margin-left:10px;
  color:var(--ink-faint);font-size:12px}
.pkey .pdot{margin-right:2px;margin-left:8px}
/* the calendar legend: dots name the network, swatches name the status */
.cal-legend{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  margin:0 0 10px;color:var(--ink-faint);font-size:12px}
.cal-legend .pkey{margin-left:0}
.cal-legend .pkey .pdot:first-child{margin-left:0}
.lkey{display:inline-flex;align-items:center;gap:4px}
.lswatch{display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-left:10px;margin-right:2px}
.lkey .lswatch:first-child{margin-left:0}
.lswatch.l-pending{background:var(--amber-edge)}
.lswatch.l-sched{background:var(--green)}
.lswatch.l-live{background:var(--blue)}
.lswatch.l-bad{background:var(--red)}
.calchip[draggable=true]{cursor:grab}
.calchip.dragging{opacity:.45}
.calcell.dropzone-hot{border-color:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand-soft);background:var(--brand-soft)}

/* the calendar share modal: one small overlay component, no other screen
   uses a modal today, so this block is self-contained on purpose */
.modal-back{position:fixed;inset:0;background:rgba(20,23,26,.45);
  display:flex;align-items:flex-start;justify-content:center;
  padding:8vh 16px 16px;z-index:50;overflow-y:auto}
.modal{width:100%;max-width:480px;margin-bottom:16px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:4px}
.modal-x{background:none;border:0;cursor:pointer;color:var(--ink-faint);
  font-size:20px;line-height:1;padding:2px 4px;border-radius:6px}
.modal-x:hover{color:var(--ink);background:var(--panel-2)}
.share-list{margin:14px 0}
/* the public /shared/{token} page's footer line */
.share-foot{color:var(--ink-faint);font-size:12px;margin-top:28px;
  padding-top:14px;border-top:1px solid var(--line-soft)}

/* ── settings ─────────────────────────────────────────────── */
.kv{display:flex;gap:10px;align-items:center;font-size:12.5px;
  color:var(--ink-dim);padding:8px 0;border-bottom:1px solid var(--line-soft)}
.kv .k{min-width:190px;color:var(--ink-faint);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.check{display:flex;align-items:center;gap:9px;font-size:13px;
  color:var(--ink-dim);margin-bottom:10px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--brand)}
.warnbox{background:var(--amber-soft);border:1px solid var(--amber-line);
  border-radius:11px;padding:12px 14px;font-size:12.5px;color:var(--ink-dim);
  line-height:1.55;margin-bottom:14px}
.warnbox b{color:var(--amber)}
.secret-note{font-size:11.5px;color:var(--ink-faint);line-height:1.5;
  margin-top:6px}

/* ── settings: AI connectors setup card ───────────────────── */
.mcp-setup{margin-top:18px;padding:14px 16px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:11px}
.mcp-setup-title{font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.mcp-url{font-family:var(--mono);font-size:12px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:2px 6px;user-select:all;-webkit-user-select:all;
  word-break:break-all}
/* copyable config block: one tap selects the whole snippet */
.mcp-snippet{font-family:var(--mono);font-size:12px;line-height:1.6;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;overflow-x:auto;white-space:pre;
  user-select:all;-webkit-user-select:all}

/* ── owner cross-client dashboard ─────────────────────────── */
.tenant-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
  font-weight:700;color:var(--blue);border:1px solid var(--blue-line);
  background:var(--blue-soft);border-radius:99px;padding:2px 9px}
/* ── stat tiles: ONE pattern (owner dashboard, insights, costs,
   trends). Same chrome everywhere; the number wears the status color
   only when the number IS a status (needs approval, failed, live). */
.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.stat,.cost-head,.trend-stat{background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  box-shadow:var(--shadow)}
.stat{flex:1;min-width:130px}
.stat .n{font-size:26px;font-weight:750;line-height:1.15}
.stat .l,.cost-head .lbl,.trend-stat .lbl{font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.stat .l{margin-top:4px}
.stat.warn .n{color:var(--amber)}
.stat.bad .n{color:var(--red)}
.stat.good .n{color:var(--green)}

/* ── costs ────────────────────────────────────────────────── */
.cost-heads{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 20px}
.cost-head{flex:1;min-width:170px}
.cost-head .fig{font-size:26px;font-weight:750;line-height:1.15;
  margin-top:5px;color:var(--ink)}
.cost-head .fig.dim{color:var(--ink-dim)}
.cost-head .note{font-size:11.5px;color:var(--ink-faint);margin-top:4px;
  line-height:1.45}
table.grid td.num,table.grid th.num{text-align:right;font-family:var(--mono)}
table.grid td.num{color:var(--ink)}
table.grid td.dim{color:var(--ink-faint)}
table.grid td.mono{font-family:var(--mono);font-size:11.5px}
table.grid td.empty{color:var(--ink-faint);padding:14px 10px}

/* ── music mood picker ────────────────────────────────────── */
.moodbox{border:1px solid var(--line);border-radius:12px;
  background:var(--panel-2);padding:13px 15px;margin-bottom:16px}
.moodbox .mood-head{display:flex;align-items:center;gap:8px;font-size:12px;
  font-weight:800;letter-spacing:.04em;color:var(--ink-dim)}
.moodbox .mood-why{font-size:11.5px;color:var(--ink-faint);line-height:1.5;
  margin:6px 0 10px}
.moodbox .field{margin-bottom:0}
.moodbox .field + .field{margin-top:10px}
.bedline{display:flex;align-items:center;gap:10px;margin-top:10px;
  font-size:11.5px;color:var(--ink-faint);flex-wrap:wrap}
.bedline audio{height:30px;max-width:240px}

/* ── video editor (/post/{id}/edit): tools | stage | context,
   timeline below. v3 skin: white panels on cream, one dark stage. ── */
.editor-wrap{max-width:1240px}
.editor-locked{margin-top:16px}
/* link from the post page into the editor */
.editor-open{display:block;text-align:center;margin-top:10px;
  text-decoration:none}

.editor-grid{display:grid;grid-template-columns:118px minmax(0,1fr) 330px;
  gap:14px;align-items:start;margin-top:16px}

/* left rail: plain-word tool tabs */
.tool-col{display:flex;flex-direction:column;gap:6px}
.tool-btn{display:block;text-align:left;padding:11px 12px;border-radius:11px;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;line-height:1.25;
  color:var(--ink-dim);box-shadow:var(--shadow)}
.tool-btn:hover{border-color:var(--brand);color:var(--brand-deep)}
.tool-btn.active{background:var(--brand-soft);border-color:var(--brand);
  color:var(--brand-deep)}

/* center: the dark stage, the one dark surface beside the sidebar */
.stage-panel{background:var(--sidebar-bg);border-radius:14px;
  padding:14px 16px 12px;color:var(--sidebar-ink);min-width:0}
.stage-eyebrow{display:flex;justify-content:space-between;gap:10px;
  font:800 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--sidebar-faint);margin-bottom:10px}
.editor-stage{display:flex;justify-content:center}
.editor-stage video{max-height:52vh;max-width:100%;border-radius:10px;
  background:#000}
.editor-stage .noprev{width:min(250px,100%);aspect-ratio:9/16;
  border-radius:10px;border:1px dashed var(--sidebar-line);
  display:grid;place-items:center;color:var(--sidebar-faint);font-size:12px;
  text-align:center;padding:20px}
/* the locked, read-only page keeps the plain centered phone preview */
.wrap > .editor-stage{margin-top:14px}
.wrap > .editor-stage video{max-height:55vh;border-radius:22px;
  border:8px solid var(--ink);box-shadow:var(--shadow-lg)}
.wrap > .editor-stage .noprev{border:8px solid var(--line);
  background:var(--panel);color:var(--ink-faint);border-radius:22px;
  width:min(290px,100%)}
.stage-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px}
.stage-play{width:34px;height:34px;flex:none;border-radius:50%;border:0;
  background:var(--brand-bright);color:var(--brand-bright-ink);
  font-size:12px;cursor:pointer;display:grid;place-items:center}
.stage-play:disabled{opacity:.4;cursor:default}
.stage-time{font:600 11px var(--mono);color:var(--sidebar-dim);
  min-width:84px}
.stage-scrub{flex:1;min-width:80px;accent-color:var(--brand-bright)}
.stage-bar .btn-notes{background:transparent;color:var(--sidebar-dim);
  border-color:var(--sidebar-line)}
.stage-bar .btn-notes:hover{color:var(--sidebar-ink);
  border-color:var(--sidebar-dim)}
.stage-bar form{display:inline}
.stage-note{margin-top:9px;font-size:11px;color:var(--sidebar-faint)}

/* right: the picked tool's controls */
.side-panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;
  min-width:0}
.pane-title{font-size:13.5px;font-weight:750;letter-spacing:-.01em;
  margin-bottom:10px}
.tab-pane + .tab-pane{margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line-soft)}
.ed-head{font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.ed-why{font-size:12px;color:var(--ink-dim);line-height:1.55;
  margin-bottom:12px}
.side-panel .cover-thumb{display:block;max-width:180px;border-radius:10px;
  border:1px solid var(--line);margin:6px 0;background:#000}
.side-panel .cover-file{display:block;font-size:11.5px;color:var(--ink-dim);
  margin:10px 0 8px}
.side-panel form + form{margin-top:8px}

/* selected-clip tool block in the trim pane */
.clip-tools{border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:10px;background:var(--panel)}
.sel-eyebrow{font:800 10px var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.sel-name{font-size:12.5px;font-weight:700;margin:4px 0 8px}
.sel-name .mono{font-family:var(--mono);font-weight:600;font-size:11px;
  color:var(--ink-faint)}
.clip-trim{display:flex;align-items:center;gap:5px;margin-top:8px}
.clip-trim input{width:100%;min-width:0;background:var(--panel);
  border:1px solid var(--line);border-radius:7px;font:12px var(--mono);
  color:var(--ink);padding:5px 6px}
.clip-trim input:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 2px var(--brand-soft)}
.clip-trim .dash{font-size:10px;color:var(--ink-faint)}
.clip-pick-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.clip-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.clip-note{display:block;margin-top:6px;font-size:11.5px}

/* ── timeline panel: the cut's rows, stated honestly ─────────
   Segments are the real clip rows; audio rows say what audio exists
   (no decorated waveforms, ever); the text row spans each layer. */
.timeline-panel{margin-top:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px 16px 16px}
.tl-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.tl-eyebrow{font:800 9.5px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}
.tl-hint{font-size:11px;color:var(--ink-faint)}
.tl-scroll{overflow-x:auto}
.tl-body{position:relative;min-width:520px}
.tl-row{display:flex;gap:6px;align-items:stretch}
.tl-row + .tl-row{margin-top:6px}
.tl-label{width:52px;flex:none;font:600 9.5px var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center}
.tl-track{flex:1;min-width:0;display:flex;gap:4px;align-items:stretch}
.tl-playhead{position:absolute;top:0;bottom:0;width:2px;
  background:var(--ink);opacity:.55;border-radius:2px;pointer-events:none;
  z-index:3;display:none}

/* video segments: one block per clip row, click to select */
.tl-track .clip-card{position:relative;flex:1;min-width:88px;display:flex;
  gap:7px;align-items:center;padding:5px 8px;border-radius:8px;
  cursor:pointer;border:1px solid var(--line);background:var(--panel-2)}
.tl-track .clip-card[draggable="true"]{cursor:grab}
.tl-track .clip-card.dragging{opacity:.45}
.tl-track .clip-card.selected{border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.clip-thumb{position:relative;flex:none;width:24px;height:42px;
  border-radius:5px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,#EBE8E1,#DBD6CB)}
.clip-thumb .ord{position:absolute;top:1px;left:1px;min-width:14px;
  height:14px;border-radius:4px;background:var(--brand);color:#fff;
  font:800 9px/14px var(--mono);text-align:center;padding:0 3px;z-index:1}
.seg-meta{min-width:0}
.seg-name{display:block;font-size:11px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.seg-len{display:block;font:600 10px var(--mono);color:var(--ink-faint)}
.seg-snippet{display:block;font-size:10px;font-style:italic;
  color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* New cut picker: a checkbox + tick-order number pinned to the card's own
   corner. Hidden until "+ New cut" arms picking mode, so the ordinary
   Video row stays uncluttered the rest of the time. */
.cut-pick{display:none;position:absolute;top:3px;right:4px;z-index:2;
  align-items:center;gap:3px;background:var(--panel);border-radius:4px;
  padding:1px 2px}
#clip-strip.picking-cut .cut-pick{display:flex}
.cut-pick input{width:12px;height:12px;margin:0}
.cut-pick-num{min-width:13px;height:13px;border-radius:4px;
  background:var(--ink);color:#fff;font:800 9px/13px var(--mono);
  text-align:center;padding:0 2px}
.cut-pick-num:empty{display:none}
.tl-add{flex:none;align-self:stretch;padding:0 12px;border-radius:8px;
  border:1px dashed var(--line);background:transparent;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:600;
  color:var(--ink-faint)}
.tl-add:hover{border-color:var(--brand);color:var(--brand-deep)}

/* audio rows: honest presence, no invented peaks */
.tl-audio{flex:1;min-width:0;height:26px;border-radius:7px;
  display:flex;align-items:center;padding:0 9px;
  font:600 10.5px var(--mono);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;border:1px solid}
.tl-audio.voice{background:var(--brand-soft);border-color:var(--brand-line);
  color:var(--brand-deep)}
.tl-audio.music{background:var(--blue-soft);border-color:var(--blue-line);
  color:var(--blue)}

/* text row: one block per layer; JS spans them once duration is known */
.tl-textrow{flex:1;min-width:0;position:relative;min-height:24px;
  border-radius:7px;border:1px dashed var(--line);background:var(--panel-2);
  display:flex;gap:4px;align-items:center;padding:2px 4px;overflow:hidden}
.tl-textseg{border:1px solid var(--brand-line);background:var(--panel);
  color:var(--brand-deep);border-radius:5px;padding:1px 7px;cursor:pointer;
  font-family:inherit;font-size:10px;font-weight:600;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:18px}
.tl-textrow.placed{display:block;padding:0}
.tl-textrow.placed .tl-textseg{position:absolute;top:2px;bottom:2px;
  height:auto}
.tl-empty{font-size:10.5px;color:var(--ink-faint);padding:0 5px}

/* ── drag trim bar (whole-post + per-clip miniature) ──────────
   Track on panel tokens, teal range fill, white handles; gold stays
   reserved for the gate. The .tb-* classes are shared by the big bar in
   #sec-trim and the .clip-bar miniatures, which only resize them. */
.trimbar{margin:16px 2px 2px}
.tb-track{position:relative;height:36px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);
  user-select:none;-webkit-user-select:none}
/* no duration yet (metadata still loading, or no cut): visibly parked */
.tb-wait .tb-track{opacity:.45;pointer-events:none}
.tb-range{position:absolute;top:0;bottom:0;left:0;width:100%;
  background:var(--brand-soft);
  border-top:2px solid var(--brand);border-bottom:2px solid var(--brand)}
/* out-of-range: dimmed, reads as "this part is cut away" */
.tb-dim{position:absolute;top:0;bottom:0;width:0;
  background:rgba(20,23,26,.16)}
.tb-dim-l{left:0;border-radius:9px 0 0 9px}
.tb-dim-r{right:0;border-radius:0 9px 9px 0}
.tb-handle{position:absolute;top:-4px;bottom:-4px;width:14px;left:0;
  transform:translateX(-50%);border-radius:7px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);cursor:ew-resize;
  touch-action:none;z-index:2}
.tb-end{left:100%}
/* generous hit area: 14px visual + 8px each side = 30px wide, full height */
.tb-handle::before{content:"";position:absolute;top:-6px;bottom:-6px;
  left:-8px;right:-8px}
.tb-handle::after{content:"";position:absolute;top:50%;left:50%;
  width:2px;height:12px;transform:translate(-50%,-50%);
  background:var(--line);border-radius:2px}
.tb-handle.dragging{border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
/* time bubble over the handle being dragged */
.tb-tip{position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);background:var(--ink);color:#fff;
  font:600 10.5px var(--mono);padding:3px 8px;border-radius:99px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.tb-handle.dragging .tb-tip{opacity:1}
.tb-labels{display:flex;justify-content:space-between;margin-top:6px;
  font:600 11px var(--mono);color:var(--ink-faint)}
.trimbar.dragging .tb-labels{color:var(--brand-deep)}
/* per-clip miniature inside the 120px clip card */
.clip-bar{margin-top:7px}
.clip-bar .tb-track{height:22px;border-radius:7px}
.clip-bar .tb-dim-l{border-radius:6px 0 0 6px}
.clip-bar .tb-dim-r{border-radius:0 6px 6px 0}
.clip-bar .tb-handle{width:12px;top:-3px;bottom:-3px;border-radius:6px}
.clip-bar .tb-handle::after{height:9px}
.clip-bar .tb-tip{bottom:calc(100% + 6px);font-size:10px;padding:2px 6px}

/* filter preset chips: teal selection, no gold */
.filter-chips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{border:1px solid var(--line);background:var(--panel);
  color:var(--ink-dim);border-radius:99px;padding:7px 16px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.fchip:hover{border-color:var(--brand);color:var(--brand-deep)}
.fchip.active{background:var(--brand-soft);border-color:var(--brand);
  color:var(--brand-deep)}
.fchip-note{color:var(--green);font-weight:600}

/* near-black primary action; gold stays reserved for the approval gate */
.btn-primary{background:var(--ink);color:#F7F5F1;box-shadow:var(--shadow);
  white-space:nowrap}
.btn-primary:hover{background:#22262B;filter:none}

/* ── card hover previews (home + pipeline) ────────────────── */
.thumb video.hoverprev,.mini-thumb video.hoverprev{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;border-radius:inherit}
.mini-thumb{position:relative;overflow:hidden}

/* ── combine cuts (upload + pipeline) ─────────────────────── */
.combine-row{margin-top:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  box-shadow:var(--shadow)}
.combine-row .check{margin-bottom:4px}
.combine-row .hint{font-size:11.5px;color:var(--ink-faint);line-height:1.5}
.combine-pick{display:flex;align-items:center;gap:7px;margin-top:8px;
  font-size:11.5px;font-weight:600;color:var(--brand-deep);cursor:pointer}
.combine-pick input{width:15px;height:15px;accent-color:var(--brand)}
.combine-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 34px 4px;padding:10px 14px;background:var(--brand-soft);
  border:1px solid var(--brand);border-radius:12px}
.combine-bar span{font-size:12px;color:var(--brand-deep)}

/* ── responsive: clients open this on a phone ─────────────── */
@media (max-width:900px){
  .shell{flex-direction:column}
  /* the top-bar variant stays dark to match the rail */
  .sidebar{width:100%;min-width:0;height:auto;position:static;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;
    padding:10px 14px;border-right:0;
    border-bottom:1px solid var(--sidebar-line)}
  .logo{padding:0 6px 0 0}
  .logo .working{display:none}
  nav{flex-direction:row;order:3;width:100%;overflow-x:auto;gap:2px}
  nav a{white-space:nowrap;padding:7px 11px}
  .ws-switch{margin:0 0 0 auto;padding:0;max-width:52%}
  .ws-switch label{display:none}
  .client-pill{white-space:nowrap;padding:6px 10px}
  .whoami{margin:0;border:0;padding:0;flex-direction:row;align-items:center;
    gap:8px}
  .whoami > span:first-child{display:none}
  .feed,.wrap,.formwrap{padding-left:16px;padding-right:16px}
  .feed-head,.strip{padding-left:16px;padding-right:16px}
  .board{flex-direction:column;padding:14px 16px}
  .gate-fence{display:none}
  .col.gate{flex:1;width:100%}
  .ask-top{flex-direction:column}
  .thumb{width:100%;aspect-ratio:16/9}
  .ask-foot{flex-wrap:wrap}
  .detail-media{width:100%}
  .field-row{flex-direction:column;gap:0}
  .calgrid-head{display:none}
  .calgrid{display:flex;flex-direction:column;gap:8px;margin-bottom:0}
  .calcell{min-height:0}
  .calcell:not(.busy):not(.today){display:none}
  .editor-stage video{max-height:48vh}
  /* editor: tabs become a horizontal scroll row, the stage stacks above
     the context panel, the timeline scrolls sideways */
  .editor-grid{grid-template-columns:1fr;gap:12px}
  .tool-col{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .tool-btn{flex:none;white-space:nowrap}
  .stage-bar .btn-primary{flex:1}
  .stage-bar form{flex:1;display:flex}
  .stage-bar form .btn{width:100%}
  .tl-body{min-width:560px}
  .combine-bar{margin:0 16px 4px}
}

/* ── billing & subscription ───────────────────────────────── */
.wrap-billing{max-width:1180px}
/* current-plan header card */
.plan-now{display:flex;gap:24px;align-items:stretch;flex-wrap:wrap}
.plan-now .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:800}
.plan-now-main{flex:1;min-width:180px}
.plan-now-name{font-size:24px;font-weight:750;letter-spacing:-.01em;
  margin-top:4px}
.plan-now-price{font-size:13px;color:var(--ink-dim);margin-top:2px}
.plan-now-seats{min-width:200px;border-left:1px solid var(--line-soft);
  padding-left:24px}
.plan-now-seats .fig{font-size:24px;font-weight:750;margin-top:4px}
.plan-now-seats .note{font-size:11.5px;color:var(--ink-faint);margin-top:3px;
  line-height:1.45;max-width:260px}

/* monthly/annual toggle: informational only, so no gold and no surprises */
.cycle-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:4px 0 16px}
/* segmented-control chrome shared with the calendar tabs */
.cycle-toggle{cursor:pointer}
.cycle-check:not(:checked) ~ .cycle-row .cycle-m,
.cycle-check:checked ~ .cycle-row .cycle-a{
  background:var(--brand-soft);color:var(--brand-deep)}
.cycle-note{flex:1;min-width:240px;font-size:11.5px;color:var(--ink-faint);
  line-height:1.5}

/* tier cards, side by side */
.tier-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow)}
.tier-current{border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft),var(--shadow)}
.tier-flag{position:absolute;top:-9px;left:16px;background:var(--brand);
  color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;border-radius:99px;padding:2px 9px}
.tier-name{font-size:15px;font-weight:750}
.tier-price{font-size:24px;font-weight:750;letter-spacing:-.01em;margin-top:6px}
.tier-price .per{font-size:12.5px;font-weight:600;color:var(--ink-faint);
  margin-left:2px}
.tier-blurb{font-size:12px;color:var(--ink-dim);line-height:1.5;margin-top:6px;
  min-height:36px}
.tier-feats{list-style:none;margin:12px 0 0;padding:12px 0 0;
  border-top:1px solid var(--line-soft);display:flex;flex-direction:column;
  gap:7px}
.tier-feats li{font-size:12px;color:var(--ink-dim);line-height:1.45;
  padding-left:20px;position:relative}
.tier-feats li::before{content:"✓";position:absolute;left:2px;
  color:var(--green);font-weight:800;font-size:11px}
.tier-more{margin-top:10px}
.tier-more summary{font-size:12px;font-weight:700;color:var(--brand-deep);
  cursor:pointer;list-style:none;padding:2px 0}
.tier-more summary::-webkit-details-marker{display:none}
.tier-more summary::after{content:" +";font-weight:800}
.tier-more[open] summary::after{content:" \2212"}
.tier-more p{font-size:11.5px;color:var(--ink-dim);line-height:1.55;
  margin-top:7px}
.tier-more .tier-more-seats{color:var(--ink-faint)}
.tier-cta{width:100%;margin-top:14px}
.tier form{margin-top:auto}
.tier > .tier-cta{margin-top:auto}
.tier form .tier-cta{margin-top:14px}
.tier-more{margin-bottom:0}
.billing-foot{font-size:12px;color:var(--ink-faint);line-height:1.55;
  margin:14px 2px 20px}
@media (max-width:1080px){.tier-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .tier-row{grid-template-columns:1fr}
  .plan-now-seats{border-left:0;padding-left:0}
}
/* ── insights: tabs, range picker, heatmap, report cards ────
   Server-rendered only: the heatmap is a table of intensity-classed cells,
   no JS chart library anywhere. Teal carries the intensity scale; gold
   stays reserved for the approval gate. */
/* segmented-control chrome shared with the calendar tabs (see the
   segmented control block); only the margins live here */
.ins-tabs{margin:14px 0 18px;flex-wrap:wrap}
.ins-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:16px}
.ins-range{font-size:12px;color:var(--ink-faint)}
.ins-refresh{margin-left:auto}
.stat .n.na{font-size:13px;font-weight:600;color:var(--ink-faint);
  padding:7px 0 6px}
td.unavail{color:var(--ink-faint);font-style:italic}
.hm-scroll{overflow-x:auto}
table.hm-grid{border-collapse:separate;border-spacing:3px}
table.hm-grid th{font:700 9.5px var(--mono);color:var(--ink-faint);
  text-align:center;padding:0}
table.hm-grid th.hm-d{text-align:right;padding-right:6px;font-size:10px}
td.hm{width:22px;height:18px;min-width:16px;border-radius:4px;
  background:var(--bg-2)}
i.hm{display:inline-block;width:16px;height:12px;border-radius:3px;
  background:var(--bg-2);margin:0 1px;vertical-align:middle}
.hm-1{background:#DBEEEC}
.hm-2{background:#ACDCDA}
.hm-3{background:#62BCBA}
.hm-4{background:var(--brand)}
.hm-legend{display:flex;align-items:center;gap:4px;margin-top:10px;
  font-size:11px;color:var(--ink-faint)}
.hm-note{margin-left:10px}
.report-cards{display:flex;gap:12px;flex-wrap:wrap}
.report-card{flex:1;min-width:220px;border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;background:var(--panel);
  box-shadow:var(--shadow)}
.report-card .rc-name{font-size:13.5px;font-weight:750}
.report-card .rc-desc{font-size:11.5px;color:var(--ink-faint);
  line-height:1.5;margin:5px 0 10px}
.report-card form{display:flex;gap:8px;align-items:center}
.report-card select{background:var(--panel);border:1px solid var(--line);
  border-radius:8px;font:600 12px/1.4 inherit;color:var(--ink);
  padding:6px 8px}
.report-body table.grid{margin-top:6px}
.report-note{font-size:11.5px;color:var(--ink-faint);line-height:1.5;
  margin:6px 0 10px}

/* ── text layers (editor): teal selection, no gold ──────── */
.layer-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.layer-row{border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  background:var(--panel);box-shadow:var(--shadow)}
.layer-row.armed{border-color:var(--brand);background:var(--brand-soft)}
.layer-fields{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.layer-fields input,.layer-fields select,
.layer-add input,.layer-add select{background:var(--panel);
  border:1px solid var(--line);border-radius:8px;font-family:inherit;
  font-size:12.5px;color:var(--ink);padding:6px 8px}
.layer-fields input:focus,.layer-fields select:focus,
.layer-add input:focus,.layer-add select:focus{outline:none;
  border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.layer-fields .layer-size,
.layer-fields .layer-start,.layer-fields .layer-end{width:74px;
  font-family:var(--mono);font-size:12px}
.layer-fields .layer-body{flex:1;min-width:160px}
.layer-fields .dash,.layer-add .dash{font-size:10px;color:var(--ink-faint)}
.layer-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:8px}
.layer-actions .layer-pos{font:11.5px var(--mono);color:var(--ink-faint)}
.layer-row.armed .layer-pos{color:var(--brand-deep)}
.layer-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.layer-add input[name=body]{flex:1;min-width:160px}
.layer-add input[name=size],.layer-add input[name=start],
.layer-add input[name=end]{width:74px;font-family:var(--mono);font-size:12px}

/* ── HELP CENTER: hub + articles. Teal accents only, no gold ─ */
.help-wrap{max-width:880px}
.help-h2{font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin:30px 0 4px}

/* hub cards */
.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px;margin-top:12px}
.help-card{display:flex;flex-direction:column;gap:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  text-decoration:none;box-shadow:var(--shadow)}
.help-card:hover{border-color:var(--brand);box-shadow:var(--shadow-lg)}
.help-card h3{font-size:14px;font-weight:750;color:var(--ink)}
.help-card p{font-size:12.5px;color:var(--ink-dim);line-height:1.55;flex:1}
.help-card .go{font-size:12px;font-weight:700;color:var(--brand-deep)}

/* "How GetLogOff works" primer on the hub */
.help-primer{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 22px;margin-top:12px}
.help-flow{list-style:none;counter-reset:flow;margin:0;padding:0}
.help-flow li{counter-increment:flow;position:relative;padding:7px 0 7px 40px;
  font-size:13.5px;color:var(--ink-dim);line-height:1.6}
.help-flow li b{color:var(--ink)}
.help-flow li::before{content:counter(flow);position:absolute;left:0;top:9px;
  width:26px;height:26px;border-radius:50%;background:var(--brand-soft);
  color:var(--brand-deep);font-size:12px;font-weight:800;
  display:grid;place-items:center}

/* article page */
.help-crumb{font-size:12px;color:var(--ink-faint);margin-bottom:12px}
.help-crumb a{color:var(--brand);text-decoration:none;font-weight:600}
.help-crumb a:hover{text-decoration:underline}
.help-crumb span{margin:0 4px}
.help-article{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px}
.help-article h1{font-size:22px;font-weight:750;letter-spacing:-.01em}
.help-intro{font-size:14px;color:var(--ink-dim);line-height:1.65;
  margin-top:8px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.help-article h2{font-size:16px;font-weight:750;color:var(--ink);
  margin:24px 0 6px}
.help-article p{font-size:13.5px;color:var(--ink-dim);line-height:1.65;
  margin:7px 0}
.help-article p b{color:var(--ink)}
.help-article ol,.help-article ul{margin:8px 0 10px;padding-left:24px}
.help-article li{font-size:13.5px;color:var(--ink-dim);line-height:1.65;
  margin:6px 0}
.help-article li b{color:var(--ink)}
.help-article li::marker{color:var(--brand-deep);font-weight:700}
.help-article a{color:var(--brand);text-decoration:none;font-weight:600}
.help-article a:hover{text-decoration:underline}

/* honest-caveat callout: brand-teal, deliberately not the gate's gold */
.help-callout{background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:10px;padding:12px 15px;font-size:13px;color:var(--ink-dim);
  line-height:1.6;margin:12px 0}
.help-callout b{color:var(--brand-deep)}

/* troubleshooting entries */
.trouble{border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;margin:14px 0;background:var(--panel)}
.trouble h2{margin-top:0}
.trouble .symptom{background:var(--panel-2);border-radius:8px;
  padding:8px 11px}

/* "Still stuck?" footer on every article */
.help-footer{margin-top:28px;padding-top:16px;
  border-top:1px solid var(--line-soft)}
.help-footer h2{margin-top:0}

@media (max-width:720px){
  .help-article{padding:20px 18px}
  .help-grid{grid-template-columns:1fr}
}

/* ── guided start (home): three steps until the work is flowing ── */
.setup-panel{margin:22px 34px 0;max-width:912px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow)}
.setup-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px}
.setup-panel h2{font-size:17px;font-weight:750;letter-spacing:-.01em}
.setup-sub{color:var(--ink-dim);font-size:13px;margin-top:3px;
  max-width:560px;line-height:1.5}
.setup-side{display:flex;align-items:center;gap:14px;white-space:nowrap}
.setup-progress{font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-deep);
  background:var(--brand-soft);border-radius:99px;padding:4px 10px}
.setup-hide{background:none;border:0;color:var(--ink-faint);font:inherit;
  font-size:12px;cursor:pointer;padding:0}
.setup-hide:hover{color:var(--ink-dim);text-decoration:underline}
.setup-cards{display:flex;gap:12px;margin-top:16px}
.setup-card{flex:1;min-width:0;border:1px solid var(--line);
  border-radius:12px;padding:14px;display:flex;flex-direction:column;
  gap:7px;align-items:flex-start}
.setup-card.is-done{background:var(--panel-2);border-color:var(--line-soft)}
.setup-badge{width:24px;height:24px;border-radius:50%;display:grid;
  place-items:center;font-size:12px;font-weight:800;
  background:var(--brand-soft);color:var(--brand-deep)}
.setup-card.is-done .setup-badge{background:var(--green-soft);
  color:var(--green)}
.setup-card-title{font-size:13.5px;font-weight:700}
.setup-card.is-done .setup-card-title{color:var(--ink-dim)}
.setup-card-line{font-size:12px;color:var(--ink-dim);line-height:1.5;flex:1}
.setup-done-note{font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green)}
.setup-btn{text-decoration:none;display:inline-block}
@media (max-width:900px){
  .setup-panel{margin:14px 16px 0}
  .setup-cards{flex-direction:column}
  .setup-head{flex-direction:column}
  .setup-side{width:100%;justify-content:space-between}
}
/* ── trends (insights): ingested-only, honest provenance ────
   Tabs come from the shared .ins-tabs segmented control. */
.trend-head{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:16px 0 4px}
.trend-captured{font-size:13px;color:var(--ink-dim)}
.trend-captured b{color:var(--ink)}
.trend-scope{display:inline-block;margin-left:8px;font-size:10.5px;
  font-weight:800;letter-spacing:.06em;color:var(--blue);
  background:var(--blue-soft);border-radius:99px;padding:2px 9px}
.trend-picker{background:var(--panel);border:1px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:12.5px;color:var(--ink);
  padding:6px 8px;max-width:100%}
.trend-picker:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 2px var(--brand-soft)}
.trend-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:16px;margin-top:14px}
.trend-panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
.trend-panel h2{font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.trend-row{display:flex;align-items:center;gap:8px;padding:8px 6px;
  border-bottom:1px solid var(--line-soft);text-decoration:none;
  font-size:13px;border-radius:8px}
.trend-row:last-of-type{border-bottom:0}
.trend-row:hover{background:var(--panel-2)}
.trend-rank{font:600 11px var(--mono);color:var(--ink-faint);width:18px;
  flex:none;text-align:right}
.trend-term{flex:1;min-width:0;font-weight:650;color:var(--ink);
  overflow-wrap:anywhere;word-break:normal}
.trend-vol{font:600 12px var(--mono);color:var(--ink-dim);white-space:nowrap}
.badge-new{flex:none;font-size:10.5px;font-weight:800;border-radius:99px;
  padding:2px 8px;color:var(--blue);background:var(--blue-soft)}
.badge-growth{flex:none;font:800 10.5px var(--mono);border-radius:99px;
  padding:2px 8px;color:var(--green);background:var(--green-soft)}
.badge-growth.down{color:var(--red);background:var(--red-soft)}
.trend-empty{margin-top:22px;background:var(--panel);
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:22px 24px;max-width:640px;font-size:13.5px;color:var(--ink-dim);
  line-height:1.6}
.trend-empty b{color:var(--ink)}
.trend-empty p{margin-top:8px}
.trend-empty a{color:var(--brand);font-weight:600}
.trend-foot{margin-top:16px;font-size:12px;color:var(--ink-faint);
  line-height:1.55;max-width:720px}
.trend-backline{margin:2px 0 10px;font-size:12.5px}
.trend-backline a{color:var(--blue);text-decoration:none}
.trend-backline a:hover{text-decoration:underline}
.trend-kind{display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--line);border-radius:99px;padding:2px 9px}
/* stat-tile chrome shared with .stat (see the stat tiles block) */
.trend-stats{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.trend-stat{min-width:150px}
.trend-stat .val{margin-top:4px;font:650 16px var(--mono);color:var(--ink)}
.trend-stat .val.na{font:500 13px var(--serif);color:var(--ink-faint)}
.trend-stat .val .pos,.trend-stat .val.pos{color:var(--green)}
.trend-stat .val .neg,.trend-stat .val.neg{color:var(--red)}
.trend-notes{margin:4px 0 14px;font-size:13px;color:var(--ink-dim);
  line-height:1.6;max-width:720px;white-space:pre-wrap}
.trend-h2{font-size:15px;font-weight:750;margin:18px 0 10px}
.sample-card{display:block;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:10px 12px;margin-bottom:8px;text-decoration:none;max-width:720px}
.sample-card:hover{border-color:var(--brand)}
.sample-card .snippet{font-size:13px;color:var(--ink);line-height:1.55;
  overflow-wrap:anywhere;word-break:normal}
.sample-card .meta{margin-top:5px;font:11.5px var(--mono);
  color:var(--ink-faint);overflow-wrap:anywhere;word-break:normal}
.trend-setup-panel{margin-top:16px;max-width:860px}
.trend-key-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:14px}
.trend-key-form input{flex:1;min-width:220px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;font-family:inherit;
  font-size:12.5px;color:var(--ink);padding:7px 9px}
.trend-key-form input:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 2px var(--brand-soft)}
.trend-curl{margin:10px 0;background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  overflow:auto}
.trend-curl code{font:500 11.5px var(--mono);color:var(--ink-dim);
  white-space:pre}
.trendkey-once{margin:14px 0}

/* ── assistant: chat on the workspace's own key ────────────
   Teal only. The assistant sits UPSTREAM of the gate, so nothing here
   wears gold; the one gold control stays Approve. No fake typing effects:
   the busy state is a plain line of text. */
.wrap-assistant{max-width:1040px}
.ai-layout{display:flex;gap:16px;align-items:flex-start;margin-top:6px}
.ai-side{width:220px;min-width:200px;display:flex;flex-direction:column;
  gap:6px}
.ai-new{text-align:center;text-decoration:none}
.ai-side-title{font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:10px;
  padding:0 2px}
.ai-side-empty{font-size:12px;color:var(--ink-faint);padding:4px 2px}
.ai-recent{display:block;text-decoration:none;font-size:12.5px;
  color:var(--ink-dim);border:1px solid var(--line);border-radius:9px;
  background:var(--panel);padding:8px 10px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ai-recent:hover{border-color:var(--brand);color:var(--ink)}
.ai-recent.active{background:var(--brand-soft);border-color:var(--brand);
  color:var(--brand-deep)}
.ai-main{flex:1;min-width:0;display:flex;flex-direction:column;
  margin-bottom:0}
.ai-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
  margin-bottom:12px}
.ai-chip{font-size:11px;font-weight:800;color:var(--brand-deep);
  background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:99px;
  padding:3px 10px;font-family:var(--mono)}
.ai-head-note{font-size:11.5px;color:var(--ink-faint)}

/* mode cards: guided starts instead of a blank box */
.ai-modes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ai-mode{display:flex;flex-direction:column;gap:4px;text-align:left;
  cursor:pointer;font-family:inherit;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  box-shadow:var(--shadow)}
.ai-mode:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.ai-mode-title{font-size:13px;font-weight:750;color:var(--ink)}
.ai-mode-sub{font-size:11.5px;color:var(--ink-faint);line-height:1.45}
.ai-modes-note{font-size:11.5px;color:var(--ink-faint);margin:8px 0 4px}

/* the thread */
.ai-thread{display:flex;flex-direction:column;gap:10px;margin:8px 0;
  max-height:52vh;overflow-y:auto;padding:2px}
.ai-msg{display:flex;flex-direction:column;max-width:86%}
.ai-user{align-self:flex-end;align-items:flex-end}
.ai-assistant{align-self:flex-start;align-items:flex-start}
.ai-bubble{border:1px solid var(--line);border-radius:14px;
  padding:9px 13px;font-size:13px;line-height:1.55;white-space:pre-wrap;
  overflow-wrap:anywhere}
.ai-user .ai-bubble{background:var(--brand-soft);border-color:var(--brand-line);
  color:var(--ink)}
.ai-assistant .ai-bubble{background:var(--panel-2);color:var(--ink)}
/* the honest cost line under each reply */
.ai-usage{font-size:10.5px;color:var(--ink-faint);margin-top:3px;
  font-family:var(--mono)}
/* a tool call in the transcript: quiet, factual, never a bubble */
.ai-tool{align-self:flex-start;font-size:11px;color:var(--ink-faint);
  padding:1px 4px}
.ai-tool code{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);
  background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:5px;padding:1px 5px}

/* plain busy state: a sentence, not a fake typing animation */
.ai-busy{font-size:12px;color:var(--brand-deep);background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:9px;padding:8px 12px;margin:6px 0}

.ai-form{display:flex;gap:10px;align-items:flex-end;margin-top:8px}
.ai-form textarea{flex:1;min-width:0;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;color:var(--ink);
  font:13.5px/1.5 inherit;font-family:inherit;padding:10px 13px;
  resize:vertical;min-height:64px}
.ai-form textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.ai-disclosure{font-size:11px;color:var(--ink-faint);line-height:1.5;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}

/* no-key empty state: plain words, no icon, one teal action */
.ai-empty{text-align:center;padding:34px 26px}
.ai-empty h2{font-size:17px;font-weight:750;margin-bottom:6px}
.ai-empty-lede{font-size:13px;color:var(--ink-dim);line-height:1.6;
  max-width:560px;margin:0 auto 16px}
.ai-empty-note{font-size:11.5px;color:var(--ink-faint);margin-top:10px}

@media (max-width:900px){
  .ai-layout{flex-direction:column}
  .ai-side{width:100%;min-width:0}
  .ai-modes{grid-template-columns:1fr}
  .ai-msg{max-width:100%}
}

/* ── account menu (sidebar foot): avatar button + popover ─────
   White card, shadow-lg, teal hover; gold stays reserved for the gate.
   Opens upward on desktop (the chip sits at the sidebar bottom) and
   downward on phones, where the sidebar is a horizontal top bar. */
.whoami{position:relative}
.whoami-btn{display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;border-radius:10px;padding:8px;cursor:pointer;
  font:inherit;text-align:left;color:var(--sidebar-dim)}
.whoami-btn:hover{background:var(--sidebar-hover)}
.whoami-btn:focus-visible{outline:none;
  box-shadow:0 0 0 3px rgba(14,165,164,.35)}
.whoami-btn[aria-expanded=true]{background:var(--sidebar-active)}
.whoami .avatar{width:30px;height:30px;min-width:30px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-deep);display:grid;
  place-items:center;font-size:13px;font-weight:800}
.whoami-btn .avatar{background:var(--sidebar-active);
  color:var(--sidebar-active-ink)}
.whoami-id{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.whoami-email{font-size:11.5px;font-weight:600;color:var(--sidebar-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whoami-caret{width:14px;height:14px;color:var(--sidebar-faint);flex:none}

.account-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:6px;z-index:40}
.account-menu[hidden]{display:none}
.account-menu-head{display:flex;align-items:center;gap:10px;
  padding:8px 10px 10px;border-bottom:1px solid var(--line-soft);
  margin-bottom:6px}
.account-menu-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.account-menu-email{font-size:12px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu-item{display:flex;align-items:center;gap:9px;width:100%;
  font-size:12.5px;font-weight:600;color:var(--ink-dim);text-decoration:none;
  border:0;background:none;border-radius:8px;padding:8px 10px;cursor:pointer;
  font-family:inherit;text-align:left}
.account-menu-item svg{width:15px;height:15px;flex:none;opacity:.85}
.account-menu-item:hover{background:var(--brand-soft);color:var(--brand-deep)}
.account-menu-div{height:1px;background:var(--line-soft);margin:6px 4px}
.account-menu form{display:block}
.account-signout:hover{background:var(--red-soft);color:var(--red)}

@media (max-width:900px){
  /* the top bar is height:auto, so it never needed to scroll; visible
     overflow lets the popover drop below it instead of being clipped.
     The menu anchors to the bar itself (not the chip, whose spot in the
     wrapping row varies) and drops below it, clamped to the viewport. */
  .sidebar{position:relative;overflow:visible}
  .whoami{position:static}
  .whoami-btn{padding:5px 6px}
  .whoami-email{display:none}
  .whoami-id{flex:none}
  .account-menu{left:auto;right:10px;bottom:auto;top:calc(100% + 6px);
    width:min(280px,calc(100vw - 20px))}
}

/* ── WHAT'S NEW: curated changelog timeline ───────────────── */
.wn-wrap{max-width:760px}
.wn-list{list-style:none;margin:18px 0 0;padding:0;position:relative}
.wn-list::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;
  width:2px;background:var(--line-soft);border-radius:2px}
.wn-item{position:relative;padding:0 0 26px 30px}
.wn-item:last-child{padding-bottom:6px}
.wn-item::before{content:"";position:absolute;left:0;top:5px;width:12px;
  height:12px;border-radius:50%;background:var(--panel);
  border:3px solid var(--brand)}
.wn-improved::before{border-color:var(--blue)}
.wn-fixed::before{border-color:var(--green)}
.wn-date{font:600 11px var(--mono);color:var(--ink-faint);
  letter-spacing:.04em}
.wn-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:3px}
.wn-title{font-size:15px;font-weight:750;letter-spacing:-.01em}
.wn-blurb{font-size:13px;color:var(--ink-dim);line-height:1.6;margin-top:4px;
  max-width:580px}
/* tag pills per the design system: teal / blue / green, no gold */
.wn-tag{font-size:9.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;border-radius:99px;padding:2px 9px;
  border:1px solid var(--line)}
.wn-tag-new{color:var(--brand-deep);border-color:var(--brand-line);
  background:var(--brand-soft)}
.wn-tag-improved{color:var(--blue);border-color:var(--blue-line);
  background:var(--blue-soft)}
.wn-tag-fixed{color:var(--green);border-color:var(--green-line);
  background:var(--green-soft)}

/* ── BEST-TIME CHIPS: suggested-time helper on post detail ── */
/* teal .fchip family; gold stays reserved for the approval gate */
.besttimes{margin-top:8px}
.besttimes-lede{font-size:11.5px;color:var(--ink-faint);margin-bottom:6px}
.fchip-time{padding:5px 12px;font-size:12px}

/* ── calendar grid preview: the phone-framed profile grid ──
   The Grid sub-tab under Calendar. Bezel and scale imitate the post
   detail phone frame; status rides the tile edge (amber = waiting on a
   human, green = armed, no ring = already live); the network picker is
   chips wearing the usual pdot icons, active = teal. */
.grid-nets{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
.grid-net{display:inline-flex;align-items:center;text-decoration:none;
  font-size:12.5px;font-weight:700;color:var(--ink-dim);
  background:var(--panel);border:1px solid var(--line);border-radius:99px;
  padding:6px 13px;box-shadow:var(--shadow)}
.grid-net:hover{background:var(--panel-2);color:var(--ink)}
.grid-net.active{background:var(--brand-soft);color:var(--brand-deep);
  border-color:var(--brand-line)}
.grid-phone{width:302px;min-width:272px;border:8px solid var(--ink);
  border-radius:26px;background:#fff;overflow:hidden;
  box-shadow:var(--shadow-lg);margin-top:12px}
.grid-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.grid-tile{position:relative;display:block;aspect-ratio:3/4;
  background:var(--panel-2);overflow:hidden;text-decoration:none}
.grid-tile img{width:100%;height:100%;object-fit:cover;display:block}
.gt-noimg{position:absolute;inset:0;
  background:linear-gradient(160deg,var(--panel-2),var(--line-soft))}
.gt-when{position:absolute;left:0;right:0;bottom:0;padding:16px 6px 4px;
  font:600 9px/1.35 var(--mono);color:#fff;
  background:linear-gradient(transparent,rgba(20,23,26,.62))}
/* status on the tile edge; a plain tile is simply in the feed already */
.grid-tile::after{content:"";position:absolute;inset:0;pointer-events:none}
.grid-tile.gt-pending::after{box-shadow:inset 0 0 0 3px var(--amber-edge)}
.grid-tile.gt-sched::after{box-shadow:inset 0 0 0 3px var(--green)}
/* the owner's All view: no single profile to preview, so no grid */
.grid-allstate{max-width:640px}
.grid-allstate p{color:var(--ink-dim);font-size:13px;line-height:1.6;
  margin-top:6px}
.grid-allstate-links{display:flex;gap:8px 18px;flex-wrap:wrap;
  margin-top:12px}
.grid-allstate-links a{color:var(--brand);font-weight:600;font-size:13px;
  text-decoration:none}
.grid-allstate-links a:hover{text-decoration:underline}

/* ── CALENDAR FILTER CHIPS (feature/calfilters) ───────────── */
/* Plain GET links styled as fchips: teal means selected, per the fchip
   contract. The one gold chip is the active "Awaiting approval" filter;
   gold always means waiting on a human, so that chip is the one-tap view
   of everything waiting on a client. */
.cal-filters{margin:0 0 14px}
.cal-filters .fchip{text-decoration:none;display:inline-flex;
  align-items:center}
.fchip-gap{width:1px;align-self:stretch;background:var(--line);
  margin:2px 6px}
.fchip.gate{background:var(--amber-soft);border-color:var(--amber-line);
  color:var(--amber)}
.fchip.gate:hover{border-color:var(--amber);color:var(--amber)}

/* ── SLOT-TO-COMPOSE (feature/calfilters) ─────────────────── */
/* Click an empty patch of a day to compose into that slot. The + shows on
   hover and never intercepts the pointer, so chip links and the drag-drop
   reschedule keep working exactly as before. */
.calcell{position:relative;cursor:pointer}
.calcell::after{content:"+";position:absolute;right:9px;bottom:7px;
  font:700 15px/1 var(--mono);color:var(--brand);opacity:0;
  pointer-events:none}
.calcell:hover::after{opacity:.7}
.calcell.dropzone-hot::after{opacity:0}
/* the Suggested slot field on the upload screen */
.slot-field{max-width:420px;margin-top:16px}

/* ── QUEUE (feature/queue): the what-goes-out-next list ───────
   Calendar's Queue sub-tab: day groups of whole-row links, reusing the
   cal-day headers. Status owns the color and rides the 3px left edge
   (amber = waiting on a human, green = armed, blue = live, red =
   failed); the pdot names the network; the gold chip marks rows still
   waiting on a human Approve. Read-only: no controls inside a row. */
.q-wrap{max-width:880px}
.q-row{display:flex;gap:12px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-left-width:3px;border-radius:12px;
  padding:10px 14px;margin-bottom:8px;box-shadow:var(--shadow);
  text-decoration:none;color:var(--ink);min-width:0}
.q-row:hover{border-color:var(--brand)}
.q-row.pending{border-left-color:var(--amber-edge)}
.q-row.sched{border-left-color:var(--green)}
.q-row.live{border-left-color:var(--blue)}
.q-row.bad{border-left-color:var(--red)}
.q-time{font:600 12px var(--mono);min-width:74px;flex:none;
  color:var(--green)}
.q-row.pending .q-time{color:var(--amber)}
.q-row.live .q-time{color:var(--blue)}
.q-row.bad .q-time{color:var(--red)}
.q-thumb{width:34px;height:46px;border-radius:6px;flex:none;display:block;
  object-fit:cover;border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--panel-2),var(--line-soft))}
.q-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.q-title{font-size:13px;font-weight:650;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.q-cap{font-size:12px;color:var(--ink-faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* the gate chip: gold only because these rows wait on a human */
.q-gate{flex:none;font-size:10.5px;font-weight:700;border-radius:99px;
  padding:3px 9px;color:var(--amber);border:1px solid var(--amber-line);
  background:var(--amber-soft)}
.q-end{color:var(--ink-faint);font-size:12.5px;padding:6px 0 14px}
@media (max-width:640px){
  .q-cap{display:none}
  .q-time{min-width:56px}
}

/* ── REVIEW THREAD (feature/reviewthread) ─────────────────── */
/* The notes panel is a neutral surface: white card, no gold anywhere in it.
   The one amber thing this feature adds is .rv-due, and that is gate
   pressure by definition: it only ever renders on a post that is waiting
   on a human whose slot is inside the next 24 hours. */
.rv-thread h2{margin-bottom:2px}
.rv-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px}
.rv-list{margin-top:12px}
.rv-note{padding:10px 0}
.rv-note+.rv-note{border-top:1px solid var(--line-soft)}
.rv-note-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rv-author{font-size:12.5px;font-weight:700;color:var(--ink)}
.rv-when{font:11px var(--mono);color:var(--ink-faint)}
.rv-body{margin-top:3px;font-size:13px;line-height:1.55;
  color:var(--ink-dim);white-space:pre-line;overflow-wrap:anywhere}
.rv-none{color:var(--ink-faint);font-size:12.5px;line-height:1.5;
  padding:4px 0 2px}
.rv-closed{color:var(--ink-faint);font-size:12.5px;margin-top:10px;
  padding-top:12px;border-top:1px solid var(--line-soft)}
.rv-form{margin-top:12px;padding-top:14px;border-top:1px solid var(--line-soft)}
.rv-form textarea{width:100%;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font:13.5px/1.5 inherit;font-family:inherit;padding:10px 13px;
  min-height:74px;resize:vertical}
.rv-form textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.rv-form .btn{margin-top:10px}
.rv-due{color:var(--amber);font-size:11.5px;font-weight:700;
  align-self:center;white-space:nowrap}
.gatebox .rv-due,.locked .rv-due{display:block;margin-top:6px}

/* ── COMPOSER (feature/composer) ──────────────────────────── */
/* One cut, tuned per network. Everything on this screen sits UPSTREAM of
   the approval gate, so NOTHING here is gold: the primary action is the
   near-black solid, network chips are the teal selection family, and the
   preview reuses the post-detail phone bezel. The one gold-adjacent thing, the
   "Post now" card, is permanently disabled (opacity, per the button
   rules) because nothing posts without a human approve. */
.cmp-grid{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.cmp-main{flex:1;min-width:320px}
.cmp-side{width:290px;min-width:260px}
.cmp-block{margin-bottom:14px}
.cmp-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px}
/* network chips: pdot + name; active = this post or an existing sibling */
.cmp-nets{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-bottom:10px}
.cmp-nets form{display:inline-flex}
.cmp-net{display:inline-flex;align-items:center;font-size:12.5px;
  font-weight:700;color:var(--ink-dim);background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:6px 13px;
  text-decoration:none;cursor:pointer;font-family:inherit}
.cmp-net .pdot{margin-right:6px}
a.cmp-net:hover,button.cmp-net:hover{border-color:var(--brand);
  color:var(--brand-deep)}
.cmp-net.active{background:var(--brand-soft);border-color:var(--brand);
  color:var(--brand-deep)}
.cmp-net-add{border-style:dashed}
/* live character counters; red only when over, message appears with it */
.cmp-countrow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  margin-top:5px}
.cmp-count{font:11px var(--mono);color:var(--ink-faint)}
.cmp-count.cmp-count-over{color:var(--red)}
.cmp-over{font-size:11.5px;color:var(--red)}
.cmp-first{min-height:56px}
/* the schedule split control: four radio cards in a row */
.cmp-when{display:flex;gap:10px;flex-wrap:wrap}
.cmp-card{flex:1;min-width:132px;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;cursor:pointer;
  background:var(--panel);display:block}
.cmp-card input{accent-color:var(--brand);margin-right:6px;
  vertical-align:1px}
.cmp-card:hover{border-color:var(--brand)}
.cmp-card:has(input:checked){border-color:var(--brand);
  background:var(--brand-soft)}
.cmp-card-t{font-size:12.5px;font-weight:700;color:var(--ink)}
.cmp-card-d{display:block;font-size:11px;color:var(--ink-faint);
  margin-top:4px;line-height:1.4}
.cmp-card-off{opacity:.55;cursor:not-allowed}
.cmp-card-off:hover{border-color:var(--line)}
.cmp-pick{margin-top:12px}
.cmp-pick .field{margin-bottom:0;max-width:420px}
/* footer bar: honest status left, actions right, strongest rightmost */
.cmp-foot{display:flex;align-items:center;gap:10px;
  justify-content:flex-end;flex-wrap:wrap;margin-top:4px;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.cmp-status{margin-right:auto;font-size:12px;color:var(--ink-faint)}
/* phone-frame preview: the post-detail bezel, cover + caption only */
.cmp-preview summary{cursor:pointer}
.cmp-phone{border:8px solid var(--ink);border-radius:22px;background:#000;
  overflow:hidden;box-shadow:var(--shadow-lg);margin-top:4px}
.cmp-phone img{width:100%;display:block;aspect-ratio:9/16;object-fit:cover}
.cmp-nocover{aspect-ratio:9/16;display:grid;place-items:center;
  color:#9AA0A8;font-size:12px;text-align:center;padding:20px}
.cmp-phone-cap{padding:10px 12px;background:#171A1E}
.cmp-phone-net{display:flex;align-items:center;gap:6px;font-size:10px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#9AA0A8}
.cmp-phone-text{margin-top:6px;font-size:11.5px;line-height:1.5;
  color:#E8E6E1;white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:180px;overflow:auto}
/* provenance badge: teal outline, NEVER gold; provenance is not
   approval, and only the gate wears gold */
.cmp-ai-badge{display:inline-flex;align-items:center;font-size:10.5px;
  font-weight:700;border-radius:99px;padding:3px 9px;
  border:1px solid var(--brand);color:var(--brand-deep);
  background:var(--panel);white-space:nowrap}
@media (max-width:900px){
  .cmp-grid{flex-direction:column}
  .cmp-side{width:100%;min-width:0}
  .cmp-foot .btn{flex:1;text-align:center}
}

/* ── CONNECT TILES: the not-switched-on-yet note ──────────── */
.conn-note{background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.55;
  color:var(--ink-dim)}
.conn-note-h4{font-size:13px;font-weight:750;color:var(--ink);margin:0 0 6px}
.conn-note p{margin:0 0 8px}
.conn-note-steps{margin:0 0 8px;padding-left:20px;display:flex;
  flex-direction:column;gap:5px}
.conn-note-steps li{line-height:1.5}
.conn-note-more{margin:0;font-size:11.5px;color:var(--ink-faint)}
.conn-note code{font:500 11.5px var(--mono);background:var(--panel);
  border:1px solid var(--line-soft);border-radius:6px;padding:1px 6px;
  word-break:break-all}

/* ── pipeline waiting cards, upgraded (2026-08-20) ──────────────────────────
   The home feed merged into the Pipeline: the waiting column now carries the
   full approval context those cards carried. Clicking through to the post
   page is the approve path; the card itself holds no approve control. */
.approve-mini{align-items:flex-start}
.approve-mini .mini-thumb{width:56px;height:96px;min-width:56px}
.mini-thumb .play{position:absolute;inset:0;margin:auto;width:22px;height:22px;
  border-radius:50%;background:rgba(20,23,26,.65);
  border:1px solid rgba(255,255,255,.5);display:grid;place-items:center}
.mini-thumb .play::after{content:"";border-left:6px solid #fff;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  margin-left:2px}
.approve-mini-main{flex:1;min-width:0}
.approve-mini .chips{margin-top:6px}
.approve-mini .cap{margin-top:8px}
.approve-mini .waiting{display:inline-block;margin:8px 0 0;white-space:normal}

/* ── login v2: split sign-in (2026-08-20) ───────────────────────────────────
   The sign-in card keeps every .login-card rule above (the password
   templates share that chrome); everything new is login2- namespaced.
   The brand panel is the one place the gold gradient appears as identity,
   per the spec: it is a backdrop, never a control. Under 900px the panel
   hides and the card centers; verified usable at 375px. */
.login2-shell{display:flex;min-height:100vh;background:var(--bg)}
.login2-main{flex:1;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(600px 400px at 20% 0%,var(--brand-soft) 0%,transparent 60%),
    var(--bg)}
.login2-card{max-width:420px}
.login2-div{display:flex;align-items:center;gap:10px;margin-top:18px;
  color:var(--ink-faint);font-size:11.5px}
.login2-div::before,.login2-div::after{content:"";flex:1;height:1px;
  background:var(--line-soft)}
.login2-social{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.login2-provider{display:flex;align-items:center;justify-content:center;
  gap:9px;width:100%;padding:11px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--ink);
  font-size:13.5px;font-weight:600;text-decoration:none}
.login2-provider:hover{background:var(--panel-2)}
.login2-provider:focus-visible{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.login2-glyph{flex:none}
.login2-brand{width:44%;max-width:560px;display:flex;align-items:center;
  justify-content:center;padding:48px 40px;background:var(--gold-grad)}
.login2-brand-inner{max-width:360px;color:var(--amber-ink)}
/* On the gold panel the mark stands alone in ink: a gold tile on gold is
   the one placement the brand sheet rules out. */
.login2-brand-word{width:min(300px,72%);display:block;margin-bottom:16px}
.login2-brand-name{font-weight:800;font-size:26px;letter-spacing:-.01em}
.login2-brand-tag{font-size:14px;margin-top:6px;opacity:.85}
.login2-brand-line{margin-top:22px;padding-top:16px;font-size:13px;
  line-height:1.6;border-top:1px solid rgba(59,44,7,.25)}
@media (max-width:900px){
  .login2-brand{display:none}
  .login2-main{padding:16px}
}

/* ── the music picker + the simplified upload screen ──────── */
/* One shared box (_music_picker.html) on upload and post detail:
   genre chips left, the workspace's library tracks right, stacked on
   mobile. Chips are the teal .fchip family; gold stays the gate's. */
.mpick{border:1px solid var(--line);border-radius:12px;
  background:var(--panel);padding:14px 16px;margin-top:16px}
.mp-hint{font-size:11.5px;color:var(--ink-faint);margin-bottom:10px}
.mp-row{display:flex;gap:16px;align-items:flex-start}
.mp-chips{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;
  flex:0 1 300px}
.mp-panel{flex:1;min-width:0;border-left:1px solid var(--line-soft);
  padding-left:16px}
.mp-track{display:flex;gap:8px;align-items:center;font-size:12.5px;
  padding:5px 0;cursor:pointer}
.mp-track .mp-dur{margin-left:auto;font:11px var(--mono);
  color:var(--ink-faint)}
.mp-none{font-size:12px;color:var(--ink-faint);line-height:1.5;
  padding:4px 0}
.mp-audio-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:8px}
.mp-audio-form input[type=file]{font-size:12px}
.mp-tracks form{margin-top:8px}
.mp-more{margin-top:12px}
.mp-more summary{font-size:11.5px;color:var(--ink-faint);cursor:pointer;
  user-select:none}
.mp-more .field{margin-top:8px;margin-bottom:0;max-width:420px}
@media (max-width:900px){
  .mp-row{flex-direction:column}
  .mp-chips{flex-basis:auto}
  .mp-panel{border-left:0;padding-left:0;width:100%}
}
/* upload page: the dropzone is the hero, the facts are one quiet row,
   file rows sit flatter (no card shadow) */
.dropzone{padding:64px 24px;margin-top:6px}
.upfacts{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px;
  font-size:12.5px}
.upfact .k{display:block;font:800 10px var(--mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-faint);margin-bottom:2px}
.uprow{box-shadow:none;border-color:var(--line-soft);padding:10px 14px}
.uprow.err{border-color:var(--red-line)}
.uprow-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px}
.cancel-one{flex:none;white-space:nowrap}

/* the two-way "one finished video / raw clips" choice: the most prominent
   control under the dropzone, plain radio cards, teal selection, no gold */
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-top:16px}
.mode-opt{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;box-shadow:var(--shadow);font-size:12.5px;
  color:var(--ink-dim);line-height:1.5}
.mode-opt input{width:16px;height:16px;margin-top:3px;flex:none;
  accent-color:var(--brand)}
.mode-opt span{flex:1;min-width:0}
.mode-opt b{display:block;font-size:13.5px;font-weight:750;color:var(--ink);
  margin-bottom:2px}
.mode-opt.active{border-color:var(--brand);background:var(--brand-soft)}
.mode-opt.active b{color:var(--brand-deep)}
@media (max-width:640px){.mode-toggle{grid-template-columns:1fr}}

/* "unfinished from last time": one quiet card list, same anatomy as .uprow */
.resume-list{margin-top:16px}
.resume-head{font:800 10px var(--mono);text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-faint);margin-bottom:8px}
.resume-rows{display:flex;flex-direction:column;gap:8px}
.resume-row{background:var(--panel);border:1px solid var(--line-soft);
  border-radius:12px;padding:10px 14px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;box-shadow:var(--shadow)}
.resume-row .nm{font:600 12.5px var(--mono);overflow-wrap:anywhere}
.resume-row .st{font-size:11.5px;color:var(--ink-faint);margin-top:2px}

/* the batch header: overall progress + Cancel all, above the file list */
.upqueue-head{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-top:14px}
.upqueue-stats{flex:1;min-width:220px;font-size:12.5px;font-weight:600;
  color:var(--ink-dim)}
.upqueue-stats .bar{margin-top:6px}

/* ── mobile bottom tab bar (base.html; spec next-cycle 14) ──
   Phones only. This coordinates with the responsive block near the top of
   the phone styles ("clients open this on a phone"): that block turns the
   sidebar into a top bar and made its nav a horizontal scroll row; this
   later block hides that row, so under 900px the top bar keeps only the
   logo, the workspace switcher, and the account menu, and wayfinding
   belongs to these five tabs. The bar is fixed, so the body gets matching
   bottom padding, plus the iPhone home-bar safe area on both. Gold appears
   exactly once: the Pipeline count badge, a gate signal (posts waiting on
   a human approver). Desktop above 900px never shows the bar. */
.mtabs{display:none}
@media (max-width:900px){
  .sidebar nav{display:none}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  /* .mtabs is itself a <nav>, so the dark-rail nav rules (and the top
     bar's nav{overflow-x:auto} above, which would clip the raised Upload
     button) reach it; gap/overflow are reset here and the anchor rules
     below outrank `nav a` and its hover/active card treatments. */
  .mtabs{display:flex;align-items:stretch;position:fixed;left:0;right:0;
    bottom:0;z-index:50;gap:0;overflow:visible;background:var(--panel);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(20,23,26,.08);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .mtabs a.mtab,.mtabs a.mtab:hover,.mtabs a.mtab.active,
  .mtabs a.mtab.active:hover{background:none;border:0;box-shadow:none}
  .mtab{flex:1;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:flex-end;gap:3px;padding:4px 2px;
    border:0;background:none;font:inherit;cursor:pointer;
    color:var(--ink-faint);text-decoration:none;border-radius:10px}
  .mtab svg{width:21px;height:21px}
  .mtab:hover{color:var(--ink-dim)}
  .mtab.active{color:var(--brand-deep)}
  .mtab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-soft)}
  .mtab-label{font-size:11px;font-weight:650;letter-spacing:.01em;
    line-height:1}
  .mtab-ic{position:relative;display:grid;place-items:center}
  /* the one gold element here: the gate's count, styled like .btn-ok */
  .mtab-badge{position:absolute;top:-4px;right:-9px;min-width:16px;
    height:16px;border-radius:99px;padding:0 4px;
    background:var(--gold-grad);color:var(--amber-ink);
    font:800 10px/16px var(--mono);text-align:center}
  /* the raised center Upload button: near-black like .btn-primary,
     never gold (upload is work, not the gate) */
  .mtab-upbtn{width:42px;height:42px;border-radius:50%;margin-top:-20px;
    background:var(--ink);color:#F7F5F1;display:grid;place-items:center;
    box-shadow:0 4px 12px rgba(20,23,26,.30);border:3px solid var(--panel)}
  .mtab-upbtn svg{width:19px;height:19px}
  .mtab-upload.active .mtab-upbtn{background:var(--brand-deep)}
}
/* ── assistant handoffs, caption suggestions, the source nag ─────────── */
/* Ghost actions under an assistant reply: quiet text buttons, not bubbles;
   never gold, this rail is upstream of the gate. */
.ai-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:6px}
.ai-ghost{background:none;border:0;padding:0;font-size:11px;
  font-weight:700;color:var(--brand);cursor:pointer;text-decoration:none}
.ai-ghost:hover{color:var(--brand-deep);text-decoration:underline}
.ai-ghost-off{font-size:11px;color:var(--ink-faint)}
.ai-useon{display:inline-block}
.ai-useon summary{list-style:none;cursor:pointer}
.ai-useon summary::-webkit-details-marker{display:none}
.ai-useon-form{display:flex;gap:8px;align-items:center;margin-top:6px;
  flex-wrap:wrap}
.ai-useon-form select{font-size:12px;padding:5px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink)}

/* Caption suggestion cards (editor Text pane, /assistant/suggest). */
.sugg-cards{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.sugg-card{border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);padding:10px 12px}
.sugg-text{font-size:12.5px;line-height:1.55;color:var(--ink);
  margin-bottom:8px;white-space:pre-wrap}

/* The Insights per-post "Draft a post like this" tertiary link. */
.ins-remix{margin-left:10px;font-size:11px;font-weight:600;
  color:var(--brand);text-decoration:none}
.ins-remix:hover{text-decoration:underline}

/* The quiet source nag on composer / post detail: informational, never
   the gate's gold. */
.src-nag{color:var(--ink-dim);font-weight:600}