:root { color-scheme: light dark; --bg:#f7f6fb; --fg:#15131f; --muted:#5f5b70; --accent:#5b48d6; --card:#ffffff; --line:#e3e0ee; --tint:#eeebfb; }
@media (prefers-color-scheme: dark) { :root { --bg:#0e0d16; --fg:#efedf7; --muted:#a7a3b8; --accent:#a594ff; --card:#18162a; --line:#2a2740; --tint:#1e1b33; } }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width:720px; margin:0 auto; padding:36px 16px 64px; }
main.wide { max-width:1096px; }
main.wide > :not(.sheet-wrap) { max-width:720px; margin-left:auto; margin-right:auto; }
nav { display:flex; gap:16px; flex-wrap:wrap; font-size:15px; margin-bottom:32px; }
nav a { color:var(--muted); text-decoration:none; } nav a:hover { color:var(--fg); }
nav a.home { color:var(--fg); font-weight:600; margin-right:auto; display:flex; align-items:center; gap:8px; }
nav img { width:24px; height:24px; border-radius:6px; }
h1, h2 { font-family:"Iowan Old Style", "Palatino Linotype", Georgia, serif; font-weight:600; }
h1 { font-size:clamp(29px, 6vw, 40px); line-height:1.18; margin:0 0 12px; }
h2 { margin-top:42px; font-size:24px; line-height:1.3; } h3 { font-size:17px; margin:24px 0 6px; }
p.lead { color:var(--muted); font-size:19px; margin-top:0; }
a { color:var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin:16px 0; }
.crisis { background:var(--tint); border-radius:14px; padding:14px 18px; margin:18px 0; font-size:16px; }
.soon { display:inline-block; background:var(--card); border:1px solid var(--line); font-weight:600; padding:11px 18px; border-radius:12px; margin:8px 0 4px; }
.note { color:var(--muted); font-size:14px; }
.shots { display:flex; gap:12px; overflow-x:auto; padding:8px 16px 12px; margin:28px -16px 0; scroll-snap-type:x mandatory; }
.shots img { width:200px; height:auto; aspect-ratio:1/2; border-radius:16px; flex:none; scroll-snap-align:start; background:#15112a; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; }
.grid .card { margin:0; } .grid h3 { margin-top:0; }
ul, ol { padding-left:22px; } li { margin:4px 0; }
footer { color:var(--muted); font-size:14px; margin-top:56px; border-top:1px solid var(--line); padding-top:16px; }
@media (max-width: 480px) { nav { gap:12px; font-size:14px; } nav a.home { width:100%; margin-bottom:2px; } }

/* Printable card: controls */
.controls { display:flex; flex-wrap:wrap; align-items:end; gap:12px 16px; margin:20px auto; }
.controls label { display:block; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:4px; }
.controls select { font:inherit; font-size:16px; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.controls button { font:inherit; font-weight:600; color:#fff; background:#5b48d6; border:0; border-radius:10px; padding:10px 22px; cursor:pointer; }
.controls button:focus-visible, .controls select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Printable card: the sheet. Always paper colours, in dark mode too. */
.sheet-wrap { overflow-x:auto; margin:16px 0; border-radius:6px; }
.sheet { --ink:#1c1b22; --soft:#625f73; --rule:#b9b4cf; --heavy:#5f5a7d; --band:#ebe8fa; --shade:#f6f5fc; --mark:#4a39bd;
  width:1064px; padding:6mm; background:#fff; color:var(--ink);
  font:8.2pt/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme:light; }
.sheet-head { display:flex; align-items:baseline; gap:5mm; height:8mm; }
.sheet-title { font:600 16pt/1.1 "Iowan Old Style", "Palatino Linotype", Georgia, serif; color:var(--mark); }
.sheet-sub { color:var(--soft); }
.sheet-fields { margin-left:auto; display:flex; gap:5mm; }
.sheet-fields span { display:flex; align-items:baseline; gap:1.5mm; color:var(--soft); white-space:nowrap; }
.sheet-fields i { display:block; border-bottom:0.6pt solid var(--ink); }
.sheet-fields .name i { width:34mm; } .sheet-fields .week i { width:28mm; }

.days { margin-top:1.4mm; width:100%; border-collapse:collapse; table-layout:fixed; }
.days th, .days td { border:0.5pt solid var(--rule); padding:0; text-align:center; }
.days thead th { background:var(--band); font-weight:600; font-size:7.6pt; line-height:1.15; padding:0.6mm 0.5mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.days thead .group { font-size:8.4pt; height:5.6mm; color:var(--mark); }
.days thead .target { height:15mm; }
.days thead .sub { height:4.6mm; font-weight:400; font-size:7pt; background:#fff; }
.days thead .own { font-weight:400; color:var(--soft); }
.v { display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg); text-align:left; white-space:normal; height:18.6mm; }
.days tbody th { font-weight:600; text-align:left; padding-left:1.6mm; font-size:8.6pt; }
.days tbody tr { height:13.2mm; }
.days .tick { background:var(--shade); -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.box { display:inline-block; width:3.4mm; height:3.4mm; border:0.6pt solid var(--soft); border-radius:0.5mm; vertical-align:middle; }
.yn { color:var(--soft); font-size:7.4pt; white-space:nowrap; }
.days .lead-col { border-left:1.1pt solid var(--heavy); }
.days .day-col { width:20mm; } .days .num { width:8.7mm; } .days .act { width:8.3mm; } .days .emo { width:8.1mm; } .days .mod { width:7.9mm; } .days .use { width:8.6mm; } .days .med { width:9.6mm; }

.sheet-lower { margin-top:2.2mm; height:41mm; display:grid; grid-template-columns:1.25fr 1.5fr 1fr 1fr; gap:2.2mm; }
.sheet-box { border:0.5pt solid var(--rule); border-radius:1.2mm; padding:1.6mm 2.2mm; overflow:hidden; }
.sheet-box h3 { margin:0 0 0.8mm; font-size:8.4pt; line-height:1.2; font-weight:600; color:var(--mark); }
.sheet-box ul { list-style:none; margin:0; padding:0; font-size:7.7pt; line-height:1.3; }
.sheet-box .line { height:6.6mm; border-bottom:0.5pt solid var(--rule); }
.sheet-box li { margin:0; }
.use-key { columns:2; column-gap:3mm; }
.use-key li { break-inside:avoid; padding-left:3.2mm; text-indent:-3.2mm; margin-bottom:0.4mm; }
.use-key b { display:inline-block; width:3.2mm; text-indent:0; }
.sheet-foot { margin-top:2.2mm; display:flex; justify-content:space-between; gap:6mm; font-size:7.3pt; line-height:1.25; color:var(--soft); }
.sheet-foot strong { color:var(--ink); font-weight:600; }
.sheet-foot .src { text-align:right; flex:none; }

@page { size:landscape; margin:9mm; }
@media print {
  html, body { background:#fff !important; color:#000; }
  main, main.wide { max-width:none; padding:0; margin:0; }
  main > :not(.sheet-wrap) { display:none !important; }
  .sheet-wrap { overflow:visible; margin:0; border-radius:0; }
  .sheet { width:100%; padding:0; page-break-inside:avoid; break-inside:avoid; }
}