:root {
  --bg: #12151a;
  --panel: #1a1f27;
  --line: #2b323d;
  --text: #e6e9ee;
  --muted: #8c96a5;
  --accent: #ffb454;
  --link: #7fb2ff;
}

* { box-sizing: border-box; }

/* Country flags. Chrome and Edge on Windows have no flag emoji and draw the two letters instead, so
   the flags come from a bundled font that holds nothing but them (Twemoji artwork, CC-BY 4.0, via
   the MIT-licensed country-flag-emoji-polyfill). unicode-range confines it to the regional-indicator
   characters a flag is made of; it is first in the font stack and still touches no other text. */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url("TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 "Twemoji Country Flags", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 4;
}

header h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--accent);
}

/* The logo in place of the word "nws" (since 2026-10-25, the owner's request): their mark on a light
   rounded tile, as it was drawn for a light background. Straight on this dark header its darker
   blocks were all but invisible (1.35:1). */
.logo {
  display: block;
  width: 36px;
  height: 36px;
  padding: 4px;
  border-radius: 8px;
  background: #f3f4f6;
}

/* The logo with the privacy link under it (since 2026-10-27, the owner's request), both at the
   start, so a long word ("Confidențialitate") does not shift the logo; the header's pickers keep to
   its far end. */
.brand { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
#privacy-link { color: var(--muted); font-size: 11px; line-height: 1.2; }
#privacy-link:hover { color: var(--text); }

/* The header's end (since 2026-11-07, the owner's request): the country, the language and the
   account in a row, and under them the link to the project's own site, as Privacy sits under the
   logo. Not positioned, so that on a phone the account panel still opens under the whole header. */
.header-end { flex: none; margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.header-buttons { display: flex; align-items: center; gap: 12px; }
#about-link { color: var(--muted); font-size: 11px; line-height: 1.2; white-space: nowrap; }
#about-link:hover { color: var(--text); }

button {
  padding: 9px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #1a1205;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.flag { font-size: 18px; line-height: 1; }

/* Present for screen readers, absent visually. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===================================================================== the row of cards ===== */

/* The page is the header and the row; the row scrolls sideways and each card scrolls its own
   timeline, so the page itself never scrolls and a card reaches from the header to the bottom. */
body.deck-page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Above the row's arrows, so that the header's menus open over them. */
body.deck-page header { position: relative; z-index: 9; flex: none; gap: 12px; padding: 10px 20px; }
body.dragging-card, body.resizing-card { user-select: none; }
body.dragging-card { cursor: grabbing; }

#deck-wrap { position: relative; flex: 1; min-height: 0; }

#deck {
  position: relative;          /* the cards' offsetLeft is measured from here (stepDeck) */
  display: flex;
  align-items: flex-start;
  gap: 12px;                   /* CARD_GAP in app.js */
  height: 100%;
  padding: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
#deck.dragging { scroll-snap-type: none; }

/* The arrows over the row's edges, shown only where there is more to scroll to. */
.deck-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(26, 31, 39, 0.94);
  color: var(--text);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.deck-arrow:hover { border-color: var(--accent); color: var(--accent); }
.deck-arrow[hidden] { display: none; }
#deck-prev { left: 6px; }
#deck-next { right: 6px; }

/* ============================================================================= bands ===== */

/* Lines of tags: the categories in the header, then under it the subcategories, the world trends and
   the header country's trends. The categories and subcategories scroll sideways by their arrows, a
   wheel, a swipe or the arrow keys, their scrollbar hidden; the trends wrap onto two lines, and ▾
   shows three more (.band-rows). Small and tight since 2026-10-27, the owner's request. */
.band {
  --tag-h: 22px;
  --tag-gap: 4px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.band[hidden] { display: none; }
.band-title {
  flex: none;
  min-width: 88px;
  color: var(--muted);
  font-size: 10px;
  line-height: var(--tag-h);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.band-scroll { position: relative; flex: 1; min-width: 0; }
.band-row {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 1px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.band-row::-webkit-scrollbar { display: none; }
.band-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(26, 31, 39, 0.96);
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.band-arrow:hover { border-color: var(--accent); color: var(--accent); }
.band-arrow[hidden] { display: none; }
.band-prev { left: 0; }
.band-next { right: 0; }

/* The categories beside the logo (since 2026-10-27): they take the header's spare width. */
header .band { flex: 1 1 240px; min-width: 0; padding: 0; border: 0; background: none; }

/* A band of rows (the trends): two lines (one on a phone), and ▾ (.band-more) opens three more,
   scrolling past those. */
.band-rows { align-items: flex-start; }
.band-rows .band-row {
  flex-wrap: wrap;
  gap: var(--tag-gap) 6px;
  overflow: hidden;
  max-height: calc(2 * var(--tag-h) + var(--tag-gap) + 2px);
}
.band-rows.is-open .band-row {
  max-height: calc(5 * var(--tag-h) + 4 * var(--tag-gap) + 2px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.band-more {
  flex: none;
  align-self: flex-end;
  width: var(--tag-h);
  height: var(--tag-h);
  margin-bottom: 1px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}
.band-more:hover { border-color: var(--accent); color: var(--accent); }
.band-more[hidden] { display: none; }

/* In the subcategory band, each chosen category's name before its subcategories: "Sport ▸". */
.subcategory-group {
  flex: none;
  padding-inline-start: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: var(--tag-h);
  white-space: nowrap;
}
.subcategory-group:first-child { padding-inline-start: 0; }
.subcategory-group::after { content: "▸"; margin-inline-start: 4px; }

/* A trend: its name opens its timeline, its ✕ hides it. */
.trend {
  position: relative;          /* holds the hidden "new", which would otherwise widen the page */
  flex: none;
  display: flex;
  align-items: center;
  height: var(--tag-h);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}
.trend:hover, .trend:focus-within { border-color: var(--muted); }
.trend.is-fresh { border-color: rgba(255, 180, 84, 0.6); }
.trend-open {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 240px;
  padding: 0 3px 0 9px;
  border-radius: 999px 0 0 999px;
  background: none;
  color: var(--text);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trend-open:hover { color: var(--accent); }
.trend-new { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.trend-hide {
  padding: 0 8px 0 4px;
  border-radius: 0 999px 999px 0;
  background: none;
  color: var(--muted);
  font-size: 10px;
  line-height: 20px;
  font-weight: 400;
}
.trend-hide:hover { color: var(--text); }

/* A category: on (filled) shows its events in every card, off (struck through) hides them. */
.category-toggle,
.band-all {
  flex: none;
  padding: 0 9px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: rgba(255, 180, 84, 0.14);
  color: var(--text);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}
.category-toggle:hover { background: rgba(255, 180, 84, 0.26); }
.category-toggle[aria-pressed="false"] {
  border-color: var(--line);
  background: none;
  color: var(--muted);
  text-decoration: line-through;
}
.category-toggle[aria-pressed="false"]:hover { color: var(--text); }

/* A band's "All", there only while something is off or hidden: an outlined button that shows it all
   again. */
.band-all {
  border-color: var(--line);
  background: none;
  color: var(--muted);
  font-weight: 700;
}
.band-all:hover { border-color: var(--accent); color: var(--text); }

/* The empty card after the last one. It takes whatever room the cards leave, so on a first visit
   it is the right half of the screen; once the cards fill the row it is a column past their end. */
.add-card {
  flex: 1 0 260px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
  scroll-snap-align: start;
}
.add-card[hidden] { display: none; }
.add-card .plus {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 2px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  font-size: 56px;
  line-height: 1;
}
.add-card:hover, .add-card:focus-visible { border-color: var(--accent); color: var(--text); }
.add-card:hover .plus, .add-card:focus-visible .plus { border-color: var(--accent); }

/* ============================================================================== a card ===== */

.card {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  width: calc(50% - 6px);      /* app.js sets the width the reader chose */
  min-width: 300px;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 220px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  scroll-snap-align: start;
  container-type: inline-size;  /* its controls arrange themselves by its width, not the window's */
}
/* Over its neighbours while a menu or the suggestions may reach across them. */
.card:focus-within, .card.menu-open { z-index: 3; }
.card.dragging { z-index: 6; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); opacity: 0.95; }
.card.resizing { border-color: var(--accent); }
.card.flash { animation: card-flash 1.4s ease; }
@keyframes card-flash {
  0%, 100% { box-shadow: none; }
  25% { box-shadow: 0 0 0 2px var(--accent); }
}

/* The card's controls: grip, search, country, language, close. They wrap in a narrow card. */
.card-bar {
  position: relative;          /* the share panel drops down across it */
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  padding-inline-start: 4px;
  border-bottom: 1px solid var(--line);
}

.card-grip {
  flex: none;
  padding: 4px 5px;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  cursor: grab;
  touch-action: none;          /* a finger on the grip drags the card, not the page */
}
.card-grip:hover, .card-grip:focus-visible { color: var(--text); background: var(--line); }
.card.dragging .card-grip { cursor: grabbing; }

.card-close {
  flex: none;
  margin-inline-start: auto;
  padding: 4px 8px;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}
.card-close:hover, .card-close:focus-visible { color: #ff7b72; background: var(--line); }

.card-search { display: flex; gap: 6px; flex: 1 1 220px; min-width: 0; }
/* Search as its magnifier alone (since 2026-11-06, the owner's request). */
.card-search button[type="submit"] { display: flex; align-items: center; padding: 7px 10px; }
.search-icon { display: block; }

/* A narrow card gives the search a row of its own, under the grip, country, language and close,
   rather than squeezing it to a few letters or pushing the close button onto a line by itself. */
@container (max-width: 560px) {
  .card-search { order: 1; flex-basis: 100%; }
  /* The pickers now start the bar, so the country menu opens to their right, not off the edge. */
  .card .country-menu { inset-inline-start: 0; inset-inline-end: auto; }
}

/* Anchors the suggestion list to the input, so it lines up with the box. */
.combo { position: relative; flex: 1; min-width: 0; }

.q {
  width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
.q:focus { outline: none; border-color: var(--accent); }

.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 336px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.suggestions li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
/* Hover and keyboard highlight are deliberately the same: there is one highlighted row at a time,
   however you got to it. */
.suggestions li:hover,
.suggestions li[aria-selected="true"] { background: rgba(255, 180, 84, 0.15); }
/* The matched run, not a yellow highlighter block. */
.suggestions mark { background: none; color: var(--accent); font-weight: 600; }
.suggestions .count { font-size: 12px; }

/* The country and language buttons, here and on the privacy page. */
.picker-button,
#lang-button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.picker-button:hover, .picker-button[aria-expanded="true"],
#lang-button:hover, #lang-button[aria-expanded="true"] { border-color: var(--accent); }
.picker-button .caret, #lang-button .caret { color: var(--muted); font-size: 12px; }
.picker-button .flag:empty { display: none; }
.country-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.lang-code { font-size: 12px; letter-spacing: 0.06em; }

.country-picker, .lang-picker, #lang-picker { position: relative; flex: none; }

.country-menu,
.lang-menu,
#lang-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 5;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.country-menu[hidden], .lang-menu[hidden], #lang-menu[hidden] { display: none; }
.country-menu { width: 290px; }
.lang-menu, #lang-menu { width: 210px; max-height: 440px; overflow-y: auto; padding: 6px; }

.country-filter {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.country-filter:focus { outline: none; border-color: var(--accent); }

.country-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
}
.country-list li,
.lang-list li,
#lang-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
}
.country-list li:hover,
.country-list li.active,
.lang-list li:hover,
#lang-list li:hover { background: var(--line); }
.country-list li[aria-selected="true"],
.lang-list li[aria-selected="true"],
#lang-list li[aria-selected="true"] { color: var(--accent); }
.country-list li .count { margin-inline-start: auto; font-size: 12px; }
/* Between the world, the United States, Europe and the rest. */
.country-list li.separator,
.country-list li.separator:hover { height: 1px; margin: 5px 6px; padding: 0; background: var(--line); cursor: default; }
.country-list li.none { color: var(--muted); cursor: default; }
.lang-list, #lang-list { list-style: none; margin: 0; padding: 0; }

.country-menu .credit { margin: 8px 4px 0; font-size: 11px; color: var(--muted); }
.country-menu .credit a { color: var(--muted); }

/* The card's timeline, which scrolls on its own. Scroll anchoring is app.js's (restorePlace), so the
   browser's own does not move the list a second time when a refresh adds events above. */
.card-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 8px 12px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* "New events above": stuck to the top of a scrolled card, taking no room in the list. */
.new-pill {
  position: sticky;
  top: 4px;
  z-index: 4;
  display: block;
  height: 30px;
  margin: 0 auto -30px;
  padding: 0 14px;
  border-radius: 15px;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.new-pill[hidden] { display: none; }

/* Follow and the sources dropdown sit in the card's bar beside the language (since 2026-10-23, the
   owner's request), the size of the pickers there. */
.follow-button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  line-height: 0;
  cursor: pointer;
}
.follow-button:hover { border-color: var(--accent); color: var(--accent); }
.follow-button:disabled { opacity: 0.6; cursor: default; }
.follow-button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.follow-button[aria-pressed="true"] svg { fill: currentColor; }
.follow-button[hidden] { display: none; }

/* Share: an icon button beside Follow, and its panel, which drops down across the card's bar as the
   sources panel does: the picture's preview, then a button per way to share. */
.share-button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  line-height: 0;
  cursor: pointer;
}
.share-button:hover, .share-button[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.share-button[hidden] { display: none; }
.share-panel {
  position: absolute;
  inset-inline: 8px;
  top: calc(100% - 2px);
  z-index: 6;
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.share-panel[hidden] { display: none; }
.share-wait { margin: 6px 4px; color: var(--muted); }
.share-preview {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.share-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.share-target {
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.share-target:hover, .share-target:focus-visible { border-color: var(--accent); color: var(--accent); }
.share-target.share-system { grid-column: 1 / -1; background: var(--accent); border-color: var(--accent); color: #1a1205; font-weight: 700; }
.share-target.share-plain { color: var(--muted); }

/* Subjects and Upcoming: one row above the timeline (the owner's design, 2026-10-25), each opening
   its panel below the row (app.js's Disclosure), closed by default. */
.card-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-groups:has(> :not([hidden])) { margin: 0 0 12px; }
.group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  user-select: none;
}
.group-toggle[hidden] { display: none; }
.group-toggle::before { content: "▸"; transition: transform 0.12s ease; }
.group-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.group-toggle:hover,
.group-toggle[aria-expanded="true"] { border-color: var(--accent); }

/* Subjects' panel: a row of chips, the first ("All") widening the search again. */
.subject-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.subject-list[hidden] { display: none; }
.subject-list button {
  display: flex;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  font-size: 13px;
  text-align: start;
}
.subject-list button:hover { border-color: var(--accent); }
.subject-list button[aria-current="true"] { border-color: var(--accent); background: #232a34; }

.notice { color: var(--muted); padding: 32px 0; }
.notice[hidden] { display: none; }
.notice.error { color: #ff8f8f; }

/* The count of what has been hidden, with the way back. Quiet: it is a note about the view. */
.hidden-note { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.hidden-note[hidden] { display: none; }
.restore-hidden {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 400;
  color: var(--link);
  cursor: pointer;
  text-decoration: underline dotted;
}

/* Upcoming's panel: the events dated past tomorrow, soonest first, above the timeline. */
.upcoming-list { margin: 0 0 16px; }
.upcoming-list[hidden] { display: none; }

/* ======================================================================== the timeline ===== */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline-start: 22px;
  border-inline-start: 2px solid var(--line);
}

.day { position: relative; padding: 0 0 12px; padding-inline-start: 22px; }

/* The day's date stays at the top of the scrolled card while its events pass under it, until the
   next day's date pushes it out (since 2026-11-04, the owner's request). It is opaque, and reaches
   back over the day's padding, where an opened event's frame sits (margin-inline-start: -11px).
   Chrome sticks it below the card body's 8px padding-top, so the shadow covers that strip too;
   at rest it falls on empty space (a day's padding-bottom, or the 8px+ margin above the first). */
.day > time {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  margin-inline-start: -22px;
  padding-inline-start: 22px;
  padding-bottom: 2px;
  background: var(--panel);
  box-shadow: 0 -8px 0 var(--panel);
  font-weight: 600;
  color: var(--accent);
}

/* Marker sits on the rule itself; the -29px is the day's padding plus the border width. It belongs
   to the date, so it stays beside it while the date is stuck. */
.day > time::before {
  content: "";
  position: absolute;
  inset-inline-start: -29px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
}

/* Padded dates are dimmed, so "February 2022" does not read as a specific day. */
.day > time.approx { color: var(--muted); font-weight: 500; }

.event { padding: 0; border-top: 1px solid var(--line); }
.day .event:first-of-type { border-top: 0; }

/* An event that arrived while the page was open, or since the reader last looked: framed in the
   accent colour, with a "new" badge before its headline, until it is opened or NEW_MS has passed. */
.event.is-new {
  margin: 3px 0;
  padding-inline: 8px;
  border: 1px solid rgba(255, 180, 84, 0.55);
  border-inline-start-width: 4px;
  border-radius: 6px;
  background: rgba(255, 180, 84, 0.07);
}
.day .event.is-new:first-of-type { border-top: 1px solid rgba(255, 180, 84, 0.55); }
.event.is-new + .event { border-top: 0; }

/* "new" for screen readers only (visually-hidden); the frame above is what shows. */
.event:not(.is-new) .new-badge { display: none; }

/* The closed state: one row, the headline and nothing else. Everything below is revealed on open. */
/* The event's emoji, before its headline: a fixed width so the headlines still line up. */
.event > summary .emoji { flex: 0 0 1.4em; text-align: center; font-size: 15px; line-height: 1; }

.event > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;           /* Chrome/Safari */
}
.event > summary::-webkit-details-marker { display: none; }

/* A caret drawn rather than inherited, so it is the same on every browser and rotates on open. */
.event > summary::before {
  content: "▸";
  color: var(--muted);
  flex: none;
  transition: transform 0.12s ease;
}
.event[open] > summary::before { transform: rotate(90deg); }
.event > summary:hover .headline { color: var(--link); }

/* Good news, bad news, neither — applied to the headline and the description together, so a run of
   red down one date says at a glance what reading forty sentences would not.
   Nudged lighter than a literal dark green and dark red: on this background (#12151a) the textbook
   #006400 and #8b0000 are close to unreadable. */
.sentiment-positive > summary .headline,
.sentiment-positive > p { color: #2f9e44; }

/* Bad news in light red (since 2026-10-25, the owner's request): dark red on this background was hard
   to read, and the white boxes tried on 2026-10-23 broke up the column. #ff8a80 is about 8:1 against
   #12151a, as readable as the neutral white. */
.sentiment-negative > summary .headline,
.sentiment-negative > p { color: #ff8a80; }

/* Explicitly white rather than inherited, so a neutral judgement is visibly a verdict, not an
   absence of one. */
.sentiment-neutral > summary .headline,
.sentiment-neutral > p { color: #ffffff; }

/* Links keep the sentiment colour of the text they sit in; only hover overrides it. */
.event .entity-link { color: inherit; }

/* One line, whatever the headline length — the point of the collapsed row is a scannable column. */
.headline {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Where it happened, after the headline, in timelines that mix countries (app.js flagsOf). */
.event > summary .event-flags { flex: none; font-size: 14px; line-height: 1; letter-spacing: 2px; }

/* The report count is the one thing worth seeing before deciding to open an entry. */
.event > summary .reports {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 7px;
}

/* The per-event hide control. Reserved space rather than display:none, so revealing it on hover
   does not reflow the headline beside it. */
.hide-toggle {
  flex: none;
  background: none;
  border: 0;
  padding: 0 2px;
  font: inherit;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.event > summary:hover .hide-toggle,
.hide-toggle:focus { opacity: 1; }
.hide-toggle:hover { color: #c92a2a; }
/* Keyboard users never trigger the hover rule, so focus has to bring it back on its own. */
.hide-toggle:focus { outline: 1px solid var(--link); outline-offset: 2px; }

.event > *:not(summary) { margin-inline-start: 20px; }
.event p { margin: 0 0 4px; margin-inline-start: 20px; }
.event[open] { padding-bottom: 9px; }

/* An opened event is a framed box whose headline row is its header bar (the owner's design,
   2026-10-25): the open one stands apart from the closed rows around it, and its headline shows in
   full instead of cut to one line. */
.event[open] {
  /* Nothing above it and the header's padding as a closed row's, so opening an event does not move
     its headline (the owner's request); the gap goes below instead. */
  margin: 0 0 6px;
  /* Out by the border and the header's padding (1 + 10 px), so the caret, emoji and headline stay
     exactly where the closed rows have them (the owner's request). Only on the start side: the
     card's column has no room past its end, and the card would scroll sideways. */
  margin-inline-start: -11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}
.day .event[open]:first-of-type { border-top: 1px solid var(--line); margin-top: -1px; }
.event[open] + .event { border-top: 0; }
.event[open] > summary {
  padding: 3px 0;
  padding-inline: 10px 3px;
  margin-bottom: 8px;
  background: #252c36;
  border-bottom: 1px solid var(--line);
}
.event[open] > summary .headline { white-space: normal; font-weight: 600; }
/* The description and what follows it stay where they were before the box: under the emoji. */
.event[open] > *:not(summary) { margin-inline: 31px 12px; }
.event[open] > p { margin-inline: 31px 12px; }

.meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; }
.meta a { color: var(--link); text-decoration: none; }
.meta a:hover { text-decoration: underline; }

/* One line per outlet that reported the event. Several of these are usually the same story in
   another language, so the language tag leads and the headline follows it. */
.sources { list-style: none; margin: 0 0 4px; padding: 0; font-size: 13px; }
.sources li { display: flex; align-items: baseline; gap: 8px; padding: 1px 0; }
.sources a { color: var(--link); text-decoration: none; }
.sources a:hover { text-decoration: underline; }
/* The tag is a fixed width so the headlines line up rather than stepping in and out with it. */
.sources .lang { flex: 0 0 auto; min-width: 26px; text-align: center; }
/* Shown in an opened entry while its sources are fetched. */
.sources .loading { color: var(--muted); font-size: 13px; list-style: none; }

.lang {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 5px;
}

.reports { color: var(--accent); }

/* Subjects and keywords, linked where the text names them. No underline and no colour of its own:
   at rest these read as ordinary prose; the affordance is on hover. */
.entity-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.entity-link:hover { color: var(--link); text-decoration: underline; }

/* Marks an entry that no subject label reached — a looser match than the rest of the timeline. */
.by-meaning {
  font-size: 11px;
  letter-spacing: 0.04em;
  border: 1px dashed var(--line);
  border-radius: 3px;
  padding: 0 5px;
}

/* "Read more", "Sources" and "Related", side by side at the start of an opened event's link row,
   designed as the Search button (the owner's design, 2026-10-25). What they open comes below the
   row: the long summary, the outlets' links, the related events. Pressed, a button is darker. */
.read-more-toggle,
.sources-toggle,
.related-toggle {
  padding: 4px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #1a1205;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}
.read-more-toggle:hover,
.sources-toggle:hover,
.related-toggle:hover { background: #ffc477; }
.read-more-toggle[aria-expanded="true"],
.sources-toggle[aria-expanded="true"],
.related-toggle[aria-expanded="true"] { background: #d99440; }
.related-toggle:disabled { opacity: 0.6; cursor: default; }
.meta { align-items: center; }
.meta ~ .sources { margin-top: 6px; }

/* What "Read more" opens: the report's long summary, a lead and the key points, in the page's own
   text colour whatever the event's sentiment. */
.long-summary {
  margin: 4px 0 6px;
  padding: 6px 12px;
  border-inline-start: 2px solid var(--line);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.event .long-summary p { margin: 0 0 6px; }
.long-summary ul { margin: 0 0 6px; padding-inline-start: 18px; }
.long-summary li { margin: 2px 0; }
.event .long-summary .credit { margin: 0; font-size: 12px; color: var(--muted); }
/* The long summary in the description's place (since 2026-10-30): set as the description was, with no
   frame of its own. Its last line keeps no margin, so the gap above the buttons stays as it was with
   the "Summarised from" line (removed 2026-11-05). */
.event .long-summary.in-place { margin-block: 0 6px; padding: 0; border: 0; }
.event .long-summary.in-place > :last-child { margin-bottom: 0; }
/* What "Read more" opens: the report's own headline, linked. */
.long-summary .report-link { color: var(--link); text-decoration: none; font-weight: 500; }
.long-summary .report-link:hover { text-decoration: underline; }

.related {
  list-style: none;
  margin: 6px 0 2px;
  padding: 6px 0;
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--line);
  font-size: 13px;
}
.related li { display: flex; align-items: baseline; gap: 8px; padding: 1px 0; }
.related .score { color: var(--accent); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.related .when { color: var(--muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.related a { color: var(--link); text-decoration: none; }
.related a:hover { text-decoration: underline; }
.related .none { color: var(--muted); }

/* "Show older events": the next page of a long timeline, below it. */
.more-events {
  display: block;
  margin: 14px 0 0;
  margin-inline-start: 22px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--link);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.more-events:hover { border-color: var(--accent); }
.more-events:disabled { color: var(--muted); cursor: default; }
.more-events[hidden] { display: none; }

/* ==================================================================== resizing a card ===== */

/* The right edge (width), the bottom edge (height) and the corner (both), reaching into the gap
   between cards. Right, not inline-end: the row runs left to right in every language. */
.resize-e, .resize-s, .resize-se { position: absolute; z-index: 2; touch-action: none; }
.resize-e { top: 12px; bottom: 12px; right: -8px; width: 12px; cursor: ew-resize; }
.resize-s { left: 12px; right: 12px; bottom: -8px; height: 12px; cursor: ns-resize; }
.resize-se { right: -8px; bottom: -8px; width: 20px; height: 20px; cursor: nwse-resize; }

/* A grip line shows where the edge can be taken, on hover and while focused or dragged. */
.resize-e::after, .resize-s::after {
  content: "";
  position: absolute;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.resize-e::after { top: 50%; left: 4px; width: 4px; height: 48px; transform: translateY(-50%); }
.resize-s::after { left: 50%; top: 4px; width: 48px; height: 4px; transform: translateX(-50%); }
.resize-e:hover::after, .resize-e:focus-visible::after,
.resize-s:hover::after, .resize-s:focus-visible::after,
.card.resizing .resize-e::after, .card.resizing .resize-s::after { opacity: 0.85; }
.resize-e:focus-visible, .resize-s:focus-visible { outline: none; }

.resize-se::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  opacity: 0.45;
}
.card:hover .resize-se::after { opacity: 0.9; }

/* ========================================================================= the account ===== */

#account { position: relative; }
#account[hidden] { display: none; }

#account-button {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
#account-button:hover,
#account-button[aria-expanded="true"] { border-color: var(--accent); }

/* Signed out, a person icon in place of the words "Sign in" (since 2026-11-07, the owner's request),
   in the same round button as the reader's picture once signed in. */
#account-button.is-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}

/* Signed in, the account button is the reader's picture (since 2026-10-25, the owner's request): a
   round letter on a colour of its own (account.js avatar()), ringed in amber when hovered or open. */
#account-button.has-avatar {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  overflow: hidden;
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

#account-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 9;
  width: 320px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
#account-panel[hidden] { display: none; }
#account-panel p { margin: 0 0 10px; }
#account-panel h3 {
  margin: 14px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
#account-panel .hint { font-size: 13px; color: var(--muted); }
#account-panel .status { font-size: 13px; color: var(--muted); min-height: 1em; margin: 8px 0 0; }
#account-panel .status.error { color: #ff7b72; }
#account-panel .status:empty { display: none; }

.account-form { display: flex; flex-direction: column; gap: 8px; }
.account-form label { font-size: 13px; color: var(--muted); }
.account-form input {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.account-form input:focus { outline: none; border-color: var(--accent); }

#account-panel button {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#account-panel button:hover { border-color: var(--accent); }
#account-panel button:disabled { opacity: 0.6; cursor: default; }
#account-panel button[type="submit"],
#account-panel button.primary { background: var(--accent); border-color: var(--accent); color: #1a1205; font-weight: 600; }
#account-panel button.danger { color: #ff7b72; }
#account-panel button.danger:hover { border-color: #ff7b72; }

.followed { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.followed li { display: flex; align-items: center; gap: 4px; }
#account-panel .followed button.open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border-color: transparent;
  background: none;
  text-align: start;
}
#account-panel .followed button.open:hover { background: var(--line); }
.followed .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.followed .kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
}
#account-panel .followed button.remove { border-color: transparent; background: none; color: var(--muted); padding: 4px 8px; }
#account-panel .followed button.remove:hover { color: #ff7b72; }

.account-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; }

.digest-row { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.digest-row input { margin-top: 4px; accent-color: var(--accent); }
.digest-setting .hint { margin: 6px 0 0; }
.digest-setting a { color: var(--link); }

#account-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 10;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
#account-toast[hidden] { display: none; }

/* ============================================================================== phones ===== */

/* One card to a screen, a sliver of the next showing; a swipe moves card by card. No resizing: there
   is no room to give a card more of. */
@media (max-width: 760px) {
  body.deck-page header { padding: 8px 14px; gap: 12px; }
  #deck { padding: 8px; gap: 8px; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; }
  .card { width: calc(100% - 22px) !important; height: 100% !important; min-width: 0; }
  .add-card { flex: 0 0 calc(100% - 22px); }
  .resize-e, .resize-s, .resize-se { display: none; }
  .card-body { padding: 8px 8px 20px; }
  .country-name { max-width: 110px; }
  .country-menu { width: min(290px, calc(100vw - 40px)); }
  /* Low in the corners, clear of the text. */
  .deck-arrow { top: auto; bottom: 18px; transform: none; width: 36px; height: 36px; font-size: 20px; }
  /* The header's country as a flag only; the menu still names it. The language keeps its short code. */
  header .country-name { display: none; }
  /* A swipe scrolls the tags; the heading and arrows would only take their room. */
  .band { padding: 3px 8px; }
  .band-title, .band-arrow { display: none !important; }
  /* The categories on a line of their own under the header's logo and pickers. */
  header .band { order: 1; flex-basis: 100%; padding: 0; }
  /* The trends on one line, and ▾ opens three more (the owner's request, 2026-10-27). */
  .band-rows .band-row { max-height: calc(var(--tag-h) + 2px); }
  .band-rows.is-open .band-row { max-height: calc(4 * var(--tag-h) + 3 * var(--tag-gap) + 2px); }
  /* Under the whole header instead, since the button may land anywhere once the header wraps. */
  #account { position: static; }
  #account-panel { left: 16px; right: 16px; width: auto; top: calc(100% - 4px); }
}