@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. */

* { touch-action: manipulation; }

.tab-bar, .tab-bar * {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* overriding iOs double-click zoom when tapping on bottom icons */
: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:1px;
  --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}
/* 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(--plane);color:var(--ink)}
.amounts .amt:not(.more):active,.amounts .amt.flash{background:var(--butter);color:var(--on-butter)}
.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}

/* ---- Preview: the landing page for anyone not signed in ---- */
.pv-intro{display:flex;flex-direction:column;gap:14px}
.pv-desc{margin:0;color:var(--muted);font-size:1rem;line-height:1.45;max-width:40ch}
.pv-cta{display:flex;align-items:center;gap:20px}
.pv-cta .btn{padding:0 24px}
.pv-cta .link-btn{padding:0}
.pv-tag{flex:none;font:500 .58rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 5px;border:1px solid var(--muted);color:var(--muted);white-space:nowrap}
.me-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:6px 8px;min-width:0}
.pv-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.pv-strip .link-btn{padding:0;min-height:36px;color:var(--ink)}

/* ---- Challenges ---- */
/* Today: the running challenge sits in the stone plane under Days sober. */
.cell.ch-cell{border:0;text-align:left;color:var(--on-butter);cursor:pointer;padding:10px;gap:4px;justify-content:flex-start;font:inherit}
.cell.ch-cell .eyebrow{color:inherit}
.ch-name{margin:0;font:600 .9rem/1.15 var(--font-body);overflow-wrap:anywhere}
.ch-bar{display:block;height:4px;background:#A9A69F;margin-top:auto}
.ch-bar i{display:block;height:100%;background:#141517}
.ch-left{margin:0;font-size:.75rem;font-weight:500}
.cell.ch-cell:focus-visible{outline-offset:-3px}
/* Together: chip row, challenge card, join list. */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:40px;padding:0 12px;border:2px solid var(--ink);background:var(--plane);font-weight:600;font-size:.9rem}
.chip[aria-checked="true"]{background:var(--ink);color:var(--ground)}
.chip.add{border-style:dashed;border-color:var(--muted);color:var(--muted)}
.ch-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ch-top h3{margin:0;font:600 1.2rem/1.15 var(--font-head)}
.ch-dates{margin:0;color:var(--muted);font-size:.92rem}
.ch-card .prog i{background:var(--powder)}
.ch-who{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.95rem}
.ch-who .link-btn{padding:0}
.ch-inv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--hair);font-size:.95rem}
.ch-inv small{display:block;color:var(--muted);font-size:.82rem}
.ch-inv .btn{min-height:40px;padding:0 16px;flex:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cal-d.out{opacity:.25}

/* ---- Today tile type: small last-24h lines, label on two set lines ---- */
.loss,.o-delta{font-size:.6rem;line-height:1.3;letter-spacing:.05em}
.cell.rk .o-lv,.cell.br .o-lv{font:400 .8rem/1.25 var(--font-body)}
.o-lv .nw{white-space:nowrap}
.br-val{display:flex;flex-direction:column;gap:3px}

/* ---- Recent: slips sit beside drinks avoided, each deletable ---- */
.hist .n.had{color:#E5574D}
.hist li{flex-wrap:wrap}
.hist li.asking{padding-bottom:10px}
.hist .ask{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.92rem}
.hist .ask span{flex:1 1 12rem;color:var(--muted)}
.hist .ask .btn{min-height:40px;padding:0 14px}
.hist li.asking .n{margin-right:44px}

/* ---- Brain tile: pink plane, progress bar, next +10% line, debt note ---- */
/* Paste at the very end of styles.css. */
.cell.br{background:#F4C0D1;color:#4B1528}
.cell.br .eyebrow,.cell.br .o-lv{color:#72243E}
.br-bar{display:block;height:4px;background:#ED93B1}
.br-bar i{display:block;height:100%;background:#4B1528}
.br-next{margin:0;font:500 .66rem/1.3 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:#4B1528}
.br-debt{margin:0;font:400 .6rem/1.3 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:#993556}
/* Settings: bare icon, no box. Keeps the 44px tap area. */
/* removed box after thinning lines, so it didn't look like the only clickable thing on today pg*/
/*#settings-btn{border:0;background:none}*/

/* OCT 16 UPDATE new today design removing gutters from original mondrian inspired design lines,
removes photo square by expanding friend grid for better balance

Overrides the earlier Today rules.
app.js still writes the sliver and notch cells; they are hidden here, so app.js needs no change. */

.mond{grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.2fr);grid-template-rows:minmax(4.75rem,auto) minmax(4.75rem,auto) minmax(4.25rem,auto) auto}
.cell.sliver,.cell.notch{display:none}
.cell.me{grid-column:1 / 3;grid-row:1 / 3;background:var(--butter);color:var(--on-butter)}
.cell.me .eyebrow{color:inherit}
.cell.rk{grid-column:3;grid-row:1}
.cell.br{grid-column:3;grid-row:2}
.cell.stone{grid-column:1;grid-row:3}
/* .cell.shade{grid-column:2;grid-row:3} */
/* .cell.fr{grid-column:3;grid-row:3} */
.cell.shade{display:none}
.cell.fr{grid-column:2 / 4;grid-row:3}
.cell.foot{grid-row:4}
/* To widen the friend tile over the photo peek tile, swap the two lines above for: */

/* ---- Friend tile: latest wall photo as the background, tinted blue ---- */
/* Inert until app.js adds the has-ph class,
   so the tile stays plain powder blue until then, and whenever no photo exists. */
button.cell.fr{border:0;text-align:left;font:inherit;color:var(--on-powder);cursor:pointer}
.cell.fr.has-ph{position:relative;overflow:hidden;isolation:isolate}
.cell.fr.has-ph::before{content:"";position:absolute;inset:0;background:var(--powder);opacity:.78;z-index:-1}
.fr-ph{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-2}
.fr-ph.gone{visibility:hidden}
.fr-cap{align-self:flex-end;max-width:100%;padding:3px 6px;background:var(--on-powder);color:var(--powder);font:500 .58rem/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell.fr.has-ph:focus-visible{outline-offset:-3px}

/* ---- Today log: Skipped? and Indulged? buttons, each opening its own panel ---- */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 12px;border:2px solid var(--ink);font-weight:600;font-size:.98rem;line-height:1.15;text-align:left}
.act svg{width:24px;height:24px;flex:none}
.act .glass{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter}
.act .drink{fill:#0E0E0E}
.act .pick{fill:none;stroke:var(--butter);stroke-width:1.8;stroke-linecap:square}
.act .olive{fill:#8A9A3B}
.act .pimento{fill:#E4572E}
.act.skip{background:var(--butter);color:var(--on-butter);border-color:var(--butter)}
.act.had{background:var(--red);color:var(--on-red);border-color:var(--red)}
.act[aria-expanded="true"]{box-shadow:inset 0 0 0 3px var(--ground)}
.act .chev{margin-left:auto;font:500 .8rem/1 var(--font-mono)}
.act[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lp.skip .h2{--sq:var(--butter)}
.lp .amounts .amt:not(.more){background:#0E0E0E;color:#F2F2EE}
.lp.skip .amounts .amt:not(.more):active,.lp.skip .amounts .amt.flash{background:var(--butter);color:var(--on-butter)}
.lp.had .amounts .amt:not(.more):active,.lp.had .amounts .amt.flash{background:var(--red);color:var(--on-red)}