/* Real Heroes print page (/heroes/{slug}/print/): the story and the worksheets on A4. On screen, a preview of the paper.
   html[data-lang] = en | hi | both; html.no-story / .no-citation / .no-primary / .no-middle / .no-senior hide those parts. */
:root { --ink: #1d1a16; --muted: #5f574c; --accent: #B65C0F; --line: #e4d9c8; --desk: #efe8dc;
  --font-en: "Inter", system-ui, sans-serif; --font-head: "Space Grotesk", "Inter", sans-serif; --font-hi: "Noto Sans Devanagari", "Nirmala UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 400 10.5pt/1.55 var(--font-en); }
[lang="hi"], .t-hi { font-family: var(--font-hi); }
h1, h2, h3, p { margin: 0; }
html[data-lang="en"] .t-hi, html[data-lang="hi"] .t-en { display: none !important; }
html.no-story .opt-story, html.no-citation .opt-citation, html.no-primary .opt-primary, html.no-middle .opt-middle, html.no-senior .opt-senior { display: none; }

.pr-tools { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding: 12px max(16px, calc((100% - 210mm) / 2)); background: #fffaf2; border-bottom: 1px solid var(--line); font-size: 14px; }
.pr-tools fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.pr-tools legend { float: left; font-weight: 600; color: var(--muted); margin-right: 8px; }
.pr-tools label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; min-height: 32px; }
.pr-tools input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.pr-back { color: var(--accent); font-weight: 600; text-decoration: none; }
.pr-print { font: 600 14px var(--font-en); background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; }
.pr-hint { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }

.pr-paper { width: min(210mm, 100% - 32px); margin: 20px auto 40px; padding: 16mm 15mm; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); }
.pr-title { text-align: center; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--accent); }
.pr-kicker { color: var(--accent); font-weight: 600; font-size: 9.5pt; }
html[data-lang="both"] .pr-kicker .t-hi::before { content: " · "; }
.pr-title h1 { font: 700 21pt/1.25 var(--font-head); margin: 4px 0 2px; }
html[data-lang="both"] .pr-title h1 .t-hi { display: block; font: 600 15pt var(--font-hi); color: var(--muted); }
.pr-war { color: var(--muted); }
html[data-lang="both"] .pr-war .t-hi::before { content: " · "; }
.pr-img { width: 100%; height: auto; max-height: 85mm; object-fit: cover; border-radius: 6px; margin: 6px 0 12px; display: block; }
.pr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-bottom: 8px; break-inside: avoid; }
html[data-lang="en"] .pr-two, html[data-lang="hi"] .pr-two { grid-template-columns: 1fr; }
.pr-two .t-hi { line-height: 1.7; }
.pr-label { font: 600 9pt var(--font-en); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 12px 0 4px; }
.pr-label .t-hi { text-transform: none; letter-spacing: 0; font-size: 10pt; }
html[data-lang="both"] .pr-label .t-hi::before { content: " · "; }
.pr-facts { margin: 0; padding-left: 18px; }
html[data-lang="both"] .pr-facts .t-hi::before { content: " / "; color: var(--muted); }
.pr-note { color: var(--muted); font-size: 9pt; margin-top: 8px; }
html[data-lang="both"] .pr-note .t-hi { display: block; margin-top: 2px; }
.pr-cite blockquote { margin: 4px 0; padding-left: 12px; border-left: 3px solid var(--accent); font-size: 9.5pt; line-height: 1.6; }

/* worksheets: each on its own page */
.ws { break-before: page; padding-top: 4mm; }
.pr-paper > .ws:first-of-type { break-before: auto; }
.ws-head { border-bottom: 2px solid var(--accent); padding-bottom: 8px; margin-bottom: 10px; }
.ws-kicker { color: var(--accent); font-weight: 600; font-size: 10pt; }
html[data-lang="both"] .ws-kicker .t-hi::before { content: " · "; }
.ws-fill { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; font-size: 10pt; }
.ws-q { padding-left: 20px; margin: 0; }
.ws-q li { margin-bottom: 6px; break-inside: avoid; }
html[data-lang="both"] .ws-q .t-hi { display: block; color: var(--muted); }
.lines { height: 22mm; background: repeating-linear-gradient(transparent 0 6.6mm, #cfc4b2 6.6mm 6.9mm); margin-top: 4px; }
.ws-act { font-weight: 500; }
html[data-lang="both"] .ws-act.t-hi { margin-top: 2px; color: var(--muted); }
.ws-box { height: 70mm; border: 1.5px dashed #cfc4b2; border-radius: 6px; margin-top: 8px; background: repeating-linear-gradient(transparent 0 7mm, #ece4d6 7mm 7.3mm); }
.ws-box.ws-draw { background: none; height: 90mm; }
.pr-foot { margin-top: 14px; color: var(--muted); font-size: 8.5pt; text-align: center; }

@media (max-width: 640px) {
  .pr-tools { position: static; }
  .pr-paper { padding: 20px 16px; width: 100%; margin: 0; box-shadow: none; }
  .pr-two { grid-template-columns: 1fr; }
}
@page { size: A4; margin: 13mm 13mm 15mm; @bottom-center { content: counter(page); font: 8pt sans-serif; color: #777; } }
@media print {
  body { background: #fff; font-size: 10pt; }
  .pr-tools { display: none; }
  .pr-paper { width: auto; margin: 0; padding: 0; box-shadow: none; }
  .pr-two { grid-template-columns: 1fr 1fr; }
  html[data-lang="en"] .pr-two, html[data-lang="hi"] .pr-two { grid-template-columns: 1fr; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}