/* Academy page and share-card palette. Canvas export reads the --recap tokens. */
:root {
  --recap-paper: #fff; --recap-ink: #0d1257; --recap-muted: #4a5068;
  --recap-surface: #f5f6ff; --recap-border: #dcdfff; --recap-accent: #b91c1c;
  color-scheme: light; --bg: #fff; --bg-2: #f5f6ff;
  --text-primary: #1c2033; --text-secondary: #4a5068;
  --card-bg: #fff; --card-border: #dcdfff; --font-sans: Inter, sans-serif;
  --hdr: 69px; --surface: #fff; --border: #e3e5f3; --border-strong: #c9cde6;
  --ink: #0d1257; --row-hover: #f5f6ff; --navy-950: #0d1257; --text: #1c2033;
  --shadow: 0 1px 2px rgba(13,18,87,.06), 0 8px 24px -12px rgba(13,18,87,.18);
  --preview-card-scale: .85;
}
body { display: block; padding: 0; background: #fff; color: var(--text-primary); }
.page-container { width: min(1120px, 100%); margin: 0 auto; padding: 48px 24px; gap: 28px; }
.page-header { gap: 12px; }
.page-header h1 { color: var(--ink); font-size: clamp(32px, 3vw, 40px); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.page-header h1 .recap-title-accent { color: var(--recap-accent); }
.page-header .lede { white-space: normal; max-width: 62ch; }
.content-left, .content-right { min-width: 0; }
.content-right { margin-top: 0; }
form { padding: 24px; border-radius: 16px; box-shadow: 0 2px 8px rgba(13,18,87,.06); backdrop-filter: none; }
input, select { min-height: 44px; background-color: #fff; border-color: #c9cde6; color: var(--text-primary); }
input::placeholder { color: #636b80; }
input:focus, select:focus { border-color: #4c4eff; box-shadow: 0 0 0 3px #dcdfff; }
button { min-height: 44px; background: #0d1257; box-shadow: none; }
button:hover:not(:disabled) { background: #16164f; transform: none; box-shadow: none; }
button:focus-visible, a:focus-visible { outline: 2px solid #4c4eff; outline-offset: 3px; }
.data-source-toggle { background: #f5f6ff; border-color: #dcdfff; }
.toggle-option span { color: #4a5068; }
.toggle-option:has(input:checked) { background: #0d1257; box-shadow: none; }
.toggle-option:focus-within { outline: 2px solid #4c4eff; outline-offset: 2px; }
.toggle-option:focus-within:not(:has(input:checked)) span { color: #0d1257; }
.toggle-option:hover:not(:has(input:checked)) { background: #ebedff; }
.tournament-context { padding: 14px 16px; border: 1px solid var(--recap-border); background: var(--recap-surface); color: var(--recap-muted); line-height: 1.6; overflow-wrap: anywhere; }
.story-card, .story-card[data-role="judge"], .story-card.ghost-card {
  background: var(--recap-paper); color: var(--recap-ink);
  --text-primary: var(--recap-ink); --text-secondary: var(--recap-muted);
  border: 1px solid var(--recap-border); backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(13,18,87,.06);
}
.story-card .summary-peak, .story-card[data-role="judge"] .summary-peak,
.story-card .stat-item, .story-card .title-card, .story-card .chip,
.story-card .ghost-stat-box, .story-card .ghost-title-item {
  background: var(--recap-surface); border: 1px solid var(--recap-border);
  box-shadow: none; backdrop-filter: none;
}
.story-card .summary-peak, .story-card[data-role="judge"] .summary-peak { border-top-color: var(--recap-accent); }
.story-card .header-tourn-title, .story-card .summary-name, .story-card .hl-value,
.story-card .stat-val, .story-card .title-card-name, .story-card .ghost-callout h3 { color: var(--recap-ink); }
.story-card .summary-subtitle, .story-card .hl-label, .story-card .stat-lbl,
.story-card .section-label, .story-card .title-card-tagline, .story-card .story-watermark,
.story-card .ghost-callout p, .story-card .ghost-watermark { color: var(--recap-muted); }
.story-card .title-card-evidence, .story-card .title-card-rarity { color: var(--recap-accent); text-shadow: none; }
.story-card .ghost-badge, .story-card .ghost-callout-icon {
  background: var(--recap-surface); border: 1px solid var(--recap-border);
  color: var(--recap-accent); box-shadow: none;
}
.story-card .ghost-header, .story-card .ghost-footer,
.story-card .story-header-logo, .story-card .story-footer { border-color: var(--recap-border); }
.story-card .ghost-bar { background: var(--recap-border); }
.story-card .ghost-skeleton-group { opacity: 1; }
.story-card .ghost-watermark img { opacity: 1 !important; }
.data-source-toggle { box-shadow: none; }
.story-card ::selection { background: var(--recap-border); color: var(--recap-ink); }
.story-card .stat-val { font-variant-numeric: tabular-nums; }
.story-watermark { font-size: 9px; text-align: right; }
.story-watermark small { font-size: 7px; font-weight: 500; }
.story-card-wrapper { scroll-margin-top: 90px; }
#storyViewer { scroll-margin-top: 90px; }
.story-variants { display: flex; width: 100%; box-sizing: border-box; gap: 4px; border: 0; padding: 0; margin: 0 0 12px; }
.story-variants { scroll-margin-top: 90px; }
.content-right:has(#storyViewer[hidden]) .story-variants { visibility: hidden; }
.content-right:has(#storyViewer[hidden]) .story-toolbar { visibility: hidden; }
.story-toolbar { width: 100%; display: flex; align-items: flex-end; gap: 12px; scroll-margin-top: 90px; }
.story-toolbar .story-variants { flex: 1; min-width: 0; margin-bottom: 0; }
.story-toolbar #btnExportImage { flex: none; white-space: nowrap; }
.ghost-skeleton-group { display: none; }
.story-variants legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.story-variants label { position: relative; flex: 1; display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 8px; border: 1px solid var(--recap-border); border-radius: 8px; font-size: 13px; cursor: pointer; }
.story-variants label:has(:checked) { background: var(--recap-ink); color: white; }
.story-variants label:has(:focus-visible) { outline: 2px solid var(--recap-accent); outline-offset: 2px; }
.story-variants input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#storyViewer:focus-visible { outline: 2px solid var(--recap-ink); outline-offset: 4px; }
.recap-details summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--recap-muted); }
.recap-details[open] { display: grid; gap: 16px; }
.recap-details summary:focus-visible { outline: 2px solid var(--recap-ink); outline-offset: 2px; }
.generation-error { margin: 0; color: var(--recap-accent); font-size: 14px; line-height: 1.5; }
.story-artwork.wrapped-save-image { width: 360px; max-width: none; height: 640px; margin: 0; border: 0; border-radius: 0; }
.story-card.story-ready { padding: 0; border: 0; border-radius: 0; outline: 1px solid var(--recap-border); }
.story-artwork { position: absolute; inset: 0; display: block; width: 360px; height: 640px; }
/* Keep the text recap available to assistive technology behind the artwork. */
.story-card.story-ready > :not(.story-artwork) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.wrapped-save-fallback { color: #4a5068; }
.wrapped-save-fallback a { background: #0d1257; border-color: #0d1257; }
.hdr button { width: auto; min-height: 0; padding: 0; border-radius: 0; box-shadow: none; transition: none; }
.hdr button:hover { transform: none; box-shadow: none; }
.hdr .dd-btn:hover, .hdr .btn:hover { background: transparent; }
.hdr .dd-menu a { color: #0d1257; }
@media (min-width: 800px) {
  :root { --preview-card-scale: clamp(.4, calc((100svh - 220px) / 640px), 1.05); }
  .page-container {
    display: grid; grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto 1fr; align-items: start;
    padding-top: 32px; padding-bottom: 24px; gap: 24px;
  }
  .page-header { grid-column: 1; grid-row: 1; }
  .page-container > main { display: contents; }
  .content-left { grid-column: 1; grid-row: 2; }
  .content-right { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; gap: 12px; max-height: none; overflow: visible; padding-right: 0; }
  .story-toolbar #btnExportImage { padding: 12px !important; font-size: 13px; }
  .story-toolbar .story-variants label { padding: 8px 4px; font-size: 12px; }
  .page-header .lede { margin-bottom: 0; }
}
@media (max-width: 799px) {
  input, select, #btnGenerate, #btnExportImage { font-size: 16px; }
  .toggle-option { min-height: 44px; }
  .recap-details summary { font-size: 14px; }
  :root { --preview-card-scale: min(1, calc((100vw - 40px) / 360px)); }
  .page-container { padding: 32px 20px; }
  .content-right { align-items: center; overflow: visible; }
  #storyViewer, #placeholderGuidance { width: 100%; }
  .content-right:has(#storyViewer[hidden]) .story-variants { display: none; }
  .content-right:has(#storyViewer[hidden]) .story-toolbar { display: none; }
  .story-toolbar { display: block; }
  #storyViewer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .content-right:has(#storyViewer:not([hidden])) #btnExportImage {
    position: fixed; z-index: 40;
    left: 20px; right: 20px; bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100% - 40px) !important; min-height: 48px;
    box-shadow: 0 0 0 12px white;
  }
  form { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}