/* fonts are served from this site (trimmed to the characters it uses) */
@font-face{font-family:"Shantell Sans";src:url(fonts/shantell-sans.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-500.woff2) format("woff2");font-weight:400 500;font-display:swap}
/* Layout: a fan-made month — painted day blobs on aqua paper, a detail card beside the grid, a field guide below. */
:root{
  --bg:#EEF5F3; --surface:#F9FCFB; --ink:#14323A; --muted:#58717A; --line:#CFE0DC;
  --stream:#F59E4B; --stream-ink:#4A2205; --off:#C9D5DF; --event:#CDBDF2; --event-ink:#3A2A6B;
  --live:#E5484D; --stamp:#B42328; --accent:#1F7A8C;
  --f-display:"Shantell Sans","Comic Neue","Segoe Print",cursive;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0C1D24; --surface:#122830; --ink:#E2EFEC; --muted:#8EA7AD; --line:#21404A;
  --stream:#E8893A; --stream-ink:#1C0C01; --off:#2A4452; --event:#4B3C7C; --event-ink:#E6DEFF;
  --live:#FF6369; --stamp:#FF8A8E; --accent:#5CC1D1; --past-blob:.85; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0C1D24; --surface:#122830; --ink:#E2EFEC; --muted:#8EA7AD; --line:#21404A;
  --stream:#E8893A; --stream-ink:#1C0C01; --off:#2A4452; --event:#4B3C7C; --event-ink:#E6DEFF;
  --live:#FF6369; --stamp:#FF8A8E; --accent:#5CC1D1; --past-blob:.85; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.5;padding-inline:16px;padding-block:0 112px}
.wrap{max-width:1080px;margin-inline:auto}
a{color:var(--accent)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* header */
header{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:24px 8px;overflow:hidden}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-display);font-weight:800;font-size:1.35rem;text-decoration:none;color:var(--ink)}
.brand img{width:36px;height:36px;flex:none}
.updated{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);width:100%;order:3}
.livechip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);font-weight:700;font-size:.9rem;text-decoration:none;color:var(--ink)}
.livechip .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.livechip.on{border-color:var(--live)}
.livetimer{font-variant-numeric:tabular-nums}
.livechip.on .dot{background:var(--live);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--live) 25%,transparent)}}
.school{position:absolute;inset:0;pointer-events:none;z-index:-0}
.school img{position:absolute;left:0;width:26px;height:26px;opacity:.5;animation:drift linear infinite}
@keyframes drift{0%{transform:translate(-40px,0) rotate(-8deg)}25%{transform:translate(300px,-6px) rotate(6deg)}50%{transform:translate(600px,4px) rotate(-6deg)}75%{transform:translate(900px,-4px) rotate(8deg)}100%{transform:translate(1200px,0) rotate(-8deg)}}
.brand,.livechip{position:relative;z-index:1}

/* month head */
.monthbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-block:12px 16px}
h1{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,8vw,4.4rem);line-height:.95;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1 small{display:block;font-family:var(--f-mono);font-weight:500;font-size:.95rem;color:var(--muted);letter-spacing:.06em;margin-top:8px}
.nav{display:flex;gap:8px;align-items:center}
.nav button{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:700}
.nav button:hover{border-color:var(--accent)}

/* main layout */
.main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media (max-width:860px){.main{grid-template-columns:minmax(0,1fr)}}

.cal{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:12px}
.dow,.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.dow div{text-align:center;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-block:4px 8px}
.day{position:relative;aspect-ratio:1/1;max-width:100%;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;isolation:isolate}
.day .num{position:relative;z-index:3;font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,2.6vw,1.45rem);font-variant-numeric:tabular-nums}
.day.other .num{opacity:.55}
.day.future .num{font-weight:800}
.day:hover .num{text-decoration:underline wavy var(--accent) 1.5px;text-underline-offset:4px}
.day.sel::after{content:"";position:absolute;inset:6%;border:2px dashed var(--accent);border-radius:40%;z-index:4}
.day.today .num::after{content:"today";position:absolute;left:50%;top:100%;transform:translateX(-50%);font-family:var(--f-mono);font-size:.55rem;letter-spacing:.06em;color:var(--accent);font-weight:500}

.blob{position:absolute;z-index:2;inset:16%;background:var(--stream)}
.day.st-stream .num{color:var(--stream-ink)}
.day.past .blob.stream{opacity:var(--past-blob,.62)}
.blob.off{background:var(--off);inset:26% 8%}
.blob.off.join-l{left:-1px;border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.blob.off.join-r{right:-1px;border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.band{position:absolute;z-index:1;left:4%;right:4%;bottom:7%;height:22%;background:var(--event);border-radius:999px}
.band.join-l{left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}
.band.join-r{right:-1px;border-top-right-radius:0;border-bottom-right-radius:0}
.untracked .num{opacity:.6}
.mark{position:absolute;z-index:5;top:6%;right:8%;font-family:var(--f-mono);font-size:.7rem;font-weight:500;line-height:1}
.mark.unsure{background:var(--surface);border:1.5px solid var(--muted);border-radius:50%;width:17px;height:17px;display:grid;place-items:center}
.mark.ok{color:var(--accent)}
.mark.live{width:10px;height:10px;border-radius:50%;background:var(--live);animation:pulse 1.6s ease-in-out infinite}
.sticker{position:absolute;z-index:5;top:2%;right:2%;font-size:1rem}

.legendrow{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;padding-top:12px;border-top:1.5px dashed var(--line);font-size:.85rem;color:var(--muted)}
.legendrow span{display:inline-flex;align-items:center;gap:8px}
.sw{width:16px;height:12px;border-radius:50% 45% 55% 50%}
.counts{margin-top:8px;font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}

/* detail */
.detail{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px)}
@media (max-width:860px){.detail{position:static}}
.detail h2{font-family:var(--f-display);font-weight:800;font-size:1.5rem;margin:0 0 4px;line-height:1.15}
.chip{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:700;font-size:.78rem;margin-block:8px}
.chip.stream{background:var(--stream);color:var(--stream-ink)}
.chip.off{background:var(--off)}
.chip.event{background:var(--event);color:var(--event-ink)}
.chip.live{background:var(--live);color:#fff}
.chip.plain{border:1.5px solid var(--line)}
.entry{border-top:1.5px dashed var(--line);padding-top:12px;margin-top:12px;display:grid;gap:8px}
.entry:first-of-type{border-top:0;padding-top:0}
.entry h3{margin:0;font-size:1.05rem;line-height:1.3}
dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:.92rem}
dt{color:var(--muted)}
dd{margin:0;font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-size:.85em}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:.78rem;padding:4px 8px;border-radius:6px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink)}
.rawtitle{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.watch{display:inline-block;margin-top:16px;font-weight:700}

/* settings */

/* guide */
.guide{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px}
.guide h2{font-family:var(--f-display);font-weight:800;font-size:1.6rem;margin:0 0 8px;grid-column:1/-1}
.guide h3{font-family:var(--f-display);font-weight:600;font-size:1.1rem;margin:0 0 8px}
.guide p,.guide li{max-width:62ch;color:var(--ink)}
.guide ul{padding-left:1.1em;margin:0}
.guide li{margin-bottom:8px}
.demo{display:inline-grid;place-items:center;position:relative;width:34px;height:34px;vertical-align:middle;margin-right:8px}
.demo i{position:absolute;inset:4px;border-radius:48% 52% 44% 56%/55% 45% 55% 45%}
.demo b{position:relative;font-family:var(--f-display);font-size:.9rem}
footer{margin-top:48px;padding-top:16px;border-top:1.5px dashed var(--line);font-size:.85rem;color:var(--muted)}
footer p{max-width:70ch;margin:0 0 8px}

/* motion setting: System follows the device, On forces it, Off stops it */
@media (prefers-reduced-motion: reduce){:root:not([data-motion="on"]) *{animation:none!important}}
:root[data-motion="off"] *{animation:none!important}
/* with animation off, the floating heads would pile up in one spot, so hide them */
:root[data-motion="off"] .school{display:none}
@media (prefers-reduced-motion: reduce){:root:not([data-motion="on"]) .school{display:none}}

/* ===== text size ===== */
:root[data-text="large"]{font-size:112.5%}
:root[data-text="larger"]{font-size:125%}

/* ===== bottom bar (Settings) ===== */
.tabbar{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:12px}
.tab,.gearfab{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1.5px solid var(--ink);border-radius:8px;
  box-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 35%,transparent);padding:12px 16px;cursor:pointer;
  font-family:var(--f-mono);font-size:.82rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:transform .12s,box-shadow .12s}
.tab svg,.gearfab svg,.sethead h2 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tab:hover,.gearfab:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 35%,transparent)}
.tab[aria-current="page"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.tab.icononly{padding-inline:12px}
:root[data-tabbar="top"] .tabbar{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}
:root[data-tabbar="top"] body{padding-block:72px 48px}
:root[data-tabbar="left"] .tabbar,:root[data-tabbar="right"] .tabbar{flex-direction:column;top:50%;bottom:auto;transform:translateY(-50%)}
:root[data-tabbar="left"] .tabbar{left:14px}
:root[data-tabbar="right"] .tabbar{left:auto;right:14px}
:root[data-tabbar="left"] .tab,:root[data-tabbar="right"] .tab{justify-content:flex-start}
:root[data-tabbar="hidden"] .tabbar{display:none}
:root[data-tabbar="hidden"] body{padding-block:0 48px}
.gearfab{display:none;position:fixed;z-index:20;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:12px}
:root[data-tabbar="hidden"] .gearfab{display:inline-flex}
@media (min-width:1300px){
  :root[data-tabbar="left"] body,:root[data-tabbar="right"] body{padding-block:0 48px}
}
/* side bars only fit on wide screens; narrower ones fall back to the bottom bar */
@media (max-width:1299px){
  :root[data-tabbar="left"] .tabbar,:root[data-tabbar="right"] .tabbar{flex-direction:row;top:auto;left:50%;right:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%)}
}
@media (max-width:480px){
  .tab{padding:8px 12px;font-size:.74rem}
  .tabbar{gap:8px}
}

/* ===== settings panel ===== */
dialog#settings{background:var(--surface);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r);
  box-shadow:5px 5px 0 color-mix(in srgb,var(--ink) 30%,transparent);padding:24px;width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
dialog#settings::backdrop{background:rgba(8,22,28,.45)}
.sethead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sethead h2{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--f-display);font-weight:800;font-size:1.35rem}
.closebtn{width:38px;height:38px;border:1.5px solid var(--ink);border-radius:8px;background:var(--surface);font-size:1.4rem;line-height:1;cursor:pointer}
.setgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.setgrid{grid-template-columns:minmax(0,1fr)}}
fieldset{border:1.5px solid var(--line);border-radius:10px;margin:0;padding:12px 16px 16px;min-width:0;display:grid;gap:8px;align-content:start}
legend{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-inline:8px}
.setlabel{font-size:.88rem;color:var(--muted);margin-top:4px}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.choices.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.choices:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:400px){.choices.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
.choices button{border:1.5px solid var(--line);background:var(--bg);border-radius:6px;padding:8px 4px;cursor:pointer;font-size:.86rem;min-width:0}
.choices button:hover{border-color:var(--accent)}
.choices button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 20%,var(--surface));border-color:var(--accent);font-weight:700}
.check{display:flex;align-items:center;gap:8px;margin-top:8px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent)}
#prefWeek{font:inherit;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:6px;padding:8px 12px;max-width:220px}
.sethelp{margin:0;font-size:.82rem;color:var(--muted)}
.setfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:12px;border-top:1.5px solid var(--line);font-size:.85rem;color:var(--muted)}
.resetbtn{border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:700;box-shadow:2px 2px 0 color-mix(in srgb,var(--ink) 30%,transparent)}

/* ===== high contrast (after the theme blocks so it wins in both) ===== */
:root[data-contrast="high"]{--muted:var(--ink);--line:var(--ink)}
:root[data-contrast="high"] .day.other .num,:root[data-contrast="high"] .untracked .num{opacity:.8}
:root[data-contrast="high"] .day.past .blob.stream{opacity:.9}
:root[data-contrast="high"] .blob.off{outline:1.5px solid var(--ink);outline-offset:-1.5px}

.todaytag{font-family:var(--f-body);font-weight:400;font-size:.95rem;color:var(--muted)}

/* small caption lines (update line, legend, monthly count, raw stream title) use the handwritten face */
.updated,.legendrow,.counts,.rawtitle{font-family:var(--f-display);font-weight:400;letter-spacing:0}
.updated{font-size:.8rem}
.counts{font-size:.88rem}
.legendrow .mono{font-family:var(--f-display)}

/* ===== his personality, pulled from his titles ===== */
/* "LOCKED IN" rubber stamp */
.stamp{display:inline-block;vertical-align:middle;margin-left:4px;padding:2px 8px;border:2px solid var(--stamp);border-radius:4px;color:var(--stamp);
  font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;transform:rotate(-4deg)}
/* tags as slightly wonky stickers */
.tag{border:1.5px solid var(--ink);background:var(--surface);box-shadow:2px 2px 0 color-mix(in srgb,var(--ink) 25%,transparent)}
.tag:nth-child(odd){transform:rotate(-2deg)}
.tag:nth-child(even){transform:rotate(1.5deg)}
/* stream title shown like a chat message */
.chatline{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;background:var(--bg);border-radius:12px 12px 12px 4px;padding:8px 12px;font-size:.85rem}
.chatname{font-family:var(--f-display);font-weight:800;color:var(--accent)}
.chatname::after{content:":"}
.chatline .rawtitle{color:var(--ink);font-family:var(--f-body)}
/* sub goal meter */
.subgoal{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:.85rem;color:var(--muted)}
.meter{flex:0 0 120px;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--stream);border-radius:999px}
.headgoal{width:100%;order:4}
.headgoal:empty{display:none}
@media (prefers-reduced-motion: reduce){.stamp,.tag{transform:none}}

/* ===== hand-made look: wobbly outlines, scribbled today, taped note, highlighter labels, doodles ===== */
:root{--tape:rgba(233,214,150,.75)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tape:rgba(200,180,120,.45)}}

/* 2. wobbly marker outlines instead of perfect boxes */
.cal,.detail{border:0!important;position:relative}
.cal::after,.detail::after,.nav button::after,.livechip::after,.tab::after{content:"";position:absolute;inset:0;border:2px solid var(--ink);
  border-radius:18px 26px 16px 24px / 22px 16px 26px 18px;filter:url(#rough);pointer-events:none}
.nav button,.livechip,.tab{position:relative;border-color:transparent!important;box-shadow:none!important;border-radius:14px 10px 16px 12px!important}
.tab::after{border-width:2.5px}

/* today: a pen scribble instead of a dashed ring */
.day.today::before{content:"";position:absolute;inset:-2%;z-index:4;background:var(--accent);
  -webkit-mask:url(doodles/scribble.svg) center/contain no-repeat;mask:url(doodles/scribble.svg) center/contain no-repeat;pointer-events:none}
.day.today.sel::after{display:none}

/* 3. the day panel is a note taped on */
.detail{transform:rotate(-1.2deg);overflow:visible}
.detail::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:28px;z-index:2;transform:translateX(-50%) rotate(3deg);
  background:var(--tape);clip-path:polygon(2% 8%,98% 0,100% 92%,0 100%)}
.legendrow{border-top:0!important;transform:rotate(.6deg)}

/* 7. labels as highlighter marks, not pills */
.chip{background:none!important;border:0!important;border-radius:0;padding:0 4px;font-family:var(--f-display);font-size:1rem;color:var(--ink)!important;
  background-image:linear-gradient(transparent 50%,var(--hl,var(--stream)) 50%,var(--hl,var(--stream)) 88%,transparent 88%)!important}
.chip.event{--hl:var(--event)} .chip.off{--hl:var(--off)} .chip.live{--hl:var(--live)} .chip.plain{--hl:var(--line)}

/* 1. placeholder doodles behind empty days (your drawings would go here) */
.doodle{position:absolute;inset:22%;z-index:0;opacity:.16;background:var(--ink);pointer-events:none;
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}

/* 5. your voice */
.byline{width:100%;order:5;font-family:var(--f-display);font-size:1rem;color:var(--muted);transform:rotate(-1deg)}
.byline b{color:var(--ink)}
@media (max-width:600px){}

/* guide text in the handwritten face, to match its headings */
.guide p,.guide li{font-family:var(--f-display);font-weight:400;line-height:1.55}
.guide strong{font-weight:700}