/* Time-travel debate page. Uses the tokens from style.css. */
.debate-page { background: var(--gray-50); }
.dv { max-width: 1040px; margin: 0 auto; padding: 32px var(--s6) 0; }
.dv svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--t11); color: var(--muted-foreground); background: var(--background); }

/* hero */
.dv-hero { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: center; margin-bottom: var(--s6); }
.dv-eyebrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dv-hero h1 { font-size: 36px; letter-spacing: -0.024em; }
.dv-lede { margin-top: 8px; max-width: 640px; color: var(--muted-foreground); font-size: var(--t16); line-height: 1.55; }
.dv-portal { display: inline-flex; align-items: center; gap: var(--s3); padding: 12px 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--background); box-shadow: 0 1px 3px rgba(0, 0, 0, .03); }
.dv-portal .yr { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
.dv-portal .old { font-family: var(--font-source); color: var(--paper-foreground); font-style: italic; }
.dv-portal .new { color: var(--sky-700); }
.dv-portal .ring { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-100); }
.dv-portal .ring svg { width: 18px; height: 18px; color: var(--muted-foreground); }

/* tabs */
.dv-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: var(--s4); }
.dv-tab { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; text-align: left; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--background); cursor: pointer; font: inherit; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.02); transition: transform .15s, box-shadow .15s, border-color .15s; }
.dv-tab:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .05); border-color: var(--border-strong); }
.dv-tab[aria-selected="true"] { border-color: var(--foreground); box-shadow: 0 0 0 1px var(--foreground); }
.dv-tab img, .dv-tab .ph { width: 48px; height: 60px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--paper-border); background: var(--paper-tint); }
.dv-tab b { display: block; font-size: var(--t14); line-height: 1.25; }
.dv-tab small { display: block; color: var(--muted-foreground); font-size: var(--t11); line-height: 1.3; margin-top: 2px; }
.dv-tab .k { font-family: var(--font-mono); font-size: 11px; color: var(--subtle-foreground); }

/* scoreboard */
.dv-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s4); align-items: center; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--background); box-shadow: 0 1px 3px rgba(0,0,0,.02); position: relative; overflow: hidden; }
.dv-board::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243, 239, 232, 0.55), transparent 35%, transparent 65%, rgba(240, 247, 255, 0.55)); pointer-events: none; }
.side { display: flex; align-items: center; gap: var(--s3); position: relative; }
.side.right { flex-direction: row-reverse; text-align: right; }
.side .who b { display: block; font-size: var(--t16); }
.side .who span { font-size: var(--t12); color: var(--muted-foreground); }
.side.left .who b { font-family: var(--font-source); font-style: italic; font-weight: 500; font-size: 18px; color: var(--paper-foreground); }
.score { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.score.bump { animation: bump .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }
.mid { text-align: center; position: relative; max-width: 360px; }
.mid .vs { font-family: var(--font-mono); font-size: 10px; color: var(--subtle-foreground); letter-spacing: .16em; }
.mid .motion { font-family: var(--font-display); font-weight: 600; font-size: var(--t16); line-height: 1.35; margin: 2px 0 6px; }
.mid .draws { font-size: var(--t11); color: var(--muted-foreground); }
.stats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; padding-top: var(--s3); border-top: 1px solid var(--border); position: relative; font-size: var(--t12); color: var(--muted-foreground); }
.stats .num { color: var(--foreground); font-weight: 500; }
.meter { display: inline-flex; align-items: center; gap: var(--s2); }
.meter .bar { width: 130px; height: 6px; border-radius: 999px; background: var(--gray-200); display: flex; overflow: hidden; }
.meter .bar i { display: block; height: 100%; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.meter .bar .v { background: var(--green-400); } .meter .bar .c { background: var(--sky-400); } .meter .bar .u { background: var(--rose-200); }
.stats .src { margin-left: auto; }

.avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; }
.avatar svg { width: 44px; height: 44px; stroke: none; }
.avatar.scholar .av-bg { fill: var(--paper-tint); stroke: var(--side-britannica); stroke-width: 1.2; }
.avatar.wikipedian .av-bg { fill: var(--sky-50); stroke: var(--sky-200); stroke-width: 1.2; }
.avatar.judge .av-bg { fill: var(--gray-100); stroke: var(--gray-300); stroke-width: 1.2; }
.av-face { fill: #f6dcc4; } .av-wig, .av-wigtop { fill: #f4f1ea; stroke: #cfc6b2; stroke-width: 1; }
.av-wig { fill: none; stroke: #e9e3d6; stroke-width: 4; stroke-linecap: round; }
.av-hair { fill: #374151; } .av-ink { fill: #1f2937; } .av-line { fill: none; stroke: #1f2937; stroke-width: 1.2; stroke-linecap: round; }
.av-coat { fill: #6b4f2a; } .av-quill { fill: #ffffff; stroke: #8a6d3b; stroke-width: 1; }
.av-screen { fill: #1f2937; } .av-w { fill: #ffffff; font: 700 9px var(--font-source); }
.av-gavel { fill: #6e6e73; }

/* exhibits */
.dv-exhibits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 var(--s6); }
.exhibit { display: flex; gap: var(--s3); align-items: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--background); transition: transform .15s, box-shadow .15s; min-width: 0; }
.exhibit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .05); }
.exhibit.b { background: var(--paper); border-color: var(--paper-border); }
.exhibit img { height: 52px; max-width: 200px; object-fit: cover; object-position: left top; border-radius: 4px; border: 1px solid var(--paper-border); }
.exhibit .wlogo { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--border); font: 600 24px var(--font-source); color: var(--gray-800); background: var(--background); flex: none; }
.exhibit .t { min-width: 0; }
.exhibit .t small { display: block; font-size: 11px; color: var(--subtle-foreground); text-transform: uppercase; letter-spacing: .05em; }
.exhibit .t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* arena */
.dv-arena { display: flex; flex-direction: column; gap: var(--s4); }
.turn { display: flex; gap: var(--s3); align-items: flex-start; max-width: 78%; animation: rise .35s cubic-bezier(.2, .8, .2, 1) both; }
.turn.wikipedian { flex-direction: row-reverse; margin-left: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bubble { position: relative; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--background); box-shadow: 0 1px 2px rgba(0, 0, 0, .03); min-width: 280px; transition: box-shadow .25s, border-color .25s; }
.turn.scholar .bubble { background: var(--paper); border-color: var(--paper-border); border-top-left-radius: 6px; font-family: var(--font-source); font-size: 16.5px; line-height: 1.58; color: var(--paper-foreground); }
.turn.wikipedian .bubble { border-top-right-radius: 6px; font-size: var(--t14); line-height: 1.55; }
.bubble .hd { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-family: var(--font-ui); font-size: var(--t12); color: var(--muted-foreground); margin-bottom: 6px; }
.bubble .hd b { color: var(--foreground); font-size: var(--t13); }
.turn.scholar .hd b { font-family: var(--font-source); font-style: italic; font-weight: 500; font-size: var(--t14); }
.bubble .hd .meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; }
.bubble p + p { margin-top: 8px; }
.glow .bubble, .card.glow { border-color: var(--border-strong); box-shadow: 0 4px 18px rgba(0, 0, 0, .07); }

/* words revealed by the replay */
.w { font-style: normal; opacity: 0; transition: opacity .12s; }
.w.on, .done .w { opacity: 1; }
.w.cur::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing { display: inline-flex; gap: 4px; align-items: center; font-family: var(--font-ui); font-size: var(--t12); color: var(--muted-foreground); padding: 2px 0 4px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--gray-400); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-3px); opacity: 1; } }

/* sentence check marks */
.s.unverified { background: linear-gradient(transparent 65%, var(--rose-50) 65%); text-decoration: underline dashed rgba(196, 28, 59, 0.45); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; }
.infer { font-style: italic; color: var(--muted-foreground); }

/* citation pills */
a.cite { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 11px; font-style: normal; line-height: 1.6; padding: 0 6px; margin: 0 1px; border-radius: 6px; border: 1px solid transparent; background: var(--gray-100); color: var(--gray-700); cursor: pointer; vertical-align: 1px; transition: background .15s; white-space: nowrap; }
a.cite:hover, a.cite:focus { background: var(--gray-200); }
a.cite.B { background: var(--paper-tint); color: var(--paper-foreground); }
a.cite.W { background: var(--sky-50); color: var(--sky-700); }
a.cite.ok::before { content: "\2713"; color: var(--green-700); font-weight: 600; }
a.cite.bad { background: var(--rose-50); color: var(--rose-700); }
a.cite.bad::before { content: "!"; font-weight: 600; }

/* tool strip and trace */
.tools { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; font-family: var(--font-ui); }
.tool { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-family: var(--font-mono); padding: 2px 8px 2px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--background); color: var(--muted-foreground); animation: pop .25s ease-out both; }
.tool svg { width: 12px; height: 12px; }
.tool.err { border-color: var(--rose-200); color: var(--rose-700); }
.tool img { width: 18px; height: 22px; object-fit: cover; object-position: top; border-radius: 2px; border: 1px solid var(--paper-border); }
@keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
details.trace { margin-top: 10px; font-family: var(--font-ui); font-size: var(--t12); }
details.trace summary { cursor: pointer; color: var(--muted-foreground); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
details.trace summary::before { content: "\203A"; font-size: 14px; transition: transform .15s; }
details.trace[open] summary::before { transform: rotate(90deg); }
details.trace ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
details.trace li { color: var(--gray-700); }
details.trace li code { font-size: 11px; }
details.trace .shot { display: block; margin-top: 4px; max-width: 160px; border: 1px solid var(--paper-border); border-radius: 4px; }
.checks { display: inline-flex; gap: 6px; }
.checks span { display: inline-flex; align-items: center; gap: 2px; }
.checks .v { color: var(--green-700); } .checks .c { color: var(--sky-700); } .checks .u { color: var(--rose-700); }
.failed .bubble { border-color: var(--rose-200); }
.errbox { margin-top: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--rose-50); color: var(--rose-700); font: 11px/1.4 var(--font-mono); white-space: pre-wrap; }

/* judge cards */
.card { align-self: center; width: min(620px, 100%); padding: 14px 18px; border: 1px solid var(--border); border-left: 3px solid var(--gray-300); border-radius: 12px; background: var(--background); animation: rise .35s cubic-bezier(.2, .8, .2, 1) both; transition: box-shadow .25s; }
.card.enduring { border-left-color: var(--enduring); } .card.renamed { border-left-color: var(--renamed); }
.card.superseded { border-left-color: var(--superseded); } .card.dropped { border-left-color: var(--dropped); }
.card .hd { display: flex; align-items: center; gap: var(--s2); margin-bottom: 6px; font-size: var(--t12); color: var(--muted-foreground); }
.card .hd .avatar, .card .hd .avatar svg { width: 26px; height: 26px; }
.card .pt { font-family: var(--font-display); font-weight: 600; font-size: var(--t14); line-height: 1.35; margin-bottom: 4px; }
.card .why { font-size: var(--t13); color: var(--gray-700); }
.win { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.win.scholar { background: var(--paper-tint); color: var(--paper-foreground); }
.win.wikipedian { background: var(--sky-50); color: var(--sky-700); }
.win.draw { background: var(--gray-100); color: var(--gray-700); }
.judge-turn { align-self: center; display: flex; gap: var(--s3); align-items: flex-start; width: min(620px, 100%); }
.judge-turn .bubble { flex: 1; background: var(--gray-50); border-color: var(--border); }

/* final verdict */
.final { align-self: center; width: min(680px, 100%); position: relative; padding: 24px; border-radius: 16px; border: 1px solid var(--border); background: var(--background); box-shadow: 0 2px 8px rgba(0,0,0,.03); text-align: center; animation: rise .4s both; overflow: hidden; }
.final .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--subtle-foreground); }
.final .why { margin: var(--s3) auto 0; max-width: 540px; text-align: left; font-size: var(--t13); line-height: 1.55; }
.stamp { display: inline-block; margin-top: 10px; padding: 6px 16px; border: 1px solid currentColor; border-radius: 999px; font: 600 16px var(--font-display); letter-spacing: -0.01em; }
.stamp.scholar { color: var(--paper-foreground); background: var(--paper-tint); border-color: var(--paper-border); }
.stamp.wikipedian { color: var(--sky-700); background: var(--sky-50); border-color: var(--sky-200); }
.stamp.draw { color: var(--gray-700); background: var(--gray-100); border-color: var(--gray-200); }
.final ul { text-align: left; margin: var(--s3) auto 0; max-width: 560px; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: var(--t12); }
.final li { display: flex; gap: 6px; align-items: flex-start; padding: 6px 10px; border-radius: 8px; }
.final li.flag { background: var(--amber-50); color: var(--amber-700); }
.final li.inf { background: var(--gray-100); color: var(--gray-700); }
.final li svg { width: 14px; height: 14px; margin-top: 2px; }

/* controls */
.dv-endpad { height: 120px; }
.dv-controls { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 8px 28px rgba(0, 0, 0, .1); }
.ctl { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--gray-700); cursor: pointer; transition: background .15s; font: inherit; }
.ctl:hover { background: rgba(0, 0, 0, .05); }
.ctl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ctl.play { width: 38px; height: 38px; background: var(--foreground); color: var(--background); }
.ctl.play svg { fill: currentColor; }
.ctl.play:hover { background: #333336; }
.ctl.speed { width: auto; padding: 0 8px; border-radius: 999px; font-size: var(--t12); }
.ctl-step { font-size: var(--t12); color: var(--muted-foreground); min-width: 44px; text-align: center; }
.ctl-dots { display: inline-flex; gap: 4px; }
.ctl-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); transition: background .25s, transform .25s; cursor: pointer; }
.ctl-dots i.on { background: var(--gray-400); } .ctl-dots i.now { background: var(--foreground); transform: scale(1.25); }
.kbd-hint { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--border); font-size: 11px; color: var(--subtle-foreground); }
.kbd-hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; margin-right: 2px; }
kbd { font: 10px var(--font-mono); padding: 1px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--gray-50); color: var(--muted-foreground); }

/* popover */
.dv-pop { position: fixed; z-index: 40; width: 320px; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); box-shadow: 0 16px 40px -12px rgba(31, 41, 55, .35); font-size: var(--t12); animation: pop .18s ease-out both; }
.dv-pop .k { display: flex; align-items: center; gap: 6px; font-size: var(--t11); color: var(--muted-foreground); }
.dv-pop b { display: block; font-size: var(--t14); margin: 2px 0; }
.dv-pop img { display: block; width: 100%; max-height: 140px; object-fit: cover; object-position: left top; margin: 6px 0; border-radius: 4px; border: 1px solid var(--paper-border); }
.dv-pop blockquote { margin: 6px 0 0; padding: 4px 8px; border-left: 3px solid var(--border-strong); color: var(--gray-700); font-family: var(--font-source); font-size: var(--t13); }
.dv-pop.B blockquote { border-color: var(--side-britannica); background: var(--paper); }
.dv-pop.W blockquote { border-color: var(--sky-200); background: var(--sky-50); }
.dv-pop .open { margin-top: 8px; display: inline-flex; gap: 4px; align-items: center; color: var(--foreground); font-weight: 600; }
.dv-pop svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.dv-toast { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); z-index: 40; padding: 6px 12px; border-radius: 999px; background: var(--foreground); color: var(--background); font-size: var(--t12); animation: pop .2s both; }
.dv-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 35; }

@media (max-width: 820px) {
  .dv-hero { grid-template-columns: 1fr; }
  .dv-tabs, .dv-exhibits { grid-template-columns: 1fr 1fr; }
  .turn { max-width: 100%; }
  .kbd-hint, .ctl-dots { display: none; }
  .dv-board { grid-template-columns: 1fr 1fr; } .dv-board .mid { grid-column: 1 / -1; order: -1; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dv *, .dv *::before, .dv *::after, .dv-controls *, .dv-pop { animation: none !important; transition: none !important; }
}