/* Attio values measured off the live app. Do not re-author — see frontend/CLAUDE.md. */

@font-face{font-family:Inter;src:url("fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url("fonts/InterVariable-Italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
:root{
  --ink:rgb(16,17,18); --ink63:rgb(58,61,68); --ink55:rgb(78,82,90); --ink50:rgb(104,109,118);
  --hair:rgb(238,239,241); --rule:1px solid var(--hair);
  --side:rgb(251,251,251); --hover:rgba(0,0,0,.04); --hoverf:rgba(0,0,0,.02);
  --accent:rgb(38,109,240);
}
*{box-sizing:border-box}
html{font-size:10px}
body{margin:0;display:flex;height:100vh;overflow:hidden;background:#fff;color:var(--ink);
  font-family:Inter,-apple-system,sans-serif;font-size:14px;font-weight:500;line-height:20px;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
svg{display:block;flex:0 0 auto}
a{color:inherit;text-decoration:none}

nav{width:150px;flex:0 0 150px;background:var(--side);border-right:var(--rule);
  display:flex;flex-direction:column;overflow:hidden}
.ws{height:56px;display:flex;align-items:center;gap:8px;padding:1px 12px;transition:background-color 140ms}
.ws>span:last-child{font-size:16px;font-weight:600;letter-spacing:-0.32px;
  /* one line, always. A three-word seller name wrapped to three lines and pushed the
     search box down the rail — Attio truncates here rather than growing the header. */
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the seller's mark leads the page, so it outweighs the wordmark next to it.
   logo.dev ships a white-background square with the mark inset in its own
   margin; fetch_logos.py crops to the ink, so no extra padding is needed. */
.wsdot{width:26px;height:26px;border-radius:6px;flex:0 0 26px;object-fit:contain;padding:1px;
  background:#fff;box-shadow:rgb(238,239,241) 0 0 0 1px inset}
.srchwrap{padding:10px 12px 11px}
.srch{height:28px;width:100%;display:flex;align-items:center;gap:6px;padding:4px 6px;
  border-radius:8px;background:#fff;border:var(--rule);font:inherit;font-size:14px;color:var(--ink);
  outline:none;transition:box-shadow 140ms;letter-spacing:-0.14px}
.srch::placeholder{color:var(--ink55)}
.srch:focus{box-shadow:0 0 0 2px rgba(38,109,240,.16)}
.navlist{padding:0 8px;display:flex;flex-direction:column;gap:1px;overflow:auto}
.navitem{height:28px;display:flex;align-items:center;gap:8px;padding:0 6px;border-radius:6px;
  cursor:pointer;color:var(--ink);transition:background-color 140ms}
.navitem:hover{background:var(--hover)}
.navitem.on{background:var(--hover)}
.navitem svg{width:16px;height:16px}
.objico{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:30%;border:1px solid rgba(0,0,0,.06)}
.navsec{font-size:12px;line-height:16px;letter-spacing:-0.12px;color:var(--ink63);
  padding:14px 6px 4px;margin-left:30px;width:max-content}

main{flex:1;display:flex;flex-direction:column;min-width:0}
.tophdr{height:49px;display:flex;align-items:center;gap:2px;padding:0 12px;border-bottom:var(--rule)}
.crumb{display:flex;align-items:center;gap:8px;letter-spacing:-0.14px}
.crumb .sep{color:var(--ink50)}
.crumb a:hover{text-decoration:underline}
.objico.sq{border-radius:30%}

.body{flex:1;display:flex;min-height:0}
/* Attio's record column is 398px because it holds long field values; ours holds
   short structured facts, so it does not need the width. */
.mid{width:300px;flex:0 0 300px;border-right:var(--rule);overflow:auto;padding:12px 14px}
.rechdr{display:flex;align-items:center;gap:8px;height:32px;min-width:0}
.rechdr img{width:24px;height:24px;border-radius:6px;object-fit:contain;flex:0 0 24px}
.playlink{margin-left:auto;font-size:12.5px;font-weight:500;color:rgb(38,109,240);
  text-decoration:none;border:1px solid rgb(211,226,252);background:rgb(245,249,255);
  border-radius:7px;padding:5px 11px;white-space:nowrap}
.playlink:hover{background:rgb(235,243,255)}
.rechdr .nm{font-size:19px;font-weight:600;letter-spacing:-0.34px;line-height:25px;
  /* one line. "Prosperity Home Mortgage" wrapped to two and pushed the panel down;
     the full name is on the row above in the crumb, so an ellipsis costs nothing. */
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rechdr .spacer{margin-left:auto;display:flex;gap:4px}
.iconbtn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;cursor:pointer;color:var(--ink63);transition:background-color 140ms}
.iconbtn:hover{background:var(--hover)}
/* measured: 28px tall, radius 8, padding 4px 8px 4px 6px, gap 6, that 3-layer shadow */
.abtn{height:28px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 6px;
  border-radius:8px;background:#fff;border:0;cursor:pointer;font:inherit;font-size:14px;
  letter-spacing:-0.14px;color:var(--ink);
  box-shadow:rgba(28,40,64,.18) 0 0 2px 0,rgba(0,0,0,.04) 0 1px 3px 0;
  transition:background-color 140ms}
.abtn:hover{background:var(--hoverf)}
.abtn.grow{flex:1;justify-content:center}
.abtn.iq{width:28px;padding:0;justify-content:center;color:var(--ink63)}

.panel{border-top:var(--rule);padding:14px 0 4px}
.panel:first-of-type{border-top:0}
.ptitle{display:flex;align-items:center;gap:4px;font-size:12px;line-height:16px;
  letter-spacing:-0.12px;color:var(--ink63);cursor:pointer;user-select:none;margin-bottom:6px}
.ptitle .chev{transition:transform 140ms;font-size:12px;margin-left:4px;display:inline-block}
.panel.closed .chev{transform:rotate(-90deg)}
.panel.closed .pbody{display:none}
.pbody{display:flex;flex-direction:column}
.frow{min-height:32px;display:flex;align-items:flex-start;gap:8px;padding:6px 0}
.flabel{flex:0 0 92px;display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;
  letter-spacing:normal;color:var(--ink63);padding-top:2px}
.fvalue{flex:1;min-width:0;font-size:14px;line-height:20px;letter-spacing:-0.14px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fvalue.empty{color:var(--ink50)}
.cited{color:inherit;cursor:pointer;text-decoration:underline;
  text-decoration-color:rgba(0,0,0,.18);text-underline-offset:2.5px;
  text-decoration-skip-ink:auto;transition:text-decoration-color 120ms}
.cited:hover{text-decoration-color:var(--accent)}
.fvalue a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(0,0,0,.09);
  text-decoration-thickness:auto;text-underline-offset:1.96px;text-decoration-skip-ink:auto}
.fvalue a:hover{text-decoration-color:rgba(0,0,0,.35)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
/* measured: 22px tall, radius 7, padding 0 4px */
.chip{height:22px;display:inline-flex;align-items:center;padding:0 6px;border-radius:7px;
  font-size:12px;line-height:16px;letter-spacing:normal;color:var(--ink)}
/* Attio's own tag palette, same three as the list page */
.chip.p1{background:rgb(221,247,255)}
.chip.p2{background:rgb(255,243,204)}
.chip.p3{background:rgb(246,247,247)}
.chip.p1,.chip.p2,.chip.p3{height:24px;padding:0 9px;font-size:12.5px;font-weight:500}
.plink{font-size:12px;line-height:16px;letter-spacing:-0.12px;color:var(--ink55);cursor:pointer;padding:6px 0}
.plink:hover{color:var(--ink)}
.prow{display:flex;align-items:center;justify-content:space-between}
.empty{font-size:14px;letter-spacing:-0.14px;color:var(--ink50);padding:4px 0 8px}

/* right panel */
.right{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.tabbar{height:49px;flex:0 0 49px;display:flex;align-items:center;gap:4px;padding:0 12px;overflow:hidden;position:relative}
.tabmenu{position:fixed;z-index:999;display:none;flex-direction:column;gap:1px;background:#fff;
  border-radius:12px;padding:4px;transform-origin:0 0;
  box-shadow:rgba(28,40,64,.04) 0 0 0 1px,rgba(28,40,64,.12) 0 4px 8px -4px,rgba(24,41,75,.16) 0 4px 12px -2px}
.tabmenu.on{display:flex;animation:attioMenuIn .08s ease}
@keyframes attioMenuIn{0%{opacity:0;transform:scale(.97) translateY(-1px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.tabmenu .mi{display:flex;align-items:center;gap:6px;height:32px;padding:6px 8px;border-radius:8px;
  cursor:pointer;white-space:nowrap;font:500 14px/20px Inter,sans-serif;letter-spacing:-0.14px;color:rgb(16,17,18)}
.tabmenu .mi:hover{background:rgb(246,247,247)}
/* measured: 28px tall, radius 8, padding 4px 8px, gap 6; active carries a
   rgb(251,251,251) fill and a 1px rgb(238,239,241) inset ring, idle is bare */
.tab{height:28px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;
  border:0;background:transparent;cursor:pointer;font:inherit;font-size:14px;font-weight:500;
  letter-spacing:-0.14px;color:var(--ink63);white-space:nowrap;transition:background-color 140ms,box-shadow 140ms,color 140ms}
.tab:hover{background:var(--hoverf)}
.tab.on{background:rgb(251,251,251);box-shadow:rgb(238,239,241) 0 0 0 1px inset;color:var(--ink)}
.tab .cnt{color:rgb(80,81,85);font-size:10px;line-height:14px;letter-spacing:-0.2px}
.tabsep{width:1px;height:20px;background:var(--hair);margin:0 6px;flex:0 0 1px}
/* SECTIONS AS CARDS — a construction, not a copy, and the rule in CLAUDE.md says to
   say so. Attio's record page has no stacked-section pattern at all: it switches tabs,
   so each pane is short and a flat column is enough. This page keeps every section in
   the DOM so it survives a screenshot and a forward, which produces a long scroll that
   Attio never has to solve. Flat, the 19px title and the 13.5px body sat in one column
   with a hairline between them and the eye could not find a section boundary.
   Every value below is measured Attio, from the Highlights card and the active tab:
   white on rgb(251,251,251), radius 12, rgb(238,239,241) 1px inset ring, 12px gap.
   The composition is ours. */
.tabpanes{flex:1;overflow:auto;padding:14px 26px 28px 32px;background:#fff}
.sec{background:#fff;border-radius:12px;box-shadow:rgb(238,239,241) 0 0 0 1px inset;
  padding:18px 22px 20px;margin-bottom:10px}
.stitle{font-size:16px;font-weight:600;letter-spacing:-0.2px;color:var(--ink);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:0 0 12px;margin:0 0 2px}
.stitle{border-bottom:1px solid rgb(238,239,241)}
.stitle > span:first-child{position:relative;padding-left:13px}
.stitle > span:first-child::before{content:'';position:absolute;left:0;top:.34em;width:4px;height:.82em;
  border-radius:2px;background:rgb(38,109,240)}
#sec-whynow .stitle > span:first-child::before{background:rgb(249,117,20)}
#sec-who    .stitle > span:first-child::before{background:rgb(2,173,110)}
#sec-stack  .stitle > span:first-child::before{background:rgb(129,101,214)}
#sec-criteria .stitle > span:first-child::before{background:rgb(104,109,118)}
.stitle .va{cursor:pointer;font-size:12.5px;font-weight:400;line-height:16px;letter-spacing:-0.12px;color:var(--ink50)}
.stitle .va:hover{color:var(--ink)}
/* Highlights: measured 291x86 cards, white, radius 12, 1px inset ring */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{height:86px;background:#fff;border-radius:12px;box-shadow:rgb(238,239,241) 0 0 0 1px inset;
  display:flex;flex-direction:column}
.card .chead{display:flex;align-items:center;gap:8px;padding:10px 12px 0;color:var(--ink63)}
.card .clabel{flex:1;min-width:0;font-size:12px;line-height:16px;color:var(--ink63);
  letter-spacing:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .cval{padding:0 12px;margin-top:auto;margin-bottom:14px;font-size:14px;line-height:20px;
  letter-spacing:-0.14px;color:var(--ink)}
.card .cval.empty{color:var(--ink50)}
.feed{display:flex;flex-direction:column}
.frow2{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:14px;letter-spacing:-0.14px}
.frow2 .dot{width:16px;height:16px;flex:0 0 16px;color:var(--ink50)}
.frow2 .when{margin-left:auto;color:var(--ink50);font-size:12px;white-space:nowrap}
.frow2 b{font-weight:500}
.frow2 .muted{color:var(--ink63)}
.frow2 .val{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(0,0,0,.09);
  text-decoration-thickness:auto;text-underline-offset:1.96px;text-decoration-skip-ink:auto}
.frow2{gap:6px}
.zero{padding:120px 0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.zero .zt{font-size:14px;font-weight:500;letter-spacing:-0.14px;color:var(--ink)}
.zero .zs{font-size:14px;letter-spacing:-0.14px;color:var(--ink50);max-width:340px}
.zero .abtn{margin-top:10px}
.crit{display:flex;gap:9px;padding:11px 0;border-top:var(--rule)}
.cdot{flex:0 0 10px;font-size:9px;line-height:20px}
.cdot.ok{color:var(--accent)} .cdot.no{color:var(--ink50)}
.cbody{flex:1;min-width:0}
.cq{display:block;font-size:13px;line-height:19px;letter-spacing:-0.1px;color:var(--ink)}
.ca{display:block;font-size:13px;line-height:19px;letter-spacing:-0.1px;font-weight:500;color:var(--ink)}
.ca.fail,.ca.cannot_determine{color:var(--ink50)}
.ce{display:block;font-size:13px;line-height:19px;color:var(--ink63);margin-top:2px}
.cp{flex:0 0 auto;font-size:13px;line-height:21px;font-weight:500;color:var(--ink50);font-variant-numeric:tabular-nums}
.cp.pos{color:rgb(0,125,83)}
.idx{display:inline-block;min-width:17px;color:var(--ink50);font-variant-numeric:tabular-nums;font-weight:500}
.miss{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:var(--rule)}
.mt{flex:1;font-size:13px;line-height:19px;color:var(--ink63)}
.mx{flex:0 0 auto;font-size:13px;font-weight:500;color:rgb(235,59,59)}
.whynow{font-size:13.5px;line-height:20px;letter-spacing:-0.1px;color:var(--ink);padding:4px 0 2px;max-width:680px}
.verdict{font-size:13px;line-height:19px;letter-spacing:-0.1px;color:var(--ink);
  padding-top:11px;margin-top:3px;border-top:var(--rule)}
.para{font-size:13px;line-height:19.5px;letter-spacing:-0.06px;color:var(--ink63);padding-bottom:6px;max-width:680px}
.note{font-size:12.5px;line-height:18px;color:var(--ink63);padding-top:10px;margin-top:4px;border-top:var(--rule)}
.note.muted{color:var(--ink50)} .note b,.para b{font-weight:600;color:var(--ink)}
.org{margin:18px 0 6px}
/* Centred, so the chart reads as a pyramid: the most senior tier on top, each row centred
   under the one above. Left-aligning was tried on 2026-09-16 to stop a wrapped orphan
   reading as a reporting level, and it made the chart read as a list instead. The real fix
   was the tiering — splitting SVP from VP from director leaves rows of one to four, so a
   row almost never wraps. Two accounts in the whole app still do. */
.tier{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;position:relative;padding:16px 0 0}
.tier.linked::before{content:'';position:absolute;top:0;left:50%;width:1px;height:16px;
  background:rgb(219,220,224)}
.node{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:196px;min-height:78px;
  padding:12px 13px;background:#fff;border:1px solid rgb(230,231,234);border-radius:10px;
  cursor:pointer;text-align:left;font:inherit}
.node:hover{border-color:rgb(191,193,199);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.node.on{border-color:rgb(38,109,240);box-shadow:0 0 0 3px rgba(38,109,240,.12)}
.node.lead{border-color:rgb(249,117,20)}
.node.ext{background:rgb(252,252,253);border-style:dashed}
.nname{font-size:13.5px;font-weight:600;letter-spacing:-0.14px;color:var(--ink)}
.ntitle{font-size:11.5px;line-height:15px;color:var(--ink55)}
.nflag{margin-top:auto;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:rgb(180,74,0);background:rgb(254,238,225);border-radius:4px;padding:1px 6px}
.nflag.out{color:var(--ink55);background:rgb(240,241,243)}
.ext-row{border-top:1px dashed rgb(230,231,234);margin-top:18px;padding-top:20px}
.extlab{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#fff;padding:0 8px;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink50)}
.pdetail{margin-top:16px;padding:16px 18px;border:1px solid rgb(226,236,252);border-radius:10px;
  background:rgb(248,251,255)}
.pdtitle{font-size:13px;color:var(--ink63);margin-bottom:8px}
.pcontact .ct{display:inline-block;height:26px;line-height:26px;padding:0 10px;margin-right:6px;
  border-radius:6px;background:rgb(246,247,247);color:var(--ink);text-decoration:none;
  font-size:12.5px;font-variant-numeric:tabular-nums}
.pcontact .ct:hover{background:rgb(238,239,241)}
.gapbox{margin-top:20px;padding:14px 16px;border:1px dashed rgb(219,220,224);border-radius:10px}
.gapbox b{font-size:12.5px}
.gapbox p{font-size:12.5px;line-height:18px;color:var(--ink63);margin:6px 0 8px}
.bfacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  background:#fff;border-top:1px solid rgb(238,239,241);border-left:1px solid rgb(238,239,241);
  border-radius:10px;overflow:hidden;margin:20px 0 4px}
.bf{padding:11px 13px;border-right:1px solid rgb(238,239,241);
  border-bottom:1px solid rgb(238,239,241)}
.bfk{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink50)}
.bfv{font-size:13px;font-weight:600;letter-spacing:-0.1px;color:var(--ink);margin-top:3px;
  font-variant-numeric:tabular-nums}
.plmeta{display:flex;align-items:center;gap:12px;margin:14px 0 0}
.plstart{font-size:12px;color:var(--ink50)}
.plcast{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px;margin:18px 0 4px}
.plwho{border:1px solid rgb(232,233,236);border-radius:10px;padding:13px 14px}
.plwho b{font-size:13.5px;font-weight:600;letter-spacing:-0.14px}
.plwho .t{font-size:11.5px;color:var(--ink55);margin-top:2px}
.plwho .a{font-size:12.5px;line-height:18px;color:var(--ink63);margin-top:8px}
.plday{display:flex;align-items:center;gap:12px;margin:26px 0 11px}
.plday .n{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  background:rgb(240,241,243);border-radius:6px;padding:4px 10px}
.plday .ln{flex:1;height:1px;background:rgb(238,239,241)}
.plstep{border:1px solid rgb(232,233,236);border-left:3px solid rgb(38,109,240);border-radius:10px;
  padding:14px 16px;margin-bottom:10px}
.plstep.pl-li{border-left-color:rgb(0,119,181)}
.plstep.pl-ph{border-left-color:rgb(249,117,20)}
.plhd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.plhd b{font-size:13.5px;font-weight:600;letter-spacing:-0.14px}
.plhd .ty{font-size:11.5px;color:var(--ink55)}
.plsubj{font-size:13px;font-weight:600;margin-top:10px;letter-spacing:-0.1px}
.plcopy{font-size:13px;line-height:20px;white-space:pre-line;margin-top:8px;padding:11px 13px;
  background:rgb(250,250,251);border-radius:8px}
.plrw{display:grid;grid-template-columns:70px 1fr;gap:10px;margin-top:8px;font-size:11.5px;
  line-height:17px;color:var(--ink55)}
.plrw .k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink50)}
.plxref{margin-top:9px;padding:8px 11px;border-radius:8px;background:rgb(248,245,255);
  font-size:11.5px;line-height:17px;color:rgb(78,60,140)}
.person{padding:16px 17px;border:1px solid rgb(238,239,241);border-radius:10px;margin-top:10px;
  background:#fff}
.person:first-of-type{margin-top:14px}
.prow2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pname{font-size:15.5px;font-weight:600;letter-spacing:-0.18px;color:var(--ink)}
.ptitle2{font-size:12px;line-height:17px;color:var(--ink63);margin-top:3px;max-width:720px}
.powns{font-size:13px;line-height:20px;color:var(--ink63);margin-top:3px;max-width:720px}
.pcontact{font-size:13px;line-height:19px;color:var(--ink);margin-top:11px;padding-top:11px;border-top:1px solid rgb(243,244,246);font-variant-numeric:tabular-nums}
.pcontact .src{color:var(--ink50);font-size:12px;line-height:17px}
.pcontact.none{color:var(--ink50)}
.slab2{display:inline-block;min-width:112px;font-size:12px;line-height:19px;color:var(--ink50);
  text-transform:uppercase;letter-spacing:normal;vertical-align:top}
.pground{display:block;color:var(--ink50);font-size:12px;line-height:17px;margin-top:3px}
.pcaveat{font-size:12px;line-height:17px;color:var(--ink50);margin-top:5px;max-width:720px}
.chip.role-buyer{background:rgb(224,252,237)}
.chip.role-user{background:rgb(221,247,255)}
.chip.role-blocker{background:rgb(255,235,235)}
.tl{display:flex;gap:14px;padding:9px 0;border-top:var(--rule)}
.tldate{flex:0 0 86px;font-size:11.5px;line-height:18px;color:var(--ink50);font-variant-numeric:tabular-nums}
.tlev{flex:1;font-size:12.5px;line-height:18px;color:var(--ink63);max-width:760px}
/* The sub-head was rgb(104,109,118) over body text at rgb(58,61,68) — lighter than the
   thing it introduces, so it read as a caption under the paragraph above rather than as
   the start of the block below. Full ink, and the space above it is now larger than the
   space below it, which is what tells the eye which paragraph it belongs to. */
.sub{font-size:11px;font-weight:600;line-height:16px;letter-spacing:.06em;color:var(--ink);
  text-transform:uppercase;padding:22px 0 7px;margin-top:14px;border-top:var(--rule)}
.para.muted{font-size:12.5px;line-height:18px;color:var(--ink63)}
.para.lead{font-size:13.5px;line-height:20.5px;letter-spacing:-0.1px;color:var(--ink)}
.para .src{color:var(--ink50);font-size:12px;margin-left:6px}
/* Motion vocabulary is Attio's own, lifted from the captured app:
     fFiLVS  — translateY(12px) scale(.95) → 0/1, 200ms   (content entering)
     140ms   — every hover/background/colour transition
     .08s    — menus and overlays
   Nothing here is a duration I picked. */
.tabpanes{scroll-behavior:smooth}
/* No scroll-reveal. Attio does not animate its record content in, and dressing
   sections with a keyframe borrowed from its toast/panel role read as invented -
   which it was. Smooth scroll on an anchor is behaviour, not decoration, so it
   stays; everything else here already animates on Attio's measured 140ms. */
.tabpanes{scroll-behavior:smooth}
.sec{scroll-margin-top:64px}   /* the card treatment is declared with .tabpanes above */
@media (prefers-reduced-motion: reduce){ .tabpanes{scroll-behavior:auto} }
a.tab .idxdot{transition:opacity 140ms}
@media (prefers-reduced-motion: reduce){
  .tabpanes{scroll-behavior:auto}
  .sec{opacity:1}
  .sec.in,.sec.in .crit,.sec.in .person,.sec.in .tl,.sec.in .miss{animation:none}
}
.restated{font-size:13px;line-height:19px;color:var(--ink63);padding-top:9px;margin-top:9px;border-top:var(--rule)}
.ppress{font-size:12.5px;line-height:19px;color:var(--ink63);margin-top:4px;max-width:720px}
a.tab{text-decoration:none}
.stackrow{padding:14px 0;border-top:var(--rule)}
.sarea{font-size:13px;font-weight:600;letter-spacing:-0.1px;color:var(--ink);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.srun{font-size:12px;font-weight:500;color:var(--ink50);letter-spacing:normal}
.sfact{font-size:13px;line-height:19.5px;letter-spacing:-0.1px;color:var(--ink);margin-top:5px;max-width:780px}
.schange,.shedge{font-size:12.5px;line-height:18px;margin-top:6px;max-width:780px;display:flex;gap:9px;align-items:baseline}
.schange{color:var(--ink63)} .shedge{color:var(--ink50)}
.ifl{display:inline-block;min-width:26px;color:var(--ink50);font-weight:500}
.found{display:inline-block;min-width:104px;font-size:12px;color:var(--ink50);
  text-transform:uppercase;letter-spacing:normal;vertical-align:top}
.verdictchip{flex:0 0 auto;height:22px;display:inline-flex;align-items:center;padding:0 8px;
  border-radius:7px;font-size:12px;font-weight:500;letter-spacing:normal}
.verdictchip.ok{background:rgb(224,252,237);color:rgb(0,105,70)}
.verdictchip.no{background:rgb(255,235,235);color:rgb(180,40,40)}
.shedge.warn .slab{color:rgb(235,59,59);opacity:1}
.shedge.warn{color:var(--ink63)}
.elsewhere{height:22px;display:inline-flex;align-items:center;padding:0 6px;border-radius:7px;
  font-size:12px;background:rgb(246,247,247);color:var(--ink63)}
.slab{flex:0 0 88px;font-size:11px;line-height:18px;letter-spacing:normal;color:var(--ink50);text-transform:uppercase}
.shedge .slab{color:rgb(235,59,59);opacity:.75}
.dayhdr{font-size:12px;line-height:16px;color:var(--ink63);padding:12px 0 2px}

/* sidebar collapse. The toggle lives in the top bar so it stays reachable once
   the rail is gone. Width transition uses the app's own 140ms. */
nav{transition:width 140ms ease,flex-basis 140ms ease}
body.navhidden nav{width:0;flex-basis:0;border-right:0;overflow:hidden}
.navtoggle{width:28px;height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;border-radius:8px;cursor:pointer;color:var(--ink63);
  margin-right:4px;transition:background-color 140ms}
.navtoggle:hover{background:var(--hover)}


/* ── table, from the list view ── */

@font-face{font-family:Inter;src:url("fonts/InterVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url("fonts/InterVariable-Italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
:root{
  --ink:rgb(16,17,18); --ink63:rgba(0,0,0,.63); --ink55:rgba(0,0,0,.55); --ink50:rgba(0,0,0,.5);
  --hair:rgb(238,239,241); --rule:1px solid var(--hair);
  --side:rgb(251,251,251); --hover:rgba(0,0,0,.04); --hoverf:rgba(0,0,0,.02);
  --accent:rgb(38,109,240); --row:36px; --head:40px; --padx:12px;
  --tint:rgb(251,249,255);   /* every column but the frozen one */
}
*{box-sizing:border-box}
html{font-size:10px}
body{margin:0;display:flex;height:100vh;overflow:hidden;background:#fff;color:var(--ink);
  font-family:Inter,-apple-system,sans-serif;font-size:14px;font-weight:500;line-height:20px;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
svg{display:block;flex:0 0 auto}
a{color:inherit;text-decoration:none}

.objico{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:30%;border:1px solid rgba(0,0,0,.06)}

nav{width:150px;flex:0 0 150px;background:var(--side);border-right:var(--rule);
  display:flex;flex-direction:column;overflow:hidden}
.ws{height:56px;display:flex;align-items:center;gap:8px;padding:1px 12px;cursor:pointer;transition:background-color 140ms}
.ws>span:last-child{font-size:16px;font-weight:600;letter-spacing:-0.32px;
  /* one line, always. A three-word seller name wrapped to three lines and pushed the
     search box down the rail — Attio truncates here rather than growing the header. */
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the seller's mark leads the page, so it outweighs the wordmark next to it.
   logo.dev ships a white-background square with the mark inset in its own
   margin; fetch_logos.py crops to the ink, so no extra padding is needed. */
.wsdot{width:26px;height:26px;border-radius:6px;flex:0 0 26px;object-fit:contain;padding:1px;
  background:#fff;box-shadow:rgb(238,239,241) 0 0 0 1px inset}
.navlist{padding:0 8px;display:flex;flex-direction:column;gap:1px;overflow:auto}
.navitem{height:28px;display:flex;align-items:center;gap:8px;padding:0 6px;border-radius:6px;
  cursor:pointer;color:var(--ink);transition:background-color 140ms}
.navitem:hover{background:var(--hover)}
.navitem.on{background:var(--hover)}
.navitem svg{width:16px;height:16px}
.navsec{font-size:12px;line-height:16px;letter-spacing:-0.12px;color:var(--ink63);
  padding:14px 6px 4px;margin-left:30px;width:max-content}
/* counts in the rail. Attio has no count there, so this borrows the value it
   uses for a count beside a tab label. */
.navitem .nc{margin-left:auto;color:rgb(80,81,85);font-size:10px;line-height:14px;letter-spacing:-0.2px}
main{flex:1;display:flex;flex-direction:column;min-width:0}
.tophdr{height:49px;display:flex;align-items:center;gap:2px;padding:0 12px;border-bottom:var(--rule)}
/* the selectivity claim, as a line of text - this is the job the tab counts
   were doing badly */
.viewhead{padding:14px 12px 2px;max-width:820px}
.viewdesc{font-size:14px;line-height:20px;letter-spacing:-0.14px;color:var(--ink63)}
.viewdesc b{font-weight:500;color:var(--ink)}
.runline{padding:8px 12px 0;font-size:12px;line-height:16px;letter-spacing:-0.12px;color:var(--ink50)}
.runline b{font-weight:500;color:var(--ink63)}
.sellermark{display:flex;align-items:center;gap:8px;margin-right:20px;
  font-size:16px;font-weight:600;letter-spacing:-0.32px;color:var(--ink)}
.sellermark img{width:24px;height:24px;border-radius:6px;object-fit:contain;
  background:#fff;box-shadow:rgb(238,239,241) 0 0 0 1px inset}
/* view tabs, on the tab chrome measured off Attio's record page */
.viewtabs{display:flex;align-items:center;gap:4px}
.vsep{width:1px;height:20px;background:var(--hair);margin:0 6px;flex:0 0 1px}
.vtab{height:28px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;
  border:0;background:transparent;cursor:pointer;font:inherit;font-size:14px;font-weight:500;
  letter-spacing:-0.14px;color:var(--ink63);white-space:nowrap;
  transition:background-color 140ms,box-shadow 140ms,color 140ms}
.vtab:hover{background:var(--hoverf)}
.vtab.on{background:rgb(251,251,251);box-shadow:rgb(238,239,241) 0 0 0 1px inset;color:var(--ink)}
.vtab .vc{color:rgb(80,81,85);font-size:10px;line-height:14px;letter-spacing:-0.2px}
/* with the rail gone the table would butt against the window edge */

.crumb{display:flex;align-items:center;gap:8px}
.btn{height:28px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;
  letter-spacing:-0.14px;
  border:var(--rule);background:#fff;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;
  transition:background-color 140ms,box-shadow 140ms}
.btn:hover{background:var(--hoverf)}
.btn.ghost{border-color:transparent}
.btn.ghost:hover{background:var(--hover)}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn.primary:hover{background:#2f61d6}
.btn svg{width:16px;height:16px}
.toolbar{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:12px;flex:0 0 auto}
.toolbar2{justify-content:flex-start}
.dim{color:var(--ink63)}
.tgroup{display:flex;align-items:center;gap:8px}

.scroll{flex:1;overflow:auto}
table{border-collapse:separate;border-spacing:0;table-layout:fixed}
/* Attio's column headers are NOT grey: measured rgb(16,17,18) at weight 500 with
   letter-spacing NORMAL, while the body cells are tracked in at -0.14px. Rendering
   them grey and tracked is what made this read as a different typeface. */
/* the header band stays white; only the data cells carry the tint - measured
   down a clear vertical slice of the captured page, white to y=186 then
   rgb(251,249,255) from the first row on */
th{height:var(--head);padding:0 var(--padx);text-align:left;font-weight:500;color:var(--ink);
  letter-spacing:normal;background:#fff;
  border-top:var(--rule);border-bottom:var(--rule);position:sticky;top:0;z-index:3;
  white-space:nowrap;cursor:pointer;user-select:none;transition:background-color 140ms}
th:hover{background:var(--hoverf)}
th.menuopen{background:rgb(246,247,247)}
th .inner{display:flex;align-items:center;gap:6px;overflow:hidden}
/* Attio keeps a column name on one line and truncates it, because a name there is typed
   by a person and is short. Ours are written by the rules document — "2025 origination
   volume", "Published closing dependencies" — so truncation left two columns both
   reading "2025 orig...". This is a construction, not a copy: two lines at 12px inside
   the same 40px header, so the row rhythm is unchanged and the whole name is readable. */
th .inner span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;white-space:normal;font-size:12px;line-height:14px;
  letter-spacing:-0.06px;word-break:normal;overflow-wrap:normal;hyphens:none}
th .sortmark{margin-left:auto;font-size:9px;color:var(--ink50)}
th.addcol{width:36px;text-align:center;color:var(--ink50);font-size:15px}
th.addcol .inner{justify-content:center}
th.addcol.has{color:var(--accent)}
/* measured on the live app: a 7px transparent hit area sitting on the 1px
   divider, showing a 3px accent bar while hovered or dragging */
th .grip{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:9}
th .grip::after{content:'';position:absolute;left:2px;top:0;bottom:0;width:3px;
  background:transparent;transition:background-color 120ms}
th .grip:hover::after,th .grip.dragging::after{background:var(--accent)}
td{height:var(--row);padding:8px var(--padx) 0;border-bottom:var(--rule);border-right:var(--rule);
  background:var(--tint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
tbody tr:hover td{background:rgb(246,244,250)}
tbody tr:hover td.sticky{background:rgb(250,250,250)}
th.sticky{background:#fff}
th.sticky:hover{background:rgb(250,250,250)}
th.sticky,td.sticky{position:sticky;left:0;z-index:2;background:#fff;
  border-right:1px solid rgba(0,0,0,.11);
  box-shadow:3px 0 6px -3px rgba(28,40,64,.13)}
th.sticky{z-index:4}
.namecell{display:flex;align-items:center;gap:8px}
/* Attio's row logos are square favicons; ours are a mix of marks and wordmarks,
   and a wide wordmark crushed into 16px is unreadable. Same tile as the seller
   mark: a white square with the hairline ring, logo contained inside it. */
.namecell img{width:20px;height:20px;border-radius:5px;flex:0 0 20px;object-fit:contain;
  background:#fff;padding:2px;box-shadow:rgb(238,239,241) 0 0 0 1px inset}
.namecell a{text-decoration:underline;text-decoration-color:rgba(0,0,0,.09);
  text-decoration-thickness:auto;text-underline-offset:1.96px;text-decoration-skip-ink:auto}
.namecell a:hover{text-decoration-color:rgba(0,0,0,.35)}
.num{display:block;text-align:right;font-variant-numeric:tabular-nums}
.num .of{color:var(--ink50);font-size:12px}
.num .live{color:var(--accent)}
.ring{display:flex;align-items:center;gap:8px}
.ring svg{width:20px;height:20px;flex:0 0 20px}
.ring .rt{font-variant-numeric:tabular-nums;font-weight:500}
.ring .rt{font-size:15px}
.ring .rs{font-size:12px;color:var(--ink50)}
.num.none,.num .none{color:rgba(0,0,0,.24);font-weight:400}   /* nothing published: a quiet short dash, not a black em dash */
.num .cited{color:inherit}
.acctname{overflow:hidden;text-overflow:ellipsis;
  text-decoration:underline;text-decoration-color:rgba(0,0,0,.09);
  text-underline-offset:1.96px;text-decoration-skip-ink:auto}
.acctname:hover{text-decoration-color:rgba(0,0,0,.35)}
.deeplink{display:inline-flex;align-items:center;gap:6px;color:var(--accent);
  text-decoration:underline;text-decoration-color:rgba(0,0,0,.09);
  text-underline-offset:1.96px;text-decoration-skip-ink:auto}
.deeplink:hover{text-decoration-color:rgba(0,0,0,.35)}
.deeplink .tick{color:rgb(0,125,83);font-size:13px;font-weight:600}
.chip{height:22px;display:inline-flex;align-items:center;padding:0 6px;border-radius:7px;
  font-size:12px;line-height:16px;letter-spacing:normal;color:var(--ink);white-space:nowrap}
/* Attio's tag palette, read off its Categories field */
.chip.p1{background:rgb(221,247,255)}
.chip.p2{background:rgb(255,243,204)}
.chip.p3{background:rgb(246,247,247)}
.chip.p1,.chip.p2,.chip.p3{height:24px;padding:0 9px;font-size:12.5px;font-weight:500}
.prio{display:inline-flex;align-items:center;cursor:default}
.link{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(0,0,0,.09);
  text-decoration-thickness:auto;text-underline-offset:1.96px;text-decoration-skip-ink:auto}
.link:hover{text-decoration-color:rgba(0,0,0,.35)}

/* The open cell. Every value here was measured off the live app rather than
   authored (frontend/reference/behaviour2/): a SINGLE click opens it, it is
   drawn 1px outside the cell it belongs to, and there is NO animation at all -
   transition-duration on all three of Attio's layers is 0s, it simply appears.
   Attio composes it as a #266DF0 wash at 4% over white under a 1px #266DF0
   border; the text layer is a scroll area, so a long value scrolls instead of
   growing without limit. Selection and expansion are the same thing here -
   there is no separate selection ring. */
#cellpop{position:fixed;z-index:60;visibility:hidden;box-sizing:border-box;
  padding:8px 12px;
  font:500 14px/20px Inter,sans-serif;letter-spacing:-0.14px;color:rgb(16,17,18);
  white-space:pre-wrap;overflow-wrap:anywhere;
  border:1px solid #266DF0;border-radius:4px;
  background:linear-gradient(rgba(38,109,240,.04),rgba(38,109,240,.04)),#fff;
  max-height:320px;overflow:auto}
#cellpop.on{visibility:visible}
/* a cited claim: ordinary text that happens to be clickable. The URL is never
   shown - the sentence is the citation. */
.cited{color:inherit;cursor:pointer;text-decoration:underline;
  text-decoration-color:rgba(0,0,0,.18);text-underline-offset:2.5px;
  text-decoration-skip-ink:auto;transition:text-decoration-color 120ms}
.cited:hover{text-decoration-color:var(--accent)}
#cellpop .cited{display:block}

/* Menus. Every value measured off the live app (behaviour2/): panel 12px radius,
   4px padding, 1px gap, that four-layer shadow; items 32px tall at 8px radius,
   6px 8px padding, 6px gap, hover rgb(246,247,247); separators 1px #EEEFF1.
   The open animation is Attio's own keyframe, lifted verbatim - 0.08s ease. */
@keyframes attioMenuIn{
  0%{opacity:0;transform:scale(.97) translateY(-1px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
.amenu{position:fixed;z-index:999;display:none;flex-direction:column;gap:1px;
  background:#fff;border-radius:12px;padding:4px;min-width:0;
  box-shadow:rgba(28,40,64,.04) 0 0 0 1px,rgba(28,40,64,.12) 0 4px 8px -4px,
             rgba(24,41,75,.16) 0 4px 12px -2px;
  transform-origin:0 0}
.amenu.on{display:flex;animation:attioMenuIn .08s ease}
.amenu .mi{display:flex;align-items:center;gap:6px;height:32px;padding:6px 8px;
  border-radius:8px;cursor:pointer;white-space:nowrap;
  font:500 14px/20px Inter,sans-serif;letter-spacing:-0.14px;color:rgb(16,17,18)}
.amenu .mi:hover{background:rgb(246,247,247)}
.amenu .msep{height:1px;background:rgb(238,239,241);margin:4px 0}
.hovercard{position:fixed;z-index:1200;display:none;background:#fff;border-radius:12px;
  padding:10px 16px 12px;max-width:470px;transform-origin:0 0;
  box-shadow:rgba(28,40,64,.04) 0 0 0 1px,rgba(28,40,64,.12) 0 4px 8px -4px,
             rgba(24,41,75,.16) 0 4px 12px -2px}
.hovercard.on{display:block;animation:attioMenuIn .08s ease}
:is(.hovercard,.drawer,.tabpanes) .hh{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:11px;line-height:15px;letter-spacing:normal;color:var(--ink63);padding-bottom:6px}
:is(.hovercard,.drawer,.tabpanes) .hr2{display:flex;gap:7px;padding:6px 0;border-top:var(--rule)}
:is(.hovercard,.drawer,.tabpanes) .hv{flex:0 0 10px;height:16px;margin-top:0;font-size:9px;line-height:18px}
:is(.hovercard,.drawer,.tabpanes) .hb{flex:1;min-width:0}
:is(.hovercard,.drawer,.tabpanes) .hn{font-size:13px;line-height:18px;letter-spacing:-0.13px;color:var(--ink)}
/* the event date beside its signal name: secondary, never competing with the sentence below */
:is(.hovercard,.drawer,.tabpanes) .hwhen{margin-left:6px;font-size:11px;letter-spacing:normal;color:var(--ink50);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the decision the event puts on somebody's desk, and whose. The event alone is news; these two
   are why a rep phones. Monitor writes both on every fire and the card showed neither. */
/* monitor v20's one line on why this account sits where it does in the call order */
:is(.hovercard,.drawer,.tabpanes) .hrank{padding:2px 0 9px;font-size:13px;line-height:18px;letter-spacing:-0.12px;color:var(--ink)}
:is(.hovercard,.drawer,.tabpanes) .hdec{margin-top:3px;font-size:11px;line-height:15px;letter-spacing:normal;color:var(--ink63)}
:is(.hovercard,.drawer,.tabpanes) .howner{margin-left:6px;color:var(--ink50)}
:is(.hovercard,.drawer,.tabpanes) .howner:before{content:'— '}
:is(.hovercard,.drawer,.tabpanes) .he{font-size:11px;line-height:15px;letter-spacing:normal;color:var(--ink50);margin-top:1px}
:is(.hovercard,.drawer,.tabpanes) .hp{flex:0 0 auto;font-size:12px;color:var(--ink50);font-variant-numeric:tabular-nums;
  margin-top:0;font-weight:500}
:is(.hovercard,.drawer,.tabpanes) .hp.pos{color:rgb(0,125,83)}
:is(.hovercard,.drawer,.tabpanes) .ha{display:block;font-size:13px;line-height:18px;letter-spacing:-0.13px;
  font-weight:500;color:var(--ink)}
:is(.hovercard,.drawer,.tabpanes) .ha.fail,.hovercard .ha.cannot_determine{color:var(--ink50)}
:is(.hovercard,.drawer,.tabpanes) .he.cited{display:block;color:var(--ink63)}
:is(.hovercard,.drawer,.tabpanes) .foot{font-size:11px;line-height:15px;color:var(--ink50);padding-top:6px;border-top:var(--rule)}
:is(.hovercard,.drawer,.tabpanes) .caveat{font-size:12px;line-height:17px;color:var(--ink63);padding:7px 0 0;border-top:var(--rule)}
:is(.hovercard,.drawer,.tabpanes) .miss{display:flex;align-items:baseline;gap:12px;padding:6px 0;border-top:var(--rule)}
:is(.hovercard,.drawer,.tabpanes) .mt{flex:1;font-size:12px;line-height:17px;color:var(--ink63)}
:is(.hovercard,.drawer,.tabpanes) .idx{display:inline-block;min-width:15px;color:var(--ink50);
  font-variant-numeric:tabular-nums;font-weight:500}
:is(.hovercard,.drawer,.tabpanes) .mx{flex:0 0 auto;font-size:12px;line-height:17px;font-weight:500;color:rgb(235,59,59)}
:is(.hovercard,.drawer,.tabpanes) .verdict{font-size:13px;line-height:18px;letter-spacing:-0.13px;color:var(--ink);
  padding-top:8px;margin-top:2px;border-top:var(--rule)}
:is(.hovercard,.drawer,.tabpanes) .whynow{font-size:13px;line-height:19px;letter-spacing:-0.13px;color:var(--ink);
  padding:8px 0 2px;border-top:var(--rule)}
:is(.hovercard,.drawer,.tabpanes) .matched{font-size:11px;line-height:15px;color:var(--ink50);padding-top:8px;
  margin-top:8px;border-top:var(--rule)}
:is(.hovercard,.drawer,.tabpanes) .matched b{font-weight:500;color:var(--ink63)}
.dotok{color:rgb(38,109,240)} .dotno{color:var(--ink50)}
.amenu .mhead{padding:6px 8px 4px;font:500 12px/16px Inter,sans-serif;color:var(--ink50)}


/* ── the play view ──────────────────────────────────────────────────────────
   Attio has no sequence surface, so these are constructed — from its own tokens,
   not from scratch. Channel is a left border colour so the rhythm of the sequence
   is readable while scrolling. */
.pw{max-width:760px;padding:22px 0 90px}
.thes{font-size:14px;line-height:22px;margin:0;max-width:700px;color:var(--ink)}
.bar{display:flex;align-items:center;gap:10px;margin:16px 0 0;flex-wrap:wrap}
.cast{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:11px;margin:22px 0 0}
/* THE PLAY — structure lifted from Wyllo-demo/frontend/play_view.html, which is our own
   prior build and the shape the operator is asking for; the values are this app's Attio
   tokens rather than Wyllo's. Attio has no pattern for a coordinated-play page, so the
   composition is a construction and is stated as one, per frontend/CLAUDE.md. */
/* The upper page, rebuilt 2026-08-31 on the same measured Attio values as the sequence.
   What was here used the devices PLAY_PAGE.md lists as tells of generated design: an uppercase
   tracked section heading, a grid of identical cards with a circle on top and a badge above the
   name, outlined uppercase role chips in the default categorical ramp, and 11.5px grey on
   content. All four are gone. */
.strat{background:#fff;border:1px solid rgb(230,231,234);border-radius:12px;
  padding:18px 20px;margin-bottom:26px}
.stoprow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 11px}
.stoprow h1{font-size:19px;font-weight:600;letter-spacing:-0.38px;line-height:25px;margin:0;color:var(--ink)}
.sdom{font-size:13px;color:var(--ink50)}
.sgap{flex:1}
.sline{margin:12px 0 0;font-size:12px;font-weight:500;line-height:16px;letter-spacing:-0.12px;
  color:var(--ink63)}
/* the thesis is the lede and carries no label; the three under it answer a question each, in the
   same inline-label treatment the people rows use. Ordered the way the reader asks. The wedge
   used to come first, so the pitch arrived before the reason for it.
   Labels: Current state / Our angle / Why it lands. Current state is the near-universal one,
   from Gap Selling and every account-planning template; "what's our angle on this account" is how
   reps talk. Two earlier sets were rejected. The first was invented outright. The second was
   picked by counting words in this repo, which is worse than it sounds: the repo is a system
   naming its own internals, and the prompt itself calls wedge and thesis "our filing words and
   our plumbing, and a colleague being briefed hears none of it". */
.sthesis{margin:12px 0 0;font-size:14px;font-weight:500;line-height:22px;letter-spacing:-0.14px;
  color:var(--ink);max-width:68ch}
/* the reasoning read behind a 2px rule, which is a device the reader has to learn. It is just
   the quieter half of the argument, so it is set quieter and nothing else. */
.sreason{margin:14px 0 0;font-size:13.5px;font-weight:400;line-height:21px;letter-spacing:-0.14px;
  color:var(--ink);max-width:72ch}
.sreason b{font-weight:500;color:var(--ink50);margin-right:8px}
.swin{margin-top:14px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:-0.12px;
  color:var(--ink50);font-variant-numeric:tabular-nums}
/* a section heading: the rail heading Attio uses, measured. Not uppercase, not tracked out. */
.psec{font-size:14px;font-weight:600;letter-spacing:-0.28px;line-height:20px;color:var(--ink);
  margin:30px 0 10px;padding-bottom:9px;border-bottom:var(--rule)}

/* the people. Rows, not a card grid — the grid was four identical objects competing for the
   eye when the reader wants to read down a list. */
.cast{display:flex;flex-direction:column}
/* Two columns. Three squeezed the prose into a 250px ribbon eight lines tall. */
.wc{display:flex;gap:28px;align-items:flex-start;padding:18px 0;border-bottom:var(--rule)}
.wc:last-child{border-bottom:0}
.wchead{flex:0 0 250px;min-width:0}
.wcav{width:24px;height:24px;flex:0 0 24px;border-radius:50%;color:#fff;font-size:10px;
  font-weight:640;display:inline-flex;align-items:center;justify-content:center;
  vertical-align:-6px;margin-right:8px}
.wcmeta{display:inline;min-width:0}
.wcname{font-size:14px;font-weight:600;letter-spacing:-0.28px;line-height:20px;color:var(--ink)}
.wcname a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(0,0,0,.22);
  text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color 140ms}
.wcname a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.wctitle{display:block;font-size:13px;line-height:19px;color:var(--ink);margin-top:4px}
/* Attio's own tag chip: 22px, radius 7, 12px, no uppercase and no tracking */
/* the role is a classification the reader wants, so it reads at full ink. Attio's chip ground
   at .63 text was invisible, which is the whole point of a chip defeated. One neutral ground,
   not a hue per role — a colour ramp here is the categorical-palette tell. */
.rolechip{display:inline-flex;align-items:center;height:20px;margin-left:8px;padding:0 7px;
  border-radius:6px;font-size:11.5px;font-weight:500;letter-spacing:-0.12px;
  background:rgb(240,241,243);color:var(--ink);vertical-align:1px}
.wccontact{display:flex;flex-direction:column;gap:1px;margin-top:9px;font-size:13px;line-height:19px}
.wccontact a{color:var(--ink);text-decoration:none}
.wccontact a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.wctouch{margin-top:10px;font-size:12px;font-weight:500;line-height:18px;letter-spacing:-0.12px;
  color:var(--ink50);font-variant-numeric:tabular-nums}
.wcch{display:inline-flex;gap:6px;margin-left:7px;vertical-align:-2px}
.wcbody{flex:1 1 auto;min-width:0;max-width:640px}
/* the label runs INLINE, so the sentence keeps the full measure instead of wrapping in a gutter.
   All three carry one, including the angle: unlabelled it read as a fragment nobody could place. */
.wcangle{font-size:13.5px;font-weight:400;line-height:21px;letter-spacing:-0.14px;color:var(--ink)}
.wcowns,.wcwhy{margin-top:11px;font-size:13px;line-height:20px;letter-spacing:-0.14px;
  color:var(--ink)}
.wcangle b,.wcowns b,.wcwhy b{font-weight:500;color:var(--ink50);margin-right:7px}
/* the call script: the words said aloud, in order. The two rows carrying account
   research are marked so a reader sees which words came from the run. */
/* The call breaks where the other person speaks: you earn the time, you use it, and there is
   a third thing you say only if they refuse. Three runs of beats, each beat a labelled line.
   Attio has NO pattern for a section heading inside a card — .scop is a construction from the
   nearest measured role, the Subject label's own values over a hairline. */
.script{display:block}
.scop{display:block;padding:16px 12px 6px;font-size:12px;font-weight:500;line-height:16px;
  letter-spacing:-0.12px;color:var(--ink63);border-top:1px solid rgb(230,231,234);margin-top:-1px}
.scg:first-child .scop{border-top:0;margin-top:0;padding-top:14px}
.scr{display:flex;gap:12px;padding:12px;border-bottom:1px solid rgb(230,231,234);
  align-items:baseline}
.scg:last-child .scr:last-child{border-bottom:0}
.scr .w{flex:1 1 auto;min-width:0;max-width:600px;
  font-size:13.5px;font-weight:400;line-height:21px;letter-spacing:-0.14px;color:var(--ink)}
.scr .k{flex:0 0 118px;order:-1;font-size:12px;font-weight:500;line-height:16px;
  letter-spacing:-0.12px;color:var(--ink50)}
/* every account fact in the message, linked to the page it was read on */
/* Per-line provenance. Solid underline = the line rests on a document, click it.
   Dotted = a judgement, hover shows what it is grounded in. Both are the site's one
   existing .cited token set. Attio annotates nothing inside prose, so citations inside
   message copy are a construction — stated per frontend/CLAUDE.md.
   Underlines stay hidden until the pointer enters the step, because an email with three
   of five lines underlined stops reading as something a rep would send, and that is the
   card's first job. Reveal at Attio's measured 140ms. */
.cp.prov .ln{display:block}
.cp.prov .ln + .ln{margin-top:13px}
.cp.prov .cited{text-decoration-color:transparent;transition:text-decoration-color 140ms}
.st:hover .cp.prov .cited{text-decoration-color:rgba(0,0,0,.28)}
.st:hover .cp.prov .cited:hover{text-decoration-color:var(--accent)}
.judged{text-decoration:underline dotted transparent;text-underline-offset:2.5px;
  transition:text-decoration-color 140ms;cursor:help}
.st:hover .judged{text-decoration-color:rgba(0,0,0,.22)}
.judged:hover{text-decoration-color:var(--ink50)}
@media (prefers-reduced-motion: reduce){ .cp.prov .cited,.judged{transition:none} }
.quo{margin-top:9px;padding:9px 12px;border-left:2px solid rgb(219,220,224);
  font-size:12.5px;line-height:18.5px;color:var(--ink63);background:rgb(251,251,251);border-radius:0 8px 8px 0}
.quo .qd{display:block;margin-top:5px;font-size:11px;color:var(--ink50);font-variant-numeric:tabular-nums}
.evid{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:12px;
  border-top:var(--rule);font-size:13px;line-height:19px;letter-spacing:-0.14px;color:var(--ink)}
.evid .cited{color:var(--ink)}
.evid .cited:hover{color:var(--ink)}
.box.ok{border-color:rgb(210,238,224)}
.cvs{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 2px;font-size:11.5px;color:var(--ink63)}
.cvs i{font-style:normal;color:var(--ink50);margin-right:5px}
.cic{width:13px;height:13px;flex:0 0 13px;fill:currentColor;color:var(--ink50);--color:currentColor}
.st .hic .cic{fill:var(--fg);--color:var(--fg)}
.st .h .cic{color:var(--c,var(--ink50));width:14px;height:14px;flex:0 0 14px;align-self:center}

/* ── THE SEQUENCE ──────────────────────────────────────────────────────
   Rebuilt on Attio's OWN sequence editor, captured at reference/sequence/ and measured
   from its computed styles. Every value here came off that page.
     column ground rgb(251,251,251) · card white, r12, 1px rgb(230,231,234), NO shadow
     header 40px, pad 0 10px, gap 6 · glyph 20px r6, tint fill + 1px border a step darker
     both header runs 12/500/-0.12px, full ink then .63 · body 14/500/24px/-0.14px
     a labelled line: pad 12, gap 12, label 12/500 at .5, value at 14, hairline under
     the interval: a white pill 184x30 r9 on a connector that exists only in the gap
   rgb(238,239,241) is the PAGE hairline; rgb(230,231,234) is the CARD border. Two roles. */
/* No container. rgb(251,251,251) is Attio's editor ground and it is measured, but there it is a
   full-height COLUMN between the nav and the rail — a region, not an object. Giving it a border
   and a radius turned it into a grey rounded card holding white cards, which is a shape Attio
   never draws and which PLAY_PAGE.md lists as a tell. The steps sit on the page; the day labels,
   the 8px gaps and the connector carry the structure. */
.flow{margin-top:6px}
.dayg{padding:0}
.day{font-size:12px;font-weight:500;letter-spacing:-0.12px;color:var(--ink63);
  padding:14px 2px 8px;font-variant-numeric:tabular-nums}
.day em{font-style:normal;color:var(--ink38);margin-left:7px}
.gapb{position:relative;height:55px;display:flex;align-items:center;justify-content:center}
.gapb:before{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgb(224,226,230)}
.gapb span{position:relative;display:inline-flex;align-items:center;height:30px;
  padding:0 10px 0 8px;border-radius:9px;background:#fff;border:1px solid rgb(230,231,234);
  font-size:12px;font-weight:500;line-height:16px;letter-spacing:-0.12px;color:var(--ink63)}

.st{background:#fff;border:1px solid rgb(230,231,234);border-radius:12px;overflow:hidden}
.st+.st{margin-top:8px}
.st .hav{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:9px;font-weight:640;color:#fff;
  background:var(--c,var(--ink50))}
/* the playbook's own device: the emoji, then the channel in bold. No tinted square — the emoji
   already carries its own colour and a box around it reads as two badges for one thing. */
.st .hic{flex:0 0 18px;width:18px;display:flex;align-items:center;justify-content:center;
  margin-left:2px}
.st .hic .cic{width:16px;height:16px;flex:0 0 16px;color:var(--fg)}
/* near ink, not mid grey. Email is the most frequent step in every play, so a mark that reads
   as "the one without a colour" puts the weakest glyph on the commonest row. SLDS gets away with
   grey because it fills a saturated square and knocks the glyph out in white; a bare grey glyph
   on white is just quiet. Ink is a choice, mid grey is an absence. */
.st.pl-mail .hic{--fg:rgb(38,41,47)}
.st.pl-li   .hic{--fg:rgb(10,102,194)}
.st.pl-ph   .hic{--fg:rgb(0,131,94)}
.st .hic .cic{width:14px;height:14px;flex:0 0 14px;color:var(--fg)}
/* Email is neutral, not violet. A GTM reader expects email blue or grey, LinkedIn blue and a call
   green; blue is spoken for and green is spoken for, so email takes the neutral. Attio's own nav
   draws Emails and Calls in grey and reserves colour for its record objects. */

.stbody{border-top:1px solid rgb(230,231,234)}
.stpad{padding:14px 12px 16px}

/* a labelled line — Attio's Subject row, reused for From/To/Subject and every call beat */
.lr{display:flex;gap:12px;padding:7px 12px;border-bottom:1px solid rgb(230,231,234);
  align-items:baseline}
.lr:last-child{border-bottom:0}
.lr>.lk{flex:0 0 54px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:-0.12px;
  color:var(--ink50)}
.lr>.lv{flex:1 1 auto;min-width:0;max-width:600px;
  font-size:13.5px;font-weight:500;line-height:19px;letter-spacing:-0.14px;color:var(--ink)}
.lr>.lv i{font-style:normal;font-weight:400;color:var(--ink63)}
.cp{font-size:13.5px;font-weight:400;line-height:21px;letter-spacing:-0.14px;color:var(--ink);
  white-space:pre-line;max-width:600px}
.sig{margin-top:18px;font-size:13.5px;font-weight:400;line-height:19px;color:var(--ink63)}
.psline{margin-top:14px;font-size:13.5px;line-height:19px;color:var(--ink63)}
.psline b{font-weight:600;margin-right:4px}
.rw{display:grid;grid-template-columns:70px 1fr;gap:10px;margin-top:8px;font-size:11.5px;
  line-height:17px;color:var(--ink55)}
.rw .k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink50)}
.xr{margin-top:9px;padding:8px 11px;border-radius:8px;background:rgb(248,245,255);
  font-size:11.5px;line-height:17px;color:rgb(78,60,140)}
.xr b{font-weight:600}
.box{margin-top:8px;padding:14px 16px;border:1px solid rgb(230,231,234);border-radius:12px}
.box b{font-size:14px;font-weight:600;letter-spacing:-0.28px;line-height:20px}
.box p{font-size:13.5px;font-weight:400;line-height:21px;letter-spacing:-0.14px;color:var(--ink);margin:4px 0 0}

/* Objection handling. Constructions: Attio has no branching-talk-track pattern and no
   disclosure for one. Chrome is its .panel treatment, beats reuse .scr, the count borrows the
   value Attio puts beside a record tab. Collapsed by default: it is a reference, not reading. */
details>summary{cursor:pointer;list-style:none}
/* the native triangle was showing beside our own chevron; list-style alone does not remove it */
details>summary::-webkit-details-marker{display:none}
details>summary::marker{content:''}
details>summary::-webkit-details-marker{display:none}
.objtop{margin-top:9px;border:var(--rule);border-radius:9px}
.objtop>summary{display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:12px;
  line-height:16px;letter-spacing:-0.12px;color:var(--ink63);border-radius:9px}
.objtop>summary:hover{background:var(--hoverf)}
.objtop[open]>summary{border-bottom:var(--rule);border-radius:9px 9px 0 0}
.objtop>summary::before{content:'';width:0;height:0;border:4px solid transparent;
  border-left-color:var(--ink50);margin-right:1px;transition:transform 140ms}
.objtop[open]>summary::before{transform:rotate(90deg) translateX(1px)}
.objc{font-size:10px;line-height:16px;letter-spacing:-0.2px;color:var(--ink50)}
.objm{display:flex;flex-wrap:wrap;gap:8px;padding:11px 12px 0}
.objb{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border:var(--rule);
  border-radius:99px;font-size:12px;line-height:16px;letter-spacing:-0.12px;color:var(--ink63)}
.objb i{display:flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:99px;background:var(--side);font-style:normal;font-size:10px;font-weight:600;
  color:var(--ink50)}
.objw{margin:11px 12px 12px}
.objw .scg+.scg{border-top:var(--rule)}
.objfn{padding:9px 12px;font-size:13px;line-height:20px;letter-spacing:-0.12px;color:var(--ink);
  border-bottom:var(--rule)}
.obj{border-top:var(--rule)}
.objfn+.obj{border-top:0}
.obj>summary{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;
  font-weight:590;letter-spacing:-0.13px;color:var(--ink)}
.obj>summary:hover{background:var(--hoverf)}
.obj>summary::before{content:'';width:0;height:0;border:4px solid transparent;
  border-left-color:var(--ink50);transition:transform 140ms}
.obj[open]>summary::before{transform:rotate(90deg) translateX(1px)}
.objs{padding:1px 7px;border-radius:6px;background:rgb(246,247,247);font-size:11.5px;font-weight:500;
  letter-spacing:-0.12px;color:var(--ink63);text-transform:none;margin-left:8px;white-space:nowrap}
.objs.bl{background:var(--side)}
.objs.ac{background:rgb(240,246,255);color:rgb(38,109,240)}
.obj .script{margin:0 12px 10px 26px;border-radius:7px}
.obj.blocked>summary{color:var(--ink50)}
.objn{padding:0 12px 10px 26px;font-size:13px;line-height:20px;letter-spacing:-0.12px;color:var(--ink)}
.objr{margin:0 12px 12px;padding-left:30px}
.objr li{font-size:13px;line-height:20px;letter-spacing:-0.12px;color:var(--ink);margin-bottom:2px}

/* The step row. Attio's sequence-editor header, measured: 40px, padding 0 10px, gap 6, the
   kind at 12/500 full ink. The caret is this app's own — the same one .objtop and .obj use —
   kept on the left rather than adding a second chevron on the right. */
.st>summary.h{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;
  cursor:pointer;min-width:0;transition:background-color 140ms}
.st>summary.h:hover{background:rgba(0,0,0,.017)}
.st>summary.h::before{content:'';flex:0 0 auto;width:0;height:0;border:4px solid transparent;
  border-left-color:var(--ink38);transition:transform 140ms;margin-right:2px}
.st[open]>summary.h::before{transform:rotate(90deg) translateX(1px)}
.st>summary.h b{flex:0 0 auto;font-size:13px;font-weight:640;line-height:18px;
  letter-spacing:-0.13px;color:var(--ink);white-space:nowrap;margin-left:2px}
.st>summary.h .styp{flex:0 0 auto;font-size:13px;font-weight:400;line-height:18px;
  letter-spacing:-0.13px;color:var(--ink);white-space:nowrap;text-transform:none}
.st>summary.h .pv{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:12.5px;font-weight:400;line-height:18px;letter-spacing:-0.12px;
  color:var(--ink63);padding-left:4px}
.st>summary.h .who{flex:0 0 auto;max-width:250px;min-width:0;font-size:12px;font-weight:500;
  letter-spacing:-0.12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st>summary.h .who i{font-style:normal;color:var(--ink50);margin-left:6px}

/* Proof cards. Construction: Attio has no card that opens an external record, so this is its
   .box chrome plus the link affordance it uses on a record's website field. */
.proof{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px}
.pcard{display:block;padding:14px 16px;border:1px solid rgb(230,231,234);border-radius:12px;text-decoration:none;
  color:var(--ink);transition:background-color 140ms,box-shadow 140ms}
a.pcard:hover{border-color:var(--ink38)}
.pcard b{display:block;font-size:14px;font-weight:600;letter-spacing:-0.28px;line-height:20px;color:var(--ink)}
.pcard p{margin:4px 0 0;font-size:13.5px;font-weight:400;line-height:21px;letter-spacing:-0.14px;color:var(--ink)}
.plink{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font-size:12px;
  font-weight:500;letter-spacing:-0.12px;color:var(--accent)}
.plink svg{width:11px;height:11px;fill:currentColor}
.pcard.nolink{cursor:default}
.pcard.nolink .plink{color:var(--ink50)}

/* Voicemail: fixed words in body ink, the two generated slots marked with Attio's column tint so
   the reader sees at a glance which half the run produced. */
.vm{margin-top:9px;padding:11px 13px;border:var(--rule);border-radius:9px;font-size:13px;
  line-height:21px;letter-spacing:-0.13px;color:var(--ink55)}
.vm .vgen{color:var(--ink);background:rgb(251,249,255);border-radius:3px;padding:0 3px}

.box .bt{font-size:12px;font-weight:500;letter-spacing:-0.12px;color:var(--ink63);margin-left:6px}

/* ── the field map ─────────────────────────────────────────────────────
   Off by default. On the artifact the interface never shows the data model; here the data
   model IS the subject, so this is a separate view rather than a compromise on the page.
   Every element carrying a value from the step-5 output is boxed and labelled with the key
   that fed it. Purple because nothing else on the page is, so it never reads as content. */
.fmapT{display:flex;align-items:center;gap:7px;margin-top:10px;padding:6px 0;
  font-size:12px;line-height:16px;letter-spacing:-0.12px;color:var(--ink63);cursor:pointer;
  user-select:none}
.fmapT input{margin:0;cursor:pointer;accent-color:rgb(129,101,214)}
body.fmap [data-f]{position:relative;outline:1px dashed rgba(129,101,214,.55);outline-offset:3px;
  border-radius:2px}
body.fmap [data-f]::after{content:attr(data-f);position:absolute;left:0;top:-8px;z-index:5;
  transform:translateY(-100%);white-space:nowrap;pointer-events:none;
  background:rgb(129,101,214);color:#fff;border-radius:4px;padding:1px 5px;
  font:500 10px/14px ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;letter-spacing:0;
  opacity:0;transition:opacity 120ms}
body.fmap [data-f]:hover{outline-color:rgb(129,101,214);outline-width:1.5px}
body.fmap [data-f]:hover::after{opacity:1}
/* the labels stack badly when everything shows at once, so they appear on hover — except the
   one you are pointing at, which is the whole point of the mode */
body.fmap .pw{padding-top:34px}

/* ── opening a step ────────────────────────────────────────────────────
   <details> cannot transition its own height, because the content is not rendered while it is
   closed. So the reveal runs on the body once it exists: Attio's own 140ms band, its menu-entry
   curve, and 3px of travel. Open only — a close animation needs the element kept alive after the
   state flips, which is more machinery than a disclosure is worth. */
@keyframes stReveal { from { opacity: 0; transform: translateY(-3px) } to { opacity: 1; transform: none } }
.st[open] > .stbody,
.st[open] > .script,
.objtop[open] > .objm,
.objtop[open] > .objw,
.obj[open] > .script,
.obj[open] > .objn { animation: stReveal 160ms cubic-bezier(.32,.72,0,1) }
@media (prefers-reduced-motion: reduce){
  .st[open] > .stbody, .st[open] > .script, .objtop[open] > .objm, .objtop[open] > .objw,
  .obj[open] > .script, .obj[open] > .objn { animation: none }
  .st > summary.h::before, .objtop > summary::before, .obj > summary::before { transition: none }
}

/* ── Two layers of the same claim ───────────────────────────────────────────
   The page carries the plain sentence; hovering gives the precise, sourced
   version it was written from. Both lines reach the source.

   Everything inside `.ly` is a span on purpose. A <div> inside a <span> inside
   a <p> makes the parser close the paragraph early, and the popover stops being
   a child of the thing it hangs off — it then shows permanently, which is how
   this was first shipped and caught only by looking at the rendered page. */
.ly{position:relative}
/* both layers are links to the same page, and both look like it. The reader should never have to
   hunt for a separate "open the source" control — the sentence IS the control. */
.ly .lysurf,.ly .lypbody{text-decoration:underline;text-decoration-color:rgb(190,194,202);
  text-underline-offset:3px;text-decoration-thickness:1px;color:inherit}
.ly .lysurf:hover,.ly .lypbody:hover,.ly:focus .lysurf{text-decoration-color:var(--accent);
  color:var(--accent);outline:none}
.ly:focus{outline:none}
.ly>.lyp{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:1400;
  width:392px;max-width:78vw;background:#fff;border-radius:10px;padding:10px 12px;cursor:auto;
  font-size:12px;line-height:17px;letter-spacing:normal;color:var(--ink63);font-weight:400;
  white-space:normal;text-align:left;
  box-shadow:rgba(28,40,64,.04) 0 0 0 1px,rgba(28,40,64,.12) 0 4px 8px -4px,
             rgba(24,41,75,.16) 0 4px 12px -2px}
.ly:hover>.lyp,.ly:focus>.lyp{display:block;animation:attioMenuIn .08s ease}
.ly .lyl{display:block;font-size:10px;line-height:14px;font-weight:500;color:var(--ink50);
  padding-bottom:3px}
.ly .lyq{display:block;color:var(--ink);padding-bottom:5px}
.ly .lypbody{display:block;color:var(--ink63)}
/* the card that holds a nested layer must not clip it */
.hovercard{overflow:visible}
:is(.hovercard,.drawer,.tabpanes) .lookfor{font-size:12px;line-height:17px;color:var(--ink63);
  padding:7px 0 1px;border-top:var(--rule)}
:is(.hovercard,.drawer,.tabpanes) .lookfor .lfl{display:block;font-size:10px;line-height:14px;font-weight:500;
  color:var(--ink50);padding-bottom:2px}
/* what closes the window, the decision on the table, and whose desk it is on */
.wbox{margin:10px 0 2px;padding:9px 0 2px;border-top:var(--rule)}
.wrow{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:13px;
  line-height:19px;letter-spacing:-0.13px;color:var(--ink)}
.wrow .wk{flex:0 0 92px;font-size:11px;line-height:19px;letter-spacing:normal;
  color:var(--ink50);font-weight:500}
.wrow .wend{margin-left:8px;padding:1px 6px;border-radius:4px;background:var(--side);
  border:var(--rule);font-size:11px;color:var(--ink63);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.ly .lyp{white-space:pre-line}

/* ── the board view ────────────────────────────────────────────────────
   One account as a plan: the brief as a page, then the targets and what gets sent to each,
   on a squared ground. Attio has no canvas, no connector and no target card, so the
   composition is a CONSTRUCTION, stated out loud per frontend/CLAUDE.md. The values are not:
   the card (#fff, 1px rgb(230,231,234), r12, no shadow), the labelled line (pad 12 / gap 12,
   label 12/500 at .5, value 14), the body copy (14/500/24/-0.14px) and both hairlines are
   Attio's own, measured off its sequence editor at reference/sequence/.

   Everything is prefixed `b` and scoped under #bview. app.css already owns `.st` in 29
   selectors, plus .chip .box .script .lr .scr .cic .note .src .sig .nm .ct .who .foot —
   a colliding name fails loudly, a colliding selector fails silently, and this is the second
   kind. Do not drop the prefix. */
#bview{--bcell:24px;
  /* The board's own palette, taken from the measured reference at reference/perlon/. Warm
     neutrals rather than the app's cold greys — a deliberate, scoped departure: this surface is
     a wall of written messages and the warmth is what makes a wall of them readable. Everything
     outside #bview keeps app.css's palette. */
  --bink:rgb(28,25,23); --blabel:rgb(120,113,108); --bmute:rgba(41,37,36,.64);
  --bhair:rgb(236,236,236); --bhair2:rgb(231,229,228); --bchipbg:rgb(245,245,244)}

/* the brief: a page section. No grid behind it, no card around it. */
#bview .bhead{position:sticky;left:0;z-index:5;background:#fff;border-bottom:var(--rule);
  padding:28px 40px 22px}
#bview .bwrap{max-width:1120px;margin:0 auto}
#bview .btop{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px}
#bview .btop h1{margin:0;flex:1 1 auto;font-size:24px;font-weight:660;line-height:30px;
  letter-spacing:-0.56px;color:var(--bink)}
#bview .blink{font-size:11px;font-weight:560;letter-spacing:-0.02px;color:var(--accent);
  text-decoration:none;white-space:nowrap}
#bview .blink:hover{text-decoration:underline;text-underline-offset:3px}
#bview .bshape{margin:9px 0 0;font-size:11px;font-weight:560;line-height:16px;
  letter-spacing:-0.02px;color:var(--blabel);font-variant-numeric:tabular-nums}
#bview .bnow{color:var(--accent)}
#bview .bthesis{margin:18px 0 0;font-size:15.5px;font-weight:500;line-height:25px;
  letter-spacing:-0.2px;color:var(--bink);max-width:76ch}
#bview .bwho3{margin:13px 0 0;font-size:13px;font-weight:400;line-height:20px;
  letter-spacing:-0.13px;color:var(--blabel);max-width:92ch}
#bview .bwho3 b{font-weight:560;color:var(--bink)}
#bview .bgrid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;
  border-top:1px solid var(--bhair)}
#bview .bans{padding:18px 28px 4px;font-size:13px;font-weight:400;line-height:20px;
  letter-spacing:-0.13px;color:var(--bink)}
#bview .bans:first-child{padding-left:0}
#bview .bans + .bans{border-left:1px solid var(--bhair)}
#bview .bans b{display:block;margin:0 0 9px;font-size:11px;font-weight:560;
  letter-spacing:-0.02px;color:var(--blabel)}
#bview .bsec{margin:26px 0 0;font-size:11px;font-weight:560;line-height:16px;
  letter-spacing:-0.02px;color:var(--blabel)}
#bview .bproof{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:9px;border-top:1px solid var(--bhair)}
#bview .bpcard{padding:18px 28px 4px}
#bview .bpcard:first-child{padding-left:0}
#bview .bpcard + .bpcard{border-left:1px solid var(--bhair)}
#bview .bcn{font-size:13px;font-weight:620;line-height:20px;letter-spacing:-0.17px;color:var(--bink)}
#bview .bpcard p{margin:4px 0 0;font-size:13px;font-weight:400;line-height:20px;
  letter-spacing:-0.13px;color:var(--blabel);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#bview .blnk{display:inline-flex;align-items:center;gap:5px;margin-top:11px;font-size:11px;
  font-weight:560;letter-spacing:-0.02px;color:var(--accent);text-decoration:none}
#bview .blnk:hover{text-decoration:underline;text-underline-offset:3px}
#bview .blnk svg{width:10px;height:10px;fill:currentColor}
#bview .bnolink{display:inline-block;margin-top:11px;font-size:11px;font-weight:560;color:var(--blabel)}
#bview .blnk svg{width:11px;height:11px;fill:currentColor}
#bview .btop{display:flex;align-items:center;gap:12px}
#bview .blogo{width:28px;height:28px;border-radius:7px;object-fit:contain;padding:1px;background:#fff;box-shadow:var(--bhair) 0 0 0 1px inset}
#bview .btop h1{flex:0 1 auto}
#bview .bhid{margin:10px 0 0;font-size:13px;font-weight:400;line-height:20px;letter-spacing:-0.13px;color:var(--blabel);max-width:104ch}
#bview .bshape{margin:5px 0 0}
#bview .bthesis{margin:22px 0 0;font-size:17px;font-weight:500;line-height:26px;letter-spacing:-0.26px;color:var(--bink);max-width:72ch}
#bview .bgrid2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;margin-top:20px;align-items:stretch}
#bview .bgrid2b{margin-top:12px}
#bview .bcol{display:flex;flex-direction:column;gap:16px;min-width:0}
#bview .bpanel{border:1px solid var(--bhair);border-radius:9.2px;background:#fff;padding:14px 18px 16px;min-width:0}
#bview .bpanel-proof{margin-top:16px}
#bview .bkick{margin:0 0 12px;font-size:11px;font-weight:560;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--blabel)}
#bview .btl{list-style:none;margin:0;padding:0}
#bview .btli{position:relative;display:grid;grid-template-columns:86px minmax(0,1fr);column-gap:14px;padding:0 0 14px 20px;font-size:13px;font-weight:400;line-height:20px;letter-spacing:-0.13px;color:var(--bink)}
#bview .btli:last-child{padding-bottom:0}
#bview .btli::before{content:"";position:absolute;left:3.5px;top:9px;bottom:-6px;width:1px;background:var(--bhair2)}
#bview .btli:last-child::before{display:none}
#bview .bdot{position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--bink)}
#bview .bdot0{background:#fff;border:1.5px solid var(--blabel);width:8px;height:8px}
#bview .bfd{font-weight:560;color:var(--bink);white-space:nowrap;font-variant-numeric:tabular-nums}
#bview .bnow2 .bfd{color:var(--blabel)}
#bview .btlt{min-width:0;color:var(--bink)}
#bview .btlt a{color:inherit;text-decoration:none}
#bview .btlt a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.2)}
#bview .btlt svg{display:inline-block;width:10px;height:10px;fill:var(--accent);margin-left:5px;vertical-align:-1px}
#bview .bwl{list-style:none;margin:0;padding:0}
#bview .bwr{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--bhair)}
#bview .bwr:first-child{border-top:0;padding-top:0}
#bview .bwr:last-child{padding-bottom:2px}
#bview .bwav{width:28px;height:28px;border-radius:50%;flex:0 0 28px;display:flex;align-items:center;justify-content:center;margin-top:1px;background:var(--bcol);color:#fff;font-size:11px;font-weight:600;letter-spacing:.02em}
#bview .bwav{position:relative;overflow:hidden}
#bview .bwph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
#bview a.bwn:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.25)}
#bview .bwtx{min-width:0;display:flex;flex-direction:column}
#bview .bwn{font-size:13px;font-weight:560;line-height:18px;letter-spacing:-0.13px;color:var(--bink)}
#bview .bwt{font-size:12px;font-weight:400;line-height:16px;letter-spacing:-0.06px;color:var(--blabel)}
#bview .bwa{margin-top:5px;font-size:13px;font-weight:400;line-height:19px;letter-spacing:-0.13px;color:var(--bink)}
#bview .bunre{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--bhair);font-size:12px;line-height:17px;color:var(--blabel)}
#bview .bsay{margin:0;font-size:14px;font-weight:400;line-height:22px;letter-spacing:-0.14px;color:var(--bink)}
#bview .bpanel .bproof{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 28px;margin-top:0;border-top:0}
#bview .bpanel .bpcard{padding:0 28px 4px 0}
#bview .bpanel .bpcard + .bpcard{border-left:1px solid var(--bhair);padding-left:28px}
#bview .bpanel .bpcard p{color:var(--bink);-webkit-line-clamp:6}
@media (max-width:900px){#bview .bgrid2{grid-template-columns:1fr}}

/* the wall. The cell is the unit every measure in board.js is built from. */
#bview .bcanvas{position:relative;width:max-content;min-width:100%;
  background:rgb(250,250,251);padding:0;min-height:60vh;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.032) 1px, transparent 1px);
  background-size:var(--bcell) var(--bcell);
  cursor:grab}
#bview .bcanvas.bgrab{cursor:grabbing}
#bview .bcanvas.bgrab *{pointer-events:none}
#bview .bstage{position:relative}
#bview .bpaper{position:absolute;top:0;left:0;transform-origin:top left}
#bview .bwires{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:1}

#bview .bcard{position:absolute;z-index:2;background:#fff;border:1px solid var(--bhair);
  border-radius:9.2px;overflow:hidden}
#bview .bhd{display:flex;align-items:center;gap:12px;min-height:56px;padding:16px 24px;
  border-bottom:1px solid var(--bhair2)}
#bview .bsubj{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}
#bview .bover{font-family:Inter,sans-serif;font-size:14px;font-weight:500;line-height:18.4px;
  letter-spacing:.14px;color:var(--blabel)}
#bview .bt{font-size:16px;font-weight:500;line-height:23px;letter-spacing:.16px;min-width:0;
  color:var(--bink)}
#bview .bsp{flex:1}
#bview .br{flex:0 0 auto;font-size:12px;font-weight:500;line-height:16px;letter-spacing:-0.12px;
  color:var(--ink50);font-variant-numeric:tabular-nums;white-space:nowrap}
#bview .bbody{padding:24px}
#bview .brow{display:flex;gap:12px;padding:12px 24px;border-bottom:1px solid var(--bhair);
  align-items:baseline}
#bview .brow .bk{flex:0 0 26px;font-size:14px;font-weight:500;line-height:20px;
  letter-spacing:.14px;color:var(--blabel)}
#bview .brow .bv{flex:1;min-width:0;font-size:14px;font-weight:500;line-height:20px;
  letter-spacing:.14px;color:var(--bink)}
#bview .brow .bv i{font-style:normal;font-weight:400;color:var(--bmute)}

/* ── a target ────────────────────────────────────────────────────────────
   The only object on this board that is a JUDGEMENT rather than an artifact. Every message
   under it was written by the system; the person is the decision — we picked this human, in
   this seat, for this reason — and the demo lives or dies on the reader agreeing with those
   three names. So it is the thing the eye lands on, and it answers in order: who, why them,
   how to reach them, what the plan does to them.

   The solid object-colour header is Attio's own idiom, not decoration: shell.js `objIco()`
   paints every rail glyph as a solid colour block with the mark knocked out in white, which is
   how Attio says "this is an object of type X". It is also the only treatment that keeps the
   people legible at the zoom this board opens at, where the copy is deliberately texture. */
#bview .btg{border-color:var(--bcol)}
#bview .btg .bhd{align-items:flex-start;background:var(--bcol);border-bottom:0;
  min-height:128px;padding:26px 28px;gap:20px}
#bview .bav{width:80px;height:80px;flex:0 0 80px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:#fff;color:var(--bcol);font-size:28.1px;font-weight:680;letter-spacing:0}
#bview .bwho{min-width:0;flex:1}
#bview .bnm{display:block;font-size:40.0px;font-weight:660;line-height:47.4px;letter-spacing:-0.68px;color:#fff}
#bview .bav{position:relative;overflow:hidden}
#bview .bavph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
#bview a.bnm{text-decoration:none}
#bview a.bnm:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.55)}
#bview .bti{display:block;margin-top:4px;font-size:19.2px;line-height:26.6px;color:rgba(255,255,255,.76)}
#bview .btg .bchip{background:rgba(255,255,255,.2);color:#fff;height:34px;padding:0 13px;
  font-size:19.2px;font-weight:560}
#bview .btg .bbody{padding:28px}
/* the hook is the argument for this person, so it is a statement at reading size — not the
   third grey key/value row in a stack of fields */
#bview .bhook{font-size:28.1px;font-weight:500;line-height:42.9px;letter-spacing:-0.28px;color:var(--bink)}
#bview .bhook b{display:block;font-size:17.8px;font-weight:560;color:var(--blabel);margin-bottom:8px}
#bview .bowns{margin-top:22px;padding-top:19px;border-top:var(--rule);
  font-size:19.2px;font-weight:400;line-height:29.6px;letter-spacing:-0.13px;color:var(--ink)}
#bview .bowns b{display:block;font-size:17.8px;font-weight:560;color:var(--blabel);margin-bottom:5px}
#bview .bct{margin-top:22px;padding-top:19px;border-top:var(--rule);font-size:18.5px;line-height:29.6px;
  color:var(--ink63);font-variant-numeric:tabular-nums}
#bview .bct a{display:block;color:var(--ink);text-decoration:none}
#bview .bct a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* the card states what the column under it does */
#bview .bplan{display:flex;align-items:center;gap:12px;padding:16px 28px;background:rgb(250,250,251);
  border-top:1px solid rgb(230,231,234);font-size:17.8px;font-weight:500;letter-spacing:-0.12px;
  color:var(--ink63);font-variant-numeric:tabular-nums}
#bview .bplan .bmarks{display:inline-flex;gap:7px;margin-left:auto}
#bview .bplan svg{width:19px;height:19px;fill:currentColor}
#bview .bchip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;
  font-size:12px;font-weight:500;letter-spacing:-0.12px;background:rgb(240,241,243);color:var(--ink)}

/* ── a message ───────────────────────────────────────────────────────────
   Structure and type scale taken from a measured capture of Perlon's example-campaign card
   (frontend/reference/grab_element.js produced it; the rebuild and the original are compared
   at reference/perlon/copytest.html). Three things came from there and each is a real improvement:
     · the SUBJECT titles an email — it is what gets one opened. The index moves to a stamp.
     · the body runs at 16/500/24 with 16px BETWEEN paragraphs, not a blank pre-line row.
     · a LinkedIn message sits in its own bubble with a chat glyph; an email does not. That is
       the difference between a letter and a chat and it costs one border to say.
   What was NOT taken: their warm palette (#1C1917 / #78716C) and their 0.625px hairlines. The
   palette would make this surface a different product from the record page, and frontend/CLAUDE.md
   already records sub-pixel borders rendering as a blur — worse here, since this board zooms. */
#bview .bstamp{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 7px;
  border-radius:4.6px;background:var(--bchipbg);border:1px solid var(--bhair2);
  font-size:14px;font-weight:500;letter-spacing:.14px;color:var(--bink);white-space:nowrap}
#bview .bico{width:14px;height:14px;flex:0 0 14px;fill:currentColor}
#bview .bmail .bico{color:rgb(38,41,47)}
#bview .bli   .bico{color:rgb(10,102,194)}
#bview .bcall .bico{color:rgb(0,131,94)}
#bview .bcopy p{margin:0;font-size:16px;font-weight:500;line-height:24px;letter-spacing:.16px;
  color:var(--bink)}
#bview .bcopy .cited{color:inherit;cursor:pointer;text-decoration:underline;
  text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color 140ms}
#bview .bstep:hover .bcopy .cited{text-decoration-color:rgba(0,0,0,.26)}
#bview .bcopy .cited:hover{text-decoration-color:var(--accent);color:var(--accent)}
@media (prefers-reduced-motion: reduce){ #bview .bcopy .cited{transition:none} }
#bview .bcopy p + p{margin-top:16px}
/* the LinkedIn bubble: a letter arrives on the page, a message arrives in a thread */
#bview .bbubble{display:flex;flex-direction:row;align-items:flex-start;gap:16px;padding:16px;
  border:1px solid rgba(34,34,34,.1);border-radius:5px}
#bview .bchat{width:15px;height:15px;flex:0 0 15px;margin-top:4px;fill:rgb(164,164,164)}
#bview .bbubble .bcopy{flex:1;min-width:0}
#bview .bsig{margin-top:24px;font-size:14px;font-weight:400;line-height:21px;
  letter-spacing:.14px;color:var(--bmute)}
/* the RFC 3676 signature delimiter a mail client writes above a sig block. It is the detail
   that makes the card read as a real email rather than a rendering of one. */
#bview .bdash{display:block;color:var(--bmute)}
/* the seller's mark under the sign-off, as a real signature carries. Height-constrained rather
   than width-constrained: logos/ holds a mix of square marks and wide wordmarks cropped to the
   ink, so fixing the width would make a square mark enormous. */
#bview .bmark{display:block;margin-top:12px;height:17px;width:auto;max-width:140px;
  object-fit:contain;object-position:left center;opacity:.65}
#bview .bsrc{border-top:1px solid var(--bhair);padding:14px 24px 16px}
#bview .bsrc .bk{font-size:12px;font-weight:500;line-height:16px;color:var(--blabel)}
#bview .bsrc a,#bview .bsrc span:not(.bk){display:block;margin-top:8px;font-size:12.5px;line-height:18px;
  color:var(--bmute);text-decoration:underline;text-decoration-color:rgba(0,0,0,.16);
  text-underline-offset:3px}
#bview .bsrc a:hover{color:var(--accent);text-decoration-color:var(--accent)}
#bview .bnote{border-top:1px solid var(--bhair);padding:14px 24px;font-size:13px;line-height:20px;
  color:var(--bmute)}
#bview .bnote b{display:block;margin-bottom:4px;font-size:11.5px;font-weight:500;color:var(--ink50)}

/* the call stays shut and says so */
#bview .bpeek{padding:24px;font-size:16px;font-weight:500;line-height:24px;
  letter-spacing:.16px;color:var(--bink)}
#bview .bopen{display:flex;align-items:center;gap:7px;padding:14px 24px;font-size:13px;
  font-weight:500;letter-spacing:-0.12px;color:var(--accent);cursor:pointer;
  border-top:1px solid var(--bhair)}
#bview .bopen:hover{background:var(--hoverf)}
#bview .bopen svg{width:10px;height:10px;fill:currentColor;transition:transform 140ms}
#bview .bon .bopen svg{transform:rotate(90deg)}
#bview .bscript{display:none}
#bview .bon .bscript{display:block;animation:brev 160ms cubic-bezier(.32,.72,0,1)}
@keyframes brev{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
#bview .bscg{border-top:var(--rule)}
#bview .bscop{display:block;padding:15px 16px 5px;font-size:12px;font-weight:500;line-height:16px;
  letter-spacing:-0.12px;color:var(--ink63)}
#bview .bscr{display:flex;gap:12px;padding:11px 16px;border-bottom:var(--rule);align-items:baseline}
#bview .bscr .bk{flex:0 0 104px;font-size:12px;font-weight:500;line-height:16px;color:var(--ink50)}
#bview .bscr .bw{flex:1;min-width:0;font-size:13.5px;font-weight:400;line-height:21px;
  letter-spacing:-0.14px}
#bview .bscg:last-child .bscr:last-child{border-bottom:0}

/* time, on the connector, once */
#bview .bmk{position:absolute;z-index:3;transform:translate(-50%,-50%);background:#fff;
  border:1px solid rgb(230,231,234);border-radius:9px;height:26px;display:flex;align-items:center;
  gap:7px;padding:0 11px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:-0.12px;
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
#bview .bmk i{font-style:normal;font-weight:400;color:var(--ink50)}

/* the exclusion note: a footer, not a fifth column */
#bview .bfoot .bbody{padding:0}
#bview .brw{display:flex;gap:16px;padding:14px 20px;border-bottom:var(--rule);align-items:baseline}
#bview .brw:last-child{border-bottom:0}
#bview .bfn{flex:0 0 200px;font-size:13.5px;font-weight:560;line-height:20px;letter-spacing:-0.16px}
#bview .bft{flex:0 0 220px;font-size:12.5px;line-height:20px;color:var(--ink63)}
#bview .bfr{flex:1;min-width:0;font-size:13px;font-weight:400;line-height:20px;color:var(--ink63)}

/* zoom. Bottom RIGHT, because the rail owns the left edge. */
#bview .bzoom{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:2px;
  background:#fff;border:1px solid rgb(230,231,234);border-radius:10px;padding:4px;
  box-shadow:rgba(28,40,64,.06) 0 2px 8px -2px}
#bview .bzoom button{width:28px;height:28px;border:0;background:transparent;border-radius:7px;
  font:inherit;font-size:14px;font-weight:500;color:var(--ink63);cursor:pointer}
#bview .bzoom button.bw{width:auto;padding:0 10px;font-size:12px}
#bview .bzoom button:hover{background:var(--hoverf);color:var(--ink)}
#bview .bzl{min-width:44px;text-align:center;font-size:12px;font-weight:500;color:var(--ink50);
  font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){
  #bview .bon .bscript{animation:none} #bview .bopen svg{transition:none}
}
.cp.neg,.hovercard .hp.neg{color:rgb(176,52,52)}

th.numh .inner{min-width:0}
th.numh .inner>span:first-of-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* the why-now stack: event is the heading, label is a tag, decision and owner sit under it */
:is(.hovercard,.drawer,.tabpanes) .hh .hh-call{font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-0.1px}
:is(.hovercard,.drawer,.tabpanes) .sig{padding:10px 0 11px;border-top:var(--rule)}
:is(.hovercard,.drawer,.tabpanes) .sig-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
:is(.hovercard,.drawer,.tabpanes) .sig-tag{font-size:10.5px;line-height:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
:is(.hovercard,.drawer,.tabpanes) .sig-when{font-size:11px;line-height:14px;color:var(--ink50);font-variant-numeric:tabular-nums;white-space:nowrap}
:is(.hovercard,.drawer,.tabpanes) .sig-ev{display:block;font-size:13.5px;line-height:19px;font-weight:500;color:var(--ink);text-decoration:none;letter-spacing:-0.1px}
:is(.hovercard,.drawer,.tabpanes) a.sig-ev:hover{text-decoration:underline;text-decoration-color:var(--ink50);text-underline-offset:3px}
:is(.hovercard,.drawer,.tabpanes) .sig-dec{margin-top:5px;font-size:13px;line-height:18px;letter-spacing:-0.1px;color:var(--ink)}
:is(.hovercard,.drawer,.tabpanes) .sig-own{margin-top:6px;font-size:12px;line-height:15px;letter-spacing:normal;color:var(--ink63)}
:is(.hovercard,.drawer,.tabpanes) .sig-own b{font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}

/* the intel panel — Identify's replacement for record pages */
.drawer{position:fixed;top:0;right:0;bottom:0;width:580px;max-width:94vw;background:#fff;z-index:1150;display:none;flex-direction:column;
  box-shadow:rgba(28,40,64,.06) 0 0 0 1px,rgba(24,41,75,.18) -8px 0 24px -8px}
.drawer.on{display:flex;transform:translateX(24px);opacity:0;transition:transform 220ms cubic-bezier(.2,.7,.2,1),opacity 180ms ease}
.drawer.on.in{transform:none;opacity:1}
@media (prefers-reduced-motion: reduce){.drawer.on{transition:none;transform:none;opacity:1}}
.drawer .dhead{display:flex;align-items:center;gap:12px;padding:16px 20px 14px;border-bottom:var(--rule)}
.drawer .dhead img{width:28px;height:28px;border-radius:6px;object-fit:contain;background:#f4f4f5}
.drawer .dname{flex:1;min-width:0}
.drawer .dn{font-size:16px;line-height:20px;font-weight:600;letter-spacing:-0.2px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer .ddom{font-size:12px;line-height:16px;color:var(--ink50);text-decoration:none}
.drawer .ddom:hover{text-decoration:underline}
.drawer .dclose{border:0;background:transparent;font-size:22px;line-height:1;color:var(--ink50);cursor:pointer;padding:2px 4px;border-radius:6px}
.drawer .dclose:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.drawer .dbody{overflow:auto;padding:6px 20px 28px}
.drawer .dsum{font-size:13.5px;line-height:19px;letter-spacing:-0.1px;color:var(--ink);padding:10px 0 12px;border-bottom:var(--rule)}
.drawer .dsec{padding:10px 0 6px;border-bottom:var(--rule)}
.drawer .dsec:last-child{border-bottom:0}
.drawer .dfacts{display:grid;grid-template-columns:minmax(140px,38%) 1fr;column-gap:14px;row-gap:0}
.drawer .df{display:contents}
.drawer .dfk{font-size:12px;line-height:18px;color:var(--ink50);padding:4px 0;border-top:var(--rule)}
.drawer .dfv{font-size:13px;line-height:18px;color:var(--ink);padding:4px 0;border-top:var(--rule);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.drawer .dfv a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(0,0,0,.2);text-underline-offset:3px}

#tb tr:hover td{cursor:pointer}

/* breathing room in the panel */
.drawer{width:640px}
.drawer .dbody{padding:4px 28px 36px}
.drawer .dhead{padding:18px 28px 16px}
.drawer .dsum{font-size:13px;line-height:19px;color:var(--ink63);padding:14px 0 16px}
.drawer .dsec{padding:16px 0 12px}
.drawer .hh{padding-bottom:10px}
.drawer .hh>span:first-child{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink50);font-weight:600}
.drawer .hh .hh-call{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:600}
.drawer .hrank{padding:0 0 14px;font-size:13.5px;line-height:19px}
.drawer .sig{padding:14px 0 16px}
.drawer .sig-top{margin-bottom:6px}
.drawer .sig-ev{font-size:14px;line-height:20px}
.drawer .sig-dec{margin-top:7px;font-size:13px;line-height:19px;color:var(--ink63)}
.drawer .sig-own{margin-top:8px}
.drawer .hr2{padding:10px 0}
.drawer .he.cited,.drawer .he{text-decoration:none;color:var(--ink63);font-size:12px;line-height:17px;margin-top:3px}
.drawer a.he.cited:hover{text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px}
.drawer .hn{font-size:13.5px}
.drawer .foot{padding-top:10px}

/* score bars in the panel */
.drawer .crit-all{border:0;background:transparent;font:inherit;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);cursor:pointer;margin-left:10px;padding:0}
.drawer .crit{display:block;gap:0;padding:0;border-top:var(--rule);cursor:pointer}   /* the record page's .crit is a flex row; this one is not */
.drawer .crit-row{display:grid;grid-template-columns:18px minmax(0,1fr) 120px 60px;align-items:center;gap:10px;padding:9px 0}
.drawer .crit-n{font-size:12px;color:var(--ink50);font-variant-numeric:tabular-nums;text-align:right}
.drawer .crit-name{font-size:13.5px;line-height:18px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer .crit-bar{height:6px;border-radius:3px;background:rgba(0,0,0,.07);overflow:hidden}
.drawer .crit-bar i{display:block;height:100%;background:var(--ink);border-radius:3px}
.drawer .crit.full .crit-bar i{background:rgb(0,125,83)}
.drawer .crit.unk .crit-bar i{background:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 4px,transparent 4px 7px)}
.drawer .crit.fail .crit-bar i{width:0}
.drawer .crit-pts{font-size:12.5px;color:var(--ink63);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.drawer .crit.full .crit-pts{color:rgb(0,125,83)}
.drawer .crit.neg .crit-pts{color:rgb(176,52,52)}
.drawer .crit-ev{display:none;padding:0 0 12px 28px;font-size:12.5px;line-height:18px;color:var(--ink63)}
.drawer .crit.open .crit-ev,.drawer.ev-all .crit-ev{display:block}
.drawer .crit-ev-t{color:var(--ink63);text-decoration:none}
.drawer a.crit-ev-t:hover{text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px}
.drawer .crit-tag{display:inline-block;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink50);margin-right:8px}
.drawer .crit-band{margin-top:5px;font-size:11.5px;line-height:16px;color:var(--ink50)}
.drawer .crit-none{border-top:var(--rule);padding:10px 0 4px 28px;font-size:12.5px;color:var(--ink50)}
.drawer .caveat{margin-top:6px}
/* facts: five, then the rest on request */
.drawer .facts .df.more{display:none}
.drawer .facts.all .df.more{display:contents}
.drawer .facts-more{border:0;background:transparent;font:inherit;font-size:12px;color:var(--accent);cursor:pointer;padding:8px 0 0}
.drawer .dfv a{text-decoration:none}
.drawer .dfv a:hover{text-decoration:underline}
/* anything with a page behind it says so: a small "source ↗" after the sentence, the whole thing is the link */
.drawer a.sig-ev::after,.drawer a.crit-ev-t::after,.drawer .dfv a::after,.drawer .lookfor a::after{
  content:"source \2197";display:inline-block;margin-left:8px;font-size:10.5px;line-height:14px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;vertical-align:baseline;font-weight:500}
.drawer a.sig-ev:hover::after,.drawer a.crit-ev-t:hover::after,.drawer .dfv a:hover::after{text-decoration:underline;text-underline-offset:3px}

.marketnote{margin-top:10px;font-size:13px;line-height:19px;color:var(--ink63);max-width:78ch}
.drawer .dwhy{font-size:13.5px;line-height:19px;color:var(--ink);padding-bottom:4px}

/* the quiet card: what was found instead, once; what was checked, as names */
:is(.hovercard,.drawer,.tabpanes) .qfound{font-size:13px;line-height:18px;color:var(--ink);padding:8px 0 2px}
:is(.hovercard,.drawer,.tabpanes) .qfound-t{color:var(--ink);text-decoration:none}
:is(.hovercard,.drawer,.tabpanes) a.qfound-t:hover{text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px}
:is(.hovercard,.drawer,.tabpanes) .qchecked{margin-top:8px;padding-top:8px;border-top:var(--rule);font-size:11.5px;line-height:16px;color:var(--ink50)}
:is(.hovercard,.drawer,.tabpanes) .qchecked b{font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:8px;color:var(--ink50)}
.drawer a.qfound-t::after{content:"source \2197";display:inline-block;margin-left:8px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);font-weight:500}
/* sections are surfaces; rows inside them are hairlines */
.drawer .dbody{background:#F5F5F6;padding:0 20px 28px}
.drawer .dhead{background:#fff}
.drawer .dsum{padding:16px 6px 6px;border-bottom:0;color:var(--ink63)}
.drawer .dsec{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:14px 18px 12px;margin:12px 0 0;border-bottom:1px solid rgba(0,0,0,.08)}
.drawer .dsec:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.drawer .dsec .hh{padding-bottom:8px}
.drawer .sig:first-of-type{border-top:0}
.drawer .hrank{padding-bottom:10px}
.drawer .hrank + .sig{border-top:var(--rule)}
.drawer .dwhy{padding-bottom:2px}
.drawer .crit-list .crit:first-child{border-top:var(--rule)}

/* ── the record page: one column, cards, eyebrows, no permanent underlines ── */
.tabpanes{background:#F5F5F6;padding:18px 32px 64px}
.tabpanes .sec{max-width:880px;margin:0 auto 14px;padding:20px 26px 18px;border:1px solid rgba(0,0,0,.08);box-shadow:none;border-radius:10px}
.tabpanes .stitle{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink50);border-bottom:0;padding:0 0 10px;margin:0}
.tabpanes .stitle > span:first-child{padding-left:0}
.tabpanes .stitle > span:first-child::before{display:none}
.tabpanes .stitle .va{font-size:12px;color:var(--ink50);letter-spacing:0;text-transform:none;font-weight:500}
.tabpanes .para{font-size:14px;line-height:21px;letter-spacing:-0.1px;color:var(--ink);max-width:66ch;padding-bottom:8px}
.tabpanes .para.lead{font-size:16px;line-height:24px;letter-spacing:-0.2px;color:var(--ink);max-width:60ch;padding-bottom:12px}
.tabpanes .para.muted{font-size:13.5px;line-height:20px;color:var(--ink63)}
.tabpanes .sub{margin-top:18px;margin-bottom:6px;color:var(--ink50);font-size:10.5px}
.tabpanes .cited{text-decoration:none;color:inherit}
.tabpanes .cited:hover{text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px}
.tabpanes .cited::after{content:"source \2197";display:inline-block;margin-left:8px;font-size:10.5px;line-height:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);font-weight:500;white-space:nowrap}
.tabpanes .lysurf{text-decoration:none}
.tabpanes .bfacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin-top:6px}
.tabpanes .bf{padding:12px 14px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tabpanes .bf:nth-child(3n){border-right:0}
.tabpanes .bfk{font-size:10.5px;letter-spacing:.06em;color:var(--ink50)}
.tabpanes .bfv{font-size:14px;font-weight:500;margin-top:4px;line-height:19px}
.tabpanes .bfv .cited::after{display:none}
.tabpanes .sig{padding:16px 0 16px}
.tabpanes .sig:first-of-type{border-top:0;padding-top:4px}
.tabpanes .sig-ev{font-size:15px;line-height:22px}
.tabpanes .sig-dec{margin-top:8px;font-size:13.5px;line-height:20px;color:var(--ink63)}
.tabpanes .sig-own{margin-top:8px;font-size:12.5px}
.tabpanes .tl{padding:11px 0;border-top:var(--rule);align-items:baseline}
.tabpanes .tldate{flex:0 0 96px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--ink50)}
.tabpanes .tlev{font-size:13.5px;line-height:20px;color:var(--ink)}
.tabpanes .stackrow{padding:14px 0}
.tabpanes .sarea{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink50)}
.tabpanes .sfact{font-size:14px;line-height:21px;margin-top:6px}
.tabpanes .note{background:#F5F5F6;border:0;border-radius:8px;padding:12px 14px;font-size:13.5px;line-height:20px;color:var(--ink);margin-top:12px}
.tabpanes .openon{margin:2px 0 16px;padding:14px 16px;border:1px solid rgba(38,109,240,.25);background:rgba(38,109,240,.05);border-radius:10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.tabpanes .oo-l{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600;flex:0 0 100%}
.tabpanes .oo-n{font-size:17px;font-weight:600;letter-spacing:-0.2px;color:var(--ink)}
.tabpanes .oo-t{font-size:13px;color:var(--ink63)}
.tabpanes .oo-w{flex:0 0 100%;font-size:13.5px;line-height:20px;color:var(--ink);margin-top:4px}
.tabpanes .pdetail{border:1px solid var(--rule);background:#fff}
.tabpanes .powns,.tabpanes .ppress{font-size:13.5px;line-height:20px}
.tabpanes .gapbox{background:#fff}
.tabpanes .gapbox b{font-size:13.5px}
.tabpanes .gapbox p{font-size:13px;line-height:19px}
.tabpanes .crit{padding:12px 0}
.tabpanes .ce{font-size:13px;line-height:19px;color:var(--ink63)}
/* the reason behind a chosen line, on hover */
.judged{position:relative}
.judged:hover::after{content:attr(data-why);position:absolute;left:0;top:100%;margin-top:6px;z-index:1200;width:max-content;max-width:380px;
  background:#fff;color:var(--ink);font-size:12px;line-height:17px;letter-spacing:normal;white-space:normal;text-align:left;padding:8px 11px;border-radius:8px;
  box-shadow:rgba(28,40,64,.04) 0 0 0 1px,rgba(28,40,64,.12) 0 4px 8px -4px,rgba(24,41,75,.16) 0 4px 12px -2px}
.judged:hover::before{content:"why this line";position:absolute;left:0;top:100%;margin-top:6px;z-index:1201;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink50);padding:8px 11px 0;pointer-events:none;opacity:0}

/* the way back to the index of every seller, pinned to the bottom of the rail */
.navfoot{margin-top:auto;padding:8px;border-top:var(--rule)}

/* the channel of a step, readable at a glance: the stamp is a chip in the measured chip chrome
   (24px, 0 9px, radius 7, 12.5px/500) tinted with the tag palette, and the header band carries a
   faint wash of the same hue. Email stays neutral, LinkedIn blue, calls green. */
#bview .bstamp{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;font-size:12.5px;font-weight:500;letter-spacing:-0.12px;white-space:nowrap;border:0}
#bview .bmail .bstamp{background:rgb(246,247,247);color:rgb(38,41,47)}
#bview .bli .bstamp{background:rgb(221,247,255);color:rgb(10,102,194)}
#bview .bcall .bstamp{background:rgb(224,252,237);color:rgb(0,131,94)}
#bview .bli .bhd{background:rgba(10,102,194,.035)}
#bview .bcall .bhd{background:rgba(0,131,94,.035)}

/* the account read and the reasoning behind each angle, in full ink — these are the sentences a VP
   checks the account against, so they sit next to what they explain rather than on a hover */
#bview .bread{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--bhair);font-size:13px;font-weight:400;line-height:20px;letter-spacing:-0.13px;color:var(--bink)}
#bview .bkick-in{display:block;margin:0 0 6px}
#bview .bsay2{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--bhair);font-size:13px;font-weight:400;line-height:20px;letter-spacing:-0.13px;color:var(--bink)}
#bview .bwr2{display:block;margin-top:4px;font-size:12.5px;font-weight:400;line-height:18px;letter-spacing:-0.1px;color:var(--bmute)}
#bview .bhook2{display:block;margin-top:10px;font-size:19px;font-weight:400;line-height:29px;letter-spacing:-0.1px;color:var(--bmute)}

/* the fold: the brief under the lede put away, the board under the name */

#bview .bfold{margin-left:4px}
#bview .bpanel .bproof{grid-template-columns:1fr}
#bview .bpanel .bpcard + .bpcard{border-left:0;border-top:1px solid var(--bhair);padding-left:0;padding-top:12px;margin-top:10px}
#bview .bpanel .bpcard p{-webkit-line-clamp:3}
#bview .bthesis{margin-top:18px;font-size:16px;line-height:24px}

/* the brief takes at most half the window and scrolls inside itself; the board, which has its own
   pan and zoom, always shows under it. The fold still puts the brief away entirely. */
/* folded: the lede stays, the cards go, and a row of the people stands in for the Who card */
#bview .bhead.bfolded .bbrief{display:none}
#bview .bhead.bfolded .bthesis{display:block}
#bview .bwhorow{display:none;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
#bview .bhead.bfolded .bwhorow{display:flex}
#bview .bwhorow .bwav{width:22px;height:22px;flex:0 0 22px;font-size:9px}
#bview .bwhoc{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:20px;color:var(--bink)}
#bview .bwhoc .bwt{font-size:12px;color:var(--blabel)}

/* the brief expanded: two columns that balance, sections split by hairlines, no cards */
#bview .bbrief{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:36px;margin-top:22px;padding-top:18px;border-top:1px solid var(--bhair);align-items:start}
#bview .bcolR{border-left:1px solid var(--bhair);padding-left:32px}
#bview .bsec{padding:0 0 16px}
#bview .bsec + .bsec{padding-top:14px;border-top:1px solid var(--bhair)}
#bview .bsec .bkick{margin:0 0 9px}
#bview .bp{margin:0;font-size:12.5px;font-weight:400;line-height:19px;letter-spacing:-0.1px;color:var(--bink)}
#bview .bp-lead{font-size:13.5px;line-height:20px;font-weight:500}
#bview .bp-why{margin-top:7px;color:var(--bmute)}
#bview .bbrief .btli{grid-template-columns:78px minmax(0,1fr);column-gap:12px;padding:0 0 10px 18px;font-size:12.5px;line-height:19px}
#bview .bbrief .bdot{top:6px;width:7px;height:7px}
#bview .bbrief .btli::before{left:3px;top:8px}
#bview .bbrief .bfd{font-size:12px}
#bview .bbrief .bwr{padding:9px 0}
#bview .bbrief .bwr:first-child{padding-top:0}
#bview .bbrief .bwav{width:24px;height:24px;flex:0 0 24px;font-size:10px}
#bview .bwn2{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
#bview .bbrief .bwn{font-size:12.5px;line-height:18px}
#bview .bbrief .bwt{font-size:11.5px;line-height:16px}
#bview .bbrief .bwa{margin-top:3px;font-size:12.5px;line-height:18px}
#bview .bbrief .bwr2{margin-top:3px;font-size:12px;line-height:17px}
#bview .bpl{list-style:none;margin:0;padding:0}
#bview .bpli{display:block;padding:8px 0;border-top:1px solid var(--bhair);font-size:12.5px;line-height:18px}
#bview .bpli:first-child{border-top:0;padding-top:0}
#bview .bpli .bcn{display:inline;font-size:12.5px;font-weight:600;margin-right:6px}
#bview .bpt2{color:var(--bink);font-weight:400}
#bview .bpli .blnk{margin:2px 0 0 0;display:inline-flex}
#bview .bunre{margin-top:8px;padding-top:8px}
@media (max-width:900px){#bview .bbrief{grid-template-columns:1fr}#bview .bcolR{border-left:0;padding-left:0;border-top:1px solid var(--bhair);padding-top:14px}}

/* the PS, after the sign-off, in the copy's own type */
#bview .bps{margin:20px 0 0;font-size:16px;font-weight:500;line-height:24px;letter-spacing:.16px;color:var(--bink)}
#bview .bpsk{font-weight:600;margin-right:6px}

/* Runs page: which writer wrote a seller's plays. Attio's tag chrome (.chip) in two palette
   colours already used on this page — green rgb(224,252,237) for the live version, grey
   rgb(246,247,247) for older or unknown. Sits after the count in the Emails written cell. */
.num .chip{margin-left:6px;font-size:11px;font-weight:500;height:18px;padding:0 5px;vertical-align:middle}
.chip.wcur{background:rgb(224,252,237)}
.chip.wold{background:rgb(246,247,247);color:rgb(80,81,85)}

/* Fit hover, question-first (pilot on OnStation, 2026-09-25): the criterion's question is the line, a
   spoken answer plus the band the account landed on sits under it, and the company's own evidence
   shows when the row is hovered. Same tokens as the rows above: .hq is the .hn role, .hband the .he
   role, .hyes the old .ha "Yes/No" weight. Scoped to the floating card; the drawer is unchanged. */
.hovercard .hq{display:block;font-size:13px;line-height:18px;letter-spacing:-0.13px;color:var(--ink)}
.hovercard .hband{display:block;margin-top:2px;font-size:11px;line-height:15px;letter-spacing:normal;color:var(--ink50)}
.hovercard .hyes{font-weight:600;color:var(--ink);margin-right:4px}
.hovercard,.hovercard *{cursor:default}
.hovercard a,.hovercard a *{cursor:pointer}
.hovercard .hsrc{color:var(--ink50);text-decoration:underline;text-decoration-color:rgba(0,0,0,.18);text-underline-offset:3px}
.hovercard a.hsrc:hover{color:var(--ink63);text-decoration-color:rgba(0,0,0,.4)}
.hovercard .hsrc svg{width:10px;height:10px;fill:currentColor;margin-left:4px;vertical-align:-1px;display:inline}
.hovercard .hsrc.dead{text-decoration:none}

/* Lucide header icons (app/src/lucide.js): 16 px stroke glyphs in the header's ink, same slot as Attio's */
th .inner .lu{flex:0 0 16px;width:16px;height:16px}

/* Engage: a stage that has not run yet. Label over a thin bar with a slow gradient sweep; four
   variants (m1–m4) on the tag palette pastels + the accent, keyed on the account name in table.js. */
.magic{display:inline-flex;flex-direction:column;gap:5px;min-width:110px;max-width:132px;vertical-align:middle}
.magic .mlab{font-size:12px;line-height:14px;letter-spacing:-.12px;color:var(--ink50)}
.magic .mbar{display:block;height:3px;border-radius:2px;background-size:200% 100%;background-position:0 0;animation:magicSweep 2.6s linear infinite}
.magic.m1 .mbar{background-image:linear-gradient(90deg,rgb(221,247,255),rgb(38,109,240),rgb(245,240,255),rgb(221,247,255));animation-duration:2.6s}
.magic.m2 .mbar{background-image:linear-gradient(90deg,rgb(245,240,255),rgb(253,237,255),rgb(254,236,243),rgb(229,238,255),rgb(245,240,255));animation-duration:3.4s}
.magic.m3 .mbar{background-image:linear-gradient(90deg,rgb(224,252,237),rgb(221,247,255),rgb(38,109,240),rgb(224,252,237));animation-duration:2.2s}
.magic.m4 .mbar{background-image:linear-gradient(90deg,rgb(255,243,204),rgb(254,238,225),rgb(254,236,243),rgb(255,243,204));animation-duration:3s;animation-direction:reverse}
.magic.m5 .mbar{background-image:linear-gradient(90deg,rgb(229,238,255),rgb(38,109,240),rgb(253,237,255),rgb(229,238,255));animation-duration:3.8s;animation-direction:reverse}
.magic.m6 .mbar{background-image:linear-gradient(90deg,rgb(253,247,196),rgb(244,251,203),rgb(224,252,237),rgb(253,247,196));animation-duration:2.4s}
.magic.m7 .mbar{background-image:linear-gradient(90deg,rgb(254,236,243),rgb(255,235,235),rgb(254,238,225),rgb(38,109,240),rgb(254,236,243));animation-duration:4s;animation-direction:reverse}
.magic.m8 .mbar{background-image:linear-gradient(90deg,rgb(221,247,255),rgb(224,252,237),rgb(245,240,255),rgb(221,247,255));animation-duration:2s}
@keyframes magicSweep{0%{background-position:0% 0}100%{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.magic .mbar{animation:none}}

/* The rail (2026-09-25). Attio's rail is a list of objects; ours reads as a console for one
   seller: name over a one-line subtitle with the switcher's caret, three views on monochrome
   Lucide strokes, section labels left-aligned at the row's text (Attio indents its one "Records"
   label to the icon column; with three sections that read as floating), the signals that fired
   with counts, and the run's numbers in three short lines. 200 px wide to hold it. */
nav{width:232px;flex:0 0 232px}
body.navhidden nav{width:0;flex-basis:0}
nav .ws{gap:10px;padding:1px 10px 1px 14px;margin-bottom:6px}
nav .ws .wstext{display:flex;flex-direction:column;min-width:0;line-height:15px}
nav .ws .wstext #wsname{font-size:14px;font-weight:600;letter-spacing:-0.2px;line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav .ws .wssub{font-size:11px;line-height:14px;letter-spacing:-0.05px;color:var(--ink50);white-space:nowrap}
.navsec{margin-left:0;padding:16px 6px 5px;font-size:11px;line-height:14px;letter-spacing:0;color:var(--ink50);width:auto}
.navsec:first-child{padding-top:6px}
.navitem .lu{flex:0 0 16px}
.navsig .sdot{width:16px;height:16px;flex:0 0 16px;display:inline-flex;align-items:center;justify-content:center}
.navsig .sdot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink50)}
.navsig span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navquiet{font-size:12px;line-height:16px;color:var(--ink50);padding:2px 6px 6px}
.navrun{padding:2px 6px 8px;font-size:11px;line-height:16px;letter-spacing:0;color:var(--ink50);white-space:nowrap;overflow:hidden}

/* The three views are one funnel — a play is written only where a trigger fired, a trigger only where
   the account fit — so the rail shows them as a staircase: each row one step under the last, with a
   hairline stem tying the steps to the row above. Attio nests lists under objects with the same
   indent; the stem is ours. */
.navitem.step1{margin-left:14px}
.navitem.step2{margin-left:28px}
.navitem.step1,.navitem.step2{position:relative}
.navitem.step1::before,.navitem.step2::before{content:'';position:absolute;left:-8px;top:-2px;width:8px;height:16px;
  border-left:1px solid rgb(226,227,230);border-bottom:1px solid rgb(226,227,230);border-bottom-left-radius:4px}

/* The Call now hover's spoken pair (2026-09-25). Attio has no pattern for a two-sentence summary, so this is a
   construction from the card's own tokens: the first sentence at the event headline's size and weight (.sig-ev),
   the second at the decision line's (.sig-dec), and the hairline the drawer already puts between its rank line
   and the first event. On the record page the pair is the section's lead paragraph and a plain one under it. */
:is(.hovercard,.drawer,.tabpanes) .say{padding:2px 0 10px}
:is(.hovercard,.drawer,.tabpanes) .say p{margin:0}
:is(.hovercard,.drawer,.tabpanes) .say-what{font-size:13.5px;line-height:19px;font-weight:500;letter-spacing:-0.1px;color:var(--ink)}
:is(.hovercard,.drawer,.tabpanes) .say-do{margin-top:6px;font-size:13.5px;line-height:19px;letter-spacing:-0.1px;color:var(--ink)}
:is(.hovercard,.drawer,.tabpanes) .say + .sig{border-top:var(--rule);padding-top:12px;margin-top:8px}
.drawer .say{padding:0 0 12px}
.drawer .say-what{font-size:14px;line-height:20px}
.drawer .say-do{font-size:13.5px;line-height:19px}
.tabpanes .para.say-do{color:var(--ink);margin-top:-2px;padding-bottom:14px}

/* Rail hide/show (2026-09-25). The hide control lives at the right of the rail header (Attio's slot for it);
   the show control in the crumb bar exists only while the rail is hidden. Same 28px .navtoggle chrome. */
nav{width:256px;flex:0 0 256px;position:relative}
nav .ws{margin-right:46px}
nav .ws .wstext{flex:0 0 auto}
nav > .navtoggle{position:absolute;right:10px;top:13px;margin:0;width:30px;height:30px;border:0;background:transparent;border-radius:7px;padding:0;cursor:pointer;transition:background-color 140ms}
nav > .navtoggle:hover{background:var(--hover)}
nav > .navtoggle svg{width:19px;height:19px}
#navshow{display:none;margin-right:2px}
body.navhidden #navshow{display:flex}

/* say v2: three labelled lines. Label chrome is the hover's own small tag (.sig-tag's size, ink50 not accent). */
:is(.hovercard,.drawer,.tabpanes) .say.v2 .sayrow{padding:4px 0 6px}
:is(.hovercard,.drawer,.tabpanes) .say.v2 .saylab{display:block;font-size:10.5px;line-height:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink50);margin-bottom:2px}
:is(.hovercard,.drawer,.tabpanes) .say.v2 p{margin:0;font-size:13.5px;line-height:19px;letter-spacing:-0.1px;color:var(--ink)}
.tabpanes .say.v2 p{font-size:14px;line-height:21px;max-width:66ch}
.tabpanes .say.v2{padding:0 0 12px}

/* Call now cell: the trigger name after the chip, body ink, the cell's own 13px; "+1" in ink50 */
.prio{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.prio .trig{font-size:13px;letter-spacing:-0.14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prio .trigmore{color:var(--ink50)}

/* The method sheet (Identify). Plain white sheet, no card-in-card: a numbered list of criteria in the drawer's
   own type scale, name and question stacked, the weight bar as a fixed right column aligned to the name line,
   hairlines between rows. The negatives are a second list under a small section label. */
.deftog{color:var(--ink63)}
.deftog.on{background:var(--hover);color:var(--ink)}
.deftog .lu{width:15px;height:15px}
.watch{display:none}
.drawer .dbody.method{background:#fff;padding:4px 32px 40px}
.drawer .method .dsec{background:transparent;border:0;border-radius:0;padding:0;margin:0}
.drawer .method .dfrow{display:grid;grid-template-columns:32px 1fr 110px;column-gap:16px;align-items:start;padding:20px 0 19px;margin:0;border-bottom:var(--rule);border-radius:0;cursor:default}
.drawer .method .dfrow:last-child{border-bottom:0}
.drawer .method .dfrow:hover{background:transparent}
.drawer .method .dfnum{font-size:13px;line-height:24px;font-variant-numeric:tabular-nums;color:var(--ink50);padding-top:1px}
.drawer .method .dftext{min-width:0}
.drawer .method .dfname{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-0.2px;color:var(--ink);transition:color 140ms}
.drawer .method .dfq{font-size:14.5px;line-height:22px;letter-spacing:-0.12px;color:var(--ink);margin-top:4px;max-width:56ch}
.drawer .method .dfmore{font-size:13px;line-height:19px;letter-spacing:-0.06px;color:var(--ink63);margin-top:8px;max-width:58ch}
.drawer .method .dfmore span{display:inline-block;font-size:10px;line-height:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink50);margin-right:8px;vertical-align:1px}
.drawer .method .dfbar{height:6px;margin-top:9px;border-radius:3px;background:rgb(238,239,241);overflow:hidden}
.drawer .method .dfbar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.drawer .method .dfbar.neg i{background:rgb(221,84,73)}
.drawer .method .dfsep{display:flex;align-items:center;gap:10px;padding:22px 0 4px;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink50)}
.drawer .method .dfsep::after{content:"";flex:1;border-top:var(--rule)}
.drawer .method .dfsep + .dfrow{border-top:0}
.drawer .method .dflegend{display:flex;justify-content:flex-end;gap:14px;padding:12px 0 0;font-size:11.5px;line-height:15px;color:var(--ink50)}
.drawer .method .dflegend i{display:inline-block;width:18px;height:6px;border-radius:3px;background:var(--accent);vertical-align:1px;margin-right:6px}
.drawer .method .dflegend i.neg{background:rgb(221,84,73)}
.hovercard .defnot{font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px;color:var(--ink50)}
/* Hover affordance (2026-09-25): the term-with-more-behind-it convention. A dotted underline in the rule
   colour under the trigger name and the score, firmer with the help cursor when the pointer is on the cell. */
.prio .trig,.ring .rt{text-decoration:underline dotted rgba(0,0,0,.28);text-underline-offset:4px;text-decoration-thickness:1px}
[data-hover]{cursor:help}
[data-hover]:hover .trig,[data-hover]:hover .rt{text-decoration-color:rgba(0,0,0,.55)}

/* the hover target fills the cell's height but only the content's width */
td .prio,td .ring{box-sizing:content-box;padding-top:7px;padding-bottom:7px;margin-top:-7px;margin-bottom:-7px}

/* ── The record page, 2026-09-25 ─────────────────────────────────────────────────────────────────
   Section titles are titles (15px/600 ink), not uppercase labels; the meta stays small on the right.
   The research sections are spec sheets: a label column and a text column. The committee nodes carry
   photo, name, title, seat and ways in; the unfilled seat is a dashed node. Empty basics hide. */
.tabpanes .sec{padding:22px 28px 20px}
.tabpanes .stitle{font-size:15px;font-weight:600;letter-spacing:-0.18px;text-transform:none;color:var(--ink);padding:0 0 12px;display:flex;align-items:baseline;justify-content:space-between}
.tabpanes .stitle .va{font-size:12.5px;color:var(--ink50);font-weight:400}
.tabpanes .para.lead{font-size:15.5px;line-height:24px;letter-spacing:-0.18px;max-width:64ch}

/* the basics: hide empties */
#p-details .frow.empty{display:none}
#p-details.all .frow.empty{display:flex}

/* fact strip under the company lead */
.factstrip{display:flex;flex-wrap:wrap;gap:0;margin-top:10px;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.factstrip .fs{flex:1 1 140px;padding:11px 14px;border-right:1px solid var(--rule);min-width:0}
.factstrip .fs:last-child{border-right:0}
.factstrip .fsk{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink50)}
.factstrip .fsv{font-size:14px;font-weight:500;margin-top:4px;line-height:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.factstrip .fsv .cited::after{display:none}

/* spec sheet rows */
.spec{margin-top:4px}
.specrow{display:grid;grid-template-columns:150px 1fr;column-gap:18px;padding:13px 0;border-top:var(--rule)}
.specrow:first-child{border-top:0}
.speck{font-size:12px;line-height:18px;font-weight:500;color:var(--ink50);padding-top:2px}
.tabpanes .speck{font-size:12px;letter-spacing:0;text-transform:none}
.speck .svendor{display:block;font-weight:600;color:var(--ink);font-size:12.5px;margin-top:2px;letter-spacing:-0.1px}
.speck .srun{display:block;font-weight:400;font-size:11.5px;color:var(--ink50);margin-top:3px;letter-spacing:0;text-transform:none}
.specv{font-size:14px;line-height:21px;letter-spacing:-0.1px;color:var(--ink);min-width:0;max-width:66ch}
.tabpanes .sfact.specv{margin-top:0}
.specv b{font-weight:600}
.specsub{font-size:13px;line-height:19px;color:var(--ink63);margin-top:6px}
.tabpanes .stackrow.specrow{padding:13px 0}

/* why now: the three lines read as the section's own text */
.tabpanes .say.v2.rec .sayrow{padding:0 0 12px}
.tabpanes .say.v2.rec .saylab{font-size:10.5px}
.tabpanes .say.v2 p{font-size:15px;line-height:23px}
.tabpanes .say.v2 + .sig{border-top:var(--rule);padding-top:16px;margin-top:4px}

/* committee nodes */
.tabpanes .org{margin:10px 0 4px}
.tabpanes .tier{gap:12px}
.tabpanes .node{width:224px;min-height:0;padding:12px 13px 11px;gap:10px}
.node .ntop{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
.node .nav{position:relative;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:rgb(240,241,243);overflow:hidden;display:flex;align-items:center;justify-content:center}
.node .nav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.node .nav i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink63)}
.node .nav.dashed{background:transparent;border:1.5px dashed rgb(200,202,207)}
.node .nav.dashed svg{width:16px;height:16px}
.node .nid{min-width:0;display:flex;flex-direction:column;gap:1px}
.node .nname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.node .ntitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.node .nfoot{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;margin-top:0}
.node .nrole{font-size:11px;line-height:14px;color:var(--ink50);letter-spacing:-0.05px}
.node .nways{display:inline-flex;gap:6px}
.node .nway svg{width:13px;height:13px;display:block}
.node.gap{border-style:dashed;background:rgb(252,252,253)}
.node.gap .nname{color:var(--ink63)}
.tabpanes .nflag{align-self:flex-start}

/* the person sheet */
.tabpanes .pdetail{margin-top:14px;padding:18px 20px;border:1px solid var(--rule);border-radius:10px;background:#fff}
.pdhead{padding-bottom:10px;border-bottom:var(--rule);margin-bottom:4px}
.pdname{font-size:15px;font-weight:600;letter-spacing:-0.18px;color:var(--ink)}
.tabpanes .pdtitle{font-size:13px;color:var(--ink63);margin:2px 0 0}
.pdrole{margin-left:8px;font-size:11px;color:var(--ink50);padding:1px 7px;border:1px solid var(--rule);border-radius:999px}
.pdrow{display:grid;grid-template-columns:130px 1fr;column-gap:16px;padding:10px 0;border-top:var(--rule)}
.pdrow:nth-child(2){border-top:0}
.pdk{font-size:12px;font-weight:500;color:var(--ink50);padding-top:1px}
.pdv{font-size:13.5px;line-height:20px;color:var(--ink);min-width:0}
.pdour{margin-left:8px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink50)}
.pdq{padding:2px 0 6px}
.pdq+.pdq{border-top:var(--rule);padding-top:8px}
.pdqm{display:block;font-size:11.5px;color:var(--ink50);margin-top:2px}
.pdqm .cited::after{display:none}
.tabpanes .pcontact .ct{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;margin:0 6px 6px 0;border-radius:7px;background:rgb(246,247,247);font-size:12.5px}
.tabpanes .pcontact .ct svg{width:13px;height:13px}
.ctnone{font-size:12.5px;color:var(--ink50)}
.pdv.pcontact{border-top:0;padding-top:0;margin-top:0}
.pdv.pcontact::before{display:none}

/* record: sourced text is dotted-underlined everywhere it can be opened; values in the left panel are ink, not link-blue */
.tabpanes .cited,.tabpanes .lysurf,.tabpanes .pdv a.cited,.tabpanes .sig-ev[href]{text-decoration:underline dotted rgba(0,0,0,.3);text-underline-offset:3px;text-decoration-thickness:1px}
.tabpanes .cited:hover,.tabpanes .lysurf:hover{text-decoration-style:dotted;text-decoration-color:rgba(0,0,0,.6)}
.fvalue a{color:var(--ink);text-decoration:underline dotted rgba(0,0,0,.3);text-underline-offset:3px}
.fvalue a:hover{text-decoration-color:rgba(0,0,0,.6)}
.flabel .lu{width:14px;height:14px;flex:0 0 14px}
/* the lead paragraph sits one step above body, not three */
.tabpanes .para.lead{font-size:14.5px;line-height:22px;letter-spacing:-0.14px;max-width:66ch;padding-bottom:10px}
.tabpanes .say.v2 p{font-size:14.5px;line-height:22px}
.speck,.tabpanes .speck{font-size:12.5px}
.pdk{font-size:12.5px}

/* the basics, as Attio's record sidebar lays them out: one line per field, label and value on the same
   baseline, label column fixed and truncated with an ellipsis, icon on the line, nothing wraps */
.mid{width:320px;flex:0 0 320px}
.mid .frow{min-height:30px;display:flex;align-items:center;gap:10px;padding:3px 0}
.mid .flabel{flex:0 0 138px;display:flex;align-items:center;gap:7px;font-size:12.5px;line-height:18px;color:var(--ink63);white-space:nowrap;overflow:hidden;min-width:0}
.mid .flabel span{overflow:hidden;text-overflow:ellipsis}
.mid .flabel .lu{width:14px;height:14px;flex:0 0 14px}
.mid .fvalue{flex:1;min-width:0;font-size:13.5px;line-height:18px;letter-spacing:-0.12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mid .fvalue a{text-decoration-color:rgba(0,0,0,.22)}
.runline:empty{display:none}

/* the trigger filter chip in the toolbar: the toolbar's own button chrome, tinted like an active state */
.fchip{text-decoration:none;background:var(--hover);border-color:transparent;color:var(--ink);gap:6px}
.fchip .lu{width:14px;height:14px}
.fchip .fx{color:var(--ink50);font-size:15px;line-height:1;margin-left:2px}
.fchip:hover .fx{color:var(--ink)}

/* ── the play board, 2026-09-25 ──────────────────────────────────────────────────────────────────
   The person card header was a solid block of the thread colour with white 40px type — the one loud
   surface in a quiet app. Now it is the card's own white with a thick top rule in the thread colour, the
   avatar ringed in it, the name in ink, the seat chip tinted. The colour still codes the column; the type
   still reads at half zoom. The header links are toolbar buttons. */
#bview .bbtns{display:inline-flex;gap:6px;margin-left:auto}
#bview .btn.blink{height:30px;font-size:13px;font-weight:500;color:var(--ink63);letter-spacing:-0.1px;gap:7px;text-decoration:none}
#bview .btn.blink:hover{color:var(--ink);text-decoration:none}
#bview .btn.blink .lu{width:15px;height:15px}
#bview .bshape{margin-top:8px;font-size:12px;font-weight:500;color:var(--ink50)}
#bview .btg{border-top:6px solid var(--bcol);border-color:var(--bcol);border-top-color:var(--bcol)}
#bview .btg .bhd{background:#fff;border-bottom:1px solid rgb(238,239,241);min-height:0;padding:26px 28px 24px;gap:20px;align-items:center}
#bview .btg .bav{background:#fff;color:var(--bcol);box-shadow:0 0 0 3px var(--bcol),0 0 0 6px #fff}
#bview .btg .bnm{color:var(--bink,#111112)}
#bview .btg a.bnm:hover{text-decoration-color:rgba(0,0,0,.35)}
#bview .btg .bti{color:var(--ink63)}
#bview .btg .bchip{background:color-mix(in srgb,var(--bcol) 12%,#fff);color:var(--bcol);font-weight:600}

/* ── the board: one type scale (2026-09-25) ───────────────────────────────────────────────────────
   The person card was drawn at 1.7× (28px statements, 18px labels) and the message cards at 1× (16px
   body, 12px labels), so at the board's default zoom one read as a poster and the other as fine print.
   One scale now, built to read at the fit zoom (~0.55–0.7) the way the rest of the app reads at 1×:
     label 18/24 600 ink50 · body 22/33 400 ink · secondary 19/28 ink63 · title 24/32 500 · name 34/40 600.
   Card chrome (rules, radii, chips) is unchanged. */
#bview .btg .bnm{font-size:34px;line-height:40px;letter-spacing:-0.5px;font-weight:600}
#bview .btg .bti{font-size:19px;line-height:26px;margin-top:2px}
#bview .btg .bchip{height:32px;padding:0 12px;font-size:18px}
#bview .bav{width:72px;height:72px;flex:0 0 72px;font-size:24px}
#bview .bhook{font-size:24px;font-weight:500;line-height:34px;letter-spacing:-0.2px}
#bview .bhook b,#bview .bowns b{font-size:18px;line-height:24px;font-weight:600;color:var(--ink50);letter-spacing:-0.1px;text-transform:none}
/* a call card with its script open hides the peek line: the script's first row is the same sentence */
#bview .bstep.bon .bpeek{display:none}
#bview .bhook b,#bview .bowns b{margin-bottom:8px}
#bview .bhook2{font-size:19px;line-height:28px;margin-top:10px;color:var(--ink63)}
#bview .bowns{font-size:22px;line-height:33px;color:var(--bink,#111112);margin-top:24px;padding-top:20px}
#bview .bct{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:20px;font-size:19px;line-height:26px}
#bview .bct a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:9px;background:rgb(246,247,247);color:var(--ink);font-variant-numeric:tabular-nums}
#bview .bct a:hover{background:rgb(238,239,241);color:var(--ink);text-decoration:none}
#bview .bplan{font-size:18px;line-height:24px;color:var(--ink63);padding:18px 28px}
#bview .bplan svg{width:22px;height:22px}
/* message cards keep their own typography: they are the messages, and the point is that they look like
   messages, not like the card around them. Only the day markers and the footer table follow the board scale. */
#bview .bmk{font-size:16px;line-height:22px;padding:5px 12px}
#bview .bfoot .bt{font-size:24px}
#bview .brw{padding:18px 28px;gap:20px}
#bview .bfn{flex:0 0 260px;font-size:20px;line-height:28px;font-weight:600}
#bview .brw .btlt{font-size:19px;line-height:28px;color:var(--ink63)}
#bview .bfr{font-size:19px;line-height:28px}
#bview .brw .btlt,#bview .bfoot .br{font-size:19px}

/* record tabs: on a narrow window the bar wraps to a second line instead of hiding the last sections */
.tabbar{flex-wrap:wrap;height:auto;min-height:49px;padding:6px 12px;row-gap:2px}

/* the brief, open in the header: tighter type and rhythm so the board shows under it; nothing hidden, nothing scrolls */
#bview .bsec{margin:18px 0 0}
#bview .bkick{margin:0 0 8px;font-size:10.5px}
#bview .btli{font-size:12.5px;line-height:18px;padding-bottom:10px}
#bview .bwr{padding:9px 0}
#bview .bwa{margin-top:3px;font-size:12.5px;line-height:18px}
#bview .bp,#bview .bp-lead{font-size:12.5px;line-height:18px}
#bview .bp-lead{font-size:13px;font-weight:500}
#bview .bpli{font-size:12.5px;line-height:18px}
#bview .bthesis{margin-top:12px;font-size:14.5px;line-height:22px;max-width:80ch}
#bview .bhead .bwrap{padding-top:14px;padding-bottom:14px}
#bview .bbrief{margin-top:16px;padding-top:14px}

/* case studies: a full-width row under the two columns, cards side by side */
#bview .bcolB{grid-column:1 / -1;border-top:1px solid var(--bhair);margin-top:16px;padding-top:2px}
#bview .bcolB .bsec{margin-top:14px}
#bview .bcolB .bpl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
#bview .bcolB .bpli{display:block;padding:11px 14px;border:1px solid var(--rule);border-radius:10px;background:rgb(251,251,252)}
#bview .bcolB .bcn{display:block;font-size:13px;font-weight:600;letter-spacing:-0.13px;color:var(--ink);margin-bottom:3px}
#bview .bcolB .bpt2{display:block;font-size:12.5px;line-height:18px;color:var(--ink63)}
#bview .bcolB .blnk{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;font-weight:500;color:var(--accent);text-decoration:none}
#bview .bcolB .blnk svg{width:10px;height:10px;fill:currentColor}

/* Play table: the "Play written · open →" cell — the magic bar, finished. Ink label, glyph, sweep underneath,
   the row's own accent on hover; the whole cell is the link. */
.playopen{text-decoration:none;min-width:150px;max-width:160px;cursor:pointer}
.playopen .mlab{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:16px;letter-spacing:-0.13px;color:var(--ink);font-weight:500}
.playopen .mlab .lu{width:14px;height:14px}
.playopen .mgo{color:var(--accent);font-weight:500;margin-left:2px;opacity:.85;transition:opacity 140ms,transform 140ms;display:inline-block}
.playopen:hover .mgo{opacity:1;transform:translateX(2px)}
.playopen .mbar{height:3px}
#bview .bcolB{margin-top:10px}
#bview .bcolB .bsec{margin-top:10px}
#bview .bcolB .bpli{padding:9px 12px}
#bview .bhead .bwrap{padding-bottom:10px}

/* a channel the enrichment has not found yet: said quietly, never hidden */
#bview .bpend{font-style:normal;color:var(--ink50)}
#bview .bctpend{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:9px;border:1px dashed rgb(214,216,221);color:var(--ink50);font-size:19px}

/* The "What we actually checked" popover (record page, .ly): it opened the instant the pointer crossed a
   multi-line sentence and closed in the 6px gap on the way down into it. Now it waits 160ms before opening,
   lingers 280ms before closing, and the gap is bridged, so the pointer can travel from the line into the
   card. Same intent timings as the table's hovercard. */
.ly>.lyp{display:block;visibility:hidden;opacity:0;animation:none;cursor:default;
  transition:opacity .12s ease,visibility 0s linear .28s}
.ly>.lyp::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.ly:hover>.lyp,.ly:focus>.lyp,.ly:focus-within>.lyp{visibility:visible;opacity:1;
  transition:opacity .12s ease .16s,visibility 0s linear .16s}

/* board: a channel not found yet reads as the enrichment running — the Engage cells' magic bar at board scale */
#bview .bct .magic.bctpend{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;min-width:190px;max-width:230px;height:36px;padding:0 2px;border:0;background:transparent;color:var(--ink63)}
#bview .bct .magic.bctpend .mlab{font-size:18px;line-height:22px;letter-spacing:-0.1px;color:var(--ink63)}
#bview .bct .magic.bctpend .mbar{height:4px}
#bview .brow .magic.bpendm{display:inline-flex;flex-direction:column;gap:3px;min-width:130px;max-width:170px;vertical-align:middle;margin-left:6px}
#bview .brow .magic.bpendm .mlab{font-size:13px;line-height:15px;color:var(--ink50)}
#bview .brow .magic.bpendm .mbar{height:3px}
/* board: the person's own words on the target card */
#bview .bquotes{margin-top:22px;padding-top:20px;border-top:var(--rule)}
#bview .bquotes b{display:block;font-size:18px;line-height:24px;font-weight:600;color:var(--ink50);letter-spacing:-0.1px;margin-bottom:10px}
#bview .bq{padding:0 0 12px 16px;border-left:3px solid rgb(230,231,234);margin-bottom:12px}
#bview .bq:last-child{margin-bottom:0}
#bview .bqt{display:block;font-size:21px;line-height:31px;letter-spacing:-0.15px;color:var(--ink);font-style:italic}
#bview .bqt::before{content:"\201C"}#bview .bqt::after{content:"\201D"}
#bview .bqm{display:block;margin-top:6px;font-size:17px;line-height:22px;color:var(--ink50)}
#bview .bqm a{color:var(--accent);text-decoration:none}
#bview .bqm a:hover{text-decoration:underline}
/* the bar under a board chip measured 0px wide (a stretch that did not happen inside .bct); give it its width */
#bview .magic .mbar{width:100%;align-self:stretch;min-width:120px}
#bview .bct .magic.bctpend{align-items:stretch}
#bview .brow .magic.bpendm{align-items:stretch}
/* The row is the hover host, not the sentence: a two-line sentence has a jagged hover box and the card sits under
   its short second line, so a diagonal move from the end of line one left the box and closed the card. Hovering
   anywhere on the row keeps it open; the card spans the text column. */
.specrow:has(.ly):hover .ly>.lyp,.crit:has(.ly):hover .ly>.lyp,.stackrow:has(.ly):hover .ly>.lyp{visibility:visible;opacity:1;transition:opacity .12s ease .16s,visibility 0s linear .16s}
.specv{position:relative}
.specv .ly{position:static}
.specv .ly>.lyp{left:0;top:calc(100% + 4px);width:100%;max-width:100%;box-sizing:border-box}

/* What they run today: a stack strip, then rows of fact + intel tags. Chips borrow the tag chrome at 22px. */
.stackstrip{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 10px;margin-bottom:2px}
.syschip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:rgb(240,241,243);color:var(--ink);font-size:12.5px;font-weight:500;letter-spacing:-0.1px;white-space:nowrap}
.syschip.sm{height:20px;padding:0 7px;font-size:11.5px;background:rgb(244,245,247);color:var(--ink63)}
.sintel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px}
.smoving{font-size:12.5px;line-height:17px;color:var(--ink63)}
.smoving b{font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink50);margin-right:6px}
.speck .srun{display:block;font-weight:400;font-size:11.5px;color:var(--ink50);margin-top:3px;text-transform:none;letter-spacing:0}
/* the evidence popover: plain text, one label, no underlines */
.ly .lypbody,.ly .lysurf{text-decoration:none}
.ly .lypbody{text-decoration:none;color:var(--ink)}
.ly .lyl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink50);margin-bottom:6px}

/* say v3 (say-prompt-v9+): one spoken paragraph, one sentence per line, the first carrying the weight */
:is(.hovercard,.drawer,.tabpanes) .say.v3{padding:2px 0 10px}
:is(.hovercard,.drawer,.tabpanes) .say.v3 p{margin:0 0 6px;font-size:13.5px;line-height:19px;letter-spacing:-0.1px;color:var(--ink)}
:is(.hovercard,.drawer,.tabpanes) .say.v3 p:first-child{font-weight:500}
:is(.hovercard,.drawer,.tabpanes) .say.v3 p:last-child{margin-bottom:0}
.drawer .say.v3 p{font-size:14px;line-height:20px}

/* the operator gate on the all-sellers view (main.js renderGate) — Attio's editor ground, input and primary button */
.gate{max-width:360px;margin:96px auto 0;padding:28px 28px 24px;background:#fff;border:1px solid rgb(238,239,241);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.gate-t{font-size:15px;line-height:20px;font-weight:500;color:var(--ink);letter-spacing:-0.14px;margin-bottom:14px}
.gate-s{font-size:13px;line-height:18px;color:var(--ink50);margin:4px 0 16px}
.gate input{display:block;width:100%;box-sizing:border-box;height:36px;padding:0 10px;border:1px solid rgb(238,239,241);border-radius:8px;font:inherit;font-size:14px;color:var(--ink);outline:none}
.gate input:focus{border-color:rgb(63,90,224);box-shadow:0 0 0 3px rgba(63,90,224,.12)}
.gate button{margin-top:10px;height:34px;width:100%;padding:0 14px;border:0;border-radius:8px;background:rgb(63,90,224);color:#fff;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.gate-e{min-height:18px;margin-top:8px;font-size:12.5px;color:rgb(203,66,58)}