/* ---- Skrifttyper ----
   Ligger på siden selv (fonts/, SIL Open Font License), så der ikke sendes noget til
   Google eller andre, og appen også har dem offline. Latin-udsnittet dækker dansk. */
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:400 600; font-display:swap; src:url(fonts/newsreader-variable.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/manrope-variable.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/ibm-plex-mono-400.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/ibm-plex-mono-500.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/ibm-plex-mono-600.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Tokens ---- */
:root{
    /* Mørkt tema: næsten sort baggrund, mørkegrå kort og grå tekst, med samme grønne
       og røde toner som det lyse tema (lidt lysere, så de kan læses på sort). */
    --bg:#0B0B0C;
    --panel:#151517;
    --panel-sunken:#0F0F11;
    --panel-hover:#1C1C1F;
    --border:#27272B;
    --border-strong:#36363C;
    --text:#EDEDEE;
    --muted:#A3A3AB;
    --subtle:#80808A;
    --ask:#C8924A;
    --pos:#3CC08E;
    --akt:#1F9D6F;
    --akt-soft:#1F9D6F22;     /* 22 (ikke mere): grøn tekst på den grønne baggrund skal have kontrast 4,5 */
    --on-akt:#0B0B0C;      /* mørk tekst på grønne knapper: bedre kontrast end hvid */
    --cross:#E0655A;
    --neutral-series:#6F7179;
    --chart-grid:#1F1F23;
    --tooltip-bg:#1A1A1D;
    --glow:rgba(31,157,111,0.05);

    --shadow-sm:0 1px 2px rgba(0,0,0,0.40);
    --shadow-md:0 8px 24px -8px rgba(0,0,0,0.60);
    --shadow-lg:0 28px 60px -20px rgba(0,0,0,0.80);

    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
    --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;

    --font-display:'Newsreader',Georgia,serif;
    --font-sans:'Manrope',system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,monospace;

    --ease:cubic-bezier(0.4,0,0.2,1);
}
[data-theme="light"]{
    /* Lyst tema: dyb skovgrøn som hovedfarve, varm råhvid baggrund og en gyldenbrun sekundærfarve. */
    --bg:#F3F1EB;
    --panel:#FCFBF8;
    --panel-sunken:#F0EDE5;
    --panel-hover:#F6F4EE;
    --border:#E4E0D5;
    --border-strong:#CFC9BA;
    --text:#14231C;
    --muted:#4B5A52;
    --subtle:#606C66;         /* kontrast 4,5 også på den mørkeste flade (--panel-sunken) */
    --ask:#9A6A2C;
    --akt:#0B6B4F;
    --akt-soft:#0B6B4F14;
    --on-akt:#FFFFFF;
    --pos:#0B7A55;
    --cross:#B4473A;
    --neutral-series:#8A958F;
    --chart-grid:#E8E4DA;
    --tooltip-bg:#FFFFFF;
    --glow:rgba(11,107,79,0.05);

    --shadow-sm:0 1px 2px rgba(20,35,28,0.05);
    --shadow-md:0 8px 24px -10px rgba(20,35,28,0.14);
    --shadow-lg:0 28px 60px -22px rgba(20,35,28,0.20);
}

*{box-sizing:border-box;}
body{
    margin:0;
    background:var(--bg);
    background-image:radial-gradient(1200px 520px at 50% -240px, var(--glow), transparent 70%);
    background-repeat:no-repeat;
    color:var(--text);
    font-family:var(--font-sans);
    font-size:15px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition:background-color 0.3s var(--ease), color 0.3s var(--ease);
}
:focus-visible{
    outline:2px solid var(--akt);
    outline-offset:2px;
    border-radius:4px;
}

/* ---- Shell ---- */
.page-shell{
    display:flex;
    justify-content:center;
    gap:var(--s5);
    min-height:100vh;
}
.site-content{
    flex:1;
    min-width:0;
    padding:var(--s7) var(--s6);
}

/* ---- Type ---- */
h1{
    font-family:var(--font-display);
    font-weight:500;
    font-size:34px;
    line-height:1.15;
    letter-spacing:-0.015em;
    margin:0 0 var(--s2) 0;
}
.subtitle{
    color:var(--muted);
    font-size:15px;
    margin:0 0 var(--s6) 0;
    max-width:60ch;
}
.eyebrow{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--subtle);
    margin-bottom:var(--s4);
}
.tool-intro{
    color:var(--muted);
    font-size:15px;
    line-height:1.65;
    margin:0 0 var(--s5) 0;
    max-width:74ch;
}
.tool-intro strong{
    color:var(--text);
    font-weight:600;
}
.explainer{
    margin:var(--s4) 0 0 0;
    padding-top:var(--s4);
    border-top:1px solid var(--border);
    font-size:13.5px;
    line-height:1.7;
    color:var(--muted);
}

/* ---- Layout ---- */
/* Titlen må ikke løbe ind under de faste knapper (hjælp, tandhjul og feedback under). */
.topbar > div:first-child{ padding-right:104px; }
.topbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:var(--s4);
    max-width:1600px;
    flex-wrap:wrap;
}
.layout{
    display:grid;
    grid-template-columns:minmax(280px, 340px) 1fr;
    gap:var(--s5);
    max-width:1600px;
}
.layout-net-worth{
    display:grid;
    grid-template-columns:24.5fr 75.5fr;
    gap:var(--s5);
    max-width:1600px;
}
.layout-wide{
    display:grid;
    grid-template-columns:33fr 67fr;
    gap:var(--s5);
    max-width:1600px;
}
.full-width-above{
    max-width:1600px;
    margin-bottom:var(--s5);
}
.full-width-below{
    max-width:1600px;
    margin-top:var(--s5);
}
.full-width-above, .full-width-below{
    display:flex;
    flex-direction:column;
    gap:var(--s5);
}

/* ---- Rhythm inside a panel ---- */
.field .number-input:not(:last-child){ margin-bottom:var(--s2); }
.toggle-row + .toggle-row{ margin-top:var(--s3); }
.toggle-row + .field{ margin-top:var(--s5); }
.tool-head + .btn{ margin-bottom:var(--s5); }
.btn + .btn{ margin-left:var(--s2); }
.panel > details{ margin-top:var(--s3); }
.panel > * + .stats{ margin-top:var(--s4); }
.panel > .btn + .chart-wrap,
.panel > .chart-wrap + .data-table-wrap{ margin-top:var(--s5); }
.panel > .data-table-wrap + .btn,
.panel > .explainer + .btn{ margin-top:var(--s4); }
.eyebrow-section{ margin-top:var(--s5); }
.explainer-lead{ margin:0 0 var(--s4) 0; padding-top:0; border-top:none; }
.summary-toggle{ cursor:pointer; color:var(--muted); font-size:13.5px; }
.btn-sm{ font-size:12px; padding:6px 12px; }
@media (max-width:1100px){
    .layout, .layout-net-worth{grid-template-columns:minmax(0, 1fr);}
    .panel.chart-panel-sticky{ position:static; }
    .chart-panel-sticky .chart-wrap{ height:360px; }
}
@media (max-width:820px){
    .layout-wide{grid-template-columns:minmax(0, 1fr);}
}

/* ---- Panel ---- */
.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:var(--s5);
    box-shadow:var(--shadow-sm);
}
.panel.chart-panel{
    display:flex;
    flex-direction:column;
}
.chart-wrap{
    position:relative;
    flex:1;
    min-height:300px;
}
.chart-wrap.chart-wrap-standalone{
    flex:none;
    min-height:0;
    height:380px;
}
.chart-empty-state{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:var(--s5);
    color:var(--subtle);
    font-size:14px;
    line-height:1.6;
    pointer-events:none;
}

/* ---- Tabs ---- */
.top-tabs{
    display:flex;
    gap:var(--s2);
    margin-bottom:var(--s5);
    flex-wrap:wrap;
}
.top-tab-btn{
    background:transparent;
    border:1px solid var(--border);
    color:var(--muted);
    font-family:var(--font-sans);
    font-weight:600;
    font-size:14px;
    letter-spacing:0.01em;
    padding:10px 20px;
    border-radius:var(--r-pill);
    cursor:pointer;
    transition:all 0.18s var(--ease);
}
.top-tab-btn:hover{
    color:var(--text);
    background:var(--panel);
    border-color:var(--border-strong);
}
.top-tab-btn.active{
    background:var(--akt);
    color:var(--on-akt);
    border-color:var(--akt);
    box-shadow:var(--shadow-sm);
}
.tabs{
    display:flex;
    gap:var(--s5);
    margin-bottom:var(--s5);
    border-bottom:1px solid var(--border);
    flex-wrap:wrap;
}
.tab-btn{
    background:transparent;
    border:none;
    color:var(--muted);
    font-family:var(--font-sans);
    font-size:14.5px;
    font-weight:500;
    padding:0 0 var(--s3) 0;
    margin-bottom:-1px;
    border-bottom:2px solid transparent;
    cursor:pointer;
    transition:color 0.18s var(--ease);
}
.tab-btn:hover{
    color:var(--text);
}
.tab-btn.active{
    color:var(--akt);
    border-bottom-color:var(--akt);
    font-weight:600;
}

/* ---- Fields ---- */
.field{
    margin-bottom:var(--s5);
}
.field:last-child{
    margin-bottom:0;
}
.field label{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:var(--s3);
    font-size:13.5px;
    color:var(--muted);
    margin-bottom:var(--s2);
}
.field label .val{
    font-family:var(--font-mono);
    color:var(--text);
    font-weight:500;
    font-size:13px;
}
.number-input{
    width:100%;
    background:var(--panel-sunken);
    border:1px solid var(--border);
    border-radius:var(--r-sm);
    color:var(--text);
    font-family:var(--font-mono);
    font-size:14px;
    padding:10px 12px;
    transition:border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.number-input:hover{
    border-color:var(--border-strong);
}
.number-input:focus{
    outline:none;
    border-color:var(--akt);
    box-shadow:0 0 0 3px var(--akt-soft);
}
.limit-hint{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--subtle);
    margin-top:var(--s2);
}

/* ---- Range ---- */
input[type=range]{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:6px;
    margin:var(--s2) 0;
    border-radius:var(--r-pill);
    background:var(--panel-sunken);
    border:1px solid var(--border);
    cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--akt);
    border:3px solid var(--panel);
    box-shadow:var(--shadow-sm);
    transition:transform 0.15s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{
    transform:scale(1.15);
}
input[type=range]::-moz-range-thumb{
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--akt);
    border:3px solid var(--panel);
    box-shadow:var(--shadow-sm);
}

/* ---- Toggle ---- */
.toggle-row{
    display:flex;
    align-items:flex-start;
    gap:var(--s3);
    font-size:13.5px;
    line-height:1.5;
    color:var(--text);
    cursor:pointer;
    user-select:none;
}
.toggle-row input[type=checkbox]{
    appearance:none;
    -webkit-appearance:none;
    flex-shrink:0;
    width:18px;
    height:18px;
    margin:1px 0 0 0;
    border:1.5px solid var(--border-strong);
    border-radius:6px;
    background:var(--panel-sunken);
    cursor:pointer;
    position:relative;
    transition:all 0.18s var(--ease);
}
.toggle-row input[type=checkbox]:hover{
    border-color:var(--akt);
}
.toggle-row input[type=checkbox]:checked{
    background:var(--akt);
    border-color:var(--akt);
}
.toggle-row input[type=checkbox]:checked::after{
    content:'';
    position:absolute;
    left:5.5px;
    top:2px;
    width:4px;
    height:9px;
    border:solid var(--on-akt);
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

/* ---- Legend ---- */
.legend{
    display:flex;
    gap:var(--s5);
    margin-bottom:var(--s4);
    font-family:var(--font-mono);
    font-size:11.5px;
    flex-wrap:wrap;
}
.legend span{display:flex;align-items:center;gap:var(--s2);color:var(--muted);}
.dot{width:8px;height:8px;border-radius:var(--r-pill);display:inline-block;flex-shrink:0;}

/* ---- Stats ---- */
.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
    gap:var(--s4);
}
.stat{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:var(--s5);
    box-shadow:var(--shadow-sm);
}
.stat .label{
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--subtle);
    text-transform:uppercase;
    letter-spacing:0.12em;
    margin-bottom:var(--s3);
}
.stat .value{
    font-family:var(--font-mono);
    font-size:25px;
    font-weight:500;
    letter-spacing:-0.02em;
    line-height:1.2;
}
.stat .value.ask{color:var(--ask);}
.stat .value.akt{color:var(--akt);}
.stat .value.cross{color:var(--cross);}
.stat .sub{
    font-size:12.5px;
    color:var(--muted);
    margin-top:var(--s2);
    font-family:var(--font-mono);
}
/* .stat foran, så den slår farven fra .stat .value.ask/.akt (fx 50/30/20 uden for målet). */
.value.negative,
.stat .value.negative{
    color:var(--cross);
}

/* ---- Buttons ---- */
.btn{
    background:var(--panel);
    border:1px solid var(--border);
    color:var(--text);
    font-family:var(--font-sans);
    font-size:13.5px;
    font-weight:600;
    padding:10px 18px;
    border-radius:var(--r-sm);
    cursor:pointer;
    transition:all 0.18s var(--ease);
}
.btn:hover{
    border-color:var(--akt);
    background:var(--panel-hover);
}
.btn-secondary{
    color:var(--muted);
}
.btn-secondary:hover{
    color:var(--text);
}
.btn-primary{
    background:var(--akt);
    border-color:var(--akt);
    color:var(--on-akt);
}
.btn-primary:hover{
    background:var(--akt);
    filter:brightness(1.08);
}
.btn-danger{
    color:var(--cross);
}
.btn-danger:hover{
    border-color:var(--cross);
}
.btn-accent{
    border-color:var(--akt);
    color:var(--akt);
}

/* ---- Settings ---- */
.settings-btn{
    position:fixed;
    top:var(--s5);
    right:var(--s5);
    z-index:100;
    background:var(--panel);
    border:1px solid var(--border);
    color:var(--text);
    font-size:17px;
    width:44px;
    height:44px;
    border-radius:var(--r-pill);
    cursor:pointer;
    box-shadow:var(--shadow-md);
    transition:all 0.18s var(--ease);
}
.settings-btn:hover{
    border-color:var(--akt);
    transform:rotate(45deg);
}
.settings-panel{
    position:fixed;
    top:76px;
    right:var(--s5);
    z-index:99;
    width:300px;
    box-shadow:var(--shadow-lg);
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:var(--s5);
}

/* ---- Banner ---- */
.intro-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s4);
    background:var(--akt-soft);
    border:1px solid var(--border);
    border-radius:var(--r-md);
    padding:var(--s4) var(--s5);
    margin-bottom:var(--s5);
    font-size:13.5px;
    line-height:1.6;
    color:var(--muted);
    max-width:1600px;
}
/* Kun lukkeknappen (✕) - ikke .btn-knapperne i .banner-actions. */
.intro-banner > button{
    background:transparent;
    border:none;
    color:var(--subtle);
    font-size:17px;
    cursor:pointer;
    flex-shrink:0;
    line-height:1;
    padding:var(--s1) var(--s2);
    border-radius:var(--r-sm);
    transition:all 0.18s var(--ease);
}
.intro-banner > button:hover{
    color:var(--text);
    background:var(--panel);
}

/* ---- Table ---- */
.data-table-wrap{
    max-height:360px;
    overflow-y:auto;
    border:1px solid var(--border);
    border-radius:var(--r-md);
}
table.data-table{
    width:100%;
    border-collapse:collapse;
    font-family:var(--font-mono);
    font-size:12.5px;
}
table.data-table thead th{
    position:sticky;
    top:0;
    background:var(--panel-sunken);
    color:var(--subtle);
    text-align:right;
    font-weight:500;
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:var(--s3) var(--s4);
    border-bottom:1px solid var(--border);
    white-space:nowrap;
}
table.data-table thead th:first-child{ text-align:left; }
table.data-table td{
    text-align:right;
    padding:10px var(--s4);
    border-bottom:1px solid var(--border);
    color:var(--text);
}
table.data-table tbody tr:last-child td{ border-bottom:none; }
table.data-table td:first-child{ text-align:left; color:var(--muted); }
table.data-table tbody tr{ transition:background 0.12s var(--ease); }
table.data-table tbody tr:hover{ background:var(--panel-hover); }
/* Historiktabellerne (Formue og Portefølje): på telefoner en kort dato ("sep. 26"), der bliver
   stående til venstre, når man ruller tabellen til siden (tableDateHtml i ui.js). */
.date-short{ display:none; }
@media (max-width:640px){
    .history-table .date-long{ display:none; }
    .history-table .date-short{ display:inline; }
    .history-table th:first-child, .history-table td:first-child{
        position:sticky; left:0; z-index:1; background:var(--panel);
        padding-right:var(--s3); box-shadow:1px 0 0 var(--border);
    }
    .history-table thead th:first-child{ z-index:2; background:var(--panel-sunken); }
    .history-table tbody tr:hover td:first-child{ background:var(--panel-hover); }
}

/* ---- Budget ---- */
.category-group-label{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--subtle);
    margin:var(--s4) 0 var(--s2) 0;
}
.category-list{ display:flex; flex-direction:column; gap:var(--s1); }
.category-row{
    display:flex;
    align-items:center;
    gap:var(--s3);
    width:100%;
    padding:10px var(--s3);
    background:transparent;
    border:1px solid transparent;
    border-radius:var(--r-sm);
    color:var(--text);
    font-family:var(--font-sans);
    font-size:14px;
    text-align:left;
    cursor:pointer;
    transition:background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.category-row:hover{ background:var(--panel-hover); border-color:var(--border); }
.category-row .cat-name{ flex:1; min-width:0; }
.category-row .cat-count{ font-size:12px; color:var(--subtle); white-space:nowrap; }
.category-row .cat-total{ font-family:var(--font-mono); color:var(--akt); font-weight:500; white-space:nowrap; min-width:9ch; text-align:right; }
.category-row .cat-total.is-empty{ color:var(--subtle); }
.category-row::after{
    content:'';
    width:7px; height:7px; flex-shrink:0;
    border-right:1.5px solid var(--subtle);
    border-bottom:1.5px solid var(--subtle);
    transform:rotate(-45deg);
}
.add-category-btn{ margin-top:var(--s4); }

.budget-item-head,
.budget-item-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 120px 118px 34px;
    gap:var(--s2);
    align-items:center;
}
.budget-item-head{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--subtle);
    margin-bottom:var(--s2);
}
.budget-item-row{ margin-bottom:var(--s2); }
.budget-item-row .number-input{ margin:0; }
.icon-remove{
    width:34px; height:34px;
    background:transparent;
    border:1px solid transparent;
    border-radius:var(--r-sm);
    color:var(--subtle);
    font-size:16px;
    cursor:pointer;
}
.icon-remove:hover{ color:var(--cross); border-color:var(--border); background:var(--panel-hover); }
.dialog-hint{ margin:0 0 var(--s4) 0; font-size:13.5px; color:var(--muted); }
.dialog-total{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-top:var(--s4); padding-top:var(--s4);
    border-top:1px solid var(--border);
    font-size:13.5px; color:var(--muted);
}
.dialog-total strong{ font-family:var(--font-mono); font-size:18px; font-weight:500; color:var(--akt); }
.dialog-section{ margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--border); }
.empty-note{ font-size:13.5px; color:var(--subtle); margin:0 0 var(--s3) 0; }
select.number-input{
    font-family:var(--font-sans); cursor:pointer;
    /* Egen pil, så vælgeren ligner de andre felter - også på iPhone, der ellers tegner sin egen tynde version. */
    -webkit-appearance:none; appearance:none; padding-right:36px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237A87A1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center;
}

/* ---- Progress ---- */
.milestone-row{
    margin-bottom:var(--s4);
}
.milestone-row:last-child{
    margin-bottom:0;
}
.milestone-label{
    display:flex;
    justify-content:space-between;
    gap:var(--s3);
    font-size:13.5px;
    color:var(--muted);
    margin-bottom:var(--s2);
}
.milestone-label .achieved{
    color:var(--ask);
    font-family:var(--font-mono);
    font-size:12px;
}
.progress-track{
    background:var(--panel-sunken);
    border:1px solid var(--border);
    border-radius:var(--r-pill);
    height:10px;
    overflow:hidden;
}
.progress-fill{
    background:var(--akt);
    height:100%;
    border-radius:var(--r-pill);
    transition:width 0.4s var(--ease);
}

/* ---- Fun comparison ---- */
.fun-item{
    display:flex;
    align-items:baseline;
    gap:var(--s3);
    padding:var(--s2) 0;
    border-bottom:1px solid var(--border);
    font-size:14px;
}
.fun-item:last-child{ border-bottom:none; }
.fun-emoji{ width:1.6em; flex-shrink:0; text-align:center; font-size:18px; line-height:1; }
.fun-item strong{ font-family:var(--font-mono); font-weight:500; color:var(--akt); min-width:6ch; text-align:right; }

/* ---- Calculators ---- */
.details-body{ margin-top:var(--s4); }

/* ---- Field help ---- */
.label-row{ display:flex; align-items:center; gap:6px; margin-bottom:var(--s2); }
.label-row label{ margin-bottom:0 !important; }
.help-tip{
    flex-shrink:0; width:18px; height:18px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid var(--border-strong); border-radius:var(--r-pill);
    color:var(--subtle); font-family:var(--font-sans); font-size:11px; font-weight:700; line-height:1;
    cursor:pointer; transition:all 0.15s var(--ease);
}
.help-tip:hover{ color:var(--text); border-color:var(--akt); }
.help-tip[aria-expanded="true"]{ color:var(--akt); border-color:var(--akt); background:var(--akt-soft); }
.help-pop{
    margin:0 0 var(--s2) 0; padding:var(--s2) var(--s3);
    background:var(--panel-sunken); border:1px solid var(--border); border-radius:var(--r-sm);
    font-size:13px; line-height:1.55; color:var(--muted);
}
.help-pop[hidden]{ display:none; }
.toggle-line{ display:flex; align-items:flex-start; gap:var(--s2); }
/* Teksten må krympe og ombryde, så "?" altid bliver inde i panelet. */
.toggle-line > .toggle-row{ flex:1 1 auto; min-width:0; }
.toggle-line .help-tip{ margin-top:1px; flex-shrink:0; }
.toggle-text{ min-width:0; }
.toggle-wrap{ min-width:0; max-width:100%; }
/* Information, ikke en advarsel: neutral ramme i stedet for notice-rød. */
.notice.source-note{ max-width:1600px; margin:0 0 var(--s5); border-color:var(--border-strong); background:var(--panel); color:var(--muted); }
.toggle-wrap .help-pop{ margin:var(--s2) 0 0 0; }
.toggle-wrap + .toggle-wrap, .toggle-row + .toggle-wrap, .toggle-wrap + .toggle-row{ margin-top:var(--s3); }
.toggle-wrap + .field{ margin-top:var(--s5); }

/* ---- Tool intro box ---- */
.tool-head{ display:flex; align-items:flex-start; gap:var(--s3); margin-bottom:var(--s5); max-width:1600px; }
.tool-about{
    flex:1; min-width:0; max-width:820px;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md);
    padding:var(--s3) var(--s4);
}
.tool-about summary{
    cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--s2);
    font-weight:600; font-size:14px; color:var(--text);
}
.tool-about summary::-webkit-details-marker{ display:none; }
.tool-about summary::before{
    content:'?'; width:20px; height:20px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--akt); border-radius:var(--r-pill); color:var(--akt); font-size:12px;
}
.tool-about summary::after{ content:'+'; margin-left:auto; color:var(--subtle); font-weight:400; }
.tool-about[open] summary::after{ content:'−'; }
.tool-about .tool-intro{ margin:var(--s3) 0 var(--s1) 0; }
.tool-head .tool-actions{ margin:0; flex-shrink:0; padding-top:var(--s2); }
.wealth-table-btn{ margin-top:var(--s4); }
.goal-row{
    display:block; width:100%; margin-bottom:var(--s3); padding:var(--s4);
    background:var(--panel-sunken); border:1px solid var(--border); border-radius:var(--r-md);
    color:var(--text); font:inherit; text-align:left; cursor:pointer;
    transition:border-color 0.15s var(--ease);
}
.goal-row:hover{ border-color:var(--akt); }
.goal-head{ display:flex; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s2); flex-wrap:wrap; }
.goal-name{ font-weight:600; }
.goal-amount{ font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.goal-facts{ margin-top:var(--s2); font-size:12.5px; color:var(--subtle); font-family:var(--font-mono); }
.goal-status{ margin-top:var(--s1); font-size:13.5px; color:var(--muted); }
.goal-status.is-good{ color:var(--pos); }
.goal-status.is-bad{ color:var(--cross); }
.progress-fill.is-done{ background:var(--pos); }
.wealth-table-wrap{ max-height:55vh; margin-bottom:var(--s4); }
.dialog.dialog-table{ width:min(980px, calc(100vw - 32px)); }
/* Alderstabellen: tabellen får den ledige højde og scroller alene, så teksten under den altid kan ses. */
.dialog-table .dialog-body{ display:flex; flex-direction:column; overflow:hidden; }
.wealth-dialog{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.wealth-dialog .wealth-table-wrap{ max-height:none; flex:1 1 auto; min-height:140px; overflow:auto; }
.wealth-dialog .explainer{ flex-shrink:0; margin-bottom:0; }
.wealth-table-wrap table.data-table{ min-width:0; }
.wealth-table-wrap table.data-table th,
.wealth-table-wrap table.data-table td{ padding:8px 10px; font-size:12.5px; white-space:nowrap; }
table.data-table tr.is-highlight td{ background:var(--akt-soft); color:var(--text); font-weight:600; }
table.data-table tr.is-highlight td:first-child{ color:var(--akt); }
.tool-actions{ margin:calc(-1 * var(--s3)) 0 var(--s5) 0; }
.intro-banner[hidden]{ display:none; }
.backup-banner{ border-color:var(--akt); }
.banner-actions{ display:flex; gap:var(--s2); flex-shrink:0; flex-wrap:wrap; }
.banner-actions .btn + .btn{ margin-left:0; }
.link-btn{ background:none; border:none; padding:0; color:var(--akt); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; }
.backup-status{ margin:0 0 var(--s3) 0; font-size:12.5px; color:var(--muted); }
.backup-status.is-stale{ color:var(--cross); }
.buffer-hero{ margin-bottom:var(--s4); }
.buffer-scale{ position:relative; padding-bottom:var(--s5); }
.buffer-marks{ position:relative; height:0; }
.buffer-marks span{
    position:absolute; top:var(--s2); transform:translateX(-50%);
    font-family:var(--font-mono); font-size:11px; color:var(--subtle); white-space:nowrap;
}
.buffer-marks span:last-child{ transform:translateX(-100%); }
.save-status{ margin:calc(-1 * var(--s3)) 0 var(--s4) 0; font-size:12px; color:var(--subtle); }
.save-status.is-saved{ color:var(--pos); }
.panel.chart-panel-sticky{ align-self:start; position:sticky; top:var(--s5); }
.chart-panel-sticky .chart-wrap{ flex:none; min-height:0; height:520px; }
.panel > details + .field,
.panel > .field + details{ margin-top:var(--s4); }
.result-hero{
    padding:var(--s5); margin-bottom:var(--s2);
    background:var(--panel-sunken); border:1px solid var(--border); border-radius:var(--r-md);
}
.result-label{ font-size:13.5px; color:var(--muted); }
.result-value{ margin-top:var(--s1); font-family:var(--font-mono); font-size:34px; font-weight:500; letter-spacing:-0.02em; color:var(--akt); line-height:1.15; }
.result-sub{ margin-top:var(--s2); font-size:13.5px; color:var(--muted); }
.notice{
    margin-top:var(--s4); padding:var(--s3) var(--s4);
    border:1px solid var(--cross); border-radius:var(--r-md);
    background:var(--panel-sunken); color:var(--text);
    font-size:13.5px; line-height:1.6;
}
.notice[hidden]{ display:none; }
.limit-row{ margin-bottom:var(--s4); }
.limit-row:last-child{ margin-bottom:0; }
.limit-row-head{ display:flex; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s2); font-size:13.5px; }
.limit-row-title{ color:var(--muted); }
.limit-row-value{ font-family:var(--font-mono); color:var(--text); }
.limit-row .progress-fill{ background:var(--neutral-series); }
.limit-row.is-binding .progress-fill{ background:var(--akt); }
.limit-row.is-binding .limit-row-title{ color:var(--text); font-weight:600; }
.limit-row.is-binding .limit-row-value{ color:var(--akt); }
.hint-warning{ color:var(--cross); }
table.data-table tr.is-total td{ color:var(--text); font-weight:600; border-top:1px solid var(--border-strong); }
table.data-table td.is-positive{ color:var(--akt); }
table.data-table td.is-negative{ color:var(--ask); }
#lcBreakdown td:first-child{ color:var(--muted); }
.debt-row{
    padding:var(--s3) var(--s4) var(--s4); margin-bottom:var(--s3);
    background:var(--panel-sunken); border:1px solid var(--border); border-radius:var(--r-md);
}
.debt-row-head{ display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2); }
.debt-name{
    flex:1; min-width:0; padding:var(--s1) 0;
    background:transparent; border:none; border-bottom:1px dashed var(--border-strong);
    color:var(--text); font-family:var(--font-sans); font-size:14.5px; font-weight:600;
}
.debt-name:focus{ outline:none; border-bottom-color:var(--akt); }
.debt-row-fields{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s2); }
.debt-field{ display:flex; flex-direction:column; gap:var(--s1); min-width:0; }
/* Etiketterne må gerne fylde to linjer; felterne står stadig på linje, fordi de skubbes ned i bunden. */
.debt-field-label{ font-size:11.5px; line-height:1.35; color:var(--subtle); }
.debt-field .number-input{ margin:0; margin-top:auto; padding:8px 10px; }
.compare-note{ max-width:1600px; margin:0 0 var(--s5); font-size:14px; line-height:1.6; color:var(--muted); }

/* ---- Monthly status ---- */
.monthly-status-btn{ margin-left:auto; }
.status-date{ max-width:220px; margin-bottom:var(--s4); }
.existing-note:not(:empty){
    display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
    margin:calc(-1 * var(--s2)) 0 var(--s4) 0; padding:var(--s3) var(--s4);
    background:var(--akt-soft); border:1px solid var(--border); border-radius:var(--r-md);
    font-size:13.5px; color:var(--text);
}
.status-section{ border:none; margin:0 0 var(--s4) 0; padding:0; min-width:0; }
.status-section > legend{ padding:0; margin-bottom:var(--s3); }
.status-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--s3) var(--s4); }
.status-field{ display:flex; flex-direction:column; gap:var(--s1); margin:0; }
.status-label{ font-size:13px; color:var(--muted); }
.status-field .limit-hint{ margin-top:0; }
.status-summary-box{
    margin-top:var(--s2); padding:var(--s4);
    background:var(--panel-sunken); border:1px solid var(--border); border-radius:var(--r-md);
}
.status-summary-box .eyebrow{ margin-bottom:var(--s3); }
.status-summary{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--s3); margin:0; }
.status-summary dt{ font-size:12px; color:var(--subtle); }
.status-summary dd{ margin:2px 0 0 0; font-family:var(--font-mono); font-size:15px; color:var(--text); }
.status-summary dd.is-strong{ color:var(--akt); font-weight:500; }

/* ---- Dialog ---- */
.dialog{
    padding:0;
    width:min(560px, calc(100vw - 32px));
    max-height:min(86vh, 780px);
    background:var(--panel);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
}
.dialog-wide{ width:min(760px, calc(100vw - 32px)); }
.dialog::backdrop{ background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); }
[data-theme="light"] .dialog::backdrop{ background:rgba(22,33,58,0.28); }
.dialog-inner{ display:flex; flex-direction:column; max-height:inherit; }
.dialog-header{ display:flex; align-items:center; gap:var(--s3); padding:var(--s5) var(--s5) var(--s3) var(--s5); }
.dialog-title{ flex:1; margin:0; font-family:var(--font-display); font-size:22px; font-weight:500; line-height:1.2; }
.dialog-close{
    background:transparent; border:none; color:var(--subtle);
    font-size:22px; line-height:1; padding:var(--s1) var(--s2);
    border-radius:var(--r-sm); cursor:pointer;
}
.dialog-close:hover{ color:var(--text); background:var(--panel-hover); }
/* Kun indholdet scroller; titel og knapper bliver stående. min-height:0 lader det krympe, så intet gemmer sig under knapperne. */
.dialog{ overflow:hidden; }
.dialog-header, .dialog-footer{ flex-shrink:0; }
.dialog-body{ padding:0 var(--s5) var(--s5) var(--s5); overflow-y:auto; flex:1 1 auto; min-height:0; }
.dialog-text{ margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); }
.dialog-text + .change-list{ margin-top:var(--s4); }
.dialog-footer{
    display:flex; justify-content:flex-end; gap:var(--s2); flex-wrap:wrap;
    padding:var(--s4) var(--s5);
    border-top:1px solid var(--border);
    background:var(--panel-sunken);
}
.dialog-footer .btn + .btn{ margin-left:0; }
.change-list{
    display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4);
    margin:0; padding:var(--s4);
    background:var(--panel-sunken); border:1px solid var(--border); border-radius:var(--r-md);
    font-size:13.5px;
}
.change-list dt{ color:var(--muted); }
.change-list dd{ margin:0; font-family:var(--font-mono); text-align:right; }
.change-from{ color:var(--subtle); text-decoration:line-through; }
.change-to{ color:var(--text); }
.field-error{ margin-top:var(--s2); font-size:12.5px; color:var(--cross); }
.number-input[aria-invalid="true"]{ border-color:var(--cross); }
.calc-hint{ margin-top:var(--s2); font-family:var(--font-mono); font-size:12.5px; color:var(--akt); }

/* ---- Toast ---- */
.toast-region{
    position:fixed; left:50%; bottom:var(--s5); transform:translateX(-50%);
    /* Fast bredde efter indholdet (højst skærmen minus kanter), så en længere besked ikke presses sammen. */
    width:max-content; max-width:calc(100vw - 32px);
    z-index:300; display:flex; flex-direction:column; align-items:center; gap:var(--s2);
    pointer-events:none;
}
.toast{
    pointer-events:auto;
    display:flex; align-items:center; gap:var(--s4);
    padding:var(--s3) var(--s4);
    background:var(--panel-hover); color:var(--text);
    border:1px solid var(--border-strong); border-radius:var(--r-md);
    box-shadow:var(--shadow-lg);
    font-size:13.5px;
    animation:toast-in 0.2s var(--ease);
}
.toast-leaving{ opacity:0; transform:translateY(6px); transition:all 0.2s var(--ease); }
.toast-action{
    flex-shrink:0; white-space:nowrap;   /* knappen står på én linje, også ved en lang besked */
    background:transparent; border:none; padding:0;
    color:var(--akt); font-family:var(--font-sans); font-size:13.5px; font-weight:600;
    cursor:pointer;
}
.toast-action:hover{ text-decoration:underline; }
.toast-actions{ flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2); }
.toast-close{
    margin:-4px -6px -4px calc(-1 * var(--s2)); padding:2px 6px; border:0; background:transparent; cursor:pointer;
    color:var(--muted); font-size:20px; line-height:1;
}
.toast-close:hover{ color:var(--text); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* ---- Small screens ---- */
@media (max-width:640px){
    .site-content{ padding:var(--s5) var(--s4); }
    h1{ font-size:26px; }
    .subtitle{ font-size:14px; margin-bottom:var(--s5); }
    .panel, .stat{ padding:var(--s4); border-radius:var(--r-md); }
    .top-tabs{ flex-wrap:wrap; }
    .tabs{ flex-wrap:wrap; gap:var(--s4); }
    .top-tab-btn{ padding:8px 16px; font-size:13px; }
    .tab-btn{ font-size:13.5px; }
    .stats{ grid-template-columns:1fr; }
    .data-table-wrap{ overflow-x:auto; }
    /* Ingen fast mindstebredde: celler brydes ikke (se nedenfor), og brede tabeller scroller i deres boks. */
    .settings-btn{ top:var(--s4); right:var(--s4); }
    .help-btn{ right:calc(var(--s4) + 52px); }
    .settings-panel{ right:var(--s4); left:var(--s4); width:auto; }
    .budget-item-head{ display:none; }
    .debt-row-fields{ grid-template-columns:1fr; }
    .result-value{ font-size:28px; }
    .budget-item-row{ grid-template-columns:minmax(0,1fr) 34px; padding-bottom:var(--s3); margin-bottom:var(--s3); border-bottom:1px solid var(--border); }
    .budget-item-row > :nth-child(2),
    .budget-item-row > :nth-child(3){ grid-column:1; }
    .budget-item-row > .icon-remove{ grid-row:1; grid-column:2; }
}
.help-btn{ right:calc(var(--s5) + 52px); font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--muted); }
.help-btn:hover{ transform:none; color:var(--text); }
/* Feedback: en mindre knap under tandhjulet. Indstillingspanelet lægger sig ovenpå. */
.feedback-btn{
    top:calc(var(--s5) + 54px); right:calc(var(--s5) + 4px); z-index:98;
    width:36px; height:36px; display:grid; place-items:center; color:var(--muted);
}
.feedback-btn[hidden]{ display:none; }
.feedback-btn:hover{ transform:none; color:var(--akt); }
.feedback-message{ resize:vertical; min-height:120px; font-family:var(--font-sans); line-height:1.5; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:640px){
    /* Efter grundreglerne ovenfor, så de ikke overskriver mobilplaceringen. */
    .help-btn{ right:calc(var(--s4) + 52px); }
    .feedback-btn{ top:calc(var(--s4) + 54px); right:calc(var(--s4) + 4px); }
}
.faq details{ border-bottom:1px solid var(--border); padding:var(--s3) 0; }
.faq details:last-child{ border-bottom:none; }
.faq summary{ cursor:pointer; font-weight:600; color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:var(--s3); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--subtle); font-weight:400; }
.faq details[open] summary::after{ content:'−'; }
.faq p{ margin:var(--s2) 0 0 0; font-size:14px; line-height:1.65; color:var(--muted); }
.faq a, .explainer a{ color:var(--akt); }
@media (prefers-reduced-motion:reduce){
    *{ transition:none !important; animation:none !important; }
}

/* ---- App-installation ---- */
#installAppRow[hidden]{ display:none; }
.install-steps{ margin:0 0 var(--s4); padding-left:1.4em; line-height:1.8; }

/* hidden skal altid skjule - også elementer, hvis klasse sætter display (fx .btn). */
[hidden]{ display:none !important; }

/* ---- Hent mine tal (FIRE) ---- */
.import-row{ align-items:center; padding:var(--s2) 0; border-bottom:1px solid var(--border); }
.import-row .toggle-text{ flex:1; }
.import-amount{ font-family:var(--font-mono); font-size:13px; color:var(--muted); white-space:nowrap; }
.import-row input:disabled + .toggle-text{ color:var(--subtle); }
.import-total{ margin:var(--s3) 0 0; text-align:right; font-size:14px; }
.import-total strong{ font-family:var(--font-mono); }
.tool-head .tool-actions{ display:flex; gap:var(--s2); flex-wrap:wrap; justify-content:flex-end; }
.tool-head .tool-actions .btn + .btn{ margin-left:0; }

/* ---- Udskriv overblik ---- */
#printReport{ display:none; }
@media print{
    @page{ margin:16mm 14mm; }
    html, body{ background:#fff !important; color:#111 !important; transition:none !important; }
    body::before, body::after{ display:none !important; }
    body > *:not(#printReport){ display:none !important; }
    #printReport{ display:block; color:#111; font-family:var(--font-sans); font-size:10.5pt; line-height:1.45; }
    .report-head{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid #8F661A; padding-bottom:6pt; margin-bottom:12pt; }
    .report-head h1{ font-family:var(--font-display); font-size:20pt; font-weight:600; margin:0; color:#16213A; }
    .report-head p{ margin:0; color:#555; }
    .report-section{ break-inside:avoid; margin-bottom:14pt; }
    .report-section h2{ font-family:var(--font-display); font-size:13pt; font-weight:600; margin:0 0 6pt; color:#16213A; }
    .report-table{ width:100%; border-collapse:collapse; }
    .report-table th{ text-align:left; font-size:8.5pt; text-transform:uppercase; letter-spacing:0.04em; color:#666; border-bottom:1px solid #999; padding:3pt 4pt; }
    .report-table td{ border-bottom:1px solid #ddd; padding:3pt 4pt; }
    .report-table td:last-child, .report-table th:last-child{ text-align:right; font-family:var(--font-mono); white-space:nowrap; }
    .report-table tr.is-total td{ font-weight:600; border-bottom:none; }
    .report-table tr.is-total:first-of-type td{ border-top:1px solid #999; }
    .report-note{ margin:5pt 0 0; color:#444; font-size:9.5pt; }
    .report-foot{ margin-top:16pt; font-size:8.5pt; color:#777; border-top:1px solid #ddd; padding-top:6pt; }
}

/* ---- ETF'er og fonde ---- */
.etf-lookup{ max-width:1600px; margin-bottom:var(--s5); }
.etf-search{ font-family:var(--font-sans); }
.etf-results:empty{ display:none; }
.etf-hit-list{ list-style:none; margin:0 0 var(--s3); padding:0; }
.etf-hit{ display:grid; grid-template-columns:1fr auto; gap:2px var(--s3); align-items:center; padding:var(--s3) 0; border-bottom:1px solid var(--border); }
.etf-hit-name{ font-weight:600; color:var(--text); }
.etf-hit-meta{ grid-column:1; font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.etf-badge{ grid-row:1 / span 2; grid-column:2; font-size:12px; font-weight:600; color:var(--pos); border:1px solid var(--pos); border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap; }
.etf-verdict{ margin:var(--s3) 0 0; padding:var(--s3) var(--s4); border-radius:var(--r-md); background:var(--panel-sunken); font-size:13.5px; line-height:1.6; border:1px solid var(--border); }
.etf-verdict p{ margin:0 0 var(--s2); }
.etf-verdict p:last-child{ margin-bottom:0; }
.etf-verdict.is-on{ border-color:var(--pos); }
.etf-verdict.is-off{ border-color:var(--cross); }
@media (max-width:640px){
    .etf-hit{ grid-template-columns:1fr; }
    .etf-badge{ grid-row:auto; grid-column:1; justify-self:start; margin-top:var(--s1); }
}
/* Regeltabellen er tekst, ikke tal: venstrestillet og i brødtekst-skriften. */
table.data-table.etf-rules th, table.data-table.etf-rules td{ text-align:left; font-family:var(--font-sans); font-size:13px; line-height:1.45; vertical-align:top; }
table.data-table.etf-rules td:first-child{ color:var(--text); font-weight:600; }
.stat.is-dim .value{ opacity:0.45; }

/* Ret/Slet i historiktabellerne */
.row-actions{ display:flex; gap:var(--s2); justify-content:flex-end; }
.row-actions .btn + .btn{ margin-left:0; }

/* Lille to-knaps-vælger (fx Gæld tilbage / Rente betalt) */
.seg{ display:inline-flex; align-self:flex-start; padding:3px; margin-bottom:var(--s3); background:var(--panel-sunken); border:1px solid var(--border); border-radius:var(--r-pill); }
.seg button{ border:0; background:transparent; color:var(--muted); font:600 13px var(--font-sans); padding:6px 14px; border-radius:var(--r-pill); cursor:pointer; transition:all 0.18s var(--ease); }
.seg button:hover{ color:var(--text); }
.seg button[aria-pressed="true"]{ background:var(--panel); color:var(--text); box-shadow:var(--shadow-sm); }
/* Lavine og snebold side om side */
.method-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s4); margin:var(--s4) 0; }
.method{ padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel-sunken); font-size:14px; line-height:1.6; }
.method h3{ display:flex; align-items:center; gap:var(--s2); margin:0 0 var(--s2); font-size:15px; font-weight:600; color:var(--text); }
.method p{ margin:0 0 var(--s2); color:var(--muted); }
.method ul{ margin:0; padding-left:1.2em; color:var(--muted); }
.method li + li{ margin-top:var(--s1); }
@media (max-width:640px){ .method-grid{ grid-template-columns:1fr; } }

/* ---- Telefon: mere luft og mindre scroll ---- */
@media (max-width:640px){
    /* "Hvad gør dette værktøj?" øverst og knapperne under - ikke klemt side om side. */
    .tool-head{ flex-direction:column; align-items:stretch; gap:var(--s3); }
    .tool-head .tool-actions{ justify-content:flex-start; padding-top:0; }
    /* Nøgletal to og to, så et lille tal ikke fylder en hel skærmbredde. */
    .stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s3); }
    .stat{ padding:var(--s4); }
    .stat .label{ font-size:9.5px; letter-spacing:0.08em; margin-bottom:var(--s2); }
    .stat .value{ font-size:20px; overflow-wrap:anywhere; }
    .stat .sub{ font-size:11.5px; }
    .stats > .stat:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* Privatlivsnote i feedbackformularen */
.privacy-note{ margin-top:var(--s4); font-size:12.5px; color:var(--muted); line-height:1.55; }
.privacy-note summary{ cursor:pointer; color:var(--subtle); font-weight:600; }
.privacy-note summary:hover{ color:var(--text); }
.privacy-note p{ margin:var(--s2) 0 0; }

/* ---- Hent data fra fil (synkronisering) ---- */
.sync-rows{ display:flex; flex-direction:column; }
.sync-row{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4); padding:var(--s3) 0; border-bottom:1px solid var(--border); }
.sync-row:last-child{ border-bottom:none; }
.sync-row-text{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; line-height:1.5; }
.sync-row-text span{ color:var(--muted); }
.sync-choice-wrap{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--subtle); flex-shrink:0; max-width:52%; }
.sync-choice{ margin:0; font-size:13px; padding:8px 10px; }
@media (max-width:640px){
    .sync-row{ flex-direction:column; align-items:stretch; }
    .sync-choice-wrap{ max-width:none; }
}

/* Safari (iPhone) giver ellers en gitterkolonne indholdets mindstebredde, så et panel kan blive
   bredere end skærmen. Paneler og felter må altid krympe til kolonnen. */
.layout > *, .layout-wide > *, .layout-net-worth > *{ min-width:0; }
select.number-input, .number-input{ max-width:100%; }
@media (max-width:640px){
    /* iPhone zoomer ind, når man trykker i et felt med tekst under 16 px - og zoomer ikke ud igen. */
    input, select, textarea, .number-input{ font-size:16px; }
}

/* ---- Foldede forklaringer (telefon) ---- */
details.fold > .fold-summary{ display:none; }
@media (max-width:640px){
    details.fold{ margin-top:var(--s3); }
    details.fold > .fold-summary{
        display:inline-flex; align-items:center; gap:var(--s2); cursor:pointer; list-style:none;
        font-size:13px; font-weight:600; color:var(--akt); padding:var(--s1) 0;
    }
    details.fold > .fold-summary::-webkit-details-marker{ display:none; }
    details.fold > .fold-summary::before{ content:'▸'; transition:transform 0.18s var(--ease); }
    details.fold[open] > .fold-summary::before{ transform:rotate(90deg); }
    details.fold > .explainer{ margin-top:var(--s2); }
}
/* En tabelboks må aldrig blive bredere end sit panel - brede tabeller scroller inde i den. */
.data-table-wrap{ max-width:100%; min-width:0; }

/* ---- Ændringer og bedste perioder ---- */
table.data-table td.change-cell.is-up{ color:var(--pos); }
table.data-table td.change-cell.is-down{ color:var(--cross); }
.change-pct{ color:var(--subtle); font-size:0.9em; }
.best-periods{ list-style:none; margin:0; padding:0; counter-reset:best; }
.best-period{ counter-increment:best; display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--border); font-size:14px; }
.best-period:last-child{ border-bottom:none; }
.best-period-when{ display:flex; align-items:baseline; gap:var(--s3); color:var(--muted); }
.best-period-when::before{ content:counter(best) "."; font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--akt); min-width:1.2em; }
.best-period-value{ font-family:var(--font-mono); color:var(--pos); white-space:nowrap; }
@media (max-width:640px){ .best-period{ flex-direction:column; gap:2px; } }
/* Tal og datoer i tabeller brydes ikke over flere linjer (på alle skærme) - en bred tabel scrolles i sin boks i stedet.
   Tekst-tabeller (skatteregler) og to-kolonne-tabeller må gerne bryde. */
table.data-table th, table.data-table td{ white-space:nowrap; }
table.data-table.etf-rules th, table.data-table.etf-rules td,
table.data-table.data-table-kv td{ white-space:normal; }
/* Tættere kolonner, så historiktabellerne (med Ændring og Ret/Slet) kan være på en almindelig skærm. */
table.data-table thead th{ padding-left:var(--s3); padding-right:var(--s3); }
table.data-table td{ padding-left:var(--s3); padding-right:var(--s3); }
table.data-table .row-actions .btn{ padding-left:12px; padding-right:12px; }

/* ---- År for år og prognose ---- */
.year-note{ color:var(--subtle); font-size:0.9em; margin-left:4px; }
.year-hint{ margin:var(--s3) 0 0; font-size:12.5px; }
table.data-table td.empty-cell{ text-align:left; color:var(--muted); white-space:normal; }

/* Lille til/fra-knap over en graf (fx prognosen) */
.chip-toggle{
    display:inline-flex; align-items:center; gap:var(--s2);
    font:600 12.5px var(--font-sans); color:var(--muted);
    background:var(--panel-sunken); border:1px solid var(--border); border-radius:var(--r-pill);
    padding:5px 12px; cursor:pointer; transition:all 0.18s var(--ease);
}
.chip-toggle::before{ content:''; width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; }
.chip-toggle[aria-pressed="true"]{ color:var(--akt); border-color:var(--akt); background:var(--akt-soft); }
.chip-toggle[aria-pressed="true"]::before{ background:currentColor; }
.chip-toggle:hover{ color:var(--text); }

/* ---- Tips & viden (investeringsguide) ---- */
.guide{ display:flex; flex-direction:column; gap:var(--s3); max-width:1600px; }
.guide-section{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.guide-section > summary{
    display:flex; align-items:center; gap:var(--s3); cursor:pointer; list-style:none;
    padding:var(--s4) var(--s5); font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--text);
}
.guide-section > summary::-webkit-details-marker{ display:none; }
.guide-section > summary::after{ content:'+'; margin-left:auto; font-family:var(--font-sans); color:var(--subtle); font-size:20px; }
.guide-section[open] > summary::after{ content:'−'; }
.guide-num{
    display:inline-grid; place-items:center; width:28px; height:28px; flex-shrink:0; border-radius:50%;
    font:600 13px var(--font-sans); color:var(--akt); border:1.5px solid var(--akt);
}
.guide-body{ padding:0 var(--s5) var(--s5); font-size:14.5px; line-height:1.65; color:var(--muted); }
.guide-body strong, .guide-body dt{ color:var(--text); }
.guide-text{ margin:0 0 var(--s4); }
.guide-note{ margin:var(--s3) 0 0; font-size:13.5px; }
.guide-list{ margin:0; padding-left:1.2em; }
.guide-list li + li{ margin-top:var(--s3); }
.guide-body .panel{ box-shadow:none; background:var(--panel-sunken); margin-bottom:var(--s4); }
.guide-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:var(--s3); margin:0; }
.guide-cards > div{ padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel-sunken); }
.guide-cards dt{ font-weight:600; margin-bottom:var(--s1); }
.guide-cards dd{ margin:0; font-size:14px; }
.risk-scale{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; margin:0 0 var(--s4); }
.risk-step{ padding:var(--s3); border-radius:var(--r-sm); font-size:12.5px; line-height:1.4;
    background:color-mix(in srgb, var(--cross) calc(var(--r) * 12%), var(--panel-sunken)); color:var(--text); }
.risk-step strong{ display:block; font-family:var(--font-mono); font-size:15px; }
.glossary{ display:grid; grid-template-columns:max-content 1fr; gap:var(--s2) var(--s4); margin:0; }
.glossary dt{ font-weight:600; }
.glossary dd{ margin:0; }
.metric-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3); counter-reset:metric; }
.metric-list li{ counter-increment:metric; padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel-sunken); }
.metric-list p{ margin:var(--s2) 0 0; font-size:14px; }
.metric-list em{ font-style:normal; font-family:var(--font-mono); font-size:13px; color:var(--text); }
.metric-head{ display:flex; align-items:center; gap:var(--s3); }
.metric-head::before{ content:counter(metric) "."; font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--akt); }
.level{ margin-left:auto; font:600 11px var(--font-sans); letter-spacing:0.04em; padding:2px 10px; border-radius:var(--r-pill); border:1px solid; white-space:nowrap; }
.level-1{ color:var(--pos); }
.level-2{ color:var(--akt); }
.level-3{ color:var(--cross); }
.guide-disclaimer{ margin:var(--s2) 0 0; font-size:12.5px; color:var(--subtle); }
@media (max-width:640px){
    .guide-section > summary{ padding:var(--s4); font-size:17px; }
    .guide-body{ padding:0 var(--s4) var(--s4); }
    .glossary{ grid-template-columns:1fr; gap:2px; }
    .glossary dd{ margin-bottom:var(--s3); }
    .risk-scale{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.guide-subhead{ margin:var(--s5) 0 var(--s2); font-family:var(--font-display); font-size:17px; font-weight:500; color:var(--text); }
.sector-table td:nth-child(2){ white-space:nowrap; }
.sector-table .level{ margin-left:0; }
/* Tabellerne i guiden viser alle rækker - ingen indre scroll. */
.guide-body .data-table-wrap{ max-height:none; }
@media (max-width:640px){
    /* Tekst-tabeller som kort: navnet øverst, derefter hver kolonne med sin overskrift. */
    table.data-table.etf-rules, table.data-table.etf-rules tbody, table.data-table.etf-rules tr, table.data-table.etf-rules td{ display:block; }
    table.data-table.etf-rules thead{ display:none; }
    table.data-table.etf-rules tr{ padding:var(--s3) var(--s4); border-bottom:1px solid var(--border); }
    table.data-table.etf-rules tbody tr:last-child{ border-bottom:none; }
    table.data-table.etf-rules td{ border:none; padding:2px 0; white-space:normal; text-align:left; }
    table.data-table.etf-rules td:first-child{ font-size:15px; margin-bottom:var(--s1); color:var(--text); font-weight:600; }
    table.data-table.etf-rules td:not(:first-child)::before{
        content:attr(data-label); display:block; margin-top:var(--s2);
        font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--subtle);
    }
}

/* ==================================================================
   Nyt udseende (redesign/ui) - inspireret af Lovable-skitsen:
   topbjælke, svævende menukort, luftige kort, rolig tekst.
   ================================================================== */
:root{ --sidebar-w:260px; --r-card:22px; }

/* ---- Ramme: topbjælke over menukort + indhold ---- */
.page-shell{ display:block; }
.app{ max-width:1640px; margin:0 auto; padding:var(--s5) var(--s6) var(--s7); }
.app-header{ display:flex; align-items:center; gap:var(--s4); padding:var(--s2) var(--s2) var(--s6); }
.brand{ display:flex; align-items:center; gap:var(--s3); min-width:0; }
/* Logoet: et O med en kurslinje igennem (samme tegning som icons/icon.svg), i temaets farver. */
.brand-logo{ display:block; flex-shrink:0; width:44px; height:44px; }
.brand-logo .logo-tile, .brand-logo .logo-gap{ fill:var(--akt); stroke:var(--akt); }
.brand-logo .logo-tile{ stroke:none; }
.brand-logo .logo-glyph{ fill:var(--on-akt); }
.brand-logo .logo-line{ fill:var(--on-akt); stroke:var(--on-akt); }
/* Navnet: skriftens eget O med kurslinjen lagt ovenpå, centreret om O'ets midte.
   Målt i Newsreader 600: O'ets midte ligger 0,378 em under boksens top (linjehøjde 1),
   så linjens boks (1,1 em høj) starter 0,378 − 0,55 = −0,172 em oppe. */
.brand-o{ position:relative; display:inline-block; line-height:1; }
.brand-o svg{ position:absolute; left:50%; top:-0.172em; width:1.1em; height:1.1em; margin-left:-0.55em; overflow:visible; }
.brand-o polyline{ fill:none; stroke-linejoin:round; stroke-linecap:round; }
.brand-o .logo-gap{ fill:var(--bg); stroke:var(--bg); }
.brand-o .logo-gap polyline{ stroke-width:16; }
.brand-o .logo-gap polygon{ stroke-width:9; stroke-linejoin:round; }
.brand-o .logo-line{ fill:var(--pos); stroke:var(--pos); }
.brand-o .logo-line polyline{ fill:none; stroke-width:7.5; }
.brand-o .logo-line polygon{ stroke-width:1.5; }
.brand-name{ font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-0.01em; color:var(--text); white-space:nowrap; }
.brand-sub{ font-size:15px; color:var(--subtle); margin-left:var(--s2); white-space:nowrap; }
.app-header-actions{ margin-left:auto; display:flex; align-items:center; gap:var(--s3); }
.menu-btn{ display:none; }
.app-body{ display:grid; grid-template-columns:var(--sidebar-w) minmax(0, 1fr); gap:var(--s6); align-items:start; }
.site-content{ padding:0; min-width:0; }

/* ---- Knapper: runde piller ---- */
.btn{ border-radius:var(--r-pill); padding:11px 22px; font-weight:600; display:inline-flex; align-items:center; gap:var(--s2); }
.btn-sm{ padding:7px 16px; }
.btn-secondary{ background:var(--panel); border:1px solid var(--border-strong); color:var(--text); }
.btn-primary{ background:var(--akt); border-color:var(--akt); color:var(--on-akt); }
.btn-dark{ background:var(--text); border:1px solid var(--text); color:var(--bg); padding:12px 24px; font-size:15px; }
.btn-dark:hover{ opacity:0.9; background:var(--text); }
.btn-icon{ width:18px; height:18px; flex-shrink:0; }

/* ---- Menukortet ---- */
.sidebar{
    position:sticky; top:var(--s5); max-height:calc(100vh - 48px); overflow-y:auto;
    background:var(--panel); border:1px solid var(--border); border-radius:var(--r-card);
    padding:var(--s5) var(--s4);
}
.side-nav{ display:flex; flex-direction:column; gap:3px; }
.nav-label{ margin:var(--s5) var(--s4) var(--s3); font-family:var(--font-sans); font-size:12.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--subtle); }
.nav-label:first-child{ margin-top:var(--s1); }
.nav-item{
    display:flex; align-items:center; gap:var(--s3); width:100%;
    padding:12px var(--s4); border:0; border-radius:14px; background:transparent;
    font:500 16px var(--font-sans); color:var(--text); text-align:left; cursor:pointer;
    transition:background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-item:hover{ background:var(--panel-hover); }
.nav-item.active{ background:var(--akt-soft); color:var(--akt); font-weight:600; }
.nav-item[hidden]{ display:none; }
.nav-icon{ width:20px; height:20px; flex-shrink:0; color:currentColor; opacity:0.85; }
.nav-count{ margin-left:auto; font-size:14px; font-weight:500; color:var(--subtle); }
.nav-item.active .nav-count{ color:var(--akt); font-weight:600; }
.nav-sub{ display:none; flex-direction:column; gap:2px; margin:4px 0 var(--s2) calc(var(--s4) + 20px + var(--s3) - 12px); }
/* En gruppe (Investering, Bolig & lån) foldes ud og sammen med et klik - uden at skifte side. */
.nav-group[aria-expanded="true"] + .nav-sub{ display:flex; }
.nav-group::after{
    content:''; width:7px; height:7px; margin-left:var(--s2); flex-shrink:0;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(-45deg); opacity:0.55; transition:transform 0.18s var(--ease);
}
.nav-group[aria-expanded="true"]::after{ transform:rotate(45deg); }
.nav-group .nav-count{ margin-left:auto; }
.nav-subitem{
    display:block; width:100%; padding:9px 12px; border:0; border-radius:12px; background:transparent;
    font:500 15px var(--font-sans); color:var(--muted); text-align:left; cursor:pointer;
}
.nav-subitem:hover{ background:var(--panel-hover); color:var(--text); }
.nav-subitem.active{ background:var(--panel-sunken); color:var(--text); font-weight:600; }
.nav-backdrop{ display:none; }

/* ---- Sidehoved ---- */
.page-header{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s4); flex-wrap:wrap; margin:0 0 var(--s5); max-width:1600px; }
.page-eyebrow{ font-family:var(--font-sans); font-size:13.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--akt); margin-bottom:var(--s2); }
.page-header h1{ margin:0; font-size:44px; font-weight:600; letter-spacing:-0.02em; line-height:1.1; }
.page-sub{ margin:var(--s2) 0 0; font-size:17px; color:var(--muted); }
.page-sub:empty{ display:none; }

/* ---- Kort, nøgletal og tekst ---- */
.panel, .stat{ border-radius:var(--r-card); box-shadow:none; }
.panel{ padding:26px 28px; }
.stat{ padding:22px 24px; }
.stat .label{ font-family:var(--font-sans); font-size:15px; letter-spacing:0; text-transform:none; color:var(--muted); margin-bottom:var(--s2); }
.stat .value{ font-family:var(--font-display); font-weight:600; font-size:34px; letter-spacing:-0.01em; font-variant-numeric:lining-nums tabular-nums; overflow-wrap:anywhere; }
.stat .value.akt, .stat .value.ask{ color:var(--text); }
.stat .sub{ font-family:var(--font-sans); font-size:14.5px; color:var(--muted); margin-top:var(--s2); }
.stat .sub.is-up{ color:var(--pos); }
.stat .sub.is-down{ color:var(--cross); }
.stats > .stat{ min-width:0; }
.eyebrow{ font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:0.14em; color:var(--subtle); }
.panel-title-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3); margin-bottom:var(--s5); }
.panel-title{ margin:0; font-family:var(--font-display); font-size:25px; font-weight:600; letter-spacing:-0.01em; color:var(--text); }
.panel-sub{ margin:var(--s1) 0 0; font-size:15px; color:var(--muted); }
.intro-banner{ background:var(--panel); border-color:var(--border); border-radius:var(--r-card); }

/* ---- Oversigt ---- */
.overview-kpis{ grid-template-columns:repeat(4, minmax(0, 1fr)); margin-bottom:var(--s4); max-width:1600px; }
.overview-grid{ display:grid; grid-template-columns:minmax(0, 1.9fr) minmax(0, 1fr); gap:var(--s4); max-width:1600px; margin-bottom:var(--s4); }
.overview-grid > .panel, #section-overview > .panel{ margin:0; }
#section-overview > .panel{ max-width:1600px; }
.ov-chart-wrap{ height:280px; }
.seg-pills{ display:inline-flex; gap:4px; }
.seg-pills button{
    border:0; background:transparent; color:var(--muted); cursor:pointer;
    font:600 15px var(--font-sans); padding:8px 18px; border-radius:var(--r-pill);
}
.seg-pills button[aria-pressed="true"]{ background:var(--text); color:var(--bg); }
.ov-row{ display:flex; justify-content:space-between; gap:var(--s3); font-size:16px; color:var(--text); margin-bottom:10px; }
.ov-row strong{ font-family:var(--font-sans); font-weight:600; }
.ov-goals, .ov-split{ display:flex; flex-direction:column; gap:var(--s5); }
/* Fordeling: én samlet søjle (2 px luft mellem delene) og en forklaring under. */
.ov-split{ gap:var(--s4); }
.ov-split-bar{ display:flex; gap:2px; height:12px; border-radius:var(--r-pill); overflow:hidden; }
.ov-split-seg{ flex-basis:0; min-width:3px; }
/* Højst fem kategorier, altid på én række. */
.ov-split-legend{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--parts), minmax(0, 1fr)); gap:var(--s3) var(--s4); }
.ov-split-item{ display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; }
.ov-split-dot{ width:10px; height:10px; border-radius:50%; }
.ov-split-item strong{ white-space:nowrap; font-family:var(--font-sans); font-size:17px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.ov-split-item span:last-child{ grid-column:2; font-size:14px; color:var(--muted); }
.ov-goal-sub{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px var(--s3); margin-top:6px; font-size:13.5px; color:var(--subtle); }
/* Hvornår målet nås i dit tempo (overview.js: goalPaceEl). */
.ov-goal-pace{ color:var(--muted); }
.ov-goal-pace.is-up{ color:var(--pos); }
.ov-goal-pace.is-down{ color:var(--cross); }
#section-overview .progress-track{ height:8px; border-radius:var(--r-pill); background:var(--panel-sunken); }
#section-overview .progress-fill{ border-radius:var(--r-pill); background:var(--akt); }
.ov-next{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ov-next li{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--border); font-size:15px; color:var(--muted); }
.ov-next li:last-child{ border-bottom:none; }
.ov-next .btn{ flex-shrink:0; margin:0; }
.ov-side{ display:flex; flex-direction:column; gap:var(--s4); }
.ov-tools{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--s3); }
.ov-tool{
    display:flex; align-items:flex-start; gap:var(--s3); text-align:left; cursor:pointer;
    padding:var(--s4) var(--s5); border:1px solid var(--border); border-radius:18px; background:var(--panel);
    font-family:var(--font-sans); color:var(--muted); font-size:14px; line-height:1.45;
    transition:border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.ov-tool strong{ color:var(--text); font-size:15.5px; }
/* Et lille ikon i en blød grøn flade, som i menuen */
.ov-tool-icon{ display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border-radius:12px; background:var(--akt-soft); color:var(--akt); }
.ov-tool-icon svg{ width:20px; height:20px; }
.ov-tool-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ov-tool:hover .ov-tool-icon{ background:var(--akt); color:var(--on-akt); }
.ov-tool:hover{ border-color:var(--akt); background:var(--panel-hover); }

/* Indstillinger åbner under topbjælkens højre side */
.settings-panel{ position:fixed; right:var(--s6); left:auto; top:92px; bottom:auto; max-height:calc(100vh - 120px); overflow-y:auto; }

/* ---- Mellemstore skærme ---- */
@media (max-width:1250px){
    .overview-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .overview-grid{ grid-template-columns:minmax(0, 1fr); }
}

/* ---- Telefon og tablet: menuen glider ind fra venstre ---- */
@media (max-width:900px){
    .app{ padding:var(--s3) var(--s4) var(--s6); }
    .app-header{ padding:var(--s2) 0 var(--s4); gap:var(--s3); }
    .menu-btn{ display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:14px; border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; }
    .menu-btn .nav-icon{ width:22px; height:22px; }
    .brand-logo{ width:36px; height:36px; }
    .brand-name{ font-size:20px; }
    .brand-sub{ display:none; }
    .app-header-actions .btn-dark{ padding:9px 14px; font-size:13.5px; }
    .app-body{ display:block; }
    .sidebar{
        position:fixed; left:var(--s3); top:var(--s3); bottom:var(--s3); z-index:200; width:min(320px, 86vw); max-height:none;
        transform:translateX(calc(-100% - 24px)); transition:transform 0.25s var(--ease); box-shadow:var(--shadow-lg);
    }
    body.nav-open .sidebar{ transform:none; }
    body.nav-open .nav-backdrop{ display:block; position:fixed; inset:0; z-index:190; background:rgba(0,0,0,0.5); }
    .page-header h1{ font-size:32px; }
    .settings-panel{ left:var(--s4); right:var(--s4); top:72px; width:auto; }
}
@media (max-width:640px){
    .app-header-actions .btn-dark{ padding:8px 12px; }
    .brand-name{ font-size:18px; }
    .page-header h1{ font-size:28px; }
    .page-sub{ font-size:15px; }
    .overview-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .stat .value{ font-size:24px; }
    .panel{ padding:20px; }
    .panel-title{ font-size:21px; }
    .ov-next li{ flex-direction:column; align-items:flex-start; gap:var(--s2); }
    .ov-chart-wrap{ height:220px; }
}

/* Nøgletal skaleres med skærmen, så de normalt står på én linje. Et beløb skjules
   aldrig - er der ikke plads, må "kr." hellere gå på næste linje. */
.stat .value{ font-size:clamp(22px, 2.05vw, 34px); overflow-wrap:normal; word-break:normal; }
.btn-dark{ white-space:nowrap; }
.label-short{ display:none; }
@media (max-width:640px){
    .label-long{ display:none; }
    .label-short{ display:inline; }
    .overview-kpis .stat{ padding:16px; }
    .stat .value{ font-size:clamp(17px, 5vw, 21px); }
    .brand-name{ font-size:17px; overflow:hidden; text-overflow:ellipsis; }
}
/* Rød for "uden for målet" skal vinde over de neutrale nøgletalsfarver ovenfor. */
.stat .value.negative{ color:var(--cross); }

/* ---- Værktøjerne tilpasser sig pladsen ved siden af menuen (ikke skærmens bredde) ----
   Er der under ca. 1150 px til indholdet, kommer grafen ind under indtastningen i fuld
   bredde og et fornuftigt bredt format, og felterne står i kolonner i stedet for én lang stribe. */
#section-tools, #section-housing, #section-portfolio{ container-type:inline-size; container-name:tools; }
@container tools (max-width:1150px){
    .layout{ grid-template-columns:minmax(0, 1fr); }
    .layout > .panel.chart-panel, .panel.chart-panel-sticky{ position:static; }
    .layout > .chart-panel .chart-wrap, .chart-panel-sticky .chart-wrap{ flex:none; min-height:0; height:clamp(280px, 42cqw, 460px); }
    .layout > .panel:first-child:not(.chart-panel){
        display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); column-gap:var(--s6); align-items:start;
    }
    .layout > .panel:first-child:not(.chart-panel) > :not(.field){ grid-column:1 / -1; }
}
/* Et værktøj markeres kun, når man faktisk står i dets område (ikke bare fordi gruppen er foldet ud). */
.nav-group:not(.active) + .nav-sub .nav-subitem.active{ background:transparent; color:var(--muted); font-weight:500; }

/* ---- Smallere menu: lidt mindre luft, så indholdet får mere plads ---- */
.sidebar{ padding:var(--s4) var(--s3); }
.nav-item{ padding:11px var(--s3); font-size:15.5px; }
.nav-label{ margin-left:var(--s3); margin-right:var(--s3); }
.nav-sub{ margin-left:22px; }
.nav-subitem{ font-size:14px; padding:8px 10px; }

/* ---- Budget: kategorierne over diagrammet, når der ikke er plads ved siden af ----
   Grupperne (Behov, Ønsker, Opsparing) står så som kolonner, og diagrammet får en
   almindelig højde under dem. På store skærme står de side om side som før. */
#section-budget{ container-type:inline-size; container-name:budget; }
@container budget (max-width:1150px){
    .layout-wide{ grid-template-columns:minmax(0, 1fr); }
    /* To jævne kolonner: Behov til venstre, Ønsker og Opsparing under hinanden til højre. */
    #budgetCategoryList{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--s6); align-items:start; }
    #budgetCategoryList .category-group:first-child{ grid-row:span 4; }
    #budgetCategoryList .category-group-label{ margin-top:var(--s3); }
    .layout-wide > .chart-panel .chart-wrap{ flex:none; min-height:0; height:clamp(300px, 38cqw, 420px); }
    .layout-wide > .panel:first-child .field{ max-width:420px; }
}

/* ---- Formue: indtastningen i fuld bredde og diagrammet under, når der ikke er plads ved siden af ---- */
#section-formue{ container-type:inline-size; container-name:formue; }
@container formue (max-width:1150px){
    .layout-net-worth{ grid-template-columns:minmax(0, 1fr); }
    .layout-net-worth > .panel:first-child{
        display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); column-gap:var(--s6); align-items:start;
    }
    .layout-net-worth > .panel:first-child > :not(.field){ grid-column:1 / -1; }
    .layout-net-worth > .chart-panel .chart-wrap{ flex:none; min-height:0; height:clamp(300px, 36cqw, 400px); }
}

/* ---- Indstillinger som dialog (som Hjælp og Feedback) ---- */
.dialog.settings-dialog{ width:min(460px, calc(100vw - 32px)); }
.settings-dialog .dialog-body .toggle-row + .toggle-row{ margin-top:var(--s3); }
.settings-dialog .btn + .btn{ margin-left:0; }
/* Fire grupper, foldet sammen, med det nuværende valg til højre (navigation.js). */
.settings-group + .settings-group{ border-top:1px solid var(--border); }
.settings-group > summary{
    display:flex; align-items:center; gap:var(--s3); min-height:50px; padding:4px 2px;
    list-style:none; cursor:pointer; font-weight:600; font-size:15px; color:var(--text);
}
.settings-group > summary::-webkit-details-marker{ display:none; }
.settings-group > summary::after{
    content:''; width:7px; height:7px; flex-shrink:0; margin:0 4px 3px 0;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(45deg); opacity:0.55; transition:transform 0.18s var(--ease);
}
.settings-group[open] > summary::after{ transform:rotate(-135deg); margin-bottom:-3px; }
.settings-group-state{ margin-left:auto; font-size:13px; font-weight:500; color:var(--muted); text-align:right; }
.settings-group-state.is-warn{ color:var(--cross); }
.settings-group-body{ padding:2px 2px var(--s4); }
.settings-group-body > .toggle-row{ margin-bottom:var(--s3); }
.settings-group-body > .toggle-row + .calendar-btn{ margin-top:0; }
.settings-text{ margin:0 0 var(--s3); font-size:13px; line-height:1.5; color:var(--muted); }
#installAppRow{ margin-top:var(--s4); }
/* Vælg dine værktøjer (menu-tools.js) og Slet alle data (sync.js). */
.tool-choice{ border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:var(--s2); }
.tool-choice + .tool-choice{ margin-top:var(--s4); }
.tool-choice legend{ padding:0; margin-bottom:var(--s2); font-size:13.5px; font-weight:600; color:var(--text); }
.settings-dialog .tool-choice .toggle-row + .toggle-row{ margin-top:0; }
.delete-all-btn{ display:block; margin:var(--s4) auto 0; color:var(--cross); }
.delete-all-text .dialog-text + .dialog-text{ margin-top:var(--s3); }
.nav-sheet-empty{ margin:var(--s2) 0; font-size:14px; color:var(--muted); }

@container budget (max-width:600px){
    #budgetCategoryList{ grid-template-columns:minmax(0, 1fr); }
    #budgetCategoryList .category-group:first-child{ grid-row:auto; }
}

/* ---- Gem-række: dato og gem-knap samlet nederst i indtastningen ---- */
.save-row{ display:flex; align-items:flex-end; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--border); }
.save-row .field{ margin:0; width:200px; }
.save-row .btn{ margin:0; }
.save-row .btn + .btn{ margin-left:0; }

/* ---- Kompakte nøgletal (Formue) med "?" ---- */
.compact-stats{ gap:var(--s3); }
.compact-stats .stat{ padding:16px 20px; }
.compact-stats .stat .label-row{ margin-bottom:2px; }
.compact-stats .stat .label{ margin-bottom:0; font-size:14px; }
.compact-stats .stat .value{ font-size:clamp(20px, 1.7vw, 28px); }
.stat .help-pop{ margin-top:var(--s2); font-size:13px; }

/* ---- Foldet forklaring i et panel ("Hvordan er det regnet?") ---- */
.inline-about{ margin:0 0 var(--s4); }
.inline-about > summary{ cursor:pointer; font-size:14px; font-weight:600; color:var(--akt); }
.inline-about[open] > summary{ margin-bottom:var(--s2); }

/* ---- Periodevælger (én knap med en liste) ---- */
.period-select{ position:relative; display:inline-flex; }
.period-select select{
    appearance:none; -webkit-appearance:none; cursor:pointer;
    font:600 14px var(--font-sans); color:var(--bg); background:var(--text);
    border:0; border-radius:var(--r-pill); padding:9px 36px 9px 18px;
}
.period-select::after{
    content:''; position:absolute; right:15px; top:50%; width:7px; height:7px; margin-top:-5px; pointer-events:none;
    border-right:1.6px solid var(--bg); border-bottom:1.6px solid var(--bg); transform:rotate(45deg);
}
.period-select[hidden]{ display:none; }

/* ---- Nødopsparing: den anbefalede zone (3-6 mdr.) tydeligt på skalaen ---- */
.buffer-track{ position:relative; }
.buffer-track .progress-track{ height:10px; border-radius:var(--r-pill); }
.buffer-track .progress-fill{ border-radius:var(--r-pill); }
.buffer-zone{
    position:absolute; left:33.333%; width:33.333%; top:-4px; bottom:-4px; pointer-events:none;
    border:1.5px dashed var(--pos); border-radius:8px; background:color-mix(in srgb, var(--pos) 12%, transparent);
}
.buffer-zone-label{ margin:0 0 6px 50%; width:max-content; transform:translateX(-50%); white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--pos); }
.buffer-marks span:first-child{ transform:none; }
.buffer-marks span:last-child{ transform:translateX(-100%); }

/* ---- "Tilføj datapunkt" kan foldes sammen ---- */
.panel-toggle{
    grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; width:100%;
    background:none; border:0; padding:0; margin:0 0 var(--s4); cursor:pointer;
    font:600 20px var(--font-display); color:var(--text); text-align:left;
}
.panel-toggle::after{
    content:''; width:8px; height:8px; margin-right:6px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted);
    transform:rotate(45deg); transition:transform 0.18s var(--ease);
}
.panel-toggle[aria-expanded="false"]::after{ transform:rotate(-45deg); }
.collapsible.is-collapsed > :not(.panel-toggle){ display:none !important; }
.collapsible.is-collapsed > .panel-toggle{ margin-bottom:0; }
/* Store resultattal (fx "4,0 måneder", "3.901.000 kr.") med samme elegante skrift som nøgletallene. */
.result-value{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em; font-variant-numeric:lining-nums tabular-nums; }

/* ---- Telefon: tættere og roligere ----
   Tekststørrelserne følger de gængse mobilskalaer (Apple og Material Design): brødtekst
   omkring 14-15 px, småtekst ikke under 12 px, og indtastningsfelter bliver på 16 px, så
   iPhone ikke zoomer ind, når man trykker i dem. Kortene får mindre luft, og graferne et
   liggende format (ca. 4:3) i stedet for at være højere end de er brede. */
@media (max-width:640px){
    body{ font-size:14px; }
    .app{ padding:var(--s2) var(--s3) var(--s5); }
    .app-header{ padding:var(--s1) 0 var(--s3); }
    .page-header{ margin-bottom:var(--s3); }
    .page-eyebrow{ font-size:11px; margin-bottom:2px; }
    .page-header h1{ font-size:22px; }
    .page-sub{ font-size:13px; }
    .panel{ padding:14px 16px; border-radius:16px; margin-bottom:var(--s3); }
    .stat{ border-radius:16px; }
    .stats, .overview-kpis{ gap:var(--s2); margin-bottom:var(--s3); }
    .overview-kpis .stat, .compact-stats .stat{ padding:10px 12px; }
    .stat .label, .compact-stats .stat .label{ font-size:12.5px; margin-bottom:2px; }
    .stat .sub{ font-size:12px; margin-top:2px; }
    .overview-grid, .ov-side{ gap:var(--s3); margin-bottom:var(--s3); }
    .panel-title-row{ margin-bottom:var(--s3); }
    .panel-title{ font-size:17px; }
    .panel-sub{ font-size:12.5px; }
    .panel-toggle{ font-size:16px; }
    .ov-row{ font-size:13.5px; margin-bottom:6px; }
    .ov-goals{ gap:var(--s4); }
    .ov-split{ gap:var(--s3); }
    .ov-split-bar{ height:10px; }
    .ov-split-legend{ gap:var(--s2) var(--s3); }
    .ov-split-item{ column-gap:6px; }
    .ov-split-item strong{ font-size:15px; }
    .ov-split-item span:last-child{ font-size:12.5px; }
    /* Fem kategorier: navnet står under prikken og får hele kolonnens bredde. */
    .ov-split-legend.is-tight{ grid-template-columns:repeat(var(--parts), auto); justify-content:space-between; column-gap:6px; }
    .ov-split-legend.is-tight .ov-split-item{ column-gap:5px; }
    .ov-split-legend.is-tight .ov-split-dot{ width:8px; height:8px; }
    .ov-split-legend.is-tight strong{ font-size:14px; }
    .ov-split-legend.is-tight span:last-child{ grid-column:1 / -1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ov-next li{ font-size:13.5px; padding:10px 0; }
    .ov-tool{ padding:10px 12px; font-size:12.5px; }
    .ov-tool strong{ font-size:14px; }
    .ov-tool-icon{ width:32px; height:32px; border-radius:10px; }
    .ov-tool-icon svg{ width:18px; height:18px; }
    .result-value{ font-size:24px; }
    .layout, .layout-wide, .layout-net-worth{ gap:var(--s3); }
    .legend{ gap:4px var(--s4); margin-bottom:var(--s3); }
    .site-content .panel .chart-wrap{ flex:none; min-height:0; height:clamp(200px, 62vw, 280px); }
    /* Cirkeldiagrammet med forklaring under skal være højere for ikke at blive lille. */
    .site-content .panel .chart-wrap:has(#netWorthChart){ height:290px; }
    .site-content .panel .ov-chart-wrap{ height:clamp(150px, 45vw, 210px); }
}
/* Meget smalle telefoner (fx 320 px): forklaringen må gå på to rækker. */
@media (max-width:350px){
    .ov-split-legend, .ov-split-legend.is-tight{ grid-template-columns:repeat(3, minmax(0, 1fr)); justify-content:normal; }
}

/* ---- Oversigt i én kolonne (telefon og tablet): grafen øverst, nøgletallene under ----
   Kortene i gitteret løftes ud (display:contents), så rækkefølgen kan styres med order.
   På store skærme står nøgletallene fortsat øverst med grafen og siderne i to kolonner. */
#section-overview{ display:flex; flex-direction:column; gap:var(--s4); }
#section-overview > *{ margin:0; }
@media (max-width:1250px){
    #section-overview .overview-grid, #section-overview .ov-side{ display:contents; }
    #section-overview > *, #section-overview .panel, #section-overview .overview-kpis{ order:2; margin:0; }
    #section-overview .ov-chart-panel{ order:0; }
    #section-overview .overview-kpis{ order:1; }
}
@media (max-width:640px){
    #section-overview{ gap:var(--s3); }
}

/* ---- App-ikon: tre farver at vælge imellem, før appen lægges på hjemmeskærmen ---- */
.icon-choice{ border:0; margin:0 0 var(--s2); padding:0; min-width:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s2); }
.icon-choice legend{ padding:0; margin-bottom:var(--s2); font-size:13.5px; font-weight:600; color:var(--text); }
.icon-option{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:var(--s2); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; font-size:13px; color:var(--muted); }
.icon-option img{ width:48px; height:48px; border-radius:11px; outline:1px solid var(--border); outline-offset:-1px; }
.icon-option input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.icon-option:has(input:checked){ border-color:var(--akt); background:var(--akt-soft); color:var(--text); font-weight:600; }
.icon-option:has(input:focus-visible){ outline:2px solid var(--akt); outline-offset:2px; }
.icon-choice-hint{ margin:0 0 var(--s3); font-size:12.5px; line-height:1.5; color:var(--muted); }

/* ---- Påmindelser (månedsstatus, backup): knapperne går ned under teksten, når der ikke er plads ---- */
.intro-banner:has(> .banner-actions){ flex-wrap:wrap; }
.intro-banner:has(> .banner-actions) > span{ flex:1 1 260px; min-width:0; }
.intro-banner .banner-actions{ flex-shrink:1; }

/* ---- Infoboksen i Formue kan lukkes ---- */
.notice.source-note{ display:flex; align-items:flex-start; gap:var(--s3); }
.notice.source-note > span{ flex:1; min-width:0; }
.note-close{
    flex-shrink:0; background:transparent; border:none; padding:2px 6px; margin:-2px -6px 0 0;
    border-radius:var(--r-sm); color:var(--subtle); font-size:15px; line-height:1; cursor:pointer;
}
.note-close:hover{ color:var(--text); background:var(--panel-hover); }

/* ---- Månedsoverblik ---- */
.month-controls{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:flex-end; max-width:1600px; margin-bottom:var(--s5); }
.month-controls .field{ margin:0; flex:1 1 180px; max-width:260px; }
.month-content{ display:flex; flex-direction:column; gap:var(--s5); max-width:1600px; }
.month-content .stats{ margin:0; }
.month-range{ margin:0; font-size:15px; color:var(--muted); }
.month-content .data-table-wrap{ max-height:none; }
/* Stigninger grønne, fald røde (for gæld omvendt, se month-overview.js). */
#section-month .stat .value.positive{ color:var(--pos); }
.month-span{
    display:inline-block; margin-left:2px; padding:1px 9px; border-radius:var(--r-pill);
    font-size:12.5px; font-weight:600; color:var(--text); background:var(--panel-sunken); border:1px solid var(--border-strong);
    white-space:nowrap;
}
.month-table td:first-child{ color:var(--text); font-family:var(--font-sans); font-size:13.5px; white-space:normal; }
.month-sub{ display:none; }
@media (max-width:640px){
    .month-controls{ gap:var(--s3); margin-bottom:var(--s3); }
    .month-controls .field{ flex-basis:120px; }
    .month-content{ gap:var(--s3); }
    .month-range{ font-size:13.5px; }
    /* Kategori, ændring og procent; start og slut står under navnet. */
    .month-table th:nth-child(2), .month-table td:nth-child(2),
    .month-table th:nth-child(3), .month-table td:nth-child(3),
    .month-table th:nth-child(5), .month-table td:nth-child(5){ display:none; }
    .month-table td.change-cell .month-sub{ color:inherit; }
    .month-sub{ display:block; margin-top:2px; font-family:var(--font-mono); font-size:11.5px; color:var(--subtle); white-space:nowrap; }
}

/* ---- Tilpas nøgletal: knappen står i sidehovedet på Oversigt ---- */


/* ---- Ændringen i den valgte periode på Oversigtens graf ---- */
.ov-chart-change{ margin:var(--s1) 0 0; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--muted); }
.ov-chart-change.is-up{ color:var(--pos); }
.ov-chart-change.is-down{ color:var(--cross); }
@media (max-width:640px){
    .ov-chart-change{ font-size:14px; }
}

/* ---- Månedsoverblik: kurver, årets bedste og værste måned, og "Dit år i tal" ---- */
.month-cat{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.spark{ width:64px; height:18px; flex-shrink:0; }
.spark polyline{ fill:none; stroke:var(--muted); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.spark.is-up polyline{ stroke:var(--pos); }
.spark.is-down polyline{ stroke:var(--cross); }
.month-badge{
    display:inline-block; margin-left:2px; padding:1px 9px; border-radius:var(--r-pill); white-space:nowrap;
    font-size:12.5px; font-weight:600; color:var(--text); background:var(--panel-sunken); border:1px solid var(--border-strong);
}
.month-badge.is-up{ border-color:var(--pos); color:var(--pos); }
.month-badge.is-down{ border-color:var(--cross); color:var(--cross); }
.month-best{ margin:var(--s3) 0 0; padding-top:var(--s3); border-top:1px solid var(--border); font-size:14px; color:var(--muted); display:grid; gap:4px; }
.month-best strong{ color:var(--text); font-weight:600; }
.month-best .is-up{ color:var(--pos); font-weight:600; }
.month-best .is-down{ color:var(--cross); font-weight:600; }
.year-lead{ margin:0 0 var(--s5); font-size:17px; color:var(--text); }
.year-lead .is-up{ color:var(--pos); }
.year-lead .is-down{ color:var(--cross); }
.year-facts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--s4) var(--s5); margin:0; }
.year-fact{ min-width:0; }
.year-fact dt{ font-size:13.5px; color:var(--muted); }
.year-fact dd{ margin:2px 0 0; font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--text); font-variant-numeric:lining-nums tabular-nums; }
.year-fact dd.is-up{ color:var(--pos); }
.year-fact dd.is-down{ color:var(--cross); }
.year-fact dd.year-fact-sub{ font-family:var(--font-sans); font-size:13px; font-weight:400; color:var(--subtle); }
.year-share{ display:flex; flex-direction:column; gap:var(--s4); }
.year-share-preview{ width:100%; max-width:360px; align-self:center; border-radius:var(--r-md); border:1px solid var(--border); background:var(--panel-sunken); aspect-ratio:1080 / 1350; }
@media (max-width:640px){
    .year-facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s3); }
    .year-fact dd{ font-size:18px; }
    .year-lead{ font-size:15px; margin-bottom:var(--s4); }
    .spark{ width:48px; }
}

/* ---- ASK og skattegrænser ---- */
.tax-limit-row{ margin-bottom:var(--s5); }
.tax-limit-row .tax-fill{ background:var(--akt); }
.tax-limit-row .tax-fill.is-over{ background:var(--cross); }
.tax-note{ margin:var(--s2) 0 0; font-size:13.5px; color:var(--muted); }
.tax-note.hint-warning{ color:var(--cross); }

/* ---- Månedsstatus: "Hent seneste tal" og ændringen siden sidst under hver saldo ---- */
.status-intro{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); }
.status-intro .dialog-hint{ margin:0; }
.status-intro .btn{ flex-shrink:0; }
.status-diff{ min-height:0; font-size:12.5px; font-weight:600; color:var(--muted); }
.status-diff:empty{ display:none; }
.status-diff.is-up{ color:var(--pos); }
.status-diff.is-down{ color:var(--cross); }
/* Ligner tallet en tastefejl (et nul for meget, et tomt felt ...), står det med gult under feltet.
   I det lyse tema er det gule lidt mørkere end grafernes (--ask), så teksten har kontrast nok. */
:root{ --warn-text:var(--ask); }
[data-theme="light"]{ --warn-text:#8A5E25; }
.status-diff.is-warning{ color:var(--warn-text); }
.suspicious-why{ margin-top:2px; font-family:var(--font-sans); font-size:13px; color:var(--warn-text); text-align:right; }
@media (max-width:640px){
    .status-intro{ flex-direction:column; }
}

/* ---- Kalenderpåmindelse i indstillingerne ---- */
.calendar-btn{ margin-top:var(--s3); }
.calendar-btn .btn-icon{ width:15px; height:15px; }
.calendar-hint{ margin:var(--s1) 0 0; font-size:12.5px; color:var(--muted); }

/* ---- Kodelås ---- */
.lock-screen{ display:none; }
html.is-locked .lock-screen{
    display:grid; place-items:center; position:fixed; inset:0; z-index:1000; overflow-y:auto;
    padding:max(var(--s5), env(safe-area-inset-top)) var(--s4) var(--s5); background:var(--bg);
}
/* Siden under låseskærmen er skjult, så den hverken ses eller kan nås med tastaturet. */
html.is-locked .page-shell, html.is-locked #printReport, html.is-locked .toast-region, html.is-locked .bottom-nav{ visibility:hidden; }
.lock-card{ width:min(360px, 100%); display:flex; flex-direction:column; align-items:center; gap:var(--s4); text-align:center; }
.lock-logo{ width:64px; height:64px; border-radius:16px; }
.lock-title{ margin:0; font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--text); }
.lock-form{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); width:100%; }
.lock-form .btn{ margin:0; }
/* Koden som prikker: én pr. ciffer, fyldt efterhånden som man trykker. */
.lock-dots{ display:flex; justify-content:center; gap:18px; padding:10px; }
.lock-dot{ width:16px; height:16px; border-radius:50%; border:2px solid var(--akt); transition:background-color 0.1s var(--ease); }
.lock-dot.is-filled{ background:var(--akt); }
.lock-pin.is-waiting .lock-dots, .lock-keypad:has(.lock-key:disabled){ opacity:0.35; }
.lock-pin.is-wrong{ animation:lock-shake 0.35s var(--ease); }
@keyframes lock-shake{ 20%, 60%{ transform:translateX(-8px); } 40%, 80%{ transform:translateX(8px); } }
@media (prefers-reduced-motion: reduce){ .lock-pin.is-wrong{ animation:none; } }
/* Taltastaturet: runde taster som på telefonens egen låseskærm. touch-action undgår
   zoom ved hurtige dobbelttryk; et tryk ses som en mørkere tast i stedet for en ramme. */
.lock-keypad{ display:grid; grid-template-columns:repeat(3, 72px); gap:14px 26px; justify-content:center; }
.lock-key{
    width:72px; height:72px; border-radius:50%; border:1px solid var(--border); background:var(--panel);
    display:grid; place-items:center; padding:0; color:var(--text); font:500 28px var(--font-sans);
    cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none;
    transition:background-color 0.1s var(--ease);
}
.lock-key:active{ background:var(--panel-sunken); }
.lock-key:disabled{ cursor:default; }
.lock-key-delete{ border-color:transparent; background:transparent; color:var(--muted); }
.lock-key-delete svg{ width:28px; height:28px; }
/* Lave telefonskærme (fx iPhone SE): lidt mindre, så alt kan ses uden at rulle. */
@media (max-height:720px){
    .lock-card{ gap:var(--s3); }
    .lock-logo{ width:48px; height:48px; border-radius:12px; }
    .lock-title{ font-size:22px; }
    .lock-keypad{ grid-template-columns:repeat(3, 64px); gap:10px 22px; }
    .lock-key{ width:64px; height:64px; font-size:25px; }
}
.lock-error{ margin:0; min-height:1.2em; }
.lock-biometric{ width:100%; justify-content:center; text-align:center; }
.lock-status{ margin:0 0 var(--s3); font-size:13.5px; color:var(--pos); font-weight:600; }
.lock-actions{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3); }
.lock-actions .btn + .btn{ margin-left:0; }

/* ---- Bundmenu på telefoner (bottom-nav.js) ----
   Computer og tablet beholder menukortet. På telefoner afløser bundmenuen
   menuknappen og "+ Månedsstatus" i topbjælken. */
.bottom-nav{ display:none; }
/* viewport-fit=cover: indholdet må gå ud til skærmens kanter, så der skal være plads til hak og statuslinje. */
@media (max-width:900px){
    .app{ padding-left:max(var(--s4), env(safe-area-inset-left)); padding-right:max(var(--s4), env(safe-area-inset-right)); }
}
@media (max-width:640px){
    .app{
        padding-top:max(var(--s2), env(safe-area-inset-top));
        padding-left:max(var(--s3), env(safe-area-inset-left)); padding-right:max(var(--s3), env(safe-area-inset-right));
        padding-bottom:calc(84px + env(safe-area-inset-bottom));
    }
    .menu-btn, .app-header-actions .monthly-status-btn{ display:none; }
    .bottom-nav{
        position:fixed; left:0; right:0; bottom:0; z-index:150;
        display:grid; grid-template-columns:repeat(5, minmax(0, 1fr));
        padding:6px max(4px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-right));
        background:var(--panel); border-top:1px solid var(--border);
    }
    /* Mens man skriver, ligger tastaturet dér, hvor bundmenuen er. */
    body.is-typing .bottom-nav{ display:none; }
    .toast-region{ bottom:calc(80px + env(safe-area-inset-bottom)); }
}
.bottom-tab{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px;
    min-height:50px; padding:4px 0 0; border:0; background:transparent; cursor:pointer;
    font:500 11px var(--font-sans); color:var(--subtle); -webkit-tap-highlight-color:transparent;
}
.bottom-tab svg{ width:23px; height:23px; flex-shrink:0; }
.bottom-tab[aria-current="page"]{ color:var(--akt); font-weight:700; }
.bottom-tab-status{ color:var(--text); }
.bottom-plus{
    display:grid; place-items:center; width:46px; height:46px; margin-top:-20px;
    border-radius:50%; background:var(--text); color:var(--bg); box-shadow:var(--shadow-md);
    border:3px solid var(--panel);
}
.bottom-plus svg{ width:22px; height:22px; }
.bottom-tab:active .bottom-plus{ transform:scale(0.95); }

/* Arkene "Trackers", "Værktøjer" og "Mere": glider op fra bunden. */
.nav-sheet{
    inset:auto 0 0 0; margin:0; width:100%; max-width:none; max-height:85vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
}
.nav-sheet[open]{ animation:sheet-in 0.22s var(--ease); }
/* Arket selv får fokus, når det åbnes med et tryk - uden ramme om det hele. */
.nav-sheet:focus, .nav-sheet:focus-visible{ outline:none; }
@keyframes sheet-in{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }
.nav-sheet::backdrop{ background:rgba(0,0,0,0.5); }
.nav-sheet-grip{ width:36px; height:4px; margin:var(--s2) auto 0; border-radius:2px; background:var(--border-strong); }
/* Træk ned for at lukke (bottom-nav.js): toppen kan altid trækkes; hele arket, når listen ikke skal rulle. */
.nav-sheet .nav-sheet-grip, .nav-sheet .dialog-header, .nav-sheet.is-static{ touch-action:none; }
.nav-sheet.is-dragging{ transition:none; user-select:none; -webkit-user-select:none; }
.nav-sheet.is-settling{ transition:transform 0.22s var(--ease); }
.nav-sheet .dialog-header{ padding:var(--s3) var(--s4) var(--s1); }
.nav-sheet .dialog-body{ padding:0 var(--s4) var(--s4); }
.nav-sheet-group + .nav-sheet-group{ margin-top:var(--s3); }
.nav-sheet-label{
    margin:var(--s2) 0 var(--s1); font:600 11.5px var(--font-sans);
    letter-spacing:0.14em; text-transform:uppercase; color:var(--subtle);
}
.nav-sheet-item{
    display:flex; align-items:center; gap:var(--s3); width:100%; min-height:48px; padding:6px 4px;
    border:0; border-bottom:1px solid var(--border); background:transparent; cursor:pointer;
    font:500 15px var(--font-sans); color:var(--text); text-align:left;
}
.nav-sheet-group .nav-sheet-item:last-child, .dialog-body > .nav-sheet-item:last-child{ border-bottom:0; }
.nav-sheet-item .ov-tool-icon{ width:34px; height:34px; border-radius:10px; }
.nav-sheet-item.active{ color:var(--akt); font-weight:700; }

/* ---- Skjul beløb (hide-amounts.js) ----
   Øjet i topbjælken slører alle beløb; procenter, datoer og graferne form kan stadig ses. */
.hide-amounts-btn{
    display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0;
    border-radius:var(--r-pill); border:1px solid var(--border-strong); background:var(--panel); color:var(--text); cursor:pointer;
}
.hide-amounts-btn:hover{ background:var(--panel-hover); }
.hide-amounts-btn svg{ width:21px; height:21px; }
.hide-amounts-btn .eye-closed, html.amounts-hidden .hide-amounts-btn .eye-open{ display:none; }
html.amounts-hidden .hide-amounts-btn .eye-closed{ display:block; }
html.amounts-hidden .hide-amounts-btn{ background:var(--akt-soft); border-color:var(--akt); color:var(--akt); }
@media screen{
    /* Sløret efter tekstens størrelse, så både store nøgletal og små undertekster ikke kan læses. */
    html.amounts-hidden .has-amount{ filter:blur(0.4em); }
    /* I talfelterne sløres kun tallet, ikke selve feltet. Når man trykker i feltet, kan man se, hvad man skriver. */
    html.amounts-hidden input[data-amount]:not(:focus){ color:transparent; text-shadow:0 0 9px var(--text); }
}
@media (max-width:640px){
    .hide-amounts-btn{ width:40px; height:40px; }
}

/* ---- Privatliv (privatliv.html) ---- */
a.nav-item{ text-decoration:none; }
.legal-page{
    max-width:720px; margin:0 auto;
    padding:max(var(--s6), env(safe-area-inset-top)) max(var(--s5), env(safe-area-inset-right)) var(--s7) max(var(--s5), env(safe-area-inset-left));
    color:var(--text); line-height:1.65;
}
.legal-back{ display:inline-flex; align-items:center; gap:var(--s3); margin-bottom:var(--s6); color:var(--akt); font-weight:600; text-decoration:none; }
.legal-back img{ border-radius:8px; }
.legal-back:hover span{ text-decoration:underline; }
.legal-page h1{ margin:0; font-family:var(--font-display); font-size:40px; font-weight:600; letter-spacing:-0.02em; line-height:1.1; }
.legal-updated{ margin:var(--s2) 0 var(--s6); color:var(--subtle); font-size:14px; }
.legal-page h2{ margin:var(--s6) 0 var(--s2); font-family:var(--font-display); font-size:22px; font-weight:600; }
.legal-page p, .legal-page li{ color:var(--muted); font-size:16px; }
.legal-page p{ margin:0 0 var(--s3); }
.legal-page a{ color:var(--akt); }
.legal-summary{ padding:var(--s4) var(--s5); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-card); }
.legal-summary h2{ margin-top:0; }
.legal-summary ul{ margin:0; padding-left:1.2em; }
.legal-summary li{ color:var(--text); margin:var(--s1) 0; }
@media (max-width:640px){
    .legal-page h1{ font-size:30px; }
    .legal-page h2{ font-size:19px; }
    .legal-page p, .legal-page li{ font-size:15px; }
}

/* ---- Tastaturgenveje (shortcuts.js) ---- */
.shortcut-list{ display:grid; grid-template-columns:auto 1fr; gap:var(--s2) var(--s4); align-items:center; margin:0; }
.shortcut-list dt{ margin:0; text-align:right; }
.shortcut-list dd{ margin:0; color:var(--text); font-size:14.5px; }
kbd{
    display:inline-block; min-width:1.9em; padding:3px 7px; box-sizing:border-box; text-align:center;
    font:600 13px var(--font-mono); color:var(--text); background:var(--panel-sunken);
    border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:7px;
}

/* ---- Noter til månedsstatus ---- */
.month-notes{ margin:var(--s2) 0 0; font-size:14px; color:var(--muted); }
.month-notes strong{ color:var(--text); font-weight:600; }
/* Noter er tekst, ikke tal: almindelig skrift i feltet. */
.number-input.note-input{ font-family:var(--font-sans); }
.note-cell{ min-width:9em; max-width:18em; white-space:normal; color:var(--muted); text-align:left; }
@media (max-width:640px){
    .month-notes{ font-size:13px; }
}

/* ---- Dit år i farver (month-overview.js) ---- */
.year-colors{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:8px; margin-top:var(--s3); }
.ycell{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:0; border:0; background:none; cursor:pointer; font:inherit; color:inherit; }
.ycell:disabled{ cursor:default; }
.ycell-box{ display:block; width:100%; aspect-ratio:1; max-width:56px; border-radius:8px; background:var(--panel-sunken); border:1px solid var(--border); transition:transform 0.15s var(--ease); }
.ycell:not(:disabled):hover .ycell-box{ transform:scale(1.06); }
.ycell-name{ font-size:12px; color:var(--muted); }
.ycell.is-selected .ycell-name{ color:var(--text); font-weight:700; }
.ycell.is-selected .ycell-box{ outline:2px solid var(--text); outline-offset:2px; }
/* Fire styrker af grøn og rød (1 = lille ændring, 4 = årets største). */
.ycell.is-up.l1 .ycell-box, .ycell-swatch.is-up.l1{ background:color-mix(in srgb, var(--pos) 35%, var(--panel-sunken)); }
.ycell.is-up.l2 .ycell-box, .ycell-swatch.is-up.l2{ background:color-mix(in srgb, var(--pos) 55%, var(--panel-sunken)); }
.ycell.is-up.l3 .ycell-box, .ycell-swatch.is-up.l3{ background:color-mix(in srgb, var(--pos) 78%, var(--panel-sunken)); }
.ycell.is-up.l4 .ycell-box, .ycell-swatch.is-up.l4{ background:var(--pos); }
.ycell.is-down.l1 .ycell-box, .ycell-swatch.is-down.l1{ background:color-mix(in srgb, var(--cross) 35%, var(--panel-sunken)); }
.ycell.is-down.l2 .ycell-box, .ycell-swatch.is-down.l2{ background:color-mix(in srgb, var(--cross) 55%, var(--panel-sunken)); }
.ycell.is-down.l3 .ycell-box, .ycell-swatch.is-down.l3{ background:color-mix(in srgb, var(--cross) 78%, var(--panel-sunken)); }
.ycell.is-down.l4 .ycell-box, .ycell-swatch.is-down.l4{ background:var(--cross); }
.ycell.is-up .ycell-box, .ycell.is-down .ycell-box{ border-color:transparent; }
.ycell.is-flat .ycell-box, .ycell-swatch.is-flat{ background:var(--border-strong); }
.ycell.is-first .ycell-box{ background:var(--border); }
.ycell.is-none .ycell-box{ background:transparent; border-style:dashed; }
.ycell.is-future .ycell-box{ background:transparent; opacity:0.45; }
.year-colors-foot{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s3); }
.year-colors-detail{ margin:0; font-size:14px; color:var(--text); min-height:1.4em; }
.year-colors-legend{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); }
.year-colors-legend span{ margin:0 4px; }
.ycell-swatch{ display:inline-block; width:14px; height:14px; border-radius:4px; }
/* Telefon: alle tolv måneder på én række, så panelet fylder lidt. */
@media (max-width:640px){
    .year-colors{ gap:3px; margin-top:var(--s2); }
    .ycell{ gap:3px; }
    .ycell-box{ border-radius:5px; }
    .ycell-name{ font-size:10px; }
    .ycell.is-selected .ycell-box{ outline-width:1.5px; outline-offset:1px; }
    .year-colors-foot{ margin-top:var(--s2); gap:var(--s2); }
    .year-colors-detail{ font-size:13px; }
}

/* ---- Nødopsparing: de to tal og vurderingen, kort ---- */
#bufferText{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
.buffer-fact strong{ color:var(--text); font-weight:600; }
.buffer-verdict{ padding:2px 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; }
.buffer-verdict.is-ok{ background:var(--akt-soft); color:var(--pos); }
.buffer-verdict.is-low{ background:color-mix(in srgb, var(--cross) 14%, transparent); color:var(--cross); }

/* ---- Kompakt på telefoner: mindre luft mellem kortene og lidt mindre overskrifter ----
   Ingen tekst under 12 px, og felter beholder 16 px, så iPhone ikke zoomer ind. */
@media (max-width:640px){
    .panel{ padding:12px 14px; margin-bottom:var(--s2); }
    /* Kortene har selv 8 px luft under sig, så kolonnerne har ingen ekstra afstand. */
    .layout, .layout-wide, .layout-net-worth, .full-width-below{ gap:0; }
    .stats, .overview-kpis, .compact-stats{ margin-bottom:var(--s2); }
    .overview-grid, .ov-side{ gap:var(--s2); margin-bottom:var(--s2); }
    .page-header h1{ font-size:20px; }
    .panel-title{ font-size:16px; }
    .tool-intro{ font-size:14px; }
    .explainer, .notice, .result-sub, .dialog-hint, .month-range{ font-size:13px; }
    .result-value{ font-size:22px; }
}

/* ---- Forklaringer bag "?" i kortets hjørne (card-help.js) ---- */
.panel.has-card-help{ position:relative; }
.card-help-btn{ position:absolute; top:22px; right:22px; width:24px; height:24px; font-size:13px; z-index:1; }
/* Overskriften må ikke løbe ind under "?". */
.has-card-help > .eyebrow, .has-card-help > .panel-title-row{ padding-right:32px; }
/* I en overskrift med knapper står "?" i knappernes række (ikke i hjørnet). */
.panel-head-actions .card-help-btn{ position:static; }
.card-help-pop{ margin:var(--s2) 0 var(--s3); }
.card-help-pop > :first-child{ margin-top:0; }
.card-help-pop > :last-child{ margin-bottom:0; }
.card-help-pop p, .card-help-pop .panel-sub, .card-help-pop .dialog-hint, .card-help-pop .explainer{
    margin:0 0 var(--s2); padding:0; border:0; font-size:13px; line-height:1.55; color:var(--muted);
}
.card-help-pop .card-help-head{ margin:var(--s3) 0 var(--s1); font-weight:600; color:var(--text); }
.card-help-pop .card-help-head:first-child{ margin-top:0; }
@media (max-width:640px){
    .card-help-btn{ top:10px; right:10px; }
}

/* Kortets overskrift med en lille handling ved siden af (fx "Ryd historik" i Formuehistorik). */
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); }
.panel-head .eyebrow{ margin:0; }

/* Små knapper med kun et symbol i et korts overskrift (fx Ryd historik). Navnet står i aria-label og title. */
.mini-icon-btn{
    display:inline-grid; place-items:center; width:32px; height:32px; padding:0; flex-shrink:0;
    border-radius:var(--r-pill); border:1px solid var(--border-strong); background:var(--panel); color:var(--muted); cursor:pointer;
}
.mini-icon-btn svg{ width:16px; height:16px; }
.mini-icon-btn:hover{ color:var(--text); border-color:var(--akt); }
.mini-icon-btn-danger:hover{ color:var(--cross); border-color:var(--cross); }
.panel-head-actions{ display:flex; align-items:center; gap:var(--s2); }
.panel-head-actions .mini-icon-btn{ width:28px; height:28px; }
.panel-head-actions .mini-icon-btn svg{ width:15px; height:15px; }
.panel-head-actions .chip-toggle{ padding:3px 10px; font-size:12px; gap:6px; }
.panel-head-actions .chip-toggle[hidden]{ display:none; }
/* "Tilpas oversigt" står i topbjælken ved øjet (Skjul beløb), i samme form og størrelse - kun på Oversigt. */
.top-icon-btn{
    display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0;
    border-radius:var(--r-pill); border:1px solid var(--border-strong); background:var(--panel); color:var(--text); cursor:pointer;
}
.top-icon-btn:hover{ background:var(--panel-hover); }
.top-icon-btn svg{ width:19px; height:19px; }
.app-header-actions .customize-btn{ display:none; }
body[data-section="overview"] .app-header-actions .customize-btn{ display:grid; }
@media (max-width:640px){
    .top-icon-btn{ width:40px; height:40px; }
}

/* ---- Tilpas oversigt: fire pladser med hver sin liste (overview-cards.js) ----
   Kortet på pladsen har et tydeligt flueben; de tre andre kort, man har nu, er mærket svagt. */
.cards-chooser-slots{ display:flex; flex-direction:column; gap:var(--s2); }
.card-slot{ border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel-sunken); overflow:hidden; }
.card-slot.is-open{ border-color:var(--akt); }
.card-slot-btn{
    display:flex; align-items:center; gap:var(--s3); width:100%; padding:12px 14px;
    border:0; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer;
}
.card-slot-btn::after{
    content:''; width:7px; height:7px; margin-left:auto; flex-shrink:0;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(45deg); opacity:0.55; transition:transform 0.18s var(--ease);
}
.card-slot.is-open .card-slot-btn::after{ transform:rotate(-135deg); }
.card-slot-name{ min-width:4.6em; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--subtle); }
.card-slot-value{ font-weight:600; }
.card-slot-list{ padding:2px 8px 10px; border-top:1px solid var(--border); max-height:50vh; overflow-y:auto; }
.card-slot-list[hidden]{ display:none; }
.card-group-label{ margin:10px 6px 2px; font:600 11px var(--font-sans); letter-spacing:0.14em; text-transform:uppercase; color:var(--subtle); }
.card-option{
    display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:6px 8px;
    border:0; border-radius:10px; background:transparent; color:var(--text); font:500 14.5px var(--font-sans); text-align:left; cursor:pointer;
}
.card-option:hover{ background:var(--panel-hover); }
.card-mark{ position:relative; width:18px; height:18px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--border-strong); }
/* Tydeligt: kortet på denne plads. */
.card-option.is-current{ background:var(--akt-soft); font-weight:700; }
.card-option.is-current .card-mark{ background:var(--akt); border-color:var(--akt); }
.card-option.is-current .card-mark::after{
    content:''; position:absolute; left:5px; top:2px; width:4px; height:8px;
    border-right:2px solid var(--on-akt); border-bottom:2px solid var(--on-akt); transform:rotate(45deg);
}
/* Svagt: de andre kort, man har nu (vælger man et, bytter de plads). */
.card-option.is-used{ color:var(--muted); }
.card-option.is-used .card-mark{ border-color:color-mix(in srgb, var(--akt) 55%, var(--border-strong)); background:color-mix(in srgb, var(--akt) 18%, transparent); }
.card-used{ margin-left:auto; padding:1px 8px; border:1px solid var(--border); border-radius:var(--r-pill); font-size:12px; font-weight:600; color:var(--subtle); white-space:nowrap; }

/* ---- Tilpas oversigt: kortene på siden kan slås fra og flyttes (overview-cards.js) ----
   Kortene får deres plads med order. En tom kolonne skjules, så den anden får hele bredden. */
#section-overview .is-off, #section-overview .ov-side.is-empty, #section-overview .overview-grid.is-empty{ display:none; }
.overview-grid.is-single{ grid-template-columns:minmax(0, 1fr); }
.cards-chooser-head{
    margin:var(--s4) 0 var(--s2); font:600 11.5px var(--font-sans);
    letter-spacing:0.14em; text-transform:uppercase; color:var(--subtle);
}
.cards-chooser-head:first-child{ margin-top:0; }
.cards-chooser-head + .dialog-hint{ margin-bottom:var(--s2); }
.ov-sections-chooser{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel-sunken); }
.ov-section-row{ display:flex; align-items:center; gap:2px; padding:2px 6px 2px 14px; }
.ov-section-row + .ov-section-row{ border-top:1px solid var(--border); }
.ov-section-row .toggle-row{ flex:1 1 auto; min-width:0; align-items:center; min-height:40px; font-size:14.5px; font-weight:600; }
.ov-section-row .toggle-row input[type=checkbox]{ margin:0; }
.ov-section-row .toggle-row input[type=checkbox]:disabled{ opacity:0.5; cursor:default; }
.ov-section-row.is-off .toggle-row span{ color:var(--subtle); font-weight:500; }
.ov-section-move{
    width:36px; height:36px; flex-shrink:0; display:grid; place-items:center; padding:0;
    border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted); font:500 17px var(--font-sans); cursor:pointer;
}
.ov-section-move:hover:not(:disabled){ color:var(--text); background:var(--panel-hover); }
.ov-section-move:disabled{ opacity:0.25; cursor:default; }

/* ---- Dit år i tal på Oversigt i januar (overview.js) - altid øverst ---- */
#section-overview > #ovYearReview{ order:-1; }
#ovYearReview[hidden]{ display:none; }
.year-review .panel-title-row{ align-items:center; }
.year-review .year-lead{ margin-bottom:var(--s4); }
.year-review-close{
    width:30px; height:30px; flex-shrink:0; padding:0; border:0; border-radius:var(--r-pill); background:transparent;
    color:var(--subtle); font-size:20px; line-height:1; cursor:pointer;
}
.year-review-close:hover{ color:var(--text); background:var(--panel-hover); }
.year-review-actions{ display:flex; align-items:center; gap:var(--s4); margin-top:var(--s4); }
@media (max-width:640px){
    /* Tre tal på én række, så kortet ikke fylder halvdelen af skærmen. */
    .year-review .year-lead{ font-size:15px; margin-bottom:var(--s3); }
    .year-review .year-facts{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s3); }
    .year-review .year-fact dt{ font-size:12px; line-height:1.3; }
    .year-review .year-fact dd{ font-size:17px; }
    .year-review-actions{ margin-top:var(--s3); }
}

/* ---- Opsparing og afkast i Månedsoverblik (month-overview.js) ---- */
.savings-split-bar{ display:flex; gap:2px; height:12px; margin-bottom:var(--s3); border-radius:var(--r-pill); overflow:hidden; }
.savings-split-seg{ flex-basis:0; min-width:3px; }
.savings-split-seg.is-savings, .savings-split-dot.is-savings{ background:color-mix(in srgb, var(--akt) 45%, transparent); }
.savings-split-seg.is-returns, .savings-split-dot.is-returns{ background:var(--akt); }
.savings-split-rows{ display:flex; flex-direction:column; gap:var(--s2); margin:0; }
.savings-split-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
.savings-split-row dt{ display:flex; align-items:center; gap:var(--s2); font-size:14px; color:var(--muted); }
.savings-split-row dd{ margin:0; display:flex; align-items:baseline; gap:var(--s2); font-family:var(--font-display); font-size:18px; font-weight:600; font-variant-numeric:lining-nums tabular-nums; }
.savings-split-row dd .is-up{ color:var(--pos); }
.savings-split-row dd .is-down{ color:var(--cross); }
.savings-split-pct{ min-width:3.2em; text-align:right; font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--subtle); }
.savings-split-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ---- Nyt i Økonomis (whats-new.js) ---- */
.whats-new-entry + .whats-new-entry{ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--border); }
.whats-new-date{
    display:flex; align-items:center; gap:var(--s2); margin:0 0 var(--s2);
    font:600 11.5px var(--font-sans); letter-spacing:0.14em; text-transform:uppercase; color:var(--subtle);
}
.whats-new-tag{ padding:1px 8px; border-radius:var(--r-pill); background:var(--akt-soft); color:var(--akt); letter-spacing:0.06em; }
.whats-new ul{ margin:0; padding-left:1.2em; }
.whats-new li{ font-size:14px; line-height:1.5; color:var(--text); }
.whats-new li + li{ margin-top:6px; }

/* ---- Næste skridt: hvert skridt kan skjules med × (overview.js); uden skridt er kortet væk ---- */
#ovNextPanel[hidden]{ display:none; }
.ov-next li{ position:relative; padding-right:32px; }
.ov-next-text{ flex:1 1 auto; min-width:0; }
.ov-next-hide{
    position:absolute; top:50%; right:0; transform:translateY(-50%);
    width:26px; height:26px; padding:0; border:0; border-radius:var(--r-pill); background:transparent;
    color:var(--subtle); font-size:18px; line-height:1; cursor:pointer;
}
.ov-next-hide:hover{ color:var(--text); background:var(--panel-hover); }
@media (max-width:640px){
    /* Teksten og knappen står under hinanden: × står øverst ved teksten. */
    .ov-next li .ov-next-hide{ top:8px; transform:none; }
}

/* ---- Oversigt: kortene åbner deres side, og en søjle i grafen kan vælges (overview*.js) ---- */
button.stat-link{ display:block; position:relative; width:100%; font:inherit; color:inherit; text-align:left; cursor:pointer; }
button.stat-link:hover{ border-color:var(--border-strong); background:var(--panel-hover); }
.stat-go{ position:absolute; top:12px; right:14px; font-size:20px; line-height:1; color:var(--subtle); }
button.stat-link:hover .stat-go{ color:var(--akt); }
.ov-chart-pick{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin:var(--s2) 0 0; font-size:14px; color:var(--text); }
.ov-chart-pick[hidden]{ display:none; }
@media (max-width:640px){
    .stat-go{ top:8px; right:10px; font-size:18px; }
    .ov-chart-pick{ font-size:13px; }
}
.stat-link .label{ padding-right:18px; }

/* ---- Månedsoverblik: indholdet glider ind fra siden, man stryger mod (month-overview.js) ---- */
.month-content.slide-from-right{ animation:month-slide-right 0.22s var(--ease); }
.month-content.slide-from-left{ animation:month-slide-left 0.22s var(--ease); }
@keyframes month-slide-right{ from{ transform:translateX(28px); opacity:0.4; } to{ transform:none; opacity:1; } }
@keyframes month-slide-left{ from{ transform:translateX(-28px); opacity:0.4; } to{ transform:none; opacity:1; } }
.shortcut-list dt kbd + kbd{ margin-left:4px; }
/* Mens indholdet glider ind, må siden ikke kunne rulles vandret. */
#section-month{ overflow-x:clip; }

/* ---- Guidet månedsstatus på telefoner: ét felt ad gangen (monthly-status.js) ---- */
.guided{ display:flex; flex-direction:column; gap:var(--s2); }
.guided-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s2); }
.guided-back{ width:36px; height:36px; padding:0; border:1px solid var(--border-strong); border-radius:var(--r-pill); background:var(--panel); color:var(--text); font-size:22px; line-height:1; cursor:pointer; }
.guided-progress{ font-size:13px; font-weight:600; color:var(--subtle); }
.guided-section{ margin:var(--s2) 0 0; }
.guided-label{ display:block; margin:0; font-family:var(--font-display); font-size:22px; font-weight:600; line-height:1.2; color:var(--text); }
.guided-help{ margin:0; font-size:13.5px; line-height:1.5; color:var(--muted); }
.guided-input.number-input{ font-size:24px; padding:12px 14px; margin-top:var(--s2); }
.guided-last{ font-size:13px; color:var(--subtle); }
.guided-diff{ min-height:1.2em; }
.guided-actions{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); margin-top:var(--s3); }
.guided-actions.is-single{ grid-template-columns:1fr; }
.guided-actions .btn{ justify-content:center; padding:13px 12px; margin:0; }
.guided-warnings{ padding:var(--s2) var(--s3); border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel-sunken); }
.guided-warnings p{ margin:0; font-size:13.5px; color:var(--warn-text); }
.guided-warnings p + p{ margin-top:4px; }
.guided .status-summary{ margin:var(--s2) 0 0; }
.guided .status-summary{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4); }

/* Formues nøgletal: en lille kurve over de seneste 12 måneder i kortets øverste højre hjørne,
   så den aldrig tager bredde fra overskriften (kortene er smalle, også på en computer). */
.compact-stats .stat{ position:relative; }
.stat-spark{ position:absolute; top:18px; right:16px; display:inline-flex; align-items:center; }
.stat-spark .spark{ width:44px; height:16px; }
.stat-spark:empty{ display:none; }
@media (max-width:640px){
    .stat-spark{ top:12px; right:10px; }
    .stat-spark .spark{ width:32px; height:14px; }
}

/* Oversigtens kort: en lille kurve i hjørnet ved "›" (ikke på telefoner, og skjult, hvis den
   ville ramme kortets tekst - se fitOverviewSparks). */
#ovKpis .ov-spark{ top:16px; right:34px; }
#ovKpis .ov-spark.is-cramped{ visibility:hidden; }
@media (max-width:640px){
    #ovKpis .ov-spark{ display:none; }
}