:root{
  /* Social Playbook wears the site's shell (james-poindexter-iv.com/brand/shell/):
     the same fonts, colours, top bar and footer as every page on the domain. The
     names below are kept so the rest of this file and app.js did not change; they
     now point at the shell's tokens. Amber, green and red are this app's own status
     colours -- the site has no statuses. */
  --paper:var(--px-bg); --panel:var(--px-card); --ink:var(--px-fg); --ink2:var(--px-muted); --line:var(--px-rule);
  --slate:var(--px-accent); --slate-soft:var(--px-tint); --amber:#B7791F; --green:#2F7A52; --red:#A8483C;
  --banner:#B7791F; --banner-fg:#FFFFFF; --drafted:#FFF8EC; --stripe:rgba(201,138,43,.05);
  /* Controls and containers alike take The Poindex's radius (loop 392). */
  --radius:var(--px-radius); --box:var(--px-radius);
}
/* Dark: the status colours lift so they still read on Night; the shell remaps every --px-* token itself.
   Same two selectors as shell.css, so a page pinned light stays light. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --amber:#D9A441; --green:#5DB585; --red:#E07A6B; --banner:#6B4A12; --banner-fg:#F5E6C8; --drafted:#2A2416; --stripe:rgba(217,164,65,.025)}}
:root[data-theme="dark"]{--amber:#D9A441; --green:#5DB585; --red:#E07A6B; --banner:#6B4A12; --banner-fg:#F5E6C8; --drafted:#2A2416; --stripe:rgba(217,164,65,.025)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp-sans);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:var(--jp-sans);font-weight:700;letter-spacing:-.01em;margin:0 0 .4em;line-height:1.2}
h1{font-size:28px;font-weight:800;letter-spacing:-.02em} h2{font-size:20px;margin-top:1.6em} h3{font-size:16px;margin-top:1.2em}
p{margin:.4em 0 .8em;max-width:70ch}
a{color:var(--slate)}
button{font:600 14px var(--jp-sans);cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 12px;border-radius:var(--radius)}
button:hover{border-color:var(--slate)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--px-accent);color:var(--px-accent-fg);border-color:var(--px-accent)}
button.primary:hover{filter:brightness(1.08)}
button.quiet{border-color:transparent;background:transparent;color:var(--ink2);padding:4px 8px}
button.danger{color:var(--red)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--px-accent);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:7px 9px;width:100%}
input[type=checkbox]{width:auto}
textarea{min-height:80px;resize:vertical}
textarea.tall{min-height:140px}
label{display:block;font-size:13px;color:var(--ink2);margin:10px 0 4px}
label.inline{display:inline-flex;align-items:center;gap:6px;margin:4px 12px 4px 0;color:var(--ink)}
.app{min-height:calc(100vh - 150px);min-width:0}
/* The page: the shell's .px-page column holds the tab row and #main, so this file sets no width
   of its own (loop 392). A title with its purpose under it (.px-head) may carry the page's buttons. */
.sp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 20px}
.sp-head>div:first-child{min-width:0;flex:1 1 320px}
.sp-head h1{margin:0}
/* Content on light panels. A panel's heading is the shell's ruled label, also when it is an h2. */
.px-panel>h2.px-label,.px-panel>h3.px-label{font:500 11px/1.2 var(--px-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--px-muted)}
.px-panel>.px-label{max-width:none}
/* A panel heading with a button beside it: the row carries the rule. */
.px-panel>.sp-panel-head{margin:0 0 4px;padding:0 0 8px;border-bottom:1px solid var(--px-rule)}
.sp-panel-head>.px-label{margin:0}
.side-stats .stat b{font-size:22px}
.px-panel>:last-child{margin-bottom:0}
.px-panel>.px-label+*{margin-top:12px}
.px-panel>.px-label+table,.px-panel>.px-label+.empty{margin-top:12px}
.px-panel .card{margin:12px 0}
.px-cols>*,.px-grid>*{min-width:0}
.px-cols>div>.px-panel:last-child{margin-bottom:0}
/* Tiles: the shell's wrapping grid, at a width that lets a row of six stand side by side. */
.stats.px-grid,.spots.px-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 16px}
.px-panel .stats.px-grid,.px-panel .spots.px-grid{margin:12px 0 0}
.px-cols>.stats.px-grid{margin:0}
.side-stats.px-grid{grid-template-columns:1fr 1fr}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 20px}
.grid2>*,.grid3>*{min-width:0}
.chartwrap{overflow-x:auto} .chartwrap svg{min-width:560px}
.card{background:var(--px-card,var(--panel));border:1px solid var(--line);border-radius:var(--box);padding:16px 20px;margin:12px 0}
.card.clickable{cursor:pointer}
.card.clickable:hover{border-color:var(--slate)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.between{justify-content:space-between}
.muted{color:var(--ink2);font-size:13px}
.pill{display:inline-block;font:11.5px var(--jp-mono);padding:2px 8px;border-radius:calc(var(--px-radius) / 2);border:1px solid var(--line);color:var(--ink2);background:var(--panel);white-space:nowrap}
.pill.idea{border-color:var(--px-muted)} .pill.filmed{border-color:var(--amber);color:var(--amber)}
.pill.live{border-color:var(--green);color:var(--green)} .pill.draft{border-color:var(--slate);color:var(--slate)}
.pill.suggested{border-color:var(--amber);color:var(--amber)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;background:var(--panel);border:1px solid var(--line);border-radius:var(--box);overflow:hidden}
.px-panel table{border:0;border-radius:0}
/* Ruled rows on the card, a mono header over an ink rule: The Poindex's table, not JP IV's black bar. */
th,td{text-align:left;padding:8px 10px;border:0;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 11.5px var(--jp-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--px-muted);background:transparent;border-bottom-color:var(--px-muted)}
tr:last-child>td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.clickable{cursor:pointer} tr.clickable:hover td{background:var(--px-tint)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--box);padding:12px 14px}
.stat b{font-family:var(--jp-sans);font-size:26px;font-weight:700;display:block}
.stat span{font-size:12.5px;color:var(--ink2)}
ol.loop{counter-reset:s;list-style:none;padding:0;margin:8px 0}
ol.loop li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
ol.loop li::before{content:counter(s);font-family:var(--jp-mono);font-size:16px;font-weight:600;color:var(--slate);line-height:1}
ol.loop li:last-child{border-bottom:0}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.preset{background:var(--panel);border:1px solid var(--line);border-radius:var(--box);padding:14px}
.preset h3{margin-top:0}
.draftout,.pre{white-space:pre-wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--box);padding:14px;font-size:14.5px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:9px 14px;border-radius:var(--radius);font-size:13.5px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50;max-width:90vw}
.toast.show{opacity:1}
.toast.err{background:#A8483C;color:#fff}
.bar{height:10px;background:var(--slate-soft);border-radius:999px;overflow:hidden;min-width:60px}
.bar span{display:block;height:100%;background:var(--slate)}
.empty{padding:24px;text-align:center;color:var(--ink2);background:var(--panel);border:1px dashed var(--line);border-radius:var(--box)}
.overlay{position:fixed;inset:0;background:rgba(31,35,38,.35);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}
.overlay .card{width:min(460px,100%);margin:0}
.filters select,.filters input{width:auto}
.queue-card h3{margin:0 0 4px;font-size:17px}
.queue-card .hook{color:var(--ink2);font-style:italic;margin:6px 0}
.post-card{border-left:4px solid var(--line)}
.post-card.live{border-left-color:var(--green)} .post-card.draft{border-left-color:var(--slate)}
.snap-form{display:grid;grid-template-columns:repeat(5,1fr) auto;gap:8px;align-items:end}
.snap-form label{margin:0 0 2px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px}
.kv b{font-weight:500;color:var(--ink2)}
details summary{cursor:pointer;color:var(--slate);font-size:13.5px}
.list-editor .item{display:grid;grid-template-columns:1fr 2fr auto;gap:8px;margin-bottom:8px}
.list-editor .item.drafted input,.acct-editor .item.drafted input{border-color:var(--amber);background:var(--drafted)}
.acct-editor .item .conn{grid-column:1 / -1;margin:-2px 0 6px}
.acct-editor .item{display:grid;grid-template-columns:1fr 1fr 1fr 1.6fr 1.2fr auto;gap:8px;margin-bottom:8px}
.sr{position:absolute;left:-9999px}
@media (max-width:820px){
  .grid2,.grid3,.presets{grid-template-columns:1fr}
  .snap-form{grid-template-columns:1fr 1fr 1fr}
  .kv{grid-template-columns:1fr;gap:0 0} .kv b{margin-top:6px}
  .list-editor .item,.acct-editor .item{grid-template-columns:1fr}
  table{display:block;overflow-x:auto;max-width:100%}
  th,td{white-space:nowrap} td.wrap{white-space:normal}
  .stat b{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- guided intake: a conversation, not a form ---- */
.chat{display:flex;flex-direction:column;gap:10px;min-width:0}
.chatlog{display:flex;flex-direction:column;gap:8px;max-height:58vh;overflow-y:auto;padding:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--box);scroll-behavior:smooth}
.b{max-width:82%;padding:9px 12px;border-radius:12px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.b.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:4px;
  position:relative;padding-right:34px}
/* "hear it again" sits in the corner of whatever Poindexter last said. */
.b.bot .editb.replay{position:absolute;top:5px;right:5px}
.composer .state{width:100%;min-height:1.2em}
.voiceopt{border:1px solid var(--line);padding:8px 10px}
.voiceopt:hover{border-color:var(--slate)}
.voiceopt input[type=radio]{width:auto;flex:none}
.b.me{align-self:flex-end;background:var(--slate-soft);border:1px solid var(--jp-line);border-bottom-right-radius:4px;
  position:relative;padding-right:32px}
.b.me.ghost{opacity:.55;font-style:italic;padding-right:12px}
.b.me.editing{width:82%;max-width:82%;padding:8px}
.b.me.editing textarea{width:100%;margin:0;display:block}
.editb{position:absolute;top:5px;right:5px;padding:1px 5px;font-size:12px;line-height:1.3;min-height:0;
  background:transparent;border:1px solid transparent;color:var(--ink2);cursor:pointer;border-radius:6px}
.editb:hover,.editb:focus-visible{border-color:var(--line);background:var(--panel);color:var(--ink)}
.b.typing{display:flex;gap:4px;align-items:center;padding:12px}
.b.typing span{width:6px;height:6px;border-radius:50%;background:var(--ink2);animation:blink 1.2s infinite}
.b.typing span:nth-child(2){animation-delay:.2s}
.b.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.composer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.composer #micBtn{min-width:190px}
.composer #micBtn.listening{background:var(--red);border-color:var(--red)}
.typerow{display:flex;gap:8px;flex:1;min-width:200px}
.typerow input{flex:1;margin:0;min-width:0}
@media (prefers-reduced-motion:reduce){.chatlog{scroll-behavior:auto}.b.typing span{animation:none}}

/* ---- a demo profile must never look like the real one ---- */
#demoBanner{background:var(--banner);color:var(--banner-fg);font-weight:600;text-align:center;
  padding:7px 12px;letter-spacing:.02em}
body.demoing #main{background:repeating-linear-gradient(135deg,transparent,transparent 22px,var(--stripe) 22px,var(--stripe) 44px)}
body.demoing #brandSub::after{content:" · DEMO";color:var(--amber);font-weight:700}

/* ---- ideas ---- */
.idea .why{background:var(--slate-soft);border-left:3px solid var(--slate);
  border-radius:0;padding:8px 12px;margin:10px 0}
.idea .why b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.idea .why p{margin:4px 0 0}
.idea h3{font-size:17px}
#seedCard summary{cursor:pointer}
#seedCard textarea{margin-top:10px}

/* ---- first-run setup chooser ---- */
.setup{border-color:var(--slate);background:var(--slate-soft)}
.setup h2{font-size:19px}
.doors{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.door{flex:1 1 240px;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--box);padding:12px 14px;display:flex;flex-direction:column}
.door h3{margin:0 0 6px;font-size:15px}
.door p{margin:0 0 8px;font-size:13.5px}
.door .small{font-size:12.5px}
.door > *:last-child{margin-top:auto}
.door button{width:100%}
.tabbar a.pending,#navLinks a.pending{opacity:.45}

/* Access: the setup sequence, read top to bottom. Steps you are not up to yet
   stay legible but visibly not-now, so the eye lands on the one to do. */
.step h2{font-size:17px}
.step.now{border-color:var(--slate);background:var(--slate-soft)}
.step.later{opacity:.62}
.step .pill{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.done-next{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}

/* ---- the shell's top bar: which profile, who is signed in, sign out ----
   The chip itself (.jp-me, .jp-who, .jp-signout) is styled by the site's shell.css, so this
   app's bar and the site's bar are the same object. Only the profile switch is ours. */
.jp-actions small{font:12px var(--jp-mono);color:var(--jp-ink-2)}
.jp-actions select{width:auto;max-width:160px;min-height:32px;padding:4px 8px;font:12px var(--jp-mono);border-radius:var(--px-radius);background:var(--px-card);color:var(--px-fg);border-color:var(--px-rule)}
.jp-foot{margin-top:8px}

/* ---- Live AI: the Spark Tile (from the site's resources/codebook/try) ----
   A square tile in the brand blue with a white four-point sparkle marks every
   button that calls Claude and every answer Claude wrote. On a blue button the
   tile inverts. Fallback colours are the shell's own values, for when shell.css
   has not loaded. */
:root{--ai-blue:var(--px-accent); --ai-blue-ink:var(--px-accent); --ai-wash:var(--px-tint); --ai-paper:var(--px-accent-fg)}
.spark{display:block;flex:none;min-width:14px;min-height:14px}
.spark rect{fill:var(--ai-blue)} .spark path{fill:var(--ai-paper)}
.spark.inv rect{fill:var(--ai-paper)} .spark.inv path{fill:var(--ai-blue)}
button.ai-btn{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:36px;text-align:left;
  border-color:var(--ai-blue);color:var(--ai-blue);background:var(--panel)}
button.ai-btn:hover{background:var(--ai-wash)}
button.ai-btn.primary{background:var(--ai-blue);color:var(--ai-paper);border-color:var(--ai-blue)}
button.ai-btn.primary:hover{background:var(--ai-blue-ink);border-color:var(--ai-blue-ink)}
button.ai-btn .spark{width:16px;height:16px}
button.ai-btn:disabled.working{opacity:1}
.ai-cost{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--jp-mono,monospace)}
.ai-cost::before{content:"";display:block;width:1px;height:16px;background:currentColor;opacity:.45}
.ai-dots{display:inline-flex;align-items:flex-end;gap:3px;height:1em;padding:0 0 .12em 3px;box-sizing:border-box}
.ai-dots i{display:block;width:3px;height:3px;background:currentColor;animation:ai-dot 1.2s ease-in-out infinite}
.ai-dots i:nth-child(2){animation-delay:.2s} .ai-dots i:nth-child(3){animation-delay:.4s}
@keyframes ai-dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ai-dots i{animation:none;opacity:1}}
.ai-credits{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 0;font-size:13px;color:var(--ink2);max-width:none}
.ai-credits b{color:var(--ink);font-weight:600}
.ai-live{font:600 11px var(--jp-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ai-blue)}
.ai-written{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px;font-weight:600;color:var(--ink)}
.ai-note{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:10px 12px;max-width:none;
  border:1px solid var(--ai-blue);border-left-width:3px;background:var(--ai-wash);color:var(--ink);font-size:14px}
.ai-note .spark{margin-top:3px}
.idea .ai-written{margin:6px 0 0}
@media (max-width:820px){
  button.ai-btn{min-height:40px}
}
.b .ai-written{margin:0 0 4px;font-size:12px;white-space:normal}
.door .ai-credits{margin:0 0 8px;font-size:12.5px}
.door button.ai-btn{justify-content:center}
label + .ai-written,label + .ai-note{margin:2px 0 6px}
.ai-credits > span:last-child,.ai-note > span,.ai-written > span{flex:1 1 10em;min-width:0}
/* An admin's AI usage line (16 Oct 2026): a warning past $10 a day on Social, a stop at the
   $25 check until he says keep going. The amber of a thing filmed, not an error's red. */
.ai-usage{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px;margin:0 0 14px;
  border:1px solid var(--amber);border-left-width:3px;background:var(--panel);color:var(--ink);font-size:14px;border-radius:var(--radius)}
.ai-usage[hidden]{display:none} /* display:flex would beat the hidden attribute */
.ai-usage.stop{border-color:var(--red)}
.ai-usage > span{flex:1 1 14em;min-width:0}
.ai-usage button{margin-left:auto}

/* ---- talking to Poindexter ----
   The transcript is the guided-intake chat, plus the two things a conversation
   that WRITES needs and one that only asks does not: a note under anything he
   saved, and cards for the things he is offering rather than telling. */
.b.bot .said{display:block}
.b .did{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:12.5px;color:var(--green);max-width:none}
.b .did .tick{font-weight:700}
.b .card{margin:10px 0 0;padding:10px 12px;max-width:none}
.b .card.lane p{margin:0 0 6px;max-width:none}
.b .card.lane .why{color:var(--ink2);font-style:italic}
.b .connectrow{margin-top:10px}
.turn.note{align-self:center;margin:2px 0;font-size:12.5px;color:var(--ink2);font-style:italic}
.chatlog .hints,.composer .hints{max-width:none;margin:0;flex-basis:100%}
.chatlog ul.list,ul.list{list-style:none;padding:0}
ul.list li{border-bottom:1px solid var(--line);padding:8px 0}
/* A bubble holding cards needs the room; a plain one still reads as a bubble. */
.b.bot:has(.card),.b.bot:has(.connectrow){max-width:100%;width:100%}

/* ---- the playbook's tips: the part written for this presence ---- */
ol.loop.tips li div b{display:block;margin-bottom:2px}
ol.loop.tips .why{margin:6px 0 0;font-style:italic;max-width:none}

/* ---- feedback on the cut ---- */
.card.review h4{margin:14px 0 4px;font-size:14px}
.card.review ol.loop li{padding:8px 0}
.card.review .kv{margin-top:6px}
.card.review ul{margin:4px 0 0;padding-left:20px}
#vidOut .card.review:first-child{border-color:var(--slate)}

/* ---- watching his version of the cut ---- */
.cutplay{margin-top:10px}
.cutplay video{width:100%;max-width:320px;margin-top:8px;background:#000;display:block}
.cutplay [data-playstate]{margin:6px 0 0;max-width:none}
ol.loop.cuts li div b{font-family:var(--jp-mono);font-size:14px}

/* ---- arguing with a reading ---- */
details.argue{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
details.argue summary{font-weight:600;color:var(--slate)}
details.argue textarea{min-height:56px;margin:6px 0}
ol.loop.sections li div b{font-family:var(--jp-mono);font-size:13px;color:var(--slate)}
.card.review .pill{margin-left:8px}

/* A link that behaves as a button (the CapCut handoff both copies and opens). */
a.button{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--jp-sans);cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 12px;text-decoration:none}
a.button:hover{border-color:var(--slate)}
a.button.quiet{border-color:transparent;background:transparent;color:var(--ink2);padding:4px 8px}

table.captions{margin-top:6px;font-size:13px}
table.captions td.num{white-space:nowrap;font-family:var(--jp-mono)}

/* Access sits by the presence switcher, not on the presence's tab row: it is about the person.
   body.px because the shell's own body.px a{color} outranks a plain class. */
/* A second row under the tabs: Settings' pages, and what you're talking to Poindexter about.
   Quieter than the tab row above it; the current one is ink and underlined in cobalt. */
.subtabs{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 16px;padding:0 0 8px;border-bottom:1px solid var(--jp-line)}
.subtabs a{font:500 14px/1.6 var(--px-font-ui,system-ui);color:var(--jp-ink-2);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.subtabs a:hover{color:var(--jp-ink)}
.subtabs a[aria-current="page"]{color:var(--jp-ink);border-bottom-color:var(--px-accent)}
.acct-card .conn{margin-top:8px}
.acct-card details summary{cursor:pointer;color:var(--jp-ink-2)}
/* Today: the date presets and the sync strip. */
.presets{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.presets button{min-width:56px}
.sync-strip{padding:10px 14px}
.err-text{color:var(--red);margin-top:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Spotlight: the period's wins, one card each. A personal best carries a bar, not just a colour. */
.spots{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:12px}
.spot{background:var(--panel);border:1px solid var(--line);border-radius:var(--box);padding:10px 12px;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.spot.record{border-left:3px solid var(--amber)}
.spot-value{font-size:20px;line-height:1.2}
.spot-title{font-size:13.5px;overflow-wrap:anywhere}
/* ---- Poindexter's read of an account (#/read/<account>) ----
   Everything that moves here moves once, to show something arriving: posts,
   numbers, the report. Reduced motion shows the finished screen. */
.rd-kicker{display:flex;align-items:center;gap:6px;font:600 11.5px var(--jp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.rd-title{margin:4px 0 10px;overflow-wrap:anywhere} .rd-title .muted{font-size:15px;font-weight:500}
.rd-big{font-size:24px;line-height:1.3;font-weight:700;letter-spacing:-.01em;margin:6px 0 10px;max-width:40ch}
.rd-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px;counter-reset:rd}
.rd-steps li{counter-increment:rd;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2);border:1px solid var(--line);padding:5px 10px;background:var(--panel)}
.rd-steps li::before{content:counter(rd);font:600 11px var(--jp-mono);width:18px;height:18px;display:inline-grid;place-items:center;border:1px solid currentColor}
.rd-steps li.now{color:var(--slate);border-color:var(--slate)} .rd-steps li.now::before{animation:rd-pulse 1.1s ease-in-out infinite}
.rd-steps li.done{color:var(--green);border-color:var(--green)} .rd-steps li.done::before{content:"✓"}
.rd-steps li.fail{color:var(--red);border-color:var(--red)} .rd-steps li.fail::before{content:"!"}
@keyframes rd-pulse{50%{background:var(--slate);color:var(--px-accent-fg)}}
.rd-live{font-size:14.5px;margin:4px 0 8px} .rd-count{font-size:22px;font-variant-numeric:tabular-nums}
.rd-stream{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:236px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.rd-tile{background:var(--panel);border:1px solid var(--line);padding:8px 10px;font-size:12.5px;display:flex;flex-direction:column;gap:4px;min-width:0;
  opacity:0;transform:translateY(8px) scale(.98);transition:opacity .35s ease,transform .35s ease}
.rd-tile.in{opacity:1;transform:none}
.rd-tile-top{display:flex;justify-content:space-between;color:var(--ink2);font:11px var(--jp-mono)}
.rd-tile-cap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.rd-tile-num{color:var(--ink2)} .rd-tile-num b{color:var(--ink)}
.rd-timeline{margin:4px 0 0} .rd-timeline svg{width:100%;height:auto;display:block;background:var(--panel);border:1px solid var(--line)}
.rd-axis{stroke:var(--line)} .rd-med{stroke:var(--ink2);stroke-dasharray:3 4;opacity:.6}
.rd-medl,.rd-axl{font:10.5px var(--jp-mono);fill:var(--ink2)}
.rd-dot{opacity:0;animation:rd-in .45s ease forwards;cursor:pointer}
.rd-dot circle{fill:var(--slate);fill-opacity:.35;stroke:var(--slate);stroke-width:1}
.rd-dot.top circle{fill:var(--amber);fill-opacity:.55;stroke:var(--amber);stroke-width:2}
.rd-dot text{font:600 11px var(--jp-mono);fill:var(--ink)}
@keyframes rd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rd-dot{transform-box:fill-box;transform-origin:center}
.rd-thinking{border-color:var(--slate)}
.rd-line{font-size:18px;font-weight:600;margin:8px 0;min-height:2.6em;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.rd-line.in{opacity:1;transform:none}
.rd-lines{list-style:none;padding:0;margin:0;font-size:13px;color:var(--ink2)}
.rd-lines li::before{content:"✓ ";color:var(--green)}
.rd-error{border-color:var(--red)}
.rd-reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.rd-reveal.in{opacity:1;transform:none}
.rd-headline{border-left:4px solid var(--slate)}
.rd-align{display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:center}
.rd-align-g{display:flex;flex-direction:column;align-items:center;gap:6px}
.rd-gauge{width:180px;height:auto}
.rd-gauge path{fill:none;stroke-width:14}
.rd-gauge .bg{stroke:var(--line)}
.rd-gauge .fg{stroke:var(--slate);animation:rd-arc 1.2s .3s cubic-bezier(.2,.7,.2,1) forwards}
.rd-gauge.live .fg{stroke:var(--green)} .rd-gauge.suggested .fg{stroke:var(--amber)} .rd-gauge.danger .fg{stroke:var(--red)}
.rd-gauge .score{font:800 34px var(--jp-sans);fill:var(--ink)}
@keyframes rd-arc{to{stroke-dashoffset:var(--off)}}
.pill.danger{border-color:var(--red);color:var(--red)}
.rd-bar{display:flex;height:14px;gap:2px;margin:6px 0 12px}
.rd-bar span{display:block;min-width:4px}
.rd-themes{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rd-themes li{display:grid;grid-template-columns:12px 1fr;gap:10px}
.rd-themes i{width:12px;height:12px;margin-top:5px}
.rd-list{padding-left:18px;margin:0} .rd-list li{margin:0 0 10px}
.rd-chips{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.rd-chip{font:600 11.5px var(--jp-mono);padding:1px 6px;border:1px solid var(--slate);color:var(--slate);background:var(--slate-soft)}
.rd-chip:hover{background:var(--slate);color:var(--px-accent-fg)}
.rd-pop{position:absolute;z-index:45;background:var(--panel);border:1px solid var(--ink);padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:13.5px}
.rd-pop p{margin:6px 0;max-height:10em;overflow:auto;white-space:pre-wrap}
.rd-goal.change{border-left:4px solid var(--amber)} .rd-goal.sharpen{border-left:4px solid var(--slate)} .rd-goal.keep{border-left:4px solid var(--green)}
.rd-goalpair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 12px}
.rd-goalpair label{margin:0 0 4px} .rd-goalpair p{margin:0}
.rd-proposed{font-weight:600}
.rd-moves{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.rd-move{margin:0;display:flex;flex-direction:column;gap:4px;border-top:4px solid var(--line)}
.rd-move.more{border-top-color:var(--green)} .rd-move.rework{border-top-color:var(--amber)} .rd-move.stop{border-top-color:var(--red)} .rd-move.try{border-top-color:var(--slate)}
.rd-move h3{margin:2px 0} .rd-move p{margin:0 0 4px} .rd-move .row{margin-top:auto}
.rd-mtype{font:600 11px var(--jp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.rd-move blockquote{margin:4px 0 8px;padding:6px 10px;border-left:3px solid var(--slate);background:var(--slate-soft);font-style:italic}
.rd-next{border:2px solid var(--slate)}
/* The section Poindexter is saying right now. */
[data-say]{transition:box-shadow .3s ease}
[data-say].rd-speaking{box-shadow:0 0 0 3px var(--slate)}
.rd-last{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:8px 10px;border:1px solid var(--line);background:var(--slate-soft);color:var(--ink);text-decoration:none;font-size:13.5px}
.rd-last:hover{border-color:var(--slate)}
@media (max-width:820px){
  .rd-align{grid-template-columns:1fr;justify-items:center;text-align:left}
  .rd-goalpair{grid-template-columns:1fr}
  .rd-big{font-size:20px}
  .rd-stream{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .rd-tile,.rd-reveal,.rd-line{opacity:1;transform:none}
  .rd-dot{animation:none;opacity:1}
  .rd-gauge .fg{animation:none;stroke-dashoffset:var(--off)!important}
  .rd-steps li.now::before{animation:none}
}
@media (max-width:960px){.px-cols>.side-stats{order:-1}}
/* Cards that read as a set (ideas) share the wide column two abreast, one on a phone. */
.sp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:0 16px;align-items:start}
.sp-cards>*{min-width:0}
.px-panel .grid2>div>h3:first-child,.px-panel .grid3>div>h3:first-child{margin-top:0}
/* Camera presets share .presets with Today's date buttons, whose flex rule came later and stacked them. */
.presets:has(>.preset){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 0}
@media (max-width:820px){.presets:has(>.preset){grid-template-columns:1fr}}

/* The date range is one segmented control: joined buttons, only the outer corners round. */
.presets[role=group]{gap:0}
.presets[role=group] button{border:1px solid var(--px-rule);background:var(--px-card);color:var(--px-fg);border-radius:0;margin:0 0 0 -1px;padding:7px 9px;min-width:0;font-size:13px}
.presets[role=group] button:first-child{margin-left:0;border-radius:var(--px-radius) 0 0 var(--px-radius)}
.presets[role=group] button:last-child{border-radius:0 var(--px-radius) var(--px-radius) 0}
.presets[role=group] button.primary{background:var(--px-accent);border-color:var(--px-accent);color:var(--px-accent-fg);position:relative}
/* Presence: steps 2 and 3 are panels themselves, so the editors inside lose their own box. */
.sp-step>.card.acct-editor,.sp-step>.card.list-editor{border:0;padding:0;background:none;margin:12px 0 0}

/* ---- Visual pass (20 Oct 2026) ---- */
/* Settings' second row is a row of tabs too: muted until current, the current one underlined in
   the section's colour like the tab row above it. body.px, or the shell's link colour wins. */
body.px .subtabs a{color:var(--px-muted)}
body.px .subtabs a:hover{color:var(--px-fg)}
body.px .subtabs a[aria-current="page"]{color:var(--px-fg);border-bottom-color:var(--sx,var(--px-accent))}
/* Accounts: one even grid of cards. A row's cards are the same height, the gaps are the same
   both ways, and Edit sits on each card's bottom edge however long its description is. */
.sp-cards.acct-grid{gap:16px;align-items:stretch;margin:12px 0 16px}
.acct-grid>.acct-card{margin:0;display:flex;flex-direction:column}
.acct-grid>.acct-card>.acct-edit{margin-top:auto;padding-top:8px}
.acct-grid>.acct-card>.acct-edit[open]>summary{margin-bottom:4px}
/* Today: the two columns of a row end together. The left column's last block takes up the slack
   (the needs list above it, the sync strip below), and the right column keeps no stray margin. */
.px-cols.sp-even{align-items:stretch;margin:0 0 16px}
.sp-even>.px-panel,.sp-even>.stats{margin-bottom:0}
.sp-even>.sp-stack{display:flex;flex-direction:column;gap:16px}
.sp-even>.sp-stack>*,.sp-even>.sp-stack .px-needs{margin:0}
.sp-even>.sp-stack>#attention{flex:1 1 auto;display:flex;flex-direction:column}
.sp-even>.sp-stack>#attention>.px-needs{flex:1 1 auto}
.sp-even>.side-stats{align-content:start}
/* The chart beside the tiles fills its side of the row; with nothing to draw yet, so does its
   empty note, so the panel reads as one box rather than a short note and a blank. */
.sp-even>.chartwrap{display:flex;flex-direction:column}
.sp-even>.chartwrap>.empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center}
/* Presence step 2: the column heads only make sense while the fields sit in one row. Stacked (a
   phone), each field carries its own small label instead and each account is its own group. */
.acct-editor .stack-label{display:none}
@media (max-width:820px){
  .acct-editor .acct-head{display:none}
  .acct-editor .stack-label{display:block;font-size:12px;color:var(--px-muted);margin:4px 0 -4px}
  .acct-editor .item{gap:6px;padding:12px 0 4px;border-top:1px solid var(--px-rule);margin:0}
  .acct-editor form.item:first-of-type{border-top:0;padding-top:0}
}
/* A spotlight label that runs to two lines ("Most shared and saved") keeps its lines apart. */
.spot .px-label{line-height:1.35}
/* On a phone the tables scroll sideways inside their panel; a title still gets room to read
   rather than one word a line. */
@media (max-width:820px){td.wrap{min-width:11em}}
/* Its rule runs the width of the column, not of the paragraph's measure. */
p.done-next{max-width:none}

/* The Week (31 Oct 2026): seven days side by side where there is room, one under another on a
   phone. A draft is a row you can drag onto another day; the day under the pointer is marked. */
.wk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.wk-day{border:1px solid var(--line);border-radius:var(--box);padding:8px 10px;min-height:96px;background:var(--panel)}
.wk-day.is-today{border-color:var(--px-accent);box-shadow:inset 0 3px 0 var(--px-accent)}
.wk-day.is-past{opacity:.85}
.wk-day.is-drop,.wk-tray.is-drop{outline:2px dashed var(--px-accent);outline-offset:2px}
.wk-dayname{margin:0 0 6px}
.wk-free{margin:0}
.wk-list{list-style:none;margin:0;padding:0}
.wk-item{padding:6px 0;border-top:1px solid var(--line)}
.wk-list>.wk-item:first-child{border-top:0}
.wk-item[draggable=true]{cursor:grab}
.wk-item.is-dragging{opacity:.5}
.wk-item.is-late .wk-what>a{color:var(--red)}
.wk-what{overflow-wrap:anywhere}
.wk-do{margin-top:4px;gap:6px}
.wk-do button{padding:4px 10px}
.wk-move{width:auto;max-width:100%;padding:4px 6px;font-size:13px}
.wk-tick{display:flex;gap:10px;align-items:flex-start;margin:0;color:var(--ink);font-size:16px}
.wk-tick input{width:auto;margin-top:4px}
.wk-tick input:checked+span{text-decoration:line-through;color:var(--ink2)}
.wk-why{display:flex;gap:6px;align-items:flex-start}
#wkNumbers .wk-item{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:1100px){.wk-days{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){.wk-days{grid-template-columns:1fr}.wk-day{min-height:0}}

/* Tracker: ticking rows to file them under a pillar (31 Oct 2026). */
.t-pick{width:28px;padding-right:0}
.t-pick input{width:auto;margin:2px 0 0}
.t-bulk{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 12px;margin:0 0 12px;border:1px solid var(--px-accent);border-radius:var(--box);background:var(--px-tint)}
#tpCard table{font-size:13px}
.tp-list{list-style:none;margin:0;padding:0}
.tp-list>li{padding:10px 0;border-top:1px solid var(--line)}
.tp-pick{margin-top:6px;gap:6px 12px}
.tp-why{margin:4px 0 0}

/* Rules before posting (31 Oct 2026): the list on Settings → Rules, and a check's result. */
.rule-list{list-style:none;margin:0 0 4px;padding:0}
.rule-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.rule-list>.rule-row:first-child{border-top:0}
.rule-text{min-width:0;flex:1 1 260px;overflow-wrap:anywhere}
.pi-rules{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.rules-result ul{margin:6px 0 0;padding-left:18px}
.rules-result li{margin:0 0 6px;overflow-wrap:anywhere}
.rules-result q{font-weight:600}
.rules-pass{margin:0;color:var(--green)}
.rules-flag{margin:0;color:var(--amber)}
.rules-result.is-stale{opacity:.75}

/* Ideas land on the Week (31 Oct 2026, wave 2): one item, one day, in three views. The pickers
   are the Week's own (.wk-move): an idea card's "Lands on the Week", a queue card's Move to (on
   the card, never opening it), and the worksheet's line saying where its drafts are. On an idea
   card the day and account sit on their own line under Build it out, Park it and Not for me:
   wedged between the buttons they wrapped into them on a phone, three lines of mixed controls. */
.land{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%;margin:0;color:var(--ink2);font-size:13px}
.idea-do{gap:8px}
.idea-land{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.idea-land select{min-width:0}
.q-day{margin-top:6px;gap:6px 10px}
.q-late{color:var(--red)}
.ws-week{padding-top:10px;padding-bottom:10px}
.ws-days{margin:0;min-width:0;flex:1 1 240px;overflow-wrap:anywhere}
.ws-do{gap:8px 12px}
/* Today's lanes, over time (31 Oct 2026, wave 2): the one problem line above the table, each lane's
   line in its own column, and the table scrolling inside its panel rather than widening the page. */
.pl-needs{list-style:none;margin:0 0 10px;padding:0}
.pl-needs>.px-need{margin:0;overflow-wrap:anywhere}
.pl-needs .px-need-title{font-weight:600}
.pl-scroll{overflow-x:auto;max-width:100%}
td.pl-trend{width:128px;padding-top:4px;padding-bottom:4px}
.ln-spark{display:block}
/* One line, always: the panel may grow by one line, and that is the problem line. The caption is
   written to fit a phone; should a long span not, it ends in an ellipsis and its title has it all. */
p.pl-caption{margin:8px 0 0;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}