/* avis-ui/chrome.css — den delte side-ramme (shell): layout, masthead, footer, typografi.
   Emne-uafhængig; alt emne-specifikt bor i vertikalens bespoke hero (verticals/<id>/views/).
   Holdt kompakt med vilje — fælleskomponenterne, ikke en kopi af det live sites fulde CSS. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
.page{max-width:1040px;margin:0 auto;padding:0 22px 64px}
a{color:var(--link)}

/* ---- masthead ---- */
.mast{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:26px 0 18px;border-bottom:2px solid var(--ink)}
.mast-id .wordmark{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:baseline;gap:8px}
.mast-id .wordmark .beta{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--accent);padding:2px 6px;border-radius:2px;
  transform:translateY(-3px)}
.mast-id .tagline{margin:6px 0 0;font-size:13.5px;color:var(--label)}
.mast-actions{display:flex;gap:10px;flex-wrap:wrap}
.mast-actions a{font-family:var(--sans);font-weight:600;font-size:13px;text-decoration:none;
  padding:8px 14px;border:1.5px solid var(--ink)}
.mast-actions .btn-primary{background:var(--ink);color:var(--paper)}
.mast-actions .btn-ghost{color:var(--ink)}

/* ---- generiske byggesten hero'er bruger ---- */
.kicker{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
h1{font-family:var(--serif);font-weight:600;color:var(--ink);line-height:1.08;margin:.2em 0 .35em}
.lead{font-size:17px;color:var(--body);max-width:62ch}

/* ---- masthead-nav + "Flere data"-panel (app-core.js) ---- */
.mast-nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mast-nav .nav-link{font-family:var(--sans);font-weight:600;font-size:13px;text-decoration:none;
  color:var(--ink);padding:8px 12px;border:1.5px solid transparent}
.mast-nav .nav-link:hover{border-color:var(--hair2)}
.mast-nav .nav-link.is-active{border-color:var(--ink)}
.mast-nav .btn-primary{font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;
  padding:8px 14px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper)}
.mega-panel{margin:14px 0 4px;border:1.5px solid var(--ink);background:var(--panel2);
  box-shadow:var(--offset);padding:16px}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

/* ---- kort (forside + mega + kilder) ---- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:14px 0}
.card{display:flex;flex-direction:column;gap:5px;text-decoration:none;background:var(--panel2);
  border:1.5px solid var(--ink);box-shadow:var(--offset);padding:16px 16px 14px;position:relative;
  transition:transform .08s ease,box-shadow .08s ease}
.card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--track)}
.card-k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.card-t{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);line-height:1.1}
.card-d{font-size:13.5px;color:var(--label)}
.card-go{position:absolute;right:14px;bottom:12px;color:var(--accent);font-weight:700}
.src-card{display:flex;flex-direction:column;gap:5px;background:var(--panel2);
  border:1.5px solid var(--hair2);padding:14px 16px}

/* ---- sektionshoved ---- */
.sec-head{margin:30px 0 10px}
.sec-head h2{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:27px;
  line-height:1.1;margin:.15em 0 .3em}
#home-extra{margin-top:8px}

/* ---- oversigtstabel ---- */
.tbl-wrap{border:1.5px solid var(--ink);box-shadow:var(--offset);background:var(--panel2);
  overflow-x:auto;margin:8px 0 4px}
.tbl{border-collapse:collapse;width:100%;font-size:14px}
.tbl th,.tbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--hair)}
.tbl thead th{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--label);background:var(--panel);border-bottom:1.5px solid var(--ink);
  white-space:nowrap;position:sticky;top:0}
.tbl th.num,.tbl td.num{text-align:right;font-family:var(--mono)}
.tbl th.sortable{cursor:pointer;user-select:none}
.tbl th.sortable:hover{color:var(--ink)}
.tbl th.is-sort{color:var(--accent)}
.tbl th.is-sort::after{content:" ↕"}
.tbl .td-rank{font-family:var(--mono);font-size:11px;color:var(--rank);text-align:right;width:1%}
.tbl .td-nm a{font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--ink);text-decoration:none}
.tbl .td-nm a:hover{color:var(--accent);text-decoration:underline}
.tbl tbody tr:hover{background:var(--panel)}
.tbl .na{color:var(--label-soft)}
.tbl td.num .src{font-family:var(--sans);font-size:11px;color:var(--link);text-decoration:none;margin-left:4px}
.tbl td.num .src:hover{text-decoration:underline}
.th-rel,.td-rel{text-align:center;width:1%}
.g-ok{color:var(--up)}.g-est{color:var(--accent)}.g-na{color:var(--label-soft)}

/* ---- view-skift ---- */
[hidden]{display:none!important}

@media(max-width:640px){
  .mast{padding:18px 0 14px}
  .mast-nav{width:100%;justify-content:flex-start}
  .sec-head h2{font-size:22px}
}

/* ---- footer ---- */
.site-foot{margin-top:54px;border-top:2px solid var(--ink);padding-top:22px}
.site-foot .foot-main{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.site-foot .foot-word{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink)}
.site-foot .foot-tag{margin:6px 0 0;font-size:13px;color:var(--label);max-width:40ch}
.site-foot .foot-nav{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.site-foot .foot-nav a{font-size:13.5px;text-decoration:none}
.site-foot .foot-base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:18px;font-family:var(--mono);font-size:10.5px;color:var(--label-soft)}