:root {
    --bg-accent: #f3f3f3;
    --bg-rose: #e3e1d9;
    --accent: #59bb98;
    --accent-hover: #135845;
    --accent-light: #daf5f5;
    --text-header: #222c2c;
    --text-main: #495657;
    --text-muted: #545f60;
    --text-light: #6e7c7d;
    --danger: #a8391f;
    --danger-dark: #8e301a;
    --border: rgba(100, 138, 140, 0.3);
    --border-dark: rgba(255, 255, 255, 0.14);
    --radius-sm: 8px;
    --radius-md: 15px;
    --radius-lg: 16px;
    /* Shared side gutter for the top bar (#menu) and the content rows (.left, .right) below it, so
       the logo and the row content always share the same left edge. Narrows at the same breakpoints
       as everything else in the responsive scale - redefined per @media below, not per selector. */
    --gutter: 2rem;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: larger;
    background: var(--bg-rose);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Hierarchy */
h1 {
    font-family: 'Fraunces', 'Iowan Old Style', serif;
    font-size: 3.25rem;
    font-weight: 600;
    color: var(--text-header);
    line-height: 1.15;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

h2 {
    font-family: 'Fraunces', 'Iowan Old Style', serif;
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--text-header);
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-header);
}

h6 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    color: #475a5c;
}

p {
    margin-bottom: 1.5rem;
    color: var(--text-main);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: all 0.2s ease;
}

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

/* Layout Blocks */
.background-blue {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.background-light {
    width: 100%;
    background: var(--bg-rose);
    color: var(--text-main);
}

.compact-section {
    padding: 1rem 0 4rem;
}

/* The four chart panels (#second row + #fourth row) form a cross: a shared border down the
   middle and across the middle, with no border on the group's outer edges. Only the cell on
   the "inner" side of each boundary draws it, so the two rows' lines meet as one hairline
   instead of doubling up. */
#second-left, #second-right, #fourth-left, #fourth-right {
    background: #f6f5f0;
}

#second-left, #second-right {
    border-bottom: 1px solid var(--border);
}

#second-left, #fourth-left {
    border-right: 1px solid var(--border);
}

#second-left {
    flex: 2;
}

#second-right {
    flex: 1;
}

#first-left {
    flex: 2;
}

#first-right {
    flex: 1;
    border-left: 1px solid #d1d1d1;
}

#first-right:empty,
#second-right:empty {
    display: none;
    background: none;
}

#fourth-left {
    flex: 2;
}

#fourth-right {
    flex: 1;
}

#fourth-left:empty,
#fourth-right:empty {
    display: none;
    background: none;
}

#fourth-left:has(+ #fourth-right:empty) {
    flex: 1 1 100%;
    border-right: none;
}

#first-left:has(+ #first-right:empty) {
    flex: 1 1 100%;
    max-width: 720px;
}

#second-left:has(+ #second-right:empty) {
    flex: 1 1 100%;
    border-right: none;
}

/* #third's visibility is driven by an explicit JS class (cleanup.ts / report.ts), not a
   :has(:empty) inference - that compound selector raced with the synchronous clear-then-repopulate
   cycle in presentReports() and could get stuck hidden on first paint, mostly on mobile WebKit/Blink
   where the :has() invalidation is more prone to missing a same-tick DOM mutation. */
#third.hidden-row {
    display: none;
}

#fourth:has(> #fourth-left:empty):has(> #fourth-right:empty) {
    display: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header & Navigation */
header.top {
    width: 100%;
    padding: 0.51rem 0 0 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

#menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.menu-left {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: #59bb98;
    padding-left: 10px;
    padding-right: 15px;
    padding-bottom: 7px;
    padding-top: 6px;
    border-radius: 6px 6px 0px 0px;
}

#logo {
    margin-top: 10px;
}

.logo-mark {
    display: flex;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.logo-mark svg {
    width: 100%;
    height: 100%;
}

#logo-title {
    font-family: system-ui;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    font-weight: 800;
    white-space: nowrap;
}

#logo-title a {
    color: #ffffff;
}

.links {
    display: flex;
    gap: 0.5rem;
    margin-top: 3px;
}

.links a {
    color: #222c2c;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.links a:hover {
    background: rgba(0, 0, 0, 0.15);
}

#globe {
    margin-top: 11px;
}

#globe-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 0.75rem;
}

.lang {
    color: #222c2c;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Sections */
.splash {
}

.intro {
    display: flex;
}

.parent-card, .parent-card-below {
    display: flex;
    background: white;
    flex-direction: column;
}

#splash {
    display: flex;
}

.row {
    display: flex;
    background: #f0eee6;
}

.left, .right {
    flex: 1;
    padding: var(--gutter);
    /* Without this, a flex item never shrinks below its content's intrinsic width by default -
       and a chart canvas that already rendered at a wider size (e.g. before a sibling chart like
       the debasement pie appears) would lock its row at that width instead of sharing space. */
    min-width: 0;
}

.disclaimer {
    padding: 0.0rem;
    color: var(--text-main) !important;
    height: 100%;
}

.disclaimer p {
    color: inherit;
    margin-bottom: 0.75rem;
}

/* Long-form text (Why, FAQ, Disclaimer, Data sources) reads poorly at the full card width -
   cap it to a comfortable line length. No-op on columns already narrower than this (e.g.
   Disclaimer's two-column split). */
.information {
    max-width: 700px;
}

/* The dynamic one-line takeaway under the report page's intro text (report.ts) - calls out the
   headline numbers so the header column reads as full as the summary panel beside it. */
.insight {
    margin-top: 0.5rem;
    color: var(--text-main);
}

.insight strong {
    color: var(--accent-hover);
}

/* Label/value pairs (e.g. Investment Summary) with values tab-aligned to a shared column,
   regardless of label length. display:table lets each row stay its own element (so a value
   can be swapped independently, as the demo page does) while columns still line up across rows. */
.summary-table {
    display: table;
    width: 100%;
}

.summary-row {
    display: table-row;
}

.summary-label, .summary-value {
    display: table-cell;
    padding-bottom: 0.6rem;
    font-size: 0.9rem;
}

.summary-label {
    color: var(--text-muted);
    white-space: nowrap;
    padding-right: 0.75rem;
}

.summary-value {
    color: var(--text-header);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Components: Buttons */
.btn-primary, .btn-success, .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.875rem 2.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
}

.btn-primary, .btn-success {
    background: var(--accent);
}

.btn-secondary {
    background: var(--text-header);
}

.btn-primary:hover, .btn-success:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(27, 126, 98, 0.35);
}

.btn-secondary:hover {
    background: #324445;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(34, 44, 44, 0.3);
}

.btn-primary:active, .btn-success:active, .btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

.btn-retry {
    background: var(--danger);
    color: white !important;
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(168, 57, 31, 0.3);
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.btn-retry:hover {
    background: var(--danger-dark);
}

/* Components: Forms */
.input-group {
    margin-bottom: 1.5rem;
    margin-left: 0;
    margin-right: auto;
}

.inline-input-group {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    width: 100%;
}

.left-input-group, .right-input-group {
    flex: 1;
}

.middle-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--accent-light);
    margin-bottom: 2.25rem; /* Align with inputs */
    clip-path: polygon(40% 7%, 73% 7%, 100% 47%, 72% 91%, 40% 91%, 61% 61%, 14% 61%, 14% 35%, 61% 35%);
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

input, select, textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: #f0eee6;
    border: 1px solid var(--border);
    color: var(--text-header);
    font-size: 1rem;
    transition: all 0.2s ease;
}
input::placeholder,select::placeholder,textarea::placeholder {
    color: #8c9697;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(27, 126, 98, 0.15);
}

input[type="range"] {
    padding: 0;
    border: none;
    background: none;
    accent-color: var(--accent);
}

input[type="range"]:focus {
    box-shadow: none;
}

/* Charts Custom Styling */
.chart-container {
    height: 350px;
    position: relative;
}

.chart-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-header);
    text-align: center;
}

/* Caption under the demo pie chart when it falls back to its "data unavailable" state - see
   buildPieChart()/updatePieChart() in app.ts. Empty and invisible the rest of the time. */
.chart-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.5rem;
}

/* Step Cards */
.section-intro {
    max-width: 600px;
    margin: 0 auto 3.75rem;
    color: var(--text-muted);
}

.section-cta {
    margin-top: 3.75rem;
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.step-card {
    background: #fbfbfb;
    padding: 2.5rem;
}

.step-card p {
    color: var(--text-muted);
    margin-bottom: 0;
}

/* Loading & Error States */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(27, 126, 98, 0.12);
    border-left-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(34, 44, 44, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--radius-lg);
}

.background-light .loading-overlay {
    background: rgba(255, 255, 255, 0.7);
}

.error-card {
    background: #f7e9e5;
    border: 1px solid #e8c9c0;
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: center;
    color: var(--danger-dark);
}

.error-card p {
    color: inherit;
}

#wide-description {
    padding: 40px;
}

#wide-submitter { display: inline-flex; }

.button-space {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

#horizon {
    margin: auto;
    text-align: center;
}

/* Trust Badges */
.trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.75rem;
    margin-top: 2.55rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* Sits next to the collapsed "advanced" toggle whenever it's hiding a non-zero monthly
   expenses/yield value - those otherwise silently skew the result with no visible trace. */
.advanced-flag {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    margin-left: 0.4rem;
    vertical-align: middle;
    cursor: help;
}

.checkmark {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border-radius: 50%;
    transform: rotate(45deg);
}

.checkmark:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: white;
    left: 11px;
    top: 5px;
}

.checkmark:after {
    content: "";
    position: absolute;
    width: 4px;
    height: 2px;
    background-color: white;
    left: 8px;
    top: 11px;
}

/* Utilities */
.center { text-align: center; width: 100%; }
.smaller { font-size: 0.875rem; }
.dim { color: var(--text-light); }
.fade-in { animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.disabled { display: none; }

.minimized {
    display: none;
}

.maximized {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

/* Footer Style */
footer {
    width: 100%;
    background: var(--bg-accent);
    padding: 6rem 0 4rem;
    color: var(--text-muted);
    text-align: center;
}

footer .space { margin: 2rem 0 3rem; }
footer a { color: var(--text-main); margin: 0 1rem; font-weight: 500; }

/* Media Queries */
@media (max-width: 1024px) {
    .row { flex-direction: column; gap: 0.5rem; }
    h1 { font-size: 2.75rem; }
    .disclaimer { margin-left: 0; width: 100%; }
    #mobile-submitter { display: inline-flex; }
    /* The cross border is a desktop (side-by-side) layout only - stacked in a single column,
       the vertical line would just be a stray edge on the now full-width panels. */
    #second-left, #fourth-left { border-right: none; }
    /* Desktop's 2rem gutter reads as an oversized margin once the row is this narrow - step it
       down at tablet and phone widths (16dp/24dp is the standard Material spacing scale for these
       breakpoints). #menu shares this same variable, so the logo stays aligned with row content
       at every width instead of drifting out of sync with it. */
    :root { --gutter: 1.5rem; }
    #wide-description { padding: var(--gutter); }
}

/* Between the "hide .links entirely" breakpoint below and the full desktop layout, tablet-portrait
   widths (e.g. iPad standing) are tight enough that longer Norwegian nav labels wrap the top line -
   compress the menu items and language selector a bit so everything fits on one line. */
@media (max-width: 1024px) and (min-width: 601px) {
    .links { gap: 0; }
    .links a { padding: 0.5rem 0.45rem; font-size: 0.65rem; }
    #globe-container { padding: 0.3rem 0.4rem; gap: 0.25rem; }
}

@media (max-width: 600px) {
    .links { display: none; }
    .splash { }
    h1 { font-size: 2.25rem; }
    .button-space { flex-wrap: wrap; }
    :root { --gutter: 1rem; }
    #wide-description { padding: var(--gutter); }

    .inline-input-group {
        flex-direction: column;
        gap: 0;
    }

    .middle-input-group {
        display: none;
    }
}