/* ==========================================================================
   rssnews.io editorial layer
   Redesign phase 1 (2026-10-29): tokens, fonts, accent colour.
   Brief: REDESIGN-BRIEF-2026-10-28.md (repo root, one level up).

   Load order: after custom.css, enterprise-header.css and tailwind.min.css.
   custom.css and enterprise-header.css read the accent roles below as
   var(--token, <original value>), so removing this file's <link> restores
   the previous colours exactly. Fonts are not part of that rollback: the
   Literata font link lives in index.html.
   ========================================================================== */

/* ----- Tokens ----- */
:root {
  /* Neutrals: cool on purpose. Contrast on --paper computed 2026-10-28. */
  --paper: #F5F5F3;
  --surface: #FCFCFB;
  --ink: #17171B;          /* 16.4:1 */
  --muted: #585861;        /* 6.5:1 */
  --rule: #E1E1DE;         /* hairlines, decorative */
  --rule-strong: #C9C9C5;
  --field: #8A8A93;        /* input borders, 3.1:1 (WCAG 1.4.11) */
  --red: #B4141C;          /* the one accent, 6.3:1 */
  --hover: rgba(23, 23, 27, 0.06);
  --shadow: 0 16px 40px -16px rgba(23, 23, 27, 0.28);
  --focus-tint: rgba(180, 20, 28, 0.08);
  --fav-plate: transparent;

  /* Accent roles (read by custom.css and enterprise-header.css) */
  --accent: var(--red);            /* text, borders, outlines, icons */
  --accent-hover: #8E1016;
  --accent-soft: #C7484D;
  --accent-rgb: 180, 20, 28;       /* translucent tints */
  --fill: #B4141C;                 /* solid fills behind white text, 6.3:1 */
  --fill-hover: #96111A;
  --fill-strong: #7E0E15;
  --tint-50: #FBEFEF;              /* pale backgrounds */
  --tint-100: #F7E0E0;
  --tint-200: #EFC3C4;

  /* Type */
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape */
  --r-ui: 4px;
  --r-img: 2px;
  --r-panel: 8px;
}

:root.dark {
  --paper: #111113;
  --surface: #1A1A1D;
  --ink: #ECECE8;          /* 15.9:1 */
  --muted: #A3A3AD;        /* 7.5:1 */
  --rule: #2A2A2E;
  --rule-strong: #3A3A3F;
  --field: #6E6E78;
  --red: #F2605A;          /* 5.9:1 */
  --hover: rgba(236, 236, 232, 0.07);
  --shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --focus-tint: rgba(242, 96, 90, 0.14);
  --fav-plate: #ECECE8;    /* many favicons are dark-on-transparent */

  --accent: var(--red);
  --accent-hover: #F58A85;
  --accent-soft: #F58A85;
  --accent-rgb: 242, 96, 90;
  /* Fills keep the light red: white text on #F2605A would be about 3:1. */
  --fill: #B4141C;
  --fill-hover: #C8242B;
  /* In dark rules --fill-strong replaces navy hover surfaces (#1e3a5f etc.),
     so it is a deep red surface, not a button: light text on it is 5:1+. */
  --fill-strong: #3B1719;
  /* Tints stay pale, like the literals they replace: most rules that use
     them carry their own .dark override, and the few that do not are
     patched below. Several .dark rules also use tints as text colours. */
}

/* ----- Base: Fira Sans actually renders (Tailwind .font-sans won before) ----- */
body,
.font-sans {
  font-family: var(--sans);
}

/* [class] lifts specificity over Tailwind's .bg-gray-50 and
   .dark\:bg-gray-950:is(.dark *) without !important. */
body[class],
.dark body[class] {
  background-color: var(--paper);
  color: var(--ink);
}

/* ----- Reader: Literata, which has Greek (Newsreader did not) ----- */
.reader-title,
.reader-body,
.reader-body h2,
.reader-body h3,
.reader-body h4,
.reader-body blockquote,
.reader-body blockquote::before {
  font-family: var(--serif);
  font-optical-sizing: auto;
}

/* ----- Spots where one role value cannot serve both themes ----- */
/* Dark empty-state button used two indigo steps for rest and hover; both map
   to --accent-soft, so give hover its own lighter step (dark text stays 7:1+). */
.dark .empty-state-btn:hover { background: #F8A9A5; }
/* Two blue steps (#3b82f6 rest, #2563eb hover) collapsed into --fill. */
.source-apply-btn:hover,
.dark .reader-footer-btn:hover,
.dark .missed-strip-cta:hover { background: var(--fill-hover); }
/* Saturated --fill-hover under --accent-soft text would be 2.4:1. */
.dark .reader-original-btn:hover { background: #4A1C1F; }
/* Navy hero gradient: neutral surface warming toward red. */
.dark .recap-hero { background: linear-gradient(135deg, #1A1A1D 0%, #221719 60%, #2A1719 100%); }
/* Dark-mode partners of swept accents that used light blues. On the #374151
   and #4b5563 hover chips red text is 2.4-4.4:1, so those take --tint-200
   (6.5:1 and 4.8:1). */
.dark .article-title a:hover,
.dark .footer-changelog-mobile { color: var(--accent-soft); }
.dark .footer-changelog-mobile:hover,
.dark .ali-open:hover,
.dark .mobile-bottom-bar-item:hover,
.dark .pagination-btn:hover:not(:disabled),
.dark .quick-action-btn:hover span { color: var(--tint-200); }

/* ----- Information is not an alert -----
   These were blue info surfaces. Red text on a pink box reads as an error,
   so they go neutral; red stays on the links and counts inside them. */
.my-feed-empty,
.reader-preview-notice,
.search-results-header,
#time-filter-notification,
.onboard-hint,
.exclusive-count,
.dark .my-feed-empty,
.dark .reader-preview-notice,
.dark .search-results-header,
.dark #time-filter-notification,
.dark .onboard-hint,
.dark .exclusive-count {
  background: var(--surface);
  border-color: var(--rule-strong);
  color: var(--muted);
}
.my-feed-empty i,
.dark .my-feed-empty i { color: var(--muted); }
.my-feed-empty strong,
.dark .my-feed-empty strong,
.search-results-header,
.dark .search-results-header,
#time-filter-notification .text-primary-800,
.dark #time-filter-notification .dark\:text-primary-200 { color: var(--ink); }

/* Comment sat red-on-pink next to the red "Δεν μου αρέσει": two look-alike
   buttons on every card. Neutral until phase 3 moves reactions into the reader. */
.article-actions-row .comment-trigger,
.dark .article-actions-row .comment-trigger {
  background: transparent;
  color: var(--muted);
  border-color: var(--rule-strong);
}
.article-actions-row .comment-trigger:hover,
.dark .article-actions-row .comment-trigger:hover {
  background: var(--hover);
  color: var(--ink);
  border-color: var(--field);
}
.article-actions-row .comment-trigger.selected,
.dark .article-actions-row .comment-trigger.selected {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* ----- Recap coverage scale (recap.js intensityClass) -----
   It was blue, indigo, orange. Now neutral, red, orange: red marks the
   stronger coverage instead of every pill. Theme-constant fills, because
   the dark --accent-rgb coral cannot carry white text (3:1). */
.recap-card-pill {
  background: rgba(23, 23, 27, 0.88);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.45);
}
.recap-card.is-strong .recap-card-pill {
  background: rgba(180, 20, 28, 0.95);
  box-shadow: 0 4px 12px -4px rgba(180, 20, 28, 0.5);
}
.recap-mini-badge { background: #2A2A2E; }
.recap-mini-card.is-strong .recap-mini-badge { background: var(--fill); }

/* Stats widget: "rate" no longer duplicates the red of "live", and its
   pale tint no longer sits under coral text in dark mode (was 2.3:1). */
.metric-rate .metric-icon {
  background: var(--rule);
  color: var(--ink);
}

/* Grey text placed straight on --paper: Tailwind gray-500 (#6b7280) is
   4.43:1 there, under AA. --muted is 6.5:1 on paper and 7:1 on white. */
.text-gray-500,
.pagination-ellipsis,
.alerts-subtitle,
.changelog-subtitle,
.version-date { color: var(--muted); }

/* ----- Tailwind primary-* utilities (compiled with indigo values) ----- */
.text-primary-500,
.text-primary-600 { color: var(--accent); }
.text-primary-800 { color: var(--fill-strong); }
.bg-primary-500 { background-color: var(--fill); }
.hover\:bg-primary-600:hover { background-color: var(--fill-hover); }
.bg-primary-50 { background-color: var(--tint-50); }
.border-primary-200 { border-color: var(--tint-200); }
.dark .dark\:bg-primary-900\/20 { background-color: rgba(var(--accent-rgb), 0.12); }
.dark .dark\:border-primary-800 { border-color: rgba(var(--accent-rgb), 0.35); }
.dark .dark\:text-primary-200 { color: var(--accent-soft); }
.dark .dark\:text-primary-400 { color: var(--accent); }

/* ==========================================================================
   Phase 2 (2026-10-29): masthead, ⋯ tools menu, section nav, mobile top bar.
   Decisions: logo ink + serif wordmark; tools under one ⋯ menu (clocks kept,
   inside it); words-only section nav, one red active state; on mobile one
   menu, the bottom-bar Μενού.
   ========================================================================== */

/* ----- Masthead ----- */
.enterprise-header,
.dark .enterprise-header {
  background: var(--paper);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}
.enterprise-header-main { height: 68px; }
.enterprise-header-main .enterprise-container { gap: 24px; }

.enterprise-logo-link:hover { opacity: 1; }
.enterprise-logo-icon,
.enterprise-logo-link:hover .enterprise-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-ui);
  background: var(--ink);
  box-shadow: none;
  transform: none;
}
.enterprise-logo-icon i { font-size: 16px; color: var(--paper); }
.enterprise-brand-name,
.dark .enterprise-brand-name {
  font: 700 24px/1 var(--serif);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.enterprise-brand-tagline,
.dark .enterprise-brand-tagline {
  margin-top: 4px;
  font: 400 12px/1.2 var(--sans);
  color: var(--muted);
}

/* Search: a plain field, the one bordered control in the masthead */
.enterprise-header-search { max-width: 440px; margin-left: auto; }
.enterprise-header-search input,
.dark .enterprise-header-search input {
  height: 40px;
  padding: 0 64px 0 38px;
  background: var(--surface);
  border: 1px solid var(--field);
  border-radius: var(--r-ui);
  font: 400 15px var(--sans);
  color: var(--ink);
  box-shadow: none;
}
.enterprise-header-search input::placeholder { color: var(--muted); opacity: 1; }
.enterprise-header-search input:focus,
.dark .enterprise-header-search input:focus {
  background: var(--surface);
  border-color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: none;
}
.enterprise-header-search > i,
.enterprise-header-search input:focus ~ i,
.enterprise-header-search:focus-within > i { left: 13px; color: var(--muted); }
.search-shortcut,
.dark .search-shortcut {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ui);
  color: var(--muted);
}

/* Masthead tools: Τι έχασες, theme, ⋯ */
.enterprise-actions { gap: 4px; }
.enterprise-header-action-btn,
.enterprise-header-action-btn:hover,
.enterprise-header-action-btn:active {
  transform: none;
}
@media (min-width: 1024px) {
  .enterprise-actions > .enterprise-header-action-btn,
  .tools-menu-btn {
    flex-direction: row;
    gap: 8px;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border-radius: var(--r-ui);
    color: var(--ink);
  }
  .tools-menu-btn { padding: 0; width: 40px; }
  .enterprise-actions > .enterprise-header-action-btn i,
  .tools-menu-btn i { font-size: 15px; color: inherit; }
  .enterprise-actions > .enterprise-header-action-btn .btn-label,
  .dark .enterprise-actions > .enterprise-header-action-btn .btn-label {
    font: 500 14px var(--sans);
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
  }
  /* The theme toggle used to be mobile-only */
  #theme-toggle-btn { display: inline-flex; }
}
.enterprise-btn-ti-exasa,
.dark .enterprise-btn-ti-exasa,
.tools-menu-btn { color: var(--ink); }
.enterprise-header-action-btn:hover,
.dark .enterprise-header-action-btn:hover,
.enterprise-btn-ti-exasa:hover,
.dark .enterprise-btn-ti-exasa:hover,
.tools-menu-btn[aria-expanded="true"] {
  background: var(--hover);
  color: var(--ink);
}

/* Theme toggle and the mobile icon buttons: ink glyphs, no chrome.
   color !important beats .mobile-btn-ti-exasa's white !important, which was
   the blank light-mode button (audit bug 3). */
.enterprise-header .enterprise-mobile-square-btn,
.dark .enterprise-header .enterprise-mobile-square-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--r-ui);
  background: none;
  box-shadow: none;
  color: var(--ink) !important;
}
.enterprise-header .enterprise-mobile-square-btn:hover,
.dark .enterprise-header .enterprise-mobile-square-btn:hover { background: var(--hover); }
.enterprise-header .enterprise-mobile-square-btn i { font-size: 16px; color: inherit; }

/* ----- ⋯ tools menu (desktop) ----- */
.tools-menu-wrap { position: relative; display: none; }
@media (min-width: 1024px) { .tools-menu-wrap { display: block; } }
/* While the menu is open, lift the sticky header (Tailwind z-50) over fixed
   page layers such as the new-articles badge (z 1000) */
.enterprise-header.tools-open { z-index: 1001; }
.tools-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 288px;
  /* The header is sticky, so page scroll cannot reveal an overflowing panel */
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
}
.tools-menu[hidden] { display: none; }
.tools-menu:focus { outline: none; }
.tools-menu .enterprise-header-action-btn {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-ui);
  color: var(--ink);
}
.tools-menu .enterprise-header-action-btn i {
  width: 16px;
  font-size: 15px;
  text-align: center;
  color: var(--muted);
}
.tools-menu .enterprise-header-action-btn .btn-label,
.dark .tools-menu .enterprise-header-action-btn .btn-label {
  font: 400 15px var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.tools-menu .enterprise-btn-refresh:hover i { transform: none; }
/* The live-traffic dot sat on the old icon's corner; in a row it ends it */
.tools-menu .traffic-pulse {
  position: relative;
  top: auto;
  right: auto;
  margin-left: auto;
  border-color: var(--surface);
}
.tools-menu-clocks {
  margin-top: 6px;
  padding: 12px 12px 6px;
  border-top: 1px solid var(--rule);
}
.tools-menu-heading {
  margin: 0 0 10px;
  font: 600 12px/1.2 var(--sans);
  color: var(--muted);
}
/* enterprise-header.css hides the clocks below 1400px with !important */
.tools-menu .enterprise-clocks,
.dark .tools-menu .enterprise-clocks {
  display: block !important;
  margin: 0;
  padding: 0;
  background: none;
}
.tools-menu #header-clock-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 4px;
}
/* The clocks are read-only: no pointer, no hover lift */
.tools-menu #header-clock-row .header-clock { cursor: default; }
.tools-menu #header-clock-row .header-clock:hover { transform: none; }
.tools-menu #header-clock-row .header-clock-label,
.dark .tools-menu #header-clock-row .header-clock-label {
  white-space: nowrap;
  font: 400 12px/1.2 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ----- Section nav: words only, one red active state ----- */
.enterprise-nav-bar,
.dark .enterprise-nav-bar {
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.enterprise-nav-scroll { gap: 2px; padding: 0 12px; }
.enterprise-nav-bar .enterprise-nav-item,
.dark .enterprise-nav-bar .enterprise-nav-item,
.enterprise-nav-bar .enterprise-nav-item:hover,
.dark .enterprise-nav-bar .enterprise-nav-item:hover {
  flex: none;
  height: 48px;
  padding: 0 12px;
  border-radius: 0;
  font: 500 15px/1 var(--sans);
}
.enterprise-nav-bar .enterprise-nav-item,
.dark .enterprise-nav-bar .enterprise-nav-item { color: var(--muted); }
.enterprise-nav-bar .enterprise-nav-item:hover,
.dark .enterprise-nav-bar .enterprise-nav-item:hover { color: var(--ink); }
.enterprise-nav-bar .enterprise-nav-item.category-btn i { display: none; }
/* [data-category] outranks the per-section colours in enterprise-header.css */
.enterprise-nav-bar .enterprise-nav-item.active,
.enterprise-nav-bar .enterprise-nav-item.category-btn[data-category].active,
.dark .enterprise-nav-bar .enterprise-nav-item.active,
.dark .enterprise-nav-bar .enterprise-nav-item.category-btn[data-category].active {
  color: var(--red);
  font-weight: 600;
  border-bottom-color: var(--red);
  border-radius: 0;
  background: none !important;
  background-color: transparent !important;
}

/* Η ροή μου: a personal feed, not a section. Ink, icon kept, divider after.
   custom.css styles it with !important, hence the !important here. */
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn,
.dark .enterprise-nav-bar .enterprise-nav-item.my-feed-btn,
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn:hover,
.dark .enterprise-nav-bar .enterprise-nav-item.my-feed-btn:hover {
  margin-right: 13px;
  color: var(--ink) !important;
  font-weight: 600;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  box-shadow: none;
}
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn::after {
  content: '';
  position: absolute;
  top: 14px;
  right: -8px;
  bottom: 14px;
  width: 1px;
  background: var(--rule-strong);
}
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn.active,
.dark .enterprise-nav-bar .enterprise-nav-item.my-feed-btn.active {
  color: var(--red) !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 2px solid var(--red) !important;
  box-shadow: none;
}
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn i,
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn span,
.dark .enterprise-nav-bar .enterprise-nav-item.my-feed-btn i,
.dark .enterprise-nav-bar .enterprise-nav-item.my-feed-btn span,
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn:hover i,
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn:hover span,
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn.active i,
.enterprise-nav-bar .enterprise-nav-item.my-feed-btn.active span { color: inherit !important; }

/* Focus: the same red ring as the search field, on every header control */
.enterprise-header button:focus-visible,
.enterprise-header a:focus-visible,
.tools-menu button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.enterprise-nav-bar .enterprise-nav-item:focus-visible { outline-offset: -2px; }

/* Source filter row under the nav */
.enterprise-filter-bar,
.dark .enterprise-filter-bar { background: var(--paper); border-top: 1px solid var(--rule); }
.source-filter-btn-bar,
.dark .source-filter-btn-bar {
  border-color: var(--field);
  border-radius: var(--r-ui);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}
.source-filter-btn-bar:hover,
.dark .source-filter-btn-bar:hover { background: var(--hover); border-color: var(--ink); }
.source-filter-btn-bar i { color: var(--muted); }
.source-filter-btn-bar .source-filter-badge,
.dark .source-filter-btn-bar .source-filter-badge {
  background: var(--rule);
  color: var(--ink);
}

/* ----- Mobile top bar (below 1024px): logo, search, Τι έχασες, theme ----- */
@media (max-width: 1023px) {
  .enterprise-header-main { height: 56px; }
  .enterprise-header-main .enterprise-container { gap: 8px; padding: 0 16px; }
  .enterprise-logo-link { gap: 10px; }
  .enterprise-logo-icon,
  .enterprise-logo-link:hover .enterprise-logo-icon { width: 32px; height: 32px; }
  .enterprise-logo-icon i { font-size: 14px; }
  .enterprise-brand-name,
  .dark .enterprise-brand-name { font-size: 21px; }
  .enterprise-brand-tagline { display: none; }
  /* enterprise-header.css hid the wordmark below 400px; a first-time visitor
     should still see the name */
  .enterprise-brand { display: flex; }
  /* These tools are in the bottom-bar Μενού (decision 9) */
  #mobile-weather-btn,
  #mobile-traffic-btn,
  #mobile-submit-btn,
  #mobile-refresh-btn { display: none !important; }
  .enterprise-header .enterprise-mobile-square-btn,
  .dark .enterprise-header .enterprise-mobile-square-btn { width: 44px; height: 44px; }
}
/* The search field shows from 768px; below that the icon opens the sheet.
   Only without the field do the buttons need pushing right (one auto margin,
   or the field floats mid-bar). */
@media (min-width: 768px) { #mobile-search-btn { display: none !important; } }
@media (max-width: 767px) { .enterprise-utilities { margin-left: auto; } }
/* 320px phones: wordmark and three buttons still fit on one line */
@media (max-width: 360px) {
  .enterprise-header-main .enterprise-container { padding: 0 12px; gap: 4px; }
  .enterprise-brand-name,
  .dark .enterprise-brand-name { font-size: 19px; }
  .enterprise-header .enterprise-mobile-square-btn,
  .dark .enterprise-header .enterprise-mobile-square-btn { width: 40px; height: 40px; }
}

/* ==========================================================================
   Phase 3 (2026-10-29): feed rows. Hairlines, not cards; serif headline;
   thumbnail on the right, only when an image actually loads; one share icon.
   Reactions and the full share set live in the reader panel.
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#article-list,
.dark #article-list {
  gap: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: transparent;
}
.article-list-item,
.dark .article-list-item,
.article-list-item:hover,
.dark .article-list-item:hover,
.article-list-item:last-child {
  background: transparent;
  border-left: 0;
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}
.ali-inner {
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
}
.article-content { order: 1; gap: 0; }

/* Meta line: favicon, source, time, pill, signal, actions */
.ali-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 32px;
  margin: 0;
  padding-right: 0;
  font: 400 13px/1.3 var(--sans);
  color: var(--muted);
}
/* Source and time stay together on one line; the signal and the actions
   wrap after them when the column is narrow. A very long source name
   truncates rather than pushing the time away. */
.ali-byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}
.ali-byline > .ali-pub-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ali-byline > * { flex-shrink: 0; }
/* custom.css sets every span to 1rem; these wrappers must follow their line */
.ali-byline,
.ali-actions,
.ali-time-ago { font-size: inherit; }
.ali-byline > .ali-pub-name { flex-shrink: 1; }
.ali-fav {
  flex: none;
  width: 16px;
  height: 16px;
  padding: 1px;
  border-radius: 2px;
  background: var(--fav-plate);
}
.ali-pub-name,
.dark .ali-pub-name {
  max-width: none;
  font: 600 13px/1.3 var(--sans);
  color: var(--ink);
}
.ali-sep,
.dark .ali-sep,
.ali-time,
.dark .ali-time { font-size: 13px; color: var(--muted); }
.ali-cat,
.dark .ali-cat {
  display: inline-flex;
  padding: 1px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ui);
  background: none;
  font: 500 12px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.ali-count { font-size: 13px; font-weight: 600; color: var(--red); }
.ali-badge--breaking,
.dark .ali-badge--breaking {
  padding: 0;
  background: none;
  animation: none;
  font: 700 12px/1.3 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}
/* The actions come after the headline in the DOM (reading and tab order);
   they are drawn at the top-right of the text column, beside the meta line */
.article-content { position: relative; }
.ali-source { padding-right: 72px; }
.ali-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  gap: 2px;
}
.ali-open,
.dark .ali-open,
.row-share {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-ui);
  background: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.article-list-item:hover .ali-open,
.article-list-item:hover .row-share,
.article-list-item:focus-within .ali-open,
.article-list-item:focus-within .row-share,
.article-list-item.kb-focused .ali-open,
.article-list-item.kb-focused .row-share,
.row-share.copied { opacity: 1; }
/* custom.css pulses breaking rows; the red "Έκτακτο" label is the signal */
.article-list-item.breaking-article { animation: none; }
.ali-open:hover,
.dark .ali-open:hover,
.row-share:hover,
.row-share.copied { background: var(--hover); color: var(--ink); }
.ali-open:focus-visible,
.row-share:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; opacity: 1; }
/* Touch screens: no hover to reveal it, so the share icon is always there,
   at a 44px target. Opening the source stays in the reader. */
@media (hover: none) {
  .ali-source { padding-right: 36px; }
  .ali-actions { top: -6px; right: -12px; }
  .row-share { opacity: 1; width: 44px; height: 44px; }
  .ali-open { display: none; }
  .story-group-btn,
  .dark .story-group-btn { min-height: 44px; }
}

/* Headline and excerpt */
.article-title,
.dark .article-title {
  margin: 6px 0;
  font: 600 19px/1.3 var(--serif);
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-title a,
.article-title a:hover,
.dark .article-title a:hover { color: inherit; }
.article-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}
/* An outline breaks into one box per line on wrapped links */
.article-title a:focus-visible {
  outline: none;
  border-radius: 0;
  background: var(--focus-tint);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}
.article-desc,
.dark .article-desc {
  margin: 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read rows: a quieter headline, no strike-through, no green tick */
.article-list-item.read { opacity: 1; }
.article-list-item.read::after { display: none; }
.article-list-item.read .article-title a,
.dark .article-list-item.read .article-title a {
  color: var(--muted) !important;
  text-decoration: none;
}

/* Thumbnail: right side, 4:3. Every failure path in articles.js reveals the
   placeholder, so a visible placeholder means "no image": drop the slot and
   let the text take the width (audit bug 4: empty grey squares). */
.article-image-wrapper,
.dark .article-image-wrapper {
  order: 2;
  width: 128px;
  min-width: 128px;
  height: auto;
  aspect-ratio: 4 / 3;
  margin-top: 4px;
  border-radius: var(--r-img);
  background: var(--rule);
}
.article-list-item:hover .article-image { transform: none; }
/* Without :has() (old Safari/Firefox) the placeholder stays as the old grey
   box rather than an empty slot */
@supports selector(:has(a)) {
  .article-image-placeholder { display: none !important; }
  .article-image-wrapper:has(> .article-image-placeholder:not(.hidden)) { display: none; }
}

/* Cross-check drawer: "Πώς το γράφουν άλλες N πηγές" */
.story-group-toggle { margin-top: 8px; }
.story-group-btn,
.dark .story-group-btn,
.story-group-btn:hover,
.dark .story-group-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  font: 600 14px/1.3 var(--sans);
  color: var(--ink);
}
.story-group-btn:hover,
.dark .story-group-btn:hover { color: var(--red); }
.story-group-btn span { font-size: inherit; text-align: left; }
.story-group-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.story-group-chevron { font-size: 11px; color: var(--muted); }
.story-group-drawer,
.dark .story-group-drawer {
  margin-top: 4px;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 2px solid var(--rule-strong);
  border-radius: 0;
  background: none;
}
/* Each outlet's own headline: the cross-check, read like the meta line */
.story-group-list { padding: 0; }
.story-group-item,
.dark .story-group-item {
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.story-group-item:last-child { border-bottom: 0; }
.story-group-item:hover,
.dark .story-group-item:hover { background: none; }
.story-group-item:hover .story-group-item-title {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}
.story-group-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.story-group-item-logo {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  padding: 1px;
  border-radius: 2px;
  background: var(--fav-plate);
}
.story-group-item-source,
.dark .story-group-item-source {
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.story-group-item-title,
.dark .story-group-item-title {
  margin-top: 2px;
  font: 400 15px/1.35 var(--serif);
  color: var(--ink);
}
.story-group-item-date,
.dark .story-group-item-date { font: 400 12px/1.3 var(--sans); color: var(--muted); }

.article-also-sources,
.dark .article-also-sources {
  margin-top: 8px;
  font: 400 13px/1.4 var(--sans);
  color: var(--muted);
}

@media (max-width: 767px) {
  /* The feed's parent pads 8px (Tailwind px-2) and the old cards padded
     themselves; rows have no chrome, so the list takes the 16px gutter */
  #article-list { padding: 0 8px; }
  .ali-inner { gap: 14px; padding: 16px 0; }
  .article-image-wrapper,
  .dark .article-image-wrapper { width: 92px; min-width: 92px; }
  .article-title,
  .dark .article-title { font-size: 18px; }
}
/* "Πριν από 23 λεπτά" becomes "23 λεπτά": the source name is the byline and
   should not be the part that truncates */
@media (max-width: 480px) { .ali-time-ago { display: none; } }

/* ==========================================================================
   Phase 3 (2026-10-29): reactions, comments and the full share set in the
   reader panel (app.js builds .reader-social after #reader-body).
   Everything is scoped under #reader-panel: the ID outranks the green/red
   vote pills and brand-coloured share buttons in custom.css (and the .dark
   variants) without !important, and nothing outside the reader changes.
   Reader title/body typography is a later phase and is not touched here.
   Uses .sr-only from the phase 3 rows section of this file.
   ========================================================================== */

/* The body is the scroller: make it the containing block, or absolutely
   positioned children (the sr-only status) overflow the fixed panel and a
   focus() call scrolls the whole panel off its header */
#reader-panel .reader-panel-body { position: relative; }

#reader-panel .reader-social {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  color: var(--ink);
}

/* Reactions on the left, share set on the right; wraps when the panel is narrow */
#reader-panel .article-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: 0;
  padding: 0;
  border: 0;
}
#reader-panel .article-votes-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#reader-panel .votes-prompt {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  font: 600 14px/1.2 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink);
}

/* ----- Reaction buttons: quiet ghost buttons, icon + label (+ count above 0) ----- */
#reader-panel .vote-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--field);
  border-radius: var(--r-ui);
  background: transparent;
  color: var(--ink);
  font: 500 14px/1 var(--sans);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
/* custom.css widens the hit area with ::before on touch; here the button is 44px itself */
#reader-panel .vote-trigger::before { content: none; }
#reader-panel .vote-trigger i { font-size: 14px; color: inherit; }
#reader-panel .vote-label { display: inline; font-size: inherit; }
#reader-panel .vote-count {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
/* Counts at 0 carry [hidden]; keep it winning over any display rule */
#reader-panel .vote-count[hidden] { display: none; }

@media (hover: hover) {
  #reader-panel .vote-trigger:hover:not(:disabled) {
    background: var(--hover);
    border-color: var(--ink);
    color: var(--ink);
  }
}
#reader-panel .vote-trigger:active:not(:disabled) { transform: translateY(1px); }

/* Selected (the comment form is open for this button): ink, never red */
#reader-panel .vote-trigger.selected,
#reader-panel .vote-trigger.selected:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  font-weight: 500;
}
#reader-panel .vote-trigger.selected .vote-count { color: inherit; }

/* Already voted or commented on this device */
#reader-panel .vote-trigger:disabled,
#reader-panel .vote-trigger.voted {
  opacity: 1;
  border-color: var(--rule-strong);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
}

/* ----- Share set: neutral icons, no brand colours -----
   Its own line under the reactions: the panel's text column (at most 616px)
   cannot hold both. The negative margin lines the first glyph up with the
   prompt above (the icon sits centred in a 40px button). */
#reader-panel .reader-share {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-items: center;
  gap: 4px;
  margin-left: -12px;
}
#reader-panel .reader-share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-ui);
  background: none;
  color: var(--ink);
  font-size: 15px;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  transition: background-color .15s;
}
#reader-panel .reader-share-btn::before { content: none; }
@media (hover: hover) {
  #reader-panel .reader-share-btn:hover {
    background: var(--hover);
    color: var(--ink);
    transform: none;
  }
}
#reader-panel .reader-share-btn:active { background: var(--hover); transform: translateY(1px); }
/* shareArticle() swaps in a check icon and adds .copied for 2s */
#reader-panel .share-btn.copied {
  background: var(--hover);
  color: var(--ink);
  transform: none;
}

/* ----- Focus: the same red ring as the masthead ----- */
#reader-panel .reader-panel-header button:focus-visible,
#reader-panel .reader-panel-header a:focus-visible,
#reader-panel .reader-social button:focus-visible,
#reader-panel .reader-social a:focus-visible,
#reader-panel .reader-related-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----- Comment form ----- */
#reader-panel .vote-form {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-ui);
  background: transparent;
}
#reader-panel .vote-form-fields { gap: 10px; }
#reader-panel .vote-input {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--field);
  border-radius: var(--r-ui);
  background: var(--surface);
  color: var(--ink);
  font: 400 15px/1.4 var(--sans);
  box-shadow: none;
}
#reader-panel textarea.vote-input { min-height: 96px; resize: vertical; }
#reader-panel .vote-input::placeholder { color: var(--muted); opacity: 1; }
#reader-panel .vote-input:focus {
  border-color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: none;
}
#reader-panel .vote-turnstile { margin: 2px 0; }
#reader-panel .vote-form-actions { gap: 8px; margin-top: 2px; }
#reader-panel .vote-submit-btn,
#reader-panel .vote-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-ui);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  transition: background-color .15s, opacity .15s;
}
#reader-panel .vote-submit-btn,
#reader-panel .vote-submit-btn:hover {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--surface);
}
#reader-panel .vote-submit-btn:hover:not(:disabled) { opacity: .88; }
#reader-panel .vote-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
#reader-panel .vote-cancel-btn {
  border: 1px solid var(--field);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
}
#reader-panel .vote-cancel-btn:hover { background: var(--hover); }
#reader-panel .vote-submit-btn:focus-visible,
#reader-panel .vote-cancel-btn:focus-visible { outline-offset: 2px; }

/* ----- Messages: information is neutral, only errors are red ----- */
#reader-panel .vote-message {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-ui);
  background: transparent;
  color: var(--ink);
  font: 400 14px/1.4 var(--sans);
}
#reader-panel .vote-message:focus { outline: none; }
#reader-panel .vote-message-error {
  border-color: var(--red);
  color: var(--red);
}

/* ----- Comments ----- */
#reader-panel .article-comments-list { margin-top: 20px; }
#reader-panel .comments-header {
  gap: 8px;
  margin: 0 0 4px;
  font: 600 14px/1.2 var(--sans);
  color: var(--ink);
}
#reader-panel .comments-header i { color: var(--muted); }
#reader-panel .comments-empty {
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 14px/1.45 var(--sans);
  font-style: normal;
  color: var(--muted);
}
#reader-panel .comments-empty i { color: var(--muted); }
#reader-panel .comment-item {
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
}
#reader-panel .comment-avatar { background: var(--rule); }
#reader-panel .comment-author {
  margin-bottom: 2px;
  font: 600 14px/1.3 var(--sans);
  color: var(--ink);
}
#reader-panel .comment-vote,
#reader-panel .comment-vote.up,
#reader-panel .comment-vote.down { margin-left: 4px; font-size: 11px; color: var(--muted); }
#reader-panel .comment-text {
  font: 400 15px/1.5 var(--sans);
  color: var(--ink);
}
#reader-panel .comment-time {
  margin-top: 4px;
  font: 400 12px/1.3 var(--sans);
  color: var(--muted);
}

/* ----- Touch: 44px targets below 768px and on coarse pointers ----- */
@media (max-width: 767px), (pointer: coarse) {
  #reader-panel .vote-trigger,
  #reader-panel .vote-submit-btn,
  #reader-panel .vote-cancel-btn { height: 44px; }
  #reader-panel .reader-share-btn { width: 44px; height: 44px; }
  #reader-panel .vote-input { min-height: 44px; }
}
@media (max-width: 767px) {
  #reader-panel .reader-social { margin-top: 20px; }
  /* Prompt on its own line, the three buttons share the width below it */
  #reader-panel .votes-prompt { flex-basis: 100%; margin: 0 0 2px; }
  #reader-panel .article-votes-display { width: 100%; }
  #reader-panel .vote-trigger { flex: 1 1 auto; padding: 0 12px; }
  #reader-panel .reader-share { margin-left: -14px; }
  #reader-panel .vote-form { padding: 12px; }
  /* 16px stops iOS Safari zooming the page on focus */
  #reader-panel .vote-input { font-size: 16px; }
  #reader-panel .vote-submit-btn,
  #reader-panel .vote-cancel-btn { flex: 1 1 0; }
}

/* ==========================================================================
   Phase 5 (2026-10-29): sidebar and footer. Sections under a 2px ink rule,
   no cards; real 7-day numbers; "Μόνο από μία πηγή"; the ροή box for first
   visits; a one-line footer.
   ========================================================================== */

/* The sticky header is ~165px now (masthead + sections + source filter);
   --chrome-h is kept current by a ResizeObserver in index.html */
.right-sidebar,
.dark .right-sidebar {
  top: var(--chrome-h, 165px);
  height: calc(100vh - var(--chrome-h, 165px));
  gap: 36px;
  padding: 28px 24px 40px;
  background: var(--paper);
  border-left: 1px solid var(--rule);
}

.side-section,
.right-sidebar .sidebar-widget,
.dark .right-sidebar .sidebar-widget {
  position: relative;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.side-section h2,
.right-sidebar .widget-header h2,
.dark .right-sidebar .widget-header h2 {
  margin: 0 0 12px;
  font: 600 18px/1.25 var(--serif);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.side-section p {
  margin: 0;
  font: 400 14px/1.55 var(--sans);
  color: var(--muted);
}
.right-sidebar .widget-header,
.dark .right-sidebar .widget-header {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.right-sidebar .widget-header i { display: none; }

/* Οι πηγές σε αριθμούς */
.facts-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 14px;
}
.facts-num {
  font: 700 34px/1 var(--serif);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.facts-label {
  margin-top: 6px;
  font: 400 13px/1.35 var(--sans);
  color: var(--muted);
}
#source-facts.is-unavailable .facts-numbers { display: none; }
.side-more {
  display: inline-block;
  margin-top: 12px;
  font: 600 14px/1.3 var(--sans);
  color: var(--ink);
  text-decoration: none;
}
.side-more:hover {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}
.side-more:focus-visible,
.single-link:focus-visible,
.side-btn:focus-visible,
.roe-close:focus-visible,
.site-foot a:focus-visible,
.site-foot-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Μόνο από μία πηγή */
.side-note { margin: -4px 0 12px !important; font-size: 13px !important; }
.single-list { margin: 0; padding: 0; list-style: none; }
.single-item { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.single-item:first-child { padding-top: 0; }
.single-item:last-child { border-bottom: 0; }
.single-link { display: block; color: inherit; text-decoration: none; }
.single-source {
  display: block;
  font: 600 13px/1.3 var(--sans);
  color: var(--ink);
}
.single-title {
  display: block;
  margin-top: 4px;
  font: 500 16px/1.32 var(--serif);
  color: var(--ink);
}
.single-link:hover .single-title {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}
.single-empty { font: 400 14px/1.5 var(--sans); color: var(--muted); }

/* Φτιάξε τη δική σου ροή (first visits) */
.roe-box { padding-right: 36px; }
.roe-box p { max-width: 46ch; }
.side-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin-top: 14px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-ui);
  background: var(--ink);
  color: var(--surface);
  font: 600 14px/1 var(--sans);
  cursor: pointer;
}
.side-btn:hover { opacity: 0.88; }
.roe-close {
  position: absolute;
  top: 8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-ui);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.roe-close:hover { background: var(--hover); color: var(--ink); }
#roe-slot-feed .roe-box { margin: 40px 0 8px; }
@media (hover: none) {
  .roe-close { width: 44px; height: 44px; top: 2px; right: -12px; }
  .side-btn { height: 44px; }
}
@media (max-width: 767px) {
  /* Same 16px gutter as the feed rows */
  #roe-slot-feed { padding: 0 8px; }
}

/* ----- Footer: one line ----- */
.site-foot,
.dark .site-foot {
  margin-top: auto;
  padding: 28px 0 40px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.site-foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
  font: 400 13px/1.5 var(--sans);
  color: var(--muted);
}
.site-foot-brand { font: 700 17px/1.2 var(--serif); color: var(--ink); }
.site-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot a,
.site-foot-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.site-foot a:hover,
.site-foot-btn:hover { color: var(--ink); text-decoration: underline; }
.site-foot-version { font-variant-numeric: tabular-nums; }
.site-foot-credit { margin-left: auto; }
@media (max-width: 767px) {
  .site-foot-inner { padding: 0 16px; }
  .site-foot-credit { margin-left: 0; }
}

/* custom.css sets every span to 1rem */
.site-foot span { font-size: inherit; }

/* ----- Phase 5 review fixes ----- */
/* At 1280px and below the sidebar is an off-canvas drawer with no opener:
   keep its links out of the tab order and away from screen readers */
@media (max-width: 1280px) {
  .right-sidebar:not(.open) { visibility: hidden; }
}
/* If the 7-day numbers cannot load, the section has nothing to say */
#source-facts.is-unavailable { display: none; }
/* The credit link must not rely on colour alone (WCAG 1.4.1) */
.site-foot-credit a { text-decoration: underline; text-underline-offset: 2px; }
/* Footer targets: 24px+ tall */
.site-foot-links a,
.site-foot-btn { display: inline-block; padding: 4px 0; }
/* Below 1024px the fixed bottom bar (44px + the iPhone safe area) sits over
   the end of the page */
@media (max-width: 1023px) {
  .site-foot,
  .dark .site-foot { padding-bottom: calc(40px + 44px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Phase 4 (2026-10-29): the lead cross-check block. The story most outlets
   ran in the last 6 hours, with each outlet's own headline, then up to two
   more multi-outlet stories, then the chronological feed (js/lead.js).
   ========================================================================== */
.lead-area { margin: 0 0 4px; }
.lead-area a { color: inherit; text-decoration: none; }
.lead-title a:hover,
.lead-outlet-title a:hover,
.lead-also-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}
/* An outline breaks into one box per line on wrapped headlines */
.lead-area a:focus-visible {
  outline: none;
  background: var(--focus-tint);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}
/* custom.css sets every span to 1rem */
.lead-label span,
.lead-meta span { font-size: inherit; }

.lead { padding: 8px 0 32px; border-bottom: 2px solid var(--ink); }
.lead-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 16px;
  font: 600 14px/1.3 var(--sans);
  color: var(--ink);
}
.lead-count { font-weight: 600; color: var(--red); }
.lead-when { font-weight: 400; color: var(--muted); }
.lead-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
}
@media (max-width: 1179px) {
  .lead-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
.lead-fig {
  margin: 0 0 18px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-img);
  background: var(--rule);
}
.lead-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lead-title {
  margin: 0 0 12px;
  font: 700 34px/1.14 var(--serif);
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.lead-dek {
  max-width: 62ch;
  margin: 0 0 14px;
  font: 400 16px/1.55 var(--sans);
  color: var(--muted);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font: 400 13px/1.3 var(--sans);
  color: var(--muted);
}
.lead-src { font-weight: 600; color: var(--ink); }

/* Each outlet's own headline: the cross-check */
.lead-outlets-title { margin: 0 0 4px; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.lead-outlets { margin: 0; padding: 0; list-style: none; }
.lead-outlets li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.lead-outlets li:last-child { border-bottom: 0; }
.lead-outlet-title {
  margin: 6px 0 0;
  font: 500 17px/1.32 var(--serif);
  color: var(--ink);
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lead-more { display: none; }
.lead-more[hidden] { display: none !important; }

/* Two more cross-checked stories */
.lead-also {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}
.lead-also.is-single { grid-template-columns: minmax(0, 1fr); }
.lead-also-item { min-width: 0; padding: 24px 0; }
.lead-also-item:first-child:not(:only-child) { padding-right: 28px; border-right: 1px solid var(--rule); }
.lead-also-item:last-child:not(:only-child) { padding-left: 28px; }
.lead-also-item > .lead-count { font: 600 13px/1.3 var(--sans); }
.lead-also-title {
  margin: 6px 0 10px;
  font: 600 21px/1.25 var(--serif);
  color: var(--ink);
  text-wrap: balance;
}
.lead-names { margin: 0 0 4px; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.lead-also-more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font: 600 14px/1.3 var(--sans);
  color: var(--ink);
}
.lead-also-more summary::-webkit-details-marker { display: none; }
.lead-also-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead-also-more summary i { font-size: 11px; color: var(--muted); transition: transform 0.2s ease; }
.lead-also-more[open] summary i { transform: rotate(180deg); }
.lead-also-more ul { margin: 0; padding: 0; list-style: none; }
.lead-also-more li { padding: 12px 0; border-top: 1px solid var(--rule); }
.lead-also-more .lead-outlet-title { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .lead-also-more summary i { transition: none; }
}

/* "Όλες οι ειδήσεις" between the lead and the chronological feed */
.feed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 32px 0 0;
}
.feed-head h2 { margin: 0; font: 600 22px/1.2 var(--serif); color: var(--ink); }
.feed-head p { margin: 0; font: 400 14px/1.4 var(--sans); color: var(--muted); }

/* The sidebar's numbers, for screens without the sidebar */
.facts-strip { display: none; }
@media (max-width: 1280px) {
  .facts-strip:not([hidden]) {
    display: block;
    margin: 20px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--rule);
    font: 400 14px/1.5 var(--sans);
    color: var(--muted);
  }
  .facts-strip strong { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
}

@media (max-width: 767px) {
  /* Same 16px gutter as the feed rows */
  .lead-area { padding: 0 8px; }
  .lead-title { font-size: 27px; line-height: 1.16; }
  .lead-fig { margin-bottom: 14px; }
  .lead-outlets:not(.expanded) li:nth-child(n + 3) { display: none; }
  .lead-outlets:not(.expanded) li:nth-child(2) { border-bottom: 0; }
  .lead-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: 600 14px/1.3 var(--sans);
    color: var(--ink);
  }
  .lead-more i { font-size: 11px; color: var(--muted); }
  .lead-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .lead-also { grid-template-columns: minmax(0, 1fr); }
  .lead-also-item:first-child:not(:only-child) { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .lead-also-item:last-child:not(:only-child) { padding-left: 0; }
  .feed-head { margin-top: 24px; }
}

/* ----- Phase 4 review fixes ----- */
/* The display rules above must not override the hidden attribute (quiet
   sections showed an empty "Όλες οι ειδήσεις" and a stray rule) */
.lead-area[hidden],
.lead[hidden],
.lead-also[hidden],
.feed-head[hidden],
.facts-strip[hidden] { display: none !important; }
/* Long words (hashtags, URLs) wrap instead of widening the page at 320px */
.lead-title,
.lead-also-title,
.lead-outlet-title,
.lead-dek { overflow-wrap: anywhere; }
/* One column below 1180px: a full-width 16:9 picture pushed the headline
   below the fold on tablets */
@media (max-width: 1179px) {
  .lead-fig { aspect-ratio: 2 / 1; max-height: 42vh; }
}
/* Outlets: 5 on wide screens, 2 on phones, the rest behind "Δες όλες τις N" */
.lead-outlets:not(.expanded) li:nth-child(n + 6) { display: none; }
.lead-outlets:not(.expanded) li:nth-child(5) { border-bottom: 0; }
.lead-more.has-desktop-overflow,
.lead-more {
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 600 14px/1.3 var(--sans);
  color: var(--ink);
}
.lead-more.has-desktop-overflow { display: inline-flex; }
.lead-more i { font-size: 11px; color: var(--muted); }
.lead-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* aspect-ratio + max-height narrowed the box instead of cropping the picture:
   keep it full width and give it a height (2:1 on phones, capped on tablets) */
@media (max-width: 1179px) {
  .lead-fig { width: 100%; aspect-ratio: auto; height: min(42vh, 50vw); max-height: none; }
}

/* ==========================================================================
   Polish pass (2026-10-30): parts of the main page the phases did not reach.
   The mobile Μενού sheet and bottom bar onto the tokens, the new-articles
   notice, one mobile gutter, an empty sticky strip.
   ========================================================================== */

/* The sticky controls row has been empty since search moved into the header.
   On phones its padding painted a 24px strip under the top bar (navy in dark) */
.sticky-controls:empty { display: none; }

/* Phones: "Όλες οι ειδήσεις" on the 16px gutter of the lead and the rows */
@media (max-width: 767px) {
  .feed-head { margin-left: 8px; margin-right: 8px; }
}

/* ----- Mobile bottom bar ----- */
.mobile-bottom-bar,
.dark .mobile-bottom-bar {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  box-shadow: none;
}
.mobile-bottom-bar-item,
.dark .mobile-bottom-bar-item { color: var(--ink); }
.mobile-bottom-bar-item:not(:last-child),
.dark .mobile-bottom-bar-item:not(:last-child) { border-right-color: var(--rule); }
.mobile-bottom-bar-item:hover,
.dark .mobile-bottom-bar-item:hover { background: var(--hover); color: var(--ink); }
.mobile-bottom-bar-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ----- Mobile Μενού sheet: the section nav and the ⋯ menu, for phones -----
   It kept the old tiles (a colour per section, red tool icons, grey boxes).
   Now: words-only sections like the desktop nav, tools as quiet rows like
   the ⋯ menu, hairlines between rows and a 2px ink rule between groups. */
.mobile-sheet-container,
.dark .mobile-sheet-container {
  background: var(--surface);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  box-shadow: var(--shadow);
}
@media (max-width: 480px) {
  .mobile-sheet-container,
  .dark .mobile-sheet-container { border-radius: 0; }
}
.mobile-sheet-header,
.dark .mobile-sheet-header,
.mobile-sheet-search,
.dark .mobile-sheet-search { border-bottom-color: var(--rule); }
.mobile-sheet-title,
.dark .mobile-sheet-title { font: 600 20px/1.2 var(--serif); color: var(--ink); }
.mobile-sheet-close,
.dark .mobile-sheet-close,
.mobile-sheet-close:hover,
.dark .mobile-sheet-close:hover {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-ui);
  background: none;
  color: var(--ink);
}
.mobile-sheet-close:hover,
.dark .mobile-sheet-close:hover { background: var(--hover); }

/* Search: the masthead field and an ink button (primary buttons are ink) */
.simple-search-input,
.dark .simple-search-input,
.simple-search-input:focus,
.dark .simple-search-input:focus {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--field);
  border-radius: var(--r-ui);
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1.3 var(--sans);
}
.simple-search-input::placeholder,
.dark .simple-search-input::placeholder { color: var(--muted); }
.simple-search-input:focus,
.dark .simple-search-input:focus {
  border-color: var(--ink);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.simple-search-btn,
.simple-search-btn:hover {
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-ui);
  background: var(--ink);
  color: var(--surface);
}
.simple-search-btn:hover { opacity: 0.88; }

/* Sections */
.smart-category-nav { gap: 0 16px; margin-bottom: 0; }
.category-nav-item,
.dark .category-nav-item,
.category-nav-item:hover,
.dark .category-nav-item:hover,
.category-nav-item.active,
.dark .category-nav-item.active {
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  transform: none;
}
.category-nav-item:hover,
.dark .category-nav-item:hover { background: var(--hover); }
.category-nav-item .category-icon { display: none; }
.category-name,
.dark .category-name {
  overflow: visible; /* the active rule sits below the text box */
  font: 500 17px/1.2 var(--sans);
  color: var(--ink);
}
/* Active: red with a 2px red rule under the word, as in the desktop nav */
.category-nav-item.active .category-name,
.dark .category-nav-item.active .category-name {
  font-weight: 600;
  color: var(--red);
  text-decoration-line: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* Tools */
.quick-actions,
.dark .quick-actions {
  gap: 0 16px;
  margin-top: 20px;
  padding-top: 4px;
  border-top: 2px solid var(--ink);
}
.quick-action-btn,
.dark .quick-action-btn,
.quick-action-btn:hover,
.dark .quick-action-btn:hover {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  transform: none;
}
.quick-action-btn:hover,
.dark .quick-action-btn:hover { background: var(--hover); }
.quick-action-btn i,
.dark .quick-action-btn i {
  width: 16px;
  font-size: 15px;
  text-align: center;
  color: var(--muted);
}
.quick-action-btn span,
.dark .quick-action-btn span,
.quick-action-btn:hover span,
.dark .quick-action-btn:hover span {
  font: 400 15px/1.3 var(--sans);
  color: var(--ink);
}
/* display:flex above beat the hidden attribute, so Ειδοποιήσεις still showed
   where the browser has no Notification API (iPhone Safari outside the app) */
.quick-action-btn[hidden] { display: none; }
.mobile-sheet-container button:focus-visible,
.mobile-sheet-container a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mobile-sheet-close:focus-visible,
.simple-search-btn:focus-visible { outline-offset: 2px; }

/* ----- New-articles notice -----
   Ink bell, red count (the signal), a plain panel, an ink button. No pulse:
   it appears once with a short rise. On desktop the bell sits under the
   masthead, so the panel opens below it (it opened upward, off the screen). */
.new-content-badge:not(.hidden) { animation: nc-rise 240ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes nc-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.new-content-badge-trigger,
.new-content-badge-trigger:hover,
.new-content-badge-trigger:active {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--shadow);
  animation: none;
  transform: none;
}
.new-content-badge-trigger:hover { opacity: 0.88; }
.new-content-badge-trigger i { font-size: 17px; }
.new-content-badge-count {
  border: 2px solid var(--paper);
  background: var(--fill); /* white on --fill is 6.3:1 in both themes */
  box-shadow: none;
  font: 700 12px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.new-content-badge-popup,
.dark .new-content-badge-popup {
  width: 300px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
}
.new-content-popup-header,
.dark .new-content-popup-header {
  gap: 8px;
  padding: 14px 8px 0 16px;
  background: none;
  border: 0;
}
.new-content-popup-title {
  flex: 1;
  font: 600 18px/1.25 var(--serif);
  color: var(--ink);
}
.new-content-popup-close,
.dark .new-content-popup-close,
.new-content-popup-close:hover,
.dark .new-content-popup-close:hover {
  width: 32px;
  height: 32px;
  border-radius: var(--r-ui);
  background: none;
  color: var(--muted);
}
.new-content-popup-close:hover,
.dark .new-content-popup-close:hover { background: var(--hover); color: var(--ink); }
/* custom.css paints every header icon red, the close glyph included */
.new-content-popup-header .new-content-popup-close i { font-size: 15px; color: inherit; }
.new-content-popup-body,
.dark .new-content-popup-body {
  padding: 4px 16px 14px;
  font: 400 14px/1.45 var(--sans);
  color: var(--muted);
}
.new-content-popup-body p { margin: 0; }
.new-content-popup-actions,
.dark .new-content-popup-actions {
  padding: 0 16px 16px;
  background: none;
  border: 0;
}
.new-content-refresh-btn,
.new-content-refresh-btn:hover {
  min-height: 44px;
  border-radius: var(--r-ui);
  background: var(--ink);
  color: var(--surface);
  box-shadow: none;
  transform: none;
  font: 600 14px/1 var(--sans);
}
.new-content-refresh-btn:hover { opacity: 0.88; }
.new-content-refresh-btn:hover i { animation: none; }
.new-content-badge-trigger:focus-visible,
.new-content-popup-close:focus-visible,
.new-content-refresh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 769px) {
  .new-content-badge-popup {
    top: calc(100% + 8px);
    bottom: auto;
    transform: translateY(-6px);
  }
  .new-content-badge-popup.show { transform: none; }
}
/* Phones: clear the bottom bar and the iPhone home indicator */
@media (max-width: 768px) {
  .new-content-badge { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .new-content-badge-trigger,
  .new-content-badge-trigger:hover,
  .new-content-badge-trigger:active { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .new-content-badge:not(.hidden) { animation: none; }
  .new-content-badge-popup { transition: none; }
}