/* ThePointsPro V3 design system (PRD/TPP_V3_Redesign_PRD.md).
   Loaded ONLY by web_v3 templates; the live site never sees this file.
   Brand palette tokenized; gold is reserved for premium moments and only
   ever carries black text (house gold rule). */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root {
    --ink: #0c2a2e;
    --ink-soft: #10363b;
    --teal-600: #0e90a5;
    --teal-500: #1f9ba0;
    --teal-400: #2ab1b8;
    --teal-050: #e9f6f7;
    --gold: #ecb947;
    --gold-050: #fdf6e3;
    --positive: #1b7f4b;
    --positive-050: #e8f4ed;
    --negative: #b3261e;
    --negative-050: #faeceb;
    --text: #1f2a2c;
    --text-muted: #5d6b6e;
    --border: #e2e8e9;
    --surface: #ffffff;
    --surface-alt: #f7faf9;
    --header-h: 60px;
    --tabbar-h: 58px;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(12, 42, 46, .06), 0 4px 16px rgba(12, 42, 46, .05);
    --focus-ring: 0 0 0 3px rgba(42, 177, 184, .35);
}

/* Navigator-exclusive warm light theme. */
[data-theme="navigator-warm"] {
    --surface-alt: #fdf6e3;
    --surface: #fffdf6;
    --border: #ecdfc0;
    --teal-050: #f2ecd9;
}

/* Navigator-exclusive dark theme (activated in P3; tokens ready). */
[data-theme="navigator-dark"] {
    --text: #e8eeee;
    --text-muted: #9fb0b2;
    --border: #23484d;
    --surface: #10363b;
    --surface-alt: #0c2a2e;
    --teal-050: #163f45;
    --gold-050: #2a2410;
    --positive-050: #123121;
    --negative-050: #391b18;
    /* Success green is TEXT nearly everywhere in the dark theme; the
       light-surface #1b7f4b reads as mud on dark ink. */
    --positive: #5cc492;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);

    /* Legacy-token remap: pages that reuse live interiors are styled by
       style.css/web.css through these custom properties, which only know
       the light theme. Re-pointing them here keeps every legacy element
       (playbook gaps, rank rows, credit tables, donate wall) readable in
       the dark. Bright gold is correct as TEXT on dark surfaces per the
       gold rule; #a17300 is the light-surface variant. */
    --color-text-primary: #e8eeee;
    --color-text-secondary: #a7b6b8;
    --color-text-muted: #8fa0a2;
    --color-border: #23484d;
    --color-white: #10363b;
    --color-soft-white: #0c2a2e;
    --color-surface-subtle: #163f45;
    --color-neutral-gray: #23484d;
    --color-gold-text: #ecb947;
    /* NEVER remap --color-black: every legacy use of it is black text
       on a bright fill (gold badges, teal buttons, active pills), the
       exact contract the gold rule protects. Remapping it to light ink
       inverted them all into light-on-light (caught on the catalog's
       art-badge, 2026-07-24). */
}

/* Bootstrap components on legacy-adapter pages follow via bootstrap
   5.3's native color mode (data-bs-theme, synced by the theme scripts);
   these smooth the seams its defaults leave on our surfaces. */
[data-theme="navigator-dark"] .card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-cap-bg: var(--surface-alt);
    color: var(--text);
}
[data-theme="navigator-dark"] .table { --bs-table-bg: transparent; color: var(--text); }
[data-theme="navigator-dark"] .form-control,
[data-theme="navigator-dark"] .form-select,
[data-theme="navigator-dark"] .input-group-text {
    background-color: var(--surface-alt); color: var(--text);
    border-color: var(--border);
}
[data-theme="navigator-dark"] .form-control::placeholder { color: var(--text-muted); }
[data-theme="navigator-dark"] .alert-info,
[data-theme="navigator-dark"] .alert-success {
    background-color: var(--teal-050); color: var(--text);
    border-color: var(--border);
}
[data-theme="navigator-dark"] .alert-warning {
    background-color: var(--gold-050); color: var(--text);
    border-color: var(--border);
}
/* Bootstrap's utility carries !important; match it. */
[data-theme="navigator-dark"] .text-success { color: var(--positive) !important; }
/* The success toast is white-on-green: keep its bg the deep green so
   the lightened dark-theme --positive never washes the toast out. */
[data-theme="navigator-dark"] .v3-toast.is-success { background: #1b7f4b; }

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
@font-face {
    font-family: 'Inter V';
    src: url("../fonts/InterVariable.2bf3d951bf9d.woff2") format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
    margin: 0;
    font-family: 'Inter V', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--surface-alt);
    padding-bottom: 0;
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; margin: 0 0 .5rem; }
[data-theme="navigator-dark"] h1, [data-theme="navigator-dark"] h2,
[data-theme="navigator-dark"] h3, [data-theme="navigator-dark"] h4 { color: var(--text); }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; font-weight: 625; }
h4 { font-size: .95rem; font-weight: 600; }
p { margin: 0 0 .75rem; }

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

img, svg { max-width: 100%; vertical-align: middle; }
/* Sprite icons: a <use> clone does not inherit the sprite root's
   presentation attributes, so the line style lives here or the icons
   render as filled black shapes. */
.icon {
    flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* Money and point figures align in columns. */
.num, td.num, .v3-money { font-variant-numeric: tabular-nums; }

.v3-shell { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.v3-main { min-height: 60vh; padding: 24px 0 48px; }

.v3-muted { color: var(--text-muted); }
.v3-small { font-size: .85rem; }
.v3-eyebrow {
    font-size: .75rem; font-weight: 650; letter-spacing: .08em;
    text-transform: uppercase; color: var(--teal-600); margin-bottom: .35rem;
}

/* ------------------------------------------------------------------ */
/* Header + nav                                                        */
/* ------------------------------------------------------------------ */
.v3-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.v3-header-row {
    display: flex; align-items: center; gap: 20px;
    height: var(--header-h);
}
.v3-brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; color: var(--ink); font-size: 1.02rem;
    letter-spacing: -.01em;
}
[data-theme="navigator-dark"] .v3-brand { color: var(--text); }
.v3-brand:hover { text-decoration: none; }
.v3-brand img { border-radius: 6px; }

.v3-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.v3-nav > a, .v3-menu-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px;
    color: var(--text); font-weight: 550; font-size: .92rem;
    border: none; background: none; cursor: pointer; font-family: inherit;
}
.v3-nav > a:hover, .v3-menu-btn:hover { background: var(--teal-050); text-decoration: none; }
.v3-nav > a.is-active, .v3-menu-btn.is-active { background: var(--ink); color: #fff; }

.v3-menu { position: relative; }
.v3-menu-panel {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 6px; display: none; z-index: 50;
}
.v3-menu.is-open .v3-menu-panel { display: block; }
.v3-menu-panel a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    color: var(--text); font-weight: 500; font-size: .92rem;
}
.v3-menu-panel a:hover { background: var(--teal-050); text-decoration: none; }
.v3-menu-panel .icon { color: var(--teal-600); }

.v3-account { display: flex; align-items: center; gap: 10px; }
.v3-avatar-link { display: flex; align-items: center; gap: 8px; }
.v3-avatar-link:hover { text-decoration: none; }
.v3-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ink); color: #fff;
    font-weight: 650; font-size: .9rem; text-transform: uppercase;
}
.v3-plan-chip {
    font-size: .72rem; line-height: 1.4;
    align-self: center; display: inline-flex; align-items: center;
}

/* Gold rule: black text on light gold, always. */
.badge-gold {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    background: var(--gold); color: #000; font-weight: 650;
}

/* ------------------------------------------------------------------ */
/* Mobile bottom tab bar                                               */
/* ------------------------------------------------------------------ */
.v3-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    display: none;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.v3-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 8px 0 6px;
    color: var(--text-muted); font-size: .68rem; font-weight: 550;
}
.v3-tabbar a:hover { text-decoration: none; }
.v3-tabbar a[aria-current="page"] { color: var(--teal-600); }

@media (max-width: 820px) {
    :root { --header-h: 54px; }
    .v3-nav { display: none; }
    .v3-tabbar { display: flex; }
    body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
    .v3-main { padding-top: 16px; }
    h1 { font-size: 1.45rem; }
}

/* ------------------------------------------------------------------ */
/* Panels, chips, stats                                                */
/* ------------------------------------------------------------------ */
.v3-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
}
/* One vertical rhythm between stacked blocks, whatever their kind:
   panel after panel, grid after panel, panel after grid. */
.v3-panel + .v3-panel, .v3-panel + .v3-grid,
.v3-grid + .v3-panel, .v3-grid + .v3-grid { margin-top: 20px; }
/* ...but INSIDE a grid the gap owns the spacing: without this, a
   panel that follows its sibling in the same row inherits the rhythm
   margin and sags 20px below it. */
.v3-grid > .v3-panel, .v3-grid > .v3-grid { margin-top: 0; }
.v3-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}
.v3-panel-head h2, .v3-panel-head h3 { margin: 0; }

.v3-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: .8rem; font-weight: 550;
    background: var(--teal-050); color: var(--ink-soft);
}
[data-theme="navigator-dark"] .v3-chip { color: var(--text); }
[data-theme="navigator-dark"] .v3-seg a { color: var(--text); }
[data-theme="navigator-dark"] .v3-seg a.is-active { color: #fff; }
[data-theme="navigator-dark"] .v3-seg a:not(.is-active):hover { color: var(--teal-400); }
[data-theme="navigator-dark"] .v3-groupbar .tab-count { color: var(--text); }
[data-theme="navigator-dark"] .v3-groupbar .tab-btn:hover { color: var(--text); }
.v3-chip.is-positive { background: var(--positive-050); color: var(--positive); }
.v3-chip.is-negative { background: var(--negative-050); color: var(--negative); }
.v3-chip.is-gold { background: var(--gold); color: #000; }

.v3-stat { display: flex; flex-direction: column; gap: 2px; }
.v3-stat b { font-size: 1.3rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
[data-theme="navigator-dark"] .v3-stat b { color: var(--text); }
.v3-stat span { font-size: .8rem; color: var(--text-muted); }

.v3-grid { display: grid; gap: 16px; }
.v3-grid-2 { grid-template-columns: 1fr 1fr; }
.v3-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) {
    .v3-grid-2, .v3-grid-3 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Buttons + forms                                                     */
/* ------------------------------------------------------------------ */
.v3-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; padding: 9px 18px; border-radius: 999px;
    font-family: inherit; font-size: .92rem; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
    white-space: nowrap; /* a label wrapping mid-pill makes a tall blob */
    transition: background .15s ease-out, border-color .15s ease-out;
}
.v3-btn:hover { text-decoration: none; }
.v3-btn-primary { background: var(--teal-600); color: #fff; }
.v3-btn-primary:hover { background: var(--ink-soft); }
.v3-btn-secondary {
    background: var(--surface); color: var(--ink);
    border-color: var(--border);
}
[data-theme="navigator-dark"] .v3-btn-secondary { color: var(--text); }
.v3-btn-secondary:hover { border-color: var(--teal-500); background: var(--teal-050); }
.v3-btn-ghost { background: none; color: var(--teal-600); }
.v3-btn-ghost:hover { background: var(--teal-050); }
.v3-btn-danger { background: var(--negative); color: #fff; }
.v3-btn-sm { padding: 6px 13px; font-size: .85rem; }

/* Inert "Apply" slot for a card with no application link — discontinued
   or no longer open to new applicants. Non-interactive by design, so it
   is a <span>, not an <a>; the dashed border + muted fill read as "off". */
.apply-na {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 6px 13px; border-radius: 999px;
    font-family: inherit; font-size: .85rem; font-weight: 600;
    background: var(--surface); color: var(--ink);
    border: 1px dashed var(--border);
    opacity: .6; cursor: not-allowed; white-space: nowrap;
}
[data-theme="navigator-dark"] .apply-na { color: var(--text); }
.apply-na.is-block { display: flex; width: 100%; padding: 9px 18px; font-size: .92rem; }

/* Form styling is OPT-IN (.v3-panel / .v3-form containers only): bare
   element selectors here would outrank the legacy stylesheets that
   pages with reused live interiors load underneath (e.g. .rem-lead's
   70px width in the credits table) and wreck their layouts. */
.v3-panel label, .v3-form label {
    font-weight: 550; font-size: .88rem; display: block; margin-bottom: 4px;
}
.v3-panel input[type="text"], .v3-panel input[type="email"],
.v3-panel input[type="number"], .v3-panel input[type="search"],
.v3-panel select, .v3-panel textarea,
.v3-form input[type="text"], .v3-form input[type="email"],
.v3-form input[type="number"], .v3-form input[type="search"],
.v3-form select, .v3-form textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 16px; /* 16px stops iOS zoom */
    color: var(--text); background: var(--surface);
}
.v3-panel input:focus, .v3-panel select:focus, .v3-panel textarea:focus,
.v3-form input:focus, .v3-form select:focus, .v3-form textarea:focus {
    outline: none; border-color: var(--teal-500); box-shadow: var(--focus-ring);
}
/* Inline form-check labels keep their natural flow. Never size the
   checkbox/radio inputs themselves: bootstrap's appearance:none boxes
   collapse to a sliver if their explicit 1em width is overridden. */
.v3-panel .form-check label { width: auto; display: inline; margin-bottom: 0;
    font-weight: 400; font-size: inherit; }

/* ------------------------------------------------------------------ */
/* Tabs (hash-driven, restored on load)                                */
/* ------------------------------------------------------------------ */
.v3-tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--border);
    margin-bottom: 20px; overflow-x: auto; scrollbar-width: none;
}
.v3-tabs::-webkit-scrollbar { display: none; }
.v3-tabs a {
    padding: 9px 14px; white-space: nowrap;
    color: var(--text-muted); font-weight: 550; font-size: .92rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.v3-tabs a:hover { color: var(--ink); text-decoration: none; }
[data-theme="navigator-dark"] .v3-tabs a:hover { color: var(--text); }
.v3-tabs a.is-active { color: var(--teal-600); border-bottom-color: var(--teal-600); }

/* ------------------------------------------------------------------ */
/* Tables: only tables scroll sideways, inside their own container     */
/* ------------------------------------------------------------------ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v3-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.v3-table th {
    text-align: left; font-weight: 600; color: var(--text-muted);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.v3-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.v3-table tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------------ */
/* Toasts + inline confirmations (feedback in place)                   */
/* ------------------------------------------------------------------ */
.v3-toasts {
    position: fixed; bottom: calc(var(--tabbar-h) + 12px); left: 50%;
    transform: translateX(-50%); z-index: 60;
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    width: min(92vw, 420px); pointer-events: none;
}
@media (min-width: 821px) { .v3-toasts { bottom: 24px; } }
.v3-toast {
    background: var(--ink); color: #fff;
    padding: 10px 18px; border-radius: 999px;
    font-size: .9rem; font-weight: 500; box-shadow: var(--shadow);
    opacity: 1; transition: opacity .25s ease-out, transform .25s ease-out;
}
.v3-toast.is-success { background: var(--positive); }
.v3-toast.is-error { background: var(--negative); }
.v3-toast.is-leaving { opacity: 0; transform: translateY(6px); }

.v3-inline-note {
    display: inline-flex; align-items: center; margin-left: 8px;
    padding: 2px 10px; border-radius: 999px;
    font-size: .8rem; font-weight: 600;
    background: var(--positive-050); color: var(--positive);
    transition: opacity .3s ease-out;
}
.v3-inline-note.is-error { background: var(--negative-050); color: var(--negative); }
.v3-inline-note.is-leaving { opacity: 0; }

/* Return link left behind after a deep-link jump (feedback in place). */
.rem-return {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .85rem; font-weight: 550;
}

/* ------------------------------------------------------------------ */
/* My Cards (V3 chrome over the live interiors)                        */
/* ------------------------------------------------------------------ */
.v3-signin-note {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.v3-overview { margin-bottom: 18px; }
.v3-panel-rows li > a {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; flex: 1; color: inherit;
}
.v3-panel-rows li > a:hover { text-decoration: none; }
.v3-panel-rows li > a:hover strong { color: var(--teal-600); }

/* Section bar: our look for the shared .tab-btn machinery. */
.v3-groupbar {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.v3-groupbar::-webkit-scrollbar { display: none; }
.v3-groupbar .tab-btn {
    background: none; border: none; border-radius: 0;
    cursor: pointer; font-family: inherit;
    padding: 10px 14px; white-space: nowrap;
    color: var(--text-muted); font-weight: 550; font-size: .95rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.v3-groupbar .tab-btn:hover { color: var(--ink); background: none; }
.v3-groupbar .tab-btn.is-active {
    color: var(--teal-600); border-bottom-color: var(--teal-600);
    background: none; border-radius: 0; box-shadow: none;
}
.v3-groupbar .tab-count {
    background: var(--teal-050); color: var(--ink-soft);
    border-radius: 999px; padding: 1px 8px; font-size: .75rem;
}

/* Second-level segmented control inside a section. */
.v3-seg {
    display: inline-flex; gap: 2px; margin-bottom: 16px;
    background: var(--teal-050); border-radius: 999px; padding: 3px;
}
.v3-seg a {
    padding: 5px 14px; border-radius: 999px;
    color: var(--ink-soft); font-weight: 550; font-size: .87rem;
}
.v3-seg a:hover { text-decoration: none; }
.v3-seg a:not(.is-active):hover { background: var(--surface); color: var(--teal-600); }
/* Filled active state: these are controls, not chips, and must read
   as pressed at a glance on both themes. */
.v3-seg a.is-active { background: var(--teal-600); color: #fff; box-shadow: var(--shadow); }
.v3-seg .tab-count { font-size: .78rem; color: var(--text-muted); }
.v3-seg a.is-active .tab-count { color: rgba(255, 255, 255, .8); }

/* The credits control band: view switch left, grouping (or the
   scoreboard stat) right, one wrapping row. */
.v3-cc-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.v3-cc-controls .v3-seg { margin-bottom: 0; }
.v3-cc-stat { margin: 0; }

/* Button that reads as a link (expand all, the tucked-away bulk off). */
.v3-linklike {
    background: none; border: none; padding: 0; font: inherit;
    font-size: .85rem; font-weight: 550; color: var(--teal-600);
    cursor: pointer; text-decoration: underline;
    text-underline-offset: 2px;
}
.v3-linklike.is-danger { color: var(--negative); }
[data-theme="navigator-dark"] .v3-linklike.is-danger { color: #e5766e; }

/* Per-group tracked count on the collapsed summaries. */
.cg-tracked {
    font-size: .78rem; color: var(--text-muted);
    background: var(--teal-050); border-radius: 999px;
    padding: 1px 8px; white-space: nowrap; flex-shrink: 0;
}
/* Lighter sibling of the sub-tab bar: the "By card / By category" grouping
   toggle sits under it inside Track credits and should read as secondary. */
.v3-seg-sub a { font-size: .82rem; font-weight: 500; padding: 4px 12px; }

.v3-cardart {
    width: 80px; height: 50px; object-fit: cover; border-radius: 5px;
}

.v3-rankart { width: 70px; height: 44px; object-fit: cover; border-radius: 5px; }
.v3-best-overall { border-color: var(--gold); }

/* Gap-row CTAs: hug the right edge on desktop, wrap to their own line
   on a phone (.pb-gap is already flex-wrap in the legacy sheet). */
.v3-gap-ctas { display: inline-flex; gap: 8px; margin-left: auto; }
@media (max-width: 820px) {
    .v3-gap-ctas { margin-left: 0; flex-basis: 100%; }
}
.v3-detail-name { font-size: 1.5rem; }
.v3-filterbar { padding: 14px 20px; }
.v3-filterbar summary { font-weight: 600; cursor: pointer; }

/* ------------------------------------------------------------------ */
/* Profile page                                                        */
/* ------------------------------------------------------------------ */
.v3-narrow { max-width: 720px; }
.v3-profile-head {
    display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
    flex-wrap: wrap;
}
.v3-profile-id { flex: 1; min-width: 200px; }
.v3-profile-id h1 { margin-bottom: 2px; }
.v3-profile-id p { margin: 0; }
.v3-avatar-lg { width: 52px; height: 52px; font-size: 1.3rem; }

.v3-theme-row { display: flex; gap: 10px; flex-wrap: wrap; }
.v3-theme-card {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface);
    font-family: inherit; font-size: .88rem; font-weight: 550;
    color: var(--text); cursor: pointer;
}
.v3-theme-card:hover:not(:disabled) { border-color: var(--teal-500); }
.v3-theme-card.is-current { border-color: var(--teal-600); box-shadow: var(--focus-ring); }
/* Locked themes stay clickable: the tap opens the plans page. */
.v3-theme-card.is-locked { opacity: .55; cursor: pointer; }
.v3-theme-swatch {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--border);
}
.v3-theme-swatch.is-classic { background: linear-gradient(135deg, #ffffff 50%, #0e90a5 50%); }
.v3-theme-swatch.is-dark { background: linear-gradient(135deg, #0c2a2e 50%, #ecb947 50%); }
.v3-theme-swatch.is-warm { background: linear-gradient(135deg, #fdf6e3 50%, #1f9ba0 50%); }

.v3-invite {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px; margin-bottom: 14px;
}
.v3-invite-email { max-width: 280px; }

/* Extra-perks rows: the card-art/badge column must never shrink under
   the perk text; its nowrap content just overflows underneath and the
   text paints over the Companion badge. The text column (.xp-text,
   min-width: 0) is the one that wraps. */
.xp-section .pb-list li .xp-card { flex: none; }

/* Owner (Companion) badges render identical metrics in every context
   they appear in: playbook tile heads, merchant lines, credit groups. */
.owner-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; line-height: 1.5; padding: 1px 8px;
    vertical-align: middle;
    align-self: center; /* flex rows must not stretch the pill taller */
}

/* The playbook tile's edit affordance is an absolutely-positioned
   circle: keep the title clear of it, and swap its hardcoded white
   disc for a surface token so it stops glowing on dark tiles. */
.pb-tile-name { padding-right: 26px; }
.pb-tile-edit {
    background: var(--surface); color: var(--text-muted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* Sock-drawer chip carries a hardcoded #ECEFF2 in the legacy sheet;
   on dark surfaces it becomes a quiet tokenized chip instead. */
[data-theme="navigator-dark"] .pb-tile-chip.is-sockchip {
    background: var(--teal-050); border-color: var(--border);
    color: var(--text-muted);
}

/* The post-claim nudge: appears at the action site after "I have this
   card" or "I'm interested", on tiles and the card detail page alike. */
.cta-wallet-nudge {
    display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
    margin-top: 10px; padding: 10px 12px;
    background: var(--teal-050); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .85rem;
}
.cta-nudge-lead { font-weight: 650; color: var(--ink); }
[data-theme="navigator-dark"] .cta-nudge-lead { color: var(--text); }
.cta-nudge-why {
    flex-basis: 100%; color: var(--text-muted); font-size: .8rem;
    line-height: 1.5;
}

/* Partial credit usage: the half-filled cycle dot and the inline
   amount form inside the outcome popover. */
/* A partly-used merchant tile keeps full color (its remainder is live)
   with a half-filled edge marker echoing the grid's partial dot. */
.pb-merch-tile.is-partial {
    box-shadow: inset 3px 0 0 #1B7F4B;
}

/* Half-filled sibling of .is-used (which is solid #1B7F4B in the
   legacy sheet): same solid border, fill stops at the meridian. The
   base dot is DASHED, so the border style must be restated or the
   state reads as an empty eligible circle. */
.ug-dot.is-partial {
    border: 2px solid #1B7F4B;
    background: linear-gradient(90deg, #1B7F4B 50%, transparent 50%);
}
/* Same pill family as the .ut-act neighbors (their base style lives in
   the legacy sheet): explicit appearance reset so no page context can
   hand it back the native white button face. */
.ut-fix .ut-part-open {
    appearance: none; -webkit-appearance: none;
    font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    border-radius: 999px; padding: 2px 9px;
    background: var(--color-white, #fff);
    border: 1px solid var(--teal-600); color: var(--teal-600);
}
.ut-fix .ut-part-open:hover { background: rgba(14, 144, 165, .12); }
/* The bubble is inline-flex: without centered alignment, revealing the
   two-row form stretches every sibling pill into an egg. */
.ug-cell .ut-fix { align-items: center; }
.ut-part-form {
    display: flex; align-items: center; gap: 5px; padding: 0 2px;
    flex-wrap: nowrap;
}
.ut-part-form[hidden] { display: none; }
.ut-part-cur { color: var(--text-muted); }
.ut-part-amt {
    width: 72px; padding: 4px 8px; font-size: .85rem;
    border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); background: var(--surface);
}
.ut-part-hint { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }

/* Loyalty program logos arrive in every aspect ratio, each with its own
   baked-in background: normalize them into uniform white tiles so the
   list reads as one system. The tile stays white in dark themes on
   purpose: brand logos are drawn for light surfaces, and a consistent
   chip looks intentional where a floating white box looked broken. */
.loyalty-logo {
    width: 58px; height: 34px; object-fit: contain;
    background: #fff; padding: 4px 6px;
    border: 1px solid var(--border); border-radius: 6px;
    margin-right: 10px; flex-shrink: 0;
}
.loyalty-status-name { display: flex; align-items: center; }

/* Big purchase form: one aligned grid, no bootstrap column soup. The
   money input fuses the $ to its field so it can never wrap apart. */
.v3-bp-fields {
    display: grid;
    grid-template-columns: 150px 1fr 1fr 1fr;
    gap: 14px 16px; align-items: end;
}
.v3-bp-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 20px; flex-wrap: wrap; margin-top: 16px;
}
.v3-money-input {
    display: flex; align-items: stretch;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden; background: var(--surface);
}
.v3-money-input span {
    display: flex; align-items: center; padding: 0 10px;
    background: var(--surface-alt); color: var(--text-muted);
    border-right: 1px solid var(--border);
}
.v3-form .v3-money-input input {
    border: none; border-radius: 0; min-width: 0;
}
.v3-form .v3-money-input input:focus { box-shadow: none; }
.v3-money-input:focus-within {
    border-color: var(--teal-500); box-shadow: var(--focus-ring);
}
@media (max-width: 900px) {
    .v3-bp-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .v3-bp-fields { grid-template-columns: 1fr; }
    .v3-bp-actions .v3-btn { width: 100%; }
}

.v3-auth-shell { max-width: 460px; padding-top: 24px; }
.v3-support-feature { max-width: 320px; }
.v3-page-head h1 .icon { color: var(--teal-600); }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */
.v3-footer {
    border-top: 1px solid var(--border); background: var(--surface);
    padding: 28px 0; margin-top: 24px;
}
.v3-footer-grid {
    display: flex; flex-wrap: wrap; gap: 16px 32px;
    align-items: baseline; justify-content: space-between;
}
.v3-footer-brand { font-weight: 700; color: var(--ink); margin: 0; }
[data-theme="navigator-dark"] .v3-footer-brand { color: var(--text); }
.v3-footer-muted { color: var(--text-muted); font-size: .82rem; margin: 0; }
.v3-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.v3-footer nav a { color: var(--text-muted); font-size: .88rem; }
.v3-footer nav a:hover { color: var(--teal-600); }

/* ------------------------------------------------------------------ */
/* Dashboard (Today)                                                   */
/* ------------------------------------------------------------------ */
.v3-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 20px;
}
.v3-page-head h1 { margin-bottom: 0; }
.v3-page-head p { margin: 0; }

.v3-attention { list-style: none; margin: 0; padding: 0; }
.v3-attention li {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--border);
}
.v3-attention li:last-child { border-bottom: none; }
.v3-attention li > span { flex: 1; }
.v3-attention .icon { color: var(--teal-600); }
.v3-attention .icon.is-warn { color: var(--negative); }
.v3-attention-clear .icon { color: var(--positive); }
.v3-attention .v3-btn { flex-shrink: 0; }

.v3-pulse { text-align: left; }
.v3-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 820px) {
    .v3-attention li { flex-wrap: wrap; }
    .v3-attention li > span { flex-basis: calc(100% - 30px); }
    .v3-attention .v3-btn { margin-left: 30px; }
}

/* ------------------------------------------------------------------ */
/* Marketing (welcome) page                                            */
/* ------------------------------------------------------------------ */
.v3-back-chip { margin: 0 0 16px; }
.v3-hero-copy h1 { font-size: 2.3rem; margin-bottom: .75rem; }
.v3-lead { font-size: 1.08rem; color: var(--text-muted); max-width: 46ch; }
.v3-hero-actions { display: flex; gap: 12px; margin: 20px 0 14px; flex-wrap: wrap; }
.v3-reassure {
    display: flex; align-items: center; gap: 7px;
    font-size: .85rem; color: var(--text-muted); margin: 0;
}
.v3-reassure .icon { color: var(--positive); }

.v3-hero-panel { box-shadow: var(--shadow); }
.v3-panel-rows { list-style: none; margin: 0; padding: 0; }
.v3-panel-rows li {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border);
    font-size: .92rem;
}
.v3-panel-rows li:last-child { border-bottom: none; padding-bottom: 0; }
.v3-panel-rows li:first-child { padding-top: 0; }
.v3-panel-rows span { color: var(--text-muted); flex-shrink: 0; }
.v3-panel-rows strong {
    font-weight: 650; color: var(--ink); text-align: right;
    overflow-wrap: anywhere;
}
[data-theme="navigator-dark"] .v3-panel-rows strong { color: var(--text); }

.v3-caps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-bottom: 24px;
}
.v3-cap {
    display: block;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px;
    color: inherit;
    transition: border-color .15s ease-out, transform .15s ease-out;
}
.v3-cap:hover {
    text-decoration: none; border-color: var(--teal-500);
    transform: translateY(-2px);
}
.v3-cap:hover h3 { color: var(--teal-600); }
.v3-cap .icon { color: var(--teal-600); margin-bottom: 10px; }
.v3-cap h3 { font-size: 1rem; }
.v3-cap p { color: var(--text-muted); font-size: .9rem; margin: 0; }

/* Panels that are links: inherit ink, lift on hover, never underline. */
.v3-tile-link { color: inherit; display: block; }
.v3-tile-link:hover {
    text-decoration: none; border-color: var(--teal-500);
}
.v3-tile-link:hover h3 { color: var(--teal-600); }

.v3-proof {
    text-align: center; padding: 24px 0;
    border-top: 1px solid var(--border);
}
.v3-proof p { color: var(--text-muted); max-width: 62ch; margin: 0 auto .5rem; }

@media (max-width: 820px) {
    .v3-hero-copy h1 { font-size: 1.7rem; }
    .v3-caps { grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
}

/* ------------------------------------------------------------------ */
/* Landing scroll stage                                                */
/* ------------------------------------------------------------------ */
/* Default = static fallback (mobile, tablet, reduced motion, no JS):
   the fan is hidden, the hero flows normally, and the three product
   panels sit in a plain responsive grid. The scroll experience only
   exists once JS confirms the desktop gate and adds .stage-on. */
.v3-stage-fan { display: none; }
.v3-stage-hero {
    max-width: 1080px; margin: 0 auto; padding: 24px 20px 8px;
}
.v3-stage-hero .v3-hero-copy { max-width: 640px; }
.v3-scroll-hint { display: none; }
.v3-reveal {
    max-width: 1080px; margin: 0 auto; padding: 8px 20px 24px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    align-items: start;
}
@media (max-width: 820px) {
    /* padding-bottom matches the gap so the seam into the capability
       tiles reads as one rhythm, not a double gap. */
    .v3-reveal { grid-template-columns: 1fr; gap: 12px; padding-bottom: 12px; }
}
/* The reveal is a grid: its gap owns the spacing, so the stacked-block
   rhythm margin must not leak in (same rule as .v3-grid children). */
.v3-reveal > .v3-panel { margin-top: 0; }

.v3-nowrap { white-space: nowrap; }

/* The mock panels' interior bits. */
.v3-mock-rows { list-style: none; margin: 0 0 10px; padding: 0; }
.v3-mock-rows li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .9rem;
}
.v3-mock-rows li:last-child { border-bottom: none; }
.v3-mock-rows li > span:first-child { flex: 1; }
.v3-mock-rows em { font-style: normal; color: var(--text-muted); font-size: .82rem; }
.v3-mock-toggle {
    width: 30px; height: 17px; border-radius: 999px;
    background: var(--border); position: relative; flex-shrink: 0;
}
.v3-mock-toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 13px; height: 13px; border-radius: 50%; background: var(--surface);
}
.v3-mock-toggle.is-on { background: var(--teal-500); }
.v3-mock-toggle.is-on::after { left: auto; right: 2px; }
.v3-mock-score { display: flex; align-items: baseline; gap: 10px; }
.v3-mock-score b { font-size: 2rem; font-weight: 700; color: var(--ink); }
[data-theme="navigator-dark"] .v3-mock-score b { color: var(--text); }
.v3-mock-bar {
    height: 8px; border-radius: 999px; background: var(--border);
    overflow: hidden; margin: 8px 0 10px;
}
.v3-mock-bar i {
    display: block; height: 100%; background: var(--teal-500);
    border-radius: 999px;
}

/* --- The animated stage (JS-gated: desktop width + motion OK) --- */
.v3-stage.stage-on {
    height: 235vh; --pa: 0; --pb: 0;
}
.v3-stage.stage-on .v3-stage-viewport {
    position: sticky; top: 0; height: 100vh; overflow: clip;
}
.v3-stage.stage-on .v3-stage-hero {
    position: absolute; inset: 0; max-width: none; padding: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    opacity: clamp(0, calc(1 - var(--pa) * 1.5), 1);
    transform: translateY(calc(var(--pa) * -60px));
}
.v3-stage.stage-on .v3-stage-hero .v3-hero-copy { max-width: 580px; }
.v3-stage.stage-on .v3-hero-actions { justify-content: center; }
.v3-stage.stage-on .v3-reassure { justify-content: center; }
.v3-stage.stage-on.past-hero .v3-stage-hero { pointer-events: none; }
.v3-stage.stage-on .v3-scroll-hint {
    display: block; margin-top: 22px; color: var(--text-muted);
    animation: v3-hint-bob 1.8s ease-in-out infinite;
}
@keyframes v3-hint-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(7px); }
}

.v3-stage.stage-on .v3-stage-fan { display: block; }
.v3-stage.stage-on .v3-float-card {
    position: absolute; left: 50%; top: 50%;
    width: 230px; height: 145px; margin: -72px 0 0 -115px;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 14px 40px rgba(12, 42, 46, .3);
    background: var(--surface);
    transform:
        translate(calc(var(--sx) * (1 - var(--pa)) + var(--ex) * var(--pa)),
                  calc(var(--sy) * (1 - var(--pa)) + var(--ey) * var(--pa)))
        rotate(calc(var(--sr) * (1 - var(--pa)) + var(--er) * var(--pa)))
        scale(calc(1 - .3 * var(--pa)));
    will-change: transform;
}
.v3-float-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Start poses: three down each side, progressively angled; end poses:
   one slightly-splayed row along the top while the panels rise below. */
.v3-stage.stage-on .fc-1 { --sx: -36vw; --sy: -26vh; --sr: -8deg;  --ex: -375px; --ey: -34vh; --er: -3deg; }
.v3-stage.stage-on .fc-2 { --sx: -40vw; --sy: -2vh;  --sr: -14deg; --ex: -225px; --ey: -34vh; --er: -1.5deg; }
.v3-stage.stage-on .fc-3 { --sx: -35vw; --sy: 22vh;  --sr: -20deg; --ex: -75px;  --ey: -34vh; --er: 0deg; }
.v3-stage.stage-on .fc-4 { --sx: 36vw;  --sy: -26vh; --sr: 8deg;   --ex: 75px;   --ey: -34vh; --er: 0deg; }
.v3-stage.stage-on .fc-5 { --sx: 40vw;  --sy: -2vh;  --sr: 14deg;  --ex: 225px;  --ey: -34vh; --er: 1.5deg; }
.v3-stage.stage-on .fc-6 { --sx: 35vw;  --sy: 22vh;  --sr: 20deg;  --ex: 375px;  --ey: -34vh; --er: 3deg; }

.v3-stage.stage-on .v3-reveal {
    position: absolute; left: 50%; top: 46%;
    transform: translateX(-50%);
    width: min(1040px, 92vw); padding: 0;
    pointer-events: none;
}
.v3-stage.stage-on.past-hero .v3-reveal { pointer-events: auto; }
.v3-stage.stage-on .v3-mock {
    opacity: clamp(0, calc((var(--pb) - var(--d, 0)) * 2.2), 1);
    transform: translateY(calc((1 - clamp(0, calc((var(--pb) - var(--d, 0)) * 2.2), 1)) * 46px));
    will-change: transform, opacity;
}
.v3-stage.stage-on .v3-mock:nth-child(2) { --d: .12; }
.v3-stage.stage-on .v3-mock:nth-child(3) { --d: .24; }

/* ------------------------------------------------------------------ */
/* Empty states                                                        */
/* ------------------------------------------------------------------ */
.v3-empty {
    text-align: center; padding: 40px 20px;
    border: 1px dashed var(--border); border-radius: var(--radius);
    color: var(--text-muted);
}
.v3-empty .icon { color: var(--teal-400); margin-bottom: 8px; }
.v3-empty p { max-width: 380px; margin: 0 auto .9rem; }