/* Deku's Wisdom — base stylesheet.
 *
 * Palette is lifted straight from the mascot art so the site and the character
 * read as one object: honey wood browns, cream paper, one sage-green accent
 * (the sprout) carrying every link and interactive state.
 */

:root {
  --cream: #f5f0e1;
  --cream-deep: #ece4d0;
  --paper: #fffdf7;
  --ink: #2f2418;
  --ink-soft: #5d4c38;
  /* Darkened 2026-09-01 for contrast. The previous value measured 4.28:1 on
     --paper and 3.82:1 on --cream, both under AA, and it carries .meta,
     .source-note and .count -- the attribution line under every quote on the
     site. This one measures 5.18 and 4.63. The dark theme already passed and is
     unchanged. (Stating the old value as a hex here would trip UxBundleTest,
     which is the guard doing its job; git has it.) */
  --ink-faint: #7b6952;
  --wood: #b6822f;
  --wood-deep: #4a3220;
  --sprout: #5f8a52;
  --sprout-deep: #3f6136;
  --rule: #ded3ba;
  /* Companion to --rule for boundaries that carry meaning rather than decoration.
     --rule sits at 1.46:1 on paper, which is right for a hairline between blocks
     and wrong for the underline that tells a reader something is a control:
     WCAG 1.4.11 wants 3:1 for that. This measures 3.36 and 3.00. */
  --rule-strong: #928a7a;

  /* Type scale: 12 / 14 / 16 / 18 / 20 / 24 / 32px. Replaces twenty ad-hoc sizes
     that ranged from 0.68 to 1.6rem with no ratio between them — 0.78, 0.8, 0.82
     and 0.85rem were four separately-chosen values nobody could tell apart. */
  --text-3xs: 0.75rem;
  --text-2xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  /* Space scale, every step a multiple of 4px. Replaces twenty-seven values
     between 0.1 and 3rem. Inconsistent spacing is the thing that makes a careful
     layout look careless, and it is invisible one declaration at a time. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.25rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --measure: 68ch;
  --shell: 1080px;
  --radius: 10px;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --verdict-red: #8c2f1b;    --verdict-red-bg: #f6e6e1;
  --verdict-amber: #7a4d12;  --verdict-amber-bg: #f3ead6;
  --verdict-blue: #35506b;   --verdict-blue-bg: #e5ecf2;
  --verdict-green-bg: #e7eede;
  --tier-primary: #b9c9a8;

  color-scheme: light dark;
}

/* Dark mode follows the OS setting; the audience expects it. Same wood-and-sprout
   palette, inverted: paper becomes the dark card, ink becomes cream. Every color
   on the site is a token, so this block is the whole implementation — a new
   hard-coded hex anywhere below is a light-only bug. */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1d1811;
    --cream-deep: #272016;
    --paper: #2a2219;
    --ink: #efe6d3;
    --ink-soft: #c9b99d;
    --ink-faint: #9c8a6c;
    --wood: #d4a04d;
    --wood-deep: #e9d7b3;
    --sprout: #8db97e;
    --sprout-deep: #a9d19b;
    --rule: #463a2a;
    --rule-strong: #816b4d;

    --verdict-red: #f0a48e;    --verdict-red-bg: #4a2419;
    --verdict-amber: #e6b978;  --verdict-amber-bg: #43301a;
    --verdict-blue: #a7c3e0;   --verdict-blue-bg: #223243;
    --verdict-green-bg: #2b3a26;
    --tier-primary: #5c7a4f;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text-sm);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; }

a { color: var(--sprout-deep); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--cream);
  padding: var(--space-2xs) var(--space-sm);
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }

:focus-visible { outline: 3px solid var(--sprout); outline-offset: 2px; }

/* ---------- shell ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--ink);
}
.brand-mark { width: 40px; height: 40px; }
.brand-name { font-weight: 700; font-size: var(--text-md); letter-spacing: 0.01em; }

/* Wraps. Six items at 1.25rem gaps overflow a 375px viewport, which pushed the
   document to 440px wide, gave every page a horizontal scrollbar on a phone and
   left "Deku, explained" and "About" off the right edge entirely. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  font-family: var(--sans);
  font-size: var(--text-sm);
}

main { max-width: var(--shell); margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-2xl); }

/* Centred in the shell. Left flush, a 578px column inside a 1080px main left a
   582px empty gutter on a 1280px screen, which read as an unfinished page on the
   site's most-landed-on template. .center adds the text alignment on top. */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose.center { margin-inline: auto; text-align: center; }

h1, h2, h3 { line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.7rem); margin: 0.2em 0 0.4em; }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem); margin: var(--space-xl) 0 var(--space-xs); }

.standfirst { font-size: var(--text-md); color: var(--ink-soft); }
.meta, .source-note, .count { font-family: var(--sans); font-size: var(--text-2xs); color: var(--ink-faint); }

.section { margin-top: var(--space-2xl); }

/* ---------- breadcrumbs ---------- */

.breadcrumbs {
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.breadcrumbs a { color: var(--ink-soft); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-sm);
}
.hero h1 { margin-top: 0; }
.hero-copy p { max-width: 46ch; color: var(--ink-soft); }
.hero-art { border-radius: var(--radius); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }

/* The hidden attribute must always win. Without this, any element that also
   carries a class with an explicit display (.button, .share-link…) stayed
   VISIBLE with hidden="" set — found live when the archive replay tried to
   hide the share button and the browser overrode it. */
[hidden] { display: none !important; }

/* Same failure, second surface. A closed <details> hides its non-summary children
   through the UA stylesheet, which an explicit `display` on a child overrides just
   as it overrides [hidden] — .share-row sets display:flex, so collapsing the share
   block did nothing until this rule existed. Verified by measurement, not by
   looking: 60 links stayed visible and the page got 126px taller. */
details:not([open]) > *:not(summary) { display: none; }

.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 999px;
  background: var(--sprout-deep);
  color: var(--paper);
  text-decoration: none;
}
.button:hover { background: var(--ink); color: var(--paper); }
.button-quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.button-quiet:hover { background: var(--cream-deep); color: var(--ink); }

/* ---------- quotes ---------- */

.quote-list { display: grid; gap: var(--space-lg); margin-top: var(--space-lg); }

.quote-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-lg);
}

.quote-card blockquote { margin: 0; }
.quote-card blockquote p {
  margin: 0 0 var(--space-xs);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink);
}
.quote-card cite { font-style: normal; font-family: var(--sans); font-size: var(--text-2xs); }
.quote-card footer { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); align-items: baseline; }

.commentary {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}
.commentary p { margin: 0; }

.theme-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-sm) 0 0;
  padding: 0;
}
.theme-chips a {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-3xs);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink-soft);
  text-decoration: none;
}
.theme-chips a:hover { background: var(--sprout); color: var(--paper); }

/* Homepage teasers. The quote is the hero; the lens promise is the affordance and
   sits where a call to action belongs, so the card reads line-first. No commentary
   here by design — see app/views/pages/_quote_teaser.html.erb. */

.teaser-grid {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.quote-teaser a {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: var(--space-2xs);
  height: 100%;
  padding: var(--space-md) var(--space-lg) var(--space-sm);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.quote-teaser a:hover,
.quote-teaser a:focus-visible { border-color: var(--sprout); }

.quote-teaser blockquote {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.35;
  color: var(--ink);
}

.teaser-cite {
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}

.teaser-promise {
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--sprout-deep);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--rule);
}
.teaser-arrow { padding-left: 0.35em; }
.quote-teaser a:hover .teaser-arrow { padding-left: 0.6em; }
@media (prefers-reduced-motion: no-preference) {
  .teaser-arrow { transition: padding-left 120ms ease-out; }
}

.section-lead { color: var(--ink-soft); max-width: var(--measure); margin: var(--space-3xs) 0 0; }
.section-more { font-family: var(--sans); font-size: var(--text-2xs); margin: var(--space-sm) 0 0; }

.spoiler-shield summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
}
.spoiler-shield[open] summary { margin-bottom: var(--space-sm); }

/* ---------- definition card (meaning pages) ---------- */

.definition-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--sprout);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  display: grid;
  gap: var(--space-sm);
}
.definition-card > div { display: grid; gap: var(--space-3xs); }
.definition-card dt {
  font-family: var(--sans);
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.definition-card dd { margin: 0; }
.romaji { color: var(--ink-faint); }

.body-copy p { max-width: var(--measure); }

.character-intro {
  border-left: 3px solid var(--sprout);
  padding-left: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--ink-soft);
}

.faq details {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-xs) 0;
}
.faq summary { cursor: pointer; font-weight: 700; }

/* ---------- lists & cards ---------- */

.link-list { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.link-list.columns { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card-grid {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card-grid a {
  display: grid;
  gap: var(--space-3xs);
  height: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.card-grid a:hover { border-color: var(--sprout); }
.card-kanji { font-size: var(--text-xl); color: var(--wood); }
.card-title { font-weight: 700; }
.card-blurb { font-size: var(--text-2xs); color: var(--ink-soft); }

.art-404 { margin: 0 auto; }

/* ---------- footer ---------- */

.site-footer {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
  border-top: 1px solid var(--rule);
  text-align: center;
  font-family: var(--sans);
}
.footer-mark { opacity: 0.55; }
.footer-nav { display: flex; gap: var(--space-sm); justify-content: center; margin: var(--space-2xs) 0 var(--space-sm); font-size: var(--text-2xs); }
.disclaimer {
  max-width: 62ch;
  margin: 0 auto;
  font-size: var(--text-3xs);
  line-height: 1.55;
  color: var(--ink-faint);
}
.copyright { font-size: var(--text-3xs); color: var(--ink-faint); }

/* ---------- responsive ---------- */

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

@media (max-width: 480px) {
  body { font-size: var(--text-sm); }
  main { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
  .site-header { padding: var(--space-sm) var(--space-sm); }
  .quote-card { padding: var(--space-sm) var(--space-sm); }
  .link-list.columns { grid-template-columns: 1fr; }
}

.spoiler-notice {
  background: var(--cream-deep);
  border-left: 3px solid var(--wood);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--sans);
  font-size: var(--text-2xs);
}

.body-copy table { border-collapse: collapse; width: 100%; margin: var(--space-md) 0; }
.body-copy th, .body-copy td { text-align: left; padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--rule); }

/* Series run facts — anime vs manga dates plus alternate titles. */
.run-facts {
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-md) 0 var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--text-2xs);
}
.run-facts > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-2xs); }
.run-facts dt { color: var(--ink-faint); font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: 0.07em; padding-top: var(--space-3xs); }
.run-facts dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 480px) { .run-facts > div { grid-template-columns: 1fr; gap: var(--space-3xs); } }

/* Pinterest save link. A plain anchor rather than their JS widget, so no
   third-party script loads for the sake of a button. */
.pin-save { margin: var(--space-sm) 0 0; }
/* Numbers that get compared to each other line up. The Quotele distribution is a
   column of counts and the character index a column of quote totals; proportional
   digits make those ragged for no reason. */
.stat-row, .count, .quotele-stats-body { font-variant-numeric: tabular-nums; }

.quote-index { margin: var(--space-md) 0 0; }
.quote-index-list {
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-md);
  display: grid;
  gap: var(--space-3xs);
  font-family: var(--sans);
  font-size: var(--text-3xs);
  color: var(--ink-soft);
}
.quote-index-list a { color: var(--ink-soft); }
.quote-index-list a:hover { color: var(--ink); }
.quote-index-spoiler { font-style: italic; color: var(--ink-faint); }

.more-guides { margin-top: var(--space-md); }
.more-guides[open] .link-list { margin-top: var(--space-xs); }

/* The shared disclosure summary: share rows on quote cards, the jump list on long
   character pages, the surplus guides on the homepage. One appearance for one
   idea — "there is more here, on request" — sized to a real tap target and set in
   the meta color so it sits below the content rather than beside it. */
.share-disclosure { margin-top: var(--space-xs); }
.disclosure-summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-size: var(--text-3xs);
  color: var(--ink-faint);
  cursor: pointer;
  list-style: none;
}
.disclosure-summary::-webkit-details-marker { display: none; }
.disclosure-summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-weight: 700;
}
.share-disclosure[open] .disclosure-summary::before { content: "\2212"; }
.disclosure-summary:hover { color: var(--sprout-deep); }

.share-row { margin: var(--space-sm) 0 0; display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: baseline; }
.share-link {
  font-size: var(--text-2xs); color: var(--ink-soft); background: none; border: none;
  padding: 0; cursor: pointer; font-family: inherit;
  border-bottom: 1px solid var(--rule-strong); text-decoration: none;
}
.share-link:hover { color: var(--sprout-deep); border-bottom-color: var(--sprout); }
.pin-link {
  font-family: var(--sans);
  font-size: var(--text-3xs);
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.pin-link:hover { color: var(--sprout-deep); border-bottom-color: var(--sprout); }

/* Affiliate block. Deliberately below the quotes: the commentary is the product,
   the link is a convenience, and the ordering should say so. */
.buy-block { border-top: 1px solid var(--rule); padding-top: var(--space-lg); }
.buy-block p { color: var(--ink-soft); max-width: var(--measure); }
.affiliate-disclosure {
  font-family: var(--sans);
  font-size: var(--text-3xs);
  color: var(--ink-faint);
  max-width: var(--measure);
}

/* 404. A page that only apologizes wastes the visit, so it carries routes back in. */
.not-found .art-404 { margin: 0 auto var(--space-2xs); }
.not-found-links {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) auto;
  max-width: 34rem;
  display: grid;
  gap: var(--space-sm);
  text-align: left;
}
.not-found-links li {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
}
.not-found-links a { font-weight: 700; }
.not-found-links span {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  margin-top: var(--space-3xs);
}
.not-found .quote-list { text-align: left; }

/* Quotele + quizzes */
.quotele-quote p { font-size: var(--text-lg); line-height: 1.5; }
.quotele-options { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: center; margin: var(--space-sm) 0; }
/* The game's only interaction, so it gets a thumb-sized target: these measured
   22-28px tall on a phone, well under the 44px guideline, and a mis-tap costs one
   of three guesses. min-height rather than padding alone so the row of 24 stays
   even whatever the label length. */
.quotele-option {
  font-size: var(--text-2xs);
  min-height: 44px;
  padding-inline: var(--space-sm);
}
.quotele-option:disabled { opacity: 0.35; cursor: default; }
.quotele-result, .quiz-result { margin-top: var(--space-md); }
.quiz-question { border: 1px solid var(--rule); border-radius: 8px; padding: var(--space-sm) var(--space-md); margin: var(--space-sm) 0; }
.quiz-question legend { font-weight: 600; padding: 0 var(--space-2xs); }

/* ---------- fact-check database + article verdict boxes ----------
   One visual language for both surfaces, because they carry the same text:
   the ~40-word verdict renders on the database page and at the top of the
   full article it belongs to. Badge hues run from red (invented) to green
   (true), muted to sit inside the cream palette rather than shout over it. */
.verdict-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wood);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-sm);
  margin: var(--space-md) 0;
  font-size: var(--text-sm);
}
.verdict-box p { margin: var(--space-2xs) 0 0; }
.verdict-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 999px;
  border: 1px solid currentColor;
  vertical-align: middle;
}
.verdict-fabricated       { color: var(--verdict-red); background: var(--verdict-red-bg); }
.verdict-borrowed         { color: var(--verdict-amber); background: var(--verdict-amber-bg); }
.verdict-misattributed    { color: var(--verdict-amber); background: var(--verdict-amber-bg); }
.verdict-translation-split{ color: var(--verdict-blue); background: var(--verdict-blue-bg); }
.verdict-dub-original     { color: var(--verdict-blue); background: var(--verdict-blue-bg); }
.verdict-true             { color: var(--sprout-deep); background: var(--verdict-green-bg); }

/* Controls that only work with JavaScript, without the layout shift that
   revealing them costs. Three states, and the middle one is the point:
   no JS at all, the control never exists; JS present, it occupies its space from
   the first paint but stays invisible; controller connected, it appears in the
   space already reserved for it. Measured on the character pages, where the old
   `hidden` reveal moved the Pinterest link and everything under it about three
   seconds into the page on a throttled phone. Prefer the `hidden` attribute for
   anything a reader toggles; use this only for reveal-on-boot. */
.needs-js { display: none; }
.js .needs-js { display: inline-block; visibility: hidden; }
.js .needs-js.ready { visibility: visible; }

/* The same database, filtered onto a character page: a badge and the claim,
   nothing else, so it reads as a checklist beside the quote list rather than as
   a second article competing with it. */
.check-list { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.check-list li { display: flex; gap: var(--space-2xs); align-items: baseline; flex-wrap: wrap; }
.check-list a { color: var(--ink); }

.factcheck-group h2 { margin-top: var(--space-xl); }
.factcheck-row blockquote { margin: 0 0 var(--space-xs); }

/* ---------- Quotele stats + archive ----------
   Client-rendered from localStorage, so the server ships only containers. */
.quotele-stats-body { margin-top: var(--space-2xs); }
.stat-grid { display: flex; gap: var(--space-lg); justify-content: center; margin: var(--space-xs) 0 var(--space-md); }
.stat-cell { display: grid; gap: var(--space-3xs); }
.stat-num { font-size: var(--text-xl); font-weight: 700; color: var(--wood-deep); }
.stat-label {
  font-family: var(--sans); font-size: var(--text-3xs); text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-faint);
}
.stat-row { display: grid; grid-template-columns: 5rem 1fr 2rem; align-items: center; gap: var(--space-xs); margin: var(--space-2xs) auto; max-width: 26rem; }
.stat-bar {
  display: block; height: 0.85rem; background: var(--cream-deep);
  border-radius: 4px; overflow: hidden;
}
.stat-bar span { display: block; height: 100%; background: var(--sprout); border-radius: 4px; }
.stat-row .stat-count { font-family: var(--sans); font-size: var(--text-3xs); text-align: right; }
.quotele-archive-list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: center; margin-top: var(--space-xs); max-height: 16rem; overflow-y: auto; padding: var(--space-3xs); }
.archive-item { min-width: 3.6rem; }
.archive-won { border-color: var(--sprout); color: var(--sprout-deep); }
.archive-lost { opacity: 0.55; }

/* ---------- public source badges ----------
   The verification claim, made visible and clickable on every quote card.
   Same pill shape as the verdict badges so "verified" reads as one system
   across the site rather than two unrelated decorations. */
.source-badges { display: inline-flex; flex-wrap: wrap; gap: var(--space-3xs); margin-left: var(--space-2xs); vertical-align: middle; }
.source-badge {
  font-family: var(--sans);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  text-decoration: none;
}
a.source-badge:hover { border-color: var(--sprout); color: var(--sprout-deep); }
.tier-primary { border-color: var(--tier-primary); }
.tier-double {
  color: var(--sprout-deep);
  border-color: var(--sprout);
  background: var(--verdict-green-bg);
}

/* ---------- anime calendar ----------
   Reuses .quote-card; the date and kind lead so the eye can scan a month. */
.calendar-month h2 { margin-top: var(--space-xl); }
.calendar-month .event-row + .event-row { margin-top: var(--space-sm); }
.event-date { margin: 0 0 var(--space-3xs); font-family: var(--sans); font-size: var(--text-2xs); color: var(--ink-soft); display: flex; gap: var(--space-xs); align-items: baseline; flex-wrap: wrap; }
.event-date time { font-weight: 600; color: var(--ink); }
.event-kind { border: 1px solid var(--rule); border-radius: 999px; padding: var(--space-3xs) var(--space-2xs); font-size: var(--text-3xs); }
.event-title { margin: 0 0 var(--space-2xs); font-size: var(--text-md); }
.event-description { margin: 0 0 var(--space-2xs); color: var(--ink-soft); }
.calendar-recent .event-row { opacity: 0.85; }

/* ---------- embed codes ---------- */
.embed { margin-top: var(--space-xs); padding: var(--space-xs) var(--space-sm); border: 1px dashed var(--rule); border-radius: 8px; font-family: var(--sans); font-size: var(--text-2xs); }
.embed label { display: block; margin-bottom: var(--space-2xs); color: var(--ink-soft); }
.embed-code { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-3xs); line-height: 1.4; padding: var(--space-2xs); border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); resize: vertical; }
.embed .share-link { margin-top: var(--space-2xs); }