/* ============================================================
 * PSA Internal Platform — design tokens ("pk" = platform kit)
 *
 * Loaded BEFORE main.css. Declares custom properties + a small set of
 * primitives that every NEW surface (Send queue, Audiences, Sent, Cockpit,
 * Client card — the Aug-2026 makeover) inherits. Existing modules are NOT
 * reskinned by this file: main.css keeps its own :root and every existing
 * rule still wins on cascade order. Nothing here changes a current pixel.
 *
 * Phone-first: base rules are the 390px layout; the 768px block adds the
 * desktop row layouts. Media queries cannot read custom properties, so the
 * two breakpoints are written literally — 390 and 768 — everywhere. Do not
 * invent a third.
 *
 * Mobile traps (binding — .claude/rules/frontend.md):
 *  - never overflow-x:hidden on html/body (kills position:sticky); use clip
 *  - setting one overflow axis makes the other a scrollport — name BOTH
 *  - anything sticky to the PAGE uses top:var(--hdr-h); a sticky thead inside
 *    its own scrollport uses top:0
 *  - never set layout in an inline style a media query must override
 *  - position:fixed needs translateZ(0) on iOS, kept through :hover/:active
 * ============================================================ */

:root {
  /* ── Palette (the hexes ARE the palette — no near-misses) ── */
  --pk-navy:    #0a1628;

  /* Chart palettes (16 Sep 2026, Engagement charts) — validated for CVD
     separation and surface contrast (the dataviz six checks). JS reads these
     via getComputedStyle; the quality gate bans raw hexes in modules. */
  --viz-seg-hedge:  #3567ab;   /* client segments, in stack order */
  --viz-seg-inst:   #e06010;
  --viz-seg-trial:  #18a273;
  --viz-seg-other:  #a06ec2;
  --viz-line-ink:   #1a2433;   /* the right-axis line, always */
  --viz-prod-today: #2d8a56;   /* product rings, in Pelham's order */
  --viz-prod-weekly:#2a78d6;
  --viz-prod-strategy:#eda100;
  --viz-prod-report:#c2431f;
  /* Reading routes (2 Oct 2026, Engagement v3), in stack order: emailed link,
     via the weekly, the research site, Bloomberg. Saturated on purpose — email
     is ~90% of reads, and the info slate it first took read as grey (Fred:
     "colours are grey"). The site keeps the "read on the platform" orange. */
  --viz-route-email:  #2563c4;
  --viz-route-weekly: #7c4dcc;
  --viz-route-ib:     #0ea5a4;   /* onward reads from an IB blast's page (30 Oct 2026) */
  --viz-route-package:#64748b;   /* onward reads from a package / catch-up email */
  --viz-route-site:   #e06010;
  --viz-route-bbg:    #0f766e;
  --viz-askb:         #b83280;   /* Bloomberg's AI used our research: never a read, so its own colour, apart from the four routes */
  /* Sales › Analytics (31 Oct 2026, the approved Overview board; validated with the dataviz six checks, all pass):
     reads a day stacked in this order (email, research site, Bloomberg), the paying-firms dots and their quadrants.
     -soft = the other (not paying) firms beside paying ones in a bar; -corner = the "reading, we aren't talking"
     shading; heat-0..5 = the sequential orange ramp of reads a week (0, 1, 2-3, 4-6, 7-10, 11+). */
  --viz-an-email:  #2e64a8;
  --viz-an-site:   #d9661a;
  --viz-an-bbg:    #8b6bb8;
  --viz-an-email-soft: #9fb6d6;
  --viz-an-corner: #fdf3ea;
  --viz-an-heat-0: #f4efe8;
  --viz-an-heat-1: #f9d9b8;
  --viz-an-heat-2: #f2b27a;
  --viz-an-heat-3: #e58a3e;
  --viz-an-heat-4: #c9621a;
  --viz-an-heat-5: #8f420f;
  /* Research site paths (31 Oct 2026, the approved Research site board): a step chip's edge by kind. Signing in, the
     intro and the lists / home are these quiet three; a company page, earnings and a report take the route colours. */
  --viz-an-door:   #a3a7ad;
  --viz-an-intro:  #c9bfb1;
  --viz-an-nav:    #7d93ad;
  /* Sales › Analytics › Interactions (31 Oct 2026, the approved Interactions board; validated): interactions a week
     stacked by kind in this order (calls, meetings, IB chats, emails), and each kind's mark in the log. */
  --viz-an-call:   #2e64a8;
  --viz-an-meet:   #d9661a;
  --viz-an-ib:     #8b6bb8;
  --viz-an-mail:   #1f8a70;
  /* Trackers (12 Oct 2026). The Research door's colours (--pk-door-research, -bg, -dot) come from the
     design kit's door block below (PR #11, landed first). The pale is a flash figure still waiting for
     its final report; grid and zero are the chart's hairlines. */
  --viz-research-pale: #c7c9f9;
  --viz-grid:         #eeeae4;
  --viz-zero:         #c9c3b9;
  --pk-header:  #0f2440;
  --pk-orange:  #e8771a;
  --pk-orange-hover: #d66c14;
  --pk-page:    #f7f4f0;
  --pk-cream:   #f9f7f3;
  --pk-white:   #ffffff;
  --pk-text:    #2b2b2b;
  --pk-muted:   #6b6b6b;
  --pk-border:  #dedad3;
  /* Names modules reached for and this file did not have (3 Sep 2026). An
     undefined var() is invalid at computed-value time, and it fails SILENTLY:
     `border: 1px solid var(--pk-line)` drops the whole shorthand, so the rule
     renders with NO border at all, and `color: var(--pk-orange-text)` simply
     inherits. That is how the Engagement page shipped with none of its hairline
     rules and none of its orange, and the Clients door's new column-filter
     selects lost their borders in the same way. Added as real tokens rather
     than chased through the modules, because the next module will reach for
     them too. Aliases, so nothing that already renders changes. */
  --pk-line:    var(--pk-border);
  --pk-ink:     var(--pk-text);
  /* The two GROUNDS a module needs beside the page's own: what a card sits on,
     and what sits BELOW it (a progress track, a bar's unfilled part, a quiet
     inset note). --pk-surface is deliberately an alias of --pk-card-bg rather
     than a second white: one of them changing and the other not is how a card
     and its own header stop matching. Added 7 Sep 2026 — engagement.js had been
     asking for both since it shipped, so its bar tracks and card grounds were
     rendering as nothing at all. */
  --pk-surface: var(--pk-card-bg);
  --pk-sunken:  #efeae2;
  /* --pk-orange is a FILL. As text on this page's ground it measures ~2.7:1 and
     fails AA; this is the darker orange for anything a person READS. Same split
     the KB carries as --orange / --orange-text. */
  --pk-orange-text: #b35a10;
  --pk-orange-soft: #fff1e3;   /* a pale orange ground: the editor's footnote number (publish/footnote.js) */
  /* THE RESEARCH FAMILY — the document as a client reads it (render.py's
     house format), used wherever a platform page shows the document itself
     inside the platform's own chrome (the Publish sheet). */
  --rs-navy:    #163B5B;
  --rs-orange:  #FF8300;
  --rs-grey:    #7D868C;   /* table row tones (publish/tones.js, 7 Oct 2026): the analyst's grey, green and pale-blue rows */
  --rs-green:   #63A70A;
  --rs-pale:    #DFEBF5;
  --rs-yellow:  #FFF2CC;   /* the light-yellow row tone (YoY rows; Fred, 8 Oct 2026) */
  --rs-ink:     #333E48;
  --rs-on-navy-mut: #cbd5e4;
  --rs-prod:    #7bd88f;
  --rs-font:    'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
  --pk-red:     #c0392b;
  --pk-green:   #27ae60;

  /* Semantic — the states the check strip / attention strip / read bar use */
  --pk-ok:        #2f855a;
  --pk-ok-bg:     #edf7f0;
  --pk-warn:      #c05621;
  --pk-warn-bg:   #fef3e7;
  --pk-bad:       #c0392b;
  --pk-bad-bg:    #fbecea;
  /* The highlighter (Publish, 30 Sep 2026): words someone is working on */
  --pk-hl:        #ffe680;
  --pk-hl-edge:   #d9a800;
  --pk-hl-ink:    #4a3a00;
  --pk-info:      #325774;
  --pk-info-bg:   #eef3f7;
  --pk-read:      var(--pk-orange);      /* "read on the platform" — the only human signal */
  --pk-read-bg:   #fff8ee;
  --pk-dim:       #a0aec0;               /* internal / tucked-away / not-in-CRM */
  /* On-navy surfaces (the name bar, 16 Sep 2026): text and controls that sit
     ON the navy rather than on paper. The gate bans hexes in modules. */
  --pk-on-navy:      #ffffff;
  --pk-on-navy-mut:  #cbd5e4;
  --pk-on-navy-dim:  #93a3b8;
  --pk-on-navy-fill: rgba(255,255,255,.14);
  --pk-danger-deep:  #b3402f;
  --pk-dim-bg:    #f3f4f6;
  /* A reading by the research agent (internal only): the company page's "AI read" (board R05Company, 14 Oct 2026) */
  --pk-ai:        #6a2fa0;
  --pk-ai-bg:     #f1e8fa;
  --pk-ai-tint:   #fbf8fe;

  /* Report-type chips (main.css badge colours, named once) */
  --pk-type-daily:    var(--pk-green);
  --pk-type-weekly:   #1a73e8;
  --pk-type-company:  var(--pk-orange);
  --pk-type-strategy: #7b3fbf;
  /* Reports carries three more report_type values than the Research reskin
     mockup's chip set (Thoughts / FTD / Recap) — named here so no module
     reaches for a literal hex. */
  --pk-type-thoughts: #6b46a3;
  --pk-type-ftd:      #0f766e;
  --pk-type-recap:    #4a5568;
  /* The six sales pods — set 1 "clear jewels, pulled apart" (Fred, 6 Oct 2026: "brown is horrible"; canvas
     G238dv4K page 1, board V2-Pod-Colours). Violet · blue · yellow · orange · green · magenta.
     deep = text, marks and filled buttons with white text (every one >= 4.5:1 on white and on its -bg);
     -bg = tints; -dot = the bright identity colour for rail dots and small marks only, never text.
     Engagement's yellow cannot carry text, so its deep is navy ink and the yellow lives in its -dot and -bg. */
  --pk-pod-record: #4e2fb0;       --pk-pod-record-bg: #f0ebfe;       --pk-pod-record-dot: #6e46d9;
  --pk-pod-interactions: #1d4f96; --pk-pod-interactions-bg: #e7f0fc; --pk-pod-interactions-dot: #2f74d0;
  --pk-pod-engagement: #0f1b33;   --pk-pod-engagement-bg: #fff3c4;   --pk-pod-engagement-dot: #f2b705;
  --pk-pod-desk: #a8400d;         --pk-pod-desk-bg: #fdebe1;         --pk-pod-desk-dot: #ea6a1f;
  --pk-pod-send: #1f6b3c;         --pk-pod-send-bg: #e4f5ea;         --pk-pod-send-dot: #2e9a57;
  --pk-pod-ideas: #96205f;        --pk-pod-ideas-bg: #fce8f2;        --pk-pod-ideas-dot: #c2307e;
  /* The seventh pod, Holdings (6 Oct 2026, plan holdings-pod-2026-10.md): teal, the one hue clear of the six. */
  --pk-pod-holdings: #0b6e78;     --pk-pod-holdings-bg: #e2f5f6;     --pk-pod-holdings-dot: #13a3b0;

  /* ── Type ── */
  --pk-font:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --pk-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  /* The Distribution scale, dropped one notch 26 Aug 2026 (Fred: the approved
     scale read a size too big at full desktop width — the mockups sat in a
     390px frame where it read right). Was 17 / 15.5 / 14 / 12.5 / 22, mono
     floor unchanged: 16 / 15 / 13.5 / 12 / 20. Not a second notch — below
     13.5 body is back to the old "nothing stands out" problem the
     Distribution rebuild existed to fix. */
  --fs-section: 16px;
  --fs-card:    15px;
  --fs-body:    13.5px;
  --fs-meta:    12px;
  --fs-mono:    12px;      /* never smaller than this anywhere — the floor */
  --fs-hero:    20px;      /* the one greeting / page title */
  --lh-tight:   1.25;
  --lh-body:    1.5;

  /* ── Spacing (4-based) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ── Card anatomy ── */
  --card-pad:     var(--sp-4);
  --card-gap:     var(--sp-3);
  --card-radius:  10px;
  --card-border:  1px solid var(--pk-border);
  --pk-card-bg:      var(--pk-white);
  --card-shadow:  0 1px 2px rgba(10,22,40,0.04);
  --card-shadow-raised: 0 6px 20px rgba(10,22,40,0.08);
  --radius-sm:    6px;
  --radius-pill:  999px;

  /* ── Controls ── */
  --ctl-h:        40px;    /* touch-safe minimum on phones */
  --ctl-h-sm:     32px;
  --focus-ring:   0 0 0 3px rgba(232,119,26,0.28);

  /* ── Layout ── */
  --hdr-h:        48px;    /* sticky app header on phone (48px since the phone layer, 31 Oct 2026; was 52): ONE row (brand-or-title · search · you) — re-declared 104px in the 768 block */
  --pk-bottombar-h: 62px;  /* phone bottom tab bar (incl. its own bottom padding) — unused ≥768 */
  --page-pad:     var(--sp-4);
  --content-max:  1680px;
  --bp-phone:     390px;   /* readable from JS via getComputedStyle; CSS writes the literal */
  --bp-tablet:    768px;

  /* ── Motion ── */
  --t-fast: 120ms ease;
  --t-base: 180ms ease;
}

/* ── Desktop (≥768) overrides ─────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --page-pad:  28px;
    --card-pad:  var(--sp-5);
    --hdr-h:     104px;    /* desktop header is still two rows (64+40); the phone header collapsed to one 52px row 26 Aug 2026 — change the base value above, not this one */
  }
}

/* ============================================================
 * Utilities — the mobile rules as classes, so a new module reaches
 * for the right thing instead of re-learning the trap.
 * ============================================================ */

/* Clip horizontal overflow WITHOUT becoming a scroll container (safe for sticky
   descendants). The `hidden` line is the pre-iOS-16 fallback; clip wins where
   supported. Never apply this to html or body. */
.pk-clip-x { overflow-x: hidden; overflow-x: clip; }

/* A vertical scrollport that names BOTH axes — one axis alone makes the other
   a scrollport too and grows a phantom horizontal bar. Pair with minmax(0,1fr)
   on the grid track that holds it. */
.pk-scroll-y { overflow-y: auto; overflow-x: hidden; overflow-x: clip; -webkit-overflow-scrolling: touch; min-height: 0; }

/* Wide content (tables) scrolls inside its own box; the page never scrolls sideways. */
.pk-scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* Sticky to the PAGE scrollport — offset by the app header. */
.pk-sticky-page { position: sticky; top: var(--hdr-h); z-index: 5; }

/* Sticky inside its OWN scrollport (a thead in a .pk-scroll-y wrapper). */
.pk-sticky-own { position: sticky; top: 0; z-index: 2; }

/* Fixed elements on iOS need their own compositor layer, and must keep it through hover/active. */
.pk-fixed, .pk-fixed:hover, .pk-fixed:active { position: fixed; transform: translateZ(0); }

/* Truncate one line; always pair with a title="" on the element. */
.pk-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Phone-only / desktop-only visibility — a modifier class, never an inline style. */
/* !important on purpose: these are absolute modifiers, and the primitives
   below (.pk-stack{display:flex}, .pk-row, .pk-card...) plus every module's
   injected sheet load AFTER this rule at the same specificity - a phone-only
   .pk-stack leaked its cards onto desktop above the Staff table (26 Aug 2026).
   `revert` not `initial`: initial = inline, which turns a table element into an
   inline-table that ignores width:100% (the People-table bug). */
@media (max-width: 767px) { .pk-desktop-only { display: none !important; } }
@media (min-width: 768px) {
  /* no desktop rule for .pk-desktop-only: elements keep their own display */
  .pk-phone-only   { display: none !important; }
}

/* ============================================================
 * Primitives — the card anatomy every makeover surface shares.
 * Phone-first: one column, full-width primary action; the 768 block
 * lays the head out as a row.
 * ============================================================ */

.pk-page   { font-family: var(--pk-font); color: var(--pk-text); font-size: var(--fs-body); line-height: var(--lh-body); }
.pk-h1     { font-size: var(--fs-hero);    font-weight: 700; letter-spacing: -0.01em; line-height: var(--lh-tight); color: var(--pk-navy); margin: 0; }
.pk-h2     { font-size: var(--fs-section); font-weight: 700; line-height: var(--lh-tight); color: var(--pk-navy); margin: 0; }
.pk-meta   { font-size: var(--fs-meta); color: var(--pk-muted); }
.pk-mono   { font-family: var(--pk-font-mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; }
.pk-muted  { color: var(--pk-muted); }

.pk-stack  { display: flex; flex-direction: column; gap: var(--card-gap); }
.pk-row    { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }

/* Card */
.pk-card {
  background: var(--pk-card-bg); border: var(--card-border); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow); padding: var(--card-pad);
  display: flex; flex-direction: column; gap: var(--card-gap); min-width: 0;
}
.pk-card--attention { border-color: var(--pk-warn); background: var(--pk-warn-bg); }
.pk-card--dim       { border-style: dashed; background: transparent; color: var(--pk-muted); box-shadow: none; }
.pk-card-head  { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.pk-card-title { font-size: var(--fs-card); font-weight: 600; line-height: var(--lh-tight); color: var(--pk-navy); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pk-card-meta  { font-size: var(--fs-meta); color: var(--pk-muted); }
.pk-card-foot  { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--pk-border); }
@media (min-width: 768px) {
  .pk-card-head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
  .pk-card-foot { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* Type chip (Daily / Weekly / Company / Strategy) */
.pk-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: var(--radius-pill); font-size: var(--fs-mono); font-weight: 600; letter-spacing: 0.02em;
  background: var(--pk-dim-bg); color: var(--pk-muted); white-space: nowrap;
}
.pk-chip--daily    { background: #e9f7ee; color: var(--pk-type-daily); }
.pk-chip--weekly   { background: #e8f0fd; color: var(--pk-type-weekly); }
.pk-chip--company  { background: var(--pk-read-bg); color: var(--pk-type-company); }
.pk-chip--strategy { background: #f1e9fb; color: var(--pk-type-strategy); }
.pk-chip--warn     { background: var(--pk-warn-bg); color: var(--pk-warn); }
.pk-chip--bad      { background: var(--pk-bad-bg);  color: var(--pk-bad); }
.pk-chip--ok       { background: var(--pk-ok-bg);   color: var(--pk-ok); }
.pk-chip--thoughts { background: #efeaf7; color: var(--pk-type-thoughts); }
.pk-chip--ftd      { background: #e6f5f3; color: var(--pk-type-ftd); }
.pk-chip--recap    { background: var(--pk-dim-bg); color: var(--pk-type-recap); }

/* Filter-chip row — a horizontally-scrolling row of toggle pills (type,
   sendable-only, etc). The Research reskin's shared filter control —
   every table page (Reports sets the pattern) uses this, not a bespoke row. */
.pk-chips { display: flex; gap: var(--sp-2); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.pk-chips::-webkit-scrollbar { display: none; }
.pk-filter-chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 var(--sp-3);
  border-radius: var(--radius-pill); border: 1px solid var(--pk-border); background: var(--pk-white);
  color: var(--pk-muted); font-family: var(--pk-font); font-size: var(--fs-meta); font-weight: 600;
  white-space: nowrap; cursor: pointer; flex: none;
}
.pk-filter-chip.on { background: var(--pk-navy); border-color: var(--pk-navy); color: var(--pk-white); }

/* A compact "row of facts" list inside a card — the phone row->card pattern
   (Reports sets it; any similar summary list reuses it). */
.pk-list-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--pk-border); min-width: 0; }
.pk-list-row:first-child { border-top: none; padding-top: 0; }
.pk-list-kv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Data table — one sticky navy head, tabular mono numbers right-aligned.
   Always wrap in .pk-scroll-x (its own scrollport, so the thead sticks to
   IT, not the page — see the frontend.md overflow-axis trap). Sets the
   pattern for every Shape-A table page in the Research reskin. */
.pk-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.pk-tbl th { position: sticky; top: 0; z-index: 2; background: var(--pk-navy); color: var(--pk-white); font-weight: 600; text-align: left; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-mono); letter-spacing: 0.02em; white-space: nowrap; }
.pk-tbl th.sortable { cursor: pointer; }
.pk-tbl td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--pk-border); vertical-align: top; }
.pk-tbl tbody tr:hover { background: rgba(232, 119, 26, 0.04); }
.pk-tbl td.num, .pk-tbl th.num { font-family: var(--pk-font-mono); font-size: var(--fs-mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Check strip — the pre-send check screen folded into the card.
   Green dots you can ignore; an amber dot carries the one sentence worth reading. */
.pk-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-meta); color: var(--pk-muted); }
.pk-strip-item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pk-ok); flex: none; }
.pk-dot--warn { background: var(--pk-warn); }
.pk-dot--off { background: var(--pk-dim); }
.pk-dot--bad  { background: var(--pk-bad); }
.pk-dot--dim  { background: var(--pk-dim); }
.pk-strip-item--warn { color: var(--pk-warn); }
.pk-strip-item--bad  { color: var(--pk-bad); font-weight: 600; }

/* Attention strip — the page's own queue (bounces, failures); not rendered when empty. */
.pk-attention {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--pk-warn-bg); border: 1px solid var(--pk-warn); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); color: var(--pk-text);
}
@media (min-width: 768px) { .pk-attention { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); } }

/* Buttons — one primary per card, verbs in a quiet corner. */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--ctl-h); padding: 0 var(--sp-4); border-radius: var(--radius-sm);
  font-family: var(--pk-font); font-size: var(--fs-body); font-weight: 600; line-height: 1;
  border: 1px solid var(--pk-border); background: var(--pk-white); color: var(--pk-navy);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  width: 100%;
}
.pk-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pk-btn--primary { background: var(--pk-orange); border-color: var(--pk-orange); color: var(--pk-white); }
.pk-btn--primary:hover:not(:disabled) { background: #d66c14; border-color: #d66c14; }
.pk-btn--quiet { border-color: transparent; background: transparent; color: var(--pk-muted); font-weight: 500; }
.pk-btn--quiet:hover:not(:disabled) { color: var(--pk-navy); background: var(--pk-cream); }
.pk-btn--sm { min-height: var(--ctl-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-meta); }
@media (min-width: 768px) { .pk-btn { width: auto; } }

/* Inline click-to-edit (the editing principle): a visible pencil, entered deliberately. */
.pk-editable { position: relative; cursor: text; border-radius: 4px; padding: 2px 22px 2px 4px; margin: -2px -4px; transition: background var(--t-fast); }
.pk-editable::after { content: '✎'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--pk-dim); }
.pk-editable:hover { background: var(--pk-cream); }
.pk-editable:hover::after { color: var(--pk-muted); }
.pk-editable.is-editing { background: var(--pk-white); box-shadow: var(--focus-ring); padding-right: 4px; }
.pk-editable.is-editing::after { content: none; }

/* Inputs */
.pk-input, .pk-textarea, .pk-select {
  width: 100%; min-height: var(--ctl-h); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--pk-border); border-radius: var(--radius-sm); background: var(--pk-white);
  font-family: var(--pk-font); font-size: 16px; /* 16 = no iOS zoom on focus; desktop scales it back below */
  color: var(--pk-text);
}
.pk-input:focus, .pk-textarea:focus, .pk-select:focus { outline: none; border-color: var(--pk-navy); box-shadow: var(--focus-ring); }
.pk-textarea { min-height: 72px; resize: vertical; line-height: var(--lh-body); }
@media (min-width: 768px) { .pk-input, .pk-textarea, .pk-select { font-size: var(--fs-body); } }
/* .pk-input/.pk-select default to width:100% (a full-width form field, the
   common case) — but paired with .pk-btn--sm they're a small control meant
   to sit INLINE beside buttons in a .pk-row toolbar (e.g. a date-stepper's
   <input type="date">), and width:100% there fights every sibling for the
   row's full space instead of shrinking to its own content. A flex item
   with an explicit width also has no min-width:0 by default, so it can't
   shrink below that 100% even when the row has no room — the row (and the
   page) grows wider than the viewport instead. Found live on Distribution →
   Send's date stepper at ~1400-1700px (26 Aug desktop walk) — the only
   place this combination is used, but the rule is written generally so any
   future one doesn't regress the same way. */
.pk-input.pk-btn--sm, .pk-select.pk-btn--sm { width: auto; min-width: 0; }

/* Layered funnel bar: delivered ⊇ opened ⊇ read — draw widest first, nested. */
.pk-funnel { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--pk-dim-bg); overflow: hidden; }
.pk-funnel > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-pill); }
.pk-funnel-delivered { background: #cbd5e0; }
.pk-funnel-opened    { background: var(--pk-info); }
.pk-funnel-read      { background: var(--pk-read); }

/* Empty state — "genuinely nothing needs you", said plainly. */
.pk-empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--pk-muted); font-size: var(--fs-body); border: 1px dashed var(--pk-border); border-radius: var(--card-radius); }

/* ============================================================
 * Shape B — the reading page (Call Transcripts sets the pattern; every
 * other reading page in the Research reskin — Management Q&A, Small/Mid,
 * Themes — reuses these same primitives).
 * ============================================================ */

/* Breadcrumb back to the list. */
.pk-crumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); color: var(--pk-muted); }
.pk-crumb-back { color: var(--pk-muted); background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.pk-crumb-back:hover { color: var(--pk-orange); }
.pk-crumb-current { color: var(--pk-navy); font-weight: 600; }

/* Speaker legend — a coloured dot per person, the key to the prose's
   colour-coded names. */
.pk-spk-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-meta); color: var(--pk-muted); }
.pk-spk { display: inline-flex; align-items: center; gap: 6px; }
.pk-spk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* The reading-page prose card — an orange rail marks PSA's own words; 62ch
   measure at every width (desktop gets margins, not wider lines). */
.pk-read { border-left: 4px solid var(--pk-orange); }
.pk-read p { margin: 0 0 var(--sp-3); max-width: 62ch; line-height: 1.6; }
.pk-read p:last-child { margin-bottom: 0; }
.pk-read h4 { font-size: var(--fs-card); font-weight: 700; color: var(--pk-navy); margin: var(--sp-4) 0 var(--sp-2); }
.pk-read h4:first-child { margin-top: 0; }
.pk-co { color: var(--pk-orange); font-weight: 700; text-decoration: none; }
.pk-px { color: var(--pk-text); white-space: nowrap; font-size: var(--fs-meta); }

/* ============================================================
 * THE DESIGN KIT, PHASE 0 (10 Oct 2026). Plan of record:
 * .claude/plans/design-kit-2026-10.md; pictures on the kit canvas
 * (https://claude.ai/artifact/Amp2ACutufTeFZeZ8uZugM, boards 3, 5, 6 and 7).
 * Tokens and pieces only: nothing here restyles an existing page until a
 * page opts in by using these names.
 * ============================================================ */
:root {
  /* Layer 3, a colour per DOOR: deep = text and marks, -bg = tints, -dot = the
     bright mark only (never text). Shown ONLY as the menu dot, the rule under
     the page title, the door's own chips and its charts' main series. Sales
     uses the seven --pk-pod-* colours above. */
  --pk-door-research: #3730a3;   --pk-door-research-bg: #eceafd;   --pk-door-research-dot: #6366f1;
  --pk-door-publish: #163b5b;    --pk-door-publish-bg: #e3ebf3;    --pk-door-publish-dot: #ff8300;
  --pk-door-finance: #8a5a00;    --pk-door-finance-bg: #fbf0d9;    --pk-door-finance-dot: #c98a12;
  --pk-door-compliance: #3d4f63; --pk-door-compliance-bg: #e9eef3; --pk-door-compliance-dot: #6b8299;
  --pk-door-admin: #4a5568;      --pk-door-admin-bg: #f3f4f6;      --pk-door-admin-dot: #a0aec0;

  /* Layer 4, what a thing IS. Each means one thing, everywhere. */
  /* Finance: this year's actual is the door's bronze; the budget is a dashed
     navy OUTLINE (never a fill); last year is a faded bronze; cash in and out
     are deliberately not the status green and red (spending is not an error). */
  --viz-fin-actual:   var(--pk-door-finance);
  --viz-fin-budget:   var(--pk-navy);
  --viz-fin-lastyear: #d9c9a3;
  --viz-fin-in:       #0f766e;
  --viz-fin-out:      #b3402f;
  /* Disclosure families (the News Desk's colours, named once so every page
     that shows a filing uses the same ones; the map is routers/news/families.py). */
  --pk-fam-results: #166534;     --pk-fam-results-bg: #dcfce7;
  --pk-fam-guidance: #1e40af;    --pk-fam-guidance-bg: #dbeafe;
  --pk-fam-capital: #6d28d9;     --pk-fam-capital-bg: #ede9fe;
  --pk-fam-ownership: #9a4d09;   --pk-fam-ownership-bg: #ffe7cf;
  --pk-fam-mna: #b91c1c;         --pk-fam-mna-bg: #fee2e2;
  --pk-fam-material: #7a5a00;    --pk-fam-material-bg: #fdf3d8;
  --pk-fam-governance: #4a5568;  --pk-fam-governance-bg: #f3f4f6;
  /* Model numbers: whose number it is. Reported years are plain. */
  --pk-src-estimate: var(--pk-orange-text);  --pk-src-estimate-bg: var(--pk-read-bg);
  --pk-src-consensus: #4a5568;               --pk-src-consensus-bg: var(--pk-dim-bg);
  --pk-src-guidance: var(--pk-info);         --pk-src-guidance-bg: var(--pk-info-bg);
  /* Up / down. Always with a sign and an arrow, never colour alone. */
  --pk-up: var(--pk-ok);
  --pk-down: var(--pk-bad);

  --pk-font-jp: 'Noto Sans JP', var(--pk-font);
  --prose-max: 75ch;   /* the ONLY width limit on a page: a paragraph of reading text */
}

/* ── Width (board 7): every page is full width. Grids reflow on their own. ── */
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--card-gap); }
.pk-prose { max-width: var(--prose-max); }
/* Wide (1440 and up) only ever ADDS a column: a page with a side panel puts it
   in .pk-aside, which sits under the main column below 1440. */
.pk-with-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
@media (min-width: 1440px) { .pk-with-aside { grid-template-columns: minmax(0, 1fr) minmax(320px, 26%); } }

/* ── Page header (board 3): crumb, title, at most one orange button, one source line ── */
.pk-page-head { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-4); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--pk-border); }
.pk-page-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.pk-page-head-rule { height: 3px; width: 72px; background: var(--pk-door, var(--pk-orange)); border-radius: 2px; }
.pk-page-head-src { font-size: var(--fs-meta); color: var(--pk-muted); }
/* A page names its door ONCE, with a modifier class on its root (never an inline style). */
.pk-door-research   { --pk-door: var(--pk-door-research-dot);   --pk-door-bg: var(--pk-door-research-bg); }
.pk-door-publish    { --pk-door: var(--pk-door-publish-dot); --pk-door-bg: var(--pk-door-publish-bg); }
.pk-door-finance    { --pk-door: var(--pk-door-finance-dot); --pk-door-bg: var(--pk-door-finance-bg); }
.pk-door-compliance { --pk-door: var(--pk-door-compliance-dot); --pk-door-bg: var(--pk-door-compliance-bg); }
.pk-door-admin      { --pk-door: var(--pk-door-admin-dot);  --pk-door-bg: var(--pk-door-admin-bg); }

/* ── Sub-tabs: switch what the page is about (round .pk-filter-chip narrows a list) ── */
.pk-tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--pk-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pk-tabs::-webkit-scrollbar { display: none; }
.pk-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--sp-3) 0; margin-bottom: -1px; font: inherit; font-size: var(--fs-body); font-weight: 500; color: var(--pk-muted); cursor: pointer; white-space: nowrap; min-height: var(--ctl-h); }
.pk-tab:hover { color: var(--pk-navy); }
.pk-tab.on, .pk-tab[aria-selected="true"] { color: var(--pk-navy); font-weight: 600; border-bottom-color: var(--pk-orange); }
.pk-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Number tiles: joined; amber only when the number needs someone ── */
.pk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--pk-border); border-radius: var(--card-radius); overflow: hidden; background: var(--pk-card-bg); }
@media (min-width: 768px) { .pk-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.pk-tile { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-right: 1px solid var(--pk-border); border-bottom: 1px solid var(--pk-border); margin: 0 -1px -1px 0; min-width: 0; }
.pk-tile-label { font-size: var(--fs-meta); color: var(--pk-muted); }
.pk-tile-num { font-family: var(--pk-font-mono); font-size: var(--fs-hero); font-weight: 600; color: var(--pk-navy); font-variant-numeric: tabular-nums; }
.pk-tile-note { font-size: var(--fs-meta); color: var(--pk-muted); }
.pk-tile--attention { background: var(--pk-warn-bg); }
.pk-tile--attention .pk-tile-label, .pk-tile--attention .pk-tile-num, .pk-tile--attention .pk-tile-note { color: var(--pk-warn); }

/* ── Modal: a card over a dimmed page; a full-screen sheet on a phone ── */
.pk-modal-back { position: fixed; inset: 0; z-index: 1000; background: rgba(10,22,40,0.45); display: flex; align-items: stretch; justify-content: center; transform: translateZ(0); }
.pk-modal { background: var(--pk-card-bg); width: 100%; display: flex; flex-direction: column; overflow: hidden; }
.pk-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--pk-border); }
.pk-modal-title { font-size: var(--fs-section); font-weight: 700; color: var(--pk-navy); margin: 0; }
.pk-modal-body { padding: var(--sp-4); overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; }
.pk-modal-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--pk-border); }
@media (min-width: 768px) {
  .pk-modal-back { align-items: center; padding: var(--sp-6); }
  .pk-modal { max-width: 640px; max-height: 85vh; border-radius: var(--card-radius); box-shadow: var(--card-shadow-raised); }
  .pk-modal--wide { max-width: 960px; }
}

/* ── Board 5, piece 1: a company, the same everywhere ── */
.pk-company { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.pk-company-code { font-family: var(--pk-font-mono); font-size: var(--fs-mono); font-weight: 600; color: var(--pk-white); background: var(--pk-navy); padding: 2px 8px; border-radius: var(--radius-sm); flex: none; }
.pk-company-name { font-weight: 600; color: var(--pk-navy); }
.pk-company-jp { font-family: var(--pk-font-jp); font-size: var(--fs-meta); color: var(--pk-muted); }

/* ── Piece 2: up and down. The arrow and sign are in the text, not CSS. ── */
.pk-delta { font-family: var(--pk-font-mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-delta--up { color: var(--pk-up); }
.pk-delta--down { color: var(--pk-down); }
.pk-delta--none { color: var(--pk-muted); }

/* ── Piece 3: where this came from, and when ── */
.pk-src { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-meta); color: var(--pk-muted); }
.pk-src-tag { font-family: var(--pk-font-mono); font-size: var(--fs-mono); font-weight: 600; padding: 1px 8px; border-radius: var(--radius-sm); background: var(--pk-info-bg); color: var(--pk-info); }
.pk-src-tag--ai { background: var(--pk-dim-bg); color: var(--pk-src-consensus); }

/* ── Piece 4: the company said / PSA thinks. PSA's view is never inside a filing card. ── */
.pk-fact { border: 1px solid var(--pk-border); border-radius: var(--card-radius); padding: var(--sp-3) var(--sp-4); background: var(--pk-card-bg); }
.pk-psa-view { border-radius: var(--card-radius); padding: var(--sp-3) var(--sp-4); background: var(--pk-navy); color: var(--pk-on-navy); }
.pk-psa-view .pk-meta, .pk-psa-view-by { color: var(--pk-on-navy-mut); font-size: var(--fs-meta); }

/* ── Piece 5: the dense table, for models, Finance and the Matrix (still 12px) ── */
.pk-tbl--dense th { padding: 5px var(--sp-2); }
.pk-tbl--dense td { padding: 4px var(--sp-2); }
.pk-tbl td.est { background: var(--pk-src-estimate-bg); }
/* A wide table scrolls in its OWN box with the first column fixed; the page never scrolls sideways. */
.pk-tbl-box { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; border: 1px solid var(--pk-border); border-radius: var(--card-radius); }
.pk-tbl-box .pk-tbl th:first-child, .pk-tbl-box .pk-tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--pk-card-bg); }
.pk-tbl-box .pk-tbl thead th:first-child { z-index: 3; background: var(--pk-navy); }

/* ── Piece 6: one chart frame ── */
.pk-chart { border: 1px solid var(--pk-border); border-radius: var(--card-radius); padding: var(--sp-3) var(--sp-4); background: var(--pk-card-bg); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.pk-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pk-chart-title { font-size: var(--fs-body); font-weight: 600; color: var(--pk-navy); margin: 0; }
.pk-chart-foot { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-meta); color: var(--pk-muted); }

/* ── Piece 7: every page ends in its next step ── */
.pk-next { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); padding: var(--sp-3) var(--sp-4); background: var(--pk-cream); border: 1px solid var(--pk-border); border-radius: var(--card-radius); }

/* ── Door / family / source chips ── */
.pk-chip--door { background: var(--pk-door-bg, var(--pk-dim-bg)); color: var(--pk-navy); }
.pk-chip--results { background: var(--pk-fam-results-bg); color: var(--pk-fam-results); }
.pk-chip--guidance { background: var(--pk-fam-guidance-bg); color: var(--pk-fam-guidance); }
.pk-chip--capital { background: var(--pk-fam-capital-bg); color: var(--pk-fam-capital); }
.pk-chip--ownership { background: var(--pk-fam-ownership-bg); color: var(--pk-fam-ownership); }
.pk-chip--mna { background: var(--pk-fam-mna-bg); color: var(--pk-fam-mna); }
.pk-chip--material { background: var(--pk-fam-material-bg); color: var(--pk-fam-material); }
.pk-chip--governance { background: var(--pk-fam-governance-bg); color: var(--pk-fam-governance); }
.pk-chip--estimate { background: var(--pk-src-estimate-bg); color: var(--pk-src-estimate); }
.pk-chip--consensus { background: var(--pk-src-consensus-bg); color: var(--pk-src-consensus); }
.pk-chip--guide { background: var(--pk-src-guidance-bg); color: var(--pk-src-guidance); }

/* ══ The ticked look (Fred, 12 Oct 2026, kit canvas boards 13 + 17) ══════════════════════════
   The Sales pods' pieces folded into the kit, in the HOUSE colours: navy for text and a chosen
   filter, orange for the main button and the open page or tab (.pk-btn--primary, .pk-tab.on), and
   ONE light colour per page, a "touch", used only on the page's dot in the door's row of pages, its
   kicker, its "needs you" band and its tags. Pages of a door sit in the row under the doors (the
   .sub-nav row, option B) on every door; no side rail. Filing families and model sources keep their
   own colours because they mean something. */
:root {
  --pk-line-soft: #eee6db;   /* a hairline between rows inside a white panel */
}
/* A page's touch: put ONE of these on the page's root. Sales pages use their pod colour; other
   doors' pages take one from the same set (Research's Results = indigo). */
.pk-pg-record   { --pk-pg: var(--pk-pod-record);       --pk-pg-bg: var(--pk-pod-record-bg);       --pk-pg-dot: var(--pk-pod-record-dot); }
.pk-pg-ix       { --pk-pg: var(--pk-pod-interactions); --pk-pg-bg: var(--pk-pod-interactions-bg); --pk-pg-dot: var(--pk-pod-interactions-dot); }
.pk-pg-eng      { --pk-pg: var(--pk-pod-engagement);   --pk-pg-bg: var(--pk-pod-engagement-bg);   --pk-pg-dot: var(--pk-pod-engagement-dot); }
.pk-pg-desk     { --pk-pg: var(--pk-pod-send);         --pk-pg-bg: var(--pk-pod-send-bg);         --pk-pg-dot: var(--pk-pod-send-dot); }  /* Desk took over Send; orange is the main button */
.pk-pg-ideas    { --pk-pg: var(--pk-pod-ideas);        --pk-pg-bg: var(--pk-pod-ideas-bg);        --pk-pg-dot: var(--pk-pod-ideas-dot); }
.pk-pg-holdings { --pk-pg: var(--pk-pod-holdings);     --pk-pg-bg: var(--pk-pod-holdings-bg);     --pk-pg-dot: var(--pk-pod-holdings-dot); }
.pk-pg-indigo   { --pk-pg: var(--pk-door-research);    --pk-pg-bg: var(--pk-door-research-bg);    --pk-pg-dot: var(--pk-door-research-dot); }

/* Page head: a mono kicker in the page's touch over a heavy title (replaces the 72px dot rule). */
.pk-kick  { font: 700 var(--fs-meta) var(--pk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pk-pg, var(--pk-muted)); }
.pk-title { margin: 4px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--pk-navy); }
.pk-lede  { font-size: 14px; color: var(--pk-text); margin-top: 4px; max-width: 75ch; line-height: var(--lh-body); }
@media (max-width: 768px) { .pk-title { font-size: 22px; } }

/* "Needs you": one tinted band, a bold count, one button. */
.pk-needs { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 14px var(--sp-4); background: var(--pk-pg-bg, var(--pk-cream)); border-radius: 14px; }
.pk-needs > b { font-size: var(--fs-section); color: var(--pk-pg, var(--pk-navy)); }
.pk-needs > .gap { flex: 1; }

/* One white surface per working area; never a surface inside a surface. */
.pk-surface-box { background: var(--pk-white); border: 1px solid var(--pk-border); border-radius: 16px; padding: var(--sp-5); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pk-surface-box .pk-surface-box { border: 0; padding: 0; border-radius: 0; }
@media (max-width: 768px) { .pk-surface-box { padding: 14px; border-radius: 14px; } }

/* A tag in the page's touch (a row's type). */
.pk-tag { display: inline-flex; align-items: center; font-size: var(--fs-meta); font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--pk-pg-bg, var(--pk-cream)); color: var(--pk-pg, var(--pk-text)); white-space: nowrap; }
.pk-tag--plain { background: var(--pk-cream); color: var(--pk-text); }

/* The light table: mono grey header, hairline rows. The navy .pk-tbl header stays for dense number grids. */
.pk-tbl--light th { background: transparent; color: var(--pk-muted); font: 600 var(--fs-meta) var(--pk-font-mono); letter-spacing: .08em; text-transform: uppercase; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--pk-border); }
.pk-tbl--light td { border-bottom: 1px solid var(--pk-line-soft); padding: var(--sp-3); font-size: 14px; }
.pk-tbl--light tr:last-child td { border-bottom: 0; }
.pk-tbl--light td.d { font: 500 var(--fs-meta) var(--pk-font-mono); color: var(--pk-muted); white-space: nowrap; }

/* The big search box. */
.pk-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 var(--sp-4); border: 1.5px solid var(--pk-border); border-radius: 12px; background: var(--pk-white); font-size: 15px; }
.pk-search:focus-within { border-color: var(--pk-navy); }

/* A row opened in place: the one lifted thing on a flat page. */
.pk-open { margin: 2px 0 var(--sp-2); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--pk-border); border-radius: 16px; background: var(--pk-white); box-shadow: 0 10px 30px rgba(15,27,51,.10); display: flex; flex-direction: column; gap: var(--sp-3); }

/* A form from the right: fixed head and foot, body scrolls. A full-height sheet on a phone. */
.pk-side { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 900; background: var(--pk-white); border-left: 1px solid var(--pk-border); box-shadow: -18px 0 40px rgba(15,27,51,.14); display: flex; flex-direction: column; }
.pk-side-head { display: flex; align-items: center; gap: var(--sp-3); padding: 18px var(--sp-6) 14px; border-bottom: 1px solid var(--pk-line-soft); }
.pk-side-head > b { font-size: var(--fs-hero); font-weight: 800; color: var(--pk-navy); flex: 1; }
.pk-side-body { padding: var(--sp-4) var(--sp-6); display: flex; flex-direction: column; gap: 18px; flex: 1; overflow-y: auto; overflow-x: hidden; }
.pk-side-foot { display: flex; gap: 10px; padding: 14px var(--sp-6) 18px; border-top: 1px solid var(--pk-line-soft); }

/* A list and the chosen item side by side, in the page (not sliding in). One column on a phone. */
.pk-split { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); background: var(--pk-white); border: 1px solid var(--pk-border); border-radius: 16px; overflow: hidden; min-width: 0; }
.pk-split-list { border-right: 1px solid var(--pk-border); display: flex; flex-direction: column; min-width: 0; }
.pk-split-item { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--pk-line-soft); font-size: 14px; color: var(--pk-text); cursor: pointer; }
.pk-split-item.on { background: var(--pk-pg-bg, var(--pk-cream)); box-shadow: inset 3px 0 0 var(--pk-orange); }
.pk-split-detail { padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 768px) { .pk-split { grid-template-columns: minmax(0, 1fr); } .pk-split-list { border-right: 0; } }

/* Four key figures in a strip, each with a mono label. Two per row on a phone. */
.pk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--pk-border); border-radius: 12px; overflow: hidden; }
.pk-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-left: 1px solid var(--pk-line-soft); font-size: 14px; font-weight: 600; color: var(--pk-navy); }
.pk-facts > div:first-child { border-left: 0; }
.pk-facts small { font: 600 var(--fs-meta) var(--pk-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pk-muted); }
@media (max-width: 768px) { .pk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A week of sends: five day columns; grey = automatic, touch = waiting for you, dashed = drafted later. */
.pk-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--pk-white); border: 1px solid var(--pk-border); border-radius: 16px; overflow: hidden; }
.pk-week-day { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-left: 1px solid var(--pk-line-soft); min-height: 150px; min-width: 0; }
.pk-week-day:first-child { border-left: 0; }
.pk-week-day > b { font: 600 var(--fs-meta) var(--pk-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pk-muted); }
.pk-week-day.today > b { color: var(--pk-orange-text); }
.pk-ev { font-size: var(--fs-meta); font-weight: 600; padding: 6px var(--sp-2); border-radius: 8px; background: var(--pk-sunken); color: var(--pk-text); border: 1px solid transparent; }
.pk-ev--wait { background: var(--pk-pg-bg, var(--pk-cream)); color: var(--pk-pg, var(--pk-navy)); }
.pk-ev--later { background: transparent; border: 1px dashed var(--pk-border); color: var(--pk-muted); }
@media (max-width: 768px) { .pk-week { grid-template-columns: minmax(0, 1fr); } .pk-week-day { border-left: 0; border-top: 1px solid var(--pk-line-soft); min-height: 0; } }

/* What will be sent: a preview of an email. Its footer carries the FCA line from the constant, never typed. */
.pk-mail { background: var(--pk-white); border: 1px solid var(--pk-border); border-radius: 12px; overflow: hidden; max-width: 640px; font-size: 14px; }
.pk-mail-logo { background: var(--pk-header); color: var(--pk-white); padding: var(--sp-3) 18px; font-weight: 700; }
.pk-mail-subject { padding: 14px 18px 6px; font-size: var(--fs-section); font-weight: 700; color: var(--pk-navy); }
.pk-mail-body { padding: 6px 18px; line-height: var(--lh-body); }
.pk-mail-foot { margin-top: 10px; padding: var(--sp-3) 18px; border-top: 1px solid var(--pk-line-soft); font-size: var(--fs-meta); color: var(--pk-muted); line-height: var(--lh-body); }
/* The row of pages under the doors: a page's light colour is its dot (app.js SUBNAV_DOTS sets --pk-dot). */
.sub-nav-tab[style*="--pk-dot"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pk-dot, var(--pk-border)); margin-right: 7px; vertical-align: 1px; }

/* ══ One look across the redrawn pages (Fred, 13 Oct 2026: "a bit more consistent and nicer") ══
   Settled the same day: every section of a page is ONE white panel with its heading; never a panel
   inside a panel. The page canvas carries the same rules (its pk-shell.css section 19). */
.pk-section { background: var(--pk-white); border: 1px solid var(--pk-border); border-radius: 14px; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.pk-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--pk-line-soft); }
.pk-section-head > h2 { margin: 0; font-size: var(--fs-section); font-weight: 800; color: var(--pk-navy); letter-spacing: -.01em; }
.pk-section-head > span { font-size: var(--fs-meta); color: var(--pk-muted); }
/* Anything framed that lands inside a section loses its frame; a strip keeps only hairlines. */
.pk-section :is(.pk-section, .pk-surface-box, .pk-card, .pk-chart, .pk-fact) { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
.pk-section :is(.pk-tiles, .pk-facts) { border: 0; border-radius: 0; border-top: 1px solid var(--pk-line-soft); border-bottom: 1px solid var(--pk-line-soft); background: transparent; }
.pk-section .pk-tbl { background: transparent; }
@media (max-width: 768px) { .pk-section { padding: 14px; } }

/* The chosen row of a table: cream with an orange edge, the same as a chosen list item (.pk-split-item.on). */
.pk-tbl tr.on > td { background: var(--pk-cream); }
.pk-tbl tr.on > td:first-child { box-shadow: inset 3px 0 0 var(--pk-orange); }

/* Counts you can click to filter (a firm's people, the Desk's kinds): a chosen count is navy, like .pk-filter-chip.on. */
.pk-counts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pk-count { display: flex; flex-direction: column; gap: 2px; min-width: 96px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--pk-border); border-radius: 10px; background: var(--pk-white); font: inherit; font-size: var(--fs-meta); color: var(--pk-muted); text-align: left; cursor: pointer; }
.pk-count > b { font: 700 var(--fs-section) var(--pk-font-mono); color: var(--pk-navy); font-variant-numeric: tabular-nums; }
.pk-count.on { background: var(--pk-navy); border-color: var(--pk-navy); color: var(--pk-white); }
.pk-count.on > b { color: var(--pk-white); }

/* ══ Match the boards (13 Oct 2026, Fred on the live Sales pages: "looks kinda nothing like how you mocked it up") ══
   The shared pieces the canvas boards draw (page canvas pk-shell.css sections 13, 17 and 19), at their sizes.
   Inside a section: 14px text, a 17px heading, and tables with the light mono header (no navy fill).
   The navy .pk-tbl header stays for dense number grids that do not sit in a .pk-section. */
.pk-lede { font-size: 15px; }
.pk-section { font-size: 14px; }
.pk-section-head > h2 { font-size: 17px; }
.pk-section-head > span { font-size: 13px; }
.pk-section .pk-tbl { font-size: 14px; }
.pk-section .pk-tbl th,
.pk-section .pk-tbl-box .pk-tbl thead th:first-child { background: transparent; color: var(--pk-muted); font: 600 var(--fs-meta) var(--pk-font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 9px var(--sp-3); border-bottom: 1px solid var(--pk-border); }
.pk-section .pk-tbl td { border-bottom: 1px solid var(--pk-line-soft); padding: 10px var(--sp-3); }
.pk-section .pk-tbl tbody tr:last-child td { border-bottom: 0; }
.pk-section .pk-tbl td b { color: var(--pk-navy); }

/* The shell under SALES_ROW_V1 (body.sales-row), as the boards draw it (board 17, ticked 12 Oct):
   the search box on the left, the brand centred with no caption, KB then Sign out then the avatar on the right
   (Fred, 16 Oct 2026: KB moved right to sit where the research site keeps its Team pill); the row of
   pages left-aligned at 14px, the open page bold navy with an orange underline. The phone keeps its chip row. */
/* The box exists only under the switch, and only on a desktop (the phone has its search button). */
.hdr-find { display: none; }
@media not all and (max-width: 768px) {
  body.sales-row .header-top { padding: 0 28px; }
  /* Fred 13 Oct, round 2: pages open straight into the content; the shell gives them a 12px top, not 20px. */
  body.sales-row .app-main { padding-top: 12px; }
  body.sales-row .header-subtitle { display: none; }
  body.sales-row .header-right { gap: 12px; }
  body.sales-row .header-right .signout-btn { order: 1; font-size: 12px; color: var(--pk-on-navy-dim, rgba(255,255,255,.55)); }
  body.sales-row .header-right .user-avatar { order: 2; }
  /* The top-bar box (searches people and firms today; becomes Ask PSA later). Board pk-shell.css .sh-ask. */
  body.sales-row .hdr-find { display: flex; align-items: center; gap: 8px; width: 280px; height: 34px; padding: 0 10px 0 12px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--pk-on-navy-mut); font: 400 13px var(--pk-font); cursor: pointer; text-align: left; }
  body.sales-row .hdr-find:hover { border-color: rgba(255,255,255,.4); }
  body.sales-row .hdr-find::before { content: ""; width: 9px; height: 9px; border: 1.8px solid currentColor; border-radius: 50%; flex: none; }
  body.sales-row .hdr-find b { color: var(--pk-on-navy); font-weight: 600; }
  body.sales-row .hdr-find kbd { margin-left: auto; font: 500 12px var(--pk-font-mono); color: var(--pk-on-navy-dim); border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 0 5px; }
  body.sales-row .sub-nav { justify-content: flex-start; height: 40px; padding: 0 28px; gap: 4px; }
  body.sales-row .sub-nav-tab { height: 40px; padding: 0 18px; font-size: 14px; color: var(--pk-text); letter-spacing: 0; }
  body.sales-row .sub-nav-tab:hover { color: var(--pk-navy); }
  body.sales-row .sub-nav-tab.active { color: var(--pk-navy); font-weight: 700; }
  body.sales-row .sub-nav-tab.active::after { left: 10px; right: 10px; background: var(--pk-orange); }
}

/* Phone top bar (the boards' 52px row): the brand sits on the LEFT, the buttons on the right. Centred, a long
   brand ran under the search button at 390px (Sales, 13 Oct 2026). main.css loads after this file, hence body. */
@media (max-width: 768px) {
  body .header-center { position: static; transform: none; text-align: left; flex: 1; min-width: 0; }
  body .header-left:empty { display: none; }
}

/* ══ The left sidebar (SHELL_SIDEBAR_V1, body.shell-side; Fred 13 Oct 2026: "Let's go with the sidebar", then "build
   this canvas … exactly how we have them"). Canvases: Sales side.css + Phone, Research sidebar.css + R05cHidden + P2Menu.
   A slim 52px navy top bar; every door down the left, the open door's pages under it; Transcripts a place of its own;
   « Hide at the foot and "☰ Door › Page" to bring it back (remembered per person). On a phone: one "Door › Page" button
   under the top bar opening a menu over a dimmed page. Drawn by static/js/shell/sidebar.js from app.js's nav model. */
:root { --pk-sb-w: 232px; --pk-sb-top: 52px; --pk-sb-on: #fdf3ea; --pk-dim: rgba(18,28,48,.35); --pk-dim-soft: rgba(18,28,48,.16); }
.pk-sb-wrap { display: grid; grid-template-columns: var(--pk-sb-w) minmax(0, 1fr); flex: 1; min-height: 0; align-items: stretch; position: relative; }
.pk-sb-wrap > .app-main { min-width: 0; }
.pk-sb { position: sticky; top: var(--pk-sb-top); align-self: start; height: calc(100vh - var(--pk-sb-top)); overflow-y: auto; overflow-x: hidden; background: var(--pk-white); border-right: 1px solid var(--pk-border); padding: 14px 10px 16px; display: flex; flex-direction: column; gap: 1px; font-family: var(--pk-font); }
.pk-sb-d, .pk-sb-p, .pk-sb-hide, .pk-sb-show, .pk-sb-switch { font-family: var(--pk-font); cursor: pointer; text-decoration: none; }
.pk-sb-d { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; text-align: left; font-size: 13px; font-weight: 600; color: var(--pk-muted); padding: 8px 10px; border-radius: 8px; }
.pk-sb-d:hover { color: var(--pk-navy); }
.pk-sb-d.on { color: var(--pk-navy); font-weight: 800; }
.pk-sb-d > i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--pk-muted); }
.pk-sb-d > b, .pk-sb-p > b { margin-left: auto; font: 600 12px var(--pk-font-mono); color: var(--pk-orange-text); }
.pk-sb-d > b + i { margin-left: 0; }
.pk-sb-d.pk-sb-solo { color: var(--pk-text); font-weight: 700; }
.pk-sb-p { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; text-align: left; font-size: 14px; font-weight: 500; color: var(--pk-text); padding: 7px 10px 7px 22px; border-radius: 8px; }
.pk-sb-p:hover, .pk-sb-d.pk-sb-solo:hover { background: var(--pk-cream); }
.pk-sb-p.on, .pk-sb-d.pk-sb-solo.on { background: var(--pk-sb-on); color: var(--pk-navy); font-weight: 700; box-shadow: inset 3px 0 0 var(--pk-orange); }
.pk-sb-p.wip { color: var(--pk-muted); }
.pk-sb-p .nav-level-chip, .pk-sb-d .nav-level-chip { font-size: 12px; padding: 0 5px; }
.pk-sb-sep { height: 1px; background: var(--pk-line-soft); margin: 10px 6px; flex: none; }
.pk-sb-hide { margin-top: auto; padding: 14px 10px 0; border: 0; background: none; text-align: left; font-size: 13px; font-weight: 600; color: var(--pk-muted); }
.pk-sb-hide:hover { color: var(--pk-navy); }
.pk-sb-show { display: none; position: absolute; top: 12px; left: 28px; z-index: 2; font-size: 13px; font-weight: 600; color: var(--pk-navy); background: var(--pk-white); border: 1px solid var(--pk-border); border-radius: 8px; padding: 6px 12px; }
.pk-sb-switch, .pk-sb-dim, .pk-sb-menu { display: none; }
body.shell-side .sub-nav { display: none !important; }   /* the doors stay in the top bar; their pages are in the sidebar */
body.shell-side { --pk-sb-top: 92px; }                     /* the 52px top row + the 40px row of doors */
.pk-sb-h { font: 600 12px var(--pk-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pk-muted); padding: 4px 10px 8px; }
.pk-sb > .pk-sb-p { padding-left: 10px; }
body.shell-side.pk-sb-empty .pk-sb-wrap { grid-template-columns: minmax(0, 1fr); }
body.shell-side.pk-sb-empty .pk-sb, body.shell-side.pk-sb-empty .pk-sb-show { display: none; }
body.shell-side { --hdr-h: var(--pk-sb-top); }   /* page-sticky elements sit under the top bar */
body.shell-side .header-top { height: 52px; }
body.shell-side .app-main { padding: 16px 28px 32px; }
body.shell-side.pk-sb-hidden .pk-sb-wrap { grid-template-columns: minmax(0, 1fr); }
body.shell-side.pk-sb-hidden .pk-sb { display: none; }
body.shell-side.pk-sb-hidden .pk-sb-show { display: block; }
body.shell-side.pk-sb-hidden .app-main { padding-top: 56px; }
@media (max-width: 768px) {
  body.shell-side { --pk-sb-top: 52px; }   /* no row of doors on a phone */
  body.shell-side .pk-sb-wrap { display: block; }
  body.shell-side .pk-sb, body.shell-side .pk-sb-show { display: none !important; }
  body.shell-side .pk-tabbar { display: none !important; }
  body.shell-side .app-main, body.shell-side.pk-sb-hidden .app-main { padding: 12px 16px 20px; }
  body.shell-side .pk-sb-switch { display: flex; align-items: center; gap: 8px; width: calc(100% - 32px); margin: 12px 16px 0; padding: 10px 14px; background: var(--pk-white); border: 1px solid var(--pk-border); border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--pk-navy); text-align: left; }
  body.shell-side .pk-sb-switch .d { color: var(--pk-muted); font-weight: 500; }
  body.shell-side .pk-sb-switch .c { margin-left: auto; font-size: 12px; color: var(--pk-muted); }
  body.pk-sb-menu-open .pk-sb-dim { display: block; position: fixed; inset: var(--hdr-h, 52px) 0 0 0; background: var(--pk-dim); z-index: 950; }
  body.pk-sb-menu-open .pk-sb-menu { display: flex; flex-direction: column; gap: 1px; position: fixed; left: 12px; right: 12px; top: calc(var(--hdr-h, 52px) + 10px); max-height: calc(100vh - var(--hdr-h, 52px) - 24px); overflow-y: auto; overflow-x: hidden; z-index: 951; background: var(--pk-white); border-radius: 16px; box-shadow: 0 18px 40px rgba(15,30,60,.3); padding: 8px; }
  .pk-sb-menu .pk-sb-q { margin: 4px 4px 8px; padding: 9px 12px; border: 1px solid var(--pk-border); border-radius: 10px; font: 400 16px var(--pk-font); color: var(--pk-text); min-width: 0; }
  .pk-sb-menu .pk-sb-d { font-size: 14px; padding: 10px 12px; }
  .pk-sb-menu .pk-sb-p { font-size: 15px; padding: 10px 12px 10px 24px; border-radius: 10px; }
  .pk-sb-menu .pk-sb-sep { margin: 6px 8px; }
  .pk-sb-menu .pk-sb-find { color: var(--pk-navy); font-weight: 600; }
}

/* A list long enough to scroll does so inside its own panel, never the whole page (Fred, 13 Oct 2026); its header row
   stays put. A side panel (.pk-side) opens OVER the page with this scrim behind it; it never squeezes the page. */
.pk-scroll { max-height: 520px; overflow-y: auto; overflow-x: auto; border-top: 1px solid var(--pk-line-soft); }
.pk-scroll--tall { max-height: 640px; }
.pk-scroll--short { max-height: 340px; }
.pk-scroll table { margin: 0; }
.pk-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--pk-white); box-shadow: 0 1px 0 var(--pk-border); }
.pk-side-dim { position: fixed; inset: 0; background: var(--pk-dim-soft); z-index: 899; }

/* The row of pages, Compliance style (SUBTAB_ROW_V1, body.subtab-row; Fred, 14 Oct 2026: "so no sidebar.. more like
   that"). The doors stay in the navy bar; under them each door's pages sit on the page ground, not a white band: the
   page you are on is a navy pill, the main pages come first, the rest are smaller after one divider, and a count sits
   on its tab. The same pieces as compliance/core.js .cmp-subnav; keep the two in step. */
body.subtab-row .sub-nav { justify-content: flex-start; align-items: center; flex-wrap: wrap; height: auto; gap: 4px;
  background: transparent; border-bottom: 0; padding: 12px 28px 8px; }
body.subtab-row .sub-nav::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 0; border-bottom: 1px solid var(--pk-border); }
body.subtab-row .sub-nav-tab { height: auto; padding: 6px 12px; border: 1px solid transparent; border-radius: 6px;
  font: 600 var(--fs-body) var(--pk-font); color: var(--pk-muted); letter-spacing: 0; }
body.subtab-row .sub-nav-tab::before, body.subtab-row .sub-nav-tab.active::after { content: none; }
body.subtab-row .sub-nav-tab:hover { background: var(--pk-cream); color: var(--pk-navy); }
body.subtab-row .sub-nav-tab.active { background: var(--pk-navy); border-color: var(--pk-navy); color: var(--pk-white); font-weight: 600; }
body.subtab-row .sub-nav-tab.minor { font-weight: 500; font-size: var(--fs-meta); padding: 6px 9px; }
body.subtab-row .sub-nav-tab .nav-badge { height: auto; min-width: 0; margin-left: 6px; padding: 0 5px; border-radius: 8px;
  background: var(--pk-bad); color: var(--pk-white); font: 700 var(--fs-mono) var(--pk-font); line-height: 18px; }
body.subtab-row .sub-nav-tab.active .nav-badge { background: var(--pk-orange); }
body.subtab-row .sub-nav-sep { width: 1px; align-self: stretch; background: var(--pk-border); margin: 4px 6px; }
@media (max-width: 767px) {
  body.subtab-row .sub-nav { flex-wrap: nowrap; overflow-x: auto; padding: 10px 16px 8px; }
  body.subtab-row .sub-nav::after { left: 16px; right: 16px; }
  body.subtab-row .sub-nav-tab { flex: none; white-space: nowrap; background: none; border-radius: 6px; }
  body.subtab-row .sub-nav-tab.active { background: var(--pk-navy); }
}

/* ── One feel (ONE_FEEL_V1, body.one-feel; Fred's priority 4, 24 Oct 2026: "one feel across site (page transitions,
   consistent colour)"). static/js/shell/one-feel.js sets body[data-door] and two colours on every page change:
   --of-deep (the page you are on in the row) and --of-dot (the strip under the navy bar, the open door's mark, the
   busy bar). A Sales page uses its pod's colour, every other door its door colour (the block above). Look only. */
body.one-feel { --of-deep: var(--pk-navy); --of-dot: var(--pk-orange); }
/* 1. Where you are: a 3px strip in the door's colour under the navy bar; the open door and the open page in it. */
body.one-feel .app-header { box-shadow: inset 0 -3px 0 var(--of-dot); transition: box-shadow .25s ease; }
body.one-feel .nav-tab.active::after { background: var(--of-dot); bottom: 3px; }
body.one-feel .sub-nav { min-height: 49px; }
body.one-feel.subtab-row .sub-nav-tab.active { background: var(--of-deep); border-color: var(--of-deep); }
body.one-feel .sub-nav-tab.active .nav-level-chip { opacity: .7; }
/* A level chip says "only some of you see this". In the doors where every page is admin-only (Admin, Finance) it says nothing. */
body.one-feel:is([data-door="admin"], [data-door="finance"]) .sub-nav .nav-level-chip { display: none; }
/* A one-page door (Finance, Compliance) names its page in the row as a quiet label, never a second lit pill above the
   page's own tabs. */
body.one-feel .sub-nav.of-solo .sub-nav-tab.active { background: transparent; border-color: transparent; color: var(--of-deep);
  font-weight: 700; cursor: default; padding-left: 0; display: inline-flex; align-items: center; gap: 8px; }
body.one-feel .sub-nav.of-solo .sub-nav-tab.active::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--of-dot); }
/* 2. A page change is felt, not jumped: the page fades up, and a thin bar runs while its data is on its way. */
/* Opacity only, filled backwards: no transform ever, and nothing left on the page once the fade ends, so a fixed pop-out
   (Reports' side panel, Free times, the News command bar, a modal) stays fixed to the screen. */
@keyframes of-in { from { opacity: 0; } to { opacity: 1; } }
body.one-feel .tab-content.active, body.one-feel #home-screen { animation: of-in .18s ease-out backwards; }
.of-busy { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--of-dot) 30%, var(--of-dot) 70%, transparent);
  background-size: 50% 100%; background-repeat: no-repeat; transition: opacity .15s; }
.of-busy.on { opacity: 1; animation: of-run 1.1s linear infinite; }
@keyframes of-run { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) {
  body.one-feel .tab-content.active, body.one-feel #home-screen { animation: none; }
  .of-busy.on { animation: none; background: var(--of-dot); }
}
/* 3. Every page title one size, one weight, one colour; every page full width from the row's left edge. */
@media (min-width: 768px) {   /* a phone keeps each page's own smaller title */
body.one-feel .tab-content :is(.sh-t, .rh-title, .ixh-title, .pk-h1, .ti-h1, .tk-h1, .ca-title, .pb-dk-h, .mdk-h1, .rdl > h2):not(:is(.pk-card, .pk-section, .pk-side, .pk-tbl-box) *) {
  font: 800 24px/1.2 var(--pk-font); letter-spacing: -0.01em; color: var(--pk-navy); } }
body.one-feel .tab-content :is(.di-wrap, .rdl, .ti-shell, .cmp-wrap) { max-width: none; }
/* One left edge: the row of pages starts 28px in (16px on a phone), and so does every page. These are the pages
   that added their own inset inside it (measured on every page, 24 Oct 2026); their insets go, nothing else moves. */
body.one-feel :is(#tab-coverage, #tab-kb-analytics) { padding-inline: 0; }
body.one-feel #tab-market-data { margin-inline: 0; }
body.one-feel .tab-content :is(.ti-shell, .sk-shell, .nx-shell, .mdk-wrap, .fc, .dq-wrap, .di-wrap) { padding-inline: 0; }
body.one-feel #tab-research-morning .rm-page, body.one-feel #tab-results-day .rd-page, body.one-feel #tab-disclosures .ds-page,
body.one-feel #tab-finance-cockpit .fc { padding-inline: 0; }
body.one-feel #tab-trackers .tk { padding-inline: 0; }   /* the page; .tk is also a ticker chip elsewhere */
body.one-feel #tab-finance-cockpit .fc { height: calc(100vh - 154px); }   /* the Cockpit fills the screen under the row (49px) */
body.one-feel #tab-publish .pb-dk { margin-inline: 0; }   /* a cream panel: its edge lines up, its own inside stays */

/* ══ The phone layer (31 Oct 2026; Fred: "get a good format for the phone that we can follow for the future while also
   making the current one look better too"). Every rule is inside @media (max-width: 768px), so a desktop is untouched.
   The standard it draws is written down in .claude/rules/frontend.md ("Phone standard") and in full in
   .claude/notes/areas/frontend.md; test_phone_kit.py holds the rules in place and test_phone_kit_render.mjs measures them.
     1  type: body 13.5px, meta and labels 12px, nothing under 12px, ONE page title size (18px);
     2  a compact top: a 48px bar, a tight row of pages that fades at its right edge so it reads as scrolling;
     3  panels lie flat, edge to edge, with hairlines; a panel inside a panel loses its frame;
     4  orange only for the view's one main button: a small orange button repeated row after row reads "Draft ›";
     5  every real control is at least 40px tall; a wide kit table becomes two-line rows (.pk-tbl--rows) or scrolls in
        its own box (.pk-tbl-box); a long list shows its first five with "Show all" (.pk-first5, CSS only).
   Module sheets load after this file, so these rules lead with `body`; where a page sets its title by its tab's id,
   `:is(.tab-content, #pk-phone)` lifts the rule to id weight (an :is() takes its strongest argument's weight; no
   element has the id pk-phone). The bottom bar (.pk-tabbar) is Fred's and stays as it is (31 Oct 2026). */
:root { --pk-ph-gutter: 16px; --pk-ph-title: 18px; --pk-ph-hit: 40px; }
.pk-first5-more { display: none; }
@media (max-width: 768px) {
  /* 2 · the top: the row of pages under the 48px bar (--hdr-h, above), tight, fading at its right edge */
  body .sub-nav { padding: 6px var(--pk-ph-gutter) 6px; padding-right: 40px; gap: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  body.subtab-row .sub-nav { padding: 6px 40px 6px var(--pk-ph-gutter); }
  body .sub-nav .sub-nav-tab { position: relative; height: 32px; padding: 0 12px; font-size: 13px; }
  body .sub-nav .sub-nav-tab::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; height: auto; background: none; }   /* a 40px tap */
  body .sub-nav .nav-level-chip { display: none; }   /* "ADMIN" at 8.5px: the row already shows only what you may open */
  body .app-main { padding-top: 10px; }
  body :is(.af-head-meta, .pk-sheet-group b) { font-size: 12px; }   /* the Ask panel's line; the More sheet's group names */
  body .pk-tabs, body .pk-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 28px; }

  /* 1 · type: one title size, kickers that only repeat the door go, a lede and a page head that stay small */
  body :is(.tab-content, #pk-phone) :is(h1, .pk-title, .pk-h1, .sh-t, .rh-title, .ixh-title, .ti-h1, .tk-h1, .ca-title,
      .pb-dk-h, .mdk-h1, .rc-head-name):not(:is(.pk-card, .pk-section, .pk-side, .pk-modal, .pk-tbl-box) *) {
    font-size: var(--pk-ph-title); line-height: 1.25; letter-spacing: -0.01em; margin-top: 0; }
  body .pk-kick:has(+ .pk-title) { display: none; }
  body .pk-title { margin-top: 0; }
  body .pk-lede { font-size: 13px; line-height: 1.45; margin-top: 2px; }
  body .pk-page-head { gap: 4px; padding-bottom: 8px; margin-bottom: 12px; }
  body .pk-page-head-rule { display: none; }
  body .pk-card-title { font-size: 14px; }
  body .pk-h2, body .pk-section-head > h2 { font-size: 15px; }
  body .pk-section-head > span { font-size: 12px; }

  /* 3 · panels lie flat and run edge to edge; hairlines, not boxes */
  body .tab-content :is(.pk-card, .pk-section, .pk-surface-box):not(:is(.pk-card, .pk-section, .pk-surface-box, .pk-side, .pk-modal, .pk-split, .pk-grid, .pk-row) *) {
    margin-inline: calc(-1 * var(--pk-ph-gutter)); padding-inline: var(--pk-ph-gutter);
    border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  body :is(.pk-card, .pk-section, .pk-surface-box) :is(.pk-card, .pk-section, .pk-surface-box) { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; }
  body .pk-card { gap: 10px; padding-block: 14px; }
  body .tab-content .pk-tbl-box:not(:is(.pk-card, .pk-section, .pk-surface-box, .pk-side, .pk-modal) *) {
    margin-inline: calc(-1 * var(--pk-ph-gutter)); border-radius: 0; border-left: 0; border-right: 0; }
  body .pk-tiles { border-radius: 0; }
  body .pk-tile { padding: 8px 12px; }
  body .pk-tile-num { font-size: 18px; }
  body .pk-side-head { padding: 12px var(--pk-ph-gutter) 10px; }
  body .pk-side-head > b { font-size: var(--pk-ph-title); }
  body .pk-side-body { padding: 12px var(--pk-ph-gutter); gap: 14px; }
  body .pk-side-foot { padding: 10px var(--pk-ph-gutter) calc(10px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  body .pk-empty { padding: 16px; }

  /* 4 · orange is the one main button: a small orange button repeated in sibling rows becomes a quiet "Draft ›".
     A "row" is any element with one as a child whose sibling element also has one as a child; a lone small orange
     button, or the chosen one of a set of toggles (siblings of each other, not rows), keeps its fill. */
  body .tab-content :is(:has(> .pk-btn--sm.pk-btn--primary):has(~ * > .pk-btn--sm.pk-btn--primary), :has(> .pk-btn--sm.pk-btn--primary) ~ :has(> .pk-btn--sm.pk-btn--primary)) > .pk-btn--sm.pk-btn--primary {
    background: transparent; border-color: transparent; color: var(--pk-orange-text); width: auto; padding: 0 4px; font-weight: 600; }
  body .tab-content :is(:has(> .pk-btn--sm.pk-btn--primary):has(~ * > .pk-btn--sm.pk-btn--primary), :has(> .pk-btn--sm.pk-btn--primary) ~ :has(> .pk-btn--sm.pk-btn--primary)) > .pk-btn--sm.pk-btn--primary::after { content: "›"; margin-left: 2px; }

  /* 5 · controls a thumb can hit; wide tables; long lists */
  /* A small control keeps its size and gains an invisible 40px tap (::before), so a list stays dense. */
  body :is(.pk-btn, .pk-filter-chip, .pk-count) { position: relative; }
  body :is(.pk-btn, .pk-filter-chip, .pk-count)::before { content: ""; position: absolute; left: 0; right: 0;
    top: min(0px, calc((100% - var(--pk-ph-hit)) / 2)); bottom: min(0px, calc((100% - var(--pk-ph-hit)) / 2)); }
  body .pk-tbl--rows, body .pk-tbl--rows tbody { display: block; width: 100%; }
  body .pk-tbl--rows thead { display: none; }
  body .pk-tbl--rows tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px;
    padding: 10px 0; border-bottom: 1px solid var(--pk-line-soft); }
  body .pk-tbl--rows td { display: inline; padding: 0; border: 0; font-size: 12px; color: var(--pk-muted); white-space: normal; }
  body .pk-tbl--rows td:first-child { flex: 1 0 100%; font-size: 14px; font-weight: 600; color: var(--pk-navy); }
  body .pk-tbl--rows td:empty { display: none; }
  body .pk-tbl--rows td:not(:first-child):not(:nth-child(2))::before { content: "·"; margin-right: 6px; }
  body .pk-first5:not(:has(> .pk-first5-more :checked)) > :nth-child(n+6 of :not(.pk-first5-more)) { display: none; }
  body .pk-first5:has(> :nth-child(6 of :not(.pk-first5-more))):not(:has(> .pk-first5-more :checked)) > .pk-first5-more {
    display: flex; align-items: center; min-height: var(--pk-ph-hit); font-size: 13px; font-weight: 600; color: var(--pk-navy); cursor: pointer; }
  body .pk-first5-more input { position: absolute; opacity: 0; pointer-events: none; }
}