/* ══════════════════════════════════════════════════════════════════════════════════════════ tools.css — the Tools pages built in their own files (17 Sep 2026): Send a list for approval public/tools/approvals.js #view-approvals classes ap-… Allocator Q&A public/tools/qabank.js #view-qabank classes qb-… Fact-sheet builder public/tools/fsbuilder.js #view-fsbuilder classes fsb-… DDQ & RFP answers public/tools/ddq.js #view-ddq classes ddq-… Marketing public/tools/marketing.js #view-marketing classes mk-… People to add public/tools/peopletoadd.js #view-peopletoadd classes pta-… (+ #pta-drawer, #pta-scrim, #pta-pop, #pta-strip, #home-pta and #view-reports .ra-pta) ══════════════════════════════════════════════════════════════════════════════════════════ ⭐ ONE SECTION PER PAGE, AND EACH PAGE EDITS ONLY ITS OWN SECTION. Five people fill these pages in at the same time; keeping to your own section is what stops one page's work landing on top of another's. ⭐ EVERY RULE STARTS WITH THE PAGE'S OWN ID. index.html already styles .rk .gate (a five-column grid), .rk .note (a boxed grey panel), .rk-home .chip, #mcall .qa and more. A bare class name copied from a mock-up picks those up and renders wrongly with no error. Scope under the id AND prefix the class. ⭐ COLOURS AND FONTS COME FROM THE PAGE'S OWN TOKENS: --e-paper, --e-card, --e-line, --e-ink, --e-ink2, --e-ink3, --e-accent, --e-accent-soft, --e-amber, --e-amber-soft, --e-red, --e-sans, --e-serif, --e-didone, --e-r. They exist only inside an element with class `rk`, which every one of these pages has. Light is the only theme, so there is no dark block here. ══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── Send a list for approval ─────────────────────────────── #view-approvals ── */ /* Ava's picked layout: option A (appr1) of the five-tools mock-up — two columns, cards with a Prata heading over a black rule, an amber ⚑ strip for anything the person must read before sending. */ #view-approvals .ap-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start;margin-top:20px} #view-approvals .ap-stack{display:flex;flex-direction:column;gap:12px;min-width:0} #view-approvals .ap-card{background:var(--e-card);border:1px solid var(--e-line);border-radius:14px;padding:14px 16px;min-width:0;font-family:var(--e-sans);font-size:13.5px;color:var(--e-ink)} #view-approvals .ap-card.ap-plain{background:var(--e-paper)} #view-approvals .ap-h2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid var(--e-ink);padding-bottom:6px;margin:0 0 10px} #view-approvals .ap-h2 h2{font-family:var(--e-didone);font-weight:400;font-size:21px;margin:0;line-height:1.15} #view-approvals .ap-rt{font-size:12px;color:var(--e-ink3)} #view-approvals .ap-muted{color:var(--e-ink3);margin:6px 0} #view-approvals .ap-small{font-size:12px;color:var(--e-ink3)} #view-approvals .ap-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--e-line)} #view-approvals .ap-row:last-child{border-bottom:0} #view-approvals .ap-row b{font-weight:600} #view-approvals .ap-row.on b{color:var(--e-grad1)} #view-approvals .ap-row-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} #view-approvals .ap-go{display:inline-flex;align-items:center;gap:6px;font-family:var(--e-sans);font-size:12.5px;font-weight:600;color:var(--e-grad1);background:var(--e-paper);border:1px solid var(--e-line);border-radius:999px;padding:6px 12px;white-space:nowrap;cursor:pointer;position:relative} #view-approvals .ap-go:hover:not([disabled]){border-color:var(--e-grad2)} #view-approvals .ap-go.dk{background:var(--e-ink);color:#fff;border-color:var(--e-ink)} #view-approvals .ap-go.ghost{color:var(--e-ink2);font-weight:500} #view-approvals .ap-go[disabled]{opacity:.45;cursor:not-allowed} #view-approvals .ap-go:focus-visible,#view-approvals .ap-link:focus-visible,#view-approvals .ap-yn button:focus-visible{outline:2px solid var(--e-accent);outline-offset:2px} #view-approvals .ap-link{background:none;border:0;padding:0;font:inherit;color:var(--e-grad1);text-decoration:underline;cursor:pointer} #view-approvals .ap-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px} #view-approvals .ap-foot{justify-content:space-between} #view-approvals .ap-chip{display:inline-block;font-size:10.5px;font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap;margin-right:4px} #view-approvals .ap-chip.ok{background:#E2EEE6;color:#33634A} #view-approvals .ap-chip.wait{background:#FBEFD8;color:#855710} #view-approvals .ap-chip.no{background:#F6E4E2;color:#8A3A2E} #view-approvals .ap-chip.info{background:#E6EDF1;color:#3C5566} #view-approvals .ap-chip.rose{background:var(--e-accent-soft);color:var(--e-grad1)} #view-approvals .ap-gate{display:flex;gap:10px;align-items:flex-start;background:#FBEFD8;color:#5E3F0B;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.45;margin-top:10px} #view-approvals .ap-gate b{font-weight:600} #view-approvals .ap-gate.ap-red{background:#F6E4E2;color:#6E2B22} #view-approvals .ap-gate.ap-tight{margin:4px 0 8px 26px;padding:7px 10px} #view-approvals .ap-flash{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#E2EEE6;color:#244A36;border-radius:10px;padding:9px 12px;font-size:13px;margin-top:10px} #view-approvals .ap-x{background:none;border:0;font-size:18px;line-height:1;color:inherit;cursor:pointer;padding:0 4px} #view-approvals .ap-note{font-family:var(--e-serif);font-size:12.5px;color:var(--e-ink3);line-height:1.5;margin:10px 0 0} #view-approvals .ap-note b{font-family:var(--e-sans);font-weight:600;color:var(--e-ink2)} #view-approvals .ap-why{font-size:12px;color:var(--e-ink3);line-height:1.45;margin:8px 0 0} #view-approvals .ap-tw{overflow:auto;max-height:420px;border-bottom:1px solid var(--e-line)} #view-approvals .ap-tw.ap-scroll{max-height:360px;margin-top:8px} #view-approvals .ap-t{width:100%;border-collapse:collapse;font-size:13px} #view-approvals .ap-t th{position:sticky;top:0;background:var(--e-paper);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink3);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--e-ink)} #view-approvals .ap-t td{padding:8px 10px;border-bottom:1px solid var(--e-line);vertical-align:top;font-variant-numeric:tabular-nums} #view-approvals .ap-t td b{font-weight:600} #view-approvals .ap-t td.ap-ref{color:var(--e-ink3);font-size:12px;white-space:nowrap} #view-approvals .ap-flags{margin-top:3px} #view-approvals .ap-email{background:#fff;border:1px solid var(--e-line);border-radius:12px;overflow:hidden} #view-approvals .ap-hd{padding:10px 14px;border-bottom:1px solid var(--e-line);font-size:12.5px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:start} #view-approvals .ap-hd > span,#view-approvals .ap-hd > label{color:var(--e-ink3);padding-top:6px} #view-approvals .ap-bd{padding:10px 14px} #view-approvals .ap-in,#view-approvals .ap-ta{width:100%;box-sizing:border-box;border:1px solid var(--e-line);border-radius:8px;background:var(--e-paper);padding:6px 9px;font-family:var(--e-sans);font-size:13px;color:var(--e-ink)} #view-approvals .ap-ta{font-family:var(--e-serif);font-size:14px;line-height:1.55;resize:vertical;min-height:170px} #view-approvals .ap-ta.short{min-height:64px} #view-approvals .ap-in:focus,#view-approvals .ap-ta:focus{outline:2px solid var(--e-accent);outline-offset:1px;border-color:transparent} #view-approvals .ap-field{display:flex;flex-direction:column;gap:4px;margin-top:12px} #view-approvals .ap-field label{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink3);font-weight:600} #view-approvals .ap-field .ap-link{align-self:flex-start;font-size:12px} #view-approvals .ap-to{display:flex;flex-direction:column;gap:2px} #view-approvals .ap-person{display:flex;gap:8px;align-items:flex-start;padding:4px 0;cursor:pointer} #view-approvals .ap-person input{margin-top:3px;accent-color:var(--e-grad1)} #view-approvals .ap-person.off{cursor:default;color:var(--e-ink3)} #view-approvals .ap-rec{border-top:1px dashed var(--e-line);padding:4px 0 12px} #view-approvals .ap-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} #view-approvals .ap-go:focus-within{outline:2px solid var(--e-accent);outline-offset:2px} #view-approvals .ap-yn{display:inline-flex;gap:4px} #view-approvals .ap-yn button{border:1px solid var(--e-line);border-radius:8px;padding:4px 10px;font-family:var(--e-sans);font-size:12px;font-weight:600;background:var(--e-paper);color:var(--e-ink2);cursor:pointer} #view-approvals .ap-yn button.y[aria-pressed="true"]{background:#E2EEE6;border-color:#E2EEE6;color:#33634A} #view-approvals .ap-yn button.n[aria-pressed="true"]{background:#F6E4E2;border-color:#F6E4E2;color:#8A3A2E} @media (max-width:900px){ #view-approvals .ap-split{grid-template-columns:minmax(0,1fr)} #view-approvals .ap-row{grid-template-columns:minmax(0,1fr)} #view-approvals .ap-row > .ap-go,#view-approvals .ap-row > .ap-chip{justify-self:start} #view-approvals .ap-row-acts{justify-content:flex-start} #view-approvals .ap-hd{grid-template-columns:minmax(0,1fr)} #view-approvals .ap-hd > span,#view-approvals .ap-hd > label{padding-top:0} } /* The same page's mark on OTHER pages: "Manager said no dd/mm" on a Target Research row, where a firm the manager turned down is shown but never added to a suggested list again (apManagerNoFor). Prefixed ap- so it cannot collide; shaped by Target Research's own .tr-src pill. */ #view-research .tr-src.ap-no-flag{background:#F6E4E2;color:#8A3A2E} /* ── Allocator Q&A ────────────────────────────────────────────── #view-qabank ── */ /* Option A of the mock-up (qa1): fund chips, the question box, "What we hold" beside "Draft reply". #qb-modal is this page's editor and ask dialog. It is mounted on so it also opens over the call card (#mcall is z-index 10002), so its rules are scoped under its own id rather than #view-qabank. The mock-up's green and blue have no token here, so they are written out, as the call card's .qa colours are. */ #view-qabank #qb-root{font-family:var(--e-sans);color:var(--e-ink)} #view-qabank .qb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px} #view-qabank .qb-chip-f{font-family:var(--e-sans);font-size:12.5px;font-weight:600;border-radius:999px;padding:7px 15px;cursor:pointer; border:1px solid var(--e-line);background:var(--e-card2);color:var(--e-ink2)} #view-qabank .qb-chip-f:hover{border-color:var(--e-ink3)} #view-qabank .qb-chip-f.on{background:var(--e-accent-soft);color:var(--e-grad1);border-color:var(--e-accent)} #view-qabank .qb-qlabel{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3);font-weight:600;margin:0 0 5px} #view-qabank .qb-q{display:block;width:100%;box-sizing:border-box;min-height:96px;resize:vertical;border:1px solid var(--e-ink);border-radius:12px; background:var(--e-paper);padding:12px 14px;font-family:var(--e-serif);font-size:16px;line-height:1.5;color:var(--e-ink)} #view-qabank .qb-q:focus-visible,#view-qabank .qb-reply:focus-visible{outline:2px solid var(--e-accent);outline-offset:2px} #view-qabank .qb-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:16px} #view-qabank .qb-card{background:var(--e-card);border:1px solid var(--e-line);border-radius:14px;padding:14px 16px;min-width:0} #view-qabank .qb-card.plain{background:var(--e-paper)} #view-qabank .qb-h2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid var(--e-ink);padding-bottom:6px;margin:0 0 6px} #view-qabank .qb-h2 h2{font-family:var(--e-didone);font-weight:400;font-size:21px;margin:0;line-height:1.15} #view-qabank .qb-h2 .rt{font-size:12px;color:var(--e-ink3);text-align:right} #view-qabank .qb-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 0;border-bottom:1px solid var(--e-line)} #view-qabank .qb-item h4{margin:0;font-family:var(--e-serif);font-size:15px;font-weight:500;line-height:1.35} #view-qabank .qb-item p{margin:4px 0 0;font-family:var(--e-serif);font-size:13.5px;line-height:1.55;color:var(--e-ink2)} #view-qabank .qb-item p.qb-none{font-family:var(--e-sans);font-size:13px;color:#8A3A2E} #view-qabank .qb-asked{font-size:11px;color:var(--e-ink3);margin-left:6px} #view-qabank .qb-src{margin-top:5px;font-size:12px;color:var(--e-ink3)} #view-qabank .qb-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px} #view-qabank .qb-more summary{cursor:pointer;list-style:none;font-family:var(--e-serif);font-size:13.5px;line-height:1.55;color:var(--e-ink2);margin-top:4px} #view-qabank .qb-more summary::-webkit-details-marker{display:none} #view-qabank .qb-more .qb-readall{display:block;font-family:var(--e-sans);font-size:12px;font-weight:600;color:var(--e-grad1);margin-top:2px} #view-qabank .qb-more[open] .qb-clip{display:none} #view-qabank .qb-more[open] .qb-readall{display:none} #view-qabank .qb-conf{display:inline-flex;gap:2px;cursor:help} #view-qabank .qb-conf i{width:6px;height:12px;border-radius:2px;background:var(--e-inset)} #view-qabank .qb-conf i.on{background:#33634A} #view-qabank .qb-st{display:inline-block;font-size:10.5px;font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap} #view-qabank .qb-st.ok{background:#E2EEE6;color:#33634A} #view-qabank .qb-st.wait{background:#FBEFD8;color:#855710} #view-qabank .qb-st.no{background:#F6E4E2;color:#8A3A2E} #view-qabank .qb-st.info{background:#E6EDF1;color:#3C5566} #view-qabank .qb-gate,#qb-modal .qb-gate{display:flex;gap:10px;align-items:flex-start;background:#FBEFD8;color:#5E3F0B;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;margin-top:12px} #view-qabank .qb-gate b{font-weight:600} #view-qabank .qb-gate.ok{background:#E2EEE6;color:#24472F} #view-qabank .qb-gate.warn{background:#F6E4E2;color:#6E2D24;margin:12px 0 0} #view-qabank .qb-gate code{font-size:11.5px} #view-qabank .qb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px} #view-qabank .qb-btn,#qb-modal .qb-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--e-sans);font-size:12.5px;font-weight:600;color:var(--e-grad1); background:var(--e-paper);border:1px solid var(--e-line);border-radius:999px;padding:7px 13px;cursor:pointer;min-height:36px} #view-qabank .qb-btn:hover:not([disabled]),#qb-modal .qb-btn:hover:not([disabled]){border-color:var(--e-ink3)} #view-qabank .qb-btn.dk,#qb-modal .qb-btn.dk{background:var(--e-ink);color:#fff;border-color:var(--e-ink)} #view-qabank .qb-btn.ghost,#qb-modal .qb-btn.ghost{color:var(--e-ink2);font-weight:500} #view-qabank .qb-btn[disabled],#qb-modal .qb-btn[disabled]{opacity:.45;cursor:not-allowed} #view-qabank .qb-link{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--e-grad1);text-decoration:underline;cursor:pointer} #view-qabank .qb-hold-actions{border-top:0} #view-qabank .qb-empty{font-family:var(--e-serif);font-size:14px;color:var(--e-ink2);margin:10px 0 0;line-height:1.55} #view-qabank .qb-small,#qb-modal .qb-small{font-size:12px;color:var(--e-ink3);margin:8px 0 0;line-height:1.5} #view-qabank .qb-wait{font-size:12.5px;color:var(--e-ink3);padding:12px 0} #view-qabank .qb-reply{display:block;width:100%;box-sizing:border-box;min-height:220px;resize:vertical;border:1px solid var(--e-line);border-radius:12px; background:#fff;padding:13px 14px;font-family:var(--e-serif);font-size:14.5px;line-height:1.6;color:var(--e-ink)} #view-qabank .qb-note{font-family:var(--e-serif);font-size:12.5px;color:var(--e-ink3);line-height:1.5;margin:12px 0 0} #view-qabank .qb-note b{font-family:var(--e-sans);font-weight:600;color:var(--e-ink2)} #view-qabank .qb-meter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;padding:9px 11px;border-radius:10px;background:var(--e-card2)} #view-qabank .qb-meter b{display:block;font-size:12.5px;font-weight:600;color:var(--e-ink)} #view-qabank .qb-meter small{display:block;font-size:11px;color:var(--e-ink3);line-height:1.4} @media (max-width:900px){#view-qabank .qb-split{grid-template-columns:minmax(0,1fr)}} @media (max-width:520px){#view-qabank .qb-item{grid-template-columns:minmax(0,1fr)}#view-qabank .qb-item-side{flex-direction:row;align-items:center}#view-qabank .qb-meter{grid-template-columns:minmax(0,1fr)}} #qb-modal{position:fixed;inset:0;z-index:10050;background:rgba(27,20,22,.45);display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:40px 16px} #qb-modal .qb-dlg{max-width:720px;width:100%;margin:0 auto;background:var(--e-paper);border-radius:14px;box-shadow:0 24px 60px -30px rgba(27,20,22,.6); padding:18px 20px;font-family:var(--e-sans);color:var(--e-ink)} #qb-modal .qb-dlg-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--e-ink);padding-bottom:6px} #qb-modal .qb-dlg-h h2{font-family:var(--e-didone);font-weight:400;font-size:22px;margin:0;line-height:1.2} #qb-modal .qb-x{background:none;border:0;font-size:16px;color:var(--e-ink2);cursor:pointer;min-width:36px;min-height:36px} #qb-modal .qb-dlg-intro{font-family:var(--e-serif);font-size:14px;color:var(--e-ink2);line-height:1.55;margin:10px 0 0} #qb-modal .qb-dlg-item{padding:12px 0;border-bottom:1px solid var(--e-line2)} #qb-modal .qb-dlg-item label b,#qb-modal .qb-dlg-item > b{display:block;font-family:var(--e-serif);font-weight:500;font-size:14.5px;line-height:1.4;margin-bottom:6px} #qb-modal .qb-dlg-item label small,#qb-modal .qb-tick small{display:block;font-size:11.5px;color:var(--e-ink3);margin:2px 0 6px} #qb-modal .qb-k{display:block;font-family:var(--e-sans)!important;font-size:10.5px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3);font-weight:600!important;margin:8px 0 5px!important} #qb-modal textarea,#qb-modal .qb-inp{display:block;width:100%;box-sizing:border-box;border:1px solid var(--e-line);border-radius:10px;background:#fff; padding:10px 12px;font-family:var(--e-serif);font-size:14px;line-height:1.55;color:var(--e-ink)} #qb-modal textarea{resize:vertical} #qb-modal .qb-inp{font-family:var(--e-sans);font-size:13px;min-height:38px} #qb-modal .qb-tick{display:flex;gap:9px;align-items:flex-start;padding:6px 0;cursor:pointer;font-size:13px} #qb-modal .qb-tick input{margin-top:3px;width:16px;height:16px} #qb-modal .qb-tick b{font-weight:600} #qb-modal .qb-dlg-err{color:#8A3A2E;font-size:12.5px;margin-top:8px;min-height:1em} #qb-modal .qb-dlg-done ul{list-style:none;margin:8px 0 0;padding:0;font-size:13px;line-height:1.5} #qb-modal .qb-dlg-done li{padding:3px 0} #qb-modal .qb-dlg-done li.ok span{color:#33634A} #qb-modal .qb-dlg-done li.no{color:#8A3A2E} #qb-modal .qb-dlg-f{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:12px} /* ── Fact-sheet builder ────────────────────────────────────── #view-fsbuilder ── */ /* The layouts Ava picked (17 Sep 2026): option A's fields beside the page as it prints, option B's three format cards, option C's ready-to-send table underneath. The green and amber are the mock-up's own: the kit has no status green, and its --e-amber is a rose — a tick that is not green reads as "not done". */ #view-fsbuilder{--fsb-ok:#33634A;--fsb-ok-soft:#E2EEE6;--fsb-warn:#855710;--fsb-warn-ink:#5E3F0B;--fsb-warn-soft:#FBEFD8;--fsb-stop-soft:#F6E4E2;--fsb-stop-ink:#8A3A2E;--fsb-stage:#EFE9E8} #view-fsbuilder .fsb-wait{font-family:var(--e-serif);font-size:14px;color:var(--e-ink3);padding:14px 0} #view-fsbuilder button{font-family:var(--e-sans)} #view-fsbuilder button:focus-visible,#view-fsbuilder .fsb-in:focus-visible{outline:2px solid var(--e-accent);outline-offset:2px} #view-fsbuilder .fsb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px} #view-fsbuilder .fsb-funds{display:flex;flex-wrap:wrap;gap:6px} #view-fsbuilder .fsb-fund{font-size:12.5px;font-weight:600;border-radius:999px;padding:6px 13px;border:1px solid var(--e-line);background:var(--e-card2);color:var(--e-ink2);cursor:pointer} #view-fsbuilder .fsb-fund[aria-pressed="true"]{background:var(--e-accent-soft);border-color:var(--e-grad2);color:var(--e-grad1)} #view-fsbuilder .fsb-dot{color:var(--fsb-warn)} #view-fsbuilder .fsb-sp{flex:1} #view-fsbuilder .fsb-go{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--e-grad1);background:var(--e-paper);border:1px solid var(--e-line);border-radius:999px;padding:7px 15px;cursor:pointer;white-space:nowrap} #view-fsbuilder .fsb-go.dk{background:var(--e-ink);border-color:var(--e-ink);color:#fff} #view-fsbuilder .fsb-go.ghost{color:var(--e-ink2);font-weight:500} #view-fsbuilder .fsb-go:disabled{opacity:.45;cursor:default} #view-fsbuilder .fsb-switch{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--e-ink2);background:var(--e-paper);border:1px solid var(--e-line);border-radius:999px;padding:6px 13px 6px 7px;cursor:pointer} #view-fsbuilder .fsb-knob{position:relative;width:30px;height:18px;border-radius:999px;background:var(--e-grey3);flex:none;transition:background .15s} #view-fsbuilder .fsb-knob::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(27,20,22,.25);transition:left .15s} #view-fsbuilder .fsb-switch[aria-checked="true"]{color:var(--e-ink)} #view-fsbuilder .fsb-switch[aria-checked="true"] .fsb-knob{background:var(--fsb-ok)} #view-fsbuilder .fsb-switch[aria-checked="true"] .fsb-knob::after{left:15px} #view-fsbuilder .fsb-formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px} #view-fsbuilder .fsb-fmt{text-align:left;background:var(--e-paper);border:1px solid var(--e-line);border-radius:14px;padding:12px 16px;cursor:pointer;color:var(--e-ink);min-width:0} #view-fsbuilder .fsb-fmt[aria-checked="true"]{background:var(--e-card);border-color:var(--e-grad2);box-shadow:inset 0 0 0 1px var(--e-grad2)} #view-fsbuilder .fsb-k{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--e-ink3);font-weight:600} #view-fsbuilder .fsb-fmt b{display:block;font-family:var(--e-didone);font-weight:400;font-size:20px;line-height:1.2;margin-top:4px} #view-fsbuilder .fsb-sub{display:block;font-size:12px;color:var(--e-ink3)} #view-fsbuilder .fsb-warns{display:flex;flex-direction:column;gap:8px;margin:0 0 14px} #view-fsbuilder .fsb-warns:empty{display:none} #view-fsbuilder #fsb-banner:not(:empty){margin:0 0 10px} #view-fsbuilder .fsb-gate{display:flex;gap:10px;align-items:flex-start;background:var(--fsb-warn-soft);color:var(--fsb-warn-ink);border-radius:10px;padding:10px 12px;font-family:var(--e-sans);font-size:12.5px;line-height:1.5} #view-fsbuilder .fsb-gate b{font-weight:600} #view-fsbuilder .fsb-gate.info{background:var(--e-card2);color:var(--e-ink2)} #view-fsbuilder .fsb-gate.stop{background:var(--fsb-stop-soft);color:var(--fsb-stop-ink)} #view-fsbuilder .fsb-ul{margin:4px 0 0;padding-left:18px} #view-fsbuilder .fsb-link{background:none;border:0;padding:0 2px;font-size:12px;font-weight:600;color:var(--e-grad1);text-decoration:underline;cursor:pointer} #view-fsbuilder .fsb-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start} #view-fsbuilder .fsb-left,#view-fsbuilder .fsb-right{min-width:0} #view-fsbuilder .fsb-right{position:sticky;top:12px} #view-fsbuilder .fsb-editor{display:flex;flex-direction:column;gap:12px} #view-fsbuilder .fsb-sec{background:var(--e-card);border:1px solid var(--e-line);border-radius:14px;padding:14px 16px;min-width:0} #view-fsbuilder .fsb-sec.int{background:var(--e-paper);border-style:dashed;border-color:var(--e-grad2)} #view-fsbuilder .fsb-sech{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;border-bottom:1px solid var(--e-ink);padding-bottom:6px;margin:0 0 10px} #view-fsbuilder .fsb-sech h3{font-family:var(--e-didone);font-weight:400;font-size:19px;line-height:1.15;margin:0;color:var(--e-ink)} #view-fsbuilder .fsb-field{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;min-width:0} #view-fsbuilder .fsb-lab{display:block;font-family:var(--e-sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink3);font-weight:600;margin:0 0 4px} #view-fsbuilder .fsb-field .fsb-lab{margin:0} #view-fsbuilder .fsb-in{font-family:var(--e-sans);font-size:13px;color:var(--e-ink);background:#fff;border:1px solid var(--e-line);border-radius:8px;padding:7px 9px;width:100%;min-width:0;box-sizing:border-box} #view-fsbuilder textarea.fsb-in{resize:vertical;line-height:1.5;font-family:var(--e-serif);font-size:13.5px} #view-fsbuilder .fsb-in:focus{outline:none;border-color:var(--e-accent);box-shadow:0 0 0 3px var(--e-accent-soft)} #view-fsbuilder .fsb-hint{font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink3);line-height:1.45;margin:4px 0 8px} #view-fsbuilder .fsb-bad{color:var(--fsb-stop-ink)} #view-fsbuilder .fsb-err{font-family:var(--e-sans);font-size:12.5px;color:var(--fsb-stop-ink);background:var(--fsb-stop-soft);border-radius:8px;padding:8px 10px;margin:8px 0} #view-fsbuilder .fsb-g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px} #view-fsbuilder .fsb-row,#view-fsbuilder .fsb-colh{display:grid;gap:6px;align-items:start;margin:0 0 6px} #view-fsbuilder .fsb-colh{margin:0 0 4px;font-family:var(--e-sans);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--e-ink3);font-weight:600} #view-fsbuilder .fsb-row.c1{grid-template-columns:minmax(0,1fr) auto} #view-fsbuilder .fsb-row.c2,#view-fsbuilder .fsb-colh.c2{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) 92px} #view-fsbuilder .fsb-row.c3,#view-fsbuilder .fsb-colh.c3{grid-template-columns:minmax(0,1fr) minmax(0,.75fr) minmax(0,.6fr) 92px} /* Figures: name · value · as of · the Headline tick (which four head the one-pager) · move and remove */ #view-fsbuilder .fsb-row.c4,#view-fsbuilder .fsb-colh.c4{grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,.55fr) 64px 92px} #view-fsbuilder .fsb-hl{display:flex;align-items:center;justify-content:center;gap:5px;height:32px;cursor:pointer} #view-fsbuilder .fsb-hl input{width:16px;height:16px;accent-color:var(--e-grad1);cursor:pointer;margin:0} /* The column heading carries the word on a wide screen; on a phone the headings are hidden, so the tick carries its own. */ #view-fsbuilder .fsb-hl span{display:none;font-family:var(--e-sans);font-size:12px;color:var(--e-ink2)} #view-fsbuilder .fsb-ctl{display:flex;gap:2px;justify-content:flex-end} #view-fsbuilder .fsb-icon{width:29px;height:32px;border:1px solid var(--e-line);background:var(--e-paper);border-radius:7px;cursor:pointer;color:var(--e-ink2);font-size:13px;line-height:1;padding:0} #view-fsbuilder .fsb-icon:hover:not(:disabled){border-color:var(--e-ink)} #view-fsbuilder .fsb-icon:disabled{opacity:.3;cursor:default} #view-fsbuilder .fsb-add{margin-top:4px;background:none;border:1px dashed var(--e-grad2);color:var(--e-grad1);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer} /* Both scrolling boxes (the track record grid, the ready-to-send table) are wider than a phone. contain:inline-size stops that width counting towards the page's own, which in the app's flex layout would widen .main itself and make the whole page scroll sideways. */ #view-fsbuilder .fsb-grid{overflow-x:auto;margin:0 0 6px;contain:inline-size} #view-fsbuilder .fsb-gt{border-collapse:collapse;min-width:640px} #view-fsbuilder .fsb-gt th,#view-fsbuilder .fsb-gt td{padding:2px;vertical-align:top} #view-fsbuilder .fsb-gt th .fsb-in{font-weight:600;background:var(--e-card2)} #view-fsbuilder .fsb-gt .fsb-in{font-size:12px;padding:6px 7px;min-width:70px} #view-fsbuilder .fsb-docs{margin-top:2px} #view-fsbuilder .fsb-doclist{list-style:none;margin:0;padding:0} #view-fsbuilder .fsb-doc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:start;padding:8px 0;border-top:1px solid var(--e-line);font-family:var(--e-sans);font-size:12.5px} #view-fsbuilder .fsb-doc.on .fsb-docn{color:var(--fsb-ok)} #view-fsbuilder .fsb-cat{font-size:10px;font-weight:600;border-radius:999px;padding:2px 8px;background:var(--e-card2);color:var(--e-ink2);white-space:nowrap;margin-top:1px} #view-fsbuilder .fsb-docn{min-width:0;overflow-wrap:anywhere;color:var(--e-ink)} #view-fsbuilder .fsb-docn small{display:block;color:var(--e-ink3);font-size:11px} #view-fsbuilder .fsb-docb{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 12px} #view-fsbuilder .fsb-src{font-size:12px;font-weight:600;color:var(--fsb-ok)} #view-fsbuilder .fsb-savebar{position:sticky;bottom:0;z-index:5;margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--e-paper);border:1px solid var(--e-line);border-radius:12px;padding:10px 12px;box-shadow:0 -8px 20px -14px rgba(27,20,22,.3)} #view-fsbuilder .fsb-sbw{flex:1 1 180px;display:flex;flex-direction:column;gap:1px;min-width:0} #view-fsbuilder .fsb-dirty{font-family:var(--e-sans);font-size:12.5px;font-weight:600;color:var(--fsb-warn-ink)} #view-fsbuilder .fsb-meta{font-family:var(--e-sans);font-size:12px;color:var(--e-ink3)} #view-fsbuilder .fsb-a4wrap{background:var(--fsb-stage);border-radius:12px;padding:18px} #view-fsbuilder .fsb-a4box{position:relative;overflow:hidden;width:100%;max-width:100%;background:#fff;box-shadow:0 12px 30px -16px rgba(27,20,22,.35)} #view-fsbuilder .fsb-a4box iframe{position:absolute;top:0;left:0;border:0;display:block;transform-origin:0 0;background:#fff} #view-fsbuilder .fsb-pages{font-family:var(--e-sans);font-size:12px;color:var(--e-ink3);margin-top:8px} #view-fsbuilder .fsb-pages.over{color:var(--fsb-warn-ink);font-weight:600} #view-fsbuilder .fsb-ready{margin-top:30px} #view-fsbuilder .fsb-h2{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;border-bottom:1px solid var(--e-ink);padding-bottom:7px;margin:0 0 12px} #view-fsbuilder .fsb-h2 h2{font-family:var(--e-didone);font-weight:400;font-size:23px;line-height:1.1;margin:0;color:var(--e-ink)} #view-fsbuilder .fsb-h2 span{font-family:var(--e-sans);font-size:12.5px;color:var(--e-ink3)} #view-fsbuilder .fsb-tw{overflow-x:auto;contain:inline-size;background:var(--e-paper);border:1px solid var(--e-line);border-radius:14px;padding:6px 12px 10px} #view-fsbuilder .fsb-t{width:100%;min-width:760px;border-collapse:collapse;font-family:var(--e-sans);font-size:13px;color:var(--e-ink)} #view-fsbuilder .fsb-t th{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink3);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--e-ink);vertical-align:bottom} #view-fsbuilder .fsb-t th small{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:11px;margin-top:2px} #view-fsbuilder .fsb-t tbody th{font-size:13px;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--e-line);vertical-align:middle} #view-fsbuilder .fsb-t td{padding:9px 10px;border-bottom:1px solid var(--e-line);vertical-align:middle} #view-fsbuilder .fsb-t .c{text-align:center} #view-fsbuilder .fsb-t tr.cur{background:var(--e-grey1)} #view-fsbuilder .fsb-rowfund{background:none;border:0;padding:0;font-size:13px;font-weight:600;color:var(--e-ink);cursor:pointer;text-align:left} #view-fsbuilder .fsb-t tr.cur .fsb-rowfund{color:var(--e-grad1)} #view-fsbuilder .fsb-newer{display:block;font-size:11px;color:var(--fsb-warn-ink)} #view-fsbuilder .fsb-cell{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:13px;font-weight:700;border:0;padding:0;cursor:pointer;vertical-align:middle} #view-fsbuilder .fsb-cell.ok{background:var(--fsb-ok-soft);color:var(--fsb-ok)} #view-fsbuilder .fsb-cell.wait{background:var(--fsb-warn-soft);color:var(--fsb-warn)} #view-fsbuilder .fsb-cell.no{background:var(--e-card2);color:var(--e-ink3)} #view-fsbuilder .fsb-cell.re{box-shadow:inset 0 0 0 2px var(--fsb-warn);color:var(--fsb-warn)} #view-fsbuilder .fsb-cell.on{outline:2px solid var(--e-accent);outline-offset:2px} #view-fsbuilder .fsb-cell.fixed{cursor:default} #view-fsbuilder .fsb-legend{margin:10px 0 0} #view-fsbuilder .fsb-legend .fsb-cell{width:20px;height:20px;font-size:11px;margin:0 2px 0 6px} #view-fsbuilder .fsb-legend .fsb-cell:first-child{margin-left:0} #view-fsbuilder #fsb-reasons:not(:empty){margin-top:12px} #view-fsbuilder #fsb-form:not(:empty){margin-top:14px} #view-fsbuilder .fsb-formcard{max-width:640px;background:var(--e-card);border:1px solid var(--e-line);border-radius:14px;padding:14px 16px} #view-fsbuilder .fsb-states{border:0;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px} #view-fsbuilder .fsb-states legend{float:left;width:100%;padding:0} #view-fsbuilder .fsb-radio{font-family:var(--e-sans);font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer} #view-fsbuilder .fsb-formb{display:flex;justify-content:flex-end;gap:8px;margin-top:10px} @media (max-width:1000px){ #view-fsbuilder .fsb-split{grid-template-columns:minmax(0,1fr)} #view-fsbuilder .fsb-right{position:static} } @media (max-width:700px){ #view-fsbuilder .fsb-formats,#view-fsbuilder .fsb-g2{grid-template-columns:minmax(0,1fr)} #view-fsbuilder .fsb-row.c2,#view-fsbuilder .fsb-row.c3,#view-fsbuilder .fsb-row.c4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #view-fsbuilder .fsb-row .fsb-ctl{grid-column:1/-1} #view-fsbuilder .fsb-row.c4 .fsb-hl{grid-column:1/-1;justify-content:flex-start;height:auto} #view-fsbuilder .fsb-row.c4 .fsb-hl span{display:inline} #view-fsbuilder .fsb-colh{display:none} #view-fsbuilder .fsb-a4wrap{padding:10px} } @media (prefers-reduced-motion:reduce){ #view-fsbuilder .fsb-knob,#view-fsbuilder .fsb-knob::after{transition:none} } /* ── DDQ & RFP answers ─────────────────────────────────────────── #view-ddq ── */ /* Ava picked A + B + C (17 Sep 2026): the tracker, the two cards, a questionnaire answered in a table, and each fund's standard DDQ. Green and amber are not page tokens, so they are named once here for this page. */ #view-ddq{--ddq-green:#33634A;--ddq-green-s:#E2EEE6;--ddq-amber:#855710;--ddq-amber-s:#FBEFD8;--ddq-red:#8A3A2E;--ddq-red-s:#F6E4E2; font-family:var(--e-sans);color:var(--e-ink)} #view-ddq .num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} #view-ddq .ddq-small{font-family:var(--e-sans);font-size:12px;color:var(--e-ink3);line-height:1.45} #view-ddq .ddq-muted{color:var(--e-ink3)} #view-ddq .ddq-grow{flex:1} #view-ddq .ddq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #view-ddq code{font-size:12px;background:var(--e-inset);padding:1px 5px;border-radius:4px} #view-ddq :focus-visible{outline:2px solid var(--e-accent);outline-offset:2px} /* the switch between the two pages */ #view-ddq .ddq-switch{display:inline-flex;gap:2px;background:var(--e-grey2,#F5F1F0);border:1px solid var(--e-line);border-radius:999px;padding:3px;margin:0 0 16px} #view-ddq .ddq-switch button{font:600 12.5px var(--e-sans);border:0;background:none;color:var(--e-ink3);padding:6px 16px;border-radius:999px;cursor:pointer} #view-ddq .ddq-switch button.on{background:var(--e-navy,#2E1E24);color:#fff} #view-ddq .ddq-back{font:600 12.5px var(--e-sans);color:var(--e-ink2);background:none;border:0;padding:0;margin:0 0 12px;cursor:pointer} #view-ddq .ddq-back:hover{color:var(--e-ink)} /* furniture */ #view-ddq .ddq-card{background:var(--e-card);border:1px solid var(--e-line);border-radius:14px;padding:14px 16px;min-width:0;margin-top:14px} #view-ddq .ddq-card.ddq-plain{background:var(--e-paper)} #view-ddq .ddq-h2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--e-ink);padding-bottom:6px;margin:0 0 10px} #view-ddq .ddq-h2 h2{font-family:var(--e-didone);font-weight:400;font-size:21px;line-height:1.15;margin:0;color:var(--e-ink)} #view-ddq .ddq-h2 .rt{font-size:12px;color:var(--e-ink3)} #view-ddq .ddq-go{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--e-sans);color:var(--e-grad1,#7B3A4E);background:var(--e-paper);border:1px solid var(--e-line);border-radius:999px;padding:6px 12px;white-space:nowrap;cursor:pointer} #view-ddq .ddq-go:hover{border-color:var(--e-grad2,#B87A8C)} #view-ddq .ddq-go.ddq-dk{background:var(--e-ink);color:#fff;border-color:var(--e-ink)} #view-ddq .ddq-go.ddq-dk:hover{background:#3B3135} #view-ddq .ddq-go.ddq-ghost{color:var(--e-ink2);font-weight:500} #view-ddq .ddq-go[disabled]{opacity:.45;cursor:default} #view-ddq .ddq-link{font:600 13px var(--e-sans);color:var(--e-ink);background:none;border:0;padding:0;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--e-line);text-underline-offset:3px} #view-ddq .ddq-link:hover{text-decoration-color:var(--e-accent)} #view-ddq .ddq-chip{display:inline-block;font:600 10.5px var(--e-sans);border-radius:999px;padding:2px 8px;white-space:nowrap;border:0} #view-ddq button.ddq-chip{font-size:12px;padding:5px 12px;cursor:pointer} #view-ddq .ddq-chip.ok{background:var(--ddq-green-s);color:var(--ddq-green)} #view-ddq .ddq-chip.wait{background:var(--ddq-amber-s);color:var(--ddq-amber)} #view-ddq .ddq-chip.no{background:var(--ddq-red-s);color:var(--ddq-red)} #view-ddq .ddq-chip.rose{background:var(--e-accent-soft);color:var(--e-grad1,#7B3A4E)} #view-ddq .ddq-chip.grey{background:var(--e-card2);color:var(--e-ink2)} #view-ddq .ddq-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px} #view-ddq .ddq-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} #view-ddq .ddq-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:18px;align-items:start} #view-ddq .ddq-tw{overflow-x:auto} #view-ddq .ddq-wait{font-family:var(--e-serif);font-size:13px;color:var(--e-ink3);padding:12px 0} #view-ddq .ddq-warn{background:var(--ddq-amber-s);color:#5E3F0B;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;margin:0 0 12px} #view-ddq .ddq-warn b{font-weight:600} #view-ddq .ddq-note{background:var(--e-card);border:1px solid var(--e-line);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--e-ink2);margin:12px 0 0} #view-ddq .ddq-lede{font-family:var(--e-serif);font-size:14px;color:var(--e-ink2);margin:0 0 8px} #view-ddq .ddq-how{margin:0;padding-left:18px;font-family:var(--e-serif);font-size:13px;color:var(--e-ink2);line-height:1.55} #view-ddq .ddq-how li{margin-bottom:5px} #view-ddq .ddq-how b{font-family:var(--e-sans);font-weight:600;color:var(--e-ink)} #view-ddq .ddq-foot{margin-top:8px} /* tables */ #view-ddq table.ddq-table{width:100%;border-collapse:collapse;font-size:13px} #view-ddq .ddq-table th{font:600 10.5px var(--e-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--e-ink)} /* text-align is stated here rather than inherited: the .rk kit sets no alignment for these cells, so this page says what it wants. Left for sentences — a centred question is hard to read. Numbers stay right, and .num has to be re-stated on td, because "#view-ddq .ddq-table td" is more specific than "#view-ddq .num" and would otherwise pull the column back to the left. */ #view-ddq .ddq-table td{padding:9px 10px;border-bottom:1px solid var(--e-line);vertical-align:top;text-align:left} #view-ddq .ddq-table th.num,#view-ddq .ddq-table td.num{text-align:right} #view-ddq .ddq-table .ddq-empty{color:var(--e-ink3);font-family:var(--e-serif);padding:18px 10px} #view-ddq .ddq-late{color:var(--ddq-red);font-weight:600} #view-ddq .ddq-donecell{min-width:130px} #view-ddq .ddq-bar{display:block;height:6px;border-radius:3px;background:var(--e-inset);overflow:hidden;margin:6px 0 3px} #view-ddq .ddq-bar i{display:block;height:100%;background:var(--e-accent)} #view-ddq .ddq-answers .ddq-q{min-width:220px;max-width:340px} #view-ddq .ddq-answers .ddq-q b{font-weight:600} #view-ddq .ddq-answers .ddq-a{min-width:280px;width:40%} #view-ddq .ddq-answers textarea{width:100%;box-sizing:border-box;font:13px/1.5 var(--e-serif);color:var(--e-ink);background:#fff;border:1px solid var(--e-line);border-radius:8px;padding:7px 9px;resize:vertical} #view-ddq .ddq-answers textarea:focus{border-color:var(--e-ink2);outline:none} #view-ddq .ddq-answers tr.nothing textarea{background:var(--e-paper)} #view-ddq .ddq-answers .ddq-chip{margin-top:4px} #view-ddq .ddq-src{font-size:12px;color:var(--e-ink3);min-width:130px;max-width:190px} #view-ddq .ddq-secrow th{font:400 16px var(--e-didone);letter-spacing:0;text-transform:none;color:var(--e-ink);padding:18px 10px 6px;border-bottom:1px solid var(--e-line)} #view-ddq .ddq-checkcell{white-space:nowrap} #view-ddq .ddq-tick{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--e-sans);cursor:pointer} #view-ddq .ddq-tick input{width:16px;height:16px;accent-color:var(--ddq-green)} #view-ddq .ddq-conf{display:inline-flex;gap:2px;vertical-align:middle} #view-ddq .ddq-conf i{width:6px;height:12px;border-radius:2px;background:var(--e-inset)} #view-ddq .ddq-conf i.on{background:var(--ddq-green)} /* tiles */ #view-ddq .ddq-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--e-ink);border-bottom:1px solid var(--e-line);margin-top:14px} #view-ddq .ddq-tiles div{padding:10px 12px;border-left:1px solid var(--e-line)} #view-ddq .ddq-tiles div:first-child{border-left:0} #view-ddq .ddq-tiles span{display:block;font-size:12px;color:var(--e-ink2)} #view-ddq .ddq-big{display:block;font-family:var(--e-didone);font-weight:400;font-size:30px;line-height:1.1} /* the drop zone and the new questionnaire */ #view-ddq .ddq-drop{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;box-sizing:border-box;border:1.5px dashed var(--e-grad2,#B87A8C);border-radius:14px;background:var(--e-accent-soft);padding:22px 18px;text-align:center;font:15px var(--e-serif);color:var(--e-grad1,#7B3A4E);cursor:pointer} #view-ddq .ddq-drop.over{background:#EFD5DF;border-style:solid} #view-ddq .ddq-drop b{font-weight:600} #view-ddq .ddq-drop.is-file{flex-direction:row;flex-wrap:wrap;justify-content:center;cursor:default;padding:12px 16px;font-size:14px} #view-ddq .ddq-found summary{cursor:pointer;font:600 13px var(--e-sans);padding:7px 0;border-bottom:1px solid var(--e-line2)} #view-ddq .ddq-found ol{list-style:none;margin:6px 0 10px;padding-left:4px;font-family:var(--e-serif);font-size:13px;color:var(--e-ink2);line-height:1.5} #view-ddq .ddq-no{font:600 11.5px var(--e-sans);color:var(--e-ink3)} #view-ddq .ddq-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px} #view-ddq .ddq-field{display:flex;flex-direction:column;gap:4px;position:relative;min-width:0} #view-ddq .ddq-form > .ddq-wide{grid-column:1/-1;margin:0} #view-ddq .ddq-field > span:first-child{font:600 10.5px var(--e-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink3)} #view-ddq .ddq-field input,#view-ddq .ddq-field select,#view-ddq .ddq-field textarea{font:13px var(--e-sans);color:var(--e-ink);background:var(--e-paper);border:1px solid var(--e-line);border-radius:8px;padding:7px 9px;min-width:0;box-sizing:border-box;width:100%} #view-ddq .ddq-field textarea{font:13.5px/1.55 var(--e-serif);resize:vertical} #view-ddq .ddq-sugg{display:flex;flex-direction:column;border:1px solid var(--e-line);border-radius:10px;background:#fff;margin-top:4px;overflow:hidden} #view-ddq .ddq-sugg button{display:flex;justify-content:space-between;gap:10px;text-align:left;font:13px var(--e-sans);color:var(--e-ink);background:none;border:0;border-bottom:1px solid var(--e-line2);padding:7px 10px;cursor:pointer} #view-ddq .ddq-sugg button:hover,#view-ddq .ddq-sugg button:focus-visible{background:var(--e-card)} /* rows of questions (Received from managers; the standard DDQ) */ #view-ddq .ddq-qa{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 0;border-bottom:1px solid var(--e-line)} #view-ddq .ddq-qa:last-of-type{border-bottom:0} #view-ddq .ddq-qa h4{margin:0;font:500 15px/1.35 var(--e-serif);color:var(--e-ink)} #view-ddq .ddq-qa p{margin:4px 0 0;font-size:13px;color:var(--e-ink2);line-height:1.5;white-space:pre-line} #view-ddq .ddq-qa-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px} #view-ddq .ddq-qa textarea{width:100%;box-sizing:border-box;margin-top:6px;font:13.5px/1.55 var(--e-serif);border:1px solid var(--e-line);border-radius:8px;padding:8px 10px;background:#fff;resize:vertical} /* The pink rule down the left of a quoted fact is HOUSE STYLE, not a one-off. A review flagged it as a stray flourish; it is the app's standard way of saying "this bit came from somewhere else" — index.html uses the same 3px accent rule in ten places (the pull quote, the AI summary, the call-note card, the honest-answer line) and the same 3px rule in another sixteen with a status colour. Changing it here would make the DDQ the odd page out, so it stays. */ #view-ddq .ddq-fact{margin-top:8px;border-left:3px solid var(--e-accent-soft);padding:4px 0 4px 10px} #view-ddq .ddq-fact p{color:var(--e-ink)} #view-ddq .ddq-fact .ddq-go{margin-top:6px} #view-ddq .ddq-funds{margin:0 0 4px} #view-ddq .ddq-rail{display:flex;flex-direction:column;gap:2px} #view-ddq .ddq-rail button{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;border:0;background:none;font:13px var(--e-sans);color:var(--e-ink);text-align:left;cursor:pointer} #view-ddq .ddq-rail button:hover{background:var(--e-card)} #view-ddq .ddq-rail button.on{background:var(--e-ink);color:#fff} #view-ddq .ddq-rail button.on .ddq-small{color:#D6C6CB} #view-ddq .ddq-actions{padding-top:4px} #view-ddq .ddq-asks{margin-top:14px;border-top:1px solid var(--e-line);padding-top:8px} #view-ddq .ddq-asks h3{font:600 10.5px var(--e-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink3);margin:0 0 4px} #view-ddq .ddq-askrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;font-size:12.5px;color:var(--e-ink2)} #view-ddq .ddq-askcard{border-color:var(--e-ink)} @media (max-width:900px){ #view-ddq .ddq-grid2,#view-ddq .ddq-split{grid-template-columns:minmax(0,1fr)} #view-ddq .ddq-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} #view-ddq .ddq-tiles div:nth-child(odd){border-left:0} #view-ddq .ddq-tiles div:nth-child(n+3){border-top:1px solid var(--e-line)} #view-ddq .ddq-form{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ #view-ddq .ddq-form{grid-template-columns:minmax(0,1fr)} #view-ddq .ddq-qa{grid-template-columns:minmax(0,1fr)} #view-ddq .ddq-qa-r{flex-direction:row;align-items:center;justify-content:flex-start} } /* 🔴 THIS CLOSING BRACE IS LOAD-BEARING. It went missing in the merge that brought the two new pages together (88de755): both branches ended their own section at this seam and the resolution dropped it. Everything after an unclosed @media block is swallowed INTO that block, so both new pages had no styling at all above 520px — the month cards stacked into one column, the out-the-door panes collapsed, the screenshot queue's columns stopped lining up — while a phone-width check looked perfect. A stylesheet fails silently: nothing throws, nothing logs. tests/toolsshell.test.js now counts the braces so it can never happen again. */ /* ── Profiles from screenshots ───────────────────────────────── #view-shots ── */ #view-shots .sh-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start;margin-bottom:14px} #view-shots .sh-drop{border:2px dashed var(--e-line);border-radius:var(--e-r);background:var(--e-grey1,#F3EFEE);padding:38px 24px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:150px;justify-content:center} #view-shots .sh-drop:hover,#view-shots .sh-drop.over{border-color:var(--e-ink);background:#fff} #view-shots .sh-drop.busy{opacity:.55;pointer-events:none} #view-shots .sh-drop b{font-size:15px} #view-shots .sh-meta{font-size:12px;color:var(--e-ink3)} #view-shots .sh-card{background:var(--e-card);border:1px solid var(--e-line);border-radius:var(--e-r);padding:14px 16px} #view-shots .sh-k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--e-ink3);font-weight:600;margin-bottom:5px} #view-shots .sh-soft{font-size:12px;color:var(--e-ink3);font-weight:400;letter-spacing:0;text-transform:none} #view-shots .sh-ta,#view-shots .sh-in{width:100%;font-family:var(--e-sans);font-size:13px;border:1px solid var(--e-line);border-radius:9px;padding:8px 10px;background:#fff;color:var(--e-ink)} #view-shots .sh-ta:focus,#view-shots .sh-in:focus{outline:none;border-color:var(--e-ink)} #view-shots .sh-meter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px;background:var(--e-card);border:1px solid var(--e-line);border-radius:var(--e-r);padding:10px 14px;margin-bottom:12px} #view-shots .sh-meter b{display:block;font-size:14px} #view-shots .sh-meter small{display:block;font-size:11.5px;color:var(--e-ink3)} #view-shots .sh-bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--e-grey2,#EFE9E8);overflow:hidden} #view-shots .sh-bar i{display:block;height:100%;background:var(--e-accent)} #view-shots .sh-bararea{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:12px 0 8px} #view-shots .sh-seg{display:inline-flex;border:1px solid var(--e-ink);border-radius:999px;padding:3px;gap:2px;background:var(--e-paper)} #view-shots .sh-seg button{border:0;background:transparent;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;color:var(--e-ink2);cursor:pointer;font-family:var(--e-sans)} #view-shots .sh-seg button.on{background:var(--e-ink);color:#fff} #view-shots .sh-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center} #view-shots .sh-keep{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--e-ink2)} #view-shots .sh-queue{border-top:1px solid var(--e-ink)} #view-shots .sh-qrow{display:grid;grid-template-columns:34px minmax(0,2.1fr) 74px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.5fr);gap:10px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--e-line)} #view-shots .sh-qrow.hd{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--e-line)} #view-shots .sh-qrow.open{background:var(--e-card)} #view-shots .sh-qrow b{font-size:14px} #view-shots .sh-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:999px;background:var(--e-grey1,#F3EFEE);font-size:11.5px;font-weight:600} #view-shots .sh-dot{display:inline-block;width:9px;height:12px;border:1px solid var(--e-line);background:#fff;border-radius:2px;margin-right:2px} #view-shots .sh-why{font-size:12px;color:var(--e-ink2);font-family:var(--e-serif);margin-top:2px} #view-shots .sh-end{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end} #view-shots .sh-chip{display:inline-block;font-size:10.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap} /* 🔴 A CHIP CARRYING A FIRM'S NAME IS AS WIDE AS THE NAME (18 Sep, measured on the bench). white-space:nowrap on a grid cell does not clip — it runs the chip straight over the next column, and on Ava's own export 25 of 243 rows did: "Department of Public Expenditure Infrastructure Public Service Reform and Digitalisation" overhung its cell by 286px and sat on top of "Where it stands". Clipped to the cell with the whole name still on hover. */ #view-shots .sh-qrow .sh-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom} #view-shots .sh-chip.ok{background:#E2EEE6;color:#33634A} #view-shots .sh-chip.wait{background:#FBEFD8;color:#855710} #view-shots .sh-chip.no{background:#F6E4E2;color:#8A3A2E} #view-shots .sh-chip.info{background:#E6EDF1;color:#3C5566} #view-shots .sh-chip.grey{background:var(--e-grey1,#F3EFEE);color:var(--e-ink2)} #view-shots .sh-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:16px;padding:14px 8px 20px;background:var(--e-card);border-bottom:1px solid var(--e-line)} #view-shots .sh-col{min-width:0} /* The middle column is every field a dossier holds — ninety rows on a person. Without this, the match, the firm and the Save button scroll away at the top and she has to go back up to press it. */ #view-shots .sh-panel>.sh-col:last-child{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow:auto} #view-shots .sh-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px} #view-shots .sh-shot{margin:0;border:1px solid var(--e-line);border-radius:9px;overflow:hidden;background:#fff} #view-shots .sh-shot img{display:block;width:100%;height:78px;object-fit:cover;object-position:top} #view-shots .sh-shot figcaption{font-size:10px;color:var(--e-ink3);padding:3px 5px;display:flex;gap:4px;align-items:center;justify-content:space-between} #view-shots .sh-x{border:0;background:transparent;cursor:pointer;color:var(--e-ink3);font-size:12px} #view-shots .sh-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} #view-shots .sh-grp{font-family:var(--e-didone);font-size:16px;margin:14px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--e-ink)} #view-shots .sh-fr{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.9fr) 92px;gap:8px;align-items:start;padding:7px 4px;border-bottom:1px solid var(--e-line)} #view-shots .sh-fr.none{opacity:.72} #view-shots .sh-fr.asks{background:#FBEFD8} #view-shots .sh-fr>*{min-width:0;overflow-wrap:anywhere} #view-shots .sh-fr.hd{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3);font-weight:600;border-bottom:1px solid var(--e-ink);padding-bottom:5px} #view-shots .sh-fl{font-size:12.5px;font-weight:600;color:var(--e-ink2)} #view-shots .sh-hold{font-size:12.5px;color:var(--e-ink3)} #view-shots .sh-read{font-size:13px} /* A blank field's "fill it in yourself" appears on every field nothing was read for — eighty of them in rose with an underline is a page of noise, so it is quiet until it is wanted. */ /* Same for "change it" and "use what was read", which sit on every field that DID come back — forty rose underlines down the middle column is a page of noise, so they are quiet until wanted. */ #view-shots .sh-fr.none .sh-link,#view-shots .sh-read .sh-link{color:var(--e-ink3);text-decoration:none;font-weight:500} #view-shots .sh-fr.none .sh-link:hover,#view-shots .sh-read .sh-link:hover{color:var(--e-accent);text-decoration:underline} /* The box that opens on a field already holding a value sits above its own "use what was read". */ #view-shots .sh-read .sh-in{margin-bottom:3px} #view-shots .sh-q{font-size:11.5px;color:var(--e-ink2);font-family:var(--e-serif);margin-top:2px} #view-shots .sh-ans{display:flex;gap:6px;margin-top:5px} #view-shots .sh-ans button{border:1px solid var(--e-line);background:#fff;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:var(--e-sans);color:var(--e-ink)} #view-shots .sh-ans button:hover{border-color:var(--e-ink)} #view-shots .sh-left{font-size:12px;color:var(--e-ink3);margin-top:10px} #view-shots .sh-pick{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--e-line);border-radius:10px;background:var(--e-paper);padding:8px 10px;margin-bottom:6px;font-size:13px;cursor:pointer} #view-shots .sh-pick.on{border-color:var(--e-ink);box-shadow:inset 0 0 0 1px var(--e-ink)} #view-shots .sh-rec{border:1px solid var(--e-line);border-radius:10px;background:var(--e-paper);padding:8px 10px;margin-bottom:6px} #view-shots .sh-link{border:0;background:transparent;padding:0;color:var(--e-accent);font-weight:600;font-size:12px;cursor:pointer;text-decoration:underline;font-family:var(--e-sans)} #view-shots .sh-warn{background:#FDF1F5;border:1px solid #F0C9D8;border-radius:10px;padding:8px 10px;font-size:12.5px;margin-top:8px} /* 18 Sep — one picture is not always one person. A question asked in words (a move, a half-matching firm name), what each picture turned out to be, and a row read off a list. */ #view-shots .sh-moved{border:1px solid var(--e-line);border-left:3px solid var(--e-accent);border-radius:10px;background:var(--e-paper);padding:9px 11px;margin-bottom:6px;font-size:13px} #view-shots .sh-screens{margin-top:8px;font-size:11.5px;color:var(--e-ink3);display:grid;gap:2px} #view-shots .sh-screens b{display:inline-block;min-width:14px;color:var(--e-ink2)} #view-shots .sh-thin{border:1px dashed var(--e-line);border-radius:10px;background:var(--e-paper);padding:8px 10px;margin-bottom:8px;font-size:12.5px} #view-shots .sh-qrow.blank b{font-weight:500} #view-shots .sh-gate{display:flex;gap:10px;background:#FBEFD8;color:#5E3F0B;border-radius:10px;padding:10px 12px;font-size:12.5px;margin-top:12px} #view-shots .sh-empty{border:1px solid var(--e-line);border-radius:var(--e-r);background:var(--e-card);padding:26px;text-align:center;font-family:var(--e-serif);color:var(--e-ink2)} /* ── A batch from a colleague ──────────────────────────────────────────────────────────────── Hundreds of pictures at once. The thumbnail wall IS the sorting: every picture is on screen with what it turned out to be, and clicking one ticks it out of the batch. Small tiles on purpose — 254 of them have to fit on one screen for the tally above them to mean anything. */ #view-shots .sh-batch{border:1px solid var(--e-line);border-radius:var(--e-r);background:var(--e-card);padding:14px 16px;margin:12px 0} #view-shots .sh-bhead{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px} #view-shots .sh-bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;margin-bottom:12px} #view-shots .sh-bfield{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--e-ink2)} #view-shots .sh-bfield.wide{grid-column:1/-1} #view-shots .sh-bfield>span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--e-ink3);font-weight:600} #view-shots .sh-bfield input,#view-shots .sh-bfield select{font-family:var(--e-sans);font-size:13px;border:1px solid var(--e-line);border-radius:9px;padding:7px 10px;background:#fff;color:var(--e-ink)} #view-shots .sh-bfield input:focus,#view-shots .sh-bfield select:focus{outline:none;border-color:var(--e-ink)} #view-shots .sh-bfield small{font-size:11.5px;color:var(--e-ink3);line-height:1.35} #view-shots .sh-bprog{display:flex;gap:10px;align-items:center;margin:10px 0} #view-shots .sh-bprog .sh-bar{flex:1;grid-column:auto} #view-shots .sh-btally{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 8px} #view-shots .sh-btally .sh-soft{flex-basis:100%} #view-shots .sh-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:5px;max-height:320px;overflow-y:auto;padding:4px;border:1px solid var(--e-line);border-radius:10px;background:var(--e-grey1,#F3EFEE)} #view-shots .sh-tile{position:relative;border:2px solid transparent;border-radius:6px;padding:0;background:#fff;cursor:pointer;overflow:hidden;aspect-ratio:9/16;display:block} #view-shots .sh-tile img{width:100%;height:100%;object-fit:cover;display:block} #view-shots .sh-tile.off{opacity:.3;border-color:var(--e-line)} #view-shots .sh-tile.read{border-color:var(--e-accent)} #view-shots .sh-tile .sh-tk{position:absolute;top:1px;left:2px;font-size:9px;color:#fff;background:rgba(0,0,0,.55);border-radius:3px;padding:0 3px} #view-shots .sh-tile .sh-tkind{position:absolute;bottom:0;left:0;right:0;font-size:8.5px;color:#fff;background:rgba(0,0,0,.55);text-align:center;overflow:hidden;white-space:nowrap} #view-shots .sh-bacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px} #view-shots .sh-bacts .sh-soft{flex:1;min-width:200px} /* Whose connection they are — in the review panel, under the pictures it was read from. */ #view-shots .sh-net{border-top:1px solid var(--e-line);margin-top:12px;padding-top:10px} #view-shots .sh-nettick{display:flex;gap:7px;align-items:flex-start;font-size:13px;margin-bottom:8px} #view-shots .sh-netrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:6px} #view-shots .sh-netrow label{display:flex;flex-direction:column;gap:3px} #view-shots .sh-netrow span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3);font-weight:600} #view-shots .sh-netrow select,#view-shots .sh-netrow input{font-family:var(--e-sans);font-size:12.5px;border:1px solid var(--e-line);border-radius:8px;padding:5px 8px;background:#fff;color:var(--e-ink)} /* ── From a LinkedIn export ────────────────────────────────────────────────────────────────── The same queue as the screenshots; this is only the screen where a file becomes rows. It sits above the drop zone while a file is open and disappears the moment its people are in the queue. */ #view-shots .sh-liline{margin:10px 0 0;font-size:13px;color:var(--e-ink2)} #view-shots .sh-liline .sh-soft{display:block;margin-top:4px} #view-shots .sh-li{border:1px solid var(--e-line);border-radius:var(--e-r);background:var(--e-card);padding:14px 16px;margin-bottom:14px} #view-shots .sh-lihead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:10px} #view-shots .sh-lifile{font-family:var(--e-serif);font-size:16px;line-height:1.25;word-break:break-word} #view-shots .sh-listats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0} #view-shots .sh-listat{border:1px solid var(--e-line);border-radius:10px;background:var(--e-paper);padding:8px 10px} #view-shots .sh-listat b{display:block;font-size:19px;font-family:var(--e-serif);line-height:1.15} #view-shots .sh-listat span{font-size:11.5px;color:var(--e-ink3)} #view-shots .sh-liwhat{border:1px dashed var(--e-line);border-radius:10px;background:var(--e-paper);padding:9px 11px;font-size:12.5px;margin:10px 0} #view-shots .sh-lirow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--e-line)} #view-shots .sh-lirow>.sh-k{margin-bottom:0;min-width:160px} #view-shots .sh-lirow .sh-in{width:auto;min-width:180px} #view-shots .sh-lirow .sh-soft{flex:1 1 220px} #view-shots .sh-ligo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--e-line);padding-top:12px;margin-top:4px} #view-shots .sh-ligo .sh-soft{flex:1 1 260px} #view-shots .sh-lilist{margin-top:10px;font-size:12.5px} #view-shots .sh-lilist summary{cursor:pointer;color:var(--e-ink2)} #view-shots .sh-liwrap{overflow-x:auto;margin-top:8px} #view-shots .sh-litable{border-collapse:collapse;width:100%;font-size:12px} #view-shots .sh-litable th{text-align:left;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--e-ink3);padding:4px 10px 4px 0;border-bottom:1px solid var(--e-line)} #view-shots .sh-litable td{padding:5px 10px 5px 0;border-bottom:1px solid var(--e-line);vertical-align:top} #view-shots .sh-lifrom{border:1px dashed var(--e-line);border-radius:10px;background:var(--e-paper);padding:8px 10px;font-size:12.5px;margin-bottom:8px} /* 🔴 NARROWING A GRID BY NAMING FEWER COLUMNS DOES NOT DROP THE EXTRA CELLS — they wrap onto a new row in the FIRST track, which at 430px was 24px wide, so "We hold" printed one letter per line and the row's buttons hung off the left edge. Below these widths the rows stop being grids altogether. */ @media (max-width:1100px){ #view-shots .sh-top,#view-shots .sh-panel{grid-template-columns:minmax(0,1fr)} #view-shots .sh-panel>.sh-col:last-child{position:static;max-height:none;overflow:visible} } @media (max-width:820px){ #view-shots .sh-meter{grid-template-columns:minmax(0,1fr)} #view-shots .sh-qrow{display:block;padding:12px 6px} #view-shots .sh-qrow.hd,#view-shots .sh-fr.hd{display:none} #view-shots .sh-qrow>*{margin-top:5px} #view-shots .sh-qrow>*:first-child{margin-top:0} #view-shots .sh-end{justify-content:flex-start} #view-shots .sh-fr{display:block;padding:11px 4px} #view-shots .sh-fr>span:first-child{float:right;margin-left:8px} #view-shots .sh-fl{margin-bottom:3px} #view-shots .sh-hold:not(:empty)::before{content:'We hold · ';font-weight:600;color:var(--e-ink2)} #view-shots .sh-read{margin-top:4px} #view-shots .sh-bararea{align-items:flex-start} } /* ── Marketing — Ideas · Plan · Make · Out the door · Results ─── #view-marketing ── */ /* The page's own furniture only. The five tab buttons reuse the .rk-roles segmented control that every other page's tabs use, and the blog formatter keeps the .bf-* styles it already had. */ #view-marketing .mk-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 18px} #view-marketing .mk-live{font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink3)} #view-marketing .mk-live.bad{color:var(--e-red);font-weight:600} #view-marketing .mk-card{background:#fff;border:1px solid var(--e-line);border-radius:14px;padding:18px 20px} #view-marketing .mk-h2{font-family:var(--e-sans);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--e-ink3);margin:0 0 14px;display:flex;align-items:center;gap:12px} #view-marketing .mk-h2 .rule{flex:1;height:1px;background:var(--e-line)} #view-marketing .mk-h2 .rt{margin-left:auto;font-weight:600;letter-spacing:0;text-transform:none;font-size:12px;color:var(--e-ink3)} #view-marketing .mk-h3{font-family:var(--e-sans);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--e-ink3);margin:20px 0 10px} #view-marketing .mk-k{font-family:var(--e-sans);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3)} #view-marketing .mk-s{font-family:var(--e-sans);font-size:11.5px;line-height:1.5;color:var(--e-ink3)} #view-marketing .mk-s.bad{color:var(--e-red)} #view-marketing .mk-t{font-family:var(--e-serif);font-size:14.5px;line-height:1.35;color:var(--e-ink)} #view-marketing .mk-t a{color:inherit;text-decoration:none} #view-marketing .mk-t a:hover{text-decoration:underline} #view-marketing .mk-why{font-family:var(--e-serif);font-style:italic;font-size:13px;line-height:1.5;color:var(--e-ink2);margin-top:4px} #view-marketing .mk-empty{font-family:var(--e-sans);font-size:12.5px;line-height:1.6;color:var(--e-ink3);padding:12px 0} #view-marketing .mk-empty.bad{color:var(--e-red)} #view-marketing .mk-note{font-family:var(--e-sans);font-size:11.5px;line-height:1.6;color:var(--e-ink3);background:var(--e-grey1);border:1px solid var(--e-line);border-radius:10px;padding:10px 13px;margin-top:14px} #view-marketing .mk-warn{font-family:var(--e-sans);font-size:11.5px;line-height:1.55;color:var(--e-red);background:var(--e-red-soft);border-radius:9px;padding:8px 11px;margin-top:8px} #view-marketing .mk-link{background:none;border:0;padding:0;font-family:var(--e-sans);font-size:11.5px;color:var(--e-accent);cursor:pointer;text-decoration:underline} #view-marketing .e-btn[disabled]{opacity:.45;cursor:not-allowed} #view-marketing .e-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed} /* chips: one shape for every "how late", "how old", "what stage" mark on the page */ #view-marketing .mk-chip{display:inline-block;font-family:var(--e-sans);font-size:10px;font-weight:600;letter-spacing:.02em;border-radius:20px;padding:2px 9px;margin-right:6px;background:var(--e-grey2);color:var(--e-ink2)} #view-marketing .mk-chip.ok{background:var(--e-accent-soft);color:var(--e-accent)} #view-marketing .mk-chip.warn{background:var(--e-amber-soft);color:var(--e-amber)} #view-marketing .mk-chip.bad{background:var(--e-red-soft);color:var(--e-red)} #view-marketing .mk-chip.info{background:var(--e-grey2);color:var(--e-ink2)} /* the small segmented controls inside a tab (Movements / All themes, issue / formatter) */ #view-marketing .mk-seg{display:inline-flex;gap:2px;background:var(--e-grey1);border:1px solid var(--e-line);border-radius:10px;padding:3px;margin-bottom:16px;flex-wrap:wrap} #view-marketing .mk-seg.sm{margin-bottom:10px} #view-marketing .mk-seg-b{background:none;border:0;border-radius:8px;font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink3);padding:5px 11px;cursor:pointer} #view-marketing .mk-seg-b:hover{color:var(--e-ink)} #view-marketing .mk-seg-b.on{background:#fff;color:var(--e-ink);box-shadow:0 1px 2px rgba(0,0,0,.06)} #view-marketing .mk-seg-b .n{color:var(--e-ink3);font-size:10.5px} #view-marketing .mk-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start} @media(max-width:1000px){#view-marketing .mk-two{grid-template-columns:minmax(0,1fr)}} /* a row in a list — an idea, a late piece, a material */ #view-marketing .mk-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--e-line2);flex-wrap:wrap} #view-marketing .mk-row:first-of-type{border-top:0} #view-marketing .mk-row.done{opacity:.62} #view-marketing .mk-row-b{flex:1 1 200px;min-width:0} #view-marketing .mk-row-a{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto;flex-wrap:wrap;justify-content:flex-end} #view-marketing .mk-done{font-family:var(--e-sans);font-size:11px;color:var(--e-ink3)} #view-marketing .mk-x{background:none;border:0;color:var(--e-ink3);font-size:12px;cursor:pointer;padding:2px 5px;font-family:var(--e-sans)} #view-marketing .mk-x:hover{color:var(--e-red)} #view-marketing .mk-x[disabled]{opacity:.3;cursor:default} /* the wire */ #view-marketing .mk-wire{display:flex;align-items:baseline;gap:10px;padding:7px 0;flex-wrap:wrap} #view-marketing .mk-wire .mk-t{flex:1;min-width:0;cursor:pointer} #view-marketing .mk-arts{padding:2px 0 10px} #view-marketing .mk-art{display:flex;align-items:baseline;gap:9px;padding:5px 0} #view-marketing .mk-art a{font-family:var(--e-serif);font-size:13px;color:var(--e-ink);text-decoration:none;flex:1;min-width:0} #view-marketing .mk-art a:hover{text-decoration:underline} /* the months */ #view-marketing .mk-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px} #view-marketing .mk-keys{display:flex;gap:14px;flex-wrap:wrap} #view-marketing .mk-key{font-family:var(--e-sans);font-size:11px;color:var(--e-ink3);display:inline-flex;align-items:center;gap:6px} #view-marketing .mk-key i{width:8px;height:8px;border-radius:50%;display:inline-block} #view-marketing .mk-navs{margin-left:auto;display:flex;gap:6px} #view-marketing .mk-months{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start} @media(max-width:1100px){#view-marketing .mk-months{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){#view-marketing .mk-months{grid-template-columns:minmax(0,1fr)}} #view-marketing .mk-month{background:#fff;border:1px solid var(--e-line);border-radius:14px;padding:14px 15px} #view-marketing .mk-month.now{border-color:var(--e-accent)} #view-marketing .mk-month h4{font-family:var(--e-didone);font-weight:400;font-size:21px;color:var(--e-ink);margin:2px 0 0} #view-marketing .mk-month>.mk-s{margin-bottom:8px} /* one entry on a month, or one line of a checklist: a dot, then two lines of words. Two lines rather than one because a month card is narrow, and a title cut to "Articles" says nothing. */ #view-marketing .mk-slot{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-top:1px solid var(--e-line2)} #view-marketing .mk-slot.open{border-bottom:0} #view-marketing .mk-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;margin-top:5px} #view-marketing .mk-slot-b{flex:1;min-width:0;cursor:pointer} #view-marketing .mk-slot-t{font-family:var(--e-sans);font-size:12.5px;line-height:1.4;color:var(--e-ink)} #view-marketing .mk-slot-t.quiet{color:var(--e-ink3)} #view-marketing .mk-slot-m{font-family:var(--e-sans);font-size:11px;line-height:1.5;color:var(--e-ink3);margin-top:2px} #view-marketing .mk-slot-m.bad{color:var(--e-red)} #view-marketing .mk-slot-m .mk-chip{margin:0 0 0 4px} #view-marketing .mk-tickbox{flex:none;width:16px;height:16px;border-radius:50%;background:var(--e-grey2);color:var(--e-ink3);font-size:10px;line-height:16px;text-align:center;margin-top:2px} #view-marketing .mk-slot .mk-slot-t:not(.quiet){color:var(--e-ink)} #view-marketing .mk-slot .mk-slot-t:not(.quiet)+.mk-slot-m{color:var(--e-ink3)} /* the one-line "put something on this month" button that ends every slot */ #view-marketing .mk-add{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--e-line2);padding:8px 0;font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink3);cursor:pointer} #view-marketing .mk-add:hover{color:var(--e-accent)} #view-marketing .mk-add i{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;opacity:.5} /* the editor that opens under a piece */ #view-marketing .mk-edit{background:var(--e-grey1);border:1px solid var(--e-line);border-radius:11px;padding:12px 13px;margin:2px 0 8px} #view-marketing .mk-open{border-color:var(--e-accent)} #view-marketing .mk-slot.open{background:var(--e-accent-soft);border-radius:8px;padding-left:8px;padding-right:8px} #view-marketing .mk-f{display:block;margin-bottom:9px} #view-marketing .mk-f>span{display:block;font-family:var(--e-sans);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink3);margin-bottom:4px} #view-marketing .mk-f2{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px} #view-marketing .mk-in{width:100%;font-family:var(--e-sans);font-size:12.5px;color:var(--e-ink);background:#fff;border:1px solid var(--e-line);border-radius:8px;padding:6px 9px;outline:none} #view-marketing .mk-in:focus{border-color:var(--e-accent)} /* An issue that has gone out is read-only. A box that still LOOKS like a box you can type in, and then refuses, is worse than one that plainly says it is closed — so a shut field reads as paper. */ #view-marketing .mk-in:disabled{background:var(--e-paper);color:var(--e-ink3);border-color:var(--e-line2);cursor:default} #view-marketing .mk-tick input:disabled + span{opacity:.5} #view-marketing .mk-in.tall{font-family:var(--e-serif);font-size:13.5px;line-height:1.6;margin-top:8px;resize:vertical} #view-marketing .mk-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px} /* the composer */ #view-marketing .mk-make{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start} @media(max-width:1100px){#view-marketing .mk-make{grid-template-columns:minmax(0,1fr)}} #view-marketing .mk-side{display:flex;flex-direction:column;gap:18px} #view-marketing .mk-block{border:1px solid var(--e-line);border-radius:11px;padding:11px 13px;margin-bottom:10px;background:var(--e-grey1)} #view-marketing .mk-bh{display:flex;align-items:center;gap:8px;margin-bottom:3px} #view-marketing .mk-bh b{font-family:var(--e-serif);font-weight:400;font-size:15px;color:var(--e-ink);flex:1;min-width:0} #view-marketing .mk-bh-a{display:flex;gap:2px;flex:none} #view-marketing .mk-ticks{display:flex;flex-direction:column;gap:4px;margin-top:8px} #view-marketing .mk-tick{display:flex;align-items:center;gap:7px;font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink2)} #view-marketing .mk-src{display:flex;flex-direction:column;gap:3px;margin-top:8px} #view-marketing .mk-sign{border-top:1px solid var(--e-line2);margin-top:12px;padding-top:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start} #view-marketing .mk-hand{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px} #view-marketing .mk-pill{font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink);background:#fff;border:1px solid var(--e-line);border-radius:20px;padding:5px 12px;cursor:pointer;display:inline-flex;gap:7px;align-items:center} #view-marketing .mk-pill.on{border-color:var(--e-accent);background:var(--e-accent-soft)} #view-marketing .mk-pill span{color:var(--e-ink3);font-size:10.5px} /* how the issue arrives */ #view-marketing .mk-mail{border:1px solid var(--e-line);border-radius:11px;overflow:hidden;background:#fff} #view-marketing .mk-mh{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;padding:11px 13px;background:var(--e-grey2);font-family:var(--e-sans);font-size:11px;color:var(--e-ink3)} #view-marketing .mk-mh b{color:var(--e-ink);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis} #view-marketing .mk-mb{padding:14px 16px} #view-marketing .mk-pk{font-family:var(--e-sans);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3);margin:14px 0 4px} #view-marketing .mk-pk:first-child{margin-top:0} #view-marketing .mk-ph{font-family:var(--e-didone);font-weight:400;font-size:18px;color:var(--e-ink);margin-bottom:3px} #view-marketing .mk-pv{font-family:var(--e-serif);font-size:13px;line-height:1.6;color:var(--e-ink2);white-space:pre-wrap} #view-marketing .mk-pv.quiet{color:var(--e-ink3);font-style:italic} #view-marketing .mk-pf{border-top:1px solid var(--e-line2);margin-top:16px;padding-top:10px;font-family:var(--e-sans);font-size:10.5px;line-height:1.5;color:var(--e-ink3)} /* ── Out the door: who gets it on the left, what has to be true on the right ─────────────────── */ #view-marketing .mk-out{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start} #view-marketing .mk-out > div > .mk-card + .mk-card{margin-top:18px} @media(max-width:1100px){#view-marketing .mk-out{grid-template-columns:minmax(0,1fr)}} /* a group, with how many of it can actually be written to. The count is part of the button on purpose: choosing an audience by name alone is how somebody sends to 3,436 people by accident. */ #view-marketing .mk-segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:9px} #view-marketing .mk-seg-c{display:flex;align-items:baseline;justify-content:space-between;gap:10px; font-family:var(--e-sans);font-size:12px;color:var(--e-ink);background:#fff;border:1px solid var(--e-line); border-radius:10px;padding:9px 12px;cursor:pointer;text-align:left;width:100%} #view-marketing .mk-seg-c:hover{border-color:var(--e-line2)} #view-marketing .mk-seg-c.on{border-color:var(--e-accent);background:var(--e-accent-soft)} #view-marketing .mk-seg-c .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #view-marketing .mk-seg-c .n{flex:none;font-size:11.5px;font-weight:600;color:var(--e-ink3);font-variant-numeric:tabular-nums} #view-marketing .mk-seg-c.on .n{color:var(--e-accent)} #view-marketing .mk-seg-c[disabled]{opacity:.5;cursor:not-allowed} #view-marketing .mk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} /* the send, while it is running. The bar SLIDES to its new length on purpose — a review flagged the width transition as one. The send moves in slices of 300, so without it the bar would jump in visible steps and read as a glitch rather than as progress. Four other bars in the app already animate width exactly this way (the project bar, the overnight-run bar, the usage track and the import bar), same accent fill, same .18–.3s. Keeping it is what makes this bar look like the rest of the Platform. */ #view-marketing .mk-bar-run{height:6px;border-radius:4px;background:var(--e-grey2);overflow:hidden;margin-top:9px} #view-marketing .mk-bar-run i{display:block;height:100%;background:var(--e-accent);transition:width .3s ease} /* ── Results: one tile per number, and the estimate marked as one ────────────────────────────── */ #view-marketing .mk-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px} #view-marketing .mk-tile{border:1px solid var(--e-line);border-radius:11px;padding:12px 13px;background:var(--e-grey1)} #view-marketing .mk-tile-n{font-family:var(--e-didone);font-weight:400;font-size:26px;line-height:1.1;color:var(--e-ink); font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:7px} #view-marketing .mk-tile-n span{font-family:var(--e-sans);font-size:11.5px;font-weight:600;color:var(--e-ink3)} #view-marketing .mk-tile-k{font-family:var(--e-sans);font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--e-ink2);margin:7px 0 3px} #view-marketing .mk-tile-s{font-family:var(--e-sans);font-size:10.5px;line-height:1.45;color:var(--e-ink3)} /* ── What has gone out (Out the door) and what each piece did (Results) — 22 Sep 2026 ──────────── */ #view-marketing .mk-stack>*+*{margin-top:18px} #view-marketing .mk-card.mk-gap{margin-top:18px} #view-marketing .mk-h3.mk-first{margin-top:0} #view-marketing .mk-gone .mk-dot,#view-marketing .mk-res-h .mk-dot{margin-top:7px} #view-marketing .mk-gone .mk-s+.mk-s{margin-top:2px} #view-marketing .mk-h2+.mk-gone,#view-marketing .mk-h3+.mk-gone{border-top:0;padding-top:4px} #view-marketing .mk-due-note{margin:-4px 0 2px} #view-marketing .mk-due-note+.mk-gone{border-top:0;padding-top:4px} #view-marketing .mk-warn+.mk-h3{margin-top:14px} #view-marketing .mk-url{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top; font-family:var(--e-sans);font-size:11.5px;line-height:1.5;color:var(--e-accent);text-decoration:none;margin-top:1px} #view-marketing .mk-url:hover{text-decoration:underline} #view-marketing .mk-url:focus-visible,#view-marketing .mk-link:focus-visible,#view-marketing .mk-steps summary:focus-visible{outline:2px solid var(--e-accent);outline-offset:2px;border-radius:3px} /* one piece, then one cell per thing that could be counted about it. A cell with a real figure is a filled tile like the newsletter's; a cell with no figure is the same tile with a dashed edge and its answer in words — so "not counted" can never be mistaken for a number, even at a glance. */ #view-marketing .mk-res{padding:14px 0;border-top:1px solid var(--e-line2)} #view-marketing .mk-h2+.mk-res{border-top:0;padding-top:0} #view-marketing .mk-res-h{display:flex;align-items:flex-start;gap:10px} #view-marketing .mk-ms{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:12px 0 0 17px} @media(max-width:620px){#view-marketing .mk-ms{margin-left:0}} #view-marketing .mk-m{border:1px solid var(--e-line);border-radius:11px;padding:11px 13px;background:var(--e-grey1)} #view-marketing .mk-m.off{background:transparent;border-style:dashed} #view-marketing .mk-m-k{font-family:var(--e-sans);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--e-ink3)} #view-marketing .mk-m-v{font-family:var(--e-serif);font-size:14px;line-height:1.35;color:var(--e-ink2);margin:6px 0 4px} #view-marketing .mk-m-v b{font-family:var(--e-didone);font-weight:400;font-size:24px;line-height:1.1;color:var(--e-ink);font-variant-numeric:tabular-nums} #view-marketing .mk-m-v.off{font-style:italic;color:var(--e-ink2)} #view-marketing .mk-m-s{font-family:var(--e-sans);font-size:10.5px;line-height:1.5;color:var(--e-ink3)} /* ══ RESULTS, AS AVA APPROVED IT (28 Sep 2026) ══════════════════════════════════════════════════════ The approved mock-up (scratchpad/results-mockup), drawn with the Platform's own tokens. Everything is scoped to .mk-res-page — the Results tab only — so nothing else on the Platform changes. ⭐ BIG FIGURES ARE LORA HERE, NOT PRATA. Prata's 1 reads as a lower-case l ("l visit"), and Results is the one page made of figures. Every other page keeps its Prata figures. The Platform has one theme (light, since 27 Jul 2026), so these read the same --e-* tokens as the rest of the page; the two chart colours are named once here, beside them. */ #view-marketing .mk-res-page{--mk-s1:var(--e-accent);--mk-s2:#2F63A8;--mk-rest:#CFC6CA;--mk-grid:var(--e-grey3);--mk-surface:#fff} #view-marketing .mk-res-page [hidden]{display:none!important} #view-marketing .mk-res-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px} #view-marketing .mk-res-bar .mk-seg{margin:0 0 0 auto} @media(max-width:620px){#view-marketing .mk-res-bar .mk-seg{margin-left:0}} #view-marketing .mk-res-page .mk-live.say{color:var(--e-accent);font-weight:600} #view-marketing .mk-res-page .mk-h2{flex-wrap:wrap} #view-marketing .mk-res-page .mk-h2 .rule{min-width:24px} #view-marketing .mk-res-page .mk-h3{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap} #view-marketing .mk-res-page .mk-h3 .rt{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none;font-size:11.5px} #view-marketing .mk-res-page .mk-empty{padding:4px 0} #view-marketing .mk-res-page .mk-note{margin-top:0} #view-marketing .mk-res-page :focus-visible{outline:2px solid var(--e-accent);outline-offset:2px;border-radius:4px} @media(max-width:620px){#view-marketing .mk-res-page .mk-card{padding:16px 14px}} /* Lora figures, Results only */ #view-marketing .mk-res-page .mk-tile-n, #view-marketing .mk-res-page .mk-m-v b{font-family:var(--e-serif);font-weight:500;font-variant-numeric:lining-nums tabular-nums} #view-marketing .mk-res-page .mk-ms{margin:10px 0 0} #view-marketing .mk-res-page .mk-tile-n.off{font-family:var(--e-serif);font-style:italic;font-size:15px;color:var(--e-ink2);padding-top:8px} /* the charts: hand-drawn SVG, one tooltip for the page */ #view-marketing .mk-chart{position:relative;width:100%;min-height:40px} #view-marketing .mk-g-chart{margin-top:16px} #view-marketing .mk-chart svg{display:block;overflow:visible;touch-action:pan-y} #view-marketing .mk-chart .ax{font:500 10.5px var(--e-sans);fill:var(--e-ink3)} #view-marketing .mk-chart .pl{font:600 11.5px var(--e-sans);fill:var(--e-ink2)} #view-marketing .mk-chart .vl{font:600 11px var(--e-sans);fill:var(--e-ink)} #view-marketing .mk-chart .grid{stroke:var(--mk-grid);stroke-width:1} #view-marketing .mk-chart .base{stroke:var(--e-line);stroke-width:1} #view-marketing .mk-chart .xh{stroke:var(--e-ink3);stroke-width:1} #view-marketing .mk-chart .band{fill:var(--e-grey2)} #view-marketing .mk-chart .bandl{font:italic 10.5px var(--e-serif);fill:var(--e-ink3)} #view-marketing .mk-chart svg:focus-visible{outline:2px solid var(--e-accent);outline-offset:4px} #view-marketing .mk-chart-keys{margin-top:8px} #view-marketing .mk-key i.hol{width:8px;height:8px;border-radius:50%;border:1.6px solid var(--e-ink3);background:transparent;box-sizing:border-box} #view-marketing .mk-tip{position:fixed;z-index:60;pointer-events:none;background:var(--e-ink);color:#F5EEF1;font:12px/1.45 var(--e-sans); border-radius:8px;padding:7px 10px;max-width:260px;box-shadow:0 4px 14px rgba(20,10,14,.18)} #view-marketing .mk-tip[hidden]{display:none!important} #view-marketing .mk-tip b{font-weight:600} #view-marketing .mk-tip small{color:#C9BBC1;font-size:11px} #view-marketing details.mk-figs summary{cursor:pointer;font:11.5px var(--e-sans);color:var(--e-accent);width:max-content;margin-top:10px} #view-marketing .mk-tbl-wrap{overflow-x:auto;margin-top:8px} #view-marketing table.mk-tbl{border-collapse:collapse;font:11.5px var(--e-sans);color:var(--e-ink2);font-variant-numeric:tabular-nums;min-width:320px} #view-marketing table.mk-tbl th,#view-marketing table.mk-tbl td{padding:4px 14px 4px 0;text-align:right;border-bottom:1px solid var(--e-line2);white-space:nowrap} #view-marketing table.mk-tbl th:first-child,#view-marketing table.mk-tbl td:first-child{text-align:left} #view-marketing table.mk-tbl th{font-weight:600;color:var(--e-ink3)} /* How people find Seeker on Google: the two lists side by side */ #view-marketing .mk-g2{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:30px;margin-top:24px;align-items:start} @media(max-width:960px){#view-marketing .mk-g2{grid-template-columns:minmax(0,1fr);gap:24px}} #view-marketing .mk-sub-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;min-height:34px} #view-marketing .mk-sub-h .mk-seg{margin:0 0 0 auto} #view-marketing .mk-sub-h.mk-gap{margin-top:26px} #view-marketing .mk-sub-h.mk-tight{margin-bottom:4px;min-height:0} #view-marketing .mk-foot{margin-top:10px} /* ranked lists with a slim bar */ #view-marketing .mk-bars{display:flex;flex-direction:column} #view-marketing .mk-br{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr) 9rem;gap:12px;align-items:center;padding:6px 0;border-top:1px solid var(--e-line2);cursor:default} #view-marketing .mk-br:first-child{border-top:0} #view-marketing .mk-br-l{font:13.5px/1.35 var(--e-serif);color:var(--e-ink);overflow-wrap:anywhere} #view-marketing .mk-br-bar{height:8px;position:relative} #view-marketing .mk-br-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;min-width:2px} #view-marketing .mk-br-v{font:500 11.5px var(--e-sans);color:var(--e-ink3);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} #view-marketing .mk-br-v b{color:var(--e-ink);font-weight:600} #view-marketing .mk-br.rest .mk-br-l{color:var(--e-ink3);font-style:italic} #view-marketing .mk-br:hover .mk-br-l{color:var(--e-accent)} #view-marketing .mk-bars.tight .mk-br{grid-template-columns:minmax(0,9rem) minmax(0,1fr) 3.2rem} @media(max-width:560px){ #view-marketing .mk-br,#view-marketing .mk-bars.tight .mk-br{grid-template-columns:minmax(0,1fr) auto;row-gap:5px} #view-marketing .mk-br-bar{grid-column:1/-1;order:3} #view-marketing .mk-br-bar:empty{display:none} #view-marketing .mk-sub-h .mk-seg{margin-left:0;width:100%} } /* one story: a blog piece and its LinkedIn twin on one card */ #view-marketing .mk-story{padding:16px 0 20px;border-top:1px solid var(--e-line2)} #view-marketing .mk-res-page .mk-h2+.mk-story,#view-marketing .mk-res-page .mk-warn+.mk-story{border-top:0;padding-top:0} #view-marketing .mk-st-h{display:flex;align-items:flex-start;gap:10px} #view-marketing .mk-st-h .mk-dot{margin-top:8px} #view-marketing .mk-st-t{flex:1;min-width:0} #view-marketing .mk-st-t .mk-t{font-size:17px} #view-marketing .mk-st-t .mk-url{display:block} #view-marketing .mk-tog{flex:none;background:var(--e-paper);border:1px solid var(--e-line);border-radius:999px;font:600 12px var(--e-sans);color:var(--e-accent);padding:4px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px} #view-marketing .mk-tog svg{transition:transform .18s ease} #view-marketing .mk-tog[aria-expanded="false"] svg{transform:rotate(-90deg)} #view-marketing .mk-st-sum{font:16px/1.55 var(--e-serif);color:var(--e-ink);margin:10px 0 0 17px;max-width:74ch;text-wrap:pretty} #view-marketing .mk-st-body{margin:14px 0 0 17px} @media(max-width:620px){#view-marketing .mk-st-sum,#view-marketing .mk-st-body{margin-left:0}} #view-marketing .mk-st-charts{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);gap:0 28px} @media(max-width:1100px){#view-marketing .mk-st-charts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#view-marketing .mk-st-charts>.mk-pn-c:first-child{grid-column:1/-1}} @media(max-width:640px){#view-marketing .mk-st-charts{grid-template-columns:minmax(0,1fr)}} #view-marketing .mk-pn{border:1px solid var(--e-line);border-radius:11px;padding:11px 13px;background:var(--e-grey1);--mk-surface:var(--e-grey1);min-width:0} #view-marketing .mk-pn.off{background:transparent;border-style:dashed;--mk-surface:#fff} #view-marketing .mk-pn.mk-wide{margin-top:10px} #view-marketing .mk-pn-c{padding:14px 0 18px;border-top:1px solid var(--e-line2);min-width:0} #view-marketing .mk-pn-t{font:500 14px/1.35 var(--e-serif);color:var(--e-ink2)} #view-marketing .mk-pn-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px} #view-marketing .mk-pn-h .mk-end{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap} @media(max-width:560px){#view-marketing .mk-pn-h .mk-end{margin-left:0}} #view-marketing .mk-wk-one{font:14px/1.5 var(--e-serif);color:var(--e-ink);margin:4px 0 2px} #view-marketing .mk-wk-now{margin-top:6px} #view-marketing .mk-pending{font:11.5px/1.5 var(--e-sans);color:var(--e-ink3);margin:10px 0 0} #view-marketing .mk-pill-s{background:var(--e-paper);border:1px solid var(--e-line);border-radius:999px;font:600 12px var(--e-sans);color:var(--e-accent);padding:4px 11px;cursor:pointer} #view-marketing .mk-pill-s:hover{border-color:var(--e-ink3)} /* On LinkedIn */ #view-marketing .mk-li-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px 16px;margin:4px 0 2px} #view-marketing .mk-li-k{font:11.5px/1.4 var(--e-sans);color:var(--e-ink3)} #view-marketing .mk-li-f .d{font:10.5px var(--e-sans);color:var(--e-ink3)} #view-marketing .mk-li-f .v{font-family:var(--e-serif);font-weight:500;font-size:22px;line-height:1.15;color:var(--e-ink);font-variant-numeric:lining-nums tabular-nums;margin-top:3px} #view-marketing .mk-li-f .v.off{font:italic 13px/1.5 var(--e-serif);color:var(--e-ink3);margin-top:5px} #view-marketing .mk-li-newest{margin-top:6px} #view-marketing .mk-li-stale{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px} #view-marketing .mk-li-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:14px;padding-top:12px;border-top:1px solid var(--e-line)} @media(max-width:760px){#view-marketing .mk-li-grid{grid-template-columns:minmax(0,1fr)}} #view-marketing .mk-pn-t.mk-gap{margin-top:16px} #view-marketing .mk-rates{display:flex;flex-direction:column;gap:8px;margin-top:8px} #view-marketing .mk-rate{display:block;font:13px/1.45 var(--e-serif);color:var(--e-ink2)} #view-marketing .mk-rate b{margin-right:6px;font-family:var(--e-serif);font-weight:500;font-size:19px;color:var(--e-ink);font-variant-numeric:lining-nums tabular-nums} #view-marketing .mk-rate .off{font-style:italic;color:var(--e-ink3)} #view-marketing .mk-wo{font:italic 11px var(--e-serif);color:var(--e-ink3)} #view-marketing .mk-rds{margin-top:4px} #view-marketing .mk-rd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--e-line2);font:11.5px/1.5 var(--e-sans);color:var(--e-ink2)} #view-marketing .mk-rd:first-child{border-top:0} #view-marketing .mk-rd b{color:var(--e-ink);font-weight:600} #view-marketing .mk-rd .by{color:var(--e-ink3)} #view-marketing .mk-rd .mk-rm{margin-left:auto;text-decoration:underline;font-size:11px} #view-marketing .mk-li-form{background:#fff;border:1px solid var(--e-accent);border-radius:11px;padding:13px 14px;margin-top:12px} #view-marketing .mk-li-form .mk-f{margin-bottom:0} #view-marketing .mk-li-form .mk-f2{align-items:end} #view-marketing .mk-li-form .mk-in{font-variant-numeric:tabular-nums} #view-marketing .mk-li-form .mk-in.bad{border-color:var(--e-red);background:var(--e-red-soft)} #view-marketing .mk-li-morebtn{margin-top:10px} #view-marketing .mk-li-more{margin-top:10px} #view-marketing .mk-li-err{font:11.5px/1.5 var(--e-sans);color:var(--e-red);margin-top:8px} #view-marketing .mk-li-err:empty{display:none} #view-marketing .mk-li-ok{font:11.5px/1.5 var(--e-sans);color:var(--e-accent);font-weight:600} /* Who read it */ #view-marketing .mk-who-sum{font:12px/1.5 var(--e-sans);color:var(--e-ink2);padding-bottom:6px} #view-marketing .mk-pn .mk-m-v.mk-first{margin-top:2px} #view-marketing .mk-wr{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--e-line2);flex-wrap:wrap} #view-marketing .mk-wr-b{flex:1 1 220px;min-width:0} #view-marketing .mk-wr-n{font:14px/1.35 var(--e-serif);color:var(--e-ink)} #view-marketing .mk-wr-n span{font:12px var(--e-sans);color:var(--e-ink3)} @media (prefers-reduced-motion: reduce){#view-marketing .mk-tog svg{transition:none}} /* switching the website numbers on: one part per source, the steps folded away until asked for */ #view-marketing .mk-on{padding:14px 0 2px;border-top:1px solid var(--e-line2);margin-top:12px} #view-marketing .mk-on-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px} #view-marketing .mk-on-h .mk-chip{margin:0} #view-marketing .mk-on>.mk-s+.mk-s{margin-top:6px} #view-marketing .mk-steps{margin-top:8px} #view-marketing .mk-steps summary{cursor:pointer;font-family:var(--e-sans);font-size:11.5px;color:var(--e-accent);width:max-content} #view-marketing .mk-steps ol{margin:10px 0 4px;padding-left:20px;font-family:var(--e-sans);font-size:12px;line-height:1.65;color:var(--e-ink2);max-width:78ch} #view-marketing .mk-steps li{margin-bottom:8px;padding-left:2px} #view-marketing .mk-steps li b{color:var(--e-ink);font-weight:600} #view-marketing .mk-steps li .mk-s{display:block;margin-top:3px} /* ══ SEEKER ON LINKEDIN (29 Sep 2026) ═══════════════════════════════════════════════════════════════ Ava's yes to the mock-up (scratchpad/linkedin-mockup): LinkedIn's own Page exports, dropped on the card. Built from the Results pieces above (.mk-tiles, .mk-chart, .mk-bars, .mk-seg, .mk-li-f); only what the card adds is here, all under .mk-lip. Two spacing rules the kit had not got: the period switch sits INSIDE the heading (so it loses .mk-seg's bottom margin), and each part below the lists opens with a hairline. */ #view-marketing .mk-lip{--mk-dot:#A1979C} #view-marketing .mk-lip .mk-h2 .mk-seg{margin:0;font-weight:400;letter-spacing:0;text-transform:none;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none} #view-marketing .mk-lip .mk-seg-b{white-space:nowrap;flex:none} @media(max-width:620px){#view-marketing .mk-lip .mk-h2 .mk-seg{width:100%}} /* ⚠ Bench, 29 Sep 2026: on a phone a heading's grey words ("Seeker Capital's page · …", "all followers, as LinkedIn listed them …", "page views, …") drop to a line of their own, and margin-left:auto then pushed them to the right edge, away from the heading they belong to. The approved mock-up has them at the left. On a wide screen the hairline (or the heading beside them) still takes up the room, so nothing moves there. */ #view-marketing .mk-lip .mk-h2 .rt,#view-marketing .mk-lip .mk-h3 .rt{margin-left:0} #view-marketing .mk-lip-chart{margin-top:22px} #view-marketing .mk-chart .mline{stroke:var(--e-ink3);stroke-width:1;stroke-dasharray:2 3} #view-marketing .mk-chart .ml{font:italic 12px var(--e-serif);fill:var(--e-ink2)} #view-marketing .mk-lip-n{margin-top:4px} #view-marketing .mk-lip-both{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px} #view-marketing .mk-lip-both .mk-seg{margin:0;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none} #view-marketing .mk-lip-g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;margin-top:6px;align-items:start} @media(max-width:1100px){#view-marketing .mk-lip-g2{grid-template-columns:minmax(0,1fr);gap:26px}} #view-marketing .mk-lip-g2 .mk-br{grid-template-columns:minmax(0,15rem) minmax(3rem,1fr) 7rem} #view-marketing .mk-br.bare .mk-br-v{grid-column:2/-1} #view-marketing .mk-br.me .mk-br-l{font-weight:600;color:var(--e-accent)} #view-marketing .mk-lip-part{margin-top:28px;padding-top:18px;border-top:1px solid var(--e-line)} #view-marketing .mk-lip-part.first{margin-top:0;padding-top:0;border-top:0} /* the posts */ #view-marketing .mk-lp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);gap:10px 28px;padding:14px 0;border-top:1px solid var(--e-line2)} #view-marketing .mk-sub-h+.mk-lp{border-top:0} @media(max-width:900px){#view-marketing .mk-lp{grid-template-columns:minmax(0,1fr)}} #view-marketing .mk-lp-t{font:15px/1.45 var(--e-serif);color:var(--e-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} #view-marketing .mk-lp-t.full{display:block;-webkit-line-clamp:unset;white-space:pre-line} #view-marketing .mk-lp-m{font:11.5px/1.5 var(--e-sans);color:var(--e-ink3);margin-top:6px;display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center} #view-marketing .mk-lp-m b{color:var(--e-ink2);font-weight:600} #view-marketing .mk-lp-m .mk-url{display:inline} #view-marketing .mk-lp-f{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 14px;align-content:start} @media(max-width:620px){#view-marketing .mk-lp-f{grid-template-columns:repeat(3,minmax(0,1fr))}} /* beside peers: dots on a scale of tens. The ten-marks are a grid laid over the rows with the SAME three columns, so each mark lands on the bar's column without measuring anything on the page. */ #view-marketing .mk-bars.peers .mk-br,#view-marketing .mk-lip-scale,#view-marketing .mk-lip-pk-grid{grid-template-columns:minmax(0,11rem) minmax(0,1fr) 5.5rem;gap:12px} #view-marketing .mk-bars.peers .mk-br{position:relative;z-index:1} #view-marketing .mk-lip-scale{display:grid;padding-bottom:4px} #view-marketing .mk-lip-scale-t{position:relative;height:14px} #view-marketing .mk-lip-scale-t span{position:absolute;top:0;transform:translateX(-50%);font:500 10px var(--e-sans);color:var(--e-ink3);white-space:nowrap} #view-marketing .mk-lip-scale-t span:first-child{transform:none} #view-marketing .mk-lip-scale-t span:last-child{transform:translateX(-100%)} #view-marketing .mk-lip-pk{position:relative} #view-marketing .mk-lip-pk-grid{position:absolute;inset:0;display:grid;pointer-events:none} #view-marketing .mk-lip-pk-lines{position:relative} #view-marketing .mk-lip-pk-lines i{position:absolute;top:0;bottom:0;width:1px;background:var(--e-line)} #view-marketing .mk-bars.peers .mk-br-bar{background:linear-gradient(var(--e-line2),var(--e-line2)) 0 50%/100% 1px no-repeat} #view-marketing .mk-bars.peers .mk-br-bar b{position:absolute;top:0;width:8px;height:8px;border-radius:50%;transform:translateX(-50%);background:var(--mk-dot)} #view-marketing .mk-bars.peers .mk-br.me .mk-br-bar b{background:var(--mk-s1);box-shadow:0 0 0 2px var(--mk-surface)} /* bringing in the files */ #view-marketing .mk-lip-drop{border:1px dashed var(--e-line);border-radius:11px;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 28px} #view-marketing .mk-lip-drop.over{background:var(--e-accent-soft);border-color:var(--e-accent)} @media(max-width:820px){#view-marketing .mk-lip-drop{grid-template-columns:minmax(0,1fr)}} #view-marketing .mk-lip-steps{margin:6px 0 0;padding-left:20px;font:14px/1.6 var(--e-serif);color:var(--e-ink)} #view-marketing .mk-lip-steps li{padding-left:2px} #view-marketing .mk-lip-say{margin-top:8px} #view-marketing .mk-lip-say.bad{color:var(--e-red)} #view-marketing .mk-lip-files{display:flex;flex-direction:column} #view-marketing .mk-lip-fl{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;padding:7px 0;border-top:1px solid var(--e-line2);font:13.5px/1.4 var(--e-serif);color:var(--e-ink)} #view-marketing .mk-lip-fl:first-child{border-top:0} #view-marketing .mk-lip-fl .ic{width:16px;height:16px;border-radius:50%;border:1px solid var(--e-line);margin-top:2px;display:grid;place-items:center} #view-marketing .mk-lip-fl.done .ic{background:var(--e-accent);border-color:var(--e-accent);color:#fff} #view-marketing .mk-lip-fl.wait{color:var(--e-ink3)} #view-marketing .mk-lip-fl .sm{display:block;font:11.5px/1.45 var(--e-sans);color:var(--e-ink3)} #view-marketing .mk-lip-last{margin-top:8px;font:12px/1.5 var(--e-sans);color:var(--e-accent);font-weight:600} #view-marketing .mk-lip-auto{margin-top:14px;font:11.5px/1.6 var(--e-sans);color:var(--e-ink3)} @media(max-width:560px){ #view-marketing .mk-lip-g2 .mk-br,#view-marketing .mk-bars.peers .mk-br{grid-template-columns:minmax(0,1fr) auto;row-gap:5px} #view-marketing .mk-lip-scale,#view-marketing .mk-lip-pk-grid{grid-template-columns:minmax(0,1fr)} #view-marketing .mk-lip-scale>div:first-child,#view-marketing .mk-lip-scale>div:last-child, #view-marketing .mk-lip-pk-grid>div:first-child,#view-marketing .mk-lip-pk-grid>div:last-child{display:none} #view-marketing .mk-lip-both .mk-seg{width:100%} #view-marketing .mk-bars.peers .mk-br-l{position:relative;z-index:1;justify-self:start;background:var(--mk-surface);padding-right:4px} } /* ── The blog publisher ─────────────────────── #view-marketing, drawn by tools/blog.js ── */ /* Six steps down the left, the work in the middle, and on step two the real article page on the right in the WEBSITE's own stylesheet — the point of looking is to see what a reader sees, and the Platform's own chrome would misrepresent it. Everything here is prefixed bp-. */ #view-marketing .bp-head{margin-bottom:16px} #view-marketing .bp-rail{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px} #view-marketing .bp-r{flex:1 1 150px;min-width:140px;text-align:left;background:var(--e-grey1);border:1px solid var(--e-line); border-radius:11px;padding:9px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px} #view-marketing .bp-r:hover:not([disabled]){border-color:var(--e-accent)} #view-marketing .bp-r[disabled]{opacity:.42;cursor:not-allowed} #view-marketing .bp-r.on{background:#fff;border-color:var(--e-accent);box-shadow:0 1px 3px rgba(0,0,0,.07)} #view-marketing .bp-r .n{font-family:var(--e-sans);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--e-ink3)} #view-marketing .bp-r .t{font-family:var(--e-serif);font-size:14px;color:var(--e-ink);line-height:1.2} #view-marketing .bp-r .s{font-family:var(--e-sans);font-size:10.5px;color:var(--e-ink3);line-height:1.35} #view-marketing .bp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0} #view-marketing .bp-grid2{display:grid;grid-template-columns:minmax(300px,1fr) minmax(360px,1.15fr);gap:16px} #view-marketing .bp-split{display:grid;grid-template-columns:minmax(360px,1fr) minmax(380px,1fr);gap:16px;align-items:start} @media(max-width:1180px){#view-marketing .bp-grid2,#view-marketing .bp-split{grid-template-columns:1fr}} #view-marketing .bp-drop{border:1.5px dashed var(--e-line);border-radius:12px;background:var(--e-grey1);padding:28px 18px; text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:5px} #view-marketing .bp-drop:hover,#view-marketing .bp-drop.over{border-color:var(--e-accent);background:var(--e-accent-soft)} #view-marketing .bp-drop b{font-family:var(--e-serif);font-size:16px;color:var(--e-ink)} #view-marketing .bp-drop span{font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink3)} #view-marketing .bp-prog{height:3px;background:var(--e-grey2);border-radius:3px;margin-top:12px;overflow:hidden} #view-marketing .bp-prog i{display:block;height:100%;width:0;background:var(--e-accent);transition:width .18s} #view-marketing .bp-paste{min-height:190px;max-height:340px;overflow:auto;border:1px solid var(--e-line);border-radius:9px; padding:12px 14px;background:var(--e-grey1);font-size:13px;line-height:1.6;color:var(--e-ink)} #view-marketing .bp-paste:empty:before{content:attr(data-ph);color:var(--e-ink3)} #view-marketing .bp-bfout{border:1px solid var(--e-line);border-radius:9px;background:#fff;color:#131b2d; padding:16px 18px;max-height:340px;overflow:auto;margin-top:10px} #view-marketing .bp-bfout:empty{display:none} #view-marketing .bp-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px} #view-marketing .bp-tog{display:inline-flex;align-items:center;gap:6px;font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink3)} #view-marketing .bp-tog input{accent-color:var(--e-accent)} #view-marketing .bp-fields2,#view-marketing .bp-fields3{display:grid;gap:11px;margin-top:10px} #view-marketing .bp-fields2{grid-template-columns:1fr 1fr} #view-marketing .bp-fields3{grid-template-columns:repeat(3,1fr)} @media(max-width:820px){#view-marketing .bp-fields2,#view-marketing .bp-fields3{grid-template-columns:1fr}} #view-marketing .bp-f{display:flex;flex-direction:column;gap:4px} #view-marketing .bp-f.wide{grid-column:1/-1} #view-marketing .bp-f>span{font-family:var(--e-sans);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink3)} #view-marketing .bp-f>em{font-style:normal} #view-marketing .bp-f.bp-check{flex-direction:row;align-items:center;gap:7px;font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink2);text-transform:none;letter-spacing:0} #view-marketing .bp-blocks{max-height:70vh;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:3px} #view-marketing .bp-blk{display:grid;grid-template-columns:22px 1fr;gap:7px;border:1px solid var(--e-line);border-radius:10px;padding:9px 11px;background:#fff} #view-marketing .bp-blk.sel{border-color:var(--e-accent);background:var(--e-accent-soft)} #view-marketing .bp-blk.off{opacity:.45} #view-marketing .bp-blktop{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px} #view-marketing .bp-blktop select{font-family:var(--e-sans);font-size:11px;border:1px solid var(--e-line);border-radius:7px;padding:2px 6px;background:var(--e-grey1);color:var(--e-ink2)} #view-marketing .bp-txt{font-family:var(--e-serif);font-size:13px;line-height:1.55;color:var(--e-ink2)} #view-marketing .bp-txt.hd{font-size:15.5px;color:var(--e-ink)} #view-marketing .bp-txt ul{margin:0;padding-left:16px} #view-marketing .bp-blkacts{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px} #view-marketing .bp-ib{font-family:var(--e-sans);font-size:10.5px;border:1px solid var(--e-line);background:var(--e-grey1); color:var(--e-ink3);border-radius:7px;padding:2px 7px;cursor:pointer} #view-marketing .bp-ib:hover{color:var(--e-ink);border-color:var(--e-accent)} #view-marketing .bp-ib.on{background:var(--e-accent-soft);color:var(--e-accent);border-color:var(--e-accent)} #view-marketing .bp-thumb{display:block;max-width:100%;border:1px solid var(--e-line);border-radius:7px;background:#fff;margin:4px 0} #view-marketing .bp-figf{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:8px} #view-marketing .bp-figf .wide{grid-column:1/-1} @media(max-width:900px){#view-marketing .bp-figf{grid-template-columns:1fr}} #view-marketing .bp-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid var(--e-line)} #view-marketing .bp-pv{position:sticky;top:12px} #view-marketing .bp-pvbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px} #view-marketing .bp-pvstage{border:1px solid var(--e-line);border-radius:12px;background:#fff;overflow:auto;height:74vh;display:flex;justify-content:center} #view-marketing .bp-pvstage iframe{border:0;height:100%;min-width:0;background:#fff} #view-marketing .bp-bank{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:10px} #view-marketing .bp-pick{text-align:left;border:1px solid var(--e-line);border-radius:10px;background:#fff;padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:2px} #view-marketing .bp-pick:hover{border-color:var(--e-accent)} #view-marketing .bp-pick.on{border-color:var(--e-accent);background:var(--e-accent-soft)} #view-marketing .bp-pickname{font-family:var(--e-sans);font-size:11.5px;font-weight:600;color:var(--e-ink);word-break:break-all} #view-marketing .bp-tab{width:100%;border-collapse:collapse;margin-top:10px} #view-marketing .bp-tab th{font-family:var(--e-sans);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--e-ink3);text-align:left;padding:5px 7px;border-bottom:1px solid var(--e-line)} #view-marketing .bp-tab td{padding:6px 7px;border-bottom:1px solid var(--e-line);vertical-align:middle} #view-marketing .bp-mini{display:block;width:74px;height:auto;border:1px solid var(--e-line);border-radius:5px;background:#fff} #view-marketing .bp-list{display:flex;flex-direction:column;gap:6px} #view-marketing .bp-li{display:flex;align-items:center;gap:9px;flex-wrap:wrap;text-align:left;border:1px solid var(--e-line); border-radius:10px;background:#fff;padding:9px 12px;cursor:pointer} #view-marketing .bp-li:hover{border-color:var(--e-accent)} #view-marketing .bp-li b{font-family:var(--e-serif);font-size:14px;color:var(--e-ink)} #view-marketing .bp-checks{display:flex;flex-direction:column;gap:7px} #view-marketing .bp-chk{display:grid;grid-template-columns:20px 1fr;gap:9px;border:1px solid var(--e-red-soft);background:var(--e-red-soft); border-radius:10px;padding:9px 11px} #view-marketing .bp-chk.ok{border-color:var(--e-line);background:var(--e-grey1)} #view-marketing .bp-chk b{font-family:var(--e-sans);font-size:12.5px;color:var(--e-ink)} #view-marketing .bp-chkm{font-size:13px;font-weight:700;color:var(--e-red);line-height:1.3} #view-marketing .bp-chk.ok .bp-chkm{color:var(--e-accent)} #view-marketing .bp-rec{border:1px solid var(--e-accent);background:var(--e-accent-soft);border-radius:10px;padding:11px 13px; font-family:var(--e-sans);font-size:12.5px;color:var(--e-ink);margin-top:10px} #view-marketing .bp-code{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;line-height:1.5; border:1px solid var(--e-line);border-radius:9px;padding:10px 12px;background:var(--e-grey1);color:var(--e-ink2);resize:vertical;margin-top:8px} #view-marketing .bp-det{margin-top:10px} #view-marketing .bp-det>summary{font-family:var(--e-sans);font-size:11.5px;color:var(--e-ink3);cursor:pointer} #view-marketing .bp-det>summary:hover{color:var(--e-ink)} /* ── Task Matrix ────────────────────────────── #tm-wrap, drawn by tools/taskmatrix.js ── */ /* Ava's picks, 24 Sep 2026: the matrix first (C), a category opens into its grouped list (B), By month behind a toggle (D). The four state colours are the My Docs spreadsheet's own fills, so a download to Excel matches the page. Status reads by SHAPE too (the filling ring), not by colour alone. */ #tm-wrap,#lh-tasks .tm-lhtile,#home-tm-wait{ --tm-ok:#DCEBE0; --tm-ok-i:#1E4D2B; --tm-pt:#F7E6C8; --tm-pt-i:#6B4A0F; --tm-st:#D9E4F0; --tm-st-i:#1C3B5E; --tm-no:#F5DAD8; --tm-no-i:#7A2622; } #tm-wrap .tm{font-family:var(--e-sans);color:var(--e-ink)} #tm-wrap .tm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:6px 0 20px} #tm-wrap .tm-lede{font-family:var(--e-serif);font-size:15px;line-height:1.6;color:var(--e-ink2);margin:0;max-width:62ch} #tm-wrap .tm-primary{display:inline-flex;align-items:center;gap:9px;font:600 13px var(--e-sans);color:#fff;background:var(--e-navy,#13294B); border:0;border-radius:8px;padding:11px 17px;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.04),0 6px 14px -8px rgba(19,41,75,.55)} #tm-wrap .tm-primary:hover{filter:brightness(1.12)} #tm-wrap .tm-primary svg{width:15px;height:15px} #tm-wrap .tm-primary:focus-visible,#tm-wrap button:focus-visible,#tm-wrap select:focus-visible,#tm-wrap input:focus-visible,#tm-wrap textarea:focus-visible{outline:2px solid var(--e-accent2);outline-offset:2px} /* totals — one ruled line and a battery, never a row of stat tiles */ #tm-wrap .tm-totals{border-top:1.5px solid var(--e-ink);border-bottom:1px solid var(--e-line);padding:12px 0 13px;margin-bottom:16px} #tm-wrap .tm-tline{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px} #tm-wrap .tm-all{font-family:var(--e-didone);font-size:22px;letter-spacing:-.01em} #tm-wrap .tm-all small{font:600 10.5px var(--e-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--e-ink2);margin-left:6px} #tm-wrap .tm-tk{display:inline-flex;align-items:center;gap:7px;background:none;border:0;border-bottom:1.5px solid transparent;padding:3px 0; cursor:pointer;font:500 13px var(--e-sans);color:var(--e-ink2)} #tm-wrap .tm-tk b{font-weight:700;color:var(--e-ink);font-variant-numeric:tabular-nums} #tm-wrap .tm-tk:hover{color:var(--e-ink)} #tm-wrap .tm-tk.off{opacity:.38} #tm-wrap .tm-batt,#lh-tasks .tm-batt{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--e-inset);margin-top:11px} #tm-wrap .tm-batt.sm{height:5px;margin-top:8px;min-width:120px} #tm-wrap .tm-batt i,#lh-tasks .tm-batt i,#tm-wrap .tm-ghb i{display:block;height:100%} .tm-b-ok{background:var(--tm-ok)}.tm-b-pt{background:var(--tm-pt)}.tm-b-st{background:var(--tm-st)}.tm-b-no{background:var(--tm-no)} #tm-wrap .tm-g{width:14px;height:14px;flex:none;display:inline-block;vertical-align:-2px} #tm-wrap .tm-i-ok{color:var(--tm-ok-i)}#tm-wrap .tm-i-pt{color:var(--tm-pt-i)}#tm-wrap .tm-i-st{color:var(--tm-st-i)}#tm-wrap .tm-i-no{color:var(--tm-no-i)} #tm-wrap .tm-tk.tm-i-ok,#tm-wrap .tm-tk.tm-i-pt,#tm-wrap .tm-tk.tm-i-st,#tm-wrap .tm-tk.tm-i-no{color:var(--e-ink2)} #tm-wrap .tm-tk.tm-i-ok .tm-g{color:var(--tm-ok-i)}#tm-wrap .tm-tk.tm-i-pt .tm-g{color:var(--tm-pt-i)} #tm-wrap .tm-tk.tm-i-st .tm-g{color:var(--tm-st-i)}#tm-wrap .tm-tk.tm-i-no .tm-g{color:var(--tm-no-i)} /* the toolbar */ #tm-wrap .tm-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px} #tm-wrap .tm-q{flex:1 1 230px;min-width:0;font:400 13.5px var(--e-sans);color:var(--e-ink);background:var(--e-paper);border:1px solid var(--e-line2,#DCD4D2); border-radius:8px;padding:9px 12px;min-height:38px} #tm-wrap .tm-sel{font:500 13px var(--e-sans);color:var(--e-ink);background:var(--e-paper);border:1px solid var(--e-line2,#DCD4D2);border-radius:8px; padding:9px 28px 9px 11px;min-height:38px;max-width:200px;cursor:pointer;-webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C5257' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center} #tm-wrap .tm-sel.sm{min-height:32px;padding:6px 26px 6px 10px;font-size:12.5px} #tm-wrap .tm-flag{display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--e-sans);color:var(--e-ink2);background:var(--e-paper); border:1px solid var(--e-line2,#DCD4D2);border-radius:8px;padding:9px 12px;min-height:38px;cursor:pointer} #tm-wrap .tm-flag .n{font-variant-numeric:tabular-nums;color:var(--tm-no-i);background:var(--tm-no);border-radius:999px;padding:1px 8px;font-size:11.5px} #tm-wrap .tm-flag.quiet .n{color:var(--tm-pt-i);background:var(--tm-pt)} #tm-wrap .tm-flag[aria-pressed="true"]{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-paper)} #tm-wrap .tm-seg{display:inline-flex;border:1px solid var(--e-line2,#DCD4D2);border-radius:8px;overflow:hidden;background:var(--e-paper);margin-left:auto} #tm-wrap .tm-seg button{font:600 12.5px var(--e-sans);color:var(--e-ink2);background:none;border:0;padding:9px 14px;min-height:38px;cursor:pointer} #tm-wrap .tm-seg button+button{border-left:1px solid var(--e-line2,#DCD4D2)} #tm-wrap .tm-seg button[aria-pressed="true"]{background:var(--e-inset);color:var(--e-ink);box-shadow:inset 0 -2px 0 var(--e-accent2)} /* C — the matrix */ #tm-wrap .tm-frame{border:1px solid var(--e-line);border-radius:10px;background:var(--e-paper);overflow:auto;-webkit-overflow-scrolling:touch} #tm-wrap table{border-collapse:separate;border-spacing:0;width:100%} #tm-wrap .tm-mx thead th{font:700 10px var(--e-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--e-ink2);text-align:center; padding:13px 10px 11px;border-bottom:1.5px solid var(--e-ink);white-space:nowrap} #tm-wrap .tm-mx thead th:first-child{text-align:left;padding-left:16px} #tm-wrap .tm-mx thead th .tm-g{margin-right:6px} #tm-wrap .tm-mx td,#tm-wrap .tm-mx tbody th{border-bottom:1px solid var(--e-line);padding:0;text-align:center} #tm-wrap .tm-mx tbody th{text-align:left} #tm-wrap .tm-cat{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;cursor:pointer;text-align:left; font:500 14.5px var(--e-serif);color:var(--e-ink);padding:14px 16px;white-space:nowrap} #tm-wrap .tm-cat svg{width:12px;height:12px;color:var(--e-ink3);transition:transform .16s;flex:none} #tm-wrap .tm-mr.open .tm-cat svg{transform:rotate(90deg)} #tm-wrap .tm-cat:hover{color:var(--e-accent2)} #tm-wrap .tm-mr.open th,#tm-wrap .tm-mr.open td{background:var(--e-card)} #tm-wrap .tm-pc{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border:0;background:none;cursor:pointer; font:400 17px var(--e-didone);color:var(--e-ink);font-variant-numeric:tabular-nums} #tm-wrap .tm-pc[data-k="ok"][style]{background:color-mix(in srgb,var(--tm-ok) var(--tm-heat),var(--e-paper))} #tm-wrap .tm-pc[data-k="pt"][style]{background:color-mix(in srgb,var(--tm-pt) var(--tm-heat),var(--e-paper))} #tm-wrap .tm-pc[data-k="st"][style]{background:color-mix(in srgb,var(--tm-st) var(--tm-heat),var(--e-paper))} #tm-wrap .tm-pc[data-k="no"][style]{background:color-mix(in srgb,var(--tm-no) var(--tm-heat),var(--e-paper))} #tm-wrap .tm-pc:hover,#tm-wrap .tm-pc.on{box-shadow:inset 0 0 0 2px var(--e-ink)} #tm-wrap .tm-pc .z{color:var(--e-line2,#DCD4D2)} #tm-wrap .tm-tot{font:400 16px var(--e-didone);background:var(--e-inset);padding:0 16px !important} #tm-wrap .tm-mx tfoot th,#tm-wrap .tm-mx tfoot td{background:var(--e-inset);border-top:1.5px solid var(--e-ink);padding:13px 10px; font:400 16px var(--e-didone);text-align:center} #tm-wrap .tm-mx tfoot th{text-align:left;padding-left:16px;font:600 10.5px var(--e-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--e-ink2)} #tm-wrap .tm-openrow > td{padding:0 0 14px !important;background:var(--e-card);text-align:left} #tm-wrap .tm-only{font:500 12.5px var(--e-sans);color:var(--e-ink2);padding:10px 16px 0} /* B — an opened category: one table, project header rows, each with its own battery */ #tm-wrap .tm-list{font-size:13px;background:var(--e-paper);border-top:1px solid var(--e-line)} #tm-wrap .tm-list thead th{font:700 9.5px var(--e-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--e-ink3);text-align:left; padding:10px 14px 8px;border-bottom:1px solid var(--e-line);white-space:nowrap} #tm-wrap .tm-list td{padding:10px 14px;border-bottom:1px solid var(--e-line);vertical-align:middle;line-height:1.45;text-align:left} #tm-wrap .tm-gh td{background:var(--e-card);padding:12px 14px 10px !important;border-bottom:1px solid var(--e-line2,#DCD4D2)} #tm-wrap .tm-ghin{display:flex;align-items:center;gap:14px;flex-wrap:wrap} #tm-wrap .tm-ghn{font:400 16px var(--e-didone);letter-spacing:-.01em;min-width:200px} #tm-wrap .tm-ghb{flex:1;display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--e-inset);max-width:460px;min-width:90px} #tm-wrap .tm-ghc{font:600 10.5px var(--e-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--e-ink2);white-space:nowrap} #tm-wrap .tm-row:hover td:not(.tm-sc){background:var(--e-card)} #tm-wrap .tm-t{min-width:280px;max-width:620px} #tm-wrap .tm-title{display:block;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:400 14px/1.4 var(--e-serif);color:var(--e-ink)} #tm-wrap .tm-title:hover{color:var(--e-accent2);text-decoration:underline;text-underline-offset:3px} #tm-wrap .tm-flags{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font:500 11.5px/1.5 var(--e-sans)} #tm-wrap .tm-wait{color:var(--tm-no-i)} #tm-wrap .tm-quiet{color:var(--tm-pt-i);background:var(--tm-pt);border-radius:999px;padding:0 8px} #tm-wrap .tm-unchk{color:var(--e-ink3)} /* the status cell IS the control: a real select laid over the glyph and word, so ticking off is one click */ #tm-wrap td.tm-sc{padding:0 !important;white-space:nowrap;width:1%} #tm-wrap .tm-s-ok{background:var(--tm-ok);color:var(--tm-ok-i)}#tm-wrap .tm-s-pt{background:var(--tm-pt);color:var(--tm-pt-i)} #tm-wrap .tm-s-st{background:var(--tm-st);color:var(--tm-st-i)}#tm-wrap .tm-s-no{background:var(--tm-no);color:var(--tm-no-i)} #tm-wrap .tm-sl{position:relative;display:flex;align-items:center;gap:8px;padding:12px 14px;font:600 12px var(--e-sans);cursor:pointer;min-height:44px;box-sizing:border-box} #tm-wrap .tm-sl select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} #tm-wrap .tm-sl:focus-within{box-shadow:inset 0 0 0 2px currentColor} #tm-wrap .tm-pr{width:1%} #tm-wrap .tm-psel{font:600 12px var(--e-sans);color:var(--e-ink3);background:transparent;border:1px solid transparent;border-radius:6px;padding:5px 8px;cursor:pointer; -webkit-appearance:none;appearance:none} #tm-wrap .tm-psel:hover{border-color:var(--e-line2,#DCD4D2)} #tm-wrap .tm-psel.p-high{color:var(--tm-no-i)}#tm-wrap .tm-psel.p-medium{color:var(--tm-pt-i)}#tm-wrap .tm-psel.p-low{color:var(--e-ink2)} #tm-wrap .tm-d{font:500 12px var(--e-sans);color:var(--e-ink2);white-space:nowrap;font-variant-numeric:tabular-nums;width:1%} #tm-wrap .none{color:var(--e-ink3)} /* the opened row — her words, the proof, and what she can change */ #tm-wrap .tm-drawer > td{background:var(--e-card);padding:0 !important;border-bottom:1px solid var(--e-line2,#DCD4D2)} #tm-wrap .tm-dr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;padding:16px 18px 20px} #tm-wrap .tm-dh{font:700 9.5px var(--e-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3);margin:14px 0 6px} #tm-wrap .tm-dcol > .tm-dh:first-child,#tm-wrap .tm-dcol > .tm-detail + .tm-dh{margin-top:0} #tm-wrap .tm-detail{font:400 14px/1.6 var(--e-serif);color:var(--e-ink);margin:0 0 14px} #tm-wrap .tm-quote{margin:0;padding:2px 0 2px 14px;border-left:1.5px solid var(--e-accent2);font:italic 400 14px/1.6 var(--e-serif);color:var(--e-ink2)} #tm-wrap .tm-proof{font:400 13.5px/1.6 var(--e-sans);color:var(--e-ink);margin:0} #tm-wrap .tm-proof a{color:var(--e-accent2)} #tm-wrap .tm-ref{font-size:12px;color:var(--e-ink3)} #tm-wrap .tm-muted{font:400 12.5px/1.55 var(--e-sans);color:var(--e-ink3);margin:6px 0 0} #tm-wrap .tm-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center} #tm-wrap .tm-chip{font:600 12px var(--e-sans);color:var(--e-ink2);background:var(--e-paper);border:1px solid var(--e-line2,#DCD4D2);border-radius:999px;padding:5px 12px;cursor:pointer} #tm-wrap .tm-chip.on{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-paper)} #tm-wrap .tm-addp{font:400 12.5px var(--e-sans);border:1px dashed var(--e-line2,#DCD4D2);border-radius:999px;padding:5px 12px;background:transparent;color:var(--e-ink);width:140px} #tm-wrap .tm-notes{display:block;width:100%;box-sizing:border-box;min-height:74px;resize:vertical;font:400 13.5px/1.55 var(--e-serif);color:var(--e-ink); background:var(--e-paper);border:1px solid var(--e-line2,#DCD4D2);border-radius:8px;padding:9px 11px} /* D — by month */ #tm-wrap .tm-mo thead th{font:700 10px var(--e-sans);letter-spacing:.11em;text-transform:uppercase;color:var(--e-ink2);text-align:left; padding:13px 14px 11px;border-bottom:1.5px solid var(--e-ink);white-space:nowrap} #tm-wrap .tm-mo td{padding:14px;border-bottom:1px solid var(--e-line);vertical-align:top} #tm-wrap .tm-mn{font:400 19px var(--e-didone);white-space:nowrap;min-width:150px} #tm-wrap .tm-num{font:400 18px var(--e-didone);font-variant-numeric:tabular-nums} #tm-wrap .tm-areas{display:flex;flex-wrap:wrap;gap:4px 14px;font:500 12px var(--e-sans);color:var(--e-ink2);max-width:260px} #tm-wrap .tm-areas b{color:var(--e-ink)} #tm-wrap .tm-still{font:400 13px/1.65 var(--e-serif);color:var(--e-ink2);max-width:64ch} #tm-wrap .tm-still em{color:var(--e-ink3)} #tm-wrap .tm-empty{padding:46px 20px;text-align:center} #tm-wrap .tm-empty p{font:italic 400 15px var(--e-serif);color:var(--e-ink2);margin:0 0 10px} #tm-wrap .tm-empty .tm-muted{font-style:normal} #tm-wrap .tm-empty button{font:600 12.5px var(--e-sans);color:var(--e-ink);background:var(--e-paper);border:1px solid var(--e-line2,#DCD4D2);border-radius:8px;padding:8px 14px;cursor:pointer;margin-top:6px} #tm-wrap .tm-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font:500 11.5px var(--e-sans);color:var(--e-ink3);margin-top:10px} #tm-wrap .tm-link{background:none;border:0;padding:0;font:inherit;color:var(--e-accent2);cursor:pointer;text-decoration:underline;text-underline-offset:3px} @media (max-width:820px){ #tm-wrap .tm-seg{margin-left:0;width:100%}#tm-wrap .tm-seg button{flex:1} #tm-wrap .tm-dr{grid-template-columns:minmax(0,1fr);gap:4px} #tm-wrap .tm-t{min-width:220px} } @media (prefers-reduced-motion:reduce){ #tm-wrap *{transition:none !important} } /* the landing-page tile: full width under the other three, so they keep their row */ #lh-tasks .tm-lhtile{grid-column:1 / -1} /* Home: one quiet line inside My day, only when something is waiting on her */ #home-tm-wait{margin:0 0 10px} #home-tm-wait .tm-homewait{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer; font:500 13px var(--e-sans);color:var(--e-ink);background:var(--tm-no);border:0;border-radius:9px;padding:9px 12px} #home-tm-wait .tm-homewait .n{font:700 12px var(--e-sans);color:var(--tm-no);background:var(--tm-no-i);border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums} #home-tm-wait .tm-homewait .go{margin-left:auto;color:var(--tm-no-i)} #home-tm-wait .tm-homewait:hover{filter:brightness(.97)} /* Add a task, the second Home line and the digest panel (Ava, 24 Sep: yes to all three) */ #tm-wrap .tm-xlwrap{display:flex;gap:8px;flex-wrap:wrap} #tm-wrap .tm-ghost,#digest-tm .tm-ghost{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--e-sans);color:var(--e-ink); background:var(--e-paper);border:1px solid var(--e-line2,#DCD4D2);border-radius:8px;padding:10px 15px;cursor:pointer} #tm-wrap .tm-ghost:hover,#digest-tm .tm-ghost:hover{border-color:var(--e-ink3)} #tm-wrap .tm-ghost svg{width:15px;height:15px} #tm-wrap .tm-ghost[aria-expanded="true"]{background:var(--e-inset)} #tm-wrap .tm-add{background:var(--e-card);border:1px solid var(--e-line2,#DCD4D2);border-radius:12px;padding:18px 20px 16px;margin:0 0 20px} #tm-wrap .tm-add-h{font:400 19px var(--e-didone);letter-spacing:-.01em;margin:0 0 14px} #tm-wrap .tm-add-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px} #tm-wrap .tm-f{display:flex;flex-direction:column;gap:5px;min-width:0} #tm-wrap .tm-f.wide{grid-column:1 / -1} #tm-wrap .tm-f > span{font:700 9.5px var(--e-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink2)} #tm-wrap .tm-f > span i{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;color:var(--e-ink3);margin-left:4px} #tm-wrap .tm-f input,#tm-wrap .tm-f select,#tm-wrap .tm-f textarea{font:400 13.5px var(--e-sans);color:var(--e-ink);background:var(--e-paper); border:1px solid var(--e-line2,#DCD4D2);border-radius:8px;padding:9px 11px;min-height:38px;box-sizing:border-box;width:100%} #tm-wrap .tm-f textarea{font-family:var(--e-serif);resize:vertical} #tm-wrap .tm-add-foot{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap} #tm-wrap .tm-add-foot .tm-muted{flex:1;margin:0;min-width:200px} @media (max-width:820px){ #tm-wrap .tm-add-grid{grid-template-columns:minmax(0,1fr)} } /* :not([hidden]) — a plain display rule here beat the hidden attribute and left an empty band in My day */ #home-tm-wait:not([hidden]){display:flex;flex-direction:column;gap:6px} #home-tm-wait .tm-homewait.quiet{background:var(--tm-pt)} #home-tm-wait .tm-homewait.quiet .n{color:var(--tm-pt);background:var(--tm-pt-i)} #home-tm-wait .tm-homewait.quiet .go{color:var(--tm-pt-i)} #digest-tm{-webkit-user-select:none;user-select:none;--tm-ok:#DCEBE0;--tm-ok-i:#1E4D2B;--tm-pt:#F7E6C8;--tm-pt-i:#6B4A0F;--tm-no:#F5DAD8;--tm-no-i:#7A2622;margin:0 0 16px} #digest-tm .tm-dg{background:var(--e-card);border:1px solid var(--e-line2,#DCD4D2);border-radius:12px;padding:16px 20px 16px;font-family:var(--e-sans);color:var(--e-ink)} #digest-tm .tm-dg-h{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-bottom:6px} #digest-tm .tm-dg-t{font:400 19px var(--e-didone);letter-spacing:-.01em} #digest-tm .tm-dg-lock{font:500 11.5px var(--e-sans);color:var(--e-ink3)} #digest-tm .tm-dg-nums{font:500 13px var(--e-sans);color:var(--e-ink2);margin:0 0 12px} #digest-tm .tm-dg-nums b{font:400 17px var(--e-didone);color:var(--e-ink);font-variant-numeric:tabular-nums} #digest-tm .tm-dg-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} #digest-tm .tm-dh{font:700 9.5px var(--e-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3);margin:0 0 6px} #digest-tm ul{margin:0;padding-left:18px;font:400 13.5px/1.55 var(--e-serif);color:var(--e-ink)} #digest-tm li{margin:0 0 3px} #digest-tm .tm-muted{font:400 12.5px/1.5 var(--e-sans);color:var(--e-ink3);margin:4px 0 0} #digest-tm .tm-dg-go{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} @media (max-width:820px){ #digest-tm .tm-dg-cols{grid-template-columns:minmax(0,1fr)} } /* Private: never printed, so the digest's "Download PDF" leaves it out as surely as its email does. */ @media print{ #digest-tm{display:none !important} } /* The menu entry is Ava's alone. The menu's own rule sets display:flex on every entry, which beats [hidden] — so without this a colleague could see "Task Matrix" in the menu (clicking it showed them nothing). */ #rk-dd-matrix[hidden]{display:none !important} /* the digest panel folds to one line of counts by default — it is on screen whenever she shares the digest */ #digest-tm .tm-dg-tog{font:600 12px var(--e-sans);color:var(--e-ink);background:var(--e-paper);border:1px solid var(--e-line2,#DCD4D2); border-radius:999px;padding:3px 12px;cursor:pointer} #digest-tm .tm-dg-tog:hover{border-color:var(--e-ink3)} #digest-tm .tm-dg:not(.open) .tm-dg-nums{margin-bottom:0} /* Send to Claude (Ava, 25 Sep 2026) — a pick column, a bar that appears when something is picked, and the panel that sends. Same paper, hairlines and navy primary as the rest of the matrix: nothing new to learn. */ #tm-wrap .tm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #tm-wrap td.tm-pk,#tm-wrap th.tm-pk{width:1%;padding:10px 4px 10px 14px !important;vertical-align:middle} #tm-wrap td.tm-pk input{width:16px;height:16px;margin:0;accent-color:var(--e-navy,#13294B);cursor:pointer} #tm-wrap .tm-row.picked td:not(.tm-sc){background:color-mix(in srgb,var(--tm-st) 45%,var(--e-paper))} #tm-wrap .tm-sent{color:var(--tm-st-i)} #tm-wrap .tm-primary.sm{padding:8px 14px;font-size:12.5px;box-shadow:none} #tm-wrap .tm-primary[disabled],#tm-wrap .tm-ghost[disabled]{opacity:.5;cursor:default} #tm-wrap .tm-dsend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px} #tm-wrap .tm-dsend .tm-muted{margin:0} #tm-wrap .tm-dsend a,#tm-wrap .tm-send a{color:var(--e-accent2)} #tm-wrap .tm-sendbar:not([hidden]){position:sticky;top:8px;z-index:3;display:flex;align-items:center;gap:12px;flex-wrap:wrap; background:var(--e-paper);border:1px solid var(--e-ink);border-radius:10px;padding:9px 12px 9px 14px;margin:0 0 12px; box-shadow:0 8px 20px -14px rgba(27,20,22,.45)} #tm-wrap .tm-sb-n{font:400 20px var(--e-didone);font-variant-numeric:tabular-nums} #tm-wrap .tm-sb-t{font:500 13px var(--e-sans);color:var(--e-ink2);flex:1;min-width:180px} #tm-wrap .tm-sendbar .tm-link{font:600 12.5px var(--e-sans)} #tm-wrap .tm-send{background:var(--e-card);border:1px solid var(--e-line2,#DCD4D2);border-radius:12px;padding:18px 20px 16px;margin:0 0 20px} #tm-wrap .tm-send-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:400 19px var(--e-didone);letter-spacing:-.01em;margin:0 0 12px} #tm-wrap .tm-send-h .tm-link{font:600 12.5px var(--e-sans)} #tm-wrap .tm-send-list{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--e-line)} #tm-wrap .tm-send-list li{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--e-line)} #tm-wrap .tm-sv{font:700 9.5px var(--e-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--e-ink3)} #tm-wrap .tm-st{font:400 14px/1.45 var(--e-serif);color:var(--e-ink)} #tm-wrap .tm-sa{display:flex;gap:14px;justify-content:flex-end;font:600 12.5px var(--e-sans);white-space:nowrap} #tm-wrap .tm-sa .ok{color:var(--tm-ok-i)}#tm-wrap .tm-sa .bad{color:var(--tm-no-i);white-space:normal;max-width:380px;text-align:right} #tm-wrap .tm-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px} #tm-wrap .tm-way{display:flex;flex-direction:column;gap:6px;background:var(--e-paper);border:1px solid var(--e-line);border-radius:10px;padding:14px 16px} #tm-wrap .tm-way-h{font:600 13.5px var(--e-sans);color:var(--e-ink)} #tm-wrap .tm-way .tm-muted{margin:0;flex:1} #tm-wrap .tm-way-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} #tm-wrap .tm-way-b .tm-primary,#tm-wrap .tm-way-b .tm-ghost{padding:9px 14px;font-size:12.5px;box-shadow:none} #tm-wrap #tm-s-msg:empty{display:none} #tm-wrap .tm-setup{margin-top:14px;padding:14px 16px;border:1px dashed var(--e-line2,#DCD4D2);border-radius:10px;background:var(--e-paper)} #tm-wrap .tm-setup .tm-dh{margin-top:0} #tm-wrap .tm-setup ol{margin:8px 0 12px;padding-left:20px;font:400 13.5px/1.65 var(--e-sans);color:var(--e-ink)} #tm-wrap .tm-setup i{font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--e-inset);border-radius:4px;padding:1px 5px} #tm-wrap .tm-setup b.ok{color:var(--tm-ok-i)} @media (max-width:820px){ #tm-wrap .tm-ways{grid-template-columns:minmax(0,1fr)} #tm-wrap .tm-send-list li{grid-template-columns:minmax(0,1fr)} #tm-wrap .tm-sa{justify-content:flex-start} } /* ── People to add ───────────────────────── #view-peopletoadd, drawn by tools/peopletoadd.js ── */ /* Ava's approved mock-up (29 Sep 2026, scratchpad/people-to-add.html): a Didone head with the waiting count on the right, colleague chips and a Waiting · Added · Not needed switch, one ruled list, a right-hand sheet to add somebody. The sheet, the "Why not add them?" pop-over and the strip live on , outside .rk, so every colour there carries its own fallback. */ #view-peopletoadd .pta-page{font-family:var(--e-sans);color:var(--e-ink);font-size:13px;line-height:1.45} #view-peopletoadd .pta-num{font-variant-numeric:tabular-nums lining-nums} #view-peopletoadd .pta-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--e-ink)} #view-peopletoadd .pta-head .eyebrow-row{margin-bottom:6px} #view-peopletoadd .pta-head h1{font-size:40px;margin:0} #view-peopletoadd .pta-stand{margin:8px 0 0;font-family:var(--e-serif);font-size:16.5px;line-height:1.4;color:var(--e-ink2)} #view-peopletoadd .pta-big{text-align:right} #view-peopletoadd .pta-big b{display:block;font-family:var(--e-didone);font-weight:400;font-size:40px;line-height:1} #view-peopletoadd .pta-big span{display:block;margin-top:6px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--e-ink3)} #view-peopletoadd .pta-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:18px 0 6px} #view-peopletoadd .pta-chips{display:flex;gap:6px;flex-wrap:wrap} #view-peopletoadd .pta-chip{height:30px;padding:0 13px;border-radius:30px;border:1px solid #D9D1CF;background:var(--e-paper);color:var(--e-ink2);font:600 12px/1 var(--e-sans);display:inline-flex;align-items:center;gap:7px;cursor:pointer} #view-peopletoadd .pta-chip em{font-style:normal;color:var(--e-ink3);font-weight:500} #view-peopletoadd .pta-chip:hover{border-color:var(--e-ink3)} #view-peopletoadd .pta-chip.on{background:var(--e-navy);border-color:var(--e-navy);color:#fff} #view-peopletoadd .pta-chip.on em{color:#D8C9CE} #view-peopletoadd .pta-seg{display:inline-flex;border:1px solid #D9D1CF;border-radius:30px;padding:2px;background:var(--e-paper)} #view-peopletoadd .pta-seg button{height:26px;padding:0 12px;border-radius:30px;border:0;background:transparent;color:var(--e-ink2);font:600 12px/1 var(--e-sans);cursor:pointer} #view-peopletoadd .pta-seg button.on{background:var(--e-card2);color:var(--e-ink)} /* One FIXED last track for the heading and every row (each row is a grid of its own): an auto track let a long "Added … · Open card · Put emails on the card again" widen its own row and pull every column out of line. */ #view-peopletoadd .pta-th,#view-peopletoadd .pta-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.25fr) 110px 64px 74px minmax(0,1.6fr) 206px;gap:16px;align-items:center} #view-peopletoadd .pta-th{padding:14px 0 8px;border-bottom:1px solid var(--e-ink)} #view-peopletoadd .pta-th span{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--e-ink3)} #view-peopletoadd .pta-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #view-peopletoadd .pta-row{padding:13px 0;border-bottom:1px solid var(--e-line)} #view-peopletoadd .pta-row:hover{background:linear-gradient(90deg,transparent,var(--e-line2) 4%,var(--e-line2) 96%,transparent)} #view-peopletoadd .pta-who{min-width:0} #view-peopletoadd .pta-who b{display:block;font-weight:600;font-size:13.5px;line-height:1.3} #view-peopletoadd .pta-who span{display:block;color:var(--e-ink3);font-size:12px;overflow-wrap:anywhere} #view-peopletoadd .pta-firm{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0;overflow-wrap:anywhere} #view-peopletoadd .pta-tag{display:inline-block;max-width:100%;box-sizing:border-box;border-radius:999px;font:600 10.5px/1.25 var(--e-sans);padding:3px 8px} #view-peopletoadd .pta-tag.in{background:var(--e-accent-soft);color:var(--e-grad1)} #view-peopletoadd .pta-tag.new{background:#FBEFD8;color:#855710} #view-peopletoadd .pta-tag.mgr{background:#EDF0F5;color:#243B5E} #view-peopletoadd .pta-by{display:flex;gap:4px;flex-wrap:wrap} #view-peopletoadd .pta-by i{width:24px;height:24px;border-radius:50%;background:var(--e-card2);border:1px solid var(--e-line);color:var(--e-ink2);font:600 10px/22px var(--e-sans);text-align:center;font-style:normal} #view-peopletoadd .pta-n,#view-peopletoadd .pta-d{font-variant-numeric:tabular-nums} #view-peopletoadd .pta-thread{font-family:var(--e-serif);font-style:italic;font-size:13px;line-height:1.35;color:var(--e-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} #view-peopletoadd .pta-meta{display:none} #view-peopletoadd .pta-acts{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap} #view-peopletoadd .pta-done{color:var(--e-ink3);font-size:12px;line-height:1.6;text-align:right;min-width:0;max-width:100%} #view-peopletoadd .pta-done .pta-b3{font-size:12px} #view-peopletoadd .pta-empty{padding:48px 0;text-align:center;font-family:var(--e-serif);font-style:italic;font-size:16px;line-height:1.4;color:var(--e-ink3)} #view-peopletoadd .pta-fine{margin:14px 0 0;font-family:var(--e-serif);font-size:12.5px;line-height:1.5;color:var(--e-ink3)} #view-peopletoadd .pta-state{max-width:620px;margin:28px 0;padding:22px 24px;border:1px solid var(--e-line);border-radius:16px;background:var(--e-card);font-family:var(--e-serif);font-size:15px;line-height:1.5;color:var(--e-ink2)} #view-peopletoadd .pta-state b{display:block;font-family:var(--e-didone);font-weight:400;font-size:24px;color:var(--e-ink);margin-bottom:6px} #view-peopletoadd .pta-state p{margin:6px 0 0} #view-peopletoadd .pta-state code{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--e-inset);border-radius:5px;padding:1px 5px} #view-peopletoadd .pta-state.pta-wait{border-style:dashed;font-style:italic;color:var(--e-ink3)} /* The two buttons, shared by the page, Home and the sheet: a dark pill, and a quiet underlined word. */ :is(#view-peopletoadd,#home-pta,#pta-drawer) .pta-b1{height:30px;padding:0 14px;border-radius:30px;border:1px solid var(--e-navy,#2E1E24);background:var(--e-navy,#2E1E24);color:#fff;font:600 12px/1 var(--e-sans,Inter,sans-serif);white-space:nowrap;cursor:pointer} :is(#view-peopletoadd,#home-pta,#pta-drawer) .pta-b1:hover:not([disabled]){background:#46303A;border-color:#46303A} :is(#view-peopletoadd,#home-pta,#pta-drawer) .pta-b1[disabled]{opacity:.6;cursor:progress} :is(#view-peopletoadd,#home-pta,#pta-drawer) .pta-b3{border:0;background:none;padding:0;white-space:nowrap;color:var(--e-ink2,#5C5257);font:600 12px/1.2 var(--e-sans,Inter,sans-serif);text-decoration:underline;text-decoration-color:#CFC6C3;text-underline-offset:3px;cursor:pointer} :is(#view-peopletoadd,#home-pta,#pta-drawer) .pta-b3:hover{color:var(--e-ink,#1B1416);text-decoration-color:currentColor} :is(#view-peopletoadd,#home-pta,#pta-drawer,#pta-pop,#pta-strip) button:focus-visible, :is(#view-peopletoadd,#home-pta,#pta-drawer) :is(input,select,[role="link"]):focus-visible{outline:2px solid var(--e-accent,#A24F6C);outline-offset:2px} @media (max-width:980px){ #view-peopletoadd .pta-th{display:none} #view-peopletoadd .pta-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who acts" "firm firm" "meta meta";row-gap:8px} #view-peopletoadd .pta-row .pta-who{grid-area:who} #view-peopletoadd .pta-row .pta-acts{grid-area:acts} #view-peopletoadd .pta-row .pta-firm{grid-area:firm;flex-direction:row;align-items:center;flex-wrap:wrap} #view-peopletoadd .pta-row :is(.pta-by,.pta-n,.pta-d,.pta-thread){display:none} #view-peopletoadd .pta-row .pta-meta{grid-area:meta;display:block;color:var(--e-ink3);font-size:12px} #view-peopletoadd .pta-done{text-align:left} } @media (max-width:560px){ #view-peopletoadd .pta-head h1{font-size:32px} #view-peopletoadd .pta-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "firm" "meta" "acts"} #view-peopletoadd .pta-row .pta-acts{justify-content:flex-start} } /* The sheet on the right, and its dimmed page. Above the masthead (30), below every dialog (200–240). */ #pta-scrim{position:fixed;inset:0;z-index:90;background:rgba(27,20,22,.18);opacity:0;pointer-events:none;transition:opacity .2s} #pta-scrim.on{opacity:1;pointer-events:auto} #pta-drawer{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:91;width:min(460px,100%);max-width:none;margin:0;background:var(--e-paper,#FDFBFA);color:var(--e-ink,#1B1416);border-left:1px solid var(--e-line,#EBE6E5);box-shadow:-18px 0 40px rgba(27,20,22,.08);transform:translateX(102%);visibility:hidden;transition:transform .24s ease,visibility 0s linear .24s;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);font:400 13px/1.45 var(--e-sans,Inter,sans-serif)} #pta-drawer.on{transform:none;visibility:visible;transition:transform .24s ease} #pta-drawer .pta-x{position:absolute;top:18px;right:18px;width:28px;height:28px;border-radius:50%;border:1px solid #E7E0DE;background:var(--e-paper,#FDFBFA);color:var(--e-ink3,#6F676C);display:grid;place-items:center;padding:0;cursor:pointer} #pta-drawer .pta-cap{font:600 10.5px/1.2 var(--e-sans,Inter,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--e-ink3,#6F676C)} #pta-drawer .pta-dh{padding:22px 56px 16px 26px;border-bottom:1px solid var(--e-line,#EBE6E5)} #pta-drawer .pta-dh h2{margin:6px 0 0;font:400 26px/1.15 var(--e-didone,Prata,Georgia,serif);color:var(--e-ink,#1B1416)} #pta-drawer .pta-dh p{margin:6px 0 0;font:400 14px/1.45 var(--e-serif,Lora,Georgia,serif);color:var(--e-ink2,#5C5257)} #pta-drawer .pta-db{padding:18px 26px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;flex:1;margin:0} #pta-drawer .pta-f{display:flex;flex-direction:column;gap:5px;min-width:0} #pta-drawer .pta-f2{display:grid;grid-template-columns:1fr 1fr;gap:12px} #pta-drawer .pta-f label{font:600 11.5px/1.2 var(--e-sans,Inter,sans-serif);color:var(--e-ink2,#5C5257)} #pta-drawer .pta-lnote{font-weight:500;color:var(--e-grad1,#7B3A4E)} #pta-drawer .pta-f :is(input,select){height:36px;border:1px solid #D9D1CF;border-radius:9px;background:#fff;padding:0 11px;font:500 13px/1 var(--e-sans,Inter,sans-serif);color:var(--e-ink,#1B1416);width:100%;box-sizing:border-box;margin:0} #pta-drawer .pta-f input[readonly]{background:var(--e-inset,#F1ECEB);color:var(--e-ink2,#5C5257)} #pta-drawer .pta-f input.blank{border-style:dashed} #pta-drawer .pta-f input.need{border-color:var(--e-accent,#A24F6C);border-style:solid} #pta-drawer .pta-f input[hidden]{display:none} #pta-drawer .pta-src{font:400 11.5px/1.3 var(--e-sans,Inter,sans-serif);color:var(--e-ink3,#6F676C)} #pta-drawer .pta-note{background:var(--e-card,#F8F5F4);border:1px solid var(--e-line,#EBE6E5);border-radius:12px;padding:12px 14px;font:400 13.5px/1.45 var(--e-serif,Lora,Georgia,serif);color:var(--e-ink2,#5C5257)} #pta-drawer .pta-note b{font:600 12.5px/1.4 var(--e-sans,Inter,sans-serif);color:var(--e-ink,#1B1416)} #pta-drawer .pta-err{margin:0;color:var(--e-grad1,#7B3A4E);font:600 12.5px/1.4 var(--e-sans,Inter,sans-serif)} #pta-drawer .pta-err[hidden]{display:none} #pta-drawer .pta-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px} #pta-drawer .pta-cmp>div{border:1px solid var(--e-line,#EBE6E5);border-radius:12px;background:var(--e-card,#F8F5F4);padding:12px 14px;min-width:0;overflow-wrap:anywhere} #pta-drawer .pta-cmp p{margin:6px 0 0;font:500 13px/1.4 var(--e-sans,Inter,sans-serif)} #pta-drawer .pta-tick{display:flex;gap:9px;align-items:flex-start;font:500 13px/1.4 var(--e-sans,Inter,sans-serif);color:var(--e-ink,#1B1416);overflow-wrap:anywhere} #pta-drawer .pta-tick input{margin-top:2px;accent-color:var(--e-navy,#2E1E24)} #pta-drawer .pta-tick input[disabled]{opacity:1;cursor:default} #pta-drawer .pta-tick-sel{align-items:center;flex-wrap:wrap} #pta-drawer .pta-tick-sel input{margin-top:0} #pta-drawer .pta-tick-sel select{flex:1 1 180px;min-width:0;height:32px;border:1px solid #D9D1CF;border-radius:9px;background:#fff;padding:0 10px;font:500 13px/1 var(--e-sans,Inter,sans-serif);color:var(--e-ink,#1B1416)} #pta-drawer .pta-tick-sel select:focus-visible,#pta-drawer .pta-tick input:focus-visible{outline:2px solid var(--e-accent,#A24F6C);outline-offset:2px} #pta-drawer .pta-df{padding:16px 26px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--e-line,#EBE6E5);display:flex;gap:14px;align-items:center;flex-wrap:wrap} #pta-drawer .pta-df .pta-b1{height:36px;padding:0 18px;font-size:13px} @media (max-width:480px){ #pta-drawer .pta-f2,#pta-drawer .pta-cmp{grid-template-columns:1fr} } /* "Why not add them?" */ /* Fixed to the screen: the Platform scrolls main.main, never the window (peopletoadd.js, ptaPlacePop). */ #pta-pop{position:fixed;z-index:92;background:var(--e-paper,#FDFBFA);border:1px solid var(--e-line,#EBE6E5);border-radius:12px;box-shadow:0 10px 30px rgba(27,20,22,.12);padding:12px;width:230px;display:flex;flex-direction:column;gap:4px;font-family:Inter,-apple-system,'Segoe UI',sans-serif} #pta-pop .pta-cap{margin:2px 4px 6px;font:600 10.5px/1.2 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#6F676C} #pta-pop button{text-align:left;border:0;background:none;padding:8px;border-radius:8px;font:500 13px/1.2 Inter,sans-serif;color:#1B1416;cursor:pointer} #pta-pop button:hover{background:#F3EFEE} /* The strip: what just happened, and one thing to do about it. */ #pta-strip{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:260;transform:translate(-50%,20px);opacity:0;visibility:hidden;background:#2E1E24;color:#fff;border-radius:30px;padding:11px 16px 11px 18px;font:500 13px/1.3 Inter,-apple-system,'Segoe UI',sans-serif;display:flex;gap:14px;align-items:center;transition:opacity .22s,transform .22s,visibility 0s linear .22s;max-width:calc(100% - 32px);box-sizing:border-box} #pta-strip.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s,transform .22s} #pta-strip .pta-sb{border:0;background:none;color:#F0D6DE;font:600 12.5px/1 Inter,sans-serif;text-decoration:underline;text-underline-offset:3px;padding:0;cursor:pointer;white-space:nowrap} #pta-strip .pta-sb[hidden]{display:none} /* Home: the card for whoever is signed in (Home is .rk-home, so the tokens are there). */ #home-pta{margin:0 0 16px} #home-pta[hidden]{display:none} #home-pta .pta-hcard{background:var(--e-card);border:1px solid var(--e-line);border-radius:16px;padding:18px 20px;font-family:var(--e-sans)} #home-pta h2{margin:0;font-family:var(--e-didone);font-weight:400;font-size:23px;line-height:1.15;color:var(--e-ink)} #home-pta .pta-lead{margin:6px 0 10px;font-family:var(--e-serif);font-size:14.5px;line-height:1.45;color:var(--e-ink2)} #home-pta .pta-hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--e-line)} #home-pta .pta-who b{display:block;font-weight:600;font-size:13.5px;line-height:1.3;color:var(--e-ink)} #home-pta .pta-who span{display:block;color:var(--e-ink3);font-size:12px;overflow-wrap:anywhere} #home-pta .pta-acts{display:flex;gap:10px;align-items:center} #home-pta .pta-more{margin-top:10px} @media (max-width:560px){ #home-pta .pta-hrow{grid-template-columns:1fr} } /* Progress Reports: "+ N not on the Platform" under a colleague's Approaches (a span — the row is a button). */ #view-reports .ra-pta{display:block;margin-top:7px;color:var(--e-grad1);font:600 11.5px/1.2 var(--e-sans);text-decoration:underline;text-decoration-color:#E2C6D0;text-underline-offset:3px;cursor:pointer;width:max-content} #view-reports .ra-pta:hover{text-decoration-color:currentColor} #view-reports .ra-pta:focus-visible{outline:2px solid var(--e-accent);outline-offset:2px} @media (prefers-reduced-motion:reduce){ #pta-scrim,#pta-drawer,#pta-drawer.on,#pta-strip,#pta-strip.on{transition:none} }