/* Fair & Square Marketing. Dark board, a rail on desk and a tab bar on phone, platform tiles, teal accent, amber warnings, red only for declines and destructive actions. */
:root {
  --bg: #0e1116;
  --panel: #151920;
  --panel-2: #1a1f27;
  --line: #1f242c;
  --line-2: #2a313b;
  --ink: #e6e8ec;
  --body: #c9ced6;
  --muted: #7c8594;
  --muted-2: #b7bec9;
  --accent: #5ad1b3;
  --accent-ink: #0e1116;
  --green: #5ad1b3;
  --red: #f0716a;
  --amber: #f2b84b;
  --amber-bg: #1c1a14;
  --amber-line: #3a3320;
  --blue: #7fb4f5;
  --radius: 14px;
  --radius-s: 6px;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', Menlo, Consolas, monospace;
  /* Platform identity colours live only on the drawn marks. */
  --yt: #ef3a34; --tt-cyan: #25f4ee; --tt-pink: #fe2c55; --ig-1: #f9c93b; --ig-2: #e8377d; --ig-3: #8b4bd6; --ink-tile: #0a0c10;
  --card-h: 350px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body { background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; color: inherit; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mono, .num, .stat .n, .acc-metric .n, td.num, th.num, .ch-big-n, .mini-n, .ch-handle, .ch-last-v, .ch-last-l span, .dpill b, .t-sub, .post-n, .post .num, .thumb-code, .thumb-dur, .state, .sec span, .live { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-family: var(--mono); font-size: .85em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: var(--muted-2); }

/* ---- shell: the desk rail, the phone top bar + tab bar (main.js draws both; one shows per width) ---- */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .22s cubic-bezier(.2, .7, .3, 1); }
html.rail-closed .shell { grid-template-columns: 64px minmax(0, 1fr); }
.col { min-width: 0; }
.shell #main.wrap { max-width: 1400px; margin: 0; padding: 26px 36px 70px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.logo svg { width: 20px; height: 20px; display: block; flex: none; }

/* the rail: a table of contents. Every group and page is on screen, counts sit on the line they belong to */
.rail { position: sticky; top: 0; z-index: 21; height: 100vh; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 55%, var(--bg)); overflow-y: auto; scrollbar-width: none; }
.rail-head { display: flex; align-items: center; gap: 6px; padding: 16px 12px 16px 22px; }
.rail-head .logo { flex: 1; min-width: 0; }
.rail-toggle { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: none; background: none; border-radius: 7px; color: var(--muted); transition: color .14s, background-color .14s, transform .1s; }
.rail-toggle svg { width: 16px; height: 16px; display: block; }
.rail-toggle:hover { color: var(--ink); background: var(--panel-2); }
.rail-toggle:active { transform: scale(.94); }
.toc { display: flex; flex-direction: column; gap: 14px; padding: 0 12px; }
.toc-g { display: flex; flex-direction: column; gap: 1px; }
.toc-ic, .toc-fly-t, .toc-dot, .toc-g.solo .toc-ps { display: none; }
.toc-h, .toc-p { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 13px; white-space: nowrap; transition: background-color .14s, color .14s, transform .1s; }
.toc-h { font-weight: 600; color: var(--ink); }
.toc-p { font-weight: 500; color: var(--muted); padding-left: 36px; }
.toc-h:hover, .toc-p:hover { background: var(--panel-2); color: var(--ink); }
.toc-h:active, .toc-p:active { transform: scale(.98); }
.toc-h.here, .toc-p.here { background: var(--panel-2); color: var(--ink); }
/* the index column: 01..05, mono; the open group's number turns teal */
.toc-i { width: 18px; flex: none; font: 500 10.5px/1 var(--mono); color: var(--muted); letter-spacing: .02em; }
.toc-g.on .toc-i { color: var(--accent); }
.toc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the guide line under a group's heading, through the centre of the index column; pages hang off it */
.toc-ps { position: relative; display: flex; flex-direction: column; gap: 1px; }
.toc-ps::before { content: ''; position: absolute; left: 18px; top: 2px; bottom: 4px; width: 1px; background: var(--line-2); }
.toc-g.on .toc-ps::before { background: color-mix(in srgb, var(--accent) 30%, var(--line-2)); }
/* you are here: a teal bar on the guide line (pages) or at the index (one-page groups) */
.toc-mark { position: absolute; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--accent); transform-origin: 50% 0; animation: mark-in .24s cubic-bezier(.2, .8, .2, 1) both; will-change: transform; }
.toc-p .toc-mark { left: 17.5px; }
.toc-h .toc-mark { left: 0; }
/* counts: a dotted leader to the number, like a page number in a book; amber = act now */
.toc-tail { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 10px; }
.toc-lead { flex: 1; height: 1px; margin-top: 4px; background-image: radial-gradient(circle, var(--line-2) 0.8px, transparent 1px); background-size: 5px 2px; background-repeat: repeat-x; }
.toc-n { flex: none; font: 500 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted-2); }
.toc-n.warn { min-width: 20px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--amber); color: var(--accent-ink); font-weight: 700; font-size: 10.5px; }
/* the rail foot: synced, then the me chip with its name, then Sync */
.rail-foot { margin-top: auto; padding: 14px 14px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.rail .synced:empty { display: none; }
.rail .synced .live { padding: 0 4px; font-size: 11px; white-space: normal; }
.rail .tools { display: flex; align-items: center; gap: 8px; }
.rail .tools .me { flex: 1; min-width: 0; }
.rail .tools .me span { display: inline; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.rail .tools .sync { flex: none; }

/* the sticky head over the page: the board's brand tabs on desk; the whole phone top bar on phone */
.head { position: sticky; top: 0; z-index: 20; }
.top, .tabbar { display: none; }
.boardbar { display: flex; padding: 10px 36px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.boardbar:empty { display: none; }
.tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 1px solid transparent; background: none; color: var(--muted); font-weight: 500; font-size: 13px; padding: 6px 13px; border-radius: 999px; white-space: nowrap; transition: color .14s, background-color .14s, transform .12s; }
.tab:hover { color: var(--ink); background: var(--panel); }
.tab:active { transform: scale(.96); }
.tab.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.live { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--accent); animation: ping 2.8s ease-out infinite; will-change: transform, opacity; }

/* the collapsed rail: one icon per group, the open group marked teal, an amber dot where the open rail shows an amber
   badge; the group's name, pages and counts in a flyout on hover or keyboard focus. The rail stops clipping so the
   flyouts reach past its edge; its five icons always fit. */
html.rail-closed .rail { overflow: visible; }
html.rail-closed .rail-head { flex-direction: column; gap: 6px; padding: 16px 0 12px; }
html.rail-closed .rail-head .logo { flex: none; }
html.rail-closed .rail-head .logo span { display: none; }
html.rail-closed .rail-toggle svg { transform: scaleX(-1); }
html.rail-closed .toc { padding: 0 10px; gap: 6px; }
html.rail-closed .toc-g { position: relative; }
html.rail-closed .toc-h { height: 44px; justify-content: center; padding: 0; }
html.rail-closed .toc-h .toc-i, html.rail-closed .toc-h .toc-t, html.rail-closed .toc-h .toc-tail, html.rail-closed .toc-h .toc-mark { display: none; }
html.rail-closed .toc-ic { display: block; color: var(--muted); transition: color .14s; }
html.rail-closed .toc-ic svg { width: 21px; height: 21px; display: block; }
html.rail-closed .toc-h:hover .toc-ic, html.rail-closed .toc-g.on .toc-ic, html.rail-closed .toc-g:focus-within .toc-ic { color: var(--accent); }
html.rail-closed .toc-g.on > .toc-h { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
html.rail-closed .toc-g.on > .toc-h::before { content: ''; position: absolute; left: -10px; top: 11px; bottom: 11px; width: 2px; border-radius: 0 2px 2px 0; background: var(--accent); }
html.rail-closed .toc-dot { display: block; position: absolute; top: 9px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--panel); }
html.rail-closed .toc-dot[hidden] { display: none; }
html.rail-closed .toc-g .toc-ps { display: none; position: absolute; left: calc(100% + 12px); top: 0; z-index: 30; width: 212px; padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .7); }
html.rail-closed .toc-g:hover > .toc-ps, html.rail-closed .toc-g:focus-within > .toc-ps { display: flex; }
/* the guide line becomes an invisible bridge over the gap, so the pointer can cross to the flyout */
html.rail-closed .toc-g .toc-ps::before { left: -14px; top: 0; bottom: 0; width: 14px; background: none; }
html.rail-closed .toc-fly-t { display: block; padding: 5px 10px 6px; font: 500 10px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html.rail-closed .toc-p { padding-left: 10px; }
html.rail-closed .toc-p .toc-mark { left: 0; }
html.rail-closed .rail-foot { padding: 12px 10px 14px; }
html.rail-closed .rail .synced { display: none; }
html.rail-closed .rail .tools { flex-direction: column; gap: 6px; }
html.rail-closed .rail .tools .me { flex: none; }
html.rail-closed .rail .tools .me span { display: none; }
html.rail-closed .rail .tools .sync { position: relative; width: 40px; height: 40px; padding: 0; justify-content: center; background: transparent; border-color: transparent; color: var(--muted); }
html.rail-closed .rail .tools .sync:hover { background: var(--panel-2); color: var(--accent); filter: none; }
html.rail-closed .rail .tools .sync span { display: none; }
html.rail-closed .rail .tools .sync svg { width: 18px; height: 18px; }
html.rail-closed .rail .tools .sync.warn::after { content: ''; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--panel); }

/* ---- phone: top bar + page strip, tab bar ---- */
@media (max-width: 760px) {
  .shell { display: block; }
  .rail { display: none; }
  .shell #main.wrap { max-width: none; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
  .head { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .top { display: block; padding: 10px 16px; }
  .top-row { display: flex; align-items: center; gap: 10px; }
  .top .synced { flex: 1; min-width: 0; }
  .top .live { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .top .tools { display: flex; align-items: center; gap: 8px; }
  .top .sync { padding: 7px 9px; }
  .top .sync span { display: none; }
  /* the open group's pages as a segmented strip. A one-page group keeps the row as a plain page label, so the page
     below does not jump between groups, and the sticky head always says where you are */
  .seg { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); margin-top: 10px; padding: 3px; gap: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); }
  .seg a { position: relative; text-align: center; padding: 6px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .14s, color .14s, transform .1s; }
  .seg a:active { transform: scale(.97); }
  .seg a.here { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
  .seg.solo { border-color: transparent; background: none; }
  .seg.solo a.here { background: none; box-shadow: none; text-align: left; padding-left: 2px; font-weight: 600; color: var(--ink); }
  .boardbar { padding: 0 16px 10px; background: none; backdrop-filter: none; border-bottom: none; }

  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 4px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 0 10px; font-size: 10.5px; font-weight: 500; color: var(--muted); transition: color .14s, transform .1s; }
  .tabbar a:active { transform: scale(.94); }
  .tabbar a.here { color: var(--accent); }
  /* the same you-are-here bar as the rail, laid flat on the top edge */
  .tabbar a.here::before { content: ''; position: absolute; top: -1px; left: 26%; right: 26%; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent); }
  .tabbar-ic { position: relative; display: block; }
  .tabbar-ic svg { width: 21px; height: 21px; display: block; }
  .tabbar-n { position: absolute; top: -5px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--amber); color: var(--accent-ink); font: 700 9.5px/16px var(--mono); text-align: center; box-shadow: 0 0 0 2px var(--panel); }
  .tabbar-n[hidden] { display: none; }
}

/* ---- you: the name chip (rail foot, phone top bar), its menu (password, tokens, sign out) ---- */
.me { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 3px; font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: border-color .14s; }
.me:hover { border-color: var(--muted); }
.me span { display: none; } /* the name shows in the rail foot only; the phone top bar keeps its room */
.me i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 600 11px/1 var(--mono); font-style: normal; text-transform: uppercase; }
.me-sec { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.me-sec h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.me-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.me-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-row .d { color: var(--muted); font: 11.5px var(--mono); white-space: nowrap; }
.me-new { display: block; width: 100%; font: 12px/1.5 var(--mono); color: var(--accent); background: var(--bg); border: 1px solid var(--accent); border-radius: var(--radius-s); padding: 8px 10px; word-break: break-all; margin: 8px 0; }
.me-msg { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.me-msg.err { color: var(--red); }
.me-msg.ok { color: var(--accent); }

/* ---- activity: who did what (Today) ---- */
.act { display: grid; grid-template-columns: auto auto 1fr; gap: 0 14px; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 16px; }
.act > div:last-child span { border-bottom: none; }
@media (max-width: 620px) { .act { grid-template-columns: auto 1fr; } .act .d { grid-column: 1 / -1; padding: 8px 0 0; border-bottom: none; } }
.act > div { display: contents; }
.act span { padding: 7px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.act .d { color: var(--muted); font: 11.5px var(--mono); white-space: nowrap; padding-top: 9px; }
.act .who { color: var(--ink); font-weight: 600; white-space: nowrap; }
.act .msg { color: var(--body); overflow-wrap: anywhere; }
.act .msg b { color: var(--muted); font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }

/* ---- news, Post now: the box at the top of Today and Content ---- */
.news-box { margin-bottom: 8px; }
.news-box .ov-h { margin-top: 18px; }
.news-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; background: var(--panel); border: 1px solid var(--amber-line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
.news-media video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 8px; background: #000; object-fit: cover; }
.news-title { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.news-ver { font: 11.5px var(--mono); color: var(--muted); margin: 4px 0 12px; overflow-wrap: anywhere; }
.news-plats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.news-plat { flex: 1 1 130px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 8px 11px; font-size: 13px; color: var(--ink); cursor: pointer; }
.news-plat em { margin-left: auto; font: 11px var(--mono); font-style: normal; color: var(--muted); }
.news-plat em.ok { color: var(--accent); }
.news-plat em.err { color: var(--red); }
.news-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.news-actions .btn { padding: 9px 22px; }
.news-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; font-size: 13px; }
.news-row:not(:has(*)) { display: none; }
.news-row > span { color: var(--muted); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
@media (max-width: 620px) { .news-card { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; } }

/* ---- today (views/today.js) ---- */
.today-date { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.today-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.today-box h3 { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.today-box .empty { padding: 6px 0 2px; }
.today-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--body); }
.today-row b { font-weight: 500; color: var(--ink); min-width: 0; overflow-wrap: anywhere; transition: color .14s; }
.today-row:hover b { color: var(--accent); }
.today-when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.today-note { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .today-row { grid-template-columns: 1fr; gap: 2px; } .today-note { white-space: normal; } }

/* ---- login page ---- */
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(900px 500px at 50% -10%, rgba(90, 209, 179, .09), transparent 70%), var(--bg); }
.login { width: min(360px, 100%); text-align: center; }
.login-mark svg { width: 40px; height: 40px; display: block; margin: 0 auto 18px; }
.login h1 { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.login-sub { color: var(--muted); font-size: 13px; margin: 6px 0 22px; }
.login-card { text-align: left; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px; display: grid; gap: 14px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.login-card label { display: grid; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.login-card input { font: 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 10px 12px; width: 100%; }
.login-card input:focus { border-color: var(--accent); outline: none; }
.login-card .btn { justify-content: center; padding: 10px 14px; font-size: 14px; }
.login-err { color: var(--red); font-size: 13px; min-height: 0; }
.login-err:empty { display: none; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 500; font-size: 13px; border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 7px 14px; background: var(--panel); color: var(--ink); white-space: nowrap; transition: border-color .14s, filter .14s, transform .1s; }
.btn:hover { border-color: var(--muted); }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.small.on { background: var(--panel-2); border-color: var(--accent); color: var(--accent); }
.btn.danger { color: var(--red); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn svg { width: 14px; height: 14px; display: block; }
.btn.sync:disabled svg { animation: spin .9s linear infinite; }

/* ---- page ---- */
.wrap { position: relative; max-width: 1320px; margin: 0 auto; padding: 22px 24px 70px; }
.glow { position: absolute; top: -110px; left: 8%; width: 720px; height: 340px; pointer-events: none; background: radial-gradient(closest-side, rgba(90, 209, 179, .13), transparent); filter: blur(6px); opacity: .8; animation: drift 26s ease-in-out infinite; will-change: transform, opacity; }
.sec { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.sec h2 { font-size: 15px; font-weight: 600; color: var(--ink); }
.sec span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sec .tabs-inline { letter-spacing: 0; text-transform: none; display: flex; gap: 6px; margin-left: auto; }
.grid + .sec { margin-top: 32px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; }
.view-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.view-head h1 { font-size: 16px; font-weight: 600; color: var(--ink); flex: 1; display: flex; align-items: center; gap: 10px; }
.top-right { display: flex; align-items: center; gap: 14px; margin-left: auto; } /* the right end of a page head (channel page, post page) */
.rise { animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 65ms); will-change: transform, opacity; }
.hint { margin-top: 14px; font-size: 12px; color: var(--muted); max-width: 760px; }
.empty { color: var(--muted); font-size: 13px; padding: 18px 4px; }

/* ---- channel tile ---- */
.ch { position: relative; height: var(--card-h); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 17px 15px; transition: transform .16s ease, border-color .16s ease; animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 65ms); will-change: transform, opacity; }
.ch[role="link"] { cursor: pointer; }
.ch::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75); opacity: 0; transition: opacity .16s ease; }
.ch[role="link"]:hover, .ch:focus-visible { transform: translateY(-3px); border-color: var(--line-2); outline: none; }
.ch[role="link"]:hover::after, .ch:focus-visible::after { opacity: 1; }
.ch:focus-visible { border-color: var(--accent); }
.ch[role="link"]:active { transform: translateY(-1px) scale(.996); }
.ch-wide { height: auto; }
.ch-row { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.ch-row .ch-big { margin-top: 0; }
.ch-row .minis { margin: 0 0 0 auto; padding: 0; border: none; width: auto; min-width: 380px; }
.ch-head { display: flex; align-items: center; gap: 12px; flex: none; }
.tile { position: relative; width: 44px; height: 44px; flex: none; display: block; }
.mark { width: 44px; height: 44px; display: block; position: relative; z-index: 1; }
.tile::before { content: ''; position: absolute; inset: -7px; border-radius: 18px; background: radial-gradient(closest-side, var(--halo, var(--accent)), transparent); opacity: .26; animation: breathe 4.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -680ms); will-change: transform, opacity; }
.tile-youtube { --halo: rgba(239, 58, 52, .5); }
.tile-tiktok { --halo: rgba(37, 244, 238, .34); }
.tile-off { --halo: transparent; }
.tile-off .mark { opacity: .42; }
.ch:hover .tile::before { opacity: .42; }
.ch-id { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.ch-plat { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ch-handle { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brandtag { margin-left: auto; align-self: flex-start; white-space: nowrap; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; color: var(--muted-2); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 9px; }
.ch-big { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ch-big-n { font-size: 34px; font-weight: 500; line-height: 1; color: var(--ink); }
.ch-big-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); width: 100%; margin-top: 2px; }
.dpill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted-2); }
.dpill b { font-size: 11.5px; font-weight: 500; }
.dpill span { font-size: 10px; color: var(--muted); }
.dpill.up { color: var(--green); border-color: rgba(90, 209, 179, .32); background: rgba(90, 209, 179, .08); }
.dpill.down { color: var(--red); border-color: rgba(240, 113, 106, .32); background: rgba(240, 113, 106, .08); }
.arw { width: 8px; height: 8px; display: block; }
.arw.dn { transform: rotate(180deg); }
.ch-spark { flex: none; position: relative; overflow: hidden; margin: 10px -2px 0; height: 46px; }
.ch-spark svg { width: 100%; height: 46px; display: block; }
.ch-spark::after { content: ''; position: absolute; inset: -1px -2px; background: var(--panel); animation: wipe .85s cubic-bezier(.35, 0, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 65ms + 240ms); will-change: transform; }
.ch-spark svg circle { transform-box: fill-box; transform-origin: center; animation: beat 2.8s ease-in-out infinite; will-change: transform, opacity; }
.minis { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.minis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini-n { font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.mini-l { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.ch-last { flex: none; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.ch-last-l { display: flex; gap: 8px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ch-last-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 4px; }
.ch-last-t { font-size: 12.5px; color: var(--body); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 34px; }
.ch-last-v { margin-left: auto; font-size: 13px; color: var(--ink); white-space: nowrap; }
.ch-off { background: color-mix(in srgb, var(--panel) 55%, var(--bg)); border-style: dashed; }
.ch-off .ch-plat, .ch-off .brandtag { color: var(--muted-2); }
.ch-off-body { flex: none; margin-top: 18px; height: 52px; }
.ch-off-h { font-size: 15px; font-weight: 600; color: var(--muted-2); }
.ch-off-p { margin-top: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-spark-off svg { opacity: .5; }
.ch-spark-off::after { display: none; }
.ch-off .mini-n { color: var(--muted); }
.ch-off-foot { flex: none; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.state { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---- channel page ---- */
.ch-page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.back { font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; }
.back::before { content: '← '; }
.back:hover { color: var(--ink); border-color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-top: 14px; }
.card .row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card h3 { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; min-width: 160px; }
.card .body { margin-top: 8px; font-size: 13px; white-space: pre-wrap; }
.card .sub { margin-top: 6px; font-size: 12px; color: var(--muted); }
.card .actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.card .links { margin-top: 8px; font-size: 12.5px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.card .links a { border-bottom: 1px solid var(--line-2); }
.chart { display: block; width: 100%; height: auto; overflow: visible; margin-top: 8px; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .base { stroke: var(--line-2); stroke-width: 1; }
.chart .ax { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.chart .bar.hov path { filter: brightness(1.25); }
.tip { position: fixed; z-index: 60; pointer-events: none; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 7px 10px; font-size: 12px; color: var(--body); font-family: var(--mono); box-shadow: 0 10px 30px -10px rgba(0,0,0,.7); max-width: 280px; }
.tip b { color: var(--ink); font-weight: 500; }
.tip .dim { color: var(--muted); }
.rank { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.rank-row { display: grid; grid-template-columns: 160px 1fr 80px 44px; align-items: center; gap: 12px; font-size: 12.5px; }
.rank-row.hov .rank-l { color: var(--ink); }
.rank-l { color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rank-bar span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.rank-n { color: var(--ink); } .rank-p { color: var(--muted); }

/* posts list */
.posts { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; }
.post { display: grid; grid-template-columns: 76px minmax(0, 1fr) 90px 80px 90px 110px; align-items: center; gap: 14px; padding: 10px 6px; border-top: 1px solid var(--line); color: var(--body); border-radius: 8px; transition: background-color .14s, transform .14s; }
.post:first-child { border-top: none; }
.post-h { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--mono); padding: 8px 6px 6px; }
.post-h + .post { border-top: none; }
a.post:hover { background: var(--panel-2); transform: translateX(3px); color: var(--body); }
a.post:hover .thumb img { transform: scale(1.05); }
.thumb { position: relative; width: 76px; height: 44px; border-radius: 7px; background: var(--panel-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.thumb-code { font-size: 11px; color: var(--muted); }
.thumb-dur { position: absolute; right: 4px; bottom: 4px; padding: 1px 4px; border-radius: 3px; background: rgba(5, 7, 10, .8); color: #fff; font-size: 9.5px; line-height: 1.5; }
.post-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.post-title { font-size: 13.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.post-meta { font-size: 11.5px; color: var(--muted); }
.post .num { text-align: right; white-space: nowrap; font-size: 13px; color: var(--muted-2); }
.post .post-n { color: var(--ink); font-size: 14px; }

/* ---- tables ---- */
.table-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 13px; }
th { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
th.num { text-align: right; }
td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr[data-id] { cursor: pointer; transition: background-color .14s; }
tr[data-id]:hover td { background: var(--panel-2); }
td:first-child { color: var(--ink); font-weight: 500; }
td .btn.small { margin-right: 6px; }
.num { text-align: right; white-space: nowrap; }
td.num { color: var(--ink); }
.t-ch { display: flex; align-items: center; gap: 10px; }
.t-mark { width: 24px; height: 24px; flex: none; }
.t-mark svg { width: 24px; height: 24px; display: block; }
.t-ch b { font-weight: 600; color: var(--ink); font-size: 13px; }
.t-sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

/* ---- pills, chips ---- */
.pill { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; background: var(--panel-2); color: var(--muted-2); }
.pill.active, .pill.live, .pill.ok, .pill.done { color: var(--accent); border-color: rgba(90, 209, 179, .35); background: rgba(90, 209, 179, .08); }
.pill.reserved, .pill.beta { color: var(--amber); border-color: rgba(242, 184, 75, .35); background: rgba(242, 184, 75, .08); }
.pill.paused { color: var(--red); border-color: rgba(240, 113, 106, .35); background: rgba(240, 113, 106, .08); }
.pill.development, .pill.product { color: var(--blue); border-color: rgba(127, 180, 245, .3); background: rgba(127, 180, 245, .08); }
.pill.company { color: var(--amber); border-color: rgba(242, 184, 75, .35); background: rgba(242, 184, 75, .08); }
.pill.planned, .pill.concept, .pill.retired, .pill.off { color: var(--muted); border-color: var(--line-2); }
button.pill { cursor: pointer; }
button.pill:hover { border-color: var(--muted); }
.pico { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--line); color: var(--muted-2); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .04em; vertical-align: middle; }
.pico.proj { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--accent); }

/* ---- lists (accounts, connections) ---- */
.ov-h { font-size: 13px; font-weight: 600; color: var(--ink); margin: 26px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.ov-sub { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ov-list { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ov-item { padding: 10px 16px; font-size: 13px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.ov-item:first-child { border-top: none; }
.ov-item[style*="cursor:pointer"]:hover { background: var(--panel-2); }
.ov-item .d { font-family: var(--mono); color: var(--muted); font-size: 11px; white-space: nowrap; }
.row-actions { margin-left: auto; display: flex; gap: 6px; }
.cardlist { display: flex; flex-direction: column; gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid2 .card { margin-top: 0; }
.notice { display: flex; align-items: center; gap: 10px; background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber); border-radius: var(--radius-s); padding: 10px 14px; font-size: 12.5px; margin: 14px 0 0; }

/* ---- stats (account page) ---- */
.statrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 6px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .n { color: var(--ink); font-size: 28px; font-weight: 500; line-height: 1.1; }
.stat .n .dim { color: var(--muted); font-size: 14px; font-weight: 400; }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 6px; }
.up { color: var(--green) !important; }
.down { color: var(--red) !important; }
.flat { color: var(--muted) !important; }

/* ---- accounts ---- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.filters .btn.on { background: var(--panel-2); border-color: var(--accent); color: var(--accent); }
.project-card { margin-bottom: 14px; margin-top: 0; }
.acc-rows { display: flex; flex-direction: column; margin-top: 12px; }
.acc-row { display: grid; grid-template-columns: 34px minmax(160px, 1fr) 130px 90px 128px auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.acc-ico { display: flex; }
.acc-name { min-width: 0; }
.linkish { background: none; border: none; padding: 0; color: var(--ink); font-weight: 500; font-size: 13.5px; text-align: left; }
.linkish:hover { color: var(--accent); }
.acc-metric { display: flex; flex-direction: column; line-height: 1.2; }
.acc-metric .n { color: var(--ink); font-size: 15px; }
.acc-metric .l { font-size: 11px; color: var(--muted); }
.acc-spark { display: flex; align-items: center; }
.acc-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.spark { display: block; overflow: visible; }
.chart-card .spark { width: 100%; height: 120px; margin-top: 10px; }

/* ---- modal ---- */
.modal-back { position: fixed; inset: 0; background: rgba(4, 6, 10, .7); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); width: min(540px, 100%); padding: 22px 24px; max-height: 84vh; overflow-y: auto; }
.modal h2 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.field input, .field textarea, .field select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 8px 10px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 100px; resize: vertical; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---- content: the field primitives the post page (views/post.js, post-sheets.js) and its kits draw with ---- */
.cq-slide-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.cq-file, .cq-field { padding: 10px 0; border-top: 1px solid var(--line); }
.cq-fl { display: flex; align-items: center; gap: 10px; min-height: 24px; margin-bottom: 5px; }
.cq-fl label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cq-meta, .cq-count, .cq-edited { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.cq-count { margin-left: auto; }
.cq-edited { color: var(--amber); }
.cq-edited .linkish { font-size: 10.5px; color: var(--amber); text-decoration: underline; font-weight: 400; }
.cq-fl .cq-copy { min-width: 62px; justify-content: center; }
.cq-file .cq-meta { margin-left: auto; }
.cq-field input, .cq-field textarea, .cq-path { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 8px 10px; resize: vertical; }
.cq-field textarea.one { resize: none; overflow: hidden; }
.cq-path { font-family: var(--mono); font-size: 12px; }
.cq-field input:focus, .cq-field textarea:focus, .cq-path:focus { border-color: var(--accent); outline: none; }
.cq-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.live.warn { color: var(--amber); }
.live.warn .dot { background: var(--amber); }
.live.warn .dot::after { border-color: var(--amber); }

.btn.small.on.sched { border-color: var(--blue); color: var(--blue); }

/* the publisher's word on a target */
.cq-pub { font-family: var(--mono); font-size: 11px; color: var(--muted-2); max-width: 260px; overflow-wrap: anywhere; }
.cq-pub.ok { color: var(--accent); }
.cq-pub.sched { color: var(--blue); }
.cq-pub.bad { color: var(--red); }

/* Post to TikTok panel */
.modal.tk { width: min(600px, 100%); }
.tk-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--ink); }
.tk-who img { width: 32px; height: 32px; border-radius: 50%; }
.tk-wait { color: var(--muted); font-size: 13px; }
.tk-preview { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; }
.tk-preview img, .tk-preview video { height: 180px; border-radius: 8px; background: var(--bg); flex: none; }
.modal .tk-opt, .modal .field .tk-opt { display: flex; width: auto; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--body); margin: 6px 0; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.modal .tk-opt input { width: auto; margin: 3px 0 0; flex: none; accent-color: var(--accent); }
.modal .tk-opt span { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.tk-opt input:disabled + * , .tk-opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.modal .tk-switch { font-weight: 600; color: var(--ink); }
.modal .tk-sub { display: block; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); margin: 2px 0 4px 22px; }
.modal .tk-opt .tk-sub { margin-left: 0; }
.tk-tip, .tk-dur { font-size: 12px; color: var(--amber); margin-top: 4px; }
.tk-n { font-family: var(--mono); color: var(--muted); font-weight: 400; }
.tk-legal { font-size: 12px; color: var(--muted-2); margin-top: 6px; }
.modal.tk { padding-bottom: 0; }
.tk-select { position: relative; }
.modal .tk-sel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 8px 10px; text-align: left; cursor: pointer; }
.tk-sel-btn.empty span { color: var(--muted); }
.tk-sel-btn svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.tk-sel-btn[aria-expanded="true"] { border-color: var(--accent); }
.tk-sel-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; list-style: none; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 4px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); }
.tk-sel-list[hidden] { display: none; }
.tk-sel-list li { padding: 8px 10px; border-radius: 4px; font-size: 14px; color: var(--ink); cursor: pointer; }
.tk-sel-list li:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tk-sel-list li.on { color: var(--accent); }
.tk-sel-list li.off { color: var(--muted); cursor: not-allowed; background: none; }
.tk-foot { position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--line-2); margin: 14px -24px 0; padding: 12px 24px 16px; }
.tk-foot .actions { margin-top: 0; }
.tk-status { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--blue); background: rgba(127, 180, 245, .08); border: 1px solid rgba(127, 180, 245, .3); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.tk-status.ok { color: var(--accent); background: rgba(90, 209, 179, .08); border-color: rgba(90, 209, 179, .35); }
.tk-status.bad { color: var(--red); background: rgba(240, 113, 106, .08); border-color: rgba(240, 113, 106, .35); }
.tk-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgba(127, 180, 245, .3); border-top-color: var(--blue); animation: spin .8s linear infinite; }
.tk-status[hidden], .tk-spin[hidden], .tk-ok[hidden] { display: none; } /* their display: flex would beat the hidden attribute */
.tk-ok { width: 16px; height: 16px; flex: none; }
.modal .tk-mode .tk-opt { font-weight: 500; }

/* Post to YouTube panel */
.yt-note { font-size: 12.5px; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--radius-s); padding: 8px 10px; margin-bottom: 12px; }
.yt-extra { list-style: none; font-size: 13px; color: var(--body); display: flex; flex-direction: column; gap: 4px; }
.yt-extra li::before { content: '· '; color: var(--muted); }
.yt-extra .yt-manual { color: var(--muted); }

/* sync result card (the rail's Sync): top right on desk, above the tab bar on phone */
.sync-card { position: fixed; top: 20px; right: 24px; z-index: 30; width: min(460px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); animation: rise .2s ease; }
.sync-card.warn { border-color: var(--amber-line); }
.sync-line { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink); }
.sync-line span { flex: 1; min-width: 0; }
.sync-x { border: none; background: none; color: var(--muted); padding: 2px; border-radius: 4px; flex: none; }
.sync-x:hover { color: var(--ink); }
.sync-x svg { width: 14px; height: 14px; display: block; }
.sync-h { margin: 10px 0 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.sync-look { list-style: none; max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.sync-look li { font-size: 12.5px; color: var(--body); padding: 5px 8px; background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--radius-s); overflow-wrap: anywhere; }
.sync-more { margin-top: 10px; font-size: 12px; color: var(--muted); }
.sync-more summary { cursor: pointer; }
.sync-more pre { margin-top: 6px; max-height: 30vh; overflow: auto; font-family: var(--mono); font-size: 11px; color: var(--muted-2); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) { .sync-card { top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; } }

/* the kit pieces (post-sheets.js): read-only fields, Test & compare rows, the checklist */
.cq-ro { white-space: pre-wrap; font-size: 13px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 8px 10px; }
.cq-ro.mono { font-family: var(--mono); font-size: 12px; }
.cq-var { display: grid; grid-template-columns: 22px 120px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.cq-var:first-of-type { border-top: none; }
.cq-var-l { font-family: var(--mono); color: var(--accent); font-weight: 500; }
.cq-var-img { width: 120px; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--panel-2); overflow: hidden; }
.cq-var-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cq-var-t { font-size: 13px; color: var(--ink); }
.cq-check { padding: 8px 0; border-top: 1px solid var(--line); }
.cq-check-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cq-check-i { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--body); padding: 4px 0; cursor: pointer; }
.cq-check-i input { margin-top: 3px; accent-color: var(--accent); }
.cq-check-i:has(input:checked) span { color: var(--muted); text-decoration: line-through; }

/* ---- bank ---- */
.bank-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.bank-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted-2); background: var(--panel); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 11px; white-space: nowrap; transition: border-color .14s, color .14s, background-color .14s, transform .1s; }
.bank-chip i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bank-chip:hover { color: var(--ink); border-color: var(--muted); }
.bank-chip:active { transform: scale(.96); }
.bank-chip.on { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bank-chip.on i { color: var(--accent); }
.bank-chip-end { margin-left: auto; }
.bank-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; }
.bank-note { font-size: 13px; color: var(--muted); margin: -6px 0 14px; }

/* progress strip: one thin bar per project, posted in accent, rendered ghosted behind it */
.bank-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 8px; margin-bottom: 18px; }
.bank-proj { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 7px; text-align: left; color: var(--body); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px 11px; transition: border-color .14s, transform .1s; }
.bank-proj:hover { border-color: var(--line-2); }
.bank-proj:active { transform: scale(.985); }
.bank-proj.on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
/* explicit placement: the bar sits in the DOM before the count, so auto-placement would push the count to a third row */
.bank-proj-code { grid-area: 1 / 1; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; color: var(--accent); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; }
.bank-proj-name { grid-area: 1 / 2; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-proj-n { grid-area: 1 / 3; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.bank-proj-n b { color: var(--ink); font-weight: 500; font-size: 12px; }
.bank-proj-n em { display: block; font-style: normal; font-size: 10px; color: var(--muted); margin-top: 1px; }
.bank-bar { grid-area: 2 / 1 / 3 / -1; position: relative; display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
/* the share is a scaleX (--w in 0..1), not a width, so the bars can grow in on entrance without layout work */
.bank-bar-ghost, .bank-bar-fill { position: absolute; inset: 0; border-radius: 2px; transform: scaleX(var(--w, 0)); transform-origin: 0 50%; will-change: transform; }
.bank-bar-ghost { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.bank-bar-fill { background: var(--accent); }
.rise .bank-bar-ghost { animation: bank-grow .8s cubic-bezier(.2, .7, .3, 1) 240ms backwards; }
.rise .bank-bar-fill { animation: bank-grow .8s cubic-bezier(.2, .7, .3, 1) 380ms backwards; }

/* board */
.bank-board { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 10px; align-items: start; }
.bank-col { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bank-col-h { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 2px; padding: 12px 13px 10px; border-bottom: 1px solid var(--line); }
.bank-col-name { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.bank-col-n { font-family: var(--mono); font-size: 22px; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.bank-col-n small { font-size: 11px; color: var(--muted); margin-left: 3px; }
.bank-col-sub { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .03em; }
.bank-col-posted .bank-col-name { color: var(--accent); }
.bank-col-dropped { border-style: dashed; }
.bank-col-dropped .bank-col-name, .bank-col-dropped .bank-col-n { color: var(--muted); }
.bank-col-dropped .bank-card { opacity: .62; }
/* each column scrolls on its own so the board stays one screen tall and the counts stay in view */
.bank-col-b { display: flex; flex-direction: column; gap: 6px; padding: 8px; max-height: calc(100vh - 300px); min-height: 160px; overflow-y: auto; scrollbar-width: thin; }
.bank-empty { font-size: 12px; color: var(--muted); padding: 10px 6px; }
.bank-more { align-self: center; margin: 4px 0 2px; }
.bank-more i { font-style: normal; font-family: var(--mono); color: var(--muted); }

/* card */
.bank-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; padding: 8px 9px 8px 10px; transition: border-color .14s; }
.bank-card:hover { border-color: var(--line-2); }
.bank-card.mine { border-left-color: var(--accent); }
.bank-card.held { border-left-color: var(--muted); }
.bank-card.free:hover { border-left-color: var(--accent); }
.bank-card-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bank-pico { flex: none; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .06em; color: var(--accent); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; line-height: 16px; }
.bank-topic { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-post { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); border-bottom: 1px solid var(--line-2); line-height: 1.2; }
.bank-post:hover { color: var(--accent); border-color: var(--accent); }
.bank-claim { font-size: 12.5px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* the owner line keeps its name whole; when a narrow column leaves no room, the button wraps under it */
.bank-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 24px; }
.bank-act { margin-left: auto; padding: 3px 9px; font-size: 11.5px; }
.bank-free { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* stage select on a card and the Add idea form */
.bank-stage { font: inherit; font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 4px; max-width: 100%; }
.bank-stage:disabled { opacity: .5; }
.bank-add { margin-bottom: 14px; }
.bank-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
.bank-add > summary::-webkit-details-marker { display: none; }
.bank-add[open] > summary { color: var(--accent); border-color: var(--accent); }
.bank-add-f { display: grid; grid-template-columns: 150px 170px 170px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; }
.bank-add-f input, .bank-add-f select { width: 100%; min-width: 0; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 6px 9px; }
.bank-add-f input:focus, .bank-add-f select:focus { border-color: var(--accent); outline: none; }
.bank-add .bank-err, .bank-add .bank-note { margin: 8px 0 0; }

/* owner: initials in a round badge, the name, how long they have held it */
.bank-owner { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; --o: var(--muted-2); }
.bank-badge { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .02em; color: var(--accent-ink); background: var(--o); }
.bank-owner-n { flex: none; font-size: 12px; font-weight: 500; color: var(--o); white-space: nowrap; }
.bank-since { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.bank-owner.bank-me { --o: var(--accent); }
.bank-owner.bank-h0 { --o: var(--blue); }
.bank-owner.bank-h1 { --o: var(--amber); }
.bank-owner.bank-h2 { --o: var(--muted-2); }

/* a take that lost the race: the error sits on that card, which has already re-rendered as taken */
.bank-err { font-size: 11.5px; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: 4px; padding: 4px 8px; }

/* ---- motion ---- */
@keyframes bank-grow { from { transform: scaleX(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes breathe { 0%, 100% { opacity: .2; transform: scale(.94); } 50% { opacity: .42; transform: scale(1.06); } }
@keyframes beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .5; } }
@keyframes ping { 0% { transform: scale(.7); opacity: .9; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes mark-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .7; } 50% { transform: translate3d(90px, 22px, 0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ch, .rise { animation: fade .3s ease backwards; }
  .ch-spark::after { display: none; }
  .glow, .dot::after, .tile::before, .ch-spark svg circle, .btn.sync:disabled svg, .sync-card, .rise .bank-bar-ghost, .rise .bank-bar-fill, .toc-mark { animation: none; }
  .ch:hover, .ch:focus-visible, .ch:active, .tab:active, .btn:active, a.post:hover, .bank-chip:active, .bank-proj:active, .toc-h:active, .toc-p:active, .rail-toggle:active, .seg a:active, .tabbar a:active { transform: none; }
  .shell { transition: none; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- narrow ---- */
@media (max-width: 900px) {
  .bank-add-f { grid-template-columns: minmax(0, 1fr); }
  .grid2, .statrow { grid-template-columns: 1fr 1fr; }
  .acc-row { grid-template-columns: 34px 1fr 100px 70px; }
  .acc-spark { display: none; }
  .acc-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .rank-row { grid-template-columns: 110px 1fr 70px 40px; }
  .c-wide { display: none; }
  table { min-width: 480px; }
  .post { grid-template-columns: 56px minmax(0, 1fr) 70px 60px 70px; gap: 8px; }
  .thumb { width: 56px; height: 32px; }
  .thumb-dur { display: none; }
  .cq-var { grid-template-columns: 22px 90px minmax(0, 1fr); }
  .cq-var .cq-btns { grid-column: 2 / -1; }
  .cq-var-img { width: 90px; }
  .ch-row .minis { min-width: 0; width: 100%; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
  /* bank: the columns become a horizontal snap scroller, one stage per swipe; the strip stacks */
  .bank-strip { grid-template-columns: 1fr; gap: 6px; }
  .bank-proj { padding: 8px 10px 9px; }
  .bank-board { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; margin: 0 -16px; padding: 0 16px 10px; scrollbar-width: none; }
  .bank-board::-webkit-scrollbar { display: none; }
  .bank-col { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; }
  .bank-col-b { max-height: none; }
  .bank-chip-end { margin-left: 0; }
  .bank-sep { display: none; }
}
@media (max-width: 620px) {
  :root { --card-h: 342px; }
  .grid2, .statrow { grid-template-columns: 1fr; }
  .glow { left: -10%; width: 420px; }
  .ch-big-n { font-size: 30px; }
  .mini-n { font-size: 15px; }
  .mini-l { font-size: 9.5px; letter-spacing: .04em; }
  .minis-4 { grid-template-columns: repeat(2, 1fr); }
  .post { grid-template-columns: 56px minmax(0, 1fr) 70px; }
  .post .num:not(.post-n) { display: none; }
}

main:focus { outline: none; }

/* ---- posting slots panel (views/slots.js) ---- */
.modal.slots { width: min(640px, 100%); }
.slots-pr { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.slots-pr b { flex: 1; color: var(--ink); font-size: 13px; }
.slots-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.slots-row > b { flex: 1 1 140px; font-weight: 600; color: var(--ink); }
.slots-row > span { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.slots-row .slots-b { margin-left: auto; display: flex; gap: 6px; }

/* ---- content list pages (views/content-queue.js, content-week.js; the pieces in content-model.js). Posts (.pq-*) is the
   work queue, This week (.wk-*) the calendar; .cl-* is what they share: the head and the project chips with their
   pipeline numbers, a row, a card, a cover, one mark per platform with a light under it, the legend. A tone (teal
   posted, blue goes out by itself, amber needs a person, red late or failed, grey nothing yet) colours only what a
   post's state touches: a section's node and count, the reason line, a card's edge, a mark's light. ---- */
.pq, .wk, .cl-row, .cl-card { --tone: var(--muted); }
.pq [data-tone="live"], .wk [data-tone="live"], .cl-row[data-tone="live"], .cl-card[data-tone="live"] { --tone: var(--accent); }
.pq [data-tone="go"], .wk [data-tone="go"], .cl-row[data-tone="go"], .cl-card[data-tone="go"] { --tone: var(--blue); }
.pq [data-tone="hand"], .wk [data-tone="hand"], .cl-row[data-tone="hand"], .cl-card[data-tone="hand"] { --tone: var(--amber); }
.pq [data-tone="bad"], .wk [data-tone="bad"], .cl-row[data-tone="bad"], .cl-card[data-tone="bad"] { --tone: var(--red); }

/* head: title, kind chips, Slots, + New post */
.cl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cl-head h1 { font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cl-sub { font: 400 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* the kind chips give way first: on a narrow desk they scroll sideways, the buttons after them stay put */
.cl-kinds { display: flex; gap: 6px; margin-left: auto; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-block: -2px; }
.cl-kinds::-webkit-scrollbar { display: none; }
.cl-kinds .btn i { font: 11px var(--mono); font-style: normal; color: var(--muted); margin-left: 1px; }
.cl-kinds .btn.on i { color: var(--accent); }
.cl-slots { color: var(--muted-2); margin-left: 8px; }
/* the project chips: the filter and the pipeline numbers in one strip. The numbers line keeps its height whatever
   the filter, so a press never moves the page. */
.cl-projs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.cl-proj { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 9px 12px 10px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; transition: border-color .14s, background-color .14s, transform .1s; }
.cl-proj:hover { border-color: var(--line-2); }
.cl-proj:active { transform: scale(.985); }
.cl-proj.on { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.cl-proj-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cl-proj-n b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-proj-n em { margin-left: auto; font: 400 10.5px var(--mono); font-style: normal; color: var(--muted-2); white-space: nowrap; }
.cl-allic { color: var(--muted-2); padding: 0 5px; }
.cl-allic svg { width: 12px; height: 12px; display: block; }
.cl-proj-s { display: flex; gap: 10px; height: 17px; overflow: hidden; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cl-proj-s i { font-style: normal; font-family: var(--mono); color: var(--ink); }
.cl-proj-s .zero { display: none; }
.cl-proj-s .bad, .cl-proj-s .bad i { color: var(--red); }
.cl-notice { margin: 0 0 14px; }
.cl-notice .btn { margin-left: auto; }

/* a cover, or the plate that stands for one: hatched, with the kind drawn, so a row keeps its shape */
.cl-cover { display: grid; place-items: center; width: 40px; height: 52px; flex: none; border-radius: 6px; overflow: hidden; background: var(--panel-2); color: var(--muted); }
.cl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-cover.none { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--line-2) 55%, transparent) 4px 5px); border: 1px dashed var(--line-2); }
.cl-cover svg { width: 18px; height: 18px; display: block; }
/* one mark per platform; the light under it is that platform's state */
.cl-marks { display: flex; justify-content: flex-end; gap: 8px; flex: none; }
.cl-m { position: relative; width: 22px; height: 27px; flex: none; }
.cl-m svg { width: 22px; height: 22px; display: block; }
.cl-m.l-off svg { opacity: .35; }
.cl-m::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 0; height: 3px; border-radius: 2px; background: var(--line-2); }
.cl-m.l-live::after, u.l-live { background: var(--accent); }
.cl-m.l-go::after, u.l-go { background: var(--blue); }
.cl-m.l-hand::after, u.l-hand { background: var(--amber); }
.cl-m.l-bad::after, u.l-bad { background: var(--red); }
.cl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 26px; font-size: 11.5px; color: var(--muted); }
.cl-legend b { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.cl-legend span { display: flex; align-items: center; gap: 6px; }
.cl-legend u, .wk-pips u { display: block; width: 12px; height: 4px; border-radius: 2px; background: var(--line-2); text-decoration: none; }

/* a row: when, cover, title + what is missing, project + kind + file, the marks */
.cl-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 10px; }
.cl-row { display: grid; grid-template-columns: 92px 40px minmax(0, 1fr) 200px 112px; align-items: center; gap: 14px; width: 100%; padding: 10px 6px; border: 0; border-top: 1px solid var(--line); border-radius: 8px; background: none; color: var(--body); font: inherit; text-align: left; cursor: pointer; transition: background-color .14s, transform .1s; }
.cl-row:first-child { border-top: none; }
.cl-row:hover { background: var(--panel-2); color: var(--body); }
.cl-row:active { transform: scale(.995); }
.cl-when { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cl-when b { font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.cl-when i { font-size: 11px; font-style: normal; color: var(--muted); white-space: nowrap; }
.cl-bad, .cl-when .cl-bad { color: var(--red); }
.cl-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cl-title { min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-why { min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--tone); }
.cl-why em { margin-left: 10px; font: 400 11px var(--mono); font-style: normal; color: var(--muted); white-space: nowrap; }
.cl-n { font: 500 13px var(--mono); color: var(--ink); }
.cl-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cl-kind { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cl-kind > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cl-kind .pico { min-width: 24px; height: 18px; padding: 0 5px; flex: none; }
.cl-file { font: 10.5px var(--mono); color: var(--muted); opacity: .8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-file:empty { display: none; }

/* ---- Posts: the queue. One spine runs down the page: the top node is the next thing to do, each node below is a
   section, folded sections have a hollow node. ---- */
.pq { --gut: 28px; position: relative; padding-left: var(--gut); }
.pq::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 6px; width: 1px; background: var(--line-2); }
.pq > .cl-notice { margin-bottom: 20px; }
.pq-hero { position: relative; }
.pq-kick { display: flex; align-items: baseline; gap: 10px; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pq-kick b { font-weight: 500; color: var(--tone); }
.pq-stamp { margin-left: auto; }
.pq-node { position: absolute; left: calc(1px - var(--gut)); top: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 4px var(--bg); }
/* the one motion at rest: the node of the next thing pings */
.pq-node::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--tone); animation: ping 2.8s ease-out infinite; will-change: transform, opacity; }
.pq-hero h2 { margin-top: 10px; font-size: 27px; line-height: 1.18; font-weight: 600; letter-spacing: -.015em; color: var(--ink); max-width: 24em; text-wrap: balance; }
.pq-reason { margin-top: 8px; font-size: 14px; color: var(--muted-2); max-width: 62ch; }
.pq-hero .news-box { margin: 18px 0 0; }
.pq-hero .news-box > .ov-h { display: none; } /* the hero heading says it */
.pq-hero .news-card { margin-bottom: 0; }
.pq-hero .news-card + .news-card { margin-top: 10px; }
.pq-first { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 18px; padding: 14px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--tone) 34%, var(--line)); border-radius: var(--radius); color: var(--body); transition: background-color .14s, transform .1s; }
.pq-first:hover { background: var(--panel-2); color: var(--body); }
.pq-first:active { transform: scale(.995); }
.pq-first .cl-cover { width: 72px; height: 96px; border-radius: 8px; }
.pq-first .cl-cover svg { width: 26px; height: 26px; }
.pq-first-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pq-first .cl-title { font-size: 15.5px; font-weight: 600; white-space: normal; }
.pq-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pq-step { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 8px; border: 1px solid var(--line-2); border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink); }
.pq-step i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
.pq-step:not([data-todo=""]) i { color: var(--tone); }
.pq-also { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--amber); border-bottom: 1px dashed var(--amber-line); }
.pq-then { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.pq-then > span { margin-right: 2px; }
.pq-then button { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: none; font-size: 12.5px; color: var(--body); transition: border-color .14s, transform .1s; }
.pq-then button::before { content: ''; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.pq-then button b { font: 500 12.5px var(--mono); color: var(--ink); }
.pq-then button:hover { border-color: var(--muted); }
.pq-then button:active { transform: scale(.96); }
/* a section: a node on the spine, its count, its rule in words */
.pq-sec { position: relative; margin-top: 34px; scroll-margin-top: 20px; }
.pq-sh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.pq-sh::before { content: ''; position: absolute; left: calc(1px - var(--gut)); top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 4px var(--bg); }
.pq-sh b { font-size: 15px; font-weight: 600; color: var(--ink); }
.pq-cnt { font: 500 12.5px var(--mono); color: var(--tone); }
.pq-sub { font-size: 12.5px; color: var(--muted); }
/* the quiet rest: folded, a hollow node, one line each */
.pq-fold { margin-top: 0; }
.pq-sec:not(.pq-fold) + .pq-fold, .pq-hero + .pq-fold { margin-top: 30px; }
.pq-fold > summary { position: relative; list-style: none; cursor: pointer; padding: 9px 26px 9px 0; border-radius: 6px; }
.pq-fold > summary::-webkit-details-marker, .pq-older > summary::-webkit-details-marker { display: none; }
.pq-fold > summary .pq-sh { margin: 0; }
.pq-fold > summary .pq-sh::before { top: 14px; background: var(--bg); border: 1.5px solid var(--tone); }
.pq-fold > summary .pq-sh b { font-size: 13.5px; font-weight: 500; color: var(--muted-2); transition: color .14s; }
.pq-fold > summary::after, .pq-older > summary::before { content: '›'; color: var(--muted); transition: transform .14s; }
.pq-fold > summary::after { position: absolute; right: 8px; top: 9px; }
.pq-fold[open] > summary::after, .pq-older[open] > summary::before { transform: rotate(90deg); }
.pq-fold > summary:hover .pq-sh b, .pq-fold[open] > summary .pq-sh b { color: var(--ink); }
.pq-fold[open] { margin-bottom: 18px; }
.pq-fold[open] > summary .pq-sh::before { background: var(--tone); }
.pq-older { margin-top: 8px; }
.pq-sh + .pq-older { margin-top: -4px; }
.pq-older > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; list-style: none; cursor: pointer; padding: 8px 6px; border-radius: 6px; font-size: 13px; color: var(--muted-2); }
.pq-older > summary span { flex: 1 1 auto; font-size: 12px; color: var(--muted); }
.pq-older > summary:hover { color: var(--ink); }
.pq-older .cl-list { margin-top: 4px; }

/* Drafts: open, one group per project and kind with the slot its next ready post takes; Set ready beside each row */
.pq-dgrp + .pq-dgrp { margin-top: 20px; }
.pq-dhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; font-size: 13.5px; }
.pq-dhead b { font-weight: 600; color: var(--ink); }
.pq-dhead span { font: 500 12px var(--mono); color: var(--muted-2); }
.pq-dhead em { margin-left: auto; font-size: 12.5px; font-style: normal; color: var(--muted); }
.pq-drow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.pq-drow:first-child { border-top: none; }
.pq-drow > .cl-row { border-top: none; }
.pq-drow > .btn { margin-right: 6px; }
@media (max-width: 760px) {
  .pq-dhead em { flex-basis: 100%; margin-left: 0; }
  .pq-drow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pq-drow > .btn { justify-self: start; margin: 0 0 12px 60px; }
}

/* ---- This week: the calendar ---- */
.cl-card { position: relative; display: grid; min-width: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--body); font: inherit; text-align: left; cursor: pointer; transition: border-color .14s, background-color .14s, transform .1s; }
.cl-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--tone); }
.cl-card[data-tone="bad"] { border-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.cl-card:hover { border-color: var(--line-2); background: var(--panel-2); color: var(--body); }
.cl-card:active { transform: scale(.98); }
.cl-ch { display: flex; align-items: baseline; gap: 6px; min-width: 0; font: 500 9.5px/13px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cl-ch b { font-weight: 500; color: var(--tone); overflow: hidden; text-overflow: ellipsis; }
.cl-ch em { font-style: normal; color: var(--ink); letter-spacing: 0; }
.cl-ch i { margin-left: auto; font-style: normal; color: var(--muted); letter-spacing: 0; text-transform: none; }
.cl-cf { display: flex; align-items: center; gap: 5px; min-width: 0; }
/* the tile: the cover as a band on top (the picture is how a post is recognised), the state and time, two lines of
   title, the project, the kind or a note, the marks. Fixed rows, so every cell of a slot row is the same height. */
.wk-tile { grid-template-rows: 44px 13px 30px 17px; gap: 4px; padding: 6px 6px 6px 9px; }
.wk-tile .cl-cover { width: 100%; height: 44px; border-radius: 4px; }
.wk-tile .cl-cover svg { width: 16px; height: 16px; }
.wk-tile .cl-title { height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11.5px; line-height: 15px; white-space: normal; }
.wk-tile .pico { min-width: 0; height: 15px; padding: 0 4px; font-size: 9px; flex: none; }
.wk-lane { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--muted); }
.wk-lane.note { color: var(--amber); }
.wk-tile .cl-marks { gap: 3px; margin-left: auto; }
.wk-tile .cl-m { width: 14px; height: 17px; }
.wk-tile .cl-m svg { width: 14px; height: 14px; }
.wk-tile .cl-m::after { left: 1px; right: 1px; height: 2px; }
/* a second post on the same slot */
.wk-slim { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px 0 9px; white-space: nowrap; }
.wk-slim b { font: 500 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tone); }
.wk-slim span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--ink); }
/* the ghost: a slot with no post, the same footprint drawn as a hole; a press starts a post for that project */
.wk-ghost { background: none; border-style: dashed; }
.wk-ghost::before { display: none; }
.wk-ghost .cl-cover.none { background: none; border-style: dashed; }
.wk-ghost .cl-ch b { color: var(--muted); }
.wk-ghost .cl-title { font-weight: 400; color: var(--muted); }
.wk-ghost:hover { border-color: var(--muted); }
.wk-ghost.missed { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: color-mix(in srgb, var(--red) 5%, transparent); }
.wk-ghost.missed .cl-ch b, .wk-ghost.missed .cl-title { color: var(--red); }
.wk-gap .cl-title { font-weight: 400; color: var(--muted-2); }
.wk-gap .cl-why { font-weight: 400; color: var(--muted); }
.wk-gap.missed .cl-title { color: var(--red); }

/* Post now on the calendar: the real box folded into one amber line */
.wk-pn { margin-bottom: 10px; border: 1px solid var(--amber-line); border-radius: 10px; background: var(--amber-bg); }
.wk-pn > summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; border-radius: 10px; font-size: 12.5px; color: var(--muted-2); }
.wk-pn > summary::-webkit-details-marker { display: none; }
.wk-pn > summary b { color: var(--amber); font-weight: 600; white-space: nowrap; }
.wk-pn > summary > span:not(.wk-pn-dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-pn > summary i { margin-left: auto; font: 500 10.5px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.wk-pn[open] > summary i { font-size: 0; }
.wk-pn[open] > summary i::after { content: 'close'; font-size: 10.5px; }
.wk-pn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.wk-pn .news-box { margin: 0; padding: 0 10px 2px; }
.wk-pn .news-box .ov-h { display: none; }

/* the week steps: move the nine days by seven */
.wk-steps { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 8px; font: 500 11px var(--mono); }
.wk-steps a { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; letter-spacing: .04em; }
.wk-steps a:hover, .wk-steps a:focus-visible { border-color: var(--accent); color: var(--accent); }
.wk-steps a.wk-steps-now { border-color: var(--accent); color: var(--accent); }
.wk-steps b { order: -1; margin-right: auto; font-weight: 500; color: var(--muted); }
/* the tray: outside the week (overdue, no date). It sits on the grid's own columns */
.wk-tray, .wk-grid { display: grid; grid-template-columns: 64px repeat(9, minmax(0, 1fr)); }
.wk-tray { padding: 6px 0; border-radius: 10px; outline: 1px dashed var(--line-2); background: color-mix(in srgb, var(--panel) 45%, transparent); }
.wk-tray > .cl-card, .wk-tray-more { margin: 0 4px; }
.wk-tray-l { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-left: 10px; font-size: 10.5px; line-height: 1.25; color: var(--muted); }
.wk-tray-l span { display: flex; flex-direction: column; }
.wk-tray-l b { font: 500 15px/1.2 var(--mono); color: var(--ink); }
.wk-tray-l .bad, .wk-tray-l .bad b { color: var(--red); }
/* the drafts of the project, under the board */
.wk-drafts { margin-top: 30px; }
.wk-drafts h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.wk-drafts h2 span { font: 400 11px var(--mono); color: var(--muted); }
.wk-drafts h2 i { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 400; color: var(--muted); }
.wk-dt-w { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow-x: auto; }
.wk-dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.wk-dt th { padding: 9px 12px; text-align: left; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.wk-dt td { padding: 7px 12px; border-top: 1px solid var(--line); color: var(--body); vertical-align: middle; white-space: nowrap; }
.wk-dt tbody tr:first-child td { border-top: 0; }
.wk-dt tbody tr { cursor: pointer; }
.wk-dt tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.wk-dt td:first-child, .wk-dt th:first-child { width: 46px; padding-right: 0; }
.wk-dt .cl-cover { width: 30px; height: 40px; border-radius: 5px; }
.wk-dt-t { width: 46%; white-space: normal !important; }
.wk-dt-t a { color: var(--ink); font-weight: 500; text-decoration: none; }
.wk-dt tr:hover .wk-dt-t a { color: var(--accent); }
.wk-dt-t em { margin-left: 8px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--amber-line); background: var(--amber-bg); color: var(--amber); font: 500 10px var(--mono); font-style: normal; white-space: nowrap; }
.wk-dt-f { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font: 400 11.5px var(--mono); color: var(--muted) !important; }
.wk-dt-d { font-family: var(--mono); font-size: 11.5px; color: var(--muted) !important; }
@media (max-width: 760px) { .wk-dt th:nth-child(n+5), .wk-dt td:nth-child(n+5), .wk-dt th:nth-child(3), .wk-dt td:nth-child(3) { display: none; } .wk-dt-t { width: auto; } .wk-drafts h2 i { margin-left: 0; flex-basis: 100%; } }
.wk-tray-more { display: grid; place-content: center; text-align: center; border: 1px dashed var(--line-2); border-radius: 8px; font-size: 11px; color: var(--muted); }
.wk-tray-more b { display: block; font: 500 15px var(--mono); color: var(--ink); }

/* the grid: days across, slots down. The day heads stay in view while the slots scroll under them. */
.wk-grid { margin-top: 8px; }
.wk-agenda { display: none; }
.wk-corner, .wk-dh { position: sticky; top: var(--wk-top, 0px); z-index: 4; background: var(--bg); border-bottom: 1px solid var(--line-2); }
.wk-corner { display: flex; align-items: flex-end; padding: 8px 4px 7px 0; }
.wk-corner span { font: 400 9.5px/1.3 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.wk-dh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 4px; padding: 8px 8px 7px; }
.wk-dh b { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.wk-dh span:not(.dot) { grid-column: 1; font: 400 10.5px var(--mono); color: var(--muted); }
.wk-dh em { grid-area: 1 / 2 / 3 / 3; align-self: center; font: 500 10.5px var(--mono); font-style: normal; color: var(--muted-2); }
.wk-dh em.bad { color: var(--red); }
.wk-dh.past b { color: var(--muted-2); }
.wk-dh.today { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); box-shadow: inset 0 2px 0 var(--accent); }
.wk-dh.today b { color: var(--accent); }
.wk-rh, .wk-cell { border-top: 1px dashed var(--line); }
.wk-rh.band, .wk-cell.band { border-top: 1px solid var(--line-2); }
.wk-rh.first, .wk-cell.first { border-top: none; }
.wk-rh { display: flex; flex-direction: column; gap: 4px; padding: 9px 4px 4px 0; }
.wk-rh b { font: 500 13px/1.2 var(--mono); color: var(--ink); }
.wk-rh span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.wk-rh i { font-style: normal; font-size: 10.5px; line-height: 1.2; color: var(--muted); }
.wk-rh .pico { min-width: 0; height: 16px; padding: 0 4px; font-size: 9.5px; }
.wk-rh:not(.band) { padding-top: 26px; }
.wk-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px; }
.wk-cell.today { background: color-mix(in srgb, var(--accent) 5%, transparent); }
/* the slot does not run on this day */
.wk-void { flex: 1; min-height: 24px; background: radial-gradient(circle, var(--line-2) 1.5px, transparent 2px) center / 8px 8px no-repeat; }
/* now: a teal rule across today's column, above the first slot still to come */
.wk-now { position: relative; }
.wk-now::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); z-index: 2; }
.wk-now::after { content: attr(data-now); position: absolute; right: 4px; top: -8px; z-index: 3; padding: 0 5px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); font: 500 9px/14px var(--mono); letter-spacing: .04em; }
.wk-now.end::before { top: auto; bottom: -1px; }
.wk-now.end::after { top: auto; bottom: -8px; }
.wk-now.first:not(.end)::after { top: 3px; } /* under the sticky day header, the label would hide */
.wk-none { grid-column: 1 / -1; }
.wk u.l-gap { background: none; outline: 1px dashed var(--muted); outline-offset: -1px; }
.wk u.l-gap.missed { outline-color: var(--red); }
.wk u.l-void { background: none; }

/* narrow: the grid becomes a day-by-day agenda of rows under a sticky map of the week */
@media (max-width: 1180px) {
  .wk-grid { display: none; }
  .wk-agenda { display: block; margin-top: 10px; }
  .wk-tray { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px; }
  .wk-tray::-webkit-scrollbar { display: none; }
  .wk-tray > .cl-card, .wk-tray-more { flex: 0 0 124px; margin: 0; }
  .wk-tray-l { flex: 0 0 56px; padding-left: 4px; }
  /* the week in one look: nine columns of pips, one pip per slot, in the grid's row order */
  .wk-map { position: sticky; top: var(--wk-top, 0px); z-index: 6; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; margin: 0 -16px; padding: 6px 12px 8px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .wk-md { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 5px 0 7px; border: none; border-radius: 8px; background: none; transition: background-color .14s, transform .1s; }
  .wk-md:hover { background: var(--panel-2); }
  .wk-md:active { transform: scale(.95); }
  .wk-md b { font-size: 10px; font-weight: 500; color: var(--muted); }
  .wk-md i { font: 500 13px/1.3 var(--mono); font-style: normal; color: var(--ink); }
  .wk-md.past i { color: var(--muted-2); }
  .wk-md.today { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 2px 0 var(--accent); }
  .wk-md.today b { color: var(--accent); font-weight: 600; }
  .wk-pips { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
  .wk-pips u { width: 18px; }
  .wk-day { scroll-margin-top: calc(var(--wk-top, 0px) + 118px); }
  .wk-day > summary { display: flex; align-items: baseline; gap: 8px; padding: 14px 0 10px; cursor: pointer; list-style: none; border-radius: 6px; }
  .wk-day > summary::-webkit-details-marker { display: none; }
  .wk-day > summary b { font-size: 14px; font-weight: 600; color: var(--ink); }
  .wk-day > summary span { font: 400 10.5px var(--mono); color: var(--muted); }
  .wk-day > summary em { margin-left: auto; font: 500 10.5px var(--mono); font-style: normal; color: var(--muted-2); }
  .wk-day > summary em.bad { color: var(--red); }
  .wk-day.today > summary b { color: var(--accent); }
  .wk-day.past > summary b { color: var(--muted-2); }
  .wk-day:not([open]) > summary::after { content: '›'; color: var(--muted); }
  .wk-day-b .cl-row { grid-template-columns: 62px 40px minmax(0, 1fr) 200px 112px; }
  .wk-quiet { display: block; font-size: 12px; color: var(--muted); padding: 8px 0; }
}
@media (max-width: 760px) {
  .cl-head h1 { display: none; }
  .cl-head { gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .cl-new { margin-left: auto; order: 2; }
  .cl-slots { order: 1; margin-left: auto; }
  .cl-new { margin-left: 0; }
  .cl-kinds { order: 3; flex: 0 0 calc(100% + 32px); margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .cl-kinds::-webkit-scrollbar, .cl-projs::-webkit-scrollbar { display: none; }
  .cl-projs { display: flex; margin: 0 -16px 12px; padding: 0 16px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; }
  .cl-proj { flex: 0 0 236px; scroll-snap-align: start; }
  .cl-tz, .wk-pn-x { display: none; }
  .wk-tray { margin: 0 -16px; border-radius: 0; padding: 8px 16px; }
  .pq { --gut: 20px; }
  .pq::before { left: 5px; }
  .pq-hero h2 { font-size: 23px; }
  .pq-hero .news-card { padding: 12px; }
  .pq-first { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; }
  .pq-first .cl-cover { width: 56px; height: 75px; }
  .pq-open { grid-column: 1 / -1; justify-content: center; padding: 10px 14px; }
  .pq-sec { margin-top: 30px; }
  .cl-list { padding: 2px 8px; }
  /* a row folds: the cover on the left, when and marks on top, then the title, the reason, the kind */
  .cl-row, .wk-day-b .cl-row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "cover when marks" "cover body body" "cover meta meta"; align-items: start; gap: 3px 12px; padding: 12px 4px; }
  .cl-row .cl-when { grid-area: when; flex-direction: row; align-items: baseline; gap: 8px; padding-top: 2px; }
  .cl-row .cl-cover { grid-area: cover; width: 44px; height: 58px; }
  .cl-row .cl-body { grid-area: body; }
  .cl-row .cl-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cl-row .cl-meta { grid-area: meta; margin-top: 2px; }
  .cl-row .cl-file { display: none; } /* the row's tooltip carries it */
  .cl-row .cl-marks { grid-area: marks; gap: 7px; }
  .cl-row .cl-m { width: 18px; height: 22px; }
  .cl-row .cl-m svg { width: 18px; height: 18px; }
  .wk-tray > .cl-card, .wk-tray-more { flex-basis: 132px; }
  .pq-step .cl-m { width: 22px; height: 27px; }
  .pq-step .cl-m svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pq-node::after { animation: none; display: none; }
  .cl-row:active, .cl-card:active, .cl-proj:active, .pq-first:active, .pq-then button:active, .wk-md:active { transform: none; }
}

/* ---- the post page (views/post.js, post-frame.js, post-sheets.js): a review desk. Two zones: the thing itself on the
   left (the queue's sentence over the phone frame, sticky), what goes out on the right (the shared fold, one row per
   platform, the total bar, the quiet folds). The rows and the bar share one column grid, so the bar reads as the
   total line of the list. The tone (teal posted, blue by itself, amber needs a person, red late or failed) colours a
   row's state word, its owed button's edge, the headline's node and the bar's node; nothing else. ---- */
.pp { --tone: var(--muted); --cols: 34px 128px minmax(0, 1fr) 198px 24px; display: grid; grid-template-columns: clamp(300px, 34%, 384px) minmax(0, 1fr); grid-template-areas: "top top" "look out"; column-gap: 38px; row-gap: 20px; align-items: start; margin-bottom: -50px; }
.pp[data-tone="live"], .pp [data-tone="live"] { --tone: var(--accent); }
.pp[data-tone="go"], .pp [data-tone="go"] { --tone: var(--blue); }
.pp[data-tone="hand"], .pp [data-tone="hand"] { --tone: var(--amber); }
.pp[data-tone="bad"], .pp [data-tone="bad"] { --tone: var(--red); }
.pp [data-tone="off"] { --tone: var(--muted); }
.pp-ic { width: 13px; height: 13px; display: block; flex: none; }
.pp-chev { width: 14px; height: 14px; display: block; flex: none; color: var(--muted); transition: transform .16s cubic-bezier(.2, .7, .3, 1); will-change: transform; }
.pp .btn.on { background: var(--panel-2); border-color: var(--accent); color: var(--accent); }
.pp .btn.on.sched { border-color: var(--blue); color: var(--blue); }

/* ---- the top line ---- */
.pp-top { grid-area: top; display: flex; align-items: center; gap: 12px; min-height: 30px; min-width: 0; }
.pp-top .back, .pp-top .pico { flex: none; }
.pp-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-kind { flex: none; font: 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }

/* ---- look: the zone keeps the height of the screen; the frame takes what the headline leaves ---- */
.pp-look { grid-area: look; position: sticky; top: 20px; height: calc(100vh - 96px); min-height: 460px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-kick { display: flex; align-items: center; gap: 9px; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pp-kick > b { font-weight: 500; color: var(--tone); }
.pp-node { position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--tone); }
.pp-when { margin-left: auto; display: inline-flex; gap: 8px; padding: 2px 0; border: 0; border-bottom: 1px dashed var(--line-2); background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted-2); transition: color .14s, border-color .14s, transform .1s; }
.pp-when b { font-weight: 500; color: var(--red); }
.pp-when:hover { color: var(--ink); border-color: var(--muted); }
.pp-when:active { transform: scale(.97); }
.pp-why { margin-top: 10px; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.pp-why .cl-n { font-size: inherit; }
/* the stage is a size container: the phone fills its height, or its width, or 340px, whichever comes first */
.pp-stage { flex: 1; min-height: 0; container: pp-stage / size; }
.pp-framed { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.pp-strip, .pp-shut { display: none; }
.pp-sketch { flex: none; font: 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); text-align: center; }
.pp-note { flex: none; display: flex; gap: 12px; align-items: baseline; padding: 0; border: 0; background: none; text-align: left; transition: transform .1s; }
.pp-note b { flex: none; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pp-note span { font-size: 12.5px; line-height: 1.45; color: var(--muted-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color .14s; }
.pp-note:hover span { color: var(--ink); }
.pp-note:active { transform: scale(.99); }

/* ---- the phone: 9:17.6 like a real one, so a 9:16 cover sits inside it with its bars, as it does in the apps ---- */
.pp-phone { flex: none; width: min(100cqw, 340px, calc((100cqh - 26px) * 9 / 17.6)); aspect-ratio: 9 / 17.6; padding: 9px; border-radius: 38px; background: #000; border: 1px solid var(--line-2); box-shadow: 0 30px 50px -30px #000; }
.pp-screen { position: relative; width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--ink-tile); color: #fff; font-size: 12.5px; line-height: 1.35; }
.pp-screen::before { content: ''; position: absolute; z-index: 5; top: 8px; left: 50%; width: 72px; height: 16px; transform: translateX(-50%); border-radius: 10px; background: #000; }
/* the status bar's clock reads the slot: the time the viewer meets this post */
.pp-sbar { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 32px; display: flex; align-items: center; padding: 0 22px; font: 500 11px var(--mono); color: #fff; }
.pp-sbar i { margin-left: auto; width: 24px; height: 10px; border-radius: 3px; border: 1px solid #fff9; }
.pp-sbar i::after { content: ''; display: block; width: 14px; height: 6px; margin: 1px; border-radius: 1px; background: #fff; }
/* the view fades in on a platform switch: the one motion the frame makes */
.pp-view { position: absolute; inset: 0; animation: pp-in .26s cubic-bezier(.2, .7, .3, 1) backwards; will-change: transform, opacity; }
.pp-pic { position: absolute; inset: 0; background: #000; }
.pp-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pp-pic video.pp-img { position: absolute; inset: 0; background: #000; }
/* a full-screen app fills the screen with a 9:16 video (it cuts a little off the sides); a cover of another shape sits on its own blur */
.pp-back { display: none; }
.pp-full .pp-pic { overflow: hidden; }
.pp-full .pp-back { display: block; position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(18px) brightness(.55); }
.pp-full .pp-img { position: absolute; inset: 0; }
.pp-full .pp-img.tall, .pp-full video.pp-img { object-fit: cover; }
.pp-full .pp-pic::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, #000c, #0000); pointer-events: none; }
.pp-full .pp-rail { bottom: 64px; gap: 12px; }
.pp-full .pp-lower { bottom: 40px; padding-bottom: 10px; background: none; }
.pp-sh .pp-rail { bottom: 112px; }
.pp-fb .pp-rail { bottom: 28px; }
.pp-fb .pp-lower { bottom: 0; padding-bottom: 22px; }
.pp-tt .pp-play { top: 66px; }
.pp-tt .pp-sn { top: 64px; }
.pp-tt .pp-dots { top: 70px; }
.pp-tabs { position: absolute; z-index: 2; top: 38px; left: 0; right: 0; display: flex; justify-content: center; gap: 16px; font-size: 12.5px; font-weight: 600; color: #fff9; text-shadow: 0 1px 2px #0009; }
.pp-tabs i { font-style: normal; padding-bottom: 4px; }
.pp-tabs i.on { color: #fff; border-bottom: 2px solid #fff; }
.pp-nav { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 40px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 0 4px 6px; background: #000; font: 500 9.5px var(--sans); color: #fff8; text-align: center; }
.pp-nav i { font-style: normal; }
.pp-nav i.on { color: #fff; }
.pp-nav i.plus { justify-self: center; width: 34px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #fff; color: #000; }
.pp-nav i.plus svg { width: 14px; height: 14px; }
.pp-rail .pp-rav { height: 38px; align-items: start; }
.pp-rail .pp-rav .pp-av { width: 30px; height: 30px; border-color: #fff; }
.pp-rail .pp-disc { width: 28px; height: 28px; margin: 2px 1px 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 3px, #222 4px 9px, #444 10px); border: 1px solid #fff3; }
.pp-noimg { display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--line-2) 55%, transparent) 6px 7px); }
.pp-noimg svg { width: 30px; height: 30px; }
.pp-noimg i { font: 10.5px var(--mono); font-style: normal; text-align: center; padding: 0 20px; }
/* the play pill stays off the cover's middle: the cover is what the person came to check */
.pp-play { position: absolute; z-index: 3; left: 12px; top: 40px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px; border: 1px solid #fff4; background: #0009; color: #fff; font: 500 11px var(--mono); backdrop-filter: blur(4px); transition: transform .1s, background-color .14s; }
.pp-play svg { width: 16px; height: 16px; }
.pp-play:hover { background: #000c; }
.pp-play:active { transform: scale(.94); }
.pp-play[hidden] { display: none; }
.pp-novid { position: absolute; z-index: 3; left: 12px; right: 12px; top: 74px; padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber); font-size: 11.5px; }
.pp-sn { position: absolute; z-index: 2; top: 40px; right: 12px; padding: 2px 8px; border-radius: 999px; background: #0008; color: #fff; font: 500 11px var(--mono); }
.pp-step { position: absolute; z-index: 3; top: 44%; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #fff4; background: #0007; color: #fff; transition: transform .1s, background-color .14s; }
.pp-step svg { width: 18px; height: 18px; }
.pp-step:hover { background: #000b; }
.pp-step:active { transform: scale(.9); }
.pp-prev { left: 8px; }
.pp-next { right: 60px; }
.pp-dots { position: absolute; z-index: 2; left: 0; right: 0; top: 46px; display: flex; justify-content: center; gap: 4px; }
.pp-dots i { width: 5px; height: 5px; border-radius: 50%; background: #fff6; }
.pp-dots i.on { background: #fff; }
/* the icon column and the lower third of the full-bleed views (TikTok, Shorts, Facebook) */
.pp-rail { position: absolute; z-index: 2; right: 10px; bottom: 92px; display: flex; flex-direction: column; gap: 14px; }
.pp-rail i { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 1px 2px #0009); }
.pp-rail svg { width: 24px; height: 24px; }
.pp-lower { position: absolute; z-index: 2; left: 0; right: 54px; bottom: 0; display: flex; flex-direction: column; gap: 5px; padding: 70px 12px 24px 14px; background: linear-gradient(to top, #000d, #0000); }
.pp-none .pp-lower { right: 0; }
.pp-handle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px #0009; }
.pp-sub { padding: 2px 9px; border-radius: 999px; background: #fff; color: #000; font: 600 10.5px var(--sans); font-style: normal; }
.pp-sound { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; font-size: 11.5px; color: #fffd; }
.pp-sound svg { width: 14px; height: 14px; flex: none; }
.pp-sound span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-tt-h { font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px #0009; }
/* the text in the frame is the field: press it */
.pp-cap { position: relative; display: block; margin: 0 -4px; padding: 2px 4px; border-radius: 6px; cursor: text; text-shadow: 0 1px 2px #0009; transition: background-color .14s; }
.pp-cap:hover { background: #fff2; }
.pp-cap:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.pp-cap b { font-weight: 600; }
.pp-empty { font-style: normal; color: #fff8; }
.pp-more { font-style: normal; font-weight: 500; color: #fffb; cursor: pointer; }
.pp-more:hover { color: #fff; }
.pp-ed-dot { position: absolute; top: 5px; right: -9px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.pp-sh-t { font-size: 13.5px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-fb-t, .pp-tt-t { font-size: 12.5px; }
/* Instagram: the feed, the cover cut to 4:5, the caption under the picture after the handle */
.pp-ig { display: flex; flex-direction: column; padding-top: 32px; }
.pp-ig-h { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; }
.pp-ig-h span { margin-left: auto; letter-spacing: .1em; }
.pp-av { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--accent); font: 600 10px var(--mono); }
.pp-ig-p .pp-pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.pp-ig-p .pp-img { object-fit: cover; }
.pp-ig-p .pp-play { top: 10px; }
.pp-ig-p .pp-novid { top: 44px; }
.pp-ig-p .pp-sn { top: 10px; }
.pp-ig-p .pp-step { top: 50%; }
.pp-ig-p .pp-next { right: 8px; }
.pp-ig-p .pp-dots { top: auto; bottom: 8px; }
.pp-ig-r { display: flex; gap: 14px; padding: 8px 12px 4px; }
.pp-ig-r i { width: 24px; height: 24px; display: grid; place-items: center; }
.pp-ig-r svg { width: 24px; height: 24px; }
.pp-ig-r .r { margin-left: auto; }
.pp-ig-c { padding: 0 12px; font-size: 12.5px; line-height: 1.4; }
.pp-ig-c > b { font-weight: 600; }
.pp-ig-c .pp-cap { display: inline; margin: 0; padding: 1px 3px; text-shadow: none; }
.pp-ig-c .pp-more { color: #fff8; }
.pp-ig-c .pp-ed-dot { position: static; display: inline-block; margin-left: 6px; vertical-align: middle; }
/* YouTube long form: the watch page, player on top, title, channel, the description box */
.pp-yt .pp-pic.wide { position: relative; aspect-ratio: 16 / 9; margin-top: 32px; }
.pp-yt .pp-img.wide { object-fit: cover; }
.pp-yt .pp-play { top: 10px; }
.pp-yt .pp-novid { top: 44px; }
.pp-yt-b { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; }
.pp-yt-t { font-size: 14px; font-weight: 600; line-height: 1.3; text-shadow: none; }
.pp-yt-m { font-size: 11.5px; color: #fffa; }
.pp-yt-d { padding: 8px 10px; border-radius: 10px; background: #fff1; font-size: 12px; }
.pp-yt-dt { text-shadow: none; }
/* the editor: the field, laid over the lower part of the frame where its text sits */
.pp-ed { position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 8px; padding: 10px 12px 12px; border-radius: 18px; background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line-2); color: var(--body); box-shadow: 0 16px 40px -16px #000; animation: pp-in .2s cubic-bezier(.2, .7, .3, 1) backwards; will-change: transform, opacity; }
.pp-ed .cq-fl { margin-bottom: 6px; }
.pp-ed textarea { width: 100%; min-height: 96px; max-height: 320px; padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.4; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-s); resize: vertical; }
.pp-ed textarea:focus { border-color: var(--accent); outline: none; }
.pp-ed-f { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pp-seen { flex: 1; min-width: 0; font: 10.5px/1.4 var(--mono); color: var(--muted); }
.pp-seen q { quotes: '“' '”'; color: var(--muted-2); }
.pp-seen b { font-weight: 500; color: var(--amber); }

/* ---- what goes out ---- */
.pp-out { grid-area: out; min-width: 0; container: pp-out / inline-size; }
.pp-oh { margin: 4px 0 10px; }
.pp-out > .cl-notice { margin: 0 0 12px; }
.pp-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; border-radius: 8px; }
.pp-fold > summary::-webkit-details-marker { display: none; }
.pp-fold > summary:hover .pp-chev, .pp-rh:hover .pp-chev { color: var(--ink); }
.pp-fold[open] > summary .pp-chev, .pp-row.open .pp-tog .pp-chev { transform: rotate(90deg); }
.pp-sum { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.pp-sum b { flex: none; font-size: 13px; font-weight: 500; color: var(--muted-2); }
.pp-sum i { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: normal 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); }
.pp-sum em { flex: none; margin-left: auto; font: normal 10.5px var(--mono); letter-spacing: .04em; color: var(--amber); }
.pp-sum em.pp-ticks { color: var(--muted-2); }
.pp-fold > summary:hover .pp-sum b { color: var(--ink); }
.pp-shared { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; }
.pp-shared > summary { min-height: 44px; }
.pp-shared .pp-sum b { font-weight: 600; color: var(--ink); }
.pp-sum-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--muted); }
.pp-shared .pp-fold-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; padding: 2px 0 8px; }
.pp-shared .cq-field[data-key="title"], .pp-shared .cq-field[data-key="description"] { grid-column: 1 / -1; }

/* ---- one row per platform. The selected row is tied to the frame: a pointer on its left edge, towards the frame ---- */
.pp-list { margin-top: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 14px; }
.pp-row + .pp-row { border-top: 1px solid var(--line); }
.pp-rh { position: relative; display: grid; grid-template-columns: var(--cols); align-items: center; gap: 14px; min-height: 98px; margin: 0 -8px; padding: 10px 8px; border-radius: 10px; cursor: pointer; transition: background-color .14s, transform .1s; }
.pp-rh:hover { background: var(--panel-2); }
.pp-rh:active:not(:has(.btn:active, .pp-tog:active)) { transform: scale(.997); }
.pp-row.sel > .pp-rh { background: color-mix(in srgb, var(--accent) 5%, var(--panel)); box-shadow: inset 2px 0 0 var(--accent); }
.pp-row.sel > .pp-rh:hover { background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); }
.pp-row.sel > .pp-rh::before { content: ''; position: absolute; left: -13px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%) rotate(45deg); background: var(--accent); border-radius: 2px; }
.pp-pick { display: grid; grid-column: 1 / 3; grid-template-columns: 34px 128px; align-items: center; gap: 14px; margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left; transition: transform .1s; }
.pp-pick:active { transform: scale(.98); }
.pp-pick:focus-visible { outline-offset: -2px; }
.pp-mark .cl-m { width: 32px; height: 40px; }
.pp-mark .cl-m svg { width: 32px; height: 32px; }
.pp-mark .cl-m::after { left: 3px; right: 3px; height: 4px; }
.pp-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-who b { font-size: 14px; font-weight: 600; color: var(--ink); }
.pp-who em { font-style: normal; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--tone); }
.pp-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pp-snip { font-size: 13px; line-height: 1.4; color: var(--body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pp-snip b { font-weight: 500; color: var(--ink); }
.pp-snip i { font-style: normal; color: var(--muted); }
.pp-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; min-width: 0; white-space: nowrap; font: 10.5px var(--mono); color: var(--muted); }
.pp-meta > span { flex: none; }
.pp-meta .pp-own { color: var(--amber); }
.pp-meta .pp-live { color: var(--ink); }
.pp-meta .pp-pub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted-2); }
.pp-pub.ok { color: var(--accent); }
.pp-pub.sched { color: var(--blue); }
.pp-pub.bad { color: var(--red); }
.pp-pub a { border-bottom: 1px solid var(--line-2); }
.pp-act .btn, .pp-go .btn { width: 100%; justify-content: center; }
.pp-act .btn { padding: 7px 8px; font-size: 12.5px; }
/* a button a person owes takes the colour of the row's light */
.pp-act .pp-owed { border-color: color-mix(in srgb, var(--tone) 46%, var(--line-2)); background: color-mix(in srgb, var(--tone) 8%, var(--panel)); }
.pp-act .pp-owed:hover { border-color: var(--tone); }
.pp-s { display: none; }
.pp-reset { display: block; margin: 5px auto 0; font-size: 11px; color: var(--muted); text-align: center; }
.pp-reset:hover, .pp-reset[data-sure] { color: var(--red); }
.pp-idle { display: block; text-align: center; font: 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); }
.pp-tog { display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; background: none; border-radius: 6px; }
.pp-panel { padding: 0 0 14px 48px; animation: pp-in .22s cubic-bezier(.2, .7, .3, 1) backwards; will-change: transform, opacity; }
.pp-panel[hidden] { display: none; }

/* ---- a sheet: the platform's form, in its order. A section name is the form's own word for the step ---- */
.pp-g { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 2px; }
.pp-g b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pp-g span { font: 400 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.pp-g::after { content: ''; flex: 1; align-self: center; height: 1px; min-width: 12px; background: var(--line-2); }
.pp-grp:first-child > .pp-g { margin-top: 2px; }
.pp-g + .cq-field, .pp-block-h + .cq-field { border-top: 0; }
.pp-sheet .cq-field textarea { display: block; }
.pp-file { display: flex; align-items: center; gap: 12px; min-height: 36px; min-width: 0; }
.pp-file .cl-cover { width: 30px; height: 40px; border-radius: 5px; }
.pp-file-t { display: flex; flex-direction: column; min-width: 0; }
.pp-file-t b { font-size: 13px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.pp-file-t i { font: 400 11px/1.5 var(--mono); font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-slides { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.pp-slides span { position: relative; flex: 0 0 46px; aspect-ratio: 9 / 16; border-radius: 5px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line-2); }
.pp-slides img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-slides u { position: absolute; top: 2px; left: 2px; z-index: 1; min-width: 14px; padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--ink-tile) 72%, transparent); font: 500 9.5px/14px var(--mono); text-align: center; text-decoration: none; color: var(--ink); }
.pp-hint { margin-top: 6px; font: 400 10.5px var(--mono); color: var(--muted); }
.pp-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-height: 30px; padding-top: 4px; }
.pp-time b { font: 500 14px var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.pp-time i { font: 400 11px var(--mono); font-style: normal; color: var(--muted); }
.pp-notes { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; padding: 1px 0 1px 12px; border-left: 2px solid var(--line-2); font-size: 13px; color: var(--ink); }
.pp-none { padding-top: 5px; font-size: 13px; color: var(--muted); }
.pp-none .linkish { font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.pp-inert label { opacity: .7; }
.pp-checks-v { padding-top: 2px; }
.pp-sheet input[type="checkbox"] { width: auto; flex: none; padding: 0; }
/* the subtitle files: one line each, the end of the path kept (the language is in the file's name) */
.pp-sheet .pp-srt { padding: 3px 0; border-top: 0; }
.pp-sheet .pp-srt .cq-ro { padding: 5px 0; border: 0; background: none; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.pp-sheet .pp-srt .cq-ro::before { content: '\200e'; }
.pp-sheet .cq-slide-list { font-size: 13px; color: var(--body); }
.pp-src { font-size: 12.5px; color: var(--muted-2); overflow-wrap: anywhere; }
.pp-src a { border-bottom: 1px solid var(--line-2); }
.pp-block { padding-top: 12px; border-top: 1px solid var(--line); }
.pp-g + .pp-block { padding-top: 6px; border-top: 0; }
.pp-block-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 26px; }
.pp-block-h b { font-size: 13px; font-weight: 600; color: var(--ink); }
.pp-block-h > span { font: 400 10.5px var(--mono); color: var(--muted); }
/* a tick from the kit's checklist, sitting on the thing it ticks */
.pp-tick { margin-left: auto; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 11px var(--mono); color: var(--muted-2); transition: border-color .14s; }
.pp-tick input { margin: 0; }
.pp-tick:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2)); }
.pp-tick:has(input:checked) span { color: var(--accent); text-decoration: none; }
/* the fold inside a sheet: what is done on the platform after the upload. It opens by itself once the platform has the post */
.pp-after { margin-top: 22px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; background: color-mix(in srgb, var(--bg) 40%, var(--panel)); }
.pp-after-h { display: flex; align-items: baseline; gap: 10px; margin: 0 -14px; padding: 12px 14px; }
.pp-after-h b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pp-after-h > span { font: 400 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pp-after { padding-bottom: 6px; }
.pp-after-h + .pp-block { border-top-color: var(--line-2); }
.pp-kcount { margin-left: auto; }
.pp-tail { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--line-2); }
.pp-tail .cq-field { border-top: 0; }
.pp-nums { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 10px; }
.pp-nums span { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--muted); }
.pp-nums b { font: 500 17px var(--mono); color: var(--ink); }
.pp-hand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.pp-rm { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.pp-rm:hover, .pp-rm[data-sure] { color: var(--red); }

/* ---- the total line. In the flow right under the rows; it sticks to the bottom edge once the rows grow past the screen.
   The shadow is a solid skirt in the page colour: an open row that scrolls behind the bar does not show in the gap under it. ---- */
.pp-bar { position: sticky; bottom: 14px; z-index: 6; display: grid; grid-template-columns: 34px 128px minmax(0, 1fr) auto 24px; align-items: center; gap: 14px; margin-top: 8px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 8px 0 6px var(--bg); }
.pp-bar .pp-node { justify-self: center; width: 11px; height: 11px; }
/* the one motion at rest: while a row is open the bar's node pings, as the queue's Next node does */
.pp-bar[data-open="1"] .pp-node::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--tone); animation: ping 2.8s ease-out infinite; will-change: transform, opacity; }
.pp-count { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 7px; row-gap: 5px; font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.pp-count b { font: 500 19px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pp-meter { grid-column: 1 / -1; display: flex; gap: 3px; }
.pp-meter u { display: block; width: 18px; height: 4px; border-radius: 2px; text-decoration: none; }
.pp-meter u.l-off { background: var(--line-2); }
.pp-hint { min-width: 0; font-size: 12.5px; color: var(--muted-2); }
/* the button ends where the rows' buttons end, and grows to the left when its label is long */
.pp-go { grid-column: 4; min-width: 198px; }
.pp-go .btn { padding: 9px 14px; }

.pp-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 0 15px; font: 10.5px var(--mono); letter-spacing: .04em; color: var(--muted); }
.pp-add .btn { border-style: dashed; background: none; color: var(--muted-2); }
.pp-add .btn:hover { color: var(--ink); }

/* ---- the quiet folds ---- */
.pp-quiet { margin-top: 16px; padding: 0 15px; }
.pp-quiet .pp-fold { border-top: 1px solid var(--line); }
.pp-quiet .pp-fold-b { padding: 4px 0 16px 24px; }
.pp-quiet .cq-file:first-child, .pp-quiet .cl-notice + .cq-file { border-top: none; }
.pp-quiet .cl-notice { margin: 0 0 6px; }
.pp-kitw > .cq-field:first-child, .pp-kitw > .pp-block:first-child { border-top: 0; }
.pp-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pp-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 78px; gap: 3px; padding: 3px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel); }
.pp-seg button { padding: 5px 0; border: 0; border-radius: 6px; background: none; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: background-color .14s, color .14s, transform .1s; }
.pp-seg button:hover { color: var(--ink); }
.pp-seg button:active { transform: scale(.96); }
.pp-seg button.on { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.pp-hintline { flex: 1 1 240px; min-width: 0; font-size: 12px; color: var(--muted); }
.pp-id { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10.5px var(--mono); color: var(--muted); }

/* ---- a wide list: a row of a sheet is label | value | its button, so the eye runs down one column of values ---- */
@container pp-out (min-width: 640px) {
  .pp-sheet .cq-field { display: grid; grid-template-columns: 128px minmax(0, 1fr) 100px; grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; padding: 11px 0; }
  .pp-sheet .cq-field > .cq-fl { display: contents; }
  .pp-sheet .cq-fl > label { grid-column: 1; grid-row: 1; padding-top: 8px; line-height: 1.45; }
  .pp-sheet .cq-fl > .cq-count { grid-column: 1; grid-row: 2; margin: 2px 0 0; }
  .pp-sheet .cq-fl > .cq-count:empty { display: none; }
  .pp-sheet .cq-fl > .cq-edited { grid-column: 1; grid-row: 3; margin-top: 2px; }
  .pp-sheet .cq-fl > .btn, .pp-sheet .cq-fl > a.btn, .pp-sheet .cq-field > .cq-btns { grid-column: 3; grid-row: 1; margin: 0; }
  .pp-sheet .cq-fl > .btn, .pp-sheet .cq-btns .btn { width: 100%; min-width: 0; justify-content: center; padding-inline: 6px; }
  .pp-sheet .cq-field > .cq-btns { flex-direction: column; flex-wrap: nowrap; gap: 5px; }
  .pp-sheet .cq-field > :not(.cq-fl):not(.cq-btns) { grid-column: 2; min-width: 0; }
  .pp-sheet .cq-field > textarea { grid-row: 1 / span 3; }
  .pp-sheet .cq-field > .pp-checks-v, .pp-sheet .cq-field > .cq-var, .pp-sheet .cq-field > .pp-nums { grid-column: 2 / -1; }
  .pp-sheet .cq-var { grid-template-columns: 22px 96px minmax(0, 1fr) auto; }
  .pp-sheet .cq-var-img { width: 96px; }
  .pp-sheet .pp-srt > .cq-fl > label { padding-top: 6px; }
}
/* ---- a narrow list (phone, a small desk window): the text drops under the row's first line, labels shorten ---- */
@container pp-out (max-width: 639px) {
  .pp-rh { grid-template-columns: 32px minmax(0, 1fr) auto 24px; grid-template-areas: "who who act tog" "text text text text"; row-gap: 9px; min-height: 0; padding: 12px 8px; }
  .pp-pick { grid-area: who; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .pp-act { grid-area: act; }
  .pp-tog { grid-area: tog; }
  .pp-text { grid-area: text; }
  .pp-act .btn { width: auto; }
  .pp-l { display: none; }
  .pp-s { display: inline; }
  .pp-panel { padding-left: 0; }
  .pp-bar { grid-template-columns: 14px auto minmax(0, 1fr); gap: 12px; }
  .pp-hint { display: none; }
  .pp-go { grid-column: 3; justify-self: end; min-width: 0; }
  .pp-meta { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
  .pp-snip { -webkit-line-clamp: 2; }
  .pp-go .btn { width: auto; max-width: 100%; padding: 9px 11px; font-size: 12.5px; white-space: normal; text-align: center; }
  .pp-shared .pp-fold-b { grid-template-columns: minmax(0, 1fr); }
  .pp-sum-t { display: none; }
  .pp-sheet .pp-srt { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
  .pp-sheet .pp-srt > .cq-fl { grid-column: 1; min-height: 0; margin: 0; }
  .pp-sheet .pp-srt > .cq-ro { grid-column: 1; padding: 0 0 4px; }
  .pp-sheet .pp-srt > .cq-btns { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

@media (max-width: 760px) {
  .pp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "look" "out"; row-gap: 14px; margin-bottom: -22px; }
  .pp-top { flex-wrap: wrap; row-gap: 8px; }
  .pp-kind { margin-left: auto; }
  .pp-title { order: 3; flex: 0 0 100%; white-space: normal; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  /* the preview as a strip: the cover beside the headline. One tap opens the frame big in place. */
  .pp-look { position: static; height: auto; min-height: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
  .pp-say { grid-column: 2; grid-row: 1; }
  .pp-why { font-size: 19px; margin-top: 8px; }
  .pp-note { display: none; }
  .pp-look:not(.big) .pp-stage { display: none; }
  .pp-look:not(.big) .pp-strip { position: relative; grid-column: 1; grid-row: 1; display: grid; place-items: end; width: 84px; height: 112px; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--line-2) 55%, transparent) 6px 7px), var(--panel); color: var(--ink); transition: transform .1s; }
  .pp-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pp-strip > svg:not(.pp-ic) { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; color: var(--muted); }
  .pp-strip .pp-ic { position: relative; width: 22px; height: 22px; padding: 4px; border-radius: 6px; background: color-mix(in srgb, var(--ink-tile) 70%, transparent); }
  .pp-strip:active { transform: scale(.96); }
  .pp-look.big { grid-template-columns: minmax(0, 1fr); }
  .pp-look.big .pp-say { grid-column: 1; }
  .pp-look.big .pp-strip { display: none; }
  .pp-look.big .pp-stage { display: block; height: min(calc(100dvh - 300px), 640px); min-height: 360px; }
  .pp-look.big .pp-phone { width: min(100cqw, 300px, calc((100cqh - 26px) * 9 / 17.6)); }
  .pp-look.big .pp-shut { display: inline-flex; justify-self: center; }
  /* the total line sits on the tab bar, edge to edge */
  .pp-bar { bottom: calc(61px + env(safe-area-inset-bottom)); margin: 8px -16px 0; padding: 10px 16px; border-width: 1px 0; border-radius: 0; box-shadow: none; background: color-mix(in srgb, var(--panel-2) 94%, transparent); backdrop-filter: blur(12px); }
  .pp-add, .pp-quiet { padding: 0 2px; }
  .pp-quiet .pp-fold-b { padding-left: 0; }
  .pp-row.sel > .pp-rh::before { display: none; }
  .pp-id { flex-basis: 100%; }
}
@keyframes pp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pp-view, .pp-panel, .pp-ed { animation: none; will-change: auto; }
  .pp-bar[data-open="1"] .pp-node::after { animation: none; display: none; }
  .pp-chev { transition: none; }
  .pp-rh:active, .pp-when:active, .pp-note:active, .pp-seg button:active, .pp-strip:active, .pp-pick:active, .pp-step:active, .pp-play:active { transform: none; }
}

/* YouTube account page: playlists by type */
.pl-card { margin-top: 18px; }
.pl-t { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.pl-t th { text-align: left; padding: 6px 8px; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.pl-t td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.pl-t input { width: 100%; min-width: 160px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 6px 9px; }
.pl-t input:focus { border-color: var(--accent); outline: none; }
.pl-t .num { text-align: right; font-family: var(--mono); }
.pl-t a { color: var(--accent); }
.pl-lines { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--body); }