/* ═══════════════════════════════════════════════════════════════════════════
   CLASS NAMING — read this before adding a class anywhere.

   This app has BOTH global stylesheets and Blazor scoped CSS (*.razor.css). A scoped rule gets a
   [b-xxxxx] attribute; a global rule does not. That means:

     • A global rule reaches INTO a component whenever the component uses the same class name.
       The component cannot opt out, and if the global carries !important it cannot even override.
     • This is silent. Everything looks right until the two rules happen to disagree.

   It has cost us four real bugs:
     • .field         — open-account's `.field + .field { margin-top }` (for STACKED fields) pushed
                        DateRangeSheet's two SIDE-BY-SIDE date fields out of line.
     • .desktop-only  — the global forces `display: block !important`, which collapsed Activity's
                        <thead> and <td> into blocks and destroyed the table.
     • .text-blue     — redefined in two components, so it meant three different colours.
     • .acc-type      — defined only inside a mobile media query, so the desktop copy was unstyled.

   THE RULES

   1. A SHARED component (Components/Shared/*) namespaces every class to itself:
        .arow, .arow__label, .arow__icon--success      NOT  .row, .label, .tone-success
   2. Never re-declare a global class in scoped CSS. If you need it to differ, it isn't that class.
   3. Never re-declare .mobile-only / .desktop-only. They are global utilities and they carry
      !important. Table elements need table-header-group / table-cell, so give them their own class.
   4. Generic nouns (.label .value .title .row .card .icon .field .sub .info) belong to the design
      system, not to a component.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   P1 design-system primitives — GLOBAL, token-driven.

   Why global and not scoped .razor.css:
   Blazor CSS isolation rewrites a scoped rule to `.p1-card[b-hash]`, which only matches
   elements written inside that one component. `.p1-card` used to live in Card.razor.css,
   but nine pages write `class="p1-card"` directly instead of using <Card> — so they got the
   class name with zero styling (no background, no border, no rounded corners).

   Anything shared across pages belongs here. Every value is a theme token so light/dark
   both work automatically.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Card ── */
.p1-card {
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: var(--p1-radius-card);
    padding: 16px;
}

.p1-card--flush {
    padding: 0;
    overflow: hidden;
}

@media (min-width: 768px) {
    .p1-card {
        border-radius: var(--p1-radius-card-lg);
        padding: 24px;
    }
}

/* ── Badge ── */
.p1-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--p1-text-xs);
    font-weight: 600;
}

.p1-badge--success { background: rgba(var(--p1-pos-rgb), 0.1);  color: var(--p1-success); }
.p1-badge--danger  { background: rgba(var(--p1-accent-red-rgb), 0.1);  color: var(--p1-accent-active); }
.p1-badge--warning { background: rgba(var(--p1-accent-amber-rgb), 0.15); color: var(--p1-accent-amber); }
.p1-badge--neutral { background: var(--p1-surface-inner);  color: var(--p1-text-muted); }

/* ── Primary button ── */
.p1-btn-primary {
    background: var(--p1-brand-btn);
    color: var(--p1-text-on-accent);
    border: none;
    border-radius: var(--p1-radius-control);
    padding: 12px 20px;
    font-family: var(--p1-font-family);
    font-weight: 600;
    font-size: var(--p1-text-base);
    cursor: pointer;
    width: 100%;
}

.p1-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.p1-btn-primary:hover:not(:disabled) {
    background: var(--p1-brand-btn-hover);
}

@media (min-width: 768px) {
    .p1-btn-primary { width: auto; }
}

/* ── Settings / navigable list rows (Profile, Documents, …) ── */
.p1-list {
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: var(--p1-radius-card);
    overflow: hidden;
}

.p1-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--p1-border-subtle);
    cursor: pointer;
    transition: background 0.15s;
    color: var(--p1-text-primary);
    text-decoration: none;
}

.p1-list-row:last-child { border-bottom: none; }
.p1-list-row:hover      { background: var(--p1-surface-inner); }

/* Square-ish tinted icon tile used at the left of a row. */
.p1-list-row__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--p1-surface-inner);
    color: var(--p1-text-secondary);
}

.p1-list-row__label {
    flex: 1;
    min-width: 0;
    font-size: var(--p1-text-base);
    font-weight: 500;
}

.p1-list-row__value {
    font-size: var(--p1-text-md);
    color: var(--p1-text-muted);
    flex-shrink: 0;
}

/* ── "See all" / "View all" section link ──
   Global, not scoped: it is applied to a <NavLink>, and CSS isolation can never match the <a>
   that NavLink renders — which is why this link was losing its red colour and arrow spacing. */
.see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--p1-brand-accent);
    font-size: var(--p1-text-md);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.see-all:hover {
    opacity: 0.8;
}

/* ── Section label above a list ── */
.p1-section-label {
    font-size: var(--p1-text-xs);
    font-weight: var(--p1-weight-bold);
    color: var(--p1-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--p1-tracking-caps);
    margin: 0 0 0.5rem 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSACTION FLOW CHROME — GLOBAL.
   Shared by PayIn / Withdraw / Transfer / Invest / Sell. Previously this lived in each
   page's scoped .razor.css, which meant it was duplicated three times and any new flow
   (Invest, Sell) rendered completely unstyled.
   ═══════════════════════════════════════════════════════════════════════════ */
.transaction-page {
    /* min-height, NOT height: 100vh. The shell already reserves space for the bottom nav, so a
       hard 100vh overflowed it — producing a scrollbar and a slab of dead space below the
       Continue button. min-height:100% fills the available area exactly; .tx-footer's
       margin-top:auto pins Continue to the bottom, and the page only scrolls when content
       genuinely overflows. */
    flex: 1;              /* stretch to fill .shell-content (a flex column) ... */
    min-height: 100%;     /* ... and never be shorter than it */
    display: flex;
    flex-direction: column;
    background: var(--p1-bg);
}

.tx-header {
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    color: var(--p1-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tx-title {
    font-size: var(--p1-text-xl);
    font-weight: 700;
    line-height: 1.2;
}

.tx-subtitle {
    font-size: var(--p1-text-sm);
    color: var(--p1-text-muted);
}

.tx-content {
    flex: 1;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
}

.tx-step {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-label {
    display: block;
    font-size: var(--p1-text-sm);
    font-weight: 600;
    color: var(--p1-text-secondary);
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}

.amount-input-wrapper {
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.currency-symbol {
    font-size: var(--p1-text-3xl);
    font-weight: 700;
    color: var(--p1-text-muted);
}

.amount-input {
    background: transparent;
    border: none;
    color: var(--p1-text-primary);
    font-size: var(--p1-text-3xl);
    font-weight: 700;
    width: 100%;
    outline: none;
}

.quick-amounts {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.quick-btn {
    flex: 1;
    background: var(--p1-surface-inner);
    border: 1px solid var(--p1-border);
    color: var(--p1-text-secondary);
    padding: 0.5rem 0;
    border-radius: 0.75rem;
    font-size: var(--p1-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-btn:hover {
    background: var(--p1-border-subtle);
    color: var(--p1-text-primary);
}

.selector-card {
    background: var(--p1-surface);
    padding: 1rem;
}

.bank-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bank-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--p1-surface-inner);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--p1-text-muted);
}

.bank-details {
    flex: 1;
}

.bank-name {
    font-size: var(--p1-text-base);
    font-weight: 600;
}

.account-holder {
    font-size: var(--p1-text-xs);
    color: var(--p1-text-muted);
}

.tx-footer {
    margin-top: auto;
    padding: 1.5rem 0;
}

.primary-btn {
    width: 100%;
    background: var(--p1-accent-active);
    color: var(--p1-text-on-accent);   /* sits on red — must stay white in light mode too */
    padding: 1rem;
    border-radius: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.primary-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.review-card {
    background: var(--p1-surface);
    padding: 1rem;
}

.review-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--p1-surface-inner);
}

.review-row:last-child {
    border-bottom: none;
}

.review-row .label {
    font-size: var(--p1-text-base);
    color: var(--p1-text-secondary);
}

.review-row .value {
    font-size: var(--p1-text-base);
    color: var(--p1-text-primary);
    text-align: right;
}

/* A second line under the value — account ref, bank details, that sort of thing. */
.review-row .value .sub {
    display: block;
    font-size: var(--p1-text-xs);
    font-weight: 400;
    color: var(--p1-text-muted);
    margin-top: 0.125rem;
}

/* The transaction designs label review rows in small caps. */
.review-card--upper .label {
    font-size: var(--p1-text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--p1-text-muted);
}

.success-step {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 3rem;
}

/* Deliberately off the type scale: this sizes an icon GLYPH, not text. */
.success-icon {
    font-size: 4rem;
    color: var(--p1-success);
    margin-bottom: 1.5rem;
}

.success-title {
    font-size: var(--p1-text-3xl);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.success-msg {
    color: var(--p1-text-secondary);
    font-size: var(--p1-text-base);
}

.tx-details {
    width: 100%;
    background: var(--p1-surface);
    padding: 1rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--p1-text-sm);
    color: var(--p1-text-muted);
    padding: 0.5rem 0;
}

@media (min-width: 768px) {
    .transaction-page {
        max-width: 500px;
        margin: 0 auto;
        min-height: 100%;
        border-left: 1px solid var(--p1-border);
        border-right: 1px solid var(--p1-border);
    }
}

/* ── Amount banner (Assignment / Invest steps) ── */
.amount-banner {
    background: var(--p1-surface-inner);
    border: 1px solid var(--p1-border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.amount-banner__label {
    font-size: var(--p1-text-2xs);
    /* This had no font-weight at all, so it inherited 400 while every other uppercase label in the
       app was 600-700. It read as body text pretending to be a label. */
    font-weight: var(--p1-weight-semibold);
    color: var(--p1-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--p1-tracking-caps);
}

.amount-banner__value {
    font-size: var(--p1-text-base);
    font-weight: 700;
    color: var(--p1-text-primary);
}

/* ── Choice cards (Invest vs Hold as cash) ── */
.choice-card {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 1rem;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.choice-card.is-selected.is-invest { border-color: var(--p1-accent-blue); background: rgba(var(--p1-accent-blue-rgb), 0.05); }
.choice-card.is-selected.is-cash   { border-color: var(--p1-pos); background: rgba(var(--p1-pos-rgb), 0.05); }
/* Withdraw takes the money OUT — same red the Withdraw flow uses. It was reusing the green "cash"
   variant, which made taking money out of the account look like keeping it in. */
.choice-card.is-selected.is-withdraw { border-color: var(--p1-accent-active); background: rgba(var(--p1-accent-red-rgb), 0.06); }

.choice-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--p1-surface-inner);
    color: var(--p1-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.choice-card.is-selected.is-invest .choice-icon { background: rgba(var(--p1-accent-blue-rgb), 0.2); color: var(--p1-accent-blue-soft); }
.choice-card.is-selected.is-cash   .choice-icon { background: rgba(var(--p1-pos-rgb), 0.2);  color: var(--p1-success-text); }
.choice-card.is-selected.is-withdraw .choice-icon { background: rgba(var(--p1-accent-red-rgb), 0.2); color: var(--p1-accent-active); }

.choice-body { flex: 1; min-width: 0; }

.choice-title {
    font-size: var(--p1-text-base);
    font-weight: 600;
    color: var(--p1-text-primary);
    margin-bottom: 0.1875rem;
}

.choice-desc {
    font-size: var(--p1-text-xs);
    color: var(--p1-text-muted);
    line-height: 1.5;
}

.choice-tick {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--p1-accent-active);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.choice-card.is-selected.is-invest .choice-tick { background: var(--p1-accent-blue); }
.choice-card.is-selected.is-cash   .choice-tick { background: var(--p1-pos); }
.choice-card.is-selected.is-withdraw .choice-tick { background: var(--p1-accent-active); }

/* ── Misc ── */
.currency {
    font-size: var(--p1-text-3xl);
    font-weight: 700;
    color: var(--p1-text-muted);
}

.available-note {
    font-size: var(--p1-text-xs);
    color: var(--p1-text-muted);
    margin-top: 0.5rem;
    padding: 0 0.25rem;
}

.search-hint {
    font-size: var(--p1-text-sm);
    color: var(--p1-text-muted);
    text-align: center;
    padding: 1.5rem 0;
    margin: 0;
}

.transaction-page .section-title {
    font-size: var(--p1-card-title-size);
    font-weight: var(--p1-card-title-weight);
    color: var(--p1-text-primary);
    margin: 0 0 0.75rem;
}

.transaction-page .search-bar {
    position: relative;
    width: 100%;
}

.transaction-page .search-bar .search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p1-text-muted);
    display: flex;
    pointer-events: none;
}

.transaction-page .search-bar input {
    width: 100%;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    color: var(--p1-text-primary);
    padding: 0.875rem 1rem 0.875rem 2.5rem;
    border-radius: 0.875rem;
    font-size: var(--p1-text-base);
    font-family: inherit;
    outline: none;
}

.account-selector { margin-top: 1.5rem; }
.input-section    { margin-top: 0.5rem; }

/* ── Sell: proceeds allocation summary ── */
.alloc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: 0.75rem;
    background: rgba(var(--p1-pos-rgb), 0.1);
    border: 1px solid rgba(var(--p1-pos-rgb), 0.2);
    color: var(--p1-success-text);
    font-size: var(--p1-text-sm);
    font-weight: 600;
}

.alloc-summary.is-over {
    background: rgba(var(--p1-accent-red-rgb), 0.1);
    border-color: rgba(var(--p1-accent-red-rgb), 0.2);
    color: var(--p1-neg-text);
}

/* ── Rebalance: proposed trades ── */
.trade-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--p1-border-subtle);
}

.trade-row:last-child { border-bottom: none; }

.trade-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trade-icon.is-sell { background: rgba(var(--p1-accent-red-rgb), 0.15); color: var(--p1-neg-text); }
.trade-icon.is-buy  { background: rgba(var(--p1-pos-rgb), 0.15); color: var(--p1-success-text); }

.trade-body { flex: 1; min-width: 0; }

.trade-name {
    font-size: var(--p1-text-md);
    font-weight: 600;
    color: var(--p1-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trade-drift {
    font-size: var(--p1-text-xs);
    color: var(--p1-text-muted);
    margin-top: 0.125rem;
}

.trade-amount {
    font-size: var(--p1-text-md);
    font-weight: 700;
    flex-shrink: 0;
}

.trade-amount.is-sell { color: var(--p1-neg-text); }
.trade-amount.is-buy  { color: var(--p1-success-text); }

.trade-totals {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.trade-total {
    flex: 1;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

.trade-total__label {
    display: block;
    font-size: var(--p1-text-xs);
    color: var(--p1-text-muted);
    margin-bottom: 0.25rem;
}

.trade-total__value {
    font-size: var(--p1-text-base);
    font-weight: 700;
}

.trade-total__value.is-sell { color: var(--p1-neg-text); }
.trade-total__value.is-buy  { color: var(--p1-success-text); }

/* ── Mode switch (Cash Movement modes, Account Setup model/search) ── */
.mode-switch {
    display: flex;
    gap: 0.25rem;
    background: var(--p1-surface-inner);
    border-radius: 0.75rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
}

.mode-btn {
    flex: 1;
    padding: 0.5rem 0;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--p1-text-muted);
    font-family: inherit;
    font-size: var(--p1-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mode-btn.active {
    background: var(--p1-accent-active);
    color: var(--p1-text-on-accent);   /* on red — stays white in both themes */
}

/* ── Account setup: per-fund allocation rows ── */
.alloc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--p1-border-subtle);
}

.alloc-row:last-child { border-bottom: none; }

.alloc-name {
    flex: 1;
    min-width: 0;
    font-size: var(--p1-text-md);
    font-weight: 500;
    color: var(--p1-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alloc-input {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--p1-bg);
    border: 1px solid var(--p1-border);
    border-radius: 0.5rem;
    padding: 0.375rem 0.5rem;
    flex-shrink: 0;
}

.alloc-input input {
    width: 3rem;
    background: transparent;
    border: none;
    outline: none;
    color: var(--p1-text-primary);
    font-family: inherit;
    font-size: var(--p1-text-base);
    font-weight: 700;
    text-align: right;
}

.alloc-pct {
    font-size: var(--p1-text-sm);
    color: var(--p1-text-muted);
}

.alloc-remove {
    background: none;
    border: none;
    color: var(--p1-text-muted);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    padding: 0.25rem;
}

.alloc-remove:hover { color: var(--p1-text-primary); }

/* ── GIA borrowing ── */
.borrow-copy {
    font-size: var(--p1-text-base);
    color: var(--p1-text-secondary);
    line-height: 1.65;
    margin: 0 0 0.75rem;
}

.borrow-copy:last-child { margin-bottom: 0; }

.borrow-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.borrow-amount {
    font-size: var(--p1-text-4xl);
    font-weight: 700;
    color: var(--p1-text-primary);
    line-height: 1.1;
}

.borrow-amount-label {
    font-size: var(--p1-text-sm);
    color: var(--p1-text-muted);
    margin: 0.25rem 0 1rem;
}

.borrow-facility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.625rem;
    font-size: var(--p1-text-xs);
    color: var(--p1-text-muted);
}

.account-id {
    font-size: var(--p1-text-2xl);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--p1-text-primary);
    margin: 0.25rem 0 0.5rem;
}

/* ── Quick actions (account detail) ── */
.quick-actions {
    margin: 1rem 1rem 0;
    display: grid;
    gap: 0.5rem;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0;
    border-radius: 0.75rem;
    border: 1px solid var(--p1-border);
    background: var(--p1-surface);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}

.quick-action:hover { border-color: var(--p1-text-muted); }

.quick-action__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-action__label {
    font-size: var(--p1-text-2xs);
    font-weight: 500;
    color: var(--p1-text-secondary);
}

/* ── Borrowing detail (modal) ── */
.borrow-lede {
    margin: 0 0 1rem;
    font-size: var(--p1-text-base);
    color: var(--p1-text-primary);
    line-height: 1.5;
}

.borrow-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--p1-border-subtle);
}

.borrow-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.borrow-field__label {
    font-size: var(--p1-text-sm);
    color: var(--p1-text-muted);
}

.borrow-field__value {
    font-size: var(--p1-text-base);
    font-weight: 700;
    color: var(--p1-text-primary);
}

.borrow-note { /* matches .borrow-lede — same size + leading */
    margin: 0 0 0.75rem;
    font-size: var(--p1-text-base);
    color: var(--p1-text-primary);
    line-height: 1.5;
}

.borrow-note:last-child { margin-bottom: 0; }

/* Coloured account-type pill (account selector sheet). */
.type-pill {
    flex-shrink: 0;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    font-size: var(--p1-text-2xs);
    font-weight: var(--p1-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--p1-tracking-caps);
}

/* Back link inside a drill-down sheet. */
.sheet-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--p1-text-secondary);
    font-family: inherit;
    font-size: var(--p1-text-md);
    cursor: pointer;
}

.sheet-back:hover { color: var(--p1-text-primary); }

/* Account reference shown beneath the account name in the selector. */
.acct-ref {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--p1-text-xs);
    font-weight: 400;
    color: var(--p1-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER CHIPS / TOGGLES — GLOBAL.
   These lived only in Activity.razor.css (scoped), so Account Detail's activity tab used the
   same class names and rendered completely unstyled. Anything shared belongs here.
   ═══════════════════════════════════════════════════════════════════════════ */
.chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    color: var(--p1-text-primary);
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-family: inherit;
    font-size: var(--p1-text-md);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
}

.chip-btn:hover { border-color: var(--p1-text-muted); }

.filter-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}

.filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
    white-space: nowrap;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-family: inherit;
    font-size: var(--p1-text-sm);
    font-weight: 500;
    background: var(--p1-surface);
    color: var(--p1-text-secondary);
    border: 1px solid var(--p1-border);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

/* Inverts against the theme — light-on-dark, dark-on-light. Never a literal black/white. */
.filter-chip.active {
    background: var(--p1-text-primary);
    color: var(--p1-bg);
    border-color: var(--p1-text-primary);
    font-weight: 600;
}

.pending-toggle-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
}

.toggle-switch {
    width: 40px;
    height: 22px;
    background: var(--p1-border);
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.toggle-switch.active { background: var(--p1-brand-accent); }

.toggle-thumb {
    width: 16px;
    height: 16px;
    background: #fff;   /* the knob sits on the track colour — white in both themes */
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active .toggle-thumb { transform: translateX(18px); }

.badge-amber {
    background: var(--p1-warning-tint);
    color: var(--p1-warning-strong);
    font-size: var(--p1-text-2xs);
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALLOUTS — GLOBAL. Rendered by <Callout>.
   The design is a tinted panel with a SOLID filled circle icon badge and coloured body text.
   Only the tint/text tokens flip between themes — the shape, the badge and the layout are the
   same in both, so the callout looks like the design in light mode as well as dark.
   ═══════════════════════════════════════════════════════════════════════════ */
/* The disc sits centred against the whole block of text, as in the design — not pinned to the
   first line. */
.callout {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid;
}

/* Tinted rounded tile, icon stroked in the accent. */
.callout__icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* An <svg> is inline by default, so it sits on the text baseline and rides a couple of pixels
       low inside the tile no matter what the flex centring says. display:block removes the
       baseline gap and lets the centring actually take effect. */
    line-height: 0;
}

.callout__icon svg {
    display: block;
}

.callout__body {
    font-size: var(--p1-text-sm);
    line-height: 1.5;
}

/* Body content comes from the calling page, so these have to be global rules — a scoped
   .razor.css on <Callout> could never reach them. */
.callout__body p    { margin: 0; }
.callout__body p + p { margin-top: 0.5rem; }

.callout--info    { background: var(--p1-info-bg);    border-color: var(--p1-info-border);    color: var(--p1-info-text); }
.callout--warning { background: var(--p1-warning-bg); border-color: var(--p1-warning-border); color: var(--p1-warning-text); }
.callout--success { background: var(--p1-success-bg); border-color: var(--p1-success-border); color: var(--p1-success-text); }

.callout--info .callout__icon {
    background: rgba(var(--p1-accent-blue-rgb), 0.18);
    color: var(--p1-info-text);
}

.callout--warning .callout__icon {
    background: var(--p1-warning-tint);
    color: var(--p1-warning-strong);
}

.callout--success .callout__icon {
    background: rgba(var(--p1-pos-rgb), 0.18);
    color: var(--p1-success-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH BAR — GLOBAL.
   Was scoped to Activity.razor.css, so every other view that wanted a search field either
   went without one or hand-rolled it inline.
   ═══════════════════════════════════════════════════════════════════════════ */
.search-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-bar {
    position: relative;
    width: 100%;
}

.search-bar .search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--p1-text-muted);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.search-bar input {
    width: 100%;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    color: var(--p1-text-primary);
    font-family: inherit;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 0.75rem;
    font-size: var(--p1-text-base);
    outline: none;
}

.search-bar input:focus {
    border-color: var(--p1-text-muted);
}

/* Stated here so every search bar in the app matches — Notifications used to set its own. */
.search-bar input::placeholder {
    color: var(--p1-text-muted);
    font-size: var(--p1-text-base);
}

/* Chips that follow a search bar WITHOUT the .search-section wrapper (the account pages) still
   need a gap. Inside .search-section the flex gap already provides it. */
.search-bar + .filter-chips {
    margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSACTION FORM CONTROLS — GLOBAL.
   Rendered by <SegmentedControl> / <AmountField> / <FundAllocationCard> and used directly by
   the transaction pages. Matches the mobile Pay In designs.
   ═══════════════════════════════════════════════════════════════════════════ */
.tx-section-label {
    font-size: var(--p1-text-xs);
    font-weight: var(--p1-weight-bold);
    letter-spacing: var(--p1-tracking-caps);
    text-transform: uppercase;
    color: var(--p1-text-muted);
    margin: 1.25rem 0 0.5rem;
}

/* ── Segmented control (Payment method / Payment type) ──
   ONE toggle, not a row of separate buttons: a single track with the active half filled. The
   earlier version had a gap between two bordered buttons, which read as two independent actions
   rather than a choice between two states. */
.seg-control {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: var(--p1-surface-inner);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
    padding: 4px;
}

.seg-option {
    padding: 0.625rem 0;
    border: none;
    border-radius: 0.625rem;
    background: transparent;
    color: var(--p1-text-secondary);
    font-family: inherit;
    font-size: var(--p1-text-md);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.seg-option:hover:not(.is-active) { color: var(--p1-text-primary); }

.seg-option.is-active {
    background: var(--p1-success);
    color: var(--p1-text-on-accent);
}

/* ── Amount field (£ input + quick-amount chips) ── */
.amount-field__input {
    background: var(--p1-surface-inner);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.amount-field__currency {
    font-size: var(--p1-text-3xl);
    font-weight: 700;
    color: var(--p1-text-muted);
}

.amount-field__input input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--p1-text-primary);
    font-family: inherit;
    font-size: var(--p1-text-3xl);
    font-weight: 700;
}

.amount-field__chips {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.amount-chip {
    padding: 0.5rem 0;
    border-radius: 0.625rem;
    border: 1px solid var(--p1-border);
    background: var(--p1-surface-inner);
    color: var(--p1-text-secondary);
    font-family: inherit;
    font-size: var(--p1-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.amount-chip:hover { color: var(--p1-text-primary); border-color: var(--p1-text-muted); }

/* "All" is the emphasised chip in the design. */
.amount-chip--all {
    background: var(--p1-info-bg);
    border-color: var(--p1-info-border);
    color: var(--p1-info-text);
}

/* ── Account header card (which account this transaction is for) ── */
.tx-account-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
}

.tx-account-card__name { font-size: var(--p1-text-base); font-weight: 700; }
.tx-account-card__ref  { font-size: var(--p1-text-xs); color: var(--p1-text-muted); margin-top: 0.125rem; }

.tx-account-card__pill {
    font-size: var(--p1-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* ── Allowance card (ISA / CGT allowance, with optional progress bar) ── */
.allowance-card {
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
}

.allowance-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.allowance-card__label {
    font-size: var(--p1-text-xs);
    font-weight: var(--p1-weight-bold);
    letter-spacing: var(--p1-tracking-caps);
    text-transform: uppercase;
    color: var(--p1-text-secondary);
}

/* Sentence case, for when the label is a sentence ("Remaining ISA Allowance") rather than an
   eyebrow. Pay In wore the class above and then inline-cancelled three of its five properties. */
.allowance-card__label--plain {
    font-size: var(--p1-text-md);
    text-transform: none;
    letter-spacing: normal;
}

/* The headline figure on the card is the quiet one — the STATUS line below carries the message. */
.allowance-card__value { font-size: var(--p1-text-sm); color: var(--p1-text-muted); white-space: nowrap; }
.allowance-card__value.is-success { font-size: var(--p1-text-md); font-weight: 700; color: var(--p1-success-text); }

/* Validation status: a tick and "Within limit", or a warning and how far over you are. The icon
   and the wording both carry the state, so it doesn't depend on the colour alone. */
.allowance-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.625rem;
    font-size: var(--p1-text-sm);
}

.allowance-status__label { font-weight: 600; }
.allowance-status__detail { color: var(--p1-text-muted); }

.allowance-status--ok   .allowance-status__label { color: var(--p1-success-text); }
.allowance-status--over .allowance-status__label { color: var(--p1-warning-text); }
.allowance-status--idle { color: var(--p1-text-muted); }

/* Flex so it can carry two segments — allowance already used, plus what this payment would add —
   as one continuous bar. */
.allowance-card__bar {
    display: flex;
    height: 6px;
    border-radius: 9999px;
    background: var(--p1-surface-inner);
    overflow: hidden;
    margin-top: 0.625rem;
}

.allowance-card__fill {
    height: 100%;
    background: var(--p1-info);
    transition: width 0.2s;
}

/* The pending segment is the money you're about to pay in — green, so it reads as "new". */
.allowance-card__fill--pending { background: var(--p1-success); }
.allowance-card__hint { font-size: var(--p1-text-xs); color: var(--p1-text-muted); margin-top: 0.5rem; }

/* ── Allocation strip (Invest step: total, invested so far, remaining) ── */
.alloc-strip {
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
}

.alloc-strip__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.alloc-strip__label {
    font-size: var(--p1-text-xs);
    font-weight: var(--p1-weight-bold);
    letter-spacing: var(--p1-tracking-caps);
    text-transform: uppercase;
    color: var(--p1-text-muted);
}

.alloc-strip__value { font-size: var(--p1-text-xl); font-weight: 700; }

.alloc-strip__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.625rem;
    font-size: var(--p1-text-sm);
    color: var(--p1-text-muted);
}

.alloc-strip__meta strong { color: var(--p1-text-primary); font-weight: 600; }

.split-btn {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--p1-info-border);
    background: var(--p1-info-bg);
    color: var(--p1-info-text);
    font-family: inherit;
    font-size: var(--p1-text-md);
    font-weight: 600;
    cursor: pointer;
}

/* ── Fund allocation card ── */
.fund-card {
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
}

.fund-card__head { display: flex; align-items: flex-start; gap: 0.5rem; }
.fund-card__title { flex: 1; min-width: 0; }
.fund-card__name { font-size: var(--p1-text-md); font-weight: 700; }
.fund-card__isin { font-size: var(--p1-text-xs); color: var(--p1-text-muted); margin-top: 0.125rem; }

.kiid-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: var(--p1-text-2xs);
    font-weight: 600;
    color: var(--p1-info-text);
    background: var(--p1-info-bg);
    border: 1px solid var(--p1-info-border);
    border-radius: 0.375rem;
    padding: 0.1875rem 0.375rem;
    text-decoration: none;
}

.fund-card__remove {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1px solid var(--p1-border);
    background: var(--p1-surface-inner);
    color: var(--p1-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fund-card__stats { font-size: var(--p1-text-xs); color: var(--p1-text-muted); margin: 0.5rem 0 0.625rem; }
.fund-card__stats strong { color: var(--p1-text-primary); font-weight: 600; }
.fund-card__stats .pct   { color: var(--p1-success-text); font-weight: 600; }

/* ── Success / done step ── */
.done-check {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: var(--p1-success-bg);
    border: 1px solid var(--p1-success-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 1rem;
}

.done-title {
    font-size: var(--p1-text-2xl);
    font-weight: 700;
    text-align: center;
    margin: 0 0 1.25rem;
}

.tx-note {
    font-size: var(--p1-text-xs);
    line-height: 1.5;
    color: var(--p1-text-muted);
    margin: 0.875rem 0 0;
}

/* Green primary — the Pay In flow's confirm colour in the designs. */
.primary-btn--success { background: var(--p1-success); }

/* ═══════════════════════════════════════════════════════════════════════════
   SHELL HEADER CONTROLS — GLOBAL.
   Used by both MainLayout and SetupShell, so it cannot be scoped to either.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Right-hand side of the top bar: theme toggle, then avatar. */
.shell-header-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* Light/dark toggle. Deliberately quiet — it sits next to the avatar and shouldn't compete with
   it, so it's an outline button rather than a filled one. */
.shell-theme-btn {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: transparent;
    border: 1px solid var(--p1-border);
    color: var(--p1-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.shell-theme-btn:hover {
    background: var(--p1-surface-inner);
    color: var(--p1-text-primary);
    border-color: var(--p1-text-muted);
}

/* Fixed-width trailing slot on a list row (chevron, tick, or nothing). Always present, so a row
   without a chevron doesn't let its pill drift right and break the column. */
.p1-list-row__trail {
    width: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Account-type pills line up in one column: same minimum width, centred text. */
.p1-list-row .type-pill {
    flex-shrink: 0;
    min-width: 4.5rem;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSACTION FLOW ACCENTS
   Each flow has its own colour in the designs — Pay In green, Withdraw red, Invest blue,
   Sell amber — and the primary button, the segmented control and the confirmation tick all
   have to follow it. Tokens, so the colour-vision modes repaint them too.
   ═══════════════════════════════════════════════════════════════════════════ */
.primary-btn--success { background: var(--p1-success); }
.primary-btn--danger  { background: var(--p1-accent-active); }
.primary-btn--info    { background: var(--p1-accent-blue); }
.primary-btn--warning { background: var(--p1-accent-amber); color: var(--p1-text-on-accent); }

.seg-control--success .seg-option.is-active { background: var(--p1-success);      color: var(--p1-text-on-accent); }
.seg-control--danger  .seg-option.is-active { background: var(--p1-accent-active); color: var(--p1-text-on-accent); }
.seg-control--info    .seg-option.is-active { background: var(--p1-accent-blue);   color: var(--p1-text-on-accent); }
.seg-control--warning .seg-option.is-active { background: var(--p1-accent-amber);  color: var(--p1-text-on-accent); }

.done-check--danger  { background: rgba(var(--p1-accent-red-rgb), 0.15);   border-color: rgba(var(--p1-accent-red-rgb), 0.4); }
.done-check--info    { background: rgba(var(--p1-accent-blue-rgb), 0.15);  border-color: rgba(var(--p1-accent-blue-rgb), 0.4); }
.done-check--warning { background: rgba(var(--p1-accent-amber-rgb), 0.15); border-color: rgba(var(--p1-accent-amber-rgb), 0.4); }

/* ── Available-balance strip (Withdraw / Invest / Sell) ── */
.avail-strip {
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
}

.avail-strip__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.avail-strip__label { font-size: var(--p1-text-md); color: var(--p1-text-secondary); }
.avail-strip__value { font-size: var(--p1-text-lg); font-weight: 700; }

.avail-strip__track {
    height: 4px;
    border-radius: 9999px;
    background: var(--p1-surface-inner);
    overflow: hidden;
    margin-top: 0.75rem;
}

.avail-strip__fill { height: 100%; border-radius: 9999px; background: var(--p1-accent-blue); }

.avail-strip__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: var(--p1-text-sm);
    color: var(--p1-text-muted);
}

.avail-strip__meta strong { color: var(--p1-text-primary); font-weight: 600; }

/* ── Charges disclosure ── */
.charges { margin-top: 1.25rem; }

.charges__head { text-align: center; margin-bottom: 0.875rem; }

.charges__title {
    margin: 0;
    font-size: var(--p1-card-title-size);
    font-weight: var(--p1-card-title-weight);
    color: var(--p1-text-primary);
}

.charges__sub {
    margin: 0.25rem 0 0;
    font-size: var(--p1-text-xs);
    color: var(--p1-text-muted);
}

.charges__sub strong { color: var(--p1-text-secondary); font-weight: 600; }

.charges__card {
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
    margin-bottom: 0.625rem;
    overflow: hidden;
}

.charges__row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.charges__label { flex: 1; font-size: var(--p1-text-base); font-weight: 600; color: var(--p1-text-primary); }
.charges__value { font-size: var(--p1-text-base); font-weight: 700; color: var(--p1-text-primary); }
.charges__unit  { font-size: var(--p1-text-xs); font-weight: 500; color: var(--p1-text-muted); }

.charges__detail {
    padding: 0 1rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.charges__line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--p1-text-sm);
    color: var(--p1-text-secondary);
}

.charges__line-label { flex: 1; min-width: 0; }
.charges__line-value { flex-shrink: 0; font-weight: 600; color: var(--p1-text-primary); }

.charges__line--total {
    padding-top: 0.625rem;
    border-top: 1px solid var(--p1-border-subtle);
}

.charges__pct { font-weight: 500; color: var(--p1-text-muted); margin-left: 0.25rem; }

/* ── Terms box (Sell) ── */
.terms-box {
    margin-top: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
}

.terms-box__title {
    font-size: var(--p1-text-xs);
    font-weight: var(--p1-weight-bold);
    letter-spacing: var(--p1-tracking-caps);
    text-transform: uppercase;
    color: var(--p1-text-muted);
    margin-bottom: 0.5rem;
}

.terms-box p {
    margin: 0;
    font-size: var(--p1-text-xs);
    line-height: 1.6;
    color: var(--p1-text-secondary);
}

.terms-box a {
    color: var(--p1-accent-blue);
    font-weight: 600;
}

/* ── Order table (Review Sell: what's being sold / bought) ── */
.order-section__label {
    font-size: var(--p1-text-xs);
    font-weight: var(--p1-weight-bold);
    letter-spacing: var(--p1-tracking-caps);
    text-transform: uppercase;
    margin: 1.25rem 0 0.5rem;
}

.order-section__label.is-sell   { color: var(--p1-accent-amber); }
.order-section__label.is-invest { color: var(--p1-accent-blue); }

.order-card {
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
    overflow: hidden;
}

.order-card__head,
.order-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.order-card__head {
    font-size: var(--p1-text-2xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--p1-text-muted);
    border-bottom: 1px solid var(--p1-border-subtle);
}

.order-row { border-bottom: 1px solid var(--p1-border-subtle); }
.order-row:last-child { border-bottom: none; }

.order-row__name  { flex: 1; min-width: 0; font-size: var(--p1-text-md); font-weight: 600; color: var(--p1-text-primary); }
.order-row__isin  { font-size: var(--p1-text-2xs); font-weight: 400; color: var(--p1-text-muted); display: block; margin-top: 0.125rem; }
.order-row__ocf   { font-size: var(--p1-text-2xs); color: var(--p1-text-muted); display: block; margin-top: 0.125rem; }
.order-row__units { flex-shrink: 0; font-size: var(--p1-text-sm); color: var(--p1-text-secondary); }
.order-row__amt   { flex-shrink: 0; font-size: var(--p1-text-md); font-weight: 700; color: var(--p1-text-primary); }

.order-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--p1-surface-inner);
    font-size: var(--p1-text-md);
    font-weight: 600;
    color: var(--p1-text-primary);
}

.order-total__value { font-weight: 700; }
.order-total__value.is-sell   { color: var(--p1-accent-amber); }
.order-total__value.is-invest { color: var(--p1-text-primary); }

/* ── Done screen: numbered sold/invested lines ── */
.done-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--p1-border-subtle);
}

.done-row:last-child { border-bottom: none; }

.done-row__tag {
    font-size: var(--p1-text-2xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.125rem;
}

.done-row__tag.is-sold   { color: var(--p1-accent-amber); }
.done-row__tag.is-bought { color: var(--p1-accent-blue); }

.done-row__name { font-size: var(--p1-text-md); font-weight: 600; color: var(--p1-text-primary); }
.done-row__isin { font-size: var(--p1-text-2xs); color: var(--p1-text-muted); margin-top: 0.125rem; }
.done-row__amt  { flex-shrink: 0; font-size: var(--p1-text-md); font-weight: 700; color: var(--p1-text-primary); }

/* ── Model portfolio card (Investments tab) ── */
.model-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    border-radius: 0.875rem;
}

.model-card__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.model-card__label {
    font-size: var(--p1-text-xs);
    color: var(--p1-text-muted);
}

.model-card__name {
    font-size: var(--p1-text-base);
    font-weight: 700;
    color: var(--p1-text-primary);
    margin-top: 0.125rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE AVATAR — GLOBAL. Used by MainLayout and SetupShell, so it can't be scoped to either.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Links to /profile. Kept as a plain <a> (not <NavLink>) so CSS isolation still scopes it. */
.shell-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    /* Brand accent with white initials, matching the Profile avatar. */
    background: var(--p1-brand-accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--p1-text-md);
    font-weight: 700;
    color: var(--p1-text-on-accent);   /* on red — white in both themes */
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.shell-avatar:hover {
    background: var(--p1-brand-accent-hover);
}

/* Outstanding-actions flag. Amber (the same tone the Outstanding Actions panel uses), with a
   ring in the header background so it reads as a badge rather than part of the avatar.
   Not colour-only: the link's aria-label/title also states the count. */
.shell-avatar__dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: var(--p1-warning);
    border: 2px solid var(--p1-bg);
}

/* The account cards on Cash Movement are pickers, so they're <button>s — reset the browser
   defaults that a plain .tx-account-card doesn't have to fight. */
.tx-account-card--btn {
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

.tx-account-card--btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATION / ACTIVITY TONES — GLOBAL.
   Each notification carries the accent of the transaction it records, so the list row, the detail
   header and the title all read as the same thing. These were scoped to two pages, so any third
   page using the class names got no colour.
   ═══════════════════════════════════════════════════════════════════════════ */
.bg-success-subtle { background-color: rgba(var(--p1-pos-rgb), 0.15); }
.bg-red-subtle     { background-color: rgba(var(--p1-neg-rgb), 0.15); }
.bg-blue-subtle    { background-color: rgba(var(--p1-accent-blue-rgb), 0.15); }
.bg-amber-subtle   { background-color: rgba(var(--p1-accent-amber-rgb), 0.15); }
.bg-purple-subtle  { background-color: rgba(var(--p1-accent-purple-rgb), 0.15); }

/* These tint an icon sitting on a subtle fill of the same hue, so blue/amber/purple use the SOFT
   accent — it holds up against the tint. Two pages had already re-declared them that way in their
   own scoped CSS, which meant .text-blue was three different colours depending on where you stood.
   One definition now. .text-green is an alias: Home's markup uses that name. */
.text-success,
.text-green   { color: var(--p1-pos); }
.text-red     { color: var(--p1-neg); }
.text-blue    { color: var(--p1-accent-blue-soft); }
.text-amber   { color: var(--p1-accent-amber-soft); }
.text-purple  { color: var(--p1-accent-purple-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER (in the shell's top bar)
   Replaces the logo when the page has somewhere to go back to.
   ═══════════════════════════════════════════════════════════════════════════ */
.shell-page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

/* Brand accent between the back button and the title — the same colour the active nav and the
   avatar use, so the bar reads as one branded object rather than a button next to some text. */
.shell-page-accent {
    width: 3px;
    height: 1.375rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--p1-brand-accent);
}

.shell-back-btn {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    background: var(--p1-surface);
    border: 1px solid var(--p1-border);
    color: var(--p1-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.shell-back-btn:hover { background: var(--p1-surface-inner); }

.shell-page-title {
    margin: 0;
    min-width: 0;
    font-size: var(--p1-text-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--p1-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Breathing room between the bar and the page — but ONLY when the bar is carrying a page header.
   The pages that used to render their own back button and title had this padding built into that
   header; with it moved into the shell they started hugging the bar. Unconditional padding here
   would double up on every page that already has its own. */
.shell-content.has-page-header > * {
    padding-top: 1rem;
}

/* ── Account status pill ───────────────────────────────────────────────────────
   Green = live and usable, amber = not live yet, red = frozen. Used by the sub-account
   card and the account-detail hero — global, because a scoped .razor.css can't be shared. */
.status-pill {
    font-size: var(--p1-text-2xs);
    font-weight: var(--p1-weight-semibold);
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: var(--p1-tracking-caps);
    white-space: nowrap;
}

.status-pill.is-active {
    background: color-mix(in srgb, var(--p1-pos) 10%, transparent);
    color: var(--p1-pos);
    border: 1px solid color-mix(in srgb, var(--p1-pos) 20%, transparent);
}

.status-pill.is-pending {
    background: color-mix(in srgb, var(--p1-accent-amber) 12%, transparent);
    color: var(--p1-accent-amber);
    border: 1px solid color-mix(in srgb, var(--p1-accent-amber) 25%, transparent);
}

.status-pill.is-suspended {
    background: color-mix(in srgb, var(--p1-neg) 10%, transparent);
    color: var(--p1-neg);
    border: 1px solid color-mix(in srgb, var(--p1-neg) 20%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP — the shared content container.

   Everything below sits inside a min-width media query, so none of it exists at mobile widths.
   That is the rule for ALL desktop work in this app: additive, inside min-width, never an edit to
   a base rule. `python tools/mobile_lock.py --check` enforces it.

   Before this, eight pages each invented their own content width — 600, 640, 720, 800, 900, 1000
   and 1200px — so no two desktop screens lined up with each other.

     .p1-page          wide   — dashboards, card grids, lists
     .p1-page--narrow         — single-column reading: a form, a detail view, an article
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    :root {
        --p1-page-max:    1120px;
        --p1-page-narrow:  760px;
        --p1-page-gutter:    2rem;
    }

    .p1-page {
        max-width: var(--p1-page-max);
        margin-inline: auto;
        padding-inline: var(--p1-page-gutter);
    }

    .p1-page--narrow {
        max-width: var(--p1-page-narrow);
    }
}

/* ═══ DESKTOP — the transaction flows are forms: a single centred column, not a full-width sprawl.
   Additive only; none of this exists at mobile widths. ═══ */
@media (min-width: 768px) {
    .transaction-page {
        max-width: var(--p1-page-narrow);
        margin-inline: auto;
        padding-inline: var(--p1-page-gutter);
    }
}

/* The green external CTA on the borrowing request page — deliberately NOT the brand accent: it
   sends you off-platform to Firenze, so it reads as a distinct, external action. */
.borrow-discover,
.borrow-discover:visited,
.borrow-discover:hover {
    /* Explicit :visited/:hover — the global `a:visited { color: inherit }` outranks a bare class,
       so without these the text fell back to the theme colour once the link had been visited. */
    color: var(--p1-text-on-accent);
}

.borrow-discover {
    display: block;
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: var(--p1-radius-control, 0.75rem);
    background: var(--p1-accent-purple);
    text-align: center;
    font-size: var(--p1-text-base);
    font-weight: var(--p1-weight-semibold);
    text-decoration: none;
    transition: opacity 0.15s;
}

.borrow-discover:hover { opacity: 0.9; }

.borrow-section-title {
    font-size: var(--p1-card-title-size);
    font-weight: var(--p1-card-title-weight);
    color: var(--p1-text-primary);
    margin-bottom: 0.5rem;
}

/* ── Borrowing pages (detail + request) ────────────────────────────────────────
   The Lombard Loan detail and request were a bottom sheet; they're their own pages now. */
.borrowing-page {
    padding: 0 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.borrowing-page__submit { margin-top: 0.25rem; }

@media (min-width: 768px) {
    .borrowing-page {
        max-width: var(--p1-page-narrow);
        margin-inline: auto;
        padding: 1rem var(--p1-page-gutter) 3rem;
    }
}