/*
 * LBRank — single-canvas layout for every top-level screen.
 * Unbox presentational wrappers but RETAIN visual affordances for interactive
 * controls, navigation, health of data, and the finance table/editor.
 * Loaded after home-flat.css and theme-assignments.css so prior glass styles
 * don't leak back into the uncluttered layout.
 */

/* iPhone safe-area: existing ios-webkit override sets --app-top-safe-space
   to 0, which could let page titles sit under the status bar. Always
   reserve at least 54px; standalone retains its larger PWA allowance. */
:root {
    --flat-screen-top: max(
        54px,
        calc(env(safe-area-inset-top, 0px) + 22px),
        var(--app-top-safe-space, 0px)
    );
    --flat-divider: rgba(170, 195, 229, .17);
    --flat-divider-soft: rgba(170, 195, 229, .105);
    --flat-control-bg: rgba(var(--theme-background-rgb, 23, 81, 143), .11);
    --flat-control-border: rgba(166, 195, 235, .22);
}
.app-container {
    padding-top: calc(var(--flat-screen-top) + 12px) !important;
    scroll-padding-top: calc(var(--flat-screen-top) + 12px) !important;
}
#rank-tab .rank-container {
    padding-top: 11px !important;
}
/* Move the Dashboard shortcut below the complete emblem/progress ring.
   Earlier -8px margin physically pulled it up into the emblem. */
#rank-tab .rank-content > #rankLifeDashboardButton {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 24px 0 13px !important;
    transform: none;
    min-height: 48px;
}
#rank-tab .rank-content > #rankLifeDashboardButton:active {
    transform: scale(.985) !important;
}
@media (max-width: 420px) {
    #rank-tab .rank-content > #rankLifeDashboardButton {
        margin-top: 26px !important;
        margin-bottom: 14px !important;
    }
}

/* SAME PAGE GUTTERS — all visible primary destinations. */
#graph-tab .graph-container,
#finance-tab .finance-container,
#badges-tab .badges-container,
#legend-tab .legend-container,
#info-tab .info-hub-container,
#settings-tab .settings-container {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 10px clamp(12px, 3.6vw, 22px)
        max(22px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}
#graph-tab .graph-container,
#finance-tab .finance-container,
#badges-tab .badges-container,
#legend-tab .legend-container,
#info-tab .info-hub-container,
#settings-tab .settings-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
#graph-tab .app-page-header,
#finance-tab .app-page-header,
#badges-tab .app-page-header,
#legend-tab .app-page-header,
#info-tab .app-page-header,
#settings-tab .app-page-header {
    padding: 0 0 13px !important;
    margin: 0 0 15px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flat-divider) !important;
    box-shadow: none !important;
    min-width: 0 !important;
}
#graph-tab .app-page-header::before,
#graph-tab .app-page-header::after,
#finance-tab .app-page-header::before,
#finance-tab .app-page-header::after,
#badges-tab .app-page-header::before,
#badges-tab .app-page-header::after,
#legend-tab .app-page-header::before,
#legend-tab .app-page-header::after,
#info-tab .app-page-header::before,
#info-tab .app-page-header::after,
#settings-tab .app-page-header::before,
#settings-tab .app-page-header::after {
    content: none !important;
}
#graph-tab .app-page-header h2,
#finance-tab .app-page-header h2,
#badges-tab .app-page-header h2,
#legend-tab .app-page-header h2,
#info-tab .app-page-header h2,
#settings-tab .app-page-header h2 {
    line-height: 1.18 !important;
    overflow: visible !important;
    padding-block: 2px !important;
}
/* Override the Info screen's viewport-locked nine equal-height card rows;
   each entry can now grow naturally and be scrolled as needed. */
#info-tab.tab-content.active,
#info-tab .info-hub-container {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}
#info-tab .info-hub-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
#info-tab .info-card-grid {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(58px, auto) !important;
    align-content: start !important;
    gap: 0 !important;
    min-height: 0 !important;
}
#info-tab .info-topic-card {
    box-sizing: border-box !important;
    min-height: 60px !important;
    height: auto !important;
    padding: 10px 8px !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
#info-tab .info-topic-card:active,
#info-tab .info-topic-card:focus-visible {
    background: var(--flat-control-bg) !important;
}
#info-tab .info-topic-card .info-topic-icon {
    background: transparent !important;
    box-shadow: none !important;
}
#info-tab .info-hub-disclaimer {
    margin-top: 12px !important;
    padding-inline: 4px !important;
}

/* PROGRESS — graph and forecasts are open sections with spacing/dividers.
   Keep the graph canvas, graph modes, progress fill and data-point colours. */
#graph-tab .graph-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
#graph-tab .chart-wrapper,
#graph-tab .goal-forecast-panel,
#graph-tab .history-section,
#graph-tab .graph-info,
#graph-tab .personal-records-section,
#graph-tab .goal-forecast-grid > .goal-forecast-card {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
#graph-tab .chart-wrapper::before,
#graph-tab .chart-wrapper::after,
#graph-tab .goal-forecast-panel::before,
#graph-tab .goal-forecast-panel::after,
#graph-tab .history-section::before,
#graph-tab .history-section::after,
#graph-tab .graph-info::before,
#graph-tab .graph-info::after {
    content: none !important;
}
#graph-tab .chart-wrapper {
    padding: 0 0 14px !important;
    margin: 0 !important;
    overflow: visible !important;
    border-bottom: 1px solid var(--flat-divider) !important;
    min-width: 0;
}
#graph-tab .chart-wrapper .chart-canvas-area {
    background: transparent !important;
    box-shadow: none !important;
}
#graph-tab .goal-forecast-panel,
#graph-tab .history-section,
#graph-tab .personal-records-section {
    padding: 3px 0 15px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--flat-divider) !important;
    overflow: visible !important;
}
#graph-tab .goal-forecast-grid {
    column-gap: 15px !important;
    row-gap: 8px !important;
}
#graph-tab .goal-forecast-grid > .goal-forecast-card {
    min-width: 0 !important;
    padding: 11px 6px !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
}
#graph-tab .goal-forecast-grid > button.goal-forecast-card:active {
    background: var(--flat-control-bg) !important;
}
#graph-tab .history-list .rank-history-item,
#graph-tab .history-list .history-item {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    border-radius: 0 !important;
    padding-inline: 3px !important;
}
#graph-tab .life-progress-recap .life-recap-hero,
#graph-tab .life-progress-recap .life-month-recap-card,
#graph-tab .personal-records-section .life-record-grid > div {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    border-radius: 0 !important;
}
#graph-tab .personal-records-section .life-record-grid > div::before {
    content: none !important;
}

/* BADGES — achievements become a single open grid, with only understated
   dividers to distinguish entries; locked/unlocked status stays intact. */
#badges-tab .milestones-section,
#badges-tab .milestone-group,
#badges-tab .milestone-grid,
#badges-tab .milestone-badge {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
#badges-tab .milestones-section,
#badges-tab .milestone-group {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
#badges-tab .milestone-badge {
    border: none !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    border-radius: 0 !important;
    padding: 12px 7px !important;
    overflow: visible !important;
}
#badges-tab .milestone-grid {
    gap: 8px 12px !important;
}
#badges-tab .milestone-icon {
    background: var(--flat-control-bg) !important;
    box-shadow: none !important;
}
#badges-tab .milestone-group-heading {
    padding-block: 12px !important;
    border-bottom: 1px solid var(--flat-divider) !important;
}

/* SETTINGS — remove each glass panel, keep the title row separators and
   clear toggles/inputs. Dropdowns are still expandable exactly as before. */
#settings-tab .settings-container {
    gap: 0 !important;
}
#settings-tab .settings-card,
#settings-tab .settings-dropdown-card,
#settings-tab .settings-subsection,
#settings-tab .setting-card,
#settings-tab .settings-section {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
#settings-tab .settings-card,
#settings-tab .settings-dropdown-card {
    padding: 15px 2px 19px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--flat-divider) !important;
}
#settings-tab .settings-card::before,
#settings-tab .settings-card::after,
#settings-tab .settings-dropdown-card::before,
#settings-tab .settings-dropdown-card::after {
    content: none !important;
}
#settings-tab .settings-dropdown-summary {
    padding: 5px 3px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#settings-tab .settings-dropdown-body {
    margin-top: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
#settings-tab .settings-subsection {
    padding: 14px 2px !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
}
#settings-tab .setting-row {
    border-top-color: var(--flat-divider-soft) !important;
}
#settings-tab input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
#settings-tab select {
    background-color: var(--flat-control-bg) !important;
    border: 1px solid var(--flat-control-border) !important;
}

/* THEME PICKER — one scrolling canvas with expandable group rows.
   Preserve colour swatches, theme inputs and the selected-emblem outline. */
#legend-tab .theme-dropdown,
#legend-tab .ui-theme-control-group,
#legend-tab .general-theme-section,
#legend-tab .rank-themes-section,
#legend-tab .rank-theme-card,
#legend-tab .legend-card,
#legend-tab .theme-option-card,
#legend-tab .other-themes-section {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
#legend-tab .theme-dropdown {
    margin: 0 0 10px !important;
    border-bottom: 1px solid var(--flat-divider) !important;
    overflow: visible !important;
}
#legend-tab .theme-dropdown-summary {
    padding: 14px 4px !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
}
#legend-tab .theme-dropdown-content {
    padding: 10px 3px !important;
    background: transparent !important;
    box-shadow: none !important;
}
#legend-tab .ui-theme-control-group {
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    margin: 0 !important;
    padding: 9px 0 !important;
}
#legend-tab .ui-theme-control-group > summary {
    background: transparent !important;
    box-shadow: none !important;
}
#legend-tab .legend-card,
#legend-tab .rank-theme-card,
#legend-tab .theme-option-card {
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    padding: 9px 4px !important;
}
#legend-tab .theme-quick-action,
#legend-tab .general-theme-reset,
#legend-tab .ui-theme-section-reset,
#legend-tab .theme-option,
#legend-tab .rank-theme-row button {
    /* Interactive controls remain visibly actionable, not plain text. */
    border-color: var(--flat-control-border) !important;
}
#legend-tab .theme-map-entry {
    border: 0 !important;
    border-bottom: 1px solid var(--flat-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* BUDGET/MORTGAGE — less boxed, but MORE structured than other screens.
   Section headlines, alternating rows and muted rules protect readability.
   Monetary values, good/bad colours, fields and active selection remain. */
#finance-tab .finance-container {
    display: grid !important;
    align-content: start !important;
    gap: 14px !important;
}
#finance-tab .finance-subtabs {
    border: none !important;
    border-bottom: 1px solid var(--flat-divider) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    gap: 8px !important;
    padding: 0 0 8px !important;
}
#finance-tab .finance-subtab {
    border-radius: 10px !important;
    min-height: 44px !important;
}
/* Give the active Budget/Mortgage segment a thin underline and muted tint. */
#finance-tab .finance-subtab.active,
#finance-tab .finance-subtab[aria-selected="true"] {
    border-bottom: 2px solid var(--theme-primary, #00D4FF) !important;
    background: var(--flat-control-bg) !important;
}
#finance-tab .finance-pane {
    gap: 14px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#finance-tab .finance-pane-heading {
    margin: 3px 0 0 !important;
    padding: 2px 0 12px !important;
    border-bottom: 1px solid var(--flat-divider) !important;
}
#finance-tab .finance-tool-body,
#finance-tab .budget-tool,
#finance-tab .budget-saved-view,
#finance-tab .budget-edit-form,
#finance-tab .mortgage-tool {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}
#finance-tab .budget-editor-card,
#finance-tab .budget-income-summary,
#finance-tab .budget-income-block,
#finance-tab .budget-balance-card,
#finance-tab .budget-table,
#finance-tab .budget-mortgage-snapshot,
#finance-tab .budget-rate-sensitivity,
#finance-tab .mortgage-summary-strip,
#finance-tab .mortgage-form,
#finance-tab .mortgage-detail-grid {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-width: 0 !important;
}
#finance-tab .budget-editor-card,
#finance-tab .budget-income-block,
#finance-tab .budget-income-summary,
#finance-tab .mortgage-summary-strip,
#finance-tab .mortgage-form {
    padding: 12px 2px !important;
    border-bottom: 1px solid var(--flat-divider) !important;
}
#finance-tab .budget-saved-view > *,
#finance-tab .budget-edit-form > * {
    min-width: 0;
}
#finance-tab .budget-section-heading,
#finance-tab .budget-view-toolbar,
#finance-tab .budget-rate-sensitivity-head {
    border-bottom: 1px solid var(--flat-divider) !important;
    padding-bottom: 10px !important;
    margin-bottom: 3px !important;
}
#finance-tab .budget-income-summary,
#finance-tab .budget-mortgage-snapshot-grid > div,
#finance-tab .mortgage-detail-grid > div {
    border-bottom: 1px solid var(--flat-divider-soft) !important;
}
#finance-tab .budget-expense-editor {
    gap: 0 !important;
}
#finance-tab .budget-expense-edit-row {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    border-radius: 0 !important;
    padding: 12px 3px !important;
    gap: 9px !important;
}
/* Distinguish alternating expense rows without making individual cards. */
#finance-tab .budget-table {
    border-bottom: 1px solid var(--flat-divider) !important;
    overflow: hidden !important;
}
#finance-tab .budget-table-head {
    background: rgba(var(--theme-background-rgb, 23, 81, 143), .19) !important;
    border-bottom: 1px solid var(--flat-divider) !important;
    padding-block: 10px !important;
}
#finance-tab .budget-table-row {
    border-top: 0 !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    padding-block: 12px !important;
}
#finance-tab .budget-table-row:nth-child(even):not(.budget-total-row) {
    background: rgba(var(--theme-background-rgb, 23, 81, 143), .07) !important;
}
#finance-tab .budget-total-row {
    border-top: 1px solid var(--flat-divider) !important;
    border-bottom: 1px solid var(--flat-divider) !important;
    background: rgba(var(--theme-primary-rgb, 0, 212, 255), .09) !important;
}
#finance-tab .budget-balance-card {
    padding: 13px 6px !important;
    border-top: 1px solid var(--flat-divider) !important;
    border-bottom: 1px solid var(--flat-divider) !important;
}
/* Keep favourable/unfavourable budget balances visibly distinct. */
#finance-tab .budget-balance-card.remaining {
    border-left: 3px solid #61e3a0 !important;
    background: rgba(97,227,160,.065) !important;
}
#finance-tab .budget-balance-card.over {
    border-left: 3px solid #ff7373 !important;
    background: rgba(255,115,115,.065) !important;
}
#finance-tab .budget-income-fields input:not([type="radio"]),
#finance-tab .budget-income-fields select,
#finance-tab .budget-expense-edit-row input:not([type="radio"]),
#finance-tab .budget-expense-edit-row select,
#finance-tab .mortgage-form input,
#finance-tab .mortgage-form select {
    background: var(--flat-control-bg) !important;
    border: 1px solid var(--flat-control-border) !important;
    border-radius: 9px !important;
    min-height: 42px !important;
}
#finance-tab .budget-expense-edit-row input:not([type="radio"]),
#finance-tab .budget-expense-edit-row select,
#finance-tab .mortgage-form input,
#finance-tab .mortgage-form select {
    font-size: 16px !important;
}
/* Mortgage heading, inputs and payment breakouts have room to breathe. */
#finance-tab .mortgage-summary-strip,
#finance-tab .mortgage-form {
    padding: 12px 4px !important;
}
#finance-tab .mortgage-detail-grid {
    gap: 0 !important;
}
#finance-tab .mortgage-detail-grid > div {
    padding: 13px 4px !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
}
#finance-tab .mortgage-detail-grid > div:nth-child(even) {
    background: rgba(var(--theme-background-rgb, 23, 81, 143), .055) !important;
}
#finance-tab .finance-buyer-section {
    padding: 16px 2px 8px !important;
    margin-top: 9px !important;
    border-top: 1px solid var(--flat-divider) !important;
}
#finance-tab .finance-buyer-section .life-buyer-meter {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
#finance-tab .finance-buyer-section .life-buyer-factors > div,
#finance-tab .finance-buyer-section .life-buyer-factor {
    border-bottom: 1px solid var(--flat-divider-soft) !important;
}

/* DASHBOARD INNER SECTIONS — keep the outer modal panel and all input fields
   distinct; unbox only presentation sections, number rows and score groups. */
#infoDetailModal.life-dashboard-open .life-theme-hero,
#infoDetailModal.life-dashboard-open .life-overview-grid > div,
#infoDetailModal.life-dashboard-open .life-overview-headline,
#infoDetailModal.life-dashboard-open .life-homes-overview,
#infoDetailModal.life-dashboard-open .life-buyer-meter,
#infoDetailModal.life-dashboard-open .life-change-list,
#infoDetailModal.life-dashboard-open .life-recap-hero,
#infoDetailModal.life-dashboard-open .life-recap-market,
#infoDetailModal.life-dashboard-open .life-record-grid > div {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
#infoDetailModal.life-dashboard-open #lifeHub .life-theme-hero {
    padding-inline: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flat-divider) !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Earlier hard-coded user selections targeted the first history chip with
   two IDs and a .current class. Explicitly supersede those boxed surfaces. */
#infoDetailModal.life-dashboard-open #lifeWhatChanged .life-number-history-point,
#infoDetailModal.life-dashboard-open #lifeWhatChanged .life-number-history-point.current {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#infoDetailModal.life-dashboard-open .life-theme-hero::before,
#infoDetailModal.life-dashboard-open .life-theme-hero::after {
    content: none !important;
}
#infoDetailModal.life-dashboard-open .life-change-row {
    border: none !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
#infoDetailModal.life-dashboard-open .life-number-history-point {
    border: 0 !important;
    border-bottom: 1px solid var(--flat-divider-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#infoDetailModal.life-dashboard-open .life-record-grid > div {
    border-bottom: 1px solid var(--flat-divider-soft) !important;
}

/* Explicitly preserve readable focus states when surface cards disappear. */
#info-tab .info-topic-card:focus-visible,
#graph-tab .goal-last-week-low-card:focus-visible,
#settings-tab .settings-dropdown-summary:focus-visible,
#legend-tab .theme-dropdown-summary:focus-visible {
    outline: 2px solid var(--theme-primary, #00D4FF) !important;
    outline-offset: 2px !important;
}
@media (max-width: 420px) {
    #graph-tab .graph-container,
    #finance-tab .finance-container,
    #badges-tab .badges-container,
    #legend-tab .legend-container,
    #info-tab .info-hub-container,
    #settings-tab .settings-container {
        padding-inline: 12px !important;
    }
    #graph-tab .goal-forecast-grid { column-gap: 9px !important; }
    #finance-tab .budget-table-row { padding-inline: 5px !important; }
}