/* ============================================================================
   CUMULUS — the Claim internal language
   Source of truth for every internal tool at Claim.
   Synthesized from Sebastian's review of cosmos.so/turner/internal-language
   (inspiration/NORTH-STAR.md is the law; provenance tags #NN cite
   inspiration/manifest.json items = media/ file prefixes) and the internal
   tool atlas (TOOLS.md — KILLSTRIPE, AuraJap, stalkcreators, SendPurple,
   Signals, support console, Event Flow, and the rest of the fleet).
   Light mode only, forever.
   ========================================================================== */

:root {
  color-scheme: light only;

  /* ------------------------------------------------ the world (#06 #22 #26) */
  --canvas: #F7F6F4;          /* warm faint gray page ground                  */
  --canvas-deep: #F1F0ED;     /* wells within the canvas                      */
  --sheet: #FFFFFF;           /* cards and panels on canvas                   */
  --well: #F4F3F1;            /* gray cards on white sheets (#22), inputs     */
  --hairline: rgba(24, 25, 27, .08);
  --hairline-strong: rgba(24, 25, 27, .14);

  /* -------------------------------------------------------- ink ramp (#16) */
  --ink: #191A1C;                     /* near-black headers                   */
  --ink-2: rgba(25, 26, 28, .60);     /* the faded-gray subheader he loves    */
  --ink-3: rgba(25, 26, 28, .40);     /* labels, hints                        */
  --ink-4: rgba(25, 26, 28, .25);     /* ghost text, disabled                 */

  /* --------------------------------- Claim blue: the fun (#24 MANDATORY, #30) */
  --blue: #0051FF;
  --blue-deep: #0041CC;               /* hover / pressed                      */
  --blue-soft: #E8EFFF;               /* soft fills, selected wells           */
  --blue-ghost: rgba(0, 81, 255, .08);
  --blue-glow: rgba(0, 81, 255, .45);
  /* flood mode: whole surfaces go blue; controls are translucent white tiles */
  --flood-tile: rgba(255, 255, 255, .14);
  --flood-tile-hover: rgba(255, 255, 255, .22);
  --flood-tile-active: rgba(255, 255, 255, .30);
  --flood-ink: #FFFFFF;
  --flood-ink-dim: rgba(255, 255, 255, .72);
  --flood-hairline: rgba(255, 255, 255, .18);

  /* ------------------------- icy pastels: semantic color (#03 #09 #14 #15) */
  /* tint = fill, deep = text-on-tint, mid = chart/solid                     */
  --sky-tint: #EAF2FB;    --sky-deep: #38618C;    --sky-mid: #7FA8D9;
  --mint-tint: #E7F5EE;   --mint-deep: #266D50;   --mint-mid: #6FBF9D;
  --butter-tint: #FBF2DF; --butter-deep: #8A6420; --butter-mid: #DDB56A;
  --rose-tint: #FBEAEA;   --rose-deep: #94403F;   --rose-mid: #DE8B8A;
  --lilac-tint: #F1EDFB;  --lilac-deep: #5D4A96;  --lilac-mid: #A292DC;
  --sand-tint: #F4EFE8;   --sand-deep: #6E5B41;   --sand-mid: #C4A87F;

  /* -------------------------------------------- functional (#22 delta chips) */
  --ok: #1FA463;      --ok-tint: #E5F6EC;
  --bad: #D64545;     --bad-tint: #FBEBEB;
  --warn: #C8871E;    --warn-tint: #FBF2DF;

  /* --------------------------------------- cloud washes, sacred + rare (#06 #11 #13) */
  --wash-dawn: linear-gradient(168deg, #FBEFF2 0%, #EFEDFA 46%, #E7F2F8 100%);
  --wash-sky: linear-gradient(165deg, #EAF4FE 0%, #F3F8FE 55%, #E9F0FB 100%);
  --wash-ice: linear-gradient(170deg, #E9FBF6 0%, #EDF4FD 55%, #EFECFB 100%);

  /* --------------------------------------------------------------- shape   */
  --r-panel: 22px;
  --r-card: 16px;
  --r-ctl: 11px;
  --r-chip: 8px;
  --r-pill: 999px;

  /* --------------------------------------------------------------- depth   */
  --shadow-card: 0 1px 2px rgba(25, 26, 28, .04), 0 10px 28px -14px rgba(25, 26, 28, .12);
  --shadow-float: 0 24px 64px -24px rgba(25, 26, 28, .24);
  --shadow-pop: 0 6px 18px -6px rgba(25, 26, 28, .18);
  --shadow-flood: 0 18px 44px -18px var(--blue-glow);

  /* ------------------------------------------------------- type (#03 #12 #16) */
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, "Helvetica Neue", sans-serif;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", sans-serif;
  /* round 3: mono is retired — every numeral runs in the system faces with
     tabular numerals; nothing reads "robotic" */

  /* ------------------------------------------- motion (#20 #28 — mandatory) */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.45, .56, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 360ms;
  --t-grand: 520ms;
  --stagger: 40ms;
}

/* ==========================================================================
   BASE
   ========================================================================== */

* { margin: 0; box-sizing: border-box; }

body {
  font: 400 13.5px/1.5 var(--font);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--blue-soft); }

/* ------------------------------------------------------------- type ramp  */
/* Display voice = SF Pro Rounded (#03 "10 out of 10 font"), never too thick
   (#23): display caps at 700, body at 600.                                  */

.t-hero   { font: 700 27px/1.15 var(--font-display); letter-spacing: -.02em; }
.t-h1     { font: 700 21px/1.2 var(--font-display); letter-spacing: -.015em; }
.t-h2     { font: 650 17px/1.25 var(--font-display); letter-spacing: -.01em; }
.t-head   { font: 600 14.5px/1.3 var(--font); }
.t-body   { font: 400 13.5px/1.5 var(--font); }
.t-label  { font: 500 12px/1.35 var(--font); color: var(--ink-3); }
.t-micro  { font: 500 11px/1.3 var(--font); color: var(--ink-3); }
.t-sub    { color: var(--ink-2); }                  /* the faded subheader #16 */
.t-kicker { font: 600 11px/1 var(--font); letter-spacing: .08em;
            text-transform: uppercase; color: var(--ink-3); }

/* Numerals: always tabular; money gets the rounded display face and a
   superscript currency mark (#19 "the 17.99 and the currency icon").        */
.num { font-variant-numeric: tabular-nums; }
.t-num-hero {
  font: 700 44px/1 var(--font-display);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.t-num-big {
  font: 700 30px/1.05 var(--font-display);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.money sup {
  font-size: .52em; font-weight: 650; vertical-align: super;
  margin-right: .06em; color: var(--ink-2);
}

/* ==========================================================================
   SURFACES
   ========================================================================== */

.card {
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
.card--well {                       /* gray-on-white, the #22 Gotune surface */
  background: var(--well);
  border-color: transparent;
  box-shadow: none;
}
.card--panel { border-radius: var(--r-panel); padding: 22px; }

/* Tinted container card: pastel wrapper + white inner card (#14).           */
.card--tint { border-color: transparent; box-shadow: none; }
.card--tint .card { box-shadow: none; border-color: rgba(24,25,27,.05); }
.tint-sky    { background: var(--sky-tint); }
.tint-mint   { background: var(--mint-tint); }
.tint-butter { background: var(--butter-tint); }
.tint-rose   { background: var(--rose-tint); }
.tint-lilac  { background: var(--lilac-tint); }
.tint-sand   { background: var(--sand-tint); }

/* Flood card: the fun (#24). A whole surface goes Claim blue.               */
.card--flood {
  background: var(--blue);
  border: none;
  color: var(--flood-ink);
  box-shadow: var(--shadow-flood);
}
.card--flood .t-label, .card--flood .t-micro, .card--flood .t-sub { color: var(--flood-ink-dim); }

/* Cloud wash stages — logins, empty states, celebrations ONLY (#06 #11 #13) */
.wash-dawn { background: var(--wash-dawn); }
.wash-sky  { background: var(--wash-sky); }
.wash-ice  { background: var(--wash-ice); }
.cloudscape { position: relative; overflow: hidden; }
.cloudscape > * { position: relative; z-index: 1; }
.cloud {
  position: absolute; z-index: 0; pointer-events: none;
  background: rgba(255, 255, 255, .65);
  filter: blur(26px);
  border-radius: 999px;
  animation: cloud-drift 26s var(--ease) infinite alternate;
}
.cloud--far { background: rgba(255, 255, 255, .4); filter: blur(34px); animation-duration: 38s; }
@keyframes cloud-drift {
  from { transform: translateX(-3%) translateY(0); }
  to   { transform: translateX(3%) translateY(-2%); }
}

/* ==========================================================================
   SHELL — topbar, sidebar, tabs (KILLSTRIPE, Event Flow, SMA, intake-pro)
   ========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 20px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: 9px;
  font: 700 15px/1 var(--font-display); letter-spacing: -.01em; }
.brand .cloudmark { width: 22px; height: 22px; }

/* Light sidebar (#14 #32): sections, icon rows, profile block.              */
.side {
  width: 224px; flex-shrink: 0; padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.side-section { margin: 14px 10px 6px; }
.side-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-ctl);
  font: 500 13.5px/1 var(--font); color: var(--ink-2);
  cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.side-row:hover { background: rgba(24, 25, 27, .05); color: var(--ink); }
.side-row.on { background: var(--sheet); color: var(--ink); font-weight: 600;
  box-shadow: var(--shadow-card); }
.side-row.on svg { color: var(--blue); }
.side-row svg { color: var(--ink-3); }
.side-count {
  margin-left: auto; font: 600 11px/1 var(--font); font-variant-numeric: tabular-nums;
  background: var(--blue); color: #fff; border-radius: var(--r-pill); padding: 3px 7px;
}

/* Blue flood rail (#24): the fun as navigation.                             */
.side--flood { background: var(--blue); border-radius: var(--r-panel);
  padding: 14px 10px; box-shadow: var(--shadow-flood); }
.side--flood .side-section { color: var(--flood-ink-dim); }
.side--flood .side-row { color: var(--flood-ink-dim); }
.side--flood .side-row:hover { background: var(--flood-tile); color: var(--flood-ink); }
.side--flood .side-row.on { background: var(--flood-tile-active); color: var(--flood-ink);
  box-shadow: none; }
.side--flood .side-row.on svg, .side--flood .side-row svg { color: var(--flood-ink); }
.side--flood .side-count { background: var(--flood-tile-active); }
.railtile {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--flood-tile); color: var(--flood-ink); cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--spring);
}
.railtile:hover { background: var(--flood-tile-hover); transform: translateY(-1px); }
.railtile.on { background: var(--flood-tile-active); }

/* Tab strip with sliding underline (KILLSTRIPE home/experiments).           */
.tabs { display: flex; gap: 4px; }
.tab {
  position: relative; padding: 8px 12px; border-radius: var(--r-ctl);
  font: 500 13.5px/1 var(--font); color: var(--ink-2); cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tab:hover { background: rgba(24, 25, 27, .05); color: var(--ink); }
.tab.on { color: var(--ink); font-weight: 600; }
.tab.on::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--blue);
}

/* Segmented pill (#05 All/Inbox, #32 Day/Week/Month, #19).                  */
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--well); border-radius: var(--r-pill);
}
.seg button {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 13px; border-radius: var(--r-pill);
  font: 600 12.5px/1 var(--font); color: var(--ink-2);
  transition: all var(--t-fast) var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-pop); }
.seg--flood { background: var(--flood-tile); }
.seg--flood button { color: var(--flood-ink-dim); }
.seg--flood button.on { background: rgba(255,255,255,.92); color: var(--blue); }

/* ==========================================================================
   STAT LANGUAGE (#32 MANDATORY, #22, #26) — the fleet's most common organ
   ========================================================================== */

.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.stat-label { font: 500 12px/1.3 var(--font); color: var(--ink-2); }
.stat-value { font: 700 27px/1.05 var(--font-display); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.stat-sub { font: 500 11.5px/1.3 var(--font); color: var(--ink-3); }

/* Round-2 icon law: a dark glyph on a light same-hue chip is banned (it
   reads AI-generated). Icons are plain ink strokes, or a solid deep color
   with a white glyph. Stat cards carry NO icon: label, value, delta only.   */

/* delta chip: arrow + % + period (#32 "+147% VS PREV. 28 DAYS", #22)        */
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 11.5px/1 var(--font); font-variant-numeric: tabular-nums;
  border-radius: var(--r-pill); padding: 4px 8px;
}
.delta.up   { color: var(--ok); background: var(--ok-tint); }
.delta.down { color: var(--bad); background: var(--bad-tint); }
.delta.flat { color: var(--ink-2); background: var(--well); }
.delta-ctx { font: 500 10.5px/1 var(--font); color: var(--ink-3);
  letter-spacing: .02em; text-transform: uppercase; }

/* the waves — Cumulus's live/syncing/thinking signal (round 2: the glowing
   dot is banned everywhere; the drifting halftone waves from #28 replace it.
   Round 3: the waves are ALWAYS Claim blue — never green — white on flood
   surfaces. Small = live/syncing, large = agent thinking.)                  */
.waves { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); }
.waves i { width: 4px; height: 4px; border-radius: 999px; background: currentColor;
  animation: wave-drift 1.6s var(--ease) infinite; }
.waves i:nth-child(2) { animation-delay: .12s; }
.waves i:nth-child(3) { animation-delay: .24s; }
.waves i:nth-child(4) { animation-delay: .36s; }
.waves i:nth-child(5) { animation-delay: .48s; }
.waves--lg { gap: 5px; }
.waves--lg i { width: 6px; height: 6px; }
@keyframes wave-drift {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.fresh { display: inline-flex; align-items: center; gap: 7px;
  font: 500 11.5px/1 var(--font); color: var(--ink-3); }

/* the viral marker — round 4 final call: no emoji at all (fire and lightning
   both out; the emoji made the spacing read weird). The rose tint on a
   number-only pill carries "viral" by itself.                               */

/* honesty note — reality-checks, methodology, confidence caveats
   (stalkcreators, scorecards, SMA footnotes). Quiet but first-class.
   Round 2: no colored edge bar, ever. A plain quiet well.                   */
.note {
  font: 400 12px/1.5 var(--font); color: var(--ink-2);
  background: var(--well); border-radius: 10px; padding: 9px 13px;
}

/* ==========================================================================
   TAGS, PILLS, CHIPS (#01 #03 #14 #15 — colored tags; never word-status gray)
   ========================================================================== */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11.5px/1 var(--font);
  border-radius: var(--r-chip); padding: 5px 8px;
}
.tag.sky    { background: var(--sky-tint);    color: var(--sky-deep); }
.tag.mint   { background: var(--mint-tint);   color: var(--mint-deep); }
.tag.butter { background: var(--butter-tint); color: var(--butter-deep); }
.tag.rose   { background: var(--rose-tint);   color: var(--rose-deep); }
.tag.lilac  { background: var(--lilac-tint);  color: var(--lilac-deep); }
.tag.sand   { background: var(--sand-tint);   color: var(--sand-deep); }
.tag.blue   { background: var(--blue-soft);   color: var(--blue); }

/* stage pill — funnels, queues (stalkcreators stages, Signals statuses).
   Round 2: NO dot inside pills, ever. The tint alone carries the state.     */
.pill {
  display: inline-flex; align-items: center;
  font: 600 12px/1 var(--font);
  border-radius: var(--r-pill); padding: 6px 12px;
  background: var(--well); color: var(--ink-2);
}
.pill.blue { background: var(--blue-soft); color: var(--blue); }
.pill.mint { background: var(--mint-tint); color: var(--mint-deep); }
.pill.butter { background: var(--butter-tint); color: var(--butter-deep); }
.pill.rose { background: var(--rose-tint); color: var(--rose-deep); }

/* score pill (Signals 0-100)                                                */
.score-pill {
  font: 700 12.5px/1 var(--font-display); font-variant-numeric: tabular-nums;
  border-radius: var(--r-pill); padding: 6px 10px;
  background: var(--blue); color: #fff;
}
.score-pill.mid { background: var(--butter-mid); color: #fff; }
.score-pill.low { background: var(--well); color: var(--ink-2); }

/* filter chip with count (stalkcreators sources, support queue tabs)        */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12.5px/1 var(--font); color: var(--ink-2);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--sheet); padding: 7px 12px; cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--hairline-strong); color: var(--ink); }
/* round 3: the selected chip is Claim blue (blue = active), never ink black */
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip.on .chip-n { color: rgba(255,255,255,.75); }
.chip-n { font: 600 11px/1 var(--font); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* money chip (#22 mint cells) — dollars only, optically centered            */
.money-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font); font-variant-numeric: tabular-nums;
  background: var(--mint-tint); color: var(--mint-deep);
  border-radius: var(--r-chip); padding: 3px 8px 4px;
}
.money-chip.neg { background: var(--rose-tint); color: var(--rose-deep); }

/* ==========================================================================
   PEOPLE (#01 avatar+name+subtitle, #22 memoji circles)
   ========================================================================== */

.avatar {
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font-display); color: #fff;
  background: var(--blue); overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--soft.sky    { background: var(--sky-tint);    color: var(--sky-deep); }
.avatar--soft.mint   { background: var(--mint-tint);   color: var(--mint-deep); }
.avatar--soft.butter { background: var(--butter-tint); color: var(--butter-deep); }
.avatar--soft.rose   { background: var(--rose-tint);   color: var(--rose-deep); }
.avatar--soft.lilac  { background: var(--lilac-tint);  color: var(--lilac-deep); }
.avatar--lg { width: 40px; height: 40px; font-size: 15px; }
.persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
.persona b { display: block; font: 600 13.5px/1.25 var(--font); }
.persona span { display: block; font: 400 12px/1.3 var(--font); color: var(--ink-2); }

/* ==========================================================================
   CONTROLS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; cursor: pointer;
  font: 600 13px/1 var(--font);
  border-radius: var(--r-pill); padding: 10px 18px;
  background: var(--blue); color: #fff;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--spring),
              box-shadow var(--t-fast) var(--ease);
}
.btn:hover { background: var(--blue-deep); transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px var(--blue-glow); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--ink { background: var(--ink); }
.btn--ink:hover { background: #2C2D30; box-shadow: var(--shadow-pop); }
.btn--ghost { background: transparent; color: var(--ink-2);
  border: 1px solid var(--hairline); }
.btn--ghost:hover { background: var(--well); color: var(--ink); box-shadow: none; }
.btn--danger { background: var(--bad); }
.btn--danger:hover { background: #B93A3A; box-shadow: 0 8px 20px -8px rgba(214,69,69,.4); }
.btn--tile { background: var(--flood-tile); }
.btn--tile:hover { background: var(--flood-tile-hover); box-shadow: none; }
.btn--sm { padding: 7px 13px; font-size: 12px; }

.icon-btn {
  width: 32px; height: 32px; border: 0; border-radius: var(--r-ctl);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--well); color: var(--ink); }

.input {
  width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-ctl);
  background: var(--sheet); color: var(--ink);
  font: 400 13.5px/1.4 var(--font); padding: 10px 12px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--ink-4); }
.input:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-ghost); }
.input--well { background: var(--well); border-color: transparent; }
.input--well:focus { background: var(--sheet); border-color: var(--blue); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font: 500 12px/1 var(--font); color: var(--ink-2); }

/* flood-mode money: the currency mark goes white on blue (round 2)          */
.card--flood .money sup { color: rgba(255, 255, 255, .85); }

/* command bar + action chips (#05 "phenomenal", #04 Ask anything)           */
.cmdbar {
  background: var(--sheet); border: 1px solid var(--hairline);
  border-radius: 16px; box-shadow: var(--shadow-card);
  padding: 12px 14px;
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-fast) var(--ease);
}
.cmdbar:focus-within { border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-ghost), var(--shadow-card); }
.cmdbar input { width: 100%; border: 0; outline: none; background: transparent;
  font: 400 15px/1.4 var(--font); color: var(--ink); }
.cmdbar input::placeholder { color: var(--ink-4); }
.action-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.action-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12px/1 var(--font); color: var(--ink);
  background: var(--well); border: 0; border-radius: var(--r-pill);
  padding: 7px 12px; cursor: pointer;
  transition: all var(--t-fast) var(--spring);
}
.action-chip:hover { background: var(--blue-soft); transform: translateY(-1px); }
.action-chip svg { width: 13px; height: 13px; color: var(--ink-2); flex-shrink: 0; }
.action-chip:hover svg { color: var(--blue); }

/* iOS toggle (#20 frames f001-f008)                                         */
.toggle { position: relative; width: 42px; height: 26px; border: 0;
  border-radius: 999px; background: rgba(24,25,27,.16); cursor: pointer;
  transition: background var(--t-med) var(--ease); }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--t-med) var(--spring); }
.toggle.on { background: var(--blue); }
.toggle.on::after { transform: translateX(16px); }

/* Checks: round 3 retired the circle-check chip everywhere (toasts,
   celebrations included). Success is words plus a plain ink check stroke;
   angular green ticks stay banned (#15 #17).                                */

/* weekday / repeat chips (#18 #20)                                          */
.daychips { display: inline-flex; gap: 4px; }
.daychip { width: 30px; height: 30px; border-radius: 9px; border: 0;
  background: var(--well); color: var(--ink-2);
  font: 600 11px/1 var(--font); cursor: pointer;
  transition: all var(--t-fast) var(--spring); }
.daychip:hover { background: var(--canvas-deep); }
.daychip.on { background: var(--ink); color: #fff; transform: scale(1.06); }

/* ==========================================================================
   TABLES — iOS-list DNA (#22), fleet-wide
   ========================================================================== */

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font: 500 11.5px/1.3 var(--font); color: var(--ink-3);
  padding: 8px 12px; border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.table th.sort { color: var(--ink); cursor: pointer; }
.table th.sort::after { content: " ↓"; color: var(--blue); font-weight: 600; }
.table td {
  padding: 12px; border-bottom: 1px solid var(--hairline);
  font: 400 13px/1.4 var(--font); vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast) var(--ease); }
.table tbody tr:hover { background: rgba(24, 25, 27, .025); }
.td-num { font-variant-numeric: tabular-nums; }
.td-money { font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; }
.td-quiet { color: var(--ink-2); }
.row-chev { color: var(--ink-4); }
tr.row-expand > td { background: var(--well); }

/* rank cell for leaderboards (attribution, scorecards, SMA top creators)    */
.rank { font: 700 12px/1 var(--font-display); color: var(--ink-3);
  font-variant-numeric: tabular-nums; }
.rank.top { color: var(--blue); }

/* bulk action bar (intake-pro, Signals, AuraJap orders)                     */
.bulkbar {
  position: sticky; bottom: 16px; z-index: 30;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(37, 38, 41, .88); color: #fff;
  backdrop-filter: blur(12px) saturate(1.2);
  border-radius: var(--r-pill); padding: 10px 12px 10px 18px;
  box-shadow: var(--shadow-float);
  animation: rise-in var(--t-med) var(--spring) both;
}
.bulkbar b { font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; }

/* heat cells (#30 blue-opacity grid; KILLSTRIPE heat tables; onsite months) */
.heat-cell { height: 16px; border-radius: 5px; background: var(--blue);
  opacity: calc(.05 + var(--heat, 0) * .95); }

/* ==========================================================================
   FUNNEL + QUEUE (stalkcreators, SMA, Signals review, support)
   ========================================================================== */

/* Round 2: one joined panel, equal centered segments, conversion chips
   sitting ON the dividers. No floating cards, no dead space.                */
.funnel {
  display: flex; align-items: stretch;
  background: var(--sheet); border: 1px solid var(--hairline);
  border-radius: 16px; box-shadow: var(--shadow-card);
}
.funnel-cell {
  position: relative; flex: 1; min-width: 0; cursor: pointer;
  text-align: center; padding: 16px 10px 15px;
  border-right: 1px solid var(--hairline);
  transition: background var(--t-fast) var(--ease);
}
.funnel-cell:first-child { border-radius: 15px 0 0 15px; }
.funnel-cell:last-child { border-right: 0; border-radius: 0 15px 15px 0; }
.funnel-cell:hover { background: rgba(24, 25, 27, .025); }
.funnel-cell.on { background: var(--blue-soft); }
.funnel-cell .fc-n { font: 700 24px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.funnel-cell .fc-label { font: 500 11.5px/1.3 var(--font); color: var(--ink-2); margin-top: 5px; }
.funnel-cell .fc-sub { font: 500 10.5px/1.3 var(--font); color: var(--ink-3); margin-top: 2px; }
.fc-conv {
  position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); z-index: 2;
  font: 600 10.5px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--blue); background: var(--blue-soft);
  border: 2px solid var(--sheet); border-radius: var(--r-pill); padding: 4px 7px;
}
.funnel-cell:last-child .fc-conv { display: none; }

/* score ring (Signals swipe deck) — conic, dashed variant for low confidence */
.ring { position: relative; width: 62px; height: 62px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--blue) calc(var(--score, 70) * 1%), var(--well) 0); }
.ring::before { content: ""; position: absolute; inset: 6px; border-radius: 999px;
  background: var(--sheet); }
.ring b { position: relative; font: 700 18px/1 var(--font-display);
  font-variant-numeric: tabular-nums; }

/* subscore equalizer bars (Signals: TAM/Brand/Viral/Recency)                */
.eq { display: flex; gap: 6px; align-items: flex-end; height: 44px; }
.eq i { width: 14px; border-radius: 5px 5px 2px 2px; background: var(--blue);
  opacity: .9; height: calc(var(--v, .5) * 100%);
  transition: height var(--t-slow) var(--spring); }
.eq i.dim { background: var(--sky-mid); }

/* ==========================================================================
   CHARTS — custom, dead simple (#22 #26 #30 #32). CSS supplies the skin;
   marks are inline SVG per tool. Conventions: 2px smooth line, soft fade
   fill, dashed avg, ghost gridlines, thin flat-top bars. No chunky
   lollipop bars, ever (#26).
   ========================================================================== */

.chart-line { stroke: var(--blue); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
.chart-line--soft { stroke: var(--sky-mid); }
.chart-line--mint { stroke: var(--mint-mid); }
.chart-fill { fill: url(#fadeBlue); }
.chart-grid { stroke: rgba(24, 25, 27, .06); stroke-width: 1; }
.chart-avg { stroke: var(--butter-mid); stroke-width: 1.5; stroke-dasharray: 4 5;
  stroke-linecap: round; }
.chart-marker { stroke: var(--lilac-mid); stroke-width: 1.5; stroke-dasharray: 2 4; }
.chart-axis { font: 500 10px var(--font); fill: var(--ink-3); }
.chart-dot { fill: var(--blue); stroke: #fff; stroke-width: 2; }
.bar { fill: var(--blue); rx: 3; }
.bar--dim { fill: var(--sky-tint); }
.bar--mint { fill: var(--mint-mid); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px;
  font: 500 11.5px/1 var(--font); color: var(--ink-2); }
.legend i { width: 9px; height: 9px; border-radius: 3px; }

/* proportional split bar (KILLSTRIPE new/trial/recurring)                   */
.split { display: flex; height: 44px; border-radius: var(--r-pill);
  overflow: hidden; }
.split > div { display: flex; align-items: center; justify-content: center;
  font: 650 13px/1 var(--font-display); font-variant-numeric: tabular-nums;
  min-width: 0; white-space: nowrap; padding: 0 10px;
  transition: flex-grow var(--t-grand) var(--ease); }
.split .s-a { background: var(--blue); color: #fff; }
.split .s-b { background: var(--sky-mid); color: #fff; }
.split .s-c { background: var(--blue-soft); color: var(--blue); }

/* thin progress / budget bars (AuraJap engine room, scrapers)               */
.meter { height: 7px; border-radius: 999px; background: var(--well); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 999px;
  background: var(--blue); width: calc(var(--v, .5) * 100%);
  transition: width var(--t-grand) var(--ease); }
.meter.warn > i { background: var(--butter-mid); }
.meter.bad > i { background: var(--rose-mid); }

/* sparkline inside flood cards (#24 white line on blue)                     */
.card--flood .chart-line { stroke: #fff; }
.card--flood .chart-grid { stroke: rgba(255,255,255,.14); }
.card--flood .chart-axis { fill: var(--flood-ink-dim); }

/* ==========================================================================
   OPS HEALTH (AuraJap engine room, Event Flow health, SMA sync cards)
   ========================================================================== */

.status-chip { display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1 var(--font); border-radius: var(--r-pill); padding: 5px 10px; }
/* Round 2: no dots inside status chips either — tint alone carries state.   */
.status-chip .dot { display: none; }
.status-chip.ok   { background: var(--ok-tint); color: var(--ok); }
.status-chip.warn { background: var(--warn-tint); color: var(--warn); }
.status-chip.bad  { background: var(--bad-tint); color: var(--bad); }
.status-chip.idle { background: var(--well); color: var(--ink-2); }

.feed { display: flex; flex-direction: column; }
.feed-row { display: flex; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
  font: 400 12.5px/1.4 var(--font); }
.feed-row:last-child { border-bottom: 0; }
/* round 3: no mono numerals anywhere — timestamps stay in the system face   */
.feed-time { font: 500 11px/1 var(--font); font-variant-numeric: tabular-nums;
  color: var(--ink-3); flex-shrink: 0; }

/* ==========================================================================
   CHAT + AI (SendPurple, support console, KILLSTRIPE Ask AI, #02 rule, #28)
   ========================================================================== */

.thread { display: flex; flex-direction: column; gap: 6px; }
.bubble {
  max-width: 78%; width: fit-content;
  background: var(--well); color: var(--ink);
  border-radius: 16px; border-bottom-left-radius: 6px;
  padding: 9px 13px; font: 400 13.5px/1.45 var(--font);
  animation: bubble-in var(--t-med) var(--spring) both;
}
.bubble--out { align-self: flex-end; background: var(--blue); color: #fff;
  border-radius: 16px; border-bottom-right-radius: 6px; }
.bubble--draft { border: 1.5px dashed var(--hairline-strong); background: var(--sheet); }
.receipt { align-self: flex-end; font: 500 10.5px/1 var(--font); color: var(--ink-3);
  padding: 2px 4px 0; }
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* the AI presence: the drifting halftone waves ALONE (#28; round 2 killed
   the glossy orb as vibe-codey — the waves are the AI's face). Use
   .waves.waves--lg while an agent works; see the stat section for the
   shared .waves definition.                                                 */

/* ==========================================================================
   FEEDBACK — toasts, banners, modals, danger flows
   ========================================================================== */

/* round 3 rework: a white pill with a plain ink check stroke. The dark bar
   with a green circle check is banned.                                      */
.toast {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill); padding: 11px 18px 11px 15px;
  font: 500 13px/1.3 var(--font);
  box-shadow: var(--shadow-float);
  animation: rise-in var(--t-med) var(--spring) both;
}
.toast > svg { color: var(--ink-2); flex-shrink: 0; }

.banner { display: flex; align-items: center; gap: 10px;
  border-radius: 12px; padding: 10px 14px;
  font: 500 12.5px/1.4 var(--font); }
.banner.ok   { background: var(--ok-tint); color: var(--ok); }
.banner.warn { background: var(--warn-tint); color: var(--warn); }
.banner.bad  { background: var(--bad-tint); color: var(--bad); }
.banner.info { background: var(--blue-soft); color: var(--blue); }

.scrim { position: fixed; inset: 0; background: rgba(25, 26, 28, .32);
  backdrop-filter: blur(3px); z-index: 90;
  animation: fade-in var(--t-med) var(--ease) both; }
.modal {
  background: var(--sheet); border-radius: var(--r-panel);
  box-shadow: var(--shadow-float); padding: 22px;
  animation: pop-in var(--t-med) var(--spring) both;
}

/* slide-to-confirm for the irreversible (#20; replaces typed-REFUND)        */
.slide-confirm { position: relative; height: 44px; border-radius: 999px;
  background: var(--well); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.slide-confirm span { font: 600 12.5px/1 var(--font); color: var(--ink-3); }
.slide-confirm .knob {
  position: absolute; left: 3px; top: 3px; width: 38px; height: 38px;
  border-radius: 999px; background: var(--bad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px -2px rgba(214,69,69,.5); cursor: grab; }
.slide-confirm.armed .knob { background: var(--ok); left: calc(100% - 41px);
  transition: left var(--t-slow) var(--spring), background var(--t-med) var(--ease); }

/* skeleton shimmer                                                          */
.skeleton { border-radius: 8px; background:
  linear-gradient(90deg, var(--well) 25%, var(--canvas-deep) 45%, var(--well) 65%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }

/* empty state — quiet, roomy, cloud-eligible (#06)                          */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty b { font: 650 15px/1.3 var(--font-display); color: var(--ink-2); }

/* ==========================================================================
   THE GATE — every tool's front door (#06; fleet-wide passcode screens)
   ========================================================================== */

.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; }
.gate-card {
  width: 372px; max-width: 100%;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 24px; padding: 34px 30px;
  box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  animation: pop-in var(--t-grand) var(--spring) both;
}
.gate-hello { font: 500 14px/1.3 var(--font-display); color: var(--ink-2); }
.gate-title { font: 700 19px/1.2 var(--font-display); letter-spacing: -.01em; }

/* ==========================================================================
   MOTION UTILITIES (#20 #28 — "animations everywhere")
   ========================================================================== */

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes count-in {
  from { opacity: 0; transform: translateY(40%); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes confetti-pop {
  0% { transform: translateY(0) scale(0); opacity: 1; }
  100% { transform: translateY(-46px) scale(1) rotate(200deg); opacity: 0; }
}

/* celebration confetti — round 3: no check glyph; the confetti IS the
   celebration, soft pieces spread across the whole card.                    */
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; width: 6px; height: 6px; border-radius: 2px;
  background: var(--blue); animation: confetti-pop 1.25s var(--ease) infinite; }
.confetti i:nth-child(2n) { border-radius: 999px; width: 5px; height: 5px; }
.confetti i:nth-child(1)  { left: 6%;  top: 58%; animation-delay: 0s; }
.confetti i:nth-child(2)  { left: 16%; top: 30%; animation-delay: .5s;  background: var(--mint-mid); }
.confetti i:nth-child(3)  { left: 26%; top: 64%; animation-delay: .15s; background: var(--butter-mid); }
.confetti i:nth-child(4)  { left: 36%; top: 26%; animation-delay: .65s; background: var(--rose-mid); }
.confetti i:nth-child(5)  { left: 47%; top: 60%; animation-delay: .3s;  background: var(--lilac-mid); }
.confetti i:nth-child(6)  { left: 57%; top: 28%; animation-delay: .8s;  background: var(--sky-mid); }
.confetti i:nth-child(7)  { left: 67%; top: 62%; animation-delay: .1s;  background: var(--mint-mid); }
.confetti i:nth-child(8)  { left: 77%; top: 34%; animation-delay: .55s; }
.confetti i:nth-child(9)  { left: 87%; top: 58%; animation-delay: .4s;  background: var(--rose-mid); }
.confetti i:nth-child(10) { left: 94%; top: 30%; animation-delay: .7s;  background: var(--butter-mid); }

.anim-rise { animation: rise-in var(--t-med) var(--spring) both; }
.anim-pop { animation: pop-in var(--t-med) var(--spring) both; }
.anim-count { display: inline-block; animation: count-in var(--t-slow) var(--ease) both; }
.cascade > * { animation: rise-in var(--t-med) var(--spring) both; }
.cascade > *:nth-child(1) { animation-delay: calc(var(--stagger) * 0); }
.cascade > *:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.cascade > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.cascade > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.cascade > *:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.cascade > *:nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.cascade > *:nth-child(7) { animation-delay: calc(var(--stagger) * 6); }
.cascade > *:nth-child(8) { animation-delay: calc(var(--stagger) * 7); }
.chart-draw { stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: draw 1.1s var(--ease) .15s forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}