/* Habits (/habits/): accent from the chosen theme (--hb, lime by default), light and dark from the site theme. */
#hb{--hb:#A3E635;--hb2:#65A30D;--hbtext:#0F0F11;--miss:rgba(248,113,113,.55);--fz:#8FC7FA;--rp:#FABF24;--hole:var(--line)}
.hb-main{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:14px;align-items:start}
.hb-top{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.hb-ring{width:140px;height:140px;position:relative;flex:none}
.hb-ring svg,.hb-tap svg{width:100%;height:100%;transform:rotate(-90deg);position:absolute;inset:0}
.hb-ring circle,.hb-tap circle{fill:none}.rb{stroke:var(--line)}.rf{stroke:var(--hb);stroke-linecap:round;transition:stroke-dasharray .5s}
.hb-ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}.hb-ring b{font:900 34px var(--disp)}.hb-ring small{font:12px var(--mono);color:var(--mute)}
#hb.perfect .hb-ring{animation:hbpop .6s ease}
@keyframes hbpop{50%{transform:scale(1.06)}}
.hb-top h2{font:900 26px/1.1 var(--disp);letter-spacing:-.02em;margin:0;text-transform:none;color:var(--bone)}
.hb-top p{margin:6px 0 0;color:var(--mute)}
.hb-list{list-style:none;margin:0;padding:0}
.hb-part{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:14px 0 6px}
.hb-row{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);margin:0 0 8px;background:var(--ev-chip)}
.hb-row.sel{border-color:var(--hb)}
.hb-name{display:flex;gap:10px;align-items:center;background:none;border:0;color:inherit;text-align:left;cursor:pointer;min-width:0;padding:4px 0;font:inherit}
.hb-name .em,.hb-dh .em{font-size:26px;line-height:1}
.hb-name b{display:block;font:800 17px/1.2 var(--disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-name small{display:block;font:12px var(--mono);color:var(--mute);margin-top:3px}
.hb-row.done .hb-name b{opacity:.75}
.hb-strip{display:flex;gap:3px}
.dd{width:24px;height:30px;border:0;font:700 10px var(--mono);cursor:pointer;color:var(--mute);background:var(--hole);padding:0}
.dd.on,.dd.clean{background:var(--hb);color:var(--hbtext)}.dd.miss{background:transparent;box-shadow:inset 0 0 0 2px var(--miss)}.dd.fz{background:var(--fz);color:#0F0F11}.dd.rp{background:var(--rp);color:#0F0F11}
.dd.slip{background:var(--miss);color:#fff}.dd.off,.dd.pre{opacity:.35}.dd.due{box-shadow:inset 0 0 0 2px var(--hb)}
.hb-tap{position:relative;width:60px;height:60px;border-radius:50%;border:3px solid var(--hb);background:transparent;color:var(--bone);font:900 20px var(--disp);cursor:pointer;display:grid;place-items:center;padding:0;justify-self:end}
.hb-tap:has(svg){border:0}
.hb-tap span{position:relative;z-index:1}
.hb-tap.on{background:var(--hb);color:var(--hbtext)}
.hb-tap.q{border-radius:0;width:auto;height:auto;min-height:44px;padding:6px 8px;font:700 12px var(--mono);border-width:1px;border-color:var(--edge)}
.hb-tap.q.on{background:var(--miss);color:#fff;border-color:transparent}
.hb-tap:active{transform:scale(.94)}
.hb-empty p{color:var(--mute)}
.hb-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.hb-count{font:12px var(--mono);color:var(--mute)}
.hb-res{border:1px solid var(--rp);padding:12px;margin:0 0 10px}.hb-res p{margin:0 0 10px;font-size:15px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hb-hint{color:var(--mute)}
.hb-dh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.hb-dh h3{font:900 24px/1.15 var(--disp);letter-spacing:-.02em;text-transform:none;color:var(--bone);margin:0}
.hb-freq{font:12px var(--mono);color:var(--mute);margin:6px 0 12px}
.hb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}.hb-stats div{border:1px solid var(--line);padding:8px}.hb-stats dt{font:10px var(--mono);text-transform:uppercase;color:var(--mute);letter-spacing:.05em}.hb-stats dd{margin:2px 0 0;font:900 24px var(--disp)}
.hb-qh{display:flex;justify-content:space-between;align-items:center;gap:8px}.hb-qh select{font:13px var(--mono);background:var(--ink);color:var(--bone);border:1px solid var(--edge);padding:6px;min-height:34px}
.quilt{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:2px;margin:6px 0 8px;aspect-ratio:53/7.6;width:100%}
.quilt i{background:var(--hole);cursor:pointer;min-width:0;min-height:0;position:relative}
.quilt .on{background:var(--hb)}.quilt .part{background:color-mix(in srgb,var(--hb) 45%,var(--hole))}.quilt .miss{background:transparent;box-shadow:inset 0 0 0 1px var(--miss)}.quilt .fz{background:var(--fz)}.quilt .rp{background:var(--rp)}
.quilt .slip{background:var(--miss)}.quilt .off{opacity:.45}.quilt .na{opacity:.18;cursor:default}.quilt .lk{opacity:.25;background:repeating-linear-gradient(45deg,var(--hole) 0 2px,transparent 2px 4px)}.quilt .due{box-shadow:inset 0 0 0 1px var(--hb)}
.quilt .cur{outline:2px solid var(--bone);outline-offset:0;z-index:1}.quilt .nt::after{content:"";position:absolute;right:0;top:0;width:35%;height:35%;background:var(--bone);opacity:.7}
.hb-legend{font:11px/1.8 var(--mono);color:var(--mute);margin:0 0 12px}.hb-legend i{display:inline-block;width:10px;height:10px;margin:0 4px 0 8px;vertical-align:-1px;background:var(--hole)}
.hb-legend .on{background:var(--hb)}.hb-legend .miss{box-shadow:inset 0 0 0 1px var(--miss);background:transparent}.hb-legend .fz{background:var(--fz)}.hb-legend .rp{background:var(--rp)}.hb-legend .slip{background:var(--miss)}.hb-legend .lk{opacity:.4}
.linkbtn{background:none;border:0;color:var(--bone);text-decoration:underline;font:inherit;cursor:pointer;padding:0}
.hb-day{border-top:1px solid var(--line);padding-top:10px}.hb-day .row{margin-bottom:10px}
.hb-day .amt{font:600 13px var(--mono);color:var(--mute);display:flex;align-items:center;gap:6px}.hb-day .amt input{width:110px;font:16px var(--disp);padding:8px;background:var(--ink);color:var(--bone);border:1px solid var(--edge);min-height:42px}
.note{display:flex;flex-direction:column;gap:6px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.note textarea,.hbf input,.hbf select{font:16px var(--disp);padding:10px;background:var(--ink);color:var(--bone);border:1px solid var(--edge);text-transform:none;letter-spacing:0}
.hb-side{position:sticky;top:76px}
.hb-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:14px}
.tdot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.ins{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}.ins div{border:1px solid var(--line);padding:10px}.ins dt{font:11px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}.ins dd{margin:4px 0 0;font-weight:800}
.hb-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--hb);color:var(--hbtext);font:800 15px var(--disp);padding:12px 18px;opacity:0;transition:opacity .3s,transform .3s;z-index:60;pointer-events:none;max-width:calc(100% - 32px)}
.hb-toast.on{opacity:1;transform:translate(-50%,0)}
dialog.hbf{max-width:520px;width:calc(100% - 24px);border:2px solid var(--hb);background:var(--ink2);color:var(--bone);padding:20px;max-height:calc(100vh - 24px)}
dialog.hbf::backdrop{background:rgba(5,4,15,.7)}
.hbf h2{font:900 26px var(--disp);margin:0 0 12px}
.hbf form{display:grid;gap:12px}.hbf label{display:flex;flex-direction:column;gap:5px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hbf .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hbf .three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.hbf .emos{display:flex;flex-wrap:wrap;gap:4px}.emo{font-size:20px;background:var(--ev-chip);border:1px solid var(--line);width:40px;height:40px;cursor:pointer}
.hbf .days{display:flex;flex-wrap:wrap;gap:6px}.hbf .days label{flex-direction:row;align-items:center;gap:4px;border:1px solid var(--line);padding:6px 8px;text-transform:none;font:600 13px var(--disp);color:var(--bone)}
.hbf [hidden]{display:none!important}
@media (max-width:900px){.hb-main{grid-template-columns:1fr}.hb-side{position:static}}
@media (max-width:520px){.hb-row{grid-template-columns:minmax(0,1fr) 60px;grid-template-areas:"n t" "s s"}.hb-name{grid-area:n}.hb-tap{grid-area:t}.hb-strip{grid-area:s}.dd{flex:1;width:auto}.hb-stats{grid-template-columns:repeat(2,1fr)}.hb-ring{width:110px;height:110px}.hb-ring b{font-size:28px}.hbf .three{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.rf,.hb-toast{transition:none}#hb.perfect .hb-ring{animation:none}}