/* app.css — chrome for the review app. Same calm system as the section designs:
   warm paper, ink, brand olive, monospace eyebrows, soft-out easing, hero-style entrance. */
:root{
  --bg:#f8f3ee; --paper:#fff; --ink:#241d27; --mute:#6d6570; --brand:#686c1b; --brand-deep:#404213; --brand-soft:#eef0e0;
  --split:1fr 1fr;
  --hair:rgba(36,29,39,.12); --hair2:rgba(36,29,39,.06); --ok:#2f6b3a; --ok-bg:#e6efe1; --warn:#8a5a00; --warn-bg:#fff3d6;
  --bad:#b5442f; --bad-bg:#f6e7e3; --run:#3b4fa1; --run-bg:#e8ecf8;
  --ease:cubic-bezier(.16,1,.3,1); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --r:10px; --shadow:0 18px 40px -24px rgba(36,29,39,.45);
  /* L1 — one hue per stage, everywhere. L2 — three urgency colours only. */
  --st-new:#9a9a9a; --st-scraped:#4f7bd9; --st-built:#2aa6a0; --st-pushed:#3f9d4c; --st-drafted:#d9a300; --st-sent:#e07b39; --st-replied:#7b5fd1; --st-handed_over:#1f7a3f; --st-rejected:#c8443a; --st-dropped:#c8443a;
  --urg-red:#c8443a; --urg-amber:#d9a300; --urg-green:#3f9d4c;
  --gutter:24px; --gutter-in:16px; --content:72ch; /* ONE gutter (H7). H9: pages are full-bleed; --content caps only a single TEXT column */
}
@media (max-width:768px){:root{--gutter:16px;--gutter-in:14px}}
*{box-sizing:border-box}
html{color-scheme:light}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.45;min-height:100svh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
body>main{flex:1 0 auto}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em}
a{color:var(--brand);text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono,.eyebrow{font-family:var(--mono)}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--brand)}
.mute{color:var(--mute)}
.sp{flex:1}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* entrance — hero-style rise, staggered */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .8s var(--ease) both}
.rise:nth-child(2){animation-delay:.06s}.rise:nth-child(3){animation-delay:.12s}.rise:nth-child(4){animation-delay:.18s}

/* ---------- buttons / fields / pills ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:8px;border:1.5px solid var(--ink);background:var(--paper);
  font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),opacity .35s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(36,29,39,.45)}
.btn:active{transform:none}
.btn-primary{background:var(--ink);color:#fff}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-ghost{border-color:var(--hair);color:var(--ink);font-weight:600}
.btn-quiet{border-color:transparent;background:transparent;font-weight:600;color:var(--mute)}
.btn-quiet:hover{background:var(--hair2);box-shadow:none;color:var(--ink)}
.btn-sm{min-height:30px;padding:0 10px;font-size:12px}
.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.btn.done{background:var(--ok-bg);border-color:#b9ceaa;color:var(--ok)}
.btn.busy{color:var(--mute);border-color:var(--hair)}
.btn .spin,.spin{width:14px;height:14px;border:2px solid var(--hair);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.lnk{background:none;border:0;padding:0;color:var(--brand);font-weight:700;cursor:pointer;font-size:inherit;text-decoration:none}
.lnk:hover{text-decoration:underline}
.field,input.field,select.field,textarea.field{min-height:38px;padding:8px 12px;border:1px solid var(--hair);border-radius:8px;background:var(--paper);font:inherit;color:var(--ink);width:100%}
textarea.field{resize:vertical;min-height:64px;line-height:1.4}
.field:focus{border-color:var(--brand);outline:2px solid color-mix(in srgb,var(--brand) 25%,transparent);outline-offset:0}
select.field{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;background-size:5px 5px;background-repeat:no-repeat}
.field[readonly],.field.locked{background:var(--bg);color:var(--mute)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:99px;border:1px solid var(--hair);background:var(--paper);white-space:nowrap;line-height:1.5}
.pill.ok{background:var(--ok-bg);border-color:#b9ceaa;color:var(--ok)}
.pill.no{background:var(--bad-bg);border-color:#e0bcb2;color:var(--bad)}
.pill.warn{background:var(--warn-bg);border-color:#ead9a2;color:var(--warn)}
.pill.run{background:var(--run-bg);border-color:#c3cbea;color:var(--run)}
.pill.off{color:#b7b0ba;border-style:dashed;background:transparent}
.pri{font-weight:800;width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;background:var(--hair2);font-size:12px}
.pri.A{background:#e7e2f3}.pri.B{background:var(--brand-soft);color:var(--brand-deep)}.pri.C{background:#f3efe7}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand);display:inline-block}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--brand-soft);color:var(--brand-deep)}

/* ---------- top bars ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:10px var(--gutter);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);flex-wrap:wrap}
.topbar .title{font-size:16px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0;max-width:min(40vw,420px)}
.topbar .grp.mob{display:none}
.sitebar .btn{padding:0 12px}
.topbar .sub{font-family:var(--mono);font-size:12px;color:var(--mute)}
.topbar .grp{display:flex;align-items:center;gap:8px}
#jobbar{position:sticky;top:0;z-index:21;display:flex;gap:18px;flex-wrap:wrap;padding:6px 20px;font-family:var(--mono);font-size:12px;background:var(--ink);color:#fff}
#jobbar .job{display:inline-flex;gap:8px;align-items:center}
#jobbar .job.failed .dot{background:#f4a58e}
#jobbar .job.running .dot{animation:pulse 1.2s ease-in-out infinite}
#jobbar .lnk{color:#e8e6c8}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.app-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px var(--gutter);font-size:13px;border-bottom:1px solid var(--hair);background:var(--paper)}
.app-strip.warn{background:var(--warn-bg);color:var(--warn)}
.app-strip.bad{background:var(--bad-bg);color:var(--bad)}
.app-strip.info{background:var(--brand-soft);color:var(--brand-deep)}
.app-strip .btn{min-height:30px}

/* ---------- status bar + toasts ---------- */
#status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* G4: screen readers only — the toast is the visible copy */
#status:empty{display:none}
#toasts{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column-reverse;gap:8px;z-index:70;max-width:min(360px,calc(100vw - 32px))}
.toast{background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease);display:flex;gap:12px;align-items:center}
.toast.in{opacity:1;transform:none}
.toast.warn{background:#5a3d00}.toast.bad{background:#7a2a1c}
.toast .lnk{color:#e8e6c8}
.copy-fallback{position:fixed;left:16px;bottom:48px;z-index:80;font:12px var(--mono);padding:6px 8px}
.foot{display:flex;gap:16px;align-items:center;padding:14px var(--gutter) 60px;font-family:var(--mono);font-size:11px;color:var(--mute);border-top:1px solid var(--hair);margin-top:24px}

/* ---------- Screen 1: leads ---------- */
.leads-wrap{padding:0 var(--gutter) 20px} /* H9: full bleed — space becomes columns, never margins */
.batchbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px var(--gutter-in);margin:14px 0 0;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper);animation:rise .5s var(--ease) both}
.batchbar .prog{font-family:var(--mono);font-size:12px;color:var(--mute)}
table.leads{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px;table-layout:auto}
.leads td.stg{width:1%;white-space:nowrap}.leads td.gap{max-width:160px;overflow-wrap:anywhere}.leads td .crt{overflow-wrap:anywhere}
.leads th{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:left;padding:10px 10px;border-bottom:1px solid var(--hair);font-weight:700;position:sticky;top:58px;background:var(--bg);z-index:5}
.leads td{padding:12px 10px;border-bottom:1px solid var(--hair2);vertical-align:middle;min-width:0}
.leads tbody tr{content-visibility:auto;contain-intrinsic-size:auto 92px;cursor:pointer;transition:background-color .25s}
.leads tbody tr:hover,.leads tbody tr:focus-visible{background:var(--paper);outline:none}
.leads tbody tr:focus-visible td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
.leads tr.demo td{background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
.leads .name{font-weight:700}
.leads .sub{font-family:var(--mono);font-size:11.5px;color:var(--mute);margin-top:2px}
.leads input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.links{display:inline-flex;flex-direction:column;gap:4px;align-items:flex-start}
.lk{display:inline-flex;align-items:stretch;border:1px solid var(--hair);border-radius:6px;font-family:var(--mono);font-size:11.5px;background:var(--paper);overflow:hidden;transition:border-color .25s}
.lk:hover{border-color:var(--brand)}
.lk>button,.lk>a{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:0;background:none;cursor:pointer;font:inherit;color:var(--brand);font-weight:700}
.lk>button.cp{border-left:1px solid var(--hair);color:var(--mute);font-weight:400;padding:3px 7px}
.lk>button.cp:hover{color:var(--ink);background:var(--hair2)}
.lk.off{border-style:dashed;background:transparent;color:#b7b0ba;padding:3px 8px}
.lk.cred>button:first-child{color:var(--mute)}
.skeleton td>span{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--hair2),var(--hair),var(--hair2));background-size:200% 100%;animation:sh 1.2s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.empty{padding:64px 20px;text-align:center;color:var(--mute)}
.empty b{display:block;font-size:16px;color:var(--ink);margin-bottom:8px}
.pop{position:fixed;z-index:50;min-width:240px;max-width:min(360px,calc(100vw - 32px));background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow);display:grid;gap:8px;font-size:12.5px;animation:rise .35s var(--ease) both}
.pop h4{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pop .row{display:flex;align-items:center;gap:8px}
.pop code{font-family:var(--mono);background:var(--bg);padding:2px 6px;border-radius:4px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop .thumb{width:240px;aspect-ratio:16/10;border-radius:6px;background:linear-gradient(160deg,var(--brand-soft),var(--paper) 40%,var(--bg));border:1px solid var(--hair);position:relative;overflow:hidden}
.pop .thumb::before{content:"";position:absolute;inset:14% 12% auto 12%;height:8%;border-radius:3px;background:var(--brand-deep);opacity:.8}
.pop .thumb::after{content:"";position:absolute;left:12%;right:50%;top:30%;height:6%;border-radius:3px;background:var(--ink);opacity:.5;box-shadow:0 14px 0 -1px rgba(36,29,39,.25),0 26px 0 -1px rgba(36,29,39,.15)}
.pop .thumb i{position:absolute;right:10%;top:52%;width:34%;height:38%;border-radius:4px;background:var(--brand);opacity:.7}
.pop em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.pop .close{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;border:0;background:none;cursor:pointer;color:var(--mute)}

/* ---------- Screen 2: site ---------- */
.sitebar .toggle{display:inline-flex;border:1px solid var(--hair);border-radius:8px;overflow:hidden}
.sitebar .toggle button{border:0;background:var(--paper);padding:0 10px;min-height:36px;font-family:var(--mono);font-size:12px;cursor:pointer;color:var(--mute)}
.sitebar .toggle button[aria-pressed="true"]{background:var(--ink);color:#fff}
.more{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--paper);border:1px solid var(--hair);border-radius:10px;box-shadow:var(--shadow);padding:6px;display:grid;gap:2px;min-width:200px;z-index:30}
.menu button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font-weight:600;display:flex;gap:8px;align-items:center}
.menu button:hover{background:var(--bg)}
.menu button[aria-current="true"]{color:var(--brand)}
.app-preview-stage{padding:0 0 40px;background:#e9e3dc;min-height:70svh}
.app-builder #preview{width:100%;margin:0 auto;background:var(--paper);box-shadow:0 30px 60px -40px rgba(36,29,39,.5)} /* L9: the canvas spans the full pane width at 1:1 — sections are full-bleed and responsive. No width transition: animating the width of a real (non-iframe) DOM subtree this deep forces Chrome to blur-composite the layout for the transition's duration — snap instantly instead, same as Shopify/Framer's device toggles. */
.app-builder #preview.mobile{width:390px;max-width:100%;min-height:60svh;outline:1px solid var(--hair)}
.sec-wrap{position:relative}
.sec-wrap .tab{position:absolute;top:14px;right:14px;z-index:5;display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--ink);border-radius:8px;padding:6px 10px;font:12px var(--mono);cursor:pointer;color:var(--ink);box-shadow:0 8px 20px -10px rgba(0,0,0,.4);opacity:.55;transition:opacity .3s,transform .35s var(--ease),outline-color .3s}
.sec-wrap .tab b{color:var(--brand)}
.sec-wrap:hover .tab,.sec-wrap:focus-within .tab,.sec-wrap .tab:focus-visible{opacity:1}
.sec-wrap:hover .tab{outline:3px solid rgba(104,108,27,.25)}
.sec-wrap.swapping>section{animation:swapin .55s var(--ease) both}
@keyframes swapin{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (hover:none),(max-width:767px){.sec-wrap .tab{opacity:1}}
.band-msg{margin:40px auto;max-width:560px;padding:40px 28px;text-align:center;background:var(--paper);border-radius:14px;box-shadow:var(--shadow)}
.band-msg h2{font-size:22px;margin-bottom:8px}
.band-msg p{color:var(--mute);margin:0 0 20px}
.hint{display:flex;gap:12px;align-items:center;justify-content:center;padding:10px;font-size:13px;color:var(--brand-deep);background:var(--brand-soft)}
/* compare strip */
#compare{position:sticky;top:57px;z-index:15;background:var(--paper);border-bottom:1px solid var(--hair);box-shadow:var(--shadow);animation:slide .5s var(--ease) both}
@keyframes slide{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
#compare .hd{display:flex;align-items:center;gap:12px;padding:10px 20px;font-size:13px}
#compare .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 20px 14px}
.cmp{border:1.5px solid var(--hair);border-radius:10px;padding:8px;background:var(--paper);cursor:pointer;text-align:left;transition:border-color .3s,transform .35s var(--ease)}
.cmp:hover{transform:translateY(-2px)}
.cmp[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft)}
.cmp .box{width:100%;aspect-ratio:1440/700;overflow:hidden;border-radius:6px;position:relative;background:var(--bg)}
.cmp .box>.pv{width:1440px;position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.cmp .cap{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font:12px var(--mono)}
.cmp .cap b{color:var(--brand)}

/* ---------- dialogs ---------- */
dialog.dlg{border:0;padding:0;margin:0;background:var(--paper);color:var(--ink);box-shadow:var(--shadow);max-width:none;max-height:none;width:440px;height:100svh;position:fixed;inset:0 0 0 auto;display:none;flex-direction:column;animation:dlgin .5s var(--ease) both}
dialog.dlg[open]{display:flex}
dialog.dlg.wide{width:min(900px,100vw)}
@keyframes dlgin{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
dialog.dlg::backdrop{background:rgba(36,29,39,.15)}
.dlg .hd{display:flex;align-items:center;gap:10px;padding:16px var(--gutter);border-bottom:1px solid var(--hair);flex-wrap:wrap}
.dlg .hd h2{font-size:17px}
.dlg .hd .sub{font-family:var(--mono);font-size:12px;color:var(--mute)}
.dlg .x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);display:grid;place-items:center;font-weight:800;cursor:pointer}
.dlg .bd{padding:var(--gutter);display:grid;gap:22px;overflow:auto;flex:1;align-content:start}
.dlg .ft{display:flex;gap:10px;align-items:center;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:var(--bg);flex-wrap:wrap}
.dlg .ft .note{font-family:var(--mono);font-size:11px;color:var(--mute)}
.dlg .handle{display:none}
.dlg h4{margin:0 0 8px;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:700}
.dlg .row-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dlg .row-h h4{margin:0}
.dlg .strip{margin:-18px -20px 0;border-bottom:1px solid var(--hair)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.opt{display:grid;grid-template-columns:18px 48px 1fr;gap:10px;align-items:center;border:1px solid var(--hair);border-radius:8px;padding:10px var(--gutter-in);font-size:13px;cursor:pointer;transition:border-color .3s,background-color .3s;position:relative}
.opt:hover{border-color:var(--brand)}
.opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.opt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.opt>input[type=radio]{margin:0;accent-color:var(--brand);width:16px;height:16px}
.opt .th{height:30px;border-radius:4px;border:1px solid var(--hair);background:repeating-linear-gradient(135deg,#eee 0 6px,#fff 6px 12px)}
.opt .th.o1{background:linear-gradient(90deg,var(--bg) 50%,var(--brand-deep) 50%)}
.opt .th.o2{background:linear-gradient(90deg,#fff 55%,var(--brand-deep) 55%)}
.opt .th.o3{background:linear-gradient(180deg,#5a5a40,#2b2b1c)}
.opt .th.o4{background:linear-gradient(135deg,var(--brand),var(--brand-deep))}
.opt .lab{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt .lab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt .meta{display:flex;gap:8px;align-items:center;font:11px var(--mono);color:var(--mute)}
.opt .meta b{color:var(--brand)}
.frm{display:grid;gap:14px}
.fld{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;align-items:start;font-size:13px}
.fld>label{padding-top:9px;color:var(--mute);font-weight:600;font-size:12.5px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.fld .ctl{display:flex;gap:6px;align-items:flex-start}
.fld .ctl .field{flex:1}
.fld .rw{width:34px;height:38px;flex:none;border-radius:8px;border:1.5px solid var(--brand);background:var(--paper);color:var(--brand);cursor:pointer;display:grid;place-items:center;font-size:14px;transition:background-color .3s,color .3s}
.fld .rw:hover{background:var(--brand);color:#fff}
.fld .rw[aria-disabled="true"]{opacity:.4;cursor:wait}
.fld .under{grid-column:2;display:grid;gap:6px}
.fld .src{font:11px var(--mono);color:var(--mute)}
.fld .sugg{display:grid;gap:8px;padding:10px 12px;border:1px dashed var(--brand);border-radius:8px;background:var(--brand-soft);font-size:13px}
.fld .sugg .acts{display:flex;gap:8px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;font:11px var(--mono);padding:2px 8px;border-radius:99px;border:1px solid var(--hair);background:var(--paper)}
.chip.ok{background:var(--ok-bg);border-color:#b9ceaa;color:var(--ok)}
.chip.no{background:var(--bad-bg);border-color:#e0bcb2;color:var(--bad)}
.chip.warn{background:var(--warn-bg);border-color:#ead9a2;color:var(--warn)}
.chip.pending{color:var(--mute)}
.hist{border:1px solid var(--hair);border-radius:8px;padding:10px 12px;display:grid;gap:6px;font-size:12.5px;background:var(--bg)}
.hist .h{display:flex;gap:10px;align-items:center}
.hist .h time{font-family:var(--mono);color:var(--mute);font-size:11px;min-width:42px}
.hist .h .lnk{margin-left:auto}
.hist .h.built{color:var(--mute)}
.lockbox{display:flex;gap:6px;align-items:center;padding:8px 10px;border-radius:8px;background:var(--bg);font-size:12px;color:var(--mute)}
/* facts */
.facts{display:grid;grid-template-columns:180px 1fr;gap:20px;min-height:0}
.facts nav{display:grid;gap:2px;align-content:start;position:sticky;top:0}
.facts nav button{border:0;background:none;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font-weight:600;display:flex;gap:6px;align-items:center;color:var(--mute)}
.facts nav button[aria-current="true"]{background:var(--brand-soft);color:var(--brand-deep)}
.facts nav button:hover{background:var(--bg)}
.facts .grp{display:grid;gap:12px;align-content:start}
.facts .fld{grid-template-columns:130px 1fr}
.facts .ro{font-size:13px;padding:8px 12px;border-radius:8px;background:var(--bg);color:var(--mute);border:1px dashed var(--hair);line-height:1.5}
.facts .ro b{color:var(--ink)}
.facts .list{display:grid;gap:8px}
.facts .item{padding:10px 12px;border:1px solid var(--hair);border-radius:8px;font-size:13px;display:grid;gap:4px;background:var(--paper)}
.facts .item .m{font:11px var(--mono);color:var(--mute)}
/* push */
.info{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;font-size:13px}
.info .k{font:11px var(--mono);color:var(--mute);padding-top:2px;letter-spacing:.06em;text-transform:uppercase}
.info .v{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.info .v u{text-decoration:none;color:var(--brand);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.acct{display:grid;gap:8px}
.acct .opt{grid-template-columns:18px 1fr}
.acct .creds{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-top:8px;align-items:center}
.acct .creds .field{min-height:34px;padding:6px 10px;font-size:13px}
.acct .creds label{font:11px var(--mono);color:var(--mute);display:grid;gap:4px}
.diff{border:1px solid var(--hair);border-radius:8px;padding:10px 12px;display:grid;gap:6px;font-size:13px;background:var(--bg)}
.diff .l{display:flex;gap:8px;font-family:var(--mono);font-size:12.5px}
.diff .l i{font-style:normal;width:16px;color:var(--brand);font-weight:700}
.diff .l.ch i{color:var(--warn)}
.steps{display:grid;gap:8px}
.step{display:grid;grid-template-columns:28px 1fr;gap:6px 12px;align-items:center;border:1px solid var(--hair);border-radius:8px;padding:9px 12px;font-size:13px;transition:border-color .3s,background-color .3s}
.step i{font-style:normal;font:12px var(--mono);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--hair2);color:var(--mute)}
.step .st{grid-column:2;font:11px var(--mono);color:var(--mute)}
.step.done i{background:var(--brand);color:#fff}
.step.running{border-color:var(--brand)}
.step.running i{background:var(--brand-soft);color:var(--brand-deep)}
.step.failed{border-color:#e0bcb2;background:var(--bad-bg)}
.step.failed i{background:var(--bad);color:#fff}
.step.skipped{opacity:.55}
.log{font:11px var(--mono);color:var(--mute);white-space:pre-wrap;background:var(--bg);padding:10px;border-radius:8px;max-height:160px;overflow:auto}
/* debug */
#debug{position:fixed;left:12px;top:70px;z-index:90;width:min(420px,calc(100vw - 24px));max-height:70svh;overflow:auto;background:rgba(36,29,39,.94);color:#e8e6c8;font:11px var(--mono);padding:10px 12px;border-radius:10px;line-height:1.5;white-space:pre-wrap}
#debug b{color:#ffd166}

/* ---------- responsive ---------- */
@media (max-width:1100px){#compare .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1280px){.sitebar .sub{display:none}}
@media (max-width:1200px){
  .leads-wrap{padding:0 16px 20px}
  table.leads,.leads thead,.leads tbody,.leads tr,.leads td{display:block}
  .leads thead{display:none}
  .leads tbody tr{padding:12px 0;border-bottom:1px solid var(--hair);contain-intrinsic-size:auto 150px}
  .leads td{padding:3px 0;border:0}
  .leads td:nth-child(3),.leads td:nth-child(4){display:inline-flex;align-items:center;margin-right:10px;vertical-align:middle}
  .leads td.chk{float:left;margin:2px 10px 0 0}
  .leads td.stat{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .links{flex-direction:row;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
  .lk>button,.lk>a{min-height:40px;padding:0 10px;font-size:12px}
  .lk.off{display:inline-flex;align-items:center;min-height:40px;padding:0 10px}
  .pop{left:16px!important;right:16px!important;top:auto!important;bottom:0!important;max-width:none;border-radius:14px 14px 0 0;border-bottom:0;animation:sheet .45s var(--ease) both}
  .pop .thumb{width:100%}
  @keyframes sheet{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
}
@media (max-width:767px){
  .topbar{padding:10px 16px;gap:8px}
  .topbar .grp.desk{display:none}
  .topbar .grp.mob{display:inline-flex;margin-left:auto}
  .sitebar .sp{display:none}
  .sitebar #save,.sitebar #deploy,.sitebar #push{flex:1 1 28%;justify-content:center;padding:0 8px;font-size:12.5px}
  .sitebar #deploy-copy{display:none}
  #dlg-facts .hd .sub,#dlg-push .hd .sub{display:none}
  .copy-fallback{top:12px;bottom:auto}
  .app-preview-stage{padding:0 16px 40px}
  .app-builder #preview{width:100%}
  .app-builder #preview.mobile{width:100%}
  dialog.dlg,dialog.dlg.wide{width:100%;height:58svh;inset:auto 0 0 0;border-radius:16px 16px 0 0;animation:sheet .5s var(--ease) both}
  .dlg .handle{display:block;width:40px;height:4px;border-radius:2px;background:var(--hair);margin:8px auto 0}
  .dlg .hd{padding:10px 16px}
  .dlg .bd{padding:14px 16px;gap:18px}
  .dlg .strip{margin:-14px -16px 0}
  .fld{grid-template-columns:1fr}
  .fld>label{padding-top:0}
  .fld .under{grid-column:1}
  .facts{grid-template-columns:1fr}
  .facts nav{position:static;display:flex;overflow-x:auto;gap:4px;padding-bottom:4px}
  .facts nav button{white-space:nowrap}
  .facts .fld{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
  .acct .creds{grid-template-columns:1fr}
  #compare{top:0}
  #compare .hd{flex-wrap:wrap;padding:10px 16px}
  #compare .hd .mute{display:none}
  #compare .grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:0 16px 14px}
  .cmp{flex:0 0 78%;scroll-snap-align:center}
  .band-msg{margin:24px 0;padding:28px 20px}
  #status{max-width:calc(100vw - 32px);bottom:calc(6px + env(safe-area-inset-bottom))}
  .foot{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =================================================================================================
   Unified app (2026-09-11) — global nav, stage chips, hub, leads columns, strip. Chrome classes are `.app-*`
   (DESIGN-RULES #5: `.card .strip .band .score` belong to section designs). Stage-chip text colour is computed
   (shell.contrastText) — the CSS below sets no colour pairings for variable backgrounds.
   ================================================================================================= */
.app-nav{display:flex;align-items:center;gap:4px;padding:8px var(--gutter);border-bottom:1px solid var(--hair);background:var(--paper);position:sticky;top:0;z-index:25;flex-wrap:wrap}
.app-nav .brand{display:flex;align-items:center;gap:7px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-right:14px;font-size:14px;text-decoration:none}
.app-nav .brand-icon{width:20px;height:20px;flex:0 0 auto}
.app-nav nav{display:flex;gap:2px;flex-wrap:wrap}
.app-nav nav a{padding:7px 11px;border-radius:7px;color:var(--mute);font-weight:600;font-size:13px;transition:background-color .3s,color .3s}
.app-nav nav a:hover{background:var(--bg);color:var(--ink)}
.app-nav nav a.on{background:var(--brand-soft);color:var(--brand-deep);font-weight:700}
.app-nav .app-inbox{cursor:pointer}
.app-nav .app-inbox:hover{border-color:var(--brand)}
.app-nav~.topbar{top:45px}
.app-nav~#jobbar{top:45px}
.topbar .btn-primary{min-height:36px}
.app-stage{display:inline-flex;align-items:center;font-family:var(--sans);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:5px;white-space:nowrap;line-height:1.5;gap:5px;letter-spacing:.01em}
.app-stage.s-pushed,.app-stage.s-handed_over{font-weight:700}
.app-stage.s-dropped{opacity:.75}
.app-card{border:1px solid var(--hair);border-radius:12px;padding:var(--gutter-in);background:var(--paper)}
.app-card h3{font-size:14px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.app-h4,.dlg h4,.app-card h4{margin:0 0 8px;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:700}
.app-note{font-size:12.5px;color:var(--mute);line-height:1.5}
.app-kpi{display:flex;gap:10px;flex-wrap:wrap}
.app-kpi>div{flex:1 1 90px;border:1px solid var(--hair);border-radius:8px;padding:10px;min-width:0}
.app-kpi b{display:block;font-size:22px;letter-spacing:-.02em}
.app-kpi small{font:11px var(--mono);color:var(--mute)}
.app-kpi .amber b{color:var(--warn)}.app-kpi .red b{color:var(--bad)}
.app-queue{list-style:none;margin:0;padding:0}
.app-queue li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair2);font-size:13px;min-height:44px}
.app-queue li:last-child{border-bottom:0}
.app-queue li .n{min-width:26px;text-align:center;border-radius:6px;font:12px var(--mono);padding:2px 4px}
.app-feed{list-style:none;margin:0;padding:0;font-size:12.5px}
.app-feed li{padding:6px 0;border-bottom:1px solid var(--hair2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.app-feed time{font:11px var(--mono);color:var(--mute);min-width:44px}
.app-funnel{display:flex;gap:6px;align-items:flex-end;min-height:120px}
.app-funnel button{flex:1;border:0;background:none;text-align:center;font:11px var(--mono);cursor:pointer;color:var(--mute);padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.app-funnel button:hover b{color:var(--ink)}
.app-funnel .barv{width:70%;border-radius:4px 4px 0 0;background:var(--brand);opacity:.85;min-height:3px}
.app-funnel b{color:var(--ink)}
/* tabs (hub, outreach, find) */
.app-tabs{display:flex;gap:2px;padding:0 var(--gutter);border-bottom:1px solid var(--hair);background:var(--paper);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.app-tabs a,.app-tabs button{padding:11px 14px;font-size:13px;color:var(--mute);border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;font-weight:600;white-space:nowrap;display:inline-flex;gap:8px;align-items:center;margin-bottom:-1px}
.app-tabs a.on,.app-tabs button.on,.app-tabs [aria-selected="true"]{color:var(--brand-deep);border-color:var(--brand)}
.app-tabs a:hover,.app-tabs button:hover{color:var(--ink)}
/* stage timeline (hub overview) */
.app-timeline{display:flex;align-items:flex-start;padding:16px var(--gutter);overflow-x:auto;gap:0;scrollbar-width:thin}
.app-timeline .st{display:flex;flex-direction:column;align-items:center;min-width:72px;flex:1 1 0;font:11px var(--mono);color:var(--mute);cursor:pointer;background:none;border:0;padding:0;gap:6px;text-align:center}
.app-timeline .st i{width:28px;height:28px;border-radius:50%;background:var(--hair2);display:grid;place-items:center;font-style:normal;color:var(--mute);transition:transform .35s var(--ease)}
.app-timeline .st:hover i{transform:scale(1.1)}
.app-timeline .st.done i{background:var(--brand);color:#fff}
.app-timeline .st.now i{background:var(--paper);border:3px solid var(--brand);color:var(--ink);font-weight:700}
.app-timeline .st.skip i{background:var(--paper);border:2px dashed var(--hair);color:#bbb}
.app-timeline .st.exit i{background:var(--bad-bg);border:2px solid #e0bcb2;color:var(--bad)}
.app-timeline .st b{color:var(--ink);font-weight:700}
.app-timeline .st.skip b{color:#bbb;font-weight:500}
.app-timeline .st small{color:#aaa;font-size:10.5px}
.app-timeline .ln{flex:1;height:2px;background:var(--hair);min-width:14px;margin-top:13px}
.app-timeline .ln.done{background:var(--brand)}
.app-timeline .ln.skip{background:repeating-linear-gradient(90deg,#ccc 0 6px,transparent 6px 12px)}
/* two-column body + split list/preview */
.app-two{display:grid;grid-template-columns:1fr 1fr;gap:0}
.app-two>div{padding:var(--gutter);min-width:0}
.app-two{width:100%}
.app-two>div:first-child{border-right:1px solid var(--hair)}
.app-split{display:grid;grid-template-columns:minmax(300px,440px) 1fr}
.app-leftpane{border-right:1px solid var(--hair);max-height:70svh;overflow:auto}
.app-rightpane{padding:var(--gutter);min-width:0}
.app-leadrow{padding:10px var(--gutter-in);border-bottom:1px solid var(--hair2);font-size:13px;cursor:pointer;display:flex;gap:8px;align-items:center;min-height:44px}
.app-leadrow.active{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.app-leadrow .nm{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-leadrow .dt{font:11px var(--mono);color:var(--mute)}
/* plain-text email (Helvetica, black, 14/1.5 — the identity from Settings) */
.app-plaintext{white-space:pre-wrap;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;background:#fdfdfb;border:1px solid var(--hair);border-radius:8px;padding:var(--gutter-in);max-width:72ch;color:#000;min-height:160px;overflow-wrap:anywhere}
.app-plaintext:focus{outline:2px solid color-mix(in srgb,var(--brand) 30%,transparent);border-color:var(--brand)}
.app-thread{border:1px solid var(--hair);border-radius:8px;padding:var(--gutter-in);margin-bottom:8px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.app-thread .from{font-weight:700}
.app-thread .meta{color:var(--mute);font-size:11px;font-family:var(--mono);margin-left:6px}
.app-thread.out{background:var(--brand-soft)}
.app-thread.in{background:#eef3fa}
.app-thread.pending{border-style:dashed;background:var(--bg);color:var(--mute)}
.app-persona{background:var(--bg);border:1px solid var(--hair);border-radius:8px;padding:var(--gutter-in);font-size:12.5px;line-height:1.6}
.app-persona b{display:block;font:700 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--brand);margin:8px 0 3px}
.app-persona b:first-child{margin-top:0}
.app-persona textarea{width:100%;border:1px dashed var(--hair);border-radius:6px;padding:8px;font:12.5px/1.5 inherit;background:var(--paper);resize:vertical}
.app-mode{display:flex;gap:8px}
.app-mode label{flex:1;border:1px solid var(--hair);border-radius:8px;padding:9px 11px;font-size:12.5px;cursor:pointer;display:grid;gap:3px;position:relative}
.app-mode label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.app-mode label.dis{opacity:.55;cursor:not-allowed}
.app-mode label input{position:absolute;opacity:0;pointer-events:none}
.app-mode small{color:var(--mute);font-family:var(--mono);font-size:11px}
.app-photos{display:flex;gap:8px;flex-wrap:wrap}
.app-photos button,.app-photos .add{width:76px;height:76px;border-radius:8px;border:1px solid var(--hair);background:repeating-linear-gradient(135deg,#e6e1da 0 8px,#f4f1ec 8px 16px) center/cover no-repeat;font:10px var(--mono);color:var(--mute);display:grid;place-items:end center;padding:0 0 4px;cursor:pointer;position:relative;overflow:hidden;text-shadow:0 0 6px #fff,0 0 3px #fff}
.app-photos button.on{outline:3px solid var(--brand);outline-offset:1px}
.app-photos .add{border-style:dashed;background:none;place-items:center}
.app-photos button span{background:rgba(255,255,255,.85);padding:1px 5px;border-radius:4px;color:var(--ink)}
.app-hours{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:6px 10px;align-items:center;font-size:13px}
.app-hours .d{font:11px var(--mono);color:var(--mute);text-transform:uppercase;width:34px}
.app-hours input[type=time]{min-height:34px;padding:4px 8px}
.app-hours label.closed{font:11px var(--mono);color:var(--mute);display:flex;gap:4px;align-items:center;white-space:nowrap}
/* leads table additions */
.leads td .crt{font-weight:700}
.leads td .crt+.sub{margin-top:2px}
.leads .num{font-family:var(--mono);font-size:12.5px}
.leads .gap{color:var(--mute);font-size:12.5px;max-width:160px}
.leads .nxt .btn{min-height:30px}
.leads tr.off td{opacity:.55}
.leads tr.off td.chk,.leads tr.off td.nxt{opacity:1}
.app-links{display:inline-flex;gap:4px;flex-wrap:wrap}
.app-links .lk{white-space:nowrap}
.app-selbar{position:relative}
.app-filterpop{position:fixed;z-index:40;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;box-shadow:var(--shadow);padding:10px 12px;display:grid;gap:6px;font-size:13px;min-width:280px}
.app-filterpop label{display:flex;gap:8px;align-items:center;cursor:pointer;padding:3px 0}
.app-filterpop input[type=radio]{accent-color:var(--brand)}
.app-filterpop .rng{display:flex;gap:6px;align-items:center;padding-left:24px}
.app-filterpop .rng input{min-height:30px;padding:2px 6px;font-size:12px;width:auto}
.app-filterpop .custom{font:11px var(--mono);color:var(--mute);padding:4px 0 0;border-top:1px dashed var(--hair);margin-top:4px;line-height:1.5}
/* three-step strip (Page tab) */
.app-strip3{display:flex;gap:10px;padding:10px var(--gutter);border-bottom:1px solid var(--hair);background:var(--brand-soft)}
.app-strip3>div{flex:1;border:1px solid var(--hair);border-radius:8px;padding:9px 12px;font-size:12.5px;background:var(--paper);display:grid;gap:4px;align-content:start;min-width:0}
.app-strip3>div.done{border-color:var(--brand)}
.app-strip3 b{font:700 11px var(--sans);color:var(--brand);letter-spacing:.06em}
.app-strip3 .btn{justify-self:start;margin-top:2px}
/* link control on CTA fields (section popup) */
.fld .lkctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font:11px var(--mono);color:var(--mute)}
.fld .lkctl select,.fld .lkctl input{min-height:30px;padding:2px 8px;font-size:12px;width:auto;max-width:100%}
.fld .lkctl input{flex:1;min-width:120px}
/* hub */
.app-hub-bar{display:flex;align-items:center;gap:10px;padding:12px var(--gutter);border-bottom:1px solid var(--hair);background:var(--bg);flex-wrap:wrap}
.app-hub-bar .title{font-size:16px;font-weight:800;letter-spacing:-.01em}
.app-hub-bar .meta{font:12px var(--mono);color:var(--mute);white-space:normal;max-width:100%}
.app-hub-bar #bar-actions{flex-wrap:wrap}
.app-hub-body{display:grid;gap:var(--gutter-in);padding:var(--gutter);grid-template-columns:1fr 1fr}
.app-hub-body>div{min-width:0}
.app-hub-body h4{margin-top:16px}.app-hub-body h4:first-child{margin-top:0}
.app-embed{width:100%;border:0;display:block;min-height:calc(100svh - 150px);background:var(--paper)}
.app-embed.short{min-height:calc(100svh - 190px)}
.app-empty{padding:40px 20px;text-align:center;color:var(--mute)}
.app-empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px}
.app-log{display:grid;gap:0}
.app-log>div{display:grid;grid-template-columns:110px 1fr auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair2);font-size:13px;align-items:baseline}
.app-log time{font:11px var(--mono);color:var(--mute)}
.app-log .k{font:700 10.5px var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--brand);padding:1px 6px;border-radius:4px;background:var(--brand-soft);white-space:nowrap}
.app-grid-form{display:grid;grid-template-columns:130px 1fr;gap:8px 12px;align-items:center;font-size:13px}
.app-grid-form>span:nth-child(odd){color:var(--mute);font-weight:600;font-size:12.5px}
.app-quick{display:flex;gap:10px;align-items:center;padding:12px var(--gutter);border-top:1px solid var(--hair);flex-wrap:wrap;background:var(--bg)}
.app-lead-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media (max-width:1100px){.app-hub-body{grid-template-columns:1fr}.app-split{grid-template-columns:1fr}.app-leftpane{max-height:40svh;border-right:0;border-bottom:1px solid var(--hair)}}
@media (max-width:900px){.app-two:not(.rail){grid-template-columns:1fr}.app-two>div:first-child{border-right:0;border-bottom:1px solid var(--hair)}
  .leads td.nxt{display:block;margin-top:6px}.leads td .app-stage{margin:4px 0}.app-strip3{flex-direction:column}
  .leads td.chk{float:left}.app-links{margin:6px 0}}
@media (max-width:767px){.app-nav{padding:8px 12px;gap:2px}.app-nav .brand{margin-right:6px;font-size:13px}.app-nav nav a{padding:7px 8px;font-size:12px}.app-nav .app-inbox{display:none}
  .app-nav~.topbar,.app-nav~#jobbar{top:0;position:static}.app-tabs{padding:0 12px}.app-tabs a,.app-tabs button{padding:10px 10px;font-size:12.5px}
  .app-hub-bar{padding:10px 12px}.app-hub-body{padding:12px;gap:12px}.app-two>div,.app-rightpane{padding:14px 12px}.app-timeline{padding:12px}.app-timeline .st{min-width:84px}
  .app-filterpop{border-radius:14px 14px 0 0;min-width:0;max-height:80svh;overflow:auto}.app-kpi>div{flex-basis:calc(50% - 5px)}
  .app-hours{grid-template-columns:auto 1fr 1fr;gap:6px}.app-hours label.closed{grid-column:2/4}.app-grid-form{grid-template-columns:1fr}.app-mode{flex-direction:column}.app-quick{padding:10px 12px}
  .app-embed{min-height:70svh}}

/* embedded builder frames (Lead hub tabs) + facts-as-tab */
html.embed .foot,html.embed #app-nav{display:none}
html.embed .topbar{top:0}
html.embed #compare{top:57px}
.app-facts-tab{background:var(--paper)}
.app-facts-tab #facts-tab-bd{padding:var(--gutter);display:grid;gap:18px}
.app-facts-tab .facts nav{top:0}
.app-facts-tab #scrape-steps:not(:empty){padding:10px 20px;border-bottom:1px solid var(--hair)}
.leads .num{white-space:nowrap}
.btn.ai{border-color:var(--brand);color:var(--brand-deep)}
@media (max-width:767px){.app-facts-tab #facts-tab-bd{padding:12px}}

/* GLOBAL-RULES A2: editable LOOKS editable — pencil on hover for inputs/contenteditable; read-only shows no pencil */
.field:not([readonly]):not(select):not(:disabled):hover,.app-plaintext[contenteditable="true"]:hover,textarea.field:hover{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236d6570' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>");background-repeat:no-repeat;background-position:right 8px top 9px;padding-right:28px}
select.field:hover{background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%)}
/* A3: every lead URL = input + ⧉ copy + ↗ open (+ reset when overridden) */
.app-url{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:6px;align-items:center;margin-bottom:6px}
.app-url .k{font:700 11px var(--sans);color:var(--mute);min-width:64px;text-transform:uppercase;letter-spacing:.04em}
.app-url input.field{min-height:34px;padding:5px 10px;font-size:13px;font-family:var(--mono);min-width:0;width:100%}
.app-url .btn{min-height:34px;padding:0 9px}
.app-url .reset{font:11px var(--mono)}
/* B4: one row of links from any draft */
.app-linkrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
/* H5: tap targets ≥44px on touch widths */
@media (max-width:767px){.btn,.btn-sm,.lk>a,.lk>button,.app-tabs a,.app-tabs button,.lnk.tap{min-height:44px}.leads input[type=checkbox],.app-filterpop input[type=radio]{width:22px;height:22px}.leads td.chk{padding:8px 10px 8px 0}.app-timeline .st{min-height:44px}.app-photos button,.app-photos .add{width:72px;height:72px}.app-queue li .btn{min-height:44px}}

.app-ask{width:min(520px,100vw);height:auto;max-height:90svh;inset:0;margin:auto;border-radius:14px;animation:rise .4s var(--ease) both}
.app-ask .bd{gap:10px}
.pill.override{background:var(--warn-bg);border-color:#ead9a2;color:var(--warn)}

@media (max-width:400px){.app-url{grid-template-columns:1fr auto auto auto}.app-url .k{grid-column:1/-1;min-width:0}.app-hub-bar .title{font-size:15px}.app-linkrow .btn{flex:1 1 40%}.app-plaintext{padding:12px}}

@media (max-width:767px){#app-nav nav a{min-height:44px;display:inline-flex;align-items:center}}
@media (max-width:400px){.app-log>div{grid-template-columns:1fr auto}.app-log time{grid-column:1/-1}}

/* embedded builder (Lead hub › Page): one toolbar, no repeated name/back; Facts view has none */
html.embed-page .sitebar .title,html.embed-page .sitebar #back{display:none}
html.embed-page .sitebar{position:static}
/* embedded builder: dialogs + compare strip pin to the parent's visible slice (frame is content-tall) */
html.embed dialog.dlg{position:absolute;top:var(--embed-vt,0px);height:var(--embed-vh,820px);bottom:auto} /* fixed fallback: svh inside an auto-sized frame is circular */
html.embed dialog.dlg::backdrop{background:rgba(36,29,39,.15)}
html.embed #compare{position:absolute;top:var(--embed-vt,0px);left:0;right:0;z-index:15}
@media (max-width:767px){html.embed dialog.dlg,html.embed dialog.dlg.wide{top:calc(var(--embed-vt,0px) + var(--embed-vh,820px) - 480px);height:480px}}
html.embed #compare{top:0}
.app-preview-stage.banded{min-height:auto}
.app-pane{padding:var(--gutter)}
.app-plaintext.locked{background:var(--bg);color:#333;cursor:default}
.app-photo{position:relative}
.app-photo .trash{position:absolute;right:-4px;top:-6px;width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);background:var(--paper);font-size:12px;cursor:pointer;display:grid;place-items:center;padding:0;line-height:1}
.app-filters-btn{display:none}
.app-timeline .st[aria-disabled="true"]{cursor:not-allowed}
.app-timeline .st[aria-disabled="true"] i{opacity:.6}
@media (min-width:768px){.app-hub-bar .meta{max-width:min(48vw,560px)}}
@media (max-width:1300px){.sitebar .grp.desk #cmp,.sitebar .grp.desk #facts{display:none}.sitebar .grp.mob{display:inline-flex}}
@media (max-width:1024px){.leads td .app-links{max-width:200px}.leads td.gap{max-width:120px}}
@media (max-width:1200px){.leads td[data-label]::before{content:attr(data-label) " ";font:11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}.leads td[data-label]{display:inline-block;margin-right:10px}}
@media (max-width:767px){.app-filters-btn{display:inline-flex}#bar #f-stage,#bar #f-uc,#bar #f-pri,#bar #f-owner{display:none}body.filters-open #bar #f-stage,body.filters-open #bar #f-uc,body.filters-open #bar #f-pri,body.filters-open #bar #f-owner{display:block}
  .leads th{top:auto;position:static}.app-hub-bar{row-gap:6px}.app-hub-bar .meta{order:5;flex-basis:100%}.app-hub-bar #bar-actions{order:4;margin-left:auto}}

/* H9 density: ≥1920 the Leads table shows persona + last activity; the Lead hub becomes three panes (Overview rail · builder · Outreach rail) */
.leads .xl{display:none}
@media (min-width:1920px){
  .leads .xl{display:table-cell}
  :root{--gutter:32px}
  .leads td{padding:14px 12px}
}
@media (min-width:2560px){:root{--gutter:40px}.leads th,.leads td{font-size:14.5px}.app-kpi>div{flex-basis:140px}}

/* L6: every row = colour stripe · what · who/age · one action. Stripe hue = the lead's stage (L1). */
.leads tbody tr td:first-child{box-shadow:inset 4px 0 0 var(--stripe,transparent)}
.app-log>div{box-shadow:inset 4px 0 0 var(--stripe,transparent);padding-left:12px}
.app-timeline .st.done i,.app-timeline .st.now i{background:var(--stripe,var(--brand));color:#fff}
.app-timeline .st.now i{box-shadow:0 0 0 3px color-mix(in srgb,var(--stripe,var(--brand)) 30%,transparent);border:0}
.app-thread{box-shadow:inset 4px 0 0 var(--stripe,transparent)}
.app-thread.out{--stripe:var(--st-sent)}.app-thread.in{--stripe:var(--st-replied)}.app-thread.pending{--stripe:transparent}
/* L1 legend — one line, top-right, collapsible */
.app-legend{font-size:12px;color:var(--mute);margin-left:auto}
.app-legend summary{cursor:pointer;list-style:none;padding:6px 10px;border:1px solid var(--hair);border-radius:99px;font-weight:600;display:inline-block}
.app-legend summary::-webkit-details-marker{display:none}
.app-legend[open] summary{border-color:var(--brand)}
.app-legend-row{position:absolute;right:var(--gutter);margin-top:6px;z-index:30;display:flex;gap:10px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--hair);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow);max-width:min(720px,calc(100vw - 32px))}
.app-legend-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.app-legend-item i{width:12px;height:12px;border-radius:3px;display:inline-block}
.app-legend-item.urg i{border-radius:50%}
/* L3: full-bleed ≠ dense — scale type and padding with the viewport, keep rows ≥56px */
@media (min-width:1920px){body{font-size:16px}.app-card{padding:28px}.leads tbody tr{contain-intrinsic-size:auto 64px}.leads td{padding:16px 12px;min-height:56px}.app-queue li,.app-feed li,.app-log>div{min-height:56px}.app-leadrow{min-height:56px}}
@media (min-width:2560px){body{font-size:17px}}

/* ================= Lead hub — L7/L8 ================= */
.app-hub-bar .meta{font-family:var(--sans);font-size:12.5px;color:var(--mute)}
.app-stepper-band{display:flex;align-items:stretch;gap:0;padding:10px var(--gutter) 12px;border-bottom:1px solid var(--hair);background:var(--paper);overflow-x:auto}
.app-step{display:flex;flex-direction:column;gap:3px;min-width:120px;flex:1 1 0;padding:6px 10px 6px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit;position:relative}
.app-step .row1{display:flex;align-items:center;gap:8px;white-space:nowrap}
.app-step i{width:14px;height:14px;border-radius:50%;background:var(--stripe,var(--hair));flex:none;display:inline-block;font-style:normal}
.app-step.todo i{background:var(--paper);border:2px solid var(--hair)}
.app-step.skip i{background:var(--paper);border:2px dashed var(--hair)}
.app-step.now i{box-shadow:0 0 0 4px color-mix(in srgb,var(--stripe) 28%,transparent)}
.app-step .lab{font-weight:700;font-size:13px}
.app-step.todo .lab,.app-step.skip .lab{color:var(--mute);font-weight:600}
.app-step .dt{font-family:var(--mono);font-size:11.5px;color:var(--mute);white-space:nowrap;padding-left:22px}
.app-stepper{display:flex;flex:1 1 auto;min-width:0}
.app-step .row1::after{content:"";flex:1;height:2px;background:var(--hair);margin-left:10px;min-width:12px}
.app-step.done .row1::after{background:var(--stripe)}
.app-step:last-child .row1::after{display:none}
.app-step[aria-disabled="true"]{cursor:not-allowed}
.app-step:hover .lab{text-decoration:underline}
/* vertical stepper (inside the rail / Overview tab) — dot · stage · date right-aligned */
.app-stepper-v{display:grid;gap:0;margin-bottom:14px}
.app-stepper-v .app-step{flex-direction:row;align-items:center;min-width:0;padding:8px 0;border-bottom:1px solid var(--hair2)}
.app-stepper-v .app-step::after{display:none}
.app-stepper-v .app-step .row1{flex:1}
.app-stepper-v .app-step .dt{padding:0;margin-left:auto}
/* panes */
.app-hub{display:block}
.app-rail-switch,.app-center-switch{display:flex;gap:2px;padding:8px var(--gutter-in) 0;border-bottom:1px solid var(--hair);background:var(--paper)}
.app-rail-switch button,.app-center-switch button{border:0;background:none;padding:8px 12px;font-weight:600;color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:13px}
.app-rail-switch button.on,.app-center-switch button.on{color:var(--brand-deep);border-color:var(--brand)}
.app-embed{width:100%;border:0;display:block;background:var(--paper)}
#pane-overview .app-hub-body{grid-template-columns:1fr 1fr}
/* ≥1440: header band + rail + centre; ≥1920: + right rail; each pane scrolls on its own */
@media (min-width:1440px){
  body.hub-2,body.hub-3{height:100svh;overflow:hidden;display:flex;flex-direction:column}
  body.hub-2 .app-hub,body.hub-3 .app-hub{display:grid;flex:1 1 auto;min-height:0}
  body.hub-2 .app-hub,body.hub-3 .app-hub{grid-template-columns:400px minmax(0,1fr)} /* no right rail anywhere on the hub (Vinod 2026-09-11) — hub-3 used to reserve a 440px third track even with #rail-right hidden, leaving a dead empty column; hub-3 now only differs from hub-2 via the L3 font/padding media query below */
  body.hub-2 .app-rail,body.hub-3 .app-rail,body.hub-2 .app-center,body.hub-3 .app-center{overflow:auto;min-height:0;overscroll-behavior:contain}
  body.hub-2 .app-rail-left,body.hub-3 .app-rail-left{border-right:1px solid var(--hair)}
  body.hub-2 #tabs,body.hub-3 #tabs{display:none}
  body.hub-2 #pane-overview .app-hub-body,body.hub-3 #pane-overview .app-hub-body,body.hub-2 #pane-outreach-rail .app-two,body.hub-3 #pane-outreach .app-two{grid-template-columns:1fr}
  body.hub-2 .app-two>div:first-child,body.hub-3 .app-two>div:first-child{border-right:0;border-bottom:1px solid var(--hair)}
  body.hub-2 .foot,body.hub-3 .foot{display:none}
  body.hub-2 .app-preview-stage,body.hub-3 .app-preview-stage{padding:0}
}
@media (min-width:1920px){body{font-size:16px}.app-hub-bar .title{font-size:20px}.app-step .lab{font-size:14px}.app-card{padding:28px}.app-leadrow,.app-queue li,.app-log>div{min-height:56px}}
/* embedded builder: ONE compact compose line, no banner */
html.embed-page .app-strip3{padding:6px var(--gutter);gap:8px;background:var(--paper);flex-direction:row;align-items:center;flex-wrap:wrap}
html.embed-page .app-strip3>div{display:flex;align-items:center;gap:8px;border:0;padding:0 14px 0 0;background:none;flex:0 1 auto;border-right:1px solid var(--hair);border-radius:0}
html.embed-page .app-strip3>div:last-child{border-right:0}
html.embed-page .app-strip3 b{font-size:12px}
html.embed-page .app-strip3 .desc{font-size:12px;color:var(--mute);max-width:36ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.embed-page .app-strip3 .btn{margin:0;min-height:30px}
.app-strip3 .desc{display:block}
@media (max-width:360px){.leads td .app-stage{white-space:normal}}
@media (max-width:767px){.leads .nxt .btn{min-height:44px}.app-step{min-width:0}}

/* ================= L9: page editor = full-width canvas + docked properties panel ================= */
html.panel .app-editor{display:flex;align-items:flex-start;min-width:0}
html.panel .app-editor>main{flex:1 1 auto;min-width:0}
html.panel dialog.dlg#dlg-edit{position:sticky;top:var(--embed-vt,0px);inset:auto;height:var(--embed-vh,820px);width:420px;flex:0 0 420px;display:none;flex-direction:column;box-shadow:none;border-left:1px solid var(--hair);animation:none;margin:0}
html.panel dialog.dlg#dlg-edit[open]{display:flex}
html.panel dialog.dlg#dlg-edit::backdrop{display:none}
html.panel.props-collapsed dialog.dlg#dlg-edit[open]{display:none}
html.panel .app-props-handle{position:sticky;top:calc(var(--embed-vt,0px) + 12px);align-self:flex-start;z-index:12;width:28px;height:44px;border:1px solid var(--hair);border-right:0;border-radius:8px 0 0 8px;background:var(--paper);cursor:pointer;font-size:14px;margin-right:-1px;flex:none;box-shadow:-6px 0 14px -10px rgba(0,0,0,.3)}
html.panel.props-collapsed .app-props-handle{margin-right:0}
html.panel .sec-wrap.selected{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:-3px}
html.panel .sec-wrap .tab{opacity:.85}
html.panel .app-preview-stage{padding:0;min-height:60svh}
html.embed-page .sitebar .title,html.embed-page .sitebar #back{display:inline-flex}
html.embed-page .sitebar #facts,html.embed-page .sitebar #pages,html.embed-page .sitebar .sub{display:none}
html.embed-page .sitebar .title{font-size:15px;max-width:min(30vw,360px)}
html.embed-preview .sec-wrap .tab{display:none}
html.embed-preview .app-preview-stage{padding:0;min-height:0}
html:not(.panel) #props-handle{display:none}
@media (max-width:1100px){html.panel dialog.dlg#dlg-edit{width:360px;flex-basis:360px}}
@media (max-width:767px){html.panel .app-editor{flex-direction:column}html.panel dialog.dlg#dlg-edit,html.panel dialog.dlg#dlg-edit.wide{position:sticky;top:auto;bottom:0;width:100%;flex-basis:auto;height:480px;border-left:0;border-top:1px solid var(--hair);border-radius:16px 16px 0 0}html.panel .app-props-handle{display:none}}

/* Leads column balance (2432 review): size to content; ≥1920 one line per cell (ellipsis + title), width to Creator · Last activity · Next action */
.leads .one{display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.leads td.creator{max-width:280px}.leads td.creator .crt{overflow:hidden;text-overflow:ellipsis}
.leads td.uc .one{display:inline}
.leads td.stg,.leads td.num{width:1%;white-space:nowrap}
.leads td.persona{max-width:240px}.leads td.last{max-width:320px}
.leads td.gap{overflow:hidden;text-overflow:ellipsis;max-width:180px}
@media (min-width:1920px){.leads .one,.leads td.creator .crt,.leads td.uc,.leads td.gap,.leads td.nxt{white-space:nowrap}.leads td.creator{max-width:none;min-width:200px}.leads td.last{max-width:none;min-width:200px}.leads td.gap{max-width:240px}.leads td.nxt{width:1%}}
/* page editor stands alone: single column, no empty rail slot */
@media (min-width:1440px){body.page-solo .app-hub{grid-template-columns:minmax(0,1fr)}body.page-solo #center{grid-column:1}}

@media (max-width:1439px){html.embed-page .sitebar .title,html.embed-page .sitebar #back,html.embed-page .sitebar #bar-stage{display:none}} /* the hub bar names the lead below 1440 */

html.embed-page .app-strip3>div:nth-child(2) .btn{display:none} /* Compare 4 already sits in the toolbar */
html.embed-page .app-strip3>div.done:nth-child(3) .btn{display:none} /* Re-push lives in the toolbar once live */
.app-stepper-v .app-step .row1::after{display:none}

body.hub-2 #app-nav,body.hub-3 #app-nav,body.hub-2 #hub-bar,body.hub-3 #hub-bar,body.hub-2 #stepper-band,body.hub-3 #stepper-band,body.hub-2 #strips,body.hub-3 #strips,body.hub-2 #jobbar,body.hub-3 #jobbar{flex:none}
.app-stepper-band .app-step{padding:6px 6px 6px 0}

@media (max-width:767px){html.panel .app-editor{align-items:stretch}html.panel .app-editor>main{width:100%}}

/* ≥1920: fixed column shares so twelve columns never exceed the viewport; cells ellipsize instead */
@media (min-width:1920px){
  table.leads{table-layout:fixed}
  .leads td{overflow:hidden;text-overflow:ellipsis}
  .leads th:nth-child(1){width:34px}.leads th:nth-child(2){width:15%}.leads th:nth-child(3){width:10%}.leads th:nth-child(4){width:5%}.leads th:nth-child(5){width:10%}.leads th:nth-child(6){width:8%}.leads th:nth-child(7){width:5%}.leads th:nth-child(8){width:6%}.leads th:nth-child(9){width:10%}.leads th:nth-child(10){width:12%}.leads th:nth-child(11){width:10%}.leads th:nth-child(12){width:9%}
  .leads td.creator,.leads td.last,.leads td.uc,.leads td.gap,.leads td.stg,.leads td.num,.leads td.nxt{width:auto;min-width:0;max-width:none}
  .leads td.nxt{white-space:normal}.leads td .app-links{max-width:none}
}

@media (max-width:1500px){html:not(.embed) .sitebar .grp.desk #facts,html:not(.embed) .sitebar .grp.desk #pages,html:not(.embed) .sitebar .grp.desk #cmp{display:none}html:not(.embed) .sitebar .grp.mob{display:inline-flex}}