/* ============ POLISH LAYER — the mid-market-SaaS coat of paint ============
   Pure cosmetics, loaded after the base sheet so it wins the cascade without
   touching any layout mechanics. Tokens first, then component refinements. */
:root{
  --bg:#f8f9fb; --side:#fbfbfc; --line:#e5e8ee; --muted:#5f6b7a; --faint:#98a1ae;
  --accent:#4f46e5; --accentink:#4338ca;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 1px 3px rgba(16,24,40,.08),0 4px 12px rgba(16,24,40,.05);
  --ring:0 0 0 3px rgba(79,70,229,.16);
}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
b,strong,.xs-big,.mcard .n,.atable td.num,.atable th.num{font-variant-numeric:tabular-nums}
h2{letter-spacing:-.02em;font-weight:800}
h3{letter-spacing:-.01em}

/* surfaces: app canvas gets a whisper of grey so white cards read as elevated */
.main,.wrap{background:transparent}
.app{background:var(--bg)}
.card,.cl-card,.rx-card,.pd,.mini-post{box-shadow:var(--shadow-sm)}
.card:hover,.cl-card:hover,.rx-card:hover{box-shadow:var(--shadow-md);transition:box-shadow .18s ease}
.card{border-radius:14px}

/* sidebar: quieter chrome, clearer active state */
.sidebar{background:var(--side)}
.navitem{transition:background .1s ease,color .1s ease;font-weight:500;color:#5b6472}
.navitem:hover{background:#eef0f4}
.navitem.active{background:rgba(109,92,255,.10);color:var(--accentink);font-weight:600}
.pbtn.on{box-shadow:var(--shadow-sm)}

/* buttons: consistent, tactile */
.tbtn,.pf-chip{transition:all .13s ease;font-weight:600}
.tbtn:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.tbtn:active{transform:translateY(0)}
.pf-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.save{transition:all .13s ease;letter-spacing:.01em}
.save:hover{opacity:.92;box-shadow:var(--shadow-md)}
a.tbtn{text-decoration:none}

/* inputs: real focus rings */
input,select,textarea{transition:border-color .12s ease,box-shadow .12s ease}
.field input:focus,.field select:focus,input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent) !important;box-shadow:var(--ring)}

/* subtabs: underline slides in accent, not black */
.subtab{transition:color .12s ease}
.subtab.active{border-bottom-color:var(--accent);color:var(--ink)}

/* tables: airier, sturdier header */

/* modal: depth + backdrop blur */
.modal-bg{backdrop-filter:blur(3px);background:rgba(15,23,42,.42)}
.modal{border-radius:16px;box-shadow:0 24px 70px rgba(15,23,42,.35),0 2px 8px rgba(15,23,42,.12)}

/* empty states + notes */
.sch-empty{background:#fff;border-radius:14px}
.sug-none{border-radius:10px}
.err{border-radius:10px}

/* funnel + weekly tiles ride the same elevation system */
.xw-stat{background:#fff;box-shadow:var(--shadow-sm)}

/* scrollbars that don't look like Windows 95 */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#d3d9e2;border-radius:99px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#b9c1cd;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* selection + focus-visible accessibility */
::selection{background:rgba(79,70,229,.18)}
button:focus-visible,a:focus-visible{outline:0;box-shadow:var(--ring)}

/* Funnel: period navigator, KPI strip, section cards, folded network breakdown */
/* one control bar, top of the page, everything below obeys it */
.cc-controls .pf-chips:last-child{margin-bottom:8px}
/* the self-explaining dash */
.na{position:relative;color:var(--faint);cursor:help;border-bottom:1px dotted #c9ced8}
.na-why{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);
  white-space:nowrap;background:#1f2430;color:#fff;font-size:11px;font-weight:600;
  padding:5px 9px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .12s ease;
  z-index:40;box-shadow:0 4px 14px rgba(15,23,42,.22)}
.na-why b{font-weight:800;color:#c9c3ff}
.na:hover .na-why{opacity:1}
/* The funnel as steps: each stage a block, arrows between, wrapping where it must.
   One long arrow sentence broke mid-arrow and read as nonsense. */

@media(max-width:900px){}
.cc-goals{display:inline-flex;gap:4px;margin-left:6px}
.cc-goal{font-size:10px;font-weight:800;padding:2px 7px;border-radius:99px;white-space:nowrap}
.cc-goal.g-subs{background:#e6f6ef;color:#0e7d57}
.cc-goal.g-sales{background:#fdf3e3;color:#b45309}
.cc-like{font-size:11.5px;line-height:1.5;color:#78350f;background:#fffbeb;border:1px solid #fde68a;
  border-radius:9px;padding:6px 10px;margin:6px 0 2px}
.cc-like b{font-weight:800}
.cc-qhd{font-size:13px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px;color:#0e7d57}
/* Overview: numbers live on the card that draws them */

/* Profiles → bio links */
.bio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.bio-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;
  display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow-sm)}
.bio-hd{display:flex;align-items:center;gap:8px}
.bio-hd b{font-size:13.5px;letter-spacing:-.01em}
.bio-hd .cc-act{margin-left:auto}
.bio-dot{width:8px;height:8px;border-radius:50%;flex:none}
.bio-av{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;background:#eef0f4;
  border:1px solid rgba(23,20,50,.08)}
.bio-url{font-size:11.5px;line-height:1.55;background:#f7f8fa;border:1px solid rgba(23,20,50,.06);
  border-radius:9px;padding:9px 11px;word-break:break-all;color:#3b4453}
.bio-empty{font-size:12.5px;color:var(--faint)}
.bio-card>.bio-text,.bio-card>.bio-empty:first-of-type{flex:1}
.bio-card .tbtn{align-self:flex-start;font-size:12.5px}
.bio-hd .bio-when{font-size:11px;color:var(--faint);font-weight:600}
.bio-text{font-size:13px;line-height:1.55;white-space:pre-wrap;color:var(--ink)}
.bio-sep{height:1px;background:rgba(23,20,50,.07);margin:2px 0}
.bio-acts .tbtn{align-self:auto}
/* Create a page */
/* CREATE A PAGE. The old form put the label in tiny grey uppercase and the example in
   the placeholder, so the eye read the greyed example as a filled value and the label
   as decoration — three fields that all looked equally unimportant and equally done.
   Labels are now the loudest thing in each row, hints sit under them as a sentence,
   and the path field shows your real domain fixed to its left so "where it lives on
   your site" is answered by the control instead of by a caption. */

/* the domain is not editable, so it should not look like an input */

/* ≤5 products is a set of chips, not a dropdown you have to open to see the options */

/* Create a Funnel */
/* THE PREMADE ROUTES, at the width of the fork that offered them. This grid had no
   max-width, so four small cards spread across 1500px in a ragged 3-then-1 while the
   two cards you clicked to get here stopped at 880 — the second screen of the flow
   looked like a different product. Each card leads with the route as a chain of
   steps, so you can tell them apart before reading a word of the description. */

/* the route, as the chain of steps it actually is */

/* a funnel card's own line about what it can't answer */

/* the comparison */
/* Pages — version log */
/* Funnels header: the view toggle and the period navigator are two decisions —
   two lines, right-aligned, instead of one long strip of unrelated controls. */
/* Landing Pages report — one grid per page, one grade */

.lp-row>div:not(:first-child){font-weight:700;font-variant-numeric:tabular-nums}

/* Command Center → CTAs: one calm card per post */
.cc-posts{display:flex;flex-direction:column;gap:10px}
.cc-post{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff}
.cc-post.is-ready{border-color:#cfe7dc;background:#fcfefd}
.cc-post.is-done{opacity:.72}
.cc-top{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.cc-top b{font-size:12.5px}
.cc-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.cc-meta{color:var(--faint);font-size:11.5px}
.cc-pill{margin-left:auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.cc-text{font-size:14px;line-height:1.5;white-space:pre-wrap;margin-bottom:10px}
.cc-track{height:4px;background:#eef0f4;border-radius:99px;overflow:hidden}
.cc-track>div{transition:width .4s ease}
.cc-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
.cc-acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.cc-sep{color:#d3d7de;font-size:11px}
.cc-act{border:0;background:transparent;padding:0;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--faint);cursor:pointer;text-decoration:none}
.cc-act:hover{color:var(--ink);text-decoration:underline}
.seg{display:inline-flex;background:#eef0f4;border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:5px 13px;border-radius:8px;font:inherit;font-size:12.5px;
            font-weight:700;color:var(--muted);cursor:pointer;transition:.12s;white-space:nowrap}
.seg button:hover:not(.on){color:var(--ink)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.12)}
.seg button:disabled{opacity:.4;cursor:default}
.fn-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.fn-kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:2px}
.fn-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.fn-card .fn-kpi, .fn-card [style*="background:#fff;border:1px solid var(--line);border-radius:12px"]{background:#fafbfd !important}

/* ---- path + its breakdown = one unit, in that path's colour ----
   Three placements that convert nothing alike read as three grey boxes otherwise.
   The colour runs down the left edge of the band AND its breakdown, so your eye
   tracks one path from its label to its numbers without counting rows. */

/* the per-page split under a placement band — same grid language as Breakdown,
   but always open, because "which page" is part of the headline, not a detail */

/* per placement it's a one-line list of destinations, not a table — only the CTA
   count is answerable at that level, and a two-column table for one number is noise */
/* CTA → landing page → network. The page row is a <summary>, so opening it is native:
   no click handler to lose on a repaint, and it keeps working with the keyboard. */

/* Analytics: one card per stage, day by day */

/* Analytics: charts grouped under the funnel they belong to */

/* funnel bands: stages in one surface, pills on the seams */
.fb{display:flex;align-items:stretch;background:#fafbfd;border:1px solid rgba(23,20,50,.06);border-radius:12px;padding:12px 6px;margin-bottom:10px}
/* The OUTCOME column (subs / sales — always the last stage) gets a fixed width in
   every summary band, so it lines up vertically across all sections and paths. */
.fb:not(.fb-row)>.fb-st:last-child{flex:0 0 clamp(150px,26%,220px)}

.fn-card .fb:last-child{margin-bottom:0}

/* Settings, grown up: sidebar tabs + scrolling panel + sticky footer */
.modal.set-modal{max-width:780px;width:100%;padding:0;display:flex;flex-direction:column;max-height:86vh;overflow:hidden}
.set-head{display:flex;align-items:center;padding:16px 22px 12px;border-bottom:1px solid var(--line)}
.set-head h3{margin:0;font-size:17px;letter-spacing:-.01em}
.set-body{display:flex;flex:1;min-height:0}
.set-nav{flex:0 0 172px;border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:2px;background:#fafbfd;overflow-y:auto}
.set-tab{border:0;background:transparent;border-radius:9px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;text-align:left;transition:all .12s ease}
.set-tab:hover{background:#eef0f4;color:var(--ink)}
.set-tab.on{background:#eef0fb;color:var(--accentink);box-shadow:inset 3px 0 0 var(--accent)}
.set-panels{flex:1;overflow-y:auto;padding:16px 22px 20px;min-width:0}
.set-panel{display:none}
.set-panel.on{display:block}
.set-panel .sec-title:first-child{margin-top:0 !important}
.set-foot{border-top:1px solid var(--line);padding:12px 22px;display:flex;justify-content:flex-end;background:#fff}
.set-foot .save{width:auto;margin-top:0;padding:10px 26px}
/* No SaaS is built around a refresh button. Data revalidates itself: on view
   entry, on window focus, and every 5 minutes while visible. The buttons stay
   in the DOM (wiring safety) but never render. */
#fnForce,#lmRefresh,#rxfRefresh,#prRefresh,#ctaperfRefresh,#clRefresh{display:none !important}
#schBody{margin-top:22px}           /* air between the toolbar and the first week */
.an-wrap .bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px}   /* one aligned row; separated from the content below */
.an-wrap .subtabs{margin-top:6px}
#prBody,#ctaperfBody,#clList{margin-top:16px}
/* INSPIRATION STACKS TWO WRAPS — the subtab bar in one, the pane in the next — and
   each was paying the full .an-wrap 30px top padding, so the title floated a long
   way above its own content. The bar keeps its padding; the pane under it doesn't
   pay it twice. The lists drop their extra 16px too: the toolbar above them already
   supplies 18px, and the two together read as a gap nobody asked for. */
#inspirationView{padding-bottom:0}                       /* .wrap's 150px tail, not under a tab bar */
#inspirationView .an-wrap{padding:30px 0 0}
#trendsView,#remixfeedView{padding-top:0}
#trendsView .an-wrap,#remixfeedView .an-wrap{padding-top:0}
#trendsList,#rxfList,#rxtList,#rxeList,#rxbList,#rxliList,#rxlipList{margin-top:0}

/* ============ 2026 LAYER ============
   The current-decade look: a tinted atmospheric canvas instead of flat grey,
   glassy chrome, one violet accent used with intent, gradient ink on hero
   numbers, bigger radii, softer diffuse depth, and motion that acknowledges
   your clicks. Still zero layout changes — pure skin. */
:root{
  --bg:#f6f7fb;
  --accent:#6d5cff; --accentink:#5646e6;
  --grad:linear-gradient(135deg,#6d5cff 0%,#a34fde 55%,#e6469b 120%);
  --shadow-sm:0 1px 2px rgba(23,20,50,.05),0 0 0 .5px rgba(23,20,50,.02);
  --shadow-md:0 2px 6px rgba(23,20,50,.06),0 12px 32px rgba(23,20,50,.07);
  --ring:0 0 0 3px rgba(109,92,255,.18);
}
/* the canvas breathes: a faint aurora at the top instead of dead grey */
.app{background:
  radial-gradient(1100px 480px at 18% -8%, rgba(109,92,255,.075), transparent 62%),
  radial-gradient(900px 420px at 85% -12%, rgba(230,70,155,.055), transparent 60%),
  var(--bg)}
.sidebar{background:rgba(252,252,254,.82);backdrop-filter:blur(14px);border-right:1px solid rgba(23,20,50,.07)}
.logo{background:var(--grad);box-shadow:0 4px 14px rgba(163,79,222,.35);border-radius:10px}
.navitem{border-radius:7px}
.navitem.active{background:rgba(109,92,255,.10);color:var(--accentink)}
.pswitch{background:rgba(23,20,50,.05);border-radius:11px}
.pbtn.on{box-shadow:0 1px 3px rgba(23,20,50,.1),0 0 0 .5px rgba(23,20,50,.04)}

/* surfaces: larger radii, hairline borders, diffuse depth */
.card,.fn-card,.fn-kpi,.cl-card,.rx-card,.modal,.sch-empty{border-radius:16px;border-color:rgba(23,20,50,.08)}
.card,.fn-card{padding:18px 20px}
.fn-card:hover,.card:hover{box-shadow:var(--shadow-md)}

/* hero numbers wear gradient ink — the one flourish, used only where it counts */
.fn-kpi>div>span:first-child, .xs-big{background:linear-gradient(120deg,#1a1633,#4a3f8f 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#1a1633}
.fn-kpi{gap:3px}
.fn-kpi .muted{letter-spacing:.01em}

/* controls: pill buttons, gradient primary, springy feedback */
.tbtn,.pf-chip{border-radius:10px;border-color:rgba(23,20,50,.1)}
.tbtn:active,.pf-chip:active,.newbtn:active{transform:translateY(0) scale(.98)}
/* selection is flat ink, not a gradient with a glow — the chosen filter should be
   legible, not the brightest object on a screen full of numbers */
.pf-chip.on{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.save{background:var(--grad);border-radius:12px;box-shadow:0 2px 10px rgba(109,92,255,.28)}
.save:hover{opacity:1;filter:brightness(1.06);box-shadow:0 4px 16px rgba(109,92,255,.36)}
.subtab.active{border-bottom-color:var(--accent)}
select{border-radius:10px}

/* content arrives, it doesn't pop */
@keyframes yfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.wrap>*,.fn-card,.fn-kpis,.card{animation:yfade .28s cubic-bezier(.21,.9,.35,1) both}
@media (prefers-reduced-motion:reduce){.wrap>*,.fn-card,.fn-kpis,.card{animation:none}}

/* modal: full glass */
.modal{background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid rgba(23,20,50,.08)}
.modal-bg{background:rgba(19,16,41,.45)}

/* funnel chrome rides along */

.xw-stat{border-radius:12px;border-color:rgba(23,20,50,.08)}

/* tables + chips soften */
.bc-chip{border-radius:8px}
.s-fmt{border-radius:7px}
/* THE ROSTER CHIPS. They were .s-fmt — a class that only has padding INSIDE a .slot,
   so out here they had none: five pink-on-pink pills jammed edge to edge with the
   link and the delete crowding the handle. A chip is a name first; the two controls
   are quiet until you point at them, and the delete only turns red under the cursor
   so a mis-click is hard to make and easy to see coming. */
.rxv{display:inline-flex;align-items:center;gap:2px;padding:4px 5px 4px 10px;
  border-radius:999px;border:1px solid var(--hair);background:var(--surf);
  font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.6;white-space:nowrap}
.rxv:hover{border-color:#cfd6df}
.rxv-h{margin-right:4px}
.rxv-go,.rxv-del{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;border:0;background:none;padding:0;
  color:var(--faint);font-size:12px;line-height:1;cursor:pointer;text-decoration:none;
  transition:background .12s ease,color .12s ease}
.rxv-go:hover{background:rgba(109,92,255,.12);color:var(--accentink)}
.rxv-del:hover{background:#fdeaea;color:#b42318}
/* Explainer prose goes behind an ⓘ — headers shouldn't lecture. */
.an-sub,.detail-hint{display:none}
.an-sub.show,.detail-hint.show{display:block;background:#f4f7fd;border:1px solid #dfe9f5;border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.55;margin:6px 0 14px;animation:yfade .2s ease both}
.infob{margin-left:8px;width:19px;height:19px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--faint);font:700 11px/1 Inter,sans-serif;cursor:pointer;vertical-align:2px;padding:0;transition:all .12s ease}
.infob:hover,.infob.on{color:var(--accentink);border-color:var(--accentink)}
.fic{width:13px;height:13px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.fn-kpi .fic,.xs-lbl .fic{width:12px;height:12px}

/* ==================================================================== *
   DESIGN SYSTEM — the last word in the cascade.
   The app grew three style layers and, with them, eleven ways to draw a
   secondary button, nine card radii, four greens for "good", four spellings
   of --faint and twenty-seven font sizes. This layer does not restyle the
   app; it declares that components which do the same job ARE the same
   component. Everything below is a normalisation, not a new look — so a
   founder moving between Funnels, Content and CTAs stops feeling like
   they changed products.
 * ==================================================================== */
:root{
  /* semantic colour — these had no tokens, which is why 93 places wrote
     #0e7d57 by hand and four different greens meant "good" */
  --ok:#0e7d57;   --ok-bg:#e6f6ef;   --ok-line:#bfe0cf;
  --bad:#c0392b;  --bad-bg:#fdecea;  --bad-line:#f2c7c1;
  --warn:#8a6d1f; --warn-bg:#fffbf0; --warn-line:#efe3c4;
  --info:#1d6fd0; --info-bg:#eaf2fc; --info-line:#cfe0f5;
  /* one hairline, one surface set */
  --hair:rgba(23,20,50,.08);
  --surf:#fff; --surf-2:#fafbfc; --surf-3:#f4f5f8;
  /* one geometry scale */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:16px;
  --t-xs:11px; --t-sm:12.5px; --t-md:13.5px; --t-lg:15px;
}

/* ---------- CARDS: one radius, one border, one elevation ---------- */
.card,.fn-card,.pf-card,.cl-card,.rx-card,.trend-card,.bio-card,.login-card{
  border-radius:var(--r-xl);border-color:var(--hair)}
.trend-card,.cc-post,.flop,.rec{
  box-shadow:var(--shadow-sm)}
.cc-post,.mini-post,.pd,.flop,.rec,.slot,.fb,.xw-stat{
  border-radius:var(--r-md);border-color:var(--hair)}
.fn-card .fb{border-color:var(--hair)}

/* ---------- BUTTONS ---------- */
/* one secondary button. Eleven classes were the same control at radii
   8/9/10/20/99/999, sizes 11.5–13 and weights 400–600. */
.tbtn,.pf-chip,.sbtn,.copy{
  border-radius:var(--r-md);font-size:var(--t-sm);font-weight:600;
  padding:6px 12px;border:1px solid var(--hair);background:var(--surf);
  color:var(--muted);transition:border-color .12s,color .12s,background .12s}
.tbtn:hover,.pf-chip:hover,.sbtn:hover,.copy:hover{
  border-color:#c7cbd6;color:var(--ink);background:var(--surf)}
/* "selected" is ink. It used to be ink here, green there, white-on-grey elsewhere. */
.tbtn.on,.pf-chip.on,.rbtn.on,.sbtn.on,.cl-contact.on,.type-toggle.on{
  background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
/* one primary. The gradient stays for the single commit action per screen. */
.save{border-radius:var(--r-md);font-size:var(--t-md);font-weight:650}
/* the 22 inline "primary" fakes land here too */
.tbtn[style*="var(--ink)"]{border-radius:var(--r-md);font-size:var(--t-md);font-weight:650}
/* one text button */
.linkbtn,.cc-act,.fclear{font-size:var(--t-sm);font-weight:600;color:var(--accentink);
  text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover,.cc-act:hover,.fclear:hover{color:var(--ink)}
/* one segmented control */
.seg,.pswitch{border-radius:var(--r-md);background:var(--surf-3)}
.seg button,.pbtn{border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600}
.seg button.on,.pbtn.on{background:var(--surf);color:var(--ink);box-shadow:var(--shadow-sm)}
/* one tab */
.subtab{font-size:var(--t-md);font-weight:600}
.subtab.active,.dr-tab.on{border-bottom-color:var(--accent);color:var(--ink)}

/* ---------- FORM CONTROLS: one field, one focus ring ---------- */
.fsel,.anrange-dates input[type=date],
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],textarea,select{border-radius:var(--r-md)}
.fsel:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* ---------- EMPTY STATES + NOTES ---------- */
/* four dashed boxes at four radii, plus four naked-text empties, become one */
.sch-empty,.sug-none{
  border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surf-2);
  color:var(--muted);font-size:var(--t-md);line-height:1.55;padding:22px 20px;text-align:center}
.sug-none{padding:13px 16px;text-align:left;font-size:var(--t-sm)}
.bio-empty{color:var(--faint);font-size:var(--t-sm)}
/* one amber note — there were four palettes for one idea */
.note,.cc-like{background:var(--warn-bg);border:1px solid var(--warn-line);
  color:var(--warn);border-radius:var(--r-md);padding:8px 11px;font-size:var(--t-sm);line-height:1.5}
.err{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);
  border-radius:var(--r-md);font-size:var(--t-md)}

/* ---------- TYPE: collapse the two label clusters ---------- */
/* 9.5/10/10.5/11px all meant "tiny uppercase label"; 11.5/12/12.5/13 all meant
   "small secondary text". Two sizes now do the work of eight. */
.xs-lbl,.pf-head,.ib-colhead,.sch-dh,.arc-stat .k,.ptab thead th{
  font-size:var(--t-xs);letter-spacing:.04em}
.muted,.pt-lbl{font-size:var(--t-sm)}

/* ---------- FUNNELS ---------- */
/* The card is the funnel. Generous room, one accent, the numbers on the picture. */
.fx-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 18px}

.fx-card{background:var(--surf);border:1px solid var(--hair);border-radius:18px;padding:24px 26px 18px;
  margin-bottom:18px;box-shadow:var(--shadow-sm)}
.fx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:8px}
.fx-name{font-size:19px;font-weight:750;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.fx-route{font-size:13px;color:var(--muted);margin-top:4px}
.fx-kpi{text-align:right;flex:0 0 auto}
.fx-kpi-n{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums}
.fx-kpi-l{font-size:12px;color:var(--faint);margin-top:4px;font-weight:500}

.fx-leak{font-size:13.5px;color:var(--ink);line-height:1.5;margin-top:6px;padding:11px 14px;
  background:var(--surf-2);border-radius:var(--r-md)}
.fx-leak b{font-weight:700}

.fx-del:hover{color:var(--bad);background:var(--bad-bg)}

.fx-more{margin-top:8px}
.fx-more>summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:600;color:var(--accentink);
  padding:8px 0 2px;user-select:none}
.fx-more>summary::-webkit-details-marker{display:none}
.fx-more>summary::after{content:' ↓';color:var(--faint)}
.fx-more[open]>summary::after{content:' ↑'}
.fx-more-b{padding-top:6px}

/* ONE LINE AT 1440. The controls only earn their place on the same row if they fit on
   it: at a 776px content column the default date pair overflows by ~80px and drops the
   funnel picker onto a second row — which is the two-rows-of-controls look this was
   meant to end. So the pair is compact here, and the word "to" becomes a dash. */
.fx-bar .seg button{padding:5px 10px}
.fx-bar .fbar-sp{min-width:0}

.tbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- ONE LIST, ONE CONTROL ----------
   The sidebar stacked two things that both looked pickable: a six-cell grid of
   networks and the vertical list of views. Neither read as primary, and the grid was
   the TALLER of the two — so the first thing under a section heading was a filter
   rather than the navigation, and "which of these am I choosing between?" had two
   answers. A network is a SCOPE, not a destination. It collapses to one switcher row
   — the shape Linear, Vercel and Slack all use for the workspace you're inside — and
   the nav list becomes the only list on screen. Six cells of chrome become one. */
/* THE TREE, WITH ROOM. Sections read as sections because they are separated; the
   pages under one sit closer to it than the next section does. */
.sectabs .navlist{margin:2px 0 14px}
.sectabs .sectab{margin-top:2px}
.sectabs .navlist+.sectab{margin-top:4px}
/* THE SCOPE BAR SHARES THE PAGE'S MARGINS. It is a direct child of the scroll area,
   while every view sits inside .wrap — so it was pinned to the very edge, hard against
   the sidebar, with the page title starting 22px further in. Same box as the content
   it scopes: same max-width, same centring, same left padding. */
.scrollarea>.pswitch{max-width:820px;margin:26px auto 6px;padding:0 22px;box-sizing:border-box}
.pnowwrap{position:relative;display:inline-block}
.pswitch{position:static;display:flex;align-items:center;gap:10px;background:none;
  border-radius:0;padding:0;margin:0 0 4px}
.pswitch-l{margin:0;font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.pnow{width:auto;min-width:190px;display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;
  border:1px solid var(--hair);border-radius:var(--r-md);background:var(--surf);
  font:inherit;font-size:13px;font-weight:650;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:border-color .12s,box-shadow .12s}
.pnow:hover{border-color:#c7cbd6}
.pnow[aria-expanded="true"]{border-color:var(--accent);box-shadow:var(--ring)}
.pnow-d{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.pnow-v{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnow-c{width:13px;height:13px;flex:0 0 auto;stroke:var(--faint);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.pnow[aria-expanded="true"] .pnow-c{transform:rotate(180deg)}
.pmenu{position:absolute;left:0;min-width:100%;width:max-content;top:calc(100% + 4px);z-index:40;padding:4px;
  display:grid;gap:1px;background:var(--surf);border:1px solid var(--hair);
  border-radius:var(--r-md);box-shadow:0 12px 32px rgba(23,20,50,.15)}
.pmenu[hidden]{display:none}
.pmenu .pbtn{width:100%;display:flex;align-items:center;gap:9px;text-align:left;border:0;
  padding:7px 9px;border-radius:var(--r-sm);background:none;box-shadow:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--muted)}
.pmenu .pbtn::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--dot,var(--faint))}
.pmenu .pbtn:hover{background:var(--surf-3);color:var(--ink)}
.pmenu .pbtn.on{background:var(--surf-3);color:var(--ink);font-weight:700;box-shadow:none}

/* ---------- CHROME ---------- */
/* Functional glyphs (↻ refresh, ⇩ sync, ✓ done, ✕ remove, ＋ add, ‹ › paging) are a
   deliberate, closed set and stay. Decorative emoji are gone from every tab, subtab
   and sort pill — removed from the markup, not hidden with CSS, so they also leave
   the accessible name. */
/* control bars sit at one rhythm whichever pattern they use */
.fbar,.rangebar,.pf-chips,.an-wrap .bar,.cc-controls .pf-chips{margin-bottom:10px;gap:7px}
.an-wrap .bar{margin-bottom:14px}
/* Schedule: a publishing overview above a quiet, readable calendar. Scoped so
   Funnels and the shared card system retain their existing appearance. */
#scheduleView{padding:24px 32px 90px;--sch-purple:#7154e8;--sch-soft:#f3f0fd}
#scheduleView .an-wrap{padding-top:14px;max-width:1480px}
.sch-pagehead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.sch-eyebrow{font-size:10px;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:#817395;margin-bottom:7px}
#scheduleView h2{font-size:32px;letter-spacing:-.045em;margin:0;line-height:1.2}
.sch-intro{margin:8px 0 0;color:var(--muted);font-size:13px}
#scheduleView #schWhen{font-size:11px!important;white-space:nowrap;padding:7px 11px;border:1px solid var(--hair);border-radius:99px;background:var(--surf)}
#scheduleView>.an-wrap>.fx-bar{padding:12px;background:rgba(255,255,255,.8);border:1px solid var(--hair);border-radius:14px;gap:8px}
#scheduleView #schSync{background:var(--ink);border-color:var(--ink);color:#fff}
#scheduleView #schSync:hover{background:#39304e}
#scheduleView #schBody{margin-top:20px}
.sch-overview{display:grid;grid-template-columns:1fr 1.15fr;overflow:hidden;border:1px solid #e3dcf2;border-radius:22px;margin-bottom:24px;background:linear-gradient(115deg,#fff 5%,#f6f2ff 100%);box-shadow:0 6px 28px #40227006}
.sch-overview-copy{padding:30px 32px}
.sch-overview h3{font-size:27px;line-height:1.2;letter-spacing:-.035em;margin:0 0 10px;font-weight:750}
.sch-overview-copy>p{font-size:13px;line-height:1.65;color:#756b83;max-width:370px;margin:0}
.sch-overview-stats{display:flex;gap:0;margin-top:26px}
.sch-overview-stat{padding:0 24px;border-left:1px solid #e5dff0}
.sch-overview-stat:first-child{padding-left:0;border-left:0}
.sch-overview-stat strong{display:block;font-size:26px;line-height:1.15;font-weight:750;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sch-overview-stat span{display:block;font-size:10px;color:#7e748b;margin-top:6px}
.sch-rhythm{padding:26px 30px 22px;border-left:1px solid #e6def1;background:rgba(255,255,255,.24);display:flex;flex-direction:column;justify-content:center}
.sch-rhythm-head{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:11px;color:#796d8a}
.sch-rhythm-head b{font-weight:650;color:#4d3c69}
.sch-rhythm-head strong{font-size:20px;color:var(--sch-purple);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.sch-cadence{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:21px 0 16px}
.sch-cadence-day{text-align:center;min-width:0}
.sch-cadence-track{height:64px;position:relative;display:flex;align-items:flex-end;overflow:hidden;border-radius:7px;background:#e9e2f5}
.sch-cadence-fill{width:100%;height:var(--coverage);background:linear-gradient(0deg,#8060e7,#b7a1f5);border-radius:7px;min-height:0}
.sch-cadence-day b{display:block;font-size:10px;color:#766886;margin-top:7px;font-weight:600}
.sch-cadence-day small{font-size:10px;color:#998fa4;display:block;margin-top:2px}
.sch-rhythm-foot{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#8d819b}
.sch-rhythm-key{display:flex;align-items:center;gap:6px}
.sch-rhythm-key:before{content:'';width:6px;height:6px;background:#9878ee;border-radius:2px}
.sch-boardnav{display:flex;gap:4px;align-items:center;margin-bottom:18px;border-bottom:1px solid var(--hair);padding-bottom:12px}
.sch-boardnav button{font:inherit;font-size:12px;font-weight:600;color:var(--muted);border:0;background:transparent;padding:8px 13px;border-radius:8px;cursor:pointer}
.sch-boardnav button:first-child{background:var(--sch-soft);color:var(--sch-purple)}
.sch-boardnav button:hover{background:#ece7f8;color:#5e40bb}
.sch-boardnav-note{margin-left:auto;font-size:11px;color:var(--faint)}
#scheduleView .sch-week{padding:24px;border-radius:18px;margin-bottom:22px;scroll-margin-top:20px}
#scheduleView .sch-week>.fx-head{margin-bottom:22px;align-items:center}
#scheduleView .sch-week .fx-name{font-size:20px;display:flex;align-items:center;gap:9px}
#scheduleView .sch-week .fx-name:before{content:'';width:7px;height:7px;border-radius:50%;background:#ab98d8}
#scheduleView .sch-week-next .fx-name:before{background:var(--sch-purple);box-shadow:0 0 0 4px #f1ebfc}
#scheduleView .sch-week .fx-kpi-n{font-size:26px}
#scheduleView .sch-week .fx-kpi-l{font-size:10px}
#scheduleView .sch-week .fx-route{font-size:12px;margin-top:7px}
#scheduleView .sch-days{gap:10px;grid-auto-columns:minmax(156px,1fr);overflow-x:auto;padding:0 1px 8px;overscroll-behavior-x:contain}
#scheduleView .sch-day{background:#f8f7fa;border:1px solid #efedf3;border-radius:12px;padding:7px;min-width:0}
#scheduleView .sch-dh{padding:5px 4px 12px;color:#91869e;font-size:10px;align-items:center;letter-spacing:.07em}
#scheduleView .sch-dh .dnum{display:inline-grid;place-items:center;font-size:12px;margin-left:4px;color:#5b4e6c}
#scheduleView .sch-day-today{background:#f3effc;border-color:#ded2f7}
#scheduleView .sch-day-today .dnum{background:var(--sch-purple);color:#fff;border-radius:6px;padding:1px 5px}
.sch-day-count{font-size:9px;font-weight:500;letter-spacing:0;color:#9b91a6}
#scheduleView .slot{height:210px;padding:12px 10px;border-radius:9px;border-color:#e8e3ee;box-shadow:0 2px 4px #30204004;cursor:pointer;gap:7px;transition:transform .16s,box-shadow .16s,border-color .16s}
#scheduleView .slot:last-child{margin-bottom:0}
#scheduleView .slot:hover{transform:translateY(-2px);border-color:#bda9e7;box-shadow:0 5px 13px #60438712}
#scheduleView .slot.empty{cursor:default}
#scheduleView .slot.empty:hover{transform:none;box-shadow:none}
#scheduleView .slot .s-time{font-size:10px;color:#95899f;font-weight:500}
#scheduleView .slot .s-text{font-size:12px;line-height:17px;height:85px;-webkit-line-clamp:5;color:#3c3348}
#scheduleView .slot .s-chips{height:39px;gap:3px}
#scheduleView .slot .s-fmt{font-size:9px;padding:2px 5px;border-radius:4px;line-height:1.5}
#scheduleView .slot .s-q,#scheduleView .slot .s-ran{font-size:9px;margin-top:auto;padding-top:8px;border-top:1px solid #f0edf5;color:#9585af}
#scheduleView .slot .s-ran{color:var(--ok)}
#scheduleView .slot.past{height:210px}
#scheduleView .slot.past .s-text{height:85px;-webkit-line-clamp:5}
#scheduleView .sch-week>.fx-leak{margin-top:16px;font-size:12px;background:#f7f5fb;color:#766987;padding:12px 14px}
.sch-week-insights{border-top:1px solid var(--hair);margin-top:15px;padding-top:12px}
.sch-week-insights>summary{font-size:11px;font-weight:600;color:#80718f;cursor:pointer;padding:5px 0;list-style:none}
.sch-week-insights>summary::-webkit-details-marker{display:none}
.sch-week-insights>summary:after{content:'+';float:right;font-size:16px;line-height:1}
.sch-week-insights[open]>summary:after{content:'−'}
.sch-week-insights>div{padding-top:15px}
#scheduleView .snap-week{padding:24px;background:#fff;border:1px solid var(--hair);border-radius:18px;margin-bottom:20px}
.sch-history-title{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:32px 0 14px;display:flex;align-items:center;gap:12px}
.sch-history-title span{font-size:11px;font-weight:400;color:var(--faint);letter-spacing:0}
#scheduleView :is(button,summary,[role=button]):focus-visible{outline:2px solid var(--sch-purple);outline-offset:4px}
@media(min-width:1800px){#scheduleView .sch-days{grid-auto-columns:minmax(175px,1fr)}}
@media(max-width:1100px){#scheduleView{padding-left:20px;padding-right:20px}.sch-overview-copy{padding:24px}.sch-rhythm{padding:24px 20px}.sch-overview-stat{padding:0 15px}.sch-cadence{gap:7px}.sch-overview h3{font-size:23px}}
@media(max-width:850px){.sch-overview{grid-template-columns:1fr}.sch-rhythm{border-left:0;border-top:1px solid #e6def1}.sch-overview-copy{padding:24px}.sch-overview-stats{margin-top:20px}.sch-pagehead{align-items:flex-start;flex-direction:column;gap:12px}.sch-boardnav-note{display:none}#scheduleView .sch-week,#scheduleView .snap-week{padding:18px}.sch-rhythm{padding:20px 24px}.sch-cadence-track{height:48px}}
@media(max-width:520px){#scheduleView{padding:18px 12px 60px}#scheduleView h2{font-size:28px}.sch-intro{font-size:12px}.sch-overview-copy,.sch-rhythm{padding:20px}.sch-boardnav button{padding:8px 10px}#scheduleView .sch-week>.fx-head{gap:10px}.sch-rhythm-foot{font-size:9px}#scheduleView .sch-week .fx-kpi-n{font-size:23px}}
@media(prefers-reduced-motion:reduce){#scheduleView .slot{transition:none}#scheduleView .slot:hover{transform:none}}

@media(max-width:680px){
  .app .sidebar{width:60px}
  .app .side-top{padding:14px 6px;overflow-y:auto}
  .app .brandrow{justify-content:center;padding:0 0 15px}
  .app .brandrow>div:nth-child(2){display:none}
  .app :is(.sectab,.navitem){font-size:0;padding:11px;justify-content:center;gap:0;min-height:40px}
  .app .navlist{gap:2px}
  .app .side-bottom{padding:6px}
  .app .setbtn{font-size:0;padding:12px;justify-content:center;gap:0;min-height:40px}
  .app .setbtn .ic{font-size:15px}
  .app #gearBtn:after{content:'⚙';font-size:18px}
  .app #gearBtn .kdot{display:none}
  .app .scrollarea>.pswitch{margin:18px 12px 0;padding:0;flex-wrap:wrap;gap:7px}
  .app .pnow{min-width:135px}
  #scheduleView .an-wrap{padding-top:6px}
  #scheduleView .sch-week,#scheduleView .snap-week{padding:14px}
  #scheduleView .sch-overview-stats{justify-content:space-between}
  #scheduleView .sch-overview-stat{padding:0 10px;flex:1}
  #scheduleView .sch-overview-stat:first-child{padding-left:0}
  #scheduleView .sch-overview-stat strong{font-size:24px}
  #scheduleView .sch-overview-stat span{font-size:10px}
  #scheduleView .sch-rhythm-foot{flex-wrap:wrap;gap:5px}
  #scheduleView .sch-days{grid-auto-columns:minmax(190px,1fr)}
}

#scheduleView .slot.hl-top{height:238px;border-color:#00a862;box-shadow:0 0 0 2px #00a86222}
#scheduleView .slot.hl-bot{height:238px;border-color:#e11d48;box-shadow:0 0 0 2px #e11d4822}
#scheduleView .slot.hl-sel{border-color:#4f46e5;box-shadow:0 0 0 2px #4f46e522}
#scheduleView .slot.risk-high{border-color:#e8b4ad}
#scheduleView .slot.risk-medium,#scheduleView .slot.b2b{border-color:#e9d5a0}
#scheduleView .slot.win{border-color:#a6e3c2}
#scheduleView .sch-cadence-day:focus-visible{outline:2px solid var(--sch-purple);outline-offset:3px;border-radius:6px}