/* ==========================================================================
   IEP Standards Report (/gym/report/) — page styles.
   Tokens, fonts, buttons (.btn/.rf-btn-*) and inputs (.rf-input) come from
   /css/readflexes.css. On screen the report is a white sheet on the gym
   shell; in print the shell disappears and the sheet IS the page. The
   browser's print engine is the PDF renderer (the worksheet page's bargain).
   ========================================================================== */
:root{ --success:#00e676; --warning:#ffb020; --error:#ff4d6d; --paper:#ffffff; --ink:#16163a; --ink-muted:#4d5568; --rule:#d5d9e6; }

*{ box-sizing:border-box }
a{ color:inherit; text-decoration:none }
html,body{ height:100%; margin:0; overflow:hidden; display:block; }

.app{ display:grid; grid-template-columns:260px 1fr; height:100vh; }
.sidebar{ position:sticky; top:0; height:100vh; padding:18px 14px; border-right:1px solid var(--line);
  background:var(--panel); overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.brand{ display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.brand-logo{ height:120px; display:block; margin:0 auto; filter:drop-shadow(0 0 8px rgba(77,240,255,.25)); }
.brand-sub{ text-align:center; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin:6px 0 18px; }
.nav-section{ margin-top:14px; }
.nav-title{ padding:8px 10px; }
.nav{ display:flex; flex-direction:column; gap:4px; padding:0 6px 8px; }
.nav a{ padding:10px 14px; border-radius:999px; border:1px solid transparent; display:flex; align-items:center; gap:10px; font-weight:700; color:var(--text);
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s; }
.nav a:hover{ background:rgba(77,240,255,.08); border-color:var(--line); }
.nav a.active{ color:var(--neon-cyan); border-color:rgba(77,240,255,.45); background:rgba(77,240,255,.10); box-shadow:var(--glow-cyan); }
.nav a .icon{ width:18px; text-align:center; opacity:.9; }

.main{ padding:22px; height:100vh; overflow:auto; overscroll-behavior:contain; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.hidden{ display:none !important; }

.page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.page-head h1{ margin:0 0 6px; font-size:26px; }
.page-head p{ margin:0; max-width:78ch; }
.page-head .rf-theme-toggle{ margin-right:150px; }

/* Controls rail */
.controls{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin-bottom:14px; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field > label{ color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.field .rf-input{ min-width:200px; }
.controls .spacer{ flex:1; }
#note{ font-size:13px; color:var(--muted); min-height:18px; }

/* The sheet */
.sheet{ background:var(--paper); color:var(--ink); border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.25); max-width:8.5in; margin:0 auto; padding:0.6in 0.7in; font-family:var(--font-body); font-size:11.5pt; line-height:1.45; }
.sheet h1{ font-size:20pt; margin:0 0 4pt; color:var(--ink); }
.sheet h2{ font-size:13.5pt; margin:18pt 0 6pt; padding-bottom:3pt; border-bottom:2px solid var(--ink); color:var(--ink); break-after:avoid; }
.sheet h3{ font-size:11.5pt; margin:10pt 0 4pt; color:var(--ink); }
.sheet p{ margin:0 0 6pt; }
.sheet .intro{ color:var(--ink-muted); font-size:10pt; margin-bottom:8pt; }
.sheet .meta{ display:grid; grid-template-columns:repeat(2, 1fr); gap:2pt 18pt; font-size:10.5pt; margin:8pt 0 4pt; }
.sheet .meta b{ color:var(--ink-muted); font-weight:700; font-size:9pt; text-transform:uppercase; letter-spacing:.05em; display:block; }
.sheet .src{ font-size:9.5pt; color:var(--ink-muted); border-left:3px solid var(--rule); padding-left:8pt; margin:8pt 0; }
.sheet table{ width:100%; border-collapse:collapse; font-size:10pt; margin:4pt 0 8pt; }
.sheet th, .sheet td{ text-align:left; padding:4pt 6pt; border-bottom:1px solid var(--rule); vertical-align:top; }
.sheet th{ font-size:8.5pt; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); border-bottom:1.5px solid var(--ink); }
.sheet tr{ break-inside:avoid; }
.sheet td.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.sheet .code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:9.5pt; white-space:nowrap; }
.sheet .band{ display:inline-block; padding:0 6pt; border-radius:999px; font-size:8.5pt; font-weight:800; text-transform:uppercase; letter-spacing:.04em; border:1px solid currentColor; white-space:nowrap; }
.band.b-mastered{ color:#0f7a3a; } .band.b-proficient{ color:#8a6d00; } .band.b-developing{ color:#b45309; } .band.b-support{ color:#b91c1c; } .band.b-thin, .band.b-unknown{ color:var(--ink-muted); border-style:dashed; }
.band.b-on-track{ color:#0f7a3a; } .band.b-some-risk{ color:#b45309; } .band.b-at-risk{ color:#b91c1c; }
.sheet .strand{ font-weight:800; font-size:9.5pt; color:var(--ink-muted); background:#f3f5fb; }
.sheet ul{ margin:2pt 0 6pt 16pt; padding:0; }
.sheet li{ margin:0 0 3pt; }
.sheet .iv{ border:1px solid var(--rule); border-radius:6px; padding:8pt 10pt; margin:0 0 8pt; break-inside:avoid; }
.sheet .iv h3{ margin:0 0 3pt; }
.sheet .iv .why{ font-size:10pt; margin-bottom:4pt; }
.sheet .iv .grp{ font-size:8.5pt; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); margin-top:5pt; }
.sheet .iv .item{ font-size:10pt; margin:1pt 0; }
.sheet .iv .item .s{ color:var(--ink-muted); font-size:9pt; }
.sheet .goal{ border-left:3px solid var(--ink); padding:2pt 0 2pt 10pt; margin:0 0 10pt; break-inside:avoid; }
.sheet .goal .f{ font-size:9.5pt; color:var(--ink-muted); }
.sheet .caution{ background:#fff7e6; border:1px solid #f0c36d; border-radius:6px; padding:6pt 10pt; font-size:10pt; margin:6pt 0; }
.sheet .foot{ margin-top:16pt; padding-top:8pt; border-top:1px solid var(--rule); font-size:9.5pt; color:var(--ink-muted); display:flex; justify-content:space-between; gap:12pt; }
.sheet .sig{ margin-top:22pt; display:grid; grid-template-columns:1fr 1fr; gap:24pt; font-size:9.5pt; color:var(--ink-muted); }
.sheet .sig div{ border-top:1px solid var(--ink); padding-top:3pt; }

@media (max-width:860px){
  html,body{ overflow:auto; height:auto; }
  .app{ display:block; height:auto; }
  .main{ height:auto; padding:12px; }
  .sheet{ padding:18px 16px; font-size:11pt; }
  .sheet .meta{ grid-template-columns:1fr; }
}

@page{ size:letter; margin:0.6in 0.6in 0.7in; }
@media print{
  html,body{ overflow:visible; height:auto; background:#fff; }
  .app{ display:block; height:auto; }
  .sidebar, .page-head, .controls, .gym-topbar, .rf-lang, #focus-sounds-widget, .rf-theme-toggle{ display:none !important; }
  .main{ height:auto; overflow:visible; padding:0; }
  .sheet{ box-shadow:none; border-radius:0; max-width:none; margin:0; padding:0; }
  .sheet h2{ break-after:avoid; }
  a{ color:inherit; }
}