/* Prospektering — tokens only (Paradigm Design System). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--color-bg); color: var(--text-default); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); }
h1, h2, h3 { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); margin: 0; }
h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
a { color: var(--color-link); text-underline-offset: 0.18em; }
a:hover { color: var(--color-action-hover); }
:focus-visible { outline: var(--border-ring) solid var(--color-focus-ring); outline-offset: var(--border-thick); }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
[hidden] { display: none !important; }

/* Shell */
.shell { display: grid; grid-template-columns: 22rem 1fr; min-height: 100vh; }
.rail { border-right: var(--border-hair) solid var(--color-hairline); background: var(--color-surface); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.rail__head { padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: var(--border-hair) solid var(--color-hairline); }
.rail__head h1 { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.rail__scroll { overflow-y: auto; flex: 1; padding-bottom: var(--space-8); }
.rail__foot { border-top: var(--border-hair) solid var(--color-hairline); padding: var(--space-3) var(--space-5); display: flex; gap: var(--space-2); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: var(--border-hair) solid var(--color-hairline); background: var(--color-bg); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.tabs { display: flex; gap: var(--space-1); }
.tab { background: none; border: 0; padding: var(--space-2) var(--space-3); font: inherit; color: var(--text-muted); border-radius: var(--radius-md); cursor: pointer; }
.tab:hover { color: var(--text-default); background: var(--color-surface-sunken); }
.tab[aria-selected="true"] { color: var(--text-default); background: var(--color-action-subtle); font-weight: var(--weight-semibold); }
.spacer { flex: 1; }
.view { padding: var(--space-5) var(--space-6) var(--space-9); }

/* Filter sections */
.fsec { border-bottom: var(--border-hair) solid var(--color-hairline); }
.fsec > summary { list-style: none; cursor: pointer; padding: var(--space-3) var(--space-5); display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.fsec > summary::-webkit-details-marker { display: none; }
.fsec > summary::after { content: "+"; margin-left: auto; color: var(--text-subtle); font-family: var(--font-mono); }
.fsec[open] > summary::after { content: "−"; }
.fsec > summary:hover { background: var(--color-surface-sunken); }
.fsec__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-on-accent); background: var(--color-action); border-radius: var(--radius-pill); padding: 0 var(--space-2); }
.fsec__body { padding: 0 var(--space-5) var(--space-4); display: grid; gap: var(--space-3); }
.field { display: grid; gap: var(--space-1); }
.field > label, .field > .lbl { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-medium); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.range { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); align-items: center; }
.range span { color: var(--text-subtle); }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.check input { margin-top: var(--space-1); accent-color: var(--color-action); }
.hint { font-size: var(--text-xs); color: var(--text-subtle); margin: 0; }

input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  width: 100%; font: inherit; color: var(--input-fg); background: var(--input-bg); border: var(--border-hair) solid var(--input-border); border-radius: var(--input-radius); padding: var(--space-2) var(--space-3); transition: border-color var(--duration-fast) var(--ease-standard);
}
input:hover, select:hover, textarea:hover { border-color: var(--color-action); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--border-ring) solid var(--input-focus-ring); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--input-placeholder); }
textarea { min-height: calc(var(--space-9) * 1.5); resize: vertical; }

.btn { display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; font-weight: var(--weight-medium); border-radius: var(--button-radius); padding: var(--space-2) var(--space-4); border: var(--border-hair) solid var(--button-bg); background: var(--button-bg); color: var(--button-fg); cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard); }
.btn:hover { background: var(--button-bg-hover); border-color: var(--button-bg-hover); }
.btn:active { background: var(--color-action-active); }
.btn--ghost { background: transparent; color: var(--button-ghost-fg); border-color: var(--button-ghost-border); }
.btn--ghost:hover { background: var(--color-surface-sunken); border-color: var(--color-action); }
.btn--ghost:active { background: var(--color-action-subtle); }
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn--danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-surface); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--color-link); cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
.linkbtn:hover { color: var(--color-action-hover); } .linkbtn:active { color: var(--color-action-active); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--badge-bg); color: var(--badge-fg); border-radius: var(--badge-radius); padding: 0 var(--space-1) 0 var(--space-2); font-size: var(--text-xs); border: var(--border-hair) solid transparent; }
.chip--neg { background: var(--color-danger-surface); color: var(--color-danger); }
.chip button { background: none; border: 0; color: inherit; cursor: pointer; padding: 0 var(--space-1); font: inherit; border-radius: var(--radius-pill); }
.chip button:hover { background: var(--color-surface); } .chip button:active { background: var(--color-surface-sunken); }
.toggle-chip { font: inherit; font-size: var(--text-xs); border: var(--border-hair) solid var(--color-border-strong); background: var(--color-surface); color: var(--text-default); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); cursor: pointer; }
.toggle-chip:hover { border-color: var(--color-action); }
.toggle-chip:active { background: var(--color-action-subtle); }
.toggle-chip[aria-pressed="true"] { background: var(--color-action); border-color: var(--color-action); color: var(--text-on-accent); }
.toggle-chip[data-neg="true"] { background: var(--color-danger-surface); border-color: var(--color-danger); color: var(--color-danger); text-decoration: line-through; }

/* Picker (nace/kommune) */
.picker { border: var(--border-hair) solid var(--color-hairline); border-radius: var(--radius-md); max-height: calc(var(--space-10) * 4); overflow-y: auto; background: var(--color-surface); }
.picker__item { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) var(--space-2); cursor: pointer; border-bottom: var(--border-hair) solid var(--color-hairline); }
.picker__item:hover { background: var(--color-surface-sunken); }
.picker__item .code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); min-width: calc(var(--space-6) + var(--space-2)); }
.picker__item .name { flex: 1; min-width: 0; font-size: var(--text-sm); line-height: var(--leading-snug); }
.picker__actions .btn { padding: 0 var(--space-2); }
.picker__item .cnt { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); }
.picker__exp { background: none; border: 0; cursor: pointer; color: var(--text-muted); font-family: var(--font-mono); width: var(--space-5); padding: 0; }
.picker__exp:hover { color: var(--color-action); }
.picker__actions { display: flex; gap: var(--space-1); flex-shrink: 0; }
.picker__item .cnt { flex-shrink: 0; }

/* Result summary + facets */
.summary { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.summary__total { font-family: var(--font-serif); font-size: var(--text-3xl); letter-spacing: var(--tracking-display); }
.notice { background: var(--color-warning-surface); color: var(--text-default); border-left: var(--border-thick) solid var(--color-warning); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.facets { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: var(--border-hair) solid var(--color-hairline); }
.facet h4 { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-family: var(--font-mono); }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; font-size: var(--text-xs); padding: var(--space-1) 0; cursor: pointer; background: none; border: 0; width: 100%; text-align: left; color: inherit; font-family: inherit; border-radius: var(--radius-sm); }
.bar:hover .bar__label { color: var(--color-action); } .bar:active { background: var(--color-action-subtle); }
.bar__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__track { grid-column: 1 / -1; height: var(--space-1); background: var(--color-surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--color-action); border-radius: var(--radius-pill); }
.facet--cols { columns: 2; column-gap: var(--space-5); }

/* Table */
.toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.tablewrap { overflow-x: auto; border: var(--border-hair) solid var(--color-hairline); border-radius: var(--radius-lg); background: var(--color-surface); }
table.data { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
table.data th { position: sticky; top: 0; background: var(--color-surface-sunken); text-align: left; font-weight: var(--weight-medium); font-size: var(--text-xs); color: var(--text-muted); padding: var(--space-2) var(--space-3); border-bottom: var(--border-hair) solid var(--color-hairline); white-space: nowrap; }
table.data th.sortable { cursor: pointer; } table.data th.sortable:hover { color: var(--color-action); }
table.data th[aria-sort="ascending"]::after { content: " ↑"; } table.data th[aria-sort="descending"]::after { content: " ↓"; }
table.data td { padding: var(--space-2) var(--space-3); border-bottom: var(--border-hair) solid var(--color-hairline); vertical-align: top; height: var(--space-8); }
table.data tbody tr { cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
table.data tbody tr:hover { background: var(--color-surface-sunken); }
table.data tbody tr.is-sel { background: var(--color-action-subtle); }
table.data .r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .nm { font-weight: var(--weight-medium); }
table.data .sub { display: block; font-size: var(--text-xs); color: var(--text-subtle); }
.neg { color: var(--color-danger); }
.pager { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; margin-top: var(--space-3); }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); border-radius: var(--radius-pill); padding: 0 var(--space-2); background: var(--color-surface-sunken); color: var(--text-muted); white-space: nowrap; }
.badge--accent { background: var(--badge-bg); color: var(--badge-fg); }
.badge--warn { background: var(--color-warning-surface); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-surface); color: var(--color-danger); }
.skeleton { background: var(--color-surface-sunken); border-radius: var(--radius-sm); height: var(--space-4); }
.empty { padding: var(--space-9) var(--space-6); text-align: left; color: var(--text-muted); }

/* Drawer */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(54rem, 100vw); background: var(--dialog-bg); border-left: var(--border-hair) solid var(--dialog-border); box-shadow: var(--dialog-shadow); z-index: 20; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--duration-base) var(--ease-standard); }
.drawer.is-open { transform: none; }
.scrim { position: fixed; inset: 0; background: var(--dialog-overlay); z-index: 15; }
.drawer__head { padding: var(--space-5) var(--space-6); border-bottom: var(--border-hair) solid var(--color-hairline); display: flex; gap: var(--space-4); align-items: flex-start; }
.drawer__body { overflow-y: auto; padding: var(--space-5) var(--space-6) var(--space-9); display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-6); align-content: start; }
.drawer__body > .wide { grid-column: 1 / -1; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.kv dt { color: var(--text-muted); font-size: var(--text-xs); padding-top: var(--space-1); } .kv dd { margin: 0; }
.panel { border-top: var(--border-hair) solid var(--color-hairline); padding-top: var(--space-4); }
.panel h3 { margin-bottom: var(--space-3); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chart { width: 100%; height: auto; max-height: calc(var(--space-10) * 3); display: block; margin-top: var(--space-2); }
.chart .b { fill: var(--color-action); } .chart .b.neg { fill: var(--color-danger); } .chart text { fill: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.log { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }

/* Lists & follow-up */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-4); }
.card { border: var(--border-hair) solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); padding: var(--space-4); display: grid; gap: var(--space-2); }
.toast { position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%); background: var(--color-ink-900); color: var(--color-paper-50); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: 30; box-shadow: var(--shadow-md); }
.menu { position: absolute; background: var(--dialog-bg); border: var(--border-hair) solid var(--dialog-border); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--space-1); z-index: 25; min-width: 16rem; max-height: 60vh; overflow-y: auto; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-default); }
.menu button:hover { background: var(--color-surface-sunken); } .menu button:active { background: var(--color-action-subtle); }
.datastatus { font-size: var(--text-xs); color: var(--text-subtle); }

/* Login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr minmax(20rem, 26rem) 2fr; align-items: center; }
.login form { grid-column: 2; display: grid; gap: var(--space-4); }
.login h1 { font-size: var(--text-4xl); }
.err { color: var(--color-danger); font-size: var(--text-sm); min-height: var(--space-5); }

@media (max-width: 70rem) { .facets { grid-template-columns: 1fr 1fr; } .drawer__body { grid-template-columns: 1fr; } }
@media (max-width: 52rem) { .shell { grid-template-columns: 1fr; } .rail { position: static; height: auto; } .login { grid-template-columns: var(--space-5) 1fr var(--space-5); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.fmore { border-top: var(--border-hair) solid var(--color-hairline); }
.fmore > summary { cursor: pointer; padding: var(--space-3) var(--space-5); font-size: var(--text-sm); color: var(--color-action); }