/* A day's ledger: times in a left margin against a red rule, the day's classes on feint-ruled lines, the date set large in Caslon. One column, phone-first. */
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/caslon-400.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/caslon-400i.woff2) format("woff2")}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/caslon-700.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/sourcesans3.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/sourcesans3-i.woff2) format("woff2")}
:root{
  --paper:#f4f4f1; --paper-2:#eceddf; --ink:#1f2a3d; --ink-2:#515a6a; --ink-3:#8b919d;
  --rule:#d3dae6; --rule-strong:#aab4c4; --margin:#c8322b; --hl:#fff1a3;
  --serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pen-0:#8a5a2b; --pen-1:#2f7a4f; --pen-2:#b04a6e; --pen-3:#c0652a;
  --pen-4:#1f7f86; --pen-5:#6b4fa3; --pen-6:#4e6d2f; --pen-7:#2f5da8; --pen-x:#8b919d;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#1b1e24; --paper-2:#242830; --ink:#e9e7e0; --ink-2:#b4b8c2; --ink-3:#7f8693;
  --rule:#333945; --rule-strong:#4a5262; --margin:#e25a51; --hl:#6b5a14;
  --pen-0:#d9a26a; --pen-1:#7ccb98; --pen-2:#ee8fae; --pen-3:#f0a06a;
  --pen-4:#6fcbd2; --pen-5:#b6a1ea; --pen-6:#a9c67a; --pen-7:#8db3f2; --pen-x:#7f8693;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#1b1e24; --paper-2:#242830; --ink:#e9e7e0; --ink-2:#b4b8c2; --ink-3:#7f8693;
  --rule:#333945; --rule-strong:#4a5262; --margin:#e25a51; --hl:#6b5a14;
  --pen-0:#d9a26a; --pen-1:#7ccb98; --pen-2:#ee8fae; --pen-3:#f0a06a;
  --pen-4:#6fcbd2; --pen-5:#b6a1ea; --pen-6:#a9c67a; --pen-7:#8db3f2; --pen-x:#7f8693;
  color-scheme:dark;
}
.pen-0{--pen:var(--pen-0)} .pen-1{--pen:var(--pen-1)} .pen-2{--pen:var(--pen-2)} .pen-3{--pen:var(--pen-3)}
.pen-4{--pen:var(--pen-4)} .pen-5{--pen:var(--pen-5)} .pen-6{--pen:var(--pen-6)} .pen-7{--pen:var(--pen-7)} .pen-x{--pen:var(--pen-x)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.page{max-width:620px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right));padding-block:calc(28px + env(safe-area-inset-top)) calc(72px + env(safe-area-inset-bottom));display:grid;gap:44px}
h1,h2,h3{margin:0;font-weight:400}
h2{font-family:var(--serif);font-size:22px;line-height:1.25;text-wrap:balance;margin-bottom:14px}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--margin);outline-offset:3px;border-radius:2px}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* day heading */
.dayhead{display:grid;gap:2px}
.weekday{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.2;color:var(--ink-2)}
.date{font-family:var(--serif);font-size:clamp(44px,12vw,60px);line-height:1;letter-spacing:-.01em;margin:4px 0 10px}
.termline{font-size:17px;color:var(--ink-2)}
.termline b{font-weight:500;color:var(--ink)}
.boundary{font-size:15.5px;color:var(--ink-3);margin-top:2px}
.attend{margin-top:16px;font-size:16px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.attend .pct{font-family:var(--serif);font-size:30px;line-height:1;color:var(--ink)}
.attend .pct small{font-size:18px}
.attend .note{color:var(--ink-3);font-size:14.5px;width:100%}
.syncline{font-size:14px;color:var(--ink-3);margin-top:6px}
.syncline::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rule-strong);margin-right:7px;position:relative;top:-1px}
.syncline.off{color:var(--margin)}
.syncline.off::before{background:var(--margin)}
.linkbtn{justify-self:start;margin-top:10px;font-size:15px;color:var(--margin);border-bottom:1px solid currentColor;line-height:1.2;padding-bottom:1px}

/* ledger */
.ledger{position:relative;--mg:68px;border-top:1px solid var(--rule-strong)}
.ledger::before{content:"";position:absolute;top:0;bottom:0;left:var(--mg);width:1.5px;background:var(--margin);opacity:.9}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:var(--mg) minmax(0,1fr) auto;border-bottom:1px solid var(--rule);min-height:72px}
.row .t{padding:12px 14px 12px 0;text-align:right;font-size:15px;line-height:1.35;color:var(--ink-2);display:grid;align-content:start}
.row .t b{font-weight:600;color:var(--ink);font-size:17px}
.row .body{padding:11px 0 12px 16px;min-width:0;display:grid;gap:2px;align-content:start}
.row .name{font-family:var(--serif);font-size:21px;line-height:1.3}
.row .name .pen{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pen);margin-right:9px;position:relative;top:-2px}
.row .name mark{background:transparent;color:inherit;background-image:linear-gradient(transparent 12%,var(--hl) 12%,var(--hl) 88%,transparent 88%);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 3px;margin:0 -3px}
.row .meta{font-size:15.5px;color:var(--ink-2)}
.row .meta a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule-strong)}
.row .meta a:hover{border-color:var(--ink)}
.row .state{font-size:15px;color:var(--ink-2);margin-top:3px}
.row.now .state{color:var(--ink);font-weight:500}
.row.now .state::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--margin);margin-right:7px;position:relative;top:-1px}
.row.done{color:var(--ink-3)}
.row.done .t b,.row.done .name,.row.done .meta a{color:var(--ink-3)}
.row.done .name .pen{opacity:.45}
.row.clash .state{color:var(--margin);font-weight:500}
.row.empty .body{font-family:var(--serif);font-size:19px;line-height:1.45;padding-block:22px}
.row.empty .body small{display:block;font-family:var(--sans);font-size:15.5px;color:var(--ink-2);margin-top:6px}
.ledger .tally{font-size:14px;color:var(--ink-3);padding:8px 0 0 calc(var(--mg) + 16px)}
/* the tick */
.tick{align-self:start;margin:14px 0 0 10px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--rule-strong)}
.tick svg{width:22px;height:22px;display:block}
.tick .ring{fill:none;stroke:currentColor;stroke-width:1.6}
.tick .mark{fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.tick:hover{color:var(--ink-2)}
.tick[aria-checked="true"]{color:var(--ink)}
.tick[aria-checked="true"] .ring{fill:var(--ink)}
.tick[aria-checked="true"] .mark{opacity:1}
.row.done .tick[aria-checked="true"]{color:var(--ink-2)}
.row.done .tick[aria-checked="true"] .ring{fill:var(--ink-2)}
.row .state .att{color:var(--ink)}

/* day picker */
.picker{display:grid;gap:14px}
.pickhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pickhead .range{font-family:var(--serif);font-size:20px;line-height:1.2}
.pickhead .range small{display:block;font-family:var(--sans);font-size:14.5px;color:var(--ink-3);margin-top:2px}
.arrows{display:flex;gap:2px;align-self:center}
.arrow{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:24px;line-height:1;color:var(--ink-2)}
.arrow:hover:not([disabled]){background:var(--paper-2);color:var(--ink)}
.arrow[disabled]{color:var(--rule-strong);cursor:default}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.day{display:grid;justify-items:center;gap:3px;padding:6px 0 8px;border-radius:8px;min-width:0}
.day .dn{font-size:13px;color:var(--ink-3)}
.day .dd{font-family:var(--serif);font-size:22px;line-height:1.1;width:38px;height:38px;display:grid;place-items:center;border-radius:50%}
.day .dots{display:flex;gap:3px;height:6px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:100%}
.day .dots i{width:5px;height:5px;border-radius:50%;background:var(--pen);display:block}
.day.today .dd{color:var(--margin)}
.day[aria-pressed="true"] .dd{background:var(--ink);color:var(--paper)}
.day[aria-pressed="true"].today .dd{background:var(--margin);color:#fff}
.day:hover:not([disabled]) .dd{box-shadow:inset 0 0 0 1px var(--rule-strong)}
.day[aria-pressed="true"]:hover .dd{box-shadow:none}
.day.wknd .dn,.day.wknd .dd{color:var(--ink-3)}
.day.wknd[aria-pressed="true"] .dd{color:var(--paper)}
.day[disabled]{cursor:default}
.day[disabled] .dd,.day[disabled] .dn{color:var(--rule-strong)}
.goto{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--ink-2)}
.goto input{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-strong);padding:2px 0;border-radius:0}
.endnote{font-size:14.5px;color:var(--ink-3)}

/* week list */
.week .wday{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 14px;padding:12px 0;border-top:1px solid var(--rule)}
.week .wday:last-child{border-bottom:1px solid var(--rule)}
.week .d{font-size:15px;color:var(--ink-2);line-height:1.3}
.week .d b{display:block;font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);line-height:1.1}
.week .wday.today .d b{color:var(--margin)}
.week ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.week li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 10px;align-items:baseline;font-size:15.5px;min-width:0}
.week li .t{color:var(--ink-2);white-space:nowrap}
.week li .nm{min-width:0}
.week li .nm i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pen);margin-right:7px;position:relative;top:-1px}
.week li .nm span{color:var(--ink-2)}
.week li .nm .rm{color:var(--ink-3)}
.week li .nm .ok{color:var(--ink-3);margin-left:6px}
.week .none{color:var(--ink-3);font-size:15px;padding-top:3px}
.week .wcount{font-size:14.5px;color:var(--ink-3);margin-top:8px}

/* the year */
.year ol{list-style:none;margin:0;padding:0}
.year li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;padding:9px 0;border-top:1px solid var(--rule);font-size:15.5px;align-items:baseline}
.year li:last-child{border-bottom:1px solid var(--rule)}
.year li .pn{font-family:var(--serif);font-size:17px}
.year li.vac .pn{font-style:italic;color:var(--ink-2)}
.year li .pd{color:var(--ink-2);white-space:nowrap;text-align:right}
.year li.current .pn::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--margin);margin-right:9px;position:relative;top:-2px}
.year li.past .pn,.year li.past .pd{color:var(--ink-3)}
.year .fine{margin-top:12px}

/* modules */
.mods ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mods li{display:grid;grid-template-columns:9px minmax(0,1fr);gap:0 10px;font-size:15.5px}
.mods li i{width:9px;height:9px;border-radius:50%;background:var(--pen);position:relative;top:7px}
.mods li .nm{line-height:1.35}
.mods li .code{color:var(--ink-3);font-size:14px;margin-left:6px}
.mods li .grp{display:block;color:var(--ink-2);font-size:14.5px}
.fine{font-size:15px;color:var(--ink-2);max-width:60ch}
.fine b{font-weight:500;color:var(--ink)}
.mods .fine{margin-top:12px}

/* source */
.source,.security{display:grid;gap:12px}
.filebtn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer;justify-self:start}
.filebtn:hover{background:var(--paper-2)}
.filebtn input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.filebtn:has(input:focus-visible){outline:2px solid var(--margin);outline-offset:3px}
.reset{font-size:15px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;justify-self:start}
.msg{font-size:15px;color:var(--ink)}
.msg.err{color:var(--margin)}
.srcnote{font-size:14.5px;color:var(--ink-3)}

/* devices + password */
.security h2{margin-bottom:2px}
.devices{list-style:none;margin:0;padding:0}
.devices li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:10px 0;border-top:1px solid var(--rule);font-size:15.5px;align-items:center}
.devices li:last-child{border-bottom:1px solid var(--rule)}
.devices .dl{min-width:0}
.devices .dl small{display:block;color:var(--ink-3);font-size:14px}
.devices .me{color:var(--ink-3);font-size:14px;white-space:nowrap}
.textbtn{font-size:15px;color:var(--margin);border-bottom:1px solid currentColor;line-height:1.2;padding-bottom:1px;justify-self:start;white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:10px 22px}
.pwchange summary{cursor:pointer;font-size:15px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;width:max-content}
.pwchange form{margin-top:14px}

/* sign-in */
.loading{min-height:100dvh;display:grid;place-items:center;padding:24px}
.gate{min-height:100dvh;display:grid;place-items:center;padding:calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))}
.gateform{width:100%;max-width:400px;display:grid;gap:14px}
.gate .date{font-size:clamp(40px,11vw,54px)}
.field{display:grid;gap:6px;font-size:15px;color:var(--ink-2)}
.field input{font:inherit;font-size:17px;color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);border-radius:8px;padding:10px 12px;width:100%}
.field input:focus{outline:2px solid var(--margin);outline-offset:1px}
.primary{justify-self:start;font-size:16px;font-weight:600;color:var(--paper);background:var(--ink);border-radius:999px;padding:10px 22px;margin-top:4px}
.primary[disabled]{opacity:.5;cursor:default}

@media (prefers-reduced-motion:no-preference){.day .dd,.arrow,.filebtn,.tick .ring,.tick .mark{transition:background-color .12s,color .12s,fill .12s,opacity .12s}}
@media (max-width:380px){.ledger{--mg:60px}.row .name{font-size:19px}.tick{margin-left:4px}}
.gateform .textbtn{margin-top:4px;font-size:14.5px}