/* CCD.news — the site (Newsdesk's structure, CCD.news's look: H-503, FN-design-pro). Neutral sections; colour
   belongs to the context formats and to prices (up/down). The design tokens are here, in :root and its dark twin
   below — a later tweak of type, colour or spacing is one line in this block; the FN-design-pro layer at the end of
   the file applies them. */
/* Our own fonts (FN-design-pro-2): Inter and JetBrains Mono, variable, Latin and Latin Extended, served from our own
   site (fonts.py pins them; the image fetches them) — every reader sees the same type, not the system's sans.
   Licences: SIL Open Font License 1.1 — Inter © 2016 The Inter Project Authors, /static/fonts/OFL-inter.txt;
   JetBrains Mono © 2020 The JetBrains Mono Project Authors, /static/fonts/OFL-jetbrains-mono.txt (H-603, IP-12). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/inter-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* CCD.news (H-503, B-45; FN-design-pro, 2026-10-28): a crypto-markets desk, not a newspaper — a modern
     terminal meets a clean news site. Deep near-black navy masthead, white pages, one accent — a cool teal used
     sparingly for links, the active tab and focus — green/red only for price moves (always with ▲▼), red also for
     LIVE. One sans for everything a reader reads, a mono with tabular figures for every number. No font CDN: Inter
     and JetBrains Mono come from our own site (the @font-face rules above); the stack falls back to the system's. */
  color-scheme: light;
  --ink: #0c1322;
  --ink-2: #364053;
  --muted: #5b6577;
  /* FN-design-light: the page is a faint cool off-white; cards, the sidebar and the featured block are white and
     raised on it (--panel below). The accent is a deeper teal: 5.9:1 on white, 5.4:1 on the page (AA). */
  --paper: #f3f5f8;
  --card: #ffffff;
  --surface: #f5f7fa;
  --rule: #e4e8ee;
  --rule-strong: #0c1322;
  --accent: #086f7d;
  --accent-ink: #055a66;
  --brand: #0a7d8c;
  --breaking: #ffd400;
  --breaking-ink: #0b1526;
  --pilot-bg: #060c18;
  --pilot-ink: #9fb0c8;
  --live: #e0182f;
  --up: #11804a;
  --down: #c8283a;
  /* A chart's second and third series (FN-data-viz): the first is --accent; never green/red, which mean a move. */
  --series-2: #9a5200;
  --series-3: #7a3fd0;
  /* the masthead's own dark ground */
  --mast: #0b1526;
  --mast-ink: #eef2f8;
  --mast-muted: #93a1b8;
  --mast-rule: #1f2c46;
  --mast-accent: #36c5d5;
  /* Context formats (PLAN §8): one colour and one icon each, tuned to one saturation. */
  --c-parallel: #9a6a2f;
  --c-stamtrae: #1f7a4d;
  --c-kaede: #d0561c;
  --c-status: #0a7d8c;
  --c-forudsigelse: #7a3fd0;
  /* Type: one sans for UI, headlines and the article body (FN-design-pro: "one modern sans"); --serif and --head
     are kept as names for the older rules and point at the same face. */
  --sans: Inter, InterVariable, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --head: var(--sans);
  --serif: var(--sans);
  --text: var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --w-head: 650;      /* headlines: 650–700, never 800–900 (FN-design-pro-2: 700 still read heavy) */
  --w-sub: 600;       /* card headlines, labels */
  --fs-xs: 11px; --fs-sm: 13px; --fs-md: 16px; --fs-lg: 18px;
  --lh-body: 1.7;
  --measure: 68ch;    /* the article's reading column */
  /* One spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 6px;
  /* The type scale a reader meets (FN-design-pro-3, after the benchmark of CoinDesk, The Block, Decrypt and the FT:
     few sizes, big steps between the tiers): display = the lead story and the article; title = a page's name;
     head = the article's sub-heads and a section's lead; card = every other headline; dek = a card's standfirst. */
  --fs-display: clamp(30px, 1.5vw + 20px, 42px);
  --fs-title: clamp(26px, 1vw + 18px, 32px);
  --fs-head: clamp(21px, .8vw + 16px, 26px);
  --fs-card: 17px;
  --fs-dek: 15px;
  --fs-dek-lg: clamp(17px, .3vw + 15px, 19px);
  /* Images, charts and graphics are one family: one radius, one hairline, one aspect for a story's picture. */
  --r-media: 10px;
  --media-aspect: 16 / 9;
  --thumb-aspect: 3 / 2;
  --media-filter: none;
  /* Raised panels (key facts, the chart card) sit one step above the page; hover and focus in the accent. */
  --surface-2: #eef2f7;
  --hover-ink: var(--accent-ink);
  --ring: 0 0 0 3px rgba(8, 111, 125, .28);
  /* FN-design-light ("light mode not that good"): light mode's own layering and header. Each token below has
     its dark twin in both dark blocks, set to what dark showed before (v21), so dark draws unchanged. */
  --panel: #ffffff;                 /* a raised surface: the lead block, the side boxes, the section blocks */
  --panel-shadow: 0 0 0 1px #e3e7ee, 0 1px 2px rgba(12, 19, 34, .04), 0 8px 20px -12px rgba(12, 19, 34, .14);
  --panel-pad: 22px 24px;
  --panel-radius: 12px;
  --panel-gap: 20px;                /* between two panels */
  --panel-title-gap: 0;             /* a panel's own section title starts at its top */
  --feat-pad: 22px 24px 22px 21px;  /* the featured block: a panel with its accent edge */
  --sec-lead-pad: 24px;
  --side-pad: 16px 18px;            /* a side box: a narrower panel */
  --facts-bg: #ffffff;
  --strip-bg: #ffffff;              /* the price strip: a white band under the header, edge to edge */
  --strip-line: #d9dfe7;            /* the hairline between two coins */
  --strip-edge: transparent;
  --strip-bleed: 0 0 0 100vmax #ffffff;
  --strip-clip: inset(0 -100vmax);
  --w-kicker: 700;
  --spark-up: #11804a;              /* a sparkline in the colour of its move: 5.0:1 / 5.5:1 on white */
  --spark-down: #c8283a;
  /* the masthead: light in light mode — white, dark ink, a hairline under it (the pilot strip above stays dark) */
  --mh-bg: #ffffff;
  --mh-ink: #0c1322;
  --mh-ink-2: #364053;
  --mh-muted: #5b6577;
  --mh-card: #f1f4f8;
  --mh-rule: #e3e7ee;
  --mh-accent: #086f7d;
  --mh-accent-ink: #055a66;
  --mh-on-accent: #ffffff;
  --mh-shadow: 0 1px 3px rgba(12, 19, 34, .05);
  /* FN-page-transitions: the page-change bar along the top (the accent), and the skeleton's grey blocks with the
     lighter band that runs across them while the first page loads. Dark twins in both dark blocks. */
  --progress: #086f7d;
  --sk: #e3e8ef;
  --sk-hi: #f4f6f9;
}
@media (max-width: 640px) { :root { --panel-pad: 16px; --feat-pad: 16px 16px 16px 13px; --sec-lead-pad: 16px; --panel-gap: 16px; } }
/* Dark: follows the system, and the reader's own choice wins either way (theme.js sets data-theme). The same tokens
   twice — once for the system setting, once for the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e8edf5; --ink-2: #c1cad9; --muted: #8f9bb0; --paper: #070d18; --card: #0c1424; --surface: #111b2d;
    --rule: #1d2940; --rule-strong: #c1cad9; --accent: #3cc8d8; --accent-ink: #84e0ea; --brand: #3cc8d8;
    --pilot-bg: #04080f; --pilot-ink: #8f9bb0; --live: #ff4d61; --up: #43c983; --down: #ff6b78;
    --mast: #070d18; --mast-rule: #1b2638; --series-2: #f0a54a; --series-3: #b28cff;
    --c-parallel: #d8a868; --c-stamtrae: #5fcf96; --c-kaede: #ff8a4c; --c-status: #3cc8d8; --c-forudsigelse: #b28cff;
    --surface-2: #16223a; --media-filter: brightness(.9) saturate(.95); --ring: 0 0 0 3px rgba(60, 200, 216, .32);
    --panel: transparent; --panel-shadow: none; --panel-pad: 0; --panel-radius: 0; --panel-gap: 0; --panel-title-gap: 44px; --feat-pad: 0 0 0 12px; --sec-lead-pad: 0 0 24px; --side-pad: 0; --facts-bg: #111b2d;
    --strip-bg: #070d18; --strip-line: #1d2940; --strip-edge: #1d2940; --strip-bleed: none; --strip-clip: none; --w-kicker: 600; --spark-up: #c1cad9; --spark-down: #c1cad9;
    --mh-bg: #070d18; --mh-ink: #eef2f8; --mh-ink-2: #c3ccdb; --mh-muted: #93a1b8; --mh-card: #14203a; --mh-rule: #1b2638; --mh-accent: #36c5d5; --mh-accent-ink: #7fdde8; --mh-on-accent: #070d18; --mh-shadow: none;
    --progress: #3cc8d8; --sk: #142036; --sk-hi: #1c2a44;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8edf5; --ink-2: #c1cad9; --muted: #8f9bb0; --paper: #070d18; --card: #0c1424; --surface: #111b2d;
  --rule: #1d2940; --rule-strong: #c1cad9; --accent: #3cc8d8; --accent-ink: #84e0ea; --brand: #3cc8d8;
  --pilot-bg: #04080f; --pilot-ink: #8f9bb0; --live: #ff4d61; --up: #43c983; --down: #ff6b78;
  --mast: #070d18; --mast-rule: #1b2638; --series-2: #f0a54a; --series-3: #b28cff;
  --c-parallel: #d8a868; --c-stamtrae: #5fcf96; --c-kaede: #ff8a4c; --c-status: #3cc8d8; --c-forudsigelse: #b28cff;
  --surface-2: #16223a; --media-filter: brightness(.9) saturate(.95); --ring: 0 0 0 3px rgba(60, 200, 216, .32);
  --panel: transparent; --panel-shadow: none; --panel-pad: 0; --panel-radius: 0; --panel-gap: 0; --panel-title-gap: 44px; --feat-pad: 0 0 0 12px; --sec-lead-pad: 0 0 24px; --side-pad: 0; --facts-bg: #111b2d;
  --strip-bg: #070d18; --strip-line: #1d2940; --strip-edge: #1d2940; --strip-bleed: none; --strip-clip: none; --w-kicker: 600; --spark-up: #c1cad9; --spark-down: #c1cad9;
  --mh-bg: #070d18; --mh-ink: #eef2f8; --mh-ink-2: #c3ccdb; --mh-muted: #93a1b8; --mh-card: #14203a; --mh-rule: #1b2638; --mh-accent: #36c5d5; --mh-accent-ink: #7fdde8; --mh-on-accent: #070d18; --mh-shadow: none;
  --progress: #3cc8d8; --sk: #142036; --sk-hi: #1c2a44;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); }
a { color: inherit; }
img { max-width: 100%; display: block; }

.pilot-band { background: var(--pilot-bg); color: var(--pilot-ink); font: 600 11px/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 6px 16px; }

.masthead { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--rule); }
.masthead-inner { max-width: 1120px; margin: 0 auto; padding: 12px 16px 6px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wordmark { font: 700 28px/1 var(--serif); text-decoration: none; letter-spacing: -.01em; }
.masthead-meta { display: flex; gap: 12px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.tagline { font-style: italic; font-family: var(--serif); }
.sections { max-width: 1120px; margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; padding: 0 8px;
  scrollbar-width: none; }
.sections::-webkit-scrollbar { display: none; }
.sections a { flex: none; min-height: 44px; display: flex; align-items: center; padding: 0 10px;
  text-decoration: none; font: 600 14px var(--sans); color: var(--ink-2); border-bottom: 3px solid transparent; }
.sections a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.page { max-width: 1120px; margin: 0 auto; padding: 16px; min-height: 100vh; }  /* the footer stays below while a page loads */
.colophon { max-width: 1120px; margin: 32px auto 0; padding: 20px 16px 40px; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 14px; }

/* Shared bits */
.kicker { font: 700 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.meta { color: var(--muted); font-size: 13px; }
.byline { color: var(--muted); font-size: 13px; }
.byline strong { color: var(--ink-2); font-weight: 600; }
.h-serif { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; line-height: 1.12; margin: 6px 0; }
.udkast { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .08em; padding: 4px 6px;
  border: 1.5px dashed var(--brand); color: var(--brand); text-transform: uppercase; }
.angle { display: inline-block; font: 600 12px/1 var(--sans); padding: 4px 8px; border-radius: 2px;
  background: var(--ink); color: var(--paper); }
.breaking { display: inline-flex; align-items: center; gap: 6px; background: var(--breaking); color: var(--breaking-ink);
  font: 800 12px/1 var(--sans); letter-spacing: .08em; padding: 5px 8px; text-transform: uppercase; }
/* `hidden` must win over the display rule above, or every article is breaking. */
.breaking[hidden], [hidden] { display: none !important; }
.section-title { font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase;
  border-top: 3px solid var(--rule-strong); padding-top: 8px; margin: 28px 0 12px; display: flex;
  justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; }

/* Context chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 9px 2px 7px;
  border: 1.5px solid var(--c); color: var(--c); border-radius: 999px; font: 600 12px var(--sans);
  text-decoration: none; background: transparent; }
.chip svg { width: 14px; height: 14px; }
.chip.forslag { border-style: dashed; }
.c-parallel { --c: var(--c-parallel); } .c-stamtrae { --c: var(--c-stamtrae); } .c-kaede { --c: var(--c-kaede); }
.c-status { --c: var(--c-status); } .c-forudsigelse { --c: var(--c-forudsigelse); }

/* Front page */
.lead-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .lead-grid { grid-template-columns: 2fr 1fr; } }
.top a { text-decoration: none; }
.top .figure { aspect-ratio: 16 / 9; background: var(--rule); overflow: hidden; }
.top .figure img { width: 100%; height: 100%; object-fit: cover; }
.top h1 { font-size: clamp(28px, 6vw, 46px); }
.top .standfirst { font: 400 18px/1.45 var(--serif); color: var(--ink-2); margin: 6px 0 8px; }
.secondary { display: grid; gap: 0; }
.secondary article { border-top: 1px solid var(--rule); padding: 12px 0; display: grid;
  grid-template-columns: 1fr 96px; gap: 12px; }
.secondary article:first-child { border-top: 0; padding-top: 0; }
.secondary h2 { font-size: 19px; }
.secondary a { text-decoration: none; }
.thumb { width: 96px; aspect-ratio: 1; background: var(--rule); overflow: hidden; align-self: start; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.carousel { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.ctx-card { flex: 0 0 min(78%, 280px); scroll-snap-align: start; border-top: 5px solid var(--c); background: var(--card);
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 12px; text-decoration: none; min-height: 132px; }
.ctx-card .fmt { display: flex; gap: 6px; align-items: center; color: var(--c); font: 700 12px var(--sans);
  letter-spacing: .04em; text-transform: uppercase; }
.ctx-card .fmt svg { width: 16px; height: 16px; }
.ctx-card h3 { font: 600 17px/1.25 var(--serif); margin: 8px 0 4px; }

.stream { display: grid; gap: 0; }
@media (min-width: 900px) { .stream { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.item { border-top: 1px solid var(--rule); padding: 12px 0 14px; }
.item a { text-decoration: none; }
.item h3 { font: 700 20px/1.2 var(--serif); margin: 4px 0; }
.item .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shelf-card { border: 1px solid var(--rule); border-top: 5px solid var(--c-status); padding: 12px; background: var(--card); }
.shelf-card h3 { font: 600 16px/1.25 var(--serif); margin: 0 0 6px; overflow-wrap: anywhere; }
.soon { font: 600 11px var(--sans); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.placeholder { border: 1px dashed var(--rule); padding: 14px; color: var(--muted); font-size: 14px; background: var(--card); }

/* Article */
.article { max-width: 680px; margin: 0 auto; }
.article h1 { font-size: clamp(30px, 6.5vw, 44px); }
.article .standfirst { font: 400 20px/1.45 var(--serif); color: var(--ink-2); margin: 8px 0 12px; }
.article .figure { margin: 16px -16px 6px; }
@media (min-width: 720px) { .article .figure { margin: 16px 0 6px; } }
.article figcaption { color: var(--muted); font-size: 13px; padding: 0 16px; }
.article .body { font: 400 18.5px/1.62 var(--serif); }
.article .body h2 { font: 700 21px/1.25 var(--serif); margin: 26px 0 6px; }
.article .body p { margin: 0 0 16px; }
.notice { border: 1.5px dashed var(--brand); padding: 10px 12px; font-size: 14px; color: var(--ink-2); margin: 14px 0; }
.factbox { border-top: 3px solid var(--ink); background: var(--card); padding: 14px 16px; margin: 22px 0; }
.factbox h2 { font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; }
.factbox ul { margin: 0; padding-left: 18px; }
.factbox li { margin: 6px 0; }
.ctx-panel details { border-top: 4px solid var(--c); background: var(--card); margin: 10px 0; }
.ctx-panel summary { min-height: 48px; padding: 10px 12px; display: flex; gap: 8px; align-items: center; cursor: pointer;
  font: 700 14px var(--sans); color: var(--c); list-style: none; }
.ctx-panel summary::-webkit-details-marker { display: none; }
.ctx-panel summary svg { width: 18px; height: 18px; }
.ctx-panel .inner { padding: 0 12px 12px; font-size: 15px; color: var(--ink-2); }
.sources h2 { font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.sources ol { padding-left: 20px; font-size: 14px; }
.sources li { margin: 6px 0; }
.src-type { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  border: 1px solid var(--rule); padding: 1px 5px; margin-left: 4px; }

/* Dybde, Om redaktionen */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 12px 0; }
.tabs a { flex: none; min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 12px; text-decoration: none;
  border: 1.5px solid var(--c); color: var(--c); font: 600 14px var(--sans); border-radius: 999px; }
.tabs a[aria-current="page"] { background: var(--c); color: var(--paper); }
.tabs svg { width: 16px; height: 16px; }
.fmt-intro { border-top: 5px solid var(--c); background: var(--card); padding: 16px; }
.fmt-intro h1 { color: var(--c); }
.people { display: grid; gap: 12px; }
@media (min-width: 720px) { .people { grid-template-columns: 1fr 1fr; } }
.person { border: 1px solid var(--rule); background: var(--card); padding: 14px; }
.person h3 { font: 700 19px var(--serif); margin: 0 0 2px; }
.prose { max-width: 680px; font-size: 16.5px; }
.prose h2 { font: 700 22px var(--serif); margin-top: 28px; }

/* Login */
.login { max-width: 380px; margin: 10vh auto; }
.login input, .login button { width: 100%; font: 16px var(--sans); padding: 12px; margin: 6px 0; border: 1px solid var(--rule);
  background: var(--card); color: var(--ink); min-height: 44px; }
.login button { background: var(--ink); color: var(--paper); border: 0; cursor: pointer; font-weight: 600; }
.err { color: var(--brand); font-size: 14px; min-height: 20px; }
:focus-visible { outline: 3px solid var(--c-status); outline-offset: 2px; }

.ifolge { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .04em; padding: 4px 6px;
  border: 1.5px solid var(--ink-2); color: var(--ink-2); text-transform: uppercase; }
.factcheck { border-left: 4px solid var(--c-stamtrae); background: var(--card); padding: 10px 12px; font-size: 14px;
  color: var(--ink-2); margin: 16px 0; }
.kicker svg, .meta svg { width: 14px; height: 14px; vertical-align: -2px; }
.chain { list-style: none; padding: 0; margin: 12px 0; }
.chain li { border-left: 4px solid var(--c); background: var(--card); padding: 10px 12px; margin: 0 0 10px; position: relative; }
.chain li + li::before { content: "↓"; position: absolute; top: -17px; left: 10px; color: var(--muted); font-size: 12px; }
.chain .sik { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; }
.chain .Sikkert { --c: #2f6b3a; } .chain .Sandsynligt { --c: #b8501a; } .chain .Muligt { --c: #8a8680; }

/* ---------------------------------------------------- standard features (PLAN §8.2) -- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Search in the masthead */
.masthead .search { display: flex; align-items: center; border: 1px solid var(--rule); background: var(--card);
  border-radius: 999px; padding: 0 4px 0 12px; height: 38px; flex: 0 1 220px; margin-left: auto; }
.masthead .search input { border: 0; background: transparent; color: var(--ink); font: 15px var(--sans); width: 100%;
  min-width: 0; outline: none; }
.masthead .search button { border: 0; background: transparent; color: var(--ink-2); width: 36px; height: 36px;
  display: grid; place-items: center; cursor: pointer; }
.masthead .search svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  /* A phone keeps the sticky header short: the date line goes, search becomes an icon (→ /soeg). */
  .masthead-inner { flex-wrap: nowrap; align-items: center; padding-top: 8px; padding-bottom: 2px; }
  .masthead-meta { display: none; }
  .masthead .search { flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
  .masthead .search input { display: none; }
  .masthead .search button { width: 44px; height: 44px; }
}
@media (max-width: 420px) {
  /* Menu, wordmark, kommune, tokens and search share 390px: tighter gaps keep the search icon on screen. */
  .masthead-inner { gap: 6px; }
  .masthead .profile-btn, .masthead .search { margin-left: 0; }
}

/* Front page with a side column on desktop */
.front-grid { display: grid; gap: 20px; grid-template-areas: "lead" "side" "rest"; }
.fg-lead { grid-area: lead; min-width: 0; } .fg-side { grid-area: side; min-width: 0; } .fg-rest { grid-area: rest; min-width: 0; }
@media (min-width: 1000px) {
  .front-grid { grid-template-columns: minmax(0, 1fr) 290px; grid-template-areas: "lead side" "rest side"; column-gap: 32px; }
  .fg-side { border-left: 1px solid var(--rule); padding-left: 24px; }
  .fg-lead .lead-grid { grid-template-columns: 3fr 2fr; }
}
.side-box { margin: 0 0 20px; }
.side-title { font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; border-top: 3px solid var(--rule-strong);
  padding-top: 8px; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
.side-title a { text-transform: none; letter-spacing: 0; font-weight: 500; }
.latest-list, .rank-list { list-style: none; padding: 0; margin: 0; }
.latest-list li { display: grid; grid-template-columns: 44px 1fr; gap: 6px; padding: 7px 0; border-top: 1px solid var(--rule);
  font: 600 14.5px/1.3 var(--serif); }
.latest-list li:first-child { border-top: 0; }
.latest-list time { font: 600 12px var(--sans); color: var(--brand); padding-top: 2px; }
.latest-list .live { grid-column: 2; justify-self: start; margin-bottom: 2px; }
.latest-list a, .rank-list a { text-decoration: none; }
.rank-list { counter-reset: rank; }
.rank-why { display: block; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-family: var(--sans, inherit); font-weight: 600; margin-bottom: 2px; }
.rank-list li { counter-increment: rank; display: grid; grid-template-columns: 28px 1fr; padding: 8px 0;
  border-top: 1px solid var(--rule); font: 700 16px/1.25 var(--serif); }
.rank-list li:first-child { border-top: 0; }
.rank-list li::before { content: counter(rank); font: 700 22px/1 var(--serif); color: var(--muted); }
@media (max-width: 999px) { .side-latest { display: none; } }

/* Number cards (What's happening). The front page's weather, C25 and results widgets went with H-503; the
   market strip is at the end of this file. */
.widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.widget { border: 1px solid var(--rule); background: var(--card); padding: 10px 12px; min-width: 0; }
.w-label { font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.w-big { font: 700 26px/1.1 var(--serif); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.up { color: var(--up); font-weight: 600; } .down { color: var(--down); font-weight: 600; }

/* LIVE */
.live { display: inline-flex; align-items: center; gap: 5px; background: var(--live); color: #fff; font: 800 11px/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 2px; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live::before { animation: none; } }
.liveblog ol { list-style: none; padding: 0; margin: 0 0 16px; }
.liveblog > ol > li { border-left: 3px solid var(--live); padding: 4px 0 10px 14px; margin-bottom: 8px; }
.liveblog time { font: 700 13px var(--sans); color: var(--live); }
.liveblog ul { margin: 4px 0; padding-left: 18px; font: 400 17px/1.5 var(--serif); }

/* Article tools, tags, related, corrections */
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tools { margin-left: auto; display: flex; gap: 6px; }
.btn-tool { min-height: 40px; min-width: 44px; padding: 0 10px; border: 1px solid var(--rule); background: var(--card);
  color: var(--ink); font: 600 14px var(--sans); display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; border-radius: 999px; }
.btn-tool svg { width: 16px; height: 16px; }
.btn-text span[aria-hidden] { font: 700 13px var(--serif); } .btn-text .big { font-size: 18px; }
.btn-text[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.large-text .article .body { font-size: 22px; }
.large-text .article .standfirst { font-size: 23px; }
.large-text .article .factbox, .large-text .liveblog ul { font-size: 19px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; }
.tags a { min-height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--rule-strong);
  border-radius: 999px; text-decoration: none; font: 600 13px var(--sans); color: var(--ink); }
.tags a::before { content: "#"; color: var(--muted); margin-right: 2px; }
.correction { border-left: 4px solid var(--brand); background: var(--card); padding: 10px 14px; margin: 22px 0; font-size: 15px; }
.correction h2 { font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px; color: var(--brand); }
.correction p { margin: 4px 0; }
.related { max-width: 680px; margin: 0 auto; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.related li { border-top: 1px solid var(--rule); padding: 10px 0; display: grid; gap: 2px; }
.related a { font: 700 18px/1.25 var(--serif); text-decoration: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 999px; font: 600 14px var(--sans); z-index: 50; }

/* Seneste, search, topics, writers, corrections */
.page-title { font-size: 34px; }
.narrow { max-width: 760px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 56px 1fr; gap: 8px; border-top: 1px solid var(--rule); padding: 10px 0; }
.timeline time { font: 700 13px var(--sans); color: var(--brand); padding-top: 3px; }
.timeline h3 { font: 700 18px/1.25 var(--serif); margin: 2px 0 0; }
.timeline a { text-decoration: none; }
.search-form input[type="search"] { width: 100%; font: 18px var(--sans); padding: 12px; border: 1px solid var(--rule-strong);
  background: var(--card); color: var(--ink); min-height: 48px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 10px 0 16px; }
.filters label { display: grid; gap: 4px; font: 600 12px var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.filters select, .filters input { font: 15px var(--sans); padding: 8px; min-height: 44px; border: 1px solid var(--rule);
  background: var(--card); color: var(--ink); }
.filters button { min-height: 44px; padding: 0 18px; background: var(--ink); color: var(--paper); border: 0; font: 600 15px var(--sans); cursor: pointer; }
.results { list-style: none; padding: 0; margin: 0; }
.results li { border-top: 1px solid var(--rule); padding: 12px 0; }
.results h3 { font: 700 19px/1.25 var(--serif); margin: 0 0 4px; }
.results a { text-decoration: none; }
.writer-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid;
  place-items: center; font: 700 22px var(--serif); flex: none; }
.byline a { text-decoration: none; } .byline a:hover strong { text-decoration: underline; }

/* Footer */
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 12px; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-2); font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------- menu: main bar + hamburger drawer -- */
.menu-btn { border: 0; background: transparent; color: var(--ink); width: 44px; height: 44px; display: grid;
  place-items: center; cursor: pointer; margin-left: -10px; flex: none; }
.menu-btn svg, .drawer-close svg { width: 24px; height: 24px; }
.masthead-inner { align-items: center; }
/* On a phone the bar shows five at most, as Newsdesk: Home · Agents & ID · Markets · Prices · DeFi (Markets and DeFi
   while they have news) with short labels; Latest, Regulation and the other sections are in the drawer
   (FN-menu, FN-menu-agents-first-2). The desktop keeps the full names in the menu's order. */
.sections .nav-short { display: none; }
@media (max-width: 640px) {
  .sections { overflow-x: auto; justify-content: space-between; padding: 0 4px; gap: 0; }
  .sections .nav-extra:not(.nav-phone), .sections .nav-wide { display: none; }
  .sections a { padding: 0 6px; order: 9; }
  .sections .nav-long { display: none; }
  .sections .nav-short { display: inline; }
  .sections [data-nav="forside"] { order: 1; } .sections [data-nav="agents"] { order: 2; }
  .sections [data-nav="markets"] { order: 3; } .sections [data-nav="prices"] { order: 4; }
  .sections [data-nav="defi"] { order: 5; }
}
.drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 40; }
.drawer { position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px); background: var(--paper); z-index: 41;
  overflow-y: auto; padding: 8px 16px 24px; box-shadow: 4px 0 24px rgb(0 0 0 / .25); }
.drawer-open { overflow: hidden; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.drawer-head .wordmark { font-size: 24px; }
.drawer-close { border: 0; background: transparent; color: var(--ink); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.drawer-search input { width: 100%; font: 16px var(--sans); padding: 10px 14px; min-height: 44px; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--card); color: var(--ink); margin: 6px 0 4px; }
.drawer-group { border-top: 1px solid var(--rule); padding: 8px 0; margin-top: 8px; }
.drawer-group h2 { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 2px; }
.drawer-group a { display: flex; align-items: center; min-height: 44px; font: 600 17px var(--sans); text-decoration: none; color: var(--ink); }
.drawer-foot { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.logout { min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink);
  font: 600 14px var(--sans); border-radius: 999px; cursor: pointer; }

/* Login, join, feedback */
.join-cta { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 14px; font-size: 15px; }
.join-form { display: grid; gap: 12px; margin-top: 12px; }
.join-form label { display: grid; gap: 4px; font: 600 13px var(--sans); color: var(--ink-2); }
.join-form input, .join-form textarea { font: 16px var(--sans); padding: 10px 12px; min-height: 44px; border: 1px solid var(--rule);
  background: var(--card); color: var(--ink); width: 100%; }
.join-form button { min-height: 48px; background: var(--ink); color: var(--paper); border: 0; font: 600 16px var(--sans); cursor: pointer; }
.join-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice-ok { border-left: 4px solid var(--c-stamtrae); background: var(--card); padding: 12px 14px; margin: 16px 0; }
.report { margin: 18px 0 0; font-size: 14px; }
.report a { color: var(--ink-2); }
.credit { font-size: 13px; }

/* Signed out: the whole site reads open (FN-open-reading) — the sections, search and menu stay; only signing out goes. */
body.signed-out .drawer .logout { display: none; }
.landing { display: grid; gap: 28px; padding: 8px 0 24px; }
@media (min-width: 900px) { .landing { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; gap: 48px; padding-top: 24px; } }
.landing-intro h1 { font-size: clamp(30px, 6vw, 46px); margin: 8px 0 12px; }
.landing-intro .standfirst { font: 400 19px/1.5 var(--serif); color: var(--ink-2); margin: 0 0 16px; }
.landing-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.landing-points li { border-left: 3px solid var(--rule-strong); padding: 2px 0 2px 12px; font-size: 16px; color: var(--ink-2); }
.landing-points strong { color: var(--ink); }
.login-card { margin: 0; max-width: none; border: 1px solid var(--rule); background: var(--card); padding: 20px; }
.login-card h2 { font-size: 24px; margin: 0 0 8px; }

/* Stream items with a thumbnail */
.item.has-thumb { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; align-items: start; }
.item-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rule); margin-top: 4px; }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .item.has-thumb { grid-template-columns: minmax(0, 1fr) 128px; } }

/* ======================================================== B+ design layer (2026-09-29) ==
   Modern, sharp news media: heavy sans headlines and UI (system fonts since H-503), a serif only for
   long reading; one accent; hairlines instead of boxes; soft surfaces, small radii. */
body { font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
a:hover { color: var(--accent-ink); }

.pilot-band { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; padding: 7px 16px; }
.masthead { background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.masthead-inner { padding-top: 14px; padding-bottom: 8px; }
.wordmark { font: 900 31px/1 var(--head); letter-spacing: -.055em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; }
.wordmark .dot { display: inline-block; width: .2em; height: .2em; background: var(--accent); margin-left: .05em; }
.drawer-head .wordmark { font-size: 26px; }
@media (max-width: 374px) { .masthead .wordmark { font-size: 25px; } }
@media (max-width: 340px) {
  .masthead .wordmark { font-size: 21px; } .masthead .profile-btn { padding-inline: 8px; }
  .masthead-inner { gap: 4px; padding-left: 12px; padding-right: 12px; }
  .masthead .search, .masthead .search button, .masthead .kommune-btn { width: 40px; height: 40px; }
}
.masthead-meta { font-size: 12.5px; }
.tagline { font-family: var(--sans); font-style: normal; }
.sections a { font: 600 14.5px var(--sans); color: var(--muted); letter-spacing: -.005em; }
.sections a:hover { color: var(--ink); }
.sections a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* Headlines */
.h-serif { font-family: var(--head); font-weight: 800; letter-spacing: -.028em; line-height: 1.06; }
.top h1 { font-size: clamp(30px, 6.2vw, 52px); }
.secondary h2 { font-size: 20px; line-height: 1.12; }
.item h3 { font: 800 19px/1.16 var(--head); letter-spacing: -.018em; }
.item a:hover h3, .top a:hover h1, .secondary a:hover h2, .related a:hover, .results a:hover h3 { color: var(--accent-ink); }
.page-title { font-size: clamp(30px, 5vw, 40px) !important; }
.kicker { font: 700 11.5px/1 var(--sans); letter-spacing: .06em; color: var(--accent); }
.byline, .meta { color: var(--muted); }
.byline strong { color: var(--ink); font-weight: 600; }
.standfirst, .top .standfirst, .article .standfirst { font-family: var(--sans) !important; font-weight: 400; color: var(--ink-2); letter-spacing: -.005em; }
.top .standfirst { font-size: 18px; line-height: 1.5; }
.article .standfirst { font-size: 20px; line-height: 1.5; }
.section-title { font: 800 12.5px var(--head); letter-spacing: .08em; border-top: 2px solid var(--ink); padding-top: 10px; margin: 36px 0 12px; }
.section-title .meta, .section-title a { font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; }

/* Badges — fewer shouting colours */
.angle { background: var(--surface); color: var(--ink-2); font: 600 11px/1 var(--sans); padding: 5px 9px; border-radius: 999px; }
.ifolge { border: 1px solid var(--rule); color: var(--ink-2); font: 600 11px/1 var(--sans); letter-spacing: .01em; text-transform: none; padding: 4px 8px; border-radius: 999px; }
.breaking { border-radius: 4px; font: 800 11px/1 var(--sans); padding: 5px 8px; }
.live { border-radius: 4px; }
.udkast { border-radius: 4px; }

/* Images */
.top .figure, .thumb, .item-thumb, .article .figure img, .widget, .ctx-card, .shelf-card, .placeholder,
.factbox, .factcheck, .notice, .correction, .notice-ok, .ctx-panel details, .person, .fmt-intro { border-radius: var(--radius); }
.top .figure, .thumb, .item-thumb { overflow: hidden; background: var(--surface); }
.article .figure img { width: 100%; }

/* Lists and cards: hairlines, soft surfaces */
.item { border-top: 1px solid var(--rule); padding: 14px 0 16px; }
.secondary article { border-top: 1px solid var(--rule); }
.fg-side { border-left-color: var(--rule); }
.side-title { font: 800 12.5px var(--head); letter-spacing: .08em; border-top: 2px solid var(--ink); }
.rank-list li { font: 700 15.5px/1.25 var(--head); letter-spacing: -.01em; }
.rank-list li::before { font: 800 22px/1 var(--head); color: var(--accent); }
.latest-list li { font: 600 14.5px/1.3 var(--head); letter-spacing: -.005em; }
.latest-list time, .timeline time { color: var(--accent); }
.widget { border: 0; background: var(--surface); }
.w-big { font: 800 28px/1.1 var(--head); letter-spacing: -.02em; }
.ctx-card { border: 1px solid var(--rule); border-top: 4px solid var(--c); background: var(--card); }
.ctx-card h3 { font: 800 17px/1.2 var(--head); letter-spacing: -.015em; }
.shelf-card { border: 1px solid var(--rule); border-top: 4px solid var(--c-status); }
.shelf-card h3 { font: 800 16px/1.2 var(--head); }
.placeholder { background: var(--surface); border: 1px dashed var(--rule); }

/* Article */
.article .body { font: 400 19px/1.66 var(--serif); color: var(--ink); }
.article .body h2 { font: 800 22px/1.2 var(--head); letter-spacing: -.02em; }
.factbox { border-top: 0; border-left: 3px solid var(--accent); background: var(--surface); }
.factbox h2, .sources h2, .correction h2 { font: 800 12.5px var(--head); letter-spacing: .08em; }
.factcheck { border-left: 3px solid var(--c-stamtrae); background: var(--surface); }
.notice { border: 1px solid var(--rule); background: var(--surface); }
.correction { border-left-color: var(--live); background: var(--surface); }
.correction h2 { color: var(--live); }
.ctx-panel details { background: var(--surface); border-top-width: 3px; }
.tags a { border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); }
.tags a:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-tool { border-color: var(--rule); background: var(--paper); }
.btn-tool:hover { border-color: var(--ink); }
.src-type { border-radius: 4px; }
.related a { font: 800 18px/1.2 var(--head); letter-spacing: -.015em; }

/* Forms and buttons */
.login input, .join-form input, .join-form textarea, .filters select, .filters input, .search-form input[type="search"], .drawer-search input {
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.login input:focus, .join-form input:focus, .join-form textarea:focus, .search-form input:focus, .drawer-search input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.login button, .join-form button, .filters button { background: var(--accent); color: #fff; border-radius: 10px; font-weight: 700; }
.login button:hover, .join-form button:hover, .filters button:hover { background: var(--accent-ink); }
.logout { border-radius: 10px; }
.masthead .search { border-color: var(--rule); background: var(--surface); }
.login-card { border: 0; background: var(--surface); border-radius: 14px; padding: 24px; }
.landing-intro h1 { font-size: clamp(32px, 6vw, 54px); }
.landing-points li { border-left-color: var(--accent); }
@media (max-width: 899px) { .landing .login-card { order: -1; } }

/* Footer: full-bleed, calm */
.colophon { max-width: none; margin-top: 56px; border-top: 1px solid var(--rule); background: var(--surface);
  padding: 28px max(16px, calc((100% - 1120px) / 2 + 16px)) 44px; }
.footer-links a { color: var(--ink); }
.credit { color: var(--muted); }
.drawer { background: var(--paper); }
.drawer-group a { font: 700 17px var(--head); letter-spacing: -.01em; }
@media (min-width: 1000px) { .top h1 { font-size: clamp(32px, 3.1vw, 42px); } }
/* Redaktionen bag artiklen */
.credits dl { margin: 0; display: grid; gap: 0; }
.credits dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.credits dl > div:first-child { border-top: 0; }
.credits dt { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 3px; }
.credits dd { margin: 0; }
.credits dd a { font: 700 16px var(--head); text-decoration: none; color: var(--ink); }
.credits dd a:hover { color: var(--accent-ink); }
@media (max-width: 480px) { .credits dl > div { grid-template-columns: 1fr; gap: 2px; } }
.person h3 a { text-decoration: none; }

/* Profile button, tokens, paywall, settings */
.profile-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 10px;
  border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--ink); font: 700 14px var(--head); flex: none; }
.profile-btn svg { width: 18px; height: 18px; }
.profile-btn:hover { border-color: var(--ink); color: var(--ink); }
.profile-btn .bal { min-width: 3ch; text-align: right; }  /* the balance arriving does not move the header */
.masthead .search { margin-left: 8px; }
body.signed-out .profile-btn { display: none; }
@media (max-width: 640px) { .profile-btn { height: 40px; padding: 0 10px; } }
.profile { max-width: 760px; }
.token-card { background: var(--surface); border-radius: 14px; padding: 20px; margin: 20px 0 8px; }
.token-balance .big { font: 900 56px/1 var(--head); letter-spacing: -.04em; margin: 6px 0 4px; }
.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 10px; }
@media (min-width: 640px) { .packs { grid-template-columns: repeat(4, 1fr); } }
.pack { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 12px; padding: 14px 10px;
  display: grid; gap: 2px; cursor: pointer; font: 500 14px var(--sans); min-height: 76px; }
.pack strong { font: 900 24px/1 var(--head); letter-spacing: -.03em; }
.pack span { color: var(--muted); font-weight: 600; }
.pack:hover, .pack-pick { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.pack:disabled { opacity: .6; cursor: wait; }
.test-note { background: color-mix(in srgb, var(--breaking) 22%, var(--paper)); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
.setting:first-of-type { border-top: 0; }
.switch { width: 52px; height: 32px; border-radius: 999px; border: 0; background: var(--rule); position: relative; cursor: pointer; flex: none; }
.switch span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgb(0 0 0 / .2); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] span { left: 23px; }
.pw-row { display: flex; gap: 8px; margin-top: 8px; }
.pw-row input { flex: 1; min-width: 0; font: 16px var(--sans); padding: 10px 12px; min-height: 44px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); }
.pw-row button, .paywall .btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: 700 15px var(--sans); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.ledger { list-style: none; padding: 0; margin: 0; }
.ledger li { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; align-items: baseline; }
.ledger li:first-child { border-top: 0; }
@media (max-width: 480px) { .ledger li { grid-template-columns: 1fr auto; } .ledger li > .meta { grid-column: 1 / -1; } }
.paywall { background: var(--surface); border-radius: 14px; padding: 22px; margin: 8px 0 24px; text-align: center;
  box-shadow: 0 -40px 40px -10px var(--paper); position: relative; }
.paywall h2 { font-size: 24px; margin: 0 0 8px; }
.paywall p { color: var(--ink-2); margin: 0 0 14px; }

/* Signed out: a real front page about the project, and a login button in the header */
.login-btn { display: none; margin-left: auto; height: 40px; padding: 0 18px; border-radius: 10px; background: var(--accent);
  color: #fff !important; font: 700 15px var(--sans); text-decoration: none; align-items: center; flex: none; }
.login-btn:hover { background: var(--accent-ink); }
body.signed-out .login-btn { display: inline-flex; }
.landing-page { max-width: 1040px; margin: 0 auto; }
.hero { padding: 32px 0 28px; max-width: 820px; }
.hero h1 { font-size: clamp(34px, 6.4vw, 60px); margin: 10px 0 16px; }
.hero .standfirst { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; margin: 0 0 24px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px;
  font: 700 16px var(--sans); text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff !important; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { border: 1px solid var(--rule-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.pillars { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 12px 0 8px; }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillars > div { background: var(--surface); border-radius: 14px; padding: 18px; }
.pillars h2 { font-size: 19px; margin: 0 0 6px; }
.pillars p { margin: 0; color: var(--ink-2); font-size: 15px; }
.steps { padding-left: 20px; margin: 0 0 12px; display: grid; gap: 10px; font-size: 16.5px; max-width: 760px; }
.steps li::marker { font: 800 16px var(--head); color: var(--accent); }
.cta-band { margin: 40px 0 8px; background: var(--ink); color: var(--paper); border-radius: 16px; padding: 26px; display: flex;
  gap: 18px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.cta-band h2 { font-size: 26px; margin: 0 0 4px; color: var(--paper); }
.cta-band p { margin: 0; color: color-mix(in srgb, var(--paper) 75%, transparent); }
.cta-band .btn-ghost { border-color: var(--paper); color: var(--paper); }
.cta-band .btn-ghost:hover { background: transparent; opacity: .85; }
.login-page { max-width: 440px; margin: 24px auto; }
.login-card h1 { font-size: 30px; margin: 0 0 4px; }
.pw-login { display: grid; gap: 6px; margin-top: 14px; }
.pw-login label { font: 600 13px var(--sans); color: var(--ink-2); margin-top: 4px; }
.btn-passkey { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px;
  border: 0; background: var(--accent); color: #fff; font: 700 16px var(--sans); cursor: pointer; margin-top: 10px; }
.btn-passkey.secondary { background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); }
.btn-passkey svg { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 14px 0 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.pk-list { list-style: none; padding: 0; margin: 8px 0 0; }
.pk-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.link-btn { border: 0; background: none; color: var(--down); font: 600 14px var(--sans); cursor: pointer; }
.offer .offer-actions { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.offer .btn-add { min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: 700 16px var(--sans); cursor: pointer; }
body.on-login .login-btn { display: none !important; }
.beta-btn { display: none; margin-left: auto; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--rule-strong);
  color: var(--ink) !important; font: 700 15px var(--sans); text-decoration: none; align-items: center; flex: none; }
.beta-btn:hover { background: var(--surface); }
body.signed-out .beta-btn { display: inline-flex; }
body.signed-out .beta-btn + .login-btn { margin-left: 8px; }
body.on-login .beta-btn + .login-btn { margin-left: 0; }
@media (max-width: 480px) { .beta-btn { padding: 0 12px; font-size: 14px; } .login-btn { padding: 0 14px; } }
/* Produktion: the article's AI cost */
.credits .cost { border-top: 1px solid var(--rule); margin-top: 2px; }
.credits .cost summary { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; align-items: baseline; }
.credits .cost summary::-webkit-details-marker { display: none; }
.credits .cost summary::after { content: "Vis fordeling"; grid-column: 2; font: 600 12px var(--sans); color: var(--accent); }
.credits .cost[open] summary::after { content: "Skjul fordeling"; }
.cost-label { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.credits .cost ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 142px; }
.credits .cost li { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px dashed var(--rule); font-size: 14px; font-variant-numeric: tabular-nums; }
.credits .cost .meta { padding-left: 142px; }
@media (max-width: 480px) { .credits .cost summary { grid-template-columns: 1fr; gap: 2px; } .credits .cost summary::after { grid-column: 1; } .credits .cost ul, .credits .cost .meta { padding-left: 0; } }
.ifolge.own { border-color: var(--accent); color: var(--accent-ink); }
.target { background: var(--surface); border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 14px; font-size: 16.5px; margin: 8px 0 12px; max-width: 760px; }
.hero-link { margin: -8px 0 0; font: 600 16px var(--sans); } .hero-link a { color: var(--accent-ink); }

/* ---------------------------------------------- Registreret på blockchain -- */
.onchain-mark { display: inline-flex; align-items: center; color: var(--up); }
.onchain-mark svg { width: 15px; height: 15px; }
.onchain-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2);
  margin: 10px 0 18px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.onchain-line svg { width: 18px; height: 18px; color: var(--up); flex: none; }
.onchain-line.pending svg { color: var(--muted); }
.onchain-line.small { font-size: 13px; padding: 4px 8px; margin: 6px 0 0; }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkish:hover { color: var(--accent-ink); }
dialog.proof { width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
dialog.proof::backdrop { background: rgba(11, 18, 32, .55); }
.proof-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); z-index: 1; }
.proof-head h2 { margin: 0; font: 700 18px/1.2 var(--head); display: flex; align-items: center; gap: 8px; }
.proof-head svg, .verify-page .kicker svg, .policy .kicker svg { width: 20px; height: 20px; color: var(--up); vertical-align: -4px; }
.proof-x { background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ink); cursor: pointer; padding: 0 4px; }
.proof-body { padding: 14px 16px 18px; overflow-wrap: anywhere; }
.verify-page { max-width: 720px; }
.verify-page .proof-body { padding: 0; }
.proof-verdict { font: 700 17px/1.3 var(--head); margin: 8px 0 12px; }
.proof-verdict .ok { color: var(--up); display: inline-flex; align-items: center; gap: 6px; }
.proof-verdict .ok svg { width: 22px; height: 22px; }
.proof-verdict .bad, .checks .bad { color: var(--down); }
.proof-verdict .pending, .checks .pending { color: var(--muted); font-weight: 500; }
.checks .ok { color: var(--up); }
.proof-dl { margin: 0; display: grid; gap: 8px; }
.proof-dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 14px; }
.proof-dl dt { color: var(--muted); }
.proof-dl dd { margin: 0; }
.proof-dl code, .proof-body code { font-size: 12.5px; background: var(--surface); padding: 1px 4px; border-radius: 4px; }
.proof-dl code.rec { display: block; white-space: pre-wrap; padding: 6px 8px; }
.proof-dl ul.plain, .proof-dl ul.checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.proof-text pre { white-space: pre-wrap; font-size: 12.5px; background: var(--surface); padding: 10px; border-radius: var(--radius); max-height: 260px; overflow: auto; }
.proof-text summary, .proof-older summary { cursor: pointer; font-weight: 600; margin-top: 12px; }
.proof-rec.older { border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 8px; }
.proof-mod { font: 700 15px/1.3 var(--head); margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.proof-ext { margin-top: 10px; }
.proof-how { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 10px; }
@media (max-width: 560px) { .proof-dl > div { grid-template-columns: 1fr; gap: 2px; } }
.secondary article.no-thumb { grid-template-columns: 1fr; }

/* ------------------------------------------- prices, movers, tables (Markets: the end of this file) -- */
.chg { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .92em; }
.chg.up { color: var(--up); } .chg.down { color: var(--down); }
.movers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.movers li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 14px; }
.mv-n { font-weight: 600; }
.mv-a { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); }
.meta.small { font-size: 12px; margin-top: 10px; }
table.mk { width: 100%; border-collapse: collapse; font-size: 14px; }
table.mk th, table.mk td { padding: 5px 4px; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
table.mk th[scope=row] { font-weight: 600; }
table.mk .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.mk thead th { font-size: 12px; color: var(--muted); font-weight: 600; }
.biz-link { margin: 4px 0 16px; font-size: 15px; } .biz-link a { font-weight: 600; }
.cal-month h3 { font: 700 15px/1.2 var(--head); margin: 14px 0 6px; text-transform: capitalize; }
.cal-list, .cal-companies { list-style: none; margin: 0 0 12px; padding: 0; }
.cal-list li { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 15px; align-items: baseline; }
.cal-list time { color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-companies { columns: 2 280px; column-gap: 24px; }
.cal-companies li { break-inside: avoid; padding: 4px 0; font-size: 14px; }
@media (max-width: 560px) { .cal-list li { grid-template-columns: 90px 1fr; } .cal-list li a { grid-column: 2; } }
.follow-btn { font: 600 12px/1 var(--sans); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); border-radius: 999px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.follow-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.follow-add { display: flex; gap: 8px; margin: 12px 0; max-width: 520px; }
.follow-add input { flex: 1; font: inherit; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.follow-add button { font: 600 14px var(--sans); padding: 8px 14px; border-radius: var(--radius); border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.follow-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; }
.follow-list li { background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 14px; }

/* ------------------------------------------ the top story's spoken video -- */
.video-figure { margin: 0 0 10px; }
.video-figure video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); object-fit: cover; }
.video-figure figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------------------------------------------------------- personalisation -- */
.for-you { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.fy-card { display: block; padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; }
.fy-card h3 { font: 700 16px/1.25 var(--head); margin: 4px 0 6px; }
.fy-card:hover { border-color: var(--accent); }
.tune-prompt { background: var(--surface); border-left: 3px solid var(--accent); padding: 10px 12px; font-size: 14px; border-radius: var(--radius); margin: 0 0 18px; }
.prefs { display: grid; gap: 14px; max-width: 640px; }
.pref-row { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.pref-row > span, .pref-row legend { font-weight: 600; }
.pref-row select { font: inherit; padding: 6px 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); max-width: 320px; }
.chips-choose { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-choose label { border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px; font-size: 14px; cursor: pointer; }
.weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.weights label { display: grid; gap: 4px; font-size: 14px; }
.pref-row.check, .pref-row .radio { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.pref-actions { display: flex; gap: 12px; align-items: center; }
.pref-actions button { font: 600 14px var(--sans); padding: 8px 16px; border: 0; border-radius: var(--radius); background: var(--accent); color: #fff; cursor: pointer; }
details.read-more > summary { cursor: pointer; font-weight: 600; margin: 8px 0 16px; color: var(--accent); }
.drawer-group a.sub { padding-left: 18px; font-size: 14px; color: var(--ink-2); }

/* "Nyt på Newsdesk" — a new section announced for a few days (2026-09-30: Gastronomi) */
.news-banner { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px; padding: 12px 14px;
  border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 6px;
  background: var(--card); font-size: 15px; line-height: 1.45; }
.news-banner .nb-text { flex: 1; min-width: 0; }
.news-banner .nb-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 3px;
  background: var(--accent); color: var(--paper); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; vertical-align: 1px; }
.news-banner .nb-latest { display: block; margin-top: 4px; color: var(--muted); font-size: 14px;
  overflow-wrap: anywhere; }
.news-banner .nb-close { flex: none; border: 0; background: none; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 2px; }

/* Sæsonen */
.season-facts, .season-recipes { list-style: none; padding: 0; margin: 0 0 24px; }
.season-facts li { margin: 0 0 16px; }
.season-facts blockquote { margin: 0 0 4px; font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink); }
.season-recipes li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }

/* Dagens dybde — the front page's long-read slot */
.dybde-slot { margin: 0 0 22px; padding: 16px 18px; border-radius: 6px; background: var(--surface);
  border-top: 3px solid var(--c-kaede); }
.dybde-slot h2 { font-size: 24px; line-height: 1.25; margin: 6px 0; }
.dybde-slot p { margin: 0 0 6px; color: var(--ink-2); }

/* "Kommer snart" / "Soon" — a setting or page that is stored now and used later */
.soon-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; background: var(--surface); color: var(--muted); border: 1px solid var(--rule); vertical-align: 1px; }
.english-page .lede { font-size: 19px; line-height: 1.5; max-width: 680px; }
.english-page .plain-list { max-width: 680px; padding-left: 20px; line-height: 1.55; }
.english-page .plain-list li { margin-bottom: 10px; }

/* The English edition */
.en-intro { max-width: 720px; font-size: 16px; }
.en-top img { width: 100%; border-radius: 6px; margin-bottom: 8px; }
.en-top h2 { font-size: 30px; line-height: 1.2; margin: 4px 0 6px; }
.danish-context { margin: 24px 0; padding: 14px 16px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 6px; }
.danish-context h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; color: var(--muted); }
.danish-context .dc-item { margin: 0 0 12px; }
.danish-context .dc-item p { margin: 4px 0; font-size: 15px; line-height: 1.5; }

/* Infographics (module J): our own SVG, full width, scales to 360 px */
.infografik { margin: 20px 0; }
.infografik svg { display: block; width: 100%; height: auto; }
.infografik figcaption { margin-top: 6px; font-size: 14px; }
.infografik .g-data table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; margin-top: 8px; }
.infografik .g-data th, .infografik .g-data td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--rule); }

.img-credit { color: var(--muted); font-size: 13px; }
.img-credit a { color: inherit; }

/* Gastronomi (2026-09-30): Bordet feature, restaurant news, Sæsonen and older portraits aside */
.gastro-head { border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 20px; }
.gastro-dek { font: 400 19px/1.45 var(--serif); color: var(--ink-2); max-width: 640px; margin: 6px 0 10px; }
.bordet-feature { display: block; text-decoration: none; color: inherit; background: var(--surface);
  border-top: 3px solid var(--ink); padding: 22px 24px 20px; margin-bottom: 28px; }
.bordet-feature:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bordet-label { font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bordet-feature h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 8px 0 10px; max-width: 820px; }
.bordet-dek { font: 400 18px/1.5 var(--serif); color: var(--ink-2); max-width: 720px; margin: 0 0 12px; }
.gastro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.gastro-side { display: grid; gap: 16px; }
.side-card { border-top: 2px solid var(--ink); padding-top: 10px; font-size: 15px; line-height: 1.5; }
.side-card p { margin: 6px 0 10px; color: var(--ink-2); }
.side-card a { font-weight: 600; }
.side-list { list-style: none; padding: 0; margin: 0 0 10px; }
.side-list li { padding: 8px 0; border-top: 1px solid var(--rule); font: 700 15px/1.3 var(--serif); }
.side-list a { font-weight: 700; text-decoration: none; }
@media (max-width: 899px) { .gastro-grid { grid-template-columns: 1fr; } .bordet-feature { padding: 18px 16px; } }
.gastro .stream { grid-template-columns: 1fr; }
@media (max-width: 640px) { .sections a { font-size: 14px; } }
.en-note { background: var(--surface); border-left: 3px solid var(--accent); padding: 8px 12px; font-size: 14px; color: var(--ink-2); margin: 0 0 16px; }

/* "Sådan virker Newsdesk" (2026-09-30): high-level, illustrated */
.how-page { max-width: 980px; }
.hw-head .standfirst { max-width: 760px; }
.hw-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 32px; }
.hw-stats div { background: var(--surface); border-top: 3px solid var(--accent); padding: 14px 16px; }
.graver-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 12px 0 20px; }
.graver-stats strong { font-size: 26px; }
@media (max-width: 720px) { .graver-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .graver-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-stats strong { display: block; font: 800 30px/1.1 var(--head); color: var(--ink); }
.hw-stats > div > span { font-size: 14px; color: var(--ink-2); }
.hw-stats strong span { font: inherit; color: inherit; }  /* the live count (data-kildetal-n) keeps the number font */
.hw-p { max-width: 760px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.hw-fig { margin: 18px 0; }
.hw-draw { width: 100%; height: auto; max-width: 720px; display: block; }
.hw-box { fill: var(--surface); stroke: var(--rule); }
.hw-hub { fill: var(--accent); } .hw-hub2 { fill: var(--ink); }
.hw-line { fill: none; stroke: var(--muted); stroke-width: 1.6; }
.hw-arrow { stroke: var(--ink); stroke-width: 2; marker-end: url(#hw-a); }
.hw-tip { fill: var(--ink); }
.hw-t { font: 600 14px var(--sans); fill: var(--ink); } .hw-s { font: 600 13px var(--sans); fill: var(--ink-2); }
.hw-inv { fill: var(--paper); }
.hw-src { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; margin: 8px 0 34px; }
.hw-src dt { font-weight: 700; } .hw-src dd { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
.hw-flow { list-style: none; padding: 0; margin: 18px 0 34px; position: relative; }
.hw-flow::before { content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px; width: 2px; background: var(--rule); }
.hw-flow li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 10px 0; position: relative; }
.hw-step { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); color: var(--accent);
  display: grid; place-items: center; position: relative; }
.hw-step b { position: absolute; right: -6px; top: -6px; background: var(--ink); color: var(--paper); font: 700 11px var(--sans);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.hw-ico { width: 24px; height: 24px; }
.hw-flow h3, .hw-agent h3, .hw-rules h3, .hw-layers h3 { font: 700 17px var(--head); margin: 2px 0 4px; }
.hw-flow p, .hw-agent p, .hw-rules p, .hw-layers p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.hw-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 34px; }
.hw-agent { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 16px; background: var(--card); }
.hw-agent .hw-ico { color: var(--accent); width: 28px; height: 28px; }
.hw-fact { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; }
.hw-rings .hw-ring.r4 { fill: var(--paper); stroke: var(--rule); } .hw-rings .hw-ring.r3 { fill: var(--surface); stroke: var(--rule); } .hw-rings .hw-ring.r2 { fill: color-mix(in srgb, var(--accent) 18%, var(--paper)); }
.hw-rings .hw-ring.r1 { fill: var(--accent); }
.hw-layers { margin: 0; padding-left: 20px; } .hw-layers li { margin-bottom: 12px; }
.hw-out { font: 700 17px var(--head); margin: 8px 0 34px; }
.hw-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 18px 0 34px; }
.hw-rules > div:last-child:nth-child(3n+1) { grid-column: 1 / -1; max-width: 760px; }
.hw-rules div { border-top: 2px solid var(--ink); padding-top: 10px; }
.hw-ints { list-style: none; padding: 0; margin: 14px 0 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.hw-ints li { border-top: 1px solid var(--rule); padding: 10px 0; display: grid; gap: 2px; }
.hw-ints span { color: var(--ink-2); font-size: 15px; }
.hw-loop { display: grid; grid-template-columns: 64px 1fr; gap: 18px; background: var(--surface); padding: 22px; border-radius: var(--radius); margin-bottom: 20px; }
.hw-loop .hw-ico { width: 48px; height: 48px; color: var(--accent); }
.hw-loop h2 { margin: 0 0 6px; font-size: 24px; } .hw-loop p { margin: 0; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 760px) {
  .hw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-src, .hw-rules, .hw-ints { grid-template-columns: 1fr; }
  .hw-fact { grid-template-columns: 1fr; } .hw-fact .hw-fig { max-width: 260px; margin: 0 auto; }
  .hw-loop { grid-template-columns: 1fr; }
}
.hw-loopline { fill: none; stroke: var(--accent); stroke-width: 2.5; marker-end: url(#hw-la); }
.hw-node { fill: var(--accent); }
.hw-loop p + p { margin-top: 10px; font-weight: 600; color: var(--ink); }
.hw-rhythm { margin: 14px 0 10px; }
.hw-rrow { display: grid; grid-template-columns: 180px 1fr 1.3fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
.hw-rhead { font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-top: 2px solid var(--ink); }
.hw-why { color: var(--ink-2); }
@media (max-width: 760px) { .hw-rrow { grid-template-columns: 1fr; gap: 2px; } .hw-rhead { display: none; } .hw-why { font-size: 14px; } }

/* Gastronomi v2 (2026-10-01): Bordet band with cards, news below, Sæsonen strip */
.bordet-band { margin: 6px 0 32px; }
.bordet-head { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: baseline; border-top: 3px solid var(--ink); padding-top: 12px; margin-bottom: 16px; }
.bordet-head h2 { font-size: 34px; margin: 0; }
.bordet-head p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 720px; }
.bordet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bordet-card { display: block; text-decoration: none; color: inherit; background: var(--surface); padding: 18px 20px; border-radius: var(--radius); }
.bordet-card.lead { grid-column: 1 / -1; padding: 24px 26px; }
.bordet-card h3 { font-size: 22px; line-height: 1.2; margin: 8px 0 8px; }
.bordet-card.lead h3 { font-size: clamp(26px, 3.6vw, 38px); }
.bordet-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.bordet-more { color: var(--accent); font-weight: 600; }
.gastro-news { margin-bottom: 26px; }
.season-strip { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; text-decoration: none; color: inherit; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0; margin-bottom: 20px; }
.season-strip span:nth-child(2) { flex: 1; color: var(--ink-2); min-width: 200px; }
@media (max-width: 760px) { .bordet-head { grid-template-columns: 1fr; gap: 6px; } .bordet-grid { grid-template-columns: 1fr; } }
.new-dev { display: block; text-decoration: none; color: var(--ink); background: var(--surface); border-left: 3px solid var(--accent); padding: 10px 14px; margin: 4px 0 14px; font-size: 15px; }
.new-dev strong { color: var(--accent); }
.up-what { margin: 4px 0; font-size: 15px; }

.new-dev-top { border-left: 3px solid var(--accent, #2447f5); padding: 8px 12px; margin: 0 0 18px; background: var(--surface-2, rgba(36,71,245,.06)); font-size: 15px; line-height: 1.5; }
.new-dev-top a { white-space: nowrap; }

/* Debat: the debater's own post, clearly linked (2026-10-01) */
.debat-link { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--accent); text-decoration: none; }
.debat-link:hover { text-decoration: underline; }
.debat-cta { margin: 26px 0; padding: 16px 18px; border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 6px; background: var(--surface); }
.debat-cta p { margin: 0 0 12px; color: var(--ink-2); }
.debat-btn { display: inline-block; }

/* Til godkendelse (approval.py) */
.ap-list { list-style: none; padding: 0; margin: 0 0 24px; } .ap-row { padding: 12px 0; border-top: 1px solid var(--rule); }
.ap-row a { text-decoration: none; color: var(--ink); } .ap-st { font-weight: 700; }
.ap-pending { color: var(--accent); } .ap-failed, .ap-rejected { color: #b42318; } .ap-approved { color: #067647; }
.ap-edit label, .ap-back label { display: block; margin: 0 0 12px; font-weight: 600; }
.ap-edit textarea, .ap-back textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 8px 10px; font: 16px/1.5 var(--serif, Georgia, serif); border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); }
.ap-edit fieldset { border: 0; padding: 0; margin: 16px 0; } .ap-edit legend { font-weight: 700; margin-bottom: 8px; }
.ap-actions { margin: 20px 0; padding: 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.ap-approve { margin-bottom: 16px; } .ap-chk { display: inline-flex; gap: 6px; align-items: center; margin-right: 14px; font-weight: 400; }
.ap-hist { padding-left: 18px; } .ap-src { padding-left: 20px; } .ap-users td { vertical-align: top; padding: 8px 8px 8px 0; border-top: 1px solid var(--rule); }
.ap-admin { margin-top: 32px; }

/* Livsstil front: the Gastronomi block is a jump target under the sticky header */
#gastronomi { scroll-margin-top: 110px; }
.livsstil-lead { margin: 6px 0 22px; }

/* Min kommune: the picker in the masthead and the municipality page */
.kommune-pick { position: relative; margin-left: auto; }
.kommune-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; max-width: 200px; }
.kommune-btn svg { width: 18px; height: 18px; flex: none; }
.kommune-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kommune-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: min(320px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px; }
.kommune-panel input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; font: 15px var(--sans); background: var(--paper); color: var(--ink); margin-bottom: 6px; }
.kommune-list { list-style: none; margin: 0; padding: 0; }
.kommune-list a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.kommune-list a:hover, .kommune-list a:focus { background: var(--surface); }
.kommune-medier { list-style: none; padding: 0; margin: 0 0 24px; } .kommune-medier li { padding: 10px 0; border-top: 1px solid var(--rule); }
.kommune-medier a { color: var(--ink); text-decoration: none; font-weight: 600; }
@media (max-width: 720px) { .kommune-btn span { display: none; } .kommune-btn { padding: 0 9px; } }
.kommune-pick + .profile-btn { margin-left: 8px; }
body.signed-out .kommune-pick { display: none; }
/* the masthead line gives way to the municipality picker: the tagline shrinks before anything wraps */
.masthead-meta { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.masthead-meta .tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.masthead-meta #today { white-space: nowrap; }
@media (min-width: 721px) { .masthead .search { flex: 0 1 220px; min-width: 120px; } }
@media (min-width: 900px) { .masthead-inner { flex-wrap: nowrap; } }
@media (max-width: 480px) { .kommune-pick { display: none; } }
.kommune-pick { display: flex; align-items: center; }
.kommune-change { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 40px; margin-left: -6px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 999px; }
.kommune-change[hidden] { display: none; }
.kommune-change svg { width: 18px; height: 18px; }
.kommune-select { font: 15px var(--sans); padding: 6px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); max-width: 100%; }
.handler-wrap { overflow-x: auto; } .handler { width: 100%; border-collapse: collapse; font-size: 14px; }
.handler th, .handler td { text-align: left; padding: 7px 8px 7px 0; border-top: 1px solid var(--rule); white-space: nowrap; }
.handler th { font-weight: 600; color: var(--muted); font-size: 12px; } .handler .num { text-align: right; font-variant-numeric: tabular-nums; }
.graver-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 8px 0 12px; }
.graver-form textarea { flex: 1 1 100%; font: inherit; padding: 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg, #fff); color: var(--ink); }
.ap-payload { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 18px; font-size: 14px; }
.ap-payload dt { font-weight: 600; color: var(--ink-2); } .ap-payload dd { margin: 0; }
@media (max-width: 600px) { .ap-payload { grid-template-columns: 1fr; } .ap-payload dd { margin-bottom: 6px; } }
.detsker-day { font-size: 0.95rem; margin: 18px 0 2px; } .detsker { margin-bottom: 8px; } .detsker li { padding: 7px 0; }
.detsker-kl { font-variant-numeric: tabular-nums; color: var(--muted, #666); margin-right: 4px; white-space: nowrap; }
.kommune-politi { list-style: none; padding: 0; margin: 0 0 24px; } .kommune-politi li { padding: 10px 0; border-top: 1px solid var(--rule); } .kommune-politi a { color: var(--ink); font-weight: 600; text-decoration: none; }

/* The deeper pieces under the top stories (2026-10-02). */
.deep-row { display: grid; gap: 18px; margin: 22px 0 6px; padding-top: 18px; border-top: 1px solid var(--rule, #ddd); }
@media (min-width: 700px) {
  .deep-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deep-row.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deep-row.n1 .deep-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 20px; align-items: start; }
  .deep-row.n1 .deep-img { grid-row: span 4; }
}
/* A piece without a picture gets a quiet block of the same size, so the cards line up. */
.deep-noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 4px;
  background: var(--surface); margin-bottom: 8px; color: var(--ink-2); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: 13px; text-decoration: none; }
/* The top story without a picture: no empty column under it — the secondary stories sit in two columns below. */
@media (min-width: 900px) {
  .fg-lead .lead-grid.no-figure { grid-template-columns: 1fr; }
  .lead-grid.no-figure .secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  /* An odd one out takes the whole row, so no empty slot is left beside it. */
  .lead-grid.no-figure .secondary article:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lead-grid.no-figure .secondary article:nth-child(2) { border-top: 0; padding-top: 0; }
}
.deep-card { min-width: 0; }
.deep-card .deep-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block; margin-bottom: 8px; }
.deep-card h2 { font-size: 20px; line-height: 1.25; margin: 4px 0 6px; }
.deep-card p { margin: 0 0 6px; color: var(--ink-2); font-size: 15px; }

/* Modul J §8: the newsroom's AI-generated portraits. */
.face { border-radius: 50%; object-fit: cover; background: var(--surface); flex: none; }
.face-xs { width: 22px; height: 22px; vertical-align: -6px; margin-right: 6px; }
.face-sm { width: 36px; height: 36px; float: left; margin: 2px 10px 0 0; }
.face-md { width: 72px; height: 72px; float: left; margin: 0 14px 6px 0; }
.face-lg { width: 96px; height: 96px; }
.person::after { content: ""; display: block; clear: both; }
.credits dd::after { content: ""; display: block; clear: both; }

/* Lyt — the writer reads the article (modul J §7, step 1). */
.lyt { margin: 10px 0 14px; }
.lyt-btn { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--card); color: var(--ink); font: 500 15px var(--sans); cursor: pointer; }
.lyt-btn:hover { border-color: var(--ink); }
.lyt-btn .face-sm { float: none; margin: 0; }
.lyt-play { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper, #fff); display: grid;
  place-items: center; flex: none; }
.lyt-play svg, .lyt-toggle svg { width: 16px; height: 16px; }
/* The player: one calm row. Loading = the writer "gets ready" (face pulse, moving track) — never a dead bar. */
.lyt-player { display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 6px 10px 6px 6px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--card); }
.lyt-toggle { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: var(--ink);
  color: var(--paper, #fff); display: grid; place-items: center; cursor: pointer; }
.lyt-player .face-sm { float: none; margin: 0; flex: none; transition: box-shadow .3s; }
.lyt-main { flex: 1; min-width: 0; }
.lyt-line { font: 500 14px var(--sans); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.lyt-status { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.lyt-track { position: relative; height: 4px; border-radius: 2px; background: var(--rule); margin-top: 7px; overflow: hidden; cursor: pointer; }
.lyt-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); border-radius: 2px; transition: width .25s linear; }
.lyt-time { font: 500 12px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lyt-speed { border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 999px;
  font: 600 12px var(--sans); padding: 4px 8px; cursor: pointer; min-width: 44px; }
.lyt-eq { display: none; gap: 2px; align-items: flex-end; height: 12px; }
.lyt-eq i { width: 3px; height: 4px; background: var(--ink-2); border-radius: 1px; }
.lyt-player.is-playing .lyt-eq { display: inline-flex; }
.lyt-player.is-loading .face-sm, .lyt-player.is-loading .lyt-toggle { animation: lyt-ready 1.6s ease-in-out infinite; }
.lyt-player.is-loading .lyt-track::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ink-2), transparent); animation: lyt-sweep 1.4s ease-in-out infinite; }
.lyt-player.is-playing .lyt-eq i { animation: lyt-eq 1s ease-in-out infinite; }
.lyt-player.is-playing .lyt-eq i:nth-child(2) { animation-delay: -.35s; } .lyt-player.is-playing .lyt-eq i:nth-child(3) { animation-delay: -.7s; }
.lyt-player.is-error .lyt-status { color: var(--accent); }
@keyframes lyt-ready { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 35%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 0%, transparent); } }
@keyframes lyt-sweep { from { left: -35%; } to { left: 100%; } }
@keyframes lyt-eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .lyt-player.is-loading .face-sm, .lyt-player.is-loading .lyt-toggle, .lyt-player.is-loading .lyt-track::after, .lyt-player.is-playing .lyt-eq i { animation: none; }
  .lyt-player.is-loading .lyt-track::after { left: 0; width: 100%; opacity: .35; }
}
@media (max-width: 480px) { .lyt-speed { min-width: 40px; padding: 4px 6px; } .lyt-player .face-sm, .lyt-ca { display: none; } }
/* The bar at the bottom while a reading goes on outside its article: headline back to it, and ✕ to stop. */
.lyt-titel, .lyt-close { display: none; }
.lyt-mini { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom));
  width: min(600px, calc(100% - 24px)); }
.lyt-mini .lyt-player { max-width: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); border-radius: 18px; }
.lyt-player.in-mini .lyt-titel { display: block; font: 600 14px/1.25 var(--sans); color: var(--ink); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lyt-player.in-mini .lyt-titel:hover { text-decoration: underline; }
.lyt-player.in-mini .lyt-line { font-size: 12.5px; }
.lyt-player.in-mini .lyt-track { margin-top: 5px; }
.lyt-player.in-mini .lyt-close { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0;
  background: transparent; color: var(--ink-2); font-size: 16px; cursor: pointer; border-radius: 50%; }
.lyt-player.in-mini .lyt-close:hover { background: var(--surface); color: var(--ink); }
body.has-lyt-mini { padding-bottom: 96px; }
@media (max-width: 480px) { .lyt-player.in-mini .lyt-time { display: none; } }
.lyt-btn { text-align: left; } .lyt-btn .meta { white-space: nowrap; }

/* A liveblog update whose points all come from one outlet says so once (2026-10-02). */
.liveblog .up-src { margin: 6px 0 2px; font-weight: 600; }

/* Hvad sker der — the newsroom's flow in numbers (2026-10-03). */
.hvad .section-title { margin-top: 28px; }
.hv-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .hv-totals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hv-totals > div, .hv-step { background: var(--surface); border-radius: var(--radius, 6px); padding: 12px 14px; }
.hv-totals strong, .hv-step strong { display: block; font: 700 26px/1.1 var(--head); }
.hv-totals span, .hv-step span { color: var(--ink-2); font-size: 14px; }
.hv-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.hv-step { flex: 1 1 120px; min-width: 110px; }
.hv-step.hv-done { background: color-mix(in srgb, var(--up) 14%, var(--surface)); }
.hv-step.hv-live { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.hv-arrow { align-self: center; color: var(--ink-2); font-size: 22px; }
.hv-side { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.hv-pill { border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px; font-size: 14px; }
.hv-pill.hv-held { border-color: var(--ink-2); }
.hv-desks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.hv-desk { display: flex; gap: 12px; border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius, 6px); padding: 12px; }
.hv-desk .face-sm { float: none; margin: 0; width: 44px; height: 44px; }
.hv-desk-b { flex: 1; min-width: 0; }
.hv-desk-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.hv-bar { display: flex; height: 10px; border-radius: 5px; background: var(--surface); overflow: hidden; margin: 8px 0 6px; }
.hv-bar span { display: block; height: 100%; }
.hv-bar .b-done { background: var(--up); } .hv-bar .b-live { background: var(--accent); }
.hv-bar .b-wait { background: var(--c-status); } .hv-bar .b-held { background: var(--ink-2); opacity: .45; }
.hv-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.hv-feat { display: block; border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius, 6px); padding: 12px 14px; color: var(--ink); text-decoration: none; }
.hv-feat:hover { border-color: var(--ink); }
.hv-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.hv-cells b { display: block; font: 700 20px var(--head); } .hv-cells span { color: var(--ink-2); font-size: 13px; }
@media (max-width: 640px) { .hv-arrow { transform: rotate(90deg); width: 100%; text-align: center; } .hv-step { flex-basis: 100%; } }

.hv-whys { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.hv-why { border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius, 6px); padding: 12px 14px; }
.hv-why-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.hv-why-n { font: 700 20px var(--head); }
.hv-why-r { display: grid; grid-template-columns: minmax(0, 1fr) 80px 40px; gap: 8px; align-items: center; font-size: 14px; padding: 3px 0; }
.hv-why-b { height: 8px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.hv-why-b i { display: block; height: 100%; background: var(--ink-2); opacity: .55; }
.hv-why-c { text-align: right; color: var(--ink-2); }
.hv-pill.hv-own { border-color: var(--up); }

/* Hvad sker der — charts. Categorical slots 1–4 of the reference palette, validated light and dark (2026-10-03). */
.hvad { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hvad { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; } }
:root[data-theme="dark"] .hvad { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; }
.hv-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.hv-cols { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 18px; }
.hv-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; outline-offset: 2px; }
.hv-col-b { flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.hv-col i { display: block; width: 100%; max-width: 24px; background: var(--s1); border-radius: 4px 4px 0 0; min-height: 1px; }
.hv-col:hover i, .hv-col:focus i { filter: brightness(1.15); }
.hv-col-v { font-size: 12px; color: var(--ink); height: 16px; }
.hv-col-x { font-size: 11px; color: var(--ink-2); height: 16px; margin-top: 4px; white-space: nowrap; }
.hv-why-b.hv-blue i { background: var(--s1); opacity: 1; border-radius: 0 4px 4px 0; }
.hv-why-r:hover .hv-why-b i, .hv-why-r:focus .hv-why-b i { filter: brightness(1.15); }
.hv-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.hv-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.hv-cats { display: grid; gap: 10px; }
.hv-cat { display: grid; grid-template-columns: 170px minmax(0, 1fr) 260px; gap: 12px; align-items: center; }
.hv-cat-n strong, .hv-cat-v strong { display: block; }
.hv-cat-n .meta, .hv-cat-v .meta { font-size: 12px; }
.hv-stack { display: flex; gap: 2px; height: 16px; }
.hv-stack i { display: block; height: 100%; min-width: 3px; }
.hv-stack i:last-child { border-radius: 0 4px 4px 0; }
.hv-stack i:hover, .hv-stack i:focus { filter: brightness(1.15); }
.s1 { background: var(--s1); } .s2 { background: var(--s2); } .s3 { background: var(--s3); } .s4 { background: var(--s4); }
.hv-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--paper); font-size: 13px; padding: 5px 9px; border-radius: 4px; max-width: 280px; }
@media (max-width: 720px) { .hv-cat { grid-template-columns: 1fr; gap: 4px; } }

/* The loading state of a slow page (route() shows it after 250 ms). */
.page-loading { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--ink-2); font: 500 14px var(--sans); }
.page-loading .spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--rule);
  border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .page-loading .spin { animation: none; border-top-color: var(--ink-2); } }

/* 👍/👎 at the bottom of an article (access.rating). */
.rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 24px 0 8px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--card); }
.rate-q { font: 600 15px var(--sans); margin-right: 4px; }
.rate-btn { border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 999px; padding: 6px 14px;
  font: 500 14px var(--sans); cursor: pointer; }
.rate-btn:hover { border-color: var(--ink); }
.rate-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper, #fff); border-color: var(--ink); }
.rate-more { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.rate-more label { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; font: 500 14px var(--sans); }
.rate-more textarea { font: 15px var(--sans); padding: 8px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--paper); color: var(--ink); resize: vertical; }

/* Min forside as a page (2026-10-03): the editorial top, then the reader's rows; "Tilpas" holds the settings. */
.my-front { max-width: 1040px; margin: 0 auto; }
.mf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.mf-tune { border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; margin: 12px 0 20px; background: var(--card); }
.mf-follow { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.mf-follow .pref-legend { font: 600 15px var(--sans); display: block; margin-bottom: 6px; }
.mf-follow .follow-add { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mf-follow .follow-add input { flex: 1 1 220px; font: 15px var(--sans); padding: 8px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--paper); color: var(--ink); }
.mf-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: center; text-decoration: none;
  color: var(--ink); margin: 16px 0 10px; }
.mf-top.no-figure { grid-template-columns: 1fr; }
.mf-top .figure { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--surface); }
.mf-top .figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-top h2 { font-size: 28px; line-height: 1.15; margin: 6px 0; }
.mf-top:hover h2 { text-decoration: underline; }
.mf-top p { color: var(--ink-2); margin: 0; }
.mf-sec { margin-bottom: 8px; }
@media (max-width: 720px) { .mf-top { grid-template-columns: 1fr; } .mf-top h2 { font-size: 24px; } }

/* Front page blocks and "Vis flere" (2026-10-04) */
.front-block { margin-bottom: 8px; }
.more-btn { display: block; margin: 16px auto 32px; min-height: 44px; padding: 0 24px; border: 1px solid var(--rule-strong);
  border-radius: 999px; background: var(--card); color: var(--ink); font: 600 15px var(--sans, inherit); cursor: pointer; }
.more-btn:hover { background: var(--surface); }
.more-btn:disabled { opacity: .6; cursor: wait; }

/* Livsstil as a magazine (2026-10-04) */
.lv { --lv-warm: #f6f1e8; --lv-accent: #8a5a2b; --lv-ink: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lv { --lv-warm: #1d1a16; --lv-accent: #d6a46c; } }
:root[data-theme="dark"] .lv { --lv-warm: #1d1a16; --lv-accent: #d6a46c; }
.lv-head { text-align: center; padding: 18px 0 8px; border-bottom: 1px solid var(--rule); margin-bottom: 28px; }
.lv-eyebrow { display: block; font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--lv-accent); }
.lv-head h1 { font-size: clamp(44px, 7vw, 72px); line-height: 1; margin: 10px 0 12px; font-weight: 600; letter-spacing: -.01em; }
.lv-intro { max-width: 620px; margin: 0 auto 18px; color: var(--ink-2); font: 18px/1.55 var(--serif); }
.lv-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; padding: 10px 0 14px; }
.lv-nav a { font: 600 14px var(--sans); color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.lv-nav a:hover { border-bottom-color: var(--lv-accent); }
.lv-kicker { display: block; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--lv-accent); margin: 14px 0 8px; }
.lv-dek { color: var(--ink-2); font: 16px/1.5 var(--serif); margin: 8px 0 10px; }
.lv-by { font: 13px var(--sans); color: var(--muted); }
.lv-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); border-radius: 2px; }
.lv-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.lv-noimg { display: flex; align-items: center; justify-content: center; background: var(--lv-warm); }
.lv-noimg span { font: 600 64px var(--serif); color: var(--lv-accent); opacity: .5; }
.lv-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; text-decoration: none; color: inherit; margin-bottom: 44px; }
.lv-hero .lv-img { aspect-ratio: 3 / 2; }
.lv-hero h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; margin: 0; font-weight: 600; }
.lv-hero .lv-dek { font-size: 19px; }
.lv-read { display: inline-block; margin-top: 14px; font: 600 14px var(--sans); color: var(--lv-accent); }
.lv-hero:hover h2, .lv-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lv-hero:hover img, .lv-card:hover img { transform: scale(1.03); }
.lv-band { padding: 28px 0 34px; border-top: 1px solid var(--rule-strong); }
.lv-bordet { background: var(--lv-warm); border-top: 0; padding: 28px 24px 34px; margin: 0 -24px; }
.lv-band-head { display: grid; grid-template-columns: minmax(160px, 260px) 1fr auto; gap: 8px 28px; align-items: baseline; margin-bottom: 18px; }
.lv-band-head h2 { font-size: 30px; margin: 0; font-weight: 600; }
.lv-band-head p { margin: 0; color: var(--ink-2); font: 15px/1.5 var(--sans); max-width: 620px; }
.lv-all { font: 600 14px var(--sans); color: var(--lv-accent); text-decoration: none; white-space: nowrap; }
.lv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lv-card { text-decoration: none; color: inherit; display: block; }
.lv-card h3 { font-size: 22px; line-height: 1.2; margin: 0; font-weight: 600; }
.lv-card .lv-dek { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lv-soon { color: var(--muted); font: italic 15px var(--serif); margin: 0; }
.lv-news { margin-top: 36px; }
.lv-list { list-style: none; margin: 0 0 28px; padding: 0; columns: 2; column-gap: 40px; }
.lv-list li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.lv-list a { display: block; padding: 11px 0; text-decoration: none; color: inherit; }
.lv-list-h { display: block; font: 600 16px/1.35 var(--serif); }
.lv-list-m { display: block; font: 12px var(--sans); color: var(--muted); margin-top: 3px; }
.lv-list a:hover .lv-list-h { text-decoration: underline; }
@media (max-width: 899px) {
  .lv-hero { grid-template-columns: 1fr; gap: 14px; }
  .lv-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .lv-band-head { grid-template-columns: 1fr auto; }
  .lv-band-head p { grid-column: 1 / -1; grid-row: 2; }
  .lv-bordet { margin: 0 -16px; padding: 24px 16px 28px; }
  .lv-list { columns: 1; }
}
@media (max-width: 560px) { .lv-grid { grid-template-columns: 1fr; } .lv-card h3 { font-size: 20px; } }
.lv h1, .lv h2.h-serif, .lv h3.h-serif, .lv-list-h { font-family: var(--serif); }
.lv-text { border-top: 3px solid var(--lv-accent); padding-top: 4px; }
.lv-text h3 { font-size: 24px; }
.lv-text .lv-dek { -webkit-line-clamp: 5; }
.lv-bordet .lv-text { background: var(--card); padding: 6px 20px 20px; border-radius: 2px; }
.lv-hero-text-only { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }

/* References to the source list, "[7]" (2026-10-04) */
sup.ref { font-size: .68em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--accent); font-weight: 600; padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { background: var(--surface); outline: 2px solid var(--accent); outline-offset: 2px; }

/* How it works: the same checks for every article (2026-10-04) */
.hw-table-wrap { overflow-x: auto; margin: 12px 0; }
.hw-gates { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
.hw-gates th, .hw-gates td { border-bottom: 1px solid var(--rule); padding: 9px 10px; text-align: left; vertical-align: top; }
.hw-gates thead th { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--rule-strong); }
.hw-gates tbody th { font-weight: 600; width: 40%; }
.hw-gates td { white-space: nowrap; }

/* An AI-generated image is marked wherever it is shown (COMPLIANCE_AUDIT.md §3, AI Act art. 50). */
.ai-pic { position: relative; display: block; width: 100%; height: 100%; }
.ai-badge { position: absolute; top: 6px; left: 6px; padding: 1px 5px; border-radius: 3px; background: rgba(0, 0, 0, .72);
  color: #fff; font: 600 10px/1.4 system-ui, -apple-system, sans-serif; letter-spacing: .04em; pointer-events: none; }
.thumb .ai-badge { top: 3px; left: 3px; font-size: 9px; padding: 0 4px; }
/* "AI" at every card's kicker and at the headline: the reader knows before the click (COMPLIANCE_PLAN_2.md §2.4). */
.ai-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; border-radius: 3px;
  font: 600 10px/1.5 system-ui, -apple-system, sans-serif; letter-spacing: .04em; opacity: .7; vertical-align: middle;
  white-space: nowrap; }
/* H-512: the top of an article — the ownership disclosure right under the byline, then the AI sentence; and the
   last line of a Markets article. Legal's review (1) B and (2). */
.disclosure { margin: 12px 0 8px; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--card);
  font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.disclosure p { margin: 0 0 4px; }
.disclosure .disclosure-link { margin: 0; font-weight: 600; }
.ai-note { margin: 8px 0 12px; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.ai-note a { white-space: nowrap; }
.not-advice { margin: 18px 0 0; font: 600 14px/1.5 var(--sans); color: var(--ink-2); }
.not-advice-foot { font-weight: 600; }
.lyt-ai { margin-left: 4px; }
.disclosures .holdings { padding-left: 20px; }
.disclosures .holdings li { margin: 4px 0; }
.lv-kicker + .ai-tag { margin: 0 0 4px 6px; }
/* Why the compliance gate held the article, at the top of the approval page (COMPLIANCE_PLAN_2.md §2.7). */
.ap-gate { margin: 12px 0; padding: 10px 14px; border-left: 3px solid #c2410c; background: rgba(194, 65, 12, .07); }
.ap-gate ul { margin: 6px 0 0; padding-left: 18px; }
.ap-read { display: block; margin: 0 0 8px; }
.ap-set { margin: 2px 0 6px; }
.ap-set > .meta { display: inline-block; min-width: 92px; }
.iv-mail { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 6px 0 10px; padding: 10px 12px; background: var(--surface); border-radius: 6px; }
/* The result of an approval decision (2026-10-06): what happened, and the way back to the list. */
.ap-done { border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: 6px; padding: 14px 16px; margin: 12px 0 18px; outline: none; }
.ap-done strong { font: 700 18px/1.3 var(--sans); }
.ap-done p { margin: 6px 0 0; }
.ap-done .btn, .ap-done .btn-tool { display: inline-block; margin: 8px 8px 0 0; text-decoration: none; }
.ap-done-ok { border-left-color: #1f8a4c; } .ap-done-back { border-left-color: #b26a00; } .ap-done-no { border-left-color: #b00020; }
/* Video commentary (kommentar.py): the commentator's own recordings under the article. */
.kommentar { margin: 28px 0; }
.kommentar .kom-who { margin: 4px 0 12px; }
.kom-svar { margin: 0 0 22px; }
.kom-svar video { width: 100%; border-radius: 6px; background: #000; display: block; }
.kom-q { font: 600 18px/1.35 var(--head, Georgia, serif); margin: 0 0 8px; }
.kom-svar blockquote { margin: 8px 0 0; padding-left: 12px; border-left: 3px solid var(--rule); }
.kom-cta { margin: 18px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* "Sådan virker Newsdesk" read aloud: the part Thea is reading is marked, and lands below the sticky header. */
.how-page [data-hw] { scroll-margin-top: 84px; transition: background-color .4s, box-shadow .4s; border-radius: 6px; }
.how-page .hw-reading { background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: -8px 0 0 color-mix(in srgb, var(--accent) 7%, transparent), 8px 0 0 color-mix(in srgb, var(--accent) 7%, transparent); }
/* Joint approval (approval.approve_many): a tick per article, the gate's reason in the list. */
.ap-open .ap-row { display: flex; gap: 10px; align-items: flex-start; }
.ap-pick { flex: none; padding-top: 3px; }
.ap-pick input { width: 18px; height: 18px; }
.ap-solo { color: var(--ink-2); font-size: 12px; width: 18px; text-align: center; }
.ap-row-main { flex: 1; min-width: 0; }
.ap-why { margin-top: 2px; }
.ap-solo-why { color: #b26a00; }
.ap-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 12px; }
.ap-bulk .meta { flex-basis: 100%; margin: 0; }
.ap-confirm-list { max-height: 320px; overflow: auto; margin: 10px 0; padding-left: 20px; }
.ap-pick-user { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-weight: 600; }
.ap-pick-user select { max-width: 100%; font: inherit; font-weight: 400; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 6px; }
#ap-user-form .ap-user { border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; }
/* "Kommentér på video": the same pill as Lyt (2026-10-06: not grey, styled as the rest of the site). */
.kom-btn:disabled { opacity: .55; cursor: not-allowed; }
.kom-btn:disabled:hover { border-color: var(--rule); }
.kom-cta { margin: 0 0 14px; }

/* How it works: an agent card with a screenshot spans the grid (videokommentarer, 2026-10-07) */
.hw-agent-wide{grid-column:1/-1}.hw-shot{margin:12px 0 0}.hw-shot img{display:block;width:100%;max-width:760px;height:auto;border-radius:8px}.hw-shot figcaption{font-size:13px;color:var(--muted,#5b6475);margin-top:6px;max-width:760px}

/* The logged-out front page: what Newsdesk is, in one paragraph (2026-10-07) */
.selvkoer{margin:8px 0 28px;padding:20px 22px;border-left:4px solid var(--accent,#2447f5);background:var(--surface,#f3f5f9);border-radius:0 8px 8px 0}.selvkoer h2{margin:0 0 8px;font-size:22px}.selvkoer p{margin:0 0 10px;max-width:760px;line-height:1.6}.selvkoer p:last-child{margin:0}

/* Tips (admin): the tip line's list (tips.py) */
.tip-list{list-style:none;padding:0;margin:16px 0}.tip-row{border-top:1px solid var(--rule,#e3e7ee);padding:12px 0}.tip-row p{margin:6px 0}.tip-text{white-space:pre-wrap;font:13px/1.5 ui-monospace,Menlo,monospace;background:var(--surface,#f3f5f9);padding:10px;border-radius:6px;max-height:320px;overflow:auto}

/* Footer: the tip line for everyone (2026-10-07) */
.colophon .tipline{font-weight:600}.colophon .tipline a{white-space:nowrap}

/* Push notifications on the profile (push.py) */
.push-opt{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--rule,#e3e7ee)}.push-opt input{margin-top:4px}.push-box ol{padding-left:20px}

/* NEW on the logged-out front page (push, 2026-10-07) */
.hero-new{margin-top:14px;font-size:15px;line-height:1.5;max-width:680px}.tag-new{display:inline-block;background:var(--accent,#2447f5);color:#fff;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;padding:4px 7px;border-radius:4px;margin-right:6px;vertical-align:2px}

/* The commercial API's account page (api_platform.py) */
.key-list,.fc-list,.fc-claims{list-style:none;padding:0}.key-row{display:flex;justify-content:space-between;gap:12px;align-items:center;border-top:1px solid var(--rule,#e3e7ee);padding:10px 0}.key-once{word-break:break-all;font-size:13px}.fc-row{border-top:1px solid var(--rule,#e3e7ee);padding:12px 0}.fc-claims li{padding:6px 0}.fc-modsagt strong{color:#b00020}.fc-bekraeftet strong{color:#1f8a4c}.try-form textarea{width:100%;font:14px/1.5 Inter,system-ui,sans-serif;margin:4px 0 12px}.key-form input{min-width:240px}

.fc-verdict{margin:6px 0;padding:6px 10px;border-radius:6px;display:inline-block}.fc-verdict.ok{background:#e7f6ee;color:#1f6b3f}.fc-verdict.stop{background:#fdecee;color:#9b1c2c}

/* Dagens nyheder på fem minutter (morgenlyd.py) */
.morgenlyd{margin:0 0 18px}.morgenlyd .lyt{margin:0}.morgenlyd-podcast{margin:6px 0 0}

/* Faktatjek af udsagn (detektor.py) */
.dt-card{border-top:1px solid var(--rule,#e3e7ee);padding:18px 0}.dt-card blockquote{margin:10px 0;padding-left:12px;border-left:3px solid var(--accent,#2447f5);font-style:italic}.dt-verdict{display:inline-block;font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-radius:4px;background:#eef1f6}.dt-verdict.ok{background:#e7f6ee;color:#1f6b3f}.dt-verdict.mid{background:#fff4e0;color:#8a5a00}.dt-verdict.stop{background:#fdecee;color:#9b1c2c}.dt-evidence{padding-left:18px}.dt-evidence li{margin:6px 0}

/* Forbrug (admin usage page) */
.forbrug-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.table-scroll { overflow-x: auto; }
.forbrug-table td, .forbrug-table th { vertical-align: top; }
.forbrug-table .num { text-align: right; white-space: nowrap; }
.th-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; color: inherit; }
.th-sort[aria-sort="ascending"]::after { content: " ▲"; } .th-sort[aria-sort="descending"]::after { content: " ▼"; }
.forbrug-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.forbrug-table th, .forbrug-table td { padding: 8px 10px; border-bottom: 1px solid var(--rule, #ddd); text-align: left; }
.hv-tabs a { --c: var(--accent); }

/* Developer: the API reference (rendered from /api/v1/openapi.json) */
.dev-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.dev-nav { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; font-size: 14px; padding-right: 8px; border-right: 1px solid var(--rule); }
.dev-nav a { text-decoration: none; padding: 5px 6px; border-radius: 6px; color: inherit; display: flex; gap: 6px; align-items: center; }
.dev-nav a:hover { background: var(--rule); }
.dev-nav-h { margin: 14px 0 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dev-main { min-width: 0; }
.dev-main section, .dev-op { scroll-margin-top: 16px; }
.dev-main h2 { margin-top: 36px; } .dev-main h2 .meta { font-weight: 400; font-size: 14px; }
.dev-tag { border-top: 2px solid var(--rule-strong); padding-top: 18px; }
.dev-op { border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; margin: 18px 0; }
.dev-op h3 { margin: 0 0 4px; font-size: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dev-sum { font-weight: 600; margin: 0 0 8px; }
.dev-op h4, .dev-main h4 { margin: 18px 0 6px; font-size: 14px; }
.dev-method { font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 4px 6px; border-radius: 4px; color: #fff; flex: none; }
.dev-method.m-get { background: #1f7a4d; } .dev-method.m-post { background: #2f54d6; } .dev-method.m-delete { background: #b42318; }
.dev-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dev-table th, .dev-table td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-top: 1px solid var(--rule); }
.dev-table th { font-size: 12px; color: var(--muted); font-weight: 600; } .dev-table td p { margin: 0 0 4px; }
.dev-table td:first-child { white-space: nowrap; }
.dev-req { font-size: 11px; color: #b42318; font-weight: 600; }
.dev-resp { list-style: none; padding: 0; margin: 0; } .dev-resp li { padding: 4px 0; }
.dev-code-badge { font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 3px 6px; border-radius: 4px; background: var(--rule); }
.dev-code-badge.c2 { background: #dcf3e6; color: #135c38; } .dev-code-badge.c4 { background: #fdeaea; color: #8a1c13; } .dev-code-badge.c5 { background: #fff1d6; color: #7a4b00; }
.dev-code { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 12px 14px; overflow-x: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 8px 0; white-space: pre; }
.dev-code code { background: none; color: inherit; padding: 0; font: inherit; }
/* "For AI agents" (FN-make-the-mcp-agent-support): the small MCP badge in the menus and the page's setups. */
.mcp-badge { display: inline-block; margin-left: 5px; padding: 2px 5px; border: 1px solid currentColor; border-radius: 4px; font: 700 10px/1 var(--sans); letter-spacing: .06em; vertical-align: 2px; }
.page-title .mcp-badge { font-size: 13px; vertical-align: 6px; }
.agents-page h3 { margin: 22px 0 4px; }
.agents-page .dev-code { max-width: 100%; }
.agents-page .snip-copy { margin-bottom: 6px; }
.dev-langs { display: flex; gap: 4px; }
.dev-lang { border: 1px solid var(--rule); background: none; color: inherit; border-radius: 6px 6px 0 0; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; min-height: 32px; }
.dev-lang[aria-selected="true"] { background: #0f172a; color: #e2e8f0; border-color: #0f172a; }
.dev-samples .dev-code { margin-top: 0; border-top-left-radius: 0; }
.dev-schema { font: 600 16px ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 26px; scroll-margin-top: 16px; }
@media (max-width: 860px) { .dev-grid { grid-template-columns: 1fr; } .dev-nav { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--rule); padding-bottom: 10px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dev-code-badge.c2 { background: #12392a; color: #9be3bd; } :root:not([data-theme="light"]) .dev-code-badge.c4 { background: #3d1614; color: #f5b4ae; } :root:not([data-theme="light"]) .dev-code-badge.c5 { background: #3b2a08; color: #f5d08a; } }
.morgenlyd-podcast .btn-link{background:none;border:0;padding:0;font:inherit;color:var(--accent-ink,#2f54d6);text-decoration:underline;cursor:pointer}

/* Show-password eye inside every password field (site.js, "show password"): the field keeps room for it so text
   never runs under it; 44 px hit area, muted ink, the site's focus ring kept inside the field. The form rules for
   .login / .join-form / .pw-row buttons are undone for it. The new-password fields have their label beside the
   field (.pw-field), not around it, so the eye's name does not become part of the field's. */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 52px; }
.pw-row > .pw-wrap { flex: 1; min-width: 0; }
.pw-row > .pw-wrap > input { width: 100%; }
.join-form .pw-field { display: grid; gap: 4px; }
.pw-wrap > .pw-eye, .pw-wrap > .pw-eye:hover { position: absolute; top: 50%; right: 1px; transform: translateY(-50%); width: 44px; height: 44px;
  min-height: 0; margin: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); cursor: pointer; }
.pw-wrap > .pw-eye:hover { color: var(--ink); }
.pw-wrap > .pw-eye:focus-visible { outline: 3px solid var(--c-status); outline-offset: -5px; }
.pw-eye svg { width: 20px; height: 20px; display: block; }

/* ================================================================ CCD.news identity (H-503) ==
   The masthead is ink-navy in both themes. Inside it the page's colour variables are flipped, so every control
   already there (menu, search, profile, sections) draws itself light on dark without rules of its own. */
.pilot-band { background: var(--pilot-bg); color: var(--pilot-ink); }
.masthead { --ink: var(--mast-ink); --ink-2: #c3ccdb; --muted: var(--mast-muted); --paper: var(--mast); --card: #14203a;
  --surface: #14203a; --rule: var(--mast-rule); --rule-strong: var(--mast-ink); --accent: var(--mast-accent);
  --accent-ink: #7fdde8; background: var(--mast); color: var(--ink); border-bottom: 1px solid var(--mast-rule);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.masthead-inner { padding-top: 12px; padding-bottom: 10px; }
.wordmark { display: inline-flex; align-items: center; color: var(--ink); line-height: 0; }
.wm { display: block; height: 30px; width: auto; overflow: visible; }
.wm text { font: 800 24px var(--head); fill: currentColor; }
.wm .wm-desk { font-weight: 500; fill: var(--accent); }
.wm .wm-wick { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.wm .wm-body { fill: currentColor; }
.wm .wm-body.wm-up { fill: var(--accent); }
.drawer-head .wm { height: 26px; }
@media (max-width: 374px) { .masthead .wm { height: 25px; } }
@media (max-width: 340px) { .masthead .wm { height: 21px; } }
.masthead-meta { color: var(--muted); gap: 10px; align-items: center; }
.masthead-meta .tagline { border-left: 1px solid var(--rule); padding-left: 10px; }
@media (max-width: 1060px) { .masthead-meta .tagline { display: none; } }
.sections a { color: var(--muted); }
.sections a:hover { color: var(--ink); }
.sections a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
/* FN-menu: Front page · Latest · Prices · Markets · DeFi · Regulation fit a 390 px phone without the bar scrolling. */
@media (max-width: 420px) { .sections a { padding: 0 3px; font-size: 13px; } }
.masthead .search { background: var(--surface); border-color: var(--rule); }
.masthead .login-btn { background: var(--accent); color: var(--mast) !important; }
.masthead .profile-btn { border-color: var(--rule); color: var(--ink); }
.masthead .profile-btn:hover { border-color: var(--ink); color: var(--ink); }
.h-serif, .item h3, .related a, .rank-list li, .latest-list li { letter-spacing: -.015em; }
.kicker { color: var(--accent-ink); }
.colophon-brand { color: var(--ink); margin: 0 0 10px; }
.colophon-brand .wm { height: 24px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kicker { color: var(--accent); } }
:root[data-theme="dark"] .kicker { color: var(--accent); }

/* The front page's market strip (BeatsWatch /markets/crypto): symbol, price, 24 h change; a big mover's change
   sits on a tinted chip. Hidden whenever BeatsWatch has nothing. */
.mstrip { margin: -16px -16px 18px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.mstrip-row { display: flex; align-items: center; gap: 12px; }
.mstrip ul { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; flex: 1;
  min-width: 0; }
.mstrip ul::-webkit-scrollbar { display: none; }
/* position: relative keeps a mover's absolute .sr-only "(big mover)" inside the scrolling list — without a positioned
   ancestor it sat at the strip's far end on the page itself, and the signed-in front page scrolled sideways
   (1449 px at 1280, 1321 px at 390; FN-admin-walk-1 (10)). */
.mstrip li { flex: none; display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 14px 9px;
  border-right: 1px solid var(--rule); white-space: nowrap; position: relative; }
.mstrip li:first-child { padding-left: 0; }
.ms-sym { font: 700 12.5px var(--sans); letter-spacing: .03em; color: var(--ink); }
.ms-px { font: 500 13px var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mstrip .chg { font: 600 12px var(--mono); }
.is-mover .chg { padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, currentColor 13%, transparent); }
.ms-more { flex: none; font: 600 13px var(--sans); color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.ms-src { margin: 0; padding: 0 0 7px; font-size: 11.5px; color: var(--muted); }
.movers .chg { justify-self: end; }
@media (max-width: 640px) { .ms-more { display: none; } .mstrip li { padding: 9px 11px 8px; } }
/* Prices off (FN-prices-placeholder): one quiet line where the figures would be — the strip, the movers box and the
   Markets cards keep their place. */
.price-soon { margin: 0; padding: 4px 0 10px; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.mstrip .price-soon { flex: 1; min-width: 0; padding: 10px 0 9px; font-size: 13px; }
.chart.chart-soon { display: flex; align-items: center; justify-content: center; min-height: 140px; padding-top: 0;
  text-align: center; }
.chart-soon .price-soon { padding: 0; }

/* Markets: the coins, one coin's price history, the movers */
.market .lede { max-width: 720px; margin: 4px 0 0; }
.mk-chart { border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px 10px; margin: 18px 0 8px; background: var(--card); }
.mk-chart-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.mk-chart-head .range-tabs { margin-left: auto; }
.mk-chart-head h2 { font: 800 20px/1.2 var(--head); margin: 0; }
.mk-chart-head .px { font: 600 18px var(--mono); font-variant-numeric: tabular-nums; }
.range-tabs { display: inline-flex; gap: 4px; }
.range-tabs button { min-height: 32px; padding: 0 10px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-2);
  border-radius: 999px; font: 600 13px var(--sans); cursor: pointer; }
.range-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chart { position: relative; margin-top: 6px; padding-top: 30px; min-height: 230px; touch-action: pan-y; }
.chart svg { display: block; width: 100%; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .axis { font: 11px var(--mono); fill: var(--muted); }
.chart .xh { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.chart-tip { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; background: var(--ink); color: var(--paper);
  font: 600 12px var(--mono); padding: 4px 7px; border-radius: 6px; white-space: nowrap; }
.chart-src { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
table.coins { margin: 6px 0 14px; }
table.coins td.r, table.coins th.r { font-family: var(--mono); font-size: 13.5px; }
table.coins tbody tr:hover { background: var(--surface); }
.coin-btn { border: 0; background: none; padding: 0; font: 600 14px var(--sans); color: var(--ink); cursor: pointer; text-align: left; }
.coin-btn:hover { color: var(--accent-ink); text-decoration: underline; }
.coin-btn .meta { font-weight: 500; margin-left: 6px; }
tr.is-mover .coin-btn::after { content: "mover"; margin-left: 8px; padding: 1px 6px; border-radius: 999px; font: 700 10px var(--sans);
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); border: 1px solid currentColor; vertical-align: 1px; }
@media (max-width: 560px) { table.coins .vol { display: none; } table.coins .follow-col { display: none; } }
/* On a phone the symbol goes under the name: name + symbol on one line made the table 380 px in a 358 px column
   (Markets at 390, RUN 5326 — "World Liberty Financial WLFI", "Gram (prev. Toncoin) GRAM"). */
@media (max-width: 560px) { table.coins .coin-btn .meta { display: block; margin-left: 0; } }
/* Agents & Identity's featured stories (FN-agents-identity): the section's one accent mark, no new colour. */
.featured-block > .section-title span { color: var(--accent-ink); }
.featured-block { border-left: 3px solid var(--accent); padding-left: 12px; }

/* ===================================================================== FN-design-pro (2026-10-28) ==
   The brief: "a new css that is very professional and nicer more clean". The last layer: it applies the
   tokens at the top of the file and wins over the older rules above by coming last. Calm grid, hairline dividers,
   more white space, headlines at 600–700, every number in the mono with tabular figures, one quiet AI label per
   card (the full sentence stays on the article page), the price note once. */

/* Type and numbers */
body { font: 400 var(--fs-md)/1.6 var(--sans); letter-spacing: -.003em; font-feature-settings: "cv11", "calt"; }
time, .chg, .ms-px, .px, .w-big, table.coins td.r, .latest-list time, .chart .axis, .chart-tip, .credits .cost li {
  font-variant-numeric: tabular-nums; }
.ms-px, .chg, .px, table.coins td.r, .latest-list time, .chart-tip { font-family: var(--mono); }
.chg.up::before { content: "▲ "; font-size: .78em; }
.chg.down::before { content: "▼ "; font-size: .78em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The masthead: slimmer, the date and tagline small, sticky and slimmer still once the reader scrolls (theme.js
   sets html.scrolled). */
.pilot-band { font: 600 10px/1 var(--sans); letter-spacing: .14em; padding: 5px 16px; }
.masthead-inner { padding-top: 8px; padding-bottom: 2px; align-items: center; gap: var(--s3); }
.masthead .wm { height: 26px; transition: height .15s ease; }
.wm text { font-weight: 700; }
.masthead-meta { font-size: 12px; letter-spacing: .01em; }
.sections { gap: 2px; }
.sections a { min-height: 40px; font: 500 13.5px var(--sans); letter-spacing: 0; border-bottom-width: 2px; }
.sections a[aria-current="page"] { font-weight: 600; }
.masthead .search { height: 34px; }
.masthead .profile-btn { height: 34px; }
.scrolled .masthead-inner { padding-top: 4px; padding-bottom: 0; }
.scrolled .masthead .wm { height: 22px; }
.scrolled .masthead-meta { display: none; }
.scrolled .sections a { min-height: 36px; }
/* Light/dark: the reader's own switch beside search (on a phone it is in the menu). */
.theme-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--rule);
  border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.theme-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
.drawer-theme { display: flex; align-items: center; gap: var(--s2); width: auto; height: 40px; padding: 0 var(--s4); margin: var(--s2) 0;
  font: 500 14px var(--sans); }
@media (max-width: 640px) { .masthead .theme-btn { display: none; } }

/* Labels: one quiet "AI-written" pill per card, in words (Legal: the reader is told before the click); the
   byline's "AI writer" and the on-chain shield stay on the article page only. */
.ai-tag { margin: 0; padding: 2px 7px; border: 0; border-radius: 999px; background: var(--surface); color: var(--muted);
  opacity: 1; font: 600 10.5px/1.4 var(--sans); letter-spacing: .02em; vertical-align: middle; }
.row .onchain-mark { display: none; }
.byline .by-role { display: none; }
.article-meta .byline .by-role { display: inline; }
.byline { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: var(--fs-sm); line-height: 1.5; }
.byline .face-xs { margin: 0 2px 0 0; vertical-align: middle; }
.kicker { font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .09em; }
.ifolge, .angle { font-weight: 500; }
.breaking { font-weight: 700; }

/* Headlines */
.h-serif { font-family: var(--head); font-weight: var(--w-head); letter-spacing: -.022em; line-height: 1.12; }
.top h1 { font-size: clamp(28px, 5.6vw, 44px); }
@media (min-width: 1000px) { .top h1 { font-size: clamp(30px, 2.8vw, 40px); } }
.secondary h2 { font-size: 18.5px; font-weight: var(--w-sub); line-height: 1.28; letter-spacing: -.012em; }
.item h3 { font: var(--w-sub) 18px/1.3 var(--head); letter-spacing: -.012em; margin: var(--s1) 0 var(--s1); }
.deep-card h2, .related a, .ctx-card h3, .shelf-card h3, .credits dd a { font-weight: var(--w-sub); }
/* FN-design-pro-2: the older rules' remaining heavy headings and figures, brought into the 600–700 scale. */
.landing-intro h1, .hero h1, .login-card h1 { font-weight: var(--w-head); }
.w-big, .hw-stats strong, .token-balance .big, .pack strong, .rank-list li::before, .steps li::marker { font-weight: var(--w-head); }
.rank-list li, .latest-list li { font-weight: 500; }
.standfirst, .top .standfirst { color: var(--ink-2); line-height: 1.55; }
.top .standfirst { font-size: 17px; }

/* The grid: hairlines and white space, no boxes inside boxes */
.page { padding: var(--s5) var(--s4); }
.front-grid { gap: var(--s5); }
@media (min-width: 1000px) {
  .front-grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; }
  .fg-side { padding-left: var(--s6); }
}
.item { padding: var(--s4) 0 18px; }
.secondary article { padding: var(--s3) 0 var(--s4); }
.section-title, .side-title { font: 600 var(--fs-xs) var(--sans); letter-spacing: .1em; border-top: 1px solid var(--rule-strong);
  padding-top: var(--s3); }
.section-title { margin: 44px 0 var(--s3); }
.side-box { margin: 0 0 var(--s6); }
.rank-list li::before { font: 500 13px/1.6 var(--mono); color: var(--muted); }
.latest-list time { font-size: 12px; font-weight: 500; color: var(--accent-ink); }
.tune-prompt { background: transparent; border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--s3) 0; }
.factcheck, .notice, .factbox, .disclosure { border-radius: 8px; }
.ctx-card, .shelf-card { border-top-width: 2px; border-radius: 8px; }

/* Markets feel: the strip is one clean row (it scrolls sideways on a phone, never wraps); the note under it once. */
.mstrip { background: var(--paper); margin-top: calc(-1 * var(--s5)); margin-bottom: var(--s5); }
.mstrip ul { flex-wrap: nowrap; }
.mstrip li { padding: 9px 14px 8px; }
.ms-sym { font: 600 12px var(--sans); letter-spacing: .04em; }
.ms-px { font-size: 12.5px; font-weight: 500; }
.mstrip .chg { font-size: 11.5px; font-weight: 500; }
.ms-src, .mstrip .price-soon { font-size: 11.5px; color: var(--muted); }
.movers li { font-size: 13.5px; padding: var(--s1) 0; border-top: 1px solid var(--rule); }
.movers li:first-child { border-top: 0; }
.mk-chart { border-radius: 8px; }
.mk-chart-head h2 { font-weight: var(--w-head); }

/* The article: a reading column, a refined standfirst, a tidy byline row; sources and provenance in one calm block
   at the end */
.article { max-width: 720px; }
.article h1 { font-size: clamp(30px, 5.4vw, 44px); line-height: 1.1; margin: var(--s2) 0 var(--s3); }
.article .standfirst { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: var(--measure); margin: 0 0 var(--s4); }
.article-meta { padding: var(--s3) 0; margin: 0 0 var(--s2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  gap: var(--s2) var(--s3); }
.article-meta .byline strong { font-weight: 600; }
.ai-note { font: 400 13.5px/1.55 var(--sans); color: var(--muted); margin: var(--s3) 0 var(--s5); max-width: var(--measure); }
.article .body { font: 400 var(--fs-lg)/var(--lh-body) var(--text); color: var(--ink); max-width: var(--measure); letter-spacing: -.006em; }
.article .body p { margin: 0 0 1.15em; }
.article .body h2 { font: var(--w-head) 21px/1.3 var(--head); letter-spacing: -.016em; margin: 1.8em 0 .5em; }
.large-text .article .body { font-size: 21px; }
.article .figure img { border-radius: 8px; }
.factbox { border-left: 2px solid var(--accent); padding: var(--s4) 18px; }
.factbox h2, .sources h2, .correction h2 { font: 600 var(--fs-xs) var(--sans); letter-spacing: .1em; }
.not-advice { font-weight: 500; color: var(--muted); font-size: var(--fs-sm); }
.sources { margin-top: var(--s6); }
.sources ol { font-size: 14px; line-height: 1.5; padding-left: 22px; }
.sources li { margin: var(--s2) 0; color: var(--ink-2); }
.onchain-line { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; background: var(--surface); }
.credits dt { font: 600 var(--fs-xs) var(--sans); letter-spacing: .09em; }
.rate { border-top: 1px solid var(--rule); padding-top: var(--s4); }

/* Footer */
.colophon { font-size: var(--fs-sm); line-height: 1.6; }
.footer-links a { color: var(--ink-2); }

/* The developer badges' dark colours for the toggle too (their system-dark rule is above). */
:root[data-theme="dark"] .dev-code-badge.c2 { background: #12392a; color: #9be3bd; }
:root[data-theme="dark"] .dev-code-badge.c4 { background: #3d1614; color: #f5b4ae; }
:root[data-theme="dark"] .dev-code-badge.c5 { background: #3b2a08; color: #f5d08a; }

/* ======================================================================= FN-data-viz (2026-10-28) ==
   Charts and data, drawn by our own code: sparklines in the strip, Big movers and the Markets list; an article's
   price chart (one coin in dollars, several indexed to 100, the publish time marked); the graphics desk's SVGs in
   the site's tokens, so they follow light and dark. */

/* Sparklines: the 30-day shape in one neutral ink — the row's coloured figure is the 24 h change, and a green line
   beside a red ▼ (a coin down today, up over the month) read as a contradiction in the walk. The 30-day direction
   is in the line's label with ▲▼. A slot with no line takes no room. */
.spark:empty { display: none; }
.spark { display: inline-flex; align-items: center; }
.spark-svg { display: block; overflow: visible; }
.spark-svg polyline { fill: none; stroke: var(--ink-2); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.mstrip .spark { margin-left: var(--s2); }
.mstrip .spark-svg { width: 48px; height: 16px; }
.movers .mv-r { justify-self: end; display: inline-flex; align-items: center; gap: var(--s2); }
.movers .spark-svg { width: 56px; height: 18px; }
table.coins .spark-col { width: 80px; padding-left: var(--s3); color: var(--muted); font-weight: 500; }
@media (max-width: 560px) { table.coins .spark-col { display: none; } }

/* An article's price chart: the Markets card in the reading column, the lines in the series colours */
.art-chart { max-width: var(--measure); margin: var(--s5) 0; }
.art-chart .mk-chart-head h2 { font-size: 17px; }
.art-chart .ch-px { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); font-size: 15px; }
.art-chart .ch-px .meta { font: 400 12px var(--sans); }
.chart .line.s1, .chart .dot.s1 { stroke: var(--series-2); }
.chart .line.s2, .chart .dot.s2 { stroke: var(--series-3); }
.chart .dot.s0 { fill: var(--accent); }
.chart .dot.s1 { fill: var(--series-2); stroke: var(--card); }
.chart .dot.s2 { fill: var(--series-3); stroke: var(--card); }
.chart .grid.base { stroke: var(--muted); stroke-dasharray: 2 3; }
.chart .pub { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 3; }
.chart .pub-t { fill: var(--ink-2); font-family: var(--sans); font-weight: 600; }
.lg { font: 600 13px var(--sans); color: var(--ink); white-space: nowrap; }
.lg::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin: 0 6px 3px 0; background: var(--accent); }
.lg.s1::before { background: var(--series-2); }
.lg.s2::before { background: var(--series-3); }
.lg .chg { font-size: 12px; margin-left: 2px; }

/* The graphics desk's SVGs (grafik.py draws a fixed palette): the ground, the text and the rules take the site's
   tokens, so a graphic reads in both themes; the category colours keep their meaning. */
.infografik svg [fill="#F4F1EB" i] { fill: var(--surface); }
.infografik svg rect[fill="#FFFFFF" i] { fill: var(--card); }
.infografik svg [fill="#ECE4D6" i] { fill: var(--rule); }
.infografik svg [stroke="#ECE4D6" i] { stroke: var(--rule); }
.infografik svg text[fill="#1E3640" i] { fill: var(--ink); }
.infografik svg text[fill="#5F666B" i] { fill: var(--muted); }
.infografik svg text[fill="#0F7B70" i] { fill: var(--accent-ink); }
.infografik svg text[fill="#B34A24" i] { fill: var(--series-2); }
.infografik svg text { font-family: var(--sans); }
.infografik svg { border: 1px solid var(--rule); border-radius: 10px; }

/* =================================================================== FN-design-pro-3 (2026-10-28) ==
   After a benchmark against the strongest crypto and markets fronts (docs/loop/builds/FN-design-pro-3.md): one
   clear lead with a calmer second tier, one card anatomy (kicker · headline · standfirst · byline · time), a type
   scale of few sizes (the --fs-* tokens at the top), pictures and charts as one family (--r-media, --media-aspect),
   a section page with a lead, the article's key facts before the body and its chart inside it, hover and focus
   states, a dark theme with its own raised surfaces. Applies the tokens only; every value lives at the top. */

/* The lead story: the biggest type on the page, its picture framed; the second tier one size, one weight. */
.top .figure { aspect-ratio: var(--media-aspect); border-radius: var(--r-media); background: var(--surface); }
.top h1 { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.026em; margin: var(--s2) 0 var(--s3); }
.top .standfirst { font: 400 var(--fs-dek-lg)/1.5 var(--sans); color: var(--ink-2); margin: 0 0 var(--s3); max-width: 60ch; }
.secondary h2 { font-size: var(--fs-card); font-weight: var(--w-sub); line-height: 1.3; letter-spacing: -.012em; margin: var(--s1) 0 var(--s2); }
.secondary article { grid-template-columns: minmax(0, 1fr) 88px; gap: var(--s3); padding: var(--s4) 0; }
.secondary article.no-thumb { grid-template-columns: 1fr; }
.secondary article:first-child { padding-top: 0; }
.thumb { width: 88px; aspect-ratio: var(--thumb-aspect); border-radius: 6px; background: var(--surface); margin-top: var(--s1); }

/* One card anatomy everywhere a list of stories appears: kicker · headline · standfirst (two lines at most) ·
   byline and time, the picture beside it in the same aspect and radius. */
.item h3 { font: var(--w-sub) var(--fs-card)/1.3 var(--head); letter-spacing: -.012em; margin: var(--s1) 0; }
.item .dek { margin: 0 0 var(--s2); font: 400 var(--fs-dek)/1.45 var(--sans); color: var(--ink-2); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item.has-thumb { grid-template-columns: minmax(0, 1fr) 104px; gap: var(--s4); }
@media (min-width: 900px) { .item.has-thumb { grid-template-columns: minmax(0, 1fr) 136px; } }
.item-thumb { aspect-ratio: var(--thumb-aspect); border-radius: 8px; background: var(--surface); }

/* Pictures and charts as one family: one radius, a hairline frame on charts and graphics, dimmed a touch at night. */
.top .figure img, .thumb img, .item-thumb img, .article .figure img, .sec-lead-fig img, .deep-img img, .mf-top .figure img {
  filter: var(--media-filter); }
.article .figure img { border-radius: var(--r-media); aspect-ratio: var(--media-aspect); object-fit: cover; }
.article figcaption { font-size: 12.5px; line-height: 1.45; padding-top: var(--s2); }
.deep-img, .mf-top .figure { border-radius: var(--r-media); }
.mk-chart, .infografik svg { border-radius: var(--r-media); }

/* A section page: its name at the title size, then a lead story above the two-column list. */
/* Every page's name (Markets, Latest, a section, Search …) on the one title step; an older rule above sets it with
   !important, so this one must too. */
.page-title { font-size: var(--fs-title) !important; line-height: 1.1; letter-spacing: -.022em; }
#section-list > .page-title { margin: var(--s2) 0 var(--s5); }
.sec-lead { display: grid; gap: var(--s4) var(--s6); padding: 0 0 var(--s5); }
@media (min-width: 900px) { .sec-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.sec-lead.no-figure { grid-template-columns: 1fr; max-width: 760px; }
.sec-lead-fig { display: block; aspect-ratio: var(--media-aspect); overflow: hidden; border-radius: var(--r-media); background: var(--surface); }
.sec-lead-fig img { width: 100%; height: 100%; object-fit: cover; }
.sec-lead .row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.sec-lead a { text-decoration: none; }
.sec-lead h2 { font-size: var(--fs-head); line-height: 1.15; letter-spacing: -.02em; margin: var(--s2) 0; }
.sec-lead .standfirst { font-size: var(--fs-dek-lg); line-height: 1.5; color: var(--ink-2); margin: 0 0 var(--s3); }

/* The article: the headline on the display step; the key facts right before the body, as a raised panel; the price
   chart inside the body after its second paragraph (site.js moves it there), in the reading column. */
.article h1 { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.026em; }
.article .standfirst { font-size: var(--fs-dek-lg); }
.article .body h2 { font-size: 21px; }
.factbox { max-width: var(--measure); margin: var(--s5) 0; padding: var(--s4) var(--s5); background: var(--surface);
  border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: var(--r-media); }
.factbox h2 { margin: 0 0 var(--s2); color: var(--accent-ink); }
.factbox ul { padding-left: 18px; }
.factbox li { margin: var(--s1) 0; font-size: var(--fs-md); line-height: 1.5; }
.factbox li::marker { color: var(--accent); }
.article .body .art-chart { margin: var(--s5) 0 var(--s6); font: 400 var(--fs-md)/1.5 var(--sans); background: var(--card); }
.article .body .art-chart h2 { font: var(--w-head) 17px/1.3 var(--head); letter-spacing: -.01em; margin: 0; }

/* Hover and focus: a headline takes the accent and a fine underline, its picture leans in a little; every link and
   control shows a clear ring from the keyboard. */
.item a:hover h3, .secondary a:hover h2, .top a:hover h1, .sec-lead a:hover h2, .rank-list a:hover, .latest-list a:hover {
  color: var(--hover-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.top .figure img, .thumb img, .item-thumb img, .sec-lead-fig img { transition: transform .35s ease; }
.top a:hover .figure img, .secondary article:hover .thumb img, .item:hover .item-thumb img, .sec-lead:hover .sec-lead-fig img {
  transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) {
  .top .figure img, .thumb img, .item-thumb img, .sec-lead-fig img { transition: none; transform: none !important; } }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: var(--ring); }
.more-btn:hover, .btn-tool:hover { border-color: var(--accent); color: var(--hover-ink); }

/* Dark: its own raised surfaces (card < surface < surface-2), softer strong rules, pills that do not glow. */
:root[data-theme="dark"] .mk-chart, :root[data-theme="dark"] .factbox { border-color: var(--rule); }
:root[data-theme="dark"] .ai-tag { background: var(--surface-2); color: var(--ink-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ai-tag { background: var(--surface-2); color: var(--ink-2); }
}

/* ==================================================================== FN-design-light (2026-10-28) ==
   The owner on v21: "Dark mode looks good - but light mode not that good". Light mode brought up to dark's level: a
   light header, an off-white page with white raised panels, the second tier's standfirst, a coin's chart where a
   story has no picture, a deeper accent and heavier kickers, a white price strip with clear separators and
   sparklines in the colour of their own move. Applies tokens only: every value is at the top, and each new token
   has a dark twin equal to what dark showed before, so dark draws as v21. */

/* (1) The masthead on the --mh-* tokens: white with dark ink and a hairline in light; the v21 navy in dark. The
   pilot strip above it stays dark and thin. */
.masthead { --ink: var(--mh-ink); --ink-2: var(--mh-ink-2); --muted: var(--mh-muted); --paper: var(--mh-bg); --card: var(--mh-card);
  --surface: var(--mh-card); --rule: var(--mh-rule); --rule-strong: var(--mh-ink); --accent: var(--mh-accent);
  --accent-ink: var(--mh-accent-ink); background: var(--mh-bg); border-bottom-color: var(--mh-rule); box-shadow: var(--mh-shadow); }
.masthead .login-btn { color: var(--mh-on-accent) !important; }

/* (2) Layers: the page is off-white (--paper); the lead block, each side box, each section block, a section page's
   lead and list are white panels on it. In dark every --panel* token is "nothing" (transparent, none, 0). */
.fg-lead, .front-block, #section-list > .stream { background: var(--panel); box-shadow: var(--panel-shadow);
  border-radius: var(--panel-radius); padding: var(--panel-pad); }
.side-box:not(:empty) { background: var(--panel); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); padding: var(--side-pad); }
.front-block { margin-bottom: calc(8px + var(--panel-gap)); }
.front-block > .section-title:first-child { margin-top: var(--panel-title-gap); }
.fg-rest > .front-block:first-child, .fg-rest > section:empty + .front-block { margin-top: var(--panel-gap); }
.front-block.featured-block { padding: var(--feat-pad); }
.sec-lead { background: var(--panel); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); padding: var(--sec-lead-pad);
  margin-bottom: var(--panel-gap); }
.factbox { background: var(--facts-bg); }

/* (3) The second tier's standfirst (the front's own markup had none — itemBlock's .dek never reached it): the same
   two lines at most as every other card. */
.secondary .dek { margin: 0 0 var(--s2); font: 400 var(--fs-dek)/1.45 var(--sans); color: var(--ink-2); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* (4) A story without a picture shows the 30-day line of the listed coin it names: large in the lead, small in the
   thumbnail's place on a second-tier card (site.js, fillStoryCharts). The line takes its own direction's colour. */
.lead-chart[hidden], .card-chart[hidden] { display: none; }
.lead-chart { margin: 0 0 var(--s3); padding: var(--s3) var(--s4) var(--s2); border: 1px solid var(--rule); border-radius: var(--r-media);
  background: var(--card); color: var(--ink-2); }
.lc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); font-size: 14px; color: var(--ink); }
.lc-head strong { font-weight: 600; }
.lc-head .px { font: 600 17px var(--mono); }
.lc-head .lc-30 { margin-left: auto; font: 500 13px var(--mono); }
.lc-svg { display: block; width: 100%; height: clamp(96px, 10vw, 150px); margin-top: var(--s2); overflow: visible; }
.lead-chart .lc-src { margin: var(--s1) 0 0; font-size: 12px; }
.lc-svg, .cc-svg { color: var(--ink-2); }
.lead-chart.up .lc-svg, .card-chart.up .cc-svg { color: var(--spark-up); }
.lead-chart.down .lc-svg, .card-chart.down .cc-svg { color: var(--spark-down); }
.cc-line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.cc-area { fill: currentColor; fill-opacity: .1; stroke: none; }
.card-chart { position: relative; display: block; background: var(--surface); }
.card-chart .cc-svg { position: absolute; left: 0; right: 0; bottom: 4px; width: 100%; height: calc(100% - 18px); }
.card-chart .cc-line { stroke-width: 1.5; }
.card-chart .cc-sym { position: absolute; top: 4px; left: 6px; font: 600 10px/1 var(--mono); letter-spacing: .03em; color: var(--ink-2); }

/* (5) Kickers a touch heavier (the deeper accent itself is a token at the top). */
.kicker { font-weight: var(--w-kicker); }

/* (6) The price strip: a white band under the header, edge to edge, with clear separators; a sparkline in green or red
   like the 24 h figure beside it (strip, Big movers), or its own 30 days in the Markets table. Dark is as v21. */
.mstrip { background: var(--strip-bg); border-bottom-color: var(--strip-edge); box-shadow: var(--strip-bleed); clip-path: var(--strip-clip); }
.mstrip li { border-right-color: var(--strip-line); }
.spark-svg.up polyline { stroke: var(--spark-up); }
.spark-svg.down polyline { stroke: var(--spark-down); }

/* ================================================================ FN-page-transitions (2026-10-29) ==
   "add more elegant page transformation - like small spinner - it is very abrupt now". A page change keeps the page
   on screen until the next is drawn (site.js, route/whenDrawn): a thin bar in the accent runs along the top while it
   loads (from 150 ms on), the new page fades in over 180 ms; the first page of a visit shows grey blocks shaped like
   it (index.html's skeleton); a part that loads on its own shows a small spinner in the place it will take, and the
   strip's sparklines, the lead's chart and an article's price chart keep their size while they load, so nothing
   below them moves. Under prefers-reduced-motion: no fade, no shimmer, no spin — the bar only, standing still.
   The colours are tokens at the top (--progress, --sk, --sk-hi) with dark twins in both dark blocks. */

/* The bar: fixed along the very top, above the header and the menu; it runs most of the way while the page loads
   and fills and fades when it is drawn. Hidden from assistive tech (aria-busy on #app says the same). */
.nav-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 3px; background: var(--progress);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.nav-progress.is-on { opacity: 1; transform: scaleX(.85); transition: transform 8s cubic-bezier(.08, .7, .15, 1), opacity .12s linear; }
.nav-progress.is-done { opacity: 0; transform: scaleX(1); transition: transform .2s ease-out, opacity .25s linear .15s; }

/* The new page fades and rises 6 px into place. */
.page.page-in > * { animation: page-in .18s ease-out; }
@keyframes page-in { from { opacity: .35; transform: translateY(6px); } }

/* The skeleton (index.html; site.js puts it back while a page loads with nothing on screen). <html data-sk> picks
   the front page's, an article's or a list's shape; the blocks carry the page's own panels and proportions. */
.page-loading.skel { display: block; min-height: 0; gap: 0; color: inherit; }
.skel .sk { display: none; }
:root:not([data-sk]) .skel .sk-front, :root[data-sk="front"] .skel .sk-front, :root[data-sk="article"] .skel .sk-article,
:root[data-sk="list"] .skel .sk-list { display: block; }
.sk-l, .sk-media, .sk-thumb, .sk-strip > span { display: block; border-radius: 6px; background-color: var(--sk);
  background-image: linear-gradient(90deg, transparent 0, var(--sk-hi) 50%, transparent 100%); background-repeat: no-repeat;
  background-size: 40% 100%; background-position: -100% 0; animation: sk-shine 1.4s ease-in-out infinite; }
@keyframes sk-shine { to { background-position: 200% 0; } }
.sk-l { height: 14px; margin: 0 0 10px; }
.sk-kicker { width: 90px; height: 11px; margin-bottom: 12px; }
.sk-h1 { height: 30px; } .sk-h2 { height: 17px; } .sk-dek { height: 18px; } .sk-title { height: 32px; }
.sk-by { width: 150px; height: 12px; margin-top: 14px; }
.sk-w70 { width: 70%; } .sk-w60 { width: 60%; } .sk-w40 { width: 40%; }
.sk-media { aspect-ratio: var(--media-aspect); border-radius: var(--r-media); margin: 0 0 var(--s4); }
.sk-thumb { width: 88px; aspect-ratio: var(--thumb-aspect); }
.sk-strip { display: flex; gap: 18px; overflow: hidden; padding: 12px 0; margin: calc(-1 * var(--s5)) 0 var(--s5);
  border-bottom: 1px solid var(--rule); }
.sk-strip > span { flex: none; width: 116px; height: 14px; }
.sk-grid { display: grid; gap: var(--s5); }
.sk-lead, .sk-side, .sk-panel { background: var(--panel); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); padding: var(--panel-pad); }
.sk-side { padding: var(--side-pad); align-self: start; }
.sk-card { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: var(--s3); padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.sk-card:first-child { border-top: 0; padding-top: 0; }
.sk-article { max-width: 720px; margin: 0 auto; }
.sk-list .sk-title { margin-bottom: var(--s5); }
@media (min-width: 1000px) {
  .sk-grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; }
  .sk-lead { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }
}

/* A part that loads on its own: a small spinner where it comes (a chart, "Show more"). */
.part-spin { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rule);
  border-top-color: var(--progress); vertical-align: -3px; animation: spin .8s linear infinite; }
.more-btn .part-spin { margin-right: var(--s2); }
.lc-svg.lc-wait, .card-chart.is-loading { display: flex; align-items: center; justify-content: center; }
.lc-30-wait { visibility: hidden; }
.chart-wait { display: flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 220px; margin: 0; }
.ch-wait { visibility: hidden; }
/* On a phone the price line of an article's chart has a line of its own under the name and the period tabs, so the
   head is as tall before the price is in as after, whatever its length. */
@media (max-width: 640px) { .art-chart .ch-px { order: 3; flex-basis: 100%; } }

/* Space kept while a part loads: a sparkline's slot keeps the line's size (a slot that gets none goes). */
.mstrip .spark:empty:not(.spark-none) { display: inline-flex; width: 48px; height: 16px; }
.movers .spark:empty:not(.spark-none) { display: inline-flex; width: 56px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .page.page-in > * { animation: none; }
  .sk-l, .sk-media, .sk-thumb, .sk-strip > span { animation: none; background-image: none; }
  .part-spin { animation: none; }
  .nav-progress, .nav-progress.is-on, .nav-progress.is-done { transition: none; }
  .nav-progress.is-on { transform: none; }
}

/* FN-coin-logos: a coin's logo — a round icon on a subtle disc with a hairline, so a dark logo still reads on dark;
   20 px in lists and the strip, 28 px in chart headers, 14 px on a card's small chart. A coin without a logo gets the
   same disc with its symbol's first letter. Fixed sizes: nothing shifts when the image arrives. */
.coin-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; overflow: hidden; vertical-align: -5px;
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--rule); }
.coin-ic img { display: block; width: 100%; height: 100%; }
.coin-ic-lg { width: 28px; height: 28px; margin-right: 8px; vertical-align: -7px; }
.coin-ic-l { font: 700 10px/1 var(--sans); color: var(--ink-2); letter-spacing: 0; }
.coin-ic-lg.coin-ic-l { font-size: 13px; }
.lc-head .coin-ic { align-self: center; margin-right: 0; }
.mstrip li .coin-ic { align-self: center; margin: -2px 0; }
.card-chart .cc-sym { display: inline-flex; align-items: center; gap: 4px; }
.card-chart .cc-sym .coin-ic { width: 14px; height: 14px; margin: 0; font-size: 8px; }

/* ================================================================ CCD.news (H-606, BRAND=ccd) ==
   Shown only when the server swaps the wordmark in (brand.py): our own tile and check in the plan's deep teal, the
   name in ink — no Concordium mark (IP-28). The backer line in every page's footer, a story's label, and the sample
   stories on the signed-out landing page. */
:root { --ccd-teal: #0b5c63; --ccd-on-teal: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ccd-teal: #5cc7c0; --ccd-on-teal: #070d18; } }
:root[data-theme="dark"] { --ccd-teal: #5cc7c0; --ccd-on-teal: #070d18; }
.wm-ccd text { fill: currentColor; }
.wm-ccd .wm-news { font-weight: 500; fill: var(--ccd-teal); }
.wm-ccd .wm-tile { fill: var(--ccd-teal); }
.wm-ccd .wm-check { fill: none; stroke: var(--ccd-on-teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.backer-foot { font-weight: 600; }
.story-label { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border-radius: 4px; font: 600 var(--fs-sm, 13px)/1.4 var(--sans);
  color: var(--ccd-on-teal); background: var(--ccd-teal); }
.label-note, .verified-note { margin: 0 0 10px; color: var(--ink-2); font-size: var(--fs-sm, 14px); line-height: 1.5; }
.disclosure p + p { margin-top: 6px; }
.charter ul { padding-left: 1.2em; }
.samples { margin: 32px 0; }
.samples .sample { padding: 16px 0; border-top: 1px solid var(--rule); }
.samples .sample h3 { margin: 4px 0 6px; font: 700 20px/1.25 var(--head); }
.samples .sample p { margin: 0 0 8px; }
.samples .sample .disclosure { margin: 0 0 8px; }