:root {
  color-scheme: dark;
  --color-primary: #72BFF0;
  --color-secondary: #B8E45C;
  --color-accent: #48B994;
  --color-background: #0B1521;
  --color-surface: #142435;
  --color-surface-elevated: #1B3042;
  --color-border: #2A4254;
  --color-text: #E5F0F8;
  --color-muted: #A1B4C4;
  --color-success: #65D6A5;
  --color-info: #80C9FF;
  --color-warning: #F0C36B;
  --color-warning-text: #F0C36B;
  --color-danger: #FF818A;
  --color-note: #98A9BA;
  /* Named palette: fixed hues for what they represent (sun, night, weather, ...), tuned per mode; text-safe (≥ 4.5:1) on every surface */
  --color-red: #FF7A7A;
  --color-orange: #FF9F5A;
  --color-amber: #F5B94E;
  --color-yellow: #F2D45C;
  --color-lime: #B8E45C;
  --color-green: #65D6A5;
  --color-teal: #4FD1C5;
  --color-cyan: #5FD4F4;
  --color-blue: #72A8F5;
  --color-indigo: #959FF7;
  --color-violet: #BA9CF5;
  --color-pink: #F48FC1;
  --hud-grid: #1E3547;
  --hud-active: var(--color-primary);
  --hud-transmission: var(--color-secondary);
  --hud-selection: #213B50;
  --body-bg-image: url("images/pattern-dark.png");
  --body-bg-image-size: 4.6875rem;
  --body-bg-cover: url("images/cover-dark.jpg");
  --body-bg-overlay: linear-gradient(rgb(11 21 33 / .94), rgb(11 21 33 / .94));
  --color-primary-hover: #95D5F9;
  --color-backdrop: rgb(3 10 16 / .82);
  --media-overlay-strong: rgb(11 21 33 / .94);
  --media-overlay-mid: rgb(11 21 33 / .68);
  --media-overlay-clear: rgb(11 21 33 / .02);
  --media-overlay-text: var(--color-text);
  --media-overlay-muted: var(--color-muted);
  --media-overlay-surface: rgb(11 21 33 / .75);
  --media-overlay-border: rgb(229 240 248 / .34);
  --media-overlay-track: rgb(229 240 248 / .14);
  --bg: var(--color-background);
  --panel: var(--color-surface);
  --panel-hover: var(--color-surface-elevated);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --line-bright: color-mix(in srgb, var(--color-border) 72%, var(--color-muted));
  --accent: var(--color-primary);
  --cyan: var(--color-primary);
  --accent-ink: var(--color-background);
  --track: var(--color-surface-elevated);
  --green: var(--color-success);
  --red: var(--color-danger);
  --violet: var(--color-note);
  --font-heading: "Sora", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  /* The wordmark of the header and the footer (HÍRHÁNYÓ) */
  --font-wordmark: "Chakra Petch", var(--font-heading);
  --font-wordmark-weight: 700;
  --font-wordmark-tracking: .04em;
  /* The metal of the emblem and the wordmark (.brand-emblem, .brand-wordmark) */
  --brand-metal-1: #F4FAFE;
  --brand-metal-2: #A9C4D8;
  --brand-metal-3: #56778F;
  --brand-metal-4: #CFE0EB;
  --brand-metal-5: #5A7689;
  --brand-wordmark-fill: linear-gradient(#FFF 8%, #D3E8F6 35%, #7FA6C1 65%, #DAEDF8 85%, #6E93AD);
  --brand-wordmark-edge: #2A4D66;
  --font-size-meta: 0.6875rem;
  --line-height-body: 1.6;
  --line-height-heading: 1.15;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --page-gutter: var(--space-6);
}
[data-theme="light"] {
  color-scheme: light;
  --color-primary: #155B96;
  --color-secondary: #A75B38;
  --color-accent: #85552E;
  --color-background: #F4F7FA;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #E7EEF4;
  --color-border: #C9D7E3;
  --color-text: #152B3D;
  --color-muted: #4B6276;
  --color-success: #1B7651;
  --color-info: #1D6EAF;
  --color-warning: #995500;
  --color-warning-text: #995500;
  --color-danger: #B53B46;
  --color-note: #586F83;
  --color-red: #C4323B;
  --color-orange: #B04E0C;
  --color-amber: #955E00;
  --color-yellow: #7A6500;
  --color-lime: #4C750C;
  --color-green: #1B7651;
  --color-teal: #0D716D;
  --color-cyan: #0A6B88;
  --color-blue: #1F5FB8;
  --color-indigo: #4A4FC4;
  --color-violet: #7446B8;
  --color-pink: #B0386F;
  --hud-grid: #D0DDE8;
  --hud-active: var(--color-primary);
  --hud-transmission: var(--color-secondary);
  --hud-selection: #DCEAF8;
  --body-bg-image: url("images/pattern-light.png");
  --body-bg-cover: url("images/cover-light.jpg");
  --body-bg-overlay: linear-gradient(rgb(244 247 250 / .975), rgb(244 247 250 / .975));
  --color-primary-hover: #104774;
  --brand-metal-1: #6F95B3;
  --brand-metal-2: #2C5577;
  --brand-metal-3: #12324C;
  --brand-metal-4: #4B7BA1;
  --brand-metal-5: #1B3E5A;
  --brand-wordmark-fill: linear-gradient(#2A5B82 8%, #153B5A 40%, #0E2A42 62%, #25577E 85%, #12324C);
  --brand-wordmark-edge: #C9D7E3;
  --color-backdrop: rgb(21 43 61 / .58);
  --media-overlay-strong: rgb(244 247 250 / .96);
  --media-overlay-mid: rgb(244 247 250 / .82);
  --media-overlay-clear: rgb(244 247 250 / .06);
  --media-overlay-text: var(--color-text);
  --media-overlay-muted: var(--color-muted);
  --media-overlay-surface: rgb(255 255 255 / .9);
  --media-overlay-border: rgb(21 43 61 / .28);
  --media-overlay-track: rgb(21 43 61 / .16);
  --bg: var(--color-background);
  --panel: var(--color-surface);
  --panel-hover: var(--color-surface-elevated);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --line-bright: color-mix(in srgb, var(--color-border) 55%, var(--color-muted));
  --accent: var(--color-primary);
  --cyan: var(--color-primary);
  --accent-ink: #FFFFFF;
  --track: var(--color-surface-elevated);
  --green: var(--color-success);
  --red: var(--color-danger);
  --violet: var(--color-note);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background-color: var(--bg); background-image: var(--body-bg-image), var(--body-bg-overlay), var(--body-bg-cover); background-position: left top, center, center center; background-repeat: repeat, no-repeat, no-repeat; background-size: var(--body-bg-image-size), cover, cover; background-attachment: fixed; color: var(--text); font-family: var(--font-body); line-height: var(--line-height-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-heading); }
button, input, select { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; background: none; }
a { color: var(--color-primary); text-decoration: none; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a, summary { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--hud-active); outline-offset: 3px; }
button:active:not(:disabled) { filter: brightness(.94); }
button:disabled, input:disabled, select:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
[aria-disabled="true"] { pointer-events: none; }
a:hover, a:active { color: var(--color-primary-hover); }
[hidden] { display: none !important; }
::selection { color: var(--text); background: var(--hud-selection); }
.site-shell { max-width: 1440px; margin: 0 auto; padding: 0 var(--page-gutter); border: 1px solid var(--color-border); border-top: 0; background: var(--color-surface); }
.mono { font-family: var(--font-mono); font-size: var(--font-size-meta); font-weight: 500; letter-spacing: .03em; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 18px; line-height: 1; font-style: normal; flex-shrink: 0; }
/* The hue of each main category (the press review sections, by slug): fixed, so the named
 * palette; blocks read --section-color (the category share, the tabs of a news list) */
[data-section="itthon"] { --section-color: var(--color-red); }
[data-section="vilag"] { --section-color: var(--color-blue); }
[data-section="gazdasag"] { --section-color: var(--color-green); }
[data-section="sport"] { --section-color: var(--color-orange); }
[data-section="eletmod"] { --section-color: var(--color-teal); }
[data-section="tudomany"] { --section-color: var(--color-violet); }
[data-section="technologia"] { --section-color: var(--color-cyan); }
[data-section="szorakozas"] { --section-color: var(--color-pink); }
.status-dot { display: inline-block; width: 5px; height: 5px; background: var(--color-success); border-radius: 50%; margin-right: 7px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); font-size: 26px; }
.icon-button:hover { background: var(--panel-hover); border-color: var(--color-primary); }
.hud-panel { position: relative; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(155deg, color-mix(in srgb, var(--panel) 98%, var(--hud-active)), var(--panel) 72%); box-shadow: 0 12px 30px rgb(3 10 16 / .08); }
.hud-panel::before, .hud-panel::after { content: ""; position: absolute; z-index: 2; pointer-events: none; width: 7px; height: 7px; opacity: .24; }
.hud-panel::before { top: -1px; left: -1px; border-top: 1px solid var(--hud-transmission); border-left: 1px solid var(--hud-transmission); }
.hud-panel::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--hud-active); border-right: 1px solid var(--hud-active); }
.text-button { color: var(--accent); padding: 5px 0; font-size: 12px; font-weight: 600; }
.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.eyebrow { font-size: 10px; letter-spacing: .08em; margin-bottom: 8px; }
.eyebrow .accent { margin-right: 8px; }
h1 { font-family: var(--font-heading); font-size: 34px; letter-spacing: -.025em; line-height: var(--line-height-heading); margin: 0; font-weight: 600; }
h1 span { color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2.07fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.feed-column, .sidebar { min-width: 0; }
.feed-column { display: flex; flex-direction: column; gap: 16px; }
.feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.filter-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.filter-tab { color: var(--muted); font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 6px 9px; border: 1px solid transparent; border-radius: 2px; white-space: nowrap; text-transform: uppercase; }
.filter-tab:hover { color: var(--color-primary); border-color: var(--line); background: var(--panel-hover); }
.filter-tab.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.filter-tab span { margin-left: 4px; font-family: var(--font-mono); font-size: 10px; }
.sort-control { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sort-control-label { color: var(--muted); font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
.active-filter { display: flex; justify-content: space-between; gap: 12px; align-items: center; color: var(--cyan); margin-bottom: 12px; font-size: 10px; overflow-wrap: anywhere; }
.active-filter button { flex-shrink: 0; font-size: 10px; color: var(--accent); }
.news-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.news-card { grid-column: span 3; min-width: 0; display: flex; flex-direction: column; transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease; }
.news-card:hover { border-color: var(--cyan); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .news-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(0 0 0 / .16); }
}
/* Every photo box is 16:9 or square, the two shapes of the stored copies (ADR 0026) */
.card-visual { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--panel); border-bottom: 1px solid var(--line); }
.card-visual::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, #0000000d 3px 4px); pointer-events: none; }
.visual-code { position: absolute; left: 13px; top: 12px; z-index: 1; color: var(--media-overlay-text); font-size: 9px; padding: 4px 6px; background: var(--media-overlay-surface); border-left: 2px solid var(--hud-transmission); }
.save-button { position: absolute; z-index: 3; right: 12px; top: 11px; width: 31px; height: 31px; border: 1px solid var(--media-overlay-border); display: grid; place-items: center; background: var(--media-overlay-surface); color: var(--media-overlay-text); }
.save-button .icon { width: 15px; height: 18px; font-size: 15px; }
.save-button:hover { border-color: var(--color-primary); }
.save-button[aria-pressed="true"] { color: var(--color-primary); border-color: var(--color-primary); }
/* A photo in a fixed box (media-fit.js): every copy has the shape of its box (16:9 or a square,
   ADR 0026), so it covers the box; where a box differs (a 16:9 copy in a square), the upper part
   is kept, where faces are */
.media-fit { position: absolute; inset: 0; overflow: hidden; background: var(--panel-hover); }
.media-fit img { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-fit-img { object-fit: cover; object-position: 50% 32%; transition: transform .4s ease; }
.media-fit.is-missing img { display: none; }
.hero-card .media-fit-img { object-position: 62% 32%; }
.card-visual.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, var(--media-overlay-mid), transparent 42%); }
.card-visual.has-photo .visual-code { z-index: 2; }
/* A photo that fails to load (media-fit.js: is-missing) leaves the card as one without a photo */
.card-visual.has-photo:has(.media-fit.is-missing) { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .news-card:hover .media-fit-img { transform: scale(1.035); }
}
a.card-title { display: block; color: inherit; }
.card-coverage { color: var(--cyan); }
.card-content > p:empty { display: none; }
/* A card without a visual: the save button sits on the kicker row */
.news-card > .save-button:first-child + .card-content .card-kicker { padding-right: 40px; }
/* Real titles are sentences: a calmer size, and the title and the lead are clamped */
.is-real .card-title { display: -webkit-box; overflow: hidden; font-size: 22px; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.is-real .card-content > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.is-real.hero-card .card-title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; text-transform: none; -webkit-line-clamp: 4; }
.is-real.hero-card .hero-content p { -webkit-line-clamp: 4; }
.is-real.compact-card .card-title { font-size: 17px; -webkit-line-clamp: 4; }
.is-real.compact-card .card-content > p { -webkit-line-clamp: 2; }
.card-content { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.card-kicker { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.category-tag { display: inline-block; color: var(--accent); font-size: 9px; font-family: var(--font-mono); font-weight: 500; letter-spacing: .03em; }
.card-kicker .category-tag { color: var(--accent-ink); background: var(--accent); padding: 3px 6px; font-size: 9px; }
.card-kicker > .mono { color: var(--muted); font-size: 9px; }
.card-content h3 { margin: 0; }
.card-title { font-family: var(--font-heading); font-size: 27px; font-weight: 600; line-height: var(--line-height-heading); letter-spacing: -.025em; padding: 0; text-align: left; }
.card-title:hover { color: var(--color-primary); }
.card-content p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 9px 0 13px; }
.card-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; margin-top: auto; font-size: 9px; color: var(--muted); }
.card-meta > span, .card-meta > button { display: flex; align-items: center; gap: 5px; }
.card-meta .icon { width: 12px; height: 12px; font-size: 12px; }
.source-button { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cyan); padding: 0; font-family: var(--font-body); font-size: 10px; font-weight: 600; }
.source-button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Reusable segment bar: customise per context via the --segment-* properties. */
.segment-bar { --segment-size: 8px; --segment-gap: 3px; --segment-from: var(--color-primary); --segment-to: var(--color-success); --segment-track: var(--track); display: flex; gap: var(--segment-gap); }
.segment-bar i { flex: none; width: var(--segment-size); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--segment-track) 72%, var(--color-border)); border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--segment-track) 76%, white), var(--segment-track)); box-shadow: inset 0 1px rgb(255 255 255 / .08); }
.segment-bar i.filled { --segment-color: color-mix(in oklab, var(--segment-to) calc(var(--i, 0) * 11.1%), var(--segment-from)); border-color: color-mix(in srgb, var(--segment-color) 75%, white); background: linear-gradient(180deg, rgb(255 255 255 / .4), transparent 55%, rgb(0 0 0 / .12)), var(--segment-color); box-shadow: 0 0 5px color-mix(in srgb, var(--segment-color) 58%, transparent), inset 0 1px rgb(255 255 255 / .5); }
.hero-card { grid-column: 1 / -1; aspect-ratio: 16 / 9; container-type: inline-size; position: relative; overflow: hidden; color: var(--media-overlay-text); background: var(--panel); }
.hero-card .hero-art { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--media-overlay-strong), var(--media-overlay-mid) 45%, var(--media-overlay-clear) 80%), linear-gradient(0deg, var(--media-overlay-strong), transparent 65%); }
.hero-content { position: relative; padding: 24px 26px 18px; display: flex; flex-direction: column; flex: 1; }
.hero-content .card-kicker { margin-bottom: 18px; }
.hero-content .category-tag { background: var(--color-primary); color: var(--accent-ink); }
.hero-coordinates { color: var(--media-overlay-muted) !important; padding: 3px 35px 3px 6px; background: var(--media-overlay-surface); font-size: 9px !important; }
.hero-content h3 { max-width: 440px; }
.hero-content .card-title { font-size: clamp(34px, 3.1vw, 44px); line-height: 1.03; text-transform: uppercase; }
.hero-content .card-title:hover { color: var(--color-primary-hover); }
.hero-content p { max-width: 380px; color: var(--media-overlay-muted); margin: 13px 0 18px; line-height: 1.65; }
.hero-read { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; color: var(--color-primary); font-family: var(--font-body); font-size: 12px; font-weight: 700; padding: 3px 0 13px; margin-bottom: 12px; }
.hero-read .icon { width: 17px; font-size: 17px; }
.hero-read:hover { color: var(--color-primary-hover); }
.hero-bottom { display: flex; align-items: center; gap: 22px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--media-overlay-border); }
.hero-bottom .card-meta { flex: 1; color: var(--media-overlay-muted); font-size: 9px; justify-content: flex-start; gap: 15px; }
.hero-bottom .source-button { color: var(--color-primary); }
.hero-bottom .signal-strip { flex: 1.2; margin: 0; padding-top: 0; border: 0; }
.compact-card { grid-column: span 2; }
.compact-card .visual-code { top: 9px; left: 10px; font-size: 9px; max-width: calc(100% - 50px); }
.compact-card .save-button { width: 26px; height: 26px; top: 8px; right: 9px; }
.compact-card .card-content { padding: 12px; }
.compact-card .card-title { font-size: 23px; }
.compact-card .card-content p { font-size: 11px; margin: 8px 0 12px; }
.compact-card .card-meta { font-size: 9px; }
.compact-card .source-button { font-size: 9px; }
.compact-card .card-meta > span:nth-child(2) { display: none; }
.filtered-grid .news-card { grid-column: span 3; }
.filtered-grid .news-card:only-child { grid-column: 1 / -1; }
/* Panel heading: framed icon, spaced uppercase title, mono meta and a short transmission mark */
.panel-heading { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px var(--space-4); border-bottom: 1px solid var(--line); min-width: 0; }
.panel-heading::after { content: ""; position: absolute; left: var(--space-4); bottom: -1px; width: 26px; height: 1px; background: var(--hud-transmission); }
.panel-heading h2 { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 auto 0 0; font-family: var(--font-heading); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .09em; text-transform: uppercase; }
.panel-icon { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); }
.panel-icon .icon { width: 14px; height: 14px; font-size: 14px; }
.panel-heading > .mono { color: var(--muted); font-size: 9px; white-space: nowrap; }
.source-avatar { display: grid; place-items: center; background: var(--panel-hover); color: var(--cyan); font-family: var(--font-mono); width: 22px; height: 22px; border: 1px solid var(--line); flex-shrink: 0; font-size: 9px; overflow: hidden; }
.source-avatar img { width: 100%; height: 100%; object-fit: cover; }
.method-note { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--muted); }
.method-note > .icon { color: var(--cyan); width: 16px; height: 16px; font-size: 16px; }
.method-note p { margin: 0; font-size: 10px; line-height: 1.6; flex: 1; }
.method-note button { flex-shrink: 0; font-size: 10px; }
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state h3 { font-size: 22px; font-weight: 500; }
.empty-state p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.sidebar { display: flex; flex-direction: column; gap: 16px; }
summary.panel-heading { cursor: pointer; list-style: none; }
summary.panel-heading::-webkit-details-marker { display: none; }
summary.panel-heading:focus-visible { outline-offset: -5px; }
summary:hover h2 { color: var(--cyan); }
details:not([open]) .panel-heading { border-bottom: 0; }
details:not([open]) .panel-heading::after { display: none; }
.network-status { display: flex; align-items: center; padding: 4px 0; font-size: 9px; color: var(--color-success); }
.network-status .status-dot { background: var(--color-success); }
.signal-bars { display: flex; align-items: flex-end; gap: 2px; margin-left: auto; margin-right: 10px; height: 11px; }
.signal-bars i { width: 3px; background: var(--color-success); height: 3px; }
.signal-bars i:nth-child(2) { height: 5px; }
.signal-bars i:nth-child(3) { height: 7px; }
.signal-bars i:nth-child(4) { height: 9px; }
.signal-bars i:nth-child(5) { height: 11px; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; color: var(--accent-ink); background: var(--accent); padding: 12px 15px; font-family: var(--font-body); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.primary-button:hover { background: var(--color-primary-hover); }
.primary-button .icon { width: 16px; height: 16px; font-size: 16px; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 20; background: var(--accent); color: var(--accent-ink); padding: 12px; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.skip-link:hover, .skip-link:active { color: var(--accent-ink); }
.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; }
dialog { max-width: 720px; width: calc(100% - 32px); max-height: 88vh; overflow: auto; padding: 28px; color: var(--text); background: var(--bg); border: 1px solid var(--hud-active); box-shadow: 0 15px 80px #0007; }
dialog::backdrop { background: var(--color-backdrop); backdrop-filter: blur(5px); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
dialog h2 { font-family: var(--font-heading); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; margin: 15px 0; }
.article-meta { font-size: 10px; color: var(--muted); line-height: 1.7; }
#dialog-body { margin: 22px 0; font-size: 14px; line-height: 1.85; color: var(--muted); }
#dialog-body h3 { color: var(--text); font-size: 17px; font-weight: 500; margin: 24px 0 8px; }
#dialog-body p { margin: 10px 0; }
.dialog-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 15px; }
.dialog-bottom .mono { font-size: 9px; }
.dialog-metrics { margin: 18px 0; padding: 14px 18px; border: 1px solid var(--line); background: var(--panel); }
.dialog-metrics .signal-strip { margin: 0; padding-top: 0; border: 0; }
.dialog-source { border-top: 1px solid var(--line); padding: 13px 0; }
.dialog-source strong { display: block; color: var(--color-primary); font-size: 12px; font-weight: 500; }
.dialog-source p { font-size: 12px; margin: 4px 0 !important; }
.dialog-source .mono { font-size: 9px; }
.dialog-story-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--text); }
.dialog-story-link:hover { color: var(--accent); }
.dialog-story-link span { font-size: 13px; }
.dialog-story-link > span:first-child { font-family: var(--font-heading); font-weight: 500; }
.dialog-story-link .mono { font-size: 9px; color: var(--muted); white-space: nowrap; }
.settings-form label { display: grid; grid-template-columns: 1fr 1.2fr 42px; gap: 15px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text); font-size: 13px; }
.settings-form input { width: 100%; accent-color: var(--accent); min-width: 0; cursor: pointer; }
.settings-form output { font-family: var(--font-mono); color: var(--color-info); font-size: 11px; text-align: right; }
.settings-form .primary-button { margin-top: 22px; width: 100%; }
.settings-form .secondary-button { display: block; margin: 12px auto 0; color: var(--muted); font-size: 11px; text-decoration: underline; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--accent); color: var(--accent-ink); padding: 14px 22px; z-index: 10; transition: opacity .2s, transform .2s; text-align: center; max-width: calc(100% - 32px); font-size: 10px; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.noscript-notice { padding: 20px; border: 1px solid var(--color-warning); text-align: center; color: var(--color-warning-text); }

/* Decorative artwork stays independent of the theme and readable content. */
.visual-space { background: #16232a url("../img/colony.svg") 65% 40% / cover; }
.visual-station { background: #14212a url("../img/station.svg") center / cover; }
.visual-ai { background: radial-gradient(ellipse at 54% 60%, #60919c, #203b4a 30%, #101d28 70%); }
.chip { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-24deg); width: 87px; height: 87px; border: 1px solid #90b9c5; box-shadow: 0 0 0 7px #203b4a, 0 0 0 8px #628b9c, 0 0 0 14px #132e3c, 0 0 0 15px #456976, 0 16px 40px #0009; background: repeating-linear-gradient(90deg, transparent 0 9px, #8ac5d118 9px 10px), repeating-linear-gradient(0deg, #173440 0 9px, #8ac5d133 9px 10px); display: grid; place-items: center; }
.chip span { font-family: var(--font-mono); font-size: 16px; color: #cee7f1; border: 1px solid #739baa; padding: 12px; background: #183747; }
.circuit-lines { position: absolute; inset: -50%; background: repeating-linear-gradient(0deg, transparent 0 22px, #7eb9cb38 22px 23px, transparent 23px 27px, #7eb9cb20 27px 28px, transparent 28px 44px); transform: rotate(-24deg); }
.visual-cities { background: linear-gradient(0deg, #203941, #8b9caa 75%, #354e66); }
.city-sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 72% 55%, #edd4a980, transparent 50%); }
.city-buildings { position: absolute; bottom: -3px; left: 7%; width: 18%; height: 85%; transform: skewY(-8deg); background: repeating-linear-gradient(0deg, transparent 0 9px, #111e2b 9px 15px), repeating-linear-gradient(90deg, #9ebdbb58 0 3px, #1b2b36 3px 9px); box-shadow: 0 0 0 2px #263643; }
.city-buildings:nth-of-type(3) { left: 29%; height: 60%; width: 22%; transform: skewY(6deg); }
.city-buildings:nth-of-type(4) { left: 55%; height: 95%; width: 19%; transform: skewY(-6deg); }
.city-buildings:nth-of-type(5) { left: 78%; height: 72%; width: 25%; transform: skewY(8deg); }
.visual-ocean { background: radial-gradient(ellipse at 50% -30%, #94c5d0, #2c6174 35%, #123a4d 70%, #091c2a); }
.ocean-beam { position: absolute; width: 40%; height: 130%; left: 30%; top: -15%; background: linear-gradient(#b3dfe845, transparent); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); }
.submarine { width: 82px; height: 25px; border-radius: 50%; background: linear-gradient(#ddd2a1, #65746a 60%, #253d46); position: absolute; top: 58%; left: 49%; transform: rotate(-8deg); box-shadow: 0 12px 30px #0007; border-top: 1px solid #d5e0db; }
.submarine::before { content: ""; position: absolute; width: 19px; height: 13px; background: #8b9e9e; left: 35px; top: -9px; border-radius: 5px 5px 0 0; }
.submarine::after { content: ""; position: absolute; width: 7px; height: 5px; background: #e5f6ff; right: 10px; top: 8px; box-shadow: 0 0 30px 15px #c3ecff23; border-radius: 50%; }
.ocean-grid { position: absolute; inset: 55% -20% -60%; transform: perspective(200px) rotateX(55deg); background-image: linear-gradient(#6cc0da25 1px, transparent 1px), linear-gradient(90deg, #6cc0da25 1px, transparent 1px); background-size: 35px 35px; }
.visual-culture { background: radial-gradient(ellipse at 50% 70%, #b09364, #574a3e 50%, #222d37); }
.culture-ring { width: 115px; height: 115px; border: 17px solid #c8b284; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotateX(35deg) rotateY(-30deg); border-radius: 50%; box-shadow: 12px 14px 0 #746047, 24px 32px 30px #15170e99; }
.culture-ring::after { content: ""; position: absolute; inset: -28px; border: 1px solid #c3b48f88; border-radius: 50%; }
.visual-energy { background: linear-gradient(#596f85, #c5bc9c 60%, #344855 60%); }
.energy-grid { position: absolute; inset: 60% -20% -80%; transform: perspective(240px) rotateX(45deg); background: repeating-linear-gradient(90deg, transparent 0 44px, #a0b1bb 44px 46px), repeating-linear-gradient(0deg, #173c53 0 27px, #7099ae 27px 30px); box-shadow: 0 -2px 0 #e1ddaa; }
.energy-sun { width: 34px; height: 34px; border-radius: 50%; background: #eee2a5; position: absolute; right: 22%; top: 23%; box-shadow: 0 0 60px 25px #ecdfa735; }
.compact-card .culture-ring { width: 65px; height: 65px; border-width: 10px; }

@media (max-width: 1200px) {
  .site-shell { padding: 0 24px; }
  .dashboard-grid { gap: 18px; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); }
  .filter-tab { font-size: 9px; padding-inline: 5px; }
  .hero-bottom { gap: 14px; }
  .hero-bottom .card-meta { flex: .9; gap: 8px; }
  .hero-bottom .card-meta > span:nth-child(2) { display: none; }
  .hero-content { padding: 22px; }
}
@media (max-width: 1000px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 16px; }
  .hero-content .card-title { font-size: clamp(34px, 4.1vw, 40px); }
  .hero-bottom { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-bottom .card-meta { justify-content: space-between; }
  /* The layout stacks: the photo is a 16:9 band at the top, the text starts over its lower part */
  .hero-card { aspect-ratio: auto; }
  .hero-card .hero-art, .hero-shade { inset: 0 0 auto; height: auto; aspect-ratio: 16 / 9; }
  .hero-shade { background: linear-gradient(0deg, var(--panel), var(--media-overlay-mid) 45%, var(--media-overlay-clear) 90%); }
  .hero-content { padding-top: max(22px, calc(56.25cqi - 150px)); }
  .card-title { font-size: 25px; }
  .card-content { padding: 13px; }
  .compact-card { grid-column: span 3; }
  .compact-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .site-shell { padding: 0 18px; }
  h1 { font-size: 29px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-content .card-title { font-size: clamp(32px, 5.6vw, 40px); }
  .hero-bottom { flex-direction: row; gap: 16px; align-items: center; }
  .hero-bottom .card-meta { justify-content: flex-start; }
  .compact-card { grid-column: span 2; }
  .compact-card:last-child { grid-column: span 2; }
  .card-title { font-size: 28px; }
  .sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #dossiers { grid-row: span 2; }
  .network-status { grid-column: 1 / -1; }
  .method-note { flex-wrap: wrap; }
}
@media (max-width: 540px) {
  .site-shell { padding: 0 14px; }
  /* A long meta wraps to its own line, right-aligned, instead of squeezing the title */
  .panel-heading { flex-wrap: wrap; row-gap: 4px; }
  .panel-heading h2 { flex: 1 0 auto; max-width: 100%; }
  .panel-heading > .mono { margin-left: auto; }
  .icon-button { width: 33px; height: 33px; }
  .icon-button .icon { width: 15px; height: 15px; font-size: 15px; }
  h1 { font-size: clamp(23px, 6.5vw, 33px); }
  .eyebrow { font-size: 9px; }
  .feed-toolbar { flex-wrap: wrap; gap: 8px; }
  .filter-tabs { width: 100%; gap: 4px; }
  .filter-tab { font-size: 10px; padding: 6px 8px; }
  .sort-control { margin-left: auto; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .news-card, .compact-card, .compact-card:last-child, .filtered-grid .news-card { grid-column: 1 / -1; }
  .hero-content { padding: max(21px, calc(56.25cqi - 130px)) 18px 17px; }
  .hero-content .card-kicker { margin-bottom: 28px; }
  .hero-coordinates { display: none; }
  .hero-content .card-title { font-size: clamp(24px, 7.5vw, 32px); }
  .hero-content p { font-size: 12px; margin-bottom: 15px; }
  .hero-bottom { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-bottom .card-meta { justify-content: space-between; font-size: 9px; }
  .card-title { font-size: 31px; }
  .card-content { padding: 16px; }
  .card-content p { font-size: 13px; }
  .card-kicker .category-tag { font-size: 9px; }
  .card-meta { font-size: 10px; }
  .source-button { font-size: 10px; }
  .segment-bar { --segment-size: 9px; }
  .compact-card { flex-direction: row; flex-wrap: wrap; }
  .compact-card .card-visual, .compact-card:last-child .card-visual { width: 82px; height: auto; min-height: 175px; aspect-ratio: auto; border-right: 1px solid var(--line); border-bottom: 0; }
  .compact-card .visual-code, .compact-card .save-button { display: none; }
  .compact-card > .save-button { display: grid; width: 28px; height: 28px; top: 8px; right: auto; left: 7px; }
  .compact-card .card-content { width: calc(100% - 82px); padding: 14px 12px; flex: auto; }
  /* A photo gets a square thumbnail at the top, not a tall strip: a landscape photo would show
     small in a strip, or as a thin slice */
  .compact-card .card-visual.has-photo, .compact-card:last-child .card-visual.has-photo { flex: none; align-self: flex-start; width: 96px; height: auto; min-height: 0; aspect-ratio: 1; margin: 14px 0 0 12px; border: 1px solid var(--line); }
  .compact-card .card-visual.has-photo:not(:has(.media-fit.is-missing)) + .card-content { width: calc(100% - 108px); }
  .compact-card .card-title { font-size: 25px; }
  .compact-card .card-content p { font-size: 11px; }
  .compact-card .card-meta > span:nth-child(2) { display: flex; }
  .compact-card .card-meta, .compact-card .source-button { font-size: 9px; }
  .source-avatar { width: 19px; height: 19px; }
  .method-note p { font-size: 10px; }
  .method-note .text-button { margin-left: 26px; }
  .feed-column, .sidebar { gap: 12px; }
  .sidebar { display: flex; align-items: stretch; }
  #press-summary { order: -1; }
  dialog { padding: 20px; }
  dialog h2 { font-size: 34px; }
  .dialog-top { font-size: 9px; }
  #dialog-body { font-size: 13px; }
  .dialog-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
  .settings-form label { grid-template-columns: 1fr 1fr 35px; gap: 8px; font-size: 11px; }
}
@media (max-width: 370px) {
  .icon-button { width: 28px; height: 32px; }
  .hero-content .card-title { font-size: clamp(24px, 7.5vw, 32px); }
  .compact-card .card-visual, .compact-card:last-child .card-visual { width: 65px; }
  .compact-card .card-content { width: calc(100% - 65px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
button:disabled, input:disabled, select:disabled, [aria-disabled="true"] { color: var(--color-muted); border-color: var(--color-border); background-color: var(--color-surface-elevated); opacity: .58; cursor: not-allowed; box-shadow: none; }
button:disabled:hover, input:disabled:hover, select:disabled:hover, [aria-disabled="true"]:hover { color: var(--color-muted); border-color: var(--color-border); background-color: var(--color-surface-elevated); filter: none; }

/* The brand: the emblem (web/includes/brand_emblem.html) and the metal of the wordmark, for the
 * header, the footer and the account screens alike; each sets the size only */
.brand-emblem {
  display: block;
  height: auto;
  flex: none;
  overflow: visible;
}

/* The glow is for the dark theme: on a light page it would only blur the edges */
[data-theme="light"] .brand-emblem [filter] {
  filter: none;
}

.brand-emblem-ring {
  transform-box: view-box;
  transform-origin: center;
  animation: brand-orbit 80s linear infinite;
}

.brand-emblem-ring-reverse {
  animation-direction: reverse;
  animation-duration: 110s;
}

.brand-emblem-pulse {
  animation: brand-pulse 3.5s ease-in-out infinite;
}

.brand-wordmark {
  background: var(--brand-wordmark-fill);
  background-clip: text;
  -webkit-background-clip: text;
  color: var(--color-text);
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 var(--brand-wordmark-edge));
}

@keyframes brand-orbit {
  to { transform: rotate(360deg); }
}

@keyframes brand-pulse {
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-emblem-ring,
  .brand-emblem-pulse {
    animation: none;
  }
}