:root {
  --page:#f9f9f7; --surface:#fcfcfb; --raised:#ffffff; --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --line:#e1e0d9; --line-2:#c3c2b7; --accent:#2a78d6; --hover:#f0efec; --industry:#0d8f6f;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.08);
  --inngrep:#7b3fd0; --inngrep-line:#2b1259;
  color-scheme: light;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { height:100%; margin:0; background:var(--page); color:var(--ink);
  font:14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
#map { position:absolute; inset:0; }
#beforeMap { position:absolute; inset:0; z-index:1; pointer-events:none; }
/* The old photo and the swipe handle ease in and out with the main map's photo */
#beforeMap, #swipe { opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; }
#beforeMap.show, #swipe.show { opacity:1; visibility:visible; transition:opacity .45s ease, visibility 0s; }
#swipe { position:absolute; top:0; bottom:0; z-index:2; width:0; pointer-events:none; }
#swipe::before { content:""; position:absolute; top:0; bottom:0; left:-1.5px; width:3px; background:#fff; box-shadow:0 0 4px rgba(0,0,0,.45); }
#swipeHandle { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); pointer-events:auto; touch-action:none;
  cursor:ew-resize; border:2px solid #fff; border-radius:999px; background:#1b1b1a; color:#fff; font-size:11px;
  padding:9px 10px; letter-spacing:2px; white-space:nowrap; box-shadow:0 1px 6px rgba(0,0,0,.4); }
#swipe .yr { position:absolute; top:14px; padding:3px 8px; border-radius:6px; background:rgba(27,27,26,.85); color:#fff;
  font-size:13px; font-weight:600; white-space:nowrap; }
#swipe .yr.left { right:10px; }
#swipe .yr.right { left:10px; }
@media (max-width:820px) {
  #swipeHandle { top:28%; }
  #swipe .yr { top:64px; }
}
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
button, select, input { font:inherit; color:inherit; }
a { color:var(--accent); }

/* ---------- panel ---------- */
#panel { position:absolute; left:12px; top:12px; bottom:12px; width:344px; z-index:4; display:flex;
  flex-direction:column; overflow:hidden; }
#panel .scroll { overflow-y:auto; padding:16px 18px 18px; }
.eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
h1 { font-size:20px; line-height:1.2; margin:2px 0 4px; font-weight:680; letter-spacing:-.015em; }
.region { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:10px 0 10px; }
#regionName { font-size:16px; font-weight:650; }
.link { border:0; background:none; padding:0; color:var(--accent); cursor:pointer; font-size:12.5px; white-space:nowrap; }
.tiles { display:grid; gap:8px; }
.tile { border:1px solid var(--line); border-radius:10px; padding:10px 12px 11px; background:var(--raised); }
.tile > b { display:block; font-size:26px; font-weight:680; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15; }
.tile > span { display:block; font-size:12.5px; color:var(--ink-2); line-height:1.4; margin-top:3px; }
.tile > span b { color:var(--ink); font-weight:650; white-space:nowrap; }
h2 { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; margin:18px 0 8px; }
.seg { display:flex; background:var(--hover); border-radius:8px; padding:2px; }
.seg button { flex:1; border:0; background:none; padding:5px 8px; border-radius:6px; cursor:pointer; font-size:12.5px;
  color:var(--ink-2); white-space:nowrap; }
.seg button:hover { color:var(--ink); }
.seg button.on { background:var(--raised); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.12); }

/* stacked bar: 2px surface gaps between segments, rounded ends */
.bar { display:flex; gap:2px; height:14px; margin:12px 0 8px; border-radius:4px; overflow:hidden; background:var(--surface); }
.bar i { display:block; min-width:2px; height:100%; }
.types { margin:0; padding:0; list-style:none; display:grid; gap:2px; font-size:12.5px; }
.types li { display:grid; grid-template-columns:12px minmax(0,1fr) auto 38px; gap:8px; align-items:center; font-variant-numeric:tabular-nums; }
.types li i { width:10px; height:10px; border-radius:3px; }
.types li span:nth-child(3) { color:var(--ink); text-align:right; white-space:nowrap; }
.types li span:last-child { color:var(--muted); text-align:right; }
.owners { margin:4px 0 0; padding:0; list-style:none; display:grid; gap:4px; font-size:12.5px; counter-reset:o; }
.owners li { display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:6px; align-items:baseline; }
.owners li::before { counter-increment:o; content:counter(o); color:var(--muted); font-size:11px; text-align:right; font-variant-numeric:tabular-nums; }
.owners li span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.owners li small { color:var(--muted); }
.owners li span:last-child { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:1px; }
/* Største eiere and Største bransjer: each row is a button that puts the owner or bransje in the chart and on the map */
.picks li { grid-template-columns:18px minmax(0,1fr); }
.picks button { font:inherit; color:inherit; text-align:left; border:0; background:none; cursor:pointer; width:100%;
  display:grid; grid-template-columns:10px minmax(0,1fr) auto minmax(40px,auto); gap:6px; align-items:center; padding:2px 5px; margin:-2px -5px; border-radius:5px; }
.picks button:hover { background:var(--hover); }
.picks button:focus-visible { outline:2px solid var(--ink); outline-offset:-1px; }
.picks button.on { background:var(--hover); font-weight:600; }
.picks .nm { display:flex; align-items:baseline; gap:4px; min-width:0; }
.picks .nm > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picks button > span:nth-child(3) { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.picks button > span:last-child { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
.picks .sw { width:10px; height:10px; border-radius:50%; border:1.5px solid var(--line-2); box-sizing:border-box; }
.picks button.on .sw { box-shadow:0 0 0 1.5px #fff, 0 0 0 3px var(--industry); }
.picks button.on > i.sw:not([style]) { background:var(--industry); }
#industries .more, #owners .more { margin-top:6px; }
.picks .cc { flex:none; font-size:10.5px; font-weight:600; letter-spacing:.03em; color:#9a3a14; }
#trendTitle .link { margin-left:6px; font-size:11.5px; }
.fine { margin:10px 0 0; font-size:11.5px; line-height:1.45; color:var(--muted); }
.fine a { color:inherit; }
.sources { margin-top:18px; border-top:1px solid var(--line); padding-top:10px; }

/* ---------- inngrep card ---------- */
#inngrep { display:none; margin:6px 0 4px; padding:12px 12px 12px; border:1px solid var(--line-2); border-left:4px solid var(--inngrep);
  border-radius:10px; background:var(--raised); }
#inngrep.on { display:block; }
#inngrep .head { display:flex; justify-content:space-between; align-items:baseline; }
#inngrep .head b { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
#inngrepText { margin:6px 0 8px; font-size:13.5px; line-height:1.5; }
#inngrepText b { font-weight:650; white-space:nowrap; }
.wb { margin-top:10px; }
.wb .row { display:flex; align-items:center; gap:8px; }
.wb select { border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:2px 4px; font-size:12.5px; }
.wb .fine { margin-top:4px; }

/* ---------- legend ---------- */
#legend { position:absolute; right:12px; bottom:32px; z-index:4; width:244px; padding:10px 12px 12px; }
#legendTitle { font-size:12.5px; font-weight:600; line-height:1.35; }
#legendRows { margin-top:8px; display:grid; gap:3px; }
.lrow { display:flex; align-items:center; gap:8px; font-size:12px; font-variant-numeric:tabular-nums; }
.lrow i { width:22px; height:12px; border-radius:3px; flex:none; }
.lsub { font-size:11px; color:var(--muted); margin-top:6px; }
.toggle { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; cursor:pointer; }
.toggle input { margin:0; accent-color:var(--ink-2); }

/* ---------- area per year, top right ---------- */
#trend { position:absolute; top:12px; right:56px; z-index:4; width:300px; margin:0; padding:10px 12px 8px; }
#trendTitle { font-size:12.5px; font-weight:600; line-height:1.35; }
#trendSvg { display:block; width:100%; height:auto; margin-top:6px; overflow:visible; }
#trendSvg text { font-size:10.5px; fill:var(--muted); font-variant-numeric:tabular-nums; }
#trendSvg .grid { stroke:var(--line); stroke-width:1; }
#trendSvg .guide { stroke:var(--line-2); stroke-width:1; }
#trend .lsub { margin-top:2px; }
#trend .lsub b { color:var(--ink); font-weight:600; }

/* ---------- tooltip ---------- */
#tip { position:absolute; z-index:6; pointer-events:none; display:none; padding:8px 10px; font-size:12px;
  max-width:280px; line-height:1.45; }
#tip b { font-weight:600; }
#tip hr { border:0; border-top:1px solid var(--line); margin:5px 0; }
#loading { position:absolute; inset:0; z-index:9; display:flex; align-items:center; justify-content:center;
  background:var(--page); color:var(--ink-2); font-size:14px; }
#sheetToggle { display:none; position:absolute; top:6px; right:8px; z-index:1; border:0; background:none; cursor:pointer;
  font-size:16px; color:var(--ink-2); padding:4px 6px; }
.maplibregl-ctrl-attrib { font-size:10.5px; }

@media (max-width:820px) {
  /* Phones: the panel is a bottom sheet that folds down to its heading */
  #panel { top:auto; bottom:12px; left:8px; right:8px; width:auto; max-height:46vh; }
  #panel .scroll { padding:12px 14px 14px; }
  h1 { font-size:17px; padding-right:28px; }
  .tile > b { font-size:22px; }
  #sheetToggle { display:block; }
  #panel.min .scroll { max-height:74px; overflow:hidden; }
  #panel.min #sheetToggle { transform:rotate(180deg); }
  #legend { bottom:auto; top:8px; right:8px; width:186px; padding:8px 10px; }
  #legendTitle { font-size:12px; }
  #legendRows { gap:2px; }
  .lrow { font-size:11.5px; line-height:1.25; }
  .lrow i { width:16px; height:10px; }
  #legend.fold #legendRows, #legend.fold .lsub, #legend.fold .toggle { display:none; }
  #legendTitle { cursor:pointer; padding-right:14px; position:relative; }
  #legendTitle::after { content:"▾"; position:absolute; right:0; top:0; color:var(--ink-2); }
  #legend.fold #legendTitle::after { content:"▸"; }
  /* Phones: the chart sits in the panel, under the big numbers */
  #trend { position:static; width:auto; margin-top:8px; box-shadow:none; border-radius:10px; background:var(--raised); }
}

/* Photo loading indicator, bottom left of the map area */
#photoStatus { position:absolute; left:380px; bottom:36px; z-index:5; display:flex; align-items:center; gap:8px;
  padding:6px 11px; font-size:12.5px; border-radius:999px; pointer-events:none;
  opacity:0; transform:translateY(4px); transition:opacity .25s ease, transform .25s ease; }
#photoStatus.show { opacity:1; transform:none; }
#photoStatus.failed { background:#fff4e5; border-color:#f0b46b; color:#6b3d00; }
#photoStatus .spin { width:12px; height:12px; border:2px solid #d4d2cb; border-top-color:#1b1b1a; border-radius:50%;
  animation:spin .8s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:820px) {
  #photoStatus { left:12px; bottom:calc(46vh + 24px); }
}

/* Dots in the legend for the zoomed-out overlap markers */
#legend i.dot { border-radius:50%; width:10px; height:10px; margin:0 6px; border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.18); }
#legend .lgap { height:4px; }

/* Uncertain Naturbase boundary in the tooltip */
#tip .warn { color:#a14a00; }