/* Translate bar. The primary "Read in <Lang>" link is filled in client-side
   from navigator.language; the <details> dropdown is the JS-off fallback
   and the way to pick a non-default language. Links use the
   <host>.translate.goog proxy so navigation stays translated. */
.translate-bar { margin: 0.4rem 0 0; font-size: 0.95rem; }
.translate-bar a.translate-primary,
.translate-bar a.translate-primary:visited {
  color: light-dark(#1d3557, #9cc3ea);
  margin-right: 0.6rem;
}
.translate-bar a.translate-primary:hover { text-decoration: underline; }
.translate-menu { display: inline; }
.translate-menu > summary {
  display: inline;
  cursor: pointer;
  color: light-dark(#1d3557, #9cc3ea);
  list-style: none;
}
.translate-menu > summary::-webkit-details-marker { display: none; }
.translate-menu > summary::after { content: " \25BE"; font-size: 0.85em; }
.translate-menu > summary:hover { text-decoration: underline; }
.translate-menu ul.translate-langs {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
}
.translate-menu ul.translate-langs li {
  display: inline-block;
  margin: 0 0.65rem 0.2rem 0;
}
.translate-menu ul.translate-langs a,
.translate-menu ul.translate-langs a:visited {
  color: light-dark(#1d3557, #9cc3ea);
}
.translate-menu ul.translate-langs a:hover { text-decoration: underline; }
.translate-bar a.translate-deactivate,
.translate-bar a.translate-deactivate:visited {
  color: light-dark(#1d3557, #9cc3ea);
}
.translate-bar a.translate-deactivate:hover { text-decoration: underline; }

aside.intro {
  background: light-dark(#f6f8fb, #141820);
  border-left: 3px solid light-dark(#1d3557, #9cc3ea);
  padding: 0.6rem 0.9rem;
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
}
aside.intro p { margin: 0; }

/* Badges / chips — one outlined family in the Oxford-blue accent, differing
   only in size: chip (small) → badge (xs) → cta (large).
   Default: page-bg fill, accent border + accent text.
   Hover:   pale-accent fill, same border + text, no underline. */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid light-dark(#1d3557, #9cc3ea);
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(#1d3557, #9cc3ea);
  border-radius: 0.25rem;
  vertical-align: middle;
  margin-left: 0.35rem;
  font-family: Helvetica, Arial, sans-serif;
  text-transform: lowercase;
  cursor: pointer;
}
a.badge, a.badge:visited { color: light-dark(#1d3557, #9cc3ea); }
a.badge:hover { background: light-dark(#eef2f7, #1a2740); text-decoration: none; }
.badge.muted { color: light-dark(#666, #999); border-color: light-dark(#999, #555); }
.badge.new {
  color: light-dark(#7a3e00, #ffc680);
  border-color: light-dark(#7a3e00, #ffc680);
  background: light-dark(#fff5e6, #2a1f0d);
}
.chips {
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.25rem;
}
.chip {
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.15rem 0.6rem;
  margin-right: 0.25rem;
  border: 1px solid light-dark(#1d3557, #9cc3ea);
  border-radius: 0.25rem;
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(#1d3557, #9cc3ea);
  text-decoration: none;
  cursor: pointer;
}
a.chip, a.chip:visited { color: light-dark(#1d3557, #9cc3ea); }
a.chip:hover {
  background: light-dark(#eef2f7, #1a2740);
  text-decoration: none;
}
.chip-pending {
  border-style: dashed;
  border-color: light-dark(#9aa0a6, #555);
  color: light-dark(#666, #aaa);
  cursor: default;
}

.actions .cta,
.digest-slot-choices .cta {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid light-dark(#1d3557, #9cc3ea);
  color: light-dark(#1d3557, #9cc3ea);
  text-decoration: none;
  border-radius: 0.25rem;
}
/* <button class="cta"> needs font/box/background reset so its height
   matches the <a class="cta"> sibling — buttons don't inherit font by default. */
.actions button.cta {
  font: inherit;
  background: transparent;
  cursor: pointer;
}
.actions .cta:hover,
.digest-slot-choices .cta:hover { background: light-dark(#eef2f7, #1a2740); text-decoration: none; }

/* Share button — inline, chip-sized, mirrors .chip but as a <button>.
   vertical-align/margin let it sit cleanly next to an h2 heading. */
button.share-btn {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: normal;
  padding: 0.15rem 0.6rem;
  margin-left: 0.5rem;
  vertical-align: middle;
  border: 1px solid light-dark(#1d3557, #9cc3ea);
  border-radius: 0.25rem;
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(#1d3557, #9cc3ea);
  font-family: Helvetica, Arial, sans-serif;
  cursor: pointer;
}
button.share-btn:hover { background: light-dark(#eef2f7, #1a2740); }

/* Footer affordances — "Report content" (page-scoped) and "Send feedback"
   (site-wide). Both share visual treatment with .share-btn but stay off that
   class because the global click handler intercepts .share-btn clicks to
   trigger navigator.share. The flex wrapper centres a single button when
   only one is present (pages without reportable items show feedback alone)
   and lays them side by side when both render. */
.footer-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 -1rem;
}
.footer-action {
  margin: 0;
  font-size: 0.8rem;
  font-weight: normal;
  padding: 0.15rem 0.6rem;
  border: 1px solid light-dark(#1d3557, #9cc3ea);
  border-radius: 0.25rem;
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(#1d3557, #9cc3ea);
  font-family: Helvetica, Arial, sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
}
.footer-action:hover { background: light-dark(#eef2f7, #1a2740); }

/* Context preview on the /feedback form — shows the reader what's about to
   be forwarded (page title, URL, highlighted text). Kept low-key so it
   doesn't overshadow the message textarea. */
.feedback-context {
  margin: 0.75rem 0 1rem;
  padding: 0.5rem 0.75rem;
  background: light-dark(#f7f9fc, #161616);
  border: 1px solid light-dark(#dde3ec, #2a2a2a);
  border-radius: 0.3rem;
  font-size: 0.9rem;
}
.feedback-context > summary { cursor: pointer; }
.feedback-context dl { margin: 0.5rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; }
.feedback-context dt { font-weight: bold; }
.feedback-context dd { margin: 0; word-break: break-word; }
.feedback-context blockquote {
  margin: 0;
  padding: 0.3rem 0.6rem;
  border-left: 3px solid light-dark(#9cc3ea, #1d3557);
  font-style: italic;
}

/* "See more" reveal — the full list is wrapped in a fixed-height masked
   container (.list-clamp). A sibling <details> toggles "See more / See
   less"; when open, the clamp lifts and the full list is shown. Clamping
   on a wrapper (not the LI) keeps the list-markers intact — `overflow:
   hidden` on an LI suppresses its outside marker in most browsers.
   The "See all" archive link is hidden by CSS until the details opens. */
details.more-items { margin: 0; }
details.more-items > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.1rem 0;
  margin: 0.25rem 0 0.5rem;
}
details.more-items > summary::-webkit-details-marker { display: none; }
details.more-items > summary > small { color: light-dark(#06c, #6cf); }
details.more-items > summary:hover > small { text-decoration: underline; }
details.more-items > summary > .less-label { display: none; }
details.more-items[open] > summary > .more-label { display: none; }
details.more-items[open] > summary > .less-label { display: inline; }

/* past-digests holds its list inside the <details> (the "See more" reveal
   uses a separate clamp wrapper). Render the summary below the list so
   "Hide past digests" sits at the bottom, where the eye lands after
   reading. */
details.more-items.past-digests { display: flex; flex-direction: column; }
details.more-items.past-digests > summary { order: 1; }

.list-clamp {
  max-height: 23.8rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 0%, #000 85%, rgba(0, 0, 0, 0.25) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 85%, rgba(0, 0, 0, 0.25) 100%);
}
.list-clamp:has(ul.article-list.compact) { max-height: 15.3rem; }
.list-clamp:has(~ details.more-items[open]) {
  max-height: none;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.list-clamp > ul.article-list { margin: 0; }
/* overflow:hidden makes .list-clamp a BFC when closed, trapping the first
   li's top margin inside it; in the open state that margin escapes and
   collapses with the h2 above. Zero it out so the closed/open toggle
   doesn't shift the list down. */
.list-clamp > ul.article-list > li:first-child { margin-top: 0; }

.feed-section.has-more details.more-items:not([open]) ~ .section-more { display: none; }
.feed-section.has-more:has(details.more-items:not([open])) .improve-invite { display: none; }
.section-more.improve-invite { padding-top: 0.7rem; }

/* /search — full-text search over the entire archive. The form is a stack of
   one search input plus a date-range row; the distinctive-term panel sits
   above the result list when a query is active. */
.search-form { margin: 0.5rem 0 0.75rem; }
.search-form label {
  display: block;
  font-size: 0.85rem;
  color: light-dark(#444, #bcbcbc);
  margin-bottom: 0.15rem;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.search-form .search-input-row { margin: 0 0 0.4rem; }
.search-form input[type=search] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.8rem 0.6rem 2.4rem;
  font-family: inherit;
  font-size: 1.05rem;
  background-color: light-dark(#fff, #1a1a1a);
  color: light-dark(inherit, #e8e8e8);
  border: 1px solid light-dark(#999, #666);
  border-radius: 0.5rem;
  background-repeat: no-repeat;
  background-position: 0.7rem 50%;
  background-size: 1.05rem 1.05rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
.search-form input[type=search]:focus {
  outline: none;
  border-color: light-dark(#1d3557, #9cc3ea);
  box-shadow: 0 0 0 2px light-dark(rgba(29,53,87,0.15), rgba(156,195,234,0.2));
}
.search-form .search-kind {
  border: 0;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}
.search-form .search-kind legend {
  padding: 0;
  font-size: 0.85rem;
  color: light-dark(#444, #bcbcbc);
}
.search-form .search-kind label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.search-form .search-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 0.6rem 0 0;
}
.search-form .search-dates input[type=date] {
  padding: 0.35rem 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(inherit, #e8e8e8);
  border: 1px solid light-dark(#999, #666);
}
.search-form .search-clear {
  padding: 0.35rem 0.8rem;
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(inherit, #e8e8e8);
  border: 1px solid light-dark(#999, #666);
  cursor: pointer;
}
.search-form .search-clear:hover { background: light-dark(#f4f4f4, #222); }
.search-form .search-ranges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
}
.search-ranges-label {
  font-size: 0.85rem;
  color: light-dark(#444, #bcbcbc);
  margin-right: 0.2rem;
}
.range-chip {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid light-dark(#1d3557, #9cc3ea);
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(#1d3557, #9cc3ea);
  border-radius: 999px;
  cursor: pointer;
}
.range-chip:hover { background: light-dark(#eaf1fb, #1f2a3a); }
.range-chip[aria-pressed="true"] {
  background: light-dark(#1d3557, #9cc3ea);
  color: light-dark(#fff, #0c1622);
}
.search-custom { margin: 0.5rem 0 0; }
.search-reset { margin: 0.75rem 0 0; text-align: right; }

/* Distinctive-term chips. Same outlined family as .badge, but rendered as
   buttons so they're keyboard-accessible — clicking adds the term to the
   query. */
ul.ngram-cloud { list-style: none; padding: 0; margin: 0.4rem 0 1rem; }
ul.ngram-cloud li { display: inline-block; margin: 0 0.35rem 0.35rem 0; }
.ngram-chip {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid light-dark(#1d3557, #9cc3ea);
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(#1d3557, #9cc3ea);
  border-radius: 0.25rem;
  cursor: pointer;
}
.ngram-chip:hover { background: light-dark(#eaf1fb, #1f2a3a); }
.ngram-chip small { color: light-dark(#777, #888); margin-left: 0.2rem; }
.ngram-show-more {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.15rem 0.55rem;
  border: 1px dashed light-dark(#999, #666);
  background: transparent;
  color: light-dark(#444, #bcbcbc);
  border-radius: 0.25rem;
  cursor: pointer;
}
.ngram-show-more:hover { background: light-dark(#f4f4f4, #222); }

#search-status { margin: 0.25rem 0 0.75rem; }
#search-more button {
  padding: 0.35rem 0.9rem;
  background: light-dark(#fff, #1a1a1a);
  color: light-dark(inherit, #e8e8e8);
  border: 1px solid light-dark(#999, #666);
  cursor: pointer;
}
#search-more button:hover { background: light-dark(#f4f4f4, #222); }