/* ============================================================
   CT Partner Portal — components
   All colors/typography via tokens.css variables.
   ============================================================ */

/* ============================================================
   Partnership colour library — named palette from the Figma
   "Colours" page. Reusable site-wide; reference these instead of
   raw hex. Added here (not tokens.css) per build rules.
   Groups: Tone (neutral ramp) + Primary/Blue/Gold/Teal/Warning,
   each with a Main plus Dark (100→800) and Light (100→800) ramps.
   ============================================================ */
:root {
  /* Tone — neutral ramp */
  --tone-1000:#111418; --tone-900:#282B2E; --tone-800:#404245; --tone-700:#57595B;
  --tone-600:#6E7071;  --tone-500:#868788; --tone-400:#9D9E9E; --tone-300:#B4B5B4;
  --tone-200:#CBCCCA;  --tone-100:#E3E3E1; --tone-0:#FAFAF7;

  /* Primary — burnt orange */
  --primary-main:#E8540C;
  --primary-dark-800:#291B17; --primary-dark-700:#412215; --primary-dark-600:#592914;
  --primary-dark-500:#713013; --primary-dark-400:#883811; --primary-dark-300:#A03F10;
  --primary-dark-200:#B8460F; --primary-dark-100:#D04D0D;
  --primary-light-800:#EA6626; --primary-light-700:#EC7940; --primary-light-600:#EE8B5A;
  --primary-light-500:#F09E74; --primary-light-400:#F2B08F; --primary-light-300:#F4C3A9;
  --primary-light-200:#F6D5C3; --primary-light-100:#F8E8DD; --primary-light-50:#F8F1EB;

  /* Blue */
  --blue-main:#3A6EA5;
  --blue-dark-800:#161E28; --blue-dark-700:#1A2837; --blue-dark-600:#1F3247;
  --blue-dark-500:#1F3247; --blue-dark-400:#284666; --blue-dark-300:#2C5076;
  --blue-dark-200:#315A86; --blue-dark-100:#356495;
  --blue-light-800:#4F7EAE; --blue-light-700:#658DB7; --blue-light-600:#658DB7;
  --blue-light-500:#8FACC9; --blue-light-400:#A5BCD3; --blue-light-300:#BACBDC;
  --blue-light-200:#CFDBE5; --blue-light-100:#E5EAEE;

  /* Gold */
  --gold-main:#B07C10;
  --gold-dark-800:#232017; --gold-dark-700:#342B16; --gold-dark-600:#463715;
  --gold-dark-500:#584214; --gold-dark-400:#694E14; --gold-dark-300:#7B5913;
  --gold-dark-200:#8D6512; --gold-dark-100:#9E7011;
  --gold-light-800:#B88A2A; --gold-light-700:#C09843; --gold-light-600:#C9A65D;
  --gold-light-500:#D1B477; --gold-light-400:#D9C290; --gold-light-300:#E1D0AA;
  --gold-light-200:#EADEC4; --gold-light-100:#F2ECDD;

  /* Teal */
  --teal-main:#1D7A96;
  --teal-dark-800:#121F26; --teal-dark-700:#142B34; --teal-dark-600:#153642;
  --teal-dark-500:#164150; --teal-dark-400:#184D5E; --teal-dark-300:#19586C;
  --teal-dark-200:#1A637A; --teal-dark-100:#1C6F88;
  --teal-light-800:#3688A1; --teal-light-700:#4E96AC; --teal-light-600:#67A5B6;
  --teal-light-500:#7FB3C1; --teal-light-400:#98C1CC; --teal-light-300:#B0CFD7;
  --teal-light-200:#C9DEE1; --teal-light-100:#E1ECEC;

  /* Warning — red */
  --warning-main:#B02010;
  --warning-dark-800:#231517; --warning-dark-700:#341716; --warning-dark-600:#461815;
  --warning-dark-500:#581914; --warning-dark-400:#691B14; --warning-dark-300:#7B1C13;
  --warning-dark-200:#8D1D12; --warning-dark-100:#9E1F11;
  --warning-light-800:#B8382A; --warning-light-700:#C05043; --warning-light-600:#C9695D;
  --warning-light-500:#D18177; --warning-light-400:#D99990; --warning-light-300:#E1B1AA;
  --warning-light-200:#EACAC4; --warning-light-100:#F2E2DD;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  /* Sticky footer: body is a flex column at least as tall as the viewport, so the
     main content (.shell, flex:1) grows to fill any spare height and pins the
     footer to the bottom of the window. When content is taller than the viewport
     there's no spare height to absorb, so the footer flows below in normal scroll. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--primary-main); outline-offset: 2px; border-radius: 4px;
}
.topnav :focus-visible, .hero :focus-visible { outline-color: var(--primary-main); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--navy); color: var(--on-dark); font-weight: 700; font-size: var(--text-md);
  padding: 10px 16px; border-radius: 0 0 10px 10px; text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: 0; }

/* ---------- top navigation ---------- */
.topnav {
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-bottom: var(--nav-line);
  position: sticky; top: 0; z-index: 40;
}
.topnav__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; height: 60px;
}
.topnav__logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.2px;
  color: var(--nav-fg); text-decoration: none; margin-right: 8px; white-space: nowrap;
}
.topnav__logo svg { display: block; }
.topnav__links { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; }
.topnav__links a {
  color: var(--nav-fg-soft); text-decoration: none; font-size: var(--text-ui);
  padding: 7px 12px; border-radius: var(--radius-sm); white-space: nowrap;
  transition: color .15s, background .15s;
}
.topnav__links a:hover { color: var(--nav-fg); background: color-mix(in srgb, currentColor 9%, transparent); }
.topnav__links a[aria-current="page"] {
  color: var(--nav-fg); background: var(--nav-active-bg);
  box-shadow: inset 0 -2px 0 var(--nav-active-line);
}
.topnav__right { display: flex; align-items: center; gap: 16px; }
.iconbtn {
  /* 18px icon + 13px padding = 44px touch target at all sizes */
  position: relative; background: none; border: 0; color: var(--nav-fg-soft);
  padding: 13px; border-radius: 50%; display: flex;
}
.iconbtn:hover { color: var(--nav-fg); background: color-mix(in srgb, currentColor 9%, transparent); }
.iconbtn .dot {
  position: absolute; top: 10px; right: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--primary-main); border: 2px solid var(--nav-bg);
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-main), var(--primary-main));
  color: #fff; font-weight: 700; font-size: var(--text-md);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; letter-spacing: 0.5px;
}

/* ---------- page shell ---------- */
/* flex:1 lets the content absorb spare viewport height and push the footer down
   (see body sticky-footer note). margin-right:0 (not auto) keeps flex `stretch`
   active so the shell still fills its width up to max-width, exactly as before. */
.shell { max-width: 1280px; margin: 0; padding: 32px 24px 24px; flex: 1 0 auto; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 24px; flex-wrap: wrap; }
.page-head h1 { font-size: var(--text-2xl); line-height: 1; }
.page-head .sub { color: var(--ink-soft); font-size: var(--text-ui); }
/* page-head top-right meta: date + currency + /// marks — canonical, shared by pipeline/trades/insights */
.page-meta {
  text-align: right; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  line-height: 1.5; display: flex; align-items: baseline; gap: 14px;
}
.page-meta b { font-weight: 600; }
.page-meta .marks { color: var(--primary-main); font-weight: 700; letter-spacing: .08em; }
.kicker {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary-main); margin-bottom: 6px;
}
/* canonical "///" eyebrow marks — pipeline kicker is the single source of truth for every page/mini header */
.kicker .slash { color: var(--primary-main); font-weight: 700; letter-spacing: 0.04em; }
.hero .kicker { color: var(--hero-kicker); }
.hero .kicker .slash { color: var(--hero-kicker); }

/* ---------- cards ---------- */
.card {
  background: var(--card-bg); border: var(--card-border);
  border-top: var(--card-rule);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 24px var(--card-pad-x, 24px); position: relative;
}
.card h2 { font-size: var(--text-lg); margin-bottom: 4px; }
.card .card-sub { color: var(--ink-soft); font-size: var(--text-md); margin: 0 0 16px; }
.card-row { display: grid; gap: 16px; margin-bottom: 16px; }
.card-row--main { grid-template-columns: 1.35fr 1fr; }   /* main + sidebar */
.card-row--half { grid-template-columns: 1fr 1fr; }
.count { color: var(--ink-faint); font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; }
.footnote { font-size: var(--text-md); color: var(--ink-faint); margin: 12px 0 0; }
.topnav__suffix { opacity: .55; font-family: var(--font-body); font-size: var(--text-sm); }

/* ---------- hero (navy earnings panel) ---------- */
.hero {
  background: var(--hero-bg); color: var(--hero-fg);
  border-radius: var(--radius); box-shadow: var(--hero-shadow, none);
  border-top: var(--hero-rule); border-bottom: var(--hero-rule);
  padding: var(--hero-pad, 32px 0 28px); margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--hero-hairline); opacity: 0.7;
}
.hero__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: end; }
.hero .kicker { color: var(--hero-kicker); }
.hero__figure {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-display); font-size: var(--text-hero); font-weight: 600;
  line-height: 1.0; letter-spacing: -2px; font-variant-numeric: tabular-nums;
}
.hero__delta { color: var(--delta-fg, var(--money)); background: var(--delta-bg, rgba(255,255,255,0.92)); font-weight: 700; font-size: var(--text-ui);
  font-family: var(--font-body); letter-spacing: 0; line-height: 1.4;
  padding: var(--delta-pad, 3px 9px); border-radius: 99px; white-space: nowrap; align-self: center; }
.hero__meta { color: var(--hero-fg-soft); font-size: var(--text-ui); margin-top: 10px; }
.hero__meta strong { color: var(--hero-fg); font-weight: 700; }
.hero__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-cell {
  background: var(--hero-cell-bg); border: 1px solid var(--hero-cell-line);
  border-radius: var(--radius-sm); padding: 12px 16px;
}
.hero-cell .lbl { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--hero-fg-faint); margin-bottom: 4px; }
.hero-cell .val { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-cell .note { font-size: var(--text-sm); color: var(--hero-fg-soft); margin-top: 2px; }
.hero-cell--gold .val { color: var(--hero-accent); }

/* ---------- stat strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 0px; }
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stats--4 { grid-template-columns: repeat(4, 1fr); }
.stats--5 { grid-template-columns: repeat(5, 1fr); }
.stats--6 { grid-template-columns: repeat(6, 1fr); }
.stat .lbl { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.stat .val { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .note { font-size: var(--text-md); color: var(--ink-soft); margin-top: 3px; line-height: 1.15; }
.stat .note .up { color: var(--money); font-weight: 700; }

/* ---------- chart ---------- */
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .bar { fill: var(--bar); opacity: 0.85; }
.chart-svg .bar:hover { opacity: 1; }
.chart-svg .bar--peak { fill: var(--bar-peak); opacity: 1; }
.chart-svg .bar--mtd { fill: none; stroke: var(--bar); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.9; }
.chart-svg .axis { font: var(--text-xs) var(--font-body); fill: var(--ink-faint); }
.chart-svg .gline { stroke: var(--line-soft); stroke-width: 1; }

/* ---------- chart summary strip ---------- */
.chart-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px;
}
.chart-stats > div:not(:first-child) { border-left: 1px solid var(--line-soft); padding-left: 18px; }
.chart-stats > div { padding-right: 18px; }
.chart-stats .lbl {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.chart-stats .val { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-stats .val small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--ink-soft); }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-ui); }
.tbl th {
  text-align: left; font-size: var(--text-xs); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.tbl td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; padding-top: 4px; padding-bottom: 4px; }
.tbl th.num { text-align: right; }
.tbl .money { color: var(--money-deep); font-weight: 700; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .muted { color: var(--ink-faint); }
.rowlink { color: var(--navy-3); font-weight: 700; text-decoration: none; }
.rowlink:hover { text-decoration: underline; }
/* client-type indicator icon (Corporate / Private) — inherits surrounding text colour */
.ctype-ico {
  width: 28px; height: 28px; display: inline-block; vertical-align: middle;
  margin-right: 8px; flex: 0 0 auto;
}

/* ---------- status chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--chip-fs, var(--text-sm)); font-weight: 700; padding: var(--chip-pad); border-radius: 99px;
  text-transform: var(--chip-case); letter-spacing: var(--chip-ls);
  white-space: nowrap;
}
.chip::before { content: ""; display: var(--chip-dot); width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--referred  { background: var(--st-referred-bg);  color: var(--st-referred-fg); }
.chip--signed    { background: var(--st-signed-bg);    color: var(--st-signed-fg); }
.chip--docs      { background: var(--st-docs-bg);      color: var(--st-docs-fg); }
.chip--activated { background: var(--st-activated-bg); color: var(--st-activated-fg); }
.chip--trading   { background: var(--st-trading-bg);   color: var(--primary-main); }
.chip--paid      { background: var(--st-trading-bg);   color: var(--primary-main); }
.chip--scheduled { background: var(--st-docs-bg);      color: var(--st-docs-fg); }
.chip--accruing  { background: var(--st-signed-bg);    color: var(--st-signed-fg); }
.chip--rolled    { background: var(--st-referred-bg);  color: var(--st-referred-fg); }
.chip--closed    { background: var(--st-referred-bg);  color: var(--st-referred-fg); opacity: .85; }
/* date of last status change, shown inside the pill (Pipeline) */
.chip__date {
  font-weight: 600; font-size: .85em; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 5px;
  background: rgba(255,255,255,.7); color: var(--ink-soft); white-space: nowrap;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 700; font-size: var(--text-ui);
  border: 1px solid transparent; text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--navy); color: var(--on-dark); }
.btn--primary:hover { box-shadow: var(--shadow-card); }
.btn--gold { background: var(--primary-main); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { padding: 6px 12px; font-size: var(--text-md); border-radius: var(--radius-sm); }
.btn--page-active { background: var(--navy); color: var(--on-dark); border-color: var(--navy); }
.btn--on { background: var(--money-tint); border-color: var(--money); color: var(--money-deep); }
.btn--done { opacity: .65; cursor: default; color: var(--money-deep); border-color: transparent; background: var(--money-tint); }
.btn--ghost[aria-pressed="true"] { background: var(--surface-2); border-color: var(--ink-soft); }
.ico-pencil { width: 24px; height: 24px; display: block; flex: 0 0 auto; }
/* Edit toggle buttons (settings — Edit profile / Edit brand kit / Edit account):
   full border all the way around, in the darkest tone per annotation. */
.editable__view [data-edit-toggle] {
  border-top: 1px solid var(--tone-1000);
  border-right: 1px solid var(--tone-1000);
  border-left: 1px solid var(--tone-1000);
  border-bottom: 1px solid var(--tone-1000);
}
/* Exception — share (Invite by Email) "Edit Message" toggle (the only edit
   toggle inside a .lbl-row): keep borders on top/right/left only, no bottom
   border. Do not change. */
.editable__view .lbl-row [data-edit-toggle] {
  border-bottom: 0;
}
/* icon + label (small) buttons: tighten the icon side of the padding and use a
   4px icon↔label gap so the glyph sits optically balanced against the text.
   Default assumes the icon is left of the label; add .btn--ico-right when the
   icon follows the label. (per design annotation) */
.btn--sm:has(> svg) { padding: 6px 12px 6px 8px; gap: 4px; }
.btn--sm.btn--ico-right:has(> svg) { padding: 6px 8px 6px 12px; }
/* fixed 35px height for specific table-action buttons (pipeline "Ask us why",
   payouts "Statement", invitations "Resend"); overrides the base .btn min-height:40px */
.btn--h35 { height: 35px; min-height: 35px; }

/* channel toggle (settings → notifications): selected = solid ink + white check chip */
.chan-toggle { display: flex; flex-wrap: wrap; gap: 8px; }
.chan-toggle__btn { justify-content: center; height: 44px; background: transparent; border: 1px solid var(--line); color: var(--ink); padding-left: 28px; padding-right: 28px; }
.chan-toggle__btn:hover { background: var(--surface-2); }
.chan-toggle__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); gap: 4px; padding-left: 16px; padding-right: 8px; }
.chan-toggle__btn[aria-pressed="true"]:hover { background: var(--navy-2); }
.chan-toggle__check {
  display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 4px;
  border-radius: 7px; background: var(--on-dark); color: var(--ink);
}
.chan-toggle__btn[aria-pressed="true"] .chan-toggle__check { display: inline-flex; }
.chan-toggle__check svg { width: 15px; height: 15px; display: block; }

/* ---------- copy field / referral link ---------- */
.copyfield {
  display: flex; align-items: stretch; gap: 0px; border: 1px solid var(--tone-1000);
}
.copyfield input {
  flex: 1; font-family: var(--font-mono); font-size: var(--text-md); color: var(--ink);
  background: var(--field-bg, var(--surface-2)); border: none; border-radius: var(--radius-sm);
  padding: 10px 16px; min-width: 0;
}
.copy-ok { color: var(--money); font-weight: 700; font-size: var(--text-md); }
/* check glyph shown in the "Copied" state — external 24px SVG, recoloured to the
   button's currentColor via mask so it works on light and dark buttons alike */
.copy-ico {
  display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("icon-check.svg") center / 20px 20px no-repeat;
          mask: url("icon-check.svg") center / 20px 20px no-repeat;
}

/* ---------- QR placeholder ---------- */
.qrbox {
  width: 124px; height: 124px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--field-bg, var(--surface)); display: flex; align-items: center; justify-content: center;
}
.qrbox svg { display: block; }
.qrbox svg rect { fill: var(--ink); }

/* ---------- resources: calculator + snippet ---------- */
.calc-out { border-top: 1px solid var(--ink); padding-top: 12px; margin-top: 4px; }
.calc-out .lbl { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.calc-out .val { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--money-deep); font-variant-numeric: tabular-nums; }
.calc-out .val small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--ink-soft); }
.calc-out .note { font-size: var(--text-sm); color: var(--ink-faint); margin-top: 3px; }
.snippet {
  margin: 0 0 12px; padding: 14px 16px; background: var(--navy); color: var(--on-dark);
  font: var(--text-md) var(--font-mono); overflow-x: auto; white-space: pre;
}

/* ---------- template gallery: in-situ message mocks ---------- */
.tpl-card { position: relative; }
.tpl-card .tpl-tabs { display: flex; gap: 6px; margin: 10px 0 12px; }
.tpl-variant[hidden] { display: none; }
.mock-email {
  background: #fff; border: 1px solid var(--line); font-size: var(--text-md);
}
.mock-email__hdr { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); }
.mock-email__hdr b { color: var(--ink); }
.mock-email__hdr div { padding: 2px 0; }
.mock-email__body { padding: 14px; line-height: 1.6; color: var(--ink); }
.mock-email__body .lnk { color: var(--primary-main); font-weight: 700; text-decoration: underline; }
.mock-wa {
  background: #e9e2d8; border: 1px solid var(--line); padding: 18px 14px 14px;
}
.mock-wa__bubble {
  position: relative; background: #dcf5cd; border-radius: 8px 8px 8px 8px;
  padding: 10px 12px 18px; max-width: 92%; margin-left: auto;
  font-size: var(--text-md); line-height: 1.5; color: #1b2a1e;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.mock-wa__bubble .lnk { color: #0b6e9e; text-decoration: underline; word-break: break-all; }
.mock-wa__meta {
  position: absolute; right: 10px; bottom: 4px; font-size: 10px; color: #7a8c7d;
}
.mock-wa__meta .tick { color: #53a6e0; }
.browser-mock { border: 1px solid var(--tone-1000); background: #fff; }
.browser-mock__bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft); background: var(--surface-2);
}
.browser-mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.browser-mock__url {
  flex: 1; font: var(--text-2xs) var(--font-mono); color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line-soft); border-radius: 99px; padding: 4px 12px;
}
.browser-mock__page { padding: 0; }
.browser-mock__heroband { background: var(--navy); color: var(--on-dark); padding: 18px 18px 16px; }
.browser-mock__heroband .k { font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--primary-main); margin-bottom: 6px; }
.browser-mock__heroband .h { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; line-height: 1.3; }
.browser-mock__body { padding: 14px 18px; font-size: var(--text-sm); color: var(--ink-soft); }
.browser-mock__cta { display: inline-block; background: var(--primary-main); color: #fff; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; margin-top: 8px; }
.range-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; }
.range-row input[type=range] { flex: 1; accent-color: var(--primary-main); }
.range-row output { font: 700 var(--text-md) var(--font-body); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- co-brand studio: pdf cover mock ---------- */
.pdf-cover {
  width: 150px; aspect-ratio: 1 / 1.41; background: var(--navy); color: var(--on-dark);
  display: flex; flex-direction: column; padding: 14px 12px; flex: none;
  box-shadow: 4px 4px 0 var(--line);
}
.pdf-cover .brands { display: flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-main); }
.pdf-cover .brands i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-main), var(--primary-main)); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 7px; color: #fff; }
.pdf-cover .t { font-family: var(--font-display); font-size: 13px; font-weight: 600; line-height: 1.25; margin-top: auto; }
.pdf-cover .f { font-size: 7px; color: var(--on-dark-faint); margin-top: 10px; border-top: 1px solid var(--dark-line); padding-top: 5px; }

/* ---------- AI chat mock ---------- */
.mock-chat { border: 1px solid var(--line); background: #fff; padding: 16px; font-size: var(--text-md); }
.mock-chat .u { background: var(--surface-2); border-radius: 12px 12px 2px 12px; padding: 10px 14px; max-width: 88%; margin-left: auto; margin-bottom: 12px; }
.mock-chat .ai { display: flex; gap: 10px; max-width: 94%; }
.mock-chat .ai i { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--navy); color: var(--primary-main); font-style: normal; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.mock-chat .ai .msg { line-height: 1.55; color: var(--ink-soft); }
.mock-chat .file {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  padding: 7px 12px; margin-top: 8px; font-weight: 700; color: var(--ink); font-size: var(--text-sm);
}
.mock-chat .file::before { content: "§"; color: var(--primary-main); font-family: var(--font-display); }

/* ---------- connector cards ---------- */
.connector { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); padding: 14px 16px; background: #fff; }
.connector .logo { flex: none; width: 34px; height: 34px; border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--text-md); }
.connector .t b { display: block; font-size: var(--text-ui); }
.connector .t span { font-size: var(--text-sm); color: var(--ink-faint); }
.connector .btn { margin-left: auto; }

/* ---------- letter preview (invitation message) ---------- */
.letter {
  margin: 0; padding: 14px 20px; border: 1px solid var(--tone-1000);
  background: var(--surface-2); font-size: var(--text-ui); color: var(--ink-soft);
}
.letter p { margin: 0 0 10px; }
.letter p:last-child { margin: 0; }
.letter__link { color: var(--primary-main); font-weight: 700; font-family: var(--font-mono); font-size: var(--text-md); }

/* ---------- threshold / progress ---------- */
.meter { background: var(--line-soft); height: 8px; border-radius: 99px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--money), var(--money-deep)); }

/* ---------- funnel ---------- */
.funnel { display: grid; gap: 12px; }
.funnel-row { display: grid; grid-template-columns: 130px 1fr 60px; align-items: center; gap: 16px; }
.funnel-row .lbl { font-size: var(--text-md); font-weight: 700; }
.funnel-row .bar { height: 38px; border-radius: 7px;
  background: linear-gradient(90deg, var(--navy-2), var(--navy-3));
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
  color: var(--on-dark); font-size: var(--text-md); font-weight: 700; min-width: 36px; }
.funnel-row:last-child .bar { background: linear-gradient(90deg, var(--money-deep), var(--money)); }
.funnel-row .conv { font-size: var(--text-sm); color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- notifications panel ---------- */
.notif-wrap { position: relative; }
.notif-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 384px;
  max-height: min(80vh, 624px);
  background: var(--bg); color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop); z-index: 60; overflow: hidden;
  display: none; flex-direction: column;
}
.notif-panel.open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .notif-panel.open { animation: pop .18s ease-out; }
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
/* glyph masks — supplied funnel (pipeline) / trades / payouts / gear SVGs,
   tinted via background-color so they pick up the per-icon colour */
.notif-panel {
  --ni-pipeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.98,2.22c-5.39,0-9.75,1.45-9.75,3.75v1.23c0,.67.24,1.32.69,1.83l5.54,6.21v3.72c0,1.51,1.23,2.75,2.75,2.75h1.5c1.51,0,2.75-1.24,2.75-2.75v-3.65l5.58-6.26c.44-.51.69-1.16.69-1.84v-1.24c0-2.3-4.37-3.75-9.75-3.75ZM5.85,4.57c1.59-.54,3.78-.85,6.12-.85s4.53.3,6.12.84c1.39.46,2.12,1.03,2.12,1.4v.2c-.17.36-.88.84-2.09,1.24-1.6.53-3.79.84-6.13.84s-4.54-.31-6.13-.85c-1.4-.47-2.13-1.04-2.13-1.41s.72-.95,2.12-1.41ZM14.14,14.45c-.13.13-.2.31-.2.49l.06.06v4c0,.69-.56,1.25-1.25,1.25h-1.5c-.7,0-1.25-.56-1.25-1.25v-4c0-.19-.07-.37-.2-.5l-5.44-6.09c1.79.84,4.53,1.32,7.62,1.32s5.73-.46,7.52-1.27l-5.36,5.99ZM15.46,15.1v-.14l.04.04-.04.1Z'/%3E%3C/svg%3E");
  --ni-trade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5,13.44l-14.99-.02h0c-.67,0-1,.81-.53,1.28l4.34,4.34c.29.29.77.29,1.06,0s.29-.77,0-1.06l-3.05-3.05,13.18.02h0c.41,0,.75-.33.75-.75s-.33-.75-.75-.75Z'/%3E%3Cpath d='M4.5,10.56l14.99.02h0c.67,0,1-.81.53-1.28l-4.34-4.34c-.29-.29-.77-.29-1.06,0s-.29.77,0,1.06l3.05,3.05-13.18-.02h0c-.41,0-.75.33-.75.75s.33.75.75.75Z'/%3E%3C/svg%3E");
  --ni-payout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21,10.68c.41,0,.75-.34.75-.75v-3.01c0-.3-.18-.57-.45-.69l-9-3.93c-.2-.09-.41-.09-.61,0L2.69,6.22c-.28.11-.45.38-.45.68v3c0,.41.33.75.75.75v.03h10.9v6.56h-.9c-.42,0-.75.33-.75.75s.33.75.75.75h6.53l.71,1.42v.07h-10.25c-.42,0-.75.33-.75.75s.33.75.75.75l.02.02h11c.41,0,.75-.34.75-.75v-1c0-.12-.03-.24-.08-.34l-1-2c-.13-.26-.39-.42-.68-.42h-.24v-6.56h1.25ZM20.24,7.39v1.76H3.75v-1.75l8.25-3.6,8.24,3.59ZM18.25,17.24h-2.86v-6.56h2.86v6.56Z'/%3E%3Cpath d='M10.58,16.46c.04-.06.09-.11.12-.18,0,0,0-.01,0-.02.03-.08.05-.17.05-.26,0-.05-.02-.1-.03-.15,0-.05-.01-.1-.03-.14,0-.02-.02-.03-.03-.04-.04-.07-.07-.14-.13-.21,0,0-.02-.01-.03-.02l-2.98-2.98c-.3-.3-.77-.3-1.07,0-.3.29-.3.76,0,1.06h.01s1.72,1.73,1.72,1.73H3c-.42,0-.75.33-.75.75s.33.75.75.75h5.17l-1.71,1.71c-.3.29-.3.76,0,1.06.29.29.76.29,1.06,0h.01s3-2.99,3-2.99c.02-.02.03-.05.05-.07Z'/%3E%3C/svg%3E");
  --ni-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.2,12.09l-1.17-.8c-.53-.37-.7-1.09-.38-1.65l.71-1.23c.36-.63.3-1.4-.15-1.97l-.71-.9c-.45-.57-1.2-.8-1.89-.58l-1.35.41c-.62.19-1.29-.13-1.53-.74l-.52-1.31c-.27-.67-.91-1.11-1.63-1.11h-1.15c-.73,0-1.36.44-1.63,1.12l-.5,1.3c-.24.61-.91.93-1.53.74l-1.41-.43c-.68-.21-1.44.02-1.89.59l-.71.9c-.45.57-.5,1.35-.14,1.97l.72,1.23c.33.56.17,1.29-.37,1.66l-1.15.79c-.6.41-.88,1.13-.72,1.84l.25,1.12c.16.71.73,1.24,1.44,1.35h0l1.4.21c.64.1,1.11.68,1.06,1.33l-.1,1.41c-.05.72.33,1.39.99,1.71l1.03.5c.65.32,1.42.2,1.95-.29l1.04-.96c.48-.44,1.22-.44,1.7,0l1.04.96c.54.49,1.3.61,1.95.29l1.03-.5c.65-.31,1.04-.98.99-1.7l-.1-1.41c-.05-.65.42-1.23,1.06-1.33l1.4-.21c.71-.11,1.28-.64,1.44-1.34l.25-1.12c.16-.71-.12-1.43-.72-1.84ZM20.2,14.71c-.02.1-.11.18-.21.2l-1.4.21c-1.41.22-2.43,1.5-2.33,2.92l.1,1.41c0,.1-.05.2-.14.24l-1.04.5c-.09.05-.21.03-.28-.04l-1.04-.96c-1.05-.97-2.69-.97-3.73,0l-1.04.96c-.08.07-.19.09-.28.04l-1.03-.5c-.09-.04-.15-.14-.14-.25l.1-1.41c.1-1.42-.92-2.7-2.33-2.92l-1.4-.21c-.1-.02-.18-.09-.21-.2l-.25-1.12c-.02-.1.02-.21.1-.27l1.15-.79c1.19-.81,1.55-2.42.82-3.66l-.72-1.23c-.05-.09-.04-.2.02-.29l.71-.9c.07-.08.18-.11.28-.09l1.41.43c1.37.42,2.85-.29,3.37-1.63l.5-1.3c.04-.1.13-.16.24-.16h1.15c.11,0,.2.06.24.16l.52,1.31c.52,1.33,2,2.04,3.37,1.62l1.35-.41c.11-.03.21,0,.27.08l.71.9c.07.08.07.2.02.28l-.71,1.23c-.71,1.24-.34,2.83.83,3.64l1.17.8c.09.06.13.16.1.27l-.25,1.12Z'/%3E%3Cpath d='M9.55,9.55c-1.35,1.35-1.35,3.54,0,4.89s3.54,1.35,4.89,0,1.35-3.54,0-4.89c-1.35-1.35-3.54-1.35-4.89,0ZM13.39,13.39c-.74.74-2.03.74-2.77,0s-.76-2.01,0-2.77c.76-.76,2.01-.76,2.77,0s.76,2.01,0,2.77Z'/%3E%3C/svg%3E");
}

/* header: dark bar — unread count · title · Settings (gear) */
.notif-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--navy); color: var(--on-dark);
}
.notif-head__count {
  flex: none; min-width: 26px; height: 26px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-main); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-ui); line-height: 1;
}
.notif-head__count[hidden] { display: none; }
.notif-head__title {
  flex: 1 1 auto; margin: 0; font-size: var(--text-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--on-dark);
}
.notif-head__settings {
  /* Click area fills the header height and stretches to the panel's right
     edge; negative margins absorb the header's own 12px 16px padding so the
     label/icon stay put while the hit target grows to match the design. */
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 12px 12px 16px; margin: -12px -16px -12px 0;
  border-left: 1px solid var(--dark-line);
  font-size: var(--text-sm); font-weight: 600; color: var(--primary-main);
  text-decoration: none; letter-spacing: .02em;
}
.notif-head__settings::after {
  content: ""; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--ni-gear) center / contain no-repeat; mask: var(--ni-gear) center / contain no-repeat;
}
.notif-head__settings:hover { text-decoration: none; background: var(--tone-900); }

/* scrolling list — scrollbar shows when items overflow the panel height */
.notif-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-bottom: 1px solid var(--tone-1000); }

.notif {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  font-size: var(--text-ui); line-height: 1.4;
  color: inherit; text-decoration: none;
}
a.notif:hover { background: var(--primary-light-50); }
.notif:last-of-type { border-bottom: 0; }
/* new / unread: orange rule down the left edge */
.notif.unread { border-left-color: var(--primary-main); }

.notif__icon {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); color: var(--ink);
}
.notif__icon::before {
  content: ""; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.notif__icon--pipeline::before { -webkit-mask-image: var(--ni-pipeline); mask-image: var(--ni-pipeline); }
.notif__icon--trade::before   { -webkit-mask-image: var(--ni-trade);    mask-image: var(--ni-trade); }
.notif__icon--payout::before  { -webkit-mask-image: var(--ni-payout);   mask-image: var(--ni-payout); }
.notif__icon--pipeline { border-color: var(--tone-1000); }
.notif__icon--trade,
.notif__icon--payout { color: var(--primary-main); border-color: var(--primary-main); }
/* empty state (welcome page) */
.notif-empty { padding: 28px 16px; text-align: center; color: var(--ink-soft); font-size: var(--text-ui); line-height: 1.5; }

.notif__body { flex: 1 1 auto; min-width: 0; }
.notif__top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 4px;
}
.notif__date {
  flex: none; color: var(--tone-500); font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
}
.notif__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* client names sit at normal weight (per annotation — not bold) */
.notif__sub strong { font-weight: 400; }
.notif__ref { color: var(--ink-faint); }
.notif__amt { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.notif__detail { margin-top: 2px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.notif-foot {
  flex: none; padding: 12px 16px; background: var(--tone-100);
  font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.5;
}

/* ---------- resources ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.res-card { display: flex; flex-direction: column; gap: 10px; }
.res-card .thumb {
  height: 110px; border-radius: 10px; border: 1px solid var(--line-soft);
  background:
    radial-gradient(100% 140% at 80% -10%, var(--primary-light-100), transparent 60%),
    linear-gradient(150deg, var(--navy-2), var(--navy));
  display: flex; align-items: flex-end; padding: 12px;
}
.res-card .thumb .tag {
  background: rgba(255,255,255,0.92); color: var(--navy);
  font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
}
.res-card h3 { font-size: var(--text-base); }
.res-card p { margin: 0; font-size: var(--text-md); line-height: 1.35; color: var(--ink-soft); flex: 1; }

/* ---------- filters row ---------- */
.filters { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 16px; align-items: end; }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: var(--text-md); font-weight: 700; margin-bottom: 6px; color: var(--ink-soft); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px;
}
/* form-field placeholder text — tone-400 */
.field input::placeholder, .field textarea::placeholder { color: var(--tone-300); opacity: 1; }
/* custom dropdown chevron (chevron_down_sm, tone1000) — replaces native select arrow */
.field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23323333' d='M12,15.75c-.19,0-.38-.07-.53-.22l-4-4c-.29-.29-.29-.77,0-1.06s.77-.29,1.06,0l3.47,3.47,3.47-3.47c.29-.29.77-.29,1.06,0s.29.77,0,1.06l-4,4c-.15.15-.34.22-.53.22Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 28px 28px;
}
.field select::-ms-expand { display: none; }
.field textarea { min-height: 120px; resize: vertical; }
.switchrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.switchrow:last-child { border-bottom: 0; }
.switchrow .t { font-size: var(--text-ui); font-weight: 700; }
.switchrow .d { font-size: var(--text-md); color: var(--ink-soft); }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
/* hit area extends 11px beyond the visual switch — 44px effective target */
.switch input { position: absolute; opacity: 0; inset: -11px; margin: 0; cursor: pointer; }
.switch span {
  position: absolute; inset: 0; border-radius: 99px; background: var(--line);
  transition: background .15s;
}
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.switch input:checked + span { background: var(--primary-main); }
.switch input:checked + span::after { left: 21px; }

/* ---------- page rail (on-this-page nav, settings) ---------- */
.railpage { display: grid; grid-template-columns: 190px 1fr; gap: 44px; align-items: start; }
.rail { position: sticky; top: 84px; }
.rail a {
  display: block; padding: 7px 0 7px 14px; border-left: 1px solid var(--line);
  font-size: var(--text-md); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
}
.rail a:hover { color: var(--ink); }
.rail a[aria-current="true"] { color: var(--primary-main); border-left: 2px solid var(--primary-main); padding-left: 13px; }
@media (max-width: 920px) {
  .railpage { grid-template-columns: 1fr; gap: 0; }
  .rail { position: static; display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px; scrollbar-width: none; }
  .rail a { border-left: 0; padding: 7px 12px; white-space: nowrap; border-bottom: 2px solid transparent; }
  .rail a[aria-current="true"] { border-left: 0; border-bottom: 2px solid var(--primary-main); padding-left: 12px; }
}

/* ---------- read-view definition list ---------- */
.dl { margin: 0 0 16px; }
.dl > div {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.dl > div:last-child { border-bottom: 0; }
.dl dt {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); align-self: center;
}
.dl dd { margin: 0; font-size: var(--text-ui); font-variant-numeric: tabular-nums; }
.editable__form[hidden] { display: none; }
.editable__actions { display: flex; gap: 10px; margin-top: 4px; }
/* segmented single-select (e.g. account owner: Company / Individual) */
.segmented { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--tone-1000); border-radius: 0; background: var(--tone-100); }
.segmented__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 20px; border: 1px solid transparent; border-radius: 0;
  font: inherit; font-weight: 700; color: var(--ink-soft); background: var(--tone-0); cursor: pointer;
}
.segmented__btn:hover { color: var(--ink); }
/* unselected option gets a visible tone-1000 outline */
.segmented__btn[aria-pressed="false"] { border-color: var(--tone-1000); }
.segmented__btn[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); padding-left: 14px; }
/* tick badge — same checkmark icon/treatment as the notifications channel toggle */
.segmented__check {
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  border-radius: 6px; background: var(--on-dark); color: var(--ink);
}
.segmented__btn[aria-pressed="true"] .segmented__check { display: inline-flex; }
.segmented__check svg { width: 13px; height: 13px; display: block; }
/* in-form sub-heading (e.g. Bank holder's address) —
   matches the .factlist .k key styling (e.g. "Paid around the 28th, monthly") */
.form-subhead {
  margin: 22px 0 14px; font-family: var(--font-body); font-size: 11px;
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #9aa1a8;
}

/* bank-account detail fields, bracketed by a divider on either side */
.bank-detail-group {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.bank-detail-group > .field:last-child { margin-bottom: 0; }

/* ---------- international phone input (settings → profile) ----------
   Dark flag + chevron trigger on the left; to its right a locked dial-code
   prefix (+44, up to 3 digits) that is display-only and a free-text number.
   The country listbox swaps both the flag and the dial prefix. */
.phone-input {
  position: relative; display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.phone-input:focus-within { border-color: var(--ink); }
.phone-input__toggle {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 0 12px; border: 0; border-right: 1px solid var(--line);
  border-radius: 9px 0 0 9px; background: var(--line); color: var(--tone-1000);
  cursor: pointer;
}
.phone-input__toggle:hover { background: var(--tone-700); color: var(--tone-0); }
.phone-input__toggle:focus { background: var(--tone-800); color: var(--tone-0); }
.phone-input__flag {
  display: block; width: 26px; height: 17px; object-fit: cover;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.phone-input__chev { width: 16px; height: 16px; transition: transform .15s; }
.phone-input__toggle[aria-expanded="true"] .phone-input__chev { transform: rotate(180deg); }
.phone-input__field {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  padding: 10px 12px;
}
.phone-input__dial {
  flex: none; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}
.phone-input__num {
  flex: 1; min-width: 0; font: inherit; color: var(--ink);
  border: 0; background: transparent; padding: 0; font-variant-numeric: tabular-nums;
}
.phone-input__num:focus { outline: none; }
/* country listbox */
.phone-input__menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  min-width: 260px; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px;
  list-style: none; background: var(--surface); border: 1px solid var(--ink);
  box-shadow: 0 12px 28px rgba(17, 20, 24, 0.16);
}
.phone-input__menu[hidden] { display: none; }
.phone-input__menu li { margin: 0; }
.phone-input__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: transparent; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink);
}
.phone-input__opt:hover, .phone-input__opt:focus-visible { background: var(--surface-2); outline: none; }
.phone-input__opt[aria-selected="true"] { background: var(--surface-2); }
.phone-input__opt img {
  display: block; width: 24px; height: 16px; flex: none; object-fit: cover;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.phone-input__opt-name { flex: 1; min-width: 0; }
.phone-input__opt-dial { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- settings definition rows ---------- */
.setrow {
  display: grid; grid-template-columns: 300px 1fr; gap: 44px;
  padding: 28px 0 32px; border-top: 1px solid var(--ink);
}
.setrow__head h2 { margin-bottom: 6px; }
.setrow__head p { margin: 0; font-size: var(--text-md); color: var(--ink-soft); max-width: 36ch; }
.setrow__body { max-width: 640px; position: relative; }
@media (max-width: 920px) {
  .setrow { grid-template-columns: 1fr; gap: 16px; }
}

/* payout hero strip (settings) */
.payout-hero {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; align-items: center;
  background: var(--navy); color: var(--on-dark);
  padding: 26px 28px; margin-bottom: 24px; position: relative;
}
.payout-hero .lbl { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: 4px; }
.payout-hero .val { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.payout-hero .note { font-size: var(--text-sm); color: var(--on-dark-soft); margin-top: 2px; }
@media (max-width: 920px) {
  .payout-hero { grid-template-columns: 1fr 1fr; }
}

/* ---------- callouts ---------- */
.callout {
  border-left: 3px solid var(--primary-main); background: var(--primary-light-100);
  border-radius: 0 10px 10px 0; padding: 12px 16px; font-size: var(--text-ui);
}
.callout--green { border-color: var(--money); background: var(--money-tint); }

/* Full-bleed banner variant: spans the content width, drops the orange left rule,
   and sits flush above the footer (zero gap). Offset by the rail like .foot. */
.callout--banner {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;
  gap: 0px 8px;
  margin: 0 0 0 var(--rail-w);
  border-left: 0; border-radius: 0;
  background: var(--primary-light-100);
  padding: 8px 32px;
}
.callout--banner + .foot { margin-top: 0; }
.callout__text { flex: 0 1 auto; min-width: 0; }
.callout__cta { margin-top: 0; flex: 0 0 auto; }
.callout__cta .rowlink { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-main); }

/* ---------- inverted (dark) card — theme-safe accent moment ---------- */
.card--invert {
  background: var(--navy); color: var(--on-dark); border: 0; border-top: 0;
  padding: 24px 28px;
}
.card--invert h2 { color: var(--on-dark); }

.empty-mark {
  font: 600 64px/0.8 var(--font-display); color: var(--primary-main); margin-bottom: 12px;
}

/* ---------- swiss structural refinements (default theme only) ---------- */
/* figure row: one shared ink rule over the group, hairlines between cells */
html:not([data-theme]) .stats { border-top: 1px solid var(--ink); padding-top: 0px; gap: 0; }
html:not([data-theme]) .stats .card { border: 0; padding-top: 32px; padding-bottom: 32px; }
html:not([data-theme]) .stats > *:not(:first-child) { border-left: 1px solid var(--line); padding-left: 22px; }
html:not([data-theme]) .stats > * { padding-right: 22px; }
/* section headings: smallcaps rigor; page titles: expanded display scale */
html:not([data-theme]) .card h2 {
  font-family: var(--font-body); font-size: var(--text-md); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px;
}
html:not([data-theme]) .card h2 .count { text-transform: none; letter-spacing: 0; }
html:not([data-theme]) .page-head h1 { font-size: 38px; letter-spacing: -0.03em; }
html:not([data-theme]) .btn--primary:hover { background: var(--primary-main); box-shadow: none; }
html:not([data-theme]) .foot {
  font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
}

html:not([data-theme]) .hero-cell {
  background: transparent; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; padding: 4px 0 4px 16px;
}
html:not([data-theme]) .card-row--main,
html:not([data-theme]) .card-row--half { column-gap: 44px; }
html:not([data-theme]) .card-row--main > :first-child,
html:not([data-theme]) .card-row--half > :first-child {
  border-right: 1px solid var(--line-soft); padding-right: 44px;
}

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line-soft); margin-top: 48px; padding: 16px 24px;
  font-size: var(--text-md); color: var(--tone-400); text-align: center; line-height: 1em;
}
.foot__copy { }
.foot__contact {
  margin-top: 6px;
  display: inline-flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  column-gap: 18px; row-gap: 6px;
}
.foot__item { display: inline-flex; align-items: center; gap: 8px; }
.foot__tel { color: inherit; text-decoration: none; transition: color .15s ease; }
.foot__tel:hover { color: var(--gild); }
.foot__tel .foot__icon--hover { display: none; }
.foot__tel:hover .foot__icon--rest { display: none; }
.foot__tel:hover .foot__icon--hover { display: inline-block; }
.foot__mail { color: inherit; text-decoration: none; transition: color .15s ease; }
.foot__mail:hover { color: var(--primary-main); }
.foot__mail .foot__icon--hover { display: none; }
.foot__mail:hover .foot__icon--rest { display: none; }
.foot__mail:hover .foot__icon--hover { display: inline-block; }
.foot__icon { width: 18px; height: 18px; flex: none; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--navy); color: var(--on-dark);
  font: 700 var(--text-md) var(--font-body); letter-spacing: 0.02em;
  padding: 12px 20px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); z-index: 120; max-width: min(90vw, 480px);
}
.toast--leaving { opacity: 0; transition: opacity .25s; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .22s cubic-bezier(.2,.7,.3,1); }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
}

/* ---------- wireframe toolbar (NOT part of the product) ---------- */
.wf-toolbar {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  background: #111; color: #eee; border-radius: 12px; padding: 10px 12px;
  font-size: var(--text-xs); box-shadow: 0 10px 36px rgba(0,0,0,0.4);
  display: flex; gap: 8px; align-items: center; opacity: 0.92;
}
.wf-toolbar b { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #999; margin-right: 2px; }
.wf-toolbar button {
  background: #2a2a2a; color: #ddd; border: 1px solid #444; border-radius: 7px;
  padding: 5px 10px; font-size: var(--text-xs);
}
.wf-toolbar button[aria-pressed="true"] { background: #3d6649; border-color: #57a06c; color: #fff; }

/* ---------- data-source annotations (toggle via toolbar) ---------- */
.dtag {
  display: none; position: absolute; top: -9px; right: 12px; z-index: 5;
  font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px; color: #fff; cursor: help;
}
body.show-dtags .dtag { display: inline-block; }
.dtag--portal { background: #2c7a4b; }        /* green: shown in portal today */
.dtag--db     { background: #b7791f; }        /* amber: in DB, needs wiring   */
.dtag--rule   { background: #b03030; }        /* red: business rule / new backend */

/* ---------- empty / welcome states ---------- */
.empty {
  text-align: center; padding: 48px 32px; color: var(--ink-soft);
}
.empty .big { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); margin-bottom: 6px; }

/* ---------- load-in motion (restrained, honors reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .5s cubic-bezier(.2,.7,.3,1) both; }
  .rise:nth-child(2) { animation-delay: .06s; }
  .rise:nth-child(3) { animation-delay: .12s; }
  .rise:nth-child(4) { animation-delay: .18s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  /* nav links get their own full-width scrollable row — never squeezed out */
  .topnav__inner { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; gap: 10px 16px; }
  .topnav__links { order: 3; flex: 1 1 100%; scrollbar-width: none; }
  .topnav__links::-webkit-scrollbar { display: none; }
  .topnav__right { margin-left: auto; }
  .hero__grid { grid-template-columns: 1fr; gap: 20px; }
  .card-row { grid-template-columns: 1fr; }
  html:not([data-theme]) .card-row--main > :first-child,
  html:not([data-theme]) .card-row--half > :first-child { border-right: 0; padding-right: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* once stats wrap to 2 columns, the left column starts each visual row —
     drop its left divider + inset so wrapped cells sit flush like the first
     cell (no dangling border on the row's leading edge). .stats--6 keeps its
     own bespoke divider matrix. */
  html:not([data-theme]) .stats:not(.stats--6) > *:nth-child(odd) { border-left: 0; padding-left: 0; }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__figure { font-size: 44px; }
}
@media (max-width: 600px) {
  .shell { padding: 20px 16px 60px; }
  /* top-right date/currency meta hides on mobile (matches Insights) */
  .page-meta { display: none; }
  /* tables become horizontally scrollable instead of crushing columns */
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl th, .tbl td { white-space: nowrap; }
  /* filter rows stack */
  .filters { grid-template-columns: 1fr 1fr !important; }
  /* touch targets: 44px minimum where fingers go */
  .avatar { width: 40px; height: 40px; }
  .btn { padding: 11px 16px; }
  /* wireframe toolbar: compact + translucent, stops covering content */
  .wf-toolbar { padding: 5px 7px; gap: 5px; opacity: 0.45; transition: opacity .15s; }
  .wf-toolbar:hover, .wf-toolbar:focus-within { opacity: 0.95; }
  .wf-toolbar b { display: none; }
  .wf-toolbar button { padding: 4px 7px; font-size: var(--text-xs); }
  .topnav__inner { padding: 0 16px; gap: 16px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .res-grid { grid-template-columns: 1fr; }
  .hero { padding: 24px 16px; }
  .hero__cells { grid-template-columns: 1fr; }
  .tbl { font-size: var(--text-md); }
  .tbl th, .tbl td { padding: 8px; }
  .hide-sm { display: none; }
  .notif-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* ============================================================
   v2 — dark left sidebar nav (Figma redesign, "get styles" page)
   Replaces .topnav. Always dark per design (#111418 ink / #fafaf7 on-dark).
   Layout: fixed rail (--rail-w) + content offset. Three display modes:
   expanded rail (default), collapsed icon-only rail (desktop toggle,
   persisted), and ≤992px app-bar + off-canvas drawer. The burger, drawer
   wrapper, scrim and collapse toggle are all injected by app.js, so every
   page template carries the same route-only nav markup.
   ============================================================ */
:root { --rail-w: 212px; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w);
  background: var(--navy); color: var(--on-dark);
  display: flex; flex-direction: column; gap: 24px;
  padding: 16px 8px 14px; z-index: 50; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sidebar__logo {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 0;
  color: var(--on-dark); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: .2px;
}
.sidebar__logo svg { display: block; flex: 0 0 auto; }
/* v2: brand wordmark asset (diamond mark + "currencytransfer"), fixed 170×28 */
.sidebar__logo img { display: block; flex: 0 0 auto; width: 170px; height: 28px; }
.sidebar__burger { display: none; }  /* desktop: no burger; shown ≤992px */
.sidebar__suffix { opacity: .55; font-family: var(--font-body); font-size: var(--text-sm); }
/* nav + footer are wrapped in this drawer (by app.js) so the open mobile menu
   can be a single positioned overlay. display:contents makes the wrapper
   layout-transparent, so desktop & closed states behave exactly as before. */
.sidebar__drawer { display: contents; }
.sidebar__nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar__nav a,
.sidebar__item,
.sidebar__user {
  display: flex; align-items: center; gap: 4px; width: 100%;
  padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--on-dark-soft); text-decoration: none;
  font-family: var(--font-body); font-size: var(--text-base); text-align: left;
  transition: color .15s;
}
.sidebar__nav a:hover,
.sidebar__item:hover,
.sidebar__user:hover { color: var(--on-dark); }
.sidebar__nav a[aria-current="page"] { color: var(--primary-main); font-weight: 600; }
.sidebar__nav a[aria-current="page"] .sidebar__ico { color: var(--primary-main); }
.sidebar__ico {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center; color: inherit;
}
.sidebar__ico svg { width: 22px; height: 22px; display: block; }
/* Branded nav icons (provided SVG set): 28px, tone0 by default, primary when active.
   Path data is shared between the primary/tone0 variants — only the fill differs — so
   one currentColor SVG reproduces both states via the tokens below. */
.sidebar__ico svg.ico-brand { width: 28px; height: 28px; }
.sidebar__nav a .ico-brand,
.sidebar__item .ico-brand { color: var(--on-dark); }
.sidebar__nav a[aria-current="page"] .ico-brand,
.sidebar__item[aria-current="page"] .ico-brand { color: var(--primary-main); }
/* Notifications bell (provided SVG set): two states share the bell body
   (currentColor → tone0); the "new" variant adds a primary dot. JS sets
   .has-unread on the toggle from the panel's .notif.unread items, so the dotted
   bell shows while unread remain and the plain bell shows once they're read. */
.sidebar__ico .notif-ico { display: none; }
.sidebar__ico .notif-ico--read { display: block; }
[data-notif-toggle].has-unread .sidebar__ico .notif-ico--read { display: none; }
[data-notif-toggle].has-unread .sidebar__ico .notif-ico--new { display: block; }
.notif-ico__dot { fill: var(--primary-main); }
.sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.sidebar__group { display: flex; flex-direction: column; gap: 2px; }
.sidebar__user { gap: 10px; color: var(--on-dark); }
.sidebar__user .avatar {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 999px;
  background: var(--primary-main); background-image: none; color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-ui); letter-spacing: .3px;
}
/* Desktop-only rail-width toggle (app.js injects it as the last child of
   .sidebar__foot). Styled like a nav row, separated by a hairline; hidden
   ≤992px where the rail becomes the app-bar + drawer instead. */
.sidebar__collapse {
  display: flex; align-items: center; gap: 4px; width: 100%;
  padding: 12px 0 2px; border: 0; border-top: 1px solid var(--dark-line);
  background: none; cursor: pointer;
  color: var(--on-dark-soft); text-decoration: none;
  font-family: var(--font-body); font-size: var(--text-base); text-align: left;
  transition: color .15s;
}
.sidebar__collapse:hover { color: var(--on-dark); }
.sidebar .notif-wrap { position: relative; width: 100%; }
/* The tray is lifted to <body> by app.js. Because .sidebar is position:fixed it
   forms its own stacking context, so a panel nested inside it can never paint
   below the rail (its z-index is scoped INSIDE the sidebar). At body level the
   tray lives in the root stacking context, where z-index:40 sits BELOW the z-50
   sidebar — so the dark nav rail fully occludes the tray and it slides out from
   BEHIND the main navigation. Docked full-height to the right of the rail, 479px. */
body > .notif-panel {
  position: fixed; left: var(--rail-w); top: 0; bottom: 0; right: auto;
  width: 479px; max-width: calc(100vw - var(--rail-w));
  max-height: none; border-radius: 0;
  /* Slide-open: keep the tray rendered (not display:none) so transform can animate.
     Closed = tucked LEFT off-axis (translateX(-100%)) + inert; open = slid into the
     docked spot. Sitting below the rail, the left→right slide emerges from behind
     the main nav instead of obscuring it. */
  display: flex; transform: translateX(-100%); visibility: hidden; pointer-events: none;
  z-index: 40;
  /* docked-mode (≥992px) edge borders per annotation */
  border-left: 1px solid var(--tone-800); border-right: 1px solid var(--tone-1000);
}
body > .notif-panel.open {
  transform: translateX(0); visibility: visible; pointer-events: auto;
  animation: none; /* override the base "pop" fade — the slide replaces it */
}
@media (prefers-reduced-motion: no-preference) {
  /* transition transform for the slide; delay visibility so the tray stays
     painted while it slides back out on close. */
  body > .notif-panel { transition: transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s linear .26s; }
  body > .notif-panel.open { transition: transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s; }
}

/* content offset by the rail */
.shell { margin-left: var(--rail-w); max-width: 1280px; }
.foot { margin-left: var(--rail-w); }

/* Collapsed rail (desktop only, opt-in via the in-rail toggle; app.js persists
   the choice in localStorage "pp-sidebar" and mirrors it to <html data-sidebar>).
   The rail narrows to an icon-only strip: --rail-w drives the rail width, the
   content offsets AND the notif-tray dock, so everything moves together.
   Link labels are bare text nodes, so they hide via font-size:0 — the markup
   (and every route) stays untouched and screen readers keep the full label.
   The wordmark clips to the diamond mark (the leftmost 22px of logo.svg —
   the chevron ends at x=19.5 and the "c" reaches back to x=24.4). */
@media (min-width: 993px) {
  html[data-sidebar="collapsed"] { --rail-w: 68px; }
  html[data-sidebar="collapsed"] .sidebar { gap: 16px; }
  html[data-sidebar="collapsed"] .sidebar__logo {
    width: 22px; overflow: hidden; padding-left: 0; padding-right: 0; margin: 0 auto;
  }
  html[data-sidebar="collapsed"] .sidebar__nav a,
  html[data-sidebar="collapsed"] .sidebar__item,
  html[data-sidebar="collapsed"] .sidebar__user,
  html[data-sidebar="collapsed"] .sidebar__collapse {
    justify-content: center; gap: 0; font-size: 0;
  }
  html[data-sidebar="collapsed"] .sidebar__collapse-label { display: none; }
  html[data-sidebar="collapsed"] .sidebar__collapse .sidebar__ico svg { transform: rotate(180deg); }
}
@media (min-width: 993px) and (prefers-reduced-motion: no-preference) {
  .sidebar { transition: width .22s ease; }
  .shell, .foot, .callout--banner { transition: margin-left .22s ease; }
  .sidebar__collapse .sidebar__ico svg { transition: transform .22s ease; }
}

/* Collapse the rail to a top app-bar + hamburger below 992px. The fixed
   212px rail would otherwise squeeze content and clip it on narrower laptops;
   below this width the rail gets out of the way and content uses full width. */
@media (max-width: 992px) {
  .sidebar {
    position: sticky; top: 0; left: 0; right: 0; width: auto; z-index: 50;
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0; padding: 8px 14px; max-height: none; overflow: visible;
  }
  .sidebar__logo { padding: 0; margin-right: auto; font-size: var(--text-base); }
  .sidebar__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: 0 0 auto; padding: 0;
    background: none; border: 0; color: var(--on-dark); cursor: pointer;
  }
  .sidebar__burger svg { width: 32px; height: 32px; display: block; }
  /* Off-canvas drawer: nav + footer slide in from the left as one fixed panel
     docked below the 58px app-bar. Closed = parked off the left edge
     (translateX(-105%)) + inert; .is-open slides it in. Both the drawer and
     the scrim live INSIDE .sidebar's stacking context (the bar is sticky with
     z-50): the scrim (z-60) dims the page, the drawer (z-70) floats above it,
     and the open burger (z-80) stays clickable to close. A body-level scrim
     would paint over the drawer as well, hence the nesting. */
  .sidebar__drawer {
    position: fixed; top: 58px; bottom: 0; left: 0; z-index: 70;
    width: min(320px, 86vw);
    display: flex; flex-direction: column; gap: 20px;
    background: var(--navy); padding: 18px 14px 20px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-105%); visibility: hidden;
    border-right: 1px solid var(--dark-line);
    box-shadow: 14px 0 28px rgba(0, 0, 0, .32);
  }
  .sidebar.is-open .sidebar__drawer { transform: translateX(0); visibility: visible; }
  .sidebar__drawer .sidebar__foot {
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--dark-line);
  }
  .sidebar__scrim {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(10, 12, 14, .5);
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  .sidebar__scrim.show { opacity: 1; visibility: visible; pointer-events: auto; }
  .sidebar.is-open .sidebar__burger { position: relative; z-index: 80; }
  .sidebar__collapse { display: none; }
  /* stop the page scrolling behind the open drawer (app.js toggles the class) */
  html.sidebar-lock, html.sidebar-lock body { overflow: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    /* transition transform for the slide; delay visibility so the drawer stays
       painted while it slides back out on close (same trick as the notif tray) */
    .sidebar__drawer { transition: transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s linear .26s; }
    .sidebar.is-open .sidebar__drawer { transition: transform .26s cubic-bezier(.2,.7,.3,1), visibility 0s; }
    .sidebar__scrim { transition: opacity .22s ease, visibility 0s linear .22s; }
    .sidebar__scrim.show { transition: opacity .22s ease, visibility 0s; }
  }
  .shell, .foot { margin-left: 0; }
  .callout--banner { margin-left: 0; }
  /* Banner mode: tray drops out from directly under the sticky top bar (~58px)
     and fills the screen height down to the bottom, right-aligned, 479px wide
     (capped to viewport on narrow phones). The banner sits on top. */
  /* Banner mode closed-state tucks OFF the right edge (translateX(100%)) so the tray
     slides in right-to-left from the screen edge; .open (higher specificity) snaps it
     back to translateX(0). */
  body > .notif-panel { position: fixed; top: 58px; bottom: 0; right: 0; left: auto; width: min(479px, 100vw); max-width: 100vw; max-height: none; border-radius: 0; transform: translateX(100%); border-top: 1px solid var(--tone-800); border-left: 1px solid var(--tone-1000); }
  /* Notifications relocated into the top bar (by app.js) as a bell-only icon,
     sitting left of the burger. Drop the "Notifications" label and square it off
     to match the burger; the unread dot / white bell come from .ico-brand. */
  .sidebar .notif-wrap--bar { width: auto; flex: 0 0 auto; }
  .sidebar .notif-wrap--bar > [data-notif-toggle] {
    width: 42px; height: 42px; padding: 0; gap: 0;
    justify-content: center; font-size: 0; /* hide the trailing "Notifications" text */
  }
  .sidebar .notif-wrap--bar > [data-notif-toggle] .sidebar__ico {
    flex: 0 0 42px; width: 42px; height: 42px;
  }
  /* match the burger: bell glyph at 32×32 in the mobile top bar */
  .sidebar .notif-wrap--bar > [data-notif-toggle] .sidebar__ico svg.ico-brand {
    width: 32px; height: 32px;
  }
}

/* v2: Figma logo is the wordmark only — drop the "Partners" suffix in the rail */
.sidebar__suffix { display: none; }

/* v2: filled status pills (Swiss default) — colours mapped to the named
   Figma palette variables above (per design spec). Scoped to the default
   theme so the concierge/ct-blue themes keep their own chip treatment.
   Trading→Primary, Signed up→Blue, In review→Gold, Activated→Teal,
   Closed/Referred→Tone (Tone/Light/100 read as Tone/100, the lightest tone). */
html:not([data-theme]) .chip {
  border-radius: 4px; padding: 2px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
}
/* pills carrying an inset date sit tight on the right where the date box is */
html:not([data-theme]) .chip:has(.chip__date) { padding: 2px 2px 2px 8px; }
html:not([data-theme]) .chip::before { display: none; }
html:not([data-theme]) .chip--referred,
html:not([data-theme]) .chip--rolled,
html:not([data-theme]) .chip--closed    { background: var(--tone-100);          color: var(--tone-500); }
html:not([data-theme]) .chip--signed,
html:not([data-theme]) .chip--accruing  { background: var(--blue-light-100);    color: var(--blue-main); }
html:not([data-theme]) .chip--docs,
html:not([data-theme]) .chip--review,
html:not([data-theme]) .chip--scheduled { background: var(--gold-light-100);    color: var(--gold-main); }
html:not([data-theme]) .chip--activated { background: var(--teal-light-100);    color: var(--teal-main); }
html:not([data-theme]) .chip--trading,
html:not([data-theme]) .chip--paid      { background: var(--primary-light-100); color: var(--primary-main); }
/* white inset date box to match the Figma pill redesign */
html:not([data-theme]) .chip__date {
  background: #fff; color: inherit; border-radius: 3px;
  padding: 2px 5px 0px 5px; font-weight: 700; font-size: 9px; letter-spacing: .07em;
}