/* nav-fix additive overrides (survive immutable cache of the hashed stylesheet) */
.np-subwrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease-out); }
.np-subwrap.open{ grid-template-rows:1fr; }
.np-subwrap>div{ overflow:hidden; min-height:0; }
.np-pill{ animation:navpop .42s var(--ease-out); }
.navpanel.zdark{ overflow-y:auto; }
.navpanel.zdark > *{ flex:0 0 auto; }

/* ===== DW redesign (scoped) ===== */
.dw{--ink:#161616; --ink-2:#161616;
  --bg-white:var(--sf-c-surface); --bg-page:#fff1f1; --bg-alt:#f4f4f4; --bg-card:#f4f4f4; --bg-inner:#e0e0e0;
  --text-primary:#161616; --text-secondary:#6f6f6f; --text-muted:#6f6f6f;
  --on-dark:#f4f4f4; --on-dark-muted:hsla(60,9%,98%,.60);
  --border-card:#e0e0e0; --border-default:rgba(0,0,0,.12); --border-subtle:rgba(0,0,0,.08);
  --success:#24a148; --success-bg:#defbe6;
  --gradient-flo:linear-gradient(135deg,#0043ce,#0043ce);
  --magenta:var(--sf-c-brand); --maroon:var(--sf-c-maroon);
  --r-card:20px; --r-btn:12px; --r-pill:10px; --r-full:999px;
  --sh-sm:0 1px 2px rgba(0,0,0,.04),0 1px 1px rgba(0,0,0,.03);
  --sh-md:0 4px 6px -1px rgba(0,0,0,.06),0 2px 4px -2px rgba(0,0,0,.04);
  --sh-lg:0 12px 24px -8px rgba(0,0,0,.10),0 4px 8px -4px rgba(0,0,0,.05);
  --sh-xl:0 24px 48px -12px rgba(0,0,0,.14);
  --font-display:var(--sf-font);
  --font-sans:"IBM Plex Sans","Helvetica Neue",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --dur-fast:120ms; --dur-base:220ms; --dur-slow:360ms;
  --ease-out:cubic-bezier(0,0,.2,1); --ease-smooth:cubic-bezier(.32,.72,0,1);}
/* ─── Ollily DLS tokens (subset + brand accents, from compiled CSS) ─── */

/* ─── Section shell (8px system throughout) ─── */
.dw{ position:relative; background:var(--bg-white); padding:96px 40px; overflow:clip; }
.dw-wrap{ max-width:1200px; margin:0 auto; position:relative; }

/* faint documentation index watermark (parallax, no colour) */
.dw-ghost{ position:absolute; top:-40px; right:0; font-family:var(--font-display); font-weight:600;
  font-size:84px; line-height:1; color:var(--ink); opacity:.028; pointer-events:none; user-select:none;
  will-change:transform; }

/* ─── Header ─── */
.dw-head{ position:relative; max-width:640px; }
.dw-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-secondary); }
.dw-eyebrow .dot{ width:7px; height:7px; border-radius:0; background:var(--gradient-flo); }
.dw-title{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(40px,5.2vw,60px); margin:20px 0 0; color:var(--ink); }
.dw-lede{ margin:16px 0 0; font-size:16px; line-height:1.55; color:var(--text-secondary); max-width:560px; }
.dw-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:24px; }
.dw-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
  font-size:12px; color:var(--text-secondary); }
.dw-chip.ok{ color:var(--success); border:1px solid var(--success); background:var(--success-bg);
  border-radius:0; padding:3px 10px; }
.dw-chip .sep{ color:var(--text-muted); }
.dw-rule{ height:1px; background:var(--border-card); margin:40px 0 0; }

/* ─── Stepper / animated connector (the flow) ─── */
.dw-flow{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); margin:48px 0 40px; }
.flow-track,.flow-fill{ position:absolute; top:6px; left:8.333%; right:8.333%; height:2px; border-radius:0; }
.flow-track{ background:var(--border-card); }
.flow-fill{ background:var(--gradient-flo); transform:scaleX(0); transform-origin:left;
  transition:transform 1.5s var(--ease-smooth); }
.dw-flow.in .flow-fill{ transform:scaleX(1); }
.flow-node{ display:grid; justify-items:center; gap:12px; cursor:default; }
.flow-dot{ width:14px; height:14px; border-radius:0; background:#fff;
  border:2px solid var(--border-default); position:relative; z-index:1;
  transition:background .45s var(--ease-out),border-color .45s var(--ease-out),box-shadow .45s var(--ease-out),transform var(--dur-base) var(--ease-out);
  transition-delay:calc(var(--n) * 200ms); }
.dw-flow.in .flow-dot{ background:var(--gradient-flo); border-color:transparent;
  box-shadow:0 0 0 4px rgba(15,98,254,.10); }
.flow-name{ font-size:12px; font-weight:600; color:var(--text-primary); }
.flow-i{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); margin-top:-4px; }
.flow-node.hot .flow-dot{ transform:scale(1.35); box-shadow:0 0 0 5px rgba(15,98,254,.14); }

/* ─── Bento ─── */
.dw-bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.tile{ position:relative; display:flex; flex-direction:column; background:var(--bg-white);
  border:1px solid var(--border-card); border-radius:0; padding:24px;
  transition:transform var(--dur-slow) var(--ease-smooth),box-shadow var(--dur-slow) var(--ease-smooth),border-color var(--dur-slow) var(--ease-out); }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--border-default); }
.tile-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.tile-ic{ width:40px; height:40px; border-radius:0; display:grid; place-items:center;
  background:var(--bg-alt); border:1px solid var(--border-card); color:var(--ink);
  will-change:transform; animation:dwFloatY 4.5s var(--ease-out) infinite; }
.tile:nth-child(2) .tile-ic{ animation-delay:.4s } .tile:nth-child(3) .tile-ic{ animation-delay:.8s }
.tile:nth-child(4) .tile-ic{ animation-delay:1.2s } .tile:nth-child(5) .tile-ic{ animation-delay:1.6s }
.tile:nth-child(6) .tile-ic{ animation-delay:2s }
.tile-ic svg{ width:20px; height:20px; }
.tile:hover .tile-ic{ transform:translateY(-1px) scale(1.06); }
@keyframes dwFloatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
.tile-num{ font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
.tile-h{ font-family:var(--font-sans); font-weight:600; font-size:18px; line-height:1.25; margin:20px 0 0; color:var(--ink); }
.tile-d{ font-size:14px; line-height:1.5; color:var(--text-secondary); margin:6px 0 0; }
.tile-demo{ margin-top:20px; }

/* expandable detail — done the correct (smooth) way */
.tile-more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-slow) var(--ease-smooth); }
.tile-more > div{ overflow:hidden; min-height:0; }
.tile.open .tile-more{ grid-template-rows:1fr; }
.tile-more p{ font-size:14px; line-height:1.6; color:var(--text-secondary); margin:16px 0 0; }
.tile-more .lk{ display:inline-flex; align-items:center; gap:5px; margin:12px 8px 0 0; font-size:12px;
  font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--border-default);
  padding-bottom:1px; transition:border-color var(--dur-fast) var(--ease-out); }
.tile-more .lk:hover{ border-color:var(--ink); }
.tile-foot{ margin-top:auto; padding-top:18px; }
.tile-toggle{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:12px; font-weight:600; color:var(--text-secondary); padding:0;
  transition:color var(--dur-fast) var(--ease-out); }
.tile-toggle:hover{ color:var(--ink); }
.tile-toggle svg{ width:14px; height:14px; transition:transform var(--dur-slow) var(--ease-smooth); }
.tile.open .tile-toggle svg{ transform:rotate(180deg); }

.t1{ grid-column:span 3 } .t2{ grid-column:span 3 }
.t3{ grid-column:span 2 } .t4{ grid-column:span 2 } .t5{ grid-column:span 2 }
.t6{ grid-column:span 6 }

/* inverted near-black tile (Publish) — the black/white rhythm */
.tile.dark{ background:var(--ink); border-color:var(--ink); }
.tile.dark .tile-h{ color:#fff } .tile.dark .tile-d{ color:var(--on-dark-muted) }
.tile.dark .tile-num{ color:var(--on-dark-muted) }
.tile.dark .tile-ic{ background:hsla(0,0%,100%,.06); border-color:hsla(0,0%,100%,.14); color:#fff }
.tile.dark .tile-toggle{ color:var(--on-dark-muted) } .tile.dark .tile-toggle:hover{ color:#fff }
.tile.dark .tile-more p{ color:var(--on-dark-muted) }

/* ─── Tile demos ─── */
.demo-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sw{ width:36px; height:36px; border-radius:var(--r-pill); border:1px solid var(--border-card); }
.sw.ink{ background:var(--ink) } .sw.stone{ background:#a8a8a8 } .sw.paper{ background:var(--bg-alt) }
.sw.grad{ background:var(--gradient-flo); border-color:transparent; background-size:200% 200%; animation:dwPanGrad 6s var(--ease-smooth) infinite; }
@keyframes dwPanGrad{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
.sw.rad{ background:var(--bg-alt); border:1px solid var(--border-default); border-top-left-radius:14px; }
.sw.type{ background:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); }

.demo-btn{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:0;
  background:var(--ink); color:#fff; font-size:12px; font-weight:600; }
.demo-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--success);
  border:1px solid var(--success); border-radius:0; padding:3px 10px; }
.demo-pill .d{ width:6px; height:6px; border-radius:0; background:var(--success) }
.demo-input{ flex:1; min-width:80px; height:34px; border:1px solid var(--border-card); border-radius:0;
  background:var(--bg-alt); }

.wire{ background:var(--bg-alt); border:1px solid var(--border-card); border-radius:var(--r-pill); padding:12px; }
.wire-bar{ height:8px; width:44%; border-radius:0; background:var(--bg-inner); }
.wire-cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.wire-l{ height:6px; border-radius:0; background:var(--bg-inner); margin-bottom:7px; }
.wire-l.s{ width:70% } .wire-l.m{ width:90% }

.asset{ width:52px; height:52px; border-radius:0; border:1px solid var(--border-card);
  background:var(--bg-alt); display:grid; place-items:center; color:var(--maroon); }
.asset svg{ width:24px; height:24px; }
.asset.inv{ background:var(--ink); color:#fff }

.ship{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:0;
  background:var(--gradient-flo); color:#fff; font-size:14px; font-weight:600; box-shadow:0 8px 20px -8px rgba(224,22,89,.6); }
.ship svg{ width:16px; height:16px; }
.ship-check{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:0;
  background:hsla(0,0%,100%,.10); margin-left:8px; }
.ship-check svg{ width:14px; height:14px; stroke:#fff; stroke-width:3; fill:none; stroke-dasharray:20;
  stroke-dashoffset:20; animation:dwDraw 3.4s var(--ease-out) infinite; }
@keyframes dwDraw{ 0%,20%{ stroke-dashoffset:20 } 45%,80%{ stroke-dashoffset:0 } 100%{ stroke-dashoffset:20 } }

.scale-row{ display:flex; gap:10px; align-items:stretch; }
.scale-cell{ flex:1; height:64px; border-radius:var(--r-pill); background:var(--bg-alt); border:1px solid var(--border-card);
  display:flex; flex-direction:column; justify-content:center; padding:0 12px; gap:6px; }
.scale-cell .b{ height:6px; width:70%; border-radius:0; background:var(--bg-inner) }
.scale-cell .b.s{ width:45% }
.scale-cell .dot{ width:8px; height:8px; border-radius:0; background:var(--gradient-flo); }
.scale-note{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12px; color:var(--text-secondary); }
.scale-note b{ color:var(--ink); font-weight:600 }

/* ─── CTA ─── */
.dw-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:48px; padding-top:40px; border-top:1px solid var(--border-card); }
.btn{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:0;
  font-family:var(--font-sans); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out); }
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--gradient-flo); color:#fff; border:0; box-shadow:0 10px 24px -10px rgba(224,22,89,.55); }
.btn-primary:hover{ box-shadow:0 14px 30px -10px rgba(224,22,89,.7); transform:translateY(-1px); }
.btn-primary svg{ width:16px; height:16px; transition:transform var(--dur-base) var(--ease-out) }
.btn-primary:hover svg{ transform:translateX(3px) }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--border-default); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--bg-alt); }

/* ─── Scroll reveal ─── */
[data-reveal] .tile{ opacity:0; transform:translateY(22px); }
[data-reveal].in .tile{ opacity:1; transform:none; transition:opacity .6s var(--ease-out),transform .6s var(--ease-smooth); transition-delay:calc(var(--i) * 80ms); }
.dw-head,.dw-flow{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-smooth); }
.dw-head.in,.dw-flow.in{ opacity:1; transform:none; }

/* ─── Responsive ─── */
@media (max-width:980px){
  .dw{ padding:72px 28px; }
  .dw-ghost{ font-size:84px; }
  .dw-flow{ grid-template-columns:repeat(3,1fr); row-gap:28px; }
  .flow-track,.flow-fill{ display:none; }
  .t1,.t2{ grid-column:span 3 } .t3,.t4,.t5{ grid-column:span 3 } .t6{ grid-column:span 6 }
  .dw-bento{ grid-template-columns:repeat(6,1fr); }
  .t3{ grid-column:span 6 } .t4{ grid-column:span 3 } .t5{ grid-column:span 3 }
}
@media (max-width:620px){
  .dw{ padding:56px 20px; }
  .dw-ghost{ display:none; }
  .dw-title{ font-size:32px; }
  .dw-flow{ grid-template-columns:repeat(2,1fr); }
  .dw-bento{ grid-template-columns:1fr; }
  .t1,.t2,.t3,.t4,.t5,.t6{ grid-column:span 1; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .flow-fill{ transform:scaleX(1); transition:none; }
  .dw-flow .flow-dot{ background:var(--gradient-flo); border-color:transparent; }
  [data-reveal] .tile,.dw-head,.dw-flow{ opacity:1; transform:none; transition:none; }
  .tile-more{ transition:none; }
  .dw-ghost{ display:none; }
}

/* ===== Logo usage — misuse grid + partner lockups (scoped) ===== */
.lm-intro{ margin-top:6px; }
.lm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; }
.lm-card{ margin:0; }
.lm-stage{ position:relative; height:150px; background:#fff; border:1px solid var(--border-card);
  border-radius:0; display:grid; place-items:center; overflow:hidden; }
.lm-logo{ width:min(160px,64%); height:auto; display:block; }
.lm-badge{ position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; background:#da1e28; color:#fff; box-shadow:0 2px 6px rgba(192,57,43,.35); }
.lm-badge svg{ width:14px; height:14px; }
.lm-cap{ font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); margin-top:12px; line-height:1.45; }
/* misuse treatments */
.lm-stretch  .lm-logo{ transform:scaleX(1.7); }
.lm-rotate   .lm-logo{ transform:rotate(-13deg); }
.lm-recolour .lm-logo{ filter:hue-rotate(178deg) saturate(1.5); }
.lm-shadow   .lm-logo{ filter:drop-shadow(7px 9px 5px rgba(0,0,0,.45)); }
.lm-ghost    .lm-logo{ opacity:.22; }
.lm-lowcon .lm-stage{ background:#2d0709; border-color:transparent; }

/* partner co-branding */
.cb-intro{ margin-top:6px; }
.cb-dos{ display:grid; grid-template-columns:1.45fr 1fr; gap:16px; margin-top:22px; }
.cb-donts{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:16px; }
.cb-card{ position:relative; border:1px solid var(--border-card); border-radius:0;
  background:#fff; display:flex; flex-direction:column; }
.cb-card.big{ padding:44px 28px 22px; }
.cb-card.sm{ padding:22px 16px 16px; }
.cb-card.dark{ background:var(--ink); border-color:var(--ink); }
.cb-card.lowcon{ background:#2d0709; border-color:transparent; }
.cb-stage{ flex:1; display:grid; place-items:center; }
.cb-badge{ position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; color:#fff; }
.cb-badge.ok{ background:var(--success); } .cb-badge.no{ background:#da1e28; }
.cb-badge svg{ width:15px; height:15px; }
.cb-cap{ font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); margin-top:12px; line-height:1.45; }

.cb-lock{ display:inline-flex; align-items:center; gap:20px; }
.cb-sf{ height:26px; width:auto; display:block; }
.cb-card.sm .cb-sf{ height:20px; }
.cb-div{ width:1px; height:34px; background:var(--border-default); }
.cb-card.dark .cb-div{ background:hsla(0,0%,100%,.28); }
.cb-partner{ display:inline-flex; align-items:center; gap:8px; }
.cb-amark{ width:22px; height:22px; border-radius:0; background:#6fdc8c; color:#fff;
  display:inline-grid; place-items:center; font-family:var(--font-sans); font-weight:600; font-size:12px; }
.cb-aword{ font-family:var(--font-sans); font-weight:600; font-size:20px; letter-spacing:-.01em; color:#002d9c; }
.cb-card.sm .cb-aword{ font-size:16px; } .cb-card.sm .cb-amark{ width:18px; height:18px; font-size:12px; }
/* dark ground: both marks white */
.cb-card.dark .cb-aword{ color:#fff; } .cb-card.dark .cb-amark{ background:#fff; color:#002d9c; }
/* don't variants */
.cb-outweigh .cb-aword{ font-size:28px; } .cb-outweigh .cb-amark{ width:30px; height:30px; font-size:16px; } .cb-outweigh .cb-sf{ height:15px; }
.cb-merged .cb-div{ display:none; } .cb-merged .cb-lock{ gap:6px; }
.cb-recolour .cb-amark{ background:#0043ce; } .cb-recolour .cb-aword{ color:#0043ce; }
.cb-lowcon .cb-aword{ color:rgba(255,255,255,.5); } .cb-lowcon .cb-amark{ background:rgba(255,255,255,.4); }
.cb-lowcon .cb-sf{ opacity:.5; } .cb-lowcon .cb-div{ background:hsla(0,0%,100%,.25); }

@media (max-width:900px){
  .lm-grid{ grid-template-columns:repeat(2,1fr); }
  .cb-dos{ grid-template-columns:1fr; } .cb-donts{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .lm-grid,.cb-donts{ grid-template-columns:1fr; }
}

/* keep injected partner block visible (not caught by .content.reveal-ready section) */
.content #partners{opacity:1;transform:none;margin-top:14px}
.content #partners .sec{margin-bottom:0}

/* provide tokens the injected logo sections rely on (site root doesn't define --ink/--border-card) */
#donts, #partners{ --ink:#161616; --border-card:#e0e0e0; --border-default:rgba(0,0,0,.12); }
.cb-donts .cb-stage{ overflow:hidden; }
.cb-card.sm .cb-lock{ gap:10px; }
.cb-card.sm .cb-sf{ height:16px; }
.cb-card.sm .cb-aword{ font-size:14px; }
.cb-card.sm .cb-amark{ width:16px; height:16px; font-size:12px; border-radius:0; }
.cb-card.sm.cb-outweigh .cb-aword{ font-size:20px; } .cb-card.sm.cb-outweigh .cb-amark{ width:22px; height:22px; font-size:12px; } .cb-card.sm.cb-outweigh .cb-sf{ height:12px; }

/* ---- fix: "How to use this" nav row clipped (flex child with overflow:hidden shrank to 0 min-height) ---- */
.navpanel.zdark{ overflow-y:auto; }
.navpanel.zdark > *{ flex:0 0 auto; }

/* ---- low-contrast ground uses Ollily maroon (not Zuper orange) ---- */
.lm-lowcon .lm-stage{ background:#001141; }
.cb-card.lowcon{ background:#001141; }

/* ---- real Acumatica logo in partner lockups ---- */
.cb-partner{ height:26px; width:auto; display:block; }
.cb-card.sm .cb-partner{ height:16px; }
.cb-outweigh .cb-partner{ height:38px; } .cb-card.sm.cb-outweigh .cb-partner{ height:26px; }
.cb-card.sm.cb-outweigh .cb-sf{ height:12px; }
/* recolour: pink silhouette of the partner mark */
.cb-pink{ display:inline-block; height:26px; width:180px; background:var(--gradient-flo);
  -webkit-mask:url(/brand/acumatica-white.svg) left center/contain no-repeat;
  mask:url(/brand/acumatica-white.svg) left center/contain no-repeat; }
.cb-card.sm .cb-pink{ height:16px; width:118px; }

/* small partner cards: tighten so the wide Acumatica wordmark reads */
.cb-card.sm .cb-lock{ gap:8px; }
.cb-card.sm .cb-partner{ height:14px; }
.cb-card.sm .cb-sf{ height:14px; }
.cb-card.sm .cb-div{ height:22px; }
.cb-card.sm .cb-pink{ height:14px; width:96px; }

/* ===== Interactive logo showcase (Logo usage hero) ===== */
.ls-card{ position:relative; border-radius:0; background:#fff; border:1px solid var(--border-card,#e0e0e0);
  padding:14px 14px 6px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:box-shadow .45s var(--ease-out,cubic-bezier(0,0,.2,1)); }
.ls-float{ animation:lsFloat 6.5s ease-in-out infinite; }
.ls-card:hover{ box-shadow:0 20px 44px -14px rgba(15,98,254,.30), 0 0 0 1px rgba(15,98,254,.16); }
.ls-card:hover .ls-float, .ls-card.ls-float:hover{ animation-play-state:paused; }
@keyframes lsFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.ls-stage{ position:relative; height:250px; border-radius:0; overflow:hidden; display:grid; place-items:center; }
.ls-bg{ position:absolute; inset:0; opacity:0; transform:scale(1.03);
  transition:opacity .7s var(--ease-smooth,cubic-bezier(.32,.72,0,1)), transform .7s var(--ease-smooth,cubic-bezier(.32,.72,0,1)); }
.ls-bg.show{ opacity:1; transform:none; }
.ls-clearbox{ position:absolute; inset:30px; border:1.5px dashed rgba(90,80,80,.35); border-radius:0; z-index:2; transition:border-color .5s; }
.ls-card.on-dark .ls-clearbox{ border-color:hsla(0,0%,100%,.30); }
.ls-x{ position:absolute; z-index:3; font-family:var(--font-mono,monospace); font-size:12px; color:#8e6a00; transform:translate(-50%,-50%); }
.ls-x.t{ top:30px; left:50%; } .ls-x.b{ top:calc(100% - 30px); left:50%; }
.ls-x.l{ left:30px; top:50%; } .ls-x.r{ left:calc(100% - 30px); top:50%; }
.ls-logo{ position:relative; z-index:3; height:32px; width:auto; transition:opacity .34s var(--ease-out,ease); }
.ls-logo.shadow{ filter:drop-shadow(0 7px 16px rgba(0,0,0,.20)); }
.ls-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 4px 6px; flex-wrap:wrap; }
.ls-swatches{ display:flex; gap:6px; align-items:center; }
.ls-sw{ width:16px; height:16px; border-radius:0; border:1px solid rgba(0,0,0,.12); cursor:pointer; transition:transform .2s, outline-color .2s; outline:2px solid transparent; outline-offset:1px; }
.ls-sw:hover{ transform:scale(1.12); }
.ls-sw.active{ outline-color:var(--magenta,#0f62fe); }
.ls-cap{ font-family:var(--font-mono,monospace); font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-secondary,#6f6f6f); }
.ls-measure{ display:flex; align-items:center; gap:8px; padding:2px 4px 8px; font-family:var(--font-mono,monospace); font-size:12px; letter-spacing:.06em; color:var(--text-muted,#a8a8a8); }
.ls-measure .bar{ flex:1; height:1px; background:var(--border-card,#e0e0e0); position:relative; }
.ls-measure .bar::before,.ls-measure .bar::after{ content:""; position:absolute; top:-3px; width:1px; height:7px; background:var(--border-default,rgba(0,0,0,.2)); }
.ls-measure .bar::before{ left:0; } .ls-measure .bar::after{ right:0; }
@media (prefers-reduced-motion:reduce){ .ls-float{ animation:none; } .ls-bg{ transition:none; } }

/* ===== Logo guideline cards ===== */
.lg-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:8px 0 4px; }
.lg-card{ display:flex; flex-direction:column; gap:0; background:#fff; border:1px solid var(--border-card,#e0e0e0);
  border-radius:0; padding:18px; text-decoration:none; color:inherit;
  transition:transform .3s var(--ease-smooth,ease), box-shadow .3s var(--ease-out,ease), border-color .3s; }
a.lg-card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px -10px rgba(0,0,0,.10); border-color:var(--border-default,rgba(0,0,0,.12)); }
.lg-vis{ height:40px; display:flex; align-items:center; margin-bottom:14px; }
.lg-h{ font-family:var(--font-sans); font-weight:600; font-size:14px; color:var(--text-primary,#161616); }
.lg-p{ font-size:12px; line-height:1.5; color:var(--text-secondary,#6f6f6f); margin:6px 0 0; }
.lg-link{ margin-top:auto; padding-top:12px; font-size:12px; font-weight:600; color:var(--text-primary,#161616); }
.lg-mini{ display:flex; gap:5px; } .lg-mini i{ width:16px; height:16px; border-radius:0; display:block; border:1px solid rgba(0,0,0,.10); }
.lg-96{ font-family:var(--font-display,sans-serif); font-weight:600; font-size:24px; color:var(--text-primary,#161616); letter-spacing:-.02em; }
.lg-x{ width:30px; height:30px; border-radius:999px; background:#da1e28; color:#fff; display:grid; place-items:center; font-size:14px; }
.lg-dl{ font-family:var(--font-mono,monospace); font-size:14px; color:var(--text-primary,#161616); font-weight:600; }
.lg-clear{ position:relative; width:46px; height:30px; border:1.5px dashed rgba(90,80,80,.4); border-radius:0; }
.lg-clear::after{ content:""; position:absolute; inset:8px; background:#0043ce; border-radius:0; }
@media (max-width:1000px){ .lg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .lg-grid{ grid-template-columns:1fr; } }

/* showcase tweaks: X inside dashed box, faster 1s-cycle transitions, correct-placement tick */
.ls-x.t{ top:52px; } .ls-x.b{ top:calc(100% - 52px); }
.ls-x.l{ left:52px; } .ls-x.r{ left:calc(100% - 52px); }
.ls-bg{ transition:opacity .4s var(--ease-smooth,cubic-bezier(.32,.72,0,1)), transform .4s var(--ease-smooth,cubic-bezier(.32,.72,0,1)); }
.ls-logo{ transition:opacity .18s var(--ease-out,ease); }
.ls-tick{ position:absolute; top:24px; right:24px; z-index:5; width:30px; height:30px; border-radius:999px;
  background:#24a148; color:#fff; display:grid; place-items:center; box-shadow:0 4px 12px rgba(26,158,106,.4); }
.ls-tick svg{ width:16px; height:16px; }

/* ===== Converted phero headers — cover stage ===== */
.cover-fr{ position:relative; min-height:300px; display:grid; place-items:center; overflow:hidden;
  background:#fff; }
.cover-num{ position:absolute; top:-.22em; right:.06em; font-family:var(--font-display,sans-serif); font-weight:600;
  font-size:84px; line-height:1; color:var(--edge-2,#f4f4f4); opacity:.65; pointer-events:none; user-select:none; }
.cover-inner{ position:relative; display:grid; place-items:center; text-align:center; gap:16px; z-index:1; padding:24px; }
.cover-mark{ width:66px; height:auto; display:block; }
.cover-tag{ font-family:var(--font-mono,monospace); font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--magenta,#0f62fe); }

/* Remove the per-item tag labels (design, dev, govern, PPT, web, …) from the nav */
.np-row .tg{ display:none !important; }

/* Remove specific items from the sidebar nav */
.np-row[href*="/getting-started/design-workflow"],
.np-row[href*="/getting-started/developer-workflow"],
.np-row[href*="/getting-started/contribution"],
.np-row[href*="/systems/deck"],
.np-row[href*="/systems/website"],
.np-row[href*="/foundations/agent-avatars"]{ display:none !important; }

/* Remove the theme (moon) toggle from the nav */
.np-kbd[aria-label="Toggle theme"]{ display:none !important; }

/* Also remove the six pages from the home "How to use this" index list */
.index-row[href*="/getting-started/design-workflow"],
.index-row[href*="/getting-started/developer-workflow"],
.index-row[href*="/getting-started/contribution"],
.index-row[href*="/systems/deck"],
.index-row[href*="/systems/website"],
.index-row[href*="/foundations/agent-avatars"]{ display:none !important; }

/* Remove Colour tokens & Elevation & motion (design tokens) */
.np-row[href*="/tokens/colors"],
.np-row[href*="/tokens/elevation-motion"],
.index-row[href*="/tokens/colors"],
.index-row[href*="/tokens/elevation-motion"]{ display:none !important; }

/* Remove Brand assets everywhere (nav, home index, related, prev/next) */
a[href*="/foundations/brand-assets"]{ display:none !important; }

/* ================= Email Signature Builder ================= */
#sig-builder{ --sg-accent:var(--sf-c-brand); --sg-ink:#161616; --sg-sub:#6f6f6f; --sg-line:#e0e0e0; --sg-bg:#fff1f1; margin-top:8px; }
.sig-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:26px; align-items:start; }
.sig-form{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.sig-card{ background:#fff; border:1px solid var(--sg-line); border-radius:0; padding:18px 18px 20px; }
.sig-h{ font-family:var(--font-mono,monospace); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--sg-accent); margin-bottom:12px; }
.sig-f{ display:block; margin-top:12px; }
.sig-f:first-of-type{ margin-top:0; }
.sig-f>span{ display:block; font-size:12px; color:var(--sg-sub); margin-bottom:6px; font-weight:600; }
.sig-in{ width:100%; box-sizing:border-box; border:1px solid var(--sg-line); border-radius:0; padding:10px 12px; font:inherit; font-size:14px; color:var(--sg-ink); background:#fff; transition:border-color .15s, box-shadow .15s; }
.sig-in:focus{ outline:none; border-color:var(--sg-accent); box-shadow:0 0 0 3px rgba(15,98,254,.14); }
select.sig-in{ appearance:none; cursor:pointer; }
.sig-note{ min-height:0; color:#da1e28; font-size:12px; }
.sig-note:not(:empty){ margin:2px 0 -4px; }
.sig-tpls{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sig-tpl{ text-align:left; border:1px solid var(--sg-line); background:#fff; border-radius:0; padding:11px 12px; cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s; }
.sig-tpl:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -12px rgba(0,0,0,.16); }
.sig-tpl.on{ border-color:var(--sg-accent); box-shadow:0 0 0 2px rgba(15,98,254,.18); }
.sig-tpl b{ display:block; font-size:14px; color:var(--sg-ink); }
.sig-tpl em{ display:block; font-style:normal; font-size:12px; color:var(--sg-sub); margin-top:2px; }
.sig-toggle{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--sg-ink); cursor:pointer; margin-top:6px; }
.sig-toggle.sm{ font-size:12px; }
.sig-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.sig-tk{ width:38px; height:22px; border-radius:999px; background:#e0e0e0; position:relative; transition:background .2s; flex:0 0 auto; }
.sig-tk::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:999px; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.sig-toggle input:checked + .sig-tk{ background:var(--sg-accent); }
.sig-toggle input:checked + .sig-tk::after{ transform:translateX(16px); }
.sig-upl{ display:inline-block; margin-top:12px; font-size:12px; color:var(--sg-accent); cursor:pointer; }
.sig-upl input{ display:block; margin-top:6px; font-size:12px; color:var(--sg-sub); }

/* preview */
.sig-preview{ position:sticky; top:20px; }
.sig-pv-bar{ display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.sig-seg{ display:inline-flex; background:#f4f4f4; border:1px solid var(--sg-line); border-radius:0; padding:3px; }
.sig-seg button{ border:0; background:transparent; padding:6px 12px; font:inherit; font-size:12px; color:var(--sg-sub); border-radius:0; cursor:pointer; transition:background .15s,color .15s; }
.sig-seg button.on{ background:#fff; color:var(--sg-ink); box-shadow:0 1px 3px rgba(0,0,0,.1); }
.sig-stage{ border:1px solid var(--sg-line); border-radius:0; padding:30px; min-height:280px; display:flex; justify-content:center; transition:background .3s; overflow:auto; }
.sig-stage.light{ background:#ffffff; }
.sig-stage.dark{ background:#161616; }
.sig-canvas{ width:100%; }
.sig-stage.mobile .sig-canvas{ max-width:340px; }
.sig-stage.desktop .sig-canvas{ max-width:520px; }
.sig-exports{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.sig-x{ border:1px solid var(--sg-line); background:#fff; color:var(--sg-ink); border-radius:0; padding:9px 14px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s; }
.sig-x:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -12px rgba(0,0,0,.2); }
.sig-x.primary{ background:var(--sg-accent); color:#fff; border-color:var(--sg-accent); }
.sig-x.ghost{ color:var(--sg-sub); }
.sig-toast{ margin-top:10px; font-size:12px; color:var(--sg-accent); font-weight:600; opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s; }
.sig-toast.show{ opacity:1; transform:none; }

/* admin */
.sig-admin{ background:#fff; border:1px solid var(--sg-line); border-radius:0; padding:6px 18px; }
.sig-admin summary{ cursor:pointer; font-weight:600; font-size:14px; color:var(--sg-ink); padding:12px 0; list-style:none; }
.sig-admin summary::-webkit-details-marker{ display:none; }
.sig-admin summary::before{ content:"⚙ "; }
.sig-admin-b{ padding:4px 0 16px; }
.sig-admin-b .sig-h{ margin-top:18px; }
.sig-cols{ display:flex; gap:14px; flex-wrap:wrap; }
.sig-col{ display:flex; flex-direction:column; align-items:center; gap:5px; font-size:12px; color:var(--sg-sub); }
.sig-col input{ width:40px; height:32px; border:1px solid var(--sg-line); border-radius:0; padding:0; background:none; cursor:pointer; }
.sig-admgrid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
.sig-lib{ display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:6px 0; border-bottom:1px solid var(--sg-line); }
.sig-lib button, .sig-libadd button, .sig-admin-b [data-adm-addban]{ border:0; background:none; color:var(--sg-accent); cursor:pointer; font:inherit; font-size:12px; }
.sig-libadd{ display:flex; gap:8px; margin-top:8px; }
textarea.sig-in{ resize:vertical; font-family:inherit; }
@media (max-width:900px){ .sig-wrap{ grid-template-columns:1fr; } .sig-preview{ position:static; } }

/* signature preview: don't clip; allow scroll */
.sig-stage{ overflow:auto; }
.sig-stage.desktop .sig-canvas{ max-width:100%; }
.sig-full{ border:1px solid var(--sg-line); background:#fff; color:var(--sg-ink); border-radius:0; padding:6px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.sig-full:hover{ box-shadow:0 6px 14px -8px rgba(0,0,0,.25); }
/* full-view modal */
#sig-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; }
.sig-modal-back{ position:absolute; inset:0; background:rgba(20,10,16,.55); backdrop-filter:blur(3px); }
.sig-modal-card{ position:relative; background:#fff; border-radius:0; width:min(920px,94vw); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 40px 100px -30px rgba(0,0,0,.5); }
.sig-modal-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--sg-line); font-weight:600; color:var(--sg-ink); flex-wrap:wrap; }
.sig-modal-tools{ display:flex; align-items:center; gap:10px; }
.sig-modal-x{ border:0; background:#f4f4f4; width:32px; height:32px; border-radius:0; cursor:pointer; font-size:14px; color:var(--sg-ink); }
.sig-modal-stage{ padding:44px; overflow:auto; transition:background .3s; }
.sig-modal-stage.light{ background:#fff; } .sig-modal-stage.dark{ background:#161616; }
.sig-modal-canvas{ display:flex; justify-content:center; }
@media (max-width:560px){ .sig-modal-stage{ padding:22px; } }

/* ===== Signature Builder launcher (compact, on the email-signature page) ===== */
#sig-launch{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;
  background:#fff; border:1px solid var(--border-card,#e0e0e0); border-radius:0; padding:34px; margin-top:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }
.sl-eyebrow{ font-family:var(--font-mono,monospace); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--magenta,#0f62fe); }
.sl-title{ font-family:var(--font-display,inherit); font-size:32px; font-weight:600; letter-spacing:-.02em; margin:10px 0 0; }
.sl-desc{ color:var(--text-secondary,#6f6f6f); font-size:14px; line-height:1.6; margin:12px 0 0; max-width:44ch; }
.sl-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.sl-chips span{ font-size:12px; color:var(--text-secondary,#6f6f6f); background:var(--bg-card,#f4f4f4); border:1px solid var(--border-card,#e0e0e0); border-radius:999px; padding:5px 12px; }
.sl-actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.sl-btn{ border:1px solid var(--border-card,#e0e0e0); background:#fff; color:var(--ink,#161616); border-radius:0; padding:12px 20px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.sl-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -14px rgba(0,0,0,.3); }
.sl-btn.primary{ background:var(--magenta,#0f62fe); color:#fff; border-color:var(--magenta,#0f62fe); }
.sl-note{ margin-top:12px; font-size:12px; color:var(--magenta,#0f62fe); min-height:18px; font-weight:600; }
.sl-right{ display:flex; justify-content:center; }
.sl-mail{ width:100%; max-width:420px; background:#fff; border:1px solid var(--border-card,#e0e0e0); border-radius:0; overflow:hidden; box-shadow:0 24px 50px -24px rgba(0,0,0,.28); }
.sl-mailbar{ display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--border-card,#e0e0e0); background:#f4f4f4; }
.sl-mailbar span{ width:9px; height:9px; border-radius:50%; background:#e0e0e0; }
.sl-mailbar em{ margin-left:10px; font-style:normal; font-family:var(--font-mono,monospace); font-size:12px; color:var(--text-muted,#8d8d8d); }
.sl-mailbody{ padding:26px 22px; overflow:auto; }
.sl-mailbody table{ max-width:100%; }
@media (max-width:820px){ #sig-launch{ grid-template-columns:1fr; gap:24px; padding:26px; } .sl-title{ font-size:24px; } }

/* Embed full builder inline on the email-signature page */
.content:has(#sig-embed){ max-width:none; }
#sig-embed{ border:1px solid var(--border-card,#e0e0e0); border-radius:0; overflow:hidden;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.35); margin:6px 0 12px; background:#fff; }
#sig-embed iframe{ display:block; width:100%; height:min(840px,calc(100vh - 90px)); min-height:640px; border:0; background:#fff; }
@media (max-width:820px){ #sig-embed iframe{ height:calc(100vh - 90px); min-height:900px; } }

/* ensure the embedded builder section is always visible + header bar */
.content #builder{ opacity:1 !important; transform:none !important; }
.sig-embed-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin:4px 0 12px; font-size:14px; color:var(--text-secondary,#6f6f6f); }
.sig-embed-bar a{ color:var(--magenta,#0f62fe); font-weight:600; text-decoration:none; }
.sig-embed-bar a:hover{ text-decoration:underline; }

/* ===== Social & ads — asset library ===== */
.content .sg-sec{ opacity:1 !important; transform:none !important; margin-top:40px; }
.sg-h2{ font-family:var(--font-display,inherit); font-size:24px; font-weight:600; letter-spacing:-.02em; margin:0; }
.sg-lead{ color:var(--text-secondary,#6f6f6f); font-size:14px; line-height:1.6; margin:8px 0 0; max-width:70ch; }
.sg-fils{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 8px; }
.sg-fil{ border:1px solid var(--border-card,#e0e0e0); background:#fff; color:var(--text-secondary,#6f6f6f); border-radius:999px; padding:7px 14px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:.15s; }
.sg-fil:hover{ border-color:var(--magenta,#0f62fe); color:var(--magenta,#0f62fe); }
.sg-fil.on{ background:var(--magenta,#0f62fe); color:#fff; border-color:var(--magenta,#0f62fe); }
.sg-group{ margin-top:30px; }
.sg-gh{ font-family:var(--font-mono,monospace); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink,#161616); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.sg-gh span{ color:var(--text-muted,#8d8d8d); font-weight:400; }
.sg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.sg-card{ margin:0; border:1px solid var(--border-card,#e0e0e0); border-radius:0; overflow:hidden; background:#fff; cursor:pointer; transition:transform .18s cubic-bezier(.32,.72,0,1), box-shadow .18s; outline:none; }
.sg-card:hover, .sg-card:focus-visible{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(0,0,0,.4); border-color:#e0e0e0; }
.sg-thumb{ aspect-ratio:4/3; background:#f4f4f4; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sg-thumb img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.sg-card figcaption{ padding:12px 14px 14px; }
.sg-name{ font-size:14px; font-weight:600; color:var(--ink,#161616); line-height:1.35; text-transform:capitalize; }
.sg-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.sg-chip{ font-size:12px; font-weight:600; color:var(--magenta,#0f62fe); background:rgba(15,98,254,.08); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.sg-dim{ font-family:var(--font-mono,monospace); font-size:12px; color:var(--text-muted,#8d8d8d); white-space:nowrap; }
/* lightbox */
.sg-lb{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:32px; }
.sg-lb-back{ position:absolute; inset:0; background:rgba(20,10,16,.7); backdrop-filter:blur(4px); }
.sg-lb-card{ position:relative; margin:0; max-width:92vw; max-height:90vh; display:flex; flex-direction:column; }
.sg-lb-card img{ max-width:92vw; max-height:80vh; object-fit:contain; border-radius:0; box-shadow:0 40px 100px -30px rgba(0,0,0,.6); background:#fff; }
.sg-lb-card figcaption{ display:flex; align-items:center; justify-content:space-between; gap:16px; color:#fff; margin-top:14px; font-size:14px; }
.sg-lb-card figcaption span{ font-weight:600; text-transform:capitalize; }
.sg-lb-card figcaption em{ font-family:var(--font-mono,monospace); font-style:normal; color:rgba(255,255,255,.7); font-size:12px; }
.sg-lb-x{ position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%; border:0; background:#fff; color:#161616; cursor:pointer; font-size:14px; box-shadow:0 6px 16px rgba(0,0,0,.3); }
@media (max-width:640px){ .sg-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; } }

/* The .nu-navrow badge styles lived here. The New updates row they dressed has
   been removed from the navigation along with its injector. */

/* ===== Injected hero animations (added) ===== */
.phero{position:relative}
.dls-fx{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:300px;height:300px;pointer-events:none;z-index:1;display:flex;align-items:center;justify-content:center}
@media (max-width:1120px){.dls-fx{display:none}}
@keyframes dlsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Whitepaper — document + gradient gate cover */
.dls-fx-wp .wp{position:relative;width:190px;height:250px;animation:dlsFloat 8s ease-in-out infinite}
.wp-pg{position:absolute;left:50%;top:50%;width:150px;height:200px;border-radius:0;background:#fff;border:1px solid #e0e0e0;box-shadow:0 18px 40px rgba(0,45,156,.10)}
.wp-pg.p1{transform:translate(-50%,-50%)}
.wp-pg.p2{transform:translate(-62%,-46%) rotate(-6deg);opacity:.85}
.wp-pg.p3{transform:translate(-38%,-54%) rotate(6deg);opacity:.65}
.wp-pg.p1 i{position:absolute;left:18px;height:6px;border-radius:0;background:#fcf4d6}
.wp-pg.p1 i:nth-child(1){top:120px;width:110px}.wp-pg.p1 i:nth-child(2){top:138px;width:96px}
.wp-pg.p1 i:nth-child(3){top:156px;width:110px}.wp-pg.p1 i:nth-child(4){top:174px;width:70px}
.wp-cover{position:absolute;left:50%;top:50%;width:150px;height:200px;border-radius:0;padding:16px;color:#fff;
  background:#002d9c;box-shadow:0 24px 50px rgba(0,45,156,.28);
  transform:translate(-50%,-50%);animation:wpCover 6s ease-in-out infinite}
.wp-cover svg{width:34px;height:34px;opacity:.95}
@keyframes wpCover{0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-30%,-52%) rotate(4deg)}}
/* Introduction — assembling brand chevrons */
.dls-fx-intro .im{position:relative;width:200px;height:150px}
.im-c{position:absolute;left:50%;transform:translateX(-50%);width:160px}
.im-c path{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.im-c.c1{top:78px;color:#002d9c;animation:imRise 3.2s ease-in-out infinite}
.im-c.c2{top:48px;color:#0043ce;animation:imRise 3.2s ease-in-out .18s infinite}
.im-c.c3{top:18px;color:#0043ce;animation:imRise 3.2s ease-in-out .36s infinite}
@keyframes imRise{0%,100%{opacity:.22;transform:translateX(-50%) translateY(10px)}45%,70%{opacity:1;transform:translateX(-50%) translateY(0)}}
/* Colour — drifting gradient orbs + swatch pulse */
.dls-fx-colour .col{position:relative;width:250px;height:250px}
.col .co{position:absolute;border-radius:50%;filter:blur(16px);mix-blend-mode:multiply;opacity:.72}
.col .co.a{width:150px;height:150px;left:14px;top:34px;background:#002d9c;animation:coDrift 9s ease-in-out infinite}
.col .co.b{width:150px;height:150px;right:6px;top:8px;background:#0f62fe;animation:coDrift 11s ease-in-out infinite reverse}
.col .co.c{width:150px;height:150px;left:54px;bottom:2px;background:#0043ce;animation:coDrift 13s ease-in-out infinite}
@keyframes coDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-16px,14px) scale(1.09)}}
.phero-fx-colour .pchip .cdot{animation:cdotPulse 2.4s ease-in-out infinite}
.phero-fx-colour .pchip:nth-child(2) .cdot{animation-delay:.3s}.phero-fx-colour .pchip:nth-child(3) .cdot{animation-delay:.6s}.phero-fx-colour .pchip:nth-child(4) .cdot{animation-delay:.9s}
@keyframes cdotPulse{0%,100%{box-shadow:0 0 0 0 rgba(15,98,254,0)}50%{box-shadow:0 0 0 4px rgba(15,98,254,.18)}}
/* Iconography — twinkling icon grid */
.dls-fx-icon .ig{display:grid;grid-template-columns:repeat(3,52px);grid-auto-rows:52px;gap:12px}
.ig span{display:grid;place-items:center;width:52px;height:52px;border-radius:0;background:#fff;border:1px solid #e0e0e0;color:#002d9c;box-shadow:0 6px 16px rgba(0,45,156,.06);opacity:0;transform:scale(.8);animation:igPop 4.2s ease-in-out infinite}
.ig span svg{width:22px;height:22px}
.ig span:nth-child(1){animation-delay:0s}.ig span:nth-child(2){animation-delay:.15s}.ig span:nth-child(3){animation-delay:.3s}
.ig span:nth-child(4){animation-delay:.45s}.ig span:nth-child(5){animation-delay:.6s}.ig span:nth-child(6){animation-delay:.75s}
.ig span:nth-child(7){animation-delay:.9s}.ig span:nth-child(8){animation-delay:1.05s}.ig span:nth-child(9){animation-delay:1.2s}
.ig span:nth-child(5){color:#0f62fe;border-color:#d0e2ff;background:#edf5ff}
@keyframes igPop{0%{opacity:0;transform:scale(.8)}12%,58%{opacity:1;transform:scale(1)}78%,100%{opacity:.35;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){.dls-fx *{animation:none!important}.ig span{opacity:1;transform:none}.im-c{opacity:1}}

/* ===== Storytelling hero animations ===== */
/* Introduction — foundations assemble into a product */
.dls-fx-intro .iw{position:relative;width:264px;height:230px}
.dls-fx-intro .iw-tok{position:absolute;display:grid;place-items:center;border-radius:0;font-weight:600;opacity:0}
.dls-fx-intro .t-color{width:46px;height:46px;left:8px;top:18px;background:#0f62fe}
.dls-fx-intro .t-type{width:46px;height:46px;left:110px;top:-2px;background:#fff;border:1px solid #e0e0e0;color:#002d9c;font-size:18px}
.dls-fx-intro .t-icon{width:46px;height:46px;right:8px;top:22px;background:#fff;border:1px solid #e0e0e0;color:#0f62fe}
.dls-fx-intro .t-icon svg{width:22px;height:22px}
.dls-fx-intro .iw-card{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) scale(.6);width:196px;height:118px;background:#fff;border:1px solid #e0e0e0;border-radius:0;box-shadow:0 18px 42px rgba(0,45,156,.14);opacity:0;padding:15px 16px}
.dls-fx-intro .iw-bar{display:block;width:64px;height:9px;border-radius:0;background:#0f62fe;opacity:0}
.dls-fx-intro .iw-line{display:block;height:7px;border-radius:0;background:#d0e2ff;margin-top:12px;opacity:0}
.dls-fx-intro .iw-line.l1{width:150px}.dls-fx-intro .iw-line.l2{width:108px}
.dls-fx-intro .iw-btn{position:absolute;left:16px;bottom:15px;width:82px;height:26px;border-radius:0;background:#002d9c;opacity:0}
@keyframes iwTok{0%{opacity:0;transform:translateY(12px) scale(.8)}10%,38%{opacity:1;transform:none}54%{opacity:0;transform:translateY(-8px) scale(.7)}100%{opacity:0}}
@keyframes iwCard{0%,38%{opacity:0;transform:translate(-50%,-50%) scale(.62)}55%,88%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.95)}}
@keyframes iwPart{0%,52%{opacity:0;transform:translateY(6px)}64%,88%{opacity:1;transform:none}100%{opacity:0}}
.dls-fx-intro .t-color{animation:iwTok 9s ease-in-out infinite}
.dls-fx-intro .t-type{animation:iwTok 9s ease-in-out .45s infinite}
.dls-fx-intro .t-icon{animation:iwTok 9s ease-in-out .9s infinite}
.dls-fx-intro .iw-card{animation:iwCard 9s ease-in-out infinite}
.dls-fx-intro .iw-bar{animation:iwPart 9s ease-in-out .05s infinite}
.dls-fx-intro .iw-line.l1{animation:iwPart 9s ease-in-out .2s infinite}
.dls-fx-intro .iw-line.l2{animation:iwPart 9s ease-in-out .35s infinite}
.dls-fx-intro .iw-btn{animation:iwPart 9s ease-in-out .5s infinite}
/* Iconography — icons drawing themselves in sequence */
.dls-fx-icon .idraw{position:relative;width:200px;height:210px;display:flex;flex-direction:column;align-items:center;gap:20px}
.dls-fx-icon .idraw-tile{position:relative;width:150px;height:150px;border-radius:0;background:#fff;border:1px solid #e0e0e0;box-shadow:0 18px 44px rgba(0,45,156,.10);display:grid;place-items:center}
.dls-fx-icon .idraw-tile::after{content:"";position:absolute;inset:0;border-radius:0;box-shadow:inset 0 0 0 2px rgba(15,98,254,.10)}
.dls-fx-icon .ic{position:absolute;width:76px;height:76px;color:#002d9c;opacity:0}
.dls-fx-icon .ic *{stroke-dasharray:1;stroke-dashoffset:1}
.dls-fx-icon .idraw-cap{width:96px;height:8px;border-radius:0;background:#d0e2ff;position:relative;overflow:hidden}
.dls-fx-icon .idraw-cap::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;border-radius:0;background:#0f62fe;animation:capSlide 12s linear infinite}
@keyframes capSlide{0%{left:-40%}100%{left:110%}}
@keyframes icShow{0%{opacity:0}3%{opacity:1}23%{opacity:1}28%{opacity:0}100%{opacity:0}}
@keyframes icDraw{0%{stroke-dashoffset:1}17%{stroke-dashoffset:0}24%{stroke-dashoffset:0}29%{stroke-dashoffset:1}100%{stroke-dashoffset:1}}
.dls-fx-icon .ic1{animation:icShow 12s ease-in-out infinite}.dls-fx-icon .ic1 *{animation:icDraw 12s ease-in-out infinite}
.dls-fx-icon .ic2{animation:icShow 12s ease-in-out 3s infinite}.dls-fx-icon .ic2 *{animation:icDraw 12s ease-in-out 3s infinite}
.dls-fx-icon .ic3{animation:icShow 12s ease-in-out 6s infinite}.dls-fx-icon .ic3 *{animation:icDraw 12s ease-in-out 6s infinite}
.dls-fx-icon .ic4{animation:icShow 12s ease-in-out 9s infinite}.dls-fx-icon .ic4 *{animation:icDraw 12s ease-in-out 9s infinite}
@media (prefers-reduced-motion:reduce){.dls-fx-intro *,.dls-fx-icon *{animation:none!important}.dls-fx-intro .iw-card,.dls-fx-intro .iw-bar,.dls-fx-intro .iw-line,.dls-fx-intro .iw-btn{opacity:1}.dls-fx-icon .ic1{opacity:1}.dls-fx-icon .ic1 *{stroke-dashoffset:0}}

/* ===== Hero motifs v3 — one animation per hero, inside the stage ===== */
.phero-stage .dls-fx{position:relative;top:auto;right:auto;left:auto;transform:none;width:100%;max-width:520px;height:auto;margin:0 auto;pointer-events:none}
.phero-stage{display:flex;align-items:center;justify-content:center}
@media (max-width:1120px){.phero-stage .dls-fx{display:none}}

/* Iconography — grid of icons drawing in, one by one */
.dls-fx-icon{display:flex;align-items:center;justify-content:center}
.dls-fx-icon .igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:400px}
.dls-fx-icon .igc{display:grid;place-items:center;width:100%;aspect-ratio:1/1;background:#fff;border:1px solid #e0e0e0;border-radius:0;box-shadow:0 14px 30px rgba(0,45,156,.09);opacity:0;transform:scale(.5);color:#002d9c}
.dls-fx-icon .igc svg{width:46px;height:46px}
.dls-fx-icon .igc svg *{stroke-dasharray:1;stroke-dashoffset:1}
@keyframes igReveal{0%{opacity:0;transform:scale(.5)}7%{opacity:1;transform:scale(1)}86%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.92)}}
@keyframes igDraw{0%{stroke-dashoffset:1}10%{stroke-dashoffset:0}90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.dls-fx-icon .igc{animation:igReveal 9s ease-in-out infinite}
.dls-fx-icon .igc svg *{animation:igDraw 9s ease-in-out infinite}
.dls-fx-icon .igc1,.dls-fx-icon .igc1 svg *{animation-delay:0s}
.dls-fx-icon .igc2,.dls-fx-icon .igc2 svg *{animation-delay:.3s}
.dls-fx-icon .igc3,.dls-fx-icon .igc3 svg *{animation-delay:.6s}
.dls-fx-icon .igc4,.dls-fx-icon .igc4 svg *{animation-delay:.9s}
.dls-fx-icon .igc5,.dls-fx-icon .igc5 svg *{animation-delay:1.2s}
.dls-fx-icon .igc6,.dls-fx-icon .igc6 svg *{animation-delay:1.5s}
.dls-fx-icon .igc7,.dls-fx-icon .igc7 svg *{animation-delay:1.8s}
.dls-fx-icon .igc8,.dls-fx-icon .igc8 svg *{animation-delay:2.1s}
.dls-fx-icon .igc9,.dls-fx-icon .igc9 svg *{animation-delay:2.4s}

/* Intro + Whitepaper — a card that builds itself, then floats (newsletter-hero style) */
.dls-fx-intro,.dls-fx-wp{display:flex;align-items:center;justify-content:center}
.bcard{position:relative;background:#fff;border:1px solid #e0e0e0;border-radius:0;box-shadow:0 22px 50px rgba(0,45,156,.15);animation:bcFloat 6s ease-in-out infinite}
.bcard-intro{width:380px;padding:28px}
.bcard-intro .bc-top{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.bcard-intro .bc-dot{width:30px;height:30px;border-radius:0;background:#0f62fe;display:block}
.bcard-intro .bc-bar{height:13px;width:150px;border-radius:0;background:#d0e2ff;display:block}
.bcard .bc-line{display:block;height:12px;border-radius:0;background:#d0e2ff;margin:17px 0}
.bcard-intro .bc-line.l1{width:100%}.bcard-intro .bc-line.l2{width:86%}.bcard-intro .bc-line.l3{width:70%}
.bcard-intro .bc-btn{display:block;margin-top:26px;width:158px;height:44px;border-radius:0;background:#002d9c}
.bcard-wp{width:320px;padding:0 0 28px;overflow:hidden}
.bcard-wp .bc-cover{display:block;background:#001141;padding:32px 28px 36px;margin-bottom:22px}
.bcard-wp .bc-wpk{display:block;width:82px;height:10px;border-radius:0;background:rgba(255,255,255,.55);margin-bottom:18px}
.bcard-wp .bc-title{display:block;width:200px;height:16px;border-radius:0;background:#fff;margin-bottom:10px}
.bcard-wp .bc-title.s{width:140px}
.bcard-wp .bc-body{display:block;padding:0 28px}
.bcard-wp .bc-line{margin:14px 0}
.bcard-wp .bc-line.l1{width:100%}.bcard-wp .bc-line.l2{width:92%}.bcard-wp .bc-line.l3{width:80%}.bcard-wp .bc-line.l4{width:96%}.bcard-wp .bc-line.l5{width:70%}
.bcard-wp .bc-stat{display:block;width:98px;height:40px;border-radius:0;background:#0f62fe;margin:22px 0}
.bcard .bc-top,.bcard .bc-line,.bcard .bc-btn,.bcard .bc-cover,.bcard .bc-stat{opacity:0}
@keyframes bcIn{0%{opacity:0;transform:translateY(10px)}9%{opacity:1;transform:none}88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes bcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bcPulse{0%,100%{box-shadow:0 0 0 0 rgba(15,98,254,.4)}50%{box-shadow:0 0 0 9px rgba(15,98,254,0)}}
.bcard-intro .bc-top{animation:bcIn 8s ease-in-out infinite .1s}
.bcard-intro .bc-line.l1{animation:bcIn 8s ease-in-out infinite .3s}
.bcard-intro .bc-line.l2{animation:bcIn 8s ease-in-out infinite .45s}
.bcard-intro .bc-line.l3{animation:bcIn 8s ease-in-out infinite .6s}
.bcard-intro .bc-btn{animation:bcIn 8s ease-in-out infinite .8s,bcPulse 2.4s ease-in-out infinite 1s}
.bcard-wp .bc-cover{animation:bcIn 8s ease-in-out infinite .1s}
.bcard-wp .bc-line.l1{animation:bcIn 8s ease-in-out infinite .35s}
.bcard-wp .bc-line.l2{animation:bcIn 8s ease-in-out infinite .5s}
.bcard-wp .bc-line.l3{animation:bcIn 8s ease-in-out infinite .65s}
.bcard-wp .bc-stat{animation:bcIn 8s ease-in-out infinite .8s}
.bcard-wp .bc-line.l4{animation:bcIn 8s ease-in-out infinite .95s}
.bcard-wp .bc-line.l5{animation:bcIn 8s ease-in-out infinite 1.1s}
@media (prefers-reduced-motion:reduce){.dls-fx-icon .igc,.bcard .bc-top,.bcard .bc-line,.bcard .bc-btn,.bcard .bc-cover,.bcard .bc-stat{opacity:1!important;transform:none!important}.dls-fx-icon .igc svg *{stroke-dashoffset:0!important}.bcard{animation:none!important}}

/* ===== Remove frosted-glass panel behind hero motifs ===== */
.phero-stage .dls-fx{box-shadow:none!important;border-radius:0;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* ===== Colour hero — clean solid swatches (no glassmorphism) ===== */
.dls-fx-colour{display:flex;align-items:center;justify-content:center}
.dls-fx-colour .cpal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;width:380px}
.dls-fx-colour .cp{display:block;width:100%;aspect-ratio:1/1;border-radius:0;box-shadow:0 14px 30px rgba(0,45,156,.10);opacity:0;transform:scale(.6);animation:igReveal 9s ease-in-out infinite}
.dls-fx-colour .cp5{border:1px solid #d0e2ff}
.dls-fx-colour .cp1{animation-delay:0s}.dls-fx-colour .cp2{animation-delay:.25s}.dls-fx-colour .cp3{animation-delay:.5s}.dls-fx-colour .cp4{animation-delay:.75s}.dls-fx-colour .cp5{animation-delay:1s}.dls-fx-colour .cp6{animation-delay:1.25s}
@media (prefers-reduced-motion:reduce){.dls-fx-colour .cp{opacity:1!important;transform:none!important;animation:none!important}}

/* ==========================================================================
   Application shell — clean SaaS dashboard navigation + home
   Inspired by the supplied reference, adapted to Ollily's content and brand.
   ========================================================================== */
:root{
  --sf-sidebar-width:308px;
  --sf-topbar-height:72px;
  --sf-ui-ink:#001d6c;
  --sf-ui-text:#0043ce;
  --sf-ui-muted:#6f6f6f;
  --sf-ui-line:var(--sf-c-line);
  --sf-ui-soft:var(--sf-c-soft);
  --sf-ui-accent:var(--sf-c-brand);
  --sf-ui-accent-soft:#edf5ff;
}

.shell,.shell.wide{
  display:grid;
  grid-template-columns:var(--sf-sidebar-width) minmax(0,1fr);
  grid-template-rows:var(--sf-topbar-height) minmax(calc(100vh - var(--sf-topbar-height)),auto);
  align-items:stretch;
  min-height:100vh;
  background:#fff;
}
.shell > .navpanel.sf-sidebar{
  grid-column:1;
  grid-row:1 / -1;
}
.shell > .sf-topbar{
  grid-column:2;
  grid-row:1;
}
.shell > .content{
  grid-column:2;
  grid-row:2;
}

/* Sidebar — Carbon g100 chrome over the light canvas. See --sf-nav-* in
   design-system/base.css; every colour below comes from there. */
.navpanel.zdark.sf-sidebar{
  position:sticky;
  inset:auto;
  top:0;
  width:auto;
  height:100vh;
  min-height:0;
  z-index:60;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding:0 12px 74px;
  background:var(--sf-nav-bg);
  border:0;
  border-right:1px solid var(--sf-nav-line);
  border-radius:0;
  box-shadow:none;
  color:var(--sf-nav-text);
  color-scheme:dark;                 /* native scrollbars follow the chrome */
  scrollbar-width:thin;
  scrollbar-color:var(--sf-nav-line-strong) transparent;
}
.sf-sidebar .np-top{
  position:sticky;
  top:0;
  z-index:3;
  height:72px;
  flex:0 0 72px;
  display:flex;
  align-items:center;
  padding:9px 0;
  background:var(--sf-nav-bg);
  border-bottom:1px solid var(--sf-nav-line);
}
.sf-workspace{
  width:100%;
  min-width:0;
  height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:0;
  background:var(--sf-nav-layer);
  color:var(--sf-nav-ink);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.sf-workspace:hover{
  background:var(--sf-nav-hover);
  border-color:var(--sf-nav-line);
  box-shadow:none;
}
.sf-workspace:focus-visible{
  outline:2px solid var(--sf-nav-focus);
  outline-offset:-2px;
}
.sf-workspace-mark,.sf-home-mark{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,45,156,.05);
}
/* The mark keeps its light plate: it carries the full-colour product icon,
   which has no dark-surface variant. A 30px plate reads as the logo lockup
   rather than as a light patch. */
.sf-sidebar .sf-workspace-mark{
  background:var(--sf-nav-ink);
  box-shadow:none;
}
.sf-workspace-mark{
  width:34px;
  height:34px;
  border-radius:0;
}
.sf-workspace-mark img{width:20px;height:20px;object-fit:contain}
.sf-workspace-name{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  font-weight:600;
}
.sf-workspace-switch{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:var(--sf-nav-text);
  transform:rotate(90deg);
}
.sf-workspace-switch svg{width:15px;height:15px}
.sf-quick-icon svg circle[fill]{
  fill:currentColor;
  stroke:none;
}

.sf-sidebar-tools{
  flex:0 0 auto;
  padding:20px 6px 8px;
}
.sf-nav-search{
  height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 10px;
  color:var(--sf-nav-text);
  background:var(--sf-nav-layer);
  border:1px solid transparent;
  /* Carbon fields carry a single strong bottom rule, not a full box */
  border-bottom-color:var(--sf-nav-line-strong);
  border-radius:0;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.sf-nav-search:hover{background:var(--sf-nav-hover)}
.sf-nav-search:focus-within{
  border-color:transparent;
  box-shadow:inset 0 0 0 2px var(--sf-nav-focus);
}
.sf-nav-search>svg{width:18px;height:18px;flex:0 0 auto}
.sf-nav-search input{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  padding:0;
  background:transparent;
  color:var(--sf-nav-ink);
  font:inherit;
  font-size:14px;
}
.sf-nav-search input::placeholder{color:var(--sf-nav-muted)}
.sf-nav-search kbd{
  flex:0 0 auto;
  padding:2px 5px;
  border:1px solid var(--sf-nav-line);
  border-radius:0;
  background:var(--sf-nav-bg);
  color:var(--sf-nav-muted);
  font-family:var(--font-sans);
  font-size:12px;
  line-height:16px;
}
.sf-new-button{
  height:46px;
  display:grid;
  grid-template-columns:20px 1fr 20px;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:0 14px;
  background:var(--sf-nav-brand);
  border:1px solid var(--sf-nav-brand);
  border-radius:0;
  color:var(--sf-nav-on-brand);
  font-size:14px;
  font-weight:600;
  box-shadow:none;
  transition:background .16s ease,transform .16s ease;
}
.sf-new-button:hover{background:var(--sf-nav-brand-hover);border-color:var(--sf-nav-brand-hover)}
.sf-new-button:active{transform:translateY(1px)}
.sf-new-button svg{width:19px;height:19px}
.sf-new-button svg:last-child{
  width:15px;
  height:15px;
  justify-self:end;
  transform:rotate(90deg);
}
.sf-no-results{
  display:none;
  padding:22px 8px 8px;
  color:var(--sf-nav-muted);
  font-size:12px;
  text-align:center;
}
.sf-sidebar.sf-search-empty .sf-no-results{display:block}

.sf-sidebar .np-title{
  flex:0 0 auto;
  padding:16px 16px 5px;
  color:var(--sf-nav-muted);
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  line-height:18px;
  text-transform:none;
}
.sf-sidebar .np-div{display:none}
.sf-sidebar .np-glabel{
  padding:18px 16px 6px;
  color:var(--sf-nav-muted);
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  line-height:18px;
  text-transform:none;
}
.sf-sidebar .np-row{
  min-height:40px;
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:10px;
  margin:1px 4px;
  padding:8px 12px;
  overflow:visible;
  border-radius:0;
  color:var(--sf-nav-text);
  font-size:14px;
  font-weight:600;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.sf-sidebar .np-row .ic{
  color:var(--sf-nav-muted);
}
.sf-sidebar .np-row .ic svg{
  width:18px;
  height:18px;
  stroke-width:1.8;
}
.sf-sidebar .np-row:hover{
  color:var(--sf-nav-ink);
  background:var(--sf-nav-hover);
}
.sf-sidebar .np-row.active{
  color:var(--sf-nav-ink);
  background:var(--sf-nav-selected);
  box-shadow:inset 3px 0 0 var(--sf-nav-accent);
}
.sf-sidebar .np-row.active .ic{color:var(--sf-nav-accent)}
.sf-sidebar .np-secs{
  margin-left:24px;
  padding-left:12px;
}
.sf-sidebar .np-secs:before{background:var(--sf-nav-line)}
.sf-sidebar .np-sec{color:var(--sf-nav-muted)}
.sf-sidebar .np-sec:hover{color:var(--sf-nav-ink);background:var(--sf-nav-hover)}
.sf-sidebar .np-sec.on{color:var(--sf-nav-ink);background:var(--sf-nav-selected)}

.sf-nav-footer{
  position:fixed;
  bottom:0;
  left:0;
  z-index:4;
  width:var(--sf-sidebar-width);
  padding:10px 16px;
  background:var(--sf-nav-bg);
  border-top:1px solid var(--sf-nav-line);
}
.sf-nav-footer a{
  height:42px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 12px;
  border-radius:0;
  color:var(--sf-nav-link);
  font-size:14px;
  font-weight:600;
}
.sf-nav-footer a:hover{background:var(--sf-nav-hover);color:var(--sf-nav-ink)}
.sf-nav-footer svg{width:19px;height:19px;color:var(--sf-nav-text)}

/* Utility top bar */
.sf-topbar{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--sf-topbar-height);
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 28px;
  background:var(--sf-top-bg);
  color:var(--sf-top-text);
  border-bottom:1px solid var(--sf-top-line);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.sf-topbar-context{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--sf-top-text);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.sf-context-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--sf-top-brand);
  box-shadow:0 0 0 4px var(--sf-top-layer);
}
.sf-topnav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.sf-topnav a{
  padding:8px 11px;
  border-radius:0;
  color:var(--sf-top-text);
  font-size:12px;
  font-weight:600;
  transition:color .15s ease,background .15s ease;
}
.sf-topnav a:hover{
  color:var(--sf-top-ink);
  background:var(--sf-top-hover);
}
.sf-topnav a.active{
  color:var(--sf-top-ink);
  background:var(--sf-top-selected);
  box-shadow:inset 0 -2px 0 var(--sf-top-brand);
}
.sf-top-actions{
  display:flex;
  align-items:center;
  gap:7px;
}
.sf-top-icon{
  position:relative;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--sf-top-text);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.sf-top-icon:hover{background:var(--sf-top-hover);color:var(--sf-top-ink)}
.sf-top-icon:active{background:var(--sf-top-pressed);color:var(--sf-top-ink)}
.sf-top-icon svg{width:19px;height:19px}
/* ==========================================================================
   THE NOTIFICATION CENTRE — §13

   Replaces `.sf-alert-dot`, which was a permanent marker over a button that
   did nothing: every workspace saw an unread dot for ever. A badge that is
   always on teaches people the signal means nothing.
   ========================================================================== */
.sf-bell-wrap{position:relative}
.sf-bell{position:relative}
/* Tabular figures so 9 → 10 does not shift the glyph inside the pill. */
.sf-bell-n{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--sf-c-danger,#da1e28);color:#fff;font-size:10.5px;
  font-weight:600;line-height:16px;text-align:center;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px var(--sf-c-surface,#fff)}

.sf-bell-menu{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-width:92vw;
  background:var(--sf-c-surface,#fff);border:1px solid var(--sf-c-line,#e0e0e0);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.14);z-index:60;
  display:none;overflow:hidden}
.sf-bell-menu.is-open{display:block}
.sf-bell-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-bottom:1px solid var(--sf-c-line-soft,#f0f0f0)}
.sf-bell-head strong{font-size:14px}
.sf-bell-all{border:0;background:none;padding:0;font-size:12.5px;font-weight:500;
  color:var(--sf-c-accent,#2563eb);cursor:pointer}
.sf-bell-all:hover{text-decoration:underline}

.sf-bell-filters{display:flex;gap:6px;padding:10px 15px;
  border-bottom:1px solid var(--sf-c-line-soft,#f0f0f0);overflow-x:auto}
.sf-bell-f{flex:none;border:1px solid var(--sf-c-line,#e0e0e0);background:none;
  border-radius:20px;padding:3px 11px;font-size:12px;cursor:pointer;
  color:var(--sf-c-muted,#6f6f6f)}
.sf-bell-f.is-on{background:var(--sf-c-ink,#161616);border-color:var(--sf-c-ink,#161616);color:#fff}

/* The list scrolls; the header, filters and footer do not — so "Mark all as
   read" stays reachable however long the list is. */
.sf-bell-list{max-height:min(60vh,420px);overflow-y:auto}
.sf-bell-row{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;
  border-bottom:1px solid var(--sf-c-line-soft,#f0f0f0);text-decoration:none;
  color:inherit;position:relative}
a.sf-bell-row:hover{background:var(--sf-c-hover,#f4f4f4)}
/* ⚠ Unread is a left rule and weight, not colour alone — the two states must
   be distinguishable without seeing hue. */
.sf-bell-row.is-unread{background:var(--sf-c-accent-soft,#eff4ff)}
.sf-bell-row.is-unread .sf-bell-t{font-weight:600}
.sf-bell-row.is-unread::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--sf-c-accent,#2563eb)}
.sf-bell-ic{flex:none;margin-top:1px;color:var(--sf-c-muted,#6f6f6f)}
.sf-bell-ic > svg{width:16px;height:16px}
.sf-bell-row.is-critical .sf-bell-ic{color:var(--sf-c-danger,#da1e28)}
.sf-bell-row.is-warning .sf-bell-ic{color:var(--sf-c-warn-line)}
.sf-bell-row.is-success .sf-bell-ic{color:var(--sf-c-ok,#24a148)}
.sf-bell-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sf-bell-t{font-size:13.5px;line-height:1.4}
.sf-bell-b{font-size:12.5px;color:var(--sf-c-muted,#6f6f6f);line-height:1.45}
.sf-bell-m{font-size:11.5px;color:var(--sf-c-muted,#6f6f6f)}
/* A 20px target for a 9px dot — the affordance is bigger than the mark. */
.sf-bell-dot{flex:none;width:20px;height:20px;border:0;background:none;cursor:pointer;
  border-radius:50%;position:relative}
.sf-bell-dot::after{content:"";position:absolute;inset:6px;border-radius:50%;
  border:1.5px solid var(--sf-c-line,#e0e0e0)}
.sf-bell-row.is-unread .sf-bell-dot::after{background:var(--sf-c-accent,#2563eb);
  border-color:var(--sf-c-accent,#2563eb)}
.sf-bell-dot:hover::after{border-color:var(--sf-c-accent,#2563eb)}

.sf-bell-none{margin:0;padding:26px 18px;text-align:center;font-size:13px;
  color:var(--sf-c-muted,#6f6f6f);line-height:1.55}
.sf-bell-foot{padding:11px 15px;border-top:1px solid var(--sf-c-line-soft,#f0f0f0)}
.sf-bell-foot a{font-size:12.5px;color:var(--sf-c-accent,#2563eb);text-decoration:none}
.sf-bell-foot a:hover{text-decoration:underline}

@media (max-width:640px){
  .sf-bell-menu{position:fixed;top:56px;left:8px;right:8px;width:auto;max-width:none}
}
.sf-avatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  margin-left:3px;
  border:2px solid var(--sf-top-bg);
  border-radius:50%;
  outline:1px solid var(--sf-top-line-strong);
  background:var(--sf-top-brand);
  color:var(--sf-top-on-brand);
  font-size:12px;
  font-weight:600;
}

/* Focused home */
.content.index.sf-dashboard-home{
  width:100%;
  min-width:0;
  min-height:calc(100vh - var(--sf-topbar-height));
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(72px,9vh,118px) 36px 72px;
  overflow:hidden;
  background:#fff;
  border:0;
  border-radius:0;
  box-shadow:none;
  counter-reset:none;
}
.sf-home-welcome{
  width:min(740px,100%);
  margin:0 auto;
  text-align:center;
  opacity:0;
  transform:translateY(12px);
  animation:sfHomeIn .45s ease-out .08s forwards;
}
@keyframes sfHomeIn{to{opacity:1;transform:none}}
.sf-home-brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:#002d9c;
  font-size:14px;
  font-weight:600;
}
.sf-home-mark{
  width:38px;
  height:38px;
  border-radius:50%;
}
.sf-home-mark img{width:22px;height:22px;object-fit:contain}
.sf-home-welcome h1{
  margin:24px 0 0;
  color:var(--sf-ui-ink);
  font-family:var(--font-sans);
  font-size:clamp(30px,3vw,40px);
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.18;
}
.sf-home-lede{
  margin:12px 0 0;
  color:var(--sf-c-muted);
  font-size:16px;
  line-height:1.55;
}
.sf-quick-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:38px;
  text-align:left;
}
.sf-quick-card{
  min-height:86px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 52px;
  align-items:center;
  gap:14px;
  padding:14px 14px 14px 18px;
  background:#fff;
  border:1px solid #d0e2ff;
  border-radius:0;
  color:var(--sf-ui-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.035);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.sf-quick-card:hover{
  border-color:#d0e2ff;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.28);
  transform:translateY(-1px);
}
.sf-quick-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:#6f6f6f;
}
.sf-quick-icon svg{width:25px;height:25px}
.sf-quick-copy{min-width:0}
.sf-quick-copy strong{
  display:block;
  color:#002d9c;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
}
.sf-quick-copy small{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--sf-c-muted);
  font-size:12px;
  font-weight:400;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sf-quick-arrow{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  justify-self:end;
  border-radius:0;
  background:#f4f4f4;
  color:var(--sf-c-muted);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.sf-quick-arrow svg{width:25px;height:25px}
.sf-quick-card:hover .sf-quick-arrow{
  color:var(--sf-ui-accent);
  background:var(--sf-ui-accent-soft);
  transform:translateX(2px);
}
/* Dark mode restyles the canvas only. The navigation is already dark in both
   themes and owns its own colours — the sidebar, top bar, workspace, search,
   rows and alert dot used to be re-tinted navy here, which fought the chrome
   theme rather than adding to it. */


@media (max-width:1120px){
  :root{--sf-sidebar-width:280px}
  .sf-topnav a{padding-inline:8px}
  .sf-topbar-context span:last-child{display:none}
}
@media (max-width:900px){
  .shell,.shell.wide{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:64px auto;
  }
  .shell > .sf-topbar{grid-column:1;grid-row:1}
  .shell > .content{grid-column:1;grid-row:2}
  .navpanel.zdark.sf-sidebar{
    position:fixed;
    top:10px;
    left:10px;
    bottom:10px;
    width:min(308px,calc(100vw - 20px));
    height:auto;
    border:1px solid var(--sf-nav-line);
    border-radius:0;
    box-shadow:0 24px 64px -24px rgba(0,0,0,.7);
    transform:translateX(-115%);
    transition:transform var(--sf-nav-dur,.18s) cubic-bezier(.32,.72,0,1);
  }
  .navpanel.zdark.sf-sidebar.open{transform:none}
  .sf-nav-footer{
    left:10px;
    bottom:10px;
    width:min(308px,calc(100vw - 20px));
    border-radius:0;
  }
  .sf-topbar{
    height:64px;
    padding:0 14px 0 66px;
  }
  .sf-topbar-context{display:none}
  .sf-topnav{justify-content:flex-start;overflow-x:auto}
  .sf-topnav a{font-size:12px;white-space:nowrap}
  .sf-top-actions{margin-left:auto}
  .sf-top-actions .sf-focus-search{display:none}
  .mnav-btn{
    display:grid;
    place-items:center;
    position:fixed;
    z-index:80;
    left:14px;
    top:12px;
    bottom:auto;
    width:40px;
    height:40px;
    border:1px solid #e0e0e0;
    border-radius:0;
    background:#fff;
    color:#0043ce;
    box-shadow:0 1px 3px rgba(0,0,0,.10);
  }
  .content.index.sf-dashboard-home{
    min-height:calc(100vh - 64px);
    padding:64px 22px 56px;
  }
}
@media (max-width:640px){
  html,body{max-width:100%;overflow-x:hidden}
  .sf-topnav a:not(:first-child){display:none}
  .sf-top-actions .sf-top-icon{display:none}
  .content.index.sf-dashboard-home{
    width:100vw;
    max-width:100vw;
    padding-inline:18px;
  }
  .sf-home-welcome{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .sf-home-brand{
    max-width:100%;
    font-size:12px;
  }
  .sf-home-brand>span:last-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .sf-home-welcome h1{
    max-width:100%;
    font-size:28px;
    overflow-wrap:anywhere;
  }
  .sf-home-lede{font-size:14px}
  .sf-quick-list{margin-top:30px}
  .sf-quick-card{
    width:100%;
    max-width:100%;
    min-height:78px;
    grid-template-columns:32px minmax(0,1fr) 42px;
    gap:10px;
    padding:12px;
  }
  .sf-quick-icon{width:32px;height:32px}
  .sf-quick-icon svg{width:22px;height:22px}
  .sf-quick-copy small{
    max-width:44vw;
    font-size:12px;
  }
  .sf-quick-arrow{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .sf-home-welcome{opacity:1;transform:none;animation:none}
}

/* ===== Focused home — maroon canvas =====================================
   Overrides the light dashboard treatment. Appended last so it wins on
   specificity without editing the rules above; delete this block to revert. */
.content.index.sf-dashboard-home{
  background:#001d6c;
  color:#edf5ff;
}
.sf-dashboard-home .sf-home-brand{color:rgba(247,237,242,.72)}
.sf-dashboard-home .sf-home-mark{
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.sf-dashboard-home .sf-home-welcome h1{color:#ffffff}
.sf-dashboard-home .sf-home-lede{color:rgba(247,237,242,.66)}

/* cards read as translucent surfaces lifted off the maroon */
.sf-dashboard-home .sf-quick-card{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.13);
  color:#edf5ff;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.sf-dashboard-home .sf-quick-card:hover{
  background:rgba(255,255,255,.095);
  border-color:rgba(15,98,254,.55);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.65);
}
.sf-dashboard-home .sf-quick-icon{color:#a6c8ff}
.sf-dashboard-home .sf-quick-copy strong{color:#ffffff}
.sf-dashboard-home .sf-quick-copy small{color:rgba(247,237,242,.58)}
.sf-dashboard-home .sf-quick-arrow{
  background:rgba(255,255,255,.07);
  color:rgba(247,237,242,.72);
}
.sf-dashboard-home .sf-quick-card:hover .sf-quick-arrow{
  background:var(--magenta,#0f62fe);
  color:#ffffff;
}
/* dark mode already runs dark — keep the maroon rather than the near-black */


@media (max-width:720px){
  .content.index.sf-dashboard-home{
    background:#001d6c;
  }
}

/* ===== Product navigation ==============================================
   Persistent app nav in the sidebar + profile menu in the topbar. */
.sf-productnav{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:4px 12px 14px;
  border-bottom:1px solid var(--sf-ui-line,#e0e0e0);
  margin-bottom:6px;
}
.sf-create-wrap{position:relative;margin-bottom:10px}
.sf-create{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:0;
  border-radius:0;
  /* primary action: brand blue, with white text at 4.6:1 */
  background:var(--sf-nav-brand);
  color:var(--sf-nav-on-brand);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .16s ease,box-shadow .16s ease;
}
.sf-create:hover{background:var(--sf-nav-brand-hover);box-shadow:none}
.sf-create:active{background:var(--sf-nav-brand-active)}
.sf-create:focus-visible{
  outline:2px solid var(--sf-nav-focus);
  outline-offset:-4px;
}
.sf-create svg{width:17px;height:17px;flex:none}
.sf-create>span:first-of-type{flex:1;text-align:left}
.sf-create-caret{display:flex;opacity:.7}
.sf-create-caret svg{width:14px;height:14px}
/* Portaled to <body>: the sidebar scrolls and clips, so a menu anchored
   inside it can only ever be as tall and as wide as the nav. Fixed position
   with coordinates set by the shell, above the chrome but below dialogs. */
.sf-create-menu{
  position:fixed;
  top:0;
  left:0;
  right:auto;
  width:264px;
  max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);
  overflow-y:auto;
  z-index:200;
  display:none;
  flex-direction:column;
  padding:6px;
  background:var(--sf-nav-layer);
  border:1px solid var(--sf-nav-line);
  border-radius:0;
  box-shadow:var(--sf-nav-shadow);
  color-scheme:dark;
}
.sf-create-menu.open{display:flex}
.sf-create-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:0;
  color:var(--sf-nav-ink);
  text-decoration:none;
}
.sf-create-menu a:hover{background:var(--sf-nav-hover)}
.sf-create-menu a:focus-visible{outline:2px solid var(--sf-nav-focus);outline-offset:-2px}
.sf-create-menu strong{display:block;font-size:12px;font-weight:600;line-height:1.3}
.sf-create-menu small{display:block;margin-top:1px;color:var(--sf-nav-muted);font-size:12px;line-height:1.35}
.sf-pn-row{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:36px;
  padding:0 10px;
  border-radius:0;
  color:var(--sf-nav-text);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background .14s ease,color .14s ease;
}
.sf-pn-row:hover{background:var(--sf-nav-hover);color:var(--sf-nav-ink)}
.sf-pn-row.active{background:var(--sf-nav-selected);color:var(--sf-nav-ink);font-weight:600}
.sf-pn-row.active .sf-pn-ic{color:var(--sf-nav-accent)}
.sf-pn-ic{display:flex;flex:none;color:var(--sf-nav-muted)}
.sf-pn-ic svg{width:18px;height:18px}
.sf-pn-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-pn-row.is-soon{color:var(--sf-nav-disabled);cursor:default}
.sf-pn-row.is-soon:hover{background:transparent;color:var(--sf-nav-disabled)}
.sf-pn-row.is-soon .sf-pn-ic{color:var(--sf-nav-disabled)}
.sf-pn-soon{
  flex:none;
  padding:1px 7px;
  border:1px solid var(--sf-nav-line);
  border-radius:0;
  color:var(--sf-nav-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
}
.sf-pn-group{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.sf-pn-head{
  padding:0 10px 4px;
  color:var(--sf-nav-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
/* profile menu, top-right of the topbar */
.sf-profile-wrap{position:relative;display:flex}
button.sf-avatar{border:0;cursor:pointer;font-family:inherit}
.sf-avatar.lg{width:38px;height:38px;font-size:14px;flex:none}
/* The profile dropdown was replaced by the account menu (.sf-acct), which is
   portaled to <body>; the rules that styled the old in-bar panel are gone. */
/* The navigation chrome is dark by design — that is its own palette under
   --sf-nav-*, not a theme. It is unaffected by D-36, which removed the page
   theme rather than any particular colour. */

@media (max-width:720px){
  .sf-productnav{padding:4px 10px 12px}
}

/* ===== Topbar design-system menus =====================================
   SUPERSEDED by the "APP CHROME v2" block at the end of this file: the docs
   groups moved back into the sidebar as sections, so dw-init no longer emits
   any .sf-tn-* markup. Kept only so an older cached dw-init.js still renders. */
.sf-topnav{display:flex;align-items:center;gap:2px}
.sf-tn-item{position:relative;display:flex}
.sf-tn-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:32px;
  padding:0 10px;
  border:0;
  border-radius:0;
  background:none;
  color:var(--sf-top-text);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:background .14s ease,color .14s ease;
}
.sf-tn-btn:hover{background:var(--sf-top-hover);color:var(--sf-top-ink)}
.sf-tn-btn.active{color:var(--sf-top-ink);font-weight:600}
.sf-tn-caret{display:flex;opacity:.55}
.sf-tn-caret svg{width:13px;height:13px}
.sf-tn-link{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 10px;
  border-radius:0;
  color:var(--sf-top-text);
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.sf-tn-link:hover{background:var(--sf-top-hover);color:var(--sf-top-ink)}
.sf-tn-menu{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  z-index:70;
  display:none;
  flex-direction:column;
  min-width:214px;
  padding:6px;
  background:var(--sf-top-layer);
  border:1px solid var(--sf-top-line);
  border-radius:0;
  box-shadow:var(--sf-top-shadow);
}
.sf-tn-menu.open{display:flex}
.sf-tn-menu a{
  display:block;
  padding:8px 10px;
  border-radius:0;
  color:var(--sf-top-ink);
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.sf-tn-menu a:hover{background:var(--sf-top-hover)}
/* the product nav now owns the sidebar outright */
.sf-productnav{border-bottom:0;margin-bottom:0;padding-bottom:8px}
@media (max-width:980px){
  /* never hide these: with the sidebar now product-only, this is the sole
     route to the design-system pages. Let the row scroll instead. */
  .sf-topnav{
    overflow-x:auto;
    scrollbar-width:none;
    max-width:min(52vw,520px);
  }
  .sf-topnav::-webkit-scrollbar{display:none}
  .sf-tn-btn,.sf-tn-link{padding:0 8px;font-size:12px}
}

/* ==========================================================================
   HOME — premium, beehiiv-inspired shell (scoped to the "/" route only)
   Activated by <html class="sf-home-shell">, which dw-init sets on the home
   route. Layered last so it wins over the base + maroon-canvas treatments
   without editing them. To revert: delete this block and the class-add in
   dw-init's applyAll(). Brand stays as accent (magenta / maroon / blush) over
   a clean, light canvas — matching the reference rather than flooding maroon.
   ========================================================================== */
html.sf-home-shell{
  --sf-sidebar-width:288px;
  --sf-topbar-height:64px;
  --sf-brand:var(--sf-c-brand);
  --sf-brand-2:var(--sf-c-brand-2);
  --sf-maroon:var(--sf-c-maroon);
  --sf-blush:var(--sf-c-blush);
  --sf-ease:cubic-bezier(.4,0,.2,1);
}

/* ---- Canvas: light, brand only as a faint wash from the top -------------- */
html.sf-home-shell .content.index.sf-dashboard-home{
  background:#f4f4f4;
  color:var(--sf-ui-ink);
  padding:clamp(52px,7.5vh,100px) 40px 96px;
}

/* ---- Welcome hero -------------------------------------------------------- */
html.sf-home-shell .sf-home-welcome{
  width:100%;
  max-width:604px;
  margin:0 auto;
  text-align:center;
}
html.sf-home-shell .sf-home-brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:20px;
  color:#6f6f6f;
  font-size:14px;
  font-weight:600;
}
html.sf-home-shell .sf-home-mark{
  width:26px;height:26px;border-radius:0;
  background:#d0e2ff;
  box-shadow:0 2px 6px -1px rgba(15,98,254,.4),inset 0 0 0 1px rgba(0,45,156,.06);
}
html.sf-home-shell .sf-home-mark img{width:16px;height:16px}
html.sf-home-shell .sf-home-welcome h1{
  margin:0 0 10px;
  font-size:clamp(26px,3.4vw,33px);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.022em;
  color:#161616;
}
html.sf-home-shell .sf-home-lede{
  margin:0;
  font-size:14px;
  line-height:1.55;
  color:#6f6f6f;
}

/* ---- Onboarding cards ---------------------------------------------------- */
html.sf-home-shell .sf-quick-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:34px;
  text-align:left;
}
html.sf-home-shell .sf-quick-card{
  display:flex;
  align-items:center;
  gap:16px;
  box-sizing:border-box;
  width:100%;
  padding:17px 18px 17px 19px;
  background:#fff;
  border:1px solid #edf5ff;
  border-radius:0;
  color:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .2s var(--sf-ease),border-color .2s var(--sf-ease),box-shadow .2s var(--sf-ease);
}
html.sf-home-shell .sf-quick-card:hover{
  transform:translateY(-2px);
  border-color:#d0e2ff;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.04);
}
html.sf-home-shell .sf-quick-card:focus-visible{
  outline:none;
  border-color:var(--sf-brand);
  box-shadow:0 0 0 3px rgba(15,98,254,.16);
}
html.sf-home-shell .sf-quick-icon{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  border-radius:0;
  background:#edf5ff;
  color:#525252;
  transition:background .2s var(--sf-ease),color .2s var(--sf-ease),transform .2s var(--sf-ease);
}
html.sf-home-shell .sf-quick-icon svg{width:22px;height:22px}
html.sf-home-shell .sf-quick-card:hover .sf-quick-icon{
  background:var(--sf-blush);
  color:var(--sf-brand);
  transform:scale(1.04);
}
html.sf-home-shell .sf-quick-copy{min-width:0;flex:1}
html.sf-home-shell .sf-quick-copy strong{
  display:block;
  font-size:14px;
  font-weight:600;
  color:#161616;
  letter-spacing:-.005em;
}
html.sf-home-shell .sf-quick-copy small{
  display:block;
  margin-top:3px;
  font-size:12px;
  line-height:1.45;
  color:var(--sf-c-muted);
}
html.sf-home-shell .sf-quick-arrow{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border-radius:0;
  background:#f4f4f4;
  color:var(--sf-c-muted);
  transition:background .2s var(--sf-ease),color .2s var(--sf-ease),transform .2s var(--sf-ease);
}
html.sf-home-shell .sf-quick-arrow svg{width:19px;height:19px}
html.sf-home-shell .sf-quick-card:hover .sf-quick-arrow{
  background:var(--sf-brand);
  color:#fff;
  transform:translateX(3px);
}

/* ---- Sidebar: workspace + create ----------------------------------------- */
html.sf-home-shell .navpanel.sf-sidebar{padding:0 12px 78px}
html.sf-home-shell .sf-sidebar-tools{padding:18px 6px 6px}
html.sf-home-shell .sf-workspace{border-radius:0}
html.sf-home-shell .sf-nav-search{height:42px;border-radius:0}

html.sf-home-shell .sf-create{
  min-height:44px;
  border-radius:0;
  background:var(--sf-nav-brand);
  box-shadow:none;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  transition:background .16s var(--sf-ease),box-shadow .16s var(--sf-ease),transform .1s var(--sf-ease);
}
html.sf-home-shell .sf-create:hover{
  background:var(--sf-nav-brand-hover);
  box-shadow:none;
}
html.sf-home-shell .sf-create:active{transform:translateY(1px)}

/* ---- Sidebar: nav rows + active rail ------------------------------------- */
html.sf-home-shell .sf-productnav{padding:6px 8px 16px;gap:1px}
html.sf-home-shell .sf-pn-row{
  position:relative;
  min-height:38px;
  gap:11px;
  padding:0 11px;
  border-radius:0;
  font-size:14px;
  font-weight:600;
  color:var(--sf-nav-text);
  transition:background .15s var(--sf-ease),color .15s var(--sf-ease);
}
html.sf-home-shell .sf-pn-row .sf-pn-ic{color:var(--sf-nav-muted);transition:color .15s var(--sf-ease)}
html.sf-home-shell .sf-pn-row .sf-pn-ic svg{width:18px;height:18px}
html.sf-home-shell .sf-pn-row:hover{background:var(--sf-nav-hover);color:var(--sf-nav-ink)}
html.sf-home-shell .sf-pn-row:hover .sf-pn-ic{color:var(--sf-nav-text)}
html.sf-home-shell .sf-pn-row.active{
  background:var(--sf-nav-selected);
  color:var(--sf-nav-ink);
  font-weight:600;
}
html.sf-home-shell .sf-pn-row.active .sf-pn-ic{color:var(--sf-nav-accent)}
html.sf-home-shell .sf-pn-row.active::before{
  content:"";
  position:absolute;
  left:3px;top:50%;
  width:3px;height:19px;
  border-radius:0;
  background:var(--sf-nav-accent);
  transform:translateY(-50%);
}
html.sf-home-shell .sf-pn-row.is-soon,
html.sf-home-shell .sf-pn-row.is-soon:hover{background:transparent;color:var(--sf-nav-disabled);cursor:default}
html.sf-home-shell .sf-pn-row.is-soon .sf-pn-ic{color:var(--sf-nav-disabled)}

/* ---- Sidebar: collapsible groups ----------------------------------------- */
html.sf-home-shell .sf-pn-group{margin-top:14px;gap:1px}
html.sf-home-shell .sf-pn-group.is-collapsible{display:flex;flex-direction:column}
html.sf-home-shell .sf-pn-head{
  display:flex;
  align-items:center;
  width:100%;
  padding:2px 11px 6px;
  color:var(--sf-nav-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
html.sf-home-shell button.sf-pn-head{
  border:0;background:none;cursor:pointer;font-family:inherit;
  transition:color .15s var(--sf-ease);
}
html.sf-home-shell button.sf-pn-head:hover{color:var(--sf-nav-ink)}
html.sf-home-shell button.sf-pn-head:focus-visible{
  outline:2px solid var(--sf-nav-focus);
  outline-offset:-2px;
  color:var(--sf-nav-ink);
  box-shadow:none;
  border-radius:0;
}
html.sf-home-shell .sf-pn-head-label{flex:1;text-align:left}
html.sf-home-shell .sf-pn-head-caret{
  display:flex;
  color:var(--sf-nav-muted);
  transform:rotate(90deg);
  transition:transform .3s var(--sf-ease),color .15s var(--sf-ease);
}
html.sf-home-shell .sf-pn-head-caret svg{width:13px;height:13px}
html.sf-home-shell button.sf-pn-head:hover .sf-pn-head-caret{color:var(--sf-nav-ink)}
html.sf-home-shell .sf-pn-group.collapsed .sf-pn-head-caret{transform:rotate(0deg)}

html.sf-home-shell .sf-pn-sub{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .3s var(--sf-ease);
}
html.sf-home-shell .sf-pn-group.collapsed .sf-pn-sub{grid-template-rows:0fr}
html.sf-home-shell .sf-pn-sub-inner{
  overflow:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:1px;
  opacity:1;
  transition:opacity .24s var(--sf-ease) .05s;
}
html.sf-home-shell .sf-pn-group.collapsed .sf-pn-sub-inner{opacity:0;transition:opacity .14s var(--sf-ease)}
/* a live search reveals every group, even collapsed ones */
html.sf-home-shell .sf-sidebar.sf-searching .sf-pn-sub{grid-template-rows:1fr}
html.sf-home-shell .sf-sidebar.sf-searching .sf-pn-sub-inner{opacity:1}

/* ---- Topbar -------------------------------------------------------------- */
html.sf-home-shell .sf-topbar{
  height:var(--sf-topbar-height);
  padding:0 24px;
  gap:20px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
html.sf-home-shell .sf-top-icon{border-radius:0;transition:background .15s var(--sf-ease),color .15s var(--sf-ease)}
html.sf-home-shell .sf-top-icon:hover{transform:none}
html.sf-home-shell .sf-avatar{transition:transform .15s var(--sf-ease),box-shadow .15s var(--sf-ease)}
html.sf-home-shell .sf-avatar:hover{transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(15,98,254,.5)}

/* ---- Dropdown menus: fade + rise instead of a hard cut ------------------- */
html.sf-home-shell .sf-create-menu,
html.sf-home-shell .sf-tn-menu,
/* the New menu flies out sideways now, so it enters from the sidebar edge */
html.sf-home-shell .sf-create-menu{
  transform:translateX(-6px) scale(.985);
  transform-origin:left center;
}
html.sf-home-shell .sf-create-menu.is-flipped{transform-origin:right center}
html.sf-home-shell .sf-create-menu.open,
html.sf-home-shell .sf-tn-menu.open,
html.sf-home-shell .sf-create-menu a,
html.sf-home-shell .sf-tn-menu a,
/* ---- Entrance: hero + cards rise in, gently staggered -------------------- */
@keyframes sfHomeRise{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
html.sf-home-shell .sf-home-brand{animation:sfHomeRise .52s .02s both var(--sf-ease)}
html.sf-home-shell .sf-home-welcome h1{animation:sfHomeRise .52s .07s both var(--sf-ease)}
html.sf-home-shell .sf-home-lede{animation:sfHomeRise .52s .12s both var(--sf-ease)}
html.sf-home-shell .sf-quick-card{animation:sfHomeRise .52s both var(--sf-ease)}
html.sf-home-shell .sf-quick-list .sf-quick-card:nth-child(1){animation-delay:.18s}
html.sf-home-shell .sf-quick-list .sf-quick-card:nth-child(2){animation-delay:.24s}
html.sf-home-shell .sf-quick-list .sf-quick-card:nth-child(3){animation-delay:.30s}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:900px){
  html.sf-home-shell .content.index.sf-dashboard-home{
    width:100%;
    max-width:100%;
    padding:60px 20px 56px;
    overflow-x:clip;
  }
  html.sf-home-shell .sf-home-welcome{max-width:100%;min-width:0}
}
@media (max-width:640px){
  html.sf-home-shell .content.index.sf-dashboard-home{padding:54px 16px 46px}
  html.sf-home-shell .sf-home-welcome h1{font-size:24px;line-height:1.2;letter-spacing:-.012em;overflow-wrap:anywhere}
  html.sf-home-shell .sf-home-lede{font-size:14px}
  html.sf-home-shell .sf-quick-list{margin-top:28px}
  html.sf-home-shell .sf-quick-card{padding:13px 13px 13px 14px;gap:12px}
  html.sf-home-shell .sf-quick-icon{width:38px;height:38px}
  html.sf-home-shell .sf-quick-icon svg{width:20px;height:20px}
  html.sf-home-shell .sf-quick-arrow{width:34px;height:34px}
  html.sf-home-shell .sf-quick-copy small{max-width:none}
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html.sf-home-shell .sf-home-brand,
  html.sf-home-shell .sf-home-welcome h1,
  html.sf-home-shell .sf-home-lede,
  html.sf-home-shell .sf-quick-card{animation:none}
  html.sf-home-shell .sf-pn-sub,
  html.sf-home-shell .sf-pn-sub-inner,
  html.sf-home-shell .sf-pn-head-caret,
  html.sf-home-shell .sf-create-menu,
  html.sf-home-shell .sf-tn-menu,
  html.sf-home-shell .sf-quick-card,
  html.sf-home-shell .sf-quick-icon,
  html.sf-home-shell .sf-quick-arrow{transition:none}
}

/* ---- Home topbar: drop the workspace label + centered doc-nav ------------
   A clean bar with only the right-side actions. Home route only, so the
   design-system pages keep their topbar nav (their sole route). */
html.sf-home-shell .sf-topbar-context,
html.sf-home-shell .sf-topnav{display:none}
html.sf-home-shell .sf-top-actions{margin-left:auto}

/* ==========================================================================
   APP CHROME v2 — reference-styled left rail + top bar (every route)
   Activated by <html class="sf-appnav">, set by dw-init on every page, so the
   chrome no longer differs between the home route and the docs. Layered last
   and scoped one class deeper than the sf-home-shell block so it wins without
   editing anything above.

   The collapse is one state — html.sf-rail — driving the shell's grid track,
   the label fade, the caret flip, and the tooltip mode together. Below 900px
   the sidebar is an overlay drawer instead and the same buttons open it.
   To revert: delete this block + the sf-appnav class-add in dw-init.
   ========================================================================== */
/* `html.sf-booting` shares this block — QA-145. The skeleton has to be laid out
   with the metrics the page ends up using, and the ones on `:root` above are
   not them: 308px and 72px there against 290px and 64px here. Reading the
   `:root` values gave a rail that jumped 18px narrower and a top bar 8px
   shorter the moment the real chrome arrived. Sharing the selector rather than
   copying the numbers means the skeleton cannot drift from the thing it stands
   in for. */
html.sf-appnav,
html.sf-booting{
  --sf-sidebar-width:290px;
  --sf-rail-width:76px;
  --sf-topbar-height:64px;
  --sf-brand:var(--sf-c-brand);
  --sf-brand-2:var(--sf-c-brand-2);
  --sf-maroon:var(--sf-c-maroon);
  --sf-blush:var(--sf-c-blush);
  --sf-ease:cubic-bezier(.4,0,.2,1);
  --sf-nav-dur:.18s;
}
/* `sf-booting` shares this for the same reason as the block above: the inline
   classifier restores the collapsed rail before paint, and without this the
   skeleton would be drawn at the full 290px and then snap to 76px. */
html.sf-appnav.sf-rail,
html.sf-booting.sf-rail{--sf-sidebar-width:var(--sf-rail-width)}
html.sf-appnav .sf-pn-ic svg [fill]:not([fill="none"]){fill:currentColor;stroke:none}

html.sf-appnav .shell,
html.sf-appnav .shell.wide{
  transition:grid-template-columns var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav .navpanel.zdark.sf-sidebar{
  padding:0 12px 122px;
  overflow-x:hidden;
  transition:padding var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav.sf-rail .navpanel.zdark.sf-sidebar{padding-left:8px;padding-right:8px}

/* ---- Sidebar header: workspace + collapse control ------------------------ */
html.sf-appnav .sf-sidebar .np-top{
  position:sticky;
  height:var(--sf-topbar-height);
  flex:0 0 var(--sf-topbar-height);
  gap:4px;
  padding:0;
}
html.sf-appnav .sf-workspace{
  flex:1;
  height:44px;
  gap:10px;
  padding:6px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
html.sf-appnav .sf-workspace:hover{background:var(--sf-nav-hover);box-shadow:none}
html.sf-appnav .sf-workspace-mark{
  width:30px;
  height:30px;
  border-radius:0;
  transition:opacity .18s var(--sf-ease);
}
html.sf-appnav .sf-workspace-mark img{width:18px;height:18px}
html.sf-appnav .sf-workspace-name{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.012em;
}
html.sf-appnav .sf-rail-toggle{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--sf-nav-text);
  cursor:pointer;
  transition:background .15s var(--sf-ease),color .15s var(--sf-ease),
             transform var(--sf-nav-dur) var(--sf-ease),opacity .18s var(--sf-ease);
}
html.sf-appnav .sf-rail-toggle svg{width:17px;height:17px}
html.sf-appnav .sf-rail-toggle:hover{background:var(--sf-nav-hover);color:var(--sf-nav-ink)}
html.sf-appnav .sf-rail-toggle:active{background:var(--sf-nav-pressed);color:var(--sf-nav-ink)}
html.sf-appnav .sf-rail-toggle:focus-visible{outline:2px solid var(--sf-nav-focus);outline-offset:-2px}

/* Collapsed: the mark centres, and hovering the header swaps it for the caret. */
html.sf-appnav.sf-rail .sf-workspace{justify-content:center;padding:6px 0}
html.sf-appnav.sf-rail .sf-rail-toggle{
  position:absolute;
  inset:0;
  margin:auto;
  width:36px;
  height:36px;
  transform:rotate(180deg);
  opacity:0;
}
html.sf-appnav.sf-rail .np-top:hover .sf-rail-toggle,
html.sf-appnav.sf-rail .sf-rail-toggle:focus-visible{opacity:1}
html.sf-appnav.sf-rail .np-top:hover .sf-workspace-mark{opacity:0}

/* ---- Collapsing text: everything that folds away in the rail ------------- */
html.sf-appnav .sf-workspace-name,
html.sf-appnav .sf-pn-label,
html.sf-appnav .sf-pn-badge,
html.sf-appnav .sf-pn-soon,
html.sf-appnav .sf-pn-head-caret,
html.sf-appnav .sf-create > span,
html.sf-appnav .sf-create-caret,
html.sf-appnav .sf-nav-search input,
html.sf-appnav .sf-nav-search kbd,
html.sf-appnav .sf-nav-footer a > span,
html.sf-appnav .sf-nav-footer button > span{
  transition:opacity var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav.sf-rail .sf-workspace-name,
html.sf-appnav.sf-rail .sf-pn-label,
html.sf-appnav.sf-rail .sf-pn-badge,
html.sf-appnav.sf-rail .sf-pn-soon,
html.sf-appnav.sf-rail .sf-pn-head-caret,
html.sf-appnav.sf-rail .sf-create > span,
html.sf-appnav.sf-rail .sf-create-caret,
html.sf-appnav.sf-rail .sf-nav-search input,
html.sf-appnav.sf-rail .sf-nav-search kbd,
html.sf-appnav.sf-rail .sf-nav-footer a > span,
html.sf-appnav.sf-rail .sf-nav-footer button > span,
html.sf-appnav.sf-rail .sf-no-results{
  flex:0 0 0;            /* .sf-pn-label is flex:1 — without this the icon stays left of centre */
  width:0;
  min-width:0;
  margin:0;
  padding:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  pointer-events:none;
}

/* ---- Search + New ------------------------------------------------------- */
html.sf-appnav .sf-sidebar-tools{padding:14px 2px 4px}
html.sf-appnav .sf-nav-search{
  height:42px;
  border-radius:0;
  background:var(--sf-nav-layer);
  border-color:transparent;
  border-bottom-color:var(--sf-nav-line-strong);
  transition:background .16s var(--sf-ease),border-color .16s var(--sf-ease),
             box-shadow .16s var(--sf-ease),padding var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav .sf-nav-search:hover{background:var(--sf-nav-hover)}
html.sf-appnav .sf-nav-search:focus-within{
  background:var(--sf-nav-layer);
  border-color:transparent;
  box-shadow:inset 0 0 0 2px var(--sf-nav-focus);
}
html.sf-appnav .sf-create{
  min-height:44px;
  gap:9px;
  border-radius:0;
  transition:filter .16s var(--sf-ease),box-shadow .16s var(--sf-ease),
             transform .1s var(--sf-ease),padding var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav.sf-rail .sf-nav-search,
html.sf-appnav.sf-rail .sf-create,
html.sf-appnav.sf-rail .sf-pn-row,
html.sf-appnav.sf-rail .sf-nav-footer a,
html.sf-appnav.sf-rail .sf-nav-footer button{
  justify-content:center;
  gap:0;
  padding-left:0;
  padding-right:0;
}
html.sf-appnav.sf-rail .sf-create{grid-template-columns:none;display:flex}

/* ---- Labels: never ellipsised mid-flight --------------------------------
   Collapsing zeroes each label's width, so during the transition the row is
   briefly narrower than its text and "New updates" / "Creator" would show a
   "…" that has nothing to do with the resting layout. While the rail is in
   motion the text is clipped by the panel instead, which reads as a wipe.
   The resting ellipsis is kept for labels that genuinely do not fit. */
html.sf-appnav.is-navanim .sf-pn-label,
html.sf-appnav.is-navanim .sf-workspace-name,
html.sf-appnav.is-navanim .sf-nav-footer a > span,
html.sf-appnav.is-navanim .sf-nav-footer button > span{
  text-overflow:clip;
}
/* The expanded sidebar must never cost a label its last characters: the label
   is the only flexible track, and the icon and badge both hold their size.
   Excluded from the rail — there the collapse rule zeroes the label, and this
   rule carries one more class, so without :not() it would win and leave the
   labels holding width the rail has not got. */
html.sf-appnav:not(.sf-rail) .sf-sidebar .sf-pn-row .sf-pn-label{flex:1 1 auto;min-width:0}
/* margin-left:auto is what pins the badge to the right edge — in the rail the
   free space it claims is the space the icon needs to sit centred, so the
   badged rows drift left of every other icon. */
html.sf-appnav:not(.sf-rail) .sf-sidebar .sf-pn-row .sf-pn-badge,
html.sf-appnav:not(.sf-rail) .sf-sidebar .sf-pn-row .sf-pn-soon{flex:0 0 auto;margin-left:auto}

/* ---- Rows --------------------------------------------------------------- */
html.sf-appnav .sf-productnav{padding:6px 2px 14px;gap:1px}
html.sf-appnav .sf-sidebar .sf-pn-row{
  position:relative;
  min-height:38px;
  gap:11px;
  padding:0 11px;
  border-radius:0;
  color:var(--sf-nav-text);
  font-size:14px;
  font-weight:600;
  transition:background .15s var(--sf-ease),color .15s var(--sf-ease),
             padding var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav .sf-sidebar .sf-pn-row .sf-pn-ic{flex:0 0 18px;color:var(--sf-nav-muted)}
html.sf-appnav .sf-sidebar .sf-pn-row .sf-pn-ic svg{width:18px;height:18px}
html.sf-appnav .sf-sidebar .sf-pn-row:hover{background:var(--sf-nav-hover);color:var(--sf-nav-ink)}
html.sf-appnav .sf-sidebar .sf-pn-row:hover .sf-pn-ic{color:var(--sf-nav-text)}
html.sf-appnav .sf-sidebar .sf-pn-row:active{background:var(--sf-nav-pressed)}
html.sf-appnav .sf-sidebar .sf-pn-row:focus-visible{
  outline:2px solid var(--sf-nav-focus);
  outline-offset:-2px;
}
html.sf-appnav .sf-sidebar .sf-pn-row.active{
  background:var(--sf-nav-selected);
  color:var(--sf-nav-ink);
  font-weight:600;
}
html.sf-appnav .sf-sidebar .sf-pn-row.active .sf-pn-ic{color:var(--sf-nav-accent)}
html.sf-appnav .sf-sidebar .sf-pn-row.active::before{
  content:"";
  position:absolute;
  left:-2px;
  top:50%;
  width:3px;
  height:20px;
  border-radius:0;
  background:var(--sf-nav-accent);
  transform:translateY(-50%);
}
/* Disabled rows: dimmed AND outlined, so the state does not rest on colour
   alone for anyone who cannot separate the two greys. */
html.sf-appnav .sf-sidebar .sf-pn-row.is-soon,
html.sf-appnav .sf-sidebar .sf-pn-row.is-soon:hover{
  background:transparent;
  color:var(--sf-nav-disabled);
  cursor:not-allowed;
}
html.sf-appnav .sf-sidebar .sf-pn-row.is-soon .sf-pn-ic{color:var(--sf-nav-disabled)}
html.sf-appnav .sf-pn-badge{
  flex:none;
  padding:2px 7px;
  border-radius:0;
  background:var(--sf-nav-accent-soft);
  color:var(--sf-nav-link);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:14px;
}

/* On-page sections of the current doc, nested under its row. */
html.sf-appnav .sf-sidebar .np-secs{
  margin:3px 0 5px 21px;
  padding-left:13px;
  border-left:1px solid var(--sf-nav-line);
}
html.sf-appnav .sf-sidebar .np-secs:before{display:none}
html.sf-appnav .sf-sidebar .np-sec{
  display:block;
  padding:6px 9px;
  border-radius:0;
  color:var(--sf-nav-muted);
  font-size:12px;
  font-weight:600;
  transition:background .15s var(--sf-ease),color .15s var(--sf-ease);
}
html.sf-appnav .sf-sidebar .np-sec:hover{background:var(--sf-nav-hover);color:var(--sf-nav-ink)}
html.sf-appnav .sf-sidebar .np-sec:focus-visible{outline:2px solid var(--sf-nav-focus);outline-offset:-2px}
html.sf-appnav .sf-sidebar .np-sec.on{background:var(--sf-nav-selected);color:var(--sf-nav-ink)}
html.sf-appnav.sf-rail .sf-sidebar .np-secs{display:none}

/* ---- Section heads ------------------------------------------------------ */
html.sf-appnav .sf-pn-group{margin-top:15px;gap:1px}
html.sf-appnav .sf-sidebar .sf-pn-head{
  display:flex;
  align-items:center;
  width:100%;
  padding:2px 11px 6px;
  border:0;
  background:none;
  color:var(--sf-nav-muted);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .15s var(--sf-ease),padding var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav .sf-sidebar .sf-pn-head:hover{color:var(--sf-nav-ink)}
html.sf-appnav .sf-sidebar .sf-pn-head:focus-visible{
  outline:2px solid var(--sf-nav-focus);
  outline-offset:-2px;
  color:var(--sf-nav-ink);
}
html.sf-appnav .sf-pn-head-label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html.sf-appnav .sf-pn-head-caret{
  display:flex;
  color:var(--sf-nav-muted);
  transform:rotate(90deg);
  transition:transform var(--sf-nav-dur) var(--sf-ease),color .15s var(--sf-ease),opacity var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav .sf-pn-head-caret svg{width:13px;height:13px}
html.sf-appnav .sf-pn-group.collapsed .sf-pn-head-caret{transform:rotate(0deg)}
html.sf-appnav .sf-pn-sub{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav .sf-pn-group.collapsed .sf-pn-sub{grid-template-rows:0fr}
html.sf-appnav .sf-pn-sub-inner{
  overflow:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:1px;
  opacity:1;
  transition:opacity var(--sf-nav-dur) var(--sf-ease);
}
html.sf-appnav .sf-pn-group.collapsed .sf-pn-sub-inner{opacity:0;transition:opacity .1s var(--sf-ease)}
html.sf-appnav .sf-sidebar.sf-searching .sf-pn-sub{grid-template-rows:1fr}
html.sf-appnav .sf-sidebar.sf-searching .sf-pn-sub-inner{opacity:1}

/* Collapsed: heads become hairlines and every group is forced open, so no row
   is unreachable while the labels are gone. */
html.sf-appnav.sf-rail .sf-sidebar .sf-pn-head{
  height:1px;
  padding:0;
  margin:11px 14px;
  background:var(--sf-nav-line);
  overflow:hidden;
  pointer-events:none;
}
html.sf-appnav.sf-rail .sf-pn-head-label{opacity:0}
html.sf-appnav.sf-rail .sf-pn-sub{grid-template-rows:1fr}
html.sf-appnav.sf-rail .sf-pn-sub-inner{opacity:1}
html.sf-appnav.sf-rail .sf-pn-group{margin-top:0}

/* ---- Footer: assist pill + utility row ---------------------------------- */
html.sf-appnav .sf-nav-footer{
  width:var(--sf-sidebar-width);
  padding:10px;
  transition:width var(--sf-nav-dur) var(--sf-ease),padding var(--sf-nav-dur) var(--sf-ease);
}
/* `.sf-ask` styled the "Ask the brand team" row, which linked the product's nav
   footer to `/getting-started/contribution/` — a design-system page. It went
   with the link (D-34), and its rules went with it rather than being left to be
   inherited by the next thing put in the nav footer — the same reasoning as
   `.sf-nav-settings` below. */
html.sf-appnav .sf-nav-footer-rule{
  height:1px;
  margin:9px 2px;
  background:var(--sf-nav-line);
}
/* `.sf-nav-settings` styled one button — "Appearance", the theme toggle. Both
   it and the theme went on 16 August 2026, and the rules went with them rather
   than being left to be inherited by the next thing put in the nav footer. */
html.sf-appnav.sf-rail .sf-nav-footer{padding:10px 8px}
html.sf-appnav.sf-rail .sf-nav-footer-rule{margin:8px 6px}

/* ---- Rail tooltip (fixed-position, so the scroll container can't clip) --- */
.sf-tip{
  position:fixed;
  z-index:999;
  padding:6px 10px;
  border-radius:0;
  /* one step above the rail it points at, or it reads as a hole in the nav */
  background:var(--sf-nav-layer-2);
  border:1px solid var(--sf-nav-line-strong);
  color:var(--sf-nav-ink);
  font-family:var(--font-sans,inherit);
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translateX(-4px);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55);
  transition:opacity .14s var(--sf-ease,ease),transform .14s var(--sf-ease,ease);
}
.sf-tip.on{opacity:1;transform:none}

/* ---- Top bar ------------------------------------------------------------ */
html.sf-appnav .sf-topbar{
  height:var(--sf-topbar-height);
  gap:12px;
  padding:0 20px 0 12px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
html.sf-appnav .sf-rail-btn{flex:none}
html.sf-appnav .sf-top-actions{margin-left:auto;gap:5px}
html.sf-appnav .sf-top-icon{width:36px;height:36px;border-radius:0}
html.sf-appnav .sf-top-icon svg{width:19px;height:19px}
html.sf-appnav .sf-plan{
  display:flex;
  align-items:center;
  gap:9px;
  height:38px;
  margin-right:6px;
  padding:0 5px 0 14px;
  border:1px solid var(--sf-top-line);
  border-radius:999px;
  background:var(--sf-top-layer);
  white-space:nowrap;
}
html.sf-appnav .sf-plan-name{font-size:12px;font-weight:600;color:var(--sf-top-ink)}
html.sf-appnav .sf-plan-meta{font-size:12px;font-weight:600;color:var(--sf-top-muted)}
html.sf-appnav .sf-plan-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  background:var(--sf-top-brand);
  color:var(--sf-top-on-brand);
  font-size:12px;
  font-weight:600;
  transition:background .16s var(--sf-ease),transform .12s var(--sf-ease);
}
html.sf-appnav .sf-plan-cta:hover{background:var(--sf-top-brand-hover)}
html.sf-appnav .sf-plan-cta:active{background:var(--sf-top-brand-active);transform:translateY(1px)}
html.sf-appnav .sf-plan-cta:focus-visible{outline:2px solid var(--sf-top-focus);outline-offset:2px}
html.sf-appnav .sf-plan-cta svg{width:14px;height:14px}
html.sf-appnav .sf-top-link{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 10px;
  border-radius:0;
  color:var(--sf-top-text);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s var(--sf-ease),color .15s var(--sf-ease);
}
html.sf-appnav .sf-top-link:hover{background:var(--sf-top-hover);color:var(--sf-top-ink)}
html.sf-appnav .sf-top-link:active{background:var(--sf-top-pressed)}
html.sf-appnav .sf-top-link:focus-visible{outline:2px solid var(--sf-top-focus);outline-offset:-2px}
html.sf-appnav .sf-top-icon:focus-visible,
html.sf-appnav .sf-avatar:focus-visible{outline:2px solid var(--sf-top-focus);outline-offset:-2px}
html.sf-appnav .sf-topbar-context{margin-left:2px}
html.sf-appnav.sf-home-shell .sf-topbar-context{display:none}
html.sf-appnav .mnav-btn{display:none!important}

/* ---- Entrance: rows slide in, gently staggered -------------------------- */
@keyframes sfNavIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
html.sf-appnav .sf-productnav > .sf-pn-row,
html.sf-appnav .sf-pn-group{
  animation:sfNavIn .24s both var(--sf-ease);
  animation-delay:calc(.018s * var(--i,0));
}
html.sf-appnav.sf-rail .sf-productnav > .sf-pn-row,
html.sf-appnav.sf-rail .sf-pn-group{animation:none}
/* ---- Dark ----------------------------------------------------------------
   The navigation is dark in both page themes, so it no longer keeps a second
   colour set here — everything above already reads --sf-nav-*. What remains
   is the one thing the page theme still changes: the canvas the chrome sits
   against, which decides how hard the divider has to work. */


/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1240px){
  html.sf-appnav .sf-plan-meta{display:none}
}
@media (max-width:1080px){
  html.sf-appnav{--sf-sidebar-width:264px}
  html.sf-appnav .sf-top-link{padding:0 8px;font-size:12px}
}
/* ⚠ Folded into the `md` block below — QA-033.
   `.sf-plan` is emitted by nothing: it and its three siblings exist only in
   this stylesheet, so this query hid an element that never appears and the
   change is provably invisible. It is kept rather than deleted because the
   rules describe a nav plan badge somebody may still build, and when they do
   it should collapse at `md` like everything else — not at a private 920. */
@media (max-width:900px){
  html.sf-appnav .sf-plan{display:none}
  html.sf-appnav{--sf-sidebar-width:290px}
  html.sf-appnav .navpanel.zdark.sf-sidebar{width:min(290px,calc(100vw - 20px))}
  html.sf-appnav .sf-nav-footer{width:min(290px,calc(100vw - 20px))}
  html.sf-appnav .sf-topbar{height:56px;padding:0 12px 0 8px}
  html.sf-appnav .sf-topbar-context{display:none}
  html.sf-appnav .shell,
  html.sf-appnav .shell.wide{grid-template-rows:56px auto}
}
/* ⚠ A `max-width:620px` query stood here and could not do anything — QA-225.
   `.sf-top-link` is emitted by nothing, and `.sf-focus-search` is already
   hidden by the `md` rule at line ~1318: everything below 620 is below 900
   too. Removed after measuring the button either side of both numbers and
   getting the same answers with and without it. */

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html.sf-appnav .shell,
  html.sf-appnav .shell.wide,
  html.sf-appnav .navpanel.zdark.sf-sidebar,
  html.sf-appnav .sf-nav-footer,
  html.sf-appnav .sf-rail-toggle,
  html.sf-appnav .sf-pn-sub,
  html.sf-appnav .sf-pn-sub-inner,
  html.sf-appnav .sf-pn-head-caret,
  html.sf-appnav .sf-sidebar .sf-pn-row,
  .sf-tip{transition:none}
  html.sf-appnav .sf-productnav > .sf-pn-row,
  html.sf-appnav .sf-pn-group{animation:none}
}

/* ---- Rail layout, last word ---------------------------------------------
   These have to outrank the expanded-state rules above (same specificity,
   declared later), otherwise the leftover flex gap pushes every icon off the
   rail's centre line by half a gap. */
html.sf-appnav.sf-rail .sf-sidebar .sf-workspace,
html.sf-appnav.sf-rail .sf-sidebar .sf-nav-search,
html.sf-appnav.sf-rail .sf-sidebar .sf-create,
html.sf-appnav.sf-rail .sf-sidebar .sf-pn-row{
  justify-content:center;
  gap:0;
  padding-left:0;
  padding-right:0;
}
html.sf-appnav.sf-rail .sf-sidebar .sf-pn-row.active::before{left:0}

/* ==========================================================================
   NEWSLETTER MANAGEMENT — an in-app view of the home shell
   --------------------------------------------------------------------------
   Rendered by /newsletter-app.js into .content.index.sf-nlview when the route
   is "/#newsletter". The workspace nav stays mounted alongside it.

   Premium SaaS surface (beehiiv / Mailchimp / HubSpot lineage) on Ollily's
   palette: off-white canvas, white cards, gray-blue hairlines, teal for
   interactive text as in the reference, magenta reserved for brand moments.
   ========================================================================== */
html.sf-appnav .content.index.sf-appview{
  --nl-ink:var(--sf-c-ink);
  --nl-text:var(--sf-c-text);
  --nl-muted:var(--sf-c-muted);
  --nl-line:var(--sf-c-line);
  --nl-line-soft:var(--sf-c-line-soft);
  --nl-hover:var(--sf-c-soft);
  --nl-surface:var(--sf-c-surface);
  --nl-accent:var(--sf-c-accent);
  --nl-accent-ink:var(--sf-c-accent-ink);
  --nl-accent-soft:var(--sf-c-accent-soft);
  --nl-brand:var(--sf-c-brand);
  --nl-blush:var(--sf-c-blush);
  --nl-maroon:var(--sf-c-maroon);
  --nl-ease:var(--sf-ease);

  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  min-height:calc(100vh - var(--sf-topbar-height));
  margin:0;
  padding:0;
  background:#f4f4f4;
  color:var(--nl-ink);
}
.sf-nlview .sf-view-mount{display:block;width:100%}
/* Socials shares the newsletter view's full-bleed shell; the tools set their
   own page frame inside it. */
.sf-soview .sf-view-mount{display:block;width:100%}
.sf-soview{background:#f4f4f4;min-height:calc(100vh - var(--sf-topbar-height))}
.sfnl{
  width:100%;
  max-width:1560px;
  margin:0 auto;
  padding:clamp(26px,3.4vw,44px) clamp(18px,3vw,40px) 96px;
}
.sfnl *{box-sizing:border-box}
.sfnl button{font-family:inherit;cursor:pointer}

/* ---- Header -------------------------------------------------------------- */
.sfnl-head{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:26px;
}
.sfnl-titles{min-width:0;flex:1}
.sfnl-head h1{
  margin:0;
  font-size:clamp(26px,2.6vw,31px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.026em;
  color:var(--nl-ink);
}
.sfnl-count{
  margin:7px 0 0;
  font-size:14px;
  font-weight:600;
  color:var(--nl-text);
}
.sfnl-actions{display:flex;align-items:center;gap:10px;flex:none}

/* split control — text action + caret, one rounded shell */
.sfnl-split{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:#ffffff;
  overflow:hidden;
  transition:border-color .16s var(--nl-ease),box-shadow .16s var(--nl-ease);
}
.sfnl-split:hover{border-color:#c6c6c6;box-shadow:0 2px 8px -3px rgba(0,0,0,.14)}
.sfnl-split.ghost{background:var(--nl-surface)}
.sfnl-split-main{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:42px;
  padding:0 15px;
  border:0;
  background:transparent;
  color:var(--nl-ink);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s var(--nl-ease);
}
.sfnl-split-main:hover{background:rgba(0,0,0,.045)}
.sfnl-split-caret{
  display:grid;
  place-items:center;
  width:36px;
  border:0;
  border-left:1px solid var(--nl-line);
  background:transparent;
  color:var(--nl-text);
  transition:background .15s var(--nl-ease),color .15s var(--nl-ease);
}
.sfnl-split-caret svg{width:16px;height:16px;transition:transform .2s var(--nl-ease)}
.sfnl-split-caret:hover{background:rgba(0,0,0,.045);color:var(--nl-ink)}
.sfnl-split-caret[aria-expanded="true"] svg{transform:rotate(180deg)}
.sfnl-split.sm{border-radius:0}
.sfnl-split.sm .sfnl-split-main{height:32px;padding:0 12px;font-size:12px}
.sfnl-split.sm .sfnl-split-caret{width:28px}
.sfnl-split.sm .sfnl-split-caret svg{width:14px;height:14px}

.sfnl-primary{
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:42px;
  padding:0 17px;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  color:var(--nl-ink);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:background .16s var(--nl-ease),border-color .16s var(--nl-ease),
             box-shadow .16s var(--nl-ease),transform .12s var(--nl-ease);
}
.sfnl-primary svg{width:17px;height:17px;color:var(--nl-accent)}
.sfnl-primary:hover{
  background:#e8e8e8;
  border-color:#d0e2ff;
  box-shadow:0 8px 20px -10px rgba(15,98,254,.4);
  transform:translateY(-1px);
}
.sfnl-primary:active{transform:translateY(0)}

.sfnl-ghost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 13px;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  color:var(--nl-text);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s var(--nl-ease),border-color .15s var(--nl-ease),color .15s var(--nl-ease);
}
a.sfnl-ghost{text-decoration:none}
.sfnl-ghost svg{width:16px;height:16px}
.sfnl-ghost:hover{background:var(--nl-hover);border-color:#c6c6c6;color:var(--nl-ink)}
.sfnl-ghost.lg{height:40px;padding:0 16px}

/* ---- Tabs ---------------------------------------------------------------- */
.sfnl-tabs{
  position:relative;
  display:flex;
  gap:4px;
  margin-bottom:22px;
  overflow-x:auto;
  scrollbar-width:none;
}
.sfnl-tabs::-webkit-scrollbar{display:none}
.sfnl-tabs button{
  position:relative;
  flex:none;
  height:46px;
  padding:0 16px;
  border:0;
  background:none;
  color:var(--nl-muted);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.012em;
  white-space:nowrap;
  border-radius:0;
  transition:color .18s var(--nl-ease),background .18s var(--nl-ease);
}
.sfnl-tabs button:hover{color:var(--nl-text);background:rgba(0,0,0,.03)}
.sfnl-tabs button.is-on{color:var(--nl-ink)}
.sfnl-ink{
  position:absolute;
  left:0;
  bottom:-1px;
  height:2px;
  width:0;
  border-radius:0;
  background:var(--nl-ink);
  transition:transform .34s var(--nl-ease),width .34s var(--nl-ease);
  will-change:transform,width;
}

/* ---- Toolbar ------------------------------------------------------------- */
.sfnl-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:18px;
}
.sfnl-tspacer{flex:1 1 auto;min-width:0}
.sfnl-search{
  display:flex;
  align-items:center;
  gap:9px;
  width:250px;
  height:38px;
  padding:0 12px;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  color:var(--nl-muted);
  transition:border-color .16s var(--nl-ease),box-shadow .16s var(--nl-ease);
}
.sfnl-search:focus-within{border-color:var(--nl-accent);box-shadow:0 0 0 3px rgba(15,98,254,.12)}
.sfnl-search svg{width:17px;height:17px;flex:none}
.sfnl-search input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  padding:0;
  background:none;
  color:var(--nl-ink);
  font:inherit;
  font-size:14px;
}
.sfnl-search input::placeholder{color:var(--nl-muted)}
.sfnl-search input::-webkit-search-cancel-button{display:none}

.sfnl-filters{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.sfnl-filter{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:34px;
  padding:0 9px;
  border:1px solid transparent;
  border-radius:0;
  background:none;
  color:var(--nl-text);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s var(--nl-ease),border-color .15s var(--nl-ease);
}
.sfnl-filter b{color:var(--nl-accent);font-weight:600}
.sfnl-filter svg{width:14px;height:14px;color:var(--nl-muted);transition:transform .2s var(--nl-ease)}
.sfnl-filter:hover{background:var(--nl-hover);border-color:var(--nl-line)}
.sfnl-filter[aria-expanded="true"]{background:var(--nl-surface);border-color:var(--nl-line)}
.sfnl-filter[aria-expanded="true"] svg{transform:rotate(180deg)}
.sfnl-filter.is-on{background:var(--nl-accent-soft);border-color:#a6c8ff}
.sfnl-clear{
  height:34px;
  padding:0 10px;
  border:0;
  border-radius:0;
  background:none;
  color:var(--sf-c-muted);
  font-size:12px;
  font-weight:600;
  pointer-events:none;
  transition:color .15s var(--nl-ease),background .15s var(--nl-ease);
}
.sfnl-clear.is-on{color:var(--nl-text);pointer-events:auto}
.sfnl-clear.is-on:hover{background:var(--nl-hover);color:var(--nl-ink)}

/* template tabs: the campaign filters don't apply, so only search remains */
.sfnl-toolbar.is-cards .sfnl-filters,
.sfnl-toolbar.is-cards .sfnl-clear,
.sfnl-toolbar.is-cards #sfnlAnalytics,
.sfnl-toolbar.is-cards #sfnlCols{display:none}

/* ---- Table --------------------------------------------------------------- */
.sfnl-tablewrap{
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 28px -22px rgba(0,0,0,.22);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#c6c6c6 transparent;
  animation:sfnlFade .3s var(--nl-ease) both;
}
@keyframes sfnlFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.sfnl-tablewrap::-webkit-scrollbar{height:10px}
.sfnl-tablewrap::-webkit-scrollbar-thumb{
  background:#c6c6c6;border-radius:0;border:3px solid transparent;background-clip:padding-box;
}
.sfnl-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.sfnl-table thead th{
  padding:0;
  background:#f4f4f4;
  border-bottom:1px solid var(--nl-line);
  color:var(--nl-text);
  font-size:12px;
  font-weight:600;
  text-align:left;
  white-space:nowrap;
}
.sfnl-th{
  display:flex;
  align-items:center;
  gap:2px;
  height:46px;
  padding:0 8px 0 14px;
}
.sfnl-c-act .sfnl-th{justify-content:flex-end;padding:0 14px 0 8px}
.sfnl-sortbtn,
.sfnl-headlbl{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  font-weight:600;
  text-align:left;
  white-space:nowrap;
  transition:color .15s var(--nl-ease);
}
.sfnl-sortbtn:hover{color:var(--nl-ink)}
.sfnl-sortbtn:focus-visible,
.sfnl-info:focus-visible{
  outline:none;
  border-radius:0;
  box-shadow:0 0 0 3px rgba(15,98,254,.22);
}

/* info trigger — a real button so hover and keyboard focus behave alike */
.sfnl-info{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:none;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:#a6c8ff;
  transition:color .15s var(--nl-ease),background .15s var(--nl-ease);
}
.sfnl-info svg{width:14px;height:14px}
.sfnl-info:hover,
.sfnl-info:focus-visible{color:var(--nl-accent);background:var(--nl-accent-soft)}

/* tooltip — fixed, so the table's own overflow can't clip it */
.sfnl-tip{
  position:fixed;
  z-index:600;
  max-width:264px;
  padding:8px 11px;
  border-radius:0;
  background:#161616;
  color:#fff;
  font-family:var(--font-sans,"IBM Plex Sans",system-ui,sans-serif);
  font-size:12px;
  font-weight:450;
  line-height:1.45;
  text-transform:none;
  letter-spacing:0;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  transform:translateY(-4px);
  box-shadow:0 14px 32px -12px rgba(0,0,0,.6);
  transition:opacity .16s var(--nl-ease),transform .16s var(--nl-ease);
}
.sfnl-tip.above{transform:translateY(4px)}
.sfnl-tip.on{opacity:1;transform:none}
.sfnl-sarrow{display:inline-flex;color:#8d8d8d;transition:transform .22s var(--nl-ease),color .15s var(--nl-ease)}
.sfnl-sarrow svg{width:13px;height:13px}
.sfnl-sarrow.up{transform:rotate(180deg)}
.sfnl-table th.is-sorted{color:var(--nl-ink)}
.sfnl-table th.is-sorted .sfnl-sarrow{color:var(--nl-accent)}
.sfnl-table th:not(:has(button)){padding:0 14px;height:46px}

.sfnl-table tbody td{
  padding:13px 14px;
  border-bottom:1px solid var(--nl-line-soft);
  vertical-align:middle;
  color:var(--nl-text);
}
.sfnl-table tbody tr:last-child td{border-bottom:0}
.sfnl-row{transition:background .14s var(--nl-ease)}
.sfnl-row:hover{background:var(--nl-hover)}
.sfnl-row.is-sel{background:var(--nl-accent-soft)}
.sfnl-row.is-sel:hover{background:#edf5ff}

.sfnl-c-check{width:44px;padding-left:16px!important;padding-right:0!important}
/* widths come from the column definitions; only behaviour lives here */


.sfnl-c-num{text-align:left}


.sfnl-c-act{width:148px;text-align:right}
/* every column but the name holds one line — the table scrolls instead of
   growing taller, which keeps rows scannable at a glance */
.sfnl-table td.sfnl-c-date,
.sfnl-table td.sfnl-c-status,
.sfnl-table td.sfnl-c-num,
.sfnl-table td.sfnl-c-aud,
.sfnl-table td.sfnl-c-user,
.sfnl-table td.sfnl-c-act{white-space:nowrap}
.sfnl-table td.sfnl-c-aud{overflow:hidden;text-overflow:ellipsis}
.sfnl-c-act button,.sfnl-c-act .sfnl-split{text-align:left}
.sfnl-table th.sfnl-c-act{text-align:right}

/* numeric cells: figures align on the right and share one tabular rhythm */
.sfnl-metric{
  display:block;
  color:var(--nl-ink);
  font-size:14px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sfnl-metric.lg{font-size:18px;font-weight:600;letter-spacing:-.02em}
/* §1's Revenue column · "+1" for the currencies the cell has no room to show.
   Deliberately quiet and not a badge: it is a footnote saying "there is more in
   the report", not a second figure competing with the first. The full list is in
   the cell's `title` and on the report's Conversions and revenue tab. */
.sfnl-plus{
  color:var(--nl-ink-soft,#5a5a5a);
  font-size:11px;
  font-style:normal;
  font-weight:500;
}
.sfnl-bar{
  display:block;
  width:52px;
  height:3px;
  margin:5px auto 0 0;
  border-radius:0;
  background:#e8e8e8;
  overflow:hidden;
}
.sfnl-bar i{
  display:block;
  height:100%;
  border-radius:0;
  background:var(--nl-accent);
  transition:width .4s var(--nl-ease);
}
.sfnl-c-num .sfnl-dash{display:block;text-align:left}

/* last updated by — name only, no avatar */
.sfnl-uname{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--nl-text);
  font-size:12px;
  font-weight:600;
}

/* checkbox */
.sfnl-check{position:relative;display:inline-flex;width:18px;height:18px;cursor:pointer}
.sfnl-check input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sfnl-check span{
  width:18px;height:18px;
  border:1.5px solid #a8a8a8;
  border-radius:0;
  background:#fff;
  transition:background .14s var(--nl-ease),border-color .14s var(--nl-ease);
}
.sfnl-check span::after{
  content:"";
  position:absolute;
  left:5.5px;top:2px;
  width:5px;height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(.4);
  opacity:0;
  transition:opacity .14s var(--nl-ease),transform .14s var(--nl-ease);
}
.sfnl-check input:hover + span{border-color:var(--sf-c-accent)}
.sfnl-check input:checked + span,
.sfnl-check input:indeterminate + span{background:var(--sf-c-accent);border-color:var(--sf-c-accent)}
.sfnl-check input:checked + span::after{opacity:1;transform:rotate(45deg) scale(1)}
.sfnl-check input:indeterminate + span::after{
  opacity:1;left:3.5px;top:7.5px;width:9px;height:0;
  border-width:0 0 2px 0;transform:none;
}
.sfnl-check input:focus-visible + span{outline:2px solid var(--sf-c-accent);outline-offset:2px}

/* name cell */
.sfnl-name{display:flex;align-items:center;gap:12px;min-width:0}
.sfnl-thumb{
  width:44px;height:56px;flex:none;
  border:1px solid var(--nl-line);
  border-radius:0;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .18s var(--nl-ease),box-shadow .18s var(--nl-ease);
}
.sfnl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sfnl-row:hover .sfnl-thumb{transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(0,0,0,.3)}
.sfnl-nmeta{display:flex;flex-direction:column;gap:3px;min-width:0}
/* ⚠ A row the server has not confirmed yet — QA-233. It reads as text rather
   than as a link, because a link into a campaign that does not exist yet opens
   a builder whose every save fails. The state lasts about a second. */
.sfnl-link.is-pending,
.sfnl-split-main.is-pending{
  color:var(--sf-c-strong);
  cursor:default;
  pointer-events:none;
  opacity:.65;
}

.sfnl-link{
  color:var(--nl-accent);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .15s var(--nl-ease);
}
.sfnl-link:hover{color:var(--nl-accent-ink);text-decoration:underline;text-underline-offset:2px}
.sfnl-sub{
  display:flex;align-items:center;gap:6px;
  color:var(--nl-muted);
  font-size:12px;
  font-weight:600;
}
.sfnl-sub svg{width:13px;height:13px}

.sfnl-d1{display:block;color:var(--nl-ink);font-weight:600}
.sfnl-d2{display:block;margin-top:2px;color:var(--nl-muted);font-size:12px}
.sfnl-dash{color:var(--sf-c-muted)}
/* initials, where a face would be */
.sfnl-avatar{
  flex:none;display:grid;place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--nl-blush,#edf5ff);
  color:var(--nl-maroon,#002d9c);
  font-size:12px;font-weight:600;letter-spacing:.02em;
}
.sfnl-avatar.sm{width:22px;height:22px;font-size:9.5px}
.sfnl-avatar.lg{width:46px;height:46px;font-size:16px}
/* a label attached to a record — tags, segments, categories */
.sfnl-pill{
  padding:2px 8px;
  border:1px solid var(--nl-line,#e0e0e0);border-radius:999px;
  background:var(--nl-surface,#fff);
  color:var(--nl-text,#525252);
  font-size:12px;font-weight:600;white-space:nowrap;
}
.sfnl-pill.is-more{background:var(--nl-soft,#f4f4f4);color:var(--nl-muted,#8d8d8d);cursor:default}
.sfnl-pills{display:inline-flex;align-items:center;gap:4px;min-width:0}
/* a count riding on a filter chip */
.sfnl-fn{
  min-width:16px;height:16px;margin-left:2px;padding:0 4px;
  display:inline-grid;place-items:center;
  border-radius:999px;
  background:var(--nl-accent,#0f62fe);color:#fff;
  font-size:12px;font-weight:600;line-height:1;
}
/* a keyboard shortcut shown inside its control */
.sfnl-kbd{
  margin-left:auto;flex:none;
  padding:1px 6px;
  border:1px solid var(--nl-line,#e0e0e0);border-radius:0;
  background:var(--nl-surface,#fff);
  color:var(--nl-muted,#8d8d8d);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;line-height:16px;
}
/* a button that reads as a link */
.sfnl-linkbtn{
  /* chrome only — typography comes from whatever it is paired with, so
     `.sfnl-link .sfnl-linkbtn` still reads as a link */
  min-width:0;padding:0;border:0;background:none;
  font-family:inherit;text-align:left;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sfnl-an{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--nl-text)}
.sfnl-an b{color:var(--nl-ink);font-weight:600}
.sfnl-an i{color:var(--sf-c-muted);font-style:normal}

.sfnl-badge{
  display:inline-flex;
  align-items:center;
  height:23px;
  padding:0 9px;
  border-radius:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
}
.sfnl-badge.is-draft{background:#f4f4f4;color:#525252}
.sfnl-badge.is-scheduled{background:#fcf4d6;color:#8e6a00}
.sfnl-badge.is-sent{background:#defbe6;color:#24a148}
/* subscription states — same component, more meanings */
.sfnl-badge.is-subscribed{background:#defbe6;color:#24a148}
.sfnl-badge.is-unsubscribed{background:#f4f4f4;color:#525252}
.sfnl-badge.is-nonsubscribed{background:#edf5ff;color:#0043ce}
.sfnl-badge.is-cleaned{background:#fff1f1;color:#a2191f}

.sfnl-rowact{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.sfnl-icon{
  display:grid;place-items:center;
  width:32px;height:32px;
  border:1px solid transparent;
  border-radius:0;
  background:none;
  color:var(--nl-muted);
  transition:background .15s var(--nl-ease),color .15s var(--nl-ease),border-color .15s var(--nl-ease);
}
.sfnl-icon svg{width:16px;height:16px}
.sfnl-icon:hover{background:var(--nl-hover);border-color:var(--nl-line);color:var(--nl-ink)}

/* ---- Menus --------------------------------------------------------------- */
.sfnl-menu{
  position:fixed;
  /* Above dialogs (700), below rail tooltips (999). A popover opened from
     inside a modal has to paint above it: at 400 it rendered behind, so a real
     click passed through to the modal backdrop and closed the whole dialog.
     Programmatic .click() still "worked", which is how it survived testing. */
  z-index:800;
  min-width:186px;
  padding:6px;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:#fff;
  box-shadow:0 22px 48px -18px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.06);
  opacity:0;
  transform:translateY(-6px) scale(.985);
  transform-origin:top center;
  transition:opacity .16s var(--nl-ease),transform .16s var(--nl-ease);
}
.sfnl-menu.open{opacity:1;transform:none}
.sfnl-menu.wide{min-width:250px}
.sfnl-menu button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:0;
  background:none;
  color:#161616;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  text-align:left;
  transition:background .14s var(--nl-ease),color .14s var(--nl-ease);
}
.sfnl-menu button:hover{background:#f4f4f4}
.sfnl-menu button.danger{color:#a2191f}
.sfnl-menu button.danger:hover{background:#fff1f1}
.sfnl-menu .mi{display:flex;color:#8d8d8d}
.sfnl-menu .mi svg{width:16px;height:16px}
.sfnl-menu button.danger .mi{color:#da1e28}
.sfnl-menu .ml{flex:1;min-width:0}
.sfnl-menu .mc{display:flex;color:#0f62fe}
.sfnl-menu .mc svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sfnl-menu-sep{height:1px;margin:5px 4px;background:#e8e8e8}
.sfnl-menu-head{
  padding:7px 10px 5px;
  color:var(--sf-c-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}

/* ---- Bulk bar ------------------------------------------------------------ */
.sfnl-bulk{
  /* Sits with the filters rather than at the page bottom, and stays pinned
     under the app top bar while a long selection is scrolled. */
  position:sticky;
  /* flush under the app top bar — an offset would leave a slot for rows to
     scroll through between the two */
  top:var(--sf-topbar-height,64px);
  z-index:40;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 16px;
  padding:7px 8px 7px 14px;
  border:1px solid #a6c8ff;
  border-radius:0;
  background:var(--nl-accent-soft);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 24px -18px rgba(0,0,0,.4);
  animation:sfnlBulkIn .22s var(--nl-ease) both;
}
@keyframes sfnlBulkIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sfnl-bulk[hidden]{display:none}
.sfnl-bulk-n{
  color:var(--nl-accent-ink);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.sfnl-bulk-n b{font-weight:600}
.sfnl-bulk-div{width:1px;height:20px;margin:0 2px;background:#a6c8ff}
.sfnl-bulk-sp{flex:1 1 auto;min-width:2px}
/* same metrics as .sfnl-filter so the row reads as one control set */
.sfnl-bulk button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:0;
  background:none;
  color:var(--nl-text);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s var(--nl-ease),color .15s var(--nl-ease),border-color .15s var(--nl-ease);
}
.sfnl-bulk button svg{width:15px;height:15px;flex:none}
.sfnl-bulk button svg:last-child{width:13px;height:13px;color:var(--nl-muted);transition:transform .2s var(--nl-ease)}
.sfnl-bulk button:hover{background:rgba(255,255,255,.85);border-color:#a6c8ff;color:var(--nl-ink)}
.sfnl-bulk button[aria-expanded="true"]{background:#fff;border-color:#a6c8ff}
.sfnl-bulk button[aria-expanded="true"] svg:last-child{transform:rotate(180deg)}
.sfnl-bulk button.danger{color:#a2191f}
.sfnl-bulk button.danger:hover{background:#fff1f1;border-color:#ffd7d9;color:#a2191f}
.sfnl-bulk-clear{color:var(--nl-accent-ink)!important;font-weight:600!important}
.sfnl-bulk-clear:hover{background:rgba(255,255,255,.85)}

/* ---- Skeleton ------------------------------------------------------------ */
.sfnl-skeleton{
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  overflow:hidden;
}
.sfnl-skrow{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  border-bottom:1px solid var(--nl-line-soft);
}
.sfnl-skrow:last-child{border-bottom:0}
.sfnl-skeleton .sk{display:block;border-radius:0}
.sfnl-skeleton .sk-check{width:18px;height:18px;border-radius:0;flex:none}
.sfnl-skeleton .sk-thumb{width:44px;height:56px;border-radius:0;flex:none}
.sfnl-skeleton .sk-lines{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.sfnl-skeleton .sk-l1{width:min(230px,60%);height:11px}
.sfnl-skeleton .sk-l2{width:110px;height:9px}
.sfnl-skeleton .sk-date{width:150px;height:11px;flex:none}
.sfnl-skeleton .sk-badge{width:58px;height:22px;border-radius:0;flex:none}
.sfnl-skeleton .sk-an{width:120px;height:11px;flex:none}
.sfnl-skeleton .sk-act{width:118px;height:32px;border-radius:0;flex:none}

/* ---- Empty / no-results / error ------------------------------------------ */
.sfnl-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:66px 28px 72px;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  animation:sfnlFade .3s var(--nl-ease) both;
}
.sfnl-state-ic{
  display:grid;place-items:center;
  width:52px;height:52px;
  margin-bottom:18px;
  border-radius:0;
  background:var(--nl-accent-soft);
  color:var(--nl-accent);
}
.sfnl-state-ic svg{width:24px;height:24px}
.sfnl-state.is-error .sfnl-state-ic{background:#fff1f1;color:#da1e28}
.sfnl-state h3{margin:0 0 7px;font-size:16px;font-weight:650;letter-spacing:-.015em;color:var(--nl-ink)}
.sfnl-state p{margin:0 0 20px;max-width:46ch;font-size:14px;line-height:1.6;color:var(--nl-text)}
.sfnl-state .sfnl-primary,
.sfnl-state .sfnl-ghost{align-self:center}

/* ---- Template cards ------------------------------------------------------ */
.sfnl-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:16px;
  animation:sfnlFade .3s var(--nl-ease) both;
}
.sfnl-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .18s var(--nl-ease),border-color .18s var(--nl-ease),box-shadow .18s var(--nl-ease);
}
.sfnl-card:hover{
  transform:translateY(-3px);
  border-color:#d0e2ff;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.3);
}
.sfnl-card-prev{
  display:block;
  height:168px;
  background:#f4f4f4;
  border-bottom:1px solid var(--nl-line-soft);
  overflow:hidden;
}
.sfnl-card-prev img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.sfnl-card-meta{display:block;padding:13px 14px 15px}
.sfnl-card-meta strong{display:block;font-size:14px;font-weight:600;color:var(--nl-ink)}
.sfnl-card-meta small{display:block;margin-top:3px;font-size:12px;color:var(--nl-muted);line-height:1.45}

/* ---- Toast --------------------------------------------------------------- */
.sfnl-toast-act{
  flex:none;margin:-3px -8px -3px 4px;
  padding:5px 11px;
  border:0;border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;font:inherit;font-weight:650;font-size:12px;cursor:pointer;
  transition:background .14s var(--nl-ease,ease);
}
.sfnl-toast-act:hover{background:rgba(255,255,255,.28)}
.sfnl-toast{
  position:fixed;
  left:calc(50% + (var(--sf-sidebar-width,290px) / 2));
  bottom:26px;
  z-index:500;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 18px;
  border-radius:999px;
  background:#161616;
  color:#fff;
  font-family:var(--font-sans,"IBM Plex Sans",system-ui,sans-serif);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 20px 44px -16px rgba(0,0,0,.62);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,14px);
  transition:opacity .24s cubic-bezier(.4,0,.2,1),transform .24s cubic-bezier(.4,0,.2,1);
}
.sfnl-toast.on{opacity:1;transform:translate(-50%,0)}
/* A failure looks like one. It used to render in the success colour with a
   check mark beside it, which is a confusing thing to read under the words
   "could not". */
.sfnl-toast.is-bad{background:var(--sf-c-danger-ink,#a2191f)}
.sfnl-toast.is-bad .ti{color:#fff}
.sfnl-toast .ti{display:flex;color:#6fdc8c}
.sfnl-toast .ti svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- View-level error (module failed to load) ---------------------------- */
.sf-view-error{
  max-width:460px;
  margin:96px auto;
  padding:32px;
  border:1px solid #e0e0e0;
  border-radius:0;
  background:#fff;
  text-align:center;
}
.sf-view-error strong{display:block;margin-bottom:8px;font-size:16px;color:#161616}
.sf-view-error p{margin:0 0 18px;font-size:14px;line-height:1.6;color:#525252}
.sf-view-error button{
  height:38px;padding:0 16px;
  border:1px solid #e0e0e0;border-radius:0;
  background:#fff;color:#161616;font-size:14px;font-weight:600;cursor:pointer;
}
.sf-view-error button:hover{background:#f4f4f4}
/* ---- Dark ---------------------------------------------------------------- */


/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1560px){
  /* keep the toolbar on one line for as long as it reasonably can — below
     ~1360 it wraps to two rows, which is the graceful floor */
  .sfnl-search{width:172px}
  .sfnl-toolbar{gap:6px}
  .sfnl-filter{padding:0 5px;gap:4px}
  .sfnl-ghost{padding:0 10px}
  .sfnl-clear{padding:0 7px}
}
@media (max-width:1480px){
  .sfnl-c-user{display:none}
}
@media (max-width:1280px){
  .sfnl-c-aud{display:none}
}
@media (max-width:1024px){
  .sfnl-head{flex-direction:column;align-items:stretch;gap:16px}
  .sfnl-actions{flex-wrap:wrap}
  .sfnl-search{width:100%;order:-1}
  .sfnl-toolbar{gap:8px}
  .sfnl-tspacer{display:none}
}
@media (max-width:900px){
  /* the table keeps its columns and scrolls sideways rather than reflowing */
  /* ⚠ `.sfnl-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}` was
     here and did nothing: the base rule sets both unconditionally. A dead
     declaration inside a breakpoint makes the breakpoint look like it does
     work it does not — found by a test that measured the wrapper either side
     of 900 and got the same answer twice. QA-224. */
  /* Fixed layout gives the name column whatever the others leave over, so the
     scroll width has to cover every column *plus* a readable name. */
  /* ⚠ `.sfnl-table{min-width:1320px}` was here and had never applied — QA-224.
     `.sfnl-table{min-width:1040px}` sits unconditionally a thousand lines
     below at the same specificity, so the cascade took the later one at every
     width. Removed rather than moved: what the table actually does is turn
     into cards at 720px, and deciding whether that should be 640 is a layout
     change with a screen behind it, not a tidy-up. */
  /* below the drawer breakpoint the table scrolls, so nothing has to hide */
  .sfnl-c-user,.sfnl-c-aud{display:table-cell}
}
@media (max-width:640px){
  .sfnl{padding:20px 14px 90px}
  .sfnl-head h1{font-size:24px}
  .sfnl-actions{gap:8px}
  .sfnl-actions .sfnl-split,
  .sfnl-actions .sfnl-primary{flex:1 1 auto;justify-content:center}
  .sfnl-tabs button{font-size:14px;padding:0 12px}
  /* narrow: the actions scroll sideways rather than wrapping the row */
  .sfnl-bulk{
    gap:4px;
    padding:7px 8px 7px 12px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .sfnl-bulk::-webkit-scrollbar{display:none}
  .sfnl-bulk > *{flex:none}
  .sfnl-bulk-sp{display:none}
  .sfnl-bulk button{padding:0 8px}
  .sfnl-toast{left:12px;right:12px;transform:translateY(14px);white-space:normal}
  .sfnl-toast.on{transform:none}
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .sfnl-ink,.sfnl-thumb,.sfnl-card,.sfnl-primary,.sfnl-menu,.sfnl-toast,.sfnl-tip,.sfnl-bar i,.sfnl-info,
  .sfnl-row,.sfnl-split,.sfnl-sarrow,.sfnl-split-caret svg,.sfnl-filter svg{transition:none}
  .sfnl-tablewrap,.sfnl-state,.sfnl-cards{animation:none}
  .sfnl-bulk{animation:none}
  /* The inline note fades in too, and was missing here. */
  .sfnl-note,.sfnl-trashbar{animation:none}
}

/* ==========================================================================
   NEWSLETTER › TEMPLATES BROWSER
   Filter rail + responsive gallery, rendered into the Templates tab of the
   newsletter view. Same tokens as the dashboard around it.
   ========================================================================== */
.sfnl-toolbar.is-hidden{display:none}

.sfnl-tpl{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:34px;
  align-items:start;
  animation:sfnlFade .3s var(--nl-ease) both;
}

/* ---- Filter rail --------------------------------------------------------- */
.sfnl-rail{position:sticky;top:calc(var(--sf-topbar-height) + 18px)}
.sfnl-tsearch{
  position:relative;
  display:flex;
  align-items:center;
  height:42px;
  margin-bottom:16px;
  padding:0 40px 0 15px;
  border:1px solid var(--nl-line);
  border-radius:999px;
  background:var(--nl-surface);
  transition:border-color .16s var(--nl-ease),box-shadow .16s var(--nl-ease);
}
.sfnl-tsearch:focus-within{border-color:var(--nl-accent);box-shadow:0 0 0 3px rgba(15,98,254,.12)}
.sfnl-tsearch input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  padding:0;
  background:none;
  color:var(--nl-ink);
  font:inherit;
  font-size:14px;
}
.sfnl-tsearch input::placeholder{color:var(--nl-muted)}
.sfnl-tsearch input::-webkit-search-cancel-button{display:none}
.sfnl-tsicon,.sfnl-tclear{
  position:absolute;
  right:6px;
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--nl-muted);
  transition:color .15s var(--nl-ease),background .15s var(--nl-ease);
}
.sfnl-tsicon svg,.sfnl-tclear svg{width:17px;height:17px}
.sfnl-tclear:hover{background:var(--nl-hover);color:var(--nl-ink)}

.sfnl-railrow{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:40px;
  padding:8px 12px;
  border:0;
  border-radius:0;
  background:none;
  color:var(--nl-text);
  font-size:14px;
  font-weight:600;
  text-align:left;
  transition:background .15s var(--nl-ease),color .15s var(--nl-ease);
}
.sfnl-railname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfnl-railn{flex:none;color:var(--nl-muted);font-size:12px;font-variant-numeric:tabular-nums}
.sfnl-railrow:hover{background:var(--nl-hover);color:var(--nl-ink)}
.sfnl-railrow.is-on{
  background:var(--nl-blush);
  color:var(--nl-maroon);
  font-weight:600;
}
.sfnl-railrow.is-on .sfnl-railn{color:#4589ff}
/* the strong active indicator */
.sfnl-railrow.is-on::before{
  content:"";
  position:absolute;
  left:-8px;
  top:50%;
  width:3px;
  height:22px;
  border-radius:0;
  background:var(--nl-brand);
  transform:translateY(-50%);
}
.sfnl-railrow.is-saved .sfnl-railname{font-weight:600;color:var(--nl-ink)}
.sfnl-railrow.is-saved.is-on .sfnl-railname{color:var(--nl-maroon)}
.sfnl-raildiv{height:1px;margin:14px 0;background:var(--nl-line)}
.sfnl-railnav{display:flex;flex-direction:column;gap:1px}

/* ---- Gallery header ------------------------------------------------------ */
.sfnl-gallery{min-width:0}
.sfnl-ghead{
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.sfnl-gtitles{flex:1;min-width:0}
.sfnl-gtitles h2{
  margin:0;
  font-size:24px;
  font-weight:650;
  letter-spacing:-.02em;
  color:var(--nl-ink);
}
.sfnl-gcount{margin:6px 0 0;font-size:12px;font-weight:600;color:var(--nl-muted)}
.sfnl-gacts{display:flex;align-items:center;gap:10px;flex:none}
.sfnl-kit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:0;
  background:none;
  color:var(--nl-ink);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s var(--nl-ease),border-color .15s var(--nl-ease);
}
.sfnl-kit svg{width:15px;height:15px;color:var(--nl-muted);transition:transform .2s var(--nl-ease)}
.sfnl-kit:hover{background:var(--nl-hover);border-color:var(--nl-line)}
.sfnl-kit[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---- Card grid ----------------------------------------------------------- */
.sfnl-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  animation:sfnlFade .3s var(--nl-ease) both;
}
.sfnl-tcard{
  display:flex;
  flex-direction:column;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .2s var(--nl-ease),border-color .2s var(--nl-ease),box-shadow .2s var(--nl-ease);
}
.sfnl-tcard:hover{
  transform:translateY(-3px);
  border-color:#d0e2ff;
  box-shadow:0 20px 38px -20px rgba(0,0,0,.34),0 2px 6px rgba(0,0,0,.05);
}
.sfnl-tprev{
  position:relative;
  height:270px;
  background:var(--nl-hover);
  border-bottom:1px solid var(--nl-line-soft);
  overflow:hidden;
}
.sfnl-tprev img{
  width:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
  transition:transform .4s var(--nl-ease);
}
.sfnl-tcard:hover .sfnl-tprev img{transform:scale(1.03)}
.sfnl-fav{
  position:absolute;
  top:10px;right:10px;
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:rgba(255,255,255,.94);
  color:var(--nl-muted);
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .18s var(--nl-ease),transform .18s var(--nl-ease),
             color .15s var(--nl-ease),background .15s var(--nl-ease);
}
.sfnl-fav svg{width:16px;height:16px}
.sfnl-tcard:hover .sfnl-fav,
.sfnl-fav:focus-visible,
.sfnl-fav.is-on{opacity:1;transform:none}
.sfnl-fav:hover{color:var(--nl-ink)}
.sfnl-fav.is-on{color:var(--nl-brand);border-color:#a6c8ff;background:var(--nl-blush)}
.sfnl-fav.is-on svg{fill:currentColor}

.sfnl-tmeta{display:flex;flex-direction:column;flex:1;padding:15px 16px 16px}
.sfnl-tmeta h3{
  margin:0;
  font-size:14px;
  font-weight:650;
  letter-spacing:-.012em;
  color:var(--nl-ink);
}
.sfnl-tcat{margin:4px 0 0;font-size:12px;color:var(--nl-muted);line-height:1.45}
.sfnl-tacts{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px}
.sfnl-tuse{
  height:36px;
  padding:0 14px;
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  color:var(--nl-ink);
  font-size:12px;
  font-weight:600;
  transition:background .15s var(--nl-ease),border-color .15s var(--nl-ease),
             box-shadow .15s var(--nl-ease),transform .12s var(--nl-ease);
}
.sfnl-tuse:hover{
  background:#e8e8e8;
  border-color:#d0e2ff;
  box-shadow:0 6px 16px -8px rgba(15,98,254,.45);
}
.sfnl-tuse:active{transform:translateY(1px)}
.sfnl-tprevbtn{
  height:36px;
  padding:0 4px;
  border:0;
  background:none;
  color:var(--nl-accent);
  font-size:12px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  transition:color .15s var(--nl-ease);
}
.sfnl-tprevbtn:hover{color:var(--nl-accent-ink)}

/* the create card leads the grid */
.sfnl-tcard.is-create{border-style:dashed;border-color:#c6c6c6;background:var(--nl-hover)}
.sfnl-tcard.is-create:hover{border-color:var(--nl-accent);background:#e8e8e8}
.sfnl-createart{
  display:grid;
  place-items:center;
  background:transparent;
  border-bottom-color:transparent;
  color:var(--sf-c-muted);
}
.sfnl-createart svg{
  width:74px;height:74px;
  fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;
  transition:color .2s var(--nl-ease),transform .3s var(--nl-ease);
}
.sfnl-tcard.is-create:hover .sfnl-createart svg{color:var(--nl-accent);transform:translateY(-3px)}
.sfnl-tupload{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:36px;
  padding:0 14px;
  border:1px solid var(--nl-brand);
  border-radius:999px;
  background:var(--nl-surface);
  color:var(--nl-brand);
  font-size:12px;
  font-weight:600;
  transition:background .15s var(--nl-ease),box-shadow .15s var(--nl-ease);
}
.sfnl-tupload svg{width:15px;height:15px}
.sfnl-tupload:hover{background:var(--nl-blush);box-shadow:0 6px 16px -8px rgba(15,98,254,.5)}

/* ---- Skeletons ----------------------------------------------------------- */
.sfnl-tsk{
  border:1px solid var(--nl-line);
  border-radius:0;
  background:var(--nl-surface);
  padding:0 0 16px;
  overflow:hidden;
}
.sfnl-tsk .sk{display:block;border-radius:0}
.sfnl-tsk .sk-prev{height:270px;border-radius:0;margin-bottom:15px}
.sfnl-tsk .sk-t1{width:62%;height:13px;margin:0 16px 9px}
.sfnl-tsk .sk-t2{width:40%;height:10px;margin:0 16px 18px}
.sfnl-tsk .sk-t3{width:74%;height:34px;border-radius:0;margin:0 16px}
.sfnl-modal .sfnl-ghost.is-on svg{fill:currentColor}
.sfnl-modal .sfnl-icon svg,
.sfnl-modal .sfnl-ghost svg,
.sfnl-modal .sfnl-primary svg{width:16px;height:16px}
.sfnl-modal .sfnl-primary svg{color:var(--nl-accent,#0f62fe)}

.sfnl-modal{
  position:fixed;
  inset:0;
  z-index:700;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,4vh,44px);
  background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  opacity:0;
  transition:opacity .18s var(--nl-ease,ease);
  /**
   * ⚠ **Invisible is not harmless — QA-172.**
   *
   * This is `position:fixed; inset:0; z-index:700` across the whole viewport.
   * With `opacity:0` alone it is invisible **and still fully interactive**: it
   * swallows every click, scroll and pointer event on the page while showing
   * nothing at all. A page behind one is indistinguishable from a frozen page.
   *
   * It is in that state twice in every dialog's life — for one frame before
   * `requestAnimationFrame` adds `.open`, and for the 180ms between `close()`
   * removing `.open` and the node being removed. Either window is enough to
   * eat a click. And if `.open` never arrives — a tab backgrounded before the
   * frame runs, an exception between the two — it never stops.
   *
   * `pointer-events` costs nothing and removes the whole class of fault: while
   * it is not open it cannot receive anything, whatever else goes wrong.
   */
  pointer-events:none;
}
.sfnl-modal.open{opacity:1;pointer-events:auto}
.sfnl-modal-card{
  display:flex;
  flex-direction:column;
  width:min(760px,100%);
  max-height:100%;
  border:1px solid var(--nl-line,#e0e0e0);
  border-radius:0;
  background:#fff;
  box-shadow:0 36px 90px -28px rgba(0,0,0,.55);
  transform:translateY(10px) scale(.99);
  transition:transform .2s var(--nl-ease,ease);
}
.sfnl-modal.open .sfnl-modal-card{transform:none}
.sfnl-modal-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 18px 14px 22px;
  border-bottom:1px solid var(--nl-line,#e0e0e0);
}
.sfnl-modal-head h3{margin:0;font-size:16px;font-weight:650;letter-spacing:-.015em;color:#161616}
.sfnl-modal-head p{margin:4px 0 0;font-size:12px;line-height:1.5;color:#525252}
.sfnl-modal-head > div{flex:1;min-width:0}
.sfnl-modal-body{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:var(--sf-s-6);
  background:var(--sf-c-surface);
}
/* Version-row actions — §10. Preview, Compare, Restore in the order somebody
   decides: see it, see what differs, then act. */
.sfnl-histacts{display:flex;align-items:center;gap:var(--sf-s-2);flex-shrink:0}
/* A plain note inside a dialog body — §9. Deliberately not `is-warn`: this is
   a fact about a route somebody chose on purpose, not a caution about a
   mistake. */
.sfnl-ask-note{
  margin:0 0 var(--sf-s-4);
  padding:var(--sf-s-3);
  font-size:12.5px;
  line-height:1.5;
  color:var(--sf-c-muted);
  background:var(--sf-c-surface-2,rgba(0,0,0,.03));
  border-radius:var(--sf-r-1,6px);
}
/* ── Preview width toggle and template facts — §9 step 1 ────────────────── */
.sfnl-tplpv-bar{
  display:flex;
  gap:var(--sf-s-2);
  padding:var(--sf-s-3) var(--sf-s-6) 0;
  border-bottom:1px solid var(--sf-c-line-soft);
}
.sfnl-tplpv-d{
  padding:5px 12px;
  font:inherit;
  font-size:12.5px;
  color:var(--sf-c-muted);
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  cursor:pointer;
}
.sfnl-tplpv-d.is-on{color:var(--sf-c-ink);border-bottom-color:var(--sf-c-accent,#0f62fe)}
.sfnl-tplpv-frame{margin:0 auto}
/* The facts a picture cannot answer, under the prebuilt preview's header. */
.sfnl-tplfacts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sf-s-2) var(--sf-s-6);
  margin:0;
  padding:var(--sf-s-4) var(--sf-s-6);
  border-bottom:1px solid var(--sf-c-line-soft);
}
.sfnl-tplfacts dt{font-size:11px;color:var(--sf-c-muted);text-transform:uppercase;letter-spacing:.04em}
.sfnl-tplfacts dd{margin:2px 0 0;font-size:13px;color:var(--sf-c-ink)}
.sfnl-tplfacts-p dd{color:var(--sf-c-warn-ink,#8e6a00)}
/* "optional" beside a dashboard field label — matches the builder's .st-opt. */
.sfnl-opt{margin-left:6px;font-size:11px;font-weight:400;color:var(--sf-c-muted)}
.sfnl-ask-body textarea{
  width:100%;
  padding:8px 10px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--sf-c-ink);
  background:var(--sf-c-surface);
  border:1px solid var(--sf-c-line);
  border-radius:var(--sf-r-1,6px);
  resize:vertical;
}
.sfnl-ask-body select{
  width:100%;
  padding:8px 10px;
  font:inherit;
  font-size:13px;
  color:var(--sf-c-ink);
  background:var(--sf-c-surface);
  border:1px solid var(--sf-c-line);
  border-radius:var(--sf-r-1,6px);
}
/* ── Template browse axes — §9 ───────────────────────────────────────────
   Collapsible groups under the category list. `details`/`summary` so the
   disclosure is keyboard-operable and announced without any JavaScript. */
.sfnl-axis{border-top:1px solid var(--sf-c-line-soft);padding:var(--sf-s-2) 0}
.sfnl-axis-h{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px var(--sf-s-3);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--sf-c-muted);
  cursor:pointer;
  list-style:none;
}
.sfnl-axis-h::-webkit-details-marker{display:none}
.sfnl-axis-h::after{
  content:'';
  margin-left:auto;
  width:6px;height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s ease;
}
.sfnl-axis[open] > .sfnl-axis-h::after{transform:rotate(225deg) translate(-1px,-1px)}
/* The chosen value, shown on the closed group so a collapsed filter is never
   invisible — a filter you cannot see is one you cannot undo. */
.sfnl-axis-on{
  margin-left:6px;
  padding:1px 6px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--sf-c-on-accent,#fff);
  background:var(--sf-c-accent,#0f62fe);
  border-radius:999px;
}
.sfnl-railrow.sm{padding-top:5px;padding-bottom:5px;font-size:12.5px}
.sfnl-axclear{
  display:block;
  width:calc(100% - var(--sf-s-3) * 2);
  margin:var(--sf-s-3) var(--sf-s-3) 0;
  padding:6px 10px;
  font:inherit;
  font-size:12.5px;
  color:var(--sf-c-ink);
  background:var(--sf-c-surface);
  border:1px solid var(--sf-c-line);
  border-radius:var(--sf-r-1,6px);
  cursor:pointer;
}
.sfnl-axclear:hover{background:var(--sf-c-surface-2,rgba(0,0,0,.03))}
/* ── Template folder chips — 0058 ────────────────────────────────────────
   One row above the saved cards. Each carries its count, because a filter that
   might be empty is one nobody presses twice. */
.sfnl-fchips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sf-s-2);
  padding:0 0 var(--sf-s-4);
}
.sfnl-fchip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  font:inherit;
  font-size:12.5px;
  color:var(--sf-c-ink);
  background:var(--sf-c-surface);
  border:1px solid var(--sf-c-line);
  border-radius:999px;
  cursor:pointer;
}
.sfnl-fchip:hover{background:var(--sf-c-surface-2,rgba(0,0,0,.03))}
.sfnl-fchip.is-on{
  color:var(--sf-c-on-accent,#fff);
  background:var(--sf-c-accent,#0f62fe);
  border-color:var(--sf-c-accent,#0f62fe);
}
.sfnl-fchip-n{
  font-size:11px;
  /* Tabular so the counts do not shift the chips as they change. */
  font-variant-numeric:tabular-nums;
  opacity:.7;
}
.sfnl-fchips-sp{flex:1 1 auto}
.sfnl-farch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--sf-c-muted);
  cursor:pointer;
}
/* ── Saved-template preview — §9 ─────────────────────────────────────────
   The frame carries the workspace's real design, so it gets the page's own
   ground rather than the modal surface: an email on a tinted panel reads as
   part of the product chrome, and the point of a preview is that it does not. */
.sfnl-tplpv{display:flex;flex-direction:column;gap:var(--sf-s-4);padding:0}
.sfnl-tplpv-frame{
  display:block;
  width:100%;
  /* Tall enough to judge a layout, bounded so the modal never outgrows the
     viewport on a laptop. The frame scrolls inside itself. */
  height:min(70vh,720px);
  border:0;
  background:#fff;
}
.sfnl-tplpv-load{
  margin:0;
  padding:var(--sf-s-6);
  font-size:13.5px;
  color:var(--sf-c-muted);
  text-align:center;
}
.sfnl-tplpv-warn{
  margin:0;
  padding:var(--sf-s-4) var(--sf-s-6);
  font-size:13px;
  color:var(--sf-c-ink);
  background:var(--sf-c-warn-soft,#fcf4d6);
  border-top:1px solid var(--sf-c-line-soft);
}
.sfnl-modal-body img{
  display:block;
  width:min(420px,100%);
  margin:0 auto;
  border:1px solid rgba(0,0,0,.08);
  border-radius:0;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.45);
}
.sfnl-modal-foot{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-top:1px solid var(--nl-line,#e0e0e0);
}
.sfnl-modal-spacer{flex:1}
.sfnl-modal-foot .sfnl-ghost.is-on{
  border-color:#a6c8ff;
  background:var(--nl-blush,#edf5ff);
  color:#0043ce;
}
.sfnl-modal-foot .sfnl-ghost.is-on svg{fill:currentColor}

/* ---- Hand-off to the builder --------------------------------------------- */
.sfnl-handoff{
  position:fixed;
  inset:0;
  z-index:800;
  display:grid;
  place-items:center;
  background:rgba(251,252,253,.82);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .2s var(--nl-ease,ease);
}
.sfnl-handoff.open{opacity:1}
.sfnl-handoff-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:30px 40px 32px;
  border:1px solid #e0e0e0;
  border-radius:0;
  background:#fff;
  box-shadow:0 28px 64px -26px rgba(0,0,0,.4);
  text-align:center;
}
.sfnl-handoff-card strong{font-size:14px;font-weight:650;color:#161616}
.sfnl-handoff-card small{font-size:12px;color:#525252}
.sfnl-spinner{
  width:30px;height:30px;
  margin-bottom:12px;
  border-radius:50%;
  border:2.5px solid #edf5ff;
  border-top-color:#0f62fe;
  animation:sfnlSpin .7s linear infinite;
}
@keyframes sfnlSpin{to{transform:rotate(360deg)}}
/* ---- Dark ---------------------------------------------------------------- */


/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1500px){
  .sfnl-tpl{grid-template-columns:214px minmax(0,1fr);gap:26px}
}
@media (max-width:1240px){
  .sfnl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  /* the rail stops being a column and becomes a scrolling chip row */
  .sfnl-tpl{grid-template-columns:minmax(0,1fr);gap:20px}
  .sfnl-rail{position:static}
  .sfnl-raildiv{display:none}
  .sfnl-railnav{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .sfnl-railnav::-webkit-scrollbar{display:none}
  .sfnl-railrow{
    width:auto;
    flex:none;
    min-height:36px;
    border:1px solid var(--nl-line);
    border-radius:999px;
  }
  .sfnl-railrow.is-on::before{display:none}
  .sfnl-railrow.is-on{border-color:#a6c8ff}
  .sfnl-railrow.is-saved{margin-bottom:10px}
  .sfnl-ghead{align-items:flex-start}
}
@media (max-width:620px){
  .sfnl-grid{grid-template-columns:minmax(0,1fr)}
  .sfnl-ghead{flex-direction:column;align-items:stretch;gap:14px}
  /* the kit switch and the primary each get their own line rather than clipping */
  .sfnl-gacts{width:100%;flex-wrap:wrap;gap:8px}
  .sfnl-gacts .sfnl-kit{flex:1 1 100%;justify-content:space-between;border-color:var(--nl-line)}
  .sfnl-gacts .sfnl-primary{flex:1 1 100%;justify-content:center}
  .sfnl-tprev{height:230px}
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .sfnl-tcard,.sfnl-tprev img,.sfnl-fav,.sfnl-tuse,.sfnl-railrow,
  .sfnl-modal,.sfnl-modal-card,.sfnl-handoff,.sfnl-kit svg{transition:none}
  .sfnl-tpl,.sfnl-grid{animation:none}
  .sfnl-tsk .sk{display:block;border-radius:0}
  .sfnl-spinner{animation-duration:1.6s}
}

/* ==========================================================================
   NEWSLETTER › FOLDERS
   User-created folders only — no defaults. Campaigns are either in a folder
   or Unfiled, and deleting a folder returns its campaigns to Unfiled.
   ========================================================================== */
.sfnl-menu button.is-disabled{
  color:#a6c8ff;
  cursor:default;
  pointer-events:none;
}

/* the Last updated by cell is a plain name now */
.sfnl-c-user .sfnl-uname{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--nl-text);
  font-size:12px;
  font-weight:600;
}

/* ---- Compact modal shared by the folder manager and the name prompt ------ */
.sfnl-modal-card.sm{width:min(460px,100%)}
.sfnl-ask-body{padding:20px 22px 4px}
/* ---- Form fields ---------------------------------------------------------
   Promoted out of the folder dialog so every surface writes the same input.
   `.sfnl-ask-label` and `.sfnl-ask-body input` are kept as aliases so the
   newsletter's existing markup keeps working unchanged. */
.sfnl-fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sf-s-5) var(--sf-s-4)}
/* One column once two stop fitting. This belongs with the component, not with
   whichever feature happened to need it first — it used to live in
   contacts.css, so every other feature's forms stayed two-up on a phone. */
@media (max-width:860px){
  .sfnl-fieldgrid{grid-template-columns:1fr}
}
.sfnl-field{display:flex;flex-direction:column;gap:var(--sf-s-1);min-width:0}
.sfnl-field > span{color:var(--sf-c-text);font-size:var(--sf-fs-xs);font-weight:400;line-height:1.34}
.sfnl-field.wide,.sfnl-fieldgrid > .wide{grid-column:1/-1}
.sfnl-field > span,
.sfnl-ask-label{
  display:block;
  margin-bottom:0;
  color:var(--nl-text,#525252);
  font-size:12px;
  font-weight:600;
}
.sfnl-ask-label{margin-bottom:7px}
.sfnl-field > span i{margin-left:5px;color:var(--sf-c-danger);font-style:normal;font-size:12px;font-weight:600}
.sfnl-hint{color:var(--sf-c-muted);font-size:var(--sf-fs-xs);font-style:normal;line-height:1.34}
.sfnl-err{color:var(--sf-c-danger-ink);font-size:var(--sf-fs-xs);font-style:normal;line-height:1.34}

/* ---- text input: the Carbon field ---------------------------------------
   A shaded field on a light surface with a single strong rule underneath —
   Carbon draws the affordance with one border, not a box. Focus is a solid
   2px ring drawn inside the field, never a soft glow. */
.sfnl-input,
.sfnl-ask-body input{
  width:100%;
  height:40px;
  padding:0 var(--sf-s-4);
  border:0;
  border-bottom:1px solid var(--sf-c-strong);
  border-radius:0;
  background:var(--sf-c-soft);
  color:var(--sf-c-ink);
  font:inherit;
  font-size:var(--sf-fs-md);
  transition:background var(--sf-t-fast) var(--sf-ease),
             border-color var(--sf-t-fast) var(--sf-ease);
}
.sfnl-input::placeholder{color:var(--sf-c-faint)}
.sfnl-input:hover,
.sfnl-ask-body input:hover{background:var(--sf-c-hover)}
select.sfnl-input{cursor:pointer}
textarea.sfnl-input{height:auto;padding:var(--sf-s-3) var(--sf-s-4);line-height:var(--sf-lh-body);resize:vertical}
.sfnl-input:focus,
.sfnl-ask-body input:focus{
  outline:2px solid var(--sf-c-accent);
  outline-offset:-2px;
  background:var(--sf-c-soft);
}
.sfnl-input.is-bad{
  outline:2px solid var(--sf-c-danger);
  outline-offset:-2px;
  border-bottom-color:var(--sf-c-danger);
}
.sfnl-input:disabled{
  border-bottom-color:transparent;
  color:var(--sf-c-faint);
  cursor:not-allowed;
}
.sfnl-ask-err{
  margin:8px 0 0;
  color:#a2191f;
  font-size:12px;
  font-weight:600;
}

/* ---- Folder manager ------------------------------------------------------ */
.sfnl-fold-body{
  flex:1;
  min-height:0;
  max-height:44vh;
  overflow:auto;
  padding:14px 16px 6px;
}
.sfnl-fold-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sfnl-fold-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:6px 8px 6px 10px;
  border-radius:0;
  transition:background .15s var(--nl-ease,ease);
}
.sfnl-fold-row:hover{background:var(--nl-hover,#f4f4f4)}
.sfnl-fold-ic{display:flex;flex:none;color:var(--nl-muted,#8d8d8d)}
.sfnl-fold-ic svg{width:17px;height:17px}
.sfnl-fold-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#161616;
  font-size:14px;
  font-weight:600;
}
.sfnl-fold-n{
  flex:none;
  min-width:24px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--nl-soft,#f4f4f4);
  color:var(--nl-muted,#8d8d8d);
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.sfnl-fold-row .sfnl-icon{flex:none;opacity:0;transition:opacity .15s var(--nl-ease,ease)}
.sfnl-fold-row:hover .sfnl-icon,
.sfnl-fold-row .sfnl-icon:focus-visible{opacity:1}
/* no hover on touch — the actions have to be there from the start */
@media (hover:none){.sfnl-fold-row .sfnl-icon{opacity:1}}
.sfnl-icon.danger:hover{background:#fff1f1;color:#a2191f;border-color:#ffd7d9}

/* inline delete confirmation, in place of the row */
.sfnl-fold-row.is-confirm{
  background:#fff1f1;
  border:1px solid #ffd7d9;
  padding:8px 10px;
}
.sfnl-fold-warn{flex:1;min-width:0;color:#a2191f;font-size:12px;font-weight:600;line-height:1.4}
.sfnl-ghost.sm,.sfnl-danger.sm{height:32px;padding:0 12px;font-size:12px;flex:none}
.sfnl-danger{
  display:inline-flex;
  align-items:center;
  height:38px;
  padding:0 14px;
  border:1px solid #da1e28;
  border-radius:0;
  background:#da1e28;
  color:#fff;
  font-size:12px;
  font-weight:600;
  transition:background .15s var(--nl-ease,ease),box-shadow .15s var(--nl-ease,ease);
}
.sfnl-danger:hover{background:#a2191f;box-shadow:0 6px 16px -8px rgba(218,30,40,.6)}

.sfnl-fold-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:30px 20px 34px;
}
.sfnl-fold-empty .sfnl-state-ic{margin-bottom:14px}
.sfnl-fold-empty strong{font-size:14px;font-weight:650;color:#161616}
.sfnl-fold-empty p{margin:5px 0 0;max-width:32ch;font-size:12px;line-height:1.5;color:var(--nl-text,#525252)}

/* the folder chip on each campaign row */
.sfnl-sub svg{flex:none}
/* ---- Dark ---------------------------------------------------------------- */


@media (prefers-reduced-motion:reduce){
  .sfnl-fold-row,.sfnl-fold-row .sfnl-icon,.sfnl-ask-body input,.sfnl-danger{transition:none}
}

/* ==========================================================================
   NEWSLETTER › TRASH
   Deleted campaigns wait 30 days here before being purged automatically.
   ========================================================================== */
/* count badge on the Trash tab */
.sfnl-tabn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:19px;
  height:19px;
  margin-left:7px;
  padding:0 6px;
  border-radius:999px;
  background:var(--nl-soft,#f4f4f4);
  color:var(--nl-muted);
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  vertical-align:1px;
  transition:background .15s var(--nl-ease),color .15s var(--nl-ease);
}
.sfnl-tabs button.is-on .sfnl-tabn{background:var(--nl-blush);color:#0043ce}
.sfnl-tabn[hidden]{display:none}

/* retention notice above the table */
/* An inline note. `.sfnl-trashbar` is the warning variant under its original
   name, so existing markup is untouched. */
.sfnl-note,
.sfnl-trashbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:12px 12px 12px 15px;
  border:1px solid var(--nl-line,#e0e0e0);
  border-radius:0;
  background:var(--nl-soft,#f4f4f4);
  color:var(--nl-text,#525252);
  font-size:12px;
  line-height:1.55;
  animation:sfnlFade .3s var(--nl-ease) both;
}
.sfnl-note.is-warn,
.sfnl-trashbar{border-color:#f1c21b;background:#fcf4d6}
.sfnl-note > svg{width:16px;height:16px;flex:none;color:var(--nl-muted,#8d8d8d)}
.sfnl-note.is-warn > svg{color:#8e6a00}
.sfnl-trashbar-ic{
  display:grid;
  place-items:center;
  width:32px;height:32px;flex:none;
  border-radius:0;
  background:#fcf4d6;
  color:#8e6a00;
}
.sfnl-trashbar-ic svg{width:17px;height:17px}
.sfnl-trashbar p{
  flex:1;
  min-width:0;
  margin:0;
  color:#684e00;
  font-size:12px;
  line-height:1.5;
}
.sfnl-trashbar p b{font-weight:600}
.sfnl-trashbar .sfnl-ghost{flex:none;background:#fff;border-color:#f1c21b;color:#684e00}
.sfnl-trashbar .sfnl-ghost:hover{background:#fcf4d6;border-color:#f1c21b;color:#684e00}

/* the auto-removes column */

.sfnl-table td.sfnl-c-expiry{white-space:nowrap}
.sfnl-expiry{
  display:inline-flex;
  align-items:center;
  height:23px;
  padding:0 9px;
  border-radius:0;
  background:var(--nl-soft,#f4f4f4);
  color:var(--nl-text);
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sfnl-expiry.is-soon{background:#fff1f1;color:#a2191f}

/* row actions */
.sfnl-tuse.sm{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 11px;
  font-size:12px;
}
.sfnl-tuse.sm svg{width:14px;height:14px}

/* Trash has no folders and a fixed column set */
.sfnl-toolbar.is-trash [data-filter="folder"],
.sfnl-toolbar.is-trash #sfnlCols,
.sfnl-toolbar.is-trash #sfnlAnalytics{display:none}
/* ---- Dark ---------------------------------------------------------------- */


@media (max-width:900px){
  .sfnl-trashbar{align-items:flex-start;flex-wrap:wrap}
  .sfnl-trashbar p{flex:1 1 100%;order:2}
  .sfnl-trashbar .sfnl-ghost{order:3;margin-left:44px}
}
@media (prefers-reduced-motion:reduce){
  .sfnl-trashbar{animation:none}
  .sfnl-tabn{transition:none}
}

/* ---- Touch targets -------------------------------------------------------
   A few controls are sized by their text — a sort label, an info dot, a name
   in a cell. On a finger they measure 16–22px tall. Grow the hit area
   vertically only: horizontally they sit beside other columns, and a wider
   target there would steal their taps. */
@media (pointer:coarse){
  .sfnl-sortbtn,
  .sfnl-info,
  .sfnl-linkbtn,
  .sfct-exp{position:relative}
  .sfnl-sortbtn::after,
  .sfnl-info::after,
  .sfnl-linkbtn::after,
  .sfct-exp::after{
    content:"";
    position:absolute;
    left:0;right:0;top:50%;
    height:44px;
    transform:translateY(-50%);
  }
}

/* ==========================================================================
   Shared data-table column chrome (see /sf-datatable.js)
   Sort, resize, reorder, pin, hide — one implementation, used by every
   dashboard table. Table shell, rows and cells stay with .sfnl-table.
   ========================================================================== */
.sf-th{position:relative}
.sf-th.is-pin,.sf-td.is-pin{position:sticky;z-index:2;background:var(--nl-surface,#fff)}
.sf-th.is-pin{z-index:4;background:var(--nl-soft,#f4f4f4)}
.sf-th.is-pin::after,.sf-td.is-pin::after{
  content:"";position:absolute;top:0;right:-1px;bottom:0;width:1px;
  background:var(--nl-line,#e0e0e0);
}
.sfnl-row:hover .sf-td.is-pin{background:var(--nl-hover,#e8e8e8)}
.sfnl-row.is-sel .sf-td.is-pin{background:#edf5ff}

/* the caret that opens a column's own menu */
.sf-hmenu{
  display:grid;place-items:center;
  width:20px;height:20px;margin-left:2px;flex:none;
  border:0;border-radius:0;background:none;
  color:var(--nl-muted,#8d8d8d);cursor:pointer;
  opacity:0;
  transition:opacity .13s var(--nl-ease,ease),background .13s var(--nl-ease,ease);
}
.sf-hmenu svg{width:13px;height:13px}
.sf-th:hover .sf-hmenu,.sf-hmenu:focus-visible{opacity:1}
.sf-hmenu:hover{background:rgba(0,0,0,.07);color:var(--nl-ink,#161616)}

/* the grip that drags a column to a new position */
.sf-colgrip{
  position:absolute;left:0;top:0;bottom:0;width:14px;
  cursor:grab;touch-action:none;
}
.sf-colgrip::after{
  content:"";position:absolute;left:4px;top:12px;bottom:12px;width:3px;
  border-radius:0;background:var(--nl-line,#e0e0e0);
  opacity:0;transition:opacity .13s var(--nl-ease,ease);
}
.sf-th:hover .sf-colgrip::after{opacity:1}
.sf-th.is-moving{opacity:.5}
.sf-th.is-drop-before::before,
.sf-th.is-drop-after::before{
  content:"";position:absolute;top:6px;bottom:6px;width:2px;
  border-radius:0;background:var(--nl-accent,#0f62fe);z-index:6;
}
.sf-th.is-drop-before::before{left:-1px}
.sf-th.is-drop-after::before{right:-1px}
body.sf-colmoving{cursor:grabbing;user-select:none}
body.sf-colmoving .sf-colgrip{cursor:grabbing}

/* the handle that resizes it */
.sf-resize{
  /* fully inside the cell: on the boundary the next sticky header wins the
     hit test and the handle cannot be grabbed */
  position:absolute;top:0;right:0;bottom:0;width:10px;z-index:6;
  cursor:col-resize;touch-action:none;
}
.sf-resize::after{
  content:"";position:absolute;top:9px;bottom:9px;right:1px;width:2px;border-radius:0;
  background:transparent;transition:background .13s var(--nl-ease,ease);
}
.sf-resize:hover::after,.sf-resize:focus-visible::after{background:var(--nl-accent,#0f62fe)}
body.sf-resizing{cursor:col-resize;user-select:none}

/* the + that opens the column list from the header */


/* ==========================================================================
   Carbon component conventions
   Loads last, so it settles the handful of places where Carbon's rules differ
   from the ones this stylesheet grew up with: tags are the only round thing,
   primary is blue rather than near-black, and selection is a grey fill with a
   blue indicator rather than a tinted wash.
   ========================================================================== */

/* ---- Tags are Carbon's one rounded component --------------------------- */
.sfnl-badge,.sfnl-pill,.sfct-tag,.sf-tag,.st-chip,.st-meta-badge{
  border-radius:var(--sf-r-pill);
  font-size:12px;
  font-weight:400;
  letter-spacing:.32px;
}

/* ---- Primary action: Carbon blue, square, 40px -------------------------
   The nav's New button keeps brand blue on the dark chrome — white on
   #0f62fe is 4.6:1, so the brand colour carries the primary action unchanged. */
.sf-create,.sf-new-button{
  background:var(--sf-nav-brand);
  color:var(--sf-nav-on-brand);
  border:0;
  border-radius:0;
  min-height:40px;
  font-weight:400;
  box-shadow:none;
}
.sf-create:hover,.sf-new-button:hover{background:var(--sf-nav-brand-hover);box-shadow:none}
.sf-create:active,.sf-new-button:active{background:var(--sf-nav-brand-active)}

/* ---- Selection: layer fill + 3px indicator -----------------------------
   Carbon's selected row is a layer step, not a tint. On the dark chrome that
   is layer-selected-01, and the indicator steps to blue-50 — the same brand
   hue at 5.1:1 against #161616, where blue-60 would sit at 2.4:1. */
.sf-pn-row.active,
html.sf-home-shell .sf-pn-row.active,
html.sf-appnav .sf-sidebar .sf-pn-row.active{
  background:var(--sf-nav-selected);
  color:var(--sf-nav-ink);
  font-weight:600;
}
.sf-pn-row.active .sf-pn-ic,
html.sf-home-shell .sf-pn-row.active .sf-pn-ic{color:var(--sf-nav-accent)}
.sf-pn-row.active::before,
html.sf-home-shell .sf-pn-row.active::before,
html.sf-appnav .sf-sidebar .sf-pn-row.active::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;height:auto;
  margin:0;
  border-radius:0;
  background:var(--sf-nav-accent);
  transform:none;
}
.sf-pn-row:hover{background:var(--sf-nav-hover)}

/* ---- Focus: a solid 2px ring, never a soft glow ------------------------
   White inside the navigation (Carbon's g100 focus, 18:1 on the chrome);
   blue everywhere else, where the surface is light. */
.sfnl-btn:focus-visible,.sfnl-row:focus-visible{
  outline:2px solid var(--sf-c-brand);
  outline-offset:-2px;
  box-shadow:none;
}
.sf-pn-row:focus-visible,.sf-create:focus-visible,.sf-top-icon:focus-visible{
  outline:2px solid var(--sf-nav-focus);
  outline-offset:-2px;
  box-shadow:none;
}

/* Carbon selects table rows with a grey layer, not a blue wash. */
.sfnl-row.is-sel,.sfct-row.is-sel{background:#e0e0e0}
.sfnl-row.is-sel:hover,.sfct-row.is-sel:hover{background:#d1d1d1}
.sfnl-row.is-sel .sf-td.is-pin{background:#e0e0e0}

/* ==========================================================================
   Campaigns table — the Contacts treatment
   Campaigns looked cluttered next to Contacts for reasons that had nothing to
   do with what it contains: every header carried a permanent info glyph and a
   permanent sort arrow, and the table ran past the fold with its header
   scrolling away. Contacts does none of that, so Campaigns now does the same.

   Contacts is the reference and is not touched. Anything shared between the
   two is left at Contacts' value; the only rules here are ones Contacts has
   no equivalent for, plus the two it already applies to itself.
   ========================================================================== */

/* ---- headers: label first, affordances on approach ---------------------- */
/* Contacts declares no tips, so it renders no info buttons at all. Campaigns'
   tips are real copy and worth keeping, so the trigger stays in the DOM and
   stays keyboard-reachable — it just doesn't paint until the header is
   hovered or the button itself is focused. */
.sfnl-table thead .sfnl-info{
  opacity:0;
  transition:opacity .13s var(--nl-ease),color .15s var(--nl-ease),
             background .15s var(--nl-ease);
}
.sfnl-table thead th:hover .sfnl-info,
.sfnl-table thead .sfnl-info:focus-visible,
.sfnl-table thead .sfnl-info:hover{opacity:1}

/* No hover arrow hint. In the right-aligned numeric headers the empty arrow
   span sits inside the info button's box, so a pseudo-element on it painted
   the glyph straight over the info icon. Contacts shows nothing on unsorted
   columns either, so the hint simply goes. */

/* ---- the preview, at a weight that suits the row ------------------------ */
/* Campaigns-only: Contacts has no thumbnail. Kept, but without the lift and
   drop shadow, which were the last of the pre-Carbon styling in this table. */
.sfnl-thumb{width:40px;height:50px;box-shadow:none}
.sfnl-row:hover .sfnl-thumb{transform:none;box-shadow:none}

/* ---- the header holds while the body scrolls ---------------------------- */
/* Same behaviour and the same offset Contacts uses for .sfct-wrap. */
.sfnl-tablewrap.is-scroll{
  overflow:auto;
  max-height:calc(100vh - 320px);
}
.sfnl-tablewrap.is-scroll .sfnl-table thead th{
  position:sticky;
  top:0;
  z-index:3;
}
/* The rule above is more specific than the pin rules, so it was flattening
   every header cell to the same z-index. Header cells share a stacking
   context, so the later ones in the DOM — the scrolling columns — painted
   straight over the pinned ones, and the header read `edited | Status | …`
   while the body still showed the pinned checkbox and Email name beneath it.
   The pinned header cells are restated here, at the same specificity. */
.sfnl-tablewrap.is-scroll .sfnl-table thead th.is-pin{z-index:5}
.sfnl-tablewrap.is-scroll .sfnl-table thead th.sfnl-c-check{z-index:6}
.sfnl-tablewrap.is-scroll .sfnl-table thead th.sfnl-c-act{z-index:6}


/* ==========================================================================
   Shared dashboard table frame
   Contacts and Campaigns render the same table: a sticky select column, the
   configurable columns from SFTable in the middle, and a sticky action column
   on the right. These rules were written for Contacts only; they are the frame
   itself, so they belong to every table that uses it.
   ========================================================================== */
.sfnl-table{min-width:1040px}

/* Configurable cells truncate rather than run under the pinned action column.
   Every cell the controller emits carries .sf-td, so this covers both tables
   and only the columns the controller owns. */
.sfnl-table tbody td.sf-td{overflow:hidden;text-overflow:ellipsis}

/* the select column holds its place while the rest scrolls sideways */
.sfnl-table thead .sfnl-c-check{
  position:sticky;left:0;z-index:5;background:var(--nl-soft,#f4f4f4);
}
.sfnl-table tbody .sfnl-c-check{
  position:sticky;left:0;z-index:2;background:var(--nl-surface,#fff);
}
.sfnl-row:hover .sfnl-c-check{background:var(--nl-hover,#e8e8e8)}
.sfnl-row.is-sel .sfnl-c-check{background:#e0e0e0}

/* and so does the action column, on the right. It sits over the columns as
   they scroll under it, so it carries a hairline on its leading edge —
   otherwise the column beneath reads as clipped rather than overlapped. */
.sfnl-table thead .sfnl-c-act{
  position:sticky;right:0;z-index:5;background:var(--nl-soft,#f4f4f4);
}
.sfnl-table tbody .sfnl-c-act{
  position:sticky;right:0;z-index:2;background:var(--nl-surface,#fff);
}
/* Only while columns actually pass underneath it. On a table that fits its
   container the hairline has nothing to separate and reads as a stray
   full-height line. `is-xscroll` is set by the shared overflow watcher. */
.is-xscroll .sfnl-table thead .sfnl-c-act,
.is-xscroll .sfnl-table tbody .sfnl-c-act{
  border-left:1px solid var(--nl-line,#e0e0e0);
}
.sfnl-row:hover .sfnl-c-act{background:var(--nl-hover,#e8e8e8)}
.sfnl-row.is-sel .sfnl-c-act{background:#e0e0e0}

/* ---- footer: rows-per-page and paging ----------------------------------- */
.sfnl-foot{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 2px 0;
  color:var(--nl-text,#525252);font-size:12px;
}
.sfnl-foot[hidden]{display:none}
.sfnl-foot-sum b{color:var(--nl-ink,#161616);font-weight:600}
.sfnl-per{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--nl-muted,#8d8d8d)}
.sfnl-per select{
  height:32px;padding:0 8px;
  border:1px solid var(--nl-line,#e0e0e0);border-radius:0;
  background:var(--nl-surface,#fff);color:var(--nl-ink,#161616);
  font:inherit;font-size:12px;cursor:pointer;
}
.sfnl-pager{display:flex;align-items:center;gap:8px}
.sfnl-pager button{
  display:grid;place-items:center;
  width:30px;height:30px;
  border:1px solid var(--nl-line,#e0e0e0);border-radius:0;
  background:var(--nl-surface,#fff);color:var(--nl-text,#525252);cursor:pointer;
  transition:background .13s var(--sf-ease),border-color .13s var(--sf-ease);
}
.sfnl-pager button:hover:not(:disabled){background:var(--nl-hover,#e8e8e8);border-color:#c6c6c6}
.sfnl-pager button:disabled{opacity:.4;cursor:default}
.sfnl-pager button svg{width:15px;height:15px}
.sfnl-pager button[data-pg="prev"] svg{transform:rotate(180deg)}
.sfnl-pager b{color:var(--nl-ink,#161616)}


/* ---- below 720px the table stops being a table --------------------------
   One card per row, for both dashboards. The mechanism is shared; which
   columns survive into the card is configuration — a column opts in with
   `is-card` in its definition's cls, and lands in the next free row of the
   middle grid column. `tr` is deliberately left out of the display:block
   rule: `.sfnl-table tr` would outrank `.sfnl-row` and the grid below would
   never apply.                                                             */
@media (max-width:720px){
  .sfnl-table,.sfnl-table tbody,.sfnl-table td{display:block;width:auto;min-width:0}
  .sfnl-table thead{display:none}
  .sfnl-table{min-width:0}
  .sfnl-row{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto auto;
    align-items:center;gap:3px 10px;
    margin-bottom:8px;padding:12px;
    border:1px solid var(--nl-line,#e0e0e0);
    background:var(--nl-surface,#fff);
  }
  .sfnl-row td{border:0!important;padding:0!important;height:auto!important;white-space:normal}
  .sfnl-c-check{grid-column:1;grid-row:1/4;width:auto!important;padding:0!important;position:static!important}
  .sfnl-c-act{
    grid-column:3;grid-row:1/4;width:auto!important;text-align:right;
    position:static!important;border-left:0!important;
  }
  /* a card carries only the columns its dashboard nominates */
  .sfnl-table td.sf-td{display:none!important}
  .sfnl-table td.sf-td.is-card{display:block!important;grid-column:2;overflow:visible;text-overflow:clip}
  .sfnl-tablewrap.is-scroll{max-height:none;overflow:visible}
}


/* ---- a link that reads as text ------------------------------------------
   For cells where the value is the content and the link is incidental — an
   email address is read far more often than it is clicked. It stays a real
   link: underlined on hover and focus, and it keeps the accent colour there
   so the affordance is unambiguous. */
.sfnl-link.is-quiet{
  color:var(--nl-ink,#161616);
  font-weight:400;
  text-decoration:none;
}
.sfnl-link.is-quiet:hover,
.sfnl-link.is-quiet:focus-visible{
  color:var(--nl-accent,#0f62fe);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* the shared menu's optional sub-line, used for option descriptions */
.sfnl-menu .ml em{
  display:block;margin-top:1px;
  color:var(--nl-muted,#8d8d8d);
  font-size:12px;font-style:normal;font-weight:400;
}


/* ==========================================================================
   Column header: title first, affordances second
   The sort button shrinks with its column but its text did not truncate, so
   it overflowed and the info and menu buttons — painted after it — landed on
   top of the column title. The label now truncates in its own element, and
   the affordances sit in a reserved gutter that only opens on hover, so at
   rest the title gets the full width and is never covered.
   ========================================================================== */
.sfnl-hlabel{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sfnl-sortbtn{min-width:0;overflow:hidden}
.sfnl-headlbl{min-width:0;overflow:hidden;display:block}

/* the gutter: absent until the header is hovered or something in it is focused */
.sfnl-table thead .sfnl-th{
  position:relative;
  padding-right:8px;
  transition:padding-right .13s var(--nl-ease);
}
.sfnl-table thead th:hover .sfnl-th,
.sfnl-table thead th:focus-within .sfnl-th{padding-right:38px}
.sfnl-table thead .sfnl-info,
.sfnl-table thead .sf-hmenu{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}
.sfnl-table thead .sfnl-info{right:20px;width:18px;height:18px}
.sfnl-table thead .sf-hmenu{right:2px;margin-left:0;width:18px;height:18px}

/* the action column's own title */
.sfnl-table thead .sfnl-c-act .sfnl-th{
  justify-content:flex-end;
  padding:0 14px 0 8px!important;   /* no affordances here, so no gutter */
}

/* ---- a split button sized like the ghost button beside it ---------------
   Both sit in the toolbar and must read as one control family. */
.sfnl-toolbar .sfnl-split .sfnl-split-main{
  height:36px;
  padding:0 12px;
  font-size:12px;
  font-weight:600;
}
.sfnl-toolbar .sfnl-split .sfnl-split-caret{width:30px}
.sfnl-toolbar .sfnl-split .sfnl-split-main svg,
.sfnl-toolbar .sfnl-split .sfnl-split-caret svg{width:16px;height:16px}


/* ==========================================================================
   Row actions
   The split button was being flex-shrunk below its natural width, and because
   it clips to its own border it swallowed the chevron: the caret's box ended
   15px past the button that contained it. Nothing in the group shrinks now,
   and the column is wide enough for the group at its natural size.
   ========================================================================== */
.sfnl-rowact{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--sf-s-2);
  flex-wrap:nowrap;
}
.sfnl-rowact > *{flex:none}
.sfnl-rowact .sfnl-split{flex:none;min-width:0}
.sfnl-rowact .sfnl-split-main{flex:none;white-space:nowrap}
.sfnl-rowact .sfnl-split-caret{flex:none}
/* every row lines its controls up on the same centre line */
.sfnl-table td.sfnl-c-act{vertical-align:middle}


/* ==========================================================================
   Required markers, disabled actions, and next-step cards
   ========================================================================== */

/* A required field is marked with a red asterisk and nothing else. The mark
   is decorative — `aria-required` on the input is what a screen reader reads,
   so the meaning does not depend on seeing the colour. */
.sfnl-req{
  color:var(--nl-danger,#da1e28);
  font-weight:600;
}
.sfnl-field .sfnl-err:empty{display:none}

/* a primary action that cannot yet be taken reads as unavailable, not broken */
.sfnl-primary:disabled,
.sfnl-primary[disabled]{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}
.sfnl-primary:disabled:hover{background:var(--nl-accent,#0f62fe)}

/* ---- confirmation ------------------------------------------------------- */
.sfnl-okmark{
  display:flex;
  align-items:center;
  gap:var(--sf-s-3);
  padding:var(--sf-s-4) var(--sf-s-5);
  border:1px solid var(--nl-ok-line,#a7f0ba);
  background:var(--nl-ok-soft,#defbe6);
  color:var(--nl-ok,#24a148);
}
.sfnl-okmark svg{width:20px;height:20px;flex:none}
.sfnl-okmark p{
  margin:0;
  color:var(--nl-ink,#161616);
  font-size:var(--sf-fs-md);
}

/* ---- next-step cards ---------------------------------------------------- */
.sfnl-nextlist{
  display:flex;
  flex-direction:column;
  gap:var(--sf-s-2);
  margin-top:var(--sf-s-5);
}
.sfnl-nextcard{
  display:flex;
  align-items:center;
  gap:var(--sf-s-4);
  width:100%;
  padding:var(--sf-s-4) var(--sf-s-4);
  border:1px solid var(--nl-line,#e0e0e0);
  border-radius:0;
  background:var(--nl-surface,#fff);
  text-align:left;
  cursor:pointer;
  transition:background .13s var(--sf-ease),border-color .13s var(--sf-ease);
}
.sfnl-nextcard:hover{
  background:var(--nl-hover,#e8e8e8);
  border-color:var(--nl-accent,#0f62fe);
}
.sfnl-nextcard:focus-visible{
  outline:2px solid var(--nl-accent,#0f62fe);
  outline-offset:-2px;
}
.sfnl-nextcard-ic{
  display:grid;
  place-items:center;
  width:36px;height:36px;flex:none;
  background:var(--nl-accent-soft,#edf5ff);
  color:var(--nl-accent,#0f62fe);
}
.sfnl-nextcard-ic svg{width:18px;height:18px}
.sfnl-nextcard-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sfnl-nextcard-txt strong{
  color:var(--nl-ink,#161616);
  font-size:var(--sf-fs-md);
  font-weight:600;
}
.sfnl-nextcard-txt em{
  color:var(--nl-muted,#8d8d8d);
  font-size:12px;
  font-style:normal;
  line-height:1.45;
}
.sfnl-nextcard-go{
  display:grid;place-items:center;
  flex:none;
  color:var(--nl-muted,#8d8d8d);
  transition:color .13s var(--sf-ease),transform .13s var(--sf-ease);
}
.sfnl-nextcard-go svg{width:16px;height:16px}
.sfnl-nextcard:hover .sfnl-nextcard-go{color:var(--nl-accent,#0f62fe);transform:translateX(2px)}

@media (max-width:560px){
  .sfnl-nextcard{align-items:flex-start}
  .sfnl-nextcard-go{display:none}
}


/* `hidden` is only a UA `display:none`, so any author display rule beats it.
   The modal footer sets display:flex, which left the form's buttons on screen
   underneath the success view. Same trap the pagination footer had. */
.sfnl-modal-foot[hidden]{display:none}


/* ---- a checkbox with an explanation beside it ---------------------------
   The neutral sibling of .sfct-consent: same shape, no warning colour, for a
   choice that changes what the form does rather than warning about it. */
/* Just the box, its label and a quiet line of help — no panel around it.
   A checkbox that changes what the form does is part of the form, not a
   callout sitting on top of it. */
.sfnl-checkrow{
  display:flex;
  align-items:flex-start;
  gap:var(--sf-s-3);
  margin-top:var(--sf-s-1);
  min-width:0;
  padding:0;
  border:0;
  background:none;
}
.sfnl-checkrow > label:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  cursor:pointer;
}
.sfnl-checkrow b{
  color:var(--sf-c-ink);
  font-size:var(--sf-fs-md);
  font-weight:400;
}
.sfnl-checkrow span{
  color:var(--sf-c-muted);
  font-size:var(--sf-fs-xs);
  line-height:1.34;
}


/* A checkbox row placed among fields spans the grid and takes the grid's own
   spacing, so it reads as one of the rows rather than a block bolted on. */
.sfnl-fieldgrid > .sfnl-checkrow{grid-column:1/-1;margin-top:0}


/* ---- a menu with a filter ------------------------------------------------ */
.sfnl-menu.has-search{padding-top:0}
.sfnl-menu-search{
  position:sticky;top:0;z-index:1;
  padding:var(--sf-s-2);
  background:var(--sf-c-surface);
  border-bottom:1px solid var(--sf-c-line);
}
.sfnl-menu-search input{
  width:100%;height:32px;
  padding:0 var(--sf-s-3);
  border:0;border-bottom:1px solid var(--sf-c-strong);
  background:var(--sf-c-soft);
  color:var(--sf-c-ink);
  font:inherit;font-size:var(--sf-fs-md);
}
.sfnl-menu-search input:focus{outline:2px solid var(--sf-c-accent);outline-offset:-2px}
/* The list is the scrollport; the search sits outside it and so stays put.
   openMenu() overrides max-height with the room actually available, and
   overscroll-behavior stops a wheel past the end from scrolling the page
   underneath and dragging the menu off its anchor. */
.sfnl-menu-list{overscroll-behavior:contain}
.sfnl-menu.has-search .sfnl-menu-list{max-height:min(264px,50vh);overflow-y:auto}
.sfnl-menu [data-k][hidden]{display:none}


/* ---- combined phone input ------------------------------------------------
   One control made of two: the country button and the number field share a
   single underline so they read as one field, the way Carbon draws a field
   with an inline addition. */
.sfnl-phone{
  display:flex;
  align-items:stretch;
  min-width:0;
  background:var(--sf-c-soft);
  border-bottom:1px solid var(--sf-c-strong);
}
.sfnl-phone:focus-within{outline:2px solid var(--sf-c-accent);outline-offset:-2px}
.sfnl-phone .sfnl-input{
  flex:1;
  min-width:0;
  border-bottom:0;
  background:transparent;
}
/* the ring belongs to the group, not to the halves */
.sfnl-phone .sfnl-input:focus{outline:none}
.sfnl-phone .sfnl-input:hover{background:transparent}

.sfnl-phone-cc{
  display:flex;
  align-items:center;
  gap:var(--sf-s-1);
  flex:none;
  height:40px;
  padding:0 var(--sf-s-3);
  border:0;
  border-right:1px solid var(--sf-c-line);
  background:transparent;
  color:var(--sf-c-ink);
  font:inherit;
  font-size:var(--sf-fs-md);
  cursor:pointer;
  transition:background var(--sf-t-fast) var(--sf-ease);
}
.sfnl-phone-cc:hover{background:var(--sf-c-hover)}
.sfnl-phone-cc:focus-visible{outline:2px solid var(--sf-c-accent);outline-offset:-2px}
.sfnl-phone-flag{font-size:16px;line-height:1}
.sfnl-phone-dial{color:var(--sf-c-text)}
.sfnl-phone-cc svg{width:16px;height:16px;color:var(--sf-c-muted)}

/* an invalid number marks the whole control, not just the half that holds it */
.sfnl-phone:has(.sfnl-input.is-bad){
  outline:2px solid var(--sf-c-danger);
  outline-offset:-2px;
  border-bottom-color:var(--sf-c-danger);
}
.sfnl-phone .sfnl-input.is-bad{outline:none}


/* Paired form rows already stack at 860px — see the rule in
   app/features/contacts/contacts.css, the same breakpoint the expanded
   details panel uses. Nothing further is needed here. */


/* ==========================================================================
   Consent checkbox and the primary action
   ========================================================================== */

/* `--nl-*` are declared on the view pane, but a dialog mounts on <body> and
   never sees them, so the checked background resolved to nothing and a ticked
   box looked exactly like an empty one — the box appeared not to respond at
   all. The rules above now use `--sf-c-*`, which are declared on :root.
   The mark stays 18px; the target grows to 24px, the minimum for touch. */
.sfnl-check > span{background:var(--sf-c-surface);border-color:var(--sf-c-strong)}
.sfnl-checkrow .sfnl-check{
  width:24px;height:24px;
  align-items:center;justify-content:center;
  margin:-3px 0 0 -3px;
  flex:none;
}
.sfnl-checkrow > label:last-child{padding-top:1px}

/* ---- primary action ------------------------------------------------------
   The brand colour, in every state Carbon defines for a primary button. */
.sfnl-primary{
  border-color:var(--sf-c-brand);
  background:var(--sf-c-brand);
  color:#fff;
}
.sfnl-primary svg{color:currentColor}
.sfnl-primary:hover{
  background:var(--sf-c-brand-2);
  border-color:var(--sf-c-brand-2);
  box-shadow:none;
  transform:none;
}
.sfnl-primary:active{
  background:var(--sf-c-maroon);
  border-color:var(--sf-c-maroon);
}
.sfnl-primary:focus-visible{
  outline:2px solid var(--sf-c-accent);
  outline-offset:-3px;
  box-shadow:inset 0 0 0 1px #fff;
}
/* Carbon greys a disabled button rather than fading it, so it does not read
   as the same button at lower opacity. */
.sfnl-primary:disabled,
.sfnl-primary[disabled]{
  opacity:1;
  background:var(--sf-c-line);
  border-color:var(--sf-c-line);
  color:var(--sf-c-faint);
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.sfnl-primary:disabled:hover,
.sfnl-primary[disabled]:hover{
  background:var(--sf-c-line);
  border-color:var(--sf-c-line);
}
/* ---- loading ------------------------------------------------------------ */
.sfnl-primary.is-loading{
  position:relative;
  color:transparent;
  pointer-events:none;
}
.sfnl-primary.is-loading::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:16px;height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:sfnlSpin .7s linear infinite;
}
@keyframes sfnlSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .sfnl-primary.is-loading::after{animation-duration:2s}
}

/* ==========================================================================
   Chromeless views — account creation, login, recovery, onboarding
   --------------------------------------------------------------------------
   These own the whole viewport. The sidebar and top bar belong to a signed-in
   session, and none of these screens is one.
   ========================================================================== */
html.sf-chromeless .navpanel.sf-sidebar,
html.sf-chromeless .sf-nav-footer,
html.sf-chromeless > body .sf-topbar{display:none}
html.sf-chromeless .shell,
html.sf-chromeless .shell.wide{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(100vh,auto);
}
html.sf-chromeless .shell > .content{grid-column:1;grid-row:1}
html.sf-chromeless .content.index.sf-dashboard-home,
html.sf-chromeless .content.sf-appview{
  width:100%;max-width:none;min-height:100vh;
  padding:0;margin:0;border:0;background:var(--sf-c-surface);
}
/* the account views measure against the top bar that is no longer there */
html.sf-chromeless{--sf-topbar-height:0px}

/* ==========================================================================
   Dashboard — onboarding recommendations
   --------------------------------------------------------------------------
   Moved off the setup completion screen, which is now a full stop with one
   action. These are the things people come back to, so they live where they
   are come back to.
   ========================================================================== */
.sf-recs{
  margin:var(--sf-s-10) 0 0;
  padding-top:var(--sf-s-6);
  border-top:1px solid var(--sf-c-line);
  text-align:left;
}
.sf-recs[hidden]{display:none}
.sf-recs h2{
  margin:0;
  color:var(--sf-c-ink);
  font-size:var(--sf-fs-lg);font-weight:var(--sf-fw-semi);letter-spacing:-.015em;
}
.sf-recs > p{
  margin:var(--sf-s-1) 0 var(--sf-s-4);
  color:var(--sf-c-muted);font-size:var(--sf-fs-sm);
}
.sf-recs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sf-s-2)}
.sf-rec{
  display:flex;align-items:center;gap:var(--sf-s-3);
  padding:var(--sf-s-4);
  border:1px solid var(--sf-c-line);background:var(--sf-c-surface);
  text-decoration:none;
  transition:border-color var(--sf-t-fast) var(--sf-ease),
             background var(--sf-t-fast) var(--sf-ease);
}
.sf-rec:hover{border-color:var(--sf-c-brand);background:var(--sf-c-accent-soft)}
.sf-rec:focus-visible{outline:2px solid var(--sf-c-brand);outline-offset:-2px}
.sf-rec-ic{
  display:grid;place-items:center;width:36px;height:36px;flex:none;
  background:var(--sf-c-soft);color:var(--sf-c-brand);
}
.sf-rec-ic svg{width:18px;height:18px}
.sf-rec-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sf-rec-txt strong{color:var(--sf-c-ink);font-size:var(--sf-fs-md);font-weight:var(--sf-fw-semi)}
.sf-rec-txt small{color:var(--sf-c-muted);font-size:var(--sf-fs-sm);line-height:1.4}
.sf-rec-go{flex:none;color:var(--sf-c-muted)}
.sf-rec-go svg{width:17px;height:17px}
@media (max-width:720px){
  .sf-recs-list{grid-template-columns:minmax(0,1fr)}
}

/* ===== ACCOUNT MENU ====================================================
   Portaled to <body>, so it carries its own surface tokens rather than
   inheriting the topbar's. Square corners throughout: this design system
   sets --sf-c-radius to 0 and a rounded panel would be the only rounded
   chrome on the page.

   Two vocabularies deliberately kept apart — --sf-top-* for the panel, which
   is chrome, and --sf-c-* for nothing here, because nothing here is content.
   ====================================================================== */
.sf-vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.sf-acct-scrim{
  position:fixed;
  inset:0;
  z-index:9200;
  background:rgba(22,22,22,0);
  transition:background var(--sf-t-fast,110ms) var(--sf-ease,cubic-bezier(.2,0,.38,.9));
}
.sf-acct-scrim.is-open{background:rgba(22,22,22,0)}

.sf-acct{
  position:fixed;
  top:0;left:0;
  z-index:9210;
  width:320px;
  max-height:calc(100vh - 16px);
  display:flex;
  flex-direction:column;
  background:var(--sf-top-bg);
  border:1px solid var(--sf-top-line);
  border-radius:0;
  box-shadow:var(--sf-top-shadow);
  color:var(--sf-top-ink);
  font-size:13px;
  opacity:0;
  transform:translateY(-6px) scale(.985);
  transform-origin:top right;
  transition:opacity 140ms var(--sf-ease,cubic-bezier(.2,0,.38,.9)),
             transform 140ms var(--sf-ease,cubic-bezier(.2,0,.38,.9));
}
.sf-acct.is-open{opacity:1;transform:none}
.sf-acct-body{overflow-y:auto;padding:6px;overscroll-behavior:contain}

/* ---- identity ---- */
.sf-acct-id{display:flex;align-items:flex-start;gap:11px;padding:12px 10px 14px}
.sf-acct-id-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.sf-acct-name{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:15px;font-weight:600;line-height:1.25;color:var(--sf-top-ink);
}
.sf-acct-role{
  padding:1px 7px;
  background:var(--sf-top-layer);
  border:1px solid var(--sf-top-line);
  color:var(--sf-top-text);
  font-size:11px;font-weight:600;letter-spacing:.01em;
}
.sf-acct-org{
  font-size:13px;color:var(--sf-top-muted);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- current workspace card ---- */

/* ---- rows ---- */
.sf-acct-row{
  display:flex;align-items:center;gap:11px;
  width:100%;
  padding:9px 10px;
  border:0;border-radius:0;
  background:none;
  color:var(--sf-top-ink);
  font-family:inherit;font-size:13px;font-weight:500;
  text-align:left;text-decoration:none;
  cursor:pointer;
}
.sf-acct-row:hover{background:var(--sf-top-hover)}
.sf-acct-row:focus-visible{outline:2px solid var(--sf-top-focus);outline-offset:-2px}
.sf-acct-row[aria-disabled="true"]{color:var(--sf-top-disabled);cursor:not-allowed}
.sf-acct-row[aria-disabled="true"]:hover{background:none}
.sf-acct-row[aria-disabled="true"] .sf-acct-meta{color:var(--sf-top-disabled)}
.sf-acct-row.is-danger{color:#da1e28}
.sf-acct-row.is-danger:hover{background:#fff1f1}
.sf-acct-ic{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:var(--sf-top-text);
}
.sf-acct-row[aria-disabled="true"] .sf-acct-ic{color:var(--sf-top-disabled)}
.sf-acct-row.is-danger .sf-acct-ic{color:#da1e28}
.sf-acct-ic svg{width:17px;height:17px}
.sf-acct-text{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px}
.sf-acct-label{
  line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sf-acct-meta{
  font-size:11.5px;font-weight:400;color:var(--sf-top-muted);line-height:1.35;
}
.sf-acct-sep{height:1px;margin:5px 6px;background:var(--sf-top-line)}

/* a row waiting on a promise: the label stays, the spinner joins it */
.sf-acct-spin{
  flex:none;width:14px;height:14px;
  border:2px solid var(--sf-top-line-strong);
  border-top-color:var(--sf-top-brand);
  border-radius:50%;
  animation:sf-acct-spin .7s linear infinite;
}
@keyframes sf-acct-spin{to{transform:rotate(360deg)}}

/* ---- sub-level header ---- */

/* ---- plan benefits ---- */

/* ---- cobrowse code ---- */

/* ---- notices: empty, error, plain ---- */
.sf-acct-note{
  margin:6px 4px;padding:10px 12px;
  background:var(--sf-top-layer);
  border-left:3px solid var(--sf-top-line-strong);
  font-size:12px;line-height:1.5;color:var(--sf-top-text);
}
.sf-acct-note.is-error{background:#fff1f1;border-left-color:#da1e28;color:#750e13}
.sf-acct-note.is-empty{border-left-color:var(--sf-top-brand)}

/* ---- loading ---- */
.sf-acct-loading{display:flex;flex-direction:column;gap:9px;padding:12px 10px}
.sf-acct-skel{
  display:block;background:var(--sf-top-layer);
  animation:sf-acct-pulse 1.4s ease-in-out infinite;
}
.sf-acct-skel.av{width:38px;height:38px}
.sf-acct-skel.l1{width:60%;height:13px}
.sf-acct-skel.l2{width:78%;height:11px;margin-bottom:6px}
.sf-acct-skel.row{width:100%;height:32px}
@keyframes sf-acct-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ---- legal link ---------------------------------------------------------
   Quieter than the rows above it, but not weaker: --sf-top-text on
   --sf-top-bg clears 4.5:1, and hover lifts it to full ink rather than only
   changing a background. The focus ring is the same one every other item in
   the panel uses, so reduced emphasis never becomes reduced reachability. */
.sf-acct-legal{
  display:block;
  margin-top:2px;
  padding:8px 10px 9px;
  color:var(--sf-top-text);
  font-size:11.5px;font-weight:500;line-height:1.3;
  text-decoration:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  border-top:1px solid var(--sf-top-line);
  cursor:pointer;
  transition:color var(--sf-t-fast,110ms) var(--sf-ease,ease),
             background var(--sf-t-fast,110ms) var(--sf-ease,ease);
}
.sf-acct-legal:hover{color:var(--sf-top-ink);background:var(--sf-top-hover)}
.sf-acct-legal:focus-visible{outline:2px solid var(--sf-top-focus);outline-offset:-2px}
.sf-acct-legal[aria-disabled="true"]{color:var(--sf-top-muted);cursor:not-allowed}
.sf-acct-legal[aria-disabled="true"]:hover{background:none;color:var(--sf-top-muted)}

/* ---- log-out confirmation -----------------------------------------------
   Replaces the rows in place rather than stacking a second dialog: the panel
   already traps focus, closes on Escape and closes on an outside click, and a
   nested modal would have to reproduce all three to be no better. */
.sf-acct-confirm{padding:14px 12px 12px}
.sf-acct-confirm-h{
  margin:0 0 7px;
  font-size:16px;font-weight:600;line-height:1.3;
  color:var(--sf-top-ink);
}
.sf-acct-confirm-p{
  margin:0 0 16px;
  font-size:13px;line-height:1.5;color:var(--sf-top-text);
}
.sf-acct-confirm-acts{display:flex;gap:8px}
.sf-acct-btn{
  flex:1 1 0;
  padding:10px 12px;
  border:1px solid var(--sf-top-line-strong);
  border-radius:0;
  background:var(--sf-top-bg);
  color:var(--sf-top-ink);
  font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;
}
.sf-acct-btn:hover{background:var(--sf-top-hover)}
.sf-acct-btn:focus-visible{outline:2px solid var(--sf-top-focus);outline-offset:-2px}
.sf-acct-btn.is-danger{
  border-color:#da1e28;background:#da1e28;color:#fff;
}
.sf-acct-btn.is-danger:hover{background:#b81922;border-color:#b81922}
.sf-acct-btn[disabled]{opacity:.6;cursor:progress}
/* The confirmation is short; narrowing the panel stops a wide empty surface
   sitting under two buttons. Desktop only — the sheet below is full-bleed by
   design, and a 308px card floating in a 390px viewport is not a sheet. */
@media (min-width:641px){
  .sf-acct.is-confirming{width:308px}
}

/* ---- small screens: a bottom sheet ---------------------------------------
   A 320px panel pinned to the top right of a 360px viewport is a panel with
   nowhere to go. Below 640px it becomes a sheet: full width, anchored to the
   bottom, thumb-reachable, and sized to its content up to 85vh. The inline
   top/left from placeAccount() is overridden here rather than skipped there,
   so a resize across the breakpoint lands in the right place either way. */
@media (max-width:640px){
  .sf-acct-scrim.is-open{background:rgba(22,22,22,.45)}
  .sf-acct{
    top:auto !important;
    left:0 !important;
    right:0;
    bottom:0;
    width:auto;
    max-height:85vh;
    border-left:0;border-right:0;border-bottom:0;
    transform:translateY(14px);
    transform-origin:bottom center;
  }
  .sf-acct.is-open{transform:none}
  .sf-acct-body{padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  /* a grab handle reads as "this drags down", which it does not — so the sheet
     gets a plain rule instead, and Escape or the scrim is how it closes */
  .sf-acct-row{padding:12px 12px}
  .sf-acct-id{padding:14px 12px 16px}
}

@media (prefers-reduced-motion:reduce){
  .sf-acct,.sf-acct-scrim{transition:none}
  .sf-acct{transform:none}
  .sf-acct-spin,.sf-acct-skel{animation:none}
}

/* ---- §10 · template history -------------------------------------------
   The card gains a History control, so it needs a wrapper: `.sfnl-card` is an
   anchor and a button inside one is neither valid nor clickable in the way
   anybody expects. Every class here is emitted by `newsletter.js` and every
   colour is a token — `ds-lint` counts ORPHAN, DEAD and TOKEN, and new work
   does not add to any of them. */
.sfnl-cardw{position:relative;display:flex}
.sfnl-cardw > .sfnl-card{flex:1;min-width:0}

/* Sits over the card's corner. Revealed on hover and on focus — focus alone is
   what makes it reachable by keyboard, and leaving it out is the commonest way
   a hover-revealed control becomes invisible to anybody not using a mouse. */
.sfnl-cardh{
  position:absolute;top:8px;right:8px;
  padding:4px 10px;
  border:1px solid var(--nl-line);
  background:var(--nl-surface);
  color:var(--nl-text);
  font:inherit;font-size:11.5px;
  cursor:pointer;
  opacity:0;
  transition:opacity .15s ease;
}
.sfnl-cardw:hover .sfnl-cardh,
.sfnl-cardh:focus-visible{opacity:1}
.sfnl-cardh:hover{background:var(--nl-hover)}

/* ⚠ The second corner control needs its own corner. Both were `right:8px`, so
   the newer one sat exactly on top of the older and only one was clickable —
   two controls, one hit area, and the covered one silently unreachable. */
.sfnl-cardh.alt{right:auto;left:8px}

.sfnl-hist{min-height:120px;color:var(--nl-text);font-size:13px}
.sfnl-histlist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sfnl-histlist li{
  display:flex;align-items:center;gap:12px;
  padding:10px 4px;
  border-bottom:1px solid var(--nl-line-soft);
}
.sfnl-histlist li:last-child{border-bottom:0}

.sfnl-histmeta{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.sfnl-histmeta strong{font-size:13px;color:var(--nl-ink)}
.sfnl-histmeta small{font-size:12px;color:var(--nl-text)}
.sfnl-histmeta em{font-size:11.5px;color:var(--nl-muted);font-style:normal}

/* The newest version *is* the template — restoring it would create a version
   that changes nothing, so it is labelled rather than actionable. */
.sfnl-histnow{font-size:11.5px;color:var(--nl-muted)}

/* Plan 1.6 · the gate in front of a prototype view. */
.sf-preview-gate{max-width:520px;margin:64px auto;padding:28px;background:var(--sf-c-surface, #fff);border:1px solid var(--sf-c-line, #e0e0e0)}
.sf-preview-gate-eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:.32px;color:var(--sf-c-muted)}
.sf-preview-gate h1{margin:0 0 10px;font-size:20px;font-weight:600;line-height:1.3}
.sf-preview-gate p{margin:0 0 12px}
.sf-preview-gate-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.sf-preview-gate a.sfnl-primary{text-decoration:none}

/* Plan 1.6 · the one dialog a lapsed session gets, over any screen. */
.sf-expired{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:16px;background:rgba(22,22,22,.5)}
.sf-expired-card{width:100%;max-width:440px;padding:24px;background:var(--sf-c-surface);border:1px solid var(--sf-c-line);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.sf-expired-card h2{margin:0 0 8px;font-size:20px;font-weight:600;line-height:1.3}
.sf-expired-card p{margin:0 0 12px}
.sf-expired-note{color:var(--sf-c-danger, #da1e28)}
.sf-expired-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sf-expired-row a.sfnl-ghost{text-decoration:none}

/* D-74 · the deletion dialogs (app/shared/deletion.js). */
.sf-del p{margin:0 0 12px}
.sf-del-list{margin:0 0 16px;padding-left:18px;display:grid;gap:6px}
.sf-del .sfnl-field{margin-bottom:8px}