/* The Soapbox Data Engine's stylesheet, copied as it stands by tools/sync-engine-css.mjs from
   "Soapbox Data Engine/docs/design/mockup-v4-build" (src/head.html with v4.css). Never edit this file: change the
   engine, then run the script again. What this app adds for itself is in style.css. */
/* Tokens. Light is the default theme (Nila, 27 Oct); dark redefines the same tokens. */
:root{
  color-scheme:dark;
  --plane:#14161A;--surface:#1B1E24;--surface-2:#23272F;--surface-3:#2C313A;
  --line:rgba(255,255,255,.075);--line-2:rgba(255,255,255,.13);
  --text:#F5F5F3;--text-2:#B8BDC6;--muted:#8A909B;
  --signal:#F29C17;--signal-ink:#F6AD45;--signal-wash:rgba(242,156,23,.14);--signal-glow:rgba(242,156,23,.42);
  --bar:#363C47;--bar-2:#5F6777;--grid:rgba(255,255,255,.06);--axis:rgba(255,255,255,.16);--band:rgba(255,255,255,.055);
  --up:#5BCB93;--down:#F47C70;--up-wash:rgba(91,203,147,.13);--down-wash:rgba(244,124,112,.14);--flat-wash:rgba(255,255,255,.07);
  --bub-bg:#F5F5F3;--bub-fg:#14161A;--bub-up:#16794A;--bub-down:#B3261E;
  --h0:#252A32;--h1:#4A3820;--h2:#7A5320;--h3:#AA6B1D;--h4:#D58717;--h5:#F8AA2E;
  --n1:#A3A9B3;--n2:#717887;--n3:#4E5562;--n4:#3A404A;
  --card-shadow:none;--sheen:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 140px);
  --glow:radial-gradient(1100px 520px at 82% -14%,rgba(242,156,23,.12),rgba(242,156,23,0) 62%);
  --tip-bg:#F5F5F3;--tip-fg:#14161A;
}
:root[data-theme="light"]{
  color-scheme:light;
  --plane:#F2F2EF;--surface:#FFFFFF;--surface-2:#F5F5F2;--surface-3:#ECECE8;
  --line:#E5E5E0;--line-2:#D3D3CD;
  --text:#14161A;--text-2:#4A4F58;--muted:#737881;
  /* v2's colours, restored at Nila's request (27 Oct): the darker greys and deeper orange tried in v3 looked too desaturated. */
  --signal:#F29C17;--signal-ink:#9E5A00;--signal-wash:rgba(242,156,23,.16);--signal-glow:rgba(242,156,23,.34);
  --bar:#DCDDD8;--bar-2:#AEB2B8;--grid:#EDEDE9;--axis:#D0D0CA;--band:rgba(20,22,26,.05);
  --up:#1E7A4C;--down:#B3261E;--up-wash:rgba(30,122,76,.10);--down-wash:rgba(179,38,30,.09);--flat-wash:rgba(20,22,26,.06);
  --bub-bg:#14161A;--bub-fg:#F5F5F3;--bub-up:#5BCB93;--bub-down:#F47C70;
  --h0:#ECEBE6;--h1:#FCE2B8;--h2:#F8C67E;--h3:#F2A940;--h4:#DB8A12;--h5:#AF6606;
  --n1:#555A63;--n2:#868B93;--n3:#B2B6BC;--n4:#D3D5D8;
  --card-shadow:0 1px 2px rgba(20,22,26,.05),0 12px 30px -14px rgba(20,22,26,.14);--sheen:linear-gradient(#fff,#fff);
  --glow:radial-gradient(1100px 520px at 82% -14%,rgba(242,156,23,.10),rgba(242,156,23,0) 62%);
  --tip-bg:#14161A;--tip-fg:#F5F5F3;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--plane);color:var(--text);font:400 14px/1.5 'Lato',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select{font:inherit;color:inherit}
svg{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* Mockup screen switcher, outside the app */
.demo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));background:#0E0F12;color:#9BA1AA;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.07)}
.demo strong{color:#F5F5F3}
.demo .scr{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.demo button{background:none;border:1px solid rgba(255,255,255,.14);color:#D2D5DB;border-radius:999px;padding:3px 11px;cursor:pointer;font-size:12px}
.demo button:hover{border-color:#F29C17}
.demo button[aria-current="page"]{background:#F29C17;border-color:#F29C17;color:#14161A;font-weight:700}

/* Shell */
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.app.rail{grid-template-columns:76px minmax(0,1fr)}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:20px 12px 16px;background:#14161A;color:#C8CCD3;border-right:1px solid rgba(255,255,255,.07);scrollbar-width:thin;scrollbar-color:#2C313A transparent}
/* Logo lockup: the product name sits to the right of the Soapbox logo, in white capitals (Nila, 27 Oct). */
.brand{display:flex;align-items:center;gap:12px;padding:2px 6px 20px}
.brand img{width:106px;height:auto;flex:none}
.brand .prod{display:flex;flex-direction:column;justify-content:center;gap:4px;padding-left:12px;border-left:1px solid rgba(255,255,255,.24);color:#FFFFFF;font-weight:900;font-size:15px;line-height:1;letter-spacing:.15em;white-space:nowrap}
.brand .mark{display:none;width:38px;height:38px;border-radius:12px;background:#F29C17;color:#14161A;font-weight:900;font-size:22px;line-height:34px;text-align:center;margin:0 auto}
.nav{display:flex;flex-direction:column;gap:1px}
.nav .grp{font-size:12px;color:#7C828C;padding:16px 10px 6px;font-weight:700}
.item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:10px;background:none;color:#C8CCD3;text-decoration:none;font-size:13.5px;line-height:1.25;cursor:pointer;position:relative;text-align:left}
.item:hover{background:rgba(255,255,255,.05);color:#fff}
.item[aria-current="page"]{background:rgba(255,255,255,.085);color:#fff;font-weight:700}
.item[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:#F29C17}
.item svg{flex:none;color:#9AA0AA}
.item[aria-current="page"] svg{color:#F29C17}
.ini{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:900;letter-spacing:.02em;background:rgba(255,255,255,.07);color:#D5D8DD}
.item[aria-current="page"] .ini{background:#F29C17;color:#14161A}
.item .label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .badge{margin-left:auto;font-size:12px;color:#7C828C;white-space:nowrap}
.item.await{color:#878D97;cursor:default}
.item.await:hover{background:none;color:#878D97}
.item.await .ini{background:rgba(255,255,255,.04);color:#878D97}
.item .awi{margin-left:auto;color:#A3A9B3;display:grid;place-items:center}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.app.rail .side{padding:20px 10px 16px}
.app.rail .brand img,.app.rail .brand .prod,.app.rail .item .label,.app.rail .item .badge,.app.rail .item .awi{display:none}
.app.rail .brand{padding:0 0 14px;justify-content:center}
.app.rail .brand .mark{display:block}
.app.rail .nav .grp{font-size:0;padding:0;height:1px;background:rgba(255,255,255,.08);margin:10px 8px}
.app.rail .item{justify-content:center;padding:8px 0}
.app.rail .item[aria-current="page"]::before{left:-10px}
.app.rail .side-foot svg{transform:rotate(180deg)}
.scrim{display:none}

main{min-width:0;background:var(--glow) no-repeat,var(--plane)}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--plane) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.search{flex:1 1 260px;max-width:440px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 10px 0 12px;color:var(--muted);min-width:0}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:13.5px;padding:9px 0}
.search input::placeholder{color:var(--muted)}
.search:focus-within{border-color:var(--signal)}
kbd{font:inherit;font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px}
.spacer{flex:1}
.fresh{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap;cursor:default}
.live{width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 0 3px var(--up-wash);flex:none;display:inline-block}
.iconbtn{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);cursor:pointer}
.iconbtn:hover{color:var(--text);border-color:var(--line-2)}
.iconbtn.sm{width:34px;height:34px;border-radius:10px}
.iconbtn[aria-pressed="true"]{color:var(--text);border-color:var(--signal)}
.menu-btn{display:none}

/* Page */
.page{display:flex;flex-direction:column;gap:20px;padding-block:26px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1560px}
@media (min-width:720px){.topbar,.page{padding-left:32px;padding-right:32px}}
.phead{display:flex;flex-direction:column}
.crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted)}
.crumbs a{color:var(--text-2);text-decoration:none}
.crumbs a:hover{color:var(--text)}
h1{margin:6px 0 10px;font-size:clamp(26px,3vw,34px);line-height:1.1;font-weight:900;letter-spacing:-.018em;text-wrap:balance}
.intro{margin:0;color:var(--text-2);font-size:14px;max-width:72ch}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--text-2)}
.site{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px;margin-right:6px}
.site:hover{color:var(--text)}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;line-height:1;padding:6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text-2);cursor:default}
.tag svg{width:14px;height:14px;color:var(--muted)}
.tag .off{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;display:inline-block}
.tabs{display:flex;gap:2px;margin-top:18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs a{flex:none;padding:10px 14px 11px;color:var(--text-2);text-decoration:none;font-weight:700;font-size:13.5px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--text)}
.tabs a[aria-current="page"]{color:var(--text);border-bottom-color:var(--signal)}
.tabs a.soon{color:var(--muted);cursor:not-allowed}
.soon-b{font-size:12px;font-weight:700;margin-left:7px;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted)}

.ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px;color:var(--text-2)}
.pick{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-weight:700;cursor:pointer}
.pick:hover,.pick[aria-expanded="true"]{border-color:var(--signal)}
.pick svg{color:var(--muted)}
.ghost{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text-2);font-weight:700;font-size:13px;cursor:pointer}
.ghost:hover{color:var(--text);border-color:var(--line-2)}
.ghost svg{width:16px;height:16px}
.solid{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--text);background:var(--text);color:var(--plane);font-weight:700;font-size:13px;cursor:pointer}
.solid svg{width:16px;height:16px}

/* Caution symbol for Google's impressions error: unlit outline, lit in the signal colour. */
.caution{display:inline-grid;place-items:center;width:24px;height:24px;margin:-4px 0;padding:0;border:0;border-radius:7px;background:none;color:var(--muted);cursor:help;vertical-align:middle}
.caution svg{width:17px;height:17px}
.caution .tri{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.caution .ex{stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.caution:hover{background:var(--flat-wash)}
.caution.lit{color:var(--signal)}
.caution.lit .tri{fill:var(--signal);stroke:var(--signal)}
.caution.lit .ex{stroke:var(--surface)}
th .caution{width:20px;height:20px;margin:-3px 0 -3px 4px}
th .caution svg{width:15px;height:15px}

/* Figures */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.kpi{display:flex;flex-direction:column;min-width:0;padding:16px 18px 14px;border-radius:18px;background:var(--sheen),var(--surface);border:1px solid var(--line);box-shadow:var(--card-shadow)}
.kpi.warn{border-color:color-mix(in srgb,var(--signal) 55%,var(--line))}
.kpi.span3{grid-column:span 3}
/* On narrower screens a long card title wraps; give every title two lines so the figures stay level. */
@media (max-width:1420px){.kpis .kpi-label{min-height:3em;align-items:flex-end}}
@media (max-width:900px){.kpi.span3{grid-column:1/-1}}
.infob{display:inline-grid;place-items:center;width:24px;height:24px;margin:-4px 0;padding:0;border:0;border-radius:7px;background:none;color:var(--muted);cursor:help}
.infob svg{width:16px;height:16px}
.infob:hover{background:var(--flat-wash)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.kpi-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-2);border:1px solid var(--line)}
.kpi-label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}
.kpi-val{font-size:clamp(26px,2.4vw,32px);font-weight:900;line-height:1.1;letter-spacing:-.02em;margin:4px 0 3px}
.kpi-val.small{font-size:16px;font-weight:700;letter-spacing:0;line-height:1.35;margin:6px 0 6px;color:var(--text-2)}
.kpi-cmp{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.kspark{height:30px;margin:0 0 12px}
.kpi-src{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums;cursor:default}
.chip svg{width:8px;height:8px;flex:none}
.chip.up{color:var(--up);background:var(--up-wash)}
.chip.down{color:var(--down);background:var(--down-wash)}
.chip.flat,.chip.na,.chip.few{color:var(--text-2);background:var(--flat-wash)}
.chip.na,.chip.few{font-weight:400}
.chip.new{color:var(--signal-ink);background:var(--signal-wash)}

/* Cards */
.card{min-width:0;padding:20px 22px;border-radius:22px;background:var(--sheen),var(--surface);border:1px solid var(--line);box-shadow:var(--card-shadow)}
.card-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px;margin-bottom:16px}
.card h2{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.005em}
.sub{margin:3px 0 0;font-size:12.5px;color:var(--muted);max-width:76ch}
.ctrls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.more{font-size:13px;font-weight:700;color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:1px;white-space:nowrap}
.more:hover{color:var(--text)}
.row{display:grid;gap:16px;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
@media (max-width:1180px){.row{grid-template-columns:minmax(0,1fr)}}
.lede{margin:0 0 16px;font-size:14px;line-height:1.5}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{border:0;background:none;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--text-2);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--plane)}
.seg button:disabled,.seg button[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.toggle .tk{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--muted);display:grid;place-items:center}
.toggle .tk svg{width:12px;height:12px;opacity:0}
.toggle[aria-pressed="true"]{color:var(--text);border-color:var(--text)}
.toggle[aria-pressed="true"] .tk{background:var(--text);border-color:var(--text);color:var(--plane)}
.toggle[aria-pressed="true"] .tk svg{opacity:1}
.cnote-line{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.empty{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--surface-2);border:1px dashed var(--line-2);font-size:13.5px;color:var(--text-2);line-height:1.55}
.empty svg{flex:none;color:var(--muted);margin-top:1px}
.empty p{margin:0}.empty b{color:var(--text)}

/* Charts */
.chart{position:relative;min-height:120px}
.chart svg{overflow:visible}
.ch-grid{stroke:var(--grid);stroke-width:1}
.ch-axis{stroke:var(--axis);stroke-width:1}
.ch-tick{fill:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.ch-x{fill:var(--muted);font-size:12px}
.ch-x.sel{fill:var(--text);font-weight:700}
.ch-x.cmp{fill:var(--text-2);font-weight:700}
.ch-cap{fill:var(--muted);font-size:12px}
.b{fill:var(--bar)}
.b.cmp{fill:var(--bar-2)}
.b.sel{fill:var(--signal);filter:drop-shadow(0 6px 16px var(--signal-glow))}
.b.rng{fill:var(--signal);opacity:.62}
.gband{fill:var(--band)}
.gband-edge{stroke:var(--axis);stroke-width:1;stroke-dasharray:3 3}
.hatch-bg{fill:var(--surface)}
.hatch-ln{stroke:var(--bar-2)}
.hit{fill:transparent;cursor:pointer;outline:none}
.hit:hover,.hit:focus-visible{fill:var(--flat-wash)}
.hit:focus-visible{stroke:var(--signal);stroke-width:1.5}
.bub rect,.bub path{fill:var(--bub-bg)}
.bub-lead{stroke:var(--bub-bg);stroke-width:1.5;opacity:.55}
.bub-v{fill:var(--bub-fg);font-size:13.5px;font-weight:900}
.bub-d{font-size:12px;font-weight:700;fill:var(--bub-fg)}
.bub-d.up{fill:var(--bub-up)}.bub-d.down{fill:var(--bub-down)}
.bub-warn path.tri{fill:var(--signal);stroke:var(--signal);stroke-width:1.2;stroke-linejoin:round}
.bub-warn line{stroke:var(--bub-bg);stroke-width:1.6;stroke-linecap:round}
.lyl{fill:none;stroke:var(--text-2);stroke-width:2;stroke-dasharray:5 4;stroke-linejoin:round;stroke-linecap:round}
.lyd{fill:var(--surface);stroke:var(--text-2);stroke-width:2}
.lyd.warn{stroke:var(--signal)}
.evm{cursor:pointer;outline:none}
.evm path{fill:var(--text-2)}
.evm:hover path,.evm:focus-visible path{fill:var(--signal)}
.evm:focus-visible rect{stroke:var(--signal);stroke-width:1.5}
.evm rect{fill:transparent}
.gwarn{cursor:help;outline:none}
.gwarn path.tri{fill:var(--signal);stroke:var(--signal);stroke-width:1.2;stroke-linejoin:round}
.gwarn line{stroke:var(--surface);stroke-width:1.6;stroke-linecap:round}
.gwarn text{fill:var(--text-2);font-size:12px;font-weight:700}
.gwarn:focus-visible rect{stroke:var(--signal);stroke-width:1.5}
.gwarn rect{fill:transparent}
.rise{transform-box:fill-box;transform-origin:50% 100%;animation:rise .7s cubic-bezier(.2,.75,.2,1) both}
@keyframes rise{from{transform:scaleY(.02)}to{transform:none}}
.keys{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:12px;color:var(--muted)}
.keys span{display:inline-flex;align-items:center;gap:7px}
.k{width:12px;height:12px;border-radius:3px;display:inline-block;background:var(--bar)}
.k.sel{background:var(--signal)}.k.cmp{background:var(--bar-2)}.k.rng{background:var(--signal);opacity:.62}
.k.part{background:repeating-linear-gradient(45deg,var(--bar-2) 0 2px,var(--surface-2) 2px 4.5px)}
.k.band{background:var(--band);border:1px dashed var(--axis)}
.k.ly{width:18px;height:0;border-radius:0;background:none;border-top:2px dashed var(--text-2)}
.spark{display:block}
.sp{fill:var(--bar)}.sp.cmp{fill:var(--bar-2)}.sp.sel{fill:var(--signal)}.sp.part{opacity:.5}
.sl{fill:none;stroke:var(--bar-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sd{stroke:var(--surface);stroke-width:2}.sd.sel{fill:var(--signal)}.sd.cmp{fill:var(--bar-2)}

/* Daily strip */
.season{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px;align-items:start}
@media (max-width:980px){.season{grid-template-columns:minmax(0,1fr)}}
.heat{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.h0{fill:var(--h0)}.h1{fill:var(--h1)}.h2{fill:var(--h2)}.h3{fill:var(--h3)}.h4{fill:var(--h4)}.h5{fill:var(--h5)}
.hx{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 2}
.hc:hover{stroke:var(--text);stroke-width:1.5}
.hol{fill:var(--text);pointer-events:none}
.hm-lab{fill:var(--muted);font-size:12px}
.hm-br{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hm-sel{fill:var(--text);font-size:12px;font-weight:700}
.stats{display:flex;flex-direction:column;gap:16px}
.stat .v{font-size:22px;font-weight:900;letter-spacing:-.01em;line-height:1.15}
.stat .l{font-size:12.5px;color:var(--muted)}
.ramp{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.ramp i{width:13px;height:13px;border-radius:3px;display:inline-block}
.ramp span:first-child{margin-right:4px}.ramp span:last-child{margin-left:4px}
.ramp-hol{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.ramp-hol i{width:13px;height:13px;border-radius:3px;background:var(--h0);display:grid;place-items:center}
.ramp-hol i::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--text)}
.r0{background:var(--h0)}.r1{background:var(--h1)}.r2{background:var(--h2)}.r3{background:var(--h3)}.r4{background:var(--h4)}.r5{background:var(--h5)}

/* Countries, devices, channels */
.ctry{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);gap:9px 14px;align-items:center;font-size:13px}
.ctry .hd{font-size:12px;font-weight:700;color:var(--muted)}
.ctry .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:8px}
.track{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.track i{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--n2)}
.share b{font-weight:700;font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text-2)}
.mini{margin:22px 0 10px;font-size:13px;font-weight:700;color:var(--text-2)}
.stack{display:flex;gap:2px;height:12px;border-radius:6px;overflow:hidden}
.stack i{display:block;height:100%;min-width:3px}
.s0{background:var(--signal)}.s1{background:var(--n1)}.s2{background:var(--n2)}.s3{background:var(--n3)}.s4{background:var(--n4)}
.legend{display:flex;flex-direction:column;margin-top:12px}
.lg{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.lg:last-child{border-bottom:0}
.lg small{display:block;font-size:12px;color:var(--muted)}
.lg .v{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.inl{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12.5px;color:var(--text-2)}
.inl span{display:inline-flex;align-items:center;gap:7px}
.inl b{font-variant-numeric:tabular-nums}

/* Movers */
.movers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}
@media (max-width:640px){.movers{grid-template-columns:minmax(0,1fr)}}
.mv h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:13px;font-weight:700;color:var(--text-2)}
.ar{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:7px}
.ar svg{width:8px;height:8px}
.ar.up{background:var(--up-wash);color:var(--up)}.ar.down{background:var(--down-wash);color:var(--down)}
.mv ul{list-style:none;margin:0;padding:0}
.mv li{display:grid;grid-template-columns:minmax(0,1fr) auto 58px;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.mv li:last-child{border-bottom:0}
.mv li.none{display:block;color:var(--muted);font-size:13px}
.mv .chip{justify-self:end}
.qq{display:flex;align-items:center;min-width:0}
.qt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vv{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.vv b{font-weight:700}.vv span{font-size:12px;color:var(--muted)}
.bt{flex:none;display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;vertical-align:1px}

/* Tables */
.tw{overflow-x:auto;margin:0 -22px;padding:0 22px;scrollbar-width:thin}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{font-size:12px;font-weight:700;color:var(--muted);text-align:left;padding:0 12px 10px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:bottom}
thead tr.gh th{padding-bottom:6px;border-bottom:0}
thead tr.gh th.grpd{color:var(--text-2);border-bottom:1px solid var(--line-2);padding-bottom:5px;text-align:center}
thead tr.gh2 th{padding-top:7px}
tbody td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:not(.grp):not(.sum):hover td{background:var(--surface-2)}
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
th.r,td.r{text-align:right}
td.r{font-variant-numeric:tabular-nums;white-space:nowrap}
td.c{padding-left:6px}
.vc{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px}
.cnote{display:block;font-size:12px;line-height:1.3;color:var(--muted);white-space:normal;max-width:130px;text-align:right;margin-left:auto}
tr.grp th{padding:22px 0 8px;font-size:12.5px;font-weight:700;color:var(--text);text-align:left;border-bottom:1px solid var(--line-2)}
tr.selrow td{background:var(--signal-wash)}
tr.go{cursor:pointer}
tr.go:hover .sname{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
.sname{display:block;border:0;background:none;padding:0;font-weight:700;color:var(--text);cursor:pointer;text-align:left;white-space:nowrap}
.sname:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
.ssite{display:block;font-size:12px;color:var(--muted);white-space:nowrap}
tr.dim td{color:var(--muted)}
.awn{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--muted);cursor:help;white-space:nowrap}
.awn svg{color:var(--text-2)}
.pillm{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--line);white-space:nowrap}
.pg{display:flex;flex-direction:column;min-width:0;max-width:420px}
.pg-main{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-dir{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qtext{font-weight:700;overflow-wrap:anywhere}
.muted{color:var(--muted)}
tr.sum td{background:var(--surface-2);color:var(--text-2);border-bottom:1px solid var(--line)}
tr.sum.first td{border-top:1px solid var(--line-2)}
tr.sum.total td{font-weight:700;color:var(--text)}
tr.sum td:first-child{padding-left:12px;border-radius:0}
th .sort{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:2px 0;font:inherit;font-weight:700;color:inherit;cursor:pointer;white-space:nowrap}
th .sort:hover{color:var(--text)}
th .sort .si{width:10px;height:10px;opacity:.35}
th[aria-sort] .sort{color:var(--text)}
th[aria-sort] .sort .si{opacity:1}
th.r .sort{flex-direction:row-reverse}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:16px;font-size:13px;color:var(--muted)}
.pager .spacer{flex:1}

/* Notes and lenses */
.notes-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);font-size:13px;color:var(--text-2);line-height:1.55}
.note > svg{flex:none;color:var(--muted);margin-top:1px}
.note p{margin:0}.note b{color:var(--text)}
.note .caution{margin:-3px 2px 0 0}
.page > .note{max-width:980px}
.lens-bar{display:flex;flex-direction:column;gap:12px}
.lenses{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.lens{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--sheen),var(--surface);color:var(--text-2);cursor:pointer;text-align:left;box-shadow:var(--card-shadow)}
.lens:hover{border-color:var(--line-2)}
.lens .lt{font-size:13px;font-weight:700}
.lens .ln{font-size:24px;font-weight:900;color:var(--text);letter-spacing:-.01em;line-height:1.15}
.lens small{font-size:12px;color:var(--muted)}
.lens[aria-pressed="true"]{border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}

/* Logged Events */
.ev-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.ev-tools label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);font-weight:700}
.selbox{appearance:none;-webkit-appearance:none;padding:7px 34px 7px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238A909B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--text);font-weight:700;font-size:13px;cursor:pointer;max-width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.ev-list{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev-date{font-weight:700;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
.ev-date small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.ev-body{min-width:0}
.ev-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-weight:700;font-size:14.5px}
.ev-detail{margin:4px 0 0;font-size:13px;color:var(--text-2);max-width:86ch}
.ev-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:12px;color:var(--muted)}
.ev-meta a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.ev-meta a:hover{color:var(--text)}
.kind{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);white-space:nowrap}
.kind svg{width:14px;height:14px}
.kind.added{border-style:dashed}
@media (max-width:640px){.ev{grid-template-columns:minmax(0,1fr)}}
.ev-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 14px;margin-top:4px}
.ev-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:700;color:var(--text-2)}
.ev-form .wide{grid-column:1/-1}
.inp{padding:8px 11px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:13.5px;font-weight:400;min-width:0}
.inp:focus{outline:2px solid var(--signal);outline-offset:1px}
.form-actions{display:flex;gap:10px;align-items:center;grid-column:1/-1}

/* Floating layers */
.tip{position:fixed;z-index:100;pointer-events:none;max-width:300px;padding:9px 11px;border-radius:11px;background:var(--tip-bg);color:var(--tip-fg);font-size:12.5px;line-height:1.4;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.tip b{display:block;font-size:13px;margin-bottom:1px}
.toast{position:fixed;left:50%;bottom:24px;z-index:110;transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));padding:11px 16px;border-radius:12px;background:var(--tip-bg);color:var(--tip-fg);font-size:13px;font-weight:700;box-shadow:0 14px 36px rgba(0,0,0,.3)}
.menu{position:fixed;z-index:95;width:300px;max-width:calc(100vw - 24px);max-height:min(560px,calc(100vh - 24px));overflow-y:auto;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.menu .mh{padding:8px 10px 4px;font-size:12px;font-weight:700;color:var(--muted)}
.menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:none;color:var(--text);font-size:13px;text-align:left;cursor:pointer}
.menu button:hover,.menu button:focus-visible{background:var(--surface-2);outline:none}
.menu button:disabled{color:var(--muted);cursor:not-allowed;background:none}
.menu .mt{display:flex;flex-direction:column;min-width:0}
.menu .mt small{font-size:12px;color:var(--muted)}
.menu .ck{width:16px;flex:none;color:var(--signal)}
.menu .sep{height:1px;background:var(--line);margin:4px 6px}
.menu .mf{margin:4px 4px 2px;padding:8px 8px 4px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.45}
.menu .dates{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 10px 10px}
.menu .dates label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--muted)}
.menu .dates .inp{padding:6px 8px;font-size:13px;width:100%}
.menu .dates .solid{grid-column:1/-1;justify-content:center}

@media (max-width:900px){
  .app,.app.rail{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:0;left:0;bottom:0;width:276px;height:auto;z-index:90;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .app.open .side{transform:none}
  .app.open .scrim{display:block;position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.45)}
  .menu-btn{display:grid}
  .side-foot{display:none}
  .app.rail .brand img,.app.rail .brand .prod,.app.rail .item .label,.app.rail .item .badge,.app.rail .item .awi{display:revert}
  .app.rail .brand .mark{display:none}
}
@media (max-width:760px){.fresh{display:none}}
@media (max-width:560px){.seg{flex-wrap:wrap;border-radius:16px}.seg button{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* v4: Work log and Outcomes */
.count{font-size:12.5px;color:var(--muted)}
.ev-tools{margin-bottom:6px}
.card .note.gapnote{margin-bottom:16px}
.wlist{margin-top:8px}
.mg{margin-top:6px}
.mg-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:22px 0 4px;padding:0 0 8px;font-size:15px;font-weight:900;border-bottom:1px solid var(--line-2)}
.mg-h > span:first-child{display:inline-flex;align-items:center;gap:10px}
.mg-sum{font-size:12.5px;font-weight:400;color:var(--text-2)}
.pillm.up{color:var(--signal-ink);background:var(--signal-wash);border-color:transparent}
.wl{list-style:none;margin:0;padding:0}
.wr{display:grid;grid-template-columns:128px minmax(0,1fr) 128px 110px 56px 92px;gap:4px 16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.wl .wr:last-child{border-bottom:0}
.wl .wr:hover{background:var(--surface-2)}
.wr-head{padding:10px 0 0;font-size:12px;font-weight:700;color:var(--muted);border-bottom:0}
.wr-head span:nth-child(5){text-align:right}
.wr-st{display:inline-flex;align-items:center;gap:7px;font-weight:700;white-space:nowrap;cursor:default}
.wr-st svg{flex:none}
.wr-st.done{color:var(--up)}
.wr-st.todo{color:var(--text-2);font-weight:400}
.wr-name{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.tname{font-weight:700;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
a.tname:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
.tmore{font-size:12px;color:var(--muted);border-bottom:1px dotted var(--muted);cursor:help}
.wr-who{color:var(--text-2);overflow-wrap:anywhere}
.wr-h{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.srcm{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-2);text-decoration:none;white-space:nowrap}
a.srcm:hover{color:var(--text);text-decoration:underline}
.sdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.sd-both{background:var(--signal)}
.sd-clickup{background:var(--text-2)}
.sd-airtable{border:2px solid var(--text-2);background:none}
.empty.big{padding:28px 24px;font-size:14px}
.ocs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:14px;margin-top:14px}
.oc{display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 20px 14px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--signal)}
.oc h4{margin:0;font-size:15.5px;line-height:1.35;font-weight:900;letter-spacing:-.005em}
.oc-me{margin:0;font-size:13.5px;line-height:1.6;color:var(--text-2);white-space:pre-line}
.oc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.olink{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.olink svg{width:14px;height:14px}
.olink:hover{color:var(--text)}
@media (max-width:1100px){
  .wr{grid-template-columns:116px minmax(0,1fr) 118px 90px 50px 84px;gap:4px 12px}
}
@media (max-width:900px){
  .wr.wr-head{display:none}
  .wr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 0}
  .wr-name{order:-1;flex:1 1 100%}
  .wr-h{text-align:left}

  .card{padding:16px 14px}
  .tw{margin:0 -14px;padding:0 14px}
}