/* Topic pages (/se/amne/:slug) and the front page (/se/). Topic page values match
   docs/design/topic-page-reference.html. Header and footer live in site.css. */

a { color: #1D4ED8; }
a:hover { color: #1E3A8A; }

.tp-root { background: #FFFFFF; color: #15171A; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.55; min-height: 100vh; }
.tp-serif { font-family: 'Newsreader', Georgia, serif; }
.tp-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Topic header */
.tp-topic-head { max-width: 1200px; margin: 0 auto; padding: 40px 24px 8px; box-sizing: border-box; }
.tp-topic-head .ct-demo-notice { margin-bottom: 20px; }
.tp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5F6670; }
.tp-crumbs a, .tp-crumbs a:hover { color: #5F6670; text-decoration: none; }
.tp-updated { display: inline-flex; align-items: center; gap: 6px; color: #B23A22; }
.tp-updated-dot { width: 8px; height: 8px; border-radius: 50%; background: #B23A22; }
.tp-title { font-family: 'Newsreader', Georgia, serif; font-size: 56px; line-height: 1.04; font-weight: 600; letter-spacing: -0.02em; margin: 14px 0 18px; color: #15171A; }
.tp-topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.tp-topic-counts { font-size: 15px; color: #4A4F57; }
.tp-follow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #15171A; color: #FFFFFF; font: 500 15px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-why { font-size: 14px; color: #5F6670; }

/* Columns */
.tp-layout { max-width: 1200px; margin: 0 auto; padding: 32px 24px 96px; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.tp-main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 64px; }
.tp-rail { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* Shared section bits */
.tp-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 2px solid #15171A; padding-top: 12px; }
.tp-section-head-center { align-items: center; }
.tp-section-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #15171A; }
.tp-section-note { font-size: 13px; color: #5F6670; }
.tp-footnote { margin: 0; font-size: 13px; color: #5F6670; }
.tp-more, a.tp-more:hover { align-self: flex-start; display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 0 20px; border: 1px solid #C9CBCF; border-radius: 999px; background: #FFFFFF; color: #15171A; text-decoration: none; font: 500 15px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #2E3238; }

/* "Nytt" highlights: plain until topic.js finds they are newer than the last visit */
mark { background: transparent; color: inherit; }
mark.is-new { background: #FFEFA8; color: #15171A; padding: 0 3px; border-radius: 3px; }

/* Article */
.tp-article, .tp-opening { display: flex; flex-direction: column; gap: 22px; }
.tp-opening { margin: 0; }
.tp-summary { background: #F4F5F6; border-left: 3px solid #15171A; border-radius: 0 10px 10px 0; padding: 16px 22px; display: flex; flex-direction: column; gap: 8px; }
.tp-summary-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #15171A; }
.tp-summary ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.5; color: #1F2227; }
.tp-latest { display: flex; flex-direction: column; gap: 12px; }
.tp-latest .tp-section-head a { color: #15171A; text-decoration: underline; text-underline-offset: 2px; }
.tp-latest .tp-section-head a:hover { color: #C4432B; }
.tp-headline { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 40px; line-height: 1.12; font-weight: 600; letter-spacing: -0.015em; color: #15171A; }
.tp-byline { margin: -8px 0 0; font-size: 14px; color: #5F6670; }
.tp-lead { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 25px; line-height: 1.42; color: #15171A; }
.tp-new-box { background: #FFF8D9; border-radius: 10px; padding: 16px 20px; }
.tp-new-box-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #15171A; }
.tp-new-box ul { margin: 0; padding-left: 20px; font-size: 15px; color: #2E3238; display: flex; flex-direction: column; gap: 4px; }
.tp-body { display: flex; flex-direction: column; gap: 18px; font-size: 18px; line-height: 1.65; color: #1F2227; }
.tp-body h4 { margin: 8px 0 0; font-family: 'Newsreader', Georgia, serif; font-size: 23px; line-height: 1.25; font-weight: 600; color: #15171A; }
.tp-body p { margin: 0; }
.tp-body blockquote { margin: 0; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.45; color: #15171A; }
.tp-body ul, .tp-body ol { margin: 0; padding-left: 24px; }
.tp-unknowns { border: 1px solid #D9DADC; border-radius: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.tp-unknowns-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #15171A; }
.tp-unknowns ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: #2E3238; }
.tp-unknowns-cta { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid #E3E4E6; font-size: 15px; line-height: 1.5; color: #2E3238; }
.tp-unknowns-cta strong { color: #15171A; font-weight: 600; }
.tp-unknowns-cta a { color: #15171A; text-decoration: underline; text-underline-offset: 2px; }
.tp-unknowns-cta a:hover { color: #C4432B; }
.tp-ai-note { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #5F6670; }
.tp-ai-badge { flex: 0 0 auto; padding: 1px 6px; border: 1px solid #9AA0A8; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: #4A4F57; }

/* Reader suggestions */
.tp-suggestions { display: flex; flex-direction: column; gap: 16px; }
.tp-list { display: flex; flex-direction: column; }
.tp-suggestion { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid #E3E4E6; }
.tp-agree { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 72px; min-height: 64px; border: 1px solid #D9DADC; border-radius: 10px; background: #FFFFFF; color: #15171A; font: 600 16px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-agree-label { font-size: 11px; font-weight: 500; color: #5F6670; }
.tp-suggestion-content { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.tp-suggestion-title { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 23px; line-height: 1.25; font-weight: 600; }
.tp-suggestion-summary { margin: 0; font-size: 16px; color: #2E3238; }
.tp-name { font-weight: 600; color: #15171A; }
.tp-answered { background: #EEF3FD; border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.tp-answered-label { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1D4ED8; }
.tp-answered-quote { margin: 0; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 19px; line-height: 1.4; color: #15171A; }
.tp-answered-by { margin: 0; font-size: 14px; color: #4A4F57; }
.tp-pill-row { margin: 0; }
.tp-pill-waiting { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #FFF1DE; color: #7A3E06; font-size: 13px; font-weight: 500; }
.tp-not-asked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tp-pill-grey { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; border: 1px solid #C9CBCF; color: #4A4F57; font-size: 13px; font-weight: 500; }
.tp-ask-this { min-height: 44px; padding: 0 16px; border: 1px solid #15171A; border-radius: 999px; background: #FFFFFF; color: #15171A; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }

/* Timeline */
.tp-timeline { display: flex; flex-direction: column; gap: 20px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.chip[aria-pressed="true"] { background: #15171A; color: #FFFFFF; border: 1px solid #15171A; }
.chip[aria-pressed="false"] { background: #FFFFFF; color: #4A4F57; border: 1px solid #C9CBCF; }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px #FFFFFF; }
.chip[aria-pressed="false"] .chip-dot { opacity: 0.45; }
.chip-count { opacity: 0.75; }
.tp-track { position: relative; padding-left: 32px; margin-top: 8px; }
.tp-track-line { position: absolute; left: 5px; top: 8px; bottom: 0; width: 2px; background: #D9DADC; }
.tp-entry { position: relative; padding-bottom: 40px; }
.tp-entry-last { padding-bottom: 24px; }
.tp-entry-dot { position: absolute; left: -32px; top: 5px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 4px #FFFFFF; }
.tp-entry-dot-boxed { top: 22px; }
.tp-entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tp-time { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 500; color: #15171A; }
.tp-type { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tp-new-badge { padding: 2px 8px; border-radius: 4px; background: #B23A22; color: #FFFFFF; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tp-entry-headline { margin: 10px 0 8px; font-family: 'Newsreader', Georgia, serif; font-size: 28px; line-height: 1.2; font-weight: 600; }
.tp-entry-body { margin: 0 0 16px; font-size: 17px; }
.tp-entry-body-before-quote { margin-bottom: 12px; }
.tp-entry-body-before-photo { margin-bottom: 14px; }
.tp-entry-body-only { margin: 8px 0 0; font-size: 17px; }
.tp-entry-quote { margin: 0 0 16px; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.4; }
.tp-entry-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tp-entry-byline-muted { font-size: 14px; color: #4A4F57; }
.tp-entry-byline-muted a { font-weight: 500; }
.tp-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 14px; font-weight: 600; }
.tp-person { display: flex; flex-direction: column; line-height: 1.3; }
.tp-person-name { font-size: 15px; font-weight: 600; }
.tp-person-role { font-size: 13px; color: #5F6670; }
.tp-entry-link { font-size: 14px; font-weight: 500; }
.tp-confirmed { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #15171A; color: #FFFFFF; font-size: 12px; font-weight: 500; }
.tp-photo { height: 240px; border-radius: 10px; background: #E9E9E6; display: flex; align-items: center; justify-content: center; color: #5F6670; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }
.tp-photo-img { display: block; width: 100%; height: 240px; object-fit: cover; border-radius: 10px; }
.tp-question-box { background: #F3F2EE; border-radius: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.tp-question-box .tp-time { color: inherit; }
.tp-asker { margin: 0 0 4px; font-size: 14px; color: #4A4F57; }
.tp-question { margin: 0; font-size: 18px; }
.tp-our-answer { border-top: 1px solid #DCD9D0; padding-top: 12px; }
.tp-our-answer-label { margin: 0 0 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #15171A; }
.tp-our-answer-quote { margin: 0 0 6px; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 20px; line-height: 1.4; }
.tp-our-answer-by { margin: 0; font-size: 14px; color: #4A4F57; }

/* Ask box */
.tp-ask { background: #15171A; color: #FFFFFF; border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.tp-ask-head { display: flex; align-items: center; gap: 12px; }
.tp-ask-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; color: #15171A; }
.tp-ask-title { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 32px; line-height: 1.15; font-weight: 600; }
.tp-ask-intro { margin: 0; font-size: 16px; color: #D5D7DB; }
.tp-field { display: flex; flex-direction: column; gap: 6px; }
.tp-field label { font-size: 14px; font-weight: 500; }
.tp-ask textarea { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 0; border-radius: 10px; background: #FFFFFF; color: #15171A; font: 16px 'IBM Plex Sans', system-ui, sans-serif; resize: vertical; }
.tp-ask input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 10px; background: #FFFFFF; color: #15171A; font: 16px 'IBM Plex Sans', system-ui, sans-serif; }
.tp-ask-send { align-self: flex-start; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: #B23A22; color: #FFFFFF; font: 600 15px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-popular { border-top: 1px solid #3A3E45; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.tp-popular-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #B8BCC2; }
.tp-popular-row { display: flex; align-items: center; gap: 14px; }
.tp-popular-vote { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 64px; justify-content: center; border: 1px solid #5A5F67; border-radius: 10px; background: transparent; color: #FFFFFF; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-popular-text { font-size: 16px; }

/* Comments */
.tp-comments { display: flex; flex-direction: column; gap: 20px; }
.tp-sort { display: flex; gap: 6px; }
.tp-sort button { min-height: 40px; padding: 0 14px; border-radius: 999px; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-sort button[aria-pressed="true"] { border: 1px solid #15171A; background: #15171A; color: #FFFFFF; }
.tp-sort button[aria-pressed="false"] { border: 1px solid #C9CBCF; background: #FFFFFF; color: #15171A; }
.tp-sort a, .tp-sort a:hover { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid #C9CBCF; border-radius: 999px; background: #FFFFFF; color: #15171A; text-decoration: none; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; }
.tp-sort a[aria-current="true"] { border-color: #15171A; background: #15171A; color: #FFFFFF; }
.tp-comment-form { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #D9DADC; border-radius: 12px; }
.tp-comment-form input { box-sizing: border-box; width: 100%; max-width: 320px; min-height: 44px; padding: 0 12px; border: 1px solid #C9CBCF; border-radius: 8px; font: 16px 'IBM Plex Sans', system-ui, sans-serif; color: #15171A; }
.tp-comment-form textarea { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid #C9CBCF; border-radius: 8px; font: 16px 'IBM Plex Sans', system-ui, sans-serif; color: #15171A; resize: vertical; }
.tp-comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.tp-publish { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #15171A; color: #FFFFFF; font: 500 15px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-bankid { font-size: 14px; font-weight: 500; }
.tp-comment { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid #E3E4E6; }
.tp-vote { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; min-height: 52px; border: 1px solid #D9DADC; border-radius: 10px; background: #FFFFFF; color: #15171A; font: 600 14px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-comment-content { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tp-comment-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: #5F6670; }
.tp-comment-body { margin: 0; font-size: 16px; }
.tp-reply, .tp-reply:hover { font-size: 14px; color: #4A4F57; }
.tp-comment-foot { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14px; }
.tp-in-suggestion { color: #0F766E; font-weight: 500; }
.tp-badge-confirmed { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: #15171A; color: #FFFFFF; font-size: 12px; font-weight: 500; }
.tp-badge-history { padding: 2px 9px; border-radius: 999px; background: #EEF0F2; color: #2E3238; font-size: 12px; font-weight: 500; }
.tp-badge-anonymous { padding: 2px 9px; border-radius: 999px; border: 1px solid #C9CBCF; color: #4A4F57; font-size: 12px; font-weight: 500; }

/* Sources */
.tp-sources { display: flex; flex-direction: column; gap: 18px; }
.tp-sources-head { border-top: 2px solid #15171A; padding-top: 12px; }
.tp-sources-sub { margin: 0; font-size: 15px; font-weight: 600; }
.tp-sources-sub-spaced { margin-top: 8px; }
.tp-source-list { display: flex; flex-direction: column; font-size: 15px; }
.tp-source { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-top: 1px solid #E3E4E6; }
.tp-source:last-child { border-bottom: 1px solid #E3E4E6; }
.tp-source-who { flex: 1 1 280px; min-width: 0; }
.tp-source-when { color: #4A4F57; }
.tp-source-status { color: #2E3238; }
.tp-source-approved { display: inline-flex; align-items: center; gap: 5px; color: #2E3238; }
.tp-source-no-reply { color: #B23A22; font-weight: 500; }
.tp-source-links { display: inline-flex; gap: 14px; }
.tp-source-links-muted { color: #5F6670; }
.tp-documents { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }

/* What Peter, the AI News Watch, posted: the "Fundet af AI" mark and the source links */
.tp-ai-found { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid #C9CBCF; border-radius: 999px; font-size: 12px; font-weight: 500; color: #4A4F57; white-space: nowrap; }
.tp-entry-quote-by { margin: -10px 0 16px; font-size: 14px; color: #4A4F57; }
.tp-entry-sources { margin: 0; font-size: 14px; color: #4A4F57; overflow-wrap: anywhere; }
.tp-entry-sources ul { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.tp-entry-source-outlet { color: #5F6670; }
.tp-sources-ai-note { margin: 4px 0 0; font-size: 13px; color: #5F6670; }

/* Right rail */
.tp-rail-card { background: #F5F5F4; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.tp-rail-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #15171A; }
.tp-rail-item, .tp-rail-item:hover { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: #15171A; padding-bottom: 12px; border-bottom: 1px solid #E0E0DD; }
.tp-rail-item:last-child { padding-bottom: 0; border-bottom: 0; }
.tp-rail-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #5F6670; }
.tp-rail-live { display: inline-flex; align-items: center; gap: 6px; color: #B23A22; }
.tp-rail-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #B23A22; }
.tp-rail-headline { font-family: 'Newsreader', Georgia, serif; font-size: 20px; line-height: 1.25; font-weight: 600; }
.tp-rail-counts { font-size: 13px; color: #5F6670; }

/* Colors per timeline entry type */
.tp-dot-event { background: #4A4F57; }
.tp-dot-interview { background: #1D4ED8; }
.tp-dot-letter { background: #C2410C; }
.tp-dot-comment { background: #0F766E; }
.tp-type-event { color: #4A4F57; }
.tp-type-interview { color: #1D4ED8; }
.tp-type-letter { color: #C2410C; }
.tp-type-comment { color: #0F766E; }
.tp-avatar-interview { background: #E8EDFB; color: #1D4ED8; }
.tp-avatar-letter { background: #FBEDE6; color: #C2410C; }
.tp-name-plain { font-weight: 600; }

/* Front page (/se/) and section pages (/se/sektion/:slug) */
.fp-top { max-width: 1200px; margin: 0 auto; padding: 28px 24px 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.fp-date { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5F6670; }
.fp-page-title { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 56px; line-height: 1.04; font-weight: 600; letter-spacing: -0.02em; color: #15171A; }
.fp-layout { padding-top: 24px; }
.fp-main { gap: 56px; }

.fp-empty { margin: 0; font-size: 18px; color: #2E3238; }
.fp-page-intro { margin: 0; max-width: 680px; font-family: 'Newsreader', Georgia, serif; font-size: 21px; line-height: 1.45; color: #2E3238; }

/* Themes (tags): on area pages, theme pages and topic pages */
.fp-themes, .tp-themes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
/* On topic pages the chips sit in the crumbs line: smaller, and not in its capitals */
.tp-crumbs .tp-themes { display: contents; }
.tp-crumbs .tp-themes a { min-height: 24px; padding: 0 10px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #15171A; }
.tp-crumbs .tp-themes a:hover { color: #15171A; }
.fp-themes-label { font-weight: 600; color: #5F6670; }
.fp-themes a, .tp-themes a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid #C9CBCF; border-radius: 999px; color: #15171A; text-decoration: none; }
.fp-themes a:hover, .tp-themes a:hover { border-color: #15171A; }

/* Working forms on real topics */
.tp-inline-form { display: contents; }
.tp-agree.is-voted, .tp-vote.is-voted { border-color: #15171A; background: #15171A; color: #FFFFFF; cursor: default; }
.tp-agree.is-voted .tp-agree-label { color: #D5D7DB; }
.tp-popular-vote.is-voted { border-color: #FFFFFF; background: #FFFFFF; color: #15171A; cursor: default; }
.tp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tp-form-status { margin: 0; padding: 10px 14px; border-radius: 10px; background: #EEF3FD; color: #15171A; font-size: 15px; }
.tp-form-status-error { background: #FDECEA; color: #7A1F12; }
.tp-ask-form { display: flex; flex-direction: column; gap: 18px; }
.tp-ask .tp-form-status { align-self: flex-start; }
.tp-ask-note { margin: -6px 0 0; font-size: 14px; color: #B8BCC2; }
.tp-comment-as { margin: 0; font-size: 15px; color: #2E3238; }
.tp-report { font-size: 14px; color: #4A4F57; }
.tp-report summary { cursor: pointer; list-style: none; min-height: 32px; display: inline-flex; align-items: center; }
.tp-report summary::-webkit-details-marker { display: none; }
.tp-report[open] summary { color: #15171A; font-weight: 500; }
.tp-report-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 6px; }
.tp-report-form label { flex-basis: 100%; }
.tp-report-form select { min-height: 40px; padding: 0 10px; border: 1px solid #C9CBCF; border-radius: 8px; background: #FFFFFF; font: 15px 'IBM Plex Sans', system-ui, sans-serif; color: #15171A; }
.tp-report-form button { min-height: 40px; padding: 0 14px; border: 1px solid #15171A; border-radius: 999px; background: #FFFFFF; color: #15171A; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-status-notice { margin: 0 0 16px; padding: 10px 16px; border-radius: 10px; background: #FFF1DE; color: #4A2A05; font-size: 15px; }
.tp-corrections { border-left: 3px solid #B23A22; padding: 4px 0 4px 16px; display: flex; flex-direction: column; gap: 6px; }
.tp-corrections-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #B23A22; }
.tp-corrections ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: #2E3238; }
.tp-correction-when { color: #5F6670; }

/* Version history (/se/amne/:slug/versioner) */
.tp-version-intro { margin: 0; font-size: 17px; color: #2E3238; }
.tp-versions { gap: 0; }
.tp-version { border-top: 1px solid #D9DADC; padding: 16px 0; }
.tp-version:last-of-type { border-bottom: 1px solid #D9DADC; margin-bottom: 24px; }
.tp-version summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.tp-version-number { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tp-version-when { font-size: 14px; color: #5F6670; }
.tp-version-headline { flex-basis: 100%; font-family: 'Newsreader', Georgia, serif; font-size: 24px; line-height: 1.2; font-weight: 600; }
.tp-version-content { display: flex; flex-direction: column; gap: 18px; padding-top: 16px; }
.tp-version-correction { margin: 0; padding: 10px 14px; border-radius: 10px; background: #FDF4F1; color: #5A1D12; font-size: 15px; }

@media (max-width: 600px) {
  .tp-topic-head { padding: 28px 16px 8px; }
  .tp-title, .fp-page-title { font-size: 40px; }
  .tp-headline { font-size: 32px; }
  .tp-lead { font-size: 21px; }
  .tp-layout { padding: 24px 16px 72px; gap: 48px; }
  .fp-top { padding: 20px 16px 0; }
  .fp-layout { padding-top: 16px; }
  .tp-ask { padding: 24px 20px; }
}

/* "Prata med Kent": comments by conversation with our AI reporter (src/conversations) */
.tp-kent { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 20px; border-radius: 12px; background: #F3F2EE; }
.tp-kent-title { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 24px; line-height: 1.2; font-weight: 600; }
.tp-kent-text { margin: 0; font-size: 16px; line-height: 1.5; color: #2E3238; }
.tp-kent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-kent-chat { min-height: 44px; padding: 0 18px; border: 1px solid #15171A; border-radius: 999px; background: #FFFFFF; color: #15171A; font: 500 15px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.tp-kent-chat:hover { background: #E9E7E1; }
.tp-kent-label { margin: 6px 0 0; font-size: 13px; color: #5F6670; }
.tp-comment-flagged .tp-comment-content { opacity: 0.75; }
.tp-comment-flagged-note { margin: 4px 0 0; font-size: 15px; font-style: italic; color: #5F6670; }

/* Front, area and theme pages: a feed of short headlines (renderFeed in render.js). One column
   on phones; wider screens below. */
.fpm { display: flex; flex-direction: column; }
.fpm-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5F6670; }
.fpm-kicker.tp-rail-live { color: #B23A22; }
.fpm-type-event { color: #4A4F57; }
.fpm-type-interview { color: #1D4ED8; }
.fpm-type-letter { color: #C2410C; }
.fpm-type-comment { color: #0F766E; }
.fpm-live-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fpm-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 20px 0 4px; }
.fpm-section-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #15171A; }
.fpm-section-title-rule { border-top: 2px solid #15171A; padding-top: 12px; }
.fpm-section-note { font-size: 13px; color: #5F6670; }

.fpm-now, .fpm-now:hover { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #F3D9D1; background: #FDF4F1; color: #15171A; text-decoration: none; font-size: 14px; line-height: 1.3; }
.fpm-now-label { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #B23A22; }
.fpm-now-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpm-now-time { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.fpm-now svg { flex-shrink: 0; color: #B23A22; }

.fpm-hero { display: flex; flex-direction: column; background: #15171A; color: #FFFFFF; }
.fpm-hero-link, .fpm-hero-link:hover { display: flex; flex-direction: column; color: #FFFFFF; text-decoration: none; }
.fpm-hero-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #2E3238; }
.fpm-hero-text { display: flex; flex-direction: column; gap: 10px; padding: 22px 16px 20px; }
.fpm-hero-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #C9CBCF; }
.fpm-hero-kicker.fpm-live { color: #FF8A70; }
.fpm-hero-title { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; }
.fpm-hero-link:hover .fpm-hero-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.fpm-hero-dek { font-size: 16px; line-height: 1.45; color: #C9CBCF; }
.fpm-hero-meta { font-size: 13px; color: #A9ADB3; }
.fpm-hero-related { margin: 0 16px; padding: 0 0 6px; list-style: none; border-top: 1px solid #3A3E44; }
.fpm-hero-related li + li { border-top: 1px solid #3A3E44; }
.fpm-hero-related-link, .fpm-hero-related-link:hover { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; color: #FFFFFF; text-decoration: none; }
.fpm-hero-related-text { font-size: 16px; line-height: 1.35; font-weight: 500; }
.fpm-hero .fpm-type-event { color: #C9CBCF; }
.fpm-hero .fpm-type-interview { color: #9DB8F5; }
.fpm-hero .fpm-type-letter { color: #FDBA8C; }
.fpm-hero .fpm-type-comment { color: #7DD3C0; }

.fpm-feed { display: flex; flex-direction: column; padding: 0 16px; }
.fpm-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.fpm-rows-continued { padding: 0 16px; }
.fpm-rows[hidden] { display: none; }
.fpm-row + .fpm-row { border-top: 1px solid #E0E0DD; }
/* A list that continues straight after "most discussed" starts with a rule too. */
.fpm-top + .fpm-rows-continued > .fpm-row:first-child { border-top: 1px solid #E0E0DD; }
.fpm-row-link, .fpm-row-link:hover { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; color: #15171A; text-decoration: none; }
.fpm-row-link-big { flex-direction: column; gap: 10px; }
.fpm-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fpm-row-headline { font-family: 'Newsreader', Georgia, serif; font-size: 22px; line-height: 1.18; font-weight: 600; }
.fpm-row-link:hover .fpm-row-headline { text-decoration: underline; text-underline-offset: 0.12em; }
.fpm-row-meta { font-size: 13px; color: #5F6670; }
.fpm-row-img { flex-shrink: 0; width: 100px; height: 100px; border-radius: 8px; object-fit: cover; background: #E4E2DD; }
.fpm-row-img-big { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; object-fit: cover; background: #E4E2DD; }

.fpm-quote, .fpm-quote:hover { display: flex; flex-direction: column; gap: 12px; margin: 12px 16px 4px; padding: 22px 20px; border-radius: 14px; background: #F5F5F4; color: #15171A; text-decoration: none; }
.fpm-quote-text { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 26px; line-height: 1.2; }
.fpm-quote-who { font-size: 14px; color: #4A4F57; }
.fpm-quote-more { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; }

.fpm-ask { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: 22px 16px 24px; background: #15171A; color: #FFFFFF; }
.fpm-ask .fpm-section-title { color: #FFFFFF; }
.fpm-ask-note { margin: -8px 0 0; font-size: 14px; color: #C9CBCF; }
.fpm-ask-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fpm-ask-card, .fpm-ask-card:hover { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: #FFFFFF; color: #15171A; text-decoration: none; }
.fpm-ask-answered { color: #0F766E; }
.fpm-ask-waiting { color: #C2410C; }
.fpm-ask-title { font-family: 'Newsreader', Georgia, serif; font-size: 21px; line-height: 1.2; font-weight: 600; }
.fpm-ask-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #E0E0DD; }
.fpm-ask-bar span { background: #1D4ED8; }
.fpm-ask-counts { font-size: 13px; color: #4A4F57; }

.fpm-top { padding: 22px 16px 8px; }
.fpm-top-list { margin: 4px 0 0; padding: 0; list-style: none; }
.fpm-top-list li + li { border-top: 1px solid #E0E0DD; }
.fpm-top-link, .fpm-top-link:hover { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; color: #15171A; text-decoration: none; }
.fpm-top-rank { flex-shrink: 0; width: 22px; font-family: 'Newsreader', Georgia, serif; font-size: 28px; line-height: 1; font-weight: 700; color: #B23A22; }
.fpm-top-text { font-size: 16px; line-height: 1.35; font-weight: 500; }

.fpm-topics { padding: 24px 16px 0; }
.fpm-topic-list { margin: 4px 0 0; padding: 0; list-style: none; }
.fpm-topic-list li + li { border-top: 1px solid #E0E0DD; }
.fpm-topic-link, .fpm-topic-link:hover { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; color: #15171A; text-decoration: none; }
.fpm-topic-title { font-family: 'Newsreader', Georgia, serif; font-size: 20px; line-height: 1.25; font-weight: 600; }

@media (max-width: 600px) {
  [data-page="feed"] .fp-date { display: none; }
  [data-page="feed"] .fp-top { padding: 0 16px; gap: 0; }
  [data-page="feed"] .fp-top > .ct-flash,
  [data-page="feed"] .fp-top > .ct-demo-notice { margin-top: 12px; }
  [data-page="feed"] .fp-layout { padding: 0 0 48px; }
  [data-page="feed"] .fp-main { gap: 0; }
  [data-page="feed"] .fp-empty { padding: 24px 16px; }
  /* Area and theme pages: a compact title (and crumbs, intro, themes) above the feed */
  [data-page="feed"] .fp-top > .tp-crumbs { margin-top: 16px; }
  [data-page="feed"] .fp-page-title { margin-top: 14px; font-size: 32px; }
  [data-page="feed"] .tp-crumbs + .fp-page-title { margin-top: 6px; }
  [data-page="feed"] .fp-page-intro { margin-top: 8px; font-size: 17px; }
  [data-page="feed"] .fp-themes { margin-top: 12px; }
  [data-page="feed"] .fp-top > :last-child { margin-bottom: 16px; }
}

/* Wider screens: the feed sits in the page column (tp-layout pads it), so its own side padding
   goes, and the lead story and the "right now" strip get rounded corners. */
@media (min-width: 601px) {
  .fpm-feed, .fpm-rows-continued, .fpm-top, .fpm-topics { padding-left: 0; padding-right: 0; }
  .fpm-quote, .fpm-quote:hover { margin-left: 0; margin-right: 0; }
  .fpm-now, .fpm-now:hover { margin-bottom: 24px; border: 1px solid #F3D9D1; border-radius: 10px; }
  .fpm-hero { border-radius: 16px; overflow: hidden; }
  .fpm-hero-text { padding: 28px 32px 22px; }
  .fpm-hero-title { font-size: 44px; line-height: 1.05; }
  .fpm-hero-dek { font-size: 19px; }
  .fpm-hero-related { margin: 0 32px; }
  .fpm-feed .fpm-section-head { padding-top: 12px; border-top: 2px solid #15171A; }
  .fpm-ask { margin-top: 48px; padding: 32px 32px 36px; border-radius: 16px; }
  .fpm-ask-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
  .fpm-top { margin-top: 40px; }
  .fpm-topics { margin-top: 40px; padding-top: 0; }
  .fpm-topic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 32px; }
  .fpm-topic-list li { border-top: 1px solid #E0E0DD; }
  /* The later updates as cards, picture on top */
  /* A card with a picture is two rows tall, so it sits beside two text cards without gaps. */
  .fpm-rows-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-flow: row dense; gap: 0 32px; }
  .fpm-rows-grid > .fpm-row-pictured { grid-row: span 2; }
  .fpm-rows-grid > .fpm-row { border-top: 1px solid #E0E0DD; }
  .fpm-rows-grid .fpm-row-link { flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 16px 0 24px; }
  .fpm-rows-grid .fpm-row-link-big { flex-direction: column; }
  .fpm-rows-grid .fpm-row-img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; }
}

/* Desktop: two columns at the top (see renderFeed), the rest of the feed full width below. */
@media (min-width: 901px) {
  [data-page="feed"] .fp-layout { padding-top: 16px; }
  .fpm-lead-area { display: flex; gap: 40px; align-items: flex-start; }
  .fpm-col-main { flex: 2 1 0; min-width: 0; display: flex; flex-direction: column; }
  .fpm-col-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
  .fpm-hero-img { aspect-ratio: 2 / 1; }
  .fpm-feed .fpm-section-head { padding-top: 12px; }
  .fpm-feed .fpm-row-headline { font-size: 19px; line-height: 1.22; }
  .fpm-feed .fpm-row-img, .fpm-feed .fpm-row-img-big { width: 84px; height: 84px; aspect-ratio: auto; border-radius: 8px; flex-shrink: 0; }
  /* Beside the lead story every picture is a small square to the right of the headline. */
  .fpm-feed .fpm-row-link-big { flex-direction: row-reverse; justify-content: flex-end; gap: 14px; }
  .fpm-col-side > .fpm-quote { margin: 12px 0 0; }
  .fpm-quote-text { font-size: 23px; }
  /* More stories under the lead story: cards in two columns, picture on top */
  .fpm-rows-side { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .fpm-rows-side > .fpm-row { border-top: 1px solid #E0E0DD; }
  .fpm-rows-side .fpm-row-link { flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 16px 0 24px; }
  .fpm-rows-side .fpm-row-link-big { flex-direction: column; }
  .fpm-rows-side .fpm-row-img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; }
  .fpm-top-list { columns: 2; column-gap: 40px; }
  .fpm-top-list li { break-inside: avoid; }
}

/* Phones and tablets: one column. The two top columns dissolve and `order` restores reading
   order: "right now", lead story, newest updates, quote, more stories, then the rest. */
@media (max-width: 900px) {
  .fpm-lead-area, .fpm-col-main, .fpm-col-side { display: contents; }
  .fpm > * { order: 5; }
  .fpm > .fpm-now { order: 0; }
  .fpm-hero { order: 1; }
  .fpm-feed { order: 2; }
  .fpm-quote { order: 3; }
  .fpm-rows-side { order: 4; }
  .fpm-rows-side > .fpm-row:first-child { border-top: 1px solid #E0E0DD; }
}

/* Tablets: room between the lead story and the newest updates under it */
@media (min-width: 601px) and (max-width: 900px) {
  .fpm-feed { margin-top: 28px; }
}

.tp-article img, .tp-body img { display: block; max-width: 100%; height: auto; border-radius: 8px; }

/* ------------------------------------------------------------------------------------------
   Finishing touches on topic, front and area pages (tokens and motion rules in site.css).
   ------------------------------------------------------------------------------------------ */
/* Links read calmer: a thin underline that firms up on hover */
.tp-body a, .tp-entry-sources a, .tp-entry-byline-muted a, .tp-source a, .tp-footnote a, .tp-byline a {
  text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: rgba(29, 78, 216, 0.35);
  transition: text-decoration-color var(--ct-fast) ease, color var(--ct-fast) ease;
}
.tp-body a:hover, .tp-entry-sources a:hover, .tp-entry-byline-muted a:hover, .tp-source a:hover, .tp-footnote a:hover, .tp-byline a:hover { text-decoration-color: currentColor; }

/* Buttons: same shape everywhere, and each one answers a hover */
.tp-follow, .tp-publish, .tp-ask-send, .tp-more, .tp-ask-this, .tp-kent-chat, .tp-report-form button,
.chip, .tp-sort button, .tp-sort a, .tp-agree, .tp-vote, .tp-popular-vote, .fp-themes a, .tp-themes a {
  transition: background-color var(--ct-fast) ease, border-color var(--ct-fast) ease, color var(--ct-fast) ease, box-shadow var(--ct-fast) ease, transform var(--ct-fast) ease;
}
.tp-follow:hover, .tp-publish:hover { background: #000000; box-shadow: 0 4px 14px rgba(21, 23, 26, 0.18); }
.tp-ask-send:hover { background: #9A3019; box-shadow: 0 4px 14px rgba(178, 58, 34, 0.35); }
.tp-more:hover, a.tp-more:hover, .tp-ask-this:hover, .tp-report-form button:hover { border-color: var(--ct-ink); background: var(--ct-paper-warm); }
.chip[aria-pressed="false"]:hover, .tp-sort button[aria-pressed="false"]:hover, .tp-sort a:not([aria-current="true"]):hover { border-color: var(--ct-ink); color: var(--ct-ink); }
.tp-agree:not(.is-voted):hover, .tp-vote:not(.is-voted):hover { border-color: var(--ct-ink); background: #FAFAF8; }
.tp-popular-vote:not(.is-voted):hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.fp-themes a:hover, .tp-themes a:hover { background: var(--ct-paper-warm); }
@media (prefers-reduced-motion: no-preference) {
  .tp-follow:active, .tp-publish:active, .tp-ask-send:active, .chip:active, .tp-agree:not(.is-voted):active, .tp-vote:not(.is-voted):active, .tp-popular-vote:not(.is-voted):active { transform: scale(0.97); }
}

/* Form fields: a soft halo while typing, hover lifts the border */
.tp-comment-form input, .tp-comment-form textarea, .tp-report-form select {
  transition: border-color var(--ct-fast) ease, box-shadow var(--ct-fast) ease;
}
.tp-comment-form input:hover, .tp-comment-form textarea:hover, .tp-report-form select:hover { border-color: #9AA0A8; }
.tp-comment-form input:focus, .tp-comment-form textarea:focus, .tp-report-form select:focus { outline: none; border-color: var(--ct-ink); box-shadow: 0 0 0 4px rgba(21, 23, 26, 0.08); }
.tp-ask input, .tp-ask textarea { transition: box-shadow var(--ct-fast) ease; }
.tp-ask input:focus, .tp-ask textarea:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22); }
.tp-ask textarea, .tp-comment-form textarea { field-sizing: content; min-height: 6lh; }
::placeholder { color: #8A9099; opacity: 1; }

/* Cards and boxes share the same corner and a quiet edge */
.tp-summary { border-radius: 0 12px 12px 0; }
.tp-rail-card { border-radius: 16px; }
.tp-rail { position: sticky; top: 96px; }
.tp-rail-item .tp-rail-headline { transition: color var(--ct-fast) ease; }
.tp-rail-item:hover .tp-rail-headline { color: var(--ct-brand); }
.tp-photo-img, .tp-article img, .tp-body img { border-radius: 12px; }

/* The "right now" dot breathes so it reads as live */
@keyframes ct-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(178, 58, 34, 0.45); } 70% { box-shadow: 0 0 0 6px rgba(178, 58, 34, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .tp-updated-dot, .tp-rail-live-dot, .fpm-now-label .fpm-live-dot { animation: ct-live 2.4s ease-out infinite; }
}

/* Feed: headlines warm up on hover, pictures lift gently */
.fpm-row-headline, .fpm-topic-title, .fpm-top-text, .fpm-hero-related-text { transition: color var(--ct-fast) ease; }
.fpm-row-link:hover .fpm-row-headline { text-decoration: none; color: var(--ct-brand); }
.fpm-topic-link:hover .fpm-topic-title, .fpm-top-link:hover .fpm-top-text { color: var(--ct-brand); }
.fpm-hero-related-link:hover .fpm-hero-related-text { color: #FFD3C7; }
.fpm-row-img, .fpm-row-img-big, .fpm-hero-img { transition: filter var(--ct-medium) var(--ct-ease), transform 600ms var(--ct-ease); }
.fpm-row-link:hover .fpm-row-img, .fpm-row-link:hover .fpm-row-img-big { filter: brightness(1.04) saturate(1.06); }
.fpm-hero { isolation: isolate; }
.fpm-hero-link { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .fpm-hero-link:hover .fpm-hero-img { transform: scale(1.015); }
}
.fpm-now, .fpm-ask-card, .fpm-quote { transition: background-color var(--ct-fast) ease, box-shadow var(--ct-medium) var(--ct-ease), border-color var(--ct-fast) ease; }
.fpm-now:hover { background: #FBEBE5; }
.fpm-now svg { transition: transform var(--ct-medium) var(--ct-ease); }
.fpm-now:hover svg { transform: translateX(3px); }
.fpm-ask-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
.fpm-quote:hover { background: #EFEFED; }
.fpm-row-img, .fpm-row-img-big { box-shadow: inset 0 0 0 1px rgba(21, 23, 26, 0.06); }

/* Timeline dots get a quiet ring so they sit on the line */
.tp-entry-dot { box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5px rgba(21, 23, 26, 0.08); }

@media (max-width: 1000px) {
  .tp-rail { position: static; }
}

/* Charts (SVG images, src/topics/render.js) are shown whole, never cropped like photos: at their
   own shape, no taller than 560px, on the chart's own paper colour. */
.tp-root img.ct-chart-img { object-fit: contain; background: #FCFCFB; }
.tp-root img.fpm-hero-img.ct-chart-img, .tp-root img.fpm-row-img-big.ct-chart-img, .tp-root img.tp-photo-img.ct-chart-img { height: auto; max-height: 560px; aspect-ratio: auto; }
.tp-root .fpm-hero-link:hover img.ct-chart-img { transform: none; }

/* ------------------------------------------------------------------------------------------
   Copy link (src/public/topic.js): a quiet pill under the topic title. On a click it turns
   green with a tick for a moment and says the link is copied.
   ------------------------------------------------------------------------------------------ */
.tp-copy-link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border: 1px solid #D9DADC; border-radius: 999px; background: #FFFFFF; color: #3A3F46; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
.tp-copy-link:hover { border-color: #15171A; color: #15171A; }
.tp-crumbs .tp-copy-link { margin-left: auto; min-height: 28px; padding: 0 10px 0 8px; gap: 6px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.tp-copy-icon { position: relative; display: inline-flex; width: 16px; height: 16px; }
.tp-copy-icon svg { position: absolute; inset: 0; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tp-copy-icon svg + svg { opacity: 0; transform: scale(0.4); }
.tp-copy-link.is-copied { border-color: #1E7A46; background: #EEF8F1; color: #1E6A3D; }
.tp-copy-link.is-copied .tp-copy-icon svg:first-child { opacity: 0; transform: scale(0.4); }
.tp-copy-link.is-copied .tp-copy-icon svg + svg { opacity: 1; transform: none; }

/* A timeline entry reached from search: a short, soft flash so the eye finds it. */
@keyframes tp-target-flash { from { background: #FBE9C8; } to { background: transparent; } }
.tp-track [id^="tl-"]:target > .tp-entry { animation: tp-target-flash 2.4s ease-out; border-radius: 8px; }

/* ------------------------------------------------------------------------------------------
   Search page (/dk/sog, /se/sok; render.js renderSearchPage)
   ------------------------------------------------------------------------------------------ */
.sr-main { max-width: 760px; display: block; }
.sr-form { display: flex; gap: 10px; margin: 8px 0 28px; }
.sr-input { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 0 18px; border: 1px solid #C9CBCF; border-radius: 999px; background: #FFFFFF; color: #15171A; font: 400 17px 'IBM Plex Sans', system-ui, sans-serif; }
.sr-input:focus { outline: none; border-color: #15171A; box-shadow: 0 0 0 3px rgba(21, 23, 26, 0.08); }
.sr-submit { min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: #15171A; color: #FFFFFF; font: 500 16px 'IBM Plex Sans', system-ui, sans-serif; cursor: pointer; }
.sr-count { margin: 0 0 8px; font-size: 14px; color: #5F6670; }
.sr-empty { margin: 0; font-size: 17px; line-height: 1.5; color: #2E3238; }
.sr-group { margin-top: 28px; }
.sr-group-title { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid #15171A; font: 600 13px 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #15171A; }
.sr-group-count { margin-left: 6px; color: #8A9099; font-weight: 500; }
.sr-list { margin: 0; padding: 0; list-style: none; }
.sr-list li + li { border-top: 1px solid #E3E4E6; }
.sr-item, .sr-item:hover { display: grid; gap: 3px; padding: 14px 0; color: inherit; text-decoration: none; }
.sr-title { font-family: 'Newsreader', Georgia, serif; font-size: 21px; line-height: 1.25; font-weight: 600; color: #15171A; }
.sr-item:hover .sr-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sr-snippet { font-size: 15px; line-height: 1.5; color: #2E3238; }
.sr-sub, .sr-when { font-size: 13.5px; color: #5F6670; }
.sr-label { justify-self: start; font: 600 11px 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #8A2B1E; }
@media (max-width: 600px) {
  .sr-form { margin-bottom: 20px; }
  .sr-submit { padding: 0 18px; }
  .sr-title { font-size: 19px; }
}

/* Photos carry width and height so the page does not jump while they load (src/site/assets.js);
   their shown height still comes from the styles. */
:where(img[width][height]) { height: auto; }