/* Shared components (js/ui/*). Apple's language: the system font, sentence-case labels, grouped surfaces, the iOS
   palette (tokens.css). Numbers never clip: hero and tile values shrink to fit their box (core/fit.js), only names
   truncate with an ellipsis. */

/* ---------- numbers ---------- */
.money { display: inline-flex; align-items: baseline; gap: .2em; white-space: nowrap; }
/* the unit after a value: proportional to big numbers, never below 11 px inside tiles and lines (decision 22) */
.money .unit { font-family: var(--sans); font-size: max(11px, .3em); letter-spacing: .01em; color: var(--ink-3); font-weight: 500; }
.delta { font-family: var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.flat { color: var(--ink-2); }

/* the hero number: SF Pro Display, big and light, tight tracking (decision 28) */
.hero { display: grid; gap: 4px; min-width: 0; }
.hero-l { font-size: 13px; color: var(--ink-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-v { font-family: var(--display); font-weight: 300; letter-spacing: -0.02em; line-height: 1; font-size: 56px; white-space: nowrap; min-width: 0; }
.hero-v .num { font-family: var(--display); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; }
.hero-s { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 15px; min-width: 0; }
[data-mode="wide"] .hero-v, [data-mode="tall"] .hero-v { font-size: 64px; }
[data-mode="desk"] .hero-v { font-size: 76px; }

/* ---------- badges ---------- */
.kind { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; letter-spacing: 0; font-weight: 500; color: var(--ink-3); background: var(--panel-hi); white-space: nowrap; vertical-align: middle; }
.kind::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.kind.k-live { color: var(--up); background: var(--up-dim); }
.kind.k-delayed { color: var(--steel); background: var(--steel-dim); }
.kind.k-estimate { color: var(--gold); background: var(--gold-dim); }
.kind.k-official { color: var(--ink); background: var(--panel-hi); }
.kind.k-stale { color: var(--down); background: var(--down-dim); }
.kind.k-close { color: var(--ink-3); }
.kind.k-manual { color: var(--steel); }
.kind:empty { padding: 0; width: 20px; justify-content: center; }
.lamp { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.lamp i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex: none; }
.lamp.l-green i { background: var(--up-fill); } .lamp.l-amber i { background: var(--gold-fill); } .lamp.l-red i { background: var(--down-fill); }
.lamp.pulse i { animation: lamp-pulse 2.4s var(--ease-io) infinite; }
@keyframes lamp-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.level { font-size: 11px; letter-spacing: 0; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--panel-hi); color: var(--ink-2); white-space: nowrap; }
.level.lv-kritisk { color: var(--on-gold); background: var(--gold); } .level.lv-hoy { color: var(--gold); background: var(--gold-dim); } .level.lv-medium { color: var(--ink-2); background: var(--panel-hi); }
.sig { font-size: 13px; white-space: nowrap; } .sig b { font-weight: 500; } .sig.up { color: var(--up); } .sig.down { color: var(--down); } .sig.flat { color: var(--ink-2); }
/* 'foreløpig' (intraday, not final): a hollow dot instead of an asterisk and a footnote */
.sig .prov { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px currentColor; vertical-align: .1em; }
.fresh { font-size: 12px; color: var(--ink-3); }

/* ---------- charts ---------- */
.spark { overflow: visible; }
.spark polyline { fill: none; stroke: var(--ink-2); stroke-linejoin: round; stroke-linecap: round; }
.spark.t-up polyline { stroke: var(--up-fill); } .spark.t-down polyline { stroke: var(--down-fill); } .spark.t-gold polyline { stroke: var(--gold-fill); }
.spark circle { fill: currentColor; } .spark.t-up circle { fill: var(--up-fill); } .spark.t-down circle { fill: var(--down-fill); }
.spark .base { stroke: var(--ink-4); stroke-dasharray: 2 3; stroke-width: 1; }
.spark .area { fill: var(--panel-hi); stroke: none; }
/* the chart sizes from its container (never wider: its svg is the box's width, labels stay inside) */
.chart { position: relative; width: 100%; min-width: 0; touch-action: pan-y; }
.chart svg { display: block; width: 100%; overflow: hidden; }
.chart .tick line { stroke: var(--line); stroke-width: 1; }
.chart .tick text, .chart .xl { fill: var(--ink-3); font-family: var(--num); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .zero { stroke: var(--ink-4); stroke-dasharray: 3 4; }
.chart .ln { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; stroke: var(--ink); }
.chart .ln.t-up { stroke: var(--up-fill); } .chart .ln.t-down { stroke: var(--down-fill); } .chart .ln.t-gold { stroke: var(--gold-fill); } .chart .ln.t-steel { stroke: var(--steel); } .chart .ln.t-dim { stroke: var(--ink-3); }
.chart .ln-ghost { stroke-width: 1.25; opacity: .75; stroke-dasharray: 3 3; }
.chart .ln-band { stroke-width: 1; opacity: .5; }
/* a hole in the data: no line is drawn across it, only a quiet dashed hairline and, when it fits, a note */
.chart .gap line { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 2 4; }
.chart .gap text { fill: var(--ink-3); font-size: 11px; font-family: var(--sans); }
.chart .ref line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.chart .ref text { fill: var(--ink-2); font-size: 11px; font-family: var(--num); }
.chart .mk line { stroke: var(--gold-fill); stroke-width: 1; stroke-dasharray: 2 3; } .chart .mk text { fill: var(--gold); font-size: 11px; }
.chart .hair line { stroke: var(--ink-3); stroke-width: 1; }
.chart .hair circle { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.chart .hair circle.t-up { fill: var(--up-fill); } .chart .hair circle.t-steel { fill: var(--steel); } .chart .hair circle.t-gold { fill: var(--gold-fill); } .chart .hair circle.t-down { fill: var(--down-fill); }
.hairbox { position: absolute; top: 0; width: 160px; max-width: 100%; padding: 8px 10px; border-radius: 12px; background: var(--glass-hi); border: .5px solid var(--line); font-size: 12px; display: grid; gap: 2px; pointer-events: none;
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--shadow-s); }
.hairbox .d { color: var(--ink-3); } .hairbox .v { display: flex; align-items: center; gap: 5px; color: var(--ink-2); min-width: 0; } .hairbox .v b { font-family: var(--num); font-weight: 500; color: var(--ink); margin-left: auto; white-space: nowrap; }
.hairbox .v i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.bars { display: grid; gap: 2px; }
.bar { display: grid; grid-template-columns: minmax(0, 38%) minmax(32px, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; margin: 0 -8px; border-radius: 10px; }
.bar.sel { background: var(--panel-hi); }
.bl { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .bl small { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.bt { position: relative; height: 6px; border-radius: 3px; background: var(--ink-5); }
.bt i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ink-2); transition: width .6s var(--ease); }
.bt i.t-up { background: var(--up-fill); } .bt i.t-down { background: var(--down-fill); } .bt i.t-gold { background: var(--gold-fill); } .bt i.t-steel { background: var(--steel); }
.bt em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--gold-fill); border-radius: 1px; }
.bv { font-size: 13px; text-align: right; color: var(--ink-2); white-space: nowrap; min-width: 44px; }
.heat { overflow: visible; max-width: 100%; } .heat text { fill: var(--ink-3); font-size: 11px; font-family: var(--sans); }

/* ---------- controls ---------- */
/* iOS segmented control: a filled track, the selected segment a raised plate */
.seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--panel-hi); gap: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1 0 auto; height: 30px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; scroll-snap-align: start; transition: color .2s, background .25s var(--ease); }
.seg button.on { color: var(--ink); background: var(--seg-on); box-shadow: var(--shadow-s); font-weight: 600; }
.seg button small { margin-left: 5px; color: var(--ink-3); font-size: 12px; }
.seg-s button { height: 26px; padding: 0 10px; font-size: 12px; }
.slider { display: grid; gap: 6px; }
.sl-label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
/* pan-y: a vertical scroll that lands on the track scrolls the page; only a horizontal drag moves the value (F028) */
.sl-track { position: relative; height: 44px; touch-action: pan-y; cursor: pointer; }
.sl-track::before { content: ''; position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--ink-5); }
.sl-fill { position: absolute; left: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--ink); }
.sl-track i { position: absolute; top: 17px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--ink-4); }
.sl-track i.on { background: transparent; }
.sl-ghost { position: absolute; top: 10px; width: 2px; height: 24px; margin-left: -1px; background: var(--gold-fill); border-radius: 1px; }
.sl-thumb { position: absolute; top: 8px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: #ffffff; color: #000000; display: grid; place-items: center; box-shadow: 0 0.5px 4px rgba(0, 0, 0, .12), 0 6px 13px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); transition: left .12s var(--ease); }
.sl-track.drag .sl-thumb { transition: none; }
.sl-thumb em { font-style: normal; font-size: 12px; font-weight: 600; }
.slider.dis { opacity: .45; pointer-events: none; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; }
.tg-text { display: grid; min-width: 0; } .tg-text small { font-size: 13px; color: var(--ink-3); }
.toggle input[type=checkbox] { width: 51px; height: 31px; accent-color: var(--up-fill); flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: background .2s, opacity .2s; }
.btn-ghost { background: var(--panel-hi); color: var(--ink); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-danger { background: var(--down-dim); color: var(--down); }
.btn-line { border: 1px solid var(--line-hi); }
.btn:active { opacity: .6; }
.btn-s { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.field { display: grid; gap: 6px; min-width: 0; }
.f-label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.f-box { display: flex; align-items: center; height: 48px; padding: 0 14px; border-radius: 12px; background: var(--panel-hi); border: 1px solid transparent; transition: border-color .2s; min-width: 0; }
.f-box:focus-within { border-color: var(--line-hi); }
.f-box input, .f-box select { flex: 1; min-width: 0; height: 100%; background: none; border: 0; color: var(--ink); font: inherit; font-size: 17px; font-family: var(--num); font-variant-numeric: tabular-nums; outline: none; -webkit-appearance: none; appearance: none; }
.f-box input::placeholder { color: var(--ink-4); }
.f-box select { font-family: var(--sans); }
.f-suffix { color: var(--ink-3); font-size: 13px; margin-left: 8px; white-space: nowrap; }
.f-hint { font-size: 12px; color: var(--ink-3); } .f-error { font-size: 12px; color: var(--down); }
.field.err .f-box { border-color: var(--down); }

/* ---------- blocks ---------- */
.sec { margin: 24px 0 6px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; min-width: 0; }
.sec-h h3 { font-size: 15px; letter-spacing: -0.01em; color: var(--ink); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-a { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex: none; white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-mode="tall"] .tiles, [data-mode="desk"] .tiles.t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); background: var(--panel); text-align: left; min-width: 0; align-content: start; }
.tile.tap:active { background: var(--panel-hi); }
.tile-l { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* a value never clips: fit.js shrinks it to the tile's width instead */
.tile-v { font-family: var(--num); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; line-height: 1.2; }
.tile-s { font-size: 12px; color: var(--ink-3); min-width: 0; }
.tile.t-gold { box-shadow: inset 0 0 0 1px var(--gold-dim); } .tile.t-gold .tile-l { color: var(--gold); }
.list { display: grid; }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 9px 0; border-bottom: .5px solid var(--line); text-align: left; min-width: 0; }
.row.tap { padding-left: 10px; padding-right: 10px; margin: 0 -10px; width: calc(100% + 20px); border-radius: 12px; border-bottom-color: transparent; box-shadow: 0 .5px 0 var(--line); }
.row.tap:active, .row.sel { background: var(--panel-hi); }
.row-lead { flex: none; }
.row-m { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-t { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-s { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 6px; align-items: center; min-width: 0; }
/* the value side takes what its numbers need; the name on the left truncates instead (numbers never clip) */
.row-v { flex: none; display: grid; justify-items: end; gap: 2px; max-width: 72%; }
.row-vv { font-family: var(--num); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-vs { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.empty { padding: 28px 8px; text-align: center; color: var(--ink-3); display: grid; gap: 6px; justify-items: center; font-size: 15px; }
.empty b { color: var(--ink-2); font-weight: 500; }
.skel { display: grid; gap: 10px; padding: 8px 0; }
.skel i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--panel), var(--panel-hi), var(--panel)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
.card { padding: 16px; border-radius: var(--r-lg); background: var(--panel); min-width: 0; }
.card + .card { margin-top: 8px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 15px; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; min-width: 0; }
.note { font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; font-weight: 500; background: var(--panel-hi); color: var(--ink-2); white-space: nowrap; }
.pill.gold { background: var(--gold-dim); color: var(--gold); }
.scroll-x { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l)); padding: 2px var(--pad-r) 4px var(--pad-l); scroll-snap-type: x proximity; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: start; flex: none; }

/* ---------- sheet ---------- */
/* bottom: --kb lifts the sheet above the on-screen keyboard, so the footer button and the lower fields stay visible */
.sheet-wrap { position: absolute; inset: 0; bottom: var(--kb, 0px); z-index: 40; background: rgba(0, 0, 0, .4); display: flex; align-items: flex-end; justify-content: center; animation: fade .25s var(--ease) both; transition: bottom .25s var(--ease); }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: calc(100% - var(--safe-t) - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: var(--sheet-bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 8px max(20px, var(--safe-r)) calc(var(--safe-b) + 20px) max(20px, var(--safe-l)); box-shadow: var(--shadow);
  animation: sheet-in .46s var(--ease) backwards; }
/* 'backwards', not 'both': a kept end frame would override the inline transform of the swipe-down gesture */
.sheet.settling { transition: transform .28s var(--ease); }
.sheet::-webkit-scrollbar { display: none; }
@keyframes sheet-in { from { transform: translateY(40%); opacity: 0 } to { transform: none; opacity: 1 } }
.sheet-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--ink-4); margin: 0 auto 12px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-width: 0; }
.sheet-h h2 { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-h .x { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-hi); color: var(--ink-3); font-size: 18px; line-height: 1; display: grid; place-items: center; flex: none; }
[data-mode="wide"] .sheet-wrap, [data-mode="desk"] .sheet-wrap, [data-mode="tall"] .sheet-wrap { align-items: center; }
[data-mode="wide"] .sheet, [data-mode="desk"] .sheet, [data-mode="tall"] .sheet { border-radius: var(--r-xl); max-height: calc(100% - 48px); }
[data-mode="wide"] .sheet-grab, [data-mode="desk"] .sheet-grab, [data-mode="tall"] .sheet-grab { display: none; }
.sheet-wide { max-width: 760px; }

/* ---------- drift bar ---------- */
.drift { position: relative; height: 22px; min-width: 90px; }
.drift .d-track { position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 1px; background: var(--ink-5); }
.drift .d-band { position: absolute; top: 6px; height: 10px; border-radius: 5px; background: var(--panel-hi); border: 1px solid var(--line-hi); }
.drift .d-target { position: absolute; top: 3px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); }
.drift .d-implied { position: absolute; top: 5px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--steel); opacity: .8; }
.drift .d-dot { position: absolute; top: 5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--bg); transition: left .6s var(--ease); }
.card .drift .d-dot, .b-list .drift .d-dot, .tile .drift .d-dot { box-shadow: 0 0 0 3px var(--panel); }
.drift.st-over .d-dot, .drift.st-under .d-dot { background: var(--gold-fill); }
.drift.st-near .d-dot { background: color-mix(in srgb, var(--gold-fill) 60%, var(--ink)); }
.drift .d-txt { position: absolute; right: 0; top: -13px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.drift.st-over .d-txt, .drift.st-under .d-txt { color: var(--gold); }
.drift-c { height: 16px; } .drift-c .d-track { top: 7px; } .drift-c .d-band { top: 3px; } .drift-c .d-target { top: 1px; height: 14px; } .drift-c .d-dot { top: 2px; } .drift-c .d-implied { top: 3px; }

/* ---------- toasts ---------- */
.toasts { position: absolute; z-index: 60; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 10px); width: min(440px, calc(100% - 24px - var(--safe-l) - var(--safe-r))); display: grid; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: grid; gap: 2px; padding: 12px 16px; border-radius: 18px; background: var(--glass-hi); border: .5px solid var(--line);
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: var(--shadow); animation: toast-in .5s var(--ease) both; min-width: 0; }
.toast b { font-weight: 600; font-size: 15px; } .toast span { font-size: 13px; color: var(--ink-2); } .toast em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--gold); }
.toast.t-gold b { color: var(--gold); }
.toast.t-down b { color: var(--down); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(.98) } to { opacity: 1; transform: none } }

.ic { flex: none; }