/* Shared by the district view and the family note: paper pages inside the Option B header bar. */
:root { --ink: #16202E; --ink-2: #44505F; --paper-pg: #FBFAF6; --rule: #D9DEE6; --blue: #1F7CC4; --blue-d: #1B4E8A; --plum: #A62A76; --coral-d: #C2402F; --lime-d: #5E7A1C; }
html { scroll-behavior: smooth; }
body.rpt { background: var(--paper-pg); color: var(--ink); display: block; min-height: 100svh; }
.rpt .bar { background: var(--navy); padding-top: 14px; padding-bottom: 14px; }
.rpt .bar__tag { grid-column: 3; }
.rpt .lang { grid-column: 2; }
.rpt .skip { background: var(--navy); color: #fff; }
.rpt :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.rpt .bar :focus-visible { outline-color: var(--pl1); }
.page { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter) 72px; }
.rpt h1, .rpt h2, .rpt h3 { font-weight: 600; letter-spacing: -.03em; text-wrap: balance; color: var(--ink); }
.rpt h1 { font-size: clamp(40px, 7vw, 92px); line-height: .98; margin: 0; }
.rpt h1 span, .rpt h2 span { display: block; }
.rpt h2 { font-size: clamp(28px, 4vw, 52px); line-height: 1.03; margin: 0; }
.rpt h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.rpt p { margin: 0; }
.eyebrow { font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); margin: 0 0 14px; }
.tagline { display: inline-block; font-size: 13px; font-weight: 700; color: #6B3A00; background: #FCEBCB; padding: 3px 10px; border-radius: 999px; }
.tagline.sample { background: #E6EEF8; color: var(--blue-d); }
.tagline.ill { background: #FCEBCB; color: #6B3A00; }
.src { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.src b { font-weight: 700; color: var(--ink); }

/* clip player */
.clip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: start; }
.play { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; }
.play svg { width: 20px; height: 20px; fill: currentColor; }
.play .i-pause { display: none; } .play[aria-pressed="true"] .i-play { display: none; } .play[aria-pressed="true"] .i-pause { display: block; }
.play:hover { background: #174A75; }
.clip .tx { display: grid; gap: 8px; font-size: 17px; line-height: 1.5; min-width: 0; }
.clip .tx p b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-right: 8px; font-weight: 700; }
.clip .tx p.ahmed { color: var(--ink-2); font-size: 15.5px; }
.clip .tx .wd.now { background: #FFE9A8; border-radius: 2px; }
.clip .tx .wd { transition: background .1s; }
.clip.noaudio .play { display: none; } .clip.noaudio { grid-template-columns: 1fr; }
.clip .prog { grid-column: 2; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.clip.noaudio .prog { display: none; }
.clip .prog i { display: block; height: 100%; width: 0; background: var(--blue); }
.clip .nofile { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); }

@media print {
  html { scroll-behavior: auto; }
  body.rpt { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  * { box-shadow: none !important; }
  .play, .prog, .noprint { display: none !important; }
  .clip { grid-template-columns: 1fr; }
  .skip { display: none; }
}
.clip .tx > p { display: block; }

/* phone: the language toggle drops under the lockup so the shared header never forces sideways scroll */
@media (max-width: 700px) { .rpt .bar .lang { grid-column: 1 / -1 !important; justify-self: start !important; } .rpt .bar nav, .rpt .crumbs { min-width: 0; } }