/* Substitute Teacher Guide — a scripted, printable runsheet for one class day. Reuses --primary/--surface/--border tokens from styles.css; this file adds the teal accent and runsheet-specific layout. */ :root{ --sub-accent:#0f766e; --sub-accent-dark:#0a4f4a; } body.sub-body{background:var(--bg); margin:0} .sub-toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; background:linear-gradient(160deg, var(--sub-accent), var(--sub-accent-dark)); color:#fff; padding:12px 18px; font-size:14px; position:sticky; top:0; z-index:10; } .sub-toolbar a{color:#fff; font-weight:600; text-decoration:none; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.16); margin-right:8px} .sub-toolbar a:hover{background:rgba(255,255,255,.3)} .sub-toolbar button{background:#fff; color:var(--sub-accent-dark); border:none; padding:8px 16px; border-radius:999px; font-weight:700; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.15)} .sub-toolbar button:hover{background:#e3fbf8} .sub-sheet{max-width:760px; margin:0 auto; padding:24px 20px 60px} .sub-head{border-bottom:4px solid var(--sub-accent); padding-bottom:14px; margin-bottom:18px} .sub-eyebrow{margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--sub-accent)} .sub-head h1{margin:0 0 6px; font-size:24px; color:var(--ink)} .sub-focus{margin:0; font-size:15px; color:var(--muted)} .sub-card{border-left:5px solid var(--sub-accent)} .sub-card h2{color:var(--sub-accent-dark); font-size:16px} .sub-note{border-left-color:#c0561a; background:#fff4ec} .sub-note h2{color:#c0561a} .sub-saythis{background:#eafbfa} .sub-saythis blockquote{ margin:10px 0 0; padding:12px 16px; background:#fff; border-left:4px solid var(--sub-accent); border-radius:6px; font-size:17px; font-style:italic; color:var(--ink); } .sub-contingency{background:#fdf8ec; border-left-color:#c98a00} .sub-contingency h2{color:#8a5c00} .sub-fillin{background:var(--primary-light)} .sub-fillin ul{list-style:none; padding-left:0} .sub-fillin li{margin:10px 0; border-bottom:1px dashed var(--border); padding-bottom:8px} .sub-steps{list-style:none; padding-left:0; counter-reset:substep} .sub-step{ counter-increment:substep; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; margin:12px 0; position:relative; } .sub-step-head{font-weight:800; color:var(--sub-accent-dark); margin-bottom:6px} .step-time{ display:inline-block; background:var(--sub-accent); color:#fff; font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; margin-left:4px; } .sub-step-say{margin:4px 0; font-weight:600} .sub-step-do{margin:4px 0; color:var(--muted)} .sub-pager{display:flex; justify-content:space-between; padding:16px 4px; font-weight:700} .sub-pager a{color:var(--sub-accent-dark); text-decoration:none} .sub-pager a:hover{text-decoration:underline} /* ---------- Dark mode (opt-in, NOT automatic) ---------- */ /* Light stays the default for every visitor regardless of OS/browser preference -- these rules only apply under an explicit data-theme="dark" on , which nothing currently sets. Kept for a future manual toggle instead of deleted. */ :root[data-theme="dark"]{ --sub-accent:#3ecdbd; --sub-accent-dark:#0d332f; } /* .sub-toolbar's gradient uses --sub-accent, which in dark mode becomes a bright teal (correct for badges/text on a dark surface, wrong for a header background) -- white toolbar text had only ~1.97:1 contrast near that end. Hardcode a dark-safe gradient instead. */ [data-theme="dark"] .sub-toolbar{background:linear-gradient(160deg, #0f4d47, #051a17)} [data-theme="dark"] .sub-toolbar button{color:#0a2a26} /* These three all used --sub-accent-dark for TEXT against the page's card/background surface -- correct in light mode (a dark teal on white), but in dark mode --sub-accent-dark becomes an even darker, near-black teal, landing on the also-dark card surface at ~1.2:1 contrast (nearly every section heading + the prev/next pager links on every substitute guide page). Switch to --sub-accent, which correctly becomes a bright teal in dark mode. */ [data-theme="dark"] .sub-card h2{color:var(--sub-accent)} [data-theme="dark"] .sub-step-head{color:var(--sub-accent)} [data-theme="dark"] .sub-pager a{color:var(--sub-accent)} [data-theme="dark"] .sub-note{background:#3a1d0a; color:#ffd9b8} [data-theme="dark"] .sub-note h2{color:#ff9f5c} [data-theme="dark"] .sub-saythis{background:#0c2a27} [data-theme="dark"] .sub-saythis blockquote{background:#0f2233; color:var(--ink)} [data-theme="dark"] .sub-contingency{background:#2a2107; color:#ffe9a8} [data-theme="dark"] .sub-contingency h2{color:#ffcf6b} @media print{ body.sub-body{background:#fff} .no-print{display:none !important} .sub-sheet{max-width:100%; padding:0 6mm} .sub-step{break-inside:avoid; border-color:#999} .sub-saythis blockquote{border-left-color:#000} }