/* LPX bridge (foundation 11-13, Naja: "the launchpad still LOOKS the same"). Loaded last. Pages not yet rebuilt on the
   kit (app.js VIEWS, LPV8 screens, Decide) render inside the LPX shell with the older app.css (warm charcoal, gold,
   Newsreader serif) and v9.css token sets. This file scopes those pages to the one LPX token set without touching
   their markup: inside .lpx-root every legacy variable resolves to its LPX token, headings and figures use the UI face,
   and the legacy building blocks (card, kpi, k-tile, btn, tag, chip, table.t, inp) take the kit's shapes. The v9
   fallback shell (?ui=v9) is outside .lpx-root and unchanged. A page migrated to the kit needs none of this; when the
   last legacy page is gone this file is deleted. */

/* 1. Tokens: every legacy variable is an LPX token inside the shell (dark and light follow the LPX theme). */
.lpx-root {
  --bg: var(--lpx-page); --panel: var(--lpx-surface); --panel2: var(--lpx-raised); --line: var(--lpx-line); --line2: var(--lpx-line2);
  --ink: var(--lpx-ink); --ink2: var(--lpx-ink2); --mute: var(--lpx-mute); --gold: var(--lpx-accent); --gold2: var(--lpx-accent); --on-gold: var(--lpx-accent-ink);
  --good: var(--lpx-good); --goodbg: var(--lpx-good-wash); --warn: var(--lpx-warn); --warnbg: var(--lpx-warn-wash); --bad: var(--lpx-bad); --badbg: var(--lpx-bad-wash);
  --info: var(--lpx-accent); --infobg: var(--lpx-accent-wash);
  --c1: var(--lpx-s1); --c2: var(--lpx-s2); --c3: var(--lpx-s3); --c4: var(--lpx-s4); --c5: var(--lpx-s5);
  --r: var(--lpx-r); --sidebg: var(--lpx-sunk); --pc: var(--lpx-mute); --tl-rail: var(--lpx-line);
  --v9-page: var(--lpx-page); --v9-card: var(--lpx-surface); --v9-card2: var(--lpx-raised); --v9-sunk: var(--lpx-sunk); --v9-line: var(--lpx-line); --v9-line2: var(--lpx-line2);
  --v9-shadow: var(--lpx-e1); --v9-ink: var(--lpx-ink); --v9-ink2: var(--lpx-ink2); --v9-mute: var(--lpx-mute); --v9-grid: var(--lpx-line); --v9-axis: var(--lpx-line2); --v9-track: var(--lpx-raised);
  --v9-accent: var(--lpx-accent); --v9-accent-ink: var(--lpx-accent-ink); --v9-accent-wash: var(--lpx-accent-wash);
  --v9-s1: var(--lpx-s1); --v9-s2: var(--lpx-s2); --v9-s3: var(--lpx-s3); --v9-s4: var(--lpx-s4); --v9-s5: var(--lpx-s5); --v9-s7: var(--lpx-s6); --v9-s8: var(--lpx-s8);
  --v9-good: var(--lpx-good); --v9-warn: var(--lpx-warn); --v9-crit: var(--lpx-bad); --v9-good-ink: var(--lpx-good);
  --v9-r: var(--lpx-r); --v9-r-sm: var(--lpx-r-sm);
  --v-s1: var(--lpx-s1); --v-s2: var(--lpx-s2); --v-s3: var(--lpx-s3); --v-s4: var(--lpx-s4); --v-s5: var(--lpx-s5); --v-s7: var(--lpx-s6);
  --v-good: var(--lpx-good); --v-warn: var(--lpx-warn); --v-crit: var(--lpx-bad); --v-grid: var(--lpx-line); --v-axis: var(--lpx-line2); --v-track: var(--lpx-raised); --v-trend: var(--lpx-mute);
}
.lpx-root a { color: inherit; }
.lpx-root .lpx-page a:not([class]) { color: var(--lpx-accent); }
.lpx-root .lpx-page a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; }

/* 2. One type family. Newsreader (retired, lpx.css header) and the per-class font stacks give way to the UI face; code,
   ids and timestamps keep the mono face. */
.lpx-root *:not(code):not(kbd):not(pre):not(samp):not(time):not(.mono):not(.lpx-asof):not(.ath-pre) { font-family: inherit; }
.lpx-root .serif { font-family: var(--lpx-font); }
.lpx-root .lpx-page h2 { letter-spacing: -.005em; }
.lpx-root .card h2, .lpx-root .k-page h2, .lpx-root .dc-sec > summary h2 { font: 600 15px/1.3 var(--lpx-font); }
.lpx-root .kpi .v, .lpx-root .k-tv { font: 600 24px/1.1 var(--lpx-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* 3. Legacy page frame inside the shell: one gutter, one vertical rhythm. */
.lpx-root [data-lpx-legacy] > .page { gap: var(--lpx-4); padding: 0; margin: 0; max-width: none; }
.lpx-root [data-lpx-legacy] .asof { font: var(--lpx-t-small); color: var(--lpx-mute); margin: 0; }

/* 4. Building blocks take the kit's shapes. */
.lpx-root .card, .lpx-root .kpi, .lpx-root .k-tile { background: var(--lpx-surface); border: 1px solid var(--lpx-line); border-radius: var(--lpx-r); box-shadow: var(--lpx-e1); }
.lpx-root .card { padding: 14px 16px; }
.lpx-root .card .card, .lpx-root .card .kpi, .lpx-root .card .k-tile { box-shadow: none; background: var(--lpx-raised); }
.lpx-root .card h3, .lpx-root .kpi .l { font: var(--lpx-t-label); letter-spacing: .06em; color: var(--lpx-mute); }
.lpx-root .btn { height: 32px; padding: 0 12px; border-radius: var(--lpx-r-sm); border: 1px solid var(--lpx-line2); background: var(--lpx-surface); color: var(--lpx-ink); font: 500 13px/1 var(--lpx-font); transition: border-color var(--lpx-fast), background var(--lpx-fast); }
.lpx-root .btn:hover { background: var(--lpx-raised); border-color: var(--lpx-line2); color: var(--lpx-ink); }
.lpx-root .btn.pri { background: var(--lpx-accent-fill); border-color: var(--lpx-accent-fill); color: var(--lpx-accent-ink); font-weight: 600; }
.lpx-root .btn.pri:hover { background: var(--lpx-accent-fill); filter: brightness(1.07); }
.lpx-root .btn.ghost { background: transparent; border-color: transparent; color: var(--lpx-ink2); }
.lpx-root .btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.lpx-root .btn:focus-visible, .lpx-root .chip:focus-visible, .lpx-root .inp:focus-visible { outline: 2px solid var(--lpx-focus); outline-offset: 2px; }
.lpx-root .tag { height: 20px; padding: 0 7px; border-radius: 5px; font: var(--lpx-t-micro); letter-spacing: .02em; background: var(--lpx-raised); border: 1px solid var(--lpx-line); color: var(--lpx-ink2); }
.lpx-root .tag.good, .lpx-root .tag.warn, .lpx-root .tag.bad, .lpx-root .tag.info, .lpx-root .tag.gold { border-color: transparent; }
.lpx-root .tag.gold { background: var(--lpx-accent-wash); color: var(--lpx-accent); }
.lpx-root .chip { height: 28px; padding: 0 10px; border-radius: var(--lpx-r-pill); border: 1px solid var(--lpx-line); background: var(--lpx-surface); color: var(--lpx-ink2); font: var(--lpx-t-small); }
.lpx-root .chip.on, .lpx-root .chip[aria-pressed="true"] { border-color: var(--lpx-accent-line); background: var(--lpx-accent-wash); color: var(--lpx-ink); }
.lpx-root .inp, .lpx-root .lpx-page select:not([class]), .lpx-root .lpx-page textarea:not([class]) { border: 1px solid var(--lpx-line); border-radius: var(--lpx-r-sm); background: var(--lpx-surface); color: var(--lpx-ink); font: var(--lpx-t-body); }
.lpx-root table.t th { font: var(--lpx-t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--lpx-mute); background: var(--lpx-raised); height: 34px; padding: 0 12px; vertical-align: middle; }
.lpx-root table.t td { padding: 10px 12px; border-bottom-color: var(--lpx-line); }
.lpx-root table.t tr.row:hover td { background: var(--lpx-raised); }
.lpx-root table.t tr.sel td { background: var(--lpx-accent-wash); }
.lpx-root .box { border-color: var(--lpx-line2); }
.lpx-root .box.q { background: var(--lpx-accent-wash); border-color: var(--lpx-accent); color: var(--lpx-accent); }
.lpx-root .toast { background: var(--lpx-overlay); border: 1px solid var(--lpx-line2); box-shadow: var(--lpx-e2); border-radius: var(--lpx-r-md); }
.lpx-root .drawer { background: var(--lpx-overlay); border-color: var(--lpx-line2); box-shadow: var(--lpx-e3); }
.lpx-root details > summary { cursor: pointer; }

/* Light theme: app.css paints these with fixed warm colors under :root[data-theme="light"]; inside the shell they follow LPX. */
:root[data-theme="light"] .lpx-root :is(.hbt, .ft, .vf-track, .ck-meter, .ck-ft, .fsb, .goalbar, .bcol) { background: var(--lpx-raised); }
:root[data-theme="light"] .lpx-root :is(.callout, .dk-ins, .tl-reply) { background: var(--lpx-accent-wash); border-color: var(--lpx-accent-line); }
:root[data-theme="light"] .lpx-root :is(.tag.gold, .box.q) { background: var(--lpx-accent-wash); }
:root[data-theme="light"] .lpx-root :is(.drawer, .toast) { background: var(--lpx-overlay); }

/* 5. Decide (decide.js, the reference page): the queue reads as a list of decision cards in the kit's shape
   (.lpx-dc): one face, the accent for the recommended option, the past-due rule on the left, calm section heads. */
.lpx-root .dc-v8 { gap: var(--lpx-4); }
.lpx-root .dc-v8 .dc-strip { padding: 4px 0; font: var(--lpx-t-small); color: var(--lpx-mute); }
.lpx-root .dc-v8 .dc-strip .dc-keys { color: var(--lpx-faint); }
.lpx-root .dc-v8 .dc-sec > summary { padding: 4px 0 10px; }
.lpx-root .dc-v8 .dc-sec > summary h2 { font: 650 16px/1.3 var(--lpx-font); color: var(--lpx-ink); }
.lpx-root .dc-v8 .dc-sec > summary h2::before { color: var(--lpx-faint); }
.lpx-root .dc-v8 .dc-sec > summary .muted, .lpx-root .dc-v8 .dc-sec > summary p { font: var(--lpx-t-small); color: var(--lpx-mute); max-width: 90ch; }
.lpx-root .dc-v8 .dc-list { gap: 8px; }
.lpx-root .dc-v8 .dc-card { background: var(--lpx-surface); border: 1px solid var(--lpx-line); border-left: 1px solid var(--lpx-line); border-radius: var(--lpx-r); box-shadow: var(--lpx-e1); padding: 14px 16px; gap: 10px; }
.lpx-root .dc-v8 .dc-card.late { box-shadow: inset 3px 0 0 var(--lpx-bad), var(--lpx-e1); border-left-color: var(--lpx-line); }
.lpx-root .dc-v8 .dc-card.on { box-shadow: inset 3px 0 0 var(--lpx-accent), var(--lpx-e1); background: var(--lpx-surface); }
.lpx-root .dc-v8 .dc-card .dc-t { font: 600 15px/1.35 var(--lpx-font); color: var(--lpx-ink); letter-spacing: 0; text-transform: none; }
.lpx-root .dc-v8 .dc-hero { border: 2px solid var(--lpx-accent-line); box-shadow: inset 3px 0 0 var(--lpx-accent), var(--lpx-e2); background: var(--lpx-surface); padding: 18px 20px; } /* its own high-contrast border (Naja 11-02: the one decision stands out) */
.lpx-root .dc-v8 .dc-hero.late { border-color: color-mix(in srgb, var(--lpx-bad) 55%, var(--lpx-line)); box-shadow: inset 3px 0 0 var(--lpx-bad), var(--lpx-e2); }
.lpx-root .dc-v8 .dc-hero .dc-t { font: 650 20px/1.3 var(--lpx-font); letter-spacing: -.01em; }
.lpx-root .dc-v8 .dc-eyebrow { font: var(--lpx-t-label); letter-spacing: .07em; color: var(--lpx-accent); }
.lpx-root .dc-v8 .dc-hero.late .dc-eyebrow { color: var(--lpx-bad); }
.lpx-root .dc-v8 .dc-meta dt { font: var(--lpx-t-micro); letter-spacing: .06em; color: var(--lpx-mute); }
.lpx-root .dc-v8 .dc-usdv { font: 650 18px/1.2 var(--lpx-font); }
.lpx-root .dc-v8 .dc-hero .dc-usdv { font-size: 22px; }
.lpx-root .dc-v8 .dc-recb { background: var(--lpx-accent-wash); border: 1px solid transparent; border-radius: var(--lpx-r-md); }
.lpx-root .dc-v8 .dc-recl { color: var(--lpx-accent); }
.lpx-root .dc-v8 .dc-abc .btn { min-height: 38px; height: auto; padding: 8px 14px; border-radius: var(--lpx-r-md); border-width: 1px; border-color: var(--lpx-line2); background: var(--lpx-raised); color: var(--lpx-ink); font: 500 13px/1.3 var(--lpx-font); }
.lpx-root .dc-v8 .dc-abc .btn:hover { border-color: var(--lpx-accent-line); background: var(--lpx-accent-wash); }
.lpx-root .dc-v8 .dc-abc .btn.pri, .lpx-root .dc-v8 .dc-task [data-dc="open"] { background: var(--lpx-accent-fill); border-color: var(--lpx-accent-fill); color: var(--lpx-accent-ink); font-weight: 600; box-shadow: none; }
.lpx-root .dc-v8 .dc-abc .btn.pri:hover, .lpx-root .dc-v8 .dc-task [data-dc="open"]:hover { background: var(--lpx-accent-fill); filter: brightness(1.07); color: var(--lpx-accent-ink); }
.lpx-root .dc-v8 .dc-hero .dc-abc .btn { min-height: 42px; font-size: 14px; }
.lpx-root .dc-v8 .dc-hero .dc-abc .btn.pri { padding: 10px 18px; font-size: 14px; }
.lpx-root .dc-v8 .dc-abc .dc-opt b { background: color-mix(in srgb, currentColor 14%, transparent); font: 600 11px/1.6 var(--lpx-mono); }
.lpx-root .dc-v8 .dc-abc [data-dc="decline"] { background: transparent; border-color: transparent; color: var(--lpx-ink2); }
.lpx-root .dc-v8 .dc-band { font: var(--lpx-t-label); letter-spacing: .07em; color: var(--lpx-mute); padding: 12px 0 2px; }
.lpx-root .dc-v8 .dc-band[data-dc-band="late"] { color: var(--lpx-bad); }
.lpx-root .dc-v8 .dc-rowd > summary.dc-row { background: var(--lpx-surface); border: 1px solid var(--lpx-line); border-radius: var(--lpx-r); padding: 10px 14px; }
.lpx-root .dc-v8 .dc-rowd[open] > summary.dc-row { border-radius: var(--lpx-r) var(--lpx-r) 0 0; border-bottom-color: transparent; }
.lpx-root .dc-v8 .dc-rowd > summary.dc-row:hover { border-color: var(--lpx-line2); background: var(--lpx-raised); }
.lpx-root .dc-v8 .dc-rowd[open] > .dc-card { border-top-left-radius: 0; border-top-right-radius: 0; }
.lpx-root .dc-v8 .dc-pending { border-color: var(--lpx-accent-line); background: var(--lpx-accent-wash); }
.lpx-root .dc-v8 .dc-today-h { font: 650 16px/1.3 var(--lpx-font); border-top-color: var(--lpx-line); }
.lpx-root .dc-toast { background: var(--lpx-overlay); border: 1px solid var(--lpx-line2); box-shadow: var(--lpx-e2); border-radius: var(--lpx-r-md); }
.lpx-root .dc-toast-bar { background: var(--lpx-accent); }
/* The story above the queue: revenue and the campaigns, kept compact so the first decision sits in the first screen. */
.lpx-root .dc-v8 [data-ds="root"] { gap: 12px; }
.lpx-root .dc-v8 [data-ds="root"] .card { padding: 12px 14px; }
@media (max-width: 720px) {
  .lpx-root .dc-v8 .dc-hero { padding: 14px; }
  .lpx-root .dc-v8 .dc-hero .dc-t { font-size: 17px; }
}
/* Decide on a phone: the decisions first. The story (revenue, campaigns) moves under "Yours now" visually; the DOM order
   (story first, Naja 11-02, decide-inbox-ui) is unchanged, so a desktop and a screen reader read it as before. */
@media (max-width: 720px) {
  .lpx-root .dc-v8 { display: flex; flex-direction: column; }
  .lpx-root .dc-v8 > * { order: 2; }
  .lpx-root .dc-v8 > [data-dc="missing"], .lpx-root .dc-v8 > .dc-strip, .lpx-root .dc-v8 > [data-dc-sec="decide"] { order: 0; }
  .lpx-root .dc-v8 > [data-ds="root"] { order: 1; }
  .lpx-root .dc-v8 .dc-strip .dc-keys { display: none; }
}
/* The answer strip on a phone: a column with nothing to say folds away (the header's answer already says it). */
@media (max-width: 640px) {
  .lpx-root .nv10-strip .nv10-col:has(> p.nv10-nm) { display: none; }
  .lpx-root .nv10-strip .nv10-col:not(:has(> p.nv10-nm)) { border-top: 0; }
  .lpx-root .nv10-strip:not(:has(.nv10-col:not(:has(> p.nv10-nm)))) { display: none; }
}
/* A wide legacy table scrolls inside its card instead of widening the page (Deliverability scrolled at 1440 px). */
.lpx-root :is(table.t, table.cc-table) { display: block; max-width: 100%; overflow-x: auto; }
.lpx-root .cc-table th { font: var(--lpx-t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--lpx-mute); }
/* The strip's links read as text, not as a column of blue links. */
.lpx-root .lpx-page .nv10-strip li a { color: var(--lpx-ink2); }
.lpx-root .lpx-page .nv10-strip li a:hover { color: var(--lpx-ink); }