/* =====================================================================
   The staff dashboard on phones and tablets (up to 1023px wide).
   Dark staff bar on top, five tabs at the bottom, a short Menu of groups,
   and calmer pages. Laptops are not touched by anything in this file.
   (file: public/css/sacco-phone.css, loaded last)
   ===================================================================== */

:root { color-scheme: only light; }

/* hidden on laptops */
.sx-top-brand,
.sx-menu { display: none; }

@media (max-width: 1023px) {

    /* ---------- staff bar ---------- */
    .sx-top {
        height: 56px;
        padding: 0 12px 0 14px;
        grid-template-columns: 1fr auto;
        background: #0F1B3D;
        border-bottom: 0;
        box-shadow: none;
    }

    body:has(.sx-shell) .fi-layout { padding-top: 56px; }

    .sx-top-center,
    .sx-greet { display: none !important; }

    .sx-top-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        color: #fff;
        text-decoration: none;
    }

    .sx-top-mark {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 9px;
        display: grid;
        place-items: center;
        background: #2563EB;
        font-size: 14px;
        font-weight: 800;
        color: #fff;
        overflow: hidden;
    }

    .sx-top-mark.is-logo { background: #fff; padding: 3px; box-sizing: border-box; }
    .sx-top-mark img { width: 100%; height: 100%; object-fit: contain; }

    .sx-top-word {
        font-size: 14px;
        font-weight: 800;
        letter-spacing: .14em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sx-top-tag {
        font-style: normal;
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .08em;
        color: #C4B5FD;
        border: 1px solid #4C3A99;
        padding: 3px 7px;
        border-radius: 6px;
    }

    .sx-user-btn {
        background: transparent;
        border-color: rgba(255, 255, 255, .22);
    }

    .sx-avatar { width: 32px; height: 32px; font-size: 12px; }

    /* ---------- bottom tabs ---------- */
    .sx-bottom { gap: 2px; padding-top: 6px; }

    .sx-bottom-btn {
        padding: 6px 2px;
        font-size: 11px;
        background: transparent !important;
    }

    .sx-bottom-btn.is-active { color: var(--sx-cobalt); font-weight: 800; }
    .sx-bottom-ico { width: 21px; height: 21px; }

    /* ---------- the Menu: one screen of group cards ---------- */
    .sx-drawer-backdrop { display: none !important; }

    .sx-drawer.sx-menu {
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: fixed;
        z-index: 44; /* under the tabs, so they stay in view */
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px));
        background: var(--sx-page);
        box-shadow: none;
        overflow-y: auto;
    }

    .sx-drawer.sx-menu > * { flex-shrink: 0; }

    .sx-top-brand,
    .sx-bottom-btn,
    .sx-menu-result,
    .sx-sheet-link,
    .sx-menu-foot-btn { text-decoration: none !important; }

    .sx-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sx-menu-title {
        margin: 0;
        font-size: 24px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--sx-ink);
    }

    .sx-menu-search {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        padding: 0 14px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid var(--sx-border);
        color: var(--sx-muted);
    }

    .sx-menu-search input {
        flex-grow: 1;
        border: 0;
        outline: 0;
        background: transparent;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        color: var(--sx-ink);
    }

    .sx-menu-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sx-menu-card {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 10px;
        align-content: start;
        row-gap: 2px;
        align-items: center;
        padding: 12px;
        border-radius: 14px;
        border: 1px solid var(--sx-border);
        background: #fff;
        text-align: left;
        font-family: inherit;
        color: var(--sx-ink);
        cursor: pointer;
    }

    .sx-menu-card.is-active { border-color: #BFD0FF; }
    .sx-menu-card .sx-menu-card-ico { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 11px; }
    .sx-menu-card b { font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .sx-menu-card small {
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--sx-muted);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .sx-menu-card-ico {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: #EEF3FF;
        color: var(--sx-cobalt);
    }

    .sx-menu-results {
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--sx-border);
        overflow: hidden;
    }

    .sx-menu-result {
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 12px 16px;
        border-top: 1px solid #EEF1F7;
        color: var(--sx-ink);
    }

    .sx-menu-result:first-child { border-top: 0; }
    .sx-menu-result b { font-size: 14.5px; }
    .sx-menu-result small { font-size: 12px; font-weight: 600; color: var(--sx-muted); }

    .sx-menu-foot { display: flex; gap: 10px; }
    .sx-menu-foot form { flex: 1; margin: 0; display: flex; }

    .sx-menu-foot-btn {
        flex: 1;
        height: 44px;
        border-radius: 12px;
        border: 1px solid var(--sx-border);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        font-size: 14px;
        font-weight: 800;
        color: var(--sx-ink);
        cursor: pointer;
    }

    .sx-menu-foot-btn.is-out { color: #B91C1C; }

    /* ---------- a group's panel, sliding up over the Menu ---------- */
    .sx-sheet-backdrop { z-index: 48 !important; background: rgba(11, 21, 48, .45) !important; }
    .sx-sheet { z-index: 49 !important; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important; }

    .sx-sheet-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 4px 12px;
    }

    .sx-sheet-head b { flex-grow: 1; font-size: 19px; color: var(--sx-ink); }

    .sx-sheet-close {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 0;
        background: var(--sx-page);
        display: grid;
        place-items: center;
        color: var(--sx-ink);
        cursor: pointer;
    }

    .sx-sheet-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sx-sheet-link {
        display: flex;
        align-items: center;
        min-height: 54px;
        padding: 8px 14px;
        box-sizing: border-box;
        border-radius: 12px;
        background: var(--sx-page);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--sx-ink);
    }

    .sx-sheet-link.is-active { background: #EEF3FF; color: var(--sx-cobalt); }

    /* ---------- page headers: title and buttons on one tidy row ---------- */
    body:has(.sx-shell) .fi-header {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 10px 12px;
    }

    body:has(.sx-shell) .fi-header-heading { font-size: 24px !important; }

    body:has(.sx-shell) .fi-header .fi-ac,
    body:has(.sx-shell) .fi-header .fi-ac .fi-btn { width: auto !important; }

    body:has(.sx-shell) .fi-header .fi-ac {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin-left: auto;
    }

    body:has(.sx-shell) .fi-header .fi-btn {
        min-height: 40px !important;
        padding-inline: 14px !important;
        border-radius: 11px !important;
    }

    /* the main (last) button keeps its words; the others become icon buttons (their name is still read out) */
    body:has(.sx-shell) .fi-header .fi-ac > .fi-btn:not(:last-child),
    body:has(.sx-shell) .fi-header .fi-ac > *:not(:last-child) .fi-btn {
        width: 40px !important;
        padding: 0 !important;
        justify-content: center;
        font-size: 0 !important;
        gap: 0 !important;
        background: #fff !important;
        border: 1px solid var(--sx-border) !important;
        box-shadow: none !important;
        color: var(--sx-ink) !important;
    }

    body:has(.sx-shell) .fi-header .fi-ac > .fi-btn:not(:last-child) svg,
    body:has(.sx-shell) .fi-header .fi-ac > *:not(:last-child) .fi-btn svg {
        width: 18px;
        height: 18px;
        color: var(--sx-ink) !important;
    }

    /* ---------- number cards: two across instead of a tall stack ---------- */
    /* the whole block uses the full width, with no extra frame around it */
    body:has(.sx-shell) .fi-wi-stats-overview,
    body:has(.sx-shell) :has(> .fi-wi-stats-overview) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
    }

    body:has(.sx-shell) .fi-wi-stats-overview .fi-section,
    body:has(.sx-shell) .fi-wi-stats-overview .fi-section-content-ctn,
    body:has(.sx-shell) .fi-wi-stats-overview .fi-section-content {
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body:has(.sx-shell) .fi-tabs { overflow-x: auto; scrollbar-width: none; }

    body:has(.sx-shell) .fi-wi-stats-overview .fi-grid:has(.fi-wi-stats-overview-stat) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body:has(.sx-shell) .fi-wi-stats-overview .fi-grid:has(.fi-wi-stats-overview-stat) > * {
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
        max-width: none !important;
    }

    body:has(.sx-shell) .fi-wi-stats-overview-stat {
        padding: 12px !important;
        border-radius: 14px !important;
        box-shadow: none !important;
    }

    body:has(.sx-shell) .fi-wi-stats-overview-stat-label { font-size: 12px !important; }
    body:has(.sx-shell) .fi-wi-stats-overview-stat-value { font-size: 20px !important; line-height: 1.2 !important; }
    body:has(.sx-shell) .fi-wi-stats-overview-stat-description { font-size: 11.5px !important; }

    /* ---------- cards and tables: lighter on a small screen ---------- */
    body:has(.sx-shell) .fi-section,
    body:has(.sx-shell) .fi-ta-ctn {
        border-radius: 16px !important;
        box-shadow: none !important;
    }

    body:has(.sx-shell) .fi-main { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 420px) {
    body:has(.sx-shell) .fi-wi-stats-overview-stat-value { font-size: 18px !important; }
    .sx-top-word { max-width: 120px; }
}

/* =====================================================================
   Role home screens (.rh) on phones: a white "today" report, a short
   work list, small number tiles. Same content as the laptop, less bulk.
   ===================================================================== */
@media (max-width: 1023px) {
    .rh { gap: 14px; }

    .rh-top { flex-wrap: nowrap; gap: 8px; }
    .rh-top .rh-date { font-size: 12.5px; }
    .rh-actions { gap: 6px; flex-wrap: nowrap; }
    .rh-btn { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
    .rh-counter-btn { display: none !important; } /* tellers use the laptops at the branch */

    /* the blue banner becomes a white report with lines between the figures */
    .rh-hero {
        background: #fff !important;
        color: #0B1530 !important;
        border: 1px solid #E5E9F2;
        border-radius: 16px;
        padding: 14px 16px;
        gap: 10px !important;
    }

    .rh-hero.is-col:has(.rh-hero-grid) { padding: 0; gap: 0 !important; overflow: hidden; }
    .rh-hero.is-col:has(.rh-hero-grid) > .rh-eyebrow { padding: 12px 16px 10px; }

    .rh-eyebrow { opacity: 1; color: #5E6A82; font-size: 11.5px; }
    .rh-hero h2 { font-size: 19px; line-height: 1.3; }
    .rh-hero ul { font-size: 13.5px; color: #33415C; }

    .rh-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; }
    .rh-hero-grid > div { padding: 12px 16px; border-top: 1px solid #EEF1F7; }
    .rh-hero-grid > div:nth-child(odd) { border-right: 1px solid #EEF1F7; }
    .rh-hero-grid span { opacity: 1; color: #5E6A82; font-size: 12px; }
    .rh-hero-grid b { font-size: 19px; font-variant-numeric: tabular-nums; }
    .rh-hero-grid small { opacity: 1; color: #5E6A82; font-size: 11.5px; }

    .rh-hero-side { background: #F4F6FB; }
    .rh-hero-side span { opacity: 1; color: #5E6A82; }
    .rh-hero-side a, .rh-hero a { color: #1E40AF !important; }
    .rh-hero .rh-btn.is-light { background: #EEF3FF; color: #1E40AF !important; }
    .rh-hero .rh-meter { background: #EEF1F7; }
    .rh-hero .rh-meter i { background: #1E40AF; }
    .rh-hero > span[style] { opacity: 1 !important; color: #5E6A82; }

    /* cards and the work list */
    .rh-card { padding: 14px 16px; border-radius: 16px; gap: 6px; }
    .rh-card-head h3 { font-size: 15px; }
    .rh-line { padding: 10px 0; gap: 10px; }
    .rh-line-text strong { font-size: 13.5px; }
    .rh-line-text small { font-size: 12px; }
    .rh-count { min-width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
    .rh-line .rh-btn.is-small { height: 34px; padding: 0 12px; border: 0; background: #EEF3FF; color: #1E40AF !important; }

    /* number tiles: two across, small */
    .rh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    .rh-kpi { padding: 12px; border-radius: 14px; gap: 2px; }
    .rh-kpi > span { font-size: 11.5px; }
    .rh-kpi > b { font-size: 18px; letter-spacing: -.2px; }
    .rh-kpi > small { font-size: 11px; line-height: 1.35; }

    .rh-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; }
    .rh-tile { padding: 10px 8px; border-radius: 12px; }
    .rh-tile b { font-size: 17px; }
    .rh-tile small { font-size: 11px; line-height: 1.3; }

    .rh-grid { gap: 14px; }
    .rh-banner { flex-direction: column; align-items: flex-start; }

    /* wide tables (late loans) scroll sideways inside their card */
    .rh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
    .rh-table { min-width: 560px; }
    .rh-call { flex-wrap: wrap; }
}

/* =====================================================================
   Staff roles: phones show one role at a time as a plain list of switches
   ===================================================================== */
.sr-phone { display: none; }

@media (max-width: 1023px) {
    .sr-desktop { display: none !important; }
    .sr-phone { display: flex; flex-direction: column; gap: 10px; }

    .sr-phone-role {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px;
        border-radius: 14px;
        background: #fff;
        border: 1px solid #E5E9F2;
    }

    .sr-phone-group {
        margin: 10px 2px 0;
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #5E6A82;
    }

    .sr-phone-list {
        display: flex;
        flex-direction: column;
        border-radius: 14px;
        background: #fff;
        border: 1px solid #E5E9F2;
        overflow: hidden;
    }

    .sr-phone-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 14px;
        border: 0;
        border-top: 1px solid #EEF1F7;
        background: transparent;
        font: 600 14px/1.4 Manrope, system-ui, sans-serif;
        color: #0B1530;
        text-align: left;
        cursor: pointer;
    }

    .sr-phone-item:first-child { border-top: 0; }
    .sr-phone-item.is-changed { background: #FFF8EB; }
    .sr-phone-item:disabled { cursor: default; }
    .sr-phone-item:disabled .sr-switch { opacity: .5; }

    .sr-switch {
        position: relative;
        flex-shrink: 0;
        width: 44px;
        height: 26px;
        border-radius: 999px;
        background: #D5DCEA;
        transition: background .15s;
    }

    .sr-switch::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
        transition: left .15s;
    }

    .sr-phone-item.is-on .sr-switch { background: #1E40AF; }
    .sr-phone-item.is-on .sr-switch::after { left: 21px; }
}

/* =====================================================================
   Loans list, one loan, member profile, loan application (phones)
   Tables become small cards; the money summary comes first.
   ===================================================================== */
@media (max-width: 1023px) {
    /* shared: a table row becomes a two-column card */
    .al-table, .lv-sched, .lv-pay, .mp-acc-table, .mp-loan-table { min-width: 0 !important; display: block; }
    .al-table thead, .lv-sched thead, .lv-pay thead, .mp-acc-table thead, .mp-loan-table thead { display: none; }
    .al-table tbody, .lv-sched tbody, .lv-pay tbody, .mp-acc-table tbody, .mp-loan-table tbody { display: block; }

    .al-table tr, .lv-sched tr, .lv-pay tr, .mp-acc-table tr, .mp-loan-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 3px;
        align-items: center;
        padding: 12px 14px;
        border-top: 1px solid #EEF1F7;
    }

    .al-table tbody tr:first-child, .lv-sched tbody tr:first-child, .lv-pay tbody tr:first-child,
    .mp-acc-table tbody tr:first-child, .mp-loan-table tbody tr:first-child { border-top: 0; }

    .al-table td, .lv-sched td, .lv-pay td, .mp-acc-table td, .mp-loan-table td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        min-width: 0;
        text-align: left;
    }

    .al-table td[colspan], .lv-pay td[colspan], .mp-acc-table td[colspan], .mp-loan-table td[colspan] { grid-column: 1 / -1; }

    /* the cell placed in the right column */
    .al-table td:nth-child(5), .al-table td:nth-child(6),
    .lv-sched td:nth-child(5), .lv-sched td:nth-child(6),
    .lv-pay td:nth-child(5), .lv-pay td:nth-child(2),
    .mp-acc-table td:nth-child(3), .mp-acc-table td:nth-child(6),
    .mp-loan-table td:nth-child(4), .mp-loan-table td:nth-child(5) { text-align: right; justify-self: end; }

    /* Loans list: name | still owed  /  loan no | status */
    .al-table td:nth-child(2) { grid-area: 1 / 1; font-size: 14.5px; }
    .al-table td:nth-child(2) br, .al-table td:nth-child(2) small { display: none; }
    .al-table td:nth-child(5) { grid-area: 1 / 2; font-variant-numeric: tabular-nums; }
    .al-table td:nth-child(1) { grid-area: 2 / 1; font-size: 12.5px; color: #5E6A82; }
    .al-table td:nth-child(6) { grid-area: 2 / 2; }
    .al-table td:nth-child(6) small { display: none; }
    .al-table td:nth-child(3), .al-table td:nth-child(4), .al-table td:nth-child(7) { display: none; }

    /* Repayment schedule: number and date | total  /  status | paid */
    .lv-sched td:nth-child(1) { display: none; }
    .lv-sched td:nth-child(2) { grid-area: 1 / 1; font-weight: 800; }
    .lv-sched td:nth-child(5) { grid-area: 1 / 2; }
    .lv-sched td:nth-child(7) { grid-area: 2 / 1; }
    .lv-sched td:nth-child(6) { grid-area: 2 / 2; font-size: 12.5px; color: #5E6A82; }
    .lv-sched td:nth-child(3), .lv-sched td:nth-child(4) { display: none; }

    /* Payments: what | amount  /  date, how | receipt link */
    .lv-pay td:nth-child(3) { grid-area: 1 / 1; font-weight: 800; }
    .lv-pay td:nth-child(5) { grid-area: 1 / 2; }
    .lv-pay td:nth-child(1) { grid-area: 2 / 1; font-size: 12.5px; color: #5E6A82; }
    .lv-pay td:nth-child(2) { grid-area: 2 / 2; font-size: 12.5px; color: #5E6A82; }
    .lv-pay td:nth-child(4) { grid-area: 3 / 1; font-size: 12.5px; color: #5E6A82; }
    .lv-pay td:nth-child(7) { grid-area: 3 / 2; text-align: right; justify-self: end; }
    .lv-pay td:nth-child(6) { display: none; }

    /* Member: accounts and loans */
    .mp-acc-table td:nth-child(2) { grid-area: 1 / 1; font-weight: 800; }
    .mp-acc-table td:nth-child(3) { grid-area: 1 / 2; }
    .mp-acc-table td:nth-child(1) { grid-area: 2 / 1; font-size: 12.5px; }
    .mp-acc-table td:nth-child(6) { grid-area: 2 / 2; }
    .mp-acc-table td:nth-child(4), .mp-acc-table td:nth-child(5) { display: none; }

    .mp-loan-table td:nth-child(1) { grid-area: 1 / 1; }
    .mp-loan-table td:nth-child(4) { grid-area: 1 / 2; }
    .mp-loan-table td:nth-child(2) { grid-area: 2 / 1; font-size: 12.5px; color: #5E6A82; }
    .mp-loan-table td:nth-child(5) { grid-area: 2 / 2; font-size: 12.5px; }
    .mp-loan-table td:nth-child(3), .mp-loan-table td:nth-child(6) { display: none; }

    .ln-scroll.is-x:has(.al-table, .lv-sched, .lv-pay), .mp-scroll:has(.mp-acc-table, .mp-loan-table) { overflow: visible; }

    /* loans pages: figures two across, money summary first, lighter cards */
    .ln-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    .ln-kpi { padding: 12px; border-radius: 14px; gap: 2px; }
    .ln-kpi span { font-size: 11.5px; }
    .ln-kpi b { font-size: 18px; }
    .ln-kpi small { font-size: 11px; }
    .ln-aging { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ln-aging > div { padding: 10px 12px; }
    .ln-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ln-tabs button { flex-shrink: 0; }
    .ln-list-top { flex-direction: column; align-items: stretch; }
    .ln-list-top > * { min-width: 0; max-width: 100%; }
    .ln, .ln-card, .ln-main, .ln-side { min-width: 0; max-width: 100%; }
    .ln-card { border-radius: 16px; }

    .ln-split { flex-direction: column; align-items: stretch; }
    .ln-split > .ln-side { order: -1; }
    .ln-hero { border-radius: 16px; padding: 16px; }
    .ln-hero > b { font-size: 26px; }

    /* on the application form the summary stays after the form, and Save stays in reach */
    .ln-split:has(.ln-choices) > .ln-side { order: 0; }
    .ln-side .ln-btn.is-primary.is-block {
        position: sticky;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        z-index: 5;
        min-height: 52px;
        box-shadow: 0 10px 24px -8px rgba(109, 40, 217, .55);
    }

    /* member profile: compact top, tabs scroll */
    .mp-hero { padding: 16px; border-radius: 16px; gap: 12px; box-shadow: none; }
    .mp-avatar { width: 56px; height: 56px; border-radius: 50%; font-size: 19px; }
    .mp-who h2 { font-size: 20px; }
    .mp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
    .mp-tabs button { flex-shrink: 0; min-height: 38px; padding: 0 12px; font-size: 13px; }
    .mp-accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .mp-account { padding: 12px; border-radius: 14px; }
    .mp-account b { font-size: 17px; }
    .mp-account small { font-size: 11.5px; }
}