/* ============================================================
   Mention Tracker — Petal dashboard (new design, 2026-07).
   Self-contained + SCOPED under `.ptx`. The global /dashboard.css
   still styles every OTHER page; nothing here may leak out, so all
   rules are nested under `.ptx` (or `body.pt-body`, set by the JS).
   Design source: Claude Design project 3dfe4242 "Mention Tracker
   dashboard redesign", Petal design system (mirror values, don't rename).
   ============================================================ */

/* Poppins is already shipped at these paths (also declared in dashboard.css,
   harmless to re-declare — same family/weights). */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('/media/font/poppins-v24-latin/poppins-v24-latin-300.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('/media/font/poppins-v24-latin/poppins-v24-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('/media/font/poppins-v24-latin/poppins-v24-latin-600.woff2') format('woff2'); }

/* ── Petal tokens — scoped to the shell so they never override the
      global :root tokens the rest of the app relies on. ── */
.ptx {
  /* Neutrals */
  --canvas:#F5F1E8; --canvas-deep:#EDE7DA; --surface:#FFFFFF;
  --ink:#1E1D1D; --ink-muted:#6B6157; --ink-faint:#A79E93;
  --line:rgba(30,29,29,.10); --line-soft:rgba(30,29,29,.06);
  /* Accent */
  --accent:#12C879; --accent-press:#0FA867;
  --accent-weak:rgba(18,200,121,.12); --accent-weak-2:rgba(18,200,121,.20);
  /* Card tints + on-tint deep accent */
  --mint:#CDECD8; --mint-deep:#12805A;
  --butter:#FBEDA8; --butter-deep:#8A6D12;
  --sky:#CFE2F5; --sky-deep:#1F6BB0;
  --blush:#F6D9DB; --blush-deep:#B24A63;
  --lilac:#E3D9F3; --lilac-deep:#6E4FC0;
  /* Surfaces */
  --surface-2:#EFEADF; --surface-3:#FBF9F4; --hover:#EFEADF; --selected:var(--accent-weak);
  /* Per-model series colours (mirror the live product) */
  --series-chatgpt:#1B8F6A; --series-claude:#C0673A; --series-gemini:#6E4FD1;
  --series-perplexity:#C24E77; --series-grok:#3E4045; --series-all:#1E1D1D;
  /* Sentiment buckets */
  --positive:#1FA36A; --neutral:#9A8F82; --negative:#D9694A;
  /* Type */
  --font-sans:'Poppins',system-ui,-apple-system,sans-serif;
  --fw-light:300; --fw-medium:500; --fw-semibold:600;
  --fs-display:56px; --fs-metric:34px; --fs-h1:24px; --fs-h2:20px;
  --fs-card:15px; --fs-body:13px; --fs-label:12px; --fs-caption:11px; --fs-micro:10px;
  --lh-tight:1.05; --lh-snug:1.3; --lh-body:1.5;
  --tracking-tight:-0.02em; --tracking-caps:0.06em;
  /* Space / radius / elevation */
  --radius-sm:12px; --radius:16px; --radius-lg:22px; --radius-pill:999px;
  --card-pad:24px;
  --shadow-flat:0 1px 0 rgba(30,29,29,.03);
  --shadow-tooltip:0 4px 16px rgba(30,29,29,.12);
  --shadow-toast:0 8px 24px rgba(30,29,29,.14);
  /* Motion */
  --ease:cubic-bezier(0.4,0,0.2,1); --dur-micro:.18s; --dur-base:.28s;
  --glow:
    radial-gradient(1200px 720px at 84% -12%, rgba(18,200,121,.045) 0%, rgba(18,200,121,0) 60%),
    radial-gradient(1000px 760px at -6% 110%, rgba(138,109,18,.05) 0%, rgba(138,109,18,0) 55%);
}
@media (prefers-reduced-motion: reduce) { .ptx { --dur-micro:.001s; --dur-base:.001s; } }

/* The shell paints the cream ground over the whole viewport and sits above
   the global body::before glow layer. The JS also adds body.pt-body so the
   cream reaches the overscroll gutter. */
body.pt-body { background:var(--canvas); }
body.pt-body::before { display:none !important; }

.ptx {
  min-height:100dvh; position:relative; z-index:0;
  background:var(--canvas); background-image:var(--glow);
  font-family:var(--font-sans); font-weight:var(--fw-light);
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
/* Local reset — the global `*{margin:0;padding:0}` already ran; keep our own
   box model tidy and neutralise inherited element defaults inside the shell. */
.ptx *, .ptx *::before, .ptx *::after { box-sizing:border-box; }
.ptx button { font-family:inherit; }
.ptx a { color:inherit; }
.ptx svg { display:block; }
.ptx :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

.ptx .pt-skip { position:absolute; left:-9999px; top:auto; }
.ptx .pt-skip:focus { left:12px; top:12px; z-index:200; background:var(--ink); color:#fff; padding:10px 14px; border-radius:var(--radius-sm); }

/* ============================================================ TOP BAR */
/* Board width is capped to the design's canvas, and the padding matches it, so
   the content box is the design's 1216px (1280 - 2x32) on any screen at least
   that wide. This is not just tidiness: the charts are `width:100%` SVGs whose
   text and strokes scale with their viewBox, so a card wider than the design's
   renders the whole chart — axis labels included — proportionally larger. The
   cap is what pins them to the size the board was drawn at. Was 1440, which
   matched an older board whose chart geometry the v3-laptop pass superseded. */
.ptx .pt-wrap { padding:0 32px 44px; position:relative; max-width:1280px; margin:0 auto; }

/* Design 7a — two quiet rows: app chrome (logo · nav · avatar) over page context
   (title · detail · scope controls). The whole header sticks as one unit so the
   scope pills stay reachable while the board scrolls. */
.pt-topbar {
  position:sticky; top:0; z-index:100; background:var(--canvas);
  display:flex; flex-direction:column;
}
.pt-topbar__chrome { display:flex; align-items:center; gap:14px; padding:18px 4px 12px; border-bottom:1px solid var(--line-soft); }
.pt-topbar__right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.pt-brand { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:var(--fw-semibold); letter-spacing:-0.02em; color:var(--ink); text-decoration:none; flex:none; }
.pt-brand svg { flex:none; }
/* Logo (5a "Radar Bubble"): the mark assembles on load — bubble pops, the two
   cream sweeps trace in, then the green hub pops and keeps a soft live pulse. */
.pt-brand svg path, .pt-brand svg circle { transform-box:view-box; transform-origin:52.15px 52.51px; }
.pt-logo-bubble { animation:mtPop .55s cubic-bezier(.34,1.4,.5,1) both; }
.pt-logo-sweep { animation:mtSweepIn .7s cubic-bezier(.22,1,.36,1) both; }
.pt-logo-sweep--1 { animation-delay:.28s; }
.pt-logo-sweep--2 { animation-duration:.75s; animation-delay:.36s; }
.mt-blip { transform-box:view-box; transform-origin:52.15px 52.51px; animation:mtPop .5s cubic-bezier(.34,1.4,.5,1) .62s both, mtBreathe 2.8s ease-in-out 1.2s infinite; }
@keyframes mtPop { 0%{transform:scale(0);opacity:0} 70%{opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes mtSweepIn { 0%{transform:rotate(-140deg) scale(.35);opacity:0} 60%{opacity:1} 100%{transform:rotate(0deg) scale(1);opacity:1} }
@keyframes mtBreathe { 0%,100%{transform:scale(1);} 50%{transform:scale(1.13);} }
@media (prefers-reduced-motion: reduce){ .pt-logo-bubble,.pt-logo-sweep,.mt-blip{animation:none;} }

.pt-nav { display:flex; gap:4px; }
.pt-nav__link { font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink-muted); text-decoration:none; padding:8px 12px; border-radius:var(--radius-sm); transition:background var(--dur-micro), color var(--dur-micro); white-space:nowrap; }
.pt-nav__link:hover { background:rgba(30,29,29,.05); color:var(--ink); }
.pt-nav__link.is-active { color:var(--ink); background:var(--surface); }


/* Pills (dropdown triggers) */
.pt-pillwrap { position:relative; display:inline-block; }
.pt-pill { display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-body); font-weight:var(--fw-medium); font-family:var(--font-sans); padding:9px 13px; border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--line); color:var(--ink); cursor:pointer; white-space:nowrap; flex:none; transition:background var(--dur-micro); }
.pt-pill:hover { background:var(--surface-3); }
.pt-pill__ic { flex:none; opacity:.7; }
.pt-pill__caret { flex:none; opacity:.5; transition:transform var(--dur-micro); }
.pt-pillwrap.is-open .pt-pill__caret { transform:rotate(180deg); }
.pt-pill__dot { width:9px; height:9px; border-radius:3px; display:inline-block; flex:none; }


/* Avatar */
.pt-avatar { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); background:var(--ink); border:none; color:var(--surface); cursor:pointer; flex:none; padding:0; font-family:var(--font-sans); font-size:14px; font-weight:var(--fw-semibold); letter-spacing:.02em; line-height:1; transition:background var(--dur-micro); }
.pt-avatar:hover { background:#34302E; }

/* Row 2 — page context (design 7a): title + portalled page detail on the left,
   scope controls (tracker / timeframe / board) on the right. */
.pt-contextbar { display:flex; align-items:center; gap:12px 16px; padding:14px 4px 18px; }
.pt-contextbar__lead { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; min-width:0; }
.pt-contextbar__title { font-size:22px; font-weight:var(--fw-semibold); letter-spacing:-0.02em; color:var(--ink); }
/* The slot the page portals its own detail into (Last run / chips / run label). */
.pt-contextbar__slot { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; min-width:0; }
.pt-contextbar__slot:empty { display:none; }
.pt-contextbar__meta { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); align-self:flex-end; padding-bottom:2px; }
.pt-contextbar__tools { margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }

/* Popover menus (shared) */
.pt-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:200px; z-index:120; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-tooltip); padding:6px; display:none; }
.pt-pillwrap.is-open > .pt-menu, .pt-menu.is-open { display:block; }
.pt-menu--tracker { min-width:216px; }
.pt-menu--model { min-width:196px; }
.pt-menu--tf { min-width:176px; }
.pt-menu--board { min-width:224px; }
.pt-menu--profile { width:270px; padding:8px; }
.pt-menu__item { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:var(--radius-sm); font-size:var(--fs-body); font-weight:var(--fw-medium); cursor:pointer; color:var(--ink); text-decoration:none; background:transparent; border:none; width:100%; text-align:left; font-family:var(--font-sans); }
.pt-menu__item:hover { background:var(--hover); }
.pt-menu__item.is-selected { background:var(--selected); }
.pt-menu__item .pt-grow { flex:1; }
.pt-menu__check { color:var(--accent-press); font-weight:var(--fw-semibold); }
.pt-menu__item--accent { color:var(--accent-press); font-weight:var(--fw-medium); }
.pt-menu__sep { display:block; height:1px; background:var(--line-soft); margin:6px 4px; }

/* Density switcher folded into the Board menu (design 7a) — a caps label + a
   three-segment inline switch (Compact / Cozy / Roomy). */
.pt-menu__caps { display:block; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); padding:6px 12px 4px; }
.pt-densseg { display:flex; gap:2px; padding:2px 8px 6px; }
.pt-densseg__b { flex:1; text-align:center; padding:7px 0; border:none; border-radius:var(--radius-sm); background:transparent; color:var(--ink-muted); font-family:var(--font-sans); font-size:var(--fs-caption); font-weight:var(--fw-medium); cursor:pointer; transition:background var(--dur-micro), color var(--dur-micro); }
.pt-densseg__b:hover { color:var(--ink); }
.pt-densseg__b.is-active { background:var(--selected); color:var(--ink); }

/* Profile menu detail */
.pt-profile__id { display:flex; align-items:center; gap:11px; padding:8px 8px 12px; }
.pt-profile__av { width:40px; height:40px; border-radius:var(--radius-pill); background:var(--ink); color:var(--surface); display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:var(--fw-semibold); flex:none; }
.pt-profile__meta { display:flex; flex-direction:column; min-width:0; }
.pt-profile__name { font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--ink); line-height:1.35; }
.pt-profile__email { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-profile__upgrade { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; background:var(--accent-weak); text-decoration:none; }
.pt-profile__upgrade:hover { background:var(--accent-weak-2); }
.pt-profile__upgrade svg { flex:none; }
.pt-profile__upgrade .pt-up-t { font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--accent-press); line-height:1.3; }
.pt-profile__upgrade .pt-up-s { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--accent-press); opacity:.72; line-height:1.35; }
.pt-menu__item svg { flex:none; }

/* Boards menu — saved board rows with inline delete confirm (design 6a) */
.pt-boardrow { display:flex; align-items:center; border-radius:var(--radius-sm); }
.pt-boardrow:hover { background:var(--hover); }
.pt-boardrow.is-selected { background:var(--selected); }
.pt-boardrow__switch { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:9px 6px 9px 12px; border:none; background:transparent; border-radius:var(--radius-sm) 0 0 var(--radius-sm); font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink); cursor:pointer; font-family:var(--font-sans); text-align:left; }
.pt-boardrow__name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-boardrow__check { color:var(--accent-press); font-weight:var(--fw-semibold); }
.pt-boardrow__trash { width:26px; height:26px; margin-right:6px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:var(--radius-sm); background:transparent; color:var(--ink-faint); cursor:pointer; padding:0; flex:none; transition:background var(--dur-micro), color var(--dur-micro); }
.pt-boardrow__trash:hover { background:rgba(217,105,74,.16); color:var(--negative); }
.pt-boardconfirm { display:flex; flex-direction:column; gap:9px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--blush); }
.pt-boardconfirm__msg { display:flex; align-items:center; gap:8px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--blush-deep); line-height:1.4; }
.pt-boardconfirm__msg svg { flex:none; }
.pt-boardconfirm__actions { display:flex; gap:8px; justify-content:flex-end; }
.pt-boardconfirm__cancel { font-family:var(--font-sans); font-size:var(--fs-caption); font-weight:var(--fw-medium); background:transparent; color:var(--ink-muted); border:none; border-radius:var(--radius-sm); padding:7px 12px; cursor:pointer; }
.pt-boardconfirm__cancel:hover { background:rgba(30,29,29,.06); color:var(--ink); }
.pt-boardconfirm__del { font-family:var(--font-sans); font-size:var(--fs-caption); font-weight:var(--fw-medium); background:var(--negative); color:#fff; border:none; border-radius:var(--radius-sm); padding:7px 14px; cursor:pointer; }
.pt-boardconfirm__del:hover { background:#C4553A; }
.pt-boardmenu__empty { display:block; padding:8px 12px 10px; font-size:var(--fs-caption); font-weight:var(--fw-light); color:var(--ink-faint); line-height:1.5; }

/* Edit-board panel — opened from inside the Board menu (design 7a); drops from the
   Board pill it now lives under. */
.pt-editpanel { position:absolute; top:calc(100% + 8px); right:0; width:296px; z-index:130; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-toast); padding:16px; display:none; }
.pt-editpanel.is-open { display:block; }
.pt-editpanel__title { font-size:var(--fs-card); font-weight:var(--fw-semibold); letter-spacing:-0.01em; }
.pt-editpanel__hint { font-size:var(--fs-caption); font-weight:var(--fw-light); color:var(--ink-muted); margin:4px 0 10px; line-height:1.5; }
.pt-editpanel__rows { display:flex; flex-direction:column; gap:2px; }
.pt-editrow { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); cursor:grab; background:transparent; }
.pt-editrow:hover { background:var(--hover); }
.pt-editrow.is-drag { opacity:.5; }
.pt-editrow.is-over { background:var(--accent-weak); }
.pt-editrow__grip { flex:none; color:var(--ink-faint); }
.pt-editrow__dot { width:9px; height:9px; border-radius:3px; display:inline-block; flex:none; }
.pt-editrow__name { flex:1; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink); }
.pt-editrow.is-hidden .pt-editrow__name { color:var(--ink-faint); text-decoration:line-through; }
.pt-editrow__eye { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:var(--radius-sm); background:transparent; color:var(--ink-muted); cursor:pointer; padding:0; flex:none; }
.pt-editrow__eye:hover { background:rgba(30,29,29,.08); color:var(--ink); }
.pt-editpanel__actions { display:flex; gap:10px; margin-top:14px; }
.pt-btn-save { flex:1; font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--fw-medium); background:var(--accent); color:#0A2E1E; border:none; border-radius:var(--radius-sm); padding:11px 16px; cursor:pointer; }
.pt-btn-save:hover { background:var(--accent-press); }
.pt-btn-reset { font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--fw-medium); background:transparent; color:var(--ink-muted); border:none; border-radius:var(--radius-sm); padding:11px 14px; cursor:pointer; }
.pt-btn-reset:hover { background:var(--hover); color:var(--ink); }

/* ============================================================ SNAPSHOT STRIP */
.pt-snap { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:20px; }
.pt-tile { border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-flat); color:var(--ink); }
.pt-tile__label { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); opacity:.6; }
.pt-tile__value { font-size:32px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1.1; margin-top:8px; font-variant-numeric:tabular-nums; }
.pt-tile__value .pt-unit { font-size:15px; opacity:.55; }
.pt-tile__delta { font-size:var(--fs-label); font-weight:var(--fw-medium); margin-top:5px; }
.pt-tile__row { display:flex; align-items:center; gap:10px; margin-top:9px; }
.pt-tile__row--end { align-items:flex-end; gap:12px; }
.pt-tile__pername { font-size:21px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1.1; }
.pt-minibars { display:flex; align-items:flex-end; gap:3px; height:27px; padding-bottom:3px; }
.pt-minibars span { width:5px; border-radius:2px; background:var(--mint-deep); display:inline-block; }

/* ── Row height ("density") — board 4a's "Row height" stepper. `data-dens` on
      .ptx (server-seeded from the mt-petal-dens cookie, flipped live by
      DensityProvider) drives every height token so the whole board grows/shrinks
      together. Default (no attr) = Cozy. Line-chart SVG heights are handled
      server-side in petal-charts.tsx (crisp), not here. ── */
.ptx { --pt-rowh:400px; --pt-plot:176px; --pt-donut:112px; --pt-mixdonut:100px; }
.ptx[data-dens="compact"] { --pt-rowh:340px; --pt-plot:132px; --pt-donut:96px;  --pt-mixdonut:84px; }
.ptx[data-dens="cozy"]    { --pt-rowh:400px; --pt-plot:176px; --pt-donut:112px; --pt-mixdonut:100px; }
.ptx[data-dens="roomy"]   { --pt-rowh:452px; --pt-plot:228px; --pt-donut:140px; --pt-mixdonut:124px; }

/* ============================================================ WIDGET GRID */
.pt-grid { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(var(--pt-rowh),auto); gap:20px; }
/* Span comes from --pt-span, set per card by the row packer (lib/petal-layout.ts)
   on the server and re-applied by BoardGrid on layout change. It's a custom
   property rather than an inline grid-column so the tablet/mobile rules below
   still win. Leftover columns are redistributed to the narrowest cards but never
   past half the board, so a lone card holds at 50% and leaves the row's tail
   empty — only `--full` / `is-big` cards span the whole row. */
.pt-card { display:flex; flex-direction:column; grid-column:span var(--pt-span,2); border-radius:var(--radius-lg); padding:var(--card-pad); box-shadow:var(--shadow-flat); color:var(--ink); min-height:0; }
.pt-card.is-hidden { display:none !important; }
.pt-card--full { grid-column:1 / -1; }
.pt-card.is-big { grid-column:1 / -1; }   /* enlarge toggle → full width (client + SSR) */

/* Card reveal (design v3-Laptop). Cards rise in as they scroll into view, in a
   short stagger, and each card's contents then draw themselves in: lines trace,
   donuts sweep, bars grow, end dots land last.
   The hidden state is armed by BoardGrid from inside a real animation frame —
   never in the stylesheet — so a card is only ever made invisible when the
   script that reveals it is definitely running. Without a client (JS off, a
   frozen capture context, a crawler) nothing is armed and the board renders
   fully visible.
   ptGrowY / ptGrowX / ptFadeIn are shared with the traffic page and defined at
   the bottom of this file; only the two the board alone needs are declared here. */
@keyframes ptRise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes ptDraw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
/* No `to` on purpose: `both` lands the element on its OWN stroke-dasharray, so
   each arc sweeps out to whatever slice of the donut it happens to own. */
@keyframes ptSweep { from { stroke-dasharray:0 100; } }

.pt-grid.is-armed .pt-card { opacity:0; }
.pt-grid.is-armed .pt-card.is-in { animation:ptRise .6s var(--ease) both; animation-delay:var(--pt-d,0s); }

/* Inside a card, once it is revealed. The delays stack on the card's own stagger
   (--pt-d) so a late card's chart still draws after the card itself arrives. */
.pt-grid.is-armed [data-draw] { stroke-dasharray:1; }   /* needs pathLength="1" on the line */
.pt-grid.is-armed .is-in [data-draw] { animation:ptDraw .95s var(--ease) both; animation-delay:calc(var(--pt-d,0s) + .14s); }
.pt-grid.is-armed .is-in [data-sweep] { animation:ptSweep .9s var(--ease) both; animation-delay:calc(var(--pt-d,0s) + .12s); }
.pt-grid.is-armed [data-grow-y] { transform-origin:bottom; }
.pt-grid.is-armed .is-in [data-grow-y] { animation:ptGrowY .7s var(--ease) both; animation-delay:calc(var(--pt-d,0s) + .12s); }
.pt-grid.is-armed [data-grow-x] { transform-origin:left; }
.pt-grid.is-armed .is-in [data-grow-x] { animation:ptGrowX .75s var(--ease) both; animation-delay:calc(var(--pt-d,0s) + .12s); }
.pt-grid.is-armed [data-dot] { opacity:0; }
.pt-grid.is-armed .is-in [data-dot] { animation:ptFadeIn .45s var(--ease) forwards; animation-delay:calc(var(--pt-d,0s) + .72s); }

/* The KPI strip above the board reveals as ONE unit, its tiles stepping in —
   it sits outside the grid and, on mobile, scrolls sideways, so per-tile
   observation would strand the off-screen tiles at opacity 0. */
.pt-snap.is-armed > div { opacity:0; }
.pt-snap.is-armed.is-in > div { animation:ptRise .55s var(--ease) both; }
.pt-snap.is-armed.is-in > div:nth-child(2) { animation-delay:.06s; }
.pt-snap.is-armed.is-in > div:nth-child(3) { animation-delay:.12s; }
.pt-snap.is-armed.is-in > div:nth-child(4) { animation-delay:.18s; }
.pt-snap.is-armed.is-in > div:nth-child(5) { animation-delay:.24s; }
.pt-snap.is-armed.is-in [data-sweep] { animation:ptSweep .9s var(--ease) both; animation-delay:.12s; }

@media (prefers-reduced-motion: reduce) {
  .pt-grid.is-armed .pt-card, .pt-snap.is-armed > div { opacity:1; animation:none; }
  .pt-grid.is-armed [data-draw] { stroke-dasharray:none; animation:none; }
  .pt-grid.is-armed [data-sweep], .pt-grid.is-armed [data-grow-y], .pt-grid.is-armed [data-grow-x],
  .pt-snap.is-armed [data-sweep] { animation:none; transform:none; }
  .pt-grid.is-armed [data-dot] { opacity:1; animation:none; }
}

/* Tints */
.tint-sky{background:var(--sky);} .tint-mint{background:var(--mint);}
.tint-blush{background:var(--blush);} .tint-lilac{background:var(--lilac);}
.tint-butter{background:var(--butter);} .tint-surface{background:var(--surface); border:1px solid var(--line);}
.tint-ink{background:var(--ink); color:var(--surface);}
/* on-tint deep accent, used by subtitles / footers / accents inside a card */
.tint-sky{--deep:var(--sky-deep);} .tint-mint{--deep:var(--mint-deep);}
.tint-blush{--deep:var(--blush-deep);} .tint-lilac{--deep:var(--lilac-deep);}
.tint-butter{--deep:var(--butter-deep);} .tint-surface{--deep:var(--ink);}

/* Card header */
.pt-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.pt-card__titles { min-width:0; }
.pt-card__titlerow { display:flex; align-items:center; gap:6px; }
.pt-card__title { font-size:var(--fs-card); font-weight:var(--fw-semibold); letter-spacing:-0.01em; }
.pt-card__sub { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); margin-top:4px; color:var(--deep); opacity:.85; }

/* Info tooltip */
.pt-infotip { position:relative; display:inline-flex; color:var(--ink-faint); cursor:help; }
.pt-infotip:hover { color:var(--ink); }
.pt-infotip__bubble { position:absolute; top:20px; left:-10px; width:224px; z-index:70; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-tooltip); padding:10px 12px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink); line-height:1.55; display:none; }
.pt-infotip:hover .pt-infotip__bubble, .pt-infotip:focus-within .pt-infotip__bubble, .pt-infotip.is-show .pt-infotip__bubble { display:block; }
.pt-infotip--right .pt-infotip__bubble { left:auto; right:-10px; }

/* Card tools cluster */
.pt-card__tools { display:flex; align-items:center; gap:8px; flex:none; }
.pt-deltapill { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-label); font-weight:var(--fw-semibold); padding:6px 12px; border-radius:var(--radius-pill); white-space:nowrap; }
.pt-deltapill--up { background:var(--accent-weak); color:var(--positive); }
.pt-deltapill--down { background:rgba(217,105,74,.12); color:var(--negative); }
.pt-deltapill--flat { background:rgba(30,29,29,.06); color:var(--ink-muted); }
.pt-iconbtn { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:var(--radius-sm); background:transparent; color:var(--ink-muted); cursor:pointer; flex:none; padding:0; font-family:var(--font-sans); font-size:16px; font-weight:var(--fw-semibold); line-height:1; }
.pt-iconbtn:hover { background:rgba(30,29,29,.08); color:var(--ink); }
.pt-cardmenuwrap { position:relative; display:inline-flex; }
.pt-cardmenu { position:absolute; top:34px; right:0; min-width:192px; z-index:65; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-tooltip); padding:6px; text-align:left; display:none; }
.pt-cardmenuwrap.is-open .pt-cardmenu { display:block; }
.pt-cardmenu__item { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:var(--radius-sm); font-size:var(--fs-body); font-weight:var(--fw-medium); cursor:pointer; white-space:nowrap; color:var(--ink); background:transparent; border:none; width:100%; text-align:left; font-family:var(--font-sans); }
.pt-cardmenu__item:hover { background:var(--hover); }
.pt-cardmenu__item--accent { font-weight:var(--fw-semibold); color:var(--accent-press); }
.pt-cardmenu__item--accent:hover { background:var(--accent-weak); }
.pt-cardmenu__item--danger { color:var(--negative); }
.pt-cardmenu__item--danger:hover { background:rgba(217,105,74,.10); }

/* Big metric line */
.pt-metric { font-size:var(--fs-metric); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1; margin:16px 0 4px; font-variant-numeric:tabular-nums; }
.pt-metric__unit { font-size:15px; color:var(--ink-muted); font-weight:var(--fw-medium); }
.pt-metric__note { font-size:14px; font-weight:var(--fw-medium); color:var(--ink-muted); letter-spacing:0; margin-left:9px; }

.pt-card__foot { margin-top:auto; padding-top:14px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--deep); }

/* Enlarge toggle icon swap (CSS-only, driven by .is-big on the card) */
.pt-card .pt-toggle .ic-restore { display:none; }
.pt-card.is-big .pt-toggle .ic-enlarge { display:none; }
.pt-card.is-big .pt-toggle .ic-restore { display:block; }
.pt-card.is-big .pt-enlarge-label::before { content:"Restore size"; }
.pt-card:not(.is-big) .pt-enlarge-label::before { content:"Enlarge"; }
.pt-enlarge-label { font-size:0; }
.pt-enlarge-label::before { font-size:var(--fs-body); }

/* ============================================================ LINE CHARTS */
.pt-chart { position:relative; margin-top:10px; cursor:crosshair; }
.pt-chart svg { display:block; overflow:visible; width:100%; }

/* Mention chart, drawn at one viewBox per breakpoint (MENTION_BOX): an SVG's
   rendered height follows its viewBox aspect, so one box can't serve a
   half-width and a full-row card without squashing one of them. The compact and
   enlarged faces each hold their own pair — a DESKTOP box and a `-t` TABLET box
   (v3-Tablet draws this chart taller in a narrower card) — and the ≤1080 block
   below swaps the pairs over. `is-big` is a client toggle, so the choice has to
   be CSS rather than a server-picked geometry. */
.pt-menvar--half-t, .pt-menvar--big-t { display:none; }
.pt-rankvar--t { display:none; }
.pt-series { transition:stroke-opacity var(--dur-micro); }
/* Date axis is always visible (design v4: "date axes always visible, not only
   when enlarged"). */
.pt-axis { display:flex; justify-content:space-between; margin:8px 2px 0; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
/* multi-series (mention) legend */
.pt-legend { display:flex; gap:12px 20px; flex-wrap:wrap; margin-top:16px; font-size:var(--fs-label); font-weight:var(--fw-medium); }
.pt-legend__item { display:inline-flex; align-items:center; gap:7px; }
.pt-legend__line { width:14px; height:3.5px; border-radius:2px; display:inline-block; }
.pt-legend__dot { width:9px; height:9px; border-radius:3px; display:inline-block; }
.pt-legend__val { margin-left:5px; font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.pt-legend--compact { gap:10px 16px; font-size:var(--fs-caption); }

/* Chart hover tooltip (multi-row). Sits ABOVE the hover point (design v3-Laptop)
   rather than over the top of the plot, so it never covers the series it names. */
.pt-htip { position:absolute; top:0; transform:translateX(-50%) translateY(-100%); margin-top:14px; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-tooltip); padding:10px 12px; pointer-events:none; min-width:152px; z-index:30; display:none; }
.pt-htip__date { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-muted); }
/* Run-indexed charts (mention) name the run AND date it, and lead with a total
   row above a divider — design "AI Mention Analytics - Views". */
.pt-htip__head { display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); }
.pt-htip__row--lead { padding-bottom:5px; border-bottom:1px solid var(--line-soft); color:var(--ink); }
.pt-htip__row--lead .pt-grow, .pt-htip__row--lead b { font-weight:var(--fw-semibold); }
.pt-htip__row { display:flex; align-items:center; gap:7px; margin-top:6px; font-size:var(--fs-caption); font-weight:var(--fw-medium); }
.pt-htip__row i { width:8px; height:8px; border-radius:3px; display:inline-block; }
.pt-htip__row .pt-grow { flex:1; }
.pt-htip__row b { font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
/* Single-series pill tooltip. The design parks this one beside the plot rather
   than above the point, so it opts out of the lift the multi-row tip just took. */
.pt-htip--pill { min-width:0; border-radius:var(--radius-pill); padding:5px 12px; font-size:var(--fs-caption); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; display:none; align-items:center; transform:translateX(-50%); margin-top:0; }

/* ============================================================ GROUPED BARS (breakdown)
   Three stacked rows (design v3), NOT a row of [cluster + label] columns: the
   cross-model average per axis, the plot, then the axis names. The bars live in
   an absolutely-positioned row inside the plot box, so their fixed 9px widths
   never become the card's min-content — only the (short) axis names can, and
   they shrink to an even 5-way split. */
/* The axis names are what set this block's intrinsic width: each sizes to its own
   text ("Satisfaction" is the widest), which is how the design keeps them all at
   full size and legible. On a half-width card that lands at EXACTLY the card's
   inner width at 834 and over it below that — so __inner carries the whole block
   at max-content and __gbars scrolls it, keeping averages, bars and names in one
   aligned unit instead of letting the names shove the card open. */
.pt-gbars { overflow-x:auto; scrollbar-width:none; margin-top:16px; }
.pt-gbars::-webkit-scrollbar { display:none; }
.pt-gbars__inner { display:flex; flex-direction:column; min-width:100%; width:max-content; }
.pt-gbars__avgs, .pt-gbars__names { display:flex; gap:14px; }
.pt-gbars__avg { flex:1; text-align:center; font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--deep); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.pt-gbars__plot { position:relative; height:var(--pt-plot); margin-top:7px; }
.pt-gbars__ceil { position:absolute; left:0; right:0; top:0; border-top:1px dashed rgba(30,29,29,.16); }
.pt-gbars__mid  { position:absolute; left:0; right:0; top:50%; border-top:1px solid rgba(30,29,29,.07); }
.pt-gbars__base { position:absolute; left:0; right:0; bottom:0; border-top:1px solid rgba(30,29,29,.18); }
.pt-gbars__ceilval { position:absolute; right:0; top:-7px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); color:var(--ink-faint); }
.pt-gbars__bars { position:absolute; inset:0; display:flex; align-items:flex-end; gap:14px; }
/* height:100% is load-bearing — each bar is sized as a % of its cluster, and a
   percentage against an auto-height parent resolves to auto (every bar collapses
   to min-height). The plot box is what carries the density height. */
.pt-gbars__cluster { flex:1; min-width:0; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
/* Bars double in width when the card is enlarged (design v3: 9px → 18px) — the
   only thing `big` changes here; gaps, heights and labels are unaffected. */
.pt-gbars__bar { width:9px; min-height:3px; border-radius:3px 3px 2px 2px; transition:opacity var(--dur-micro), width var(--dur-base) var(--ease); cursor:pointer; }
.pt-card.is-big .pt-gbars__bar { width:18px; }
.pt-gbars__names { margin-top:9px; }
.pt-gbars__name { flex:1; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--deep); text-align:center; }

/* ============================================================ HORIZONTAL BARS (SoV / backlinks / mix legend) */
.pt-hbars { display:flex; flex-direction:column; gap:14px; margin-top:18px; font-size:var(--fs-body); font-weight:var(--fw-medium); }
.pt-hbar__head { display:flex; justify-content:space-between; margin-bottom:6px; }
.pt-hbar__val { font-variant-numeric:tabular-nums; }
.pt-hbar__track { height:10px; border-radius:5px; }
.pt-hbar__fill { height:100%; border-radius:5px; transition:width var(--dur-base) var(--ease); }
.pt-hbar--own .pt-hbar__head span { font-weight:var(--fw-semibold); }

/* ============================================================ RANK — NO MENTIONS
   Shown instead of the line when the brand made no ranked list at all, so the
   #16 sentinel never renders as if it were a real placement (design v3). */
.pt-rankempty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin-top:12px; min-height:138px; border:1.5px dashed rgba(30,29,29,.18); border-radius:var(--radius); text-align:center; }
.pt-rankempty__t { font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--ink); }
.pt-rankempty__s { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--blush-deep); max-width:320px; line-height:1.6; }

/* ============================================================ ROW HOVERS
   Design v3 gives every list row in every card the same rollover: a soft wash
   that BLEEDS past the content box via matching negative margins, so the
   highlight reads as a full-width row rather than a floating pill. Kept as one
   block (rather than per card) because the design's whole point is that these
   nine list types behave identically. */
.pt-hbar, .pt-rankrow, .pt-lost__row, .pt-donut__legend .pt-lrow {
  border-radius:var(--radius-sm);
  transition:background var(--dur-micro) var(--ease);
}
.pt-hbar, .pt-rankrow { padding:6px 10px; margin:-6px -10px; }
.pt-lost__row { padding:8px 10px; margin:-8px -10px; }
.pt-donut__legend .pt-lrow { padding:4px 8px; margin:-4px -8px; }
.pt-hbar:hover, .pt-rankrow:hover, .pt-lost__row:hover,
.pt-donut__legend .pt-lrow:hover { background:rgba(30,29,29,.05); }

/* Win/lose rows carry their own gap tint, so they get no bleed and a slightly
   stronger wash to stay visible over it. */

/* The improve card is ink-on-dark — it lightens instead of darkening. */
.pt-improve__row { transition:background var(--dur-micro) var(--ease); }
.pt-improve__row:hover { background:rgba(255,255,255,.13); }

/* ============================================================ DONUTS */
.pt-donutrow { display:flex; align-items:center; gap:18px; margin-top:18px; }
.pt-donutrow--overall { gap:22px; margin-top:18px; }
.pt-donut { flex:none; }
.pt-donut__legend { font-size:var(--fs-caption); font-weight:var(--fw-medium); line-height:1.85; flex:1; }
.pt-donut__legend b { font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.pt-donut__legend .pt-lrow { display:flex; justify-content:space-between; gap:8px; }
.pt-donut__legend .pt-lrow i { width:8px; height:8px; border-radius:3px; display:inline-block; }
.pt-donut__legend .pt-lname { display:inline-flex; align-items:center; gap:6px; }
.pt-donut__summary { font-size:var(--fs-body); color:var(--deep); font-weight:var(--fw-medium); line-height:1.75; }
.pt-donut__summary b { color:var(--ink); font-weight:var(--fw-semibold); }

/* ============================================================ RANKED PAGE LIST (Where AI finds you) */
.pt-ranklist { display:flex; flex-direction:column; gap:13px; margin-top:18px; }
.pt-rankrow { display:flex; align-items:baseline; gap:11px; }
.pt-rankrow__n { width:18px; font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--deep); flex:none; }
.pt-rankrow__name { flex:1; font-size:var(--fs-body); font-weight:var(--fw-semibold); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-rankrow__v { font-size:var(--fs-body); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }

/* ============================================================ EMPTY STATES */
.pt-empty { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); line-height:1.6; margin-top:16px; }

/* ============================================================ IMPROVE (dark, full width) */
.pt-card.tint-ink { color:var(--surface); box-shadow:var(--shadow-flat); transition:box-shadow .35s ease; }
.pt-card.tint-ink.is-flash { box-shadow:0 0 0 3px var(--accent); }
.pt-improve__sub { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); margin-top:4px; color:var(--accent); opacity:.9; }
.pt-improve__pill { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-label); font-weight:var(--fw-semibold); padding:6px 12px; border-radius:var(--radius-pill); background:rgba(255,255,255,.12); color:var(--surface); white-space:nowrap; }
.pt-improve__dot { width:7px; height:7px; border-radius:50%; background:var(--surface); display:inline-block; opacity:.8; }
.pt-improve__pill--won { background:var(--accent-weak-2); color:var(--accent); gap:6px; }
/* Clamped to two lines (design v3) — without it a long focus wraps to four or
   five lines of 19px and swamps the card. 19px is deliberate: this is the card's
   primary read, larger than its own title. This is the ONLY place the focus prose
   renders (/improve shows per-action steps, not this), so the element carries a
   title attribute with the full text and the narrator is asked to write to the
   ~160-char budget the clamp allows. */
.pt-improve__focus { font-size:19px; font-weight:var(--fw-medium); line-height:var(--lh-snug); margin:16px 0 4px; max-width:900px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pt-improve__focus b { font-weight:var(--fw-semibold); color:var(--accent); }
.pt-improve__rows { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.pt-improve__row { display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.07); border-radius:var(--radius); padding:12px 16px; }
.pt-improve__n { width:22px; font-size:var(--fs-body); font-weight:var(--fw-semibold); color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums; flex:none; }
.pt-improve__cat { display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-label); font-weight:var(--fw-semibold); padding:4px 11px; border-radius:var(--radius-pill); flex:none; min-width:92px; }
.pt-improve__cat--visibility { color:var(--sky-deep); background:var(--sky); }
.pt-improve__cat--placement { color:var(--blush-deep); background:var(--blush); }
.pt-improve__cat--competitors { color:var(--lilac-deep); background:var(--lilac); }
.pt-improve__cat--sources { color:var(--butter-deep); background:var(--butter); }
.pt-improve__cat--sentiment { color:var(--mint-deep); background:var(--mint); }
.pt-improve__band { display:inline-flex; align-items:center; font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--ink); background:var(--surface); padding:3px 10px; border-radius:var(--radius-pill); flex:none; }
.pt-improve__title { flex:1; font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--surface); min-width:0; }
.pt-improve__metric { font-size:17px; font-weight:var(--fw-semibold); color:var(--surface); font-variant-numeric:tabular-nums; flex:none; }
.pt-improve__msub { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:rgba(255,255,255,.5); margin-left:6px; }
.pt-improve__foot { display:flex; align-items:center; gap:14px; margin-top:18px; }
.pt-improve__note { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:rgba(255,255,255,.45); }
.pt-improve__cta { margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-body); font-weight:var(--fw-semibold); background:var(--accent); color:#0A2E1E; border-radius:var(--radius-pill); padding:12px 20px; text-decoration:none; flex:none; }
.pt-improve__cta:hover { background:var(--accent-press); }
.pt-card.tint-ink .pt-iconbtn { color:rgba(255,255,255,.65); }
.pt-card.tint-ink .pt-iconbtn:hover { background:rgba(255,255,255,.10); color:var(--surface); }

/* ============================================================ TOAST */
.pt-toast { position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(8px); display:flex; align-items:center; gap:8px; background:var(--ink); color:var(--surface); border-radius:var(--radius-pill); box-shadow:var(--shadow-toast); padding:11px 20px; font-size:var(--fs-body); font-weight:var(--fw-medium); z-index:200; opacity:0; pointer-events:none; transition:opacity var(--dur-base), transform var(--dur-base); }
.pt-toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }
.pt-toast__tick { color:var(--accent); font-weight:var(--fw-semibold); }

/* ============================================================ COMPACT FILTER TRIGGERS + VIEW-SETTINGS SHEET (design 5a — ≤700px)
   Both compact affordances are hidden until mobile, where the ≤700px query below
   reveals them (a circular Filters button + a value-pill row). Desktop AND tablet
   keep the individual pill dropdowns. */
.pt-filterbtn { display:none; }
.pt-pillrow { display:none; }

/* The consolidated "View settings" sheet — mounted only while open (React), so
   these are its open-state visuals; the media queries place + size it. */
.pt-sheet__scrim { position:fixed; inset:0; background:rgba(30,29,29,.38); z-index:170; animation:pt-fade var(--dur-base) var(--ease); }
.pt-sheet { position:fixed; left:0; right:0; bottom:0; z-index:180; display:flex; flex-direction:column; max-height:82vh; background:var(--surface-3); border-radius:22px 22px 0 0; box-shadow:var(--shadow-toast); overflow:hidden; animation:pt-sheet-up var(--dur-base) var(--ease); }
.pt-sheet:focus { outline:none; }
.pt-sheet__handle { width:40px; height:4px; border-radius:2px; background:rgba(30,29,29,.18); margin:12px auto 2px; flex:none; }
.pt-sheet__head { display:flex; align-items:center; justify-content:space-between; padding:6px 20px 10px; flex:none; }
.pt-sheet__title { font-size:17px; font-weight:var(--fw-semibold); letter-spacing:-0.01em; color:var(--ink); }
.pt-sheet__done { font-family:var(--font-sans); font-size:14px; font-weight:var(--fw-semibold); color:var(--accent-press); background:none; border:none; cursor:pointer; padding:6px 4px; }
.pt-sheet__sections { flex:1; min-height:0; overflow-y:auto; padding:0 14px calc(20px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr; gap:0 18px; align-content:start; }
.pt-sheet__label { font-size:11px; font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); margin:12px 6px 4px; }
.pt-sheet__row { display:flex; align-items:center; gap:10px; padding:12px; border-radius:12px; font-size:14px; font-weight:var(--fw-medium); color:var(--ink); text-decoration:none; background:transparent; border:none; width:100%; text-align:left; font-family:var(--font-sans); cursor:pointer; }
.pt-sheet__row:hover { background:var(--hover); }
.pt-sheet__row.is-active { background:var(--selected); }
.pt-sheet__row--accent { color:var(--accent-press); font-weight:var(--fw-semibold); }
.pt-sheet__grow { flex:1; min-width:0; }
.pt-sheet__check { color:var(--accent-press); font-weight:var(--fw-semibold); }
.pt-sheet__dot { width:10px; height:10px; border-radius:3px; display:inline-block; flex:none; }
@keyframes pt-fade { from { opacity:0; } to { opacity:1; } }
@keyframes pt-sheet-up { from { transform:translateY(100%); } to { transform:translateY(0); } }
body.pt-noscroll { overflow:hidden; }

/* ============================================================ MOBILE BOTTOM TAB BAR (design 5a — shown ≤700px) */
.pt-tabbar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:150; background:rgba(245,241,232,.94); border-top:1px solid var(--line); padding:8px 24px calc(10px + env(safe-area-inset-bottom)); justify-content:space-between; align-items:flex-start; }
.pt-tabbar__item { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; font-weight:var(--fw-medium); color:var(--ink-faint); text-decoration:none; flex:1; }
.pt-tabbar__item.is-active { color:var(--ink); font-weight:var(--fw-semibold); }
.pt-tabbar__item svg { display:block; }

/* ============================================================ TABLET (≤1080px) — design "Mention Tracker Dashboard v3 - Tablet"
   The v3 tablet board is the DESKTOP board at 834px, not a reduced one: same card
   padding/radius, same 6-col grid + row packing, same row-height (density) control
   and the same per-card enlarge + ⋯ menus. Two things genuinely change — the four
   scope pills drop to their own row under the title (they don't fit beside it, and
   in the chrome row they pushed the avatar off-screen), and every card is floored
   at half-width. The consolidated Filters sheet is mobile-only now. */
@media (max-width:1080px) {
  .ptx .pt-wrap { padding:0 24px 40px; }
  .pt-topbar__chrome { gap:12px; padding:14px 2px 12px; }   /* logo · nav · avatar — nothing else */

  /* Title on line 1 with the page detail pushed to the far right (the pills no
     longer sit there), scope pills left-aligned on line 2. */
  .pt-contextbar { flex-wrap:wrap; padding:14px 2px 18px; }
  .pt-contextbar__lead { flex:1; }
  .pt-contextbar__slot { margin-left:auto; }
  .pt-contextbar__tools { flex-basis:100%; margin-left:0; flex-wrap:wrap; margin-top:4px; }

  .pt-snap { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }   /* 5 tiles → 3 + 2 */

  /* Board: base 6-col grid, gap and density rows all carry over; only the span
     changes. --pt-span-t is the server's tablet packing (every card ≥ half). */
  .ptx .pt-card { grid-column:span var(--pt-span-t,3); }
  .ptx .pt-card--full, .ptx .pt-card.is-big { grid-column:1 / -1; }

  /* AI Mention Analytics — design 1a (mobile) and 1b (tablet) are the SAME card
     layout, so these sit in the wide block rather than the tablet band below:
     the card is half as wide, so the legend chips drop under the chart, the
     delta pill moves out of the header onto the headline row in its short form,
     and the chart swaps to its narrower `-t` viewBox (DENSITY_HERO_TABLET). */
  .ptx .pt-menvar--half, .ptx .pt-menvar--big { display:none; }
  .ptx .pt-menvar--half-t, .ptx .pt-menvar--big-t { display:block; }
  .ptx .pt-mna__hero { align-items:center; gap:12px; }
  .ptx .pt-mna__rate { align-items:center; }
  .ptx .pt-mna__cap { max-width:110px; }
  .ptx .pt-mna__pill--long { display:none; }
  .ptx .pt-mna__pill--short { display:inline-flex; margin-left:auto; flex:none; }
  .ptx .pt-mna__chips--hero { display:none; }
  .ptx .pt-mna__chips--under { display:flex; }
}

/* ============================================================ TABLET BAND ONLY (701–1080px)
   What v3-Tablet changes INSIDE the cards. Scoped to the band — not `max-width`
   — because mobile (5a) keeps the desktop card content and must not inherit any
   of it; a `max-width:1080px` rule here would need undoing at ≤700, and
   "undoing" a display:none on a flex legend means guessing its display value. */
@media (min-width:701px) and (max-width:1080px) {
  /* DROPPED at tablet: every 5-model legend (mention · win/lose incl. its
     "Filled = named you" key · breakdown · share-of-voice trend), the mention
     card's runs note, and the per-domain note in Citations You Lost. A
     half-width card can't afford a legend AND a readable chart, and the model
     colours are already keyed by the Models pill's menu. */
  .ptx .pt-hide-tablet { display:none; }

  /* Rank swaps to its taller tablet geometry (RANK_PLOT_F_TABLET) — same chart,
     drawn to fill the legend-free card. */
  .ptx .pt-rankvar--d { display:none; }
  .ptx .pt-rankvar--t { display:block; }
  .ptx [data-widget="rank"] .pt-metric { margin:14px 0 2px; }

  /* Citations You Lost: rows spread down the card (the note is gone), squares
     get thicker, and a long domain ellipses instead of shoving the status out. */
  .ptx .pt-lost { flex:1; justify-content:space-evenly; gap:18px; margin-top:12px; }
  .ptx .pt-lost__row { margin:0 -10px; }
  .ptx .pt-lost__head { align-items:baseline; gap:10px; margin-bottom:9px; }
  .ptx .pt-lost__domain { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ptx .pt-lost__status { flex:none; white-space:nowrap; }
  .ptx .pt-lost__cell { height:16px; border-radius:4px; }
}

/* ============================================================ MOBILE (≤700px): single column, slim header, value-pill row, bottom tab bar + Filters sheet (design 5a) */
@media (max-width:700px) {
  .ptx .pt-wrap { padding:0 0 96px; max-width:100%; }
  .pt-topbar__chrome { gap:10px; padding:12px 16px; border-bottom:none; }
  .pt-brand { font-size:17px; }
  .pt-nav { display:none; }                 /* primary nav → bottom tab bar */
  .pt-topbar__right { gap:8px; }             /* now just [Filters circle] + [avatar] */
  /* Mobile is the only breakpoint that folds the scope pills into a sheet. */
  .pt-hide-compact { display:none !important; }
  .pt-filterbtn { display:inline-flex; width:40px; height:40px; padding:0; border-radius:var(--radius-pill); justify-content:center; }
  /* Board editing stays desktop+tablet (design 5a): the board is one column here,
     so there's nothing to enlarge a card to and nothing to reorder it around. */
  .pt-toggle, .pt-cardmenuwrap { display:none; }
  .pt-filterbtn__label { display:none; }
  .pt-pill { font-size:13px; padding:8px 14px; }

  /* Value-pill row — a second, horizontally-scrolling line under the slim header */
  .pt-pillrow { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 16px 12px; }
  .pt-pillrow::-webkit-scrollbar { display:none; }
  .pt-pillrow .pt-pill { flex:none; }

  .pt-contextbar { padding:2px 16px 14px; }
  .pt-contextbar__lead { width:100%; gap:6px 12px; }
  .pt-contextbar__title { font-size:19px; }
  .pt-contextbar__slot { margin-left:auto; align-self:baseline; }   /* detail (Last run) sits to the right of the title */

  .pt-snap { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:0 0 16px; padding:2px 16px 6px; -webkit-overflow-scrolling:touch; }
  .pt-snap::-webkit-scrollbar { display:none; }
  .pt-tile { flex:0 0 156px; scroll-snap-align:start; border-radius:18px; padding:15px 16px; }
  .pt-tile__value { font-size:32px; }

  /* minmax(0,…), not 1fr: a bare `1fr` floors the column at the widest card's
     MIN-CONTENT, so one unshrinkable card used to drag the whole board out to
     ~1725px inside a 376px screen and the page scrolled sideways. */
  .pt-grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:14px; padding:0 16px; }
  .ptx .pt-card, .ptx .pt-card--full, .ptx .pt-card.is-big { grid-column:auto; min-height:0; border-radius:20px; padding:17px; }
  /* Mobile (5a) keeps the desktop card content — the tablet-band block above
     doesn't reach here, except where it already narrowed a card to this width.
     A card saved as 'big' can't widen in a one-column board, so the mention card
     stays on its compact face and its narrow `-t` viewBox whatever the saved flag
     says (an SVG's rendered height follows its viewBox aspect — the wide one
     squashes). Both fall out of the ≤1080 block above; nothing to override. */
  .pt-metric { font-size:32px; margin:12px 0 2px; }
  .pt-deltapill { font-size:11px; padding:4px 9px; gap:4px; }
  .pt-improve__focus { font-size:16px; }
  .pt-improve__row { flex-wrap:wrap; row-gap:6px; padding:12px 14px; }
  .pt-improve__title { flex:1 1 100%; order:5; }
  .pt-improve__metric { margin-left:auto; }
  .pt-improve__foot { flex-direction:column; align-items:stretch; gap:10px; }
  .pt-improve__cta { margin-left:0; justify-content:center; }

  /* Profile menu still rises as a bottom sheet on mobile (the only remaining pill menu) */
  .pt-menu--profile { position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; min-width:0; z-index:160; border-radius:22px 22px 0 0; padding:12px 12px calc(22px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-toast); max-height:72vh; overflow:auto; }
  .pt-menu--profile .pt-menu__item { padding:12px; border-radius:12px; font-size:14px; }
  .pt-toast { left:12px; right:12px; bottom:84px; transform:translateY(8px); }
  .pt-toast.is-show { transform:translateY(0); }

  /* Full-width bottom sheet (overrides the tablet centred rule) */
  .pt-sheet { left:0; right:0; bottom:0; transform:none; width:auto; max-height:82vh; border-radius:22px 22px 0 0; animation:pt-sheet-up var(--dur-base) var(--ease); }
  .pt-sheet__sections { grid-template-columns:1fr; }

  .pt-tabbar { display:flex; }

  /* Where You Win & Lose (design 1a) — the table restacks: each prompt becomes
     its own mini-card (quote wraps full-width, then dots + rate + best on one
     line), worst 5 only, and the swatch legend collapses to a "worst 5 of N" note.
     `.ptx`-prefixed so these win over the base winlose block declared later. */
  .ptx .pt-wl__head { display:none; }
  .ptx .pt-wl { gap:4px; }
  .ptx .pt-wl__row { flex-wrap:wrap; gap:7px; padding:9px 10px; }
  .ptx .pt-wl__row:nth-child(n+6) { display:none; }
  /* Quote takes its own full-width line above the dots. It KEEPS the base
     two-line clamp (design 1a cuts the mobile question at 92 chars over two
     lines) — the old `overflow:visible` here existed only to undo the previous
     single-line nowrap, and would now let a long question run the row on. */
  .ptx .pt-wl__row .pt-wl__q { flex:0 0 100%; }
  .ptx .pt-wl__dots { width:auto; justify-content:flex-start; gap:7px; }
  .ptx .pt-wl__dot { width:13px; height:13px; }
  .ptx .pt-wl__rate { width:auto; margin-left:auto; }
  .ptx .pt-wl__best { width:34px; font-size:var(--fs-caption); }
  .ptx .pt-wl__legend { margin-top:10px; }
  .ptx .pt-wl__legend .pt-legend__item, .ptx .pt-wl__legend .pt-legend__note { display:none; }
  .ptx .pt-wl__notem { display:inline; color:var(--deep); }
}

/* ── Model filter — declarative dim ──────────────────────────────────────────
   Replaces the per-node inline opacity the old public/dashboard-petal.js set.
   ModelFilterProvider writes data-model onto .ptx when a single model is picked;
   the non-selected mention-series/breakdown-bars drop to .14 and legend items to
   .32, while the selected model keeps its natural full opacity. Same values and
   (via the existing .pt-gbars__bar/.pt-series transitions) the same feel. */
.ptx[data-model="chatgpt"]    [data-hover="mention"] [data-series]:not([data-series="chatgpt"]),
.ptx[data-model="chatgpt"]    [data-breakdown] .pt-gbars__bar:not([data-series="chatgpt"]),
.ptx[data-model="claude"]     [data-hover="mention"] [data-series]:not([data-series="claude"]),
.ptx[data-model="claude"]     [data-breakdown] .pt-gbars__bar:not([data-series="claude"]),
.ptx[data-model="gemini"]     [data-hover="mention"] [data-series]:not([data-series="gemini"]),
.ptx[data-model="gemini"]     [data-breakdown] .pt-gbars__bar:not([data-series="gemini"]),
.ptx[data-model="perplexity"] [data-hover="mention"] [data-series]:not([data-series="perplexity"]),
.ptx[data-model="perplexity"] [data-breakdown] .pt-gbars__bar:not([data-series="perplexity"]),
.ptx[data-model="grok"]       [data-hover="mention"] [data-series]:not([data-series="grok"]),
.ptx[data-model="grok"]       [data-breakdown] .pt-gbars__bar:not([data-series="grok"]) { opacity:.14; }

.ptx[data-model="chatgpt"]    .pt-legend .pt-legend__item[data-series]:not([data-series="chatgpt"]),
.ptx[data-model="claude"]     .pt-legend .pt-legend__item[data-series]:not([data-series="claude"]),
.ptx[data-model="gemini"]     .pt-legend .pt-legend__item[data-series]:not([data-series="gemini"]),
.ptx[data-model="perplexity"] .pt-legend .pt-legend__item[data-series]:not([data-series="perplexity"]),
.ptx[data-model="grok"]       .pt-legend .pt-legend__item[data-series]:not([data-series="grok"]) { opacity:.32; }

/* ── v3 cards (design 3dfe4242 "Dashboard v3") ───────────────────────────────
   Sentiment axis panels. The server renders ALL six (five axes + Composite) and
   CSS reveals the picked one — same no-refetch trick as the model filter above,
   so switching axis is instant. SentimentAxisProvider writes data-sentaxis. */
.ptx [data-axpanel] { display:none; }
.ptx[data-sentaxis="overall_sentiment_score"]     [data-axpanel="overall_sentiment_score"],
.ptx[data-sentaxis="trustworthiness_score"]       [data-axpanel="trustworthiness_score"],
.ptx[data-sentaxis="safety_and_reliability_score"] [data-axpanel="safety_and_reliability_score"],
.ptx[data-sentaxis="customer_satisfaction_bias"]  [data-axpanel="customer_satisfaction_bias"],
.ptx[data-sentaxis="value_for_money_score"]       [data-axpanel="value_for_money_score"],
.ptx[data-sentaxis="composite"]                   [data-axpanel="composite"] { display:block; }
/* …restoring the natural display type for the inline ones (delta pill, hint). */
.ptx[data-sentaxis="overall_sentiment_score"]     .pt-axpanel--inline[data-axpanel="overall_sentiment_score"],
.ptx[data-sentaxis="trustworthiness_score"]       .pt-axpanel--inline[data-axpanel="trustworthiness_score"],
.ptx[data-sentaxis="safety_and_reliability_score"] .pt-axpanel--inline[data-axpanel="safety_and_reliability_score"],
.ptx[data-sentaxis="customer_satisfaction_bias"]  .pt-axpanel--inline[data-axpanel="customer_satisfaction_bias"],
.ptx[data-sentaxis="value_for_money_score"]       .pt-axpanel--inline[data-axpanel="value_for_money_score"],
.ptx[data-sentaxis="composite"]                   .pt-axpanel--inline[data-axpanel="composite"] { display:inline-flex; }
/* …and for the per-axis sub-caption, which is a plain run of text. */
.ptx[data-sentaxis="overall_sentiment_score"]     .pt-axsub[data-axpanel="overall_sentiment_score"],
.ptx[data-sentaxis="trustworthiness_score"]       .pt-axsub[data-axpanel="trustworthiness_score"],
.ptx[data-sentaxis="safety_and_reliability_score"] .pt-axsub[data-axpanel="safety_and_reliability_score"],
.ptx[data-sentaxis="customer_satisfaction_bias"]  .pt-axsub[data-axpanel="customer_satisfaction_bias"],
.ptx[data-sentaxis="value_for_money_score"]       .pt-axsub[data-axpanel="value_for_money_score"],
.ptx[data-sentaxis="composite"]                   .pt-axsub[data-axpanel="composite"] { display:inline; }

/* Axis picker — a mint pill in the card body, deliberately quieter than the
   global tracker/model/range pills in the header. It shares the metric's row
   and is pushed to the right edge, so the chart keeps the height the picker's
   old standalone row used to take (design v3-laptop). */
.pt-axrow { display:flex; align-items:center; gap:10px; margin:16px 0 4px; }
.pt-axrow .pt-metric { margin:0; }
.pt-axrow .pt-axwrap { margin-left:auto; }
.pt-axwrap { position:relative; display:inline-block; }
.pt-axbtn { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semibold); padding:6px 13px; border-radius:var(--radius-pill); border:none; cursor:pointer; background:var(--mint-deep); color:#F0FAF5; }
.pt-axbtn:hover { filter:brightness(1.08); }
/* Opens right-aligned — the button now sits at the card's right edge, so a
   left-anchored menu would hang off it. */
.pt-axmenu { position:absolute; top:36px; right:0; min-width:224px; z-index:66; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-tooltip); padding:6px; display:none; text-align:left; }
.pt-axwrap.is-open .pt-axmenu { display:block; }
.pt-axmenu__item { display:flex; align-items:center; gap:9px; width:100%; padding:8px 12px; border:none; background:transparent; border-radius:var(--radius-sm); font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink); cursor:pointer; text-align:left; }
.pt-axmenu__item > span:first-child { flex:1; }
.pt-axmenu__item:hover { background:var(--hover); }
.pt-axmenu__item.is-on { background:var(--selected); }
.pt-axmenu__ck { color:var(--accent-press); font-weight:var(--fw-semibold); }

/* Sentiment rationale — the model's own one-line "why" behind its scores.
   One quote at a time: all five would bury the chart. Unfiltered shows the first
   model that returned one; picking a model shows that model's (and nothing if it
   didn't return one — better silent than attributing the wrong model's words). */
.pt-rationale { margin-top:auto; padding-top:14px; display:flex; flex-direction:column; gap:8px; }
.pt-rationale__row { display:none; align-items:baseline; gap:8px; }
.pt-rationale__row:first-child { display:flex; }
.pt-rationale__dot { width:8px; height:8px; border-radius:3px; display:inline-block; flex:none; }
.pt-rationale__txt { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--mint-deep); line-height:1.6; }
.pt-rationale__src { color:var(--ink-muted); }

/* ══ AI Mention Analytics — the flagship card (design "AI Mention Analytics -
      Views", 3dfe4242). The number the whole board breaks down, so it's the only
      card that earns the display-size headline: the rate huge, everything else
      quiet around it. One card, four faces — 1a mobile, 1b tablet, 1c desktop
      half-width, 1d enlarged to the full row (summary rail + per-model tiles).
      Chart geometry (fixed 0–100% scale, run-indexed) is in petal-charts.tsx. ══ */
.pt-mna__compact { display:flex; flex-direction:column; flex:1; min-height:0; }

/* Headline row. 1c parks the legend chips on the right of it; 1a/1b drop the
   chips under the chart and put the short delta pill here instead. */
.pt-mna__hero { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:14px; }
.pt-mna__rate { display:flex; align-items:baseline; gap:12px; min-width:0; }
.pt-mna__big-n { font-size:var(--fs-display); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1; font-variant-numeric:tabular-nums; }
.pt-mna__cap { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); max-width:130px; line-height:1.45; }
.pt-mna__pill--short { display:none; }

/* Legend chips */
.pt-mna__chips { display:flex; flex-wrap:wrap; gap:6px 14px; }
.pt-mna__chips--hero { justify-content:flex-end; max-width:270px; padding-bottom:4px; }
.pt-mna__chips--under { display:none; margin-top:12px; }
.pt-mna__chip { display:inline-flex; align-items:center; gap:6px; cursor:default; }
.pt-mna__chip i { width:8px; height:8px; border-radius:50%; flex:none; }
.pt-mna__chipname { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); }
.pt-mna__chip b { font-size:var(--fs-caption); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }

/* Plot. The chart keeps the design's exact aspect at every card size, so a board
   row taller than the design's mock leaves slack — it's parked at the BOTTOM,
   above the footer (the same `margin-top:auto` every other card's foot uses),
   rather than opening a hole between the headline and the chart. */
.pt-mna__plotwrap { display:flex; flex-direction:column; flex:1; min-height:0; padding-top:18px; }
.pt-mna__plot { position:relative; }
.pt-mna__plot .pt-chart { margin-top:0; }
/* The two axis bounds sit in HTML over the plot — on the card's own background,
   so a line running along the ceiling never collides with the label. */
.pt-mna__ymax, .pt-mna__ymin { position:absolute; left:0; font-size:var(--fs-micro); font-weight:var(--fw-semibold); color:var(--ink-faint); background:var(--sky); padding-right:4px; line-height:1; pointer-events:none; }
.pt-mna__ymax { top:-4px; }
.pt-mna__ymin { bottom:-3px; }
.pt-mna__axis { display:flex; justify-content:space-between; margin-top:6px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); }
.pt-mna__foot { margin-top:auto; padding-top:12px; font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--deep); }

/* ── Enlarged (1d): summary rail + per-model breakdown row ── */
.pt-mna__bigface { display:none; }
.pt-mna__rail { border-right:1px solid rgba(31,107,176,.22); padding-right:28px; display:flex; flex-direction:column; gap:4px; }
.pt-mna__raillead { font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--deep); }
.pt-mna__raildelta { font-size:var(--fs-caption); font-weight:var(--fw-semibold); margin-top:4px; }
.pt-mna__railnote { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); line-height:1.6; margin-top:8px; }
.pt-mna__railfoot { margin-top:auto; padding-top:16px; font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--deep); }
.pt-mna__main { display:flex; flex-direction:column; min-width:0; }
.pt-mna__tileshd { margin-top:14px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); }
.pt-mna__tiles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:8px; }
.pt-mna__tile { border-radius:var(--radius-sm); background:rgba(255,255,255,.42); padding:10px 12px; display:flex; flex-direction:column; gap:3px; cursor:default; transition:background var(--dur-micro) var(--ease); }
.pt-mna__tile:hover { background:rgba(255,255,255,.65); }
.pt-mna__tilename { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); min-width:0; }
.pt-mna__tilename i { width:8px; height:8px; border-radius:50%; flex:none; }
.pt-mna__tilepct { font-size:var(--fs-h2); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1.1; font-variant-numeric:tabular-nums; }
.pt-mna__tiledelta { font-size:var(--fs-micro); font-weight:var(--fw-semibold); white-space:nowrap; }
/* Same rule as Win & Lose: the enlarge swap only exists on tablet+desktop, so a
   card saved big falls back to the compact face on a one-column board. */
@media (min-width:701px) {
  .pt-card.is-big .pt-mna__compact { display:none; }
  .pt-card.is-big .pt-mna__bigface { display:grid; grid-template-columns:264px minmax(0,1fr); gap:28px; margin-top:20px; align-items:stretch; }
}

/* "No runs yet" — a real state, not an empty div (design "Views") */
.pt-mna__state { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:26px 14px; margin:auto 0; }
.pt-mna__stateico { width:44px; height:44px; border-radius:var(--radius-pill); background:rgba(31,107,176,.14); color:var(--sky-deep); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.pt-mna__statehd { font-size:var(--fs-body); font-weight:var(--fw-semibold); }
.pt-mna__statenote { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); max-width:340px; line-height:1.55; }

/* Reveal — the whole card lands inside 1s. The lines DRAW (never fade) on a 50ms
   stagger, the "All models" blend follows at .42s, end dots pop at the latest
   run, and the pill/chips/tiles/footer land last at exactly 1.00s. Delays ride
   on --mna-d for the SVG (set per element in petal-charts.tsx) and on inline
   animation-delay for everything else. */
@keyframes ptMnaPop { 0% { opacity:0; transform:scale(.55); } 70% { opacity:1; transform:scale(1.12); } 100% { opacity:1; transform:scale(1); } }
.pt-grid.is-armed .pt-mna__a, .pt-grid.is-armed .pt-mna__p { opacity:0; }
.pt-grid.is-armed .is-in .pt-mna__a { animation:ptRise .4s var(--ease) both; }
.pt-grid.is-armed .is-in .pt-mna__p { animation:ptMnaPop .35s cubic-bezier(.34,1.5,.64,1) both; }
/* Beats the board-wide [data-draw]/[data-dot] defaults (.pt-grid.is-armed .is-in …)
   on specificity, so this card keeps its own tighter, staggered timing. */
.pt-grid.is-armed [data-widget="mention"].is-in [data-draw] { animation:ptDraw .55s cubic-bezier(.33,.12,.22,1) both; animation-delay:var(--mna-d,0s); }
.pt-grid.is-armed [data-widget="mention"] [data-dot] { transform-box:fill-box; transform-origin:center; }
.pt-grid.is-armed [data-widget="mention"].is-in [data-dot] { animation:ptMnaPop .35s cubic-bezier(.34,1.5,.64,1) both; animation-delay:var(--mna-d,0s); }
@media (prefers-reduced-motion: reduce) {
  .pt-grid.is-armed .pt-mna__a, .pt-grid.is-armed .pt-mna__p { opacity:1; animation:none; }
}

/* ══ Where You Win & Lose — prompt × model matrix, worst first (design
      "Where You Win & Lose - Views", 3dfe4242). FULL WIDTH by default (6/6) at
      every breakpoint, and ONE table: mobile stacks each prompt into a
      mini-card, tablet + desktop show it as a table at the board's width, and
      enlarging (1d) keeps that same table and only adds the per-gap "Close this
      gap" action. ══ */
.pt-wl__body { display:flex; flex-direction:column; flex:1; min-height:0; }
.pt-wl__head { display:flex; align-items:center; gap:16px; padding:0 10px; margin-top:16px; text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--deep); opacity:.85; }
.pt-wl__head > span { font-size:var(--fs-micro); font-weight:var(--fw-semibold); }
.pt-wl { display:flex; flex-direction:column; gap:3px; margin-top:8px; }
.pt-wl__row { display:flex; align-items:center; gap:16px; padding:10px; border-radius:var(--radius-sm); transition:background var(--dur-micro) var(--ease); }
.pt-wl__row:hover { background:rgba(30,29,29,.06); }
/* A prompt no model names is the most valuable row on the board — it should
   draw the eye without turning the card into an alarm. */
.pt-wl__row.is-gap { background:rgba(178,74,99,.10); }
.pt-wl__row.is-gap .pt-wl__q { font-weight:var(--fw-semibold); }
.pt-wl__row.is-gap .pt-wl__rate { color:var(--negative); }
.pt-wl__q { flex:1; min-width:0; font-size:var(--fs-body); font-weight:var(--fw-medium); line-height:1.45; }
/* TWO lines of the real question (design "Views", 2026-07-25 revision — the
   earlier single-line ellipsis it replaces was faithful to the older mock).
   Prompts are now full natural-language questions, and one line of a half-width
   card showed ~35 characters of a 200-character question — the row's whole
   subject. The design fixes the block at 2.9em (2 × 1.45 line-height) both ways:
   `max` so a long question can't push the dot grid out of alignment, `min` so a
   short one still occupies a full row and the columns stay scannable.
   The design pre-cuts the string per breakpoint (158/118/92 chars); a line clamp
   does the same job against the ACTUAL column width, which is what we have. The
   full text stays on the row's `title` either way.
   Scoped to rows — the header shares `.pt-wl__q` purely for its column width. */
.pt-wl__row .pt-wl__q {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height:2.9em; max-height:2.9em; text-wrap:pretty; }
.pt-wl__dots { display:flex; gap:9px; flex:none; width:106px; justify-content:center; }
.pt-wl__dotwrap { position:relative; display:inline-flex; flex:none; }
.pt-wl__dot { width:14px; height:14px; border-radius:50%; box-sizing:border-box; display:inline-block; flex:none; background:transparent; border:2px solid currentColor; cursor:help;
  transition:transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), opacity var(--dur-micro) var(--ease); }
.pt-wl__dot.is-hit { border:none; }
/* Rollover (design v3-laptop pass 3): the dot swells into a soft ring of its own
   colour and names itself. Replaces a native `title`, which was slow, unstyled,
   and never said which model a bare dot belonged to. */
.pt-wl__dotwrap:hover .pt-wl__dot { transform:scale(1.55); opacity:1; box-shadow:0 0 0 3px var(--dot-ring); }
.pt-wl__dottip { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:72; display:none;
  flex-direction:column; align-items:center; gap:1px; white-space:nowrap; pointer-events:none;
  background:var(--surface-3); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-tooltip); padding:6px 10px; }
.pt-wl__dotwrap:hover .pt-wl__dottip, .pt-wl__dotwrap:focus-within .pt-wl__dottip { display:flex; }
.pt-wl__dottip-h { display:flex; align-items:center; gap:6px; font-size:var(--fs-caption); font-weight:var(--fw-semibold); color:var(--ink); }
.pt-wl__dottip-h i { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.pt-wl__dottip-s { font-size:var(--fs-micro); font-weight:var(--fw-medium); color:var(--negative); }
.pt-wl__dottip-s.is-hit { color:var(--positive); }
.pt-wl__rate { width:52px; text-align:right; flex:none; font-size:var(--fs-body); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.pt-wl__best { width:44px; text-align:right; flex:none; font-size:var(--fs-body); font-weight:var(--fw-medium); font-variant-numeric:tabular-nums; color:var(--ink); }
.pt-wl__best.is-norank { color:var(--ink-faint); }
.pt-wl__legend { margin-top:14px; }
/* The footer quotes the worst prompt, which is now a whole question — one line,
   ellipsised, so the card's last line can't turn into a paragraph. */
.pt-wl__foot { font-size:var(--fs-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* mobile-only "worst 5 of N" note — swaps in for the swatch legend on ≤700px */
.pt-wl__notem { display:none; }

/* Header pills (design: gap = blush, clear = accent [reuses --up], empty = grey). */
.pt-wl__pill--gap { background:rgba(178,74,99,.14); color:var(--negative); }
.pt-wl__pill--empty { background:rgba(30,29,29,.08); color:var(--ink-muted); }

/* Bespoke empty state (design "No runs yet"), mirroring the lost card. */
.pt-wl__state { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:26px 14px; margin:auto 0; }
.pt-wl__stateico { width:44px; height:44px; border-radius:var(--radius-pill); background:rgba(58,110,165,.14); color:var(--deep); display:inline-flex; align-items:center; justify-content:center; }
.pt-wl__statehd { font-size:var(--fs-body); font-weight:var(--fw-semibold); }
.pt-wl__statenote { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); max-width:360px; line-height:1.55; }

/* No enlarged state. The design's 1d differs from 1c only by a per-gap "Close
   this gap" pill on row hover (and the 152px gutter reserving room for it);
   removed on request 2026-07-26, which leaves the two identical. `winlose` is
   therefore in NO_ENLARGE_WIDGETS — no `is-big` rules, and no toggle offered.
   If the action ever comes back, it needs BOTH halves: the pill AND the gutter,
   or it lands on top of the Best column. */

/* Reveal (design "Views": rows rise in sequence, dots pop in per row, the pill
   lands last), armed by BoardGrid on scroll exactly like every other card. The
   pop's overshoot settles to the base transform (implicit 100%) so the dot's
   hover-scale still works after the reveal. */
@keyframes ptWlPop { 0% { opacity:0; transform:scale(.4); } 70% { opacity:1; transform:scale(1.15); } 100% { opacity:1; } }
.pt-grid.is-armed .pt-wl__rise, .pt-grid.is-armed .pt-wl__dot, .pt-grid.is-armed .pt-wl__pill { opacity:0; }
.pt-grid.is-armed .is-in .pt-wl__rise { animation:ptRise .4s var(--ease) both; }
.pt-grid.is-armed .is-in .pt-wl__dot { animation:ptWlPop .32s cubic-bezier(.34,1.5,.64,1) both; }
.pt-grid.is-armed .is-in .pt-wl__pill { animation:ptWlPop .4s cubic-bezier(.34,1.5,.64,1) both; }
@media (prefers-reduced-motion: reduce) {
  .pt-grid.is-armed .pt-wl__rise, .pt-grid.is-armed .pt-wl__dot, .pt-grid.is-armed .pt-wl__pill { opacity:1; animation:none; }
}
.pt-legend__note { margin-left:auto; color:var(--sky-deep); font-weight:var(--fw-medium); }
.pt-legend__swatch { width:14px; height:3.5px; border-radius:2px; display:inline-block; flex:none; }
.pt-legend__item.is-own { font-weight:var(--fw-semibold); }
.pt-legend__item b { font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }

/* "Discovered" = a rival AI keeps naming that the user never entered. Must not
   read the same as a competitor they chose to track. */
.pt-pill--discovered { display:inline-flex; align-items:center; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--lilac-deep); border:1px solid var(--lilac-deep); border-radius:var(--radius-pill); padding:2px 8px; margin-left:2px; }

/* Citations You Lost — one square per run, oldest → latest.
   Design "Citations You Lost - Views" (3dfe4242). The strip is the payload;
   the reveal (keyframes below) fills cells oldest → latest, lands the "missed"
   verdict, then pops the pill last. */
.pt-lost { display:flex; flex-direction:column; gap:16px; margin-top:18px; }
.pt-lost__head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:7px; }
.pt-lost__domain { font-size:var(--fs-body); font-weight:var(--fw-semibold); }
.pt-lost__status { font-size:var(--fs-caption); font-weight:var(--fw-semibold); color:var(--negative); }
.pt-lost__strip { display:flex; gap:5px; }
.pt-lost__cell { flex:1; height:13px; border-radius:3px; background:rgba(138,109,18,.14); outline-offset:-1.5px; }
.pt-lost__cell.is-cited { background:var(--butter-deep); }
.pt-lost__cell.is-latest { outline:1.5px dashed rgba(138,109,18,.45); }
.pt-lost__note { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); margin-top:6px; }

/* Richer end states (design: icon + heading + reassurance) */
.pt-lost__state { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:26px 14px; margin:auto 0; }
.pt-lost__stateico { width:44px; height:44px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; justify-content:center; }
.pt-lost__stateico--ok { background:var(--accent-weak-2); color:var(--accent-press); }
.pt-lost__stateico--new { background:rgba(138,109,18,.14); color:var(--butter-deep); }
.pt-lost__statehd { font-size:var(--fs-body); font-weight:var(--fw-semibold); }
.pt-lost__statenote { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); max-width:340px; line-height:1.55; }

/* Enlarged (is-big) — summary rail + longer strips + per-domain action (1d) */
.pt-lost__compact { display:flex; flex-direction:column; flex:1; min-height:0; }
.pt-lost--big { display:none; }
.pt-card.is-big .pt-lost__compact { display:none; }
.pt-card.is-big .pt-lost--big { display:grid; grid-template-columns:264px 1fr; gap:28px; margin-top:20px; align-items:stretch; }
.pt-lost__rail { border-right:1px solid rgba(138,109,18,.22); padding-right:28px; display:flex; flex-direction:column; gap:4px; }
.pt-lost__count { font-size:var(--fs-metric); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1; }
.pt-lost__countlabel { font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--butter-deep); }
.pt-lost__railnote { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); line-height:1.6; margin-top:8px; }
.pt-lost__railfoot { margin-top:auto; padding-top:16px; font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--butter-deep); }
.pt-lost__grid { display:flex; flex-direction:column; gap:6px; }
.pt-lost__gridhead, .pt-lost__grow { display:grid; grid-template-columns:200px 1fr 168px 138px; gap:18px; align-items:center; }
.pt-lost__gridhead { padding:0 10px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); }
.pt-lost__gridspan { display:flex; justify-content:space-between; }
.pt-lost__gridright { text-align:right; }
.pt-lost__grow { border-radius:var(--radius-sm); padding:11px 10px; transition:background var(--dur-micro) var(--ease); }
.pt-lost__grow:hover { background:rgba(30,29,29,.05); }
.pt-lost__gsrc { min-width:0; }
.pt-lost__gsrc .pt-lost__domain { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-lost__gsrc .pt-lost__note { margin-top:2px; }
.pt-lost__strip--big .pt-lost__cell { height:18px; border-radius:4px; }
.pt-lost__grow .pt-lost__status { text-align:right; }
.pt-lost__reearn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 13px; border-radius:var(--radius-pill); border:1px solid rgba(30,29,29,.22); color:var(--ink); background:transparent; font-size:var(--fs-caption); font-weight:var(--fw-semibold); text-decoration:none; white-space:nowrap; }
.pt-lost__reearn:hover { background:rgba(30,29,29,.07); }

/* Reveal (design cyl* sequence), armed by BoardGrid like every other card. */
@keyframes ptLostCell { 0% { opacity:0; transform:scale(.25); } to { opacity:1; transform:scale(1); } }
@keyframes ptLostMiss { 0% { opacity:0; } 60% { opacity:.45; } 100% { opacity:1; } }
@keyframes ptLostPop { 0% { opacity:0; transform:scale(.55); } 70% { opacity:1; transform:scale(1.07); } 100% { opacity:1; transform:scale(1); } }
.pt-grid.is-armed .pt-lost__rise, .pt-grid.is-armed .pt-lost__cell, .pt-grid.is-armed .pt-lost__pill { opacity:0; }
.pt-grid.is-armed .is-in .pt-lost__rise { animation:ptRise .4s var(--ease) both; }
.pt-grid.is-armed .is-in .pt-lost__cell.is-cited { animation:ptLostCell .3s cubic-bezier(.34,1.5,.64,1) both; }
.pt-grid.is-armed .is-in .pt-lost__cell.is-miss { animation:ptLostMiss .32s var(--ease) both; }
.pt-grid.is-armed .is-in .pt-lost__pill { animation:ptLostPop .4s cubic-bezier(.34,1.5,.64,1) both; }
@media (prefers-reduced-motion: reduce) {
  .pt-grid.is-armed .pt-lost__rise, .pt-grid.is-armed .pt-lost__cell, .pt-grid.is-armed .pt-lost__pill { opacity:1; animation:none; }
}

/* The model filter dims the new per-model surfaces too — the sentiment axis
   lines, the win/lose dots and the rationale quotes all key off data-series. */
.ptx[data-model="chatgpt"]    [data-hover^="senttime"] [data-series]:not([data-series="chatgpt"]),
.ptx[data-model="claude"]     [data-hover^="senttime"] [data-series]:not([data-series="claude"]),
.ptx[data-model="gemini"]     [data-hover^="senttime"] [data-series]:not([data-series="gemini"]),
.ptx[data-model="perplexity"] [data-hover^="senttime"] [data-series]:not([data-series="perplexity"]),
.ptx[data-model="grok"]       [data-hover^="senttime"] [data-series]:not([data-series="grok"]) { opacity:.14; }
.ptx[data-model="chatgpt"]    .pt-wl__dot:not([data-series="chatgpt"]),
.ptx[data-model="claude"]     .pt-wl__dot:not([data-series="claude"]),
.ptx[data-model="gemini"]     .pt-wl__dot:not([data-series="gemini"]),
.ptx[data-model="perplexity"] .pt-wl__dot:not([data-series="perplexity"]),
.ptx[data-model="grok"]       .pt-wl__dot:not([data-series="grok"]) { opacity:.32; }
.ptx[data-model="chatgpt"]    .pt-rationale__row[data-series="chatgpt"],
.ptx[data-model="claude"]     .pt-rationale__row[data-series="claude"],
.ptx[data-model="gemini"]     .pt-rationale__row[data-series="gemini"],
.ptx[data-model="perplexity"] .pt-rationale__row[data-series="perplexity"],
.ptx[data-model="grok"]       .pt-rationale__row[data-series="grok"] { display:flex; }
.ptx[data-model="chatgpt"]    .pt-rationale__row:not([data-series="chatgpt"]),
.ptx[data-model="claude"]     .pt-rationale__row:not([data-series="claude"]),
.ptx[data-model="gemini"]     .pt-rationale__row:not([data-series="gemini"]),
.ptx[data-model="perplexity"] .pt-rationale__row:not([data-series="perplexity"]),
.ptx[data-model="grok"]       .pt-rationale__row:not([data-series="grok"]) { display:none; }

/* ── Loading skeleton (basic placeholder; a richer loading screen may replace it) ── */
.pt-skel { background:var(--canvas-deep); border-radius:16px; animation:pt-skel-pulse 1.25s ease-in-out infinite; }
@keyframes pt-skel-pulse { 0%,100% { opacity:.6; } 50% { opacity:.3; } }
@media (prefers-reduced-motion: reduce) { .pt-skel { animation:none; opacity:.42; } }

/* ── AI Traffic (/traffic page + traffic widgets) — design 3dfe4242 boards
      "Mention Tracker Traffic" (desktop / tablet / mobile) ─────────────────── */
.ptx .pt-chart__tick { font-size:10px; fill:var(--ink-muted); font-family:var(--font-sans); }
.ptx .pt-snap--4 { grid-template-columns:repeat(4, 1fr); margin-bottom:18px; }
.ptx .pt-tile__value--sm { font-size:26px; line-height:1.25; }

/* responsive copy/visibility helpers (mobile shortens labels, drops footers) */
.ptx .pt-m-only { display:none; }

/* header status chips + Setup link */
.ptx .pt-chips { display:inline-flex; gap:8px; flex-wrap:wrap; }
.ptx .pt-chip { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); font-weight:var(--fw-semibold); padding:7px 12px; border-radius:var(--radius-pill); border:1px solid var(--line); color:var(--ink-muted); background:var(--surface); }
.ptx .pt-chip svg { flex:none; }
.ptx .pt-chip__ring { width:8px; height:8px; border-radius:50%; border:1.6px solid currentColor; flex:none; }
.ptx .pt-chip.is-ok { color:var(--positive); border-color:transparent; background:var(--accent-weak); }
.ptx .pt-chip--dash { border-style:dashed; }
.ptx .pt-setuplink { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); font-weight:var(--fw-medium); padding:7px 12px; border-radius:var(--radius-pill); color:var(--ink-muted); text-decoration:none; transition:background var(--dur-micro), color var(--dur-micro); }
.ptx .pt-setuplink:hover { background:rgba(30,29,29,.06); color:var(--ink); }
.ptx .pt-setuplink svg { flex:none; }

/* the /traffic card grid — 12-col so the bottom row can run 3/6/3 */
.ptx .pt-grid--traffic { grid-template-columns:repeat(12,1fr); grid-auto-rows:auto; gap:18px; }
.ptx .pt-grid--traffic .pt-card { grid-column:span 6; min-height:280px; padding:22px; }
.ptx .pt-grid--traffic .pt-card--q { grid-column:span 3; min-height:260px; }
.ptx .pt-grid--traffic .pt-card--low { min-height:260px; }
.ptx .pt-grid--traffic .pt-card--full { grid-column:1 / -1; min-height:0; }
.ptx .pt-grid--traffic .pt-card.is-big { grid-column:1 / -1; }

/* "Connect your website" setup banner — the no-snippet state's full-width ink
   card at the top of the grid (design: Traffic board, snippet=off) */
.ptx .pt-tsetup { grid-column:1 / -1; background:var(--ink); border-radius:var(--radius-lg); padding:26px 28px; box-shadow:var(--shadow-flat); display:flex; align-items:center; gap:24px; flex-wrap:wrap; color:var(--surface); }
.ptx .pt-tsetup__body { flex:1; min-width:300px; }
.ptx .pt-tsetup__t { font-size:19px; font-weight:var(--fw-semibold); letter-spacing:-0.01em; color:var(--surface); }
.ptx .pt-tsetup__p { font-size:var(--fs-body); font-weight:var(--fw-light); color:rgba(245,241,232,.72); line-height:1.6; margin-top:6px; max-width:560px; }
.ptx .pt-tsetup__p b { font-weight:var(--fw-semibold); color:var(--surface); }
.ptx .pt-tsetup__actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ptx .pt-tsetup__cta { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:var(--fw-semibold); padding:12px 20px; border-radius:var(--radius-pill); background:var(--accent); color:var(--ink); text-decoration:none; transition:background var(--dur-micro); }
.ptx .pt-tsetup__cta:hover { background:var(--accent-press); color:var(--ink); }
.ptx .pt-tsetup__cta svg { flex:none; }
.ptx .pt-tsetup__ghost { font-size:var(--fs-body); font-weight:var(--fw-medium); padding:12px 16px; border-radius:var(--radius-pill); color:var(--surface); text-decoration:none; transition:background var(--dur-micro); }
.ptx .pt-tsetup__ghost:hover { background:rgba(245,241,232,.1); color:var(--surface); }

/* enlarge reveals the extra rows + the "last seen" column */
.ptx .pt-card:not(.is-big) .pt-xtra { display:none; }
.ptx .pt-card:not(.is-big) .pt-onlybig { display:none; }

/* div-column charts (hero bars + stacked crawler bars) */
.ptx .pt-tplot { position:relative; margin-top:20px; }
.ptx .pt-tplot--hero { height:190px; }
.ptx .pt-tplot--stack { height:150px; }
.ptx .pt-tplot--hero::before, .ptx .pt-tplot--hero::after { content:""; position:absolute; left:0; right:0; border-top:1px dashed rgba(30,29,29,.14); pointer-events:none; }
.ptx .pt-tplot--hero::before { top:0; }
.ptx .pt-tplot--hero::after { top:50%; border-top-color:rgba(30,29,29,.10); }
.ptx .pt-tcols { display:flex; align-items:flex-end; gap:3px; height:100%; }
.ptx .pt-tcol { position:relative; flex:1; display:flex; align-items:flex-end; height:100%; min-width:0; cursor:default; }
.ptx .pt-tcol--stack { flex-direction:column-reverse; justify-content:flex-start; align-items:stretch; }
.ptx .pt-tcol__bar { display:block; width:100%; min-height:3px; border-radius:3px 3px 0 0; background:var(--deep, var(--sky-deep)); transform-origin:bottom; animation:ptGrowY .45s var(--ease) both; }
.ptx .pt-tcol__seg { display:block; width:100%; transform-origin:bottom; animation:ptGrowY .45s var(--ease) both; }
.ptx .pt-tcol__seg--top { border-radius:3px 3px 0 0; }
.ptx .pt-tcol__seg--zero { height:2px; background:rgba(30,29,29,.10); animation:none; }
.ptx .pt-tcol:hover .pt-tcol__bar, .ptx .pt-tcol:hover .pt-tcol__seg { filter:brightness(1.12); }
.ptx .pt-ttip { position:absolute; bottom:100%; left:50%; transform:translate(-50%,-7px); opacity:0; pointer-events:none; transition:opacity .13s ease; z-index:30; background:var(--ink); color:var(--surface); border-radius:10px; padding:8px 11px; font-size:var(--fs-caption); font-weight:var(--fw-medium); line-height:1.5; white-space:nowrap; box-shadow:var(--shadow-tooltip); text-align:left; }
.ptx .pt-ttip--edge { left:auto; right:0; transform:translate(0,-7px); }
.ptx .pt-tcol:hover .pt-ttip { opacity:1; }
.ptx .pt-ttip > span { display:block; }
.ptx .pt-ttip__t { font-weight:var(--fw-semibold); }
.ptx .pt-ttip__r { display:flex !important; align-items:center; gap:6px; opacity:.9; }
.ptx .pt-ttip__r i { width:7px; height:7px; border-radius:2px; flex:none; }
.ptx .pt-tplot__line { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.ptx .pt-tdot { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--ink); border:2px solid var(--sky); transform:translate(-50%,-50%); animation:ptFadeIn .3s ease .35s both; pointer-events:none; }
.ptx .pt-taxis--cols { display:flex; gap:3px; margin-top:8px; }
.ptx .pt-taxis--cols span { flex:1; min-width:0; text-align:center; font-size:9.5px; font-weight:var(--fw-medium); color:var(--ink-faint); white-space:nowrap; }
.ptx .pt-taxis--ends { display:none; justify-content:space-between; margin-top:6px; font-size:9.5px; font-weight:var(--fw-medium); color:var(--ink-faint); }
@keyframes ptGrowY { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes ptGrowX { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes ptFadeIn { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .ptx .pt-tcol__bar, .ptx .pt-tcol__seg, .ptx .pt-tdot, .ptx .pt-funnel__track i, .ptx .pt-vbar__track i { animation:none; }
}

/* hero legend (top-right in the card head on desktop/tablet; below on mobile) */
.ptx .pt-legend--head { margin-top:0; font-size:var(--fs-micro); color:var(--ink-muted); flex:none; }
.ptx .pt-legend__bullet { width:7px; height:7px; border-radius:50%; background:var(--ink); display:inline-block; margin-left:-4px; }

.ptx .pt-emptybody { flex:1; display:flex; flex-direction:column; justify-content:center; gap:9px; align-items:flex-start; max-width:420px; padding:12px 2px; font-size:12.5px; font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.6; }
.ptx .pt-emptybody--roomy { max-width:480px; padding:34px 2px; }
.ptx .pt-emptybody__icon { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); background:var(--surface); color:var(--deep, var(--ink-muted)); }
.ptx .pt-emptybody__t { font-size:14px; font-weight:var(--fw-semibold); color:var(--ink); }
.ptx .pt-emptybody__cta { color:var(--accent-press); font-weight:var(--fw-semibold); font-size:var(--fs-body); text-decoration:none; }

/* traffic lists (bots / access / paths) */
.ptx .pt-tlist { display:flex; flex-direction:column; margin-top:12px; }
.ptx .pt-tlist__row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:var(--fs-body); }
.ptx .pt-tlist__row:last-child { border-bottom:none; }
.ptx .pt-tlist__dot { width:7px; height:7px; border-radius:50%; flex:none; }
.ptx .pt-tlist__name { font-weight:var(--fw-semibold); color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ptx .pt-tlist__name--path { font-weight:var(--fw-medium); }
.ptx .pt-tlist__val { font-weight:var(--fw-semibold); color:var(--ink); flex:none; min-width:38px; text-align:right; font-variant-numeric:tabular-nums; }
.ptx .pt-tlist__last { flex:none; font-size:var(--fs-caption); font-weight:var(--fw-light); color:var(--ink-muted); }
.ptx .pt-tlist__srcdot { display:inline-flex; align-items:center; gap:6px; flex:none; font-size:11.5px; font-weight:var(--fw-medium); color:var(--ink-muted); white-space:nowrap; }
.ptx .pt-tlist__srcdot i { width:7px; height:7px; border-radius:50%; flex:none; }
.ptx .pt-tlist__row--2l { display:block; }
.ptx .pt-tlist__l1 { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:var(--fw-medium); min-width:0; }
.ptx .pt-tlist__l1 span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ptx .pt-tlist__l1 b { font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; flex:none; }
.ptx .pt-tlist__l2 { font-size:10.5px; font-weight:var(--fw-light); color:var(--ink-muted); margin-top:1px; }
.ptx .pt-spark { flex:none; }
.ptx .pt-purpose { flex:none; font-size:10.5px; font-weight:var(--fw-semibold); letter-spacing:.02em; padding:3px 9px; border-radius:var(--radius-pill); background:var(--surface); color:var(--ink-muted); white-space:nowrap; }
.ptx .pt-purpose--user-fetch { background:var(--accent-weak); color:var(--positive); }
.ptx .pt-purpose--search-index { color:var(--sky-deep); }

/* access card */
.ptx .pt-access { flex:none; margin-left:auto; text-align:right; font-size:var(--fs-label); font-weight:var(--fw-semibold); max-width:150px; line-height:1.3; }
.ptx .pt-access--ok { color:var(--positive); }
.ptx .pt-access--bad { color:var(--negative); font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-caps); }
.ptx .pt-access--warn { color:var(--butter-deep, #8A6D12); }
.ptx .pt-access--muted { color:var(--ink-faint); font-weight:var(--fw-medium); }
.ptx .pt-accesswarn { display:flex; gap:11px; align-items:flex-start; margin-top:14px; font-size:12.5px; font-weight:var(--fw-medium); line-height:1.55; color:var(--ink); background:rgba(217,105,74,.16); border-radius:var(--radius); padding:13px 15px; }
.ptx .pt-accesswarn svg { flex:none; margin-top:1px; }
.ptx .pt-accesswarn b { font-weight:var(--fw-semibold); color:var(--negative); }
/* crawler-activity blocked strip: tighter top gap (sits under the metric row) */
.ptx .pt-crawlwarn { margin-top:12px; }
.ptx .pt-crawlwarn__fix { color:var(--negative); font-weight:var(--fw-semibold); text-decoration:underline; white-space:nowrap; }

/* AI Crawler Activity — faithful CSS-column chart (design "AI Crawler Activity - Views") */
.ptx .pt-crawl__plotwrap { margin-top:10px; }
.ptx .crw-col { position:relative; flex:1; align-self:stretch; display:flex; align-items:flex-end; cursor:default; }
.ptx .crw-col:hover { background:rgba(30,29,29,.06); border-radius:3px; }
.ptx .crw-tt { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:40; display:none; min-width:148px; background:var(--surface-3,#fff); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-tooltip); padding:9px 11px; pointer-events:none; }
.ptx .crw-col:hover .crw-tt { display:block; }
.ptx .crw-col:first-child .crw-tt { left:0; transform:none; }
.ptx .crw-col:last-child .crw-tt { left:auto; right:0; transform:none; }
.ptx .crw-tt__hd { display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); margin-bottom:6px; }
.ptx .crw-tt__r { display:flex; align-items:center; gap:6px; padding:1.5px 0; }
.ptx .crw-tt__r i { width:7px; height:7px; border-radius:50%; flex:none; }
.ptx .crw-tt__n { flex:1; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); white-space:nowrap; }
.ptx .crw-tt__v { font-size:var(--fs-caption); font-weight:var(--fw-semibold); color:var(--ink); }
.ptx .crw-axis { display:flex; justify-content:space-between; margin-top:6px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); }
.ptx .crw-spark { display:flex; align-items:flex-end; gap:2px; height:20px; max-width:170px; }
/* staged reveal (design crwRise/crwBar/crwPop) — fires when the card scrolls in */
@keyframes crwRise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes crwBar { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes crwPop { 0% { opacity:0; transform:scale(.55); } 70% { opacity:1; transform:scale(1.07); } 100% { opacity:1; transform:scale(1); } }
.ptx [data-widget="crawlers"].is-in .crw-a { opacity:0; animation:crwRise .4s var(--ease) both; }
.ptx [data-widget="crawlers"].is-in .crw-b { animation:crwBar .35s cubic-bezier(.22,.9,.36,1) both; }
.ptx [data-widget="crawlers"].is-in .crw-p { opacity:0; animation:crwPop .35s cubic-bezier(.34,1.5,.64,1) both; }
@media (prefers-reduced-motion: reduce) {
  .ptx [data-widget="crawlers"].is-in .crw-a, .ptx [data-widget="crawlers"].is-in .crw-b, .ptx [data-widget="crawlers"].is-in .crw-p { opacity:1; animation:none; transform:none; }
}

/* AI Crawler Activity — enlarged (is-big) 1d view: summary rail + taller chart + per-bot table */
.ptx .pt-crawl--big { display:none; }
.ptx .pt-card.is-big .pt-crawl__compact { display:none; }
.ptx .pt-card.is-big .pt-crawl--big { display:block; margin-top:20px; }
.ptx .pt-crawl__top { display:grid; grid-template-columns:264px 1fr; gap:28px; align-items:stretch; }
.ptx .pt-crawl__rail { border-right:1px solid rgba(138,109,18,.22); padding-right:28px; display:flex; flex-direction:column; gap:4px; }
.ptx .pt-crawl__rail .pt-metric { margin:0; }
.ptx .pt-crawl__railsub { font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--butter-deep); }
.ptx .pt-crawl__deltaline { font-size:var(--fs-caption); font-weight:var(--fw-semibold); margin-top:4px; }
.ptx .pt-crawl__raildesc { font-size:var(--fs-caption); color:var(--ink-muted); line-height:1.6; margin-top:8px; }
.ptx .pt-crawl__railfoot { margin-top:auto; padding-top:16px; font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--butter-deep); }
.ptx .pt-crawl__chart { display:flex; flex-direction:column; }
.ptx .pt-crawl__chart .pt-legend { margin-top:12px; }
.ptx .pt-crawl__table { margin-top:18px; border-top:1px solid rgba(138,109,18,.22); padding-top:14px; display:flex; flex-direction:column; gap:4px; overflow-x:auto; }
.ptx .pt-crawl__thead, .ptx .pt-crawl__trow { display:grid; grid-template-columns:150px 110px 160px 1fr 90px 110px 96px; gap:16px; align-items:center; min-width:780px; }
.ptx .pt-crawl__thead { padding:0 10px 4px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); }
.ptx .pt-crawl__thead .pt-crawl__tcenter { text-align:center; }
.ptx .pt-crawl__trow { padding:9px 10px; border-radius:var(--radius-sm); font-size:var(--fs-body); }
.ptx .pt-crawl__trow:hover { background:rgba(30,29,29,.05); }
.ptx .pt-crawl__bot { font-weight:var(--fw-semibold); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ptx .pt-crawl__co { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); min-width:0; }
.ptx .pt-crawl__co i { width:8px; height:8px; border-radius:50%; flex:none; }
.ptx .pt-crawl__purpose { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); }
.ptx .pt-crawl__tright { text-align:right; }
.ptx .pt-crawl__tcenter { display:inline-flex; justify-content:center; }
.ptx .pt-crawl__visits { font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.ptx .pt-crawl__last { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); }
.ptx .pt-crawl__acc { display:inline-flex; justify-content:center; align-items:center; padding:4px 14px; border-radius:var(--radius-pill); font-size:var(--fs-micro); font-weight:var(--fw-semibold); }
.ptx .pt-crawl__acc.is-allowed { background:var(--accent-weak-2, rgba(27,143,106,.16)); color:var(--accent-press, #0E7A54); }
.ptx .pt-crawl__acc.is-blocked { background:rgba(178,74,99,.14); color:var(--negative); }
/* Narrow screens: stack the rail above the chart */
@media (max-width:760px) {
  .ptx .pt-crawl__top { grid-template-columns:1fr; gap:16px; }
  .ptx .pt-crawl__rail { border-right:none; border-bottom:1px solid rgba(138,109,18,.22); padding-right:0; padding-bottom:16px; }
  .ptx .pt-crawl__railfoot { margin-top:12px; }
}
.ptx .pt-allclear { display:flex; gap:9px; align-items:center; margin-top:14px; font-size:12.5px; font-weight:var(--fw-medium); color:var(--positive); }
.ptx .pt-allclear svg { flex:none; }

/* funnel — desktop = 96px + three value/track columns under a caps header row;
   tablet/mobile restructure each stage into a label · track · value line */
.ptx .pt-funnel__cols { display:grid; grid-template-columns:96px 1fr 1fr 1fr; gap:12px; margin-top:18px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-muted); }
.ptx .pt-funnel { display:flex; flex-direction:column; gap:16px; margin-top:12px; }
.ptx .pt-funnel__prov { display:grid; grid-template-columns:96px 1fr 1fr 1fr; gap:12px; align-items:center; }
.ptx .pt-funnel__name { font-size:var(--fs-body); font-weight:var(--fw-semibold); min-width:0; }
.ptx .pt-funnel__stage { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ptx .pt-funnel__slabel { display:none; }
.ptx .pt-funnel__val { font-size:14px; font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.ptx .pt-funnel__track { display:block; height:8px; border-radius:4px; background:rgba(30,29,29,.08); overflow:hidden; }
.ptx .pt-funnel__track i { display:block; height:100%; border-radius:4px; min-width:0; transform-origin:left center; animation:ptGrowX .5s var(--ease) both; }
.ptx .pt-funnel__note { grid-column:span 2; font-size:11.5px; font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.5; }

/* AI Sources — label/count line over a tinted track */
.ptx .pt-vbars { display:flex; flex-direction:column; gap:11px; margin-top:16px; }
.ptx .pt-vbar__head { display:flex; justify-content:space-between; gap:8px; font-size:var(--fs-caption); font-weight:var(--fw-medium); margin-bottom:4px; }
.ptx .pt-vbar__head b { font-weight:var(--fw-medium); font-variant-numeric:tabular-nums; }
.ptx .pt-vbar__track { display:block; height:8px; border-radius:4px; background:rgba(18,128,90,.14); overflow:hidden; }
.ptx .pt-vbar__track i { display:block; height:100%; border-radius:4px; background:var(--deep, var(--mint-deep)); transform-origin:left center; animation:ptGrowX .5s var(--ease) both; }

/* connect flow — design 3dfe4242 "Mention Tracker Traffic Setup" */
.ptx .pt-connect { display:flex; flex-direction:column; gap:16px; padding:4px 0 48px; max-width:860px; margin:0 auto; }
.ptx .pt-connect__header { margin:8px 0 10px; }
.ptx .pt-connect__back { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink-muted); text-decoration:none; margin-bottom:14px; }
.ptx .pt-connect__back:hover { color:var(--ink); }
.ptx .pt-connect__title { margin:0; font-size:clamp(25px, 3.4vw, 31px); font-weight:var(--fw-semibold); letter-spacing:-0.02em; color:var(--ink); }
.ptx .pt-connect__intro { margin:8px 0 0; font-size:14px; font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.6; max-width:560px; }
.ptx .pt-connect__step { border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-flat); }
.ptx .pt-connect__head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ptx .pt-connect__stepno { flex:none; width:30px; height:30px; border-radius:var(--radius-pill); background:var(--ink); color:var(--surface); font-weight:var(--fw-semibold); display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.ptx .pt-connect__h { font-size:var(--fs-card); font-weight:var(--fw-semibold); letter-spacing:-0.01em; color:var(--ink); margin:0; }
.ptx .pt-connect__okchip { margin-left:auto; }
.ptx .pt-connect__tag { display:inline-flex; align-items:center; font-size:var(--fs-caption); font-weight:var(--fw-semibold); padding:5px 11px; border-radius:var(--radius-pill); background:var(--surface); color:var(--deep, var(--ink-muted)); white-space:nowrap; }
/* step-card body indented to align under the title (badge 30px + gap 12px) */
.ptx .pt-connect__ind { margin-left:42px; }
.ptx .pt-connect__p { font-size:var(--fs-body); font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.6; margin:12px 0 0; max-width:600px; }
.ptx .pt-connect__p b { font-weight:var(--fw-semibold); color:var(--ink); }
.ptx .pt-connect__p code, .ptx .pt-connect__hint code { font-family:ui-monospace, Menlo, monospace; font-size:12px; background:rgba(30,29,29,.07); padding:1px 6px; border-radius:4px; color:var(--ink); }
.ptx .pt-connect__hint { margin-top:12px; font-size:var(--fs-label); font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.6; }
.ptx .pt-connect__hint b { font-weight:var(--fw-medium); color:var(--ink); }
.ptx .pt-connect__row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px; }
.ptx .pt-input { flex:1; min-width:260px; font-family:var(--font-sans); font-size:14px; font-weight:var(--fw-medium); padding:12px 16px; border-radius:var(--radius); border:1px solid var(--line); background:var(--canvas); color:var(--ink); outline:none; }
.ptx .pt-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
.ptx .pt-connect .pt-btn-save { flex:none; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:var(--fw-semibold); border-radius:var(--radius); padding:12px 22px; text-decoration:none; }
.ptx .pt-connect__ghost { flex:none; font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink-muted); background:transparent; border:1px solid var(--line); border-radius:var(--radius); padding:12px 18px; cursor:pointer; transition:color var(--dur-micro), border-color var(--dur-micro); }
.ptx .pt-connect__ghost:hover { color:var(--negative); border-color:var(--negative); }
/* disconnect confirm bar */
.ptx .pt-connect__confirm { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:rgba(217,105,74,.12); border-radius:var(--radius); padding:13px 16px; margin-top:14px; }
.ptx .pt-connect__confirmmsg { font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink); }
.ptx .pt-connect__confirmmsg b { font-weight:var(--fw-semibold); }
.ptx .pt-connect__confirmbtns { margin-left:auto; display:flex; gap:8px; }
.ptx .pt-connect__confirmdel { font-family:var(--font-sans); font-size:12.5px; font-weight:var(--fw-semibold); color:#fff; background:var(--negative); border:none; border-radius:var(--radius-sm); padding:8px 14px; cursor:pointer; }
.ptx .pt-connect__confirmdel:hover { background:#C4553A; }
.ptx .pt-connect__confirmkeep { font-family:var(--font-sans); font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 14px; cursor:pointer; }
.ptx .pt-connect__confirmkeep:hover { background:rgba(30,29,29,.05); }
/* dark code blocks with a floating copy button */
.ptx .pt-code { margin:0; background:var(--ink); color:#E8E3D8; border-radius:var(--radius); padding:16px 110px 16px 18px; font-family:ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; font-size:12.5px; line-height:1.65; overflow-x:auto; white-space:pre-wrap; word-break:break-all; max-height:300px; }
.ptx .pt-connect__codewrap { position:relative; margin-top:14px; }
.ptx .pt-connect__codewrap--key { max-width:420px; }
.ptx .pt-copybtn { position:absolute; top:10px; right:10px; font-family:var(--font-sans); font-size:11.5px; font-weight:var(--fw-semibold); color:#E8E3D8; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-sm); padding:6px 12px; cursor:pointer; transition:background var(--dur-micro); }
.ptx .pt-copybtn:hover { background:rgba(255,255,255,.22); }
.ptx .pt-copybtn.is-done { color:var(--accent); }
/* connector pills */
.ptx .pt-connect__tabs { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.ptx .pt-connect__tab { font-family:var(--font-sans); font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-pill); padding:9px 16px; cursor:pointer; transition:border-color var(--dur-micro); }
.ptx .pt-connect__tab:hover { border-color:var(--ink); }
.ptx .pt-connect__tab.is-active { font-weight:var(--fw-semibold); color:var(--surface); background:var(--ink); border-color:var(--ink); }
.ptx .pt-connect__pane { margin-top:16px; }
.ptx .pt-connect__pane .pt-connect__p:first-child { margin-top:0; }
.ptx .pt-connect__dl { margin-top:0; }
.ptx .pt-connect__none { background:var(--surface); border-radius:var(--radius); padding:16px 18px; max-width:600px; }
.ptx .pt-connect__noneh { font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--ink); }
.ptx .pt-connect__none .pt-connect__p { margin-top:8px; font-size:12.5px; }
/* live status line (white inset box, pulsing dot → green tick) */
.ptx .pt-livecheck { display:flex; align-items:center; gap:9px; margin-top:16px; background:var(--surface); border-radius:var(--radius); padding:12px 16px; font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink-muted); }
.ptx .pt-livecheck.is-ok { color:var(--positive); font-weight:var(--fw-semibold); }
.ptx .pt-livecheck--inline { display:inline-flex; margin-top:0; }
.ptx .pt-livecheck__dot { width:9px; height:9px; border-radius:50%; background:var(--butter-deep, #8A6D12); animation:pt-pulse 1.4s ease-in-out infinite; flex:none; }
.ptx .pt-livecheck__tick { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:#0A2E1E; flex:none; animation:pt-pop .3s var(--ease) both; }
.ptx .pt-livecheck__msg { min-width:0; }
.ptx .pt-livecheck__meta { margin-left:auto; font-size:var(--fs-label); font-weight:var(--fw-light); color:var(--ink-muted); white-space:nowrap; }
@keyframes pt-pulse { 0%, 100% { opacity:.35; } 50% { opacity:1; } }
@keyframes pt-pop { from { transform:scale(0); } to { transform:scale(1); } }
.ptx .pt-connect__err { margin-top:10px; font-size:var(--fs-caption); color:var(--negative); font-weight:var(--fw-medium); }
.ptx .pt-connect__footer { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.ptx .pt-connect__footnote { font-size:12.5px; font-weight:var(--fw-light); color:var(--ink-muted); }

/* ── AI Traffic · TABLET (≤1080px) — design "Mention Tracker Traffic - Tablet":
      6-col grid, cards pair up 3+3, bottom row 2+2+2, smaller charts ── */
@media (max-width:1080px) {
  .ptx .pt-grid--traffic { grid-template-columns:repeat(6,1fr); gap:14px; }
  .ptx .pt-grid--traffic .pt-card { grid-column:span 3; min-height:0; padding:19px; }
  .ptx .pt-grid--traffic .pt-card--q, .ptx .pt-grid--traffic .pt-card--low { grid-column:span 2; }
  .ptx .pt-grid--traffic .pt-card--full, .ptx .pt-grid--traffic .pt-card.is-big { grid-column:1 / -1; }
  .ptx .pt-tplot--hero { height:160px; margin-top:18px; }
  .ptx .pt-tplot--stack { height:130px; }
  .ptx .pt-taxis--cols.pt-tax-stack { display:none; }
  .ptx .pt-taxis--ends.pt-tax-stack { display:flex; }
  .ptx .pt-tlist__row { min-height:42px; }
  .ptx .pt-spark { width:60px; height:18px; }
  /* funnel: caps header row drops; each stage becomes label · track · value */
  .ptx .pt-funnel__cols { display:none; }
  .ptx .pt-funnel { gap:14px; margin-top:15px; }
  .ptx .pt-funnel__prov { display:flex; flex-direction:column; align-items:stretch; gap:5px; }
  .ptx .pt-funnel__name { margin-bottom:1px; }
  .ptx .pt-funnel__stage { flex-direction:row; align-items:center; gap:8px; }
  .ptx .pt-funnel__slabel { display:block; flex:none; width:64px; font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-muted); }
  .ptx .pt-funnel__track { flex:1; }
  .ptx .pt-funnel__val { flex:none; order:2; width:36px; text-align:right; font-size:var(--fs-label); }
  .ptx .pt-funnel__note { font-size:var(--fs-caption); }
}

/* ── AI Traffic · MOBILE (≤700px) — design "Mention Tracker Traffic - Mobile":
      single column, 2×2 KPI grid, shorter charts, sparks + some footers drop ── */
@media (max-width:700px) {
  .ptx .pt-snap--4 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 16px; padding:2px 16px 0; overflow:visible; }
  .ptx .pt-snap--4 .pt-tile { flex:none; width:auto; padding:14px 15px; }
  .ptx .pt-snap--4 .pt-tile__value { font-size:26px; margin-top:6px; }
  .ptx .pt-tile__value--sm { font-size:22px; }
  .ptx .pt-grid--traffic { grid-template-columns:1fr; gap:12px; padding:0 16px; }
  .ptx .pt-grid--traffic .pt-card, .ptx .pt-grid--traffic .pt-card--q, .ptx .pt-grid--traffic .pt-card--low,
  .ptx .pt-grid--traffic .pt-card--full, .ptx .pt-grid--traffic .pt-card.is-big { grid-column:auto; padding:17px; }
  .ptx .pt-tsetup { padding:20px; gap:16px; }
  .ptx .pt-emptybody--roomy { padding:16px 2px; }
  .ptx .pt-m-hide { display:none !important; }
  .ptx .pt-d-only { display:none !important; }
  .ptx .pt-m-only { display:block; }
  .ptx .pt-legend.pt-m-only { display:flex; }
  .ptx .pt-tplot--hero { height:130px; margin-top:16px; }
  .ptx .pt-tplot--hero::before, .ptx .pt-tplot--hero::after { display:none; }
  .ptx .pt-tplot--stack { height:110px; }
  .ptx .pt-tcols { gap:2px; }
  .ptx .pt-tcol__bar { border-radius:2px 2px 0 0; }
  .ptx .pt-taxis--cols { display:none; }
  .ptx .pt-taxis--ends { display:flex; }
  .ptx .pt-spark { display:none; }
  .ptx .pt-tlist__row { min-height:44px; }
  .ptx .pt-tlist__row--2l { min-height:46px; }
  .ptx .pt-access { max-width:118px; }
  .ptx .pt-funnel { gap:15px; }
  .ptx .pt-funnel__slabel { width:62px; }
  .ptx .pt-funnel__track { height:9px; border-radius:5px; }
  .ptx .pt-connect { padding:4px 16px 90px; }
  .ptx .pt-connect__step { padding:18px; }
  .ptx .pt-connect__ind { margin-left:0; }
  .ptx .pt-code { padding-right:18px; }
  .ptx .pt-connect__codewrap .pt-code { padding-top:44px; }
}

/* ============================================================
   TRACKERS LIST — design 3dfe4242 "Mention Tracker Trackers"
   (desktop) + "…Trackers Mobile". One tinted card per tracker.
   ============================================================ */
.ptx .trk { max-width:1180px; margin:0 auto; }
.ptx .trk-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:6px 2px 18px; }
.ptx .trk-head__h { margin:0; font-size:clamp(25px,3.4vw,31px); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); color:var(--ink); }
.ptx .trk-head__p { margin:8px 0 0; font-size:14px; font-weight:var(--fw-light); color:var(--ink-muted); max-width:580px; line-height:1.55; }
.ptx .trk-addbtn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:var(--fw-semibold); background:var(--accent); color:#06301E; border:none; border-radius:var(--radius-sm); padding:12px 18px; cursor:pointer; white-space:nowrap; flex:none; text-decoration:none; transition:background var(--dur-micro) var(--ease); }
.ptx .trk-addbtn:hover { background:var(--accent-press); color:#06301E; }

.ptx .trk-alert { font-size:12.5px; font-weight:var(--fw-medium); padding:11px 14px; border-radius:var(--radius-sm); margin:0 2px 14px; line-height:1.5; }
.ptx .trk-alert--err { color:var(--negative); background:rgba(217,105,74,.10); }
.ptx .trk-alert--ok { color:var(--accent-press); background:var(--accent-weak); }

.ptx .trk-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:2px 2px 14px; }
.ptx .trk-summary { font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink-muted); }
.ptx .trk-sort { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); }

.ptx .trk-list { display:flex; flex-direction:column; gap:16px; }

/* ── card ── */
.ptx .trk-card { position:relative; border-radius:var(--radius-lg); padding:clamp(18px,2vw,24px); box-shadow:var(--shadow-flat); }
.ptx .trk-card.is-paused { opacity:.94; }
.ptx .trk-card.is-menuopen { z-index:30; }
.ptx .trk-card__head { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.ptx .trk-card__avatar { width:46px; height:46px; border-radius:14px; background:var(--deep); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:var(--fw-semibold); flex:none; }
.ptx .trk-card__id { min-width:0; display:flex; flex-direction:column; gap:3px; }
.ptx .trk-card__name { font-size:18px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); color:var(--ink); line-height:1.2; }
.ptx .trk-card__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.ptx .trk-card__url { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:var(--fw-medium); color:var(--deep); }
.ptx .trk-card__company { font-size:12px; font-weight:var(--fw-light); color:var(--ink-muted); }
.ptx .trk-dot { width:3px; height:3px; border-radius:50%; background:var(--ink-faint); flex:none; }
.ptx .trk-card__actions { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ptx .trk-status { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:var(--fw-semibold); padding:6px 11px; border-radius:var(--radius-pill); }
.ptx .trk-status__dot { width:7px; height:7px; border-radius:50%; }
.ptx .trk-status.is-active { background:var(--accent-weak); color:var(--accent-press); }
.ptx .trk-status.is-active .trk-status__dot { background:var(--accent); }
.ptx .trk-status.is-running { background:var(--accent-weak); color:var(--accent-press); }
.ptx .trk-status.is-running .trk-status__dot { background:var(--accent); animation:trkPulse 1.4s var(--ease) infinite; }
.ptx .trk-status.is-paused { background:rgba(30,29,29,.06); color:var(--ink-muted); }
.ptx .trk-status.is-paused .trk-status__dot { background:var(--neutral); }
.ptx .trk-buyer { font-size:11px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-caps); padding:6px 10px; border-radius:var(--radius-pill); background:var(--surface); border:1px solid var(--line); color:var(--ink-muted); }
.ptx .trk-edit, .ptx .trk-more { font-family:var(--font-sans); background:var(--surface); border:1px solid var(--line); color:var(--ink); cursor:pointer; transition:background var(--dur-micro) var(--ease); }
.ptx .trk-edit { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:var(--fw-medium); border-radius:var(--radius-sm); padding:8px 13px; }
.ptx .trk-edit:hover, .ptx .trk-more:hover { background:var(--surface-3); }
.ptx .trk-more { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); padding:0; flex:none; }

/* ── overflow dropdown (desktop) ── */
.ptx .trk-menu { position:absolute; top:58px; right:clamp(18px,2vw,24px); z-index:31; min-width:224px; background:var(--surface-3); border:1px solid var(--line-soft); border-radius:var(--radius-sm); box-shadow:var(--shadow-toast); padding:6px; display:flex; flex-direction:column; gap:2px; animation:trkPop .16s var(--ease) both; }
.ptx .trk-menu__swatches { padding:7px 8px 4px; }
.ptx .trk-menu__caps { display:block; font-size:10px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px; }
.ptx .trk-swatchrow { display:flex; gap:9px; }
.ptx .trk-swatch { width:26px; height:26px; border-radius:50%; border:none; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--deep); box-shadow:inset 0 0 0 1.5px var(--deep); transition:transform .12s var(--ease); }
.ptx .trk-swatch:hover { transform:scale(1.12); }
.ptx .trk-swatch.is-selected { box-shadow:inset 0 0 0 1.5px var(--deep), 0 0 0 2px var(--accent); }
.ptx .trk-menu__sep { height:1px; background:var(--line-soft); margin:6px 4px; }
.ptx .trk-menu__item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; font-family:var(--font-sans); font-size:13px; font-weight:var(--fw-medium); color:var(--ink); background:transparent; border:none; border-radius:9px; padding:9px 10px; cursor:pointer; text-decoration:none; }
.ptx .trk-menu__item:hover { background:var(--hover); }
.ptx .trk-menu__item:disabled { opacity:.5; cursor:default; }
.ptx .trk-menu__item svg { flex:none; }
.ptx .trk-menu__item--danger { color:var(--negative); }
.ptx .trk-menu__item--danger:hover { background:rgba(217,105,74,.12); }

/* ── stat tiles ── */
.ptx .trk-tiles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:18px; }
.ptx .trk-tile { background:var(--surface); border-radius:var(--radius); padding:13px 15px; display:flex; flex-direction:column; gap:5px; }
.ptx .trk-tile__cap { font-size:10px; font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-muted); }
.ptx .trk-tile__rateline { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ptx .trk-tile__big { font-size:32px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.ptx .trk-delta { display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:var(--fw-semibold); padding:3px 8px; border-radius:var(--radius-pill); }
.ptx .trk-delta.is-up { background:var(--accent-weak); color:var(--positive); }
.ptx .trk-delta.is-down { background:rgba(217,105,74,.13); color:var(--negative); }
.ptx .trk-delta.is-flat { background:rgba(30,29,29,.06); color:var(--ink-muted); }
.ptx .trk-tile__mline { display:flex; align-items:baseline; gap:4px; }
.ptx .trk-tile__mid { font-size:22px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.ptx .trk-tile__muted { font-size:13px; font-weight:var(--fw-medium); color:var(--ink-muted); }
.ptx .trk-bar { height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:3px; }
.ptx .trk-bar i { display:block; height:100%; border-radius:999px; background:var(--deep); transform-origin:left center; animation:trkGrow .55s var(--ease) both; }
.ptx .trk-card.is-paused .trk-bar i { background:var(--ink-faint); }
.ptx .trk-tile__val { font-size:15px; font-weight:var(--fw-semibold); color:var(--ink); line-height:1.2; }
.ptx .trk-tile__val.is-muted { color:var(--ink-faint); }
.ptx .trk-tile__sub { font-size:11px; font-weight:var(--fw-light); color:var(--ink-faint); }

/* ── footer ── */
.ptx .trk-card__foot { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:15px; }
.ptx .trk-models { display:inline-flex; align-items:center; gap:8px; }
.ptx .trk-models__dots { display:inline-flex; gap:4px; }
.ptx .trk-models__dot { width:8px; height:8px; border-radius:50%; }
.ptx .trk-models__label { font-size:12px; font-weight:var(--fw-medium); color:var(--deep); }
.ptx .trk-foot__prompts { font-size:12px; font-weight:var(--fw-medium); color:var(--ink-muted); }
.ptx .trk-foot__link { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:var(--fw-semibold); color:var(--deep); text-decoration:none; }

/* ── ghost + empty ── */
.ptx .trk-ghost { display:flex; align-items:center; justify-content:center; gap:9px; border:1.5px dashed var(--line); border-radius:var(--radius-lg); padding:20px; font-size:14px; font-weight:var(--fw-medium); color:var(--ink-muted); text-decoration:none; background:transparent; transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease); }
.ptx .trk-ghost:hover { background:var(--surface-3); color:var(--ink); }
.ptx .trk-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; background:var(--sky); border-radius:var(--radius-lg); padding:56px 32px; box-shadow:var(--shadow-flat); }
.ptx .trk-empty__t { font-size:20px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); color:var(--ink); margin-top:6px; }
.ptx .trk-empty__p { margin:0 0 8px; max-width:380px; font-size:13px; font-weight:var(--fw-light); line-height:1.6; color:var(--ink-muted); }

/* ── overlays: backdrop, sheet, modal ── */
.ptx .trk-backdrop { position:fixed; inset:0; z-index:20; background:transparent; }
.ptx .trk-sheet-wrap { display:none; }
.ptx .trk-scrim { position:fixed; inset:0; z-index:100; background:rgba(30,29,29,.42); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:24px; animation:trkScrim .18s var(--ease) both; }
.ptx .trk-modal { width:min(444px,100%); background:var(--surface); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-toast); display:flex; flex-direction:column; gap:14px; animation:trkPop .2s var(--ease) both; }
.ptx .trk-modal__icon { width:44px; height:44px; border-radius:13px; background:rgba(217,105,74,.13); display:inline-flex; align-items:center; justify-content:center; color:var(--negative); flex:none; }
.ptx .trk-modal__t { font-size:19px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); color:var(--ink); }
.ptx .trk-modal__p { margin:7px 0 0; font-size:13px; font-weight:var(--fw-light); line-height:1.6; color:var(--ink-muted); }
.ptx .trk-modal__chip { display:flex; align-items:center; gap:11px; background:var(--surface-2); border-radius:var(--radius); padding:11px 13px; }
.ptx .trk-modal__chip .trk-card__avatar { width:34px; height:34px; border-radius:10px; font-size:12px; }
.ptx .trk-modal__chipname { font-size:13px; font-weight:var(--fw-semibold); color:var(--ink); }
.ptx .trk-modal__chipurl { font-size:11px; font-weight:var(--fw-light); color:var(--ink-muted); }
.ptx .trk-modal__label { font-size:12px; font-weight:var(--fw-medium); color:var(--ink-muted); }
.ptx .trk-modal__input, .ptx .trk-field__input { width:100%; font-family:var(--font-sans); font-size:14px; font-weight:var(--fw-medium); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; }
.ptx .trk-modal__input:focus, .ptx .trk-field__input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
.ptx .trk-modal__actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:2px; }
.ptx .trk-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:14px; font-weight:var(--fw-semibold); border-radius:var(--radius-sm); padding:11px 17px; cursor:pointer; border:none; }
.ptx .trk-btn--ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); font-weight:var(--fw-medium); }
.ptx .trk-btn--ghost:hover { background:var(--hover); }
.ptx .trk-btn--danger { background:var(--negative); color:#fff; }
.ptx .trk-btn--danger:disabled { background:rgba(217,105,74,.4); color:rgba(255,255,255,.85); cursor:not-allowed; }
.ptx .trk-btn--accent { background:var(--accent); color:#06301E; }
.ptx .trk-btn--accent:hover { background:var(--accent-press); }
.ptx .trk-btn--accent:disabled { opacity:.6; cursor:default; }

/* ── edit dialog extras ── */
.ptx .trk-modal--edit { width:min(500px,100%); max-height:88vh; overflow-y:auto; }
.ptx .trk-edit__head { display:flex; align-items:center; justify-content:space-between; }
.ptx .trk-edit__close { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); background:var(--surface-3); border:none; color:var(--ink-muted); cursor:pointer; }
.ptx .trk-edit__close:hover { background:var(--hover); color:var(--ink); }
.ptx .trk-field { display:flex; flex-direction:column; gap:7px; }
.ptx .trk-field__label { font-size:12px; font-weight:var(--fw-medium); color:var(--ink-muted); }
.ptx .trk-field__hint { margin:0; font-size:11.5px; font-weight:var(--fw-light); color:var(--ink-faint); line-height:1.5; }
.ptx .trk-field__input--sm { padding:9px 12px; font-size:13px; }

@keyframes trkPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.35); opacity:.7; } }
@keyframes trkPop { from { opacity:0; transform:translateY(5px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes trkScrim { from { opacity:0; } to { opacity:1; } }
@keyframes trkGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes trkSheetUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .ptx [class^="trk"], .ptx [class*=" trk"] { animation-duration:.001s !important; } }

/* ── tablet ── */
@media (max-width:900px) {
  .ptx .trk-tiles { grid-template-columns:repeat(6,1fr); }
  .ptx .trk-tile--rate, .ptx .trk-tile--mentions { grid-column:span 3; }
  .ptx .trk-tile--small { grid-column:span 2; }
}

/* ── mobile: side padding (pt-wrap drops to 0), stacked card, bottom sheet ── */
@media (max-width:700px) {
  .ptx .trk { padding:0 16px; }
  .ptx .trk-head { padding-top:2px; }
  .ptx .trk-head__p { display:none; }
  .ptx .trk-card__company, .ptx .trk-buyer { display:none; }
  .ptx .trk-card__actions { gap:6px; }
  .ptx .trk-edit { display:none; }
  .ptx .trk-tiles { grid-template-columns:repeat(6,1fr); gap:8px; }
  .ptx .trk-tile__big { font-size:26px; }
  .ptx .trk-tile__mid { font-size:20px; }
  .ptx .trk-models__label { display:none; }
  /* dropdown hidden; use the bottom sheet instead */
  .ptx .trk-menu { display:none; }
  .ptx .trk-sheet-wrap { display:flex; position:fixed; inset:0; z-index:71; align-items:flex-end; background:rgba(30,29,29,.36); animation:trkScrim .2s var(--ease); }
  .ptx .trk-sheet { width:100%; background:var(--surface-3); border-radius:26px 26px 0 0; box-shadow:var(--shadow-toast); padding:12px 16px 30px; display:flex; flex-direction:column; gap:2px; animation:trkSheetUp .3s cubic-bezier(.32,.72,0,1); }
  .ptx .trk-sheet__grab { width:38px; height:4px; border-radius:999px; background:rgba(30,29,29,.18); align-self:center; margin:2px 0 10px; }
  .ptx .trk-sheet__id { display:flex; align-items:center; gap:11px; padding:2px 4px 10px; }
  .ptx .trk-sheet__id .trk-card__avatar { width:38px; height:38px; border-radius:11px; background:var(--ink); font-size:13px; }
  .ptx .trk-sheet__done { margin-left:auto; font-family:var(--font-sans); font-size:14px; font-weight:var(--fw-semibold); color:var(--accent-press); background:transparent; border:none; cursor:pointer; }
  .ptx .trk-sheet .trk-menu__item { font-size:14px; padding:12px 12px; }
  .ptx .trk-sheet .trk-swatchrow { gap:14px; }
  .ptx .trk-sheet .trk-swatch { width:34px; height:34px; }
}

/* ============================================================
   CREATE TRACKER WIZARD — design 3dfe4242 "Create Tracker -
   Desktop"/"- Mobile". Two stages: Brief → Prompts.
   ============================================================ */
.ptx .wz { max-width:1180px; margin:0 auto; }
.ptx .wz-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-sans); font-size:14px; font-weight:var(--fw-semibold); border:none; border-radius:var(--radius-sm); padding:0 18px; height:44px; cursor:pointer; white-space:nowrap; }
.ptx .wz-btn--accent { background:var(--accent); color:#06301E; }
.ptx .wz-btn--accent:hover { background:var(--accent-press); }
.ptx .wz-btn--accent:disabled { opacity:.6; cursor:default; }
.ptx .wz-btn--ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); font-weight:var(--fw-medium); }
.ptx .wz-btn--ghost:hover { background:var(--hover); }
.ptx .wz-btn--pill { border-radius:var(--radius-pill); padding:0 22px; }
.ptx .wz-btn--tall { height:52px; }
.ptx .wz-btn--sm { height:34px; font-size:12px; padding:0 14px; }
.ptx .wz-btn--full { width:100%; }
.ptx .wz-textlink { font-family:var(--font-sans); font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink-muted); background:transparent; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.ptx .wz-textlink:hover { color:var(--ink); }
.ptx .wz-caps { display:block; font-size:10px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px; }
.ptx .wz-caps--deep { color:var(--deep); }
.ptx .wz-caps--butter { color:var(--butter-deep); }
.ptx .wz-err { display:block; font-size:11px; font-weight:var(--fw-medium); color:var(--negative); margin-top:5px; }

/* ── breadcrumb + stepper ── */
.ptx .wz-crumb { display:flex; align-items:center; gap:12px; padding:2px 2px 22px; }
.ptx .wz-crumb__back { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink-muted); text-decoration:none; }
.ptx .wz-crumb__back:hover { color:var(--ink); }
.ptx .wz-crumb__sep { color:var(--ink-faint); font-size:12px; }
.ptx .wz-crumb__here { font-size:12.5px; font-weight:var(--fw-semibold); color:var(--ink); }
.ptx .wz-crumb__exit { margin-left:auto; font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink-muted); text-decoration:none; }
.ptx .wz-crumb__exit:hover { color:var(--ink); }
.ptx .wz-stepper { display:flex; align-items:center; gap:9px; margin:0 auto; }
.ptx .wz-step { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink-muted); opacity:.5; }
.ptx .wz-step.is-active, .ptx .wz-step.is-done { opacity:1; color:var(--ink); }
.ptx .wz-step.is-active { font-weight:var(--fw-semibold); }
.ptx .wz-step__dot { width:20px; height:20px; border-radius:999px; display:grid; place-items:center; font-size:10.5px; font-weight:var(--fw-semibold); background:var(--surface-2); color:var(--ink-muted); }
.ptx .wz-step.is-active .wz-step__dot, .ptx .wz-step.is-done .wz-step__dot { background:var(--accent); color:#06301E; }
.ptx .wz-step__bar { width:34px; height:2px; border-radius:999px; background:var(--line); }
.ptx .wz-step__bar.is-done { background:var(--accent-weak-2); }

/* ── start card ── */
.ptx .wz-startwrap { display:flex; justify-content:center; padding:10px 0 40px; }
.ptx .wz-startcard { width:560px; max-width:100%; background:var(--surface); border-radius:var(--radius-lg); padding:42px 46px 34px; display:flex; flex-direction:column; gap:22px; box-shadow:var(--shadow-flat); }
.ptx .wz-startcard__h { margin:0; font-size:29px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1.15; color:var(--ink); }
.ptx .wz-startcard__p { margin:10px 0 0; font-size:14px; font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.6; }
.ptx .wz-urlrow { display:flex; gap:10px; }
.ptx .wz-urlwell { flex:1; display:flex; align-items:center; gap:9px; background:var(--surface-2); border-radius:14px; padding:0 16px; }
.ptx .wz-urlwell.is-error { box-shadow:inset 0 0 0 2px var(--negative); }
.ptx .wz-urlwell input { flex:1; border:none; background:transparent; font-family:var(--font-sans); font-size:15px; font-weight:var(--fw-medium); color:var(--ink); height:52px; outline:none; }
.ptx .wz-starterr { margin:9px 0 0; font-size:11.5px; font-weight:var(--fw-light); color:var(--negative); line-height:1.55; }
.ptx .wz-startfoot { display:flex; align-items:center; gap:10px; }
.ptx .wz-startfoot__note { font-size:12px; font-weight:var(--fw-light); color:var(--ink-faint); margin-right:auto; }

/* ── brief ── */
.ptx .wz-brief__head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:0 2px 20px; flex-wrap:wrap; }
.ptx .wz-brief__h { margin:0; font-size:19px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); color:var(--ink); }
.ptx .wz-brief__sub { margin:4px 0 0; font-size:12px; font-weight:var(--fw-light); color:var(--ink-muted); }
.ptx .wz-brief__body { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
.ptx .wz-brief__cards { display:flex; flex-direction:column; gap:16px; min-width:0; }
.ptx .wz-card { border-radius:var(--radius-lg); padding:20px 24px; box-shadow:var(--shadow-flat); }
.ptx .wz-card__head { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.ptx .wz-card__title { font-size:14px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); color:var(--ink); }
.ptx .wz-card__note { margin-left:auto; font-size:10px; font-weight:var(--fw-light); color:var(--deep); }
.ptx .wz-card__foot { margin:14px 0 0; font-size:10.5px; font-weight:var(--fw-light); color:var(--deep); }
.ptx .wz-filled { display:inline-flex; align-items:center; gap:5px; font-size:9px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-pill); background:var(--accent-weak); color:var(--positive); }
.ptx .wz-tag { display:inline-flex; align-items:center; font-size:8.5px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; border-radius:999px; padding:2px 7px; margin-left:7px; }
.ptx .wz-tag--req { color:var(--accent-press); background:var(--accent-weak); }
.ptx .wz-tag--optional { color:var(--ink-muted); background:rgba(255,255,255,.6); }
.ptx .wz-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ptx .wz-field { display:flex; flex-direction:column; min-width:0; }
.ptx .wz-field--full { grid-column:1 / -1; }
.ptx .wz-input { width:100%; font-family:var(--font-sans); font-size:13px; font-weight:var(--fw-medium); color:var(--ink); background:var(--surface); border:none; border-radius:12px; padding:11px 13px; outline:none; }
.ptx .wz-input:focus { box-shadow:0 0 0 2px var(--accent); }
.ptx .wz-selectwrap { position:relative; }
.ptx .wz-select { appearance:none; padding-right:34px; cursor:pointer; }
.ptx .wz-chev { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--ink-faint); pointer-events:none; }
.ptx .wz-buyer { margin-top:14px; }
.ptx .wz-buyerrow { display:flex; gap:10px; }
.ptx .wz-buyercard { flex:1; display:flex; flex-direction:column; gap:5px; padding:13px 15px; border-radius:var(--radius); cursor:pointer; text-align:left; font-family:inherit; background:rgba(255,255,255,.5); border:2px solid transparent; transition:all .18s var(--ease); }
.ptx .wz-buyercard.is-on { background:var(--surface); border-color:var(--accent); box-shadow:var(--shadow-flat); }
.ptx .wz-buyercard__top { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:var(--fw-semibold); color:var(--ink); }
.ptx .wz-buyercard__sub { font-size:10.5px; font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.4; }
.ptx .wz-seg { display:flex; flex-direction:column; }
.ptx .wz-segrow { display:flex; gap:2px; background:rgba(255,255,255,.55); border-radius:var(--radius-pill); padding:3px; width:max-content; max-width:100%; flex-wrap:wrap; }
.ptx .wz-segbtn { font-family:var(--font-sans); padding:6px 12px; border-radius:999px; font-size:11px; font-weight:var(--fw-medium); color:var(--ink-muted); background:transparent; border:none; cursor:pointer; }
.ptx .wz-segbtn.is-on { font-weight:var(--fw-semibold); background:var(--surface); color:var(--ink); }
.ptx .wz-chipfield { margin-top:14px; }
.ptx .wz-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ptx .wz-chip { display:inline-flex; align-items:center; gap:7px; background:var(--surface); border-radius:999px; padding:7px 12px; font-size:11.5px; font-weight:var(--fw-medium); color:var(--ink); }
.ptx .wz-chip button { display:inline-flex; padding:0; background:transparent; border:none; color:var(--ink-faint); cursor:pointer; }
.ptx .wz-chip button:hover { color:var(--ink); }
.ptx .wz-chipinput { font-family:var(--font-sans); font-size:11.5px; font-weight:var(--fw-medium); color:var(--ink); background:var(--surface); border:1.5px dashed rgba(30,29,29,.18); border-radius:999px; padding:6px 12px; min-width:120px; outline:none; }
.ptx .wz-chipinput:focus { border-style:solid; border-color:var(--accent); }
.ptx .wz-chipfield__hint { display:block; margin-top:8px; font-size:10px; font-weight:var(--fw-light); color:var(--deep); }

/* ── rail ── */
.ptx .wz-rail { position:sticky; top:16px; background:var(--surface); border-radius:var(--radius-lg); padding:18px 20px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-flat); }
.ptx .wz-rail__head { display:flex; align-items:center; gap:8px; }
.ptx .wz-rail__dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:wzPulse 1.6s var(--ease) infinite; }
.ptx .wz-rail__title { font-size:13px; font-weight:var(--fw-semibold); color:var(--ink); }
.ptx .wz-rail__live { margin-left:auto; font-size:9.5px; font-weight:var(--fw-light); color:var(--ink-faint); }
.ptx .wz-rail__list { display:flex; flex-direction:column; gap:9px; }
.ptx .wz-rail__item { display:flex; gap:8px; }
.ptx .wz-rail__mk { width:7px; height:7px; border-radius:2.5px; margin-top:3px; flex:none; }
.ptx .wz-rail__txt { font-size:10.5px; font-weight:var(--fw-medium); color:var(--ink); line-height:1.45; display:flex; align-items:center; gap:5px; }
.ptx .wz-rail__cap { font-size:9px; font-weight:var(--fw-light); color:var(--ink-faint); margin-top:1px; }
.ptx .wz-rail__sep { height:1px; background:var(--line-soft); }
.ptx .wz-rail__ready { display:flex; gap:9px; }
.ptx .wz-rail__readyt { font-size:12px; font-weight:var(--fw-semibold); color:var(--ink); }
.ptx .wz-rail__readyp { font-size:10px; font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.45; margin-top:2px; }
.ptx .wz-lock { color:var(--ink-faint); flex:none; }

/* ── generating ── */
.ptx .wz-gen { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:40px 24px 60px; }
.ptx .wz-gen__logo { animation:wzPulse 1.6s var(--ease) infinite; }
.ptx .wz-gen__h { margin:0; font-size:19px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); color:var(--ink); }
.ptx .wz-gen__p { margin:0; font-size:11.5px; font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.55; max-width:380px; }
.ptx .wz-gen__steps { width:400px; max-width:100%; background:var(--surface); border-radius:var(--radius-lg); padding:18px 22px; display:flex; flex-direction:column; gap:11px; text-align:left; box-shadow:var(--shadow-flat); margin-top:4px; }
.ptx .wz-gen__row { display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:var(--fw-medium); color:var(--ink); }
.ptx .wz-gen__row.is-wait { opacity:.45; }
.ptx .wz-gen__meta { margin-left:auto; font-size:10px; font-weight:var(--fw-light); color:var(--ink-faint); }
.ptx .wz-gen__meta--now { font-weight:var(--fw-medium); color:var(--accent-press); }
.ptx .wz-gen__foot { font-size:10.5px; font-weight:var(--fw-light); color:var(--ink-faint); }
.ptx .wz-check { width:16px; height:16px; border-radius:50%; background:var(--accent); display:inline-grid; place-items:center; flex:none; }
.ptx .wz-spin { width:15px; height:15px; border-radius:50%; background:var(--accent-weak); display:inline-grid; place-items:center; flex:none; position:relative; }
.ptx .wz-spin::after { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); animation:wzPulse 1.1s var(--ease) infinite; }
.ptx .wz-hollow { width:15px; height:15px; border-radius:50%; border:1.5px solid rgba(30,29,29,.2); flex:none; }

/* ── review ── */
.ptx .wz-review__head { padding:0 2px 14px; }
.ptx .wz-reachnote { display:block; margin-top:7px; font-size:10px; font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.45; }
/* Locale strip — "we honoured your market", or why we couldn't. */
.ptx .wz-loc { display:flex; align-items:flex-start; gap:11px; flex-wrap:wrap; background:var(--mint); border-radius:var(--radius); padding:11px 16px; box-shadow:var(--shadow-flat); margin-bottom:10px; font-size:11.5px; font-weight:var(--fw-medium); color:var(--ink); line-height:1.5; }
.ptx .wz-loc--warn { background:var(--butter); }
.ptx .wz-loc__ic { display:inline-flex; flex:none; margin-top:2px; color:var(--mint-deep); }
.ptx .wz-loc--warn .wz-loc__ic { color:var(--butter-deep); }
.ptx .wz-loc__body { flex:1; min-width:0; }
.ptx .wz-loc__body b { font-weight:var(--fw-semibold); }
.ptx .wz-loc__act { flex:none; }
.ptx .wz-offmkt { display:inline-flex; align-items:center; border-radius:999px; padding:4px 9px; font-size:8.5px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; background:var(--butter); color:var(--butter-deep); flex:none; }
.ptx .wz-row.is-offmarket { background:rgba(251,237,168,.34); }
.ptx .wz-cov { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--surface); border-radius:var(--radius); padding:10px 16px; box-shadow:var(--shadow-flat); margin-bottom:14px; }
.ptx .wz-cov__item { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:var(--fw-medium); color:var(--ink); }
.ptx .wz-cov__sw { width:8px; height:8px; border-radius:3px; }
.ptx .wz-cov__note { margin-left:auto; font-size:10px; font-weight:var(--fw-light); color:var(--ink-faint); }
.ptx .wz-table { background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-flat); }
.ptx .wz-table__head { display:flex; justify-content:space-between; padding:12px 20px 10px; font-size:8.5px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--ink-faint); }
.ptx .wz-row { display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--line-soft); }
.ptx .wz-row.is-editing { background:var(--accent-weak); align-items:flex-start; flex-wrap:wrap; }
.ptx .wz-row__num { font-size:10px; font-weight:var(--fw-medium); color:var(--ink-faint); width:18px; font-variant-numeric:tabular-nums; flex:none; }
.ptx .wz-role { display:inline-flex; align-items:center; gap:6px; background:var(--surface-2); border-radius:999px; padding:4px 9px; font-size:8.5px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--ink-muted); flex:none; }
.ptx .wz-role__dot { width:7px; height:7px; border-radius:2.5px; }
.ptx .wz-row__txt { flex:1; font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink); line-height:1.45; min-width:0; }
.ptx .wz-row__editwrap { flex:1 1 100%; display:flex; flex-direction:column; gap:9px; }
.ptx .wz-editarea { width:100%; font-family:var(--font-sans); font-size:12.5px; font-weight:var(--fw-medium); color:var(--ink); background:var(--surface); border:none; border-radius:12px; padding:11px 13px; box-shadow:inset 0 0 0 2px var(--accent); outline:none; resize:vertical; }
.ptx .wz-editctl { display:flex; align-items:center; gap:10px; }
.ptx .wz-editctl__hint { font-size:10px; font-weight:var(--fw-light); color:var(--ink-muted); margin-right:auto; }
.ptx .wz-status { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 10px; font-size:10px; font-weight:var(--fw-semibold); border:none; flex:none; }
.ptx .wz-status--edit { background:var(--accent-weak); color:var(--accent-press); cursor:pointer; font-family:var(--font-sans); }
.ptx .wz-status--edit:hover { background:var(--accent-weak-2); }
.ptx .wz-status--lock { background:var(--surface-2); color:var(--ink-faint); }
.ptx .wz-review__foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.ptx .wz-review__note { font-size:10.5px; font-weight:var(--fw-light); color:var(--ink-faint); margin-right:auto; }

@keyframes wzPulse { 0%,100% { opacity:.4; } 50% { opacity:.9; } }

/* ── wizard tablet/mobile ── */
@media (max-width:900px) {
  .ptx .wz-brief__body { grid-template-columns:1fr; }
  .ptx .wz-rail { position:static; }
}
@media (max-width:700px) {
  .ptx .wz { padding:0 16px; }
  .ptx .wz-stepper { margin:0; order:3; width:100%; justify-content:center; padding-top:10px; }
  .ptx .wz-crumb { flex-wrap:wrap; }
  .ptx .wz-crumb__exit { order:2; }
  .ptx .wz-startcard { padding:30px 22px 26px; }
  .ptx .wz-startcard__h { font-size:23px; }
  .ptx .wz-grid2 { grid-template-columns:1fr; }
  .ptx .wz-buyerrow { flex-direction:column; }
  .ptx .wz-row { flex-wrap:wrap; }
  .ptx .wz-row__txt { flex:1 1 100%; order:3; }
}

/* ============================================================ IMPROVE PAGE (/improve, design "Mention Tracker Improve" 1a–1e)
   Category tints set --imp-deep/--imp-bg/--imp-line per block so every child
   (labels, metrics, hairlines) picks up the right colour without variants. */
.pt-imp-strip { display:flex; align-items:stretch; gap:16px; margin-bottom:24px; }
.pt-imp-score { display:flex; align-items:center; background:var(--sky); border-radius:var(--radius); padding:16px 22px; box-shadow:var(--shadow-flat); }
.pt-imp-score__label { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--sky-deep); opacity:.85; }
.pt-imp-score__row { display:flex; align-items:baseline; gap:9px; margin-top:4px; }
.pt-imp-score__v { font-size:34px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.pt-imp-score__d { font-size:var(--fs-label); font-weight:var(--fw-semibold); }
.pt-imp-score__d.is-up { color:var(--positive); }
.pt-imp-score__d.is-down { color:var(--negative); }
.pt-imp-score__vs { color:var(--sky-deep); font-weight:var(--fw-medium); opacity:.9; }
.pt-imp-counts { flex:1; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; min-width:0; flex-wrap:wrap; }
.pt-imp-chip { display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-body); font-weight:var(--fw-medium); padding:8px 14px; border-radius:var(--radius-pill); white-space:nowrap; }
.pt-imp-chip i { width:8px; height:8px; border-radius:50%; display:inline-block; }
.pt-imp-chip--new { color:var(--ink); background:var(--surface-2); }
.pt-imp-chip--new i { background:var(--ink); }
.pt-imp-chip--open { color:var(--ink-muted); border:1px solid var(--line); }
.pt-imp-chip--open i { background:var(--ink-faint); }
.pt-imp-chip--won { color:var(--positive); background:var(--accent-weak); }
.pt-imp-counts__note { margin-left:auto; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); }
.pt-imp-note { display:flex; align-items:center; gap:8px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); margin:-14px 4px 24px; }

.pt-imp-warn { background:var(--butter); border-radius:var(--radius-lg); padding:18px 22px; box-shadow:var(--shadow-flat); margin-bottom:24px; display:flex; gap:15px; align-items:flex-start; }
.pt-imp-warn__ic { width:34px; height:34px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.6); color:var(--butter-deep); }
.pt-imp-warn__body { flex:1; min-width:0; }
.pt-imp-warn__t { font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--ink); }
.pt-imp-warn__s { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); margin-top:3px; line-height:1.55; max-width:560px; }
.pt-imp-warn__btn { background:rgba(255,255,255,.65); border:1px solid rgba(138,109,18,.25); }
.pt-imp-warn__btn:hover { background:var(--surface); }

.pt-imp-seclabel { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-muted); margin:0 4px 10px; }
.pt-imp-seclabel--row { display:flex; align-items:baseline; gap:10px; }
.pt-imp-seclabel__right { margin-left:auto; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); text-transform:none; letter-spacing:0; }

/* hero + category tint scopes */
.pt-imp-hero { border-radius:var(--radius-lg); padding:28px 30px 22px; box-shadow:var(--shadow-flat); margin-bottom:28px; --imp-deep:var(--sky-deep); --imp-line:rgba(31,107,176,.18); background:var(--sky); }
.pt-imp-hero--vis, .pt-imp-hero--sky { background:var(--sky); --imp-deep:var(--sky-deep); --imp-line:rgba(31,107,176,.18); }
.pt-imp-hero--pla { background:var(--blush); --imp-deep:var(--blush-deep); --imp-line:rgba(178,74,99,.20); }
.pt-imp-hero--com { background:var(--lilac); --imp-deep:var(--lilac-deep); --imp-line:rgba(110,79,192,.20); }
.pt-imp-hero--sou { background:var(--butter); --imp-deep:var(--butter-deep); --imp-line:rgba(138,109,18,.20); }
.pt-imp-hero--sen, .pt-imp-hero--mint { background:var(--mint); --imp-deep:var(--mint-deep); --imp-line:rgba(18,128,90,.20); }
.pt-imp-hero__chips { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pt-imp-focuschip { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--imp-deep); background:rgba(255,255,255,.55); padding:6px 13px; border-radius:var(--radius-pill); }
.pt-imp-outchip { display:inline-flex; align-items:center; font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--imp-deep); border:1px solid var(--imp-line); padding:5px 12px; border-radius:var(--radius-pill); }
.pt-imp-hero__title { font-size:26px; font-weight:var(--fw-semibold); letter-spacing:-0.02em; line-height:var(--lh-snug); color:var(--ink); margin:16px 0 6px; max-width:880px; }
.pt-imp-hero__sub { font-size:var(--fs-card); font-weight:var(--fw-light); color:var(--ink); opacity:.85; max-width:820px; line-height:var(--lh-body); }
.pt-imp-hero__grid { display:grid; grid-template-columns:1.5fr 1fr; gap:20px; margin-top:22px; }
.pt-imp-panel { background:rgba(255,255,255,.55); border-radius:var(--radius); padding:18px 20px; }
.pt-imp-panel__label { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--imp-deep); }
.pt-imp-steps { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.pt-imp-step { display:flex; gap:12px; align-items:flex-start; }
.pt-imp-step__n { width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent-weak); color:var(--accent-press); font-size:var(--fs-label); font-weight:var(--fw-semibold); }
.pt-imp-step__n--strong { width:24px; height:24px; background:var(--accent-weak-2); }
.pt-imp-step__t { font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink); line-height:var(--lh-body); padding-top:2px; }
.pt-imp-kv { display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.pt-imp-kv__row { display:flex; align-items:center; gap:10px; font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink); }
.pt-imp-kv__row + .pt-imp-kv__row { border-top:1px solid var(--imp-line); padding-top:9px; }
.pt-imp-kv__l { flex:1; }
.pt-imp-kv__v { font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.pt-imp-kv__row:not(:first-child) .pt-imp-kv__v { color:var(--imp-deep); }
.pt-imp-hero__prov { border-top:1px solid var(--imp-line); margin-top:18px; padding-top:12px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); }
.pt-imp-hero__t { font-size:21px; font-weight:var(--fw-semibold); letter-spacing:-0.02em; color:var(--ink); line-height:var(--lh-snug); max-width:520px; }
.pt-imp-hero__s { font-size:var(--fs-body); font-weight:var(--fw-light); color:var(--ink); opacity:.85; margin-top:8px; max-width:520px; line-height:var(--lh-body); }
.pt-imp-hero__s b { font-weight:var(--fw-semibold); }
.pt-imp-hero__running { margin-top:18px; font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--sky-deep); }
.pt-imp-hero__err { margin-top:10px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--negative); }
.pt-imp-runbtn { display:inline-block; margin-top:18px; font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--fw-semibold); background:var(--accent); color:#0A2E1E; border:none; border-radius:var(--radius-pill); padding:12px 22px; cursor:pointer; text-decoration:none; }
.pt-imp-runbtn:hover { background:var(--accent-press); }
.pt-imp-runbtn:disabled { opacity:.6; cursor:default; }

/* healthy (1d) */
.pt-imp-won { display:flex; gap:20px; align-items:flex-start; }
.pt-imp-won__badge { width:48px; height:48px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.6); color:var(--mint-deep); }
.pt-imp-won__body { min-width:0; }
.pt-imp-won__chips { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.pt-imp-wonchip { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--mint-deep); background:rgba(255,255,255,.6); padding:6px 13px; border-radius:var(--radius-pill); }
.pt-imp-wonchip.is-pos { color:var(--positive); }

/* action rows */
.pt-imp-list { display:flex; flex-direction:column; gap:10px; }
.pt-imp-action { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.pt-imp-action__head { width:100%; display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer; border-radius:var(--radius); border:none; background:transparent; font-family:var(--font-sans); text-align:left; transition:background var(--dur-micro); }
.pt-imp-action__head:hover { background:var(--surface-3); }
.pt-imp-chev { flex:none; color:var(--ink-faint); transition:transform .18s ease; }
.pt-imp-catchip { display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-label); font-weight:var(--fw-semibold); padding:5px 12px; border-radius:var(--radius-pill); flex:none; min-width:96px; }
.pt-imp-catchip.is-vis { color:var(--sky-deep); background:var(--sky); }
.pt-imp-catchip.is-pla { color:var(--blush-deep); background:var(--blush); }
.pt-imp-catchip.is-com { color:var(--lilac-deep); background:var(--lilac); }
.pt-imp-catchip.is-sou { color:var(--butter-deep); background:var(--butter); }
.pt-imp-catchip.is-sen { color:var(--mint-deep); background:var(--mint); }
.pt-imp-bandchip { display:inline-flex; align-items:center; font-size:var(--fs-label); font-weight:var(--fw-semibold); padding:4px 11px; border-radius:var(--radius-pill); flex:none; border:1px solid transparent; }
.pt-imp-bandchip.is-high { color:var(--surface); background:var(--ink); border-color:var(--ink); }
.pt-imp-bandchip.is-medium { color:var(--ink); background:var(--surface-2); border-color:var(--line); }
.pt-imp-bandchip.is-low { color:var(--ink-muted); background:transparent; border-color:var(--line); }
.pt-imp-statuschip { display:inline-flex; align-items:center; font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--ink-muted); border:1px solid var(--line); padding:4px 11px; border-radius:var(--radius-pill); flex:none; white-space:nowrap; }
.pt-imp-action__title { flex:1; font-size:var(--fs-card); font-weight:var(--fw-semibold); letter-spacing:-0.01em; color:var(--ink); min-width:0; }
.pt-imp-action__metric { display:inline-flex; align-items:baseline; gap:7px; flex:none; }
.pt-imp-action__num { font-size:21px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); font-variant-numeric:tabular-nums; color:var(--ink); }
.pt-imp-action__num.is-vis { color:var(--sky-deep); }
.pt-imp-action__num.is-pla { color:var(--blush-deep); }
.pt-imp-action__num.is-com { color:var(--lilac-deep); }
.pt-imp-action__num.is-sou { color:var(--butter-deep); }
.pt-imp-action__num.is-sen { color:var(--mint-deep); }
.pt-imp-action__msub { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); }
.pt-imp-action__body { padding:2px 20px 20px 46px; }
.pt-imp-evid { border-radius:var(--radius); padding:16px 20px; --imp-deep:var(--sky-deep); --imp-line:rgba(31,107,176,.18); }
.pt-imp-evid.is-vis { background:var(--sky); }
.pt-imp-evid.is-pla { background:var(--blush); --imp-deep:var(--blush-deep); --imp-line:rgba(178,74,99,.20); }
.pt-imp-evid.is-com { background:var(--lilac); --imp-deep:var(--lilac-deep); --imp-line:rgba(110,79,192,.20); }
.pt-imp-evid.is-sou { background:var(--butter); --imp-deep:var(--butter-deep); --imp-line:rgba(138,109,18,.20); }
.pt-imp-evid.is-sen { background:var(--mint); --imp-deep:var(--mint-deep); --imp-line:rgba(18,128,90,.20); }
.pt-imp-evid__head { font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink); margin-top:8px; line-height:var(--lh-body); max-width:900px; }
.pt-imp-evid__table { display:flex; flex-direction:column; margin-top:10px; max-width:760px; }
.pt-imp-evid__row { display:grid; grid-template-columns:1fr 150px 130px; gap:12px; align-items:baseline; padding:7px 0; border-top:1px solid rgba(30,29,29,.10); font-size:var(--fs-body); }
.pt-imp-evid__q { font-weight:var(--fw-medium); color:var(--ink); }
.pt-imp-evid__a { font-weight:var(--fw-semibold); color:var(--imp-deep); font-variant-numeric:tabular-nums; }
.pt-imp-evid__b { font-weight:var(--fw-medium); color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.pt-imp-detail { display:grid; grid-template-columns:150px 1fr; gap:10px 18px; margin-top:16px; max-width:940px; }
.pt-imp-detail__label { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--ink-faint); padding-top:4px; }
.pt-imp-detail__text { font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink); line-height:var(--lh-body); }
.pt-imp-action__prov { border-top:1px solid var(--line-soft); margin-top:16px; padding-top:11px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); }
.pt-imp-fold { width:100%; display:flex; align-items:center; gap:10px; padding:13px 20px; cursor:pointer; border-radius:var(--radius); border:1px dashed var(--line); background:transparent; color:var(--ink-muted); font-size:var(--fs-body); font-weight:var(--fw-medium); font-family:var(--font-sans); transition:background var(--dur-micro), color var(--dur-micro); }
.pt-imp-fold:hover { background:var(--surface-3); color:var(--ink); }

/* improved this week */
.pt-imp-winlist { display:flex; flex-direction:column; gap:10px; }
.pt-imp-win { background:var(--mint); border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow-flat); display:flex; align-items:center; gap:18px; }
.pt-imp-win__badge { width:44px; height:44px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.6); color:var(--mint-deep); }
.pt-imp-win__body { flex:1; min-width:0; }
.pt-imp-win__t { font-size:var(--fs-card); font-weight:var(--fw-semibold); letter-spacing:-0.01em; color:var(--ink); }
.pt-imp-win__s { font-size:var(--fs-body); font-weight:var(--fw-light); color:var(--ink); opacity:.8; margin-top:3px; }
.pt-imp-win__delta { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--positive); background:rgba(255,255,255,.6); padding:7px 14px; border-radius:var(--radius-pill); flex:none; }

/* tracker setup */
.pt-imp-setup { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); margin-top:28px; }
.pt-imp-setup__head { width:100%; display:flex; align-items:center; gap:12px; padding:18px 24px; cursor:pointer; border-radius:var(--radius-lg); border:none; background:transparent; font-family:var(--font-sans); text-align:left; color:var(--ink-muted); transition:background var(--dur-micro); }
.pt-imp-setup__head:hover { background:var(--surface-3); }
.pt-imp-setup__t { font-size:var(--fs-card); font-weight:var(--fw-semibold); letter-spacing:-0.01em; color:var(--ink); }
.pt-imp-setup__count { display:inline-flex; align-items:center; font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--butter-deep); background:var(--butter); padding:4px 11px; border-radius:var(--radius-pill); }
.pt-imp-setup__hint { margin-left:auto; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); }
.pt-imp-setup__rows { display:flex; flex-direction:column; gap:8px; padding:0 24px 20px; }
.pt-imp-setup__rows--bare { padding:0; }
.pt-imp-setuprow { display:flex; align-items:center; gap:14px; background:var(--surface-2); border-radius:var(--radius); padding:14px 18px; }
.pt-imp-setup__rows--bare .pt-imp-setuprow { background:var(--surface); border:1px solid var(--line); }
.pt-imp-setuprow__ic { width:26px; height:26px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1.5px dashed var(--ink-faint); color:var(--ink-faint); }
.pt-imp-setuprow__ic.is-done { border:none; background:var(--accent-weak); color:var(--accent-press); }
.pt-imp-setuprow__body { flex:1; min-width:0; display:flex; flex-direction:column; }
.pt-imp-setuprow__t { font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--ink); }
.pt-imp-setuprow__s { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); margin-top:1px; }
.pt-imp-setuprow__donenote { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); }
.pt-imp-editbtn { font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--fw-medium); background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-pill); padding:9px 16px; cursor:pointer; flex:none; text-decoration:none; transition:background var(--dur-micro); }
.pt-imp-editbtn:hover { background:var(--hover); }

/* tablet */
@media (max-width:1080px) {
  .pt-imp-hero__grid { grid-template-columns:1fr; }
}
/* mobile — single column, same order (spec §6c) */
@media (max-width:700px) {
  .pt-imp-strip { flex-direction:column; gap:12px; margin:0 16px 18px; }
  .pt-imp-note, .pt-imp-seclabel { margin-left:20px; margin-right:20px; }
  .pt-imp-warn, .pt-imp-hero, .pt-imp-list, .pt-imp-winlist, .pt-imp-setup { margin-left:16px; margin-right:16px; }
  .pt-imp-warn { flex-wrap:wrap; }
  .pt-imp-warn__body { flex:1 1 calc(100% - 49px); }
  .pt-imp-warn__btn { margin-left:49px; }
  .pt-imp-hero { padding:22px 20px 18px; }
  .pt-imp-hero__title { font-size:21px; }
  .pt-imp-counts__note { flex-basis:100%; margin-left:0; }
  .pt-imp-action__head { flex-wrap:wrap; row-gap:8px; padding:14px 16px; }
  .pt-imp-action__title { flex:1 1 100%; order:5; }
  .pt-imp-action__metric { margin-left:auto; }
  .pt-imp-catchip { min-width:0; }
  .pt-imp-action__body { padding:2px 16px 16px 16px; }
  .pt-imp-evid__row { grid-template-columns:1fr; gap:2px; padding:9px 0; }
  .pt-imp-detail { grid-template-columns:1fr; gap:4px 0; margin-top:14px; }
  .pt-imp-detail__label { padding-top:10px; }
  .pt-imp-win { flex-wrap:wrap; padding:18px; }
  .pt-imp-win__delta { margin-left:58px; }
  .pt-imp-setup__head { padding:16px 18px; }
  .pt-imp-setup__rows { padding:0 18px 16px; }
  .pt-imp-setup__rows--bare { padding:0; }
  .pt-imp-setuprow { flex-wrap:wrap; }
  .pt-imp-setuprow__body { flex:1 1 calc(100% - 40px); }
  .pt-imp-setuprow .pt-imp-editbtn { margin-left:40px; }
}

/* ── Public demo: top banner + feature-lock modal (design 3dfe4242 "Mention
   Tracker Demo"). Rendered only for the read-only demo actor by
   components/petal/DemoChrome.tsx; the styles are inert for everyone else. ── */
.pt-demobar {
  display:flex; align-items:center; gap:16px;
  padding:11px 32px; background:var(--accent-weak); border-bottom:1px solid rgba(18,200,121,.22);
}
.pt-demobar__pill {
  display:inline-flex; align-items:center; gap:8px; flex:none;
  font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--accent-press); white-space:nowrap;
}
.pt-demobar__dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.pt-demobar__text {
  font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pt-demobar__cta {
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:7px; height:34px;
  font-family:var(--font-sans); font-size:var(--fs-caption); font-weight:var(--fw-semibold);
  padding:0 16px; border-radius:var(--radius-pill); background:var(--accent); color:#06301E;
  text-decoration:none; cursor:pointer; transition:background var(--dur-micro,.12s) var(--ease);
}
.pt-demobar__cta:hover { background:var(--accent-press); }
@media (max-width:720px) {
  .pt-demobar { gap:12px; padding:10px 24px; }
  .pt-demobar__text { display:none; }
  .pt-demobar__cta span { display:none; }
}
@media (max-width:520px) { .pt-demobar { padding:9px 16px; } }

.pt-demomodal {
  position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(30,29,29,.44); animation:pt-fade var(--dur-base) var(--ease);
}
.pt-demomodal__card {
  width:444px; max-width:100%; box-sizing:border-box; background:var(--surface-3);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-toast); padding:34px 32px 26px;
  text-align:center; animation:pt-demopop var(--dur-base) var(--ease);
}
@keyframes pt-demopop { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.pt-demomodal__icon {
  width:62px; height:62px; border-radius:20px; background:var(--accent-weak);
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.pt-demomodal__title { font-size:var(--fs-card); font-weight:var(--fw-semibold); color:var(--ink); letter-spacing:-0.01em; }
.pt-demomodal__body { font-size:var(--fs-body); font-weight:var(--fw-light); color:var(--ink-muted); line-height:var(--lh-body); margin:10px auto 0; max-width:342px; }
.pt-demomodal__actions { display:flex; flex-direction:column; gap:9px; margin-top:26px; }
.pt-demomodal__cta {
  display:inline-flex; align-items:center; justify-content:center; width:100%; height:46px; box-sizing:border-box;
  font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--fw-semibold);
  background:var(--accent); color:#06301E; border-radius:var(--radius-pill); cursor:pointer; text-decoration:none;
  transition:background var(--dur-micro,.12s) var(--ease);
}
.pt-demomodal__cta:hover { background:var(--accent-press); }
.pt-demomodal__dismiss {
  width:100%; height:44px; font-family:var(--font-sans); font-size:var(--fs-body); font-weight:var(--fw-medium);
  background:transparent; color:var(--ink-muted); border:none; border-radius:var(--radius-pill); cursor:pointer;
  transition:background var(--dur-micro,.12s) var(--ease), color var(--dur-micro,.12s) var(--ease);
}
.pt-demomodal__dismiss:hover { background:var(--hover); color:var(--ink); }
.pt-demomodal__foot { margin-top:15px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); }

/* ============================================================ FIRST-RUN STATE
   design 3dfe4242 "Mention Tracker First Run". The board a user sees right after
   creating their first tracker — a reassurance message + a LIVE per-model
   progress card, over a board of "getting ready" widgets. Component:
   app/(dashboard)/(petal)/dashboard/FirstRun.tsx. All animation lives here so
   reduced-motion can switch it off. */
@keyframes fr-pulse { 0%,100% { opacity:.45; } 50% { opacity:.9; } }
@keyframes fr-blink { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@keyframes fr-rise  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.pt-fr__ctx { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-faint); align-self:flex-end; padding-bottom:2px; }

/* Shared: the tiny blinking "still working" dot + the checkmark's kicker text. */
.pt-fr__blink { width:7px; height:7px; border-radius:50%; background:var(--ink-faint); display:inline-block; flex:none; animation:fr-blink 1.5s ease-in-out infinite; }

/* Hero row — reassurance (7) + live progress (5). */
.pt-fr__hero { display:grid; grid-template-columns:7fr 5fr; gap:20px; margin-bottom:20px; }

.pt-fr__reassure, .pt-fr__prog {
  border-radius:var(--radius-lg); padding:var(--card-pad); box-shadow:var(--shadow-flat);
  color:var(--ink); display:flex; flex-direction:column;
}
.pt-fr__reassure { background:var(--butter); }
.pt-fr__prog { background:var(--sky); }

.pt-fr__kick { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--butter-deep); }
.pt-fr__kick--sky { color:var(--sky-deep); }
.pt-fr__head { font-size:var(--fs-h1); font-weight:var(--fw-semibold); letter-spacing:-0.02em; line-height:var(--lh-snug); margin-top:10px; max-width:560px; }
.pt-fr__body { font-size:var(--fs-body); font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.7; margin-top:10px; max-width:580px; text-wrap:pretty; }

.pt-fr__fillwrap { margin-top:auto; padding-top:20px; }
.pt-fr__filllabel { font-size:var(--fs-micro); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--butter-deep); }
.pt-fr__fill { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.pt-fr__fillpill { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-label); font-weight:var(--fw-medium); background:var(--surface); border-radius:var(--radius-pill); padding:6px 12px; }
.pt-fr__fillpill i { width:8px; height:8px; border-radius:3px; display:inline-block; flex:none; }

/* Progress card body */
.pt-fr__count { display:flex; align-items:baseline; gap:9px; margin-top:8px; }
.pt-fr__countn { font-size:var(--fs-metric); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); font-variant-numeric:tabular-nums; }
.pt-fr__countlbl { font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink-muted); }
.pt-fr__progsub { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); margin-top:2px; }

.pt-fr__segs { display:flex; gap:6px; margin-top:14px; }
.pt-fr__seg { flex:1; height:8px; border-radius:4px; background:rgba(30,29,29,.10); transition:background .35s var(--ease); }
.pt-fr__seg.is-done { background:var(--accent); }
.pt-fr__seg.is-next { animation:fr-blink 1.5s ease-in-out infinite; }

.pt-fr__rows { display:flex; flex-direction:column; gap:2px; margin-top:14px; }
.pt-fr__row { display:flex; align-items:center; gap:10px; padding:7px 10px; margin:0 -10px; border-radius:var(--radius-sm); transition:background .35s var(--ease); }
.pt-fr__row.is-slow { background:rgba(255,255,255,.6); }
.pt-fr__row.is-failed { opacity:.55; }
.pt-fr__dot { width:10px; height:10px; border-radius:3px; display:inline-block; flex:none; }
.pt-fr__name { flex:1; font-size:var(--fs-body); font-weight:var(--fw-medium); }
.pt-fr__status { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--ink-muted); white-space:nowrap; }
.pt-fr__status.is-done { color:var(--accent-press); }
.pt-fr__row.is-failed .pt-fr__status { font-weight:var(--fw-medium); }

.pt-fr__waitnote { margin-top:12px; background:rgba(255,255,255,.6); border-radius:var(--radius-sm); padding:11px 13px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); line-height:1.6; animation:fr-rise .45s var(--ease) both; }
.pt-fr__waitnote b { font-weight:var(--fw-semibold); color:var(--ink); }
.pt-fr__progfoot { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--sky-deep); }

/* The board below — each widget introduces itself over a shimmer. */
.pt-fr__cards { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pt-fr__skcard { border-radius:var(--radius-lg); padding:var(--card-pad); box-shadow:var(--shadow-flat); color:var(--ink); }
.pt-fr__skhead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pt-fr__sktitle { font-size:var(--fs-card); font-weight:var(--fw-semibold); letter-spacing:-0.01em; }
.pt-fr__ready { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--ink-muted); background:rgba(255,255,255,.55); border-radius:var(--radius-pill); padding:5px 11px; white-space:nowrap; }
.pt-fr__skdesc { font-size:var(--fs-caption); font-weight:var(--fw-light); color:var(--ink-muted); margin-top:5px; line-height:1.6; }

.pt-fr__sklines { display:flex; flex-direction:column; gap:13px; margin-top:20px; }
.pt-fr__skline { display:flex; align-items:center; gap:10px; animation:fr-pulse 2.4s ease-in-out infinite; }
.pt-fr__skline.is-still { animation:none; opacity:.5; }
.pt-fr__skdot { width:10px; height:10px; border-radius:3px; background:rgba(30,29,29,.14); flex:none; }
.pt-fr__skbar { height:10px; border-radius:5px; background:rgba(30,29,29,.08); }
.pt-fr__skbars { display:flex; align-items:flex-end; gap:16px; height:118px; margin-top:20px; }
.pt-fr__skcol { flex:1; border-radius:6px 6px 3px 3px; background:rgba(30,29,29,.08); animation:fr-pulse 2.4s ease-in-out infinite; }
.pt-fr__skcol.is-still { animation:none; opacity:.5; }

/* Complete → hand-off banner (design 1a "done" / 1d "a model failed"). */
.pt-fr__done { display:flex; align-items:center; gap:16px; border-radius:var(--radius-lg); padding:20px 26px; margin-bottom:20px; background:var(--accent); color:#0A2E1E; box-shadow:var(--shadow-flat); animation:fr-rise .55s var(--ease) both; }
.pt-fr__doneico { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.4); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.pt-fr__donetext { flex:1; display:flex; flex-direction:column; gap:2px; }
.pt-fr__donetext b { font-size:16px; font-weight:var(--fw-semibold); letter-spacing:-0.01em; }
.pt-fr__donetext span { font-size:var(--fs-label); font-weight:var(--fw-medium); opacity:.8; line-height:1.55; }

/* "Didn't start" — saved, but no run this week (design 1c). */
.pt-fr__saved { display:flex; align-items:center; gap:24px; border-radius:var(--radius-lg); padding:var(--card-pad); box-shadow:var(--shadow-flat); background:var(--butter); color:var(--ink); margin-bottom:20px; }
.pt-fr__savedico { width:46px; height:46px; border-radius:50%; background:var(--surface); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.pt-fr__savedtext { flex:1; display:flex; flex-direction:column; }
.pt-fr__savedhead { font-size:var(--fs-h1); font-weight:var(--fw-semibold); letter-spacing:-0.02em; line-height:var(--lh-snug); margin-top:6px; }
.pt-fr__savedbody { font-size:var(--fs-body); font-weight:var(--fw-light); color:var(--ink-muted); line-height:1.7; margin-top:6px; max-width:720px; text-wrap:pretty; }
.pt-fr__savedbody b { font-weight:var(--fw-semibold); color:var(--ink); }

@media (max-width:760px) {
  .pt-fr__hero { grid-template-columns:1fr; gap:14px; margin-bottom:14px; }
  .pt-fr__cards { grid-template-columns:1fr; gap:14px; }
  .pt-fr__head, .pt-fr__savedhead { font-size:19px; }
  .pt-fr__saved { gap:16px; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-fr__blink, .pt-fr__seg.is-next, .pt-fr__skline, .pt-fr__skcol { animation:none; }
  .pt-fr__waitnote, .pt-fr__done { animation:none; }
  .pt-fr__skline, .pt-fr__skcol { opacity:.55; }
  .pt-fr__blink { opacity:.6; }
}

/* ── Snapshot cards (design 3dfe4242 "Mention Tracker First Run", done state) ──
   The built-in Snapshot View board's four single-cycle "current status" faces.
   The outer .pt-card + tint supplies the ground + padding + the per-tint --deep
   accent; everything below is the card body. Bar fills reuse [data-grow-x], so
   the board's reveal grows them and reduced-motion already stills them. */
.pt-sc__pill { font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--deep,var(--sky-deep)); background:rgba(255,255,255,.55); border-radius:var(--radius-pill); padding:5px 11px; white-space:nowrap; flex:none; }
.pt-sc__metric { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; font-size:var(--fs-metric); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); line-height:1; margin:14px 0 2px; font-variant-numeric:tabular-nums; }
.pt-sc__unit { font-size:16px; font-weight:var(--fw-semibold); color:var(--ink-muted); margin-left:-4px; }
.pt-sc__cap { font-size:var(--fs-body); font-weight:var(--fw-medium); color:var(--ink-muted); letter-spacing:0; }

.pt-sc__bars { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.pt-sc__bar { display:flex; align-items:center; gap:10px; font-size:var(--fs-label); font-weight:var(--fw-medium); }
.pt-sc__blabel { width:78px; flex:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-sc__blabel--wide { width:128px; }
.pt-sc__track { flex:1; min-width:0; height:10px; border-radius:5px; background:rgba(30,29,29,.08); overflow:hidden; }
.pt-sc__fill { display:block; height:100%; border-radius:5px; transform-origin:left; }
.pt-sc__val { width:40px; flex:none; text-align:right; font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }

.pt-sc__chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.pt-sc__chip { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-label); font-weight:var(--fw-medium); background:var(--surface); border-radius:var(--radius-pill); padding:7px 12px; }
.pt-sc__chip i { width:8px; height:8px; border-radius:3px; flex:none; }
.pt-sc__chip b { font-weight:var(--fw-semibold); }

.pt-sc__foot { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--ink-muted); margin-top:16px; }
.pt-sc__foot--rank { color:var(--deep,var(--blush-deep)); }

@media (max-width:760px) {
  .pt-sc__blabel--wide { width:108px; }
}