*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f4f7fc;
  --surface: #ffffff;
  --blue: #1354c4;
  --blue-dark: #0d3d96;
  --blue-light: #e8effc;
  --text: #0f1923;
  --text-muted: #6b7a95;
  --border: #dce4f0;
  --red: #cc0000;
  --sans: 'Source Sans 3', sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --nav: 'Oswald', sans-serif;
}

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; }
.shell { display: flex; flex-direction: column; height: 100dvh; }

/* ── Header ── */
.header {
  background: #fff;
  border-bottom: 3px solid #111;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 14px 20px 8px;
}

.logo {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1;
  margin-bottom: 4px;
}



@keyframes fadeInOut {
  0%, 15% { opacity: 0; transform: translateY(4px); }
  25%, 75% { opacity: 1; transform: translateY(0); }
  85%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* ── Ticker ── */
.ticker-wrap {
  background: var(--red);
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0;
  flex-shrink: 0;
}
.ticker-track {
  display: inline-block;
  animation: ticker-scroll 60s linear infinite;
  will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { display: inline-block; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: #fff; padding: 0 24px; }
.ticker-sep { color: rgba(255,255,255,0.4); }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ── Categories ── */
.categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  padding: 0 8px;
  overflow: visible;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 2px solid #222;
  position: relative;
}

.pill {
  text-align: center;
  padding: 9px 12px;
  font-size: 0.72rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  color: #555;
  font-family: var(--nav);
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: -2px;
  flex: 1;
  min-width: 0;
}

@media (max-width: 600px) {
  .pill { padding: 8px 4px; font-size: 0.58rem; letter-spacing: 0; min-width: 0; }
  .categories { gap: 0; padding: 0 4px; }
}

.pill.active { color: #cc0000; border-bottom-color: #cc0000; }
.pill:not(.active):hover { color: #222; }

/* World dropdown */
.world-pill-wrap { position: relative; flex: 1; display: flex; }
.world-pill-wrap .pill { width: 100%; }

.world-dropdown {
  display: none;
  flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  position: fixed;
  min-width: 160px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  overflow: hidden;
}
.world-dropdown.visible { display: flex; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  background: transparent;
  text-align: left;
  border-left: 3px solid transparent;
  font-family: var(--sans);
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: var(--blue-light); }
.dropdown-item.active { background: var(--blue-light); border-left-color: var(--blue); color: var(--blue); }
.dropdown-item .item-label { flex: 1; }
.dropdown-item .item-arrow { font-size: 0.7rem; color: var(--text-muted); }

/* ── Search ── */
.search-input {
  width: 100%;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--text);
  background: #fff;
  outline: none;
}
.search-input:focus { border-color: #999; }
.search-input::placeholder { color: #aaa; }
.search-btn {
  flex-shrink: 0;
  background: #222;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  font-family: var(--nav);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.clear-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 5px 8px;
  font-size: 0.7rem;
  color: #aaa;
  cursor: pointer;
  display: none;
}
.clear-btn.visible { display: block; }

/* ── Feed ── */
.feed {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  background: var(--bg);
  padding-bottom: 20px;
}
.feed::-webkit-scrollbar { width: 3px; }
.feed::-webkit-scrollbar-thumb { background: var(--border); }

.last-updated {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: right;
  padding: 4px 18px 2px;
  flex-shrink: 0;
  background: var(--bg);
}

/* ── Article layouts ── */

/* Hero — first article, full width, large image */
.article-hero {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  margin-bottom: 8px;
  animation: fadeUp 0.3s ease both;
  cursor: pointer;
  transition: opacity 0.1s;
}
.article-hero:hover { opacity: 0.92; }

.hero-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background: var(--blue-light);
}

.hero-body {
  padding: 14px 18px 16px;
  border-bottom: 3px solid var(--red);
}

.hero-source {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cc0000;
  margin-bottom: 6px;
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 8px;
}

.hero-desc {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Feature row — 2 cards side by side with images */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 8px;
  margin-bottom: 8px;
}

.article-feature {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
  animation: fadeUp 0.3s ease both;
  cursor: pointer;
  transition: opacity 0.1s;
}
.article-feature:hover { opacity: 0.92; }

.feature-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  background: var(--blue-light);
}

.feature-body { padding: 10px 12px 12px; }

.feature-source {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}

.feature-title {
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--text);
}

/* List items — remaining articles, text only with divider */
.article-list {
  display: flex;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.1s;
  animation: fadeUp 0.3s ease both;
  align-items: flex-start;
  margin-bottom: 2px;
}
.article-list:hover { background: var(--blue-light); }

.list-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--blue-light);
}

.list-body { flex: 1; min-width: 0; }

.list-source {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 3px;
}

.list-title {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 3px;
}

.list-time {
  font-size: 0.62rem;
  color: var(--text-muted);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ── Legislation card layout ── */
.article-leg {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  transition: background 0.1s;
  animation: fadeUp 0.3s ease both;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.article-leg:hover { background: var(--blue-light); border-left-color: var(--blue); }
.article-leg:first-child { border-left-color: var(--red); }

.leg-source {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}

.leg-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 5px;
}

.leg-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.leg-time {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* States */
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; text-align: center; padding: 30px; background: var(--bg); }
.state-icon { font-size: 2.5rem; }
.state-title { font-family: var(--serif); font-size: 1.4rem; color: var(--text); }
.state-sub { font-size: 0.75rem; line-height: 1.6; color: var(--text-muted); max-width: 260px; }
.spinner { width: 28px; height: 28px; border: 2.5px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Extracted inline style attributes (Phase 3, CSP `style-src 'self'`) ──────
   These were `style="…"` attributes on elements in index.html. A strict CSP
   without 'unsafe-inline' blocks inline style attributes, so each moved here
   verbatim. Element-level `element.style.x = …` writes from JS are CSSOM, not
   inline attributes, and are NOT affected by style-src — those stayed in JS. */

/* Load-bearing: the canvas has no intrinsic size. width/height 100% here is
   what gives it dimensions, and app.js reads offsetWidth/offsetHeight to size
   the drawing buffer. This stylesheet MUST stay a render-blocking <link> in
   <head> so layout is resolved before the deferred script runs. Async CSS
   (preload+onload, media=print swap) would yield a silent 0x0 canvas. */
.radar-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.header-inner { position: relative; z-index: 1; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo-grow { flex: 1; }

.header-search-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  max-width: 25%;
}
.header-search-row { display: flex; align-items: center; gap: 6px; }

.powered-by {
  font-size: 0.55rem;
  color: #555;
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.source-link { color: #111; text-decoration: none; font-weight: 700; }

/* Initial state only. app.js toggles visibility via element.style.display,
   which is an inline style set through CSSOM and therefore wins over this
   rule. Do not convert the JS to classList toggling without removing this. */
.is-hidden { display: none; }

/* NOTE: showLoading() in js/app.js sets the same 8px via CSSOM
   (sub.style.marginTop = '8px') for the state box it builds at runtime. This
   class covers the copy that ships in index.html's initial markup. Both are 8px
   today and they can drift independently — change them together. */
.state-sub-spaced { margin-top: 8px; }