: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)}
.top nav{display:flex;gap:.2rem;flex-wrap:wrap}.top nav a{color:var(--muted);padding:.35rem .7rem;border-radius:9px;font-weight:500}
.top nav a.on,.top nav a:hover{color:var(--text);background:var(--panel);text-decoration:none}
.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}
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)}
.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 */
.sharecard{max-width:100%;max-height:62vh;width:auto;display:block;margin:0 auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
.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}
.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, per-activity strips ──────
   🔴 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)}

/* 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}

/* per-activity heat strips */
.strip{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.strip-name{flex:0 0 8.5rem;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.35rem}
.strip-name span{font-size:.95rem}
.heat.act i{background:var(--panel2)}
.heat.act i.l1{background:var(--c);opacity:.36}
.heat.act i.l2{background:var(--c);opacity:.66}
.heat.act i.l3{background:var(--c);opacity:1}
.heat.act i.late{outline:1px solid var(--text);outline-offset:-1px}
.heat.act i.fut{opacity:.12}

/* 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}
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)}
.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}
.badge-art{width:1.6em;height:1.6em;vertical-align:middle;object-fit:contain}
.tbl .badge-art{width:2.2em;height:2.2em}
form.inline{display:inline}