/* The app's own pieces, on top of dense.css (the approved Dense look). Phase A task 7. */
.muted { color: var(--ink-3); font: 500 13px/1.4 var(--cond); }
.card { max-width: 420px; margin: 48px auto; background: var(--strip); border: 1px solid var(--ink-3); }
.card > h1 { margin: 0; padding: 10px 14px; font: 700 18px/1.2 var(--cond); background: var(--bar); color: var(--bar-ink); display: flex; align-items: center; gap: 10px; }
.card > h1 .brand__tag { width: 8px; height: 18px; background: var(--today); }
.card__body { padding: 14px; display: grid; gap: 12px; }
.card__body p { margin: 0; }
.field { display: grid; gap: 4px; }
.field > span { font: 600 13px/1.2 var(--cond); color: var(--ink-2); }
.field input, .field select, select.inline { font: 500 14px var(--sans); padding: 7px 9px; border: 1px solid var(--ink-3); background: #fff; color: var(--ink); width: 100%; }
select.inline { width: auto; padding: 4px 6px; font-size: 13px; }
.field input:focus, .field select:focus { outline: 2px solid var(--focus); outline-offset: 0; }
.field .hint { font: 500 12px/1.3 var(--cond); color: var(--ink-3); }
.error { padding: 8px 10px; background: #fbe9e7; border: 1px solid var(--now); color: #7a1d15; font: 500 13px/1.35 var(--sans); }
.note { padding: 8px 10px; background: var(--strip-alt); border: 1px solid var(--box); font: 500 13px/1.35 var(--sans); }
.qr { display: flex; gap: 14px; align-items: center; }
.qr img { width: 150px; height: 150px; background: #fff; border: 1px solid var(--box); }
.secret { font: 600 12.5px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 4px 0; padding: 2px 4px 2px 7px; background: var(--strip-alt); border: 1px solid var(--box); font: 600 12.5px/1.3 var(--cond); }
.chip button { border: 0; background: none; cursor: pointer; color: var(--ink-3); font: 700 13px/1 var(--sans); padding: 0 3px; }
.chip button:hover { color: var(--now); }
.role { display: inline-block; padding: 1px 6px; font: 700 11.5px/1.4 var(--cond); color: #fff; background: var(--ink-2); margin-right: 4px; }
.role--admin { background: var(--now); }
.role--operator { background: var(--week); }
.bar__meta button { font: 600 13px/1 var(--cond); background: none; border: 1px solid var(--bar-dim); color: var(--bar-ink); padding: 5px 8px; cursor: pointer; }
.bar__meta button:hover { border-color: var(--bar-ink); }
main:focus { outline: none; }

/* ---- 7b: the queue and the client page (the Dense mockup's page styles, mockups/dashboard-v2/b-clients.html) ---- */
.grid.queue tbody tr { cursor: pointer; }
.grid.queue tbody tr:hover td { background: #fff; }
.grid td.name { min-width: 190px; }
.grid td.name a { font: 700 14.5px/1.2 var(--cond); color: var(--ink); text-decoration: none; }
.grid td.name a:hover { text-decoration: underline; }
.hold { margin-left: 0; }
.blockers { margin: 0; padding: 0; list-style: none; font: 500 13px/1.35 var(--sans); }
.owner { font: 700 10.5px/1 var(--cond); text-transform: uppercase; letter-spacing: .03em; padding: 1px 4px; margin-left: 4px; color: #fff; vertical-align: 1px; }
.owner--client { background: var(--ok); }
.owner--operator { background: var(--week); }
.pagehead .actions { gap: 10px; }
.crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 13px/1 var(--cond); }
.crumbs a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.dhead { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; padding: 12px 14px; background: var(--strip); border: 1px solid var(--ink-3); margin-bottom: 8px; }
.dhead h1 { font: 700 24px/1.1 var(--cond); margin: 0 0 6px; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font: 500 13px/1.3 var(--cond); color: var(--ink-3); }
.facts dt { display: inline; }
.facts dd { display: inline; margin: 0 0 0 4px; color: var(--ink); font-weight: 600; }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.mod { background: var(--strip); border: 1px solid var(--ink-3); min-width: 0; }
.mod > h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; padding: 6px 10px; font: 700 14px/1.2 var(--cond); background: var(--strip-alt); border-bottom: 1px solid var(--ink-3); }
.mod > h2 small { font: 500 12px/1.2 var(--cond); color: var(--ink-3); }
.mod .grid { border: 0; }
.mod .grid th:first-child, .mod .grid td:first-child { border-left: 0; }
.mod .grid th:last-child, .mod .grid td:last-child { border-right: 0; }
.mod .grid tr:last-child td, .mod .grid tr:last-child th { border-bottom: 0; }
.mod .grid th[scope=row] { width: 38%; background: var(--strip-alt); font-weight: 600; vertical-align: top; }
.m-12 { grid-column: span 12; } .m-7 { grid-column: span 7; } .m-5 { grid-column: span 5; }
@media (max-width: 900px) { .m-7, .m-5 { grid-column: span 12; } }
.pad { padding: 10px; margin: 0; }
.missing { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 8px 10px; }
.missing h3, .plist h3 { font: 700 13px/1.2 var(--cond); margin: 4px 0; }
.missing h3 small { color: var(--ink-3); font-weight: 500; }
.missing ul, .plist ul { margin: 0 0 8px; padding-left: 18px; font: 500 13px/1.45 var(--sans); }
.okline { margin: 0; font: 600 14px/1.3 var(--cond); color: var(--ok); }
.hist { font: 500 12px/1.4 var(--cond); color: var(--ink-3); }
.hist summary { cursor: pointer; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 10px; }
.thumbs figure { margin: 0; }
.thumb { height: 110px; background: var(--rack); border: 1px solid var(--box); display: flex; align-items: center; justify-content: center; overflow: hidden; font: 500 12px var(--cond); color: var(--ink-3); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumbs .sub { display: block; color: var(--ink-3); }
.thumbs figcaption { font: 500 12.5px/1.3 var(--cond); margin-top: 3px; }
.filelist { display: grid; gap: 4px; padding: 0 10px 10px; }
.filelist > div { display: flex; align-items: center; gap: 8px; }
.filelist .iconbtn { width: auto; justify-content: flex-start; }
.kind { font: 700 11px/1 var(--cond); text-transform: uppercase; color: var(--ink-3); min-width: 3.5em; }
.timeline { list-style: none; margin: 0; padding: 6px 10px 10px; max-height: 420px; overflow-y: auto; font: 500 13px/1.5 var(--sans); }
.timeline time { display: inline-block; min-width: 11.5em; color: var(--ink-3); font: 500 12.5px var(--cond); }

/* ---- 7c: editing ---- */
.mod > h2 small { display: inline-flex; align-items: center; gap: 8px; }
.mod > h2 .btn { padding: 4px 8px; font-size: 12.5px; }
/* A Record box's title folds it (Matt, 2026-10-04); a folded box is its title bar alone. */
.foldbtn { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 -6px -10px; padding: 6px 10px; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
.foldbtn .i { width: 14px; height: 14px; flex: none; color: var(--ink-2); transition: transform .16s cubic-bezier(.2, .7, .3, 1); }
.foldbtn[aria-expanded='false'] .i { transform: rotate(-90deg); }
.foldbtn:hover span { text-decoration: underline; text-underline-offset: 2px; }
.mod--fold:has(> .mod__body[hidden]) > h2 { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .foldbtn .i { transition: none; } }
.mod .field input, .mod .field select { padding: 5px 7px; font-size: 13.5px; }
.hint.err { color: var(--now); font-weight: 600; }
.hint.err:empty { display: none; }

/* ---- 7d: new client and invites ---- */
.newclient { max-width: 880px; }
.tickrow { display: flex; gap: 8px; align-items: center; padding: 0 10px; font: 600 13.5px/1.3 var(--cond); }
.dhead__side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; }
.invite { position: relative; }
.invite > summary { list-style: none; }
.invite > summary::-webkit-details-marker { display: none; }
.invite[open] form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px; display: grid; gap: 8px; padding: 12px; background: var(--strip); border: 1px solid var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.invite .hint { margin: 0; font: 500 12px/1.35 var(--cond); color: var(--ink-3); }
.okline-note { margin-bottom: 8px; border-color: var(--ok); }

/* ---- 7e: the interview ---- */
.interview { display: grid; gap: 8px; max-width: 1040px; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 6px; padding: 10px; }
.choice { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--box); background: #fff; cursor: pointer; font: 500 13px/1.35 var(--sans); }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--today); }
.choice strong { font: 700 14px/1.2 var(--cond); }
.choice .sub { display: block; color: var(--ink-3); margin-top: 2px; }
.choice input { margin-top: 3px; }
.pages-edit input, .pages-edit select { width: 100%; font: 500 13.5px var(--sans); padding: 5px 7px; border: 1px solid var(--ink-3); background: #fff; }
.pages-edit input[readonly] { background: var(--strip-alt); color: var(--ink-2); }
.pages-edit .err { display: block; }
.btn--warn { background: var(--now); border-color: var(--now); color: #fff; }

/* ---- 7f: the Client Profile ---- */
.m-8 { grid-column: span 8; } .m-4 { grid-column: span 4; }
@media (max-width: 1000px) { .m-8, .m-4 { grid-column: span 12; } }
.secs { display: grid; }
.sec { padding: 10px; border-bottom: 1px solid var(--box); }
.sec:last-child { border-bottom: 0; }
.sec header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 6px; }
.sec h3 { margin: 0; font: 700 15px/1.2 var(--cond); }
.sec header .sub { font: 500 12px/1.2 var(--cond); color: var(--ink-3); }
.flags { display: inline-flex; gap: 4px; }
.tag { font: 700 10.5px/1 var(--cond); text-transform: uppercase; letter-spacing: .03em; padding: 3px 5px; color: #fff; background: var(--ink-3); }
.tag--assembled { background: var(--ink-3); } .tag--claude { background: var(--coming); } .tag--operator { background: var(--week); } .tag--vault { background: var(--ok); }
.tag--pin { background: var(--ink); } .tag--flag { background: var(--today); color: var(--ink); }
.mdtext { white-space: pre-wrap; font: 400 13.5px/1.5 var(--sans); }
.mdtext .src { display: inline-block; font: 500 11.5px/1.3 var(--cond); color: var(--ink-3); margin-left: 4px; }
.secact, .sec .actions { margin-top: 8px; gap: 6px; }
.secact .btn, .sec .actions .btn { padding: 4px 8px; font-size: 12.5px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compare > div { padding: 8px; background: #fff; border: 1px solid var(--box); }
.compare h4 { margin: 0 0 4px; font: 700 12px/1.2 var(--cond); color: var(--ink-3); text-transform: uppercase; }
.editbox textarea { width: 100%; font: 400 13.5px/1.5 ui-monospace, Menlo, monospace; padding: 8px; border: 1px solid var(--ink-3); }
.claude { position: sticky; top: 8px; border-color: var(--coming); }
.claude > h2 { background: #e9e9f3; }
.steps { margin: 0; padding-left: 28px; display: grid; gap: 8px; font: 400 13px/1.45 var(--sans); }
.cmd { display: inline-flex; align-items: center; gap: 6px; padding: 3px 3px 3px 8px; background: var(--bar); color: var(--bar-ink); }
.cmd code { color: #fff; }
.cmd .btn { padding: 3px 7px; font-size: 12px; }
.group { border-top: 1px solid var(--box); }
.grouphead { margin: 0; padding: 8px 10px 0; font: 700 13px/1.2 var(--cond); }
.grouphead .sub { font: 500 12px var(--cond); color: var(--ink-3); margin-left: 6px; }
.linkish { background: none; border: 0; padding: 0; color: var(--focus); font: 600 13.5px/1.3 var(--sans); cursor: pointer; text-align: left; }
.linkish:hover { text-decoration: underline; }
.hits { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; gap: 8px; font: 400 13px/1.45 var(--sans); }
.hits mark, .reader mark { background: #f4d98a; }
.reader { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--ink); background: var(--strip); }
.reader::backdrop { background: rgba(20, 26, 28, .45); }
.reader__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bar); color: var(--bar-ink); position: sticky; top: 0; }
.reader__bar h2 { margin: 0; font: 700 16px/1.2 var(--cond); }
.reader__body pre { margin: 0; padding: 12px; white-space: pre-wrap; font: 400 13px/1.5 var(--sans); }

/* ---- 8a: the client portal ---- */
.todo { margin: 0; padding: 10px 10px 10px 28px; display: grid; gap: 6px; font: 500 14px/1.4 var(--sans); }
.todo .sub { font: 500 12px var(--cond); color: var(--ink-3); margin-left: 6px; }
.portalform { max-width: 760px; }
.portalform .fields { display: grid; gap: 14px; }
.portalform textarea { width: 100%; font: 400 14px/1.45 var(--sans); padding: 7px 9px; border: 1px solid var(--ink-3); }
.picker { list-style: none; padding: 0; display: grid; gap: 8px; max-width: 420px; }

/* ---- 8b: uploads ---- */
.slots { list-style: none; margin: 0; padding: 0; }
.slot { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-bottom: 1px solid var(--box); }
.slot:last-child { border-bottom: 0; }
.slot__thumb { width: 96px; height: 72px; background: var(--rack); border: 1px solid var(--box); display: flex; align-items: center; justify-content: center; overflow: hidden; font: 500 11.5px/1.2 var(--cond); color: var(--ink-3); text-align: center; padding: 2px; }
.slot__thumb img { width: 100%; height: 100%; object-fit: contain; }
.slot__text { display: grid; gap: 2px; font: 400 13px/1.4 var(--sans); }
.slot__text strong { font: 700 14px/1.2 var(--cond); }
.slot__text .sub { color: var(--ink-3); }
.slot .state { font: 600 12.5px/1.2 var(--cond); color: var(--ink-2); }
.slot--has .state { color: var(--ok); }
.slot__pick { cursor: pointer; }
.slot__pick.is-busy { opacity: .5; pointer-events: none; }
.uploader > summary { list-style: none; display: inline-flex; }
.uploader > summary::-webkit-details-marker { display: none; }
.uploader[open] > summary { margin-bottom: 8px; }

/* ---- 8c: page content ---- */
.stack { display: grid; gap: 10px; }
.portalform .field > span em { font-style: normal; }

/* ---- 9: approvals and going live ---- */
.live { border-color: var(--ok); margin-bottom: 8px; }
.live > h2 { background: #e3f1e8; }
.ask { margin-bottom: 8px; border-color: var(--today); }
.ask > h2 { background: #fbf0d6; }
.ask p { margin: 0 0 8px; font: 400 14px/1.45 var(--sans); }
.ask [data-note] { margin-top: 10px; }
.ask textarea, .approvals textarea { width: 100%; font: 400 14px/1.45 var(--sans); padding: 7px 9px; border: 1px solid var(--ink-3); }
.facts.budget { margin-bottom: 6px; font-size: 14px; }
.req { padding: 8px 10px; border-bottom: 1px solid var(--box); font: 400 13px/1.4 var(--sans); }
.req:last-child { border-bottom: 0; }
.tag--pending { background: var(--today); color: var(--ink); } .tag--approved { background: var(--ok); } .tag--changes_requested { background: var(--now); } .tag--withdrawn { background: var(--ink-3); }
.askform { display: grid; gap: 10px; padding: 10px; border-top: 1px solid var(--box); }
.askform .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }

/* Queue wording (Matt, 2026-10-01): each side's items named in plain words. */
.grid.queue td ul.blockers li + li { margin-top: 2px; }
.grid.queue td ul.blockers li::before { content: '· '; color: var(--ink-3); }

.grid.queue td ul.blockers a { color: var(--ink); text-decoration-color: var(--box); }
.grid.queue td ul.blockers a:hover { color: var(--focus); text-decoration-color: currentColor; }
.morebtn { font: 600 12.5px/1.3 var(--cond); margin-top: 2px; }

/* ---- Walkthrough polish (Matt, 2026-10-01): faces, client type chips, steady queue columns ---- */
.face { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--strip-alt); border: 1px solid var(--box); color: var(--ink-3); font: 700 12.5px/1 var(--cond); letter-spacing: .03em; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.face--logo { border-radius: 4px; background: #fff; }
.face--logo img { object-fit: contain; padding: 2px; }
.face--lg { width: 64px; height: 64px; font-size: 20px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who > div { min-width: 0; }
.dhead__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ctype { display: inline-block; padding: 2px 7px; font: 700 11.5px/1.3 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: #fff; vertical-align: 2px; }
.ctype--tpa { background: #1f6f78; }
.ctype--tpa_alum { background: #2f5d63; }
.ctype--gpa { background: #6b5b2e; }
.ctype--agency { background: #4b4fa6; }
.ctype--momentum_lab { background: #8a3f7a; }
.ctype--app_only { background: #2d3437; }
.ctype--none { background: none; color: var(--ink-3); border: 1px dashed var(--ink-3); }
.dhead h1 .ctype { font-size: 13px; vertical-align: 4px; margin-left: 4px; }
.grid.queue { table-layout: fixed; min-width: 980px; }
.grid.queue col.c-client { width: 25%; } .grid.queue col.c-stage { width: 13%; } .grid.queue col.c-need { width: 27%; } .grid.queue col.c-ght { width: 25%; } .grid.queue col.c-added { width: 10%; }
.grid.queue td { overflow-wrap: anywhere; vertical-align: top; }
.tablewrap { overflow-x: auto; }

/* Queue proportions (Matt, 2026-10-01): a narrower Stage, a wider Client column, larger faces. */
.grid.queue col.c-client { width: 31%; } .grid.queue col.c-stage { width: 8%; } .grid.queue col.c-need { width: 26%; } .grid.queue col.c-ght { width: 26%; } .grid.queue col.c-added { width: 9%; }
.grid.queue .face { width: 52px; height: 52px; font-size: 16px; }
.grid.queue .who { gap: 12px; }
/* Added: as wide as the widest short date (12/31/26) and no wider; the rest goes to the text columns. */
.grid.queue col.c-added { width: 84px; }
.grid.queue col.c-client { width: 33%; } .grid.queue col.c-need { width: 28%; } .grid.queue col.c-ght { width: 28%; }
.grid.queue td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The queue's client cell (Matt, 2026-10-01): name left and slug right on one baseline; the type chip leads the second
   line so chips align down the column; the face centred on the pair. */
.grid.queue .who { align-items: center; gap: 12px; }
.who__text { flex: 1; min-width: 0; display: grid; gap: 5px; }
.who__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.grid td.name a.who__name { font: 700 15px/1.25 var(--cond); color: var(--ink); text-decoration: none; min-width: 0; overflow-wrap: break-word; }
.grid td.name a.who__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.grid td.name a.who__name:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.who__meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.who__meta .ctype { flex: none; font-size: 10.5px; padding: 2px 6px; vertical-align: 0; }
.who__person { font: 500 13px/1.2 var(--cond); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- The MOC (Matt, 2026-10-01): a call sheet on top, the full record folded below. Direction contract:
   .impeccable/surfaces/public-js-moc-js.md. One strip of paper, ruled into cells, in the Dense world. ---- */
.dash { color: var(--ink-3); }
.dhead__side .actions { justify-content: flex-end; }
/* The stage sits with the header's buttons at their size (Matt, 2026-10-04), keeping its colour; the queue's tag stays small. */
.dhead__side .hold { display: inline-flex; align-items: center; padding: 7px 10px; border: 1px solid transparent; font: 600 13px/1 var(--cond); vertical-align: baseline; white-space: nowrap; }
.dhead__side .hold--link:hover { text-decoration: none; filter: brightness(1.1); }
/* The client page's section nav (Matt, 2026-10-04): sticks under the top of the window while the page scrolls. */
.cnav { position: sticky; top: 0; z-index: 15; display: flex; flex-wrap: wrap; gap: 2px 4px; margin: -2px 0 8px; padding: 6px 8px; background: var(--strip-alt); border: 1px solid var(--ink-3); box-shadow: 0 4px 10px rgba(20, 26, 28, .06); }
.cnav__item { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; font: 600 13px/1 var(--cond); color: var(--ink-2); background: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.cnav__item:hover { color: var(--ink); background: #fff; border-color: var(--ink-3); }
.cnav__item[hidden] { display: none; }
.cnav__item[data-jump="record"] { margin-left: 8px; padding-left: 14px; border-left-color: var(--box); }
.cnav__n { min-width: 18px; padding: 2px 5px; font: 700 11px/1 var(--cond); color: #fff; background: var(--ink-2); text-align: center; }
@media (max-width: 760px) { .cnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .cnav::-webkit-scrollbar { display: none; } }
/* More (Matt, 2026-10-04): the rare and admin-only header actions, in a panel shaped like the invite's. */
.more { position: relative; }
.more > summary { list-style: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .i { width: 14px; height: 14px; margin-right: -2px; transition: transform .16s cubic-bezier(.2, .7, .3, 1); }
.more[open] > summary { background: #fff; border-color: var(--ink); }
.more[open] > summary .i { transform: rotate(180deg); }
.more__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px; max-width: calc(100vw - 32px); display: grid; gap: 4px; padding: 6px; background: var(--strip); border: 1px solid var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.18); text-align: left; white-space: normal; }
.more__menu > * + * { border-top: 1px solid var(--box); padding-top: 4px; }
.more__menu .btn:not(.btn--solid) { width: 100%; justify-content: flex-start; border-color: transparent; background: transparent; padding: 8px; }
.more__menu .btn:not(.btn--solid):hover { background: #fff; border-color: var(--ink-3); }
.more__menu .move__ask { position: static; width: auto; max-width: none; padding: 6px 8px 8px; border: 0; box-shadow: none; }
.more__menu .move__ask .actions .btn { width: auto; }
.more__menu .move__ask .actions .btn:not(.btn--solid) { background: var(--strip); border-color: var(--ink-3); padding: 7px 10px; }
.more__menu .archive > summary { list-style: none; }
.more__menu .archive > summary::-webkit-details-marker { display: none; }
.more__menu .archive form { display: grid; gap: 8px; padding: 4px 8px 8px; }
.more__menu .archive .hint { margin: 0; font: 500 12px/1.35 var(--cond); color: var(--ink-3); }
.more__menu .archive form .btn--solid { justify-self: start; }
.more__note { padding: 8px; font: 500 12.5px/1.4 var(--cond); }
@media (prefers-reduced-motion: reduce) { .more > summary .i { transition: none; } }

.mochead { align-items: center; }
.mochead h1 { margin-bottom: 2px; }
.mochead__person { margin: 0 0 6px; font: 600 14px/1.2 var(--cond); color: var(--ink-2); }
.mochead .facts a { color: var(--ink); text-decoration-color: var(--ink-3); }
.mochead .facts a:hover { color: var(--focus); }
.mochead__live { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; font: 600 13px/1.3 var(--cond); color: var(--ok); }
.mochead__live a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.mochead__live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px #d5e8dc; }
.mochead__live--none { color: var(--ink-3); font-weight: 500; }

.sheet { margin-bottom: 14px; }
.sheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet__cell { padding: 12px 16px 14px; border-top: 1px solid var(--box); min-width: 0; }
.sheet__cell:nth-child(-n+2) { border-top: 0; }
.sheet__cell:nth-child(odd) { border-right: 1px solid var(--box); }
.sheet__cell h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font: 700 17px/1.15 var(--cond); }
.sheet__cell h3 small { font: 500 12.5px/1 var(--cond); color: var(--ink-3); }
.sheet__cell h3.sheet__sub { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.sheet__serve, .sheet__talk { background: #fff; }
.sheet__never > h3:first-child { color: var(--now); }
.sheet__stuck .okline { font-size: 15px; }
.stuck + .stuck { margin-top: 10px; }
.stuck h4 { margin: 0 0 4px; font: 600 13.5px/1.2 var(--cond); color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.stuck h4 .owner { margin-left: 0; }
.stuck h4 small { color: var(--ink-3); font-weight: 500; }
.stuck ul { margin: 0; padding-left: 18px; font: 500 14px/1.5 var(--sans); }
.stuck a { color: var(--ink); text-decoration-color: var(--ink-3); }
.stuck a:hover { color: var(--focus); }
.timeline--short { max-height: none; padding: 0; overflow: visible; }
.timeline--short li + li { margin-top: 3px; }
.timeline--short time { min-width: 0; display: block; font-size: 12px; }

.mocText { font: 400 14.5px/1.55 var(--sans); max-width: 72ch; }
.mocText p { margin: 0 0 8px; }
.mocText ul { margin: 0 0 8px; padding-left: 18px; }
.mocText li { margin: 0 0 4px; }
.mocText ul ul { margin: 4px 0 0; }
.mocText strong { font-weight: 600; }
.mocText h4 { margin: 12px 0 4px; font: 700 14px/1.2 var(--cond); }
.mocText > :last-child { margin-bottom: 0; }
.mocText .grid { margin: 4px 0 10px; font-size: 13px; }

.folds { display: grid; gap: 6px; }
.folds__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 0 2px; }
.folds__bar h2 { margin: 0; font: 700 18px/1.2 var(--cond); }
.fold { background: var(--strip); border: 1px solid var(--ink-3); }
.fold > summary { list-style: none; display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-2px) rotate(-45deg); transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.fold[open] > summary::before { transform: translateY(-4px) rotate(45deg); }
.fold > summary:hover { background: #fff; }
.fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fold[open] > summary { border-bottom: 1px solid var(--box); background: var(--strip-alt); }
.fold__title { font: 700 16px/1.2 var(--cond); }
.fold__meta { font: 500 13px/1.2 var(--cond); color: var(--ink-3); }
.fold__body { padding: 12px 14px 14px; }
.fold__body > h3, .fold__body .twocol h3 { margin: 12px 0 6px; font: 700 14px/1.2 var(--cond); }
.fold__body > h3:first-child { margin-top: 0; }
.fold__body .grid { border: 1px solid var(--box); }
/* On a phone a Record table keeps within the width and its long words (page ids, keywords) wrap (Matt, 2026-10-05). */
@media (max-width: 600px) { .mod--fold .grid { width: 100%; table-layout: fixed; } .mod--fold .grid th, .mod--fold .grid td { overflow-wrap: anywhere; } }
.fold__body .grid th[scope=row] { width: 42%; background: var(--strip-alt); font-weight: 600; }
.fold__body .thumbs { padding: 0 0 8px; }
.fold__body .timeline { padding: 0; max-height: 480px; }
.fold__body .plist { break-inside: avoid; }
.fold__body .plist + .plist { margin-top: 6px; }
.plists { columns: 2 320px; column-gap: 28px; }
.editing .plists { columns: 1; }
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 20px; }
.twocol h3 { margin-top: 0 !important; }
.flat { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; font: 500 13.5px/1.4 var(--sans); }
.orig { display: grid; gap: 4px; }
.orig__sec { padding: 8px 0; border-top: 1px solid var(--box); }
.orig__sec:first-child { border-top: 0; }
.orig__sec h3 { margin: 0 0 6px; font: 700 15px/1.2 var(--cond); }
.orig__sec--3 { padding-left: 14px; }
.orig__sec--3 h3 { font-size: 14px; color: var(--ink-2); }

@media (max-width: 760px) {
  .sheet__grid { grid-template-columns: minmax(0, 1fr); }
  .sheet__cell:nth-child(odd) { border-right: 0; }
  .sheet__cell:nth-child(2) { border-top: 1px solid var(--box); }
  /* Every page header stacks on a phone: the side (stage, actions, invite, move) goes under the name, never over it. */
  .dhead { grid-template-columns: minmax(0, 1fr); }
  .dhead__side { justify-content: flex-start; }
  .dhead__side .actions { justify-content: flex-start; flex-wrap: wrap; }
  .dhead__who { align-items: flex-start; }
  /* On a phone the panels span the header rather than hanging off a button mid-row, which ran past the screen's edge. */
  .dhead { position: relative; }
  .dhead .invite, .dhead .more { position: static; }
  .dhead .invite[open] form, .dhead .more__menu { left: 12px; right: 12px; top: auto; width: auto; max-width: none; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .fold > summary::before { transition: none; } }
@media (max-width: 760px) {
  .dhead .facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; }
  .dhead .facts dd { margin: 0; overflow-wrap: anywhere; }
}

/* The MOC, editable (Matt, 2026-10-01) and the finish review's fixes. */
.sheet__next { margin: 0 0 10px; padding: 7px 10px; background: #fff; border: 1px solid var(--box); font: 600 14.5px/1.35 var(--cond); }
.sheet__next a { color: var(--ink); text-decoration-color: var(--ink-3); }
.sheet__next a:hover { color: var(--focus); }
.plist .sub { display: block; font: 500 13px/1.3 var(--cond); color: var(--ink-3); }
.fold__body .grid th, .fold__body .grid td { vertical-align: top; }
.fold__body a:not(.btn) { color: var(--ink); text-decoration-color: var(--ink-3); }
.fold__body a:not(.btn):hover { color: var(--focus); }
.fold__body > .actions, .fold__body p.actions { margin: 10px 0 0; }
.bb + .bb { margin-top: 14px; }
.bb__edit { flex: none; padding: 4px 9px 4px 7px; font-size: 12.5px; gap: 4px; }
.bb__edit .i { width: 14px; height: 14px; }
.bb__origin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; font: 500 12px/1.3 var(--cond); color: var(--ink-3); }
.bb__origin .tag { text-decoration: none; }
.bb__more { margin-top: 6px; }
.bb__more > summary, .bb__versions > summary { cursor: pointer; font: 600 13px/1.3 var(--cond); color: var(--ink-2); }
.bb__more > summary:hover, .bb__versions > summary:hover { color: var(--ink); }
.bb__more[open] > summary { margin-bottom: 6px; }
.bb__form { display: grid; gap: 8px; }
.bb__form textarea { width: 100%; font: 400 13.5px/1.5 var(--sans); padding: 8px 10px; border: 1px solid var(--ink-3); background: #fff; color: var(--ink); resize: vertical; }
.bb__form textarea:focus, .listform input:focus { outline: 2px solid var(--focus); outline-offset: 0; }
.bb__form .hint { margin: 0; font: 500 12px/1.35 var(--cond); color: var(--ink-3); }
.bb__form .tickrow { padding: 0; }
.bb__versions .ver { padding: 8px 0; border-top: 1px solid var(--box); display: grid; gap: 6px; justify-items: start; }
.bb__versions .ver .muted { margin: 0; }
.listform { display: grid; gap: 8px; }
.listform .grid { border: 1px solid var(--box); }
.listform input { width: 100%; font: 500 13.5px var(--sans); padding: 5px 7px; border: 1px solid var(--ink-3); background: #fff; color: var(--ink); }
.listform input.bad { border-color: var(--now); box-shadow: inset 0 0 0 1px var(--now); }
.listform td:last-child { width: 1%; }
@media (max-width: 760px) {
  .sheet__stuck { order: -1; }
  .listform .grid, .listform tbody, .listform tr, .listform td { display: block; }
  .listform thead { display: none; }
  .listform tr { padding: 8px; border-bottom: 1px solid var(--box); }
  .listform td { border: 0; padding: 3px 0; }
  .listform td:last-child { width: auto; }
}
.bb__origin[hidden], .bb__view[hidden] { display: none; }

/* One Edit per major section (Matt, 2026-10-01). */
.fold__tools { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.editing .fold__tools { display: none; }
.editbar { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 8px; padding: 10px 16px; background: var(--strip-alt); border-top: 1px solid var(--ink-3); box-shadow: 0 -6px 14px rgba(20, 26, 28, .08); }
.fold__body .editbar { margin: 12px -14px -14px; }
.editbar[hidden] { display: none; }
.editbar .muted { margin-left: 4px; }
.bb__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.bb__form textarea.bad { border-color: var(--now); box-shadow: inset 0 0 0 1px var(--now); }
.editing .plist + .plist { margin-top: 14px; }
.bb__edit[hidden] { display: none; }
/* Thumbnails open full size in a new tab (Matt, 2026-10-01). */
.thumb__open { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.thumb__open:hover img { opacity: .88; }
.thumb__open:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---- The client home (Matt, 2026-10-01): to-dos first and done in place, then results, then landing pages ---- */
.home { display: grid; gap: 18px; }
.home__head h1 { margin: 0; font: 700 28px/1.1 var(--cond); }
.home__head p { margin: 4px 0 0; font: 500 15px/1.3 var(--cond); color: var(--ink-2); }

/* The one loud thing: amber, framed, revealed once. */
.todobox { background: var(--strip); border: 2px solid var(--today); box-shadow: 0 10px 26px -14px rgba(109, 71, 0, .45); animation: todo-in .7s cubic-bezier(.16, 1, .3, 1) both; }
.todobox__band { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 12px; padding: 14px 18px; background: #fbefd2; border-bottom: 1px solid #ecd39a; }
.todobox__band h2 { margin: 0; font: 700 24px/1 var(--cond); color: var(--today-ink); }
.todobox__band p { grid-column: 1 / -1; margin: 0; font: 500 14.5px/1.35 var(--sans); color: #4f3a10; }
.todobox__count { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 15px; background: var(--today); color: var(--ink); font: 700 16px/1 var(--cond); animation: todo-ping 1.4s .55s cubic-bezier(.16, 1, .3, 1) 1 both; }
.todobox__list { list-style: none; margin: 0; padding: 0; }
.todo__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--box); transition: background .3s ease; }
.todo__item:first-child { border-top: 0; }
.todo__item:focus-within { background: #fffdf6; }
.todo__what { display: grid; gap: 3px; min-width: 0; }
.todo__what strong { font: 700 16px/1.25 var(--cond); }
.todo__what .sub { font: 400 13px/1.4 var(--sans); color: var(--ink-3); max-width: 60ch; }
.todo__msg { font: 600 13px/1.3 var(--cond); color: var(--ink-2); }
.todo__msg:empty { display: none; }
.todo__do { display: flex; gap: 6px; align-items: center; }
.todo__do input, .todo__do select { width: min(300px, 46vw); font: 500 14.5px var(--sans); padding: 8px 10px; border: 1px solid var(--ink-3); background: #fff; color: var(--ink); }
.todo__do input:focus, .todo__do select:focus { outline: 2px solid var(--focus); outline-offset: 0; }
.todo__item > .btn, .todo__pick, .todo__do .btn, .todo__ads .btn { padding: 9px 14px; font-size: 14px; }
.todo__pick { cursor: pointer; }
.todo__more { grid-column: 2; justify-self: end; font: 500 12.5px var(--cond); color: var(--ink-3); }
.todo__ads { display: grid; gap: 6px; justify-items: end; }
.todo__how > summary { cursor: pointer; font: 600 13px var(--cond); color: var(--ink-2); }
.todo__how .steps { margin: 8px 0 0; padding-left: 20px; max-width: 46ch; font: 400 13.5px/1.45 var(--sans); }
.todo__item.is-done { background: #e8f3ec; }
.todo__item.is-done .todo__msg { color: var(--ok); }
.todo__item.is-done .todo__title strong::before { content: ''; display: inline-block; width: 6px; height: 11px; margin: 0 9px 2px 2px; border: solid var(--ok); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.todobox--clear { border-color: var(--ok); animation: none; }
.todobox--clear .todobox__band { background: #e3f1e8; border-bottom: 0; }
.todobox--clear h2 { color: #1f5c38; }
.todobox--clear p { color: #24452f; }
@keyframes todo-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes todo-ping { 0% { box-shadow: 0 0 0 0 rgba(220, 154, 27, .7); transform: scale(1); } 35% { transform: scale(1.18); } 100% { box-shadow: 0 0 0 14px rgba(220, 154, 27, 0); transform: scale(1); } }

.results { padding: 16px 18px; border: 1px dashed var(--coming); background: var(--coming-bg); }
.results h2, .lps h2 { margin: 0 0 6px; font: 700 20px/1.2 var(--cond); }
.results p { margin: 0; max-width: 68ch; font: 400 14.5px/1.5 var(--sans); }
.results--live { padding: 0; border: 0; background: none; }
/* The client view, reworked (Matt, 2026-10-04). Home: last week in a line, "Your next moves", results, what we're testing.
   Setup: five numbered steps with progress. "Your practice": a menu under their name in the top bar. */
.home__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.weekline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 9px 14px; background: #e2efe5; border: 1px solid #9cc7aa; }
.weekline strong { font: 700 13px/1 var(--cond); color: #2c6b45; }
.weekline span { font: 700 17px/1.25 var(--cond); color: var(--ink); }
.move .move__asks { display: grid; gap: 10px; padding: 12px 14px; }
.move__book { padding: 14px 16px; border-top: 1px solid #ecd39a; background: var(--strip); }
.move__book h3 { margin: 0; font: 700 18px/1.2 var(--cond); }
.move__book > .sub { display: block; margin: 3px 0 10px; font: 500 13.5px/1.4 var(--sans); color: var(--ink-2); }
.move__list { border-top: 1px solid #ecd39a; }
.move__setup { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; align-items: center; gap: 8px 16px; padding: 14px 16px; }
.move__setup strong { display: block; font: 700 16px/1.2 var(--cond); }
.move__setup .sub { font: 500 13.5px/1.4 var(--sans); color: var(--ink-2); }
.move__bar, .setup__bar, .ptest__bar { display: block; height: 8px; background: var(--box); border-radius: 4px; overflow: hidden; }
.move__bar span, .setup__bar span { display: block; height: 100%; background: var(--today); }
/* How their landing pages are doing (spec 2026-10-04 §7; Matt: more graphical interest): each page framed like a browser
   beside the one number the test is about, the landing page conversion rate, then tiles like their Google Ads band's. */
.pruns { display: grid; gap: 12px; padding: 16px 18px 18px; border: 1px solid var(--box); background: var(--strip); }
.pruns h2 { margin: 0; font: 700 20px/1.2 var(--cond); }
.pruns__intro { margin: -6px 0 0; max-width: 70ch; font: 500 13.5px/1.45 var(--sans); color: var(--ink-2); }
.prun { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 18px; padding: 14px; background: #fff; border: 1px solid var(--box); box-shadow: 0 6px 18px -14px rgba(20, 26, 28, .45); }
.prun__shot { position: relative; margin: 0; align-self: start; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--ink-3); border-top-width: 12px; border-top-color: var(--rack); background: var(--strip-alt); }
.prun__shot::before { content: ''; position: absolute; top: -9px; left: 6px; width: 24px; height: 6px; background: radial-gradient(circle, var(--ink-3) 2px, transparent 2.5px) 0 0 / 8px 6px repeat-x; }
.prun__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.prun__shot--none { display: grid; place-items: center; padding: 14px 10px; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; background: repeating-linear-gradient(180deg, var(--strip-alt) 0 18px, var(--strip) 18px 26px); }
.prun__shot--none span { max-width: 100%; font: 700 clamp(15px, 4.5vw, 19px)/1.15 var(--cond); color: var(--ink-2); text-align: center; text-wrap: balance; }
.prun__body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.prun__head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.prun__head h3 { margin: 0; font: 700 19px/1.2 var(--cond); }
.prun__since { margin: -6px 0 0; }
.prun__hero { display: flex; align-items: center; gap: 14px; padding: 2px 0; }
.prun__rate { font: 700 44px/1 var(--cond); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.prun__hero > span { display: grid; gap: 2px; }
.prun__ratelabel { font: 700 13px/1.2 var(--cond); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.prun__line { font: 500 14.5px/1.35 var(--sans); color: var(--ink); }
.prun__prog { display: grid; gap: 4px; max-width: 420px; }
.pruns .prun__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--box); }
.pruns .prun__tiles > div:first-child { padding-left: 0; }
.prun__detail { display: grid; gap: 4px; padding: 8px 10px; background: var(--strip); border: 1px solid var(--box); }
.prun__detail p { margin: 0; }
.parchivebox summary { cursor: pointer; font: 700 14px/1.3 var(--cond); }
.parchive { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.parchive li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 9px 12px; background: #fff; border: 1px solid var(--box); }
.parchive__name { font: 700 14.5px/1.3 var(--cond); }
.parchive__rate { font: 600 13.5px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.parchive__decided { margin-left: auto; font: 600 13px/1.3 var(--cond); color: var(--ok-ink); }
@media (max-width: 760px) { .prun { grid-template-columns: 140px minmax(0, 1fr); gap: 14px; } .pruns .prun__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pruns .prun__tiles > div:nth-child(3) { border-left: 0; padding-left: 0; } .pruns .prun__tiles > div:nth-child(n+3) { border-top: 1px solid var(--box); } }
@media (max-width: 480px) {
  .prun { grid-template-columns: minmax(0, 1fr); }
  .prun__shot { aspect-ratio: 16 / 9; }
  .prun__rate { font-size: 38px; }
  .parchive__decided { margin-left: 0; flex-basis: 100%; }
}
.ptest__bar span { display: block; height: 100%; background: var(--ok); }
.setup { display: grid; gap: 16px; max-width: 860px; }
.setup__head h1 { margin: 0; font: 700 28px/1.1 var(--cond); }
.setup__head > p { margin: 4px 0 10px; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.setup__prog { display: grid; grid-template-columns: minmax(0, 320px) auto; align-items: center; gap: 12px; }
.setup__prog strong { font: 700 14px/1 var(--cond); }
.setup__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.setup__step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 14px 16px; background: var(--strip); border: 1px solid var(--box); }
.setup__step.is-open { border: 2px solid var(--today); background: #fff; box-shadow: 0 10px 26px -18px rgba(109, 71, 0, .45); }
.setup__step.is-done { background: transparent; }
.setup__num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: 700 16px/1 var(--cond); color: var(--ink-2); background: var(--strip-alt); border: 1px solid var(--box); }
.setup__step.is-open .setup__num { background: var(--today); border-color: var(--today); color: var(--ink); }
.setup__step.is-done .setup__num { background: var(--ok); border-color: var(--ok); color: #fff; }
.setup__num .i { width: 18px; height: 18px; }
.setup__main h2 { margin: 2px 0 2px; font: 700 18px/1.2 var(--cond); }
.setup__main h2 small { margin-left: 6px; font: 600 12.5px/1 var(--cond); color: var(--ink-3); }
.setup__why { margin: 0 0 8px; font: 500 13.5px/1.4 var(--sans); color: var(--ink-2); }
.setup__step.is-done .setup__why { display: none; }
.setup__done, .setup__wait, .setup__more { margin: 0; font: 500 13.5px/1.4 var(--sans); color: var(--ink-2); }
.setup__more { margin-top: 8px; }
.setup__home { margin: 4px 0 0; }
.setup__step .todobox__list { margin: 4px 0 0; border: 1px solid var(--box); background: var(--strip); }
.pmenu { position: relative; }
.pmenu > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: 600 14px/1 var(--cond); color: var(--bar-ink); }
.pmenu > summary::-webkit-details-marker { display: none; }
.pmenu > summary .i { width: 14px; height: 14px; }
.pmenu__list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 220px; display: grid; padding: 6px; background: var(--strip); border: 1px solid var(--ink); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.pmenu__list a { padding: 9px 10px; font: 600 14px/1.2 var(--cond); color: var(--ink); text-decoration: none; }
.pmenu__list a:hover { background: #fff; }
.pmenu__who { font: 500 12.5px/1.2 var(--cond); color: var(--bar-dim); }
@media (max-width: 760px) {
  .move__setup { grid-template-columns: 1fr; }
  .pmenu__who { display: none; }
  .pmenu__list { right: auto; left: 0; }
}
/* The portal's top bar (Matt, 2026-10-04): seven sections on one line, never wrapped; tighter, and scrolling sideways
   rather than wrapping when the window is too narrow for them. */
.nav--portal { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav--portal::-webkit-scrollbar { display: none; }
.nav--portal a { padding: 0 11px; font-size: 14.5px; white-space: nowrap; flex: none; }

.lps__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ink-3); background: var(--strip); }
.lps__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--box); }
.lps__item:first-child { border-top: 0; }
.lps__item > div { display: grid; gap: 2px; min-width: 0; }
.lps__item strong { font: 700 16px/1.25 var(--cond); }
.lps__item .sub { font: 500 13px/1.2 var(--cond); color: var(--ink-3); }
.lps__item a:not(.btn) { color: var(--ok); font: 600 13.5px/1.3 var(--cond); overflow-wrap: anywhere; }
.lps__item.is-live strong::after { content: 'Live'; margin-left: 8px; padding: 2px 6px; background: var(--ok); color: #fff; font: 700 11px/1 var(--cond); vertical-align: 2px; }

/* Arriving for one photo slot. */
.slot--focus { position: relative; background: #fff8e6; outline: 2px solid var(--today); outline-offset: -2px; animation: slot-call 1.6s cubic-bezier(.16, 1, .3, 1) 1; }
.slot__flag { position: absolute; top: 0; right: 0; padding: 4px 9px; background: var(--today); color: var(--ink); font: 700 12px/1 var(--cond); }
@keyframes slot-call { 0% { box-shadow: 0 0 0 0 rgba(220, 154, 27, .65); } 100% { box-shadow: 0 0 0 18px rgba(220, 154, 27, 0); } }

/* Page content: one fold per landing page. */
.lpfold { background: var(--strip); border: 1px solid var(--ink-3); }
.lpfold > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 13px 16px; cursor: pointer; }
.lpfold > summary::-webkit-details-marker { display: none; }
.lpfold > summary strong { font: 700 17px/1.2 var(--cond); display: flex; align-items: baseline; gap: 10px; }
.lpfold > summary strong::before { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-2px) rotate(-45deg); transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.lpfold[open] > summary strong::before { transform: translateY(-4px) rotate(45deg); }
.lpfold > summary:hover { background: #fff; }
.lpfold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lpfold[open] > summary { border-bottom: 1px solid var(--box); background: var(--strip-alt); }
.lpfold__state { font: 500 13px/1.2 var(--cond); color: var(--ink-3); }
.lpfold.is-sent .lpfold__state { color: var(--ok); }
.lpfold .portalform { max-width: none; }

@media (max-width: 640px) {
  .todo__item { grid-template-columns: minmax(0, 1fr); }
  .todo__do { flex-wrap: wrap; }
  .todo__do input, .todo__do select { width: 100%; flex: 1 1 200px; }
  .todo__more { grid-column: 1; justify-self: start; }
  .todo__ads { justify-items: start; }
  /* The portal's six sections scroll sideways inside the bar, not the page. */
  .bar__in { flex-wrap: wrap; height: auto; gap: 0 16px; }
  .bar .nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .bar .nav a { padding: 12px 10px; white-space: nowrap; }
  .bar__meta { margin-left: auto; padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .todobox, .todobox__count, .slot--focus { animation: none; }
  .lpfold > summary strong::before, .todo__item { transition: none; }
}
/* A to-do's item and the landing page it is for, told apart (Matt, 2026-10-01). */
.todo__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.todo__page { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; background: #e6eef8; border: 1px solid #b9cde6; color: #234d7c; font: 600 13.5px/1.2 var(--cond); }
.todo__page::before { content: ''; flex: none; width: 9px; height: 11px; border: 1.5px solid currentColor; border-radius: 1px; background: linear-gradient(currentColor, currentColor) 2px 3px / 4px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 2px 6px / 4px 1.5px no-repeat; }

/* The Team page (Matt, 2026-10-01): shepherds, a person's activity, invites, removing access. */
.grid.team td { vertical-align: top; }
.team__name { font: 700 14.5px/1.25 var(--cond); color: var(--ink); text-decoration-color: var(--ink-3); }
.team__name:hover { color: var(--focus); }
.shepherds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.shepherds .chip { margin: 0; }
.invitestaff { margin-top: 14px; max-width: 880px; }
.invitestaff .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.invitestaff .field { flex: 1 1 220px; }
.activity { margin-bottom: 8px; }
.activity .timeline { max-height: none; }
.activity .timeline time { min-width: 5.5em; }
.activity .timeline strong a { color: var(--ink); text-decoration-color: var(--ink-3); }
.shepherds select.inline { max-width: 220px; }
/* A narrow client page sits in the middle (Matt, 2026-10-01): its heading and form centred together. */
.centered { max-width: 760px; margin: 0 auto; }
/* On a narrower window the Improve with Claude box comes before the brief, not two screens under it (Matt, 2026-10-01). */
@media (max-width: 1000px) { .mosaic > .m-4:has(> .claude) { order: -1; } .claude { position: static; } }

/* New client (Matt, 2026-10-01: regular and balanced): three labelled groups, two even columns, every control the
   same height, hints under their control without moving its neighbours. */
.centered .newclient { max-width: none; }
.nc__group { margin: 0; padding: 14px 16px 6px; border: 0; border-top: 1px solid var(--box); min-width: 0; }
.nc__group:first-of-type { border-top: 0; }
.nc__group legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font: 700 15px/1.2 var(--cond); color: var(--ink); }
.nc__group legend + * { clear: both; }
.nc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; align-items: start; }
.nc__field { align-content: start; grid-template-rows: auto 38px auto auto; gap: 4px; }
.nc__field > input, .nc__field > select { height: 38px; box-sizing: border-box; padding: 0 10px; font: 500 14.5px var(--sans); border: 1px solid var(--ink-3); background: #fff; color: var(--ink); }
.nc__field > input:focus, .nc__field > select:focus { outline: 2px solid var(--focus); outline-offset: 0; }
.nc__field > .bad { border-color: var(--now); box-shadow: inset 0 0 0 1px var(--now); }
.nc__field .hint { min-height: 16px; font: 500 12.5px/1.3 var(--cond); color: var(--ink-3); }
.nc__field .hint code { font-size: 12px; color: var(--ink-2); }
.nc__field .hint.err { min-height: 0; }
.nc__invite { align-self: start; margin-top: 26px; padding: 0; align-items: flex-start; }
.nc__invite input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.nc__invite > span { display: grid; gap: 2px; }
.nc__invite .hint { font: 500 12.5px/1.3 var(--cond); color: var(--ink-3); }
.nc__error:empty { display: none; }
.nc__error { padding: 0 16px 10px; }
.nc__actions { padding: 12px 16px 14px; border-top: 1px solid var(--box); background: var(--strip-alt); }
@media (max-width: 640px) { .nc__grid { grid-template-columns: minmax(0, 1fr); } .nc__invite { margin-top: 4px; } }
.nc__grid { row-gap: 12px; }
.nc__field .hint { min-height: 0; }
.nc__field .hint:empty { display: none; }
.nc__field .hint.err { color: var(--now); font-weight: 600; }

/* Interview, Domain and DNS (Matt, 2026-10-02: aligned, not disjointed): three equal boxes on one line, the address
   they make under the subdomain, then the access choices under their own heading. */
.dns__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; align-items: start; padding: 14px 16px 4px; }
.dns__fields .hint strong { color: var(--ink); font-weight: 600; }
.dns__sub { margin: 10px 16px 0; font: 700 14px/1.2 var(--cond); color: var(--ink-2); }
.dns__choices { padding: 8px 16px 16px; }
@media (max-width: 760px) { .dns__fields { grid-template-columns: minmax(0, 1fr); } }
/* The stage label opens where its work is done. */
.hold--link { text-decoration: none; cursor: pointer; }
.hold--link:hover { filter: brightness(1.08); text-decoration: underline; text-underline-offset: 2px; }
.hold--link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Anything marked hidden stays hidden, whatever its display (Matt, 2026-10-02: the ask form showed every kind's fields at once, so a budget went out as a page review). */
[hidden] { display: none !important; }

/* Approvals: three separate ways to ask, one form open at a time (Matt, 2026-10-02). */
.ask { margin: 8px 10px 12px; border: 1px solid var(--box); background: #fff; }
.ask__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; }
.ask__head strong { font: 700 14.5px/1.2 var(--cond); }
.ask__kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.ask__kinds .btn[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ask__form { display: grid; gap: 12px; padding: 12px; border-top: 1px solid var(--box); background: var(--strip); }
.ask__form p { margin: 0; font: 400 14px/1.45 var(--sans); }
.ask__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.ask__form .field > input, .ask__form .field > select { height: 38px; box-sizing: border-box; padding: 0 10px; font: 500 14.5px var(--sans); }
.ask__set { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.ask__set legend { padding: 0; margin-bottom: 6px; font: 600 13px/1.2 var(--cond); color: var(--ink-2); }
.ask__set .muted { margin: -2px 0 2px; }
.ask__opt { display: flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--sans); cursor: pointer; }
.ask__opt input { margin: 0; width: 16px; height: 16px; }
.budget__pages { margin: 4px 0 8px; padding-left: 20px; font: 500 14px/1.45 var(--sans); }
@media (max-width: 640px) { .ask__grid { grid-template-columns: minmax(0, 1fr); } }
.ask__opt input, .tickrow input, .nc__invite input { accent-color: var(--ink); }

/* The Setup page (spec 2026-10-02): one client's steps in three strips, a rail of numbered marks down the left, the
   current step open and edged in today's amber, done steps quiet with a green tick. */
.setuphead, .setup { max-width: 1040px; }
.setuphead__lane { margin: 0; font: 600 14px/1.3 var(--cond); color: var(--ink-2); }
.setuphead__warn { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 600 13px/1.3 var(--cond); color: var(--now); }
.setuphead__warn .i { width: 16px; height: 16px; flex: none; }
.setuphead__side { gap: 6px; min-width: 200px; }
.setuphead__progress { font: 700 15px/1 var(--cond); }
.setuphead__next { font: 600 13.5px/1.3 var(--cond); text-align: right; max-width: 280px; }
.bar-progress { display: block; width: 200px; height: 6px; background: var(--rack); overflow: hidden; }
.bar-progress > span { display: block; width: 0; height: 100%; background: var(--ok); }
.setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.stgroup { min-width: 0; background: var(--strip); border: 1px solid var(--ink-3); }
.stgroup__h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; padding: 6px 14px; font: 700 14px/1.2 var(--cond); background: var(--strip-alt); border-bottom: 1px solid var(--ink-3); }
.stgroup__h small { font: 500 12px/1.2 var(--cond); color: var(--ink-3); }
.steps-list { list-style: none; margin: 0; padding: 0; }
.st { position: relative; border-top: 1px solid var(--box); }
.st:first-child { border-top: 0; }
/* The rail: a line through the marks, joining each step to the next. */
.st::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: var(--box); }
.st:first-child::before { top: 22px; }
.st:last-child::before { bottom: auto; height: 22px; }
.st:only-child::before { display: none; }
.st > details > summary { position: relative; list-style: none; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 14px; cursor: pointer; }
.st > details > summary::-webkit-details-marker { display: none; }
.st > details > summary:hover .st__title { text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 2px; }
.st > details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.st__mark { position: relative; z-index: 1; width: 24px; height: 24px; margin-left: 3px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--strip); display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--cond); color: var(--ink-2); }
.st__mark--done { background: var(--ok); border-color: var(--ok); }
.st__mark--done::after { content: ''; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translate(0, -1px) rotate(45deg); }
.st__mark--wait { border-style: dashed; color: var(--ink-3); }
.st--nate .st__mark { border-color: var(--coming); color: var(--coming); }
.st__title { font: 600 15px/1.3 var(--cond); }
.st--done .st__title { color: var(--ink-2); font-weight: 500; }
.st__who { font: 500 12.5px/1.25 var(--cond); color: var(--ink-3); text-align: right; }
.st--waiting .st__who { color: var(--today-ink); }
/* Ready: can be done now. Every ready step looks the same; the numbers are the usual order, not a lock. */
.st--ready { background: #fff; box-shadow: inset 3px 0 0 var(--today); }
.st--ready .st__mark { border-color: var(--today); background: var(--today); color: var(--ink); }
.st--ready .st__title { font-weight: 700; }
.st--ready .st__who { color: var(--ink-2); }
/* Blocked: needs another step first, and says which. */
.st--blocked .st__title { color: var(--ink-2); font-weight: 500; }
.st--blocked .st__mark { border-color: var(--box); color: var(--ink-3); }
.st__after { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--cond); color: var(--ink-3); }
.st__body:empty { display: none; }
.st__body { position: relative; z-index: 1; padding: 0 16px 16px 58px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: start; }
.st__body > * { max-width: 100%; }
.st__detail, .st__say { margin: 0; max-width: 64ch; font: 400 14px/1.45 var(--sans); }
.st__alert { margin: 0; padding: 8px 10px; background: #fbe9e7; border: 1px solid var(--now); font: 500 14px/1.4 var(--sans); color: #7a1d15; }
.st__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.st__checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st__check { display: flex; gap: 8px; align-items: baseline; }
.st__check input { flex: none; }
.st__row .btn { padding: 8px 12px; font-size: 13.5px; }
.st__link { font: 600 13.5px/1.3 var(--cond); color: var(--ink-2); }
.st__undo { font-size: 13px; color: var(--ink-3); }
.st__msg:empty { display: none; }
.st__cmd { display: flex; align-items: stretch; width: 100%; max-width: 640px; background: var(--bar); }
.st__cmd pre { margin: 0; padding: 9px 12px; flex: 1; min-width: 0; overflow-x: auto; color: var(--bar-ink); font: 500 13px/1.55 ui-monospace, Menlo, monospace; }
.st__cmd code { color: #fff; }
.st__cmd .btn { margin: 4px; align-self: flex-start; padding: 5px 9px; font-size: 12.5px; }
.st__form { display: grid; gap: 12px; width: 100%; }
.st__body .nc__grid { max-width: 760px; }
.st__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 12px 16px; }
.st__form .field > input, .st__form .field > select { height: 38px; box-sizing: border-box; padding: 0 10px; font: 500 14.5px var(--sans); }
.st__folder { grid-template-columns: minmax(0, 420px) auto; align-items: end; }
.st__found { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font: 500 14px/1.4 var(--sans); }
.st__found li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 1px; background: var(--ink-3); }
.st__more > summary { list-style: none; display: inline; }
.st__more > summary::-webkit-details-marker { display: none; }
.st__more[open] > summary { display: none; }
.st__cands { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--box); background: var(--strip); max-width: 760px; }
.st__cands > strong { font: 700 13.5px/1.2 var(--cond); }
.st__cands ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st__cands li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 500 13.5px/1.35 var(--sans); }
.st__candname { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.st__slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; width: 100%; max-width: 560px; border: 1px solid var(--box); background: var(--strip); }
.st__slots li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 7px 10px; border-top: 1px solid var(--box); }
.st__slots li:first-child { border-top: 0; }
.st__slot { font: 500 14px/1.3 var(--sans); }
.st__state { font: 600 12.5px/1 var(--cond); color: var(--ink-3); }
.st__slots li.is-in .st__state { color: var(--ok); }
.st__slots .btn { padding: 5px 9px; font-size: 12.5px; }
.st__slots .btn.is-busy { opacity: .5; pointer-events: none; }
.st__pagerows { display: grid; gap: 8px; width: 100%; max-width: 860px; }
.st__pagerow { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
/* Labels once, over the first row; every row keeps them for screen readers. */
.st__pagerow + .st__pagerow .field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .setuphead__side { min-width: 0; }
  .setuphead__next { text-align: left; }
  .bar-progress { width: 100%; }
  .st::before { left: 24px; }
  .st > details > summary { grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; }
  .st__mark { margin-left: 1px; }
  .st__who { grid-column: 2; text-align: left; }
  .st__body { padding: 0 12px 14px 48px; }
  .st__grid, .st__folder, .st__pagerow { grid-template-columns: minmax(0, 1fr); }
  .st__pagerow + .st__pagerow { padding-top: 10px; border-top: 1px solid var(--box); }
  .st__pagerow + .st__pagerow .field > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .st__slots li { grid-template-columns: minmax(0, 1fr) auto; }
  .st__state { grid-column: 1; grid-row: 2; }
  .st__slots label.btn { grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 420px) { .st__body { padding-left: 12px; } .st::before { display: none; } }
/* A type that no longer fits the lane: the lane can be changed right where it's flagged. */
.setuphead__fix { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; margin-top: 8px; }
.setuphead__fix .setuphead__warn { flex-basis: 100%; margin: 0; }
.setuphead__fix .field > select { height: 34px; padding: 0 8px; min-width: 0; max-width: 100%; }
.setuphead__fix .st__msg { flex-basis: 100%; }

/* ---- Queue phases (Matt, 2026-10-02): New, In setup, Live. The group carries the distinction, never the row: each
   heading is one tinted band with a small square marker (the Dense chips are square), the same treatment at three
   strengths. Amber and blue are the stage chips' own hues, which the type badges (teal, olive, indigo, plum,
   charcoal) do not use. The marker is decorative; the heading text is the signal. ---- */
.grid.queue tr.phasehead th { --pm: #8d9a94; --pt: var(--strip-alt); padding: 9px 9px 8px; border: 1px solid var(--box); border-left: 0; border-right: 0;
  background: var(--pt); font: 700 14px/1.2 var(--cond); color: var(--ink); text-align: left; }
.grid.queue tr.phasehead th::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; background: var(--pm); }
.grid.queue tr.phasehead--new th { --pm: var(--today); --pt: #f6e4b4; border-color: #e3c880; }
.grid.queue tr.phasehead--setup th { --pm: #6f98c4; --pt: #e1eaf4; border-color: #bccfe4; }
.grid.queue tbody tr.phasehead:not(:first-child) th { border-top-width: 6px; border-top-color: var(--ground); }

/* ---- One app (spec 2026-10-02): Today, Clients, Fleet and the client page's figures. Ported from dashboard/public/app.css
   (the Dense page rules of b-today.html, b-clients.html, b-fleet.html); .cmd became .lcmd and Fleet's .st became .fst,
   since the app already uses both names. ---- */

/* top bar: the jump-to-client search */
.jump { position: relative; display: flex; align-items: center; margin-left: 8px; }
.jump input { width: 15rem; font: 500 13.5px var(--sans); padding: 6px 9px; background: #2c3538; color: var(--bar-ink); border: 1px solid #45514f; }
.jump input::placeholder { color: var(--bar-dim); }
.jump input:focus { outline: 2px solid var(--focus); outline-offset: 0; background: #fff; color: var(--ink); }
.jump__list { position: absolute; z-index: 40; top: calc(100% - 4px); left: 0; width: 22rem; max-width: calc(100vw - 32px); margin: 0; padding: 0; list-style: none; background: var(--strip); border: 1px solid var(--ink-3); box-shadow: 0 8px 20px rgba(20, 26, 28, .25); }
.jump__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 7px 10px; cursor: pointer; color: var(--ink); font: 500 13px/1.3 var(--cond); border-top: 1px solid var(--box); }
.jump__list li:first-child { border-top: 0; }
.jump__list li strong { font: 700 14px/1.25 var(--cond); }
.jump__list li span { grid-column: 1; color: var(--ink-2); }
.jump__list li code { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink-3); font-size: 11.5px; }
.jump__list li[aria-selected='true'] { background: #fff; box-shadow: inset 3px 0 0 var(--focus); }
.jump__list .jump__none { display: block; color: var(--ink-3); cursor: default; }

.liveline { margin: 0 0 10px; padding: 7px 10px; background: #fbefd6; border: 1px solid #e3c880; color: var(--today-ink); font: 600 13px/1.3 var(--cond); }
.nofig { margin: 0 0 8px; padding: 9px 12px; background: var(--strip); border: 1px dashed var(--ink-3); color: var(--ink-3); font: 500 13px/1.3 var(--cond); }
.livebox { margin-bottom: 8px; }
/* The client page's sections stand apart (Matt, 2026-10-04: they bled into one another): room between each, and a title
   bar that reads as the start of a section, larger, on a darker bar under a firm top rule. */
.cpage > [data-ads] > .mod, .cpage > [data-landing-pages] .lpband, .cpage > [data-landing-pages] > .termsband, .cpage > [data-section], .cpage > .livebox { margin-bottom: 22px; }
.cpage .mod > h2 { padding: 10px 12px; font: 700 16.5px/1.2 var(--cond); color: var(--ink); background: #e5e8e1; border-bottom: 1px solid var(--ink-3); box-shadow: inset 0 3px 0 var(--ink-2); }
.cpage .mod > h2 small { font-size: 12.5px; }
.cpage .foldbtn { margin: -10px 0 -10px -12px; padding: 10px 12px; }
.cpage .mosaic { gap: 14px; }
.cpage .recordhead { margin: 30px 0 12px; font-size: 19px; color: var(--ink); }
/* Tracking (Matt, 2026-10-04): the old dashboard's pages, conversions and ledgers, quieter inside the Record's box. */
.tracking .mosaic { gap: 10px; padding: 10px; }
.tracking .mod { border-color: var(--box); background: #fff; }
.cpage .tracking .mod > h2 { padding: 7px 10px; font-size: 14px; background: var(--strip-alt); box-shadow: none; }
.livebox:empty { display: none; }
.recordhead { margin: 18px 0 8px; font: 700 15px/1.2 var(--cond); color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.recordhead::after { content: ''; flex: 1; border-top: 1px solid var(--ink-3); }

/* A vault-owned client (vault-lock.js): one quiet line saying where the record is edited, and an admin's Move. */
.vaultline { margin: 0 0 8px; padding: 7px 10px; background: var(--strip-alt); border: 1px solid var(--box); color: var(--ink-2); font: 500 13px/1.35 var(--cond); }
.vaultline a { color: var(--ink); font-weight: 600; }
.setuphead + .vaultline, .pagehead + .vaultline { max-width: 1040px; }
.move { position: relative; }
.move__ask { position: absolute; right: 0; top: 0; z-index: 20; width: 340px; max-width: calc(100vw - 32px); display: grid; gap: 8px; padding: 12px; background: var(--strip); border: 1px solid var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.18); text-align: left; }
.move__ask[hidden] { display: none; }
.move__ask p { margin: 0; font: 500 13.5px/1.4 var(--sans); }
.move__ask .muted { font: 500 12.5px/1.4 var(--cond); }
.field .ro { padding: 7px 0; font: 500 14px/1.35 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.field .ro.dash { color: var(--ink-3); }

/* Today */
.bayhead { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: stretch; margin-bottom: 10px; }
.holders { display: flex; gap: 6px; }
.holder { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 12px; padding: 8px 14px 8px 10px; min-width: 150px; border: 0; cursor: pointer; text-align: left; color: #fff; font-family: var(--cond); }
.holder b { grid-row: span 2; font: 700 34px/1 var(--cond); }
.holder span { font: 700 15px/1.1 var(--cond); }
.holder small { font: 500 12px/1.1 var(--cond); opacity: .9; }
.holder--now { background: var(--now); }
.holder--today { background: var(--today); color: var(--ink); }
.holder--week { background: var(--week); }
.holder[aria-pressed='false'] { background: var(--strip-alt); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--box); }
.bayhead__mid { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font: 500 13px/1.3 var(--cond); }
.bay { background: var(--rack); padding: 8px; box-shadow: inset 0 1px 0 var(--rack-edge), inset 0 -1px 0 var(--rack-edge); }
.bay__label { display: flex; justify-content: space-between; padding: 2px 4px 8px; font: 600 12.5px/1 var(--cond); color: var(--ink-2); }
.strip { display: grid; grid-template-columns: 92px 210px minmax(0, 1fr) 176px 292px; background: var(--strip); margin-bottom: 5px; box-shadow: 0 1px 1px rgba(20, 26, 28, .18); }
.strip:last-child { margin-bottom: 0; }
.strip > * { padding: 9px 11px; border-left: 1px solid var(--box); min-width: 0; }
.strip > :first-child { border-left: 0; }
.f-hold { color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.f-hold b { font: 700 16px/1 var(--cond); }
.f-hold small { font: 500 11.5px/1.2 var(--cond); opacity: .92; }
.strip--now .f-hold { background: var(--now); }
.strip--today .f-hold { background: var(--today); color: var(--ink); }
.strip--week .f-hold { background: var(--week); }
.f-who a { color: var(--ink); text-decoration: none; }
.f-who a:hover strong { text-decoration: underline; }
.f-who strong { display: block; font: 700 15px/1.2 var(--cond); }
.f-who .person { display: block; font: 500 13px/1.25 var(--cond); color: var(--ink-2); }
.f-who code { display: block; margin-top: 3px; color: var(--ink-3); font-size: 11.5px; overflow-wrap: anywhere; }
.f-what .kind { font: 600 12px/1 var(--cond); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.f-what h3 { margin: 3px 0 4px; font: 700 16px/1.2 var(--cond); }
.f-what p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.f-num .v { font: 700 26px/1 var(--cond); }
.strip--now .f-num .v { color: var(--now); }
.strip--today .f-num .v { color: var(--today-ink); }
.strip--week .f-num .v { color: var(--week); }
.f-num .u { display: block; font: 600 12.5px/1.2 var(--cond); color: var(--ink-2); margin-top: 3px; }
.f-num .w { display: block; font: 500 12px/1.25 var(--cond); color: var(--ink-3); margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--box); }
.f-next { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; }
.f-next p { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.lcmd { display: flex; width: 100%; border: 1px solid var(--ink-3); background: #fff; }
.lcmd code { flex: 1; padding: 6px 8px; overflow-wrap: normal; word-break: keep-all; }
.lcmd .tok { white-space: nowrap; }
.lcmd .btn { border: 0; border-left: 1px solid var(--ink-3); }
.clear { background: var(--strip); padding: 28px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; align-items: start; }
.clear h2 { font: 700 30px/1.1 var(--cond); margin: 0 0 8px; }
.clear p { margin: 0; color: var(--ink-2); max-width: 30rem; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 64px 1fr; border: 1px solid var(--box); border-top: 0; background: #fff; }
.checks li:first-child { border-top: 1px solid var(--box); }
.checks li > * { padding: 7px 10px; }
.checks .ok { background: var(--ok); color: #fff; font: 700 12.5px/1.2 var(--cond); display: flex; align-items: center; }
@media (max-width: 1240px) {
  .strip { grid-template-columns: 84px 180px minmax(0, 1fr) 160px; }
  .f-next { grid-column: 2 / 5; grid-row: 2; border-top: 1px solid var(--box); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .f-next .lcmd { width: auto; }
  .f-hold { grid-row: span 2; }
}
@media (max-width: 760px) {
  .bayhead { grid-template-columns: 1fr; }
  .holders { overflow-x: auto; }
  .holder { min-width: 120px; }
  .strip { grid-template-columns: 1fr; }
  .strip > * { border-left: 0; border-top: 1px solid var(--box); grid-column: auto !important; grid-row: auto !important; }
  .f-hold { flex-direction: row; align-items: center; }
  .clear { grid-template-columns: 1fr; }
  .jump input { width: 100%; }
  .jump { flex: 1; margin: 0 0 8px; order: 4; flex-basis: 100%; }
}

/* Clients */
.clients-grid tbody tr[data-slug] { cursor: pointer; }
.clients-grid tbody tr[data-slug]:hover td { background: #fff; }
.clients-grid tbody tr[data-slug]:hover td.coming-col { background: var(--coming-bg); }
.grid td.name .person { display: block; font: 500 13px/1.25 var(--cond); color: var(--ink-2); }
.grid td.name .sub .ctype { margin-right: 4px; font-size: 10.5px; }
.grid td.num { font-weight: 600; }
.grid td.clicks .sub { white-space: nowrap; }
.phase { display: inline-block; padding: 2px 7px; font: 700 12px/1.3 var(--cond); white-space: nowrap; }
.phase--new { background: #f6e4b4; color: var(--today-ink); box-shadow: inset 3px 0 0 var(--today); }
.phase--setup { background: #e1eaf4; color: #234a75; box-shadow: inset 3px 0 0 #6f98c4; }
.phase--live { background: #dcebe1; color: #22573a; box-shadow: inset 3px 0 0 var(--ok); }
.grid tr.grouphead th { padding: 9px 9px 8px; background: var(--strip-alt); border-top: 6px solid var(--ground); font: 700 13.5px/1.2 var(--cond); color: var(--ink-2); text-align: left; }
.typechips .n { font-weight: 500; opacity: .75; margin-left: 2px; }
/* Counts change as the view changes; fixed-width digits keep every chip, and the bar, from moving. */
.typechips .n, .mineswitch .n { font-variant-numeric: tabular-nums; display: inline-block; min-width: 2ch; text-align: right; }
.typechips .is-empty { opacity: .45; }
.keyline { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font: 500 12.5px/1.3 var(--cond); color: var(--ink-3); }
.keyline span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 16px; height: 11px; background: var(--coming-bg); border: 1px solid var(--box); }
.grid th .win { display: block; font: 500 11px/1.2 var(--cond); color: var(--ink-3); }

/* the client page's figures */
.m-6 { grid-column: span 6; }
.tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; }
.tiles > div { padding: 8px 10px; border-left: 1px solid var(--box); }
.tiles > div:first-child { border-left: 0; }
.tiles dt { font: 600 12px/1.2 var(--cond); color: var(--ink-3); }
.tiles dt small { display: block; font: 500 11px/1.2 var(--cond); color: var(--ink-3); }
.tiles dd { margin: 3px 0 0; font: 700 22px/1 var(--cond); }
.tiles .coming-col dd { color: var(--coming); }
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px; border-bottom: 1px solid var(--box); border-right: 1px solid var(--box); }
.cap code { font-size: 13px; font-weight: 600; }
.cap .sub { display: block; font: 500 12px/1.3 var(--cond); color: var(--ink-3); margin: 2px 0 6px; }
.grid.mini { border: 1px solid var(--box); margin-bottom: 6px; }
.grid.mini th, .mod .grid.mini th[scope=row] { text-align: left; background: var(--strip-alt); border-bottom-color: var(--box); font-weight: 600; width: auto; white-space: nowrap; }
.grid.mini th, .grid.mini td { padding: 4px 7px; }
.cap__act { display: flex; gap: 5px; flex-wrap: wrap; }
.shot img:not([src]) { visibility: hidden; }
.shot--none { display: flex; align-items: center; justify-content: center; font: 500 12px/1.2 var(--cond); color: var(--ink-3); cursor: default; }
.none { margin: 0; padding: 10px; font: 500 13px/1.4 var(--cond); color: var(--ink-3); }
.lform { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px 10px; border-top: 1px dashed var(--ink-3); background: var(--strip-alt); }
.lform label { display: grid; gap: 3px; font: 600 12px/1 var(--cond); color: var(--ink-2); }
.lform input, .lform select { font: 500 13px var(--sans); padding: 5px 6px; border: 1px solid var(--ink-3); background: #fff; min-width: 0; color: var(--ink); }
.lform .wide { grid-column: span 3; }
.lform .btn { align-self: end; justify-content: center; }
.lform__msg { grid-column: 1 / -1; margin: 0; font: 600 13px/1.3 var(--cond); color: var(--now); }
.est { margin: 0; padding: 7px 10px; border-top: 1px solid var(--box); font: 500 13px/1.35 var(--cond); color: var(--ink-2); }
@media (max-width: 1100px) { .m-6 { grid-column: span 12; } .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tiles > div:nth-child(5) { border-left: 0; } .tiles > div:nth-child(n+5) { border-top: 1px solid var(--box); } }
@media (max-width: 640px) { .lform { grid-template-columns: 1fr 1fr; } .lform .wide { grid-column: 1 / -1; } .tiles { grid-template-columns: 1fr 1fr; } .tiles > div { border-left: 0; border-top: 1px solid var(--box); } }
@media (max-width: 520px) { .cap { grid-template-columns: 1fr; } .cap .shot--large { width: 100%; height: 280px; } }

/* Fleet: the Clients header (chips, then the search), Setup's stage bands for the status groups, and the stage chips'
   tints for the status itself. */
.fleetsum { font: 500 13px/1.3 var(--cond); }
.fleetsum b { color: var(--ink); font-weight: 700; }
.statuschips .n { font-weight: 500; opacity: .75; margin-left: 2px; }
.tplpick select { height: 33px; font: 600 13px var(--cond); padding: 0 8px; border: 1px solid var(--ink-3); background: var(--strip); color: var(--ink); cursor: pointer; }
.tplpick select:hover { background: #fff; }
.fleet-grid tbody tr[data-slug] { cursor: pointer; }
.fleet-grid tbody tr[data-slug]:hover td { background: #fff; }
.grid td.tc { width: 68px; padding: 6px 8px; }
.grid td.pg { min-width: 250px; }
.grid td.pg a { color: var(--ink); text-decoration: none; }
.grid td.pg a:hover strong { text-decoration: underline; }
.grid td.pg strong { display: block; font: 700 15px/1.2 var(--cond); }
.grid td.pg .person { display: block; margin-top: 1px; color: var(--ink-2); font: 500 13px/1.25 var(--cond); }
.pgid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--box); }
.pgid code { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pgid .kw { font: 500 12.5px/1.25 var(--cond); color: var(--ink-3); }
.grid td.status { width: 1%; white-space: nowrap; }
.grid td.shipped, .grid td.template { width: 1%; }
.grid td.status .sub { margin-top: 4px; }
.grid td.shipped { white-space: nowrap; font-weight: 600; }
.grid td.perf { width: 64px; }
.perf { font: 700 16px/1 var(--cond); }
.perf.low { color: var(--today-ink); }
.bar-perf { display: block; height: 3px; margin-top: 5px; background: var(--box); }
.bar-perf i { display: block; width: 0; height: 100%; background: var(--ok); }
.bar-perf.low i { background: var(--today); }
.fst { display: inline-block; padding: 2px 7px; font: 700 12px/1.3 var(--cond); white-space: nowrap; background: var(--strip-alt); color: var(--ink-2); box-shadow: inset 3px 0 0 #8d9a94; }
.fst--live { background: #dcebe1; color: #22573a; box-shadow: inset 3px 0 0 var(--ok); }
.fst--pages-only { background: #f6e4b4; color: var(--today-ink); box-shadow: inset 3px 0 0 var(--today); }
.grid td.warns { width: 15%; min-width: 150px; }
.warn { display: flex; gap: 5px; font: 600 12.5px/1.3 var(--cond); color: var(--today-ink); }
.warn + .warn { margin-top: 3px; }
.warn .i { width: 14px; height: 14px; margin-top: 1px; }
.grid td.open { width: 1%; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; font: 600 13px/1 var(--cond); color: var(--ink); background: var(--strip); text-decoration: none; border: 1px solid var(--ink-3); white-space: nowrap; }
.pill:hover { background: #fff; border-color: var(--ink); }
.pill .i { width: 14px; height: 14px; }
.fleet-grid tr.sgroup th { --pm: #8d9a94; padding: 9px 9px 8px; border: 1px solid var(--box); border-left: 0; border-right: 0; background: var(--strip-alt); font: 700 14px/1.2 var(--cond); color: var(--ink); }
.fleet-grid tr.sgroup th::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; background: var(--pm); }
.fleet-grid tr.sgroup th .n { font-weight: 500; color: var(--ink-2); margin-left: 2px; }
.fleet-grid tr.sgroup--live th { --pm: var(--ok); background: #dcebe1; border-color: #b5d3bf; }
.fleet-grid tr.sgroup--pages-only th { --pm: var(--today); background: #f6e4b4; border-color: #e3c880; }
.fleet-grid tbody tr.sgroup:first-child th { border-top: 1px solid var(--box); }
.fleet-grid tbody tr.sgroup:not(:first-child) th { border-top: 6px solid var(--ground); }
@media (max-width: 1100px) { .fleet-grid { min-width: 960px; } }
@media (max-width: 760px) {
  .pagehead .actions:has(.statuschips) { width: 100%; }
  .pagehead .actions:has(.statuschips) .search, .pagehead .actions:has(.statuschips) .search input { width: 100%; }
}
.bar--staff .jump { margin-left: auto; }
.bar--staff .bar__meta { margin-left: 0; }
.dhead p.muted { margin: 0; }

/* Whose clients: a two-option switch, one side always selected; apart from the type chips. */
.seg { display: inline-flex; border: 1px solid var(--ink-2); border-radius: 6px; overflow: hidden; margin-right: 12px; }
.seg button { border: 0; background: none; cursor: pointer; padding: 5px 12px; font: 600 12.5px/1.3 var(--cond); color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--ink-2); color: #fff; }
.seg .n { font-weight: 500; opacity: .8; margin-left: 2px; }

/* Audit F15: what used to be inline style attributes, so the CSP's style-src needs no 'unsafe-inline'. */
.card__body--flush { padding: 0; }
.hp { left: -9999px; }
.nc__turnstile { padding: 0 16px 10px; }

/* Call follow-ups (spec 2026-10-03 §5.2): one row per item, the when first; the add form in one row on wide screens. */
.fu-list { list-style: none; margin: 0; padding: 0; }
.fu-list li { display: grid; grid-template-columns: 150px 1fr auto auto; gap: 4px 12px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--box); }
.fu-list .sub { font: 500 12px/1.3 var(--cond); color: var(--ink-3); }
.fu-when { font: 700 12.5px/1.2 var(--cond); color: var(--ink-2); }
.fu-when.is-due { color: var(--now, #b3261e); }
.fu-text { font: 500 14px/1.4 var(--sans); color: var(--ink); }
.fu-done ul { margin: 6px 0 0; padding-left: 18px; }
.fu-done .sub { display: block; font: 500 12px/1.3 var(--cond); color: var(--ink-3); }
.fu-form { display: grid; grid-template-columns: 160px 190px 170px 1fr auto; gap: 8px; align-items: end; padding: 10px; }
.fu-form textarea { font: 500 14px/1.4 var(--sans); padding: 7px 9px; border: 1px solid var(--ink-3); width: 100%; resize: vertical; }
.fu-form [data-fu-error] { grid-column: 1 / -1; order: 1; }
/* Done recently on the client page: quieter than the open list, newest first. */
.fu-recent { padding: 8px 10px 4px; border-top: 1px solid var(--box); }
.fu-recent h4 { margin: 0 0 4px; font: 700 13px/1.2 var(--cond); color: var(--ink-2); }
.fu-recent ul { list-style: none; margin: 0; padding: 0; }
.fu-recent li { display: grid; gap: 1px; padding: 5px 0; }
.fu-recent .fu-text { color: var(--ink-2); }
.fu-recent .sub, .fu-list .sub { font: 500 12px/1.3 var(--cond); color: var(--ink-3); }

/* Calls, the call worksheet (Matt, 2026-10-04). One add row; To do is the main column, the date gutter carries urgency. */
.cw-addbox { margin-bottom: 10px; }
.cw-add { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(240px, 2.4fr) 150px 180px 150px auto; gap: 8px; align-items: end; padding: 10px; }
.cw-add .field > input, .cw-add .field > select { height: 34px; box-sizing: border-box; padding: 0 8px; }
.cw-add .btn--solid { height: 34px; justify-content: center; padding: 0 18px; }
.cw-add__error { grid-column: 1 / -1; }
.cw-add__error:empty { display: none; }
.cw-board { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.cw-side { display: grid; gap: 10px; }
.cw-panel > h2 small { gap: 6px; }
.cw-count { min-width: 20px; padding: 2px 6px; font: 700 11.5px/1 var(--cond); color: #fff; background: var(--ink-2); text-align: center; }
.cw-sub { font: 500 12px/1 var(--cond); color: var(--ink-3); }
.cw-body > .dash { margin: 0; padding: 14px 12px; font: 500 13.5px/1.45 var(--sans); }
.cw-body h3 { margin: 0; padding: 7px 12px 5px; font: 700 12.5px/1.2 var(--cond); color: var(--ink-2); background: var(--strip-alt); border-bottom: 1px solid var(--box); }
.cw-body h3 + ul { border-bottom: 1px solid var(--box); }
.cw-body ul { list-style: none; margin: 0; padding: 0; }
.cw-item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 9px 12px 9px 0; background: #fff; }
.cw-item + .cw-item { border-top: 1px solid var(--strip-alt); }
.cw-item--watch { grid-template-columns: minmax(0, 1fr) auto; padding-left: 12px; }
.cw-item--done { background: transparent; }
.cw-date { align-self: stretch; display: grid; place-items: center; font: 700 14px/1 var(--cond); color: var(--ink-2); font-variant-numeric: tabular-nums; border-right: 1px solid var(--strip-alt); }
.cw-item.is-late .cw-date { color: #fff; background: var(--now); border-right-color: var(--now); }
.cw-item.is-today .cw-date { color: var(--ink); background: #f6e4b4; border-right-color: #e3c880; }
.cw-item--done .cw-date { font-size: 12.5px; color: var(--ink-3); background: none; }
.cw-main { display: grid; gap: 2px; min-width: 0; }
.cw-client { justify-self: start; font: 700 13.5px/1.2 var(--cond); color: var(--ink); text-decoration: none; }
.cw-client:hover { text-decoration: underline; text-underline-offset: 2px; }
.cw-text { margin: 0; font: 500 14.5px/1.4 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.cw-item--done .cw-text { font-size: 13.5px; color: var(--ink-2); }
.cw-main .sub { font: 500 12px/1.3 var(--cond); color: var(--ink-3); }
.cw-main .sub .cw-client { font: 600 12px/1.3 var(--cond); color: var(--ink-2); }
.cw-item .btn { padding: 6px 12px; }
@media (max-width: 1100px) { .cw-add { grid-template-columns: 1fr 1fr 1fr; } .cw-add__client, .cw-add__text { grid-column: span 3; } }
@media (max-width: 900px) { .cw-board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cw-add { grid-template-columns: 1fr 1fr; } .cw-add__client, .cw-add__text { grid-column: 1 / -1; } .cw-add .btn--solid { grid-column: 1 / -1; } }
@media (max-width: 800px) {
  .fu-list li, .fu-form { grid-template-columns: 1fr; }
}

/* The client page's Google Ads band (spec 2026-10-03 §5.3). One axis: spend bars; leads as a strip of dots below. */
.adsband__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font: 500 13px/1.3 var(--cond); }
.adsband .seg { margin-right: 0; vertical-align: middle; }
.adsband .seg button { padding: 4px 10px; font: 600 12px/1.2 var(--cond); }
/* The client page's one window switch, at the end of the section bar (Matt, 2026-10-04): the shared .seg control, one
   outline with dividers, pushed to the bar's end. */
.pagewin { margin-left: auto; margin-right: 0; flex: none; align-self: center; }
.pagewin button { padding: 4px 10px; font: 600 12px/1.2 var(--cond); white-space: nowrap; }
.seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ads-chart { margin: 0; padding: 8px 10px 0; }
.ads-chart svg { width: 100%; height: auto; max-height: 180px; display: block; }
.ads-bar { fill: var(--ink-2); }
.ads-bar:hover { fill: var(--ink); }
.ads-lead { fill: var(--ink); }
.adslink form { display: flex; gap: 8px; align-items: end; }
.syncpanel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.syncpanel h3 { margin: 0 0 6px; font: 700 13px/1.2 var(--cond); }

/* Landing-page tests (spec 2026-10-03 §6). */
.tcard { border: 1px solid var(--box); padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.tcard h3 { margin: 0 0 8px; font: 700 15px/1.2 var(--cond); }
.tcard h3 small { font-weight: 500; color: var(--ink-3); }
.tprog { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--sans); }
.tbar { flex: 0 0 200px; height: 8px; background: var(--box); border-radius: 4px; overflow: hidden; }
.tbar span { display: block; height: 100%; background: var(--ink-2); }
.tfacts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 12px; margin: 10px 0; }
.tfacts dt { font: 600 12px/1.2 var(--cond); color: var(--ink-3); }
.tfacts dd { margin: 0; font: 600 15px/1.3 var(--sans); }
.verdict { font: 600 14px/1.3 var(--sans); }
.verdict--refused { color: var(--ink-3); font-weight: 500; }
.verdict--failed strong { color: var(--now); }
/* Landing pages (spec 2026-10-04 §5; polished 2026-10-04): a card per ad group. Head: the page framed, its state as a
   queue-style pill; then good clicks to 50; then the figures as tiles like the Ads band's, since start over the last 30
   days so they line up; notes in one quiet block; the verdict and what to do in the card's foot. */
.run { display: grid; gap: 12px; padding: 14px 16px 0; margin-bottom: 12px; background: #fff; border: 1px solid var(--box); box-shadow: 0 6px 18px -14px rgba(20, 26, 28, .45); }
.run--decide { border: 2px solid var(--today); }
.run__head { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
.run__thumb { display: block; width: 84px; aspect-ratio: 4 / 5; padding: 0; border: 1px solid var(--ink-3); border-top-width: 8px; border-top-color: var(--rack); background: var(--strip-alt) center top / cover no-repeat; cursor: zoom-in; }
.run__thumb--none { display: grid; align-content: center; gap: 4px; padding: 6px 4px; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; cursor: default; text-align: center; font: 500 10px/1.2 var(--sans); color: var(--ink-3); background: repeating-linear-gradient(180deg, var(--strip-alt) 0 10px, var(--strip) 10px 15px); }
.run__thumb--none span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font: 700 11.5px/1.1 var(--cond); color: var(--ink-2); }
.run__who { display: grid; gap: 3px; min-width: 0; }
.run__who h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 700 18px/1.2 var(--cond); }
.run__who h3 small { font: 500 13px/1 var(--cond); color: var(--ink-3); }
.run__meta { margin: 0; font: 500 13.5px/1.3 var(--sans); }
.run__page { font-weight: 600; }
.run__start, .run__corrected, .run__changed { margin: 0; }
.run__lineage { margin: 4px 0 0; font: 500 13.5px/1.4 var(--sans); }
.run__testing { margin: 4px 0 0; font: 600 13.5px/1.4 var(--sans); }
.run__startslot .tform--card { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.tform--card .tform__note textarea { width: 100%; }
.tform--card [type=submit] { justify-self: start; }
.run__decided { margin: 4px 0 0; font: 600 13.5px/1.3 var(--sans); color: var(--ok-ink); }
.hold--none { background: var(--box); color: var(--ink); }
.run .tprog { flex-wrap: wrap; gap: 6px 10px; }
.run .tprog strong { margin-right: -6px; }
.run .tbar { flex: 1 1 220px; max-width: 420px; }
.run .tprog .sub { flex-basis: auto; }
.run__cols { display: grid; border-top: 1px solid var(--box); }
.run__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.run__row + .run__row { border-top: 1px dashed var(--box); }
.run__cols:not(.run__cols--two) .run__row { grid-template-columns: minmax(0, 1fr); }
.run__row h4 { margin: 0; font: 700 11.5px/1.2 var(--cond); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.run .tfacts { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 0; margin: 0; }
.run .tfacts--4 { --n: 4; } .run .tfacts--6 { --n: 6; }
.run .tfacts > div { padding: 8px 10px; border-left: 1px solid var(--box); }
.run .tfacts > div:first-child { border-left: 0; padding-left: 0; }
.run .tfacts dt { font: 600 12px/1.2 var(--cond); color: var(--ink-3); }
.run .tfacts dd { margin: 3px 0 0; font: 700 19px/1 var(--cond); font-variant-numeric: tabular-nums; }
.run .tfacts dd small { display: block; margin-top: 3px; font: 500 11.5px/1.2 var(--cond); color: var(--ink-3); }
.run .tfacts__lp dd { font-size: 26px; }
.run__younger { margin: -4px 0 0; font-size: 12.5px; }
.run__notes { display: grid; gap: 3px; padding: 8px 10px; background: var(--strip); border: 1px solid var(--box); }
.run__notes p { margin: 0; }
.run__notes .roas strong { color: var(--ink); }
.run__sitelinks { display: flex; gap: 6px; align-items: flex-start; }
.run__sitelinks.is-high { color: var(--today-ink); }
.run__sitelinks .i { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.run .tnote { margin: 0; }
/* A running test's own actions (Matt, 2026-10-05): quiet links above the foot; their forms open under them. */
.run__manage { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .875rem; }
.run__managebox:empty { display: none; }
.run__managebox .tform { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0; }
.run__managebox .tform .actions { flex-wrap: wrap; }
.run__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 -16px; padding: 10px 16px; background: var(--strip-alt); border-top: 1px solid var(--box); }
.run__foot .verdict, .run__state { margin: 0; }
.run__state { font: 600 13.5px/1.3 var(--sans); color: var(--ink-3); }
.run__foot .actions { margin: 0; }
.run__foot .note-form { flex-basis: 100%; margin: 0; }
/* Start a test opens inside the card's foot (Matt, 2026-10-04). */
.run__startslot { flex-basis: 100%; }
.run__startslot:empty { display: none; }
.run__startslot .tform { padding: 10px 0 4px; border-top: 1px dashed var(--box); }
.run .verdict--working strong { color: var(--ok-ink); }
.run .verdict--borderline strong { color: var(--today-ink); }
@media (max-width: 760px) {
  .run__row { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .run .tfacts { --n: 3; }
  .run .tfacts > div:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .run .tfacts > div:nth-child(n + 4) { border-top: 1px solid var(--box); }
}
@media (max-width: 480px) {
  .run { padding: 12px 12px 0; }
  .run__head { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .run__thumb { width: 56px; }
  .run__thumb--none span { display: none; } /* the name sits beside it in the heading */
  .run .tfacts { --n: 2; }
  .run .tfacts > div:nth-child(3n + 1) { border-left: 1px solid var(--box); padding-left: 10px; }
  .run .tfacts > div:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .run .tfacts > div:nth-child(n + 3) { border-top: 1px solid var(--box); }
  .run__foot { margin: 0 -12px; padding: 10px 12px; }
}
.note-form, [data-correct-form] { margin: 10px 0 0; max-width: 520px; }
.note-form textarea, [data-correct-form] textarea { width: 100%; }
.archivebox summary { cursor: pointer; font: 700 14px/1.3 var(--cond); }
/* Each ad group's earlier pages, in its own card (Matt, 2026-10-05). */
.run__earlier { padding: 8px 0 2px; border-top: 1px dashed var(--box); }
.run__earlier .archive { margin-top: 6px; }
.archive { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.archive__row > details { border: 1px solid var(--box); background: #fff; padding: 8px 10px; }
.archive__row summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.archive__page { font: 600 14px/1.3 var(--sans); }
.archive__fig { margin-left: auto; font: 500 13.5px/1.3 var(--sans); }
.copy { display: grid; gap: 8px; margin: 8px 0 0; }
.copy__shot { max-width: 100%; height: auto; border: 1px solid var(--box); }
.copy__frame { width: 100%; height: 70vh; border: 1px solid var(--box); background: #fff; }
.copy__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.copy__diff p { margin: 4px 0; font: 500 13.5px/1.45 var(--sans); }
.copy__diff del { color: var(--now); }
.copy__diff ins { color: var(--ok); text-decoration: none; font-weight: 600; }
.shotview .reader__body img { max-width: 100%; height: auto; }
/* Search terms (Matt, 2026-10-04): a labeled term's row is tinted and its button pressed; a suggestion is only outlined. */
/* Every ad group's terms table the same shape (Matt, 2026-10-05): full width, fixed layout, the same column shares, so
   one ad group's table lines up under another's whatever its terms. Long terms wrap inside their column. */
.termsband .terms { width: 100%; table-layout: fixed; }
.termsband .terms th:nth-child(1) { width: 46%; }
.termsband .terms th:nth-child(2) { width: 9%; }
.termsband .terms th:nth-child(3) { width: 17%; }
.termsband .terms th:nth-child(4) { width: 28%; }
.termsband .terms td { overflow-wrap: anywhere; }
[data-terms] + [data-terms] h4 { margin-top: 20px; }
@media (max-width: 600px) { .termsband .terms .lbls { flex-wrap: wrap; gap: 4px; } .termsband .terms .lbls .lbl + .lbl { margin-left: 0; } }
.terms td { transition: background-color .18s ease-out; }
.terms .term--good td { background: #e2efe5; }
.terms .term--bad td { background: #f7e3e0; }
.lbls { display: inline-flex; }
.lbls .lbl { padding: 5px 10px; font-size: 12.5px; }
.lbls .lbl + .lbl { margin-left: -1px; }
.lbls .lbl--good[aria-pressed='true'] { background: var(--ok); border-color: var(--ok); color: #fff; position: relative; }
.lbls .lbl--bad[aria-pressed='true'] { background: var(--now); border-color: var(--now); color: #fff; position: relative; }
.lbl__err { margin-top: 6px; }
/* The suggestion: a quiet hint in its own column, never on the buttons (Matt, 2026-10-04). */
.sugg { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1 var(--cond); }
.sugg:empty { display: none; }
.sugg .i { width: 15px; height: 15px; flex: none; }
.sugg--good { color: var(--ok); }
.sugg--bad { color: var(--now); }
.lbls .lbl[aria-pressed='false']:hover { background: #fff; border-color: var(--ink); }
.lbls .lbl:focus-visible { position: relative; z-index: 1; }
.termsband h4 { margin: 4px 0 6px; font: 700 14px/1.2 var(--cond); }
/* What labeling has done, on the test card, and the corner note after each label (Matt, 2026-10-04). */
.tlabels { margin: 6px 0 0; font: 500 13px/1.4 var(--cond); color: var(--ink-2); }
.tlabels .linkish { margin-left: 6px; font: 600 13px/1.4 var(--cond); }
/* New and Reviewed (Matt, 2026-10-05): New open, Reviewed folded; the counts in the summary. */
.terms__sec { margin: 0 0 10px; }
.terms__sec > summary { cursor: pointer; padding: 6px 0; font: 600 13px/1.2 var(--cond); color: var(--ink-2); }
.terms__sec > summary small { margin-left: 4px; font-weight: 500; color: var(--ink-3); }
.terms__sec > .dash { margin: 2px 0 8px; }
/* New as a to-do while terms wait; a done line once none do (Matt, 2026-10-05). */
.terms__sec--new > summary { font: 700 15px/1.2 var(--cond); color: var(--ink); }
.terms__clear { margin: 2px 0 10px; }
.termsband h4 small { font: 500 12px/1 var(--cond); color: var(--ink-3); margin-left: 6px; }
/* Each ad group's title, as the landing page cards title theirs (Matt, 2026-10-05); the name opens Google Ads. */
.termsband h4.terms__title { margin: 14px 0 6px; font: 700 18px/1.2 var(--cond); color: var(--ink); }
.termsband [data-terms]:first-child h4.terms__title { margin-top: 4px; }
.terms__name { color: inherit; text-decoration: none; }
.terms__name:hover, .terms__name:focus-visible { text-decoration: underline; }
.terms__gads { color: var(--focus); font-weight: 600; }
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 50; max-width: min(420px, calc(100vw - 32px)); padding: 10px 14px; font: 500 14px/1.4 var(--sans); color: #fff; background: var(--ink); box-shadow: 0 8px 22px rgba(20, 26, 28, .25); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease-out, transform .18s ease-out; }
.toast.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
/* Negative keywords from the bad clicks (Matt, 2026-10-04): the words as chips, who adds them, what was added. */
.negs { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--box); background: #fff; }
.negs h4 { margin: 0 0 8px; font: 700 14px/1.2 var(--cond); }
.negs h4 small { font-weight: 500; color: var(--ink-3); }
.negs__words { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.negs__group { margin: 8px 0 2px; font: 600 13px/1.3 var(--cond); color: var(--ink-2); }
.negs__words li { padding: 4px 9px; font: 600 13.5px/1.2 var(--sans); color: var(--now); background: #fcefed; border: 1px solid #e5b8b1; }
.negs__who { margin: 0 0 8px; font: 500 13.5px/1.45 var(--sans); color: var(--ink-2); max-width: 75ch; }
.negs__done { margin: 6px 0 0; }
.negpick td { background: #fcefed; padding: 8px 10px; }
.negpick__in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.negpick__q { font: 600 13px/1.3 var(--cond); margin-right: 4px; }
.negpick .btn { padding: 4px 9px; font-size: 12.5px; }
.negpick__w[aria-pressed='true'] { background: var(--now); border-color: var(--now); color: #fff; }
.todo__ads .negs__words { margin: 0; }
/* The card's notes: a warning or a heads-up, written as a sentence with an icon, not a tag. */
.tnote { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; padding: 7px 9px; font: 500 13.5px/1.4 var(--sans); color: var(--ink); border: 1px solid var(--box); background: var(--strip-alt); }
.tnote .i { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.tnote--warn { border-color: #e5b8b1; background: #fcefed; }
.tnote--warn .i { color: var(--now); }
.tnote--info .i { color: var(--ok); }
.tnote .linkish { margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .terms td { transition: none; } }
.tform { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
@media (max-width: 800px) { .tfacts, .tform { grid-template-columns: 1fr 1fr; } }
.tfacts dd .sub { display: block; font: 500 12px/1.3 var(--cond); color: var(--ink-3); }

/* "Did they book?" (spec 2026-10-03 §5.4) and pages their ads point to */
.landing__list { list-style: none; margin: 0 0 8px; padding: 0; }
/* Did they book? (Matt, 2026-10-04): each line a steady row (what it is, who and when, the answer), the week's result in
   its heading, and the earlier weeks in a tinted panel of their own. Answering changes a line in place; rows never grow. */
/* Return on ad spend on the Ads band, coloured by its reading so it isn't one more grey number (Matt, 2026-10-04). */
[data-tile="roas"].roas--strong dd { color: var(--ok); }
[data-tile="roas"].roas--workable dd { color: #a87412; }
[data-tile="roas"].roas--dicey dd { color: var(--now); }
.book { display: grid; gap: 12px; }
.book h3 { margin: 0; font: 700 15px/1.2 var(--cond); }
.book h3 small { margin-left: 6px; font: 500 12.5px/1.2 var(--cond); color: var(--ink-3); }
.book__week, .book__earlier { border: 1px solid var(--box); background: #fff; }
.book__earlier { background: var(--strip-alt); border-color: #d9d6c6; }
.book__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; padding: 9px 12px; border-bottom: 1px solid var(--box); }
.book__earlier .book__head { border-bottom-color: #d9d6c6; }
.book__week > .book__head { align-items: center; }
/* The week's result, the first thing read (Matt, 2026-10-04): large, green once something booked. */
.book__total { display: inline-flex; align-items: baseline; gap: 10px; margin: 0; padding: 8px 14px; background: var(--strip-alt); border: 1px solid var(--box); }
.book__n { font: 700 22px/1 var(--cond); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.book__value { font: 600 14px/1.2 var(--cond); color: var(--ink-3); }
.book__total.is-booked { background: #e2efe5; border-color: #9cc7aa; }
.book__total.is-booked .book__n { font-size: 26px; color: var(--ok); }
.book__total.is-booked .book__value { color: #2c6b45; }
.book__none { margin: 0; padding: 12px; }
.book__lines { list-style: none; margin: 0; padding: 0; }
.book__line { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; min-height: 52px; padding: 8px 12px; }
.book__line + .book__line { border-top: 1px solid var(--strip-alt); }
.book__earlier .book__line + .book__line { border-top-color: #e4e1d2; }
/* Earlier bookings (final review, 2026-10-05): closed until opened, so the year's read happens only when wanted. */
.book__past { border: 1px solid var(--box); background: #fff; }
.book__past > summary { padding: 9px 12px; cursor: pointer; }
.book__past > summary h3 { display: inline; }
.book__past[open] > summary { border-bottom: 1px solid var(--box); }
.book__past > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.book__past [data-earlier-list] > .muted { margin: 0; padding: 12px; }
.book__kind { justify-self: start; padding: 3px 7px; font: 700 11.5px/1 var(--cond); color: var(--ink-2); background: var(--strip-alt); border: 1px solid var(--box); }
.book__kind--calls { color: #2f5d8a; background: #e1eaf4; border-color: #bccfe4; }
.book__kind--site { color: #6b5a14; background: #f6efd6; border-color: #e3d6a5; }
.book__what { display: grid; gap: 2px; min-width: 0; }
.book__who { font: 600 14px/1.3 var(--sans); color: var(--ink); }
.book__what .sub { font: 500 12.5px/1.3 var(--cond); color: var(--ink-3); }
.book__answer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: nowrap; }
.book__seg { display: inline-flex; }
.book__seg .btn { padding: 6px 11px; font-size: 13px; }
.book__seg .btn + .btn { margin-left: -1px; }
.book__seg .btn[aria-pressed='false']:hover { background: #fff; border-color: var(--ink); position: relative; }
.book__btn--booked[aria-pressed='true'] { background: var(--ok); border-color: var(--ok); color: #fff; position: relative; }
.book__btn--not_booked[aria-pressed='true'] { background: var(--ink-2); border-color: var(--ink-2); color: #fff; position: relative; }
.book__btn--not_sure[aria-pressed='true'] { background: #f6e4b4; border-color: #d9b45a; color: var(--ink); position: relative; }
.book__count { display: flex; align-items: center; gap: 6px; margin: 0; }
.book__count label { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--cond); color: var(--ink-2); }
.book__count input { width: 4rem; height: 30px; box-sizing: border-box; padding: 0 8px; font: 500 13.5px var(--sans); border: 1px solid var(--ink-3); background: #fff; }
.book__count .btn { height: 30px; padding: 0 12px; }
.book__paid { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--cond); color: var(--ink-2); }
.book__paid input { width: 5.5rem; height: 30px; box-sizing: border-box; padding: 0 8px; font: 500 13.5px var(--sans); border: 1px solid var(--ink-3); background: #fff; }
.book__group { height: 30px; max-width: 12rem; font: 500 13px var(--sans); border: 1px solid var(--ink-3); background: #fff; }
.book__entries { list-style: none; margin: 0; padding: 6px 12px 10px; background: #fbfaf5; font: 500 13.5px/1.4 var(--sans); }
.book__entry { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 4px 0; }
.book__entry .btn { height: 28px; padding: 0 10px; }
.book__err--line { grid-column: 2 / -1; }
.book__found { display: grid; grid-template-columns: repeat(4, minmax(0, 11rem)) max-content; justify-content: start; align-items: end; gap: 8px 12px; margin: 0; padding: 10px 12px 12px; border-top: 1px solid var(--box); background: #fbfaf5; }
.book__found h3 { grid-column: 1 / -1; }
.book__found h3 small { display: block; margin: 3px 0 0; }
.book__found .field input { height: 32px; box-sizing: border-box; }
.book__found .btn { height: 32px; justify-self: start; }
.book__found .field > span { white-space: nowrap; }
.book__err { grid-column: 1 / -1; }
.book__err:empty { display: none; }
.book__saved { margin: 0; font: 600 12.5px/1.2 var(--cond); color: var(--ok); }
@media (max-width: 900px) {
  .book__line { grid-template-columns: 64px minmax(0, 1fr); }
  .book__answer { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .book__found { grid-template-columns: 1fr 1fr; }
  .book__week > .book__head { flex-direction: column; align-items: flex-start; }
}
.landing h3 { margin: 4px 0 8px; font: 700 15px/1.2 var(--cond); }
.landing h3 small { font-weight: 500; color: var(--ink-3); }
.landing__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--box); }
.landing__row a { overflow-wrap: anywhere; }

/* A client's retests waiting to ship, after GHT's own items in the Setup queue (spec 2026-10-04 §8). */
.blockers--after { margin-top: 4px; }

/* ---- the Tracker (spec 2026-10-05 §3), ported from mockups/tracker/a-tracker-full-columns.html option 3 ---- */
.tk { background: var(--strip); border: 1px solid var(--ink-3); }
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--ink-3); }
.tk-head h2 { margin: 0; font: 700 18px/1.2 var(--cond); }
.tk-actions { display: flex; gap: 10px; align-items: center; }
.tk-year select { font: 600 14px var(--cond); border: 1px solid var(--ink-3); background: #fff; padding: 4px 8px; }
.tk .btn { font: 600 14px/1 var(--cond); padding: 8px 12px; border: 1px solid var(--week); background: var(--week); color: #fff; cursor: pointer; }
.tk-defs { position: absolute; }
.tk-empty { padding: 24px 14px; margin: 0; color: var(--ink-2); }
.tk-tabs { display: flex; border-bottom: 1px solid var(--ink-3); overflow-x: auto; }
.tk-tab { padding: 8px 14px; font: 600 14px/1 var(--cond); color: var(--ink-2); background: none; border: 0; border-right: 1px solid var(--box); white-space: nowrap; cursor: pointer; }
.tk-tab[aria-selected="true"] { background: var(--strip); color: var(--ink); box-shadow: inset 0 -3px 0 var(--week); }
.tk-scroll { overflow-x: auto; }
.tk-table { border-collapse: separate; border-spacing: 0; min-width: 1320px; width: 100%; }
.tk-table th, .tk-table td { padding: 7px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--box); }
.tk-table th:first-child, .tk-table td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; min-width: 150px; border-right: 1px solid var(--box); }
.tk-table thead tr.tk-grp > :first-child, .tk-table thead tr.tk-cols > :first-child { background: var(--strip-alt); }
.tk-table tr.tk-mo > :first-child { background: var(--strip); }
.tk-table tr.tk-notsure > :first-child { background: var(--strip-alt); }
.tk-table tr.tk-day > :first-child { background: #fff; }
.tk-table tr.tk-total > :first-child { background: var(--strip-alt); }
.tk-table th.tk-note, .tk-table td.tk-note { text-align: left; min-width: 190px; white-space: normal; }
.tk-table .tk-gs { border-left: 1px solid var(--box); }
.tk-grp th { font: 700 13px/1.2 var(--cond); color: var(--ink); text-align: center; padding: 6px 9px; background: var(--strip-alt); }
.tk-cols th { font: 600 12px/1.2 var(--cond); color: var(--ink-2); vertical-align: bottom; white-space: normal; min-width: 70px; background: var(--strip-alt); border-bottom: 1px solid var(--ink-3); }
.tk-mo td, .tk-mo th { font: 600 15px/1.2 var(--sans); background: var(--strip); }
.tk-mo th:first-child { font: 700 15px/1.2 var(--cond); }
.tk-toggle { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; color: inherit; }
.tk-mo.is-open th, .tk-mo.is-open td { font-weight: 700; border-top: 3px solid var(--week); }
.tk-notsure th, .tk-notsure td { font: 500 14px/1.2 var(--sans); background: var(--strip-alt); color: var(--ink-2); }
.tk-day td, .tk-day th { font: 500 14px/1.2 var(--sans); background: #fff; }
.tk-day th:first-child { font: 600 13.5px var(--cond); color: var(--ink-2); padding-left: 26px; }
.tk-day.is-quiet td, .tk-day.is-quiet th { color: var(--ink-3); }
.tk-table .tk-day td.tk-monthonly { background: repeating-linear-gradient(135deg, #f1f2ee 0 4px, #e9ebe5 4px 5px); }
.tk-total th, .tk-total td { font: 700 15px/1.2 var(--sans); border-top: 2px solid var(--ink-3); background: var(--strip-alt); }
.tk-total th:first-child { font: 700 15px var(--cond); }
.tk-chev { display: inline-block; width: 14px; color: var(--ink-3); }
.tk-sofar { font: 500 12px var(--cond); color: var(--ink-3); }
.tk-you { color: var(--ok-ink); font-weight: 700; }
.tk-why { font: 500 11.5px var(--cond); color: var(--ink-3); margin-left: 2px; }
.tk-lock { width: 11px; height: 11px; stroke: var(--ink-3); fill: none; stroke-width: 2; margin-left: 4px; vertical-align: 0; }
.tk-labeling { display: inline-block; margin-left: 6px; padding: 1px 5px; background: var(--strip-alt); border: 1px solid var(--box); font: 600 11.5px/1.3 var(--cond); color: var(--ink-2); }
.tk-addnote { color: var(--ink-3); font: 500 12.5px var(--cond); background: none; border: 0; border-bottom: 1px dashed var(--box); padding: 0; cursor: pointer; }
.tk-key { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 0; padding: 9px 14px; font: 500 13px var(--cond); color: var(--ink-2); border-top: 1px solid var(--box); }
.tk-keyitem { display: inline-flex; align-items: center; gap: 5px; }
.tk-swatch { display: inline-block; width: 18px; height: 12px; vertical-align: -1px; border: 1px solid var(--box); background: repeating-linear-gradient(135deg, #f1f2ee 0 4px, #e9ebe5 4px 5px); }
.tk-tab:focus-visible, .tk-toggle:focus-visible, .tk .btn:focus-visible, .tk-addnote:focus-visible, .tk-year select:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tk-notetext { font: inherit; font-weight: 700; text-align: left; background: none; border: 0; padding: 0; cursor: text; }
.tk-notetext:hover { text-decoration: underline dotted; }
.tk-notetext:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tk-when { font: 500 11px var(--cond); color: var(--ink-3); white-space: nowrap; }
.tk-noteinput { width: 100%; box-sizing: border-box; font: 500 13px var(--sans); padding: 3px 6px; border: 1px solid var(--ink-3); background: #fff; }
.tk-noteinput:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tk-err { color: var(--now); font: 600 12px var(--cond); }
@media (max-width: 480px) { .tk-table th:first-child, .tk-table td:first-child { min-width: 118px; } .tk-day th:first-child { padding-left: 14px; } }

/* Ad Performance switch and the All ad groups table (spec 2026-10-05 ad-performance-switch §3). */
.adsswitch { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; border-top: 1px solid var(--box); }
.adsswitch button { flex: none; white-space: nowrap; border: 1px solid var(--ink-3); background: #fff; border-radius: 999px; padding: 5px 12px; cursor: pointer; font: 600 12.5px/1.2 var(--cond); color: var(--ink-2); }
.adsswitch button[aria-pressed="true"] { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.adsswitch button:focus-visible, .adg .linkish:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.adg__scroll { overflow-x: auto; }
.adg { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; }
.adg th, .adg td { padding: 7px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--box); font: 500 14px/1.2 var(--sans); }
.adg thead th { font: 600 12px/1.2 var(--cond); color: var(--ink-2); background: var(--strip-alt); border-bottom: 1px solid var(--ink-3); white-space: normal; vertical-align: bottom; }
.adg th.l, .adg td.l { text-align: left; }
.adg tbody th.l { font: 600 14px/1.2 var(--cond); min-width: 170px; background: #fff; }
.adg .linkish { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--box); text-underline-offset: 3px; }
.adg .linkish:hover { text-decoration-color: currentColor; }
.adg__ga { font: 500 11.5px var(--cond); margin-left: 6px; }
.mod .adg tbody tr.adg__notsure th, .mod .adg tbody tr.adg__notsure td { color: var(--ink-2); background: var(--strip-alt); }
.adg__total th, .adg__total td { font-weight: 700; background: var(--strip); border-top: 1px solid var(--ink-3); }
.adg__open { margin: 0; font: 500 13px/1.3 var(--cond); }
.mod .adg tbody th[scope=row] { width: auto; vertical-align: middle; }
.home > .results--live { min-width: 0; }