:root{
  --bg:#0b0d14;--bg2:#10131d;--panel:#151a28;--panel2:#1c2233;--line:#252c40;
  --text:#e8e9f1;--muted:#8b90a8;--accent:#ff2d75;--accent2:#7c4dff;--cyan:#00e5ff;
  --ok:#00e676;--warn:#ffb300;--bad:#ff5252;--ice:#8ad8ff;
  --r:14px;--shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
/* 🔴 The HTML `hidden` attribute loses to ANY display rule, because the UA stylesheet's
   [hidden]{display:none} is beaten by a page rule of equal-or-higher specificity — so
   `.row{display:flex}` on a hidden element renders it, in full, with the attribute
   correctly set. It is a silent failure: the DOM says hidden, the eye says visible, and
   nothing errors. Caught on the kit form, where the consumable-only fields showed for a
   plug; `hidden` is also used by the guide search, the voice preview and the trance
   runner, each of which is one layout change away from the same bug. One rule, once. */
[hidden]{display:none!important}
html{color-scheme:dark}
body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,#1b1440 0%,transparent 60%),radial-gradient(900px 500px at 100% 0%,#0f2a3a 0%,transparent 55%),var(--bg);color:var(--text);font:15px/1.45 ui-sans-serif,-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;min-height:100vh}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:.2rem 0 1rem;letter-spacing:-.01em}h1 small{font-weight:400;font-size:.9rem;margin-left:.5rem}
h2{font-size:1.15rem;margin:0 0 .8rem}h3{font-size:1rem;margin:0 0 .7rem;display:flex;align-items:center;gap:.5rem}h3 .more{margin-left:auto;font-size:.8rem;font-weight:400}
code{background:var(--bg2);padding:.1em .4em;border-radius:6px;font-size:.9em}
hr{border:0;border-top:1px solid var(--line);margin:1rem 0}
.hint{color:var(--muted);font-size:.85rem;margin:.3rem 0}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1rem;padding:.7rem 1.2rem;background:rgba(11,13,20,.8);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:1.15rem;color:var(--text);letter-spacing:.02em}.brand .glyph{color:var(--accent)}
/* The grouped nav (base.html .navg, templating.nav_groups). Wide: five dropdowns in the
   header. Phone (≤820px, below): a tab bar fixed to the foot, each menu a sheet above it. */
.navg{display:flex;gap:.2rem;align-items:center}
.navg details{position:relative}
.navg summary{list-style:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.navg summary::-webkit-details-marker{display:none}
.navg .g>summary,.navg a.g{display:flex;align-items:center;gap:.35rem;color:var(--muted);padding:.35rem .7rem;border-radius:9px;font-weight:500}
.navg .g>summary::after{content:"";width:.38em;height:.38em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-.12em) rotate(45deg);opacity:.6;margin-left:.1rem}
.navg .g>summary i,.navg a.g i{display:none}
.navg .g.on>summary,.navg a.g.on,.navg .g>summary:hover,.navg a.g:hover,.navg details[open]>summary{color:var(--text);background:var(--panel);text-decoration:none}
.navg .menu{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:200px;display:flex;flex-direction:column;gap:.1rem;padding:.35rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.navg .menu a{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;border-radius:8px;color:var(--muted);font-weight:500;white-space:nowrap}
.navg .menu a i{font-style:normal;width:1.3em;text-align:center}
.navg .menu a:hover,.navg .menu a.on{background:var(--panel2);color:var(--text);text-decoration:none}
.navg .menu a.on{box-shadow:inset 3px 0 0 var(--accent)}
@media(max-width:820px){
  /* 🔴 no backdrop-filter on the header here: it makes .top the containing block of its
     fixed descendants, and the tab bar would sit at the foot of the HEADER. */
  .top{backdrop-filter:none;background:rgba(11,13,20,.96);gap:.6rem;padding:.55rem 1rem}
  .top .level{margin-left:auto}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  .navg{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
        padding:.25rem .3rem calc(.25rem + env(safe-area-inset-bottom));background:rgba(11,13,20,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .navg details{position:static}
  .navg .g>summary,.navg a.g{flex-direction:column;justify-content:center;gap:.15rem;min-height:54px;padding:.3rem 0;font-size:.7rem;font-weight:600;letter-spacing:.02em;background:none!important;border-radius:12px}
  .navg .g>summary::after{display:none}
  .navg .g>summary i,.navg a.g i{display:block;font-style:normal;font-size:1.3rem;line-height:1;filter:grayscale(1);opacity:.55;transition:filter .15s,opacity .15s,transform .15s}
  .navg .g.on>summary i,.navg a.g.on i,.navg details[open]>summary i{filter:none;opacity:1}
  .navg details[open]>summary i{transform:translateY(-2px)}
  .navg .g.on>summary span,.navg a.g.on span{color:var(--text);box-shadow:0 2px 0 var(--accent);padding-bottom:1px}
  /* the open menu: a sheet just above the bar, the page dimmed behind it (a tap there closes it) */
  .navg:has(details[open])::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:100vh;background:rgba(5,6,10,.55)}
  .navg .menu{top:auto;bottom:calc(100% + .5rem);left:.6rem;right:.6rem;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:.25rem;padding:.45rem;border-radius:16px;background:var(--panel)}
  .navg .menu a{min-height:48px;padding:.6rem .7rem;font-size:.95rem;border-radius:10px}
  .navg .menu a i{font-size:1.15rem}
}
@media(max-width:480px){.top .level small{display:none}.top .level .bar{width:60px}}
.level{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}.level .lv{color:var(--text);font-weight:700}
.level .bar{width:90px;height:7px;background:var(--panel2);border-radius:99px;overflow:hidden}.level .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}
main{max-width:1100px;margin:0 auto;padding:1.2rem}
footer{color:var(--muted);text-align:center;font-size:.78rem;padding:2rem 1rem}
.flash{max-width:1100px;margin:.8rem auto 0;padding:.6rem 1rem;border-radius:10px;font-weight:600}
.flash.ok{background:rgba(0,230,118,.12);color:var(--ok);border:1px solid rgba(0,230,118,.3)}
.flash.err{background:rgba(255,82,82,.12);color:var(--bad);border:1px solid rgba(255,82,82,.3)}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--shadow);margin-bottom:1rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
@media(max-width:820px){.grid2{grid-template-columns:1fr}.top{flex-wrap:wrap}.level{margin-left:0}}
/* hero */
.hero{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;background:linear-gradient(135deg,rgba(124,77,255,.14),rgba(255,45,117,.08)),var(--panel);border:1px solid var(--line);border-radius:22px;padding:1.4rem;margin-bottom:1rem;box-shadow:var(--shadow)}
@media(max-width:700px){.hero{grid-template-columns:1fr;justify-items:center}}
.ring-wrap{position:relative;width:260px;height:260px}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:var(--panel2);stroke-width:10}
.ring .prog{fill:none;stroke:url(#g) var(--accent);stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:552.9;stroke-dashoffset:552.9;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 8px rgba(255,45,117,.55))}
.status-frozen .ring .prog{stroke:var(--ice);filter:drop-shadow(0 0 8px rgba(138,216,255,.6))}
.status-done .ring .prog{stroke:var(--ok);filter:drop-shadow(0 0 8px rgba(0,230,118,.6))}
.status-none .ring .prog,.status-unlocked .ring .prog{stroke:var(--line);filter:none}
.ring-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.status-pill{font-size:.7rem;letter-spacing:.18em;font-weight:800;color:var(--accent);margin-bottom:.3rem}
.status-frozen .status-pill{color:var(--ice)}.status-done .status-pill{color:var(--ok)}.status-none .status-pill,.status-unlocked .status-pill{color:var(--muted)}
.remaining{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.status-frozen .remaining{color:var(--ice)}
.hero .sub{color:var(--muted);font-size:.85rem;margin-top:.4rem}.hero .sub b{color:var(--text)}.frz{color:var(--ice)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem 1rem;margin:0}
.facts div{background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem}.facts .wide{grid-column:1/-1}
.facts dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.facts dd{margin:.15rem 0 0;font-weight:600}
.plus{color:var(--bad)}.minus{color:var(--ok)}
/* forms */
label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:var(--muted);font-weight:600}
input,select{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:.5rem .6rem;font:inherit;min-width:0}
input:focus,select:focus{outline:2px solid var(--accent2);border-color:transparent}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}input[type=color]{padding:0;width:44px;height:34px}input[type=file]{padding:.35rem}
.check{flex-direction:row;align-items:center;gap:.5rem;margin:.6rem 0}
.row{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap;margin:.6rem 0}.row label{flex:1 1 120px}.row button{flex:0 0 auto}
fieldset.plain{display:contents;border:0;margin:0;padding:0}
button,.btn{display:inline-block;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:.55rem .95rem;font:inherit;font-weight:700;cursor:pointer;transition:transform .08s,filter .15s}
button:hover,.btn:hover{filter:brightness(1.15);text-decoration:none}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed;filter:none}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.danger{background:rgba(255,82,82,.15);border-color:rgba(255,82,82,.35);color:var(--bad)}
.big{font-size:1.05rem;padding:.8rem 1.4rem;width:100%;margin-top:.6rem}.small{padding:.3rem .6rem;font-size:.8rem}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.5rem}.quick form{display:contents}
.quick .plus{color:var(--bad);border-color:rgba(255,82,82,.3)}.quick .minus{color:var(--ok);border-color:rgba(0,230,118,.3)}
.lockform details{margin:.4rem 0}.lockform summary{cursor:pointer;color:var(--cyan);font-size:.85rem}
.bigstat{font-size:1.9rem;font-weight:800;margin:.2rem 0}.bigstat.small{font-size:1.3rem}
/* events */
.events{list-style:none;margin:0;padding:0}
.ev{display:grid;grid-template-columns:2rem 1fr auto;gap:.6rem;padding:.6rem 0;border-top:1px solid var(--line);align-items:start}.ev:first-child{border-top:0}
.ev-ico{font-size:1.2rem;line-height:1.3}.ev-head{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.ev-detail{color:var(--muted);font-size:.85rem;margin-top:.1rem}.ev time{color:var(--muted);font-size:.78rem;white-space:nowrap}
.ev-thumb img{margin-top:.4rem;max-height:120px;border-radius:8px;border:1px solid var(--line)}
.events.compact .ev{padding:.45rem 0}
.badge{font-size:.68rem;padding:.12rem .45rem;border-radius:99px;background:var(--panel2);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.badge.ok{background:rgba(0,230,118,.15);color:var(--ok)}.badge.actor{background:rgba(124,77,255,.2);color:#c9b8ff}
.mod-wheel{background:rgba(255,179,0,.15);color:var(--warn)}.mod-tasks{background:rgba(0,229,255,.12);color:var(--cyan)}.mod-core{background:rgba(255,45,117,.14);color:var(--accent)}
.delta{font-weight:800;font-variant-numeric:tabular-nums}.xp{color:var(--accent2);font-size:.75rem;font-weight:700}
.mini{list-style:none;margin:0 0 .6rem;padding:0}.mini li{display:flex;justify-content:space-between;gap:.5rem;padding:.3rem 0;border-top:1px solid var(--line);font-size:.9rem}.mini li:first-child{border-top:0}.mini small{color:var(--muted)}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}.chip{padding:.3rem .7rem;border-radius:99px;border:1px solid var(--line);color:var(--muted);font-size:.8rem;font-weight:600}.chip.on{background:var(--panel2);color:var(--text)}
.pager{display:flex;justify-content:space-between;color:var(--muted);margin-top:.8rem}
/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}.tbl th{text-align:left;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:.35rem .4rem;border-bottom:1px solid var(--line)}
.tbl td{padding:.4rem .4rem;border-bottom:1px solid var(--line);vertical-align:middle}.tbl.editor input,.tbl.editor select{width:100%;padding:.35rem .5rem}.tbl.editor .narrow{width:5.5rem}.tbl.editor .actions{white-space:nowrap}
.tbl.editor tr.new td{background:rgba(124,77,255,.06)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin-bottom:1rem}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem}.tile b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}.tile b small{font-size:.9rem;color:var(--muted)}.tile span{color:var(--muted);font-size:.78rem}
.tile.plus b{color:var(--bad)}.tile.minus b{color:var(--ok)}
/* heatmap */
.heat-wrap{overflow-x:auto;padding-bottom:.3rem}.heat-months{display:grid;grid-auto-columns:14px;grid-auto-flow:column;font-size:.68rem;color:var(--muted);height:1rem;margin-left:0}
.heat{display:flex;gap:3px}.hcol{display:flex;flex-direction:column;gap:3px}.hcol i{width:11px;height:11px;border-radius:2px;background:var(--panel2);display:block}
.hcol i.l1{background:#4a2a5e}.hcol i.l2{background:#8a2f77}.hcol i.l3{background:#c93078}.hcol i.l4{background:var(--accent)}.hcol i.fut{opacity:.25}
/* tasks */
.task{border:1px solid var(--line);border-radius:12px;padding:.8rem;margin-bottom:.7rem;background:rgba(0,0,0,.15)}.task.overdue{border-color:rgba(255,82,82,.5)}
.task-head{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.task p{margin:.3rem 0}
/* wheel */
.wheelgrid{grid-template-columns:1.2fr 1fr}
.wheel-stage{position:relative;max-width:420px;margin:0 auto}.wheel{width:100%;height:auto;display:block;transform:rotate(0deg);filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
.wheel text{font-size:12px;font-weight:800;fill:#0b0d14;pointer-events:none}
.pointer{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:2rem;color:var(--text);z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.spin-row{margin-top:1rem;text-align:center}
.result{min-height:2.6rem;margin-top:.7rem;display:flex;flex-direction:column;align-items:center;gap:.1rem;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.result.show{opacity:1;transform:none}.result.err{opacity:1;color:var(--bad)}.result b{font-size:1.3rem}.result span{color:var(--muted)}
.result.add b{color:var(--bad)}.result.remove b{color:var(--ok)}.result.freeze b{color:var(--ice)}.result.task b{color:var(--cyan)}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.shot{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.shot img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.shot figcaption{padding:.6rem .8rem;display:flex;flex-direction:column;gap:.15rem;font-size:.85rem}.shot figcaption span{color:var(--muted);font-size:.78rem}.shot .stamp{font-size:.78rem;margin-top:.3rem}
/* handler */
.voice{font-style:italic;color:var(--text);margin:.2rem 0 .6rem}.voice.big{font-size:1.15rem;margin:0}.voicecard{border-color:rgba(255,45,117,.35);background:linear-gradient(135deg,rgba(255,45,117,.12),rgba(124,77,255,.1)),var(--panel)}
.card.need{border-color:rgba(255,179,0,.5)}.card.done{border-color:rgba(0,230,118,.35)}
/* a verification challenge (#29): the word is the whole point — big, spaced, unmistakable */
.challenge .nonce{margin:.2rem 0 .4rem}.challenge .nonce b{font:700 1.9rem/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--text)}.card .card.challenge{margin:.6rem 0;box-shadow:none}
.prompt{font-size:1.05rem;font-weight:600;border-left:3px solid var(--accent);padding:.3rem .8rem;margin:.3rem 0 .8rem}.prompt.small{font-size:.9rem;font-weight:500;margin-top:.6rem}
textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:.6rem;font:inherit;resize:vertical}textarea:focus{outline:2px solid var(--accent2);border-color:transparent}
.checkin .slider{flex-direction:row;align-items:center;gap:.6rem;margin:.35rem 0}.checkin .slider input{flex:1}.checkin .slider output{min-width:1.4rem;text-align:right;color:var(--text);font-weight:700}
.mantra{font-size:1.25rem;font-weight:700;text-align:center;padding:.8rem;border-radius:12px;background:rgba(124,77,255,.12);margin:.4rem 0 .6rem}
.lines{list-style:none;margin:0;padding:0}.lines li{display:flex;justify-content:space-between;gap:.6rem;align-items:center;padding:.35rem 0;border-top:1px solid var(--line);font-size:.9rem}.lines li:first-child{border-top:0}
.medclock{font-size:2rem;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;margin:.4rem 0;color:var(--ice)}
.scores{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.8rem;margin:.2rem 0}.scores span{background:var(--panel2);padding:.1rem .5rem;border-radius:99px}.scores i{color:var(--muted);font-style:normal}
.ev-detail.body{color:var(--text);white-space:pre-wrap;margin-top:.3rem}
.mini small.ok{color:var(--ok)}.mini small.due{color:var(--warn)}

/* Undone events stay in the log, struck through — never hidden. That visual IS
   the append-only guarantee made legible. */
.ev.voided { opacity: .45; }
.ev.voided .ev-detail,
.ev.voided .ev-head b { text-decoration: line-through; }
.ev-audio{width:100%;max-width:360px;margin-top:.4rem;display:block}

/* ── 0.2: the play surface ─────────────────────────────────────────────────── */
/* Four big doors under the timer. The photo one is a <label> wrapping a hidden file
   input, so one tap opens the camera and the form submits itself on pick. */
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin:0 0 .8rem}
.actions .action{margin:0;display:contents}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;padding:.9rem .6rem;text-align:center;position:relative;min-height:84px;line-height:1.15}
.act .ico{font-size:1.6rem;line-height:1}
.act.lit{border-color:rgba(255,179,0,.55);box-shadow:0 0 0 1px rgba(255,179,0,.25) inset}
.act .pill{position:absolute;top:.4rem;right:.5rem;font-style:normal;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;background:var(--warn);color:#1a1200;padding:.12rem .45rem;border-radius:99px}
.act input[type=file]{display:none}
/* settings live one tap away, never on the play surface */
.gear{margin-left:auto;font-size:.95rem;color:var(--muted);text-decoration:none;opacity:.7}h1 .gear{font-size:1.1rem;margin-left:.6rem}.gear:hover{opacity:1;text-decoration:none;color:var(--text)}
/* 🔴 gap, NOT the `h1 small{margin-left}` on line 19 — `.hint` is a CLASS and beats a
   two-element selector, so that margin computes to 0 and every page's subtitle sits
   flush against its title. A gap on the flex container cannot be out-specified by a
   utility class on the child, and it also restores the word space that making the
   heading a flex container removed: an anonymous flex item strips its own trailing
   whitespace, so `<h1>Share <small>` genuinely has nothing between the two. */
h1{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
/* folds: the extras that used to crowd the cards */
details.fold{margin:.6rem 0 0}details.fold>summary{cursor:pointer;color:var(--muted);font-size:.85rem;font-weight:600}details.fold[open]>summary{color:var(--text);margin-bottom:.4rem}
.card.fold{padding:.7rem 1.2rem}.card.fold[open]{padding-bottom:1.1rem}
.photo-more .row{margin-top:.6rem}
/* the retroactive log */
details.when{flex:1 1 100%;margin:.3rem 0 0}details.when>summary{cursor:pointer;color:var(--muted);font-size:.8rem;font-weight:600}details.when[open]>summary{color:var(--cyan)}
details.when label{margin-top:.4rem}details.when input{width:auto}
.badge.late{background:rgba(0,229,255,.12);color:var(--cyan);text-transform:none;letter-spacing:0}
/* settings page */
.settings h2{display:flex;align-items:center;gap:.5rem}.settings .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.7rem 1rem;margin-bottom:.8rem}
.settings-nav{position:sticky;top:3.4rem;z-index:4;background:rgba(11,13,20,.85);backdrop-filter:blur(10px);padding:.5rem 0;margin-top:-.4rem}
.tblwrap{overflow-x:auto;max-width:100%}
.chip.on[data-share]{background:linear-gradient(135deg,rgba(255,45,117,.35),rgba(124,77,255,.35));color:var(--text);border-color:transparent}
/* guide — the in-app documentation. Three columns on wide screens, one on a phone. */
.guide{display:grid;grid-template-columns:220px minmax(0,1fr) 200px;gap:1.2rem;align-items:start}
@media(max-width:1000px){.guide{grid-template-columns:200px minmax(0,1fr)}.guide-toc{display:none}}
@media(max-width:700px){.guide{grid-template-columns:1fr}.guide-nav{position:static}}
.guide-nav{position:sticky;top:64px;font-size:.88rem}
.guide-nav h4,.guide-toc h4{margin:.9rem 0 .3rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.guide-nav ul,.guide-toc ul{list-style:none;margin:0;padding:0}
.guide-nav li a{display:block;padding:.25rem .55rem;border-radius:8px;color:var(--muted);font-weight:500}
.guide-nav li a.on,.guide-nav li a:hover{color:var(--text);background:var(--panel);text-decoration:none}
.guide-search{position:relative}.guide-search input{width:100%}
.guide-results{position:absolute;z-index:6;left:0;right:0;top:100%;margin-top:.3rem;background:var(--panel2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:60vh;overflow:auto}
.guide-results li a{display:block;padding:.55rem .7rem;border-top:1px solid var(--line);color:var(--text)}.guide-results li:first-child a{border-top:0}
.guide-results li a:hover{background:var(--panel);text-decoration:none}.guide-results small{color:var(--muted);margin-left:.4rem}
.guide-results span{display:block;color:var(--muted);font-size:.78rem;margin-top:.15rem}
.guide-toc{position:sticky;top:64px;font-size:.8rem}.guide-toc ul ul{padding-left:.7rem}
.guide-toc a{display:block;padding:.15rem 0;color:var(--muted)}.guide-toc a:hover{color:var(--text)}
.guide-body{min-width:0;line-height:1.6}.guide-body h1{margin-top:0}.guide-body .lede{color:var(--muted);font-size:1.02rem;margin-top:-.4rem}
.guide-body h2{margin:1.6rem 0 .6rem;padding-top:.6rem;border-top:1px solid var(--line);font-size:1.25rem}
.guide-body h3{margin:1.2rem 0 .4rem;font-size:1.02rem;display:block}
.guide-body p,.guide-body ul,.guide-body ol{margin:.55rem 0}.guide-body li{margin:.2rem 0}
.guide-body pre{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;overflow:auto;font-size:.85rem}
.guide-body pre code{background:none;padding:0}
.guide-body table{border-collapse:collapse;width:100%;font-size:.9rem;margin:.6rem 0;display:block;overflow-x:auto}
.guide-body th,.guide-body td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.guide-body th{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.guide-body blockquote{margin:.6rem 0;padding:.2rem 1rem;border-left:3px solid var(--accent2);color:var(--muted)}
.guide-body .admonition{margin:.8rem 0;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.guide-body .admonition-title{font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 .3rem}
.guide-body .admonition p:last-child{margin-bottom:0}
.guide-body .admonition.note{border-color:rgba(0,229,255,.35)}.guide-body .admonition.note .admonition-title{color:var(--cyan)}
.guide-body .admonition.tip{border-color:rgba(0,230,118,.35)}.guide-body .admonition.tip .admonition-title{color:var(--ok)}
.guide-body .admonition.important{border-color:rgba(124,77,255,.5)}.guide-body .admonition.important .admonition-title{color:#c9b8ff}
.guide-body .admonition.warning{border-color:rgba(255,179,0,.45)}.guide-body .admonition.warning .admonition-title{color:var(--warn)}
.guide-body .admonition.danger{border-color:rgba(255,82,82,.5)}.guide-body .admonition.danger .admonition-title{color:var(--bad)}
.guide-body .crumb{color:var(--muted);font-size:.8rem;margin:0 0 .3rem}
.guide-pager{display:flex;justify-content:space-between;gap:1rem;margin-top:1.6rem;padding-top:.8rem;border-top:1px solid var(--line);font-weight:600}
.guide-foot{margin-top:1rem}
.top .help{color:var(--muted);font-weight:800;border:1px solid var(--line);border-radius:99px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}
.top .help:hover{color:var(--text);background:var(--panel);text-decoration:none}
h2 .doc,h3 .doc{font-size:.75rem;font-weight:400;margin-left:.4rem;opacity:.75}
/* share card picker — the photo strip (the rest of /share is the .sp-* block at the end) */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.5rem;margin:.4rem 0 .2rem}
.thumb{position:relative;display:block;border-radius:10px;overflow:hidden;border:2px solid transparent;line-height:0}
.thumb img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.thumb.on{border-color:var(--accent)}
.thumb .tag{position:absolute;left:0;bottom:0;background:rgba(11,13,20,.82);color:var(--text);font-size:.6rem;letter-spacing:.04em;padding:.1rem .3rem;border-top-right-radius:6px;line-height:1.3}
.thumb .tag.pin{left:auto;right:0;bottom:auto;top:0;color:var(--cyan);border-top-right-radius:0;border-bottom-left-radius:6px}
.thumb .tag.ev{left:auto;right:0;color:#ffb36b;border-top-right-radius:0;border-top-left-radius:6px}
.intake-note{margin:.4rem 0 0;font-size:.8rem}.intake-note.bad{color:var(--warn)}
/* ── trance ─────────────────────────────────────────────────────────────────────
   🔴 The dim is a fixed OVERLAY, never `filter:brightness()` on <body>. A root filter
   re-composites the entire page every frame for forty-five minutes; one absolutely
   positioned layer costs nothing and is what the compositor is for. pointer-events:none
   is load-bearing — the whole screen has to stay tappable underneath it. */
#tr-dim{position:fixed;inset:0;background:#000;opacity:.82;pointer-events:none;z-index:40;
  transition:opacity 8s linear}
body.tr-on{background:#05060a}
body.tr-on .top,body.tr-on footer{opacity:.12;transition:opacity 4s linear}
.tr-stage{position:relative;z-index:50;display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:68vh;gap:1.2rem;text-align:center}
#tr-breath{width:180px;height:180px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(124,77,255,.5);
  background:radial-gradient(circle,rgba(124,77,255,.20),transparent 70%);
  /* No CSS transition on transform: the scale is set every frame from the AUDIO clock,
     and a transition would add its own easing on top of the pacer's, drifting the
     visible rhythm away from the one being breathed. */
  will-change:transform}
#tr-breath.gone{opacity:0;transition:opacity 6s linear}
#tr-breathword{color:var(--muted);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase}
.tr-seg{color:var(--muted);letter-spacing:.24em;text-transform:uppercase;font-size:.75rem;margin:0}
.tr-left{font-size:2.6rem;font-variant-numeric:tabular-nums;margin:0;color:var(--text);opacity:.55}
.tr-fade{opacity:.5;animation:trfade 1s ease-in 30s forwards}
@keyframes trfade{to{opacity:0}}
/* The pacer is a rhythm, not a spectacle: honour a stated preference for less motion by
   holding the circle still rather than by hiding the readout someone may need. */
@media (prefers-reduced-motion:reduce){#tr-breath{transform:none !important}}

/* ── Photo intake: see what you are about to send ──────────────────────────────
   A verification photo IS the record, so the form shows the file it is actually going
   to POST — after any HEIC conversion or frame grab, which is the whole point.
   🔴 The native input stays VISIBLE rather than being hidden behind a scripted tap
   target. A hidden input needs JS to open at all, and /tasks is one of the surfaces
   that must still work with JS off; the frame is decoration, the input is the door. */
.photofield{flex:1 1 220px}
.photofield input[type=file]{display:block;width:100%;margin-top:.3rem}
/* 🔴 Both blocks intake.js injects are full-width rows. `.row` is a flex LINE, so
   without a 100% basis the thumbnail and its caption get squeezed in beside the note
   and the note field into a column a few pixels wide. */
.intake-preview,.intake-note{flex:1 1 100%}
.intake-preview{display:flex;align-items:center;gap:.6rem;margin:.5rem 0 0}
.intake-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);background:var(--panel2)}
/* overflow-wrap, because a phone's filename is long and must not widen the card. */
.intake-meta{flex:1 1 auto;color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}

/* ── the quantified layer: calendar, activity tiles ──────────────────────────
   🔴 Every colour below comes from --c, set inline from the ACTIVITY ROW. There is no
   new palette here on purpose: the calendar's whole idea is that a day's colours name
   what was done, so the colours have to be user data, not design tokens. */
.cal-head{display:flex;gap:.5rem;align-items:center;margin-bottom:.8rem}
.btn.disabled{opacity:.35;pointer-events:none}
.cal{--gap:6px}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap);font-size:.72rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}
.cal-dow span{text-align:center}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--gap);margin-bottom:var(--gap)}
.cal-day{position:relative;min-height:62px;border-radius:12px;background:var(--panel2);
  border:1px solid var(--line);padding:.3rem .35rem;display:flex;flex-direction:column;gap:.25rem}
.cal-day b{font-size:.78rem;color:var(--muted);font-weight:700;line-height:1}
.cal-day.out{opacity:.34}
.cal-day.fut{background:transparent;border-style:dashed}
.cal-day.today{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,45,117,.25)}
.cal-day.today b{color:var(--accent)}
.pips{display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start}
.pip{width:10px;height:10px;border-radius:50%;background:var(--c);display:block;
  box-shadow:0 0 8px color-mix(in srgb, var(--c) 55%, transparent)}
/* 🔴 the backdated ring. A repaired day must not look identical to a lived one. */
.pip.late{box-shadow:none;background:transparent;border:2px solid var(--c)}
.cal-legend{display:flex;flex-wrap:wrap;gap:.45rem .9rem;margin-top:.9rem;
  padding-top:.8rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.cal-legend .lg{display:inline-flex;align-items:center;gap:.35rem}
.cal-legend .lg i{width:10px;height:10px;border-radius:50%;background:var(--c);display:inline-block}
.cal-legend .lg i.late-key{background:transparent;border:2px solid var(--muted)}
/* #44 — the day is a link, the selection an outline, the legend a filter */
.cal-day[data-day]{cursor:pointer}
.cal-day .cal-dn{color:inherit;text-decoration:none;align-self:flex-start;border-radius:4px}
.cal-day.sel{outline:2px solid var(--text);outline-offset:1px}
.cal-day .cal-dn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.pip-more{font-size:.62rem;line-height:10px;color:var(--muted);font-weight:700;text-decoration:none}
.cal-legend .lg[role=button]{cursor:pointer;user-select:none;border-radius:6px}
.cal-legend .lg[role=button]:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cal-legend .lg.off{opacity:.38;text-decoration:line-through}
.daysheet-dlg{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;
  border-radius:18px;border:1px solid var(--line);background:var(--bg2);color:var(--text)}
.daysheet-dlg::backdrop{background:rgba(5,6,10,.72);backdrop-filter:blur(4px)}
.daysheet-dlg .dlg-close{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;
  margin:0;padding:.55rem .6rem 0}
.daysheet-slot{padding:0 1rem 1rem}
.daysheet-dlg h1{font-size:1.2rem;margin-top:0}
.day-act h3 .pip{display:inline-block;vertical-align:middle;margin-right:.15rem}
.ev-open{display:inline-block;margin-top:.25rem;font-size:.8rem}
.ev:target,.task:target,tr:target,.shot:target{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.entry-body{white-space:pre-wrap;line-height:1.55;margin:.6rem 0}

/* time-since tiles */
.since-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.7rem}
.since{border:1px solid var(--line);border-radius:var(--r);padding:.6rem .7rem;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,transparent),transparent 62%);
  border-left:3px solid var(--c)}
.since-top{display:flex;align-items:center;gap:.35rem;font-size:.82rem}
.since-top b{font-weight:700}
.since-ico{font-size:1rem}
.since-log{margin-left:auto}
.since-log .chip{padding:.05rem .4rem;font-size:.7rem}
.since-big{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;margin:.25rem 0 .1rem;color:var(--text)}
.since-big small{font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.04em}
/* "never" is a real answer, visually distinct from a duration — not a zero */
.since-big.none{color:var(--muted);font-size:1.05rem;font-style:italic;font-weight:600}
.since-facts{display:flex;flex-wrap:wrap;gap:.2rem .55rem;font-size:.72rem;color:var(--muted)}
.since-facts .st{color:var(--warn)}
.since-facts .met{color:var(--ok)}
.since-facts small{font-size:.85em}

/* the activities editor — one form per row, wrapping on a phone */
.act-row{display:flex;align-items:flex-end;gap:.4rem;border:1px solid var(--line);
  border-radius:12px;padding:.55rem .6rem;margin-bottom:.5rem;background:rgba(0,0,0,.14)}
.act-row.off{opacity:.5}
.act-row.new{border-style:dashed;border-color:var(--accent2)}
.act-fields{display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:flex-end;flex:1}
.act-fields label{font-size:.66rem;color:var(--muted);display:flex;flex-direction:column;gap:.15rem}
.act-fields input,.act-fields select{font-size:.82rem;padding:.25rem .35rem}
.act-fields .f-ico input{width:3.2rem}
.act-fields .f-col input{width:2.6rem;padding:.1rem;height:1.75rem}
.act-fields .f-title input{width:8rem}
.act-fields .f-slug input{width:7rem}
.act-fields .f-mod input{width:6rem}
.act-fields .f-kind input{width:9rem}
.act-fields .f-tgt input,.act-fields .f-xp input{width:3.4rem}
.act-fields label.check{flex-direction:row;align-items:center;gap:.25rem;font-size:.72rem}
.act-fields .f-save{margin-left:auto}
.tokref{line-height:2;word-break:break-word}
.tokref code{font-size:.72rem}

/* ── kit ─────────────────────────────────────────────────────────────────── */
.kitgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem;margin-bottom:1rem}
.kititem{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--text)}
.kititem:hover{border-color:var(--accent2);text-decoration:none}
.kititem.wish{border-style:dashed;opacity:.85}
.kititem.gone{opacity:.5;filter:saturate(.4)}
.kitshot{position:relative;aspect-ratio:1;background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.kitshot img{width:100%;height:100%;object-fit:cover}
.kitshot .noshot{font-size:2.6rem;opacity:.4}
.kitbadges{position:absolute;right:.35rem;bottom:.35rem;display:flex;gap:.15rem;background:rgba(11,13,20,.72);border-radius:99px;padding:.15rem .4rem;font-size:.85rem;backdrop-filter:blur(6px)}
.kitmeta{padding:.55rem .7rem;display:flex;flex-direction:column;gap:.1rem;min-height:4.6rem}
.kitmeta b{font-size:.95rem;line-height:1.2}
.kitmeta .hint{margin:0;font-size:.78rem}
/* a bout — what is on right now */
.bout{border-top:1px solid var(--line);padding:.7rem 0}
.bout:first-of-type{border-top:0}
.bout-head{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.bout.mini{border:0;padding:.3rem 0 .6rem;display:flex;flex-direction:column;gap:.15rem;align-items:flex-start}
.bout.mini .btn{margin-top:.35rem}
/* trophies */
.trophies{gap:.45rem}
.chip.trophy{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.05rem;padding:.4rem .8rem;border-radius:12px;color:var(--text);background:linear-gradient(135deg,rgba(255,196,0,.14),rgba(124,77,255,.12));border-color:rgba(255,196,0,.35);line-height:1.25}
.chip.trophy small{color:var(--muted);font-weight:500;font-size:.72rem}
.trophyrow{border-top:1px solid var(--line);padding:.7rem 0}
.trophyrow:first-of-type{border-top:0}
.trophyrow .chips{margin:.35rem 0 0}
/* spec fields */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem;margin:.6rem 0}
.specset{display:contents}
label.spec{display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:var(--muted)}
label.spec .hint{font-size:.72rem;margin:0}
.chips.pick .chip{cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;gap:.35rem;font-weight:600}
.chips.pick .chip:has(input:checked){background:var(--panel2);color:var(--text);border-color:var(--accent2)}
.chips.filters{margin-bottom:.7rem}.chips.filters .chip small{opacity:.7;font-weight:500;margin-left:.2rem}.chip.off{opacity:.45;cursor:not-allowed}
h4.sub{margin:.9rem 0 .35rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
h4.sub:first-child{margin-top:0}
small.warn,.warn{color:var(--warn)}
.unknown{color:var(--muted);border-bottom:1px dotted var(--muted);cursor:help}
.gallery.small{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.gallery.small figure{margin:0}
.gallery.small img{width:100%;border-radius:10px;display:block}
.gallery.small figcaption{font-size:.72rem;color:var(--muted);text-align:center}

.checkin.ask{margin:.5rem 0 .9rem}
.checkin.ask .slider{width:100%}
/* An unanswered slider must not LOOK like an answer — the thumb sits at the midpoint
   because a range input has no null position. */
.slider.unanswered{opacity:.4;filter:grayscale(1)}
.askfoot{display:flex;align-items:center;gap:.6rem;margin-top:.15rem}
.askfoot output{font-size:.8rem}
.askfoot .clear{padding:.1rem .45rem;font-size:.7rem}

/* Badge rarity marks on the Share page. 🔴 The five colours are the LIGHT stop of each
   metal in core/theme.py::BADGE_METAL, which is itself transcribed from the badge
   forge's chassis — a third copy, so it is a third thing to drift. It is CSS decoration
   only: nothing here reaches a rendered card, which reads theme.py directly. Keeping it
   as one `--rar-*` block rather than sprinkling literals means the drift, when it comes,
   is in one place. */
.rar{font-style:normal}
.rar-common{color:#969eaa}
.rar-uncommon{color:#aaceb0}
.rar-rare{color:#a0bee8}
.rar-epic{color:#c6a8e8}
.rar-legendary{color:#f4d68c}
/* The stats picker: a chip that carries its own move/remove links. The anchors have to
   out-specify `.chip a` or they inherit the chip's own colour and vanish. */
.chip.on a{color:inherit;opacity:.62;text-decoration:none;padding:0 .15rem}
.chip.on a:hover{opacity:1}

/* ── /progress: tabs, charts, observations ───────────────────────────────── */
/* Tabs are LINKS (each one its own request — see core/routes.py), so they are styled as
   navigation and not as a widget: the browser's own "this is a link" affordances are the
   ones that keep working with JavaScript off. */
.tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin:-.3rem 0 1rem;border-bottom:1px solid var(--line);padding-bottom:.5rem}
.tab{padding:.4rem .85rem;border-radius:9px;color:var(--muted);font-weight:600;font-size:.9rem}
.tab:hover{color:var(--text);background:var(--panel);text-decoration:none}
.tab.on{color:var(--text);background:var(--panel);box-shadow:inset 0 -2px 0 var(--accent)}

.chartcard h3{margin-bottom:.4rem}
.chart{margin:.2rem 0 0}
/* The SVG carries a viewBox and no width/height, so it scales to the card and the type
   inside it scales with it — one layout for the phone and the desktop. */
.chartsvg{width:100%;height:auto;display:block}
.chartsvg .gl{stroke:var(--line);stroke-width:1}
.chartsvg .gt,.chartsvg .xt{fill:var(--muted);font-size:10px}
.chartsvg .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chartsvg .br{opacity:.88}
/* The in-progress week. Hollow and dashed rather than merely faded: a lighter solid bar
   still reads as a measured value, and this one is a week that is not over. */
.chartsvg .br.part{fill-opacity:.25;stroke:var(--muted);stroke-width:1;stroke-dasharray:3 2}
.chartsvg .br.none{fill:var(--line);opacity:.22}
.legend .key i.nodata{background:var(--line);opacity:.5}
.legend{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.78rem;color:var(--muted);margin-top:.3rem}
.legend .key{display:inline-flex;align-items:center;gap:.35rem;color:var(--text)}
.legend .key i{width:10px;height:10px;border-radius:2px;display:inline-block;flex:0 0 auto}
.legend .key i.hollow{background:none;border:1px dashed var(--muted)}
.legend .key small{color:var(--muted)}
.legend .key.off{opacity:.55}
.axiswarn{border-left:2px solid var(--warn);padding-left:.6rem}
.nodata{font-style:italic;padding:.7rem 0}
.chartgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem .9rem}
.chartcell h4.sub{margin:0 0 .1rem}

/* Observations. The left rule carries the tone and NOTHING else does — tone is colour, it
   is never the difference between two sentences, because a reader who cannot see the
   colour must still get the whole finding from the words. */
.obs{list-style:none;margin:.2rem 0 0;padding:0}
.ob{padding:.55rem 0 .55rem .8rem;border-top:1px solid var(--line);border-left:3px solid var(--line);margin-top:.3rem}
.ob:first-child{border-top:0;margin-top:0}
.ob b{display:block;font-weight:700}
.ob small{color:var(--muted);font-size:.8rem;display:block;margin-top:.15rem}
.ob.good{border-left-color:var(--ok)}
.ob.watch{border-left-color:var(--warn)}

/* hosted mode */
.card.auth{max-width:520px;margin:2.5rem auto}.card.auth .fields{display:grid;gap:.8rem}.card.auth h1{margin-top:0}
.check label.row{flex-direction:row;align-items:flex-start;gap:.6rem;font-weight:500;color:var(--text);font-size:.85rem;line-height:1.35}
.top .who{color:var(--muted);font-weight:700;font-size:.85rem;padding:.3rem .6rem;border:1px solid var(--line);border-radius:99px}.top .who:hover{color:var(--text);text-decoration:none}
.card.leave{border-color:rgba(255,82,82,.4)}.btn.bad{border-color:rgba(255,82,82,.5);color:var(--bad)}form.inline{display:inline-block;margin-left:.4rem}
.notice{background:rgba(255,179,0,.10);border:1px solid rgba(255,179,0,.35);border-radius:10px;padding:.6rem .8rem;font-size:.85rem;line-height:1.4;margin:.6rem 0}
.flash.beta{background:rgba(124,77,255,.14);color:var(--text);border:1px solid rgba(124,77,255,.4)}
.flash.demo{background:rgba(0,229,255,.10);color:var(--text);border:1px solid rgba(0,229,255,.4)}
.demo-door ul{padding-left:1.1rem}.demo-door li{margin:.35rem 0}
.survey .q{margin:1.1rem 0;padding-top:.9rem;border-top:1px solid var(--line)}.survey .q:first-child{border-top:0}.survey .q>p{margin:0 0 .5rem;font-weight:600}.survey .q .req{color:var(--accent)}
.scale{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.scale small{color:var(--muted);font-size:.75rem}.scale label{flex-direction:row;align-items:center;gap:.3rem;padding:.35rem .6rem;border:1px solid var(--line);border-radius:9px;color:var(--text);font-weight:700;cursor:pointer}.scale label:has(input:checked){background:var(--panel2);border-color:var(--accent2)}
.opts label{flex-direction:row;align-items:center;gap:.5rem;padding:.3rem 0;color:var(--text);font-weight:500;font-size:.9rem}
.survey textarea{min-height:5.5rem}.missing{background:rgba(255,82,82,.12);border:1px solid rgba(255,82,82,.3);border-radius:10px;padding:.6rem .8rem;margin-bottom:.8rem}

/* ── habits ──────────────────────────────────────────────────────────────── */
.hab-actions .act.hab{border-left:3px solid var(--c);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 16%,transparent),transparent 60%),var(--panel)}
.hab-actions .act.hab .hab-sub{display:block;color:var(--muted);font-size:.68rem;font-weight:500;margin-top:.15rem}
.hab-actions .act.hab.lit{border-color:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent) inset}
.hab-actions .act.hab .pill{background:var(--c);color:#0b0d14}
.hboard th.today,.hboard td.today{background:rgba(124,77,255,.10)}
.hboard td{text-align:center;font-variant-numeric:tabular-nums}
.hboard td.hname{text-align:left;white-space:nowrap;border-left:3px solid var(--c);padding-left:.5rem}
.hboard .hdot{display:inline-block;min-width:1.9rem;padding:.1rem .3rem;border-radius:99px;background:color-mix(in srgb,var(--c) 28%,transparent);color:var(--text);font-weight:700;font-size:.8rem}
.hboard .hdot small{font-weight:500;color:var(--muted)}
.hboard .hmiss{color:var(--line)}.hboard .hfut{color:transparent}
.hboard .hwk b.met{color:var(--ok)}.hboard .hwk small{color:var(--muted);margin-left:.3rem}
.hab-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:99px;background:var(--c);margin-right:.35rem;vertical-align:middle}
.notice.egress{border:1px solid rgba(0,229,255,.35);background:rgba(0,229,255,.06);border-radius:10px;padding:.5rem .7rem;font-size:.85rem;color:var(--text)}
.tbl.feeds input{width:100%;padding:.3rem .4rem;font-size:.8rem}.tbl.feeds .narrow{width:7rem}.tbl.feeds .feed-url{font-family:ui-monospace,monospace;font-size:.7rem;margin-top:.2rem}
.tbl.feeds .actions{white-space:nowrap}.tbl.feeds tr.off td{opacity:.55}

.badge.hv{margin-left:.35rem;font-size:.62rem}
.hv-consistent{background:rgba(0,230,118,.18);color:var(--ok)}.hv-on_track{background:var(--panel2);color:var(--muted)}
.hv-slipping{background:rgba(255,179,0,.18);color:var(--warn)}.hv-slacking{background:rgba(255,82,82,.2);color:var(--bad)}
.hv-fresh,.hv-idle{background:var(--panel2);color:var(--muted);opacity:.8}
.tone-stern{color:var(--bad)}.tone-warn{color:var(--warn)}.tone-praise{color:var(--ok)}
.card.habits-view.tone-stern{border-color:rgba(255,82,82,.45)}.card.habits-view.tone-praise{border-color:rgba(0,230,118,.35)}

/* ── playsets & events ─────────────────────────────────────────────── */
.evsign{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .55rem;border-radius:999px;
  border:1px solid var(--accent,#ff2d75);color:var(--accent,#ff2d75);text-decoration:none;font-size:.85rem;margin-left:.5rem}
.evsign b{font-size:1rem}
.event{display:flex;gap:.9rem;align-items:flex-start;padding:.8rem;border-radius:12px;margin:.5rem 0;
  border:1px solid color-mix(in srgb,var(--accent,#ff2d75) 45%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#ff2d75) 14%,transparent),transparent 60%)}
.event.in{border-color:var(--accent,#ff2d75)}
.event.ended{opacity:.6}
.ev-sign{font-size:2rem;line-height:1}
.ev-body{flex:1;min-width:0}
.ev-line{margin:.35rem 0;font-style:italic}
/* a Handler persona (#65): the event card's shape, without the event's colour */
.persona{padding:.7rem .8rem;border-radius:12px;margin:.5rem 0;border:1px solid var(--line,#333)}
.persona.in{border-color:var(--accent,#ff2d75)}
.badge-art{width:1.6em;height:1.6em;vertical-align:middle;object-fit:contain}
.tbl .badge-art{width:2.2em;height:2.2em}
/* The badge cabinet (badges.html): cards whose ART is the hero, a modest title, and a
   <dialog> with the full story. The art is 320 px square, so a card shows it at ~120 px
   and the dialog at up to 280; zoom lets it fill the screen. The ring colour is the
   rarity metal (the same five light stops as .rar-*, so the same drift caveat). */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.7rem;margin:.4rem 0}
.bcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;padding:.7rem .5rem .6rem;border-radius:14px;border:1px solid var(--line);background:linear-gradient(160deg,var(--panel2),transparent);transition:transform .12s,border-color .12s}
.bcard:hover,.bcard:focus-visible{transform:translateY(-2px);border-color:var(--rar)}
.bcard:focus-visible{outline:2px solid var(--rar);outline-offset:2px}
.bcard-art{width:100%;max-width:120px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rar) 22%,transparent) 0,transparent 70%)}
.bcard-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.bcard-emoji,.bd-emoji{font-size:3.4rem;line-height:1}
.bcard-title{font-size:.8rem;font-weight:700;line-height:1.2;color:var(--text)}
.bcard-sub{font-size:.68rem;color:var(--muted);line-height:1.2}
.bcard.off .bcard-art{filter:grayscale(1);opacity:.4}.bcard.off .bcard-title{color:var(--muted)}
.rarb-common{--rar:#969eaa}.rarb-uncommon{--rar:#aaceb0}.rarb-rare{--rar:#a0bee8}.rarb-epic{--rar:#c6a8e8}.rarb-legendary{--rar:#f4d68c}
.bdialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:1.2rem 1.1rem 1rem;border-radius:18px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.bdialog::backdrop{background:rgba(5,6,10,.72);backdrop-filter:blur(4px)}
.bd-close{position:absolute;top:.5rem;right:.5rem;width:36px;height:36px;border-radius:50%;border:0;background:var(--panel2);color:var(--text);cursor:pointer;font-size:1rem;z-index:1}
.bd{display:flex;flex-direction:column;align-items:center;text-align:center}
.bd-art{all:unset;cursor:zoom-in;width:min(280px,70vw);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rar) 28%,transparent) 0,transparent 70%)}
.bd-art:focus-visible{outline:2px solid var(--rar);outline-offset:4px}
.bd-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.bd-tip{margin:.1rem 0 .2rem;font-size:.7rem}
.bd-title{font-size:1.15rem;margin:.3rem 0 .35rem}
.bd-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;align-items:center;margin:0 0 .5rem}.bd-tags .rar{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.bd-detail{margin:.2rem 0 .5rem;font-weight:600}
.bd h4{margin:.5rem 0 .2rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bd .hint{margin:0 0 .4rem}
.bd-facts{display:grid;grid-template-columns:auto auto;gap:.15rem .8rem;margin:.4rem 0 0;font-size:.82rem}.bd-facts dt{color:var(--muted);text-align:right}.bd-facts dd{margin:0;text-align:left}
.bzoom{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(5,6,10,.94);cursor:zoom-out;padding:16px}
.bzoom img{width:min(92vw,92dvh,960px);height:auto;object-fit:contain}
form.inline{display:inline}

/* consent — the safeword bar, the grant rows */
.pausebar{border-color:rgba(255,82,82,.35)}.pausebar.paused{background:linear-gradient(180deg,rgba(255,82,82,.14),var(--bg2));border-color:rgba(255,82,82,.6)}
.pausebar form.inline{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.chip.paused{background:rgba(255,82,82,.18);border-color:rgba(255,82,82,.5);color:var(--bad);text-decoration:none}
.consent-row{border-top:1px solid var(--line)}.consent-row:first-child{border-top:0}
.consent-row .row{align-items:center;margin:.45rem 0}.consent-row .what{flex:1 1 260px}
.consent-row.on .what b{color:var(--ok)}
pre.preview{white-space:pre-wrap;font-size:.75rem;max-height:18rem;overflow:auto}
/* the bot token, shown once — selectable in one go, wraps on a phone */
.minted{border-color:rgba(255,193,7,.55)}
pre.token{white-space:pre-wrap;word-break:break-all;user-select:all;font-size:.85rem;padding:.5rem;border:1px dashed var(--line)}
/* the Pup ID: the header chip, the amber key banner, the recovery sheet, the trophy case */
.chip.pup{text-decoration:none;color:var(--text)}
.chip.moving{background:rgba(255,193,7,.14);border-color:rgba(255,193,7,.5);color:#ffc107;text-decoration:none}
.flash.warn{background:rgba(255,193,7,.12);color:#ffc107;border:1px solid rgba(255,193,7,.4)}
.flash.warn a{color:inherit}
.did{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;word-break:break-all}
.fp{font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;letter-spacing:.06em}
pre.sheet{white-space:pre-wrap;word-break:break-all;user-select:all;font-size:1rem;line-height:1.6;padding:.7rem;border:1px dashed rgba(255,193,7,.55)}
.paper{border-left:3px solid var(--line);padding:.4rem .7rem;margin:.5rem 0}
.paper .status{font-weight:600}
.carry{display:inline-flex;gap:.3rem;align-items:center}

/* ── /share (0.14): a phone tool ─────────────────────────────────────────────────────
   🔴 NOTHING ABOVE THE VIEWPORT MAY CHANGE HEIGHT WHILE YOU EDIT. Every slot, catalogue row
   and toolbar button has a FIXED height; an order badge toggles `visibility`, never
   `display`; state words swap with display inside a fixed box; and the panels opt out of
   scroll anchoring. A tap repaints text in place and the page under your thumb stays put.
   🔴 Every input is 16px: anything smaller and iOS zooms the page on focus. */
@media(max-width:820px){body.share .top{position:static}}   /* the wrapped nav was eating 200px of a phone */
.sp a,.sp button{touch-action:manipulation}
.sp input,.sp textarea{font-size:16px}
.sp-head{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"img actions" "presets presets" "nav nav";gap:.55rem .8rem;align-items:start;padding:.6rem 0 .2rem}
.sp-preview{grid-area:img;display:block;line-height:0}
.sp-preview img{height:300px;height:min(36svh,300px);width:auto;max-width:46vw;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:var(--bg2);display:block}
.sp-actions{grid-area:actions;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.sp-go{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:1.05rem;text-align:center}
.sp-go[aria-busy=true]{opacity:.65}
.sp-row2{display:flex;gap:.45rem}.sp-row2 button{flex:1;min-height:44px;white-space:nowrap;padding:.4rem .5rem;font-size:.9rem;min-width:0}
.sp-row2 .btn{min-height:44px;min-width:48px;display:flex;align-items:center;justify-content:center}
.sp-first{color:var(--muted);font-size:.85rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.sp-today{align-self:flex-start}
.sp-presets{grid-area:presets;min-width:0}
.sp-prow{display:flex;gap:.4rem;align-items:center;height:44px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
.sp-prow::-webkit-scrollbar{display:none}
.sp-prow .chip{flex:0 0 auto;height:38px;display:inline-flex;align-items:center;gap:.2rem;font:inherit;font-size:.82rem;font-weight:600;background:transparent;cursor:pointer}
.sp-prow .chip.on{background:var(--panel2);color:var(--text);border-color:var(--accent)}
.sp-prow .chip.starter{border-style:dashed}
.sp-prow .dot{font-style:normal;color:var(--warn)}
.sp-prow input{flex:1;min-width:0;height:38px}
.sp-nav{grid-area:nav;display:flex;height:44px;border-top:1px solid var(--line)}
.sp-nav a{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600;border-bottom:2px solid transparent}
.sp-nav a.on{color:var(--text);border-bottom-color:var(--accent);text-decoration:none}
.sp-panels{overflow-anchor:none;min-height:70vh}
.sp-panel{scroll-margin-top:calc(var(--sp-head-h,360px) + 8px)}
body.tabs .sp-panel{display:none}body.tabs .sp-panel.on{display:block}
.sp-panel h3 .more{font-size:.85rem}.sp-h4{margin:.9rem 0 .4rem;font-size:.92rem}
.sp-fits{margin-left:auto;font-weight:400;font-size:.82rem;color:var(--muted);min-width:4.5em;text-align:right}.sp-fits b{color:var(--text)}
@media(max-width:820px){
  .sp-head{position:sticky;top:0;z-index:4;margin:0 -1.2rem;padding:.6rem 1.2rem .1rem;background:rgba(11,13,20,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  body.share main{padding-top:0}
}
@media(min-width:821px){
  .sp{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:1.2rem;align-items:start}
  .sp-head{position:sticky;top:72px;grid-template-columns:minmax(0,1fr);grid-template-areas:"img" "actions" "presets" "nav"}
  .sp-preview img{height:auto;max-height:62vh;max-width:100%;margin:0 auto}
  .sp-foot{grid-column:2}
}
body.typing .sp-preview img{height:64px;max-height:64px}
/* ⚠️ :focus-within — the preset NAME input lives in .sp-presets; hiding the row it is typed in blurred it */
body.typing .sp-first,body.typing .sp-presets:not(:focus-within),body.typing .sp-today{display:none}
/* the slot grid: twelve fixed cells, `--cols` from the card (3 or 4) */
.sp-slots{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));grid-auto-rows:60px;gap:6px;margin:.4rem 0 .6rem}
.slot{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:3px 5px 3px 22px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);overflow:hidden;min-width:0;text-decoration:none!important;cursor:pointer}
.slot .n{position:absolute;left:4px;top:5px;width:15px;height:15px;border-radius:50%;background:var(--panel2);color:var(--muted);font-size:.6rem;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.slot .l{font-size:.74rem;font-weight:700;line-height:1.15;overflow:hidden;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.slot .v,.slot .w{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal}
.slot .w{display:none}
.slot.carried .v,.slot.furniture .v,.slot.unresolved .v{display:none}
.slot.carried .w,.slot.furniture .w,.slot.unresolved .w{display:block}
.slot .x{position:absolute;right:5px;top:3px;font-size:.72rem;color:var(--cyan);text-decoration:none;visibility:hidden}
.slot.span .x{visibility:visible}
.slot.drawn{border-color:rgba(124,77,255,.5)}.slot.drawn .n{background:var(--accent2);color:#fff}
.slot.carried{border-style:dashed;opacity:.75}.slot.furniture{opacity:.5}.slot.unresolved{opacity:.6}.slot.pending{opacity:.85}
.slot.empty{background:transparent;border-style:dashed;opacity:.3;cursor:default}
.slot.sel{outline:2px solid var(--accent);outline-offset:1px}
/* four columns on a phone leave ~70 px a cell: a smaller number badge buys the label its room */
.sp-slots[data-cols="4"] .slot{padding:3px 4px 3px 17px}
.sp-slots[data-cols="4"] .slot .n{left:2px;top:4px;width:13px;height:13px;font-size:.55rem}
.sp-slots[data-cols="4"] .slot .l{font-size:.7rem}
.sp-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:48px}
.sp-tools .btn{display:flex;align-items:center;justify-content:center;padding:0 .3rem;min-height:44px;font-size:.88rem}
.sp-tools .btn.off{opacity:.35;pointer-events:none}
.sp-reset{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.6rem 0}
.sp-reset .chip{min-height:36px;display:inline-flex;align-items:center}
/* the catalogue: "Label · value", two columns of fixed-height rows */
.sp-cat{margin:.5rem 0 0;border-top:1px solid var(--line);padding-top:.3rem}
.sp-cat>summary{cursor:pointer;font-weight:700;min-height:42px;display:flex;align-items:center;gap:.4rem}
.sp-cat>summary small{color:var(--muted);font-weight:400}
.sp-catgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding-bottom:.4rem}
.cat{display:flex;align-items:center;gap:6px;height:44px;padding:0 8px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:.8rem;min-width:0;overflow:hidden;white-space:nowrap;text-decoration:none!important;cursor:pointer}
.cat .n{flex:0 0 18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:.65rem;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;visibility:hidden}
.cat.on .n{visibility:visible}
.cat .l{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.cat .v{overflow:hidden;text-overflow:ellipsis;flex:1 1 0;min-width:0}.cat .v::before{content:"· "}
.cat.on{border-color:var(--accent);background:rgba(255,45,117,.12)}
.cat.off{opacity:.35;cursor:default}
/* the post */
#sp-text{min-height:9.5em}
.sp-meta{display:flex;gap:.6rem;align-items:center;min-height:2rem;margin:.3rem 0}
.sp-count.over{color:var(--warn)}
.sp-styles .chip,.sp-tags .chip{min-height:36px;display:inline-flex;align-items:center;gap:.25rem}
.sp-tags .chip b{font-weight:400;color:var(--muted)}
.sp-tags .chip.on{border-color:rgba(255,45,117,.5)}
.sp-inline{display:flex;gap:.4rem;align-items:center;margin:.4rem 0}.sp-inline input{flex:1;min-width:0}
.sp-warn{color:var(--warn);font-size:.85rem;margin:.3rem 0;padding-left:1.1rem}.sp-warn:empty{display:none}
.sp-copy{display:flex;gap:.6rem;align-items:flex-start;justify-content:space-between;margin:.4rem 0}
.sp-copy details{flex:1;min-width:0}.sp-copy summary{cursor:pointer;color:var(--muted);font-size:.85rem;min-height:44px;display:flex;align-items:center}
.sp-copy p{font-size:.85rem;margin:.3rem 0;word-wrap:break-word}
.sp-hints{padding-left:1.1rem;margin:.6rem 0}
.sp-tplfold{margin:.8rem 0 0;border-top:1px solid var(--line);padding-top:.5rem}.sp-tplfold summary{cursor:pointer;font-weight:600}
.sp-fields{margin:.4rem 0}.sp-fields .chip{font:inherit;font-size:.78rem;background:transparent;cursor:pointer;min-height:32px}
/* the look */
.sp-layouts{display:grid;gap:6px;margin:.3rem 0 .5rem}
.sp-lay{display:flex;flex-direction:column;padding:.5rem .8rem;border:1px solid var(--line);border-radius:12px;color:var(--text);min-height:52px;text-decoration:none!important}
.sp-lay small{color:var(--muted)}.sp-lay.on{border-color:var(--accent);background:rgba(255,45,117,.1)}
.sp .chips .chip{min-height:36px;display:inline-flex;align-items:center}
/* 44 px touch targets (the spec's floor) without taller pills: the hit area reaches past the
   visible edge. The preset row clips it to its own 44 px height, which is the same floor. */
.sp .chip,.sp button.small,.sp h3 .more,.sp-copy summary{position:relative}
.sp .chip::after,.sp button.small::after{content:"";position:absolute;inset:-5px -2px}
.sp h3 .more::after{content:"";position:absolute;inset:-12px -10px}
.sp button.small{min-height:34px}
.sp-manage{margin-top:1rem}.sp-manage summary{cursor:pointer;font-weight:600}
.sp-mlist{list-style:none;margin:.4rem 0;padding:0}
.sp-mlist li{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:.35rem 0;border-top:1px solid var(--line)}
.sp-mlist li .l{flex:1;min-width:8em}
.sp-foot{text-align:center}
/* a one-line status at the bottom of the screen (Handlr.toast) */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;max-width:min(92vw,440px);display:flex;gap:.8rem;align-items:center;background:rgba(28,34,51,.97);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:.6rem .9rem;box-shadow:var(--shadow);font-weight:600;font-size:.9rem}
/* the dashboard's 📤 Share Day N */
section.nudge{margin:0 0 .9rem}section.nudge .btn{display:block;text-align:center;margin-top:0}section.nudge .hint{text-align:center}


/* Leave it — a day's verdict, one chip (modules/leaveit) */
.vd{display:inline-block;padding:.05rem .45rem;border-radius:99px;font-size:.75rem;font-weight:700;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.vd.kept{color:var(--ok);border-color:rgba(0,230,118,.4)}.vd.over{color:var(--bad);border-color:rgba(255,82,82,.45)}
.vd.short{color:var(--warn);border-color:rgba(255,179,0,.45)}.vd.unconfirmed{color:var(--cyan);border-color:rgba(0,229,255,.35)}
.li-tally{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end}.li-tally input{max-width:7rem}
.li-n{width:5rem;min-width:0}
/* M9 · the Log grouped by day, the range picker, the chapter list */
.logday{margin:1rem 0 .2rem;padding-bottom:.25rem;border-bottom:1px solid var(--line);font-size:.85rem;letter-spacing:.02em}
.logday:first-child{margin-top:0}
details.range summary{cursor:pointer}
details.range .chips{margin:.6rem 0 0}
.chips form.inline{display:inline;margin:0}
.chips form.inline .chip{background:none;cursor:pointer;font-family:inherit}
/* 🛁 hygiene (core/hygiene.py) — the out state is loud, an overrun louder */
section.hygiene{margin:0 0 .9rem}section.hygiene form.row{align-items:center}
section.hygiene button.warn{background:rgba(255,193,7,.14);border-color:rgba(255,193,7,.5);color:var(--warn)}
section.hygiene.out{border-color:rgba(79,195,247,.55);background:linear-gradient(180deg,rgba(79,195,247,.12),var(--bg2))}
section.hygiene.overrun{border-color:rgba(255,193,7,.7);background:linear-gradient(180deg,rgba(255,193,7,.14),var(--bg2))}
/* M9 #54 · a chapter as a story */
.story{max-width:860px;margin:0 auto}
.story-hero{position:relative;border-radius:18px;overflow:hidden;margin-bottom:1rem;min-height:9rem;display:flex;align-items:flex-end;background:linear-gradient(135deg,rgba(255,45,117,.25),rgba(124,77,255,.25))}
.story-hero.has-cover{min-height:16rem}
.story-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.story-title{position:relative;padding:1.2rem 1.4rem}
.story-title h1{margin:.1rem 0 .2rem;font-size:clamp(1.6rem,5vw,2.6rem);line-height:1.1}
.story-title .eyebrow{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.story-when{margin:0;opacity:.9}
.foreword p{font-size:1.05rem;line-height:1.6;white-space:pre-line;margin:0}
.story-best{margin:-.4rem 0 1rem}
.story-days{margin-top:1rem}
.story-day h3{margin:0 0 .3rem;font-size:1.05rem}
.story-day .dayno{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:.4rem}
.story-line{margin:.2rem 0 .5rem;color:var(--text)}
.story-scores{display:flex;flex-wrap:wrap;gap:.35rem;margin:.3rem 0 .6rem}
.score-pill{font-size:.72rem;padding:.12rem .5rem;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.score-pill.sc-headspace{border-color:#00e5ff66}.score-pill.sc-obedience{border-color:#00e67666}.score-pill.sc-mood{border-color:#ff2d7566}.score-pill.sc-denial{border-color:#7c4dff66}.score-pill.sc-energy{border-color:#ffb30066}
.story-moments{list-style:none;padding:0;margin:.3rem 0 .6rem}
.story-moments li{padding:.15rem 0}
.story-entry{margin:.7rem 0;padding:.6rem .9rem;border-left:3px solid #7c4dff;background:var(--panel2);border-radius:0 10px 10px 0}
.story-entry.kind-checkin{border-left-color:#00e5ff}.story-entry.kind-confession{border-left-color:#ff2d75}
.story-entry cite,.story-note cite{display:block;font-style:normal;font-size:.72rem;color:var(--muted);margin-bottom:.25rem}
.story-entry p{margin:.2rem 0;line-height:1.55;white-space:pre-line}
.story-entry .story-prompt{font-style:italic;color:var(--muted)}
.story-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.4rem;margin:.6rem 0}
.story-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.story-note{margin:.7rem 0 0;padding:.6rem .9rem;border:1px dashed rgba(255,196,0,.45);border-radius:10px;background:rgba(255,196,0,.06)}
.story-note p{margin:0;white-space:pre-line;line-height:1.5}
.story-quiet{text-align:center;color:var(--muted);font-size:.85rem;margin:.6rem 0}
.story-foot{margin:1.5rem 0 2rem;text-align:center}
.story-day{scroll-margin-top:5rem}
/* M9 #55 · writing in a chapter */
.story-edit summary{cursor:pointer;margin:.3rem 0}
.story-edit textarea{width:100%;box-sizing:border-box;margin:.4rem 0}
.story-note .story-edit{margin-top:.3rem}
.story-note .story-edit form{margin:.3rem 0}
.add-note{margin-top:.6rem}
.cover-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem;margin-top:.5rem}
.cover-pick label{position:relative;display:block;cursor:pointer}
.cover-pick input{position:absolute;top:.35rem;left:.35rem}
.cover-pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;border:2px solid transparent}
.cover-pick input:checked+img{border-color:#ff2d75}
.cover-pick .cover-none span{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px dashed var(--line);border-radius:8px;font-size:.75rem;color:var(--muted);text-align:center;padding:.3rem}
.cover-pick p.row{grid-column:1/-1}
#any-day form.row{align-items:flex-start;flex-direction:column}

/* the chapter's goal (M10 #60): on the story page, the dashboard card */
.goal-want{font-size:1.15rem;margin:.25rem 0;font-style:italic}
.card.goal .eyebrow,.card.quest p:first-child{margin-bottom:.1rem}

/* your Handler's profile (#71): a form that stacks its fields; one post per row, its photo beside it */
form.stack{display:grid;gap:.6rem;margin:.4rem 0}
.post{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--line)}
.post:first-of-type{border-top:0}
.post>img{width:96px;height:96px;object-fit:cover;border-radius:10px;flex:none}
.post>form,.post>p{flex:1;min-width:0;margin:0}