/**
 * Archive card styles (/fact, /zh/fact).
 *
 * The block below is COPIED VERBATIM from web/q/index.html's <style> — the
 * shared-quiz card people already know. Vic, 2026-09-22: an archive page that
 * only resembles the real card is worse than one that is the real card, and
 * the original already exists, so it is copied rather than re-derived.
 *
 * Keep it that way. If the card changes in web/q/index.html, re-copy this
 * block; do not hand-edit one side. Archive-only rules live at the BOTTOM of
 * this file, after the copied block, so the seam stays obvious.
 *
 * Two deliberate departures, both at the bottom:
 *   - the flip is a checkbox, not a class the script toggles, because these
 *     pages have no script and the crawlers that matter do not run one;
 *   - `body` here is a normal page with a header and footer, not the centred
 *     single-card viewport /q/ uses.
 */

  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

  :root {
    --bg: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --bg-tertiary: #E5E5EA;
    --text-primary: #000000;
    --text-secondary: rgba(60,60,60,0.60);
    --text-tertiary: rgba(60,60,60,0.30);
    --divider: rgba(0,0,0,0.06);
    --green: #1A7F3C;
    --red: #EF4444;
    --green-bg: rgba(26,127,60,0.12);
    --red-bg: rgba(239,68,68,0.10);
    --option-bg: #F5F5F5;
    /* Corner radii — aligned with app tokens (lib/constants.ts RADIUS).
       CSS doesn't have a real squircle/continuous-corner primitive yet; we
       approximate by matching values and letting the browser anti-alias.
       `corner-shape: squircle` is in the CSS Backgrounds L4 draft but
       browser support is still limited, so we fall back to standard radii. */
    --radius-card: 24px;      /* RADIUS.xxl — share card outer */
    --radius-photo: 16px;     /* RADIUS.lg */
    --radius-option: 16px;    /* RADIUS.lg */
    --radius-pill: 999px;     /* RADIUS.pill */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ─────────────────────────────────────────────────────────────────────
       Typography — mirror lib/constants.ts TYPE tokens (see comment on
       .back-answer). Keep the (size, lineHeight) pairs in sync when the
       app-side token values change.
       ───────────────────────────────────────────────────────────────── */
    --text-title-sm: 18px;        /* TYPE.titleSm.fontSize */
    --text-title-sm-line: 26px;   /* TYPE.titleSm.lineHeight */
    --text-body-sm: 13px;         /* TYPE.bodySm.fontSize */
    --text-body-sm-line: 20px;    /* TYPE.bodySm.lineHeight */
    --text-label-sm: 13px;        /* TYPE.labelSm.fontSize */
    --text-caption: 12px;         /* TYPE.caption.fontSize */
    --text-tiny: 10px;            /* TYPE.tiny.fontSize */

    /* Spacing — mirror SPACING token scale */
    --space-xs: 4px;              /* SPACING.xs */
    --space-sm: 8px;              /* SPACING.sm */
    --space-md: 12px;             /* SPACING.md */
    --space-lg: 16px;             /* SPACING.lg */
    --space-xl: 20px;             /* SPACING.xl */
    --space-xxl: 24px;            /* SPACING.xxl */
  }

  body {
    font-family: var(--font-sans);
    background: var(--bg-secondary);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  /* ── Card Container ──
     Card height is content-driven (not a hard 9:16 lock) so long English
     questions and long option text can't push the AhaDaily watermark off
     the card. `min-height` keeps the 9:16 feel for short content; beyond
     that the card grows. CSS Grid stacks front/back in the same cell so
     the scene auto-sizes to whichever face is taller (which in turn fixes
     the flip animation needing matching heights). */
  .card-scene { width: 100%; max-width: 360px; perspective: 1200px; }
  .card-flipper {
    position: relative;
    width: 100%;
    min-height: min(calc((100vw - 32px) * 16 / 9), 640px);
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: grid; /* stacks faces in grid-area 1/1 */
  }
  .card-flipper.flipped { transform: rotateY(180deg); }
  .card-face {
    grid-area: 1 / 1;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-card);
    background: var(--bg);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
  }
  .card-back { transform: rotateY(180deg); }
  #quizContent { display: flex; flex-direction: column; flex: 1; }

  /* ── FRONT CARD ── */
  .front-photo-wrap { padding: 16px 16px 0; }
  .front-photo-box { position: relative; }
  .front-photo { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius-photo); object-fit: cover; display: block; background: var(--bg-secondary); }

  /* ── Discoverer identity — mirrors the app share cards' OVERLAY.imageText
     pattern: bottom scrim from 45% height, white name w/ soft shadow,
     20px avatar w/ 1.5px white ring. ── */
  .photo-scrim { position: absolute; inset: 0; border-radius: var(--radius-photo); background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,0.8)); display: flex; align-items: flex-end; padding: var(--space-md); }
  .identity-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .identity-avatar { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #fff; object-fit: cover; background: var(--bg-secondary); flex-shrink: 0; box-sizing: border-box; }
  .identity-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; }
  .identity-name { font-size: var(--text-caption); font-weight: 500; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .back-photo-box { position: relative; flex-shrink: 0; font-size: 0; }
  .back-photo-box .identity-avatar { position: absolute; left: 4px; bottom: 4px; }
  .front-content { flex: 1; padding: 16px 18px 0; display: flex; flex-direction: column; }
  /* Question keeps its full size regardless of length — card grows to fit
     instead of shrinking the type (see .card-flipper min-height + grid). */
  .front-question { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-title-sm); line-height: var(--text-title-sm-line); color: var(--text-primary); margin-bottom: var(--space-lg); }
  .front-options { display: flex; flex-direction: column; gap: var(--space-md); }

  /* Messaging in-app browsers (LINE / IG / Facebook) leave roughly 560px of
     visible height once their own bars are drawn, which pushed options C and D
     below the fold. Shrink the photo and the gaps so all four stay reachable
     without scrolling. Verified at 375x560 on 2026-09-20. */
  @media (max-height: 700px) {
    .front-photo { aspect-ratio: auto; height: min(132px, 19vh); }
    .front-photo-wrap { padding-top: 12px; }
    .front-content { padding-top: 12px; }
    .front-question { margin-bottom: var(--space-md); }
    .front-options { gap: var(--space-sm); }
    .option-row { padding: var(--space-md) var(--space-lg); }
  }
  /* Shortest tier: LINE and Facebook on a small phone. Long questions still
     push D down, so trade option padding for reach. */
  @media (max-height: 620px) {
    .option-row { padding: var(--space-sm) var(--space-lg); }
  }

  .option-row { display: flex; align-items: center; background: var(--option-bg); border-radius: var(--radius-option); padding: var(--space-lg); gap: var(--space-md); cursor: pointer; transition: background 0.15s, transform 0.1s; border: 1px solid transparent; user-select: none; }
  .option-row:active { transform: scale(0.98); }
  .option-row.selected-correct { background: var(--text-primary); border-color: var(--text-primary); }
  .option-row.selected-correct .option-text { color: #fff; }
  .option-row.selected-wrong { background: var(--bg); border-color: var(--text-primary); }
  .option-row.reveal-correct { background: var(--text-primary); border-color: var(--text-primary); }
  .option-row.reveal-correct .option-text { color: #fff; }
  .option-label { font-weight: 600; font-size: var(--text-caption); color: #fff; width: 24px; height: 24px; line-height: 24px; text-align: center; flex-shrink: 0; background: var(--text-primary); border-radius: 50%; }
  .option-row.selected-correct .option-label, .option-row.reveal-correct .option-label { background: #fff; color: var(--text-primary); }
  .option-text { font-size: var(--text-body-sm); line-height: var(--text-body-sm-line); color: var(--text-primary); flex: 1; }
  .option-icon { width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 14px; flex-shrink: 0; border-radius: 50%; opacity: 0; transition: opacity 0.3s; }
  .option-row.selected-correct .option-icon { opacity: 1; background: #fff; color: var(--text-primary); }
  .option-row.selected-wrong .option-icon { opacity: 1; background: var(--text-primary); color: #fff; }
  .option-row.reveal-correct .option-icon { opacity: 1; background: #fff; color: var(--text-primary); }

  /* ── BACK CARD ── */
  .back-header { margin: var(--space-lg) var(--space-lg) 0; padding: var(--space-md); border-radius: var(--radius-photo); background: var(--bg-secondary); display: flex; align-items: center; gap: 14px; }
  .back-photo { width: 80px; height: 80px; border-radius: var(--space-md); object-fit: cover; flex-shrink: 0; background: rgba(0,0,0,0.05); }
  /* .back-question-text lineHeight 18 is tighter than bodySm (20) by design:
     this is a compact "secondary header" hint, not body copy. */
  .back-question-text { font-size: var(--text-body-sm); line-height: 18px; color: var(--text-primary); }
  .back-content { flex: 1; padding: var(--space-lg) var(--space-xl) 0; display: flex; flex-direction: column; }
  .back-result-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 5px 10px; border-radius: var(--radius-pill); font-size: var(--text-label-sm); font-weight: 600; letter-spacing: 0.3px; width: fit-content; }
  .back-result-badge.correct { background: var(--green-bg); color: var(--green); }
  .back-result-badge.wrong { background: var(--red-bg); color: var(--red); }
  .badge-icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; display: inline-block; }
  /* Tier rhythm: tight within answer block (space-md), space-xxl between tiers. */
  .back-answer { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-title-sm); line-height: var(--text-title-sm-line); color: var(--text-primary); margin-top: var(--space-md); }
  .back-citation { font-size: var(--text-body-sm); line-height: var(--text-body-sm-line); color: var(--text-secondary); margin-top: var(--space-md); }
  /* .back-evidence / .back-tip lineHeight 19 is a visual tune slightly tighter
     than bodySm (20) so paragraphs feel denser; the size itself is bodySm. */
  .back-evidence { font-size: var(--text-body-sm); line-height: 19px; color: var(--text-primary); opacity: 0.85; margin-top: var(--space-md); }
  .back-tip { font-size: var(--text-body-sm); line-height: 19px; color: var(--text-primary); opacity: 0.85; margin-top: var(--space-xxl); }

  /* ── CTA Button ── */
  /* Pill-shaped to match the app's CTAButton (RADIUS.pill) */
  .cta-button { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; padding: 14px var(--space-xxl); border-radius: var(--radius-pill); background: var(--text-primary); color: var(--bg); font-size: 16px; font-weight: 600; border: none; cursor: pointer; transition: transform 0.1s, opacity 0.15s; text-decoration: none; }
  .cta-button:active { transform: scale(0.97); opacity: 0.9; }

  /* ── Brand Watermark ──
     Symmetric top+bottom padding so the watermark has breathing room from
     whatever sits directly above it (last option, tip, or CTA).
     14px is a footer inset, not in SPACING — same tuned value the RN
     share cards use. */
  .brand-row { display: flex; align-items: center; justify-content: center; padding: 14px 0; margin-top: auto; }
  .brand-logo { height: 16px; width: auto; opacity: 0.4; }

  /* ── Hint ── */
  .hint { text-align: center; font-size: var(--text-label-sm); color: var(--text-secondary); margin-top: var(--space-lg); opacity: 0; transition: opacity 0.4s; }
  .hint.visible { opacity: 1; }

  /* ── Loading ── */
  .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: var(--space-lg); }
  .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--bg-tertiary); border-top-color: var(--text-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { font-size: 14px; color: var(--text-secondary); }

  /* ── Error/Expired ── */
  .error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: var(--space-lg); padding: 32px; text-align: center; }
  .error-emoji { font-size: 48px; }
  .error-title { font-size: var(--text-title-sm); font-weight: 700; color: var(--text-primary); }
  .error-desc { font-size: 14px; color: var(--text-secondary); line-height: var(--text-body-sm-line); }

  /* ── Animations ── */
  @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  .animate-in { animation: fadeInUp 0.4s ease-out both; }
  .animate-in:nth-child(2) { animation-delay: 0.05s; }
  .animate-in:nth-child(3) { animation-delay: 0.1s; }
  .animate-in:nth-child(4) { animation-delay: 0.15s; }

  .hidden { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Archive-only. Everything above this line is the copied card.
   ───────────────────────────────────────────────────────────────────── */

/* The copied .front-photo has no height:auto because /q/'s <img> carries no
   width/height attributes — its script sets the src after load. These pages
   render the img server-side WITH them, so the box is reserved before the
   photo arrives; without this the 864 is taken as a literal height and the
   card grows to the length of a page. aspect-ratio still wins, so the crop
   stays exactly what the real card does. */
.front-photo { height: auto; }

/* /q/ centres one card in the viewport; an archive page is a page. */
body {
  display: block;
  min-height: 0;
  padding: 0;
  background: var(--color-bg);
  align-items: stretch;
  justify-content: flex-start;
}

/* Two column widths, each with a job: listings want the site's reading
   measure, a day page is one card so everything shares the card's width. */
.fact-page { max-width: var(--max-width); margin: 0 auto; padding: 0 20px 72px; }
.fact-day { max-width: 380px; margin: 0 auto; }

/* The flip, without a script. /q/ toggles .flipped from its click handler;
   here a visually hidden checkbox does it, so the card works with JavaScript
   off and reads the same to a crawler that never runs any. */
.fact-flip-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.fact-flip-toggle:checked ~ .card-scene .card-flipper { transform: rotateY(180deg); }
.fact-flip-toggle:focus-visible ~ .card-scene .card-face { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.card-scene { margin: 20px auto 0; max-width: 380px; }
.card-flipper { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .card-flipper { transition: none; } }

/* Before anyone answers — and for every crawler — the badge still names the
   right option, so the card states its answer without a click. The script
   swaps this for .correct / .wrong once an option is picked. */
.back-result-badge.is-neutral { background: var(--bg-secondary); color: var(--text-secondary); }

.fact-hint { font-size: var(--text-body-sm); color: var(--text-secondary); margin: 14px 0 0; text-align: center; }
.fact-hint .on-back { display: none; }
.fact-flip-toggle:checked ~ .card-scene .fact-hint .on-front { display: none; }
.fact-flip-toggle:checked ~ .card-scene .fact-hint .on-back { display: inline; }

.fact-meta { font-size: var(--text-body-sm); color: var(--text-secondary); margin: 40px 0 0; }
.fact-meta a { color: inherit; }

.fact-list-head { margin: 40px 0 0; }
.fact-list-head h1 { font-family: var(--font-serif); font-size: 28px; line-height: 1.35; margin: 0 0 6px; }
.fact-list-head p { font-size: 15px; color: var(--text-secondary); margin: 0; }

.fact-cta { border-top: 1px solid var(--divider); padding: 28px 0 0; margin: 44px 0 0; }
.fact-cta h2 { margin: 0 0 6px; font-size: 17px; }
.fact-cta p { color: var(--text-secondary); margin: 0 0 16px; font-size: 14px; line-height: 21px; }

.fact-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 32px 0 0; font-size: 15px; }
.fact-nav a { text-decoration: none; }

.fact-list { list-style: none; padding: 0; margin: 24px 0 0; }
.fact-list li { padding: 14px 0; border-bottom: 1px solid var(--divider); }
.fact-list a { text-decoration: none; }
.fact-list .d { display: block; font-size: var(--text-body-sm); color: var(--text-secondary); margin-bottom: 2px; }

.fact-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.fact-cats a {
  font-size: var(--text-body-sm);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  text-decoration: none;
  color: var(--text-primary);
}
.fact-cats a.is-current { background: var(--text-primary); color: var(--bg); }