/* Student-facing printable daily handout. Works LTR and RTL, and prints cleanly on a black-and-white classroom printer. Loaded together with styles.css on every handout page -- deliberately does NOT redeclare --ink or --muted here. Both are already provided, correctly, for light AND dark mode, by styles.css; redeclaring them in this file's own unconditional :root previously created a real bug: this file's --ink had no dark-mode counterpart, so in dark mode .vcard-prompt (and anything else using --ink) silently fell back to the LIGHT value (a dark navy) against a dark background -- ~1:1 contrast, completely unreadable. Only declare tokens unique to this file (--paper, --accent, --line) to avoid that class of bug recurring. */ :root{ --paper:#ffffff; --accent:#0b5fa5; --line:#c7d2db; } body.handout-body{background:#e7edf2; margin:0; font-family:"Segoe UI", system-ui, Arial, Helvetica, sans-serif; color:var(--ink)} .handout-toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; background:linear-gradient(160deg, #0b3a63, #062440); color:#fff; padding:12px 18px; font-size:14px; } .handout-toolbar a{color:#fff; font-weight:600; text-decoration:none; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.12)} .handout-toolbar a:hover{background:rgba(255,255,255,.26)} .handout-toolbar a.current{background:#fff; color:#0b3a63} .handout-toolbar button{ background:#fff; color:#0b3a63; border:none; padding:8px 16px; border-radius:999px; font-weight:700; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.15); } .handout-toolbar button:hover{background:#dfeaf5} .handout-sheet{ max-width:800px; margin:26px auto; background:var(--paper); padding:32px 36px 44px; border-radius:16px; box-shadow:0 2px 8px rgba(11,58,99,.08), 0 14px 34px rgba(11,58,99,.1); } .handout-head{border-bottom:4px solid var(--accent); padding-bottom:14px; margin-bottom:20px} .handout-head h1{margin:0 0 6px; font-size:23px; color:var(--accent); letter-spacing:-.01em} .handout-sub{margin:0 0 12px; font-size:14px; color:var(--muted)} .handout-fields{display:flex; flex-wrap:wrap; gap:10px 22px; font-size:14px} .handout-fields span{border-bottom:1px solid var(--line); padding-bottom:2px} .handout-section{margin:22px 0} .handout-section h2{font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); border-bottom:2px solid #eef4f9; padding-bottom:6px; margin-bottom:10px} .handout-hint{font-size:13px; font-style:italic; color:var(--muted); margin-top:0} .write-line{border-bottom:1px solid #b7c3cd; height:22px; margin:8px 0} .draw-box{border:1.5px dashed #b7c3cd; height:96px; margin:8px 0 4px; border-radius:8px; background:#fbfcfe} .vcard{display:flex; gap:16px; border:1px solid #dde6ee; border-radius:12px; padding:16px; margin:14px 0; page-break-inside:avoid; background:#fbfdff} .vcard-icon{flex:0 0 52px; display:flex; align-items:flex-start; justify-content:center} .vcard-icon svg{width:48px; height:48px; stroke:var(--accent); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round} .vcard-body{flex:1; min-width:0} .vcard-term{margin:0 0 5px; font-size:17px; color:var(--ink)} .vcard-def{margin:0 0 8px; font-size:14px; color:var(--muted)} .vcard-prompt{margin:8px 0 3px; font-size:13px; font-weight:700; color:var(--ink)} /* RTL: mirror the icon+text order and field alignment */ html[dir="rtl"] .vcard{flex-direction:row-reverse} html[dir="rtl"] .handout-fields{flex-direction:row-reverse; justify-content:flex-end} html[dir="rtl"] body.handout-body{direction:rtl} /* ---------- 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"]{--accent:#5ea6e6; --line:#2c4155} [data-theme="dark"] body.handout-body{background:#0a1723} [data-theme="dark"] .handout-sheet{background:#0f2233; color:#e9f1f8} [data-theme="dark"] .handout-head{border-color:#5ea6e6} [data-theme="dark"] .handout-fields span{border-color:#2c4155} [data-theme="dark"] .handout-section h2{border-color:#16293a} [data-theme="dark"] .vcard{border-color:#22394d; background:#0c1e2e} [data-theme="dark"] .vcard-term{color:#e9f1f8} [data-theme="dark"] .write-line{border-color:#2c4155} [data-theme="dark"] .draw-box{border-color:#2c4155; background:#0c1e2e} [data-theme="dark"] .handout-toolbar a.current{background:#0f2233; color:#5ea6e6} @media print{ body.handout-body{background:#fff} .no-print, .handout-toolbar{display:none !important} .handout-sheet{box-shadow:none; border:1px solid #ccc; margin:0; max-width:100%; border-radius:0} .vcard{break-inside:avoid; background:#fff} }