:root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bg: #F3F8FC;
    --panel: #FFFFFF;
    --panel-raised: #FFFFFF;
    --line: #DCE7F2;
    --text: #14294B;
    --text-muted: #7188A8;
    --input-bg: #FFFFFF;
    --news: #F2A51A;
    --papers: #438BFA;
    --reviews: #8B42E8;
    --reddit: #EF6262;
    --hardware: #B58B28;
    --saved: #C56DAB;
    --focus: #1B355B;
    --live: #2F9A68;
    --skeleton: #E4EDF6;
    --accent: #1A73E8;
    --accent-soft: rgba(26, 115, 232, 0.12);
  }

  :root[data-theme="dark"] {
    --bg: #0E151B;
    --panel: #14252A;
    --panel-raised: #1D3036;
    --line: #24393A;
    --text: #E9E4D6;
    --text-muted: #839391;
    --input-bg: #0B1516;
    --news: #E8A33D;
    --papers: #6FA8D8;
    --reviews: #C9836B;
    --reddit: #8FB878;
    --hardware: #D9C25C;
    --saved: #E0A5C9;
    --focus: #E9E4D6;
    --live: #6FCF97;
    --skeleton: #1A2C30;
  }

  .card {
    background: var(--panel-raised);
  }

  .filter[data-cat="news"],
.filter[data-cat="papers"],
.filter[data-cat="reviews"],
.filter[data-cat="reddit"],
.filter[data-cat="hardware"],
.filter[data-cat="saved"] {
  color: #000000 !important;
}
#hwToggle {
  color: #000000 !important;
}
#savedToggle {
  color: #000000 !important;
}

  :root[data-theme="light"] {
    --bg: #EEF2F5;
    --panel: #FFFFFF;
    --panel-raised: #FCFDFE;
    --line: #D3D9DF;
    --text: #17212B;
    /* Was #66727D: only 4.35:1 on the --bg surface (footer, clear-filters,
       search hint). #5F6B77 clears AA 4.5:1 on every light surface. */
    --text-muted: #5F6B77;
    --input-bg: #FFFFFF;
    --news: #B9741E;
    --papers: #2A6FA3;
    --reviews: #A55A3F;
    --reddit: #4E7A38;
    --hardware: #8A6D1A;
    --saved: #A94A7D;
    --focus: #1E2624;
    --live: #2F8F5B;
    --skeleton: #DAD6C5;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    background: var(--bg);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(67, 139, 250, 0.07), transparent 30rem),
    radial-gradient(circle at 88% 12%, rgba(139, 66, 232, 0.035), transparent 28rem);
    color: var(--text);
    font-family: var(--font-sans);
    transition: background 0.15s ease, color 0.15s ease;
  }

  ::selection { background: var(--news); color: #14251C; }
  a { color: inherit; }

  .wrap { max-width: 1200px; margin: 0 auto; padding-left: 1.75rem; padding-right: 1.75rem; }

 .mast {
  height: 64px;
  padding: 0;

  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #dadce0;

  box-shadow: none;
  backdrop-filter: blur(12px);
}

.mast-row {
  min-height: 64px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 1rem;
}

.wordmark {
  margin: 0;

  font-family: var(--font-sans);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -1px;

  color: #202124;
}

.wordmark span {
  color: var(--accent);
}

.mast-right {
  display: flex;
  align-items: center;
  gap: 8px;
	}

  .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
  @keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(47, 143, 91, 0.35);
  }
  50% {
    transform: scale(1.35);
    opacity: 0.8;
    box-shadow: 0 0 0 6px rgba(47, 143, 91, 0);
  }
}
  .theme-toggle {
    background: transparent; border: 1px solid var(--line); color: var(--text);
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .theme-toggle:hover { border-color: var(--news); }
  .theme-toggle svg { width: 16px; height: 16px; }

  .tagline { margin: 0.6rem 0 0; color: var(--text-muted); font-size: 1.2rem; max-width: 52ch; color: #303A43;}

  /* --- Latest strip --- */
  .latest {
  margin-left: 220px;
  width: calc(100% - 220px);
  box-sizing: border-box;

  padding: 18px 24px 8px;
  margin-top: 0;

  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
}
  .latest-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; color: var(--text-muted); margin: 0 0 0.6rem; color: #303A43;}
  .latest-card {
    background: var(--panel-raised);
    border: 1px solid var(--line); border-top: 3px solid var(--dot, var(--line));border-radius: 16px;box-shadow: 0 8px 24px rgba(23, 33, 43, 0.10);
    padding: 0.9rem 1.1rem; text-decoration: none; color: var(--text);transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .latest-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.19);
}
  .latest-card .cat { font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.3rem; }
  .latest-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem; font-weight: 650; line-height: 1.4; margin: 0 0 0.35rem; }

  /* --- Controls --- */
  .controls { padding: 1.1rem 0 0; display: flex; flex-direction: column; gap: 0.8rem; }
  .filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    overflow-x: auto;
    white-space: nowrap;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--line);
    font-family: 'Space Grotesk', sans-serif;
  }

  .filter {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-muted);
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5em;
    transition: all 160ms ease;
  }
  .filter:not([aria-pressed="true"]):hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
  }
  .filter[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.28);
}
  .filter[aria-pressed="true"] .swatch {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
  .filter .swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--text-muted)); transition: transform 150ms ease, background 150ms ease; transform: scale(1); }
  .filter[data-cat="news"][aria-pressed="true"] { background: var(--news); }
  .filter[data-cat="papers"][aria-pressed="true"] { background: var(--papers); }
  .filter[data-cat="reviews"][aria-pressed="true"] { background: var(--reviews); }
  .filter[data-cat="reddit"][aria-pressed="true"] { background: var(--reddit); }
  .filter.toggle-hw[aria-pressed="true"] { background: var(--hardware); }
  .filter.toggle-saved[aria-pressed="true"] { background: var(--saved); }
  .filter.toggle-saved:hover:not([aria-pressed="true"]),
.filter.toggle-hw:hover:not([aria-pressed="true"]),
.filter[data-cat]:hover:not([aria-pressed="true"]) {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}
  .filter[aria-pressed="true"] .swatch { background: var(--bg); }
  .divider-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); margin: 0 0.1rem; }

  .row2 { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; align-items: center; padding: 0.5rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(8px); }
  select {
    font-family: 'Space Grotesk', sans-serif; font-size: 1rem; background: var(--input-bg);
    color: var(--text); border: 1px solid var(--line); border-radius: 14px; min-height: 48px; box-shadow: 0 8px 24px rgba(23, 33, 43, 0.12); transition: border-color 180ms ease, box-shadow 180ms ease;
  }
  select { padding: 0.7rem 1rem; cursor: pointer; }

  .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;
  }

  .result-count { font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; color: var(--text-muted); margin: 1rem 0 0; }

  /* --- Card grid --- */
  main { padding: 2.5rem 0 4rem; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; background: rgba(255, 255, 255, 0.28);
border-radius: 22px;
border: 1px solid rgba(211, 217, 223, 0.55);
padding: 1.5rem; }
.card:first-child {
  grid-column: span 2;
  min-height: 420px;
  padding: 1.8rem 2rem 1.6rem;
  border-top: 6px solid var(--accent);
  box-shadow: 0 18px 40px rgba(23, 33, 43, 0.14);
}

@media (min-width: 1100px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .card:first-child {
    grid-column: span 2;
  }
}

@media (min-width: 1400px) {
  .wrap { max-width: 1320px; }
}


  .card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(23, 33, 43, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.4rem 1.15rem;
    min-height: 220px;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(23, 33, 43, 0.13);
  }

  .card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0;
    background: #f3f4f6;
  }
  .card.news { --dot: var(--news); }
  .card.papers { --dot: var(--papers); }
  .card.reviews { --dot: var(--reviews); }
  .card.reddit { --dot: var(--reddit); }
 .card.is-hardware {
  box-shadow: 0 10px 28px rgba(23, 33, 43, 0.14), inset 0 0 0 1px var(--hardware) !important;
}

  .card-meta {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    margin-bottom: 0.45rem;
  }
  .card-meta img.favicon,
  .card-meta img.source-favicon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
  }
  .card-meta .cat-label { color: var(--dot); }

  .card h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 650; font-size: 1.15rem; line-height: 1.32; margin: 0 0 0.7rem; }
  .card:first-child h2 {
  font-size: 1.95rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.card:first-child .card-meta {
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}
.card:first-child p {
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 760px;
}

:root:not([data-theme="light"]) .card:first-child {
}
.card:first-child {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 250, 0.88));
}
.card:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
  .card h2 a { text-decoration: none; }
  .card h2 a:hover { text-decoration: underline; text-decoration-color: var(--dot); }
  .card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }

  .why {
    margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dashed var(--line);
    font-size: 0.86rem; font-style: italic; color: var(--text);
  }
  .why b { font-style: normal; color: var(--dot); font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; display: block; margin-bottom: 0.2rem; }

  .card-actions {
    margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 0.4rem;
  }
  .icon-btn {
    background: transparent; border: 1px solid var(--line); color: var(--text-muted);
    font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem;
    padding: 0.3rem 0.6rem; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; gap: 0.35em;
  }
  .icon-btn:hover { color: var(--text); border-color: #3a5252; }
  .icon-btn.active { color: var(--saved); border-color: var(--saved); }
  .icon-btn.copied { color: var(--live); border-color: var(--live); }

  /* Save toggle: one-shot confirmation so the state change is not conveyed
     by colour alone. Reduced-motion users keep the colour + label change. */
  .save-pulse { animation: save-pulse 1.1s ease-out; }
  @keyframes save-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(197, 109, 171, 0.45); transform: translateY(0); }
    45%  { box-shadow: 0 0 0 7px rgba(197, 109, 171, 0); transform: translateY(-3px); }
    100% { box-shadow: 0 0 0 0 rgba(197, 109, 171, 0); transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) { .save-pulse { animation: none; } }

  /* Share confirmation toast. Injected next to the trigger with role="status"
     and removed after SHARE_FEEDBACK_MS, so it never lingers in the DOM. */
  .card-actions { flex-wrap: wrap; }
  .share-feedback {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    margin-left: 0.5rem;
    box-shadow: 0 8px 20px rgba(23, 33, 43, 0.12);
    animation: share-fade 1.6s ease-out forwards;
    pointer-events: none;
  }
  .share-feedback.is-error { border-color: var(--reddit); }
  @keyframes share-fade {
    0%   { opacity: 1; transform: translateY(0); }
    10%  { opacity: 1; transform: translateY(-3px); }
    90%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-8px); }
  }
  @media (prefers-reduced-motion: reduce) { .share-feedback { animation: none; } }

  /* Filter controls: source + time range, plus a reset that only appears while
     something is actually narrowed down. */
  .clear-filters {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    min-height: 40px;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .clear-filters:hover { color: var(--text); border-color: var(--reddit); }
  .clear-filters[hidden] { display: none !important; }

  .note-box { margin-top: 0.6rem; }
  .note-box textarea {
    width: 100%; min-height: 52px; resize: vertical;
    background: var(--input-bg); color: var(--text); border: 1px solid var(--line);
    border-radius: 6px; font-family: 'Source Serif 4', Georgia, serif; font-size: 0.85rem;
    padding: 0.5rem; outline: none;
  }
  .note-box textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .note-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; color: var(--text-muted); margin: 0 0 0.3rem; }

  .empty { font-family: 'Space Grotesk', sans-serif; color: var(--text-muted); padding: 2rem 0; font-size: 0.9rem; }

  /* --- Loading skeleton --- */
  .skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
  }
  .skeleton-card {
    background: #f3f4f6;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.4rem 1.4rem 1.25rem;
    min-height: 220px;
  }
  .skeleton-card:first-child {
    grid-column: span 2;
    min-height: 400px;
    padding: 2rem;
    border-top-width: 10px;
  }
  .skeleton-line {
    height: 0.7rem;
    background: var(--skeleton);
    border-radius: 4px;
    margin-bottom: 0.6rem;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
  }
  .skeleton-line.short { width: 60%; }
  .skeleton-line.medium { width: 80%; }
  .skeleton-line.full { width: 100%; }
  .skeleton-line:last-child { margin-bottom: 0; }
  @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  @media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } }

  .recent-empty {
    display: none;
    padding: 1.25rem 1.25rem 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(10px);
  }
  :root[data-theme="dark"] .recent-empty {
    background: rgba(22, 37, 42, 0.55);
    border-color: var(--line);
  }
  .recent-empty-label {
    margin: 0 0 0.35rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
  }
  .recent-empty-note {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
  }
  :root[data-theme="dark"] .recent-empty-note {
    color: var(--text-muted);
  }

  /* --- Loading skeleton --- */
  .skeleton-line {
    height: 0.7rem;
    background: var(--skeleton);
    border-radius: 4px;
    margin-bottom: 0.6rem;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
  }
  .skeleton-line.short { width: 60%; }
  .skeleton-line.medium { width: 80%; }
  .skeleton-line.full { width: 100%; }
  .skeleton-line:last-child { margin-bottom: 0; }
  @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
  @media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } }

  /* --- Error banner --- */
  .error-banner {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem;
    background: var(--panel); border: 1px solid var(--reviews); border-radius: 6px;
    padding: 0.6rem 0.9rem; margin-top: 0.75rem; color: var(--text);
    display: none;
  }
  .error-banner.visible { display: block; }

  /* --- Load more --- */
  .load-more-wrap { text-align: center; padding: 1rem 0 0; }
  .load-more {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem;
    background: transparent; border: 1px solid var(--line); color: var(--text-muted);
    border-radius: 999px; padding: 0.5rem 1.5rem; cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .load-more:hover { color: var(--text); border-color: var(--news); }

  footer { border-top: 1px solid var(--line); padding: 1.5rem 0 3rem; color: var(--text-muted); font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; }

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px;
  }

  @media (max-width: 700px) {
  .card:first-child {
    grid-column: span 1; .row2 {
  flex-direction: column;
  align-items: stretch;
}

  }
}
/* =========================================================
   GOOGLE NEWS-INSPIRED UI — STEP 1
   ========================================================= */

:root {
  --bg: #f8f9fa;
  --panel: #ffffff;
  --panel-raised: #ffffff;
  --line: #dadce0;
  --text: #202124;
  --text-muted: #5f6368;
  --input-bg: #ffffff;
  --news: #1a73e8;
  --papers: #9334e6;
  --reviews: #188038;
  --reddit: #ea4335;
  --hardware: #f9ab00;
  --saved: #5f6368;
  --focus: #1a73e8;
  --live: #188038;
  --skeleton: #f1f3f4;
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--font-sans);
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.mast {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px 0;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(12px);
  color: var(--text);
}

.mast-row {
  min-height: 48px;
  align-items: center;
}

.wordmark {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -1.2px;
  color: var(--text);
}

.wordmark span {
  color: var(--accent);
}

.mast > .wrap > .tagline {
  display: none;
}

.mast-right {
  gap: 10px;
}

.status {
  color: var(--text-muted);
  font-size: 12px;
}

.mast-right a {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
}

.mast-right a:hover {
  background: #f1f3f4 !important;
  border-color: #c4c7c5 !important;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
}

.theme-toggle:hover {
  background: #f1f3f4;
  border-color: #c4c7c5;
}

.latest {
  width: calc(100% - 220px) !important;
  margin-left: 220px !important;
  margin-right: 0 !important;
  padding: 20px 24px 4px !important;
  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.latest-label {
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}

.latest-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}

.latest-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(60, 64, 67, .15);
}

.controls {
  padding-top: 18px;
}

.filters {
  justify-content: flex-start;
  padding: 0;
  backdrop-filter: none;
}

.filter {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text-muted);
  box-shadow: none;
  border-radius: 20px;
}

.filter:not([aria-pressed="true"]):hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.filter[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.28);
  text-shadow: none;
}

/* Dark mode */
:root[data-theme="dark"] {
  --bg: #202124;
  --panel: #292a2d;
  --panel-raised: #292a2d;
  --line: #3c4043;
  --text: #e8eaed;
  --text-muted: #bdc1c6;
  --input-bg: #292a2d;
}

:root[data-theme="dark"] .mast {
  background: rgba(32, 33, 36, .96);
  color: var(--text);
}

:root[data-theme="dark"] .wordmark {
  color: var(--text);
}

:root[data-theme="dark"] .mast-right a,
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .filter {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

:root[data-theme="dark"] .filter[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.28);
}

:root[data-theme="dark"] .mast-right a:hover,
:root[data-theme="dark"] .theme-toggle:hover {
  background: #303134 !important;
}

:root[data-theme="dark"] .filter:hover:not([aria-pressed="true"]) {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
}
/* =========================================================
   SIDEBAR — PROFESSIONAL NAVIGATION
   ========================================================= */

.filters {
  position: fixed;
  left: 0;
  top: 78px;
  bottom: 0;

  width: 220px;
  padding: 18px 10px;

  display: flex;
  flex-direction: column;
  gap: 2px;

  z-index: 1000;
}

.sidebar-home {
  margin-bottom: 12px;
}

.sidebar-section {
  margin-top: 18px;
}

.sidebar-heading {
  padding: 7px 14px;

  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;

}

.sidebar-item {
  width: 100%;
  height: 40px;

  display: flex;
  align-items: center;

  margin: 2px 0;
  padding: 0 14px;

  border-radius: 6px !important;

  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;

  box-shadow: none !important;
}

.sidebar-item:hover {
}

.sidebar-item[aria-pressed="true"] {
  position: relative;

  font-weight: 600;
}

.sidebar-item[aria-pressed="true"]::before {
  content: "";

  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;

  width: 3px;

  border-radius: 0 3px 3px 0;
}

.sidebar-icon {
  width: 50px !important;
  height: 50px !important;
  margin-right: 12px !important;
  flex: 0 0 18px !important;

  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.sidebar-item[aria-pressed="true"] .sidebar-icon {
}

.controls,
.result-count,
.error-banner,
main {
  margin-left: 220px;
}
/* =========================================================
   GOOGLE NEWS CONTENT
   ========================================================= */

.controls {
  padding-top: 8px;
}

.row2 {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

select {
  background: #fff;
  border: 1px solid #dadce0;
  box-shadow: none;
  border-radius: 8px;
}

select:hover {
  border-color: #bdc1c6;
}

.result-count {
  color: #5f6368;
  font-size: 13px;
  margin-top: 4px;
}

.grid {
  gap: 0;
}

.card {
  background: #FFFFFF !important;
  border: 1px solid #DCE7F2 !important;
  border-top: 4px solid var(--dot, #DCE7F2) !important;
  border-radius: 14px !important;
  box-shadow: 0 5px 18px rgba(20, 41, 75, 0.055) !important;
  padding: 20px !important;
}

.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 9px 24px rgba(20, 41, 75, 0.09) !important;
  background: #FFFFFF !important;
}

.card h2,
.card h3 {
  font-family: var(--font-sans);
}

.card .title {
  color: #14294B !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px;
}

.card .summary {
  color: #7188A8 !important;
  font-family: var(--font-sans) !important;
  line-height: 1.6 !important;
}

@media (max-width: 800px) {
  .filters {
    width: 180px;
  }

  .controls,
  .result-count,
  .error-banner,
  main {
    margin-left: 180px;
  }

  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mast-right a {
    display: none;
  }

  .status {
    display: none;
  }

  .card {
    grid-template-columns: 1fr;
    padding: 18px 4px;
  }

  .card .card-actions,
  .card .actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: start !important;
    margin-top: 4px;
  }

  .row2 {
    flex-direction: column;
    align-items: stretch;
  }

  select {
    width: 100%;
    min-width: 0;
  }
}
/* =========================================================
   CONTENT WIDTH
   ========================================================= */

.controls,
.result-count,
.error-banner,
main {
  max-width: 1050px;
}

.controls {
  padding-right: 24px;
}

main {
  padding-right: 24px;
}

.grid {
  max-width: 1050px;
}

.card {
  max-width: 1050px;
}
/* =========================================================
   NEWS CARD LAYOUT
   ========================================================= */

.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  column-gap: 28px;
  align-items: start;
  min-height: 150px;
}

.card > * {
  grid-column: 1;
}

.card .card-actions,
.card .actions {
  grid-column: 2;
  grid-row: 1 / span 6;
  justify-self: end;
}

.card h2,
.card h3 {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

.card .summary {
  font-size: 14px;
  line-height: 1.55;
  max-width: 720px;
}

.card .meta {
  font-size: 12px;
  color: #5f6368;
}

.card .why {
  font-size: 13px;
  line-height: 1.45;
  color: #5f6368;
}

@media (max-width: 900px) {
  .card {
    grid-template-columns: 1fr;
  }

  .card .card-actions,
  .card .actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}
/* =========================================================
   ARTICLE COLUMN BALANCE
   ========================================================= */

.card {
  grid-template-columns: minmax(0, 820px) 1fr;
  column-gap: 32px;
}

.card > * {
  max-width: 820px;
}

.card .card-actions,
.card .actions {
  max-width: none;
}

.card-actions {
  justify-self: start !important;
}

@media (max-width: 1100px) {
  .card {
    grid-template-columns: minmax(0, 1fr) 180px;
  }
}
/* =========================================================
   GOOGLE NEWS SIDEBAR POLISH
   ========================================================= */

.filters {
  padding: 16px 10px;
}

.sidebar-home {
  margin-bottom: 8px;
}

.sidebar-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f3f4;
}

.sidebar-heading {
  padding: 6px 12px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}

.sidebar-item {
  min-height: 38px;
  padding: 7px 12px;
  gap: 12px;

  border-radius: 8px !important;

  font-size: 14px;
  font-weight: 500;
}

.sidebar-icon {
  width: 22px;
  font-size: 15px;
  color: #5f6368;
}

/* =========================================================
   SIDEBAR — PROFESSIONAL NAVIGATION
   ========================================================= */

.filters {
  width: 220px;
  padding: 20px 10px;
}

.sidebar-home {
  margin-bottom: 18px;
}

.sidebar-section {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
}

.sidebar-heading {
  padding: 8px 14px 7px;

  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
}

.sidebar-item {
  width: 100%;
  height: 40px;
  min-height: 40px;

  display: flex;
  align-items: center;

  margin: 2px 0;
  padding: 0 14px;

  border-radius: 6px !important;

  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;

  white-space: nowrap;

  box-shadow: none !important;
}

.sidebar-item:hover {
}

.sidebar-item[aria-pressed="true"] {
  font-weight: 600;
}

.sidebar-icon {
  width: 22px;
  margin-right: 4px;

  text-align: center;

  font-size: 14px;
}

.sidebar-item[aria-pressed="true"] .sidebar-icon {
}
/* =========================================================
   GOOGLE NEWS HEADER POLISH
   ========================================================= */

.mast {
  height: 64px;
  padding: 0;
}

.mast > .wrap {
  height: 100%;
}

.mast-row {
  min-height: 64px;
}

.wordmark {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -1px;
}

.mast-right {
  gap: 8px;
}

.mast-right a {
  padding: 7px 12px !important;
  font-size: 13px;
  border-radius: 18px !important;
}

.status {
  padding: 0 4px;
  font-size: 11px;
}

.theme-toggle {
  width: 36px;
  height: 36px;
}
/* =========================================================
   GOOGLE NEWS LATEST STRIP
   ========================================================= */

.latest {
  padding: 18px 0 8px;
}

.latest-label {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.latest-card {
  padding: 14px 16px;
  border-radius: 10px;
  box-shadow: none;
}

.latest-card:hover {
  box-shadow: 0 1px 3px rgba(60,64,67,.12);
  transform: none;
}


/* =========================================================
   CATEGORY COLORS
   ========================================================= */

.card.news .cat-label {
  color: #1a73e8;
}

.card.papers .cat-label {
  color: #9334e6;
}

.card.reviews .cat-label {
  color: #188038;
}

.card.reddit .cat-label {
  color: #ea4335;
}

.card.is-hardware .cat-label {
  color: #f29900;
}

.card-meta > span:nth-child(2) {
  color: #bdc1c6;
}

.card-meta > span:last-child {
  color: #80868b;
}
/* =========================================================
   ARTICLE READING HIERARCHY
   ========================================================= */

.card {
  padding: 24px 8px 26px;
}

.card-meta {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .1px;
}

.card-meta .cat-label {
  font-size: 11px;
  font-weight: 700;
}

.card h2 {
  max-width: 850px;
  margin-bottom: 7px;

  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
}

.card > p {
  max-width: 780px;
  margin-bottom: 10px;

  font-size: 14px;
  line-height: 1.55;
  color: #5f6368;
}

.card .why {
  max-width: 760px;
  margin-top: 8px;

  font-size: 12px;
  line-height: 1.5;
}

.card-actions {
  margin-top: 12px;
}

.card-actions .icon-btn {
  border-color: transparent;
  background: transparent;
  padding: 5px 8px;
}

.card-actions .icon-btn:hover {
  background: #f1f3f4;
  border-color: transparent;
}
/* =========================================================
   SOURCE LINE REFINEMENT
   ========================================================= */

.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;

  margin-bottom: 7px;

  font-size: 11px;
  color: #80868b;
}

.card-meta .cat-label {
  font-weight: 700;
}

.card-meta > span:nth-child(2) {
  color: #dadce0;
}

.card-meta > span:last-child {
  color: #80868b;
}
/* =========================================================
   SECTION HEADING
   ========================================================= */

.section-heading {
  padding: 18px 8px 8px;
  border-bottom: 1px solid #dadce0;
}

.section-heading h2 {
  margin: 0;

  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -.2px;

}
/* =========================================================
   GOOGLE NEWS FOOTER
   ========================================================= */

footer {
  margin-top: 40px;
  padding: 24px 8px 32px;

  border-top: 1px solid var(--line);

  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

footer a {
  color: var(--text-muted);
  text-decoration: none;
}

footer a:hover {
  color: #1a73e8;
  text-decoration: underline;
}
/* =========================================================
   GOOGLE NEWS CONTROLS POLISH
   ========================================================= */

.controls {
  padding-top: 18px;
  padding-bottom: 4px;
}

.row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

select {
  height: 40px;
  padding: 0 34px 0 12px;

  font-family: var(--font-sans);
  font-size: 13px;
  color: #3c4043;

  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
}


/* Result count is live feedback for the source/time/category filters. */
/* =========================================================
   FILTER DROPDOWNS
   ========================================================= */

/* =========================================================
   FILTER CONTROLS
   ========================================================= */

.row2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.row2 select {
  height: 40px;
  min-width: 150px;
  padding: 0 34px 0 14px;

  appearance: none;
  -webkit-appearance: none;

  background-color: #fff;

  background-image:
    linear-gradient(45deg, transparent 50%, #5f6368 50%),
    linear-gradient(135deg, #5f6368 50%, transparent 50%);

  background-position:
    calc(100% - 17px) 17px,
    calc(100% - 12px) 17px;

  background-size: 5px 5px;
  background-repeat: no-repeat;

  border: 1px solid #dadce0;
  border-radius: 20px;

  font-family: var(--font-sans);
  font-size: 13px;
  color: #3c4043;

  outline: none;
}

.row2 select:hover {
  border-color: #bdc1c6;
  background-color: #f8f9fa;
}

.row2 select:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 1px #1a73e8;
}
/* =========================================================
   GOOGLE NEWS ARTICLE POLISH
   ========================================================= */

.card {
  position: relative;
  padding: 20px 8px 22px;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;

  font-family: var(--font-sans);
  font-size: 12px;
  color: #5f6368;
}

.card-meta .cat-label {
  font-weight: 600;
  color: #3c4043;
}

.card h2 {
  margin: 0 0 8px;
  max-width: 820px;

  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.25px;
}

.card h2 a {
  color: #202124;
  text-decoration: none;
}

.card h2 a:hover {
  color: #1a73e8;
  text-decoration: underline;
}

.card > p {
  max-width: 820px;
  margin: 0 0 12px;

  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: #5f6368;
}

.card .why {
  max-width: 760px;
  margin-top: 4px;
  padding-left: 12px;

  border-left: 3px solid #dadce0;

  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #5f6368;
}

.card .why b {
  display: block;
  margin-bottom: 3px;
  color: #3c4043;
  font-size: 12px;
}

.card-actions {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

.card-actions .icon-btn {
  padding: 6px 10px;

  border: 1px solid #dadce0;
  border-radius: 16px;

  background: #fff;
  color: #5f6368;

  font-family: var(--font-sans);
  font-size: 12px;
}

.card-actions .icon-btn:hover {
  background: #f1f3f4;
  color: #202124;
  border-color: #bdc1c6;
}

/* =========================================================
   ARTICLE CARDS — GOOGLE NEWS STYLE
   ========================================================= */

.card {
  position: relative;
  padding: 22px 8px 24px;
  border-bottom: 1px solid #dadce0 !important;
}

.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;

  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.4;
  color: #80868b;
}

.card-meta .cat-label {
  font-weight: 700;
}

.card-meta > span:nth-child(2) {
  color: #dadce0;
}

.card-meta > span:last-child {
  color: #80868b;
}

.card h2 {
  max-width: 850px;
  margin: 0 0 7px;

  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.25px;
}

.card h2 a {
  color: #202124;
  text-decoration: none;
}

.card h2 a:hover {
  color: #1a73e8;
  text-decoration: underline;
}

.card > p {
  max-width: 780px;
  margin: 0 0 10px;

  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: #5f6368;
}

.card .why {
  max-width: 760px;
  margin-top: 8px;
  padding-left: 12px;

  border-left: 3px solid #dadce0;

  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: #5f6368;
}

.card .why b {
  display: block;
  margin-bottom: 3px;

  color: #3c4043;
  font-size: 12px;
}

.card-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.card-actions .icon-btn {
  padding: 5px 8px;

  border: 1px solid transparent;
  border-radius: 16px;

  background: transparent;
  color: #5f6368;

  font-family: var(--font-sans);
  font-size: 12px;
}

.card-actions .icon-btn:hover {
  background: #f1f3f4;
  border-color: transparent;
  color: #202124;
}

.card-actions .save-btn.active {
  background: #e8f0fe;
  border-color: #d2e3fc;
  color: #1967d2;
}
/* FINAL HEADER OVERRIDE */

.mast {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;

  background: #fff !important;
  border-bottom: 1px solid #dadce0 !important;

  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

.mast > .wrap {
  height: 64px !important;
}

.mast-row {
  min-height: 64px !important;
  height: 64px !important;

  align-items: center !important;
}

.wordmark {
  margin: 0 !important;

  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}
/* FINAL HEADER STYLE */

.mast {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  margin: 0 !important;

  background: var(--panel) !important;
  border-bottom: 1px solid var(--line) !important;

  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mast > .wrap {
  height: 64px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.mast-row {
  height: 64px !important;
  min-height: 64px !important;
  align-items: center !important;
}

.wordmark {
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: -1px !important;
}
/* HEADER HORIZONTAL ALIGNMENT */

/* HEADER POSITION */

.mast > .wrap {
  display: block !important;
  width: auto !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}

.mast-row {
  width: 100% !important;
}
/* FINAL CONTENT LAYOUT */

/* Desktop: horizontal nav replaces left sidebar; content expands to full width */
@media (min-width: 801px) {
  .controls {
    margin-left: 0 !important;
    max-width: 1050px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  .result-count {
    margin-left: 0 !important;
    max-width: 1050px !important;
    padding-left: 24px !important;
    box-sizing: border-box !important;
  }

  main {
    margin-left: 0 !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }
}
/* FINAL SIDEBAR */

.filters {
  position: fixed !important;
  left: 0 !important;
  top: 64px !important;
  bottom: 0 !important;

  width: 220px !important;
  padding: 18px 10px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  gap: 2px !important;

  box-sizing: border-box !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
}

.sidebar-home,
.sidebar-section {
  width: 100% !important;
  box-sizing: border-box !important;
}

.sidebar-section {
  margin-top: 18px !important;
}

.sidebar-item {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;

  display: flex !important;
  align-items: center !important;

  margin: 2px 0 !important;
  padding: 0 14px !important;

  border-radius: 6px !important;

  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;

  white-space: nowrap !important;
  box-shadow: none !important;
}

.sidebar-item:hover {
}

.sidebar-item[aria-pressed="true"] {
  font-weight: 600 !important;
}
/* FINAL ARTICLE LIST */

.grid {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.card {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  padding: 22px 20px 24px !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #dadce0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 120ms ease !important;
}

.card:hover {
  background: #f8f9fa !important;
  transform: none !important;
  box-shadow: none !important;
}
/* FINAL HEADLINE TYPOGRAPHY */

font-size: 19px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
letter-spacing: -0.15px !important;

.card h2 a {
  color: #202124 !important;
  text-decoration: none !important;
}

.card h2 a:hover {
  color: #1a73e8 !important;
  text-decoration: underline !important;
}

.card h2 a:hover {
  color: #1a73e8 !important;
  text-decoration: underline !important;
}

.card > p {
  max-width: 680px !important;
  margin: 0 0 12px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #5f6368 !important;
}
/* FINAL ARTICLE METADATA */

.card-meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-bottom: 8px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #80868b !important;
}

.card-meta .cat-label {
  color: #1a73e8 !important;
  font-weight: 600 !important;
}

.card-meta > span:nth-child(2) {
  color: #dadce0 !important;
}

.card-meta > span:last-child {
  color: #80868b !important;
}
/* FINAL ARTICLE ACTIONS */

.card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 14px !important;
}

.card-actions .icon-btn {
  min-height: 32px !important;
  padding: 7px 12px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #5f6368 !important;
  cursor: pointer !important;
}
.card-actions .icon-btn:hover {
  background: #f1f3f4 !important;
  color: #202124 !important;
}

.card-actions .save-btn.active {
  background: #e8f0fe !important;
  border-color: #d2e3fc !important;
  color: #1967d2 !important;
}
/* FINAL LATEST STORIES */

.latest {
  padding: 18px 0 8px !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.latest-label {
  margin-bottom: 10px !important;

  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;

  color: #202124 !important;
}

.latest-card {
  padding: 14px 16px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.latest-card:hover {
  box-shadow: 0 1px 3px rgba(60,64,67,.12) !important;
  transform: none !important;
}
/* HEADER SEARCH POSITION */

.row2 {
  position: relative !important;
}

/* FULL WIDTH CONTENT */

.wrap {
  max-width: none !important;
}

main {
 width: calc(100% - 220px) !important;
  max-width: none !important;
  margin-left: 220px !important;
  box-sizing: border-box !important;
}
.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
/* ALIGN TOP STORIES WITH FEED */

.latest {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.latest-row {
  width: 100% !important;
}
/* ALIGN LATEST WITH MAIN FEED */

.latest {
  margin-left: 220px !important;
  width: calc(100% - 220px) !important;
  box-sizing: border-box !important;
}

.latest > .wrap {
  width: 100% !important;
  max-width: none !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

.latest-row {
  width: 100% !important;
}
/* LATEST INNER WIDTH */

.latest > .wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
/* ALIGN LATEST WITH MAIN FEED */

.latest-wrap {
  width: calc(100% - 220px) !important;
  max-width: none !important;
  margin-left: 220px !important;
  margin-right: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}
/* LATEST STORIES — COMPACT HORIZONTAL STRIP */

.latest-wrap {
  width: calc(100% - 220px) !important;
  max-width: none !important;
  margin-left: 220px !important;
  margin-right: 0 !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.latest {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 0 8px !important;
  box-sizing: border-box !important;
}

.latest-row {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 2px 12px !important;
  scroll-snap-type: x mandatory;
}

.latest-card {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 13px !important;
  background: #FFFFFF !important;
  border: 1px solid #DCE7F2 !important;
  border-top: 3px solid var(--dot, #438BFA) !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 12px rgba(20, 41, 75, 0.05) !important;
}
/* TWO-COLUMN NEWS CARDS */

.card {
  padding: 18px 20px 20px !important;
  border-bottom: 1px solid #dadce0 !important;
}

.card h2 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  margin-bottom: 7px !important;
}

.card > p {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.card-meta {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}
/* SIDEBAR POLISH */

.sidebar-heading {
  padding: 0 14px 6px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  color: #80868b !important;
}

.sidebar-section {
  margin-top: 14px !important;
}

.sidebar-item {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}
/* HEADER POLISH */

.mast-right {
  gap: 8px !important;
}

.mast-right a {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: #3c4043 !important;
  background: #fff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 18px !important;
  padding: 7px 13px !important;
  text-decoration: none !important;
}

.mast-right a:hover {
  background: #f1f3f4 !important;
}

.status {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  color: #5f6368 !important;
}
/* MOBILE LAYOUT */

@media (max-width: 800px) {

  .filters {
    display: none !important;
  }

  main {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .controls,
  .result-count {
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .card {
    width: 100% !important;
    max-width: none !important;
  }

  .latest-wrap {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .latest {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .mast > .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .mast-right a {
    display: none !important;
  }

  .status {
    display: none !important;
  }

}
/* FILTER CONTROLS POLISH */

.controls select {
  height: 40px !important;
  min-height: 40px !important;
  min-width: 170px !important;
  padding: 0 38px 0 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--text) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
}

.controls select:hover {
  background: #fff !important;
  border-color: #bdc1c6 !important;
  box-shadow: 0 1px 3px rgba(60,64,67,.18) !important;
}

.controls select:focus {
  outline: none !important;
  background: #fff !important;
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 1px #1a73e8 !important;
}
.controls .row2 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}
/* ARTICLE SOURCE EMPHASIS */

.card-meta .cat-label {
  color: #1a73e8 !important;
  font-weight: 600 !important;
}

.card-meta span:nth-child(3) {
  color: #3c4043 !important;
  font-weight: 600 !important;
}

.card-meta span:last-child {
  color: #80868b !important;
}
/* ARTICLE ACTIONS */

.card-actions {
  margin-top: 12px !important;
  gap: 2px !important;
}

.card-actions .icon-btn {
  min-height: 32px !important;
  padding: 5px 10px !important;

  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;

  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #5f6368 !important;
}

.card-actions .icon-btn:hover {
  background: #f1f3f4 !important;
  color: #202124 !important;
}

.card-actions .save-btn.active {
  background: #e8f0fe !important;
  color: #1967d2 !important;
}
/* HEADLINE HIERARCHY */

.card h2 {
  font-size: 19px !important;
  line-height: 1.32 !important;
  font-weight: 600 !important;
  letter-spacing: -0.15px !important;
}

.card h2 a {
  color: #202124 !important;
}

.card h2 a:hover {
  color: #1a73e8 !important;
  text-decoration: underline !important;
}

.card > p {
  max-width: 680px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #5f6368 !important;
}
/* LATEST NEWS — FEED STYLE */

.latest-label {
  margin: 0 0 10px !important;
  padding: 0 !important;

  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.latest-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.latest-card:hover {
  box-shadow: none !important;
  transform: none !important;
}
/* TWO-COLUMN GUTTER */

.grid {
  column-gap: 24px !important;
  row-gap: 0 !important;
}

.card {
  border-right: 1px solid transparent !important;
}
/* ARTICLE SPACING */

.card + .card {
  margin-top: 0 !important;
}

.card {
  padding-top: 20px !important;
  padding-bottom: 22px !important;
}

.card-meta {
  margin-bottom: 8px !important;
}

.card-actions {
  margin-top: 12px !important;
}
/* CATEGORY ACCENTS */

.card.news {
  border-left: 3px solid #1a73e8 !important;
}

.card.papers {
  border-left: 3px solid #9334e6 !important;
}

.card.reviews {
  border-left: 3px solid #188038 !important;
}

.card.reddit {
  border-left: 3px solid #ea4335 !important;
}

.card.news .cat-label {
  color: #1a73e8 !important;
}

.card.papers .cat-label {
  color: #9334e6 !important;
}

.card.reviews .cat-label {
  color: #188038 !important;
}

.card.reddit .cat-label {
  color: #ea4335 !important;
}
/* ACTIVE SIDEBAR STATE */

.sidebar-item[aria-pressed="true"] {
  background: #e8f0fe !important;
  color: #1967d2 !important;
  font-weight: 600 !important;
}

.sidebar-item[aria-pressed="true"]:hover {
  background: #dfe7f7 !important;
}

.sidebar-item:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: -2px !important;
}
/* DESKTOP WIDTH SAFETY */

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.mast,
.latest-wrap,
main {
  max-width: 100% !important;
}

.grid {
  min-width: 0 !important;
}

.card {
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

.card h2,
.card > p {
  overflow-wrap: anywhere !important;
}
/* DARK MODE — GOOGLE NEWS FEED */

html[data-theme="dark"] body,
body.dark {
  background: #202124 !important;
  color: #e8eaed !important;
}

html[data-theme="dark"] .mast,
body.dark .mast {
  background: #202124 !important;
  border-bottom-color: #3c4043 !important;
}

html[data-theme="dark"] .wordmark,
body.dark .wordmark {
  color: var(--text) !important;
}

html[data-theme="dark"] .latest,
body.dark .latest,
html[data-theme="dark"] .latest-wrap,
body.dark .latest-wrap {
  background: #202124 !important;
}

html[data-theme="dark"] .card,
body.dark .card,
html[data-theme="dark"] .latest-card,
body.dark .latest-card {
}

html[data-theme="dark"] .card:hover,
body.dark .card:hover {
}

html[data-theme="dark"] .card h2 a,
body.dark .card h2 a {
}

html[data-theme="dark"] .card > p,
body.dark .card > p {
}

html[data-theme="dark"] .card-meta,
body.dark .card-meta {
}

html[data-theme="dark"] .sidebar-item,
body.dark .sidebar-item {
}

html[data-theme="dark"] .sidebar-item:hover,
body.dark .sidebar-item:hover {
}

html[data-theme="dark"] .sidebar-item[aria-pressed="true"],
body.dark .sidebar-item[aria-pressed="true"] {
}

html[data-theme="dark"] .filters,
body.dark .filters {
}

html[data-theme="dark"] .controls select,
body.dark .controls select,
/* Same dark surface for the hidden filter-state selects (end of <body>). */
html[data-theme="dark"] #sourceFilter,
html[data-theme="dark"] #dateFilter {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* SOFTER DARK MODE */

html[data-theme="dark"] body,
body.dark {
  background: #303134 !important;
  color: #e8eaed !important;
}

html[data-theme="dark"] .mast,
body.dark .mast {
  background: var(--panel) !important;
  border-bottom-color: var(--line) !important;
}

html[data-theme="dark"] .filters,
body.dark .filters {
  background: #303134 !important;
}

html[data-theme="dark"] .card,
body.dark .card {
  background: #3c4043 !important;
  color: #e8eaed !important;
  border-bottom-color: #5f6368 !important;
}

html[data-theme="dark"] .card:hover,
body.dark .card:hover {
  background: #45484b !important;
}

html[data-theme="dark"] .card h2 a,
body.dark .card h2 a {
  color: #f1f3f4 !important;
}

html[data-theme="dark"] .card > p,
body.dark .card > p {
  color: #c4c7c5 !important;
}

html[data-theme="dark"] .card-meta,
body.dark .card-meta {
  color: #bdc1c6 !important;
}

html[data-theme="dark"] .latest,
body.dark .latest,
html[data-theme="dark"] .latest-wrap,
body.dark .latest-wrap {
  background: #303134 !important;
}

html[data-theme="dark"] .sidebar-item,
body.dark .sidebar-item {
}

html[data-theme="dark"] .sidebar-item:hover,
body.dark .sidebar-item:hover {
}

html[data-theme="dark"] .sidebar-item[aria-pressed="true"],
body.dark .sidebar-item[aria-pressed="true"] {
}
/* DARK MODE — SAVE & SHARE */

html[data-theme="dark"] .card-actions .icon-btn,
body.dark .card-actions .icon-btn {
  color: #f1f3f4 !important;
}

html[data-theme="dark"] .card-actions .icon-btn:hover,
body.dark .card-actions .icon-btn:hover {
  background: #5f6368 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .card-actions .save-btn.active,
body.dark .card-actions .save-btn.active {
  background: #4a5568 !important;
  color: #ffffff !important;
}
/* DARK MODE — SIDEBAR TEXT */

html[data-theme="dark"] .sidebar-item,
body.dark .sidebar-item,
html[data-theme="dark"] .sidebar-heading,
body.dark .sidebar-heading {
}

html[data-theme="dark"] .sidebar-item:hover,
body.dark .sidebar-item:hover {
}

html[data-theme="dark"] .sidebar-item[aria-pressed="true"],
body.dark .sidebar-item[aria-pressed="true"] {
}

html[data-theme="dark"] .sidebar-home,
body.dark .sidebar-home {
  color: #f1f3f4 !important;
}
/* BRING NEWS FEED CLOSER TO HEADER */

.controls {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.result-count {
  margin-top: 4px !important;
}

main {
  padding-top: 0 !important;
}
/* Hardware cards share the story-card border. The amber left rail is gone.
   box-shadow: none cancels an older inset hardware ring. */

.card.is-hardware {
  position: relative !important;
  box-shadow: none !important;
}

.card.is-hardware::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  background: transparent !important;
}

html[data-theme="dark"] .card.is-hardware,
body.dark .card.is-hardware {
  box-shadow: none !important;
}
/* Main filter bar */
#filters {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: 264px !important;
  height: 100vh !important;
  padding: 14px 10px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  background: var(--panel) !important;
  border-right: 1px solid var(--line) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  z-index: 1200 !important;
  transform: translateX(-100%) !important;
  visibility: hidden !important;
  transition: transform 200ms ease, visibility 0s linear 200ms !important;
}

body.sidebar-open #filters {
  transform: none !important;
  visibility: visible !important;
  transition: transform 200ms ease, visibility 0s !important;
}

#filters .sidebar-home,
#filters .sidebar-section {
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
}

#filters .sidebar-heading {
  display: block !important;
  padding: 10px 14px 5px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  color: var(--text-muted) !important;
}

#filters .sidebar-item {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 2px 0 !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

#filters .sidebar-item:hover {
  background: var(--skeleton) !important;
  border-color: var(--line) !important;
}

#filters .sidebar-item[aria-pressed="true"] {
  background: var(--skeleton) !important;
  border-color: transparent !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#filters .sidebar-item[aria-pressed="true"]:hover {
  background: var(--skeleton) !important;
  border-color: transparent !important;
  color: var(--text) !important;
}

#filters .sidebar-item .sidebar-icon {
  color: inherit;
  stroke: currentColor;
}

#filters .sidebar-item[aria-pressed="true"]::before {
  background-color: var(--focus);
}

#hwToggle,
#savedToggle,
#syncSettingsBtn {
  min-width: 78px !important;
  color: var(--text-muted) !important;
  background: var(--panel) !important;
  border-color: var(--line) !important;
  font-weight: 500 !important;
}

#hwToggle:hover,
#savedToggle:hover,
#syncSettingsBtn:hover,
#digestsNav:hover {
  background: var(--skeleton) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
/* Topic button accents */
#filters .sidebar-section:first-of-type .sidebar-item[data-cat="news"] {
  color: var(--news) !important;
}

#filters .sidebar-section:first-of-type .sidebar-item[data-cat="papers"] {
  color: var(--papers) !important;
}

#filters .sidebar-section:first-of-type .sidebar-item[data-cat="reviews"] {
  color: var(--reviews) !important;
}

#filters .sidebar-section:first-of-type .sidebar-item[data-cat="reddit"] {
  color: var(--reddit) !important;
}

#filters .sidebar-section:first-of-type .sidebar-item:hover {
  background: var(--skeleton) !important;
}
/* RECENTS */
#filters .sidebar-recents {
  margin-top: auto !important;
  padding-top: 9px !important;
  border-top: 1px solid var(--line) !important;
}

#filters .recent-item {
  display: block !important;
  padding: 7px 14px !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 6px !important;
}

#filters .recent-item:hover {
  background: var(--skeleton) !important;
  color: var(--text) !important;
}

/* Empty RECENT group keeps the section intentional instead of leaving a
   bare heading with nothing beneath it. */
#filters .sidebar-recents:has(#recentArticles:empty) .recent-empty {
  display: flex !important;
}

#filters .sidebar-recents:has(#recentArticles:empty)::before {
  content: "";
  position: absolute;
  inset: 0 0 1px 0;
  background: var(--line);
  pointer-events: none;
}

/* =========================================================
   HORIZONTAL NAVIGATION BAR (Desktop)
   Replaces the left sidebar with a clean, compact horizontal nav
   directly under the header — Google News-inspired, not literal.
   ========================================================= */

@media (min-width: 801px) {
  /* Horizontal nav container sits between header and content */
  .top-nav {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 24px;
    background: var(--panel);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: sticky;
    top: 64px;
    z-index: 100;
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .top-nav-section {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
  }

  .top-nav-section+.top-nav-section {
    margin-left: 24px;
  }

  .top-nav-divider {
    width: 1px;
    height: 24px;
    background: var(--line);
    flex-shrink: 0;
    margin: 0 12px;
  }

  .top-nav-label {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 0 12px 0 0;
    margin-right: 4px;
  }

  .top-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 36px;
    min-width: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
    white-space: nowrap;
  }

  .top-nav-item:hover {
    background: var(--skeleton);
    color: var(--text);
  }

  .top-nav-item.active {
    background: var(--skeleton);
    color: var(--text);
    font-weight: 600;
  }

  .top-nav-item.active::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--focus);
    border-radius: 2px;
  }

  .top-nav-item[data-cat]:not([data-cat="all"]) {
    color: var(--text-muted);
  }

  .top-nav-item[data-cat="news"] { color: var(--news); }
  .top-nav-item[data-cat="papers"] { color: var(--papers); }
  .top-nav-item[data-cat="reviews"] { color: var(--reviews); }
  .top-nav-item[data-cat="reddit"] { color: var(--reddit); }

  .top-nav-item .nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .top-nav-section:last-child .top-nav-item {
    margin-right: 0;
  }

  .top-nav-item.active::after {
    left: auto;
    right: 12px;
    transform: none;
  }

  /* Hide drawer-only elements on desktop */
  .sidebar-drawer-head {
    display: none !important;
  }

  .sidebar-backdrop {
    display: none !important;
  }

  #menuToggle {
    display: none !important;
  }

  /* Recent items styling for horizontal nav */
  #recentArticles {
    display: flex;
    gap: 4px;
  }

  #recentArticles .recent-item {
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    height: 28px;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 4px;
    transition: background 150ms ease, color 150ms ease;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

  #recentArticles .recent-item:hover {
    background: var(--skeleton);
    color: var(--text);
  }

  .recent-empty {
    display: none;
  }
}

/* Mobile: keep existing drawer behavior */
@media (max-width: 800px) {
  body.sidebar-open {
    overflow: hidden !important;
  }

  .menu-toggle {
    display: inline-flex !important;
  }

  .sidebar-backdrop {
    display: block !important;
  }

  #filters {
    display: flex !important;
    top: 0 !important;
    width: 264px !important;
    max-width: 84vw !important;
    padding: 14px 10px 18px !important;
    z-index: 1200 !important;

    transform: translateX(-100%) !important;
    visibility: hidden !important;
    box-shadow: none !important;

    transition: transform 200ms ease, visibility 0s linear 200ms !important;
  }

  body.sidebar-open #filters {
    transform: none !important;
    visibility: visible !important;
    box-shadow: 0 8px 28px rgba(15, 23, 32, 0.22) !important;
    transition: transform 200ms ease, visibility 0s !important;
  }

  .sidebar-drawer-head {
    display: flex !important;
  }

  #filters .sidebar-item {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #filters {
    transition: none !important;
  }
}

/* Desktop keeps the same nav in normal flow. Mobile uses #filters as the drawer. */
@media (min-width: 801px) {
  #filters {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
    visibility: visible !important;
    z-index: auto !important;
  }
}

.mast-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  white-space: nowrap;
}

@media (min-width: 801px) {
  #filters .top-nav {
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 4px;
  }
}

@media (max-width: 800px) {
  #filters .top-nav {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    padding: 0;
    position: static;
    overflow: visible;
  }
  #filters .top-nav-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  #filters .top-nav-divider { display: none; }
  #filters .top-nav-label {
    font-family: var(--font-sans, 'Space Grotesk', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 12px 14px 4px;
  }
  #filters .top-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: 500 14px/1 var(--font-sans, 'Space Grotesk', sans-serif);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  #filters .top-nav-item[aria-pressed="true"] {
    background: var(--skeleton);
    font-weight: 600;
  }
  #filters .nav-icon { width: 16px; height: 16px; flex: none; }
  #filters #recentArticles { display: flex; flex-direction: column; }
  #filters .recent-item {
    display: block;
    padding: 8px 14px;
    color: var(--text-muted);
    font-size: 13px;
    text-decoration: none;
  }
}

/* Remove the 220px left margin on desktop since we have horizontal nav now */
@media (min-width: 801px) {
  .controls,
  .result-count,
  .latest-wrap,
  .section-heading {
    margin-left: 0 !important;
    padding-left: 24px !important;
  }

  main {
    margin-left: 0 !important;
    padding-left: 24px !important;
    width: 100% !important;
  }
}

/* MODERN NEWS CARD UI */
.card {
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 16px !important;
  background: var(--card, #fff) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  border-color: rgba(0,0,0,.16) !important;
}

.card h2,
.card h3,
.card h2 a,
.card h3 a,
.card .title {
  letter-spacing: -.015em !important;
  line-height: 1.25 !important;
}

.card .summary {
  color: var(--muted, #667085) !important;
  line-height: 1.55 !important;
}

.card-meta {
  font-size: 12px !important;
  letter-spacing: .01em !important;
}

.card-actions .icon-btn {
  border-radius: 10px !important;
}

@media (max-width: 700px) {
  .card {
    border-radius: 14px !important;
  }
}


/* COMPACT NEWS FEED */
.card {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
}

.card h2,
.card h3,
.card .title {
  margin-top: 3px !important;
  margin-bottom: 8px !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
}

.card .summary {
  margin-top: 4px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.card-meta {
  margin-bottom: 4px !important;
  font-size: 11px !important;
}

.card-actions {
  margin-top: 8px !important;
}


/* MODERN LATEST HEADER */
.latest-wrap {
  padding-top: 10px !important;
  padding-bottom: 4px !important;
}

.latest {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.latest-label {
  margin: 0 0 10px !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
}

.latest-row {
  gap: 8px !important;
}

.latest-card {
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}


/* CONTINUOUS NEWS STREAM */
.latest-wrap {
  padding-top: 4px !important;
  padding-bottom: 0 !important;
}

.latest {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.latest-label {
  margin: 0 0 8px !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

.latest-row {
  gap: 6px !important;
}

.latest-card {
  min-height: 0 !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: none !important;
}

/* Bring the main feed immediately below Latest */
.section-heading {
  margin-top: 0 !important;
  padding: 8px 8px 7px !important;
  border-bottom: 0 !important;
}

/* Remove the visual break between the two sections */
.latest-wrap + .wrap {
  margin-top: 0 !important;
}

/* Compact editorial articles */
.card {
  padding: 14px 8px 15px !important;
  margin-bottom: 4px !important;
  border-radius: 10px !important;
}


/* TIGHT LATEST → NEWS FEED TRANSITION */
.latest-wrap {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.latest {
  padding-bottom: 2px !important;
  margin-bottom: 0 !important;
}

.latest-label {
  margin-bottom: 6px !important;
}

.latest-row {
  margin-bottom: 0 !important;
}

.latest-wrap + .wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.latest-wrap + .wrap .section-heading {
  padding-top: 2px !important;
  margin-top: 0 !important;
}


/* EDITORIAL FEED HEADER */
.section-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  margin-top: 8px !important;
  margin-bottom: 2px !important;
  padding: 10px 8px 8px !important;
  border: 0 !important;
  background: transparent !important;
}

.section-heading h2 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
  color: var(--text) !important;
}

/* EDITORIAL FEED TOOLBAR */
.section-heading {
  min-height: 44px !important;
  margin-top: 14px !important;
  margin-bottom: 2px !important;
  padding: 10px 8px 8px !important;
  border: 0 !important;
  background: transparent !important;
}
.section-heading-main {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 16px !important;
}
.section-heading h2 {
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
  letter-spacing: -.02em !important;
  color: var(--text) !important;
}
.section-heading-meta {
  flex-shrink: 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  color: var(--text-muted) !important;
}
@media (max-width: 700px) {
  .section-heading-main {
    gap: 10px !important;
  }
  .section-heading-meta {
    font-size: 10px !important;
  }
}


/*__SHEET_BREAK__*/

/* Compact the main news feed cards */
.grid {
  gap: 12px !important;
}

.grid .card {
  padding: 12px !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 11px !important;
}

.grid .card .card-meta {
  margin-bottom: 6px !important;
  gap: 5px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.grid .card h3 {
  margin: 0 0 6px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.grid .card p {
  margin: 5px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.grid .card .summary {
  margin-top: 5px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.grid .card .why,
.grid .card .note-box {
  margin-top: 7px !important;
  padding: 7px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}

.grid .card .card-actions {
  margin-top: 7px !important;
  padding-top: 7px !important;
}

.grid .card img {
  max-height: 150px !important;
  object-fit: cover !important;
}
/*__SHEET_BREAK__*/

/* Make Latest Stories visually consistent with the main dashboard */
.latest-wrap {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
}

.latest {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.latest-label {
  margin: 0 1px 6px !important;
}

.latest-label h2 {
  color: var(--text) !important;
}

.latest-label span {
  color: var(--text-muted) !important;
}

.latest-row {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 2px !important;
}

.latest-card {
  box-shadow: none !important;
}

.latest-card:hover {
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

html[data-theme] .latest-card,
html[data-theme] .latest-card:hover {
  background-color: var(--panel-raised) !important;
  border-color: var(--line) !important;
}
/*__SHEET_BREAK__*/

.latest {
  --latest-per-view: 6;
  --latest-gap: 8px;
  --latest-nav-size: 36px;
}

.latest-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 1px 8px !important;
}

.latest-label > h2 {
  margin: 0 !important;
}

/* Card width, snap, and the three-line clamp live in the last sheet. */

.latest-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: 0 0 auto;
}

.latest-nav-btn {
  width: var(--latest-nav-size);
  height: var(--latest-nav-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-raised);
  color: var(--text);
  font: inherit;
  transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
}

.latest-nav-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.latest-nav-btn:hover:not(:disabled) {
  background: var(--skeleton);
  border-color: var(--text-muted);
  color: var(--text);
}

.latest-nav-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.latest-nav-btn:disabled {
  opacity: 0.35;
  color: var(--text-muted);
  cursor: default;
}

@media (min-width: 1440px) {
  .latest { --latest-per-view: 6; }
}

@media (max-width: 1100px) {
  .latest { --latest-per-view: 3; }
}

@media (max-width: 800px) {
  .latest { --latest-per-view: 2; }
  .latest-nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .latest-nav-btn { transition: none !important; }
}
/*__SHEET_BREAK__*/

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.menu-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.menu-toggle:focus-visible,
.sidebar-drawer-close:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 32, 0.45);
  cursor: pointer;
}

.sidebar-drawer-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}

#filters .sidebar-drawer-head .sidebar-heading {
  padding: 0 !important;
}

.sidebar-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.sidebar-drawer-close svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Account sits apart from the content groups; recents stays pinned last. */
#filters .sidebar-account {
  margin-top: 20px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--line) !important;
}

/* An empty RECENT group should not read as an unfinished section. */
#filters .sidebar-recents:has(#recentArticles:empty) {
  display: none !important;
}

@media (max-width: 800px) {
  body.sidebar-open {
    overflow: hidden !important;
  }

  .menu-toggle {
    display: inline-flex !important;
  }

  .sidebar-backdrop {
    display: none !important;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block !important;
  }

  #filters {
    display: flex !important;
    top: 0 !important;
    width: 264px !important;
    max-width: 84vw !important;
    padding: 14px 10px 18px !important;
    z-index: 1200 !important;

    transform: translateX(-100%) !important;
    visibility: hidden !important;
    box-shadow: none !important;

    transition: transform 200ms ease, visibility 0s linear 200ms !important;
  }

  body.sidebar-open #filters {
    transform: none !important;
    visibility: visible !important;
    box-shadow: 0 8px 28px rgba(15, 23, 32, 0.22) !important;
    transition: transform 200ms ease, visibility 0s !important;
  }

  .sidebar-drawer-head {
    display: flex !important;
  }

  #filters .sidebar-item {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #filters {
    transition: none !important;
  }
}
/*__SHEET_BREAK__*/

/* Contextual chips sit under the headline and stay secondary to it.
   The category label above remains the primary, text-based indicator. */
.card .card-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
}

.card .card-chips .chip {
  display: inline-flex;
  align-items: center;

  padding: 2px 8px;

  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.5;
  white-space: nowrap;

  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-muted);
}

.card .card-chips .chip-subject {
  color: var(--papers);
}

/*__SHEET_BREAK__*/

@media (max-width: 800px) {
  /* The drawer used to claim up to 84vw, leaving little of the feed beside it.
     Cap it at a quarter-ish of the viewport (66vw on very small phones) so a
     real slice of the page stays visible while it is open. */
  #filters {
    width: min(240px, 66vw) !important;
    /* The drawer only scrolls vertically; horizontal gestures belong to
       swipe-to-dismiss (see setSidebarOpen) instead of the browser. */
    touch-action: pan-y;
  }

  /* A lighter scrim still marks the drawer as modal but keeps the page behind
     it readable instead of swallowing it. */
  .sidebar-backdrop {
    background: rgba(15, 23, 32, 0.32);
  }

  /* The explicit close affordance gets a comfortable touch target. */
  .sidebar-drawer-close {
    width: 40px;
    height: 40px;
  }

  /* --- News feed: one card column that fills the screen ---
     A feed card is a two-column grid on wide screens — the story on the
     left, a 180px action rail on the right. Below 800px the cards are
     narrow (the feed is a single column there), so that rail was subtracted
     from an already small card and left the headline and summary a ~36px
     text column, breaking them to roughly one word per line. Collapse the
     card to one column; the action buttons already sit under the story
     below 900px, so only the track definition needs overriding. */
  main .grid .card {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  /* The lead card spans two grid tracks on desktop. In the single-column
     mobile feed that span conjures a second, near-empty implicit column and
     squeezes the cards beside it down to a few pixels wide. */
  main .grid .card:first-child {
    grid-column: span 1;
  }

  /* The same minmax(340px, 1fr) floor made the loading skeleton wider than
     a phone screen, which scrolled the whole page sideways while data was
     still arriving. */
  main .skeleton-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  main .skeleton-grid .skeleton-card:first-child {
    grid-column: span 1;
    min-height: 220px;
  }

  /* Give the cards back the room the gutters were taking: .wrap already
     insets the page 16px, so main's own 16px inset only narrowed the feed,
     and the feed frame's 24px inset left a fifth of a 390px screen empty. */
  main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  main .grid {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 700px) {
  /* ~1.5 cards per view: one full, readable card plus a slice of the next as
     a swipe cue, replacing two cramped 175px cards at phone widths. All cards
     remain in the strip — nothing is removed to make it fit. */
  .latest {
    --latest-per-view: 1.5;
  }

  /* Swiping to the end of the strip must not rubber-band the page sideways. */
  .latest-row {
    overscroll-behavior-x: contain;
  }

}
/*__SHEET_BREAK__*/

/* =========================================================
   HEADER SEARCH + UNIFORM PAGE SURFACE
   The search bar moved out of .row2 and now sits in the masthead directly
   beside the Signal wordmark. Placed after #mobile-comfort so it wins ties
   against the older toolbar rules; #a11y-contrast and #focus-visibility
   still follow it and keep owning contrast/focus colours.
   ========================================================= */

.mast-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
}

/* Keep the right-hand controls pinned to the far edge while the search
   hugs the wordmark. The auto margin only absorbs what the search leaves
   over, so the control group stays right-aligned at every width. */
.mast-right {
  margin-left: auto !important;
}


/* ---------- One uniform page background ---------- */

/* The feed used to sit on its own translucent panel — background, border,
   radius and a 24px inset — so the page had two surfaces. Drop the panel:
   the page reads as one background and the cards align with the Latest
   strip and the result count above them. */
.grid {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 8px !important;
}

/* ---------- Feed pulled up under the masthead ---------- */

/* With the source/time/search controls gone, .row2 stays empty until a
   filter is actually reset — it must not leave a band of dead space
   between the header and the first row of content. */
.row2 {
  margin-top: 0 !important;
}

.result-count {
  margin-top: 8px !important;
}

/* Mobile: .wrap already insets the page by 16px, so these extra inner
   paddings only pushed the count, the reset pill, the section heading and
   the Latest strip off the feed's content edge. */
@media (max-width: 800px) {
  .controls,
  .result-count,
  .latest-wrap,
  .section-heading {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------- Phone feed: edge-to-edge posts ---------- */

/* On phones the story feed scrolls like a social timeline — each post uses
   the full width of the screen instead of sitting between gutters. Only the
   feed column widens: the page frame keeps its 16px gutter and the header,
   Latest strip, drawer and every card style stay exactly as they are. */
@media (max-width: 560px) {
  main {
    width: auto !important;
    /* Older mobile rules cap main at 100% of the gutter-inset column, which
       would leave the widened feed short on the right edge. */
    max-width: none !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
}
/*__SHEET_BREAK__*/

/* =========================================================
   ACCESSIBILITY — COLOUR CONTRAST (WCAG 2.1 AA)
   =========================================================
   The Google-News-era rules earlier in this file hardcode light-theme
   greys (#80868b, #dadce0, #5f6368, #303A43) and light-only category
   accents (#1a73e8, #188038 …) that fail AA against the surface they
   actually paint on — as low as 1.24:1 for .tagline in dark mode.
   This block sits late in <head> (only #focus-visibility comes after)
   so it wins ties. Every value below was checked against its real
   background: 4.5:1 minimum for text, 3:1 for control boundaries. */

/* ---------- Light theme: muted & meta text (was 1.37–4.37:1) ---------- */
/* Card meta used #80868b (3.68:1) and its separator span #dadce0 (1.37:1)
   on the white card surface. */
:root:not([data-theme="dark"]) .card-meta { color: #5F6B77 !important; }
:root:not([data-theme="dark"]) .card-meta > span:nth-child(2) { color: #5F6B77 !important; }
:root:not([data-theme="dark"]) .card-meta > span:last-child { color: #5F6B77 !important; }
/* The hardcoded reddit accent #ea4335 is 3.5:1 on white. */
:root:not([data-theme="dark"]) .card.reddit .cat-label { color: #C5221F !important; }

/* ---------- Dark theme: text still carrying its light-theme literal ---------- */
/* .status is pinned to #5f6368 !important by the mobile block (2.37:1);
   .result-count hardcodes it too (2.15:1). */
:root[data-theme="dark"] .status,
:root[data-theme="dark"] .result-count { color: #BDC1C6 !important; }
/* .tagline and .latest-label carry a stray hardcoded #303A43 (1.24:1). */
:root[data-theme="dark"] .tagline,
:root[data-theme="dark"] .latest-label { color: #BDC1C6 !important; }
/* Meta spans: #80868b gives 2.84:1, and the source span's #3c4043 is the
   exact colour of the dark card (invisible). */
:root[data-theme="dark"] .card-meta > span:nth-child(3),
:root[data-theme="dark"] .card-meta > span:last-child { color: #BDC1C6 !important; }
/* Category accents tuned for white cards fail on the #3c4043 dark card
   (reviews #188038 measured 2.08:1). */
:root[data-theme="dark"] .card.news .cat-label { color: #E8A33D !important; }
:root[data-theme="dark"] .card.papers .cat-label { color: #8FBBE8 !important; }
:root[data-theme="dark"] .card.reviews .cat-label { color: #D9A48C !important; }
:root[data-theme="dark"] .card.reddit .cat-label { color: #8FB878 !important; }

/* ---------- Control boundaries: 3:1 non-text contrast (WCAG 1.4.11) ----------
   Input-like controls used --line (#d3d9df light / #3c4043 dark), below
   3:1 against the surfaces they sit on. Pills whose visible text already
   identifies them (.filter, .chip, .latest-nav-btn, drawer close) keep the
   theme token — existing tests assert those reuse --line. */
:root:not([data-theme="dark"]) .controls select,
:root:not([data-theme="dark"]) .row2 select,
/* The hidden filter-state selects get the same compliant boundary colour. */
:root:not([data-theme="dark"]) #sourceFilter,
:root:not([data-theme="dark"]) #dateFilter,
:root:not([data-theme="dark"]) .clear-filters,
:root:not([data-theme="dark"]) .load-more,
:root:not([data-theme="dark"]) .theme-toggle,
:root:not([data-theme="dark"]) .menu-toggle,
:root:not([data-theme="dark"]) .note-box textarea {
  border-color: #75828F !important;
}
:root[data-theme="dark"] .controls select,
:root[data-theme="dark"] .row2 select,
:root[data-theme="dark"] #sourceFilter,
:root[data-theme="dark"] #dateFilter,
:root[data-theme="dark"] .clear-filters,
:root[data-theme="dark"] .load-more,
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .menu-toggle,
:root[data-theme="dark"] .note-box textarea {
  border-color: #80858A !important;
}

/* Keep the hover accents these controls used to flash; their bg/shadow
   hover cues are untouched, but these three relied on border-colour. */
:root:not([data-theme="dark"]) .theme-toggle:hover,
:root:not([data-theme="dark"]) .load-more:hover,
:root[data-theme="dark"] .theme-toggle:hover,
:root[data-theme="dark"] .load-more:hover { border-color: var(--news) !important; }
:root:not([data-theme="dark"]) .clear-filters:hover,
:root[data-theme="dark"] .clear-filters:hover { border-color: var(--reddit) !important; }
/*__SHEET_BREAK__*/

/* Latest Stories was width: calc(100% - 220px), so the strip stopped short of
   the feed. The nav sat in a 1050px white bar and wrapped onto a second row.
   Desktop: one transparent text-and-emoji row, and a full-width Latest strip
   aligned with the feed. Mobile keeps the drawer column. */
@media (min-width: 801px) {
  .controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #filters {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    overflow: visible !important;
  }

  #filters .top-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  #filters .top-nav::-webkit-scrollbar { display: none; }

  #filters .top-nav-section,
  #filters #recentArticles {
    display: contents !important;
  }

  #filters .top-nav-label,
  #filters .top-nav-divider,
  #filters .recent-empty {
    display: none !important;
  }

  #filters .top-nav-item,
  #filters #hwToggle,
  #filters #savedToggle,
  #filters #syncSettingsBtn,
  #filters #digestsNav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    font: 500 14px/1.2 var(--font-sans, 'Space Grotesk', sans-serif) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  #filters .top-nav-item:hover,
  #filters #hwToggle:hover,
  #filters #savedToggle:hover,
  #filters #syncSettingsBtn:hover,
  #filters #digestsNav:hover,
  #filters .top-nav-item.active,
  #filters .top-nav-item[aria-pressed="true"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--text) !important;
  }

  #filters .top-nav-item[aria-pressed="true"] {
    font-weight: 650 !important;
    box-shadow: inset 0 -2px 0 currentColor !important;
  }

  #filters .top-nav-item.active::after { content: none !important; }

  #filters .nav-emoji {
    font-size: 15px;
    line-height: 1;
    flex: none;
  }

  #filters #recentArticles .recent-item {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 160px !important;
    height: auto !important;
    padding: 8px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--text-muted) !important;
    white-space: nowrap !important;
  }

  #filters #recentArticles .recent-item:hover {
    background: transparent !important;
    color: var(--text) !important;
  }

  .wrap.latest-wrap {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  .latest,
  .latest-row {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 800px) {
  #filters .nav-emoji {
    font-size: 16px;
    line-height: 1;
    flex: none;
  }

  #filters #hwToggle,
  #filters #savedToggle,
  #filters #syncSettingsBtn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #filters #hwToggle[aria-pressed="true"],
  #filters #savedToggle[aria-pressed="true"] {
    background: var(--skeleton) !important;
  }
}
/*__SHEET_BREAK__*/

/* Deliberately the last stylesheet in the document: it wins ties against the
   earlier "outline: none" polish rules (`.controls select:focus`,
   `.mast .search-row input`, `#search`) that would otherwise hide the keyboard
   focus ring. !important is required because those rules use it too, and the
   ring colour is the themed token so it reads in both light and dark mode. */

/* Universal fallback: every interactive control gets a solid 2px themed
   ring, so no scattered "outline: none !important" polish rule can silently
   kill keyboard focus. Tuned rules below and .sidebar-item's inset -2px ring
   still win by specificity; this only fills the gaps (card links, save/share
   buttons, nav arrows, menu controls, textarea, [tabindex] targets). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}


.controls select:focus-visible,
.row2 select:focus-visible,
.clear-filters:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* Dark mode repaints these surfaces with its own higher-specificity rules, so
   the light-theme blue focus border is lost there. Re-point it at the token
   instead of touching the light-theme treatment. */
:root[data-theme="dark"] .controls select:focus {
  border-color: var(--focus) !important;
}
/*__SHEET_BREAK__*/

/* One vertical list of horizontal story cards. Text on the left, a fixed
   thumbnail on the right. No image in the feed item means no thumbnail, and
   the text uses the full row. Later than the stacked grid and carousel rules. */
main .grid,
#feed.grid {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

main .grid .card,
#feed .card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: var(--panel, #fff) !important;
  border: 1px solid var(--line, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important;
  grid-column: auto !important;
}

.story-copy {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
}

.story-copy h2,
.story-copy h3 {
  margin: 0 !important;
}

.story-byline {
  margin-top: auto;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.story-thumb {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--skeleton, #eee);
}
/*__SHEET_BREAK__*/

/* Main feed thumbnails are a fixed 100px square. Latest Stories keeps the
   horizontal carousel defined above. */
#feed .story-thumb {
  width: 100px !important;
  height: 100px !important;
  flex: 0 0 100px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  align-self: flex-start !important;
}
/*__SHEET_BREAK__*/

/* Google News hierarchy for the main feed. The lead story is a hero with
   the picture on the left and coverage on the right. Everything after it
   is one full-width row: text on the left, an 80px thumbnail on the right.
   Latest Stories is unchanged. */
.section-heading h2 {
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

main {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#feed.grid,
main .grid {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
}

#feed .card.hero-story {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.15fr) minmax(280px, 0.85fr) !important;
  grid-column: auto !important;
  align-items: start !important;
  gap: 8px 28px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 4px !important;
  padding: 2px 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line, #e8eaed) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#feed .card.hero-story.hero-story-text {
  grid-template-columns: minmax(0, 1fr) !important;
}

#feed .card.hero-story > .hero-media {
  display: block;
  min-width: 0;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#feed .card.hero-story > .hero-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  max-width: none !important;
  min-width: 0;
  gap: 0 !important;
}

#feed .card.hero-story .card-actions,
#feed .card.story-row .card-actions {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: start !important;
}

#feed .hero-thumb {
  display: block;
  width: 100% !important;
  height: 292px !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px;
  background: var(--skeleton, #eee);
}

#feed .hero-story h2 {
  margin: 8px 0 0 !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

#feed .hero-dek {
  margin: 8px 0 0 !important;
  color: var(--text-muted) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

#feed .coverage {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

#feed .coverage-link {
  display: block;
  padding: 8px 0;
  border-top: 1px solid var(--line, #e8eaed);
  color: inherit;
  text-decoration: none;
}

#feed .coverage-link:hover .coverage-title {
  text-decoration: underline;
}

#feed .coverage-title {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

#feed .card.story-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line, #e8eaed) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#feed .story-row .story-copy {
  gap: 4px;
}

#feed .story-row h2 {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

#feed .story-row .story-copy > p,
#feed .story-row .why,
#feed .story-row .card-chips {
  display: none !important;
}

#feed .card.story-row .story-thumb {
  width: 80px !important;
  height: 80px !important;
  flex: 0 0 80px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  align-self: flex-start !important;
}

#feed .source-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
}

#feed .source-name,
#feed .source-time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#feed .source-favicon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 2px;
  object-fit: contain;
}

#feed .source-favicon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--skeleton, #eee);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

#feed .source-favicon-fallback[hidden] {
  display: none !important;
}

#feed .card-actions {
  margin-top: 8px !important;
}

@media (max-width: 800px) {
  #feed .card.hero-story {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  #feed .card.hero-story > .hero-media {
    width: 100% !important;
    max-width: none !important;
  }

  #feed .hero-thumb {
    height: 200px !important;
    max-height: 200px !important;
  }

  #feed .hero-story h2 {
    font-size: 22px !important;
  }
}
/*__SHEET_BREAK__*/

/* Two-column Google News feed. Left is the briefing (hero plus nested
   follow-up rows). Right is Picks for you. Latest Stories is unchanged. */
#feed.grid,
main .grid {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr) !important;
  column-gap: 24px !important;
  row-gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#feed.grid:not(:has(.picks-col)) {
  grid-template-columns: minmax(0, 1fr) !important;
}

#feed .briefing-col,
#feed .picks-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  width: 100%;
  max-width: none;
}

#feed .feed-column-title {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

#feed .briefing-card {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  min-width: 0;
}

#feed .card.hero-story {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.15fr) minmax(200px, 0.85fr) !important;
  gap: 16px 20px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#feed .card.hero-story.hero-story-text {
  grid-template-columns: minmax(0, 1fr) !important;
}

#feed .card > * {
  max-width: none !important;
}

#feed .card.hero-story > .hero-media {
  display: block;
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0;
  max-width: none !important;
}

#feed .card.hero-story > .hero-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0;
  max-width: none !important;
}

#feed .card .card-actions {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: start !important;
  max-width: none !important;
}

#feed .hero-thumb {
  display: block;
  width: 100% !important;
  height: 248px !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px;
  background: var(--skeleton, #eee);
}

#feed .hero-story h2 {
  margin: 6px 0 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

#feed .follow-ups,
#feed .picks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#feed .follow-ups {
  margin-top: 16px;
}

#feed .card.follow-card,
#feed .card.pick-card,
#feed .card.story-row {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#feed .card.follow-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

#feed .card.pick-card,
#feed .card.story-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#feed .card:hover {
  transform: none !important;
}

#feed .follow-card h2,
#feed .pick-card h2,
#feed .story-row h2 {
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

#feed .source-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

#feed .source-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#feed .source-favicon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  border-radius: 2px;
  object-fit: contain;
}

#feed .card-meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 !important;
  margin: 6px 0 0 !important;
  color: #6b7280;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

#feed .card-meta .meta-time,
#feed .card-meta .meta-author,
#feed .card-meta .cat-label {
  font-size: 12px !important;
}

#feed .card-meta .meta-time { order: 1; }
#feed .card-meta .meta-author { order: 2; }
#feed .card-meta .cat-label { order: 3; }

#feed .card-meta .meta-time + .meta-author::before,
#feed .card-meta.has-extra .cat-label::before {
  content: "·";
  margin: 0 6px;
  color: inherit;
  font-weight: 500;
}

:root:not([data-theme="dark"]) #feed .card-meta .meta-time,
:root:not([data-theme="dark"]) #feed .card-meta .meta-author {
  color: #6b7280 !important;
  font-weight: 500 !important;
}

#feed .pick-thumb {
  display: block;
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  align-self: flex-start !important;
  background: var(--skeleton, #eee);
}

#feed .card.story-row .story-thumb {
  width: 80px !important;
  height: 80px !important;
  flex: 0 0 80px !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  align-self: flex-start !important;
}

#feed .story-row .story-copy > p,
#feed .story-row .why,
#feed .pick-card .why,
#feed .follow-card .why {
  display: none !important;
}

:root[data-theme="dark"] #feed .briefing-card,
:root[data-theme="dark"] #feed .card.follow-card,
:root[data-theme="dark"] #feed .card.pick-card,
:root[data-theme="dark"] #feed .card.story-row {
  background: var(--panel, #14252A) !important;
  border-color: var(--line, #24393A) !important;
}

@media (max-width: 800px) {
  #feed.grid,
  main .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #feed .card.hero-story {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  #feed .card.hero-story > .hero-media {
    width: 100% !important;
    max-width: none !important;
  }

  #feed .hero-thumb {
    height: 200px !important;
    max-height: 200px !important;
  }

  #feed .hero-story h2 {
    font-size: 20px !important;
  }
}
/*__SHEET_BREAK__*/

/* Topics, search, sort, and view mode share one scrolling row.
   The featured board sits under the hero and fills the page below Picks. */
#topicBar {
  width: 100%;
  min-width: 0;
  margin: 0 0 8px;
  padding: 3px 0;
  /* Stops the scrolling topic row from widening the page on phones. */
  contain: paint;
}

#topicBar .top-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
  scrollbar-width: none !important;
}

#topicBar .top-nav-section {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(2px, 0.7vw, 18px) !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
}

#topicBar .top-nav-item,
#topicBar .filter {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: max-content !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  font-size: clamp(10px, 1.05vw, 14px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

#topicBar .top-nav-item:hover:not([aria-pressed="true"]),
#topicBar .filter:hover:not([aria-pressed="true"]) {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#topicBar .top-nav-item[aria-pressed="true"],
#topicBar .filter[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.28) !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
}


#feed.grid,
main .grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: none !important;
}

#feed .feed-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
}

#feed .feed-top:not(:has(.picks-col)) {
  grid-template-columns: minmax(0, 1fr) !important;
}

#feed .briefing-col,
#feed .picks-col {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#feed .briefing-card,
#feed .briefing-col .card,
#feed .follow-ups {
  flex: 1 1 auto !important;
}

#feed .briefing-card,
#feed .briefing-col .card,
#feed .picks-col .card,
#feed .briefing-col .story-copy,
#feed .picks-list,
#feed .follow-ups {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#feed .card.hero-story {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
}

#feed .lower-feed {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  min-width: 0;
}

#feed .lower-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

#feed .lower-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
  align-items: stretch !important;
}

#feed .lower-grid > .card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

#feed .lower-grid > .card:only-child {
  grid-column: 1 / -1 !important;
}

#feed .lower-grid .story-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

#feed .card.feature-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#feed .feature-media {
  display: block;
  min-width: 0;
}

#feed .feature-image {
  display: block;
  width: 100% !important;
  height: 240px !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  border-radius: 12px !important;
  background: var(--skeleton, #eee);
}

#feed .feature-card h2 {
  margin: 6px 0 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

#feed .feature-dek {
  margin: 8px 0 0 !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
}

#feed .card.follow-card:hover,
#feed .card.pick-card:hover,
#feed .card.story-row:hover,
#feed .card.feature-card:hover,
#feed .briefing-card:hover {
  box-shadow: 0 10px 24px rgba(23, 33, 43, 0.1) !important;
  transform: translateY(-2px) !important;
}

body.feed-compact #feed .feature-image {
  height: 160px !important;
}

body.feed-compact #feed .feature-dek,
body.feed-compact #feed .hero-dek {
  display: none !important;
}

body.feed-compact #feed .card.feature-card,
body.feed-compact #feed .card.pick-card,
body.feed-compact #feed .card.story-row,
body.feed-compact #feed .card.follow-card {
  padding: 12px !important;
}

:root[data-theme="dark"] #feed .card.feature-card {
  background: var(--panel, #292a2d) !important;
  border-color: var(--line, #3c4043) !important;
}

:root[data-theme="dark"] #feed .feature-dek {
  color: #bdc1c6 !important;
}

:root[data-theme="dark"] #feed .card.follow-card:hover,
:root[data-theme="dark"] #feed .card.pick-card:hover,
:root[data-theme="dark"] #feed .card.story-row:hover,
:root[data-theme="dark"] #feed .card.feature-card:hover,
:root[data-theme="dark"] #feed .briefing-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}


@media (min-width: 801px) {
  .controls {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #topicBar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Every category stays on one line. No horizontal slider. */
  #topicBar .top-nav,
  #topicBar .top-nav-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
  }

  #topicBar .top-nav-section::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }

  #filters {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  #filters .top-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 800px) {
  #feed .feed-top,
  #feed .lower-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #feed .lower-grid > .card:only-child {
    grid-column: auto !important;
  }

}

/* Section wrappers stay transparent so story cards sit on the page
   background. The cards themselves keep their own white surface.
   cols-* keeps a 1- or 2-column section from leaving an empty track. */
#feed .lower-section,
#feed .briefing-fill {
  background: transparent !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

#feed .lower-section {
  padding: 20px !important;
  gap: 0 !important;
}

#feed .lower-section > .feed-column-title {
  margin: 0 0 4px !important;
}

#feed .briefing-fill {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  margin-top: 16px !important;
  padding: 4px 20px !important;
}

#feed .briefing-col > .lower-feed {
  margin-top: 24px;
  width: 100%;
  min-width: 0;
}

#feed .lower-grid,
#feed .lower-grid.cols-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  gap: 0 16px !important;
  width: 100% !important;
  align-items: start !important;
}

#feed .lower-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#feed .lower-grid.cols-1 {
  grid-template-columns: minmax(0, 1fr) !important;
}

#feed .gn-col {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
}

#feed .lower-grid > .gn-col:only-child {
  grid-column: 1 / -1 !important;
}

#feed .gn-col > .card.story-row,
#feed .briefing-fill > .card.story-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#feed .gn-col > .card.story-row:last-child,
#feed .briefing-fill > .card.story-row:last-child {
  border-bottom: 0 !important;
}

#feed .gn-col > .card.story-row:hover,
#feed .briefing-fill > .card.story-row:hover {
  background: rgba(127, 127, 127, 0.06) !important;
  box-shadow: none !important;
  transform: none !important;
}

#feed .card.story-row .story-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 0;
}

#feed .card.story-row .card-actions {
  margin-top: 8px !important;
}

#feed .card.story-row .card-actions .icon-btn {
  min-height: 0 !important;
  padding: 2px 6px !important;
}

#feed .card.story-row h2 {
  margin: 4px 0 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

#feed .card.story-row .source-name {
  font-size: 12px !important;
  font-weight: 700 !important;
}

#feed .card.story-row .source-favicon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

#feed .card.story-row .card-meta {
  margin-top: auto !important;
}

#feed .card.story-row .story-thumb {
  width: 96px !important;
  height: 96px !important;
  flex: 0 0 96px !important;
  max-width: 96px !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  align-self: flex-start !important;
}

:root[data-theme="dark"] #feed .lower-section,
:root[data-theme="dark"] #feed .briefing-fill {
  background: var(--panel, #14252A) !important;
  border-color: var(--line, #24393A) !important;
}

:root[data-theme="dark"] #feed .gn-col > .card.story-row,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row {
  background: transparent !important;
  border-bottom-color: var(--line, #24393A) !important;
}

:root[data-theme="dark"] #feed .card-meta,
:root[data-theme="dark"] #feed .card-meta .meta-time,
:root[data-theme="dark"] #feed .card-meta .meta-author,
:root[data-theme="dark"] #feed .card-meta .cat-label {
  color: #bdc1c6 !important;
}

@media (max-width: 880px) {
  #topicBar .top-nav-section {
    gap: 2px !important;
  }

  #topicBar .top-nav-item,
  #topicBar .filter {
    font-size: 9.5px !important;
  }
}

@media (max-width: 800px) {
  #feed .lower-grid,
  #feed .lower-grid.cols-1,
  #feed .lower-grid.cols-2,
  #feed .lower-grid.cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #feed .lower-grid > .gn-col:only-child {
    grid-column: auto !important;
  }

  /* Phone width cannot show every label at once. Keep one swipeable line
     and hide the scrollbar so it does not draw a slider. */
  #topicBar .top-nav,
  #topicBar .top-nav-section {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  #topicBar .top-nav::-webkit-scrollbar,
  #topicBar .top-nav-section::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
}
/*__SHEET_BREAK__*/

/* Hardware story cards drop the amber left rail.
   Boxed cards use the same 1px #e5e7eb border as every other story card.
   Rows inside a lower section keep that section's divider and a transparent
   left edge. This block is last so it wins over the older accent rules. */
#feed .card.is-hardware::before,
.card.is-hardware::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  background: transparent !important;
}

#feed .card.follow-card.is-hardware,
#feed .card.pick-card.is-hardware,
#feed .card.feature-card.is-hardware {
  border: 1px solid #e5e7eb !important;
}

#feed .card.hero-story.is-hardware {
  border: 0 !important;
}

#feed .gn-col > .card.story-row.is-hardware,
#feed .briefing-fill > .card.story-row.is-hardware {
  border: 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

#feed .gn-col > .card.story-row.is-hardware:last-child,
#feed .briefing-fill > .card.story-row.is-hardware:last-child {
  border-bottom: 0 !important;
}

:root[data-theme="dark"] #feed .card.follow-card.is-hardware,
:root[data-theme="dark"] #feed .card.pick-card.is-hardware,
:root[data-theme="dark"] #feed .card.feature-card.is-hardware,
:root[data-theme="dark"] #feed .card.story-row.is-hardware {
  border-color: var(--line, #24393A) !important;
}

:root[data-theme="dark"] #feed .card.hero-story.is-hardware {
  border: 0 !important;
}

:root[data-theme="dark"] #feed .gn-col > .card.story-row.is-hardware,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row.is-hardware {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line, #24393A) !important;
}

:root[data-theme="dark"] #feed .gn-col > .card.story-row.is-hardware:last-child,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row.is-hardware:last-child {
  border-bottom: 0 !important;
}
/*__SHEET_BREAK__*/

/* Region and language are icon buttons in the far-right cluster, beside the
   theme toggle. The closed control shows only the icon; the native menu
   still lists the full names. */
.locale-controls {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.locale-field {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  color: var(--text, #202124) !important;
}

.locale-icon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.locale-controls select {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: var(--panel, #fff) !important;
  color: transparent !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 16px !important;
  line-height: 34px !important;
  cursor: pointer !important;
}

.locale-controls select option {
  color: #202124 !important;
  background: #fff !important;
  font-size: 14px !important;
}

:root[data-theme="dark"] .locale-field {
  color: var(--text, #e8eaed) !important;
}

:root[data-theme="dark"] .locale-controls select {
  background: var(--panel, #14252A) !important;
  border-color: var(--line, #24393A) !important;
}
/*__SHEET_BREAK__*/

/* Translated labels stay inside the boxes they already occupy. Shrink and
   ellipsis only when a translation is wider than the row; English that fits
   keeps its content size. */
#topicBar .top-nav-item,
#topicBar .filter,
.mast-link,
.latest-label > h2,
#latestCount,
.section-heading h2,
.feed-column-title,
.load-more,
.clear-filters,
.card-actions .icon-btn,
.top-nav-label,
.sidebar-heading,
#status,
.cat-label {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#topicBar .top-nav-item,
#topicBar .filter {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.latest-label > h2,
#latestCount,
.mast-link,
.card-actions .icon-btn,
.latest-card .cat,
.result-count {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.latest-card .cat,
.result-count {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

footer,
.tagline,
.empty,
.error-banner {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

#filters .drawer-categories {
  display: none !important;
}

@media (max-width: 767px) {
  #topicBar {
    display: none !important;
  }

  .mast,
  .mast > .wrap,
  .mast-row {
    height: auto !important;
    min-height: 64px !important;
  }

  .mast-row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    row-gap: 0 !important;
  }

  .mast .search-row {
    display: none !important;
  }

  #filters .drawer-categories {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
  }

  #filters {
    overflow-y: auto !important;
  }
}
/*__SHEET_BREAK__*/

/* Phones keep a compact search icon beside the item count. The same #search
   field stays in the mast on wider screens and opens as a full-width overlay
   below 768px. Region and language keep their native <select> values and
   show a floating card menu instead of the browser list. */
.result-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin-top: 8px !important;
}

.result-meta .result-count {
  margin: 0 !important;
  width: auto !important;
  flex: 0 1 auto !important;
}

.search-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #202124;
  cursor: pointer;
}

.search-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
}

.search-toggle[aria-expanded="true"] {
  background-color: #e0e7ff;
  border-color: #6366f1;
  color: #4338ca;
}

.search-overlay[hidden] {
  display: none !important;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(15, 23, 42, 0.45);
}

.search-overlay-bar {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}


.locale-field {
  width: auto !important;
  height: auto !important;
  min-height: 34px !important;
}

.locale-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border: 1px solid #6366f1 !important;
  background-color: #e0e7ff !important;
  color: #4338ca !important;
  cursor: pointer !important;
  font: inherit !important;
}

.locale-trigger .locale-icon {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 16px !important;
  height: 16px !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

.locale-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
}

.locale-controls select.locale-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.locale-menu {
  position: fixed;
  z-index: 260;
  min-width: 220px;
  max-height: min(320px, 60vh);
  overflow: auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  padding: 6px;
}

.locale-menu[hidden] {
  display: none !important;
}

.locale-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: #202124;
  text-align: left;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
}

.locale-option:hover,
.locale-option:focus {
  background-color: #f3f4f6;
  outline: none;
}

.locale-option.is-selected {
  color: #4338ca;
  font-weight: 600;
}

.locale-option.is-selected:hover,
.locale-option.is-selected:focus {
  background-color: #e0e7ff;
}

.locale-check {
  flex: 0 0 auto;
  width: 1em;
  color: #4338ca;
  font-weight: 700;
}

:root[data-theme="dark"] .search-toggle {
  background: var(--panel, #292a2d);
  border-color: var(--line, #3c4043);
  color: var(--text, #e8eaed);
}

:root[data-theme="dark"] .search-toggle[aria-expanded="true"],
:root[data-theme="dark"] .locale-trigger {
  background-color: #312e81 !important;
  border-color: #818cf8 !important;
  color: #e0e7ff !important;
}

:root[data-theme="dark"] .search-overlay {
  background: rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] .search-overlay-bar,
:root[data-theme="dark"] .locale-menu {
  background: #292a2d;
  border-color: #3c4043;
  color: #e8eaed;
}


:root[data-theme="dark"] .locale-option {
  color: #e8eaed;
}

:root[data-theme="dark"] .locale-option:hover,
:root[data-theme="dark"] .locale-option:focus {
  background-color: #3c4043;
}

:root[data-theme="dark"] .locale-option.is-selected {
  color: #c7d2fe;
}

:root[data-theme="dark"] .locale-option.is-selected:hover,
:root[data-theme="dark"] .locale-option.is-selected:focus {
  background-color: #312e81;
}

:root[data-theme="dark"] .locale-check {
  color: #c7d2fe;
}

@media (max-width: 767px) {
  .search-toggle {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .search-toggle,
  .search-overlay {
    display: none !important;
  }
}
/*__SHEET_BREAK__*/

.error-banner.visible {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.error-banner .error-banner-text {
  flex: 1 1 12rem;
  min-width: 0;
}
.error-banner .retry-feed {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.error-banner .retry-feed:hover {
  border-color: var(--news);
}
/*__SHEET_BREAK__*/

/* Card media keeps a fixed box so a missing or broken image cannot shift
   the 3-column grid. The placeholder is a category icon on #f3f4f6. */
#feed .hero-media {
  display: block !important;
  width: 100% !important;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  background: #f3f4f6 !important;
  box-sizing: border-box !important;
}

#feed .hero-thumb,
#feed .hero-media img {
  display: block !important;
  width: 100% !important;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  object-fit: cover !important;
  background: #f3f4f6 !important;
}

#feed .hero-media .media-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 240px !important;
  min-height: 240px !important;
  object-fit: cover !important;
  background: #f3f4f6 !important;
}

#feed .card.story-row .story-thumb,
#feed .card.story-row .story-media {
  display: block !important;
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  flex: 0 0 96px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  align-self: flex-start !important;
  overflow: hidden !important;
  background: #f3f4f6 !important;
  box-sizing: border-box !important;
}

#feed .pick-thumb,
#feed .pick-card .pick-media {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  flex: 0 0 72px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  align-self: flex-start !important;
  overflow: hidden !important;
  background: #f3f4f6 !important;
  box-sizing: border-box !important;
}

#feed .story-media.media-fallback,
#feed .pick-media.media-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#feed .media-fallback {
  color: #4b5563;
  background: #f3f4f6 !important;
}

#feed .media-fallback[data-category="news"] { color: #1d4ed8; }
#feed .media-fallback[data-category="papers"] { color: #6d28d9; }
#feed .media-fallback[data-category="reviews"] { color: #b45309; }
#feed .media-fallback[data-category="reddit"] { color: #c2410c; }

#feed .media-fallback svg {
  width: 28px;
  height: 28px;
  display: block;
}

#feed .hero-media .media-fallback svg {
  width: 48px;
  height: 48px;
}

@media (max-width: 800px) {
  #feed .hero-media,
  #feed .hero-thumb,
  #feed .hero-media img,
  #feed .hero-media .media-fallback {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    object-fit: cover !important;
  }
}
/*__SHEET_BREAK__*/

/* Phones: the nav is an off-canvas overlay. It must not reserve a column
   or move the mast and the feed when it opens. */
@media (max-width: 800px) {
  .controls,
  .result-count,
  .error-banner,
  .latest-wrap,
  .wrap.latest-wrap,
  .section-heading {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #filters {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    height: 100vh !important;
    width: min(240px, 66vw) !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    visibility: hidden !important;
  }

  body.sidebar-open #filters {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  body.sidebar-open {
    overflow: hidden !important;
  }

  .sidebar-backdrop {
    z-index: 999 !important;
    background: rgba(0, 0, 0, 0.5) !important;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block !important;
  }
}
/*__SHEET_BREAK__*/

/* In-feed and sidebar placeholders. Real AdSense ids replace the
   ca-pub and slot values. The slots are not .card nodes, so feed
   counts stay tied to stories. */
#feed .in-feed-ad,
#feed .sponsor-slot {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
}

#feed .in-feed-ad {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

#feed .sponsor-slot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

#feed .sponsor-slot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#feed .sponsor-title {
  margin: 0;
  color: var(--text, #202124);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

#feed .ad-label {
  flex: none;
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: #9ca3af;
}

#feed .in-feed-ad > .ad-label {
  align-self: flex-end;
}

#feed .in-feed-ad .adsbygoogle,
#feed .sponsor-slot .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 120px;
  background: #f9fafb;
  border-radius: 8px;
}

:root[data-theme="dark"] #feed .in-feed-ad,
:root[data-theme="dark"] #feed .sponsor-slot {
  background: var(--panel, #292a2d);
  border-color: var(--line, #3c4043);
}

:root[data-theme="dark"] #feed .sponsor-title {
  color: var(--text, #e8eaed);
}

:root[data-theme="dark"] #feed .in-feed-ad .adsbygoogle,
:root[data-theme="dark"] #feed .sponsor-slot .adsbygoogle {
  background: rgba(255, 255, 255, 0.04);
}

#feed .in-feed-ad:has([data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"]),
#feed .in-feed-ad:has([data-ad-slot="0000000000"]),
#feed .sponsor-slot:has([data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"]),
#feed .sponsor-slot:has([data-ad-slot="0000000001"]) {
  display: none !important;
}

@media (max-width: 767px) {
  #feed .sponsor-slot {
    display: none !important;
  }

  #feed .picks-col:not(:has(.picks-list)) {
    display: none !important;
  }
}
/*__SHEET_BREAK__*/

.mast,
.mast > .wrap {
  height: auto !important;
  min-height: 0 !important;
}
.wordmark {
  font-size: 22px !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap;
  flex: 0 0 auto;
}
.wordmark span {
  color: var(--accent) !important;
}
.mast > .wrap > .tagline {
  display: block !important;
  margin: 6px 0 2px !important;
  max-width: 68ch !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
:root:not([data-theme="dark"]) .mast > .wrap > .tagline {
  color: #3c4043 !important;
}
@media (max-width: 800px) {
  .wordmark { font-size: 16px !important; }
}
/*__SHEET_BREAK__*/

/* One column. The mast, topic bar, Latest strip, headings, and story
   cards share this left edge. Nested blocks must not add a second inset. */
html,
body {
  overflow-x: clip;
}

.mast > .wrap,
body > .wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

.wrap.latest-wrap,
.latest,
.latest-row,
.controls,
.result-meta,
.result-count,
.section-heading,
.error-banner,
main,
#topicBar,
#topicBar .top-nav,
#filters .top-nav,
footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.latest-label {
  padding-left: 0 !important;
}

main .grid,
#feed.grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#feed .lower-grid,
#feed .lower-grid.cols-1,
#feed .lower-grid.cols-2,
#feed .lower-grid.cols-3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

#feed .lower-grid > .gn-col {
  display: contents !important;
}

#feed .lower-grid > .gn-col > .card,
#feed .lower-grid > .card {
  min-width: 0 !important;
  max-width: none !important;
}

@media (max-width: 768px) {
  .mast > .wrap,
  body > .wrap {
    max-width: 100% !important;
    padding: 0 16px !important;
  }

  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #feed .lower-grid,
  #feed .lower-grid.cols-1,
  #feed .lower-grid.cols-2,
  #feed .lower-grid.cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .card {
    padding: 14px !important;
  }
}
/*__SHEET_BREAK__*/

/* Drawer topic buttons sit outside #topicBar. These beat the later
   transparent nav-row rules so an active topic stays on the accent. */
#filters .filter:hover:not([aria-pressed="true"]) {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#filters .filter[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.28) !important;
  text-decoration: none !important;
}
/*__SHEET_BREAK__*/

/* Later sheets flatten .card. Repeat the base surface here so it wins,
   including on the feed's more specific card types. */
.card,
#feed .card,
main .grid .card,
#feed .card.follow-card,
#feed .card.pick-card,
#feed .card.story-row,
#feed .card.feature-card,
#feed .card.hero-story,
#feed .gn-col > .card.story-row,
#feed .gn-col > .card.story-row:last-child,
#feed .briefing-fill > .card.story-row,
#feed .briefing-fill > .card.story-row:last-child,
#feed .card.follow-card.is-hardware,
#feed .card.pick-card.is-hardware,
#feed .card.feature-card.is-hardware,
#feed .gn-col > .card.story-row.is-hardware,
#feed .gn-col > .card.story-row.is-hardware:last-child,
#feed .briefing-fill > .card.story-row.is-hardware,
#feed .briefing-fill > .card.story-row.is-hardware:last-child,
:root[data-theme="dark"] #feed .card.follow-card,
:root[data-theme="dark"] #feed .card.pick-card,
:root[data-theme="dark"] #feed .card.story-row,
:root[data-theme="dark"] #feed .card.feature-card,
:root[data-theme="dark"] #feed .gn-col > .card.story-row,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row,
:root[data-theme="dark"] #feed .gn-col > .card.story-row.is-hardware,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row.is-hardware {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(23, 33, 43, 0.07) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
  overflow: hidden !important;
}

:root[data-theme="dark"] #feed .card.follow-card,
:root[data-theme="dark"] #feed .card.pick-card,
:root[data-theme="dark"] #feed .card.story-row,
:root[data-theme="dark"] #feed .card.feature-card,
:root[data-theme="dark"] #feed .gn-col > .card.story-row,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row,
:root[data-theme="dark"] #feed .gn-col > .card.story-row.is-hardware,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row.is-hardware,
:root[data-theme="dark"] #feed .card.hero-story {
  background: var(--panel-raised) !important;
}

.card:hover,
#feed .card:hover,
main .grid .card:hover,
#feed .card.follow-card:hover,
#feed .card.pick-card:hover,
#feed .card.story-row:hover,
#feed .card.feature-card:hover,
#feed .card.hero-story:hover,
#feed .gn-col > .card.story-row:hover,
#feed .briefing-fill > .card.story-row:hover,
:root[data-theme="dark"] #feed .card.follow-card:hover,
:root[data-theme="dark"] #feed .card.pick-card:hover,
:root[data-theme="dark"] #feed .card.story-row:hover,
:root[data-theme="dark"] #feed .card.feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 36px rgba(23, 33, 43, 0.13) !important;
}

.card img,
.grid .card img {
  width: 100% !important;
  height: 180px !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 12px 12px 0 0 !important;
  background: #f3f4f6 !important;
}
/*__SHEET_BREAK__*/

/* Later feed sheets reset .card:first-child. The lead story is the hero,
   so the same treatment is repeated here, where it wins. */
#feed .briefing-card > .card.hero-story,
#feed .briefing-card > .card.hero-story.is-hardware {
  grid-column: span 2 !important;
  min-height: 420px !important;
  padding: 2rem 2.2rem !important;
  border-top: 6px solid var(--accent) !important;
  box-shadow: 0 18px 40px rgba(23, 33, 43, 0.14) !important;
}

#feed .briefing-card > .card.hero-story h2 {
  font-size: 1.95rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

#feed .briefing-card > .card.hero-story .card-meta,
#feed .briefing-card > .card.hero-story .card-meta .meta-time,
#feed .briefing-card > .card.hero-story .card-meta .meta-author,
#feed .briefing-card > .card.hero-story .card-meta .cat-label {
  font-size: 0.85rem !important;
}

#feed .briefing-card > .card.hero-story .card-meta {
  margin-bottom: 0.8rem !important;
}

#feed .hero-media,
#feed .hero-thumb,
#feed .hero-media img,
#feed .hero-media .media-fallback {
  width: 100% !important;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  object-fit: cover !important;
}
/*__SHEET_BREAK__*/

/* #feed stays a column (briefing, then sections). The card grid is
   .lower-grid. Wide screens lock it to three tracks and let each
   section's first card span two. The page measure caps at 1320px. */
@media (min-width: 1100px) {
  #feed .lower-grid,
  #feed .lower-grid.cols-1,
  #feed .lower-grid.cols-2,
  #feed .lower-grid.cols-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
  }

  #feed .lower-grid .card:first-child {
    grid-column: span 2 !important;
  }
}

@media (min-width: 1400px) {
  .wrap,
  .mast > .wrap,
  body > .wrap {
    max-width: 1320px !important;
  }
}
/*__SHEET_BREAK__*/

/* Desktop #filters is the bar. The phone drawer keeps its own column. */
@media (min-width: 801px) {
  #filters {
    display: flex !important;
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    align-items: center !important;
    padding: 0.4rem 0.6rem !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid var(--line) !important;
    box-sizing: border-box !important;
  }

  :root[data-theme="dark"] #filters {
    background: rgba(41, 42, 45, 0.72) !important;
  }
}

@media (max-width: 800px) {
  #filters {
    border: 0 !important;
    border-radius: 0 !important;
  }
}

#topicBar .filter,
#topicBar .filter[aria-pressed="true"],
#filters .filter,
#filters .filter[aria-pressed="true"] {
  padding: 0.45rem 0.95rem !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  transition: all 160ms ease !important;
}

#topicBar .filter:not([aria-pressed="true"]):hover,
#filters .filter:not([aria-pressed="true"]):hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: transparent !important;
}
/*__SHEET_BREAK__*/

/* Story-row surface rules include :last-child and .is-hardware, which
   outrank the shared .card:hover shadow. Repeat the lift at that
   specificity so a hovered card actually leaves the soft resting shadow.
   The hero keeps its own heavier shadow. */
#feed .gn-col > .card.story-row:hover,
#feed .gn-col > .card.story-row:last-child:hover,
#feed .gn-col > .card.story-row.is-hardware:hover,
#feed .gn-col > .card.story-row.is-hardware:last-child:hover,
#feed .briefing-fill > .card.story-row:hover,
#feed .briefing-fill > .card.story-row:last-child:hover,
#feed .briefing-fill > .card.story-row.is-hardware:hover,
#feed .briefing-fill > .card.story-row.is-hardware:last-child:hover,
#feed .card.follow-card:hover,
#feed .card.follow-card.is-hardware:hover,
#feed .card.pick-card:hover,
#feed .card.pick-card.is-hardware:hover,
:root[data-theme="dark"] #feed .gn-col > .card.story-row:hover,
:root[data-theme="dark"] #feed .gn-col > .card.story-row.is-hardware:hover,
:root[data-theme="dark"] #feed .gn-col > .card.story-row.is-hardware:last-child:hover,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row:hover,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row.is-hardware:hover,
:root[data-theme="dark"] #feed .briefing-fill > .card.story-row.is-hardware:last-child:hover,
:root[data-theme="dark"] #feed .card.follow-card:hover,
:root[data-theme="dark"] #feed .card.pick-card:hover,
:root[data-theme="dark"] #feed .card.follow-card.is-hardware:hover,
:root[data-theme="dark"] #feed .card.pick-card.is-hardware:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 36px rgba(23, 33, 43, 0.13) !important;
}

/* page-align's auto-fill grid is later than the older max-width:800px
   one-column rules, so 769–800px still fit two 320px tracks. This sheet
   is last, so phones stay one column and the hero cannot span a second
   implicit track. */
@media (max-width: 800px) {
  #feed.grid,
  main .grid,
  #feed .feed-top,
  #feed .feed-top:not(:has(.picks-col)),
  #feed .lower-grid,
  #feed .lower-grid.cols-1,
  #feed .lower-grid.cols-2,
  #feed .lower-grid.cols-3,
  main .skeleton-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #feed .lower-grid .card:first-child,
  #feed .lower-grid > .gn-col:only-child,
  #feed .lower-grid > .card:only-child,
  #feed .briefing-card > .card.hero-story,
  #feed .briefing-card > .card.hero-story.is-hardware,
  main .grid .card:first-child,
  main .skeleton-grid .skeleton-card:first-child {
    grid-column: auto !important;
  }

  main .skeleton-grid .skeleton-card:first-child {
    min-height: 220px !important;
  }

  #feed .card.hero-story,
  #feed .briefing-card > .card.hero-story,
  #feed .briefing-card > .card.hero-story.is-hardware {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    padding: 1rem 1.1rem !important;
  }

  #feed .briefing-card > .card.hero-story h2,
  #feed .hero-story h2 {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
  }
}
/*__SHEET_BREAK__*/

/* Desktop topic row and the library row stay one line. Short labels fit;
   overflow scrolls instead of wrapping onto a second row. The phone drawer
   stays a vertical column. Pressed pills keep the accent fill from the
   earlier filter rules. */
@media (min-width: 801px) {
  .filters,
  #filters {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
  }

  #filters .top-nav,
  #topicBar,
  #topicBar .top-nav,
  #topicBar .top-nav-section {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: thin !important;
  }

  #topicBar .filter,
  #topicBar .top-nav-item,
  #filters .top-nav-item,
  #filters #hwToggle,
  #filters #savedToggle,
  #filters #digestsNav {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* Hardware and Saved now sit in the topic row. This shell is only the
     phone drawer, so it must not leave a second bar on desktop. */
  #filters {
    display: none !important;
  }
}

@media (max-width: 800px) {
  #filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
  }

  #topicBar,
  #topicBar .top-nav,
  #topicBar .top-nav-section {
    flex-wrap: wrap !important;
    overflow: visible !important;
    white-space: normal !important;
    justify-content: flex-start !important;
  }
}
/*__SHEET_BREAK__*/

/* Regular cards. The hero keeps its larger meta, and row/pick thumbs keep
   their own size. Favicons live in .source-line, not .card-meta. */
#feed .card-meta,
#feed .card.story-row .card-meta,
#feed .card.follow-card .card-meta,
#feed .card.pick-card .card-meta,
#feed .card.feature-card .card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 0.78rem !important;
  margin-bottom: 0.45rem !important;
}

#feed .card-meta .meta-time,
#feed .card-meta .meta-author,
#feed .card-meta .cat-label,
#feed .card.story-row .card-meta .meta-time,
#feed .card.story-row .card-meta .meta-author,
#feed .card.story-row .card-meta .cat-label {
  font-size: 0.78rem !important;
}

#feed .briefing-card > .card.hero-story .card-meta,
#feed .briefing-card > .card.hero-story .card-meta .meta-time,
#feed .briefing-card > .card.hero-story .card-meta .meta-author,
#feed .briefing-card > .card.hero-story .card-meta .cat-label {
  font-size: 0.85rem !important;
  margin-bottom: 0.8rem !important;
}

.card-meta img.favicon,
.card-meta img.source-favicon,
#feed .source-favicon,
#feed .card.story-row .source-favicon,
#feed .card.pick-card .source-favicon {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px !important;
  border-radius: 3px !important;
  object-fit: contain !important;
}

#feed .card h2,
#feed .card h2 a,
#feed .card.story-row h2,
#feed .card.story-row h2 a,
#feed .card.follow-card h2,
#feed .card.follow-card h2 a,
#feed .card.pick-card h2,
#feed .card.pick-card h2 a,
#feed .card.feature-card h2,
#feed .gn-col > .card.story-row h2,
#feed .briefing-fill > .card.story-row h2 {
  font-size: 1.15rem !important;
  line-height: 1.32 !important;
  font-weight: 650 !important;
}

.card:first-child h2,
#feed .briefing-card > .card:first-child h2,
#feed .briefing-card > .card.hero-story h2,
#feed .briefing-card > .card.hero-story h2 a {
  font-size: 1.95rem !important;
  line-height: 1.25 !important;
}

.skeleton-card,
main .skeleton-grid .skeleton-card {
  background: #f3f4f6 !important;
  border-radius: 16px !important;
}

:root[data-theme="dark"] .skeleton-card,
:root[data-theme="dark"] main .skeleton-grid .skeleton-card,
:root[data-theme="dark"] .card img,
:root[data-theme="dark"] .grid .card img {
  background: var(--skeleton) !important;
}

@media (max-width: 800px) {
  #feed .briefing-card > .card.hero-story h2,
  #feed .briefing-card > .card.hero-story h2 a,
  #feed .hero-story h2 {
    font-size: 1.45rem !important;
    line-height: 1.25 !important;
  }
}
/*__SHEET_BREAK__*/

/* Internal padding only. Later feed sheets had zeroed the side inset, so
   titles sat on the card edge. These selectors are last and more specific,
   and they do not change width, grid tracks, or outer margins. */
.card,
#feed .card,
.grid .card,
main .grid .card,
#feed .card.follow-card,
#feed .card.pick-card,
#feed .card.story-row,
#feed .card.feature-card,
#feed .gn-col > .card.story-row,
#feed .gn-col > .card.story-row:last-child,
#feed .briefing-fill > .card.story-row,
#feed .briefing-fill > .card.story-row:last-child,
#feed .gn-col > .card.story-row.is-hardware,
#feed .gn-col > .card.story-row.is-hardware:last-child,
#feed .briefing-fill > .card.story-row.is-hardware,
#feed .briefing-fill > .card.story-row.is-hardware:last-child,
body.feed-compact #feed .card.follow-card,
body.feed-compact #feed .card.pick-card,
body.feed-compact #feed .card.story-row,
body.feed-compact #feed .card.feature-card,
body.feed-compact #feed .gn-col > .card.story-row,
body.feed-compact #feed .briefing-fill > .card.story-row {
  padding: 1.25rem 1.4rem 1.15rem !important;
}

.card:first-child,
main .grid .card:first-child,
#feed .briefing-card > .card.hero-story,
#feed .briefing-card > .card.hero-story.is-hardware {
  padding: 1.8rem 2rem 1.6rem !important;
}

@media (max-width: 800px) {
  #feed .card.hero-story,
  #feed .briefing-card > .card.hero-story,
  #feed .briefing-card > .card.hero-story.is-hardware,
  main .grid .card:first-child {
    padding: 1.8rem 2rem 1.6rem !important;
  }
}

.latest-card,
#latestRow .latest-card {
  padding: 0.9rem 1.1rem !important;
}

/* Copy and actions stay inside the card padding. Media stays in flow so a
   thumbnail cannot pull the text back to the border. */
#feed .card .story-copy,
#feed .card .hero-copy,
#feed .card .source-line,
#feed .card .card-meta,
#feed .card h2,
#feed .card p,
#feed .card .hero-dek,
#feed .card .card-actions,
.latest-card .cat,
.latest-card h3 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#feed .card > .hero-media,
#feed .card > .story-thumb,
#feed .card > .story-media,
#feed .card > .pick-thumb,
#feed .card > .pick-media,
#feed .card > .feature-media,
#feed .card > img,
#feed .card > .hero-media img {
  margin: 0 !important;
}
/*__SHEET_BREAK__*/

/* Wide screens used to stretch each section's first card across two
   tracks, which left a long card and an empty column. That lead is now
   two equal cards, and the three-column rows continue under it. */
@media (min-width: 801px) {
  #feed .lower-grid.pair-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  #feed .lower-grid.cols-3 {
    align-items: stretch !important;
  }

  #feed .lower-grid.pair-row > .card,
  #feed .lower-grid.cols-3 > .card,
  #feed .lower-grid .card:first-child,
  #feed .lower-grid > .card:only-child,
  #feed .lower-grid > .gn-col:only-child {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  #feed .lower-grid.pair-row > .card.story-row,
  #feed .lower-grid.cols-3 > .card.story-row {
    height: 100% !important;
    align-self: stretch !important;
  }

  #feed .lower-section > .lower-grid + .lower-grid {
    margin-top: 1.25rem !important;
  }
}

@media (max-width: 800px) {
  #feed .lower-grid.pair-row,
  #feed .lower-grid.cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #feed .lower-grid.pair-row > .card,
  #feed .lower-grid.cols-3 > .card,
  #feed .lower-grid .card:first-child,
  #feed .lower-grid > .card:only-child {
    grid-column: auto !important;
  }
}

/* Failed story photos hide. The replacement box matches the photo height,
   stays light gray, and shows the source favicon instead of a broken icon. */
#feed .hero-media .media-fallback .media-fallback-mark,
#feed .story-media.media-fallback .media-fallback-mark,
#feed .pick-media.media-fallback .media-fallback-mark {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  flex: 0 0 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background: transparent !important;
  display: block !important;
}

#feed .hero-media .media-fallback .media-fallback-mark {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  flex: 0 0 48px !important;
}

#feed .media-fallback .media-fallback-mark[hidden] {
  display: none !important;
}

/* The feed wrappers are not a second white panel. Cards keep #card-surface. */
#feed.grid,
main .grid,
#feed .lower-section,
#feed .briefing-fill,
#feed .briefing-card {
  background: transparent !important;
}
/*__SHEET_BREAK__*/

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}
.footer-legal a {
  font-weight: 600;
}
.cookie-banner {
  position: fixed;
  z-index: 800;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 16px 18px;
  box-sizing: border-box;
  background: var(--panel, #ffffff);
  color: var(--text, #202124);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(23, 33, 43, 0.14);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner p { margin: 0; }
.cookie-banner-title {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cookie-banner-copy {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted, #5f6368);
}
.cookie-banner-copy a { color: #1a73e8; }
.cookie-banner-actions {
  display: flex;
  flex: none;
  gap: 8px;
}
.cookie-banner button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font: 600 13px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.cookie-banner .cookie-essential {
  background: transparent;
  color: inherit;
  border: 1px solid var(--line, #dadce0);
}
.cookie-banner .cookie-accept {
  background: #185abc;
  color: #ffffff;
  border: 1px solid #185abc;
}
.cookie-banner button:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions button { flex: 1; }
}
.newsletter-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  width: 100%;
  max-width: 100%;
  margin: 8px auto 12px;
  padding: 10px 16px;
  box-sizing: border-box;
  background: #3a3f45 !important;
  color: #f3f4f6 !important;
  border: 0;
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
}
.newsletter-card h2 {
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #f3f4f6;
}
.newsletter-note {
  flex: 1 0 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #5f6368);
}
.newsletter-embed {
  position: relative;
  flex: 1 1 280px;
  width: 100%;
  max-width: 600px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  background: #3a3f45;
}
.newsletter-embed iframe {
  display: block;
  width: 100%;
  max-width: none;
  height: 70px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
}
/* The beehiiv document paints its own green border and button, and leaves
   the button label empty. This rim and face sit on top of those pixels.
   pointer-events stay off so the email field and submit control still work. */
.newsletter-embed::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(100% - 100px);
  box-sizing: border-box;
  border: 3px solid #3a3f45;
  border-radius: 6px 0 0 6px;
  pointer-events: none;
}
.newsletter-subscribe {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 100px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #3a3f45;
  color: #f3f4f6;
  border-radius: 0 6px 6px 0;
  font: 600 14px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  user-select: none;
}
.newsletter-card .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;
}
.newsletter-row { display: flex; gap: 8px; }
.newsletter-card input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line, #dadce0);
  border-radius: 999px;
  background: var(--input-bg, #ffffff);
  color: inherit;
  font: 500 14px/1 Inter, ui-sans-serif, system-ui, sans-serif;
}
.newsletter-card button {
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #3a3f45;
  color: #f3f4f6;
  font: 600 14px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.newsletter-card button:focus-visible,
.newsletter-card input:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}
.newsletter-archive { margin: 12px 0 0; font-size: 13px; }
.newsletter-archive a { color: #185abc; font-weight: 600; }
:root[data-theme="dark"] .newsletter-archive a { color: #8ab4f8; }
.newsletter-trust,
.newsletter-error { margin: 8px 0 0; font-size: 12px; }
.newsletter-trust { color: var(--text-muted, #5f6368); }
.newsletter-error { color: #d93025; }
:root[data-theme="dark"] .newsletter-error { color: #f28b82; }
.newsletter-success { margin: 0; font-size: 16px; font-weight: 600; }
.newsletter-card.is-done .newsletter-fields { display: none; }
@media (max-width: 640px) {
  .newsletter-row { flex-direction: column; }
  .newsletter-card button { width: 100%; }
}
.footer-contact { margin: 0 0 10px; }
.footer-contact a { font-weight: 600; }
.footer-copy { margin: 12px 0 0; font-size: 12px; }
/*__SHEET_BREAK__*/

/* Phones only. Plain .card rules lose to later !important sheets, so the
   same values are repeated on the story-card selectors that win. */
@media (max-width: 800px) {
  .grid .card,
  .card {
    min-height: auto;
    padding: 0.9rem 1rem;
  }
  .grid .card img,
  .card img {
    height: 120px;
    max-height: 120px;
  }
  .card h2 {
    font-size: 1rem;
    line-height: 1.3;
  }

  #feed .card.story-row,
  #feed .gn-col > .card.story-row,
  #feed .gn-col > .card.story-row:last-child,
  #feed .briefing-fill > .card.story-row,
  #feed .briefing-fill > .card.story-row:last-child,
  #feed .gn-col > .card.story-row.is-hardware,
  #feed .gn-col > .card.story-row.is-hardware:last-child,
  #feed .briefing-fill > .card.story-row.is-hardware,
  #feed .briefing-fill > .card.story-row.is-hardware:last-child,
  body.feed-compact #feed .card.story-row,
  body.feed-compact #feed .gn-col > .card.story-row,
  body.feed-compact #feed .briefing-fill > .card.story-row {
    min-height: auto !important;
    padding: 0.9rem 1rem !important;
  }

  #feed .card.story-row .story-thumb,
  #feed .card.story-row .story-media {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
  }

  #feed .card.story-row h2,
  #feed .card.story-row h2 a,
  #feed .gn-col > .card.story-row h2,
  #feed .briefing-fill > .card.story-row h2 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
}
/*__SHEET_BREAK__*/

/* Desktop keeps Digests in the mast. Phones hide that link, so the topic
   row carries a compact pill. Below 767 the other pills move into the
   drawer and this one stays in the bar. */
@media (min-width: 801px) {
  #topicBar #digestsNav {
    display: none !important;
  }
}

@media (max-width: 800px) {
  #topicBar #digestsNav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.45rem 0.95rem !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: var(--panel) !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  #topicBar #digestsNav:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: transparent !important;
  }
}

@media (max-width: 767px) {
  #topicBar {
    display: flex !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    contain: none !important;
  }

  #topicBar .top-nav,
  #topicBar .top-nav-section {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    justify-content: flex-start !important;
  }

  #topicBar .top-nav-item:not(#digestsNav) {
    display: none !important;
  }
}
/*__SHEET_BREAK__*/

/* Main-feed wrappers are not a second panel. Picks cards already sit on the
   page background; the briefing box and each lower section were still a
   bordered, padded surface around the story cards. Cards keep their own
   surface. Dark mode's panel fill is cleared at the same specificity. */
:root #feed.grid,
:root main .grid,
:root #feed .feed-top,
:root #feed .lower-feed,
:root #feed .lower-section,
:root #feed .lower-grid,
:root #feed .briefing-col,
:root #feed .briefing-card,
:root #feed .briefing-fill,
:root #feed .follow-ups,
:root[data-theme="dark"] #feed.grid,
:root[data-theme="dark"] main .grid,
:root[data-theme="dark"] #feed .feed-top,
:root[data-theme="dark"] #feed .lower-feed,
:root[data-theme="dark"] #feed .lower-section,
:root[data-theme="dark"] #feed .lower-grid,
:root[data-theme="dark"] #feed .briefing-col,
:root[data-theme="dark"] #feed .briefing-card,
:root[data-theme="dark"] #feed .briefing-fill,
:root[data-theme="dark"] #feed .follow-ups {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

:root #feed .lower-section,
:root[data-theme="dark"] #feed .lower-section,
:root #feed .briefing-card,
:root[data-theme="dark"] #feed .briefing-card,
:root #feed .briefing-fill,
:root[data-theme="dark"] #feed .briefing-fill {
  padding: 0 !important;
}

:root #feed .briefing-card:hover,
:root[data-theme="dark"] #feed .briefing-card:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 800px) {
  /* Match the cards under Picks: same padding, title size, and 72px image.
     The hero keeps its own image and padding. Desktop story photos stay 96px. */
  #feed .card.story-row,
  #feed .gn-col > .card.story-row,
  #feed .gn-col > .card.story-row:last-child,
  #feed .briefing-fill > .card.story-row,
  #feed .briefing-fill > .card.story-row:last-child,
  #feed .gn-col > .card.story-row.is-hardware,
  #feed .gn-col > .card.story-row.is-hardware:last-child,
  #feed .briefing-fill > .card.story-row.is-hardware,
  #feed .briefing-fill > .card.story-row.is-hardware:last-child,
  body.feed-compact #feed .card.story-row,
  body.feed-compact #feed .gn-col > .card.story-row,
  body.feed-compact #feed .briefing-fill > .card.story-row,
  #feed .card.follow-card,
  #feed .card.follow-card.is-hardware,
  body.feed-compact #feed .card.follow-card {
    padding: 1.25rem 1.4rem 1.15rem !important;
  }

  #feed .card.story-row .story-thumb,
  #feed .card.story-row .story-media,
  #feed .gn-col > .card.story-row .story-thumb,
  #feed .gn-col > .card.story-row .story-media,
  #feed .briefing-fill > .card.story-row .story-thumb,
  #feed .briefing-fill > .card.story-row .story-media {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    flex: 0 0 72px !important;
  }

  #feed .card.story-row h2,
  #feed .card.story-row h2 a,
  #feed .gn-col > .card.story-row h2,
  #feed .gn-col > .card.story-row h2 a,
  #feed .briefing-fill > .card.story-row h2,
  #feed .briefing-fill > .card.story-row h2 a,
  #feed .card.follow-card h2,
  #feed .card.follow-card h2 a {
    font-size: 1.15rem !important;
    line-height: 1.32 !important;
    font-weight: 650 !important;
  }
}
/*__SHEET_BREAK__*/

/* Latest Stories. This is the only block that sets the row and card size.
   Earlier .latest-row / .latest-card copies keep color and radius only. */
#latestRow.latest-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  box-sizing: border-box !important;
}
#latestRow.latest-row::-webkit-scrollbar {
  display: none;
  height: 0;
}

#latestRow .latest-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 230px !important;
  width: 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.9rem 1.1rem !important;
  box-sizing: border-box !important;
  scroll-snap-align: start !important;
  text-decoration: none !important;
}

#latestRow .latest-card h3 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  overflow: hidden !important;
  min-height: calc(1.4em * 3) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.latest-progress {
  display: block !important;
  height: 3px;
  margin: 8px 0 2px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
#latestProgressBar {
  display: block;
  height: 100%;
  width: 0;
  margin-left: 0;
  background: var(--text);
  border-radius: inherit;
  opacity: 0.55;
}

.latest-nav-btn {
  width: 36px !important;
  height: 36px !important;
  color: var(--text) !important;
  background: var(--panel-raised) !important;
  border-color: var(--line) !important;
}
.latest-nav-btn svg {
  width: 18px !important;
  height: 18px !important;
}
.latest-nav-btn:disabled {
  opacity: 0.35 !important;
  color: var(--text-muted) !important;
}

@media (max-width: 800px) {
  .latest-nav { display: none !important; }
}

@media (max-width: 640px) {
  #latestRow.latest-row {
    overscroll-behavior-x: contain !important;
  }
  #latestRow .latest-card {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    min-width: 0 !important;
    max-width: calc(100% - 40px) !important;
  }
}

/*__SHEET_BREAK__*/

/* =========================================================
   SEARCH BAR
   Resting pill, Google News focus, and the suggestions panel.
   This is the only block that paints .search-row / #search.
   The phone rule that hides .mast .search-row stays earlier;
   it is more specific, so the field still collapses under 768px.
   ========================================================= */

.search-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 240px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 10px 0 14px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: #f1f3f4 !important;
  color: #202124 !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  outline: none !important;
  z-index: 1;
  transition: background-color 150ms ease, box-shadow 150ms ease, border-radius 150ms ease !important;
}

.search-row > .search-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  color: #5f6368;
  opacity: 1;
  transform: none;
}

#search {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #202124 !important;
  font-family: var(--font-sans), 'Space Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  -webkit-appearance: none;
  appearance: none;
}

#search::placeholder {
  color: #5f6368 !important;
  opacity: 1 !important;
}

#search::-webkit-search-cancel-button,
#search::-webkit-search-decoration,
#search::-webkit-search-results-button,
#search::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-hint {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 6px !important;
  border: 1px solid #80868b !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #3c4043 !important;
  font-family: var(--font-sans), 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  white-space: nowrap;
}

.search-row:focus-within .search-hint,
.search-row.has-value .search-hint {
  display: none !important;
}

.search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #3c4043;
  cursor: pointer;
}

.search-clear[hidden] {
  display: none !important;
}

.search-clear:hover {
  background: rgba(60, 64, 67, 0.08);
}

.search-row:focus-within,
.search-row.is-open {
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
}

.search-row.is-open {
  border-radius: 20px 20px 0 0 !important;
  z-index: 5 !important;
}

.search-row:has(#search:focus-visible) {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

.search-row.search-pointer:has(#search:focus-visible),
.search-row:has(#search:focus-visible):has(.search-option.is-active) {
  outline: none !important;
}

#search:focus,
#search:focus-visible {
  outline: none !important;
}

.search-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  z-index: 2;
  margin: 0;
  padding: 6px 0 10px;
  box-sizing: border-box;
  background: #fff;
  color: #202124;
  border: 0;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  max-height: min(420px, 70vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-suggest[hidden] {
  display: none !important;
}

.search-suggest-label,
.search-suggest-head {
  margin: 0;
  padding: 10px 16px 4px;
  color: #3c4043;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.search-suggest-label {
  border-top: 1px solid #e8eaed;
  margin-top: 6px;
}

.search-suggest-label:first-child,
.search-suggest-head:first-child {
  border-top: 0;
  margin-top: 0;
}

.search-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.search-recent {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.search-recent-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-recent-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #3c4043;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.search-recent-remove:hover {
  background: rgba(60, 64, 67, 0.1);
}

.search-clear-all {
  width: auto;
  margin: 0 8px;
  padding: 8px 8px;
  border-radius: 8px;
  color: #185abc;
  font-size: 13px;
  font-weight: 650;
}

.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 8px;
}

.search-chip {
  width: auto;
  flex-direction: row;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1f3f4;
  color: #202124;
  font-size: 13px;
  font-weight: 500;
}

.search-option:hover,
.search-option.is-active,
.search-chip:hover,
.search-chip.is-active {
  background: #e8eaed;
}

.search-hit {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.search-hit-title,
.search-hit-snippet {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-hit-title {
  font-weight: 550;
}

.search-hit-snippet,
.search-hit-meta {
  color: #3c4043;
  font-size: 12px;
  line-height: 1.35;
}

.search-hit-meta {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-suggest mark {
  background: #fde293;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.search-suggest-empty {
  margin: 0;
  padding: 12px 16px 14px;
  color: #3c4043;
  font-size: 14px;
}

@media (max-width: 800px) {
  .mast .search-row {
    min-width: 64px !important;
  }
}

.search-overlay .search-row {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
}

.search-overlay #search {
  font-size: 16px !important;
}

@media (prefers-reduced-motion: reduce) {
  .search-row,
  .search-suggest,
  .search-option,
  .search-clear {
    transition: none !important;
  }
}

/* =========================================================
   SEARCH BAR — DARK MODE
   The page surface is #303134. The pill sits one step lighter.
   ========================================================= */

:root[data-theme="dark"] .search-row {
  background: #3c4043 !important;
  color: #e8eaed !important;
}

:root[data-theme="dark"] .search-row > .search-icon,
:root[data-theme="dark"] .search-clear,
:root[data-theme="dark"] .search-recent-remove {
  color: #e8eaed !important;
}

:root[data-theme="dark"] #search {
  color: #e8eaed !important;
}

:root[data-theme="dark"] #search::placeholder,
:root[data-theme="dark"] .search-hint,
:root[data-theme="dark"] .search-suggest-label,
:root[data-theme="dark"] .search-suggest-head,
:root[data-theme="dark"] .search-hit-snippet,
:root[data-theme="dark"] .search-hit-meta,
:root[data-theme="dark"] .search-suggest-empty {
  color: #e8eaed !important;
}

:root[data-theme="dark"] .search-hint {
  border-color: #9aa0a6 !important;
}

:root[data-theme="dark"] .search-row:focus-within,
:root[data-theme="dark"] .search-row.is-open,
:root[data-theme="dark"] .search-suggest {
  background: #48494c !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 8px 3px rgba(0, 0, 0, 0.4) !important;
}

:root[data-theme="dark"] .search-suggest-label {
  border-top-color: #80868b;
}

:root[data-theme="dark"] .search-chip {
  background: #3c4043 !important;
  color: #e8eaed !important;
}

:root[data-theme="dark"] .search-option:hover,
:root[data-theme="dark"] .search-option.is-active,
:root[data-theme="dark"] .search-chip:hover,
:root[data-theme="dark"] .search-chip.is-active {
  background: #5f6368 !important;
  color: #e8eaed !important;
}

:root[data-theme="dark"] .search-clear-all {
  color: #8ab4f8 !important;
}

:root[data-theme="dark"] .search-suggest mark {
  background: #6d5a16;
  color: #fff;
}

/* This week's Signal. Fixed height so the strip does not push the feed when the issue loads. */
#signalStrip {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: 100px;
  min-height: 100px;
  max-height: 100px;
  margin: 12px 0 0;
  padding: 10px 18px;
  overflow: hidden;
  background: var(--panel-raised);
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
}
#signalStrip[hidden] {
  display: none !important;
}
#signalStrip .signal-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
#signalStrip .signal-kicker {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#signalStrip .signal-kicker-label {
  text-transform: uppercase;
}
#signalStrip .signal-kicker-meta {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
}
#signalStrip .signal-title {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#signalStrip .signal-stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin-top: 2px;
}
#signalStrip .signal-headline,
#signalStrip .signal-why {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
}
#signalStrip .signal-headline {
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
#signalStrip .signal-why {
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}
#signalStrip .signal-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
#signalStrip .signal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
#signalStrip .signal-btn-read {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
}
#signalStrip .signal-btn-free {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
#signalStrip .signal-btn:focus-visible {
  outline: 2px solid var(--focus, var(--accent));
  outline-offset: 2px;
}
@media (max-width: 640px) {
  #signalStrip {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 240px;
    max-height: none;
    padding: 14px 18px;
    gap: 10px;
  }
  #signalStrip .signal-kicker {
    flex-wrap: wrap;
    white-space: normal;
  }
  #signalStrip .signal-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  #signalStrip .signal-stories {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #signalStrip .signal-story:nth-child(n + 3) {
    display: none;
  }
  #signalStrip .signal-actions {
    flex-direction: row;
  }
  #signalStrip .signal-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
  }
}
:root[data-theme="dark"] #signalStrip {
  background: var(--panel-raised);
  color: var(--text);
  border-color: var(--line);
  border-left-color: var(--accent);
}
:root[data-theme="dark"] #signalStrip .signal-btn-free {
  color: var(--text);
  border-color: var(--line);
}

/* Story photos and the space they reserve. List cards keep a 96x72 thumb
   (80x60 on phones), radius 8px. A missing photo is a brand tile, not an
   empty icon. Latest, the hero box, the Signal strip, and the newsletter
   keep their height before images and the beehiiv frame arrive. */
#latestSection {
  min-height: 188px;
}
#latestSection[hidden] {
  display: none !important;
}
#latestRow.latest-row {
  min-height: 120px;
}
#feed .hero-media {
  aspect-ratio: 16 / 9;
}
#newsletterCard.newsletter-card {
  min-height: 72px;
}
#newsletterCard .newsletter-embed {
  min-height: 52px;
}

#feed .card.follow-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
#feed .card.follow-card .story-copy,
#feed .card.story-row .story-copy,
#feed .card.pick-card .story-copy {
  flex: 1 1 auto;
  min-width: 0;
}

#feed .card.story-row .story-thumb,
#feed .card.story-row .story-media,
#feed .card.follow-card .story-thumb,
#feed .card.follow-card .story-media,
#feed .gn-col > .card.story-row .story-thumb,
#feed .gn-col > .card.story-row .story-media,
#feed .briefing-fill > .card.story-row .story-thumb,
#feed .briefing-fill > .card.story-row .story-media,
#feed .pick-thumb,
#feed .pick-card .pick-media,
#feed .pick-card .story-thumb,
#feed .pick-card .story-media {
  display: block !important;
  width: 96px !important;
  height: 72px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  flex: 0 0 96px !important;
  aspect-ratio: 96 / 72;
  object-fit: cover !important;
  border-radius: 8px !important;
  align-self: flex-start !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#feed .media-fallback.media-tile,
#feed .card.story-row .media-fallback.media-tile,
#feed .card.follow-card .media-fallback.media-tile,
#feed .pick-card .media-fallback.media-tile,
#feed .hero-media .media-fallback.media-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px !important;
  background: #1A73E8 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
#feed .hero-media .media-fallback.media-tile {
  width: 100% !important;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  flex: none !important;
  aspect-ratio: auto;
  border-radius: 8px !important;
}
#feed .media-fallback.media-tile .media-fallback-mark {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  margin: 0 !important;
  padding: 2px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}
#feed .hero-media .media-fallback.media-tile .media-fallback-mark {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
}
#feed .media-tile-label {
  max-width: 100%;
  overflow: hidden;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 800px) {
  #feed .card.story-row .story-thumb,
  #feed .card.story-row .story-media,
  #feed .card.follow-card .story-thumb,
  #feed .card.follow-card .story-media,
  #feed .gn-col > .card.story-row .story-thumb,
  #feed .gn-col > .card.story-row .story-media,
  #feed .briefing-fill > .card.story-row .story-thumb,
  #feed .briefing-fill > .card.story-row .story-media,
  #feed .pick-thumb,
  #feed .pick-card .pick-media,
  #feed .pick-card .story-thumb,
  #feed .pick-card .story-media {
    width: 80px !important;
    height: 60px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    flex: 0 0 80px !important;
    aspect-ratio: 80 / 60;
  }
}
@media (max-width: 640px) {
  #latestSection {
    min-height: 210px;
  }
  #signalStrip {
    min-height: 240px;
  }
}

/* The accent blue on the near-white strip is 4.42:1 at 11px. A slightly
   deeper blue keeps the same hue and clears 4.5:1. */
#signalStrip .signal-kicker-label {
  color: #1255b3;
}
:root[data-theme="dark"] #signalStrip .signal-kicker-label {
  color: #8ab4f8;
}