@font-face{font-family:'Jost';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jost.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:200;font-display:swap;src:url(fonts/albert-sans-200.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-600.woff2) format('woff2')}
/* Layout: Today opens on a Mondrian composition, a white field cut by 3px steel rules with three colour planes.
   Everything else follows Mies: square corners, one rule weight, an 8px module, small squares as the only ornament. */
/* Layout: Today opens on a Mondrian composition, a white field cut by 3px steel rules with three colour planes.
   Everything else follows Mies: square corners, one rule weight, an 8px module, small squares as the only ornament. */
/* Single dark theme by choice: Soft Bauhaus at night. Black ground, light steel rules, pastel planes, bright yellow for the name. */
:root{
  --ground:#101111; --plane:#181A1A; --ink:#ECEDEA; --muted:#A3A8A6; --hair:#363A39;
  --red:#D0301F; --yellow:#F5C400; --blue:#2F4EB0; --pink:#E8A0B4; --good:#6EE7A0; --focus:#F5C400;
  --butter:#E9CB6A; --forest:#173326; --powder:#9DB8E0; --stone:#C9C6BF; --chalk:#FAF7F2; --on-powder:#141517;
  --on-pink:#141517; --on-butter:#141517; --on-red:#FFFFFF; --on-yellow:#111212; --on-blue:#FFFFFF;
  --tile:#FFFFFF; --tile-edge:transparent; --rat-back:#8C8F8E; --rat-head:#A9ACAB; --rat-eye:#0A0A0A; --wordmark:#F5C400;
  --loss:#B3261E; --risk-bg:var(--chalk); --risk-ink:#141517; --risk-good:#0B7A3B;
  --rule:3px;
  --font-display:'Jost','Futura','Century Gothic','Avenir Next',sans-serif;
  --font-body:'Jost','Futura','Century Gothic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head:'Barlow Semi Condensed','Arial Narrow','Roboto Condensed',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.45 var(--font-body);padding-inline:16px;padding-block:14px 120px}
button,input{font:inherit;color:inherit;border-radius:0}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:30rem;margin-inline:auto;display:flex;flex-direction:column;gap:24px}
.view{display:flex;flex-direction:column;gap:24px;min-width:0}

.sq{display:inline-block;flex:none;width:9px;height:9px;background:var(--sq,var(--ink));box-shadow:inset 0 0 0 1px var(--ink)}
.sq.b{--sq:var(--blue)} .sq.y{--sq:var(--yellow)} .sq.r{--sq:var(--red)}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:var(--rule) solid var(--ink)}
.brandrow{display:flex;align-items:center;gap:12px}
/* Mark: an abstract rat, a quarter-circle back and a wedge head, on a white tile with a yellow floor. */
.mark{display:block;flex:none;width:40px;height:40px}
.mark .tile{fill:var(--tile)}
.mark .edge{fill:none;stroke:var(--tile-edge);stroke-width:1}
.mark .floor{fill:var(--yellow)}
.mark .back{fill:var(--rat-back)}
.mark .head{fill:var(--rat-head)}
.mark .tail{stroke:var(--rat-back);stroke-width:.7}
.mark .eye{fill:var(--rat-eye)}
.brand{margin:0;font:200 2.1rem/1 'Albert Sans','Jost','Avenir Next',sans-serif;letter-spacing:.04em;color:var(--wordmark)}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--plane)}
.icon-btn svg{width:22px;height:22px}

.notice{margin:0;padding:12px 14px;background:var(--yellow);color:var(--on-yellow);border:2px solid var(--ink);font-size:.95rem}

.eyebrow{margin:0;font:500 .7rem/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.h2{margin:0;font:600 1.55rem/1.1 var(--font-head);letter-spacing:.005em;display:flex;align-items:center;gap:10px;text-wrap:balance}
.h2::before{content:"";flex:none;width:10px;height:10px;background:var(--sq,var(--ink));box-shadow:inset 0 0 0 1px var(--ink)}
.h2.b{--sq:var(--blue)} .h2.y{--sq:var(--yellow)} .h2.r{--sq:var(--red)}
.lede{margin:0;color:var(--muted);max-width:65ch}

/* Today: the composition */
.mond-wrap{position:relative;padding:10px}
.crop{position:absolute;width:12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat}
.crop.tl{top:0;left:0}.crop.tr{top:0;right:0}.crop.bl{bottom:0;left:0}.crop.br{bottom:0;right:0}
/* Composition: count as the dominant plane, an uneven right column, a rat-grey sliver and two quiet planes that are only there for balance. */
.mond{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) 14px minmax(0,1.2fr);grid-template-rows:minmax(4.75rem,auto) minmax(4.75rem,auto) 1.25rem minmax(4.25rem,auto) auto;gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.cell{background:var(--plane);padding:14px;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.cell.blank{padding:0}
.cell.me{grid-column:1 / 3;grid-row:1 / 4}
.cell.rk{grid-column:4;grid-row:1;background:var(--risk-bg);color:var(--risk-ink)}
.cell.br{grid-column:4;grid-row:2 / 4;background:var(--butter);color:var(--on-butter)}
.cell.fr{grid-column:3 / 5;grid-row:4;background:var(--powder);color:var(--on-powder)}
.cell.sliver{grid-column:3;grid-row:1 / 3;background:var(--rat-back)}
.cell.notch{grid-column:3;grid-row:3}
.cell.stone{grid-column:1;grid-row:4;background:var(--stone)}
.cell.shade{grid-column:2;grid-row:4}
.cell.fr .eyebrow,.cell.rk .eyebrow,.cell.br .eyebrow{color:inherit}
.cell.foot{grid-column:1 / -1;grid-row:5;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 14px}
.count{margin:0;font:700 clamp(4.5rem,22vw,7rem)/.8 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.count.sm{font-size:clamp(3.2rem,15vw,4.8rem)}
.hero-sub{margin:0;font-weight:500}
.fnum{margin:0;font:700 2.8rem/.9 var(--font-display);font-variant-numeric:tabular-nums}
.fsub{margin:0;font-weight:500;font-size:.95rem}
.fwait{margin:0;font-size:.9rem;line-height:1.3}
.rval{margin:0;font:700 1.85rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.rval.good{color:var(--risk-good)}
.rtag{margin:0;font:500 .62rem/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.foot-text{font-size:.95rem}
.foot-text b{font-weight:600}
.sqb{display:block;flex:none;width:22px;height:22px;background:var(--powder)}

.log{display:flex;flex-direction:column;gap:12px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);background:var(--ink);gap:2px}
.seg button{min-height:48px;border:0;background:var(--plane);font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--ground)}
.seg.three{grid-template-columns:repeat(3,1fr)}
/* Balance: avoided in powder blue, had in red. */
.net{display:flex;height:36px;gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.net i{display:block;min-width:0}
.net .av{background:var(--powder)} .net .hd{background:var(--red)} .net .nil{background:var(--hair)}
.netleg{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}
.netleg div{display:flex;flex-direction:column;gap:2px;font-size:.92rem;color:var(--muted)}
.netleg b{font:700 1.9rem/1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.netleg .mid{text-align:center} .netleg .end{text-align:right}
.netleg .pos{color:var(--powder)} .netleg .neg{color:var(--red)}
.chart .bar-av{fill:var(--powder)} .chart .bar-hd{fill:var(--red)}
/* Photos on Together: a two-up wall cut by the same steel rules. */
.ph-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ph-add{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--ink);background:var(--powder);color:var(--on-powder);font-weight:600;cursor:pointer}
.ph-add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.ph-add:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.ph-add.busy{opacity:.6;pointer-events:none}
.wall{display:grid;grid-template-columns:1fr 1fr;gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.post{background:var(--plane);display:flex;flex-direction:column;min-width:0;margin:0}
.post.lead{grid-column:1 / -1}
.post .pic{position:relative;aspect-ratio:1;background:var(--hair);overflow:hidden}
.post.lead .pic{aspect-ratio:4/3}
.post img{display:block;width:100%;height:100%;object-fit:cover;max-width:100%}
.post img.gone{visibility:hidden}
.post figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 10px;font-size:.85rem;min-width:0}
.post figcaption .who{flex:1 1 calc(100% - 20px)}
.post figcaption .who{font-weight:600;min-width:0;overflow-wrap:anywhere}
.post figcaption .when{color:var(--muted);margin-left:auto;white-space:nowrap}
.post .rm{width:36px;height:36px;margin:-6px -6px -6px 0}
.cam-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cam{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:2px solid var(--ink);background:var(--plane);font-weight:600;cursor:pointer}
.cam svg{width:22px;height:22px}
.cam input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.cam:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.thumb{position:relative;width:56px;height:56px;border:2px solid var(--ink);flex:none}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.thumb button{position:absolute;top:-12px;right:-12px;width:28px;height:28px;border:2px solid var(--ink);background:var(--ground);color:var(--ink);font-size:1rem;line-height:1;padding:0}
.cam-note{font-size:.88rem;color:var(--muted)}
.post .tagn{font:500 .7rem/1 var(--font-mono);letter-spacing:.08em;color:var(--muted)}
.tally-lines{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--hair);padding-top:12px}
.tally-lines div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.95rem}
.tally-lines dt{color:var(--muted)}
.tally-lines dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.tally-lines small{color:var(--muted);font-weight:400;margin-left:6px}
.lb-wrap{overflow-x:auto}
.lb{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lb th,.lb td{padding:10px 8px;text-align:right;border-bottom:1px solid var(--hair);white-space:nowrap}
.lb thead th{font-weight:600;border-bottom:2px solid var(--ink)}
.lb thead th .sq{margin-right:6px}
.lb tbody th{text-align:left;font:500 .7rem/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lb td{font:700 1.25rem/1 var(--font-display)}
.lb td.lead{background:var(--butter);color:var(--on-butter)}
.lb tbody tr:last-child th,.lb tbody tr:last-child td{border-bottom:0}
.cell.fr .frow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px;min-width:0}
.cell.fr .frow .eyebrow{min-width:0;overflow-wrap:anywhere}
.ftag{flex:none;font:500 .6rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 5px;background:var(--on-powder);color:var(--powder);white-space:nowrap}
.people{grid-template-columns:1fr 1fr}
.people.one{grid-template-columns:1fr}
.people .filler{background:var(--stone)}
.day-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.day-row .eyebrow{margin:0}
.day-row input[type=date]{width:auto;min-height:44px;padding:0 10px}
.day-row .link-btn{padding:0;min-height:44px}
.day-note{font-size:.85rem;color:var(--muted);flex:1 1 10rem}
.cam-row{align-items:stretch}
.cam,.day-ctl{min-height:48px}
.day-ctl{display:inline-flex;align-items:center;gap:8px;padding:0 4px 0 12px;border:2px solid var(--ink);background:var(--plane);margin:0;font-weight:400}
.day-ctl .eyebrow{margin:0}
.day-ctl input[type=date]{border:0;background:transparent;min-height:44px;width:auto;padding:0 6px;color:var(--ink)}
.day-ctl.past{background:var(--butter);color:var(--on-butter)}
.day-ctl.past .eyebrow,.day-ctl.past input{color:var(--on-butter)}
.cam-row .thumb{align-self:center}
p.cam-note{margin:0}
.link-btn.inline{display:inline;min-height:0;padding:0;margin-left:4px;color:var(--ink)}
.slip-box{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 16px;border:2px solid var(--ink);background:var(--plane);font-weight:600;text-align:left}
.slip-box svg{width:26px;height:26px;flex:none}
.slip-box .glass{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:square}
.slip-box .wine{fill:var(--butter)}
.mini-t svg{width:24px;height:22px}
.cell.peek{position:relative;padding:0;border:0;overflow:hidden;cursor:pointer;background:var(--plane);display:block;min-height:0}
.cell.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.cell.peek img.gone{visibility:hidden}
.peek-who{position:absolute;left:0;bottom:0;max-width:100%;padding:3px 6px;background:var(--ground);color:var(--ink);font:500 .62rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell.peek:focus-visible{outline-offset:-3px}
.with-row{display:flex;align-items:center;gap:10px}
.with-row .eyebrow{margin:0}
.seg.sm{flex:1;border-width:2px}
.seg.sm button{min-height:36px;font-size:.88rem;font-weight:500}
.cam-row{gap:8px}
.cam.sq-btn{width:48px;padding:0;justify-content:center;flex:none}
.day-ctl{padding:0 2px 0 4px;flex:0 1 auto}
.slip-box.sm{width:auto;min-height:48px;padding:0 12px;gap:8px;font-size:.92rem;flex:none}
.slip-box.sm svg{width:22px;height:22px}
.slip-box.on{background:var(--red);color:var(--on-red)}
.slip-box.on .glass{stroke:var(--on-red)}
/* Photo, day and slip span the full width. */
.cam-row{flex-wrap:nowrap}
.cam-row .day-ctl{flex:1 1 auto;min-width:0}
.cam-row .day-ctl input[type=date]{width:100%;min-width:0}
.slip-box.sm{background:var(--red);color:var(--on-red)}
.slip-box.sm .glass{stroke:var(--on-red)}
.slip-box.sm.on{box-shadow:inset 0 0 0 3px var(--ground)}
.cam.sq-btn{border-radius:50%;align-self:center}
select{width:100%;min-height:48px;padding:0 12px;border:2px solid var(--ink);background:var(--plane);color:var(--ink);font:inherit;border-radius:0}
.amt.main{background:var(--butter);color:var(--on-butter)}
#log-h{--sq:var(--butter)}
.loss{margin:0;font:600 .78rem/1.2 var(--font-body);color:var(--loss)}
.rval.bad{color:var(--loss)}
.cell.foot{background:var(--rat-back);color:#141517}
.liver .lv-big{margin:0;font:700 2rem/1 var(--font-display)}
.lv-bar{height:12px;background:var(--hair)}
.lv-bar i{display:block;height:100%;background:var(--loss)}
.lv-sub{margin:0;font-size:.92rem;color:var(--muted)}
.lv-sub.bad{color:var(--loss);font-weight:600}
.lv-line{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);font-size:.92rem}
.lv-line .eyebrow{margin:0}
.lv-line b{font-weight:600}
.lv-line span:last-child{color:var(--muted)}
.o-band{display:flex;gap:2px;height:7px}
.o-band i{flex:1;background:#D9D5CC}
.o-band i.on{background:var(--risk-ink)}
.o-lv{margin:0;font-weight:600;font-size:.88rem}
.o-delta{margin:0;font:400 .7rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#565B5A}.o-delta.up{color:var(--risk-good)} .o-delta.dn{color:var(--loss)}
.cell.rk .rval{color:var(--risk-ink)}
.o-lv.neg{color:var(--loss)}
.amounts .amt:not(.more){background:var(--butter);color:var(--on-butter)}
.amounts .amt:not(.more):active,.amounts .amt.flash{background:#0E0E0E;color:#F2F2EE}
.vs{display:flex;flex-direction:column;gap:2px;font-size:.85rem}
.vs span{display:flex;justify-content:space-between;gap:8px}
.vs b{font-variant-numeric:tabular-nums}
.amounts{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.amt{min-height:64px;border:0;background:var(--plane);font:700 1.9rem/1 var(--font-display);padding:0}
.amt.main{background:var(--butter);color:var(--on-butter)}
.amt.more{font:500 .72rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.1em}
.amt[disabled]{opacity:.5;cursor:not-allowed}
@media (prefers-reduced-motion:no-preference){.amt{transition:transform .08s}.amt:active{transform:scale(.97)}}
.stepper{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stepper output{min-width:3ch;text-align:center;font:700 1.9rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.step-btn{width:48px;height:48px;border:2px solid var(--ink);background:var(--plane);font-size:1.4rem;line-height:1}

.btn{min-height:48px;padding:0 20px;border:2px solid var(--ink);background:var(--plane);font-weight:600}
.btn.primary{background:var(--ink);color:var(--ground)}
.btn.danger{background:var(--red);border-color:var(--ink);color:var(--on-red)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link-btn{background:none;border:0;padding:10px 0;min-height:44px;text-decoration:underline;text-underline-offset:3px;text-align:left;color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap}

.panel{background:var(--plane);border:2px solid var(--ink);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tallies{display:flex;flex-wrap:wrap;gap:4px 2px}
.tg line{stroke:var(--ink);stroke-width:3;stroke-linecap:butt}
.tg line.sl{stroke:var(--red)}
.more-marks{align-self:flex-end;font:500 .8rem var(--font-mono);color:var(--muted)}
.empty{margin:0;color:var(--muted)}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ink);border:2px solid var(--ink)}
.stat{background:var(--plane);padding:14px 16px;min-width:0;display:flex;flex-direction:column;gap:4px}
.stat:nth-child(1){--sq:var(--blue)} .stat:nth-child(2){--sq:var(--yellow)} .stat:nth-child(3){--sq:var(--red)} .stat:nth-child(4){--sq:var(--ink)}
.stat .v{font:700 2.3rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.stat .l{display:flex;align-items:center;gap:8px;font:500 .7rem/1.2 var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.stat .s{font-size:.85rem;color:var(--muted)}

.split{display:flex;height:30px;border:2px solid var(--ink);gap:2px;background:var(--ink)}
.split i{display:block;min-width:0}
.split .s1{background:var(--blue)} .split .s2{background:var(--yellow)} .split .s0{background:var(--hair)}
.counts{display:flex;gap:24px;flex-wrap:wrap}
.counts div{display:flex;flex-direction:column;gap:2px}
.counts b{font:700 1.7rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.counts span{display:flex;align-items:center;gap:8px;font:500 .7rem/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.hist{list-style:none;margin:0;padding:0}
.hist li{display:flex;align-items:center;gap:10px;border-top:1px solid var(--hair);min-height:52px}
.hist .when{flex:1;min-width:0;font-size:.95rem}
.hist .when small{display:block;color:var(--muted);font-size:.82rem}
.hist .n{font:700 1.4rem/1 var(--font-display);font-variant-numeric:tabular-nums}
.rm{width:44px;height:44px;border:0;background:none;color:var(--muted);font-size:1.3rem;line-height:1}

label,.lbl{display:block;font-weight:600;margin-bottom:6px}
input[type=text],input[type=number],input[type=date]{width:100%;min-height:48px;padding:0 12px;border:2px solid var(--ink);background:var(--plane);color:var(--ink)}
.field{display:flex;flex-direction:column}
.hint{margin:6px 0 0;color:var(--muted);font-size:.9rem}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.person{background:var(--plane);padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.person h3{margin:0;font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.person .big{margin:0;font:700 4.2rem/.85 var(--font-display);font-variant-numeric:tabular-nums}
.person .mini{margin:0;font:500 .7rem/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.person dl{margin:6px 0 0;display:grid;gap:4px}
.person dl div{display:flex;justify-content:space-between;gap:8px;font-size:.92rem}
.person dt{color:var(--muted)}
.person dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.together{margin:0;font-weight:600}

.chart svg{display:block;width:100%;height:auto}
.chart .grid{stroke:var(--hair);stroke-width:1}
.chart .base{stroke:var(--ink);stroke-width:2}
.chart .tick{font:10px var(--font-mono);fill:var(--muted)}
.chart .xl{font:10px var(--font-mono);fill:var(--muted)}
.chart .xl.now{fill:var(--ink);font-weight:500}
.bar-me{fill:var(--blue);stroke:var(--ink);stroke-width:1.5}
.bar-fr{fill:var(--yellow);stroke:var(--ink);stroke-width:1.5}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.92rem}
.legend span{display:flex;align-items:center;gap:8px}

.ms-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ms{position:relative;display:flex;gap:14px;padding-bottom:22px}
.ms::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:var(--hair)}
.ms:last-child::before{display:none}
.ms.done::before{background:var(--ink)}
.mk{flex:none;width:24px;height:24px;border:2px solid var(--ink);background:var(--plane);display:grid;place-items:center;margin-top:2px}
.ms.done .mk{background:var(--blue);color:var(--on-blue)}
.ms.next .mk{border-width:4px}
.ms.todo .mk{border-color:var(--hair)}
.mk svg{width:14px;height:14px}
.ms-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.ms-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ms-head h3{margin:0;font:600 1.5rem/1 var(--font-head)}
.ms.todo .ms-head h3{color:var(--muted)}
.ms-body p{margin:0;max-width:65ch}
.ms.todo .ms-body p{color:var(--muted)}
.ev{font:500 .66rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--ink);white-space:nowrap}
.ev-strong{background:var(--ink);color:var(--ground)}
.ev-moderate{background:var(--plane)}
.ev-limited{border-style:dashed;color:var(--muted);border-color:var(--muted)}
.prog{height:12px;border:2px solid var(--ink);background:var(--plane)}
.prog i{display:block;height:100%;background:var(--blue)}
.prog-label{font:500 .78rem var(--font-mono);color:var(--muted)}
.long{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.long li{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--hair)}
.long li:first-child{border-top:0;padding-top:0}
.long h3{margin:0;font:600 1.2rem/1.15 var(--font-head);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.long p{margin:0;color:var(--muted)}
details.about{background:var(--plane);border:2px solid var(--ink);padding:4px 16px}
details.about summary{min-height:48px;display:flex;align-items:center;font-weight:600;cursor:pointer}
details.about p{margin:0 0 12px;color:var(--muted)}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;background:var(--ground);border-top:var(--rule) solid var(--ink);padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px))}
.tabs-in{display:flex;width:100%;max-width:30rem;gap:4px}
.tab{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:0;color:var(--muted);font-size:.78rem;font-weight:600}
.tab svg{width:24px;height:24px}
.tab::after{content:"";width:8px;height:8px;margin-top:2px;background:transparent}
.tab[aria-current="page"]{color:var(--ink)}
.tab[aria-current="page"]::after{background:var(--red);box-shadow:inset 0 0 0 1px var(--ink)}

.toast{position:fixed;left:16px;right:16px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:6;max-width:28rem;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--ink);color:var(--ground)}
.toast .undo{min-height:40px;padding:0 12px;border:1px solid currentColor;background:none;font-weight:700}

.cell.rk .rval{font-size:1.55rem;white-space:nowrap}
.cell.rk .o-lv{font-size:.8rem;line-height:1.2}

/* ---- PWA additions ---- */
body{padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(120px + env(safe-area-inset-bottom))}
[hidden]{display:none !important}
.icon-btn.sm{width:40px;height:40px;font-size:1.1rem;line-height:1}
.icon-btn[disabled]{opacity:.35;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.field .lbl{font:500 .7rem/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.field input{min-height:48px;padding:0 12px;border:2px solid var(--ink);background:var(--plane);width:100%}
input[type=password]{width:100%;min-height:48px;padding:0 12px;border:2px solid var(--ink);background:var(--plane);color:var(--ink)}
.post .pic.wait{background:var(--hair)}
.loss{margin:0;font:400 .7rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--loss)}

.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cal-nav{display:flex;gap:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;background:var(--hair);border:2px solid var(--hair)}
.cal-w{background:var(--plane);text-align:center;font:500 .65rem/1 var(--font-mono);color:var(--muted);padding:6px 0}
.cal-pad{background:var(--plane)}
.cal-d{position:relative;background:var(--plane);aspect-ratio:1;display:grid;place-items:center;color:var(--muted)}
.cal-d .n{position:absolute;top:3px;left:4px;font:500 .62rem/1 var(--font-mono)}
.cal-d svg{width:56%;height:56%;color:var(--powder)}
.cal-d.done{color:var(--ink)}
.cal-d.fut{opacity:.45}
.cal-d.now{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
.cal-d.now.on::after{content:"";width:34%;height:34%;background:var(--yellow)}
.cal-sum{margin:0}