h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Brand tokens, matched to SRMCore's violet/orange identity. Violet replaces Bootstrap's default
   blue site-wide (badges, links, .btn-primary); orange is reserved for the one primary
   call-to-action so it stands out against the violet hero. */
:root {
    --brand-navy: #250C77;
    --brand-navy-2: #3a1fa8;
    --brand-accent: #ED642B;
    --brand-accent-dark: #d45520;

    --bs-primary: var(--brand-navy);
    --bs-primary-rgb: 37, 12, 119;
    --bs-link-color: var(--brand-navy);
    --bs-link-color-rgb: 37, 12, 119;
    --bs-link-hover-color: var(--brand-navy-2);
    --bs-link-hover-color-rgb: 58, 31, 168;

    /* Bootstrap derives .bg-primary-subtle / .text-primary-emphasis / .border-primary-subtle
       from its own blue, not from --bs-primary, so overriding --bs-primary alone leaves every
       "primary" badge and tint off-brand. These are the navy tinted/shaded the same way
       Bootstrap tints its own (90% white for the fill, 60% black for the text). */
    --bs-primary-bg-subtle: #e9e7f1;
    --bs-primary-border-subtle: #c3bcdd;
    --bs-primary-text-emphasis: #1a0850;
}

.btn-primary {
    --bs-btn-bg: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-bg: var(--brand-navy-2);
    --bs-btn-hover-border-color: var(--brand-navy-2);
    --bs-btn-active-bg: var(--brand-navy-2);
    --bs-btn-active-border-color: var(--brand-navy-2);
}

.btn-accent {
    --bs-btn-color: #1a1300;
    --bs-btn-bg: var(--brand-accent);
    --bs-btn-border-color: var(--brand-accent);
    --bs-btn-hover-color: #1a1300;
    --bs-btn-hover-bg: var(--brand-accent-dark);
    --bs-btn-hover-border-color: var(--brand-accent-dark);
    --bs-btn-active-color: #1a1300;
    --bs-btn-active-bg: var(--brand-accent-dark);
    --bs-btn-active-border-color: var(--brand-accent-dark);
    font-weight: 600;
}

.hero-panel {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
    color: #fff;
}

.hero-panel .text-body-secondary {
    color: rgba(255, 255, 255, 0.75) !important;
}

.hero-eyebrow {
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .75rem;
    font-weight: 700;
    color: var(--brand-accent);
}

.hero-preview-card {
    background: #fff;
    color: #1a1a1a;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .28);
}

.hero-preview-row + .hero-preview-row {
    border-top: 1px solid #eee;
}

[data-bs-theme="dark"] .hero-preview-card {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .hero-preview-row + .hero-preview-row {
    border-top-color: var(--bs-border-color);
}

.feature-card {
    --card-accent: var(--brand-navy);
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(37, 12, 119, .12);
    border-color: var(--card-accent);
}

.feature-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(37, 12, 119, .08);
    color: var(--brand-navy);
}

/* A curated, muted categorical palette for icon chips — distinct hues, consistent
   saturation/lightness so a page full of them still reads as one cohesive system. */
.icon-accent-navy { background: rgba(37, 12, 119, .1); color: #250C77; }
.icon-accent-teal { background: rgba(13, 110, 118, .12); color: #0d6e76; }
.icon-accent-indigo { background: rgba(76, 60, 148, .12); color: #4c3c94; }
.icon-accent-amber { background: rgba(201, 132, 35, .15); color: #a5691c; }
.icon-accent-green { background: rgba(30, 120, 80, .12); color: #1e7850; }
.icon-accent-rose { background: rgba(160, 60, 70, .12); color: #a03c46; }

.auth-card {
    max-width: 26rem;
    width: 100%;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(37, 12, 119, .1);
    overflow: hidden;
}

.auth-card-accent {
    height: .35rem;
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-accent));
}

/* Left sidebar shell + top header, structured like SRMCore's own MainLayout (see SRMCore's
   wwwroot/app.css .srm-layout/.sidebar-container/.srm-sidebar/.top-header): a fixed-width
   sidebar sits alongside a flexible content column topped by a sticky header. On mobile
   (<768px) the sidebar becomes a fixed off-canvas panel toggled by TopHeader's hamburger
   button (MainLayout's _mobileMenuOpen), sliding in over a dismissible overlay instead of
   reserving layout space. */
:root {
    --sidebar-width: 260px;
}

.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.sidebar-container {
    width: var(--sidebar-width);
    flex-shrink: 0;
    position: relative;
    z-index: 200;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 290;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
}

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    background: var(--brand-navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .25s ease;
}

.sidebar-brand {
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    flex-shrink: 0;
}

.sidebar-brand-logo {
    height: 2rem;
    width: auto;
}

.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: .75rem;
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, .75);
    border-radius: .5rem;
    font-weight: 500;
}

.sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.sidebar .nav-link.active {
    color: #1a1300;
    background: var(--brand-accent);
}

.app-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content-inner {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    padding: 2rem 2.5rem;
}

.app-footer {
    width: 100%;
    max-width: 1760px;
    margin: 0 auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* Standard width for multi-column data-entry pages (KYC wizard steps, profile completion) —
   one shared token instead of each page picking its own max-width, so they read as one
   consistent flow instead of some pages using the available width and others sitting in a
   narrow, cramped column. Single-column, few-field forms (step-up codes, share transfer, etc.)
   deliberately don't use this — at this width they'd just stretch one input across a mostly
   empty row instead of fixing an actual space problem. */
.form-shell {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767.98px) {
    .app-content-inner {
        padding: 1.25rem;
    }

    .app-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .sidebar-container {
        width: 0;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        z-index: 300;
    }

    .sidebar-container.mobile-open .sidebar {
        transform: translateX(0);
    }
}

/* Wizard step indicator shared across the KYC intake flow (NewApplication/Documents/Review/Verify).
   Each step is an equal flex column so the whole bar stretches to fill the page width — the
   connector line is split into two halves (before/after the dot) so it can be colored per-segment
   without needing to know a sibling's state in CSS. */
.wizard-steps {
    display: flex;
    width: 100%;
    margin-bottom: 2.5rem;
}

.wizard-step {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.wizard-step-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: inherit;
}

.wizard-step-link:hover .wizard-step-dot {
    box-shadow: 0 0 0 4px rgba(37, 12, 119, .1);
}

.wizard-step-connector {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
}

.wizard-step-connector::before,
.wizard-step-connector::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    width: 50%;
    background: var(--bs-border-color);
    transform: translateY(-50%);
}

.wizard-step-connector::before { left: 0; }
.wizard-step-connector::after { right: 0; }

.wizard-step:first-child .wizard-step-connector::before,
.wizard-step:last-child .wizard-step-connector::after {
    background: transparent;
}

.wizard-step.is-done .wizard-step-connector::before,
.wizard-step.is-done .wizard-step-connector::after {
    background: var(--brand-accent);
}

.wizard-step-dot {
    position: relative;
    z-index: 1;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    border: 2px solid var(--bs-border-color);
    flex-shrink: 0;
}

.wizard-step.is-active .wizard-step-dot {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(37, 12, 119, .12);
}

.wizard-step.is-done .wizard-step-dot {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #1a1300;
}

.wizard-step-label {
    margin-top: .6rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.wizard-step.is-active .wizard-step-label {
    color: var(--brand-navy);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .wizard-step-label { font-size: .7rem; }
    .wizard-step-dot { width: 1.85rem; height: 1.85rem; font-size: .75rem; }
}

.section-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand-navy-2);
}

/* Label/value rows on the KYC review page. */
.review-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

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

.review-label {
    flex: 0 0 12rem;
    font-weight: 600;
    color: var(--brand-navy);
}

.review-value {
    flex: 1 1 16rem;
}

.doc-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 2rem;
    background: var(--bs-secondary-bg);
    font-size: .85rem;
}

.info-callout {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--bs-secondary-bg);
    border-radius: .75rem;
    padding: 1rem 1.1rem;
}

.danger-callout {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: rgba(220, 53, 69, .1);
    border: 1px solid rgba(220, 53, 69, .25);
    border-radius: .75rem;
    padding: 1rem 1.1rem;
    color: var(--bs-danger-text-emphasis, #842029);
}

/* Top header bar: sits inside .app-content (above @Body), so — unlike the permanently-dark
   .sidebar — it shares the page's light/dark background via the [data-bs-theme] attribute that
   theme.js sets on <html>. Holds the mobile nav toggle on the left and the language/
   notifications/theme/account controls on the right, mirroring SRMCore's own top header. */
.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    position: sticky;
    top: 0;
    z-index: 150;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Shared round icon-button skin for the top header controls (language, notifications, theme,
   account). Theme-aware — unlike the old dark-sidebar-only styling this replaces — since the
   header now sits on the page's own light/dark background. */
.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
}

.header-icon-btn:hover {
    background: rgba(37, 12, 119, .08);
    color: var(--brand-navy);
}

[data-bs-theme="dark"] .header-icon-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.header-icon-btn.dropdown-toggle::after {
    display: none;
}

/* Account button: same icon-button skin plus a pill outline and the name label. */
.header-user-btn {
    width: auto;
    gap: .5rem;
    padding: .3rem .75rem .3rem .3rem;
    border-radius: 2rem;
    border: 1px solid var(--bs-border-color);
}

.header-user-btn:hover {
    background: rgba(37, 12, 119, .06);
    border-color: var(--brand-navy);
}

[data-bs-theme="dark"] .header-user-btn:hover {
    background: rgba(255, 255, 255, .08);
}

.avatar-circle {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-2));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

/* Light/dark toggle button. Its sizing/color comes from .header-icon-btn (applied alongside);
   this class now only swaps the sun/moon glyph via the [data-bs-theme] attribute that theme.js
   sets on <html>. See wwwroot/theme.js for the toggle logic. */
.theme-toggle-btn .theme-icon-sun {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle-btn .theme-icon-sun {
    display: inline;
}

[data-bs-theme="dark"] .theme-toggle-btn .theme-icon-moon {
    display: none;
}

/* Dark-mode counterparts for the few brand-specific colors that aren't Bootstrap CSS variables.
   Bootstrap's own [data-bs-theme=dark] rules already handle body/card/border/text tokens for
   everything else (cards, forms, badges, tables, etc). */

/* --bs-link-color defaults to --brand-navy (#250C77) site-wide, which is nearly illegible
   against Bootstrap's dark body background — swap in the same light violet used for dark-mode
   icon accents above so links stay readable. */
[data-bs-theme="dark"] {
    --bs-link-color: #b9a6f2;
    --bs-link-color-rgb: 185, 166, 242;
    --bs-link-hover-color: #d0c2f7;
    --bs-link-hover-color-rgb: 208, 194, 247;

    /* Dark counterparts of the brand-tuned primary trio above: a violet-tinted fill that still
       reads as raised against the dark body background, and the same light violet used for
       links so "primary" text stays legible. */
    --bs-primary-bg-subtle: #1b0f3d;
    --bs-primary-border-subtle: #33246b;
    --bs-primary-text-emphasis: #b9a6f2;
}

/* Bootstrap compiles .btn-outline-* with literal colours rather than CSS variables, so
   .btn-outline-secondary keeps its light-mode #6c757d text against the dark body background —
   under 3:1, and the secondary action on most of these pages (Cancel, Back, Transfer shares,
   Amend details). Lift the label to the grey Bootstrap uses for dark-mode body text and keep
   the border where it was. */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #adb5bd;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
}

[data-bs-theme="dark"] .feature-icon {
    background: rgba(139, 116, 240, .18);
    color: #b9a6f2;
}

[data-bs-theme="dark"] .icon-accent-navy { background: rgba(139, 116, 240, .18); color: #b9a6f2; }
[data-bs-theme="dark"] .icon-accent-teal { background: rgba(45, 179, 189, .2); color: #7fdbe3; }
[data-bs-theme="dark"] .icon-accent-indigo { background: rgba(151, 133, 224, .2); color: #b8a8ea; }
[data-bs-theme="dark"] .icon-accent-amber { background: rgba(232, 163, 61, .22); color: #f0c479; }
[data-bs-theme="dark"] .icon-accent-green { background: rgba(52, 199, 138, .2); color: #7fe0b8; }
[data-bs-theme="dark"] .icon-accent-rose { background: rgba(224, 90, 100, .2); color: #f0a3aa; }

/* .review-label, .section-label, and the active wizard step's label all use --brand-navy(-2) for
   text color, which (like --bs-link-color above) is too dark to read against the dark body bg. */
[data-bs-theme="dark"] .review-label,
[data-bs-theme="dark"] .section-label,
[data-bs-theme="dark"] .wizard-step.is-active .wizard-step-label {
    color: #b9a6f2;
}

/* Holding cards (Pages/Holdings/Index). One card per linked CDS account: a brand accent strip,
   the share balance as the headline figure, a badge row for the things that change how the
   investor can act on the holding (capacity, client type, co-holders, requests in flight), then
   the registrar's own reference details.

   Everything here is built from Bootstrap's theme variables (--bs-border-color,
   --bs-secondary-color, --bs-body-color) rather than fixed colours, so the whole card follows
   the [data-bs-theme] attribute theme.js sets without needing a dark-mode override of its own.
   The badges themselves use Bootstrap's bg-*-subtle/text-*-emphasis utilities for the same
   reason — note that .text-bg-*-subtle, used elsewhere in this app, is not a real Bootstrap
   class and renders with no background at all. */
.holding-card {
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.holding-card:hover {
    border-color: var(--brand-navy);
    box-shadow: 0 .5rem 1.5rem rgba(37, 12, 119, .1);
}

[data-bs-theme="dark"] .holding-card:hover {
    border-color: #6b57c4;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45);
}

.holding-card-accent {
    height: .3rem;
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-accent));
    flex-shrink: 0;
}

.holding-balance {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
}

.holding-balance-unit {
    font-size: .95rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.holding-detail-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .15rem 1rem;
    padding: .45rem 0;
    font-size: .875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.holding-detail-row:last-child {
    border-bottom: 0;
}

.holding-detail-label {
    color: var(--bs-secondary-color);
    font-weight: 400;
    flex: 0 0 auto;
}

/* CDS account numbers and agent names are long enough to overflow a card column, so the value
   side is allowed to wrap mid-token rather than forcing a horizontal scroll. */
.holding-detail-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.holding-mono {
    font-family: var(--bs-font-monospace);
    font-size: .9em;
}

/* Correspondence thread entries (the notes on a request). Same look as the KYC status page's
   thread, but global rather than scoped to one component so more than one page can use it —
   the coloured left edge is what distinguishes who wrote the entry. */
.thread-card {
    padding: .6rem .8rem;
    border-radius: .5rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left-width: 3px;
}

.thread-card--staff {
    border-left-color: var(--brand-navy);
}

/* --brand-navy all but disappears against the dark body background, so the registrar's side of
   the thread uses the same light violet as dark-mode links. */
[data-bs-theme="dark"] .thread-card--staff {
    border-left-color: #8b74f0;
}

.thread-card--you {
    border-left-color: var(--bs-secondary-color);
}

/* ---------------------------------------------------------------------------------------------
   Investor profile (Pages/Profile: MyProfile, CompleteProfile, InvestorProfileForm).

   A brand hero on top (identity + the dividend-review status pill), then a sticky section
   index beside one card per form section, closed by a sticky save bar. Colours come from
   Bootstrap's theme variables wherever possible so light/dark both follow [data-bs-theme]; the
   hero is always the navy gradient, like the sidebar, in either theme.
   --------------------------------------------------------------------------------------------- */

html:has(.profile-page) {
    scroll-behavior: smooth;
}

/* Bootstrap compiles focus rings and checked radios with its literal default blue — pull them
   onto the brand violet on these pages, where the form is the whole point. */
.profile-page .form-control:focus,
.profile-page .form-select:focus,
.profile-page .form-check-input:focus {
    border-color: #8b74f0;
    box-shadow: 0 0 0 .25rem rgba(58, 31, 168, .18);
}

.profile-page .form-check-input:checked {
    background-color: var(--brand-navy-2);
    border-color: var(--brand-navy-2);
}

[data-bs-theme="dark"] .profile-page .form-check-input:checked {
    background-color: #8b74f0;
    border-color: #8b74f0;
}

/* Hero ---------------------------------------------------------------------------------------- */

.profile-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    padding: 2rem 2.25rem;
    border-radius: 1.25rem;
    color: #fff;
    background:
        radial-gradient(circle at 100% 0%, rgba(237, 100, 43, .38) 0, rgba(237, 100, 43, 0) 42%),
        linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
    box-shadow: 0 1rem 2.5rem rgba(37, 12, 119, .18);
}

/* Decorative ring, bottom-right. */
.profile-hero::after {
    content: "";
    position: absolute;
    right: -5rem;
    bottom: -9rem;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    border: 2.75rem solid rgba(255, 255, 255, .05);
    pointer-events: none;
}

.profile-hero > * {
    position: relative;
    z-index: 1;
}

.profile-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    min-width: 0;
    flex: 1 1 24rem;
}

.profile-hero-avatar {
    width: 4.25rem;
    height: 4.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: rgba(255, 255, 255, .14);
    border: 2px solid rgba(255, 255, 255, .28);
    box-shadow: 0 0 0 5px rgba(237, 100, 43, .3);
}

.profile-hero-text {
    min-width: 0;
}

.profile-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.profile-hero-intro {
    color: rgba(255, 255, 255, .78);
    margin-bottom: 1rem;
}

.profile-hero-ids {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.profile-id-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    padding: .35rem .8rem;
    border-radius: 2rem;
    font-size: .875rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    overflow-wrap: anywhere;
}

.profile-hero-note {
    margin: .6rem 0 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .62);
}

/* Dividend-review status pill: the header's echo of the dividend section's callout. */
.profile-hero-status {
    --status-bg: rgba(255, 193, 7, .12);
    --status-border: rgba(255, 193, 7, .45);
    --status-ink: #ffd866;
    display: flex;
    align-items: center;
    gap: .9rem;
    flex: 0 1 22rem;
    padding: .9rem 1.1rem;
    border-radius: 1rem;
    color: #fff;
    text-decoration: none;
    background: var(--status-bg);
    border: 1px solid var(--status-border);
    backdrop-filter: blur(6px);
    transition: transform .15s ease, background-color .15s ease;
}

.profile-hero-status--danger {
    --status-bg: rgba(255, 107, 107, .14);
    --status-border: rgba(255, 138, 138, .5);
    --status-ink: #ffb3b3;
}

.profile-hero-status:hover {
    color: #fff;
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--status-bg), #fff 8%);
}

.profile-hero-status-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--status-ink);
    background: color-mix(in srgb, var(--status-ink) 18%, transparent);
}

.profile-hero-status-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-hero-status-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.profile-hero-status-value {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--status-ink);
}

.profile-hero-status-cta {
    margin-top: .15rem;
    font-size: .85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.status-pulse {
    position: relative;
    width: .55rem;
    height: .55rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

.status-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    animation: status-pulse 1.8s ease-out infinite;
}

@keyframes status-pulse {
    from { transform: scale(1); opacity: .6; }
    to { transform: scale(2.8); opacity: 0; }
}

@media (max-width: 575.98px) {
    .profile-hero { padding: 1.5rem 1.25rem; }
    .profile-hero-avatar { width: 3.25rem; height: 3.25rem; font-size: 1.5rem; }
    .profile-hero-title { font-size: 1.4rem; }
    .profile-hero-status { flex-basis: 100%; }
}

/* Section index ------------------------------------------------------------------------------- */

.profile-nav {
    position: sticky;
    top: 5rem;
    padding: 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
}

.profile-progress .progress {
    height: .35rem;
}

.profile-progress .progress-bar,
.allocation-meter .progress-bar {
    transition: width .35s ease;
}

.profile-progress .progress-bar {
    background: linear-gradient(90deg, var(--brand-navy-2), var(--brand-accent));
}

.profile-nav-link {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: .6rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--bs-body-color);
    text-decoration: none;
}

.profile-nav-link > .bi {
    line-height: 1.35;
}

.profile-nav-link:hover {
    color: var(--brand-navy);
    background: rgba(37, 12, 119, .06);
}

[data-bs-theme="dark"] .profile-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.profile-nav-note {
    display: block;
    font-size: .75rem;
    font-weight: 600;
}

/* Section cards ------------------------------------------------------------------------------- */

.profile-section {
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem 1.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    /* Clear the sticky top header when jumped to from the section index. */
    scroll-margin-top: 5rem;
}

/* Lift the cards off the dark body so sections read as distinct panels. */
[data-bs-theme="dark"] .profile-section {
    background: var(--bs-tertiary-bg);
}

.profile-section-head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.35rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.profile-section-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.profile-section-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .15rem;
}

.profile-section-hint {
    margin: 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.profile-section-aside {
    flex-shrink: 0;
}

.profile-section .form-label {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

/* Choice tiles (payment method, PEP): radios kept visible inside a selectable card. */
.choice-tile {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    margin: 0;
    padding: .85rem 1rem;
    border: 1.5px solid var(--bs-border-color);
    border-radius: .8rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.choice-tile:hover {
    border-color: var(--bs-primary-border-subtle);
}

.choice-tile.is-selected {
    border-color: var(--brand-navy-2);
    background: var(--bs-primary-bg-subtle);
    box-shadow: 0 0 0 3px rgba(58, 31, 168, .1);
}

[data-bs-theme="dark"] .choice-tile.is-selected {
    border-color: #8b74f0;
}

.choice-tile .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.choice-tile-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: var(--bs-secondary-bg);
    transition: background-color .15s ease, color .15s ease;
}

.choice-tile.is-selected .choice-tile-icon {
    background: var(--brand-navy-2);
    color: #fff;
}

.choice-tile-text {
    font-weight: 600;
}

.choice-tile--compact {
    height: auto;
    min-width: 7.5rem;
    padding: .55rem 1.1rem;
}

/* Dividend review callout. */
.review-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem 1rem;
    margin-bottom: 1.35rem;
    border-radius: .8rem;
}

.review-callout-icon {
    font-size: 1.35rem;
    line-height: 1.2;
}

.review-callout-body {
    flex: 1 1 14rem;
    min-width: 0;
}

.review-callout-btn {
    align-self: center;
    color: inherit;
    border: 1px solid currentColor;
    font-weight: 600;
}

.review-callout-btn:hover {
    color: inherit;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: currentColor;
}

/* Next of kin cards + allocation meter. */
.nok-card {
    margin-bottom: .9rem;
    padding: 1rem 1.1rem 1.15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .nok-card {
    background: var(--bs-body-bg);
}

.nok-card-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .9rem;
    min-width: 0;
}

.nok-index {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-navy-2);
}

.nok-name {
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nok-share {
    margin-inline-start: auto;
    flex-shrink: 0;
    padding: .15rem .6rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.nok-card.is-incomplete {
    border-color: rgba(220, 53, 69, .55);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .1);
}

/* A started card with no share yet — usually one added after the allocation was already full. */
.nok-share.is-empty {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

/* The template's green "valid + modified" outline (top of this file) would otherwise sit on
   top of Bootstrap's red is-invalid border on an edited-but-out-of-range allocation. */
.profile-page .is-invalid.valid.modified {
    outline: none;
}

.nok-remove {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    border: 0;
}

.nok-remove:hover {
    color: var(--bs-danger);
    background: rgba(220, 53, 69, .1);
}

.btn-add-dashed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: 100%;
    padding: .75rem;
    border: 1.5px dashed var(--bs-border-color);
    border-radius: .9rem;
    background: transparent;
    color: var(--bs-link-color);
    font-weight: 600;
    transition: border-color .15s ease, background-color .15s ease;
}

.btn-add-dashed:hover {
    border-color: var(--bs-link-color);
    background: var(--bs-primary-bg-subtle);
}

.allocation-meter {
    margin-top: 1.25rem;
}

.allocation-meter .progress {
    height: .5rem;
}

/* Sticky save bar. */
.profile-savebar {
    position: sticky;
    bottom: 1rem;
    z-index: 20;
    padding: .75rem .9rem .75rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: rgba(var(--bs-body-bg-rgb), .88);
    backdrop-filter: blur(10px);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .12);
    transition: border-color .2s ease;
}

.profile-savebar.is-dirty {
    border-color: rgba(237, 100, 43, .6);
}

.profile-savebar-errors {
    max-height: 9rem;
    overflow-y: auto;
    margin-bottom: .75rem;
    font-size: .875rem;
}

.profile-savebar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.profile-savebar-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: var(--bs-secondary-color);
}

.savebar-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(237, 100, 43, .22);
}

@media (max-width: 575.98px) {
    .profile-section { padding: 1.25rem 1.1rem 1.35rem; }
    .profile-savebar { bottom: .5rem; }
    .profile-savebar-row .btn { flex: 1 1 100%; }
}

/* Dividend review request (Pages/Profile/DividendReviewDetail). Reuses the profile hero and
   section cards above; adds the status timeline, the documents list and the chat thread. */

.review-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--bs-secondary-color);
}

.review-back-link:hover {
    color: var(--bs-link-color);
}

.hero-status-badge {
    --ink: #ffd866;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: 2rem;
    font-weight: 700;
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
}

.hero-status-badge--success { --ink: #7fe0b8; }
.hero-status-badge--danger { --ink: #ffb3b3; }
.hero-status-badge--secondary { --ink: #d0d4da; }

/* Status timeline, drawn on the hero's navy in both themes. Each step's ::before is the line
   leading into it from the previous step, so a step colours its own incoming segment. */
.review-timeline {
    flex-basis: 100%;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.review-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    text-align: center;
}

.review-step::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, .18);
    transform: translateY(-50%);
}

.review-step:first-child::before {
    display: none;
}

.review-step:not(.review-step--upcoming)::before {
    background: var(--brand-accent);
}

.review-step-dot {
    position: relative;
    z-index: 1;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, .6);
    background: #2c1486;
    border: 2px solid rgba(255, 255, 255, .25);
}

.review-step--done .review-step-dot {
    color: #1a1300;
    background: var(--brand-accent);
    border-color: var(--brand-accent);
}

.review-step--active .review-step-dot {
    color: var(--brand-navy);
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .18);
}

.review-step--attention .review-step-dot {
    color: #3d2e00;
    background: #ffd866;
    border-color: #ffd866;
    box-shadow: 0 0 0 5px rgba(255, 216, 102, .25);
}

.review-step--failed .review-step-dot {
    color: #3d0000;
    background: #ff8a8a;
    border-color: #ff8a8a;
}

.review-step--skipped .review-step-dot {
    color: #fff;
    background: rgba(255, 255, 255, .25);
}

.review-step-label {
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
}

.review-step--upcoming .review-step-label {
    color: rgba(255, 255, 255, .55);
    font-weight: 500;
}

.review-step-date {
    font-size: .72rem;
    color: rgba(255, 255, 255, .6);
}

.review-banner {
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
}

.review-banner > .review-callout-icon {
    align-self: flex-start;
}

.review-banner > .btn {
    flex-shrink: 0;
}

.review-note {
    margin: .45rem 0 .55rem;
    padding: .5rem .75rem;
    font-size: .9rem;
    border-inline-start: 3px solid currentColor;
    border-radius: .4rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
    white-space: pre-wrap;
}

/* Supporting documents. */
.doc-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.doc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .doc-row {
    background: var(--bs-body-bg);
}

.doc-row-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.doc-row-text {
    flex: 1 1 8rem;
    min-width: 0;
}

.doc-row-name {
    font-size: .9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-row-meta {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.doc-row-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .5rem;
    color: var(--bs-secondary-color);
}

.doc-row-btn:hover {
    color: var(--bs-body-color);
    background: var(--bs-secondary-bg);
}

.doc-row-btn--danger:hover {
    color: var(--bs-danger);
    background: rgba(220, 53, 69, .12);
}

.doc-row-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.doc-chip .btn-close {
    font-size: .6rem;
}

/* AttachmentUploader: the real <input type=file> is visually hidden inside this label, so the
   label shows the keyboard focus ring on its behalf. */
.attach-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.attach-picker-btn:focus-within {
    box-shadow: 0 0 0 .25rem rgba(58, 31, 168, .25);
}

/* AttachmentViewer: a near-full-height modal so a PDF page gets real room. */
.attachment-viewer {
    background: rgba(0, 0, 0, .6);
}

.attachment-viewer-dialog {
    max-width: min(96vw, 72rem);
    height: calc(100vh - 3.5rem);
}

.attachment-viewer-dialog .modal-content {
    height: 100%;
}

.attachment-viewer-header {
    gap: .5rem;
    padding: .65rem 1rem;
}

.attachment-viewer-title-icon {
    font-size: 1.25rem;
    color: var(--bs-secondary-color);
}

.attachment-viewer-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-viewer-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

.attachment-viewer-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: auto;
    background: var(--bs-tertiary-bg);
}

.attachment-viewer-frame {
    width: 100%;
    height: 100%;
    border: 0;
}

.attachment-viewer-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.attachment-viewer-empty {
    max-width: 26rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

.attachment-viewer-empty > .bi {
    font-size: 3rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .attachment-viewer-dialog { height: calc(100vh - 1rem); }
}

/* Correspondence as a chat: registrar on the left, the investor on the right. */
.chat-thread {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    max-height: 30rem;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding: .25rem .25rem .25rem 0;
}

.chat-msg {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    max-width: 88%;
}

.chat-msg--you {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    color: #fff;
    background: var(--brand-navy-2);
}

.chat-msg--you .chat-avatar {
    color: #1a1300;
    background: var(--brand-accent);
}

.chat-body {
    min-width: 0;
}

.chat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .6rem;
    margin-bottom: .25rem;
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.chat-msg--you .chat-meta {
    justify-content: flex-end;
}

.chat-bubble {
    padding: .65rem .9rem;
    font-size: .925rem;
    overflow-wrap: anywhere;
    border: 1px solid var(--bs-border-color);
    border-radius: .3rem 1rem 1rem 1rem;
    background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .chat-msg--staff .chat-bubble {
    background: var(--bs-body-bg);
}

.chat-msg--you .chat-bubble {
    border-radius: 1rem .3rem 1rem 1rem;
    border-color: var(--bs-primary-border-subtle);
    background: var(--bs-primary-bg-subtle);
}

.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2rem 1rem;
    font-size: .9rem;
    color: var(--bs-secondary-color);
}

.chat-empty .bi {
    font-size: 1.75rem;
    opacity: .6;
}

.chat-composer {
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.chat-composer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .75rem;
}

@media (max-width: 575.98px) {
    .review-step-label { font-size: .7rem; }
    .review-step-dot { width: 1.85rem; height: 1.85rem; font-size: .85rem; }
    .review-step::before { top: .925rem; }
    .chat-msg { max-width: 100%; }
}

/* ---------------------------------------------------------------------------------------------
   Dividends (Pages/Dividends) and approvals waiting on a co-holder (Requests/PendingApprovals).

   Both open with the profile hero and reuse the holding card / profile section panels; what's
   added here is the dividends page's stat tiles, filter chips and its table, which is a grid of
   rows on wide screens and folds into labelled cards on a phone. Theme variables throughout, so
   light and dark both follow [data-bs-theme].
   --------------------------------------------------------------------------------------------- */

.min-w-0 {
    min-width: 0;
}

.dividend-stat {
    display: block;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

[data-bs-theme="dark"] .dividend-stat {
    background: var(--bs-tertiary-bg);
}

a.dividend-stat {
    transition: border-color .15s ease, transform .15s ease;
}

a.dividend-stat:hover {
    color: var(--bs-body-color);
    transform: translateY(-2px);
}

.dividend-stat--warning {
    border-color: var(--bs-warning-border-subtle);
    background: var(--bs-warning-bg-subtle);
}

[data-bs-theme="dark"] .dividend-stat--warning {
    background: var(--bs-warning-bg-subtle);
}

.dividend-stat-icon {
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: .6rem;
    border-radius: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.dividend-stat-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.dividend-stat-value {
    font-size: clamp(1.05rem, 3.6vw, 1.3rem);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.dividend-stat-hint {
    margin-top: .2rem;
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.dividend-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.dividend-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.dividend-filter-label {
    margin-right: .15rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.dividend-chip {
    padding: .3rem .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    font-size: .85rem;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.dividend-chip:hover {
    border-color: var(--brand-navy-2);
    color: var(--bs-body-color);
}

.dividend-chip.active {
    color: #fff;
    background: var(--brand-navy-2);
    border-color: var(--brand-navy-2);
}

.dividend-table {
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem;
    overflow: hidden;
}

.dividend-row {
    display: grid;
    grid-template-columns: minmax(12rem, 2.2fr) .8fr 1fr 1fr 1.1fr 1.5fr 1.1fr;
    gap: .75rem;
    align-items: center;
    padding: .75rem 1rem;
    font-size: .9rem;
    border-top: 1px solid var(--bs-border-color);
}

.dividend-row--head {
    border-top: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
}

.dividend-row--ufaa {
    background: var(--bs-warning-bg-subtle);
}

.dividend-cell {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Below md the grid folds into one card per dividend: the run on top, then each figure as a
   labelled line (the header row's labels move into data-label). */
@media (max-width: 767.98px) {
    .dividend-row--head {
        display: none;
    }

    .dividend-row {
        grid-template-columns: 1fr;
        gap: .3rem;
    }

    .dividend-row:nth-child(2) {
        border-top: 0;
    }

    .dividend-cell[data-label] {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        text-align: right;
    }

    .dividend-cell[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        text-align: left;
        color: var(--bs-secondary-color);
    }

    .dividend-cell-value {
        min-width: 0;
    }

    .dividend-cell--run {
        margin-bottom: .25rem;
    }
}

.approval-type-icon {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--brand-navy-2);
    background: rgba(58, 31, 168, .1);
}

[data-bs-theme="dark"] .approval-type-icon {
    color: #b9a8ff;
    background: rgba(139, 116, 240, .18);
}

.approval-description {
    padding: .75rem .9rem;
    border-radius: .65rem;
    font-size: .925rem;
    background: var(--bs-tertiary-bg);
    border-left: 3px solid var(--brand-accent);
    white-space: pre-line;
}

.approval-progress {
    width: 5rem;
    height: .45rem;
}

.approval-progress .progress-bar {
    background: var(--brand-accent);
}

.approval-confirm {
    padding: .85rem 1rem;
    border-radius: .75rem;
    border: 1px solid var(--bs-danger-border-subtle);
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

/* UFAA (Pages/Ufaa): the remitted dividends as a tick-list per holding, and the four steps to
   reclaim them beside it. */
.ufaa-line {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.ufaa-line:last-child {
    border-bottom: 0;
}

.ufaa-line-body {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.ufaa-step-list {
    counter-reset: ufaa-step;
    list-style: none;
    padding-left: 0;
}

.ufaa-step-list li {
    counter-increment: ufaa-step;
    position: relative;
    padding: 0 0 1rem 2.6rem;
}

.ufaa-step-list li:last-child {
    padding-bottom: 0;
}

.ufaa-step-list li::before {
    content: counter(ufaa-step);
    position: absolute;
    left: 0;
    top: -.1rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-navy-2);
}

@media (prefers-reduced-motion: reduce) {
    html:has(.profile-page) { scroll-behavior: auto; }
    .status-pulse::after { animation: none; }
    .profile-hero-status:hover { transform: none; }
    a.dividend-stat:hover { transform: none; }
}

/* Legal pages (Privacy Policy, Terms of Use) — LegalPage.razor */
.legal-translation-notice {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: .75rem;
    font-size: .9rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.legal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .legal-layout {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: 2.5rem;
    }

    .legal-contents-full {
        position: sticky;
        top: 5rem;
        align-self: start;
    }
}

.legal-contents-full {
    display: none;
}

@media (min-width: 992px) {
    .legal-contents-compact {
        display: none;
    }

    .legal-contents-full {
        display: block;
    }
}

.legal-contents details,
.legal-contents-box {
    padding: 1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
}

.legal-contents summary,
.legal-contents-title {
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color);
    cursor: pointer;
    margin: 0;
}

.legal-contents-title {
    cursor: default;
}

.legal-contents ol {
    margin: .75rem 0 0;
    padding-inline-start: 1.25rem;
    font-size: .9rem;
}

.legal-contents li + li {
    margin-top: .35rem;
}

.legal-contents a {
    text-decoration: none;
}

.legal-contents a:hover {
    text-decoration: underline;
}

.legal-body {
    max-width: 48rem;
    line-height: 1.65;
}

.legal-summary {
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
    border-inline-start: 4px solid var(--brand-accent);
    background: var(--bs-tertiary-bg);
}

.legal-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.legal-summary li {
    display: flex;
    gap: .6rem;
}

.legal-summary li + li {
    margin-top: .5rem;
}

.legal-summary .bi {
    flex-shrink: 0;
    color: var(--brand-accent);
}

.legal-section {
    scroll-margin-top: 5rem;
    padding-top: .5rem;
    margin-bottom: 2rem;
}

.legal-section h2 {
    margin-bottom: .75rem;
    color: var(--brand-navy);
}

[data-bs-theme="dark"] .legal-section h2 {
    color: var(--bs-emphasis-color);
}

.legal-section ul {
    padding-inline-start: 1.25rem;
}

.legal-section li + li {
    margin-top: .4rem;
}

.legal-see-also {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    font-weight: 600;
}

.legal-page[dir="rtl"] .legal-see-also .bi {
    transform: scaleX(-1);
}

.legal-translation-notice .bi {
    margin-top: .15rem;
}

/* Identity status messages (StatusMessage.razor): the home page after an account deletion, and the
   account area after a phone change. Same rounded, icon-led alert as the account cards. */
.status-message {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border-radius: .85rem;
}

.status-message-icon {
    flex-shrink: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------------------------
   Account settings (Account/Shared/ManageLayout and the pages inside it: phone number, devices,
   communication preferences, delete account).

   The profile hero on top, then the settings nav beside the page's cards (.profile-section).
   .account-area is a size container, so the nav takes its shape from the room it actually has —
   the app sidebar takes 260px from md up — rather than from the viewport: a column of items with
   a one-line description when two columns fit, otherwise a 2x2 grid of tiles above the page.
   Arabic sets dir="rtl" on .account-area. These rules use logical properties; the Bootstrap
   pieces compiled with physical ones (form-check, the hero's decoration) are mirrored at the end.
   --------------------------------------------------------------------------------------------- */

.account-area {
    container: account-area / inline-size;
    --account-tint: rgba(37, 12, 119, .04);
    --account-focus: rgba(58, 31, 168, .45);
    --account-ink: var(--brand-navy-2);
}

[data-bs-theme="dark"] .account-area {
    --account-tint: rgba(255, 255, 255, .045);
    --account-focus: rgba(185, 166, 242, .75);
    --account-ink: #b9a8ff;
}

/* Bootstrap leaves .btn-accent (ours) without a focus ring colour, and gives .btn-primary its blue. */
.account-area .btn-primary {
    --bs-btn-focus-shadow-rgb: 58, 31, 168;
}

.account-area .btn-accent {
    --bs-btn-focus-shadow-rgb: 237, 100, 43;
}

.account-area a:not(.btn, .account-nav-link):focus-visible {
    outline: 3px solid var(--account-focus);
    outline-offset: 2px;
    border-radius: .2rem;
}

.account-phone-chip--verified .bi { color: #7fe0b8; }
.account-phone-chip--unverified .bi { color: #ffd866; }
.account-phone-chip--none .bi { color: rgba(255, 255, 255, .7); }

.account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.account-body {
    container: account-body / inline-size;
    min-width: 0;
}

.account-body > .profile-section:last-child {
    margin-bottom: 0;
}

/* Settings nav ------------------------------------------------------------------------------- */

.account-nav {
    padding: .45rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

[data-bs-theme="dark"] .account-nav {
    background: var(--bs-tertiary-bg);
}

.account-nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 100%;
    padding: .55rem .6rem;
    border-radius: .7rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.account-nav-link:hover {
    color: var(--bs-body-color);
    background: rgba(37, 12, 119, .06);
}

[data-bs-theme="dark"] .account-nav-link:hover {
    background: rgba(255, 255, 255, .06);
}

.account-nav-link:focus-visible {
    outline: 3px solid var(--account-focus);
    outline-offset: 1px;
}

.account-nav-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--brand-navy-2);
    background: rgba(58, 31, 168, .08);
    transition: background-color .15s ease, color .15s ease;
}

[data-bs-theme="dark"] .account-nav-icon {
    color: #b9a8ff;
    background: rgba(139, 116, 240, .16);
}

.account-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-nav-label {
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
}

.account-nav-hint {
    display: none;
    margin-top: .15rem;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
}

.account-nav-link.active {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
}

.account-nav-link.active::before {
    content: "";
    position: absolute;
    inset-block: .55rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--brand-accent);
}

.account-nav-link.active .account-nav-icon {
    color: #fff;
    background: var(--brand-navy-2);
}

[data-bs-theme="dark"] .account-nav-link.active .account-nav-icon {
    color: #fff;
    background: #6b57c4;
}

.account-nav-link.active .account-nav-hint {
    color: inherit;
    opacity: .78;
}

/* Delete account: last, set apart, in the danger tint rather than the brand violet. */
.account-nav-link--danger,
.account-nav-link--danger:hover {
    color: var(--bs-danger-text-emphasis);
}

.account-nav-link--danger:hover,
.account-nav-link--danger.active,
[data-bs-theme="dark"] .account-nav-link--danger:hover {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
}

.account-nav-link--danger .account-nav-icon,
[data-bs-theme="dark"] .account-nav-link--danger .account-nav-icon {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
}

.account-nav-link--danger.active::before {
    background: var(--bs-danger);
}

.account-nav-link--danger.active .account-nav-icon,
[data-bs-theme="dark"] .account-nav-link--danger.active .account-nav-icon {
    color: #fff;
    background: var(--bs-danger);
}

/* A tablet's worth of room: still a 2x2 grid, but each tile has space for its description. */
@container account-area (min-width: 36rem) {
    .account-nav-hint {
        display: block;
    }

    .account-nav-link {
        align-items: flex-start;
        padding: .7rem .75rem;
    }
}

/* Two columns: the nav becomes a sticky card beside the page. */
@container account-area (min-width: 54rem) {
    .account-layout {
        grid-template-columns: 16.5rem minmax(0, 1fr);
        gap: 1.75rem;
    }

    .account-nav {
        position: sticky;
        top: 5rem;
        padding: .6rem;
    }

    .account-nav-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-nav-link {
        gap: .75rem;
    }

    .account-nav-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.05rem;
    }

    .account-nav-label {
        font-size: .9rem;
    }

    .account-nav-item--danger {
        margin-top: .35rem;
        padding-top: .4rem;
        border-top: 1px solid var(--bs-border-color);
    }
}

/* Phone-sized: tighter cards so the content keeps its width. */
@container account-area (max-width: 35.99rem) {
    .account-area .profile-hero {
        margin-bottom: 1rem;
    }

    /* The avatar would take a third of the width the email chip needs. */
    .account-area .profile-hero-avatar {
        display: none;
    }

    .account-area .profile-section {
        margin-bottom: 1rem;
        padding: 1.15rem 1.1rem 1.25rem;
    }

    .account-area .profile-section-head {
        gap: .75rem;
        margin-bottom: 1rem;
        padding-bottom: .9rem;
    }
}

/* Shared pieces of the account cards ---------------------------------------------------------- */

.account-alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border-radius: .85rem;
}

.account-alert > .bi {
    flex-shrink: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}

.account-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 1rem 0 0;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

.account-note > .bi {
    flex-shrink: 0;
    line-height: 1.45;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: 1.25rem;
}

.account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    white-space: nowrap;
}

.account-text-link {
    font-weight: 600;
}

.account-inline-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
}

.account-area .validation-message {
    margin-top: .35rem;
    font-size: .875rem;
}

[data-bs-theme="dark"] .account-area .validation-message {
    color: #ff8a8a;
}

.account-subhead {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
}

.account-subhint {
    margin: .15rem 0 .35rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

@container account-body (max-width: 29.99rem) {
    .account-actions > .btn {
        flex: 1 1 100%;
    }
}

/* Phone number page ---------------------------------------------------------------------------- */

.account-field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    padding: .85rem 1rem;
    border-radius: .8rem;
    background: var(--account-tint);
}

.account-field-label {
    flex: 0 0 auto;
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.account-field-value {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.account-phone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

/* The number is a read-only input (the e2e suite reads its value), dressed as a heading-size figure
   and sized to its content where the browser can. */
.account-phone-value {
    flex: 0 1 auto;
    field-sizing: content;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-emphasis-color);
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

.account-phone-value:focus {
    outline: none;
}

.account-phone-value.is-empty {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.account-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4em .8em;
    font-size: .8rem;
}

.account-why {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

@container account-body (min-width: 34rem) {
    .account-why {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.account-why li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1rem;
    border-radius: .8rem;
    background: var(--account-tint);
    font-size: .875rem;
}

.account-why-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--account-ink);
}

.account-why-title {
    display: block;
    font-weight: 600;
}

.account-why-text {
    display: block;
    color: var(--bs-secondary-color);
}

.account-callout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-top: 1.25rem;
    padding: .9rem 1rem;
    border: 1px solid var(--bs-warning-border-subtle);
    border-radius: .8rem;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

.account-callout-text {
    flex: 1 1 16rem;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
}

.account-callout-text > .bi {
    flex-shrink: 0;
    line-height: 1.45;
}

.account-phone-input {
    display: flex;
    gap: .5rem;
    max-width: 30rem;
}

.account-dial-code {
    flex: 0 0 8.5rem;
    width: 8.5rem;
}

.account-phone-input .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* A code step: the brand strip on top marks it as the thing to do now. */
.account-step {
    position: relative;
    overflow: hidden;
    border-color: var(--bs-primary-border-subtle);
    box-shadow: 0 .75rem 2rem rgba(37, 12, 119, .08);
}

[data-bs-theme="dark"] .account-step {
    border-color: #4b3a99;
    box-shadow: none;
}

.account-step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: .3rem;
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-accent));
}

.account-step-eyebrow {
    display: block;
    margin-bottom: .15rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-accent-dark);
}

[data-bs-theme="dark"] .account-step-eyebrow {
    color: #f59a72;
}

.account-sent-to {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: .9rem 1rem;
    border-radius: .8rem;
    border-inline-start: 3px solid var(--brand-accent);
    background: var(--account-tint);
}

.account-sent-to > .bi {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--account-ink);
}

.account-sent-to strong {
    overflow-wrap: anywhere;
}

/* Letter-spacing trails the last digit too; the extra start padding keeps the code centred. */
.account-code-input {
    max-width: 13rem;
    padding-inline-start: calc(1rem + .35em);
    font-family: var(--bs-font-monospace);
    font-size: 1.35rem;
    letter-spacing: .35em;
    text-align: center;
}

.account-code-input::placeholder {
    letter-spacing: .35em;
}

/* Devices --------------------------------------------------------------------------------------- */

.account-table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    vertical-align: middle;
}

.account-table > :not(caption) > * > * {
    padding: .75rem .5rem;
}

.account-table > :not(caption) > * > :first-child {
    padding-inline-start: 0;
}

.account-table > :not(caption) > * > :last-child {
    padding-inline-end: 0;
    text-align: end;
}

.account-table thead th {
    padding-top: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.account-table tbody tr:last-child > * {
    border-bottom-width: 0;
}

.account-device {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
}

.account-device-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--account-ink);
    background: rgba(58, 31, 168, .08);
}

[data-bs-theme="dark"] .account-device-icon {
    background: rgba(139, 116, 240, .16);
}

.account-table + .account-note {
    margin-top: 1.25rem;
}

/* A phone: one block per device — its name and Sign out, then when it signed in and was last active. */
@container account-body (max-width: 33.99rem) {
    .account-table,
    .account-table tbody {
        display: block;
    }

    .account-table thead {
        display: none;
    }

    .account-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "platform action" "signedin signedin" "seen seen";
        align-items: center;
        gap: .4rem 1rem;
        padding: .85rem 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .account-table tr:first-child {
        padding-top: 0;
    }

    .account-table tr:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .account-table > :not(caption) > * > *,
    .account-table > :not(caption) > * > :first-child,
    .account-table > :not(caption) > * > :last-child {
        padding: 0;
        border-bottom: 0;
    }

    .account-td-platform { grid-area: platform; }
    .account-td-action { grid-area: action; justify-self: end; }
    .account-table .account-td-signedin { grid-area: signedin; }
    .account-table .account-td-seen { grid-area: seen; }

    .account-table .account-td-signedin,
    .account-table .account-td-seen {
        font-size: .85rem;
        color: var(--bs-secondary-color);
    }

    .account-td-signedin::before,
    .account-td-seen::before {
        content: attr(data-label) " · ";
    }
}

/* Communication preferences ------------------------------------------------------------------- */

.account-switch {
    margin-bottom: 0;
}

.account-switch-list > .account-switch {
    padding-block: .8rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.account-switch-list > .account-switch:last-child {
    border-bottom: 0;
}

.account-unsubscribe {
    margin-top: .75rem;
    padding: .9rem 1rem;
    border-radius: .8rem;
    background: var(--account-tint);
}

/* Delete account ---------------------------------------------------------------------------------- */

.account-outcomes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .9rem;
}

@container account-body (min-width: 38rem) {
    .account-outcomes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-outcome--kept {
        grid-column: 1 / -1;
    }
}

.account-outcome {
    --dot: var(--bs-secondary-color);
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .9rem;
    background: var(--account-tint);
}

.account-outcome--removed { --dot: #a03c46; }
.account-outcome--progress { --dot: #c98423; }
.account-outcome--kept { --dot: #1e7850; }

[data-bs-theme="dark"] .account-outcome--removed { --dot: #f0a3aa; }
[data-bs-theme="dark"] .account-outcome--progress { --dot: #f0c479; }
[data-bs-theme="dark"] .account-outcome--kept { --dot: #7fe0b8; }

.account-outcome-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem;
}

.account-outcome-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.account-outcome-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
}

.account-outcome-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.account-outcome-list li {
    position: relative;
    padding-inline-start: 1.1rem;
}

.account-outcome-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: .1rem;
    top: .5em;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--dot);
}

.account-outcomes + .account-note {
    margin-top: 1.25rem;
}

.account-danger-zone {
    border-color: var(--bs-danger-border-subtle);
}

.account-danger-zone .profile-section-head {
    border-bottom-color: var(--bs-danger-border-subtle);
}

.account-danger-icon {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
}

.account-confirm-box {
    padding: .9rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .8rem;
    background: var(--account-tint);
}

.account-area .account-danger-zone .form-check-input:checked {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

/* Right-to-left (Arabic) ---------------------------------------------------------------------- */

.account-area[dir="rtl"] .profile-hero {
    background:
        radial-gradient(circle at 0% 0%, rgba(237, 100, 43, .38) 0, rgba(237, 100, 43, 0) 42%),
        linear-gradient(225deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
}

.account-area[dir="rtl"] .profile-hero::after {
    right: auto;
    left: -5rem;
}

.account-area[dir="rtl"] .account-step::before {
    background: linear-gradient(270deg, var(--brand-navy), var(--brand-accent));
}

.account-area[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5em;
}

.account-area[dir="rtl"] .form-check .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5em;
}

.account-area[dir="rtl"] .form-switch {
    padding-right: 2.5em;
}

.account-area[dir="rtl"] .form-switch .form-check-input {
    margin-right: -2.5em;
    transform: scaleX(-1);
}

/* Spacing letters apart breaks up Arabic's joined script. */
.account-area[dir="rtl"] :is(.account-step-eyebrow, .account-table thead th) {
    letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
    .account-nav-link,
    .account-nav-icon {
        transition: none;
    }
}