/* Praksis pages. Colours are the site's tokens only, so both themes follow. */

/* #app-view hides its overflow; the page scrolls itself, as the home view does */
.practice-page {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-2xl) var(--space-4xl);
}
.practice-page > * { max-width: 1400px; margin-left: auto; margin-right: auto; }

.alis-muted { color: var(--text-muted); font-size: var(--font-sm); font-weight: 400; }
.alis-error { color: var(--color-error); }
.alis-status { min-height: 1.4em; font-size: var(--font-sm); color: var(--text-secondary); }

/* four columns, one per category — *"Maybe a 4 column structure is better"* */
.alis-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-lg);
    align-items: start;
    margin-bottom: var(--space-xl);
}
.alis-col {
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.alis-col h2 {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-lg);
    color: var(--text-primary);
}
.alis-count { color: var(--text-secondary); font-size: var(--font-sm); font-variant-numeric: tabular-nums; }
.alis-bar {
    height: 4px;
    margin: var(--space-xs) 0 var(--space-sm);
    background: var(--bg-light);
    border-radius: 2px;
    overflow: hidden;
}
.alis-bar i { display: block; height: 100%; background: var(--accent-primary); }

.alis-reqs { list-style: none; padding: 0; margin: 0; }
.alis-req { padding: 2px 0; font-size: var(--font-sm); color: var(--text-secondary); }
.alis-row { display: flex; align-items: center; gap: var(--space-sm); }
.alis-req-name { flex: 1; }
.alis-done .alis-req-name { color: var(--text-primary); }
/* "Emnekurs - NAME": the name is typed in place and reads as text until it is focused */
.alis-name {
    width: 9em;
    padding: 0 4px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom-color: var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: inherit;
}
.alis-name:hover, .alis-name:focus { border-color: var(--border-default); background: var(--bg-dark); outline: none; }
.alis-grow { flex: 1; width: auto; }
.alis-ok {
    margin-left: 4px;
    padding: 0 6px;
    background: var(--accent-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
}
.alis-clip { font-size: var(--font-xs); }
.alis-info {
    background: none;
    border: none;
    padding: 0 2px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-md);
    line-height: 1;
}
.alis-info:hover, .alis-info.open { color: var(--accent-primary-text); }

.alis-detail {
    margin: var(--space-xs) 0 var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
    font-size: var(--font-xs);
}
/* the name opens the info — *"Clicking on the name of the requirenment should open the info."* */
.alis-req-label { cursor: pointer; }
.alis-req-label:hover { color: var(--accent-primary-text); }
/* 📎 left of ⓘ; filled when the row has documents */
.alis-attach.alis-info { font-size: var(--font-xs); opacity: 0.45; }
.alis-attach.alis-info.has, .alis-attach.alis-info:hover { opacity: 1; }
/* one small square button for "+" and "−" — *"Just have it as a "+" button"* */
.alis-icon {
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 18px;
    text-align: center;
    background: var(--bg-dark);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--accent-primary-text);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.alis-icon:hover { border-color: var(--accent-primary); }
.alis-head-row { display: flex; align-items: center; gap: var(--space-sm); }
/* Spesialisering: the ALIS | Spesialist switch, "Start på ALIS" beside it */
.alis-track { gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; }
.alis-switch { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.alis-tab { padding: 4px 14px; border: none; background: transparent; color: var(--text-secondary); font-size: var(--font-sm); cursor: pointer; }
.alis-tab.active { background: var(--accent-primary-bg); color: var(--accent-primary-text); font-weight: 600; }
/* Spesialist: "Spesialisering sist godkjent" and the 5 years from it sit beside the switch, where "Start på ALIS"
   sits for ALIS; below them the links, one a row; the rows are the ALIS rows */
.alis-godkjent { margin-bottom: var(--space-lg); }
.renewal-links { list-style: none; margin: 0; padding: 0; font-size: var(--font-sm); line-height: 1.7; }
.renewal-links a { color: var(--accent-primary-text); }
.alis-req .econ-add-form { margin: var(--space-xs) 0 0; }
.renewal-tick { cursor: pointer; }                                    /* a click opens the row to add */
.alis-head-row > span:first-child { flex: 1; }
.alis-adder { margin: var(--space-xs) 0; }
/* below the columns: the course overview left, the lists and agreements right */
.alis-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-lg); align-items: start; }
@media (max-width: 900px) { .alis-bottom { grid-template-columns: 1fr; } }
.alis-bottom .alis-stack > * { max-width: none; }
.alis-kurs { padding: var(--space-md) var(--space-lg); }
.alis-kurs h2 { font-size: var(--font-lg); color: var(--text-primary); margin-bottom: var(--space-sm); }
/* the text fills its card — *"the Kursoversikt card takes almost 3/4 of the page, but the text only
   strethes halfway into the card."* */
.alis-kurs .alis-info-text { font-size: var(--font-sm); color: var(--text-secondary); }
/* Ferdighetstrening: the skills, one level in */
.alis-toggle { font-size: var(--font-sm); width: 1em; }
.alis-points { list-style: none; margin: 2px 0 4px calc(1em + 20px); padding: 0; font-size: var(--font-xs); }
.alis-points li { padding: 1px 0; }
.alis-points li.alis-sub { padding-left: 18px; }
.alis-points label { cursor: pointer; }
.alis-req .alis-count { font-size: var(--font-xs); }
.alis-info-text p { margin: 0 0 4px; line-height: 1.45; }
.alis-info-text a { color: var(--accent-primary-text); }
.alis-detail-head {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.alis-detail ul { list-style: none; padding: 0; margin: 0 0 var(--space-xs); }
.alis-detail li { padding: 1px 0; }
.alis-detail b { color: var(--text-primary); font-weight: 600; }
.alis-tag {
    font-size: var(--font-xs);
    padding: 0 6px;
    border-radius: 8px;
    background: var(--accent-primary-bg);
    color: var(--accent-primary-text);
}

.alis-files { list-style: none; padding: 0; margin: 2px 0; font-size: var(--font-sm); }
.alis-file-name { color: var(--text-primary); word-break: break-all; }
.alis-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-primary-text);
    font-size: inherit;
    cursor: pointer;
}
.alis-link:hover { text-decoration: underline; }

/* Drift's own part: Timebok above I perioden, beside Utbetalinger */
.calc-inputs, .calc-results { display: flex; flex-direction: column; gap: var(--space-md); }
.calc-book { cursor: pointer; font-size: var(--font-sm); color: var(--text-secondary); }
.calc-book:hover { border-color: var(--accent-primary); }
.calc-book > * { pointer-events: none; }   /* the click is the card's, wherever in it */
.calc-book h2 { margin-bottom: 4px; }
/* Timebok's popup: the week as a schedule, a day at a time */
.calc-book-edit { min-width: min(560px, calc(100vw - 32px)); }
.book-fields { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin-bottom: var(--space-sm); }
.book-day { padding: var(--space-xs) 0; border-top: 1px solid var(--border-subtle); font-size: var(--font-sm); }
.book-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-md); margin-bottom: 2px; }
.book-day-head b { width: 5.5em; color: var(--text-primary); }
.book-block { display: flex; align-items: center; gap: var(--space-xs); padding: 2px 0 2px 5.5em; }
.book-block select, .book-block input { padding: 2px 6px; background: var(--bg-dark); border: 1px solid var(--border-default);
                                        border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--font-sm); }
.book-day > .alis-link { margin-left: 5.5em; }
/* "Then line, inntjening" — a heading row with its line in I perioden */
.calc-head td { padding-top: var(--space-sm) !important; font-size: var(--font-xs); font-weight: 600; text-transform: uppercase;
                letter-spacing: 0.6px; color: var(--text-muted) !important; text-align: left !important; border-top: 1px solid var(--border-subtle); }
.calc-card {
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
.calc-card h2, .calc-card summary { font-size: var(--font-lg); color: var(--text-primary); margin-bottom: var(--space-sm); cursor: default; }
.calc-card summary { cursor: pointer; margin-bottom: 0; }
.calc-card h3 {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin: var(--space-md) 0 var(--space-xs);
}
.calc-field { display: flex; align-items: center; gap: var(--space-sm); padding: 2px 0; font-size: var(--font-sm); color: var(--text-secondary); }
.calc-field span { flex: 1; }
.calc-field input {
    width: 7.5em;
    padding: 2px 6px;
    background: var(--bg-dark);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-sm);
    text-align: right;
}
.calc-field input[type="text"] { width: 100%; text-align: left; }
.calc-field input[type="checkbox"] { width: auto; }
/* a number typed as text, so "," and "." both work — still a number field to look at */
.calc-field input.calc-num { width: 7.5em; text-align: right; }
.calc-field em { font-style: normal; color: var(--text-muted); width: 1.5em; }
.calc-line { display: flex; align-items: center; gap: var(--space-xs); }
.calc-line .calc-field:first-child { flex: 1; }
.calc-avg { margin-top: var(--space-sm); font-size: var(--font-sm); color: var(--text-secondary); }
.calc-table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.calc-table td { padding: 3px 0; color: var(--text-secondary); }
.calc-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.calc-strong td { font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--border-subtle); }

/* Drift: the Helfo letters above the calculator — one width for both halves */
.drift-helfo { margin-bottom: var(--space-lg); }
.drift-helfo, .drift-calc { max-width: 1100px; }
.helfo-stack { display: flex; flex-direction: column; gap: var(--space-md); }
/* every control and fold inside the Helfo cards at the page's text size, never the card heading's —
   *"text formatting is suddently very large some places"* */
.helfo-stack .calc-card h2 select, .helfo-stack .calc-card h2 .alis-button { font-size: var(--font-sm); font-weight: 400; }
.helfo-stack .calc-card details > summary { font-size: var(--font-sm); font-weight: 400; color: var(--text-secondary); margin: var(--space-xs) 0; }
.helfo-inbox { margin: var(--space-xs) 0; }
.helfo-inbox-address { color: var(--text-primary); }
.helfo-inbox-kr { margin-left: 2.5em; }
.helfo-copy { background: none; border: none; color: inherit; cursor: pointer; padding: 0 4px; vertical-align: middle; }
.helfo-copy:hover { color: var(--text-primary); }
.helfo-practices { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.helfo-private { margin: 1.5em 0 0; font-size: var(--font-sm); color: var(--text-primary); }
/* a practice: its own line, its reports opened underneath — *"the actual praksis i am looking at the
   reports should not move, it should just open the list below"* */
.helfo-practice { padding: 3px 0; font-size: var(--font-sm); }
.helfo-practice-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.helfo-practice .econ-check { padding: 0; }
.helfo-practice .alis-link { color: var(--text-secondary); }
.helfo-stack .alis-link { font-size: var(--font-sm); }
.helfo-reports { margin: 2px 0 var(--space-xs) 26px; max-width: 520px; }
/* the cards that follow the date picker, framed as one; Takstendringer below it, apart — *"have a clear
   seperation between Deg mot andre over tid and Takstendringer"* */
.helfo-period-group { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-md);
                      border: 2px solid var(--border-default); border-radius: var(--radius-md); }
.helfo-apart { margin-top: var(--space-md); }
.helfo-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.helfo-period { gap: var(--space-sm); }
/* the chosen one of a set of buttons, plainly marked */
.helfo-on { background: var(--accent-primary) !important; color: #fff !important; border-color: var(--accent-primary) !important; }
.helfo-wide { overflow-x: auto; }
.helfo-zero td { color: var(--color-error); }
/* the charts over time, small, all five in one row, no scrolling; a click opens one big — *"just an area with
   smaller images of the graphs that i can click to get bigger. So i can see a small version of the graph all
   of them without scrolling"* */
.helfo-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.helfo-chart-row { grid-column: 1 / -1; margin: 6px 0 -4px; }   /* the row's kind of data, over its three */
.helfo-formula { margin: 0 0 8px; }
.helfo-thumb { display: block; padding: 6px; background: var(--bg-dark); border: 1px solid var(--border-default);
               border-radius: var(--radius-sm); cursor: pointer; text-align: left; color: inherit; font: inherit; }
.helfo-thumb:hover { border-color: var(--accent-primary); }
.helfo-thumb > * { pointer-events: none; }   /* the click is the button's, wherever in it */
.helfo-thumb h3 { margin: 0 0 4px; min-height: 2.6em; }
/* *"keep the Takster in non-capitalized letters"* — a takst is 2ad, never 2AD */
.helfo-thumb h3 { text-transform: none; letter-spacing: 0; }
.helfo-thumb .hc { max-width: 100%; }
/* a popup over the page: a big chart, or Timebok to edit */
.practice-pop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
                background: rgba(0, 0, 0, 0.55); }
.practice-pop-box { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; padding: var(--space-md);
                    background: var(--bg-medium); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.practice-pop-box h2 { font-size: var(--font-lg); color: var(--text-primary); margin-bottom: var(--space-sm); }
.practice-pop-box h2 .alis-link { font-size: var(--font-lg); }
/* Utbetalinger, and Drift's Timebok and I perioden beside it — *"move the arbeidstid and I perioden up next to
   utbetalt per måned"* (helfo-view.js DRIFT_WIDTH is the right column + the gap) */
.helfo-pay-row { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-md); align-items: start; }
@media (max-width: 800px) { .helfo-pay-row { grid-template-columns: 1fr; } }
/* a thin line before each group of columns, all the way down — *"A thin line seperating Honorar Snitt per
   konsultasjon Statistikk all the way down"* */
.helfo-compare .g-start { border-left: 1px solid var(--border-default); padding-left: 8px; }
.hc { display: block; }
.hc rect:hover, .hc circle:hover { opacity: 0.75; }
/* no text-anchor here: CSS beats the SVG attribute, and centring the last date cut it in half */
.hc-axis { fill: var(--text-secondary); font-size: 11px; }
.hc-grid { stroke: var(--border-subtle); stroke-width: 1; }
/* a takst change on a line over time */
.hc-mark { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
/* the change bar in a table row: loss half · gain half */
.hd-bar { display: flex; min-width: 140px; }
.hd-half { display: flex; flex: 1; height: 12px; }
.hd-neg { justify-content: flex-end; border-right: 1px solid var(--border-default); }
.hd-neg i { display: block; background: #e15759; border-radius: 2px 0 0 2px; }
.hd-pos i { display: block; background: #59a14f; border-radius: 0 2px 2px 0; }
/* a rise green, a fall red — wherever a value is coloured */
.helfo-stack .up, .helfo-stack td.up { color: #59a14f; }
.helfo-stack .down, .helfo-stack td.down { color: #e15759; }   /* td: beats .calc-table td:last-child */
.helfo-units { display: inline-flex; gap: 4px; }
/* "Normalisert på 2ad": a switch, set apart from the unit buttons — *"Make the "normalisert a toggle, now it is
   the same button, but it works differently, it is also the same place, so it is really confusing"* */
/* right after the heading's text — *"move the Normalisert på 2ad switch to just right of the text"* */
.helfo-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-md); vertical-align: middle;
                font-size: var(--font-sm); font-weight: 400; color: var(--text-secondary); cursor: pointer; }
.helfo-toggle input { appearance: none; width: 30px; height: 16px; border-radius: 8px; background: var(--border-default);
                      position: relative; cursor: pointer; margin: 0; }
.helfo-toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
                             background: #fff; transition: left .15s; }
.helfo-toggle input:checked { background: var(--accent-primary); }
.helfo-toggle input:checked::after { left: 16px; }
.helfo-toggle input:disabled { opacity: .4; cursor: default; }
/* Takstendringer: the overall picture first, the table with every change to its right — *"have the
   overall picture first, then to its right side the large table with all the changes"* */
.helfo-change-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-sm) var(--space-lg); }
/* every changed takst, all shown — *"Show all instead of inside scrolling"*; a line on its left — *"Add a line to
   the left of takst, to seperate from the summary"* */
.helfo-change-list { flex: 1 1 620px; overflow-x: auto; border-left: 1px solid var(--border-default); padding-left: var(--space-lg); }
.helfo-sum .helfo-sum-head td { padding-top: var(--space-sm); font-size: var(--font-xs); font-weight: 600; color: var(--text-muted);
                                border-top: 1px solid var(--border-subtle); }
.helfo-sum { border-collapse: collapse; font-size: var(--font-sm); margin-bottom: var(--space-sm); }
.helfo-sum th, .helfo-sum td { padding: 1px 12px 1px 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.helfo-sum th:first-child, .helfo-sum td:first-child { text-align: left; }
.helfo-sum th { font-weight: 600; font-size: var(--font-xs); color: var(--text-muted); }
.helfo-change { width: 100%; }
.helfo-change th, .helfo-change td { padding: 2px 14px 2px 0; white-space: nowrap; }
.helfo-sort { cursor: pointer; white-space: nowrap; user-select: none; }
.helfo-sort:hover { color: var(--text-primary); }
.hc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--font-xs); color: var(--text-secondary); margin-top: 4px; }
.hc-legend i { display: inline-block; width: 12px; height: 3px; margin-right: 4px; vertical-align: middle; }
/* a dashed line in the legend is drawn dashed — *"show this in the legend"* */
.hc-legend i.hc-dash { width: 20px; height: 0; border-top: 2px dashed; }
.hc-legend i.hc-stripe, .hc-legend i.hc-solid { width: 14px; height: 10px; }
/* the takst table's header in two rows: the group, then its columns */
.helfo-takster th.helfo-group { text-align: center; border-bottom: 1px solid var(--border-subtle); padding: 2px 8px; }
.helfo-takster { border-collapse: collapse; font-size: var(--font-sm); width: 100%; }
.helfo-takster td { padding: 2px 6px 2px 0; color: var(--text-secondary); white-space: nowrap; }
.helfo-code { width: 4.5em; color: var(--text-primary) !important; font-variant-numeric: tabular-nums; }
.helfo-barcell { width: 100%; }
.helfo-hbar { display: block; height: 10px; border-radius: 2px; background: var(--accent-primary); }
.helfo-takster .n, .helfo-compare .n { text-align: right; font-variant-numeric: tabular-nums; }
.helfo-compare th { font-weight: 600; font-size: var(--font-xs); color: var(--text-muted); text-align: left; padding: 2px 8px 2px 0; }
.helfo-compare td { padding: 2px 8px 2px 0; }

/* ALIS tilskudd and Timeliste: cards stacked — period, opplysninger, registrering, tables */
.econ-stack { display: flex; flex-direction: column; gap: var(--space-md); }
/* only as wide as the content needs — *"without any thought of how much space this stuff actually needs"* */
.practice-page > .econ-stack { max-width: 1100px; }
.econ-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); font-size: var(--font-sm); color: var(--text-secondary); }
.econ-links a { color: var(--accent-primary-text); }
.econ-toggle { cursor: pointer; }
/* fields in rows, not one per line — *"Have the fields neatly structured"* */
.econ-row { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: flex-end; margin-bottom: var(--space-sm); }
.econ-field { display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1; font-size: var(--font-xs); color: var(--text-muted); }
.econ-field.econ-wide { flex: 2; min-width: 220px; }
.econ-field input, .econ-field select, .econ-rates input {
    padding: 4px 6px;
    background: var(--bg-dark);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-sm);
}
.econ-add-btn { align-self: flex-end; }
.econ-check { display: flex; align-items: center; gap: 6px; font-size: var(--font-sm); color: var(--text-secondary); padding: 2px 0; }
.econ-sub { border-left: 2px solid var(--accent-primary); padding-left: var(--space-md); margin-bottom: var(--space-sm); }
.econ-sub-head { font-size: var(--font-xs); color: var(--text-muted); margin-bottom: var(--space-xs); }
.econ-open-add { margin-top: var(--space-sm); font-size: var(--font-sm); }
.econ-add-form { margin-top: var(--space-sm); padding: var(--space-sm); background: var(--bg-dark); border-radius: var(--radius-sm); }
.econ-rates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); font-size: var(--font-sm); color: var(--text-secondary); }
.econ-rates input { width: 7em; text-align: right; }
.econ-rates em, .econ-table em { font-size: var(--font-xs); font-style: normal; color: var(--text-muted); }
.econ-table .note { color: var(--text-secondary); }
.econ-table .note.alis-error { color: var(--color-error); }   /* a maximum passed stays red */
.econ-cell { width: 6.5em; text-align: right; }                /* the numbers in "Satser per år" */
.econ-years .econ-adding td { background: var(--bg-dark); }
/* *"the table is still quite wide, without having to be that"* — the table is as wide as its content;
   only the table scrolls on a narrow screen, never the add form (its calendar would be cut off) */
.econ-table { width: fit-content; min-width: 360px; max-width: 100%; }
.econ-scroll { overflow-x: auto; }
.econ-table table { width: auto; }
/* *"legg til shows two rows of inputs, but it could easily be on one row"* */
.econ-one-row { flex-wrap: wrap; align-items: flex-end; margin-bottom: 0; }
.econ-field.econ-narrow { flex: 0 0 auto; min-width: 0; }
.econ-narrow input[inputmode="decimal"] { width: 6.5em; }
.econ-narrow input[type="text"] { width: 8em; }
.econ-one-row .econ-wide { flex: 1 1 12em; min-width: 12em; }
.econ-buttons { display: flex; gap: var(--space-xs); align-items: flex-end; }
/* Legg til and Avbryt — the same size: *"these buttons are different sizes, looks weird"* */
.alis-secondary { color: var(--text-secondary); }
/* Timeliste: every timeliste, one card each, narrow */
.practice-page > .ts-page { max-width: 560px; }
.ts-page .econ-table { width: auto; }
.ts-page .ts-sheet h2 .alis-button { font-size: var(--font-xs); }
.ts-profile .econ-field { margin-bottom: var(--space-xs); }
/* Timeliste: the saved printouts under the rows */
.ts-printouts { margin-top: var(--space-sm); }
.ts-printouts .econ-forms { max-width: 520px; }
.ts-save-what { font-size: var(--font-sm); color: var(--text-secondary); align-self: center; }
.ts-facts { margin: 0 0 var(--space-xs); }
.econ-table h3 { font-size: var(--font-sm); font-weight: 600; color: var(--text-primary); margin: var(--space-sm) 0 var(--space-xs); }
/* a section heading reads as one; the rows under it are plain — *"you are using text styling to put the
   title in the background … and the entries themselves more sharp styling"* */
.econ-table .subhead td { background: var(--bg-dark); font-weight: 600; color: var(--text-primary); }
.econ-table .line { cursor: pointer; }
.econ-table .line:hover td { background: var(--bg-hover); }
.econ-table .detail td:first-child { padding-left: var(--space-lg); }
.econ-inline { display: inline-flex; align-items: center; gap: var(--space-xs); }
.econ-inline select {
    padding: 4px 6px;
    background: var(--bg-dark);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-sm);
}
.econ-value { padding: 4px 0; font-size: var(--font-sm); color: var(--text-primary); }
.econ-type-line { margin-bottom: 2px; min-height: 28px; }
/* small fields for short values — *"HPR number can be much smaller"* */
.econ-field.econ-tiny { flex: 0 0 auto; min-width: 0; }
.econ-tiny input { width: 6em; }
.econ-narrow input[type="date"] { width: 9.5em; }
.econ-row.econ-sub { margin-left: 0; }
/* the agreements: one line each, the open one below its line */
.econ-agrs { list-style: none; margin: 0; padding: 0; }
.econ-agrs > li { margin-bottom: var(--space-xs); }
.econ-agr {
    padding: 4px 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-sm);
    cursor: pointer;
}
.econ-agr.open { border-color: var(--accent-primary); }
/* Avtaler | Tilskuddsskjema — *"I want the card avtaler to divide in two"* */
.econ-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl); align-items: start; }
.econ-fields { border: none; margin: 0; padding: 0; min-width: 0; }
.econ-fields:disabled { opacity: 0.6; }
.econ-forms { list-style: none; margin: 0; padding: 0; font-size: var(--font-sm); }
.econ-form { display: flex; align-items: center; gap: var(--space-sm); padding: 4px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: var(--space-xs); }
.econ-form.locked { background: var(--bg-dark); }
.econ-form-what { flex: 1; color: var(--text-primary); }
.econ-form-sum { font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 7em; text-align: right; }
.econ-agrs .econ-row, .econ-agrs .econ-buttons { margin-top: var(--space-xs); }
.econ-type { flex: 0 0 240px; }

/* the from–to date picker (PracticeUtil.picker) */
.rp { position: relative; display: inline-block; }
.rp-btn {
    padding: 4px 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-sm);
    cursor: pointer;
    white-space: nowrap;
}
.rp-cal {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    width: 250px;
    padding: var(--space-sm);
    background: var(--bg-dark);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
}
.rp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); color: var(--text-primary); font-size: var(--font-sm); }
.rp-head button { background: none; border: none; color: var(--text-primary); font-size: var(--font-lg); cursor: pointer; padding: 0 8px; }
.rp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rp-wd { text-align: center; font-size: var(--font-xs); color: var(--text-muted); }
.rp-day {
    padding: 4px 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    cursor: pointer;
}
.rp-day:hover { background: var(--bg-hover); }
.rp-in { background: var(--accent-primary-bg); color: var(--text-primary); }
.rp-edge { background: var(--accent-primary); color: white; }
.rp-today { outline: 1px solid var(--border-focus); }
.rp-hint { margin-top: var(--space-xs); font-size: var(--font-xs); color: var(--text-muted); }
/* *"I still find the tables very hard to read"* — a grid like the template's: every cell lined, the
   header row on a colour band, section rows on a grey band, the sum row heavy, the prices marked */
.econ-table table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.econ-table th, .econ-table td { padding: 4px 8px; border: 1px solid var(--border-subtle); text-align: left; color: var(--text-primary); }
.econ-table th { background: var(--accent-primary-bg); color: var(--text-primary); font-weight: 600; vertical-align: bottom; }
.econ-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.econ-table .sum td { font-weight: 700; border-top: 2px solid var(--border-default); }
.econ-table tr.rates td { border: none; padding-left: 0; font-weight: 600; color: var(--text-secondary); }
.econ-table tr.rates td.rate { border: 1px solid var(--border-subtle); background: var(--accent-primary-bg); color: var(--text-primary); }
.econ-table td:last-child button { padding: 0 4px; }
.econ-table .note { font-size: var(--font-sm); margin: var(--space-xs) 0 0; }

/* the agreements: *"3 small things above each other"* */
.alis-stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.alis-stack > * { width: 100%; max-width: 380px; }
.alis-stack h2 { font-size: var(--font-lg); color: var(--text-primary); }
.alis-card {
    background: var(--bg-medium);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}
.alis-card-label { font-size: var(--font-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.alis-button {
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-dark);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--accent-primary-text);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
}
.alis-button:hover { border-color: var(--accent-primary); }