:root {
    --bg: #bcc1c8;          /* light mode: page a mid cool grey; nothing is pure white */
    --surface: #d2d6dc;
    --text: #161c25;
    --text-muted: #3c4552;
    --border: #a7aeb7;
    --accent: #164d92;
    --accent-text: #eceef1;
    --on-color: #eceef1;     /* light text on coloured backgrounds: soft, not pure white */
    --gain: #08542f;
    --loss: #8a1c2c;
    --gain-bg: #b2d0be;
    --loss-bg: #d8bac0;
    --info-bg: #b4c4d8;
    --action: #6a3e00;
    --action-bg: #d9c9aa;
    --badge-bg: #e8a33a;
    --block-bg: #c6cbd2;
    --block-alt-bg: #d0d4da;
    /* Stock / debt summary bands: blue with light text. */
    --summary-bg: #164d92;     /* stock / debt summary bands: the same blue as the form buttons */
    --topbar-bg: #3a6ea5;      /* the top band: steel blue, in light and dark mode */
    --summary-border: #0f3b72;
    --summary-text: #eceef1;
    --summary-muted: #c9d8ee;
    --summary-gain: #8ff0b8;
    --summary-loss: #ffc2c9;
    --summary-up: #8ff0b8;
    --summary-down: #ffc2c9;
    --price-up: #00552a;
    --price-down: #930017;
    --radius: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color-scheme: light dark;
}

/* Dark colours: used when the visitor picks Dark, or picks System (the default) and their
   device is in dark mode. The theme switch sets data-theme on <html>; no data-theme = System. */
:root[data-theme="dark"] {
    --bg: #12161c;
    --surface: #1b2129;
    --text: #e6eaf0;
    --text-muted: #9aa5b3;
    --border: #2d3540;
    --accent: #4b95ec;
    --topbar-bg: #3a6ea5;
    --gain: #3cc48d;
    --loss: #f0687a;
    --gain-bg: #163327;
    --loss-bg: #3a1c22;
    --info-bg: #1a2a3f;
    --action: #f2b44c;
    --action-bg: #3a2c12;
    --badge-bg: #f2b44c;
    --on-color: #ffffff;
    --block-bg: #12161c;
    --block-alt-bg: #1c222b;
    --summary-bg: #1c3d66;
    --summary-border: #2a5a94;
    --summary-text: #e6eaf0;
    --summary-muted: #a9bfdc;
    --summary-gain: #5fe0a6;
    --summary-loss: #ff9aa6;
    --summary-up: #2bff88;
    --summary-down: #ff8a96;
    --price-up: #2bff88;
    --price-down: #ff3b4e;
    color-scheme: only dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #12161c;
        --surface: #1b2129;
        --text: #e6eaf0;
        --text-muted: #9aa5b3;
        --border: #2d3540;
        --accent: #4b95ec;
    --topbar-bg: #3a6ea5;
        --gain: #3cc48d;
        --loss: #f0687a;
        --gain-bg: #163327;
        --loss-bg: #3a1c22;
        --info-bg: #1a2a3f;
        --action: #f2b44c;
        --action-bg: #3a2c12;
        --badge-bg: #f2b44c;
        --on-color: #ffffff;
        --block-bg: #12161c;
        --block-alt-bg: #1c222b;
        --summary-bg: #1c3d66;
        --summary-border: #2a5a94;
        --summary-text: #e6eaf0;
        --summary-muted: #a9bfdc;
        --summary-gain: #5fe0a6;
        --summary-loss: #ff9aa6;
        --summary-up: #2bff88;
        --summary-down: #ff8a96;
        --price-up: #2bff88;
        --price-down: #ff3b4e;
    }
}
:root[data-theme="light"] { color-scheme: only light; } /* "only": don't let the browser auto-darken it */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

a { color: var(--accent); }

h1 { font-size: 1.6rem; margin: 0 0 0.25rem; }
h2 { font-size: 1.15rem; margin: 0 0 1rem; }
h3.group-title { font-size: 0.95rem; color: var(--text-muted); margin: 1rem 0 0.5rem; }

.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }
.note { color: var(--text-muted); font-size: 0.9rem; margin-top: 1rem; }

/* Top bar */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    /* Stays at the top while the page scrolls, so the menu is always in reach. */
    position: sticky;
    top: 0;
    z-index: 40;
}
/* Jumps to a section (links, "Continue to step 2"...) stop just below the bar instead of under it.
   --topbar-height is kept up to date by nav.js (the bar is taller when it wraps on narrow screens). */
html { scroll-padding-top: calc(var(--topbar-height, 4rem) + 0.75rem); }
.brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--text); }
.topbar nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.topbar nav a { text-decoration: none; color: var(--text-muted); padding: 0.25rem 0; }
.topbar nav a.active { color: var(--text); border-bottom: 2px solid var(--accent); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.logout { display: flex; align-items: center; gap: 0.75rem; }

.container { max-width: 1150px; margin: 0 auto; padding: 1.5rem 16px 2rem; }
.footer { text-align: center; font-size: 0.8rem; padding: 1rem 16px 2rem; }

.page-head { margin-bottom: 1.25rem; }

/* Panels */
.widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.widget.empty { text-align: center; padding: 2.5rem 1.5rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; }
.card-label { font-size: 0.8rem; color: var(--text-muted); }
.card-value { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.card-sub { font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.gain { color: var(--gain); }
.loss { color: var(--loss); }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.chart-box { position: relative; height: 300px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tag { font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 4px; }
.tag-buy { background: var(--gain-bg); color: var(--gain); }
.tag-sell { background: var(--loss-bg); color: var(--loss); }
.badge { font-size: 0.7rem; padding: 0.05rem 0.35rem; border-radius: 4px; background: var(--info-bg); color: var(--text-muted); }

/* Forms */
.form { display: flex; flex-direction: column; gap: 0.9rem; }
/* Label text and its hint, e.g. "Fees (optional)", share the first line; the field fills the line below.
   Fields sit at the bottom of the label so a row of fields lines up even if one label wraps. */
.form label {
    display: grid; grid-template-columns: auto 1fr; align-items: baseline; align-content: end;
    column-gap: 0.35rem; row-gap: 0.3rem; font-size: 0.9rem; font-weight: 500;
}
.form label > input, .form label > select, .form label > textarea { grid-column: 1 / -1; }
.form label.checkbox { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem 1rem; }
.form-grid .span-2 { grid-column: span 2; }
.form-actions { display: flex; align-items: flex-end; }
.narrow-form { max-width: 380px; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select {
    font: inherit;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input.narrow { width: 5rem; }

.button {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-text);
    text-decoration: none;
    cursor: pointer;
}
.button-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.link-button { font: inherit; background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; }
.link-button.danger { color: var(--loss); }
form.inline { display: inline; }

.layout-table { max-width: 520px; }
.layout-table td { vertical-align: middle; }

.auth-box {
    max-width: 400px;
    margin: 3rem auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
}

.alert { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.alert ul { margin: 0; padding-left: 1.2rem; }
.alert-success { background: var(--gain-bg); color: var(--gain); }
.alert-error { background: var(--loss-bg); color: var(--loss); }
.alert-info { background: var(--info-bg); color: var(--text); }

@media (max-width: 720px) {
    .topbar { padding: 0.75rem 16px; gap: 0.75rem; }
    .topbar-right { margin-left: 0; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2 { grid-column: auto; }
    .auth-box { margin: 1.5rem auto; padding: 1.5rem; }
    .widget { padding: 1rem; }
}

/* Two-factor authentication */
.widget.highlight { border-color: var(--accent); }
.qr { width: 220px; height: 220px; background: #eceef1; border-radius: 8px; padding: 6px; margin: 0.5rem 0 1rem; }
.qr svg { width: 100%; height: 100%; display: block; }
code.secret { font-size: 0.95rem; letter-spacing: 0.05em; color: var(--text); word-break: break-all; }
.code-input { font-size: 1.2rem; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.recovery-codes {
    list-style: none; padding: 1rem; margin: 1rem 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem;
    font-family: ui-monospace, Menlo, monospace; font-size: 1.05rem;
    background: var(--bg); border-radius: 8px;
}
.danger-button { background: var(--loss); }

/* Sign in with Google */
.google-button {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.6rem 1rem; border: 1px solid var(--border); border-radius: 6px;
    background: #eceef1; color: #1f1f1f; font-weight: 500; text-decoration: none;
}
.google-button:hover { background: #e1e3e7; }
.google-button.inline-google { display: inline-flex; }
.divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.1rem 0; color: var(--text-muted); font-size: 0.85rem; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* Expandable stock groups (Transactions page, dashboard Holdings) */
.widget-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
table.grouped tbody.group { border-bottom: 1px solid var(--border); }
table.grouped tr.summary td { border-bottom: none; }
table.grouped tr.child td { border-bottom: none; background: var(--block-bg); font-size: 0.88rem; }
table.grouped tr.child.block-alt td { background: var(--block-alt-bg); }
table.grouped tr.child:last-child td { padding-bottom: 0.8rem; }
table.grouped td.indent { padding-left: 2.6rem; white-space: nowrap; }
.toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; margin-right: 0.35rem; padding: 0;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface); color: var(--text-muted); cursor: pointer; vertical-align: middle;
}
.toggle:hover { color: var(--accent); border-color: var(--accent); }
.toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chevron {
    width: 0.45rem; height: 0.45rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform 0.15s ease; margin-left: -2px;
}
tbody.group.open .chevron { transform: rotate(45deg); margin: -3px 0 0; }
tbody.group.open .toggle { color: var(--accent); border-color: var(--accent); }
.holding-name { margin-left: 2.3rem; }

/* Selling from a specific purchase */
.sold-link {
    margin-left: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
    color: var(--action); text-decoration: none;
    border: 1px solid var(--action); border-radius: 4px; padding: 0.05rem 0.4rem;
}
.sold-link:hover, .sold-link:focus-visible { background: var(--action); color: var(--surface); }
table.grouped tr.sale-row td { font-size: 0.85rem; }
table.grouped tr.sale-row td.indent { padding-left: 3.6rem; }
.branch { color: var(--text-muted); margin-right: 0.35rem; }
.widget.sell-mode { border-color: var(--loss); box-shadow: 0 0 0 3px var(--loss-bg); scroll-margin-top: 1rem; }
.sell-banner a { margin-left: 0.5rem; }
input[readonly] { opacity: 0.75; cursor: not-allowed; }
@keyframes row-flash { from { background: var(--info-bg); } }
table.grouped tr.flash td { animation: row-flash 2.5s ease-out; }

/* Same height for every single-line field (date pickers are otherwise a little taller). */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select { height: 2.6rem; }

/* Each purchase and the sales made from it form one block, separated by a line. */
table.grouped tr.child.block-start td { border-top: 1px solid var(--border); }

/* Consolidated (summary) row of each stock: blue, so it stands apart from the trade rows. */
table.grouped tr.summary td { background: var(--summary-bg); border-top: 1px solid var(--summary-border); }
/* Text, gains and losses inside the bands use colours that read well on maroon. */
table.grouped tr.summary {
    --text: var(--summary-text);
    --text-muted: var(--summary-muted);
    --gain: var(--summary-gain);
    --loss: var(--summary-loss);
    --price-up: var(--summary-up);
    --price-down: var(--summary-down);
    color: var(--text);
}

/* Current price vs the previous day's close: bright green when up, bright red when down. */
.summary-price { margin: 0.2rem 0 0 2.3rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-move { font-weight: 600; }
.price-move .price-now { font-weight: 700; }
.price-move.up { color: var(--price-up); }
.price-move.down { color: var(--price-down); }
.price-move.flat { color: var(--text-muted); }

/* Collapsible entry form: no gap under the heading while it's closed. */
#entry .widget-head h2 { margin-bottom: 0; }
#entry-body { margin-top: 1rem; }

/* Dashboard Holdings: current price beside the symbol. */
.symbol-line { white-space: nowrap; }
.symbol-price { margin-left: 0.5rem; font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Keep the expand icon, symbol and price on one line; the company name below may wrap. */
#holdings-table tr.summary td:first-child { white-space: nowrap; }
#holdings-table .holding-name { white-space: normal; }

/* Day-range hint beside "Price per share": amber, informational only. */
.price-hint {
    justify-self: start; min-width: 0; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--action); background: var(--action-bg);
    border: 1px solid var(--action); border-radius: 999px; padding: 0.05rem 0.55rem;
}
.price-hint[data-state="loading"] { opacity: 0.7; font-weight: 500; }
.price-hint[data-state="none"] { color: var(--text-muted); background: transparent; border-color: var(--border); font-weight: 500; }

/* Target price */
.target-badge {
    display: inline-block; margin: 0 0.35rem 0.2rem 0; padding: 0.05rem 0.5rem;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
    color: #1c1405; background: var(--badge-bg); border-radius: 4px; cursor: help;
}
tr.summary .target-badge { margin-left: 0.4rem; vertical-align: middle; }
.target-pending { display: inline-block; margin-right: 0.35rem; color: var(--action); font-weight: 600; }
.form label.target-field[hidden] { display: none; }

/* Inline target editor */
.target-edit-button { font-size: 0.8rem; color: var(--action); margin-right: 0.35rem; }
.target-edit { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.target-edit[hidden], .target-view[hidden] { display: none; }
.target-edit input[name="target_price"] { width: 6.5rem; height: 2rem; padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.button-small { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

/* Symbol suggestions */
.symbol-field { position: relative; }
.symbol-suggestions {
    position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 0.25rem 0 0; padding: 0.25rem 0;
    list-style: none; max-height: 18rem; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.symbol-suggestions[hidden] { display: none; }
.symbol-suggestions [role="option"] {
    display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); column-gap: 0.6rem; row-gap: 0.05rem;
    padding: 0.45rem 0.75rem; cursor: pointer; font-size: 0.88rem;
}
.symbol-suggestions [role="option"] strong { grid-row: span 2; align-self: center; overflow: hidden; text-overflow: ellipsis; }
.symbol-suggestions .symbol-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.symbol-suggestions .symbol-meta { color: var(--text-muted); font-size: 0.76rem; }
.symbol-suggestions [role="option"]:hover,
.symbol-suggestions [role="option"][aria-selected="true"] { background: var(--info-bg); }
.symbol-suggestions .symbol-note { padding: 0.5rem 0.75rem; color: var(--text-muted); font-size: 0.85rem; }

/* Dashboard: main content with a news column on the right (below it on narrow screens). */
.container.wide { max-width: 1440px; }
.dash-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) {
    .dash-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .dash-news { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}
.dash-news {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.1rem 1rem;
}
.dash-news h2 { margin-bottom: 0.75rem; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.news-card {
    border: 2px solid var(--border); border-radius: 8px; padding: 0.7rem 0.8rem;
    background: var(--bg);
}
.news-card.news-positive { border-color: var(--gain); }
.news-card.news-negative { border-color: var(--loss); }
.news-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.news-symbols { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.news-symbol { font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 4px; background: var(--info-bg); color: var(--text); }
.news-tone { font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.news-positive .news-tone { color: var(--gain); }
.news-negative .news-tone { color: var(--loss); }
.news-title { display: block; color: var(--text); font-weight: 600; font-size: 0.9rem; line-height: 1.35; text-decoration: none; }
.news-title:hover, .news-title:focus-visible { color: var(--accent); text-decoration: underline; }
.news-meta { margin-top: 0.35rem; color: var(--text-muted); font-size: 0.75rem; }
.news-note { margin: 0.9rem 0 0; color: var(--text-muted); font-size: 0.72rem; }

/* Dashboard market switch: one market at a time. */
.market-switch { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.25rem; }
.market-tab {
    flex: 1 1 240px; max-width: 420px; display: flex; align-items: center; gap: 0.8rem;
    padding: 0.8rem 1.1rem; border-radius: var(--radius); text-decoration: none; color: var(--text);
    background: var(--surface); border: 2px solid var(--border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.market-tab:hover { border-color: var(--accent); }
.market-tab.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--info-bg); background: var(--info-bg); }
.market-flag { font-size: 1.9rem; line-height: 1; }
.market-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.market-name { font-weight: 700; font-size: 1.05rem; }
.market-code { font-weight: 600; font-size: 0.75rem; color: var(--text-muted); margin-left: 0.2rem; }
.market-figures { font-size: 0.88rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.market-tab.active .market-figures { color: var(--text); }

/* Section headings that expand / collapse their section */
.heading-toggle {
    font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0;
    text-align: left; cursor: pointer;
}
.heading-toggle:hover { color: var(--accent); }
.heading-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Download CSV next to Expand all */
.story-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.download-button { display: inline-flex; align-items: center; gap: 0.3rem; text-decoration: none; white-space: nowrap; }

/* CAGR calculator */
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1000px) {
    .calc-layout { grid-template-columns: 340px minmax(0, 1fr); }
}
.calc-results > .widget:last-child { margin-bottom: 0; }
.calc-chart { height: 360px; }
.form fieldset.duration { border: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.form fieldset.duration legend { font-size: 0.9rem; font-weight: 500; padding: 0; margin-bottom: 0.3rem; }
.form label[hidden] { display: none; }

/* Light / Dark / System switch in the top bar */
.theme-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--bg); }
.theme-switch button {
    font: inherit; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem;
    border: none; background: transparent; color: var(--text-muted); cursor: pointer;
    padding: 0.25rem 0.65rem; border-radius: 999px;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.theme-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 720px) { .theme-switch .theme-label { display: none; } }

/* Expand icon on the summary bands: a clear outlined circle with a bold arrow. */
table.grouped tr.summary .toggle {
    width: 1.8rem; height: 1.8rem;
    background: rgba(236, 238, 241, 0.12); border: 2px solid var(--on-color); color: var(--on-color);
}
table.grouped tr.summary .chevron { width: 0.5rem; height: 0.5rem; border-width: 0 2.5px 2.5px 0; }
table.grouped tr.summary .toggle:hover,
table.grouped tbody.group.open tr.summary .toggle { background: var(--on-color); color: var(--summary-bg); border-color: var(--on-color); }
/* The whole band can be clicked to open or close the stock. */
table.grouped tr.summary { cursor: pointer; }
table.grouped tr.summary:hover td { filter: brightness(1.08); }

/* SWP calculator */
.from-cagr { margin: -0.4rem 0 0; font-size: 0.82rem; color: var(--action); }
.swp-status { margin: 0 0 1rem; padding: 0.7rem 1rem; border-radius: 8px; font-weight: 600; }
.swp-status.ok { background: var(--gain-bg); color: var(--gain); }
.swp-status.out { background: var(--loss-bg); color: var(--loss); }
.swp-run { max-height: 34rem; overflow-y: auto; }
.swp-run thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
#swp-table tr.swp-year td { background: var(--info-bg); font-weight: 600; font-size: 0.82rem; }
#swp-table tr.swp-out td { background: var(--loss-bg); color: var(--loss); font-weight: 700; }
#swp-table tr.swp-out-note td { background: var(--loss); color: var(--on-color); font-weight: 600; white-space: normal; }

/* Add a transaction: Stock / ETF or Bond / Debt */
.entry-mode { display: inline-flex; gap: 0.4rem; margin-bottom: 1rem; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.entry-mode button {
    font: inherit; font-size: 0.88rem; font-weight: 600; border: none; background: transparent; color: var(--text-muted);
    padding: 0.4rem 1rem; border-radius: 999px; cursor: pointer;
}
.entry-mode button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.entry-mode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-grid .span-all { grid-column: 1 / -1; margin: 0; }
.form [hidden] { display: none !important; }

/* Debt holdings */
.debt-name { font-weight: 600; color: var(--text); margin-top: 0.15rem; white-space: normal; }
.rating-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 4px; white-space: nowrap; }
.rating-top { background: var(--gain-bg); color: var(--gain); }
.rating-mid { background: var(--action-bg); color: var(--action); }
.rating-low { background: var(--loss-bg); color: var(--loss); }
.rating-none { background: var(--info-bg); color: var(--text-muted); }
.debt-table td.small .loss, .debt-table td.small .gain, .debt-table td.small span { white-space: nowrap; }
.debt-table td:nth-child(7) { white-space: nowrap; }

/* A hidden form stays hidden even though forms use a grid layout. */
form[hidden], .form[hidden], p.note[hidden] { display: none !important; }

/* Debt dashboard */
.rating-mix { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.rating-mix li { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.rating-mix .rating-badge { justify-self: start; }
.rating-bar { height: 0.6rem; background: var(--bg); border-radius: 999px; overflow: hidden; }
.rating-fill { display: block; height: 100%; width: 0; border-radius: 999px; }
.rating-fill.rating-top { background: var(--gain); }
.rating-fill.rating-mid { background: var(--action); }
.rating-fill.rating-low { background: var(--loss); }
.rating-fill.rating-none { background: var(--text-muted); }
.rating-amount { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.maturity-card .news-title { font-weight: 700; }
.maturity-card.maturity-soon { border-color: var(--action); }
.maturity-soon .news-tone { color: var(--action); }

.debt-table tr.summary td strong.received { white-space: nowrap; }

/* Staggered redemption: instalment schedule in the Bond / Debt form */
.staggered-box { display: grid; gap: 0.6rem; padding: 0.8rem 1rem; border: 1px dashed var(--border); border-radius: 8px; }
.tranche-panel { display: grid; gap: 0.5rem; }
.tranche-panel[hidden] { display: none; }
.tranche-count { max-width: 14rem; }
.tranche-table { max-width: 32rem; }
.tranche-table td, .tranche-table th { padding: 0.3rem 0.4rem; border-bottom: none; }
.tranche-table input { width: 100%; height: 2.2rem; }
.schedule { font-size: 0.78rem; }

/* Dashboard master chart: the whole portfolio by section */
.master-allocation .widget-head h2 { margin-bottom: 0.75rem; }
.master-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; }
@media (min-width: 900px) { .master-grid { grid-template-columns: 300px minmax(0, 1fr); } }
.master-chart { height: 260px; position: relative; }
.master-total { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.master-total strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.master-table td { vertical-align: middle; }
.master-table tfoot td { border-bottom: none; border-top: 2px solid var(--border); }
.swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.45rem; vertical-align: -1px; }
.share-bar { height: 0.35rem; margin-top: 0.25rem; background: var(--bg); border-radius: 999px; overflow: hidden; min-width: 5rem; }
.swatch-fill { display: block; height: 100%; width: 0; border-radius: 999px; }
.swatch-0 { background: #2a78d6; } .swatch-1 { background: #1baa91; } .swatch-2 { background: #e8a33b; }
.swatch-3 { background: #8f5bd6; } .swatch-4 { background: #e05d6f; } .swatch-5 { background: #4fb3d9; }
.swatch-6 { background: #9aa84a; } .swatch-7 { background: #d67a3a; } .swatch-8 { background: #6b7a90; } .swatch-9 { background: #c25bb0; }
.base-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--bg); }
.base-switch a { font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--text-muted); padding: 0.2rem 0.7rem; border-radius: 999px; }
.base-switch a[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.base-switch a { white-space: nowrap; }
.master-table td:first-child { white-space: nowrap; }
@media (max-width: 600px) {
    /* On phones the own-currency column is dropped; the converted value and share stay. */
    .master-table th:nth-child(2), .master-table td:nth-child(2) { display: none; }
    .master-table .share-bar { min-width: 3rem; }
    .master-table td:first-child { white-space: normal; }
}

/* CAGR calculator: mutual fund categories at the chosen rate */
.mf-show-all { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.mf-table .mf-class td { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg); }
.mf-table .mf-missed td:first-child { color: var(--text-muted); }
.mf-tick { color: var(--gain); font-weight: 700; margin-right: 0.4rem; }
@media (max-width: 600px) {
    /* On phones the "most funds" range is dropped; the typical CAGR and fund count stay. */
    .mf-table th:nth-child(3), .mf-table td:nth-child(3) { display: none; }
    .mf-table th { white-space: normal; }
}
.mf-toggle {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0; border: 0; background: none;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.mf-toggle .chevron { flex: none; color: var(--text-muted); }
.mf-toggle[aria-expanded="true"] .chevron { transform: rotate(45deg); margin: -3px 0 0; color: var(--accent); }
.mf-toggle:hover { color: var(--accent); }
.mf-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mf-toggle .mf-tick { margin-right: 0; }
.mf-table tr.mf-top td { font-size: 0.85rem; padding-top: 0.3rem; padding-bottom: 0.3rem; border-top: 0; }
.mf-table tr.mf-top td:first-child { padding-left: 2.2rem; }
.mf-rank {
    display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; margin-right: 0.5rem;
    border-radius: 50%; background: var(--accent); color: var(--on-color); font-size: 0.7rem; font-weight: 700;
}

/* SWP calculator: growth-rate risk warning */
.growth-risk { margin: -0.4rem 0 0.2rem; font-size: 0.8rem; color: var(--action); }
.growth-risk.high {
    padding: 0.6rem 0.75rem; border-radius: 8px; border-left: 4px solid var(--loss);
    background: var(--loss-bg); color: var(--loss); font-weight: 600;
}
.risk-banner {
    margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 8px; font-size: 0.9rem;
    border-left: 4px solid var(--action); background: color-mix(in srgb, var(--action) 14%, transparent); color: var(--text);
}
.risk-banner strong { color: var(--action); }
.risk-banner.high { border-left-color: var(--loss); background: var(--loss-bg); }
.risk-banner.high strong { color: var(--loss); }
.swp-status + .risk-banner { margin-top: 0.75rem; }
/* Risk level dots, Low (1) to Very High (6), on the fund category headings */
.risk-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.5rem; vertical-align: 0.05em; }
.risk-dot.risk-1 { background: #2e9e5b; }
.risk-dot.risk-2 { background: #7cb342; }
.risk-dot.risk-3 { background: #d4b000; }
.risk-dot.risk-4 { background: #f29120; }
.risk-dot.risk-5 { background: #e2572b; }
.risk-dot.risk-6 { background: #c62828; }

/* Retirement Planning: corpus worked out as a sum */
.corpus-sum { display: grid; gap: 0.25rem; max-width: 34rem; }
.corpus-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.corpus-line strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.corpus-line.corpus-total { border-bottom: 0; border-top: 2px solid var(--text); margin-top: 0.25rem; padding-top: 0.75rem; }
.corpus-line.corpus-total span { font-weight: 700; }
.corpus-line.corpus-total strong { font-size: 1.6rem; }
.field-hint { margin: -0.4rem 0 0.2rem; font-size: 0.8rem; color: var(--text-muted); }
.field-hint.warn { color: var(--loss); }
/* Retirement Planning: near-retirement questions and the fixed deposit list */
.safe-savings-form[hidden] { display: none; }
.near-retirement { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.9rem; }
.near-retirement legend { padding: 0; margin-bottom: 0.4rem; }
.near-retirement legend h2 { margin: 0; }
.near-retirement > .cards { margin-bottom: 0.25rem; }
#mis-panel label { max-width: 24rem; }
.near-retirement p { margin: 0; }
.reveal-panel { display: grid; gap: 0.6rem; padding-left: 1.6rem; }
.reveal-panel[hidden], .near-retirement[hidden] { display: none; }
.fd-list { display: grid; gap: 0.75rem; }
.fd-row { border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.75rem; background: var(--bg); }
.fd-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.fd-row-head [hidden] { display: none; }
.fd-fields { display: grid; gap: 0.5rem; }
.fd-duration { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.fd-duration legend { font-size: 0.85rem; padding: 0; margin-bottom: 0.25rem; }
/* Wide screens: each deposit's fields on one line */
@media (min-width: 900px) {
    .fd-fields { grid-template-columns: minmax(10rem, 1.6fr) minmax(7rem, 1fr) minmax(6rem, 0.8fr) minmax(9rem, 1.1fr) minmax(9rem, 1.1fr); align-items: end; }
    .fd-duration { gap: 0.4rem; }
}
.fd-row .field-hint { margin: 0.4rem 0 0; }
#fd-add { justify-self: start; }
/* Retirement Planning: where the rest of the corpus is kept */
.rest-panel { display: grid; gap: 0.75rem; padding-top: 0.9rem; border-top: 1px solid var(--border); }
.rest-panel[hidden] { display: none; }
.rest-panel h3 { margin: 0; }
.rest-panel p { margin: 0; }
.rest-buckets { display: grid; gap: 0.6rem 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
/* Name on the left and its share on the right of one line, the box below: every bucket is the same height. */
.form label.rest-bucket { grid-template-columns: 1fr auto; align-items: center; align-content: start; }
.rest-share { min-width: 2.5rem; text-align: right; }
.rest-bar { display: flex; height: 0.7rem; border-radius: 999px; overflow: hidden; background: var(--bg); }
.rest-bar span { display: block; height: 100%; width: 0; transition: width 0.2s ease; }
.rest-rest_mutual_funds { background: #2a78d6; } .rest-rest_stocks { background: #1baa91; } .rest-rest_gold { background: #e8a33b; }
.rest-rest_bonds { background: #8a63d2; } .rest-rest_ppf { background: #c2569b; } .rest-rest_pf { background: #d9663a; } .rest-rest_nps { background: #5c8f3e; } .rest-rest_savings { background: #4f9fd8; } .rest-rest_others { background: #9aa3ad; }
.rest-status { font-weight: 600; }
.rest-status.done { color: var(--gain); }
.rest-status.over { color: var(--loss); }
.rest-simple_mis { background: #b8860b; } .rest-simple_fds { background: #2f6f8f; }
.rest-bucket.far-only[hidden] { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Further from retirement the buckets are the whole section: no divider above them. */
.rest-panel.whole-corpus { border-top: 0; padding-top: 0; }
/* Retirement Planning: the target for new monthly investing */
.target-form[hidden] { display: none; }
.target-form h2, .target-form p { margin: 0; }
.target-form .target-field-label { max-width: 34rem; }
.target-result[hidden] { display: none; }
.target-result { display: grid; gap: 0.75rem; }
.target-verdict { font-weight: 600; padding: 0.6rem 0.8rem; border-radius: 8px; border-left: 4px solid var(--border); }
.target-verdict.ok { color: var(--gain); background: var(--gain-bg); border-left-color: var(--gain); }
.target-verdict.stretch { color: var(--text); background: color-mix(in srgb, var(--action) 14%, transparent); border-left-color: var(--action); }
.target-verdict.out { color: var(--loss); background: var(--loss-bg); border-left-color: var(--loss); }

/* Retirement Planning: guided steps. The step being filled in is framed in blue with a pulsing badge;
   finished steps get a green tick; later steps are slightly faded until their turn. */
.guide-steps { margin: 0 0 1rem; }
.guide-steps ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.guide-steps li a { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem 0.4rem 0.4rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.guide-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--bg); color: var(--text-muted); font-size: 0.85rem; }
.guide-steps li.current a { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.guide-steps li.current .guide-num { background: var(--accent); color: var(--on-color); }
.guide-steps li.done a { color: var(--gain); }
.guide-steps li.done .guide-num { background: var(--gain); color: var(--on-color); font-size: 0; }
.guide-steps li.done .guide-num::before { content: '✓'; font-size: 0.85rem; }
.guide-hint { margin: 0.6rem 0 0; font-weight: 600; }
.guide-hint.all-done { color: var(--gain); }

.guide-anchor { display: block; visibility: hidden; height: 0; }
.guide-badge { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text-muted); }
.guide-badge:empty { display: none; }
[data-guide-step].guide-current {
    border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    animation: guide-glow 1.6s ease-in-out 3;
}
[data-guide-step].guide-current .guide-badge {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem; border-radius: 999px;
    background: var(--accent); color: var(--on-color);
}
[data-guide-step].guide-current .guide-badge::before {
    content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--on-color); animation: guide-dot 1.2s ease-in-out infinite;
}
[data-guide-step].guide-done .guide-badge { color: var(--gain); }
[data-guide-step].guide-todo { opacity: 0.75; }
.guide-next[hidden] { display: none; }
@keyframes guide-glow {
    50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 12%, transparent); }
}
@keyframes guide-dot {
    50% { opacity: 0.25; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
    [data-guide-step].guide-current, [data-guide-step].guide-current .guide-badge::before { animation: none; }
}
/* Narrow left panel: Save and "Continue to step 2" stacked, full width. */
.calc-inputs .form-actions:has(.guide-next:not([hidden])) { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
/* Retirement Planning: the way through to the CAGR Calculator */
.go-working[hidden] { display: none; }
.go-working { display: grid; gap: 0.4rem; justify-items: start; }
.go-working-button { font-size: 1.05rem; padding: 0.75rem 1.4rem; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); }

/* CAGR Calculator opened from Retirement Planning: the goal, and the least risky categories that reach it */
.goal-banner { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
    margin: 0 0 1rem; padding: 0.8rem 1rem; border-radius: 10px; border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.goal-banner[hidden] { display: none; }
.goal-banner p { margin: 0.25rem 0 0; }
.mf-pick { margin: 0 0 0.9rem; padding: 0.75rem 0.9rem; border-radius: 8px; border-left: 4px solid var(--gain); background: var(--gain-bg); }
.mf-pick[hidden] { display: none; }
.mf-pick strong { color: var(--gain); }
.mf-pick p { margin: 0.3rem 0 0; font-size: 0.85rem; }
.mf-pick.none { border-left-color: var(--loss); background: var(--loss-bg); }
.mf-pick.none strong { color: var(--loss); }
.mf-table tr.mf-picked > td { background: color-mix(in srgb, var(--gain) 14%, transparent); }
.mf-table tr.mf-picked > td:first-child { box-shadow: inset 4px 0 0 var(--gain); }
.mf-pick-badge { margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--gain); color: var(--on-color);
    font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
/* CAGR Calculator: step-up SIP */
.step-up { display: grid; gap: 0.6rem; }
.step-up[hidden] { display: none; }
.goal-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
@media (max-width: 700px) { .goal-actions { align-items: flex-start; } }

/* SWP Calculator: spreading the money to lower risk */
.derisk { border: 2px solid var(--gain); background: color-mix(in srgb, var(--gain) 7%, var(--surface)); }
.derisk[hidden] { display: none; }
.derisk p { margin: 0 0 0.75rem; }
.derisk-table td { vertical-align: top; }
.derisk-bar { margin: 0.75rem 0 0.25rem; }
.derisk-mis { background: #b8860b; } .derisk-scss { background: #c2569b; } .derisk-fd { background: #2f6f8f; } .derisk-mf { background: #2a78d6; }
@media (max-width: 600px) {
    /* Phones: each row as a small card, name and amount on one line, the explanation below. */
    .derisk-table thead { display: none; }
    .derisk-table tr { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
    .derisk-table td { display: block; border: 0; padding: 0; }
    .derisk-table td:nth-child(3) { grid-column: 1 / -1; }
}
/* An amount written out in words under its box (e.g. "Three crore thirty thousand ... rupees") */
.amount-words { margin: -0.45rem 0 0.1rem; font-size: 0.8rem; font-style: italic; color: var(--accent); }
.amount-words[hidden] { display: none; }
/* Words added just below a box inside its label: full width, close to the box. */
.form label > .amount-words { grid-column: 1 / -1; margin: 0; }
/* In side-by-side grids (money buckets, deposit rows) the words always take one line, empty or not,
   so the boxes in a row stay level; long words are cut short and shown in full on hover. */
.rest-bucket > .amount-words, .fd-fields .amount-words {
    display: block; min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* (beats the general ".form [hidden]" rule, which would remove the line) */
.form .rest-bucket > .amount-words[hidden], .form .fd-fields .amount-words[hidden] { display: block !important; visibility: hidden; }
/* Deposit rows line up at the bottom: give the other fields the same room as the amount's words line. */
.fd-fields .amount-words { min-height: 1rem; line-height: 1rem; }
@media (min-width: 900px) {
    .fd-fields > label:not(:has(.amount-words)), .fd-fields > .fd-duration { padding-bottom: 1.3rem; }
}
.derisk-bonds { background: #8a63d2; }
.derisk-family { margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--surface); border: 1px dashed var(--gain); }
.derisk-family p { margin: 0.3rem 0 0 1.6rem; }
.derisk-family .checkbox { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; }

/* SWP Calculator, fresh page: empty boxes to fill in, and a stand-in for the results until then */
input.needs-input { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.results-placeholder { text-align: center; padding: 2.5rem 1.5rem; border: 2px dashed var(--border); background: transparent; }
.results-placeholder[hidden] { display: none; }
.results-placeholder h2 { margin: 0.5rem 0; }
.results-placeholder p { max-width: 36rem; margin: 0.5rem auto 0; }
.results-placeholder-icon { font-size: 2.5rem; }
.start-fresh { font-weight: 600; white-space: nowrap; }
.start-fresh[hidden] { display: none; }

/* Under each fund category: labelled groups for the best funds over the period, and the latest 5-year stars */
.mf-table tr.mf-sub-label td { padding: 0.45rem 0.6rem 0.2rem 2.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; border-top: 0; }
.mf-table tr.mf-label-period td { color: var(--accent); }
.mf-table tr.mf-label-stars td { color: var(--action); }
.mf-table tr.mf-star td { background: color-mix(in srgb, var(--action) 9%, transparent); }
.mf-table tr.mf-star td:first-child { box-shadow: inset 3px 0 0 var(--action); }
.mf-star-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; margin-right: 0.5rem;
    border-radius: 50%; background: var(--action); color: var(--surface); font-size: 0.7rem; font-weight: 700; }

/* Top menu drop-down group (e.g. "Calculators") */
.topbar nav { align-items: center; }
.nav-group { position: relative; }
.nav-group summary { list-style: none; cursor: pointer; color: var(--text-muted); padding: 0.25rem 0; user-select: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: ' ▾'; font-size: 0.8em; }
.nav-group[open] summary::after { content: ' ▴'; }
.nav-group summary:hover, .nav-group[open] summary { color: var(--text); }
.nav-group.active summary { color: var(--text); border-bottom: 2px solid var(--accent); }
.nav-group summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.nav-dropdown {
    position: absolute; top: calc(100% + 0.4rem); left: -0.6rem; z-index: 50; min-width: 12rem;
    display: flex; flex-direction: column; padding: 0.35rem; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.topbar nav .nav-dropdown a { padding: 0.5rem 0.7rem; border-radius: 6px; border-bottom: 0; white-space: nowrap; }
.topbar nav .nav-dropdown a:hover { background: var(--bg); color: var(--text); }
.topbar nav .nav-dropdown a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; }
/* Transactions: the import section */
.import-panel h3 { margin: 1.25rem 0 0.5rem; }
.import-form { max-width: 34rem; margin-bottom: 0.5rem; }
/* Settings: a gear beside the theme switch */
.settings-link { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
    border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); }
.settings-link:hover { color: var(--text); border-color: var(--accent); }
.settings-link:hover svg { transform: rotate(45deg); }
.settings-link svg { transition: transform 0.3s ease; }
.settings-link.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.settings-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .settings-link svg { transition: none; } }
/* Phones: the pinned bar in two short rows (logo and controls, then the menu) so it takes little of the screen. */
@media (max-width: 700px) {
    .topbar { padding: 0.5rem 1rem; gap: 0.45rem 0.75rem; }
    .topbar .brand { order: 1; }
    .topbar-right { order: 2; gap: 0.5rem; flex-wrap: nowrap; }
    .topbar nav { order: 3; width: 100%; gap: 0.9rem; flex-wrap: nowrap; font-size: 0.92rem; }
    .topbar .logout .muted { display: none; }
    .settings-link { width: 1.9rem; height: 1.9rem; }
}
@media (max-width: 700px) {
    .topbar nav { gap: 0.5rem; font-size: 0.86rem; justify-content: space-between; }
    .topbar nav > a, .nav-group summary { white-space: nowrap; }
}
@media (max-width: 700px) {
    .topbar nav { gap: 0.3rem; font-size: 0.82rem; }
    /* Calculators is the last item: open its list towards the left so it stays on screen. */
    .nav-dropdown { left: auto; right: -0.5rem; }
}

/* The i-wise logo beside the name in the top bar */
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-logo { width: 40px; height: 40px; border-radius: 50%; flex: none; display: block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.topbar { padding-top: 0.6rem; padding-bottom: 0.6rem; }
@media (max-width: 700px) {
    .brand { gap: 0.45rem; }
    .brand-logo { width: 32px; height: 32px; }
}
/* A little larger so the "i-wise" lettering reads clearly (the bar grows slightly to fit). */
.brand-logo { width: 48px; height: 48px; }
@media (max-width: 700px) { .brand-logo { width: 36px; height: 36px; } }
/* Phones: the logo alone stands for the name, so the controls fit beside it on the first row. */
@media (max-width: 700px) {
    .topbar .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Top band in the summary-band blue, with light text and controls on it */
.topbar { background: var(--topbar-bg); border-bottom-color: transparent; }
.topbar .brand, .topbar .brand-name { color: var(--on-color); }
.topbar nav > a, .topbar .nav-group summary { color: color-mix(in srgb, var(--on-color) 78%, transparent); }
.topbar nav > a:hover, .topbar .nav-group summary:hover, .topbar .nav-group[open] summary,
.topbar nav > a.active, .topbar .nav-group.active summary { color: var(--on-color); }
.topbar nav > a.active, .topbar .nav-group.active summary { border-bottom-color: var(--on-color); }
.topbar .theme-switch { background: rgba(0, 0, 0, 0.18); border-color: color-mix(in srgb, var(--on-color) 35%, transparent); }
.topbar .theme-switch button { color: color-mix(in srgb, var(--on-color) 80%, transparent); }
.topbar .theme-switch button:hover { color: var(--on-color); }
.topbar .theme-switch button[aria-pressed="true"] { background: var(--on-color); color: var(--topbar-bg); }
.topbar .settings-link { background: rgba(0, 0, 0, 0.18); border-color: color-mix(in srgb, var(--on-color) 35%, transparent); color: var(--on-color); }
.topbar .settings-link:hover { border-color: var(--on-color); }
.topbar .settings-link.active { background: var(--on-color); border-color: var(--on-color); color: var(--topbar-bg); }
.topbar .logout .muted { color: color-mix(in srgb, var(--on-color) 80%, transparent); }
.topbar .logout .link-button { color: var(--on-color); text-decoration: underline; text-underline-offset: 3px; }
.topbar .brand-logo { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }

/* Top menu items: larger semi-bold text, all in the same bright off-white, roomy spacing,
   and a thin chevron after items that open a list (in the style of news-site menus). */
.topbar nav { gap: 1.9rem; }
.topbar nav > a, .topbar .nav-group summary {
    font-size: 1.08rem; font-weight: 600; letter-spacing: 0.005em; color: var(--on-color);
    padding: 0.3rem 0; border-bottom: 2px solid transparent;
}
.topbar nav > a:hover, .topbar .nav-group summary:hover { color: #ffffff; border-bottom-color: color-mix(in srgb, var(--on-color) 45%, transparent); }
.topbar nav > a.active, .topbar .nav-group.active summary { border-bottom-color: var(--on-color); }
.nav-group summary { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-group summary::after, .nav-group[open] summary::after { content: none; }
.nav-chevron { color: color-mix(in srgb, var(--on-color) 65%, transparent); transition: transform 0.15s ease; }
.nav-group[open] .nav-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .nav-chevron { transition: none; } }
@media (max-width: 1100px) { .topbar nav { gap: 1.2rem; } .topbar nav > a, .topbar .nav-group summary { font-size: 1rem; } }
@media (max-width: 700px) {
    .topbar nav { gap: 0.3rem; }
    .topbar nav > a, .topbar .nav-group summary { font-size: 0.86rem; }
    .nav-chevron { width: 13px; height: 13px; }
}
/* Narrower laptops: keep the bar on one row (the name beside Log out is dropped; ⚙ and Log out stay). */
@media (max-width: 1200px) and (min-width: 701px) {
    .topbar { gap: 1rem; }
    .topbar nav { gap: 1rem; }
    .topbar .logout .muted { display: none; }
}
@media (max-width: 700px) {
    .topbar nav > a, .topbar .nav-group summary { font-size: 0.8rem; }
}
@media (max-width: 1200px) { .theme-switch .theme-label { display: none; } }
@media (max-width: 960px) and (min-width: 701px) {
    .topbar .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Indian mutual funds: entry form and story */
.mf-plan { border: 0; padding: 0; margin: 0; display: flex; gap: 1.25rem; align-items: center; }
.mf-plan legend { float: left; margin-right: 0.75rem; font-weight: 500; font-size: 0.9rem; }
.mf-fund-field .field-hint { margin-top: 0.35rem; }
#mf-suggestions [role="option"] { display: flex; flex-direction: column; gap: 0.1rem; }
.mf-nav-hint { margin-top: -0.4rem; }
.mf-sip { display: grid; gap: 0.6rem; }
.mf-sip-panel { display: grid; gap: 0.6rem; padding: 0.75rem 0.9rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.mf-sip-panel[hidden] { display: none; }
.mf-sip-panel > label:first-child { max-width: 16rem; }
.mf-sip-line { margin-top: 0.25rem; }
.mf-sip-line form { display: inline; margin-left: 0.4rem; }
table.grouped tr.summary .mf-stop { color: var(--on-color); text-decoration: underline; font-size: 0.8rem; }
.mf-auto-badge { background: color-mix(in srgb, var(--action) 22%, transparent); }

/* About Me */
.about-me { display: grid; gap: 1.25rem; }
.about-me .widget { margin: 0; }
.about-me .form-grid { align-items: end; }
.yes-no { border: 0; padding: 0; margin: 0; min-width: 0; }
.yes-no legend { font-size: 0.9rem; font-weight: 500; padding: 0; margin-bottom: 0.45rem; }
.yes-no-options { display: flex; gap: 1.25rem; min-height: 2.4rem; align-items: center; }
.prefill-badge { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; white-space: nowrap; }
.about-prefill .prefill-badge { vertical-align: 1px; }
.about-actions { gap: 1rem; align-items: center; }
.about-me .form-grid label:not(.checkbox) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.35rem; }
.about-me .form-grid label:not(.checkbox) > input, .about-me .form-grid label > select { flex: 1 0 100%; }
.about-me .form-grid label > .amount-words { flex: 1 0 100%; }
.about-me .form-grid label[hidden] { display: none; }
.prefill-badge { font-size: 0.68rem; }
/* About Me: the person icon beside the gear (it doesn't turn on hover like the gear does). */
.topbar .about-link:hover svg { transform: none; }
/* Tablets: a little tighter so the person icon fits on the one row. */
@media (max-width: 960px) and (min-width: 701px) {
    .topbar { gap: 0.6rem; padding-left: 1rem; padding-right: 1rem; }
    .topbar nav { gap: 0.8rem; }
    .topbar-right { gap: 0.5rem; }
}

/* Retirement Planning: the outstanding-loans questions */
.loan-panel { border: 0; margin: 0; padding: 0.75rem 0 0.75rem 0.9rem; min-width: 0; border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent); padding-right: 0.75rem; }
.loan-panel[hidden] { display: none; }
.loan-panel .field-hint { margin: 0; }

/* CAGR Calculator: the loan EMI added to the SIP once the loan is paid off */
.emi-fields { display: grid; gap: 0.6rem; }
.emi-fields[hidden] { display: none; }
/* About Me: the loan amounts, in their own row under the Yes / No questions */
.about-me .loan-fields { padding: 0.75rem 0.9rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.about-me .loan-fields[hidden] { display: none; }

/* Import from a CSV file: which group the file is for */
.import-groups { border: 0; padding: 0; margin: 0; min-width: 0; }
.import-groups legend { font-size: 0.9rem; font-weight: 500; padding: 0; margin-bottom: 0.45rem; }
.import-group-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form label.import-group-option { padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.form label.import-group-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.import-format[hidden] { display: none; }
.mf-redeemed { margin-top: 0.15rem; color: var(--text-muted); }
/* Mutual fund form: the Plan / Redeem choices sit level with the box beside them. */
#mf-form > .mf-plan { align-self: end; min-height: 2.5rem; }
.mf-plan { flex-wrap: wrap; row-gap: 0.4rem; }
.mf-plan label.checkbox { white-space: nowrap; }
/* About Me: every field keeps a line free underneath for the amount in words, so boxes in a row line up
   whether or not they show one (a select beside an amount, the Yes / No buttons beside a box). */
.about-me .form-grid label:not(.checkbox), .about-me .form-grid .yes-no { position: relative; padding-bottom: 1.35rem; }
.about-me .form-grid label > .amount-words { position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about-me .form-grid .yes-no-options { min-height: 0; height: 2.625rem; } /* the height of a box */

/* Mutual fund dashboard: how each fund held rates in its category */
.mf-stars { white-space: nowrap; letter-spacing: 0.05em; }
.mf-stars .on { color: #e0a100; }
.mf-stars .off { color: color-mix(in srgb, var(--text-muted) 35%, transparent); }
.mf-stars.large { font-size: 1.45rem; line-height: 1; }
.mf-stars.small { font-size: 0.85rem; margin-left: 0.25rem; }
.mf-stars.none { font-size: 0.8rem; color: var(--text-muted); font-style: italic; letter-spacing: 0; }
.mf-rating-list { display: grid; gap: 0.9rem; }
@media (min-width: 1100px) { .mf-rating-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mf-rating { border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1rem; background: var(--bg); }
.mf-rating-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.mf-rating-stars { text-align: right; }
.mf-rating-stars .small { margin-top: 0.3rem; color: var(--text-muted); }
.mf-rating-table { width: 100%; margin-top: 0.7rem; font-size: 0.85rem; }
.mf-rating-table th, .mf-rating-table td { padding: 0.25rem 0.4rem; }
.mf-rating-table thead th { font-weight: 500; color: var(--text-muted); }
.mf-rating-table tbody th { font-weight: 500; text-align: left; }
.mf-quartile { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 4px; font-weight: 600; font-size: 0.8rem; }
.mf-quartile.q1 { background: var(--gain-bg); color: var(--gain); }
.mf-quartile.q2 { background: color-mix(in srgb, var(--gain) 8%, transparent); color: var(--gain); }
.mf-quartile.q3 { background: color-mix(in srgb, var(--loss) 8%, transparent); color: var(--loss); }
.mf-quartile.q4 { background: var(--loss-bg); color: var(--loss); }
.mf-rating-note { margin: 0.5rem 0 0; }
@media (max-width: 600px) { .mf-rating-stars { text-align: left; } }