/* ==========================================================================
   reader.css — Section 4/5: sticky filter bar + grouped chronological stream.
   Owned by reader.js. Color encodes data ONLY via --ef-* tokens
   (blue = social, orange = public statement). Editorial restraint: hairline
   rules, tight radius, white paper, no gratuitous motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Filter bar — scrolls away with the page so the decade header can pin flush
   at the very top (see .ef-decade).
   -------------------------------------------------------------------------- */
.ef-filter-bar {
  background: var(--ef-paper);
  border-bottom: 1px solid var(--ef-rule);
  padding: 0.75rem 0 0.7rem;
  margin-bottom: 0.25rem;
}

.ef-filter-totals {
  font-family: var(--ef-sans);
  font-size: 0.8rem;
  color: var(--ef-gray);
  margin: 0 0 0.6rem;
}

.ef-filter-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
}
/* Desktop: force a wrap after the jurisdiction select and spread each row
   evenly. Mobile: let the dropdowns free-float (no forced break). */
.ef-filter-break { flex-basis: 100%; height: 0; margin: 0; }
@media (min-width: 701px) {
  /* Equal-width selects fill each row evenly (4 up top, 3 below the break). */
  .ef-facet-select { flex: 1 1 0; max-width: none; }
}
@media (max-width: 700px) {
  .ef-filter-break { display: none; }
}

/* --- Search field with leading magnifier + trailing live count --- */
.ef-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin-bottom: 0.6rem; /* match the row gap between the dropdowns */
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--ef-rule-strong);
  border-radius: var(--ef-radius);
  background: var(--ef-paper);
}
.ef-search:focus-within { border-color: var(--ef-social); }
.ef-search .fa-magnifying-glass { color: var(--ef-gray-light); font-size: 0.85rem; }
.ef-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--ef-sans);
  font-size: 0.9rem;
  color: var(--ef-ink);
}
.ef-search-input::placeholder { color: var(--ef-gray-light); }
.ef-search-count {
  font-family: var(--ef-sans);
  font-size: 0.75rem;
  color: var(--ef-gray);
  white-space: nowrap;
}

/* --- Year select --- */
.ef-year-select {
  flex: 0 0 auto;
  font-family: var(--ef-sans);
  font-size: 0.85rem;
  color: var(--ef-ink);
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--ef-rule-strong);
  border-radius: var(--ef-radius);
  background: var(--ef-paper);
  cursor: pointer;
}

/* --- Mode segmented control --- */
.ef-mode {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--ef-rule-strong);
  border-radius: var(--ef-radius);
  overflow: hidden;
}
.ef-mode-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.42rem 0.7rem;
  border: 0;
  border-left: 1px solid var(--ef-rule);
  background: var(--ef-paper);
  font-family: var(--ef-sans);
  font-size: 0.82rem;
  color: var(--ef-ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.ef-mode-btn:first-child { border-left: 0; }
.ef-mode-btn:hover { background: var(--ef-panel); }
.ef-mode-count { font-size: 0.72rem; color: var(--ef-gray); }
.ef-mode-btn.is-active { color: var(--ef-ink); font-weight: 600; }
.ef-mode-btn.is-active .ef-mode-count { color: var(--ef-ink-soft); }
/* Active underline encodes the data color of the chosen mode. */
.ef-mode-btn--all.is-active { border-bottom-color: var(--ef-ink); }
.ef-mode-btn--social.is-active {
  border-bottom-color: var(--ef-social);
  background: var(--ef-social-tint);
}
.ef-mode-btn--statements.is-active {
  border-bottom-color: var(--ef-statement);
  background: var(--ef-statement-tint);
}

/* --- Clear affordance (only shown when a filter is active) --- */
.ef-clear {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  font-family: var(--ef-sans);
  font-size: 0.8rem;
  color: var(--ef-gray);
  cursor: pointer;
  padding: 0.42rem 0.4rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: none;
}
.ef-filter-bar.is-dirty .ef-clear { display: inline-block; }
.ef-clear:hover { color: var(--ef-ink); }

/* --------------------------------------------------------------------------
   Grouped stream — Decade (sticky) → Year → Month → items.
   -------------------------------------------------------------------------- */
.ef-reader-stream { position: relative; }

/* Decade — the primary structural marker; pins flush at the very top. */
.ef-decade {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 1.75rem 0 0;
  padding: 0.4rem 0;
  background: var(--ef-paper);
  border-bottom: 2px solid var(--ef-ink);
  font-family: var(--ef-sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ef-ink);
}
.ef-reader-stream > .ef-decade:first-child { margin-top: 0.5rem; }

/* Year — mid-weight subheader. */
.ef-year-head {
  margin: 1.25rem 0 0.25rem;
  font-family: var(--ef-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ef-ink-soft);
}

/* Month — lightest subheader. */
.ef-month-head {
  margin: 0.9rem 0 0.35rem;
  font-family: var(--ef-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ef-gray-light);
}

/* --------------------------------------------------------------------------
   Item cards — colored left border encodes the data kind.
   -------------------------------------------------------------------------- */
.ef-item {
  display: block;
  margin: 0.6rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ef-rule);
  border-left-width: 3px;
  border-radius: var(--ef-radius);
  background: var(--ef-paper);
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ef-item:hover {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
.ef-root a.ef-item:hover { text-decoration: none; }
.ef-item--social { border-left-color: var(--ef-social); }
.ef-item--statement { border-left-color: var(--ef-statement); cursor: pointer; }

.ef-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.4rem;
}
.ef-item-title {
  font-family: var(--ef-serif);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.25;
  color: var(--ef-ink);
}
.ef-root a.ef-item-title:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Leading platform / type icon — tinted to the data color of its card. */
.ef-item-icon {
  margin-right: 0.45rem;
  font-size: 0.9em;
  vertical-align: baseline;
}
.ef-item--social .ef-item-icon { color: var(--ef-social); }
.ef-item--statement .ef-item-icon { color: var(--ef-statement); }
.ef-item-date {
  font-family: var(--ef-sans);
  font-size: 0.74rem;
  color: var(--ef-gray);
  white-space: nowrap;
}
.ef-item-text {
  font-family: var(--ef-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ef-ink-soft);
  margin: 0 0 0.5rem;
}

/* Thumbnails — capped height, hairline framed, rounded. */
.ef-item-thumb {
  display: block;
  max-height: 150px;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--ef-rule);
  border-radius: var(--ef-radius);
  margin-top: 0.35rem;
}

/* --------------------------------------------------------------------------
   Statement quotations.
   -------------------------------------------------------------------------- */
.ef-quotes { margin: 0; }
.ef-quote {
  margin: 0.55rem 0 0;
  padding: 0 0 0 0.85rem;
  border-left: 2px solid var(--ef-rule-strong);
}
/* Reference with a still: thumbnail sized to the LEFT, quote to the right. */
.ef-quote--hasthumb {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.ef-quote-thumb {
  order: -1;            /* pin the thumb to the left */
  flex: 0 0 auto;
  width: 200px;
  max-width: 40%;
  max-height: 150px;
  object-fit: cover;
  margin-top: 0;        /* override the stacked-thumb margin */
}
.ef-quote--hasthumb .ef-quote-text { flex: 1 1 auto; }
.ef-quote-text {
  font-family: var(--ef-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ef-ink);
  margin: 0;
  quotes: "\201C" "\201D";
}
.ef-quote-text::before { content: open-quote; }
.ef-quote-text::after { content: close-quote; }
.ef-extra[hidden] { display: none; }

.ef-more {
  margin-top: 0.6rem;
  border: 0;
  background: transparent;
  padding: 0.15rem 0;
  font-family: var(--ef-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ef-statement-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ef-more:hover { color: var(--ef-statement); }

/* --------------------------------------------------------------------------
   Empty state + incremental sentinel.
   -------------------------------------------------------------------------- */
.ef-empty {
  text-align: center;
  padding: 3rem 1rem;
}
.ef-empty-msg {
  font-family: var(--ef-serif);
  font-size: 1.1rem;
  color: var(--ef-gray);
  margin: 0 0 1rem;
}
.ef-empty-clear {
  border: 1px solid var(--ef-rule-strong);
  border-radius: var(--ef-radius);
  background: var(--ef-paper);
  padding: 0.5rem 1rem;
  font-family: var(--ef-sans);
  font-size: 0.85rem;
  color: var(--ef-ink);
  cursor: pointer;
}
.ef-empty-clear:hover { background: var(--ef-panel); }

.ef-sentinel { height: 1px; width: 100%; }

/* --------------------------------------------------------------------------
   Responsive — controls stack/wrap on narrow iframes.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Quote thumbnails disappear on mobile so the text stays tight. */
  .ef-quote-thumb { display: none; }
  .ef-quote--hasthumb { display: block; }
}

@media (max-width: 560px) {
  .ef-search { flex: 1 1 100%; }
  .ef-year-select { flex: 1 1 auto; }
  .ef-mode { flex: 1 1 100%; }
  .ef-mode-btn { flex: 1 1 0; justify-content: center; }
  .ef-item-head { flex-direction: column; }
}

/* ==========================================================================
   v2 — expanded filter bar (facet dropdowns + removable pills) and redesigned
   item cards (floating thumbnails, AI lines, entity pills, source links).
   ========================================================================== */

/* Facet dropdowns share the year-select look; cap width so long candidate
   names don't stretch the row. */
.ef-facet-select {
  flex: 0 1 auto;
  max-width: 15rem;
  font-family: var(--ef-sans);
  font-size: 0.82rem;
  color: var(--ef-ink);
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--ef-rule-strong);
  border-radius: var(--ef-radius);
  background: var(--ef-paper);
  cursor: pointer;
}
.ef-facet-select:focus-visible { border-color: var(--ef-social); }

/* Active-filter pills (below the controls). */
.ef-active-pills { display: none; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.ef-filter-bar.has-pills .ef-active-pills { display: flex; }
.ef-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.3rem 0.2rem 0.65rem;
  border: 1px solid var(--ef-statement);
  background: var(--ef-statement-tint);
  border-radius: 999px;
  font-family: var(--ef-sans);
  font-size: 0.75rem;
  color: var(--ef-ink);
}
.ef-active-pill-x {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.05rem; line-height: 1; padding: 0 0.3rem; color: var(--ef-gray);
}
.ef-active-pill-x:hover { color: var(--ef-statement-ink); }

/* --- Card link wrapper + floating thumbnail + body ------------------------ */
.ef-root a.ef-item-link { display: block; color: inherit; text-decoration: none; }
.ef-root a.ef-item-link:hover { text-decoration: none; }
.ef-item-body { display: flow-root; } /* contains the float */
.ef-item-float {
  float: right;
  margin: 0.9375rem 0 0.9375rem 0.9375rem; /* 15px top / bottom / left */
  max-width: 45%;
  max-height: 150px;
  width: auto;
  object-fit: cover;
  border: 1px solid var(--ef-rule);
  border-radius: var(--ef-radius);
}

/* AI description line. */
.ef-ai {
  font-family: var(--ef-sans);
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--ef-gray);
  margin: 0 0 0.5rem;
}
.ef-ai .fa-ai, .ef-ai i { color: var(--ef-social); font-style: normal; }

/* Entity/election/candidate pills inside a card. */
.ef-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; }
.ef-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--ef-rule-strong);
  border-radius: 999px;
  background: var(--ef-panel);
  font-family: var(--ef-sans);
  font-size: 0.72rem;
  color: var(--ef-ink);
  cursor: pointer;
  line-height: 1.3;
}
.ef-pill:hover { border-color: var(--ef-ink-soft); background: #eef0f2; }
.ef-pill i { font-size: 0.85em; }
.ef-pill--election i { color: var(--ef-statement); }
.ef-pill--candidate i { color: var(--ef-social); }
.ef-pill--accused i { color: var(--ef-statement-ink); }

/* Source-link row (Screenshot / View post / Video / Transcript). */
.ef-links { display: flex; flex-wrap: wrap; gap: 0.9375rem; margin-top: 0.7rem; }
.ef-src-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ef-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ef-ink-soft) !important;
}
.ef-src-link i { color: var(--ef-statement); }
.ef-src-link:hover { color: var(--ef-statement-ink) !important; text-decoration: underline !important; text-underline-offset: 2px; }

/* Statement event: count line + offset paragraphs with breathing room. */
.ef-stmt-count {
  font-family: var(--ef-sans);
  font-size: 0.75rem;
  color: var(--ef-gray);
  margin: 0 0 0.75rem;
}
.ef-paras { margin: 0; }
.ef-para {
  padding-left: 20px;
  margin: 0 0 1.6rem;
  border-left: 2px solid var(--ef-rule);
}
.ef-para:last-child { margin-bottom: 0; }
.ef-para-time {
  font-family: var(--ef-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ef-gray);
  margin-bottom: 0.3rem;
}

/* Hide floating thumbnails on mobile (keeps text tight). */
@media (max-width: 600px) {
  .ef-item-float { display: none; }
}

/* Retweet icon before a repost's text + the retweet pill. */
.ef-rt-icon { color: var(--ef-social); margin-right: 0.15rem; }
.ef-pill--retweet i { color: var(--ef-social); }
.ef-pill--retweet { border-color: var(--ef-social); }

/* Facet dropdowns: show a caret + reserve room for it so it reads as clickable. */
.ef-facet-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5 6 8l3-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2.2rem;
}
.ef-facet-select:disabled { opacity: 0.4; cursor: not-allowed; }

/* "Data updated through …" line under the record heading (byline-date font). */
.ef-updated {
  font-family: var(--ef-sans);
  font-size: 0.8rem;
  color: var(--ef-gray);
  margin: -0.75rem 0 1.1rem;
}

/* Deleted-tweet marker (above the AI description). */
.ef-deleted {
  font-family: var(--ef-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: #c0392b;
  margin: 0 0 0.4rem;
}