/* ════════════════════════════════════════════════════════════════════════
   BOMI Banking — professional polish layer
   ────────────────────────────────────────────────────────────────────────
   Load AFTER portal.css on every page:
       <link rel="stylesheet" href="/assets/portal.css?v=2" />
       <link rel="stylesheet" href="/assets/portal-pro.css?v=1" />
   It only refines what portal.css already defines (same variables, same
   dark/light themes) and adds the shared footer, trust strip, notice box
   and legal-page styles. Nothing here changes layout or behaviour of
   existing screens, so it is safe to add page by page.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Typography & rendering ───────────────────────────────────────────── */
body {
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga";
}

.card h1,
.doc-card h1 {
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Figures line up in columns everywhere money is shown. */
.figure,
.entry-amount,
td.num,
.tabular {
    font-variant-numeric: tabular-nums;
}

/* ── Keep the form clear of the fixed language / theme buttons ─────────── */
.auth-main {
    padding-top: 4rem;
    padding-bottom: 1.5rem;
}

/* ── Card: quiet gold hairline at the top, softer corners ─────────────── */
.card {
    position: relative;
    border-radius: 16px;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 1.25rem auto 1.25rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hi) 50%, var(--gold) 80%, transparent);
    opacity: 0.85;
}

/* ── Inputs: consistent height, clearer states ────────────────────────── */
.field input {
    min-height: 2.9rem;
}

.field input:hover:not(:focus):not(:disabled) {
    border-color: rgba(227, 178, 60, 0.45);
}

:root[data-theme="light"] .field input:hover:not(:focus):not(:disabled) {
    border-color: #9FB0D3;
}

.field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.field input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(242, 137, 111, 0.28);
}

/* ── Primary button: proper hover / active / disabled feedback ────────── */
.btn-primary {
    min-height: 2.9rem;
    letter-spacing: 0.01em;
}

/* Icons inside buttons (including link-styled buttons) stay icon-sized. */
.btn-primary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-primary:hover:not(:disabled) {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.97);
}

.btn-primary:disabled {
    cursor: not-allowed;
    filter: saturate(0.6) brightness(0.9);
    box-shadow: none;
}

/* ── Links ────────────────────────────────────────────────────────────── */
.text-link {
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.text-link:hover {
    text-decoration-thickness: 2px;
}

/* ── Banners: icon-free but with a solid edge so state reads at a glance ─ */
.banner.show.error   { border-left: 4px solid var(--neg); }
.banner.show.warn    { border-left: 4px solid var(--gold); }
.banner.show.success { border-left: 4px solid var(--pos); }

/* ════════════════════════════════════════════════════════════════════════
   Matching waves on the sign-in pages
   The left panel draws its waves inside itself (bottom 45% of the page).
   The right column used a separate, viewport-wide strip fixed to the screen,
   so the two never lined up. Here the right column gets its own copy of the
   same waves, same height, same shape, anchored to the same bottom edge.
   Applies only to two-column pages (those with an .auth-aside).
   ════════════════════════════════════════════════════════════════════════ */
body:has(.auth-aside)::before {
    display: none;
}

.auth-wrap:has(> .auth-aside)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(100% / 2.05);          /* the right grid column: 1fr of 1.05fr + 1fr */
    height: 45%;                       /* same as .auth-aside::after */
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath d='M0,320 C180,270 340,360 540,320 C740,280 860,350 1080,310 C1220,285 1340,300 1440,295 L1440,500 L0,500 Z' fill='%235B86E5' fill-opacity='.10'/%3E%3Cpath d='M0,370 C200,330 360,400 580,365 C800,330 940,390 1160,360 C1280,343 1360,352 1440,350 L1440,500 L0,500 Z' fill='%235B86E5' fill-opacity='.09'/%3E%3Cpath d='M0,420 C220,398 400,435 620,415 C860,393 1000,430 1220,412 C1310,404 1380,410 1440,408 L1440,500 L0,500 Z' fill='%23E3B23C' fill-opacity='.07'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .auth-wrap:has(> .auth-aside)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 500' preserveAspectRatio='none'%3E%3Cpath d='M0,320 C180,270 340,360 540,320 C740,280 860,350 1080,310 C1220,285 1340,300 1440,295 L1440,500 L0,500 Z' fill='%230F2C6B' fill-opacity='.04'/%3E%3Cpath d='M0,370 C200,330 360,400 580,365 C800,330 940,390 1160,360 C1280,343 1360,352 1440,350 L1440,500 L0,500 Z' fill='%230F2C6B' fill-opacity='.04'/%3E%3Cpath d='M0,420 C220,398 400,435 620,415 C860,393 1000,430 1220,412 C1310,404 1380,410 1440,408 L1440,500 L0,500 Z' fill='%230F2C6B' fill-opacity='.05'/%3E%3C/svg%3E");
}

.auth-wrap:has(> .auth-aside) > .auth-main {
    position: relative;
    z-index: 1;
}

/* Desktop: the left panel stays in place while the right column scrolls, and the
   right-hand waves stay fixed to the bottom of the window to match the left ones.
   (Skipped on very short windows, where the left text would be cut off.) */
@media (min-width: 901px) and (min-height: 640px) {
    .auth-wrap:has(> .auth-aside) > .auth-aside {
        position: sticky;
        top: 0;
        height: 100vh;
        align-self: start;
    }

    .auth-wrap:has(> .auth-aside)::after {
        position: fixed;
        height: 45vh;
    }
}

@media (max-width: 900px) {
    /* One column on phones/tablets: the aside is hidden, so use a full-width wave. */
    .auth-wrap:has(> .auth-aside)::after {
        width: 100%;
        height: 32%;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Trust strip — three short, factual assurances under the sign-in card
   ════════════════════════════════════════════════════════════════════════ */
.trust-strip {
    width: 100%;
    max-width: 26rem;
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.1rem;
    font-size: 0.76rem;
    color: var(--faint);
}

.trust-strip li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.trust-strip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--gold);
}

:root[data-theme="light"] .trust-strip svg {
    color: #8A6508;
}

/* ════════════════════════════════════════════════════════════════════════
   Notice box — calm, bordered callout (security reminders, install notes)
   ════════════════════════════════════════════════════════════════════════ */
.notice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 1.25rem 0 0;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-soft);
    background: var(--raise);
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.notice svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--gold);
}

:root[data-theme="light"] .notice svg {
    color: #8A6508;
}

.notice strong {
    color: var(--heading);
}

.notice.notice-warn {
    background: var(--warn-bg);
    border-color: var(--warn-bd);
}

/* ════════════════════════════════════════════════════════════════════════
   Site footer — the same legal / support links on every page
   Markup (injected by /assets/site-footer.js, or paste by hand):
     <footer class="site-footer" role="contentinfo">
       <nav class="site-footer-links" aria-label="Legal and support">…links…</nav>
       <p class="site-footer-legal">…</p>
     </footer>
   ════════════════════════════════════════════════════════════════════════ */
.site-footer {
    width: 100%;
    max-width: 38rem;
    margin: 1.25rem auto 0;
    padding: 1.1rem 0 0.5rem;
    border-top: 1px solid var(--line-soft);
    text-align: center;
    font-size: 0.76rem;
    color: var(--faint);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.25rem;
    margin-bottom: 0.7rem;
}

.site-footer-links a {
    color: var(--muted);
    text-decoration: none;
    padding: 0.15rem 0;
    border-bottom: 1px solid transparent;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: var(--heading);
    border-bottom-color: var(--gold);
}

.site-footer-links a[aria-current="page"] {
    color: var(--heading);
    border-bottom-color: var(--gold);
}

.site-footer-legal {
    margin: 0 auto;
    max-width: 34rem;
    line-height: 1.6;
}

/* Inside the signed-in app the footer sits in the page shell, not the auth column. */
.shell .site-footer {
    max-width: none;
    margin-top: 2.5rem;
}

/* ════════════════════════════════════════════════════════════════════════
   Document pages (privacy, security, contact) — readable long-form text
   ════════════════════════════════════════════════════════════════════════ */
.doc-card {
    width: 100%;
    max-width: 44rem;
    padding: 2.25rem 2.4rem 2rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    color: var(--text);
    line-height: 1.65;
    font-size: 0.95rem;
}

.doc-card h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    margin: 0 0 0.3rem;
    color: var(--heading);
}

.doc-card .doc-meta {
    margin: 0 0 1.6rem;
    font-size: 0.8rem;
    color: var(--faint);
}

.doc-card h2 {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 1.9rem 0 0.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-soft);
}

.doc-card h2:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 1.2rem;
}

.doc-card p {
    margin: 0 0 0.9rem;
}

.doc-card ul {
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
}

.doc-card li {
    margin-bottom: 0.35rem;
}

.doc-card strong {
    color: var(--heading);
}

.doc-card dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    margin: 0 0 0.9rem;
}

.doc-card dt {
    color: var(--muted);
    font-weight: 600;
}

.doc-card dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.doc-card .text-link {
    font-size: inherit;
}

.doc-card code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--raise);
    border: 1px solid var(--line-soft);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .doc-card {
        padding: 1.6rem 1.25rem 1.4rem;
    }

    .doc-card dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .doc-card dd {
        margin-bottom: 0.6rem;
    }

    .site-footer-links {
        gap: 0.3rem 1rem;
    }
}

/* ── Accessibility preferences ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .field input {
        transition: none;
    }

    .btn-primary:hover:not(:disabled) {
        transform: none;
    }

    .spinner {
        animation-duration: 1.6s;
    }
}

@media (prefers-contrast: more) {
    :root {
        --line: rgba(190, 210, 255, 0.35);
        --line-soft: rgba(190, 210, 255, 0.22);
        --faint: #A3B3D3;
    }

    :root[data-theme="light"] {
        --line: #8A97B5;
        --line-soft: #B9C3DA;
        --faint: #53618A;
    }
}

/* ── Print: legal pages print cleanly, chrome is dropped ──────────────── */
@media print {
    .theme-corner,
    .skip-link,
    .site-footer-links,
    .auth-aside,
    .trust-strip {
        display: none !important;
    }

    body,
    .doc-card {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }

    .doc-card {
        border: 0;
        max-width: none;
        padding: 0;
    }

    .doc-card h1,
    .doc-card h2,
    .doc-card strong {
        color: #000;
    }

    .card::before {
        display: none;
    }
}


/* ── No sideways jump between pages: reserve the scrollbar's space on every page, whether or not it needs one ── */
html { scrollbar-gutter: stable; }

/* ── Two short fields side by side (Register: date of birth + SSN, username + phone) ── */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.75rem;
}
.field-row > .field { min-width: 0; }
@media (max-width: 340px) { .field-row { grid-template-columns: 1fr; } }