/* Coop Bank — delt styling for kurssiderne.

   Facit er coopbank.dk. Farveprimitiver, radius-skala, skriftstørrelser og
   knapformer er hentet direkte ud af sitets eget stylesheet, og Porteron
   ligger i assets/fonts/ i de fire vægte det bruger. Designguiden og
   tone-of-voice-oplægget ligger bagved; hvor de to er uenige med det levende
   site, følger vi sitet. Guiden siger for eksempel 6 px radius, mens sitet
   kører en skala fra 4 til 32 px — vi kører skalaen. */

@font-face { font-family: Porteron; src: url('fonts/Porteron-Regular.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Porteron; src: url('fonts/Porteron-Medium.woff2') format('woff2');
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Porteron; src: url('fonts/Porteron-Semi.woff2') format('woff2');
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Porteron; src: url('fonts/Porteron-Bold.woff2') format('woff2');
             font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* ── Primitiver, som de står i coopbank.dk ─────────────────────────── */
  --coop-red-700:     #c31414;   --coop-red-800:  #a01414;
  --coop-red-200:     #ffc7c7;   --coop-red-100:  #ffe1e1;   --coop-red-50:   #fff1f1;
  --coop-bordeaux:    #55252f;   --coop-bordeaux-light:#5c2833;
  --coop-satin-50:    #f6f5f1;   --coop-satin-100:#edebe3;  --coop-satin-200:#ddd9cb;
  --coop-purple-200:  #dddbf9;   --coop-purple-300:#c4bef4; --coop-purple-400:#a699ec;
  --coop-blue-400:    #779ffd;   --coop-blue-500: #3864f9;  --coop-blue-600: #2243ee;
  --coop-green-300:   #8ee7ad;   --coop-green-400:#64d78c;
  --coop-green-500:   #2eb95f;   --coop-green-600:#21984b;
  --coop-neutral-50:  #f5f5f6;   --coop-neutral-100:#e5e5e8; --coop-neutral-200:#ceced3;
  --coop-neutral-400: #83858d;   --coop-neutral-700:#4c4d52; --coop-neutral-800:#434347;
  --coop-neutral-1000:#0c0c0d;
  --coop-yellow-50:   #fdefda;

  /* ── Roller ────────────────────────────────────────────────────────── */
  --page-plane:     #ffffff;                    /* sitet står på hvidt */
  --surface-1:      #ffffff;
  --surface-2:      var(--coop-satin-50);       /* rolige bånd og værktøjslinjer */
  --text-primary:   var(--coop-neutral-1000);
  --text-secondary: var(--coop-neutral-700);
  --text-muted:     var(--coop-neutral-400);
  --gridline:       var(--coop-neutral-100);
  --hairline:       var(--coop-neutral-200);

  /* Rødt er mærket — logo og den aktive fane. Blåt er links, som på sitet.
     Grønt er den primære knap. Tre farver, tre job, aldrig byttet om. */
  --brand:          var(--coop-red-700);
  --accent:         var(--coop-blue-600);
  --cta:            var(--coop-green-400);
  --cta-edge:       var(--coop-green-600);

  /* Farvede flader. Guidens sekundærfarver er flader, ikke tekst, så de får
     deres egne roller med den tekstfarve der hører til. De skifter ikke i
     mørk tilstand: rødt er mærket, og cremen ovenpå læser lige godt begge
     steder — mens en lysere rød ville tabe kontrasten mod cremen. */
  --fill-red:        var(--coop-red-700);   --fill-red-ink:    var(--coop-satin-50);
  --fill-bordeaux:   var(--coop-bordeaux);
  --fill-lilla:      var(--coop-purple-300);
  --fill-blaa:       var(--coop-blue-400);
  --fill-groen:      var(--coop-green-400);
  --fill-pastel-ink: var(--coop-bordeaux);

  /* Knappen har sine egne roller, fordi den skal vendes om i mørk tilstand.
     Bordeaux på mørk bund giver 1,3 : 1 mod fladen bagved — teksten kan læses,
     men knappen kan ikke ses. Sitet har allerede svaret: på røde og bordeaux
     kort vender knappen om til creme med bordeaux tekst. Mørk tilstand gør
     det samme, i stedet for at finde på en ny farve. */
  --btn-face:       var(--fill-bordeaux);   --btn-ink:       var(--fill-red-ink);
  --btn-face-hover: var(--fill-red);        --btn-ink-hover: var(--fill-red-ink);

  /* Stigning og fald. Begge er sitets egne: den mørke grøn er kanten på
     knappen, den mørke rød er sitets tekstrøde. */
  --delta-up:       var(--coop-green-600);      /* 4,7 : 1 på hvid */
  --delta-down:     var(--coop-red-800);        /* 7,0 : 1 på hvid */

  /* Radius-skalaen fra sitet: 4 · 8 · 12 · 16 · 20 · 24 · 32. */
  --radius-xxs: 4px; --radius-xs: 8px;  --radius-sm: 12px; --radius: 16px;
  --radius-md: 20px; --radius-lg: 24px; --radius-pill: 32px;

  /* Sitets to indholdsbredder: 88 rem indeni den store ramme, 50 rem til løbende
     tekst. Vi holder os til dem, så siderne står i samme spalte som coopbank.dk. */
  --wrap: 88rem;     --wrap-pad: 3rem;   --wrap-narrow: 50rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Mørk tilstand findes ikke på coopbank.dk. Den er afledt af paletten,
       ikke opfundet ved siden af: bunden er neutral-1000, fladerne løftes,
       og de tre jobfarver løftes til de lyse trin i deres egne ramper. */
    --page-plane:     #0c0c0d;
    --surface-1:      #17171a;
    --surface-2:      #1f1f23;
    --text-primary:   #f5f5f6;
    --text-secondary: #ceced3;
    --text-muted:     #83858d;
    --gridline:       #2a2a2e;
    --hairline:       #38383d;
    --brand:          #ef4b4b;
    --accent:         var(--coop-blue-400);
    --cta:            var(--coop-green-400);
    --cta-edge:       var(--coop-green-600);
    --delta-up:       var(--coop-green-400);
    --delta-down:     #ef7070;
    --btn-face:       var(--coop-satin-50);  --btn-ink:       var(--coop-bordeaux);
    --btn-face-hover: #ffffff;               --btn-ink-hover: var(--coop-bordeaux);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-plane:     #0c0c0d;
  --surface-1:      #17171a;
  --surface-2:      #1f1f23;
  --text-primary:   #f5f5f6;
  --text-secondary: #ceced3;
  --text-muted:     #83858d;
  --gridline:       #2a2a2e;
  --hairline:       #38383d;
  --brand:          #ef4b4b;
  --accent:         var(--coop-blue-400);
  --cta:            var(--coop-green-400);
  --cta-edge:       var(--coop-green-600);
  --delta-up:       var(--coop-green-400);
  --delta-down:     #ef7070;
  --btn-face:       var(--coop-satin-50);  --btn-ink:       var(--coop-bordeaux);
  --btn-face-hover: #ffffff;               --btn-ink-hover: var(--coop-bordeaux);
}

/* Porteron i fire vægte, med sitets egen fallback bagved. */
html, body, .font-sans { font-family: Porteron, Arial, system-ui, sans-serif; }

/* Sitets typografi: overskrifter i Semi med strammet spatiering og tæt
   linjeafstand, brødtekst i Regular. Tallene her er målt på coopbank.dk. */
h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -0.01em; }
h1 { letter-spacing: -0.02em; line-height: 1.04; }
body { font-size: 16px; letter-spacing: -0.005em; }

body { background: var(--page-plane); color: var(--text-primary); }

/* The UA rule for [hidden] is a bare element selector, so any class that sets
   a display — .row, .split, .flex — silently outranks it and the element stays
   on screen. Pages toggle visibility with el.hidden, so this has to win. */
[hidden] { display: none !important; }

/* Columns and figures that must align vertically get tabular numerals. */
/* Et <select> bliver lige så bredt som sin længste mulighed. Med hundredvis
   af fondsnavne i listen sprænger den en telefonskærm og skubber hele siden
   sidelæns. Felterne bindes til deres spalte og klipper teksten i stedet. */
select, input, textarea, button { max-width: 100%; }
select { text-overflow: ellipsis; }

.num { font-variant-numeric: tabular-nums; }

.up   { color: var(--delta-up); }
.down { color: var(--delta-down); }

.card    { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius); }
/* Guidens sekundære farver er flader, ikke tekst. Bordeaux ovenpå giver
   7,1 : 1 på lilla, 6,9 på grøn og 4,8 på blå — alle over grænsen. */
.card-satin { background: var(--surface-2); border-color: transparent; }
.card-lilla { background: var(--fill-lilla); border-color: transparent; color: var(--fill-pastel-ink); }
.card-blaa  { background: var(--fill-blaa);  border-color: transparent; color: var(--fill-pastel-ink); }
.card-groen { background: var(--fill-groen); border-color: transparent; color: var(--fill-pastel-ink); }
.card-rod   { background: var(--fill-red);   border-color: transparent; color: var(--fill-red-ink); }
.card-bordeaux { background: var(--fill-bordeaux); border-color: transparent; color: var(--fill-red-ink); }
.card-lilla .muted, .card-blaa .muted, .card-groen .muted,
.card-lilla .faint, .card-blaa .faint, .card-groen .faint { color: rgba(85, 37, 47, .72); }
.card-rod .muted, .card-bordeaux .muted,
.card-rod .faint, .card-bordeaux .faint { color: rgba(246, 245, 241, .78); }
.divider { border-color: var(--gridline); }

.muted { color: var(--text-secondary); }
.faint { color: var(--text-muted); }

/* Sort affordance on table headers */
th[aria-sort] { cursor: pointer; user-select: none; }
th[aria-sort]:hover { color: var(--text-primary); }
th[aria-sort="ascending"]  .caret::after { content: "▲"; }
th[aria-sort="descending"] .caret::after { content: "▼"; }
th[aria-sort="none"]       .caret::after { content: "⌄"; opacity: .45; }

/* Sidefaner: Oversigt, Om virksomheden, Information. Understregningen bærer
   valget, ikke en fyldt flade — de skal læses som sidens indholdsfortegnelse,
   ikke som knapper der gør noget. */
.page-tabs {
  display: flex; gap: 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--gridline); margin-bottom: 20px;
}
.page-tab {
  padding: 10px 0; font-size: 15px; font-weight: 500;
  color: var(--text-secondary); background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.page-tab:hover { color: var(--text-primary); }
.page-tab[aria-selected="true"] {
  color: var(--text-primary); font-weight: 600; border-bottom-color: var(--brand);
}
.page-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chip { border: 1px solid var(--hairline); color: var(--text-secondary); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.tab { border-bottom: 2px solid transparent; color: var(--text-muted); }
.tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text-primary); font-weight: 700; }

/* Designguidens knap er en pille med versaler og luft mellem bogstaverne —
   bordeaux på lys bund, hvid på farvet. Rød flade er reserveret til hele
   sektioner, ikke til enkeltknapper, så rødt ét sted altid betyder det samme. */
.btn-primary {
  background: var(--btn-face); color: var(--btn-ink);
  text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700;
}
.btn-primary:hover { background: var(--btn-face-hover); color: var(--btn-ink-hover); }
.card-rod .btn-primary, .card-bordeaux .btn-primary {
  background: var(--fill-red-ink); color: var(--fill-bordeaux);
}
.card-rod .btn-primary:hover, .card-bordeaux .btn-primary:hover { background: #fff; }

/* Den tomme pille fra guidens navigation: rød kant, rød tekst, ingen flade. */
.btn-outline {
  border: 1.5px solid var(--brand); color: var(--brand); background: transparent;
  text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700;
}
.btn-outline:hover { background: var(--fill-red); color: var(--fill-red-ink); }

.link-accent { color: var(--accent); }
.link-accent:hover { text-decoration: underline; }

.skeleton {
  background: linear-gradient(90deg, var(--gridline) 25%, transparent 37%, var(--gridline) 63%);
  background-size: 400% 100%;
  animation: kl-sk 1.4s ease infinite;
}
@keyframes kl-sk { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none } }

/* Row link: the whole company cell is clickable without nesting interactive
   elements inside the sortable header row. */
.row-link { color: inherit; text-decoration: none; }
.row-link:hover .row-name { text-decoration: underline; }

/* ── Hint tooltips ──────────────────────────────────────────────────────
   Any element carrying data-hint explains itself on hover or keyboard focus.
   The dotted underline is the affordance: without it nobody knows there is
   anything to hover. */
.hint {
  border-bottom: 1px dotted var(--text-muted);
  cursor: help;
}
th .hint { cursor: pointer; }           /* header is still a sort control */

/* The same explanation, carried by a badge beside the text instead of under
   it. Used where there are few enough labels for an icon to read as an
   invitation; a dense table header would collect dozens of them. */
.hint-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; vertical-align: 1px;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: transparent; color: var(--text-muted);
  font-size: 10px; font-weight: 800; font-style: normal; line-height: 1;
  cursor: help; user-select: none; flex: 0 0 auto;
}
.hint-i:hover, .hint-i:focus-visible {
  color: var(--text-primary); border-color: var(--text-muted);
}

#kl-hint {
  position: fixed;
  z-index: 60;
  max-width: 280px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  background: var(--surface-1);
  color: var(--text-secondary);
  border: 1px solid var(--hairline);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .13);
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
#kl-hint.on { opacity: 1; }
#kl-hint strong { color: var(--text-primary); display: block; margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce) { #kl-hint { transition: none; } }

/* ── Site header ────────────────────────────────────────────────────────
   Ét bånd, som på coopbank.dk: logo, sub-brand og sektioner på samme linje.
   Klæbende, så sektionerne bliver ved med at være inden for rækkevidde mens
   en lang tabel ruller. */
#sitenav { position: sticky; top: 0; z-index: 40; }

.nav-top {
  background: var(--page-plane);
  color: var(--text-primary);
  border-bottom: 1px solid var(--gridline);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px 28px;
  min-height: 64px;
  flex-wrap: wrap;
}

/* Logoet er Coop Banks egen vektor. currentColor gør at det tager farven fra
   .nav-brand, så det er rødt her og ville følge med i en mørk header. */
.nav-brand {
  color: var(--brand);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
}
/* Logoet er sub-brand-lockuppet: COOP BANK med spiren, og Investering på
   linjen under. Ordet står i mærket selv, så headeren har ingen løs tekst
   ved siden af — og højden styrer, fordi mærket er to linjer højt. */
.nav-logo { display: block; height: 40px; width: auto; }
@media (max-width: 719px) { .nav-logo { height: 34px; } }

.nav-sections {
  display: flex; align-items: center; gap: 24px;
  overflow-x: auto; flex: 1 1 auto; min-width: 0;
  scrollbar-width: none;
}
.nav-sections::-webkit-scrollbar { display: none; }

/* ── Søgning i headeren ────────────────────────────────────────────────
   Feltet ligger til højre for sektionerne og skubber tilbage-linket ud i
   kanten. Listen hænger under feltet og lægger sig over siden — den skal ikke
   flytte indholdet, hver gang nogen taster. */
.nav-search { position: relative; flex: 0 1 260px; min-width: 150px; margin-left: auto; }
.nav-search input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 7px 14px; font-size: 14px; font-family: inherit;
  background: var(--surface-1); color: var(--text-primary);
}
.nav-search input::placeholder { color: var(--text-muted); }
.nav-search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.nav-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  max-height: 60vh; overflow-y: auto;
}
/* Gruppeoverskrift: hvad rækkerne under den er, og hvad tallet til højre
   betyder. Den er ikke klikbar og skal ikke ligne en række. */
.nav-result-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 14px 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); background: var(--surface-2);
  border-top: 1px solid var(--gridline);
}
.nav-result-head:first-child { border-top: 0; }
.nav-result {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 14px; text-decoration: none; color: inherit;
  border-top: 1px solid var(--gridline);
}
.nav-result:first-child { border-top: 0; }
.nav-result.is-on, .nav-result:hover { background: var(--surface-2); }
.nav-result-text { min-width: 0; }
/* Et fondsnavn kan være halvfjerds tegn. Det klippes frem for at skubbe
   kursen ud af kortet. */
.nav-result-name {
  display: block; font-size: 14px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-result-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.nav-result-num { text-align: right; flex: none; font-variant-numeric: tabular-nums; }
.nav-result-move { display: block; font-size: 13px; font-weight: 700; }
.nav-result-price { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.nav-result-empty { padding: 12px 14px; font-size: 13px; color: var(--text-muted); }

/* På telefon får feltet sin egen linje under sektionerne — 150 px ved siden af
   fem faner ville hverken være et søgefelt eller en navigation. */
@media (max-width: 860px) {
  .nav-search { flex: 1 0 100%; margin-left: 0; order: 3; }
}

.nav-back {
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.nav-back:hover { color: var(--text-primary); text-decoration: underline; }

.nav-tab {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  text-decoration: none;
  padding: 20px 0;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav-tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}