/* Hot tub module styles. Rules below the token block are carried over from
   the Cedar Tub Logbook v22 and scoped to .tubx so they cannot leak into the
   rest of DuoDomo. v22's own variable names are mapped onto --dd-* tokens. */
.tubx{--bg:var(--dd-canvas);--surface:var(--dd-surface);--sunk:#E8ECEF;--line:var(--dd-line);
  --fg:var(--dd-ink);--muted:var(--dd-ink-muted);--cedar:#8A4426;--cedar-soft:#F3E3DA;
  --water:var(--dd-teal);--water-soft:var(--dd-teal-tint);
  --ok:var(--dd-success);--ok-soft:var(--dd-success-bg);--warn:var(--dd-warning);--warn-soft:var(--dd-warning-bg);
  --bad:var(--dd-danger);--bad-soft:var(--dd-danger-bg);
  --display:var(--dd-display);--body:var(--dd-ui);--mono:ui-monospace,Menlo,monospace}
.tubx :root{
  --bg:#f3f5f4; --surface:#ffffff; --sunk:#e8ecea; --line:#d3dad7;
  --fg:#1d2624; --muted:#5b6865;
  --cedar:#9a4a2b; --cedar-soft:#f3e3da;
  --water:#1f6f78; --water-soft:#dceeee;
  --ok:#2f7a45; --ok-soft:#e1f1e5; --warn:#a2650a; --warn-soft:#f8ecd6; --bad:#b0322b; --bad-soft:#f8e0de;
  --display:"Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}
.tubx .mono,.tubx .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tubx .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tubx .chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.82rem;background:var(--sunk);color:var(--fg);border:1px solid var(--line)}
.tubx .chip.cedar{background:var(--cedar-soft);border-color:transparent;color:var(--cedar)}
.tubx .chip.water{background:var(--water-soft);border-color:transparent;color:var(--water)}
.tubx .callout{border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.tubx .callout.warn{background:var(--warn-soft)}
.tubx .callout.info{background:var(--water-soft)}
.tubx .callout.cedar{background:var(--cedar-soft)}
.tubx .callout ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.tubx .callout strong{font-weight:700}
.tubx .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tubx .fact{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tubx .fact b{font-family:var(--mono);font-size:1.05rem;font-weight:500}
.tubx .fact span{font-size:.82rem;color:var(--muted)}
.tubx .progress{display:flex;align-items:center;gap:12px}
.tubx .bar{flex:1;height:8px;background:var(--sunk);border-radius:99px;overflow:hidden}
.tubx .bar i{display:block;height:100%;background:var(--water);width:0;transition:width .3s}
.tubx .phase{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tubx .phase>header{display:flex;gap:12px;align-items:baseline;padding:14px 16px;border-bottom:1px solid var(--line)}
.tubx .phase>header .n{font-family:var(--mono);color:var(--cedar);font-weight:500;min-width:1.6em}
.tubx .phase>header .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tubx .phase>header .time{font-size:.82rem;color:var(--muted)}
.tubx .phase .done-count{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.tubx .steps{list-style:none;margin:0;padding:0}
.tubx .step{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--line);align-items:flex-start}
.tubx .step:first-child{border-top:0}
.tubx .step input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--water)}
.tubx .step .steplinks{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 14px;padding-left:34px;font-size:.9rem}
.tubx .step .timerbox{flex-basis:100%;padding-left:34px}
.tubx .step{flex-wrap:wrap}
.tubx .step label{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.tubx .step .what{font-weight:700}
.tubx .step .why{color:var(--muted);font-size:.92rem}
.tubx .step.checked .what{text-decoration:line-through;text-decoration-color:var(--muted);color:var(--muted)}
.tubx .step .ttag{display:inline-block;font:500 .7rem var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;border-radius:4px;margin-right:6px;vertical-align:2px}
.tubx .ttag.stop{background:var(--bad-soft);color:var(--bad)}
.tubx .ttag.opt{background:var(--sunk);color:var(--muted)}
.tubx .ttag.timer{background:var(--water-soft);color:var(--water)}
.tubx .timerbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.tubx .timerbox .clock{font:500 1.1rem var(--mono)}
.tubx .tpill{display:inline-block;padding:1px 7px;border-radius:999px;font:500 .8rem var(--mono)}
.tubx .tpill.ok{background:var(--ok-soft);color:var(--ok)}
.tubx .tpill.warn{background:var(--warn-soft);color:var(--warn)}
.tubx .tpill.bad{background:var(--bad-soft);color:var(--bad)}
.tubx .tpill.none{color:var(--muted)}
.tubx .tkv{display:grid;grid-template-columns:minmax(110px,30%) 1fr;gap:0}
.tubx .tkv>div{padding:8px 0;border-bottom:1px solid var(--line)}
.tubx .tkv>div:nth-child(odd){color:var(--muted);font-size:.88rem;padding-right:10px}
.tubx .tkv>div:nth-last-child(-n+2){border-bottom:0}
.tubx details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.tubx details summary{cursor:pointer;font-weight:700;font-family:var(--display)}
.tubx details[open] summary{margin-bottom:8px}
.tubx .note{font-size:.85rem;color:var(--muted)}
.tubx .shop{display:flex;flex-direction:column;gap:0}
.tubx .shop .row{display:grid;grid-template-columns:1fr;gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.tubx .shop .row:first-of-type{border-top:0}
.tubx .shop .item{font-weight:700}
.tubx .shop .qty{font:500 .8rem var(--mono);color:var(--cedar)}
.tubx .shop .links{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:.92rem}
.tubx .shop .pick{font-size:.92rem}
.tubx .shopwrap{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.tubx .shopwrap summary{font-size:1.05rem}
.tubx details.phase>summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:14px 16px}
.tubx details.phase>summary::-webkit-details-marker{display:none}
.tubx details.phase[open]>summary{border-bottom:1px solid var(--line)}
.tubx details.phase>summary .n{font-family:var(--mono);color:var(--cedar);font-weight:500;min-width:1.4em;padding-top:2px}
.tubx details.phase>summary .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tubx details.phase>summary .when{font-size:.8rem;color:var(--muted)}
.tubx details.phase>summary::after{content:"▸";color:var(--muted);transition:transform .2s;padding-top:2px}
.tubx details.phase[open]>summary::after{transform:rotate(90deg)}
.tubx .mix{display:flex;flex-wrap:wrap;gap:6px}
.tubx .tpill.work{background:var(--water-soft);color:var(--water)}
.tubx .tpill.waitp{background:var(--sunk);color:var(--muted);border:1px dashed var(--line)}
.tubx .tpill.drive{background:var(--cedar-soft);color:var(--cedar)}
.tubx .minibar,.tubx .dp-bar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--sunk);max-width:320px}
.tubx .minibar i,.tubx .dp-bar i{display:block;height:100%}
.tubx i.work{background:var(--water)}
.tubx i.wait{background:repeating-linear-gradient(45deg,var(--line) 0 3px,var(--sunk) 3px 6px)}
.tubx i.drive{background:var(--cedar)}
.tubx .done-count.all{color:var(--ok)}
.tubx .phnote{margin:0;padding:10px 16px;font-size:.9rem;color:var(--muted);background:var(--sunk)}
.tubx .dayplan{gap:12px}
.tubx .dp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tubx .dp-btns{display:flex;gap:6px}
.tubx .dp-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.tubx .dp-strip{display:flex;gap:3px;align-items:flex-end}
.tubx .dp-seg{display:flex;flex-direction:column;gap:3px;min-width:0}
.tubx .dp-seg .dp-n{font:500 .7rem var(--mono);color:var(--muted);text-align:center}
.tubx .dp-seg .dp-bar{height:14px;max-width:none;border-radius:3px}
.tubx .dp-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.tubx .lg{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:5px;vertical-align:1px}
.tubx .lg.work{background:var(--water)}
.tubx .lg.wait{background:repeating-linear-gradient(45deg,var(--line) 0 3px,var(--sunk) 3px 6px)}
.tubx .lg.drive{background:var(--cedar)}
.tubx details.tcard.power>summary{cursor:pointer;list-style:none}
.tubx details.tcard.power>summary::-webkit-details-marker{display:none}
.tubx details.tcard.power>summary h2{display:inline}
.tubx details.tcard.power>summary::before{content:"▸ ";color:var(--muted)}
.tubx details.tcard.power[open]>summary::before{content:"▾ "}
.tubx .power-grid{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start}
.tubx .power-grid svg{width:120px;height:auto}
.tubx .power-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.tubx .rules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
@media (max-width:480px){.tubx .power-grid{grid-template-columns:1fr}.tubx .power-grid svg{width:100px}}
.tubx .cleaners table th[scope=row]{font:600 .8rem var(--body);text-transform:none;letter-spacing:0;color:var(--muted);white-space:nowrap}
.tubx .musts{background:var(--warn-soft);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:6px}
.tubx .musts ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px;font-size:.95rem}
.tubx .nextup{background:var(--surface);border:2px solid var(--water);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.tubx .nextup h3{font-size:1.15rem}
.tubx .nextup p{color:var(--muted);font-size:.92rem}
.tubx .nx-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.tubx .nx-btns .btn{min-height:44px;padding-inline:18px}
.tubx details.phase>summary{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:start}
.tubx details.phase>summary::after{content:none!important}
.tubx details.phase>summary .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cedar-soft);color:var(--cedar);font-size:.85rem;padding:0;min-width:0}
.tubx details.phase.complete>summary .n{background:var(--ok-soft);color:var(--ok)}
.tubx details.phase.complete>summary h3{color:var(--muted)}
.tubx details.phase>summary .done-count{grid-column:3;grid-row:1;font-size:.8rem;white-space:nowrap;padding-top:4px}
.tubx details.phase>summary .done-count::after{content:" ▸";color:var(--muted)}
.tubx details.phase[open]>summary .done-count::after{content:" ▾"}
.tubx details.phase>summary .when{white-space:normal}
.tubx .step input{width:26px;height:26px}
.tubx .step{padding:14px 16px}
.tubx .refhead{margin-top:8px}
.tubx .refs{display:flex;flex-direction:column;gap:10px}
.tubx details.ref{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0}
.tubx details.ref>summary{list-style:none;cursor:pointer;padding:14px 44px 14px 16px;position:relative;display:flex;flex-direction:column;gap:2px}
.tubx details.ref>summary::-webkit-details-marker{display:none}
.tubx details.ref>summary::after{content:"▸";position:absolute;right:16px;top:16px;color:var(--muted);transition:transform .2s}
.tubx details.ref[open]>summary::after{transform:rotate(90deg)}
.tubx details.ref[open]>summary{border-bottom:1px solid var(--line)}
.tubx .ref-t{font:600 1.02rem var(--display)}
.tubx .ref-s{font-size:.86rem;color:var(--muted)}
.tubx .ref-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.tubx .ref-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.tubx .compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.tubx .cmp{border:1px solid var(--line);border-top:4px solid var(--water);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.tubx .cmp.filt{border-top-color:var(--cedar)}
.tubx .cmp dl{margin:0;display:grid;grid-template-columns:78px 1fr;gap:6px 10px;font-size:.92rem}
.tubx .cmp dt{color:var(--muted);font-size:.8rem;padding-top:2px}
.tubx .cmp dd{margin:0}
.tubx .dp-strip{position:relative}
.tubx .dp-now{position:absolute;top:0;bottom:-4px;width:2px;background:var(--bad);border-radius:1px}
.tubx .dp-now::after{content:"now";position:absolute;top:-2px;left:4px;font:500 .65rem var(--mono);color:var(--bad)}
.tubx .timerbar{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--fg);color:var(--bg);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:16px;overflow-x:auto}
.tubx .tb-item{display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.tubx .tb-clock{font-size:1.1rem}
.tubx .tb-label{font-size:.85rem;opacity:.8;max-width:60vw;overflow:hidden;text-overflow:ellipsis}
.tubx .dur{white-space:nowrap}
.tubx .dp-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.tubx .dp-inputs input{min-height:44px;font-size:1rem}
.tubx .dp-warn{background:var(--warn-soft);color:var(--fg);border-radius:10px;padding:10px 12px;font-size:.92rem;display:flex;flex-direction:column;gap:4px}
html.sun .tubx{--bg:#ffffff;--surface:#ffffff;--sunk:#eef0ef;--line:#4a5250;--fg:#000000;--muted:#1f2624;
  --cedar:#7a2e12;--cedar-soft:#f6dccd;--water:#0a4f57;--water-soft:#cfe9ea;
  --ok:#145c2b;--ok-soft:#cdebd5;--warn:#6b3f00;--warn-soft:#ffe7b3;--bad:#9a1b14;--bad-soft:#fbd3cf;color-scheme:light}
html.sun .tubx .why,html.sun .tubx .note,html.sun .tubx .ref-s,html.sun .tubx .phnote{color:#1f2624}
html.sun .tubx .phase,html.sun .tubx details.ref,html.sun .tubx .tcard,html.sun .tubx .fact,html.sun .tubx .nextup{border-width:2px}
html.sun .tubx .step input{width:30px;height:30px}
html.sun .tubx .btn{border-width:2px;min-height:44px}
html.sun .tubx i.wait,html.sun .tubx .lg.wait{background:repeating-linear-gradient(45deg,#4a5250 0 3px,#fff 3px 6px)}
.tubx i.night,.tubx .tpill.night{background:repeating-linear-gradient(90deg,var(--muted) 0 2px,transparent 2px 6px)}
.tubx .tpill.night{background:var(--sunk);color:var(--fg);border:1px solid var(--line)}
.tubx .dp-night .dp-n{font-style:italic}
.tubx .overview{gap:10px}
.tubx details.overview-acc{border-left:4px solid var(--cedar)}
.tubx .ov{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.tubx .ov ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.tubx .calc{background:var(--sunk);border-radius:8px;padding:10px 12px;font-size:.9rem;display:flex;flex-direction:column;gap:4px}
.tubx .howfig{margin:0;display:flex;flex-direction:column;gap:8px}
.tubx .howfig svg{width:100%;height:auto;max-width:720px;color:var(--fg)}
.tubx .how-lid{fill:var(--water);opacity:.5;stroke:currentColor;stroke-width:1.5}
.tubx .how-light{fill:var(--ok)}
.tubx .how-disp{fill:var(--sunk);stroke:currentColor;stroke-width:1}
.tubx .how-mono{font:600 12px var(--mono);fill:currentColor}
.tubx .how-spin.slow{animation-duration:2.4s}
.tubx .how-tall{display:none;max-width:420px!important}
@media (max-width:600px){.tubx .how-wide{display:none}.tubx .how-tall{display:block}}
.tubx .howfig figcaption{font-size:.86rem;color:var(--muted)}
.tubx .how-t{font:600 13px var(--display);fill:currentColor}
.tubx .how-s{font:12px var(--body);fill:currentColor;opacity:.75}
.tubx .how-water{fill:var(--water);opacity:.22}
.tubx .how-box{fill:var(--surface);stroke:currentColor;stroke-width:2}
.tubx .how-pipe{stroke:var(--water);stroke-width:10;stroke-linejoin:round;opacity:.35}
.tubx .how-flow{stroke:var(--water);stroke-width:4;stroke-dasharray:6 14;stroke-linejoin:round;animation:howflow 1.6s linear infinite}
.tubx .how-coil{stroke:var(--warn);stroke-width:3}
.tubx .how-gas{animation:howflow 2.4s linear infinite}
.tubx .how-spin{animation:howspin 1.2s linear infinite}
@keyframes howflow{to{stroke-dashoffset:-40}}
@keyframes howspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.tubx .how-flow,.tubx .how-gas,.tubx .how-spin{animation:none}}

/* ---------------------------------------------------------------------
   Hot tub module — components written for DuoDomo (not from v22).
   Designed at 390px first. Dialog pieces are not under .tubx because
   dialogs are appended to <body>; they carry their own tub* names.
   --------------------------------------------------------------------- */
.msg.amber{background:var(--dd-warning-bg);color:var(--dd-warning);border-left:3px solid var(--dd-warning)}
.linkbtn.danger,.btn.danger{color:var(--dd-danger)}
.tubx h2{font-size:20px}
.tubx h3{font-size:15px;margin:0}
.tubx .card h3{margin-bottom:0}
.tubhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.tubnav{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px 14px;padding:2px;scrollbar-width:none}
.tubnav::-webkit-scrollbar{display:none}
.tubnav button,.tubrange button{flex:0 0 auto;border:1px solid var(--dd-line);background:var(--dd-surface);color:var(--dd-ink);
  border-radius:999px;padding:9px 15px;font:600 14px var(--dd-ui);min-height:40px;cursor:pointer}
.tubnav button.on,.tubrange button.on{background:var(--dd-navy);border-color:var(--dd-navy);color:#fff}
.tubrange{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tubrange button{padding:7px 12px;min-height:36px;font-size:13px}
.tubrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tubrow.sp{justify-content:space-between;margin-bottom:10px}
.tubsmall{font-size:12.5px}
.tubmsg{margin:0 0 10px}
.tubfoot{margin:6px 0 20px}

.tubgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tubval{border:1px solid var(--dd-line);border-left:5px solid var(--dd-line);border-radius:var(--dd-r);padding:9px 10px;background:var(--dd-surface)}
.tubval.ok{border-left-color:var(--dd-success)} .tubval.warn{border-left-color:#C98A12} .tubval.bad{border-left-color:var(--dd-danger)}
.tubval .k{font-size:12px;color:var(--dd-ink-muted);font-weight:600}
.tubval .v{font:700 26px/1.15 var(--dd-display);color:var(--dd-ink)}
.tubval .v small{font:500 12px var(--dd-ui);color:var(--dd-ink-muted);margin-left:3px}
.tubval .w{font-size:12.5px;line-height:1.3;margin-top:2px}
.tubval.bad .w{color:var(--dd-danger);font-weight:600} .tubval.warn .w{color:var(--dd-warning)}
.tubcallout{border-radius:var(--dd-r);padding:10px 12px;margin-top:10px;font-size:13.5px;line-height:1.4}
.tubcallout.ok{background:var(--dd-success-bg)} .tubcallout.warn{background:var(--dd-warning-bg)}
.tubcallout.bad{background:var(--dd-danger-bg)} .tubcallout.info{background:var(--dd-info-bg)}
.tubstatus .muted.tubsmall{margin-top:10px}

.tubactions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.tubact{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--dd-line);
  background:var(--dd-surface);border-radius:var(--dd-r-lg);padding:12px;min-height:84px;cursor:pointer;color:var(--dd-ink);font:inherit}
.tubact span{font-size:22px;line-height:1}
.tubact b{font:600 15px var(--dd-ui)} .tubact i{font-style:normal;font-size:12px;color:var(--dd-ink-muted)}
.tubact.primary{background:var(--dd-teal);border-color:var(--dd-teal);color:#fff}
.tubact.primary i{color:#DCF0F0}

.tubtask{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--dd-line)}
.tubtask:first-of-type{border-top:0}
.tubtask .tt{grid-column:1/-1;min-width:0}
.tubtask .tb{display:flex;gap:6px;justify-content:flex-end}
.tubtask .tb .btn{min-height:40px}
@media (min-width:600px){.tubtask{grid-template-columns:1fr auto auto}.tubtask .tt{grid-column:auto}}
.tubhow{margin-top:10px}
.tubhow summary{font-weight:600;cursor:pointer;color:var(--dd-teal-deep)}
.tubhow ol{padding-left:20px;margin:8px 0;display:flex;flex-direction:column;gap:4px;font-size:14px}

.tubchart .tubsvg{width:100%;height:auto;display:block;margin:2px 0 6px}
.tubsvg .bz.ok{fill:var(--dd-success);opacity:.13} .tubsvg .bz.warn{fill:#E0A526;opacity:.16} .tubsvg .bz.bad{fill:var(--dd-danger);opacity:.12}
.tubsvg .ax{font:10px var(--dd-ui);fill:var(--dd-ink-muted)}
.tubsvg .axl{stroke:var(--dd-line);stroke-width:1}
.tubsvg .ln{fill:none;stroke:var(--dd-navy);stroke-width:2;stroke-linejoin:round}
.tubsvg .ln.tc{stroke:var(--dd-ink-muted);stroke-dasharray:4 3;stroke-width:1.5}
.tubsvg .pt{fill:var(--dd-navy);stroke:#fff;stroke-width:1.2}
.tubsvg .pt.hollow{fill:#fff;stroke:var(--dd-navy);stroke-width:1.6}
.tubsvg .mk.reset line{stroke:var(--dd-teal);stroke-width:2;stroke-dasharray:3 3}
.tubsvg .mk.dose circle{fill:var(--dd-teal)} .tubsvg .mk.ev circle{fill:#9AA6AC}
.tubsvg .hs polyline{fill:none;stroke-width:1.6} .tubsvg .hs circle{stroke:#fff;stroke-width:1}
.tubsvg .hs.ok polyline{stroke:var(--dd-success)} .tubsvg .hs.ok circle{fill:var(--dd-success)}
.tubsvg .hs.warn polyline{stroke:#C98A12} .tubsvg .hs.warn circle{fill:#C98A12}
.tubsvg .hs.bad polyline{stroke:var(--dd-danger)} .tubsvg .hs.bad circle{fill:var(--dd-danger)}
.tublegend{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--dd-ink-muted)}
.tublegend i{display:inline-block;vertical-align:-1px;margin-right:5px}
.tublegend .lz{width:14px;height:10px;border-radius:2px} .lz.ok{background:#CFE5D8} .lz.warn{background:#F6E4BD} .lz.bad{background:#F2D1CD}
.tublegend .lp{width:9px;height:9px;border-radius:50%;background:var(--dd-navy)} .tublegend .lp.hollow{background:#fff;border:1.6px solid var(--dd-navy)}
.tublegend .lm{width:9px;height:9px;border-radius:50%} .lm.reset{width:2px;height:12px;border-radius:0;background:var(--dd-teal)}
.lm.dose{background:var(--dd-teal)} .lm.ev{background:#9AA6AC}

.tublog{list-style:none;margin:0;padding:0}
.tubmonth{font:600 12px var(--dd-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--dd-ink-muted);margin:16px 0 6px}
.tubli{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:10px 12px;background:var(--dd-surface);border:1px solid var(--dd-line);
  border-radius:var(--dd-r);margin-bottom:6px}
.tubli.reset{border-left:4px solid var(--dd-teal)}
.tubli .when{font-size:12px;color:var(--dd-ink-muted);line-height:1.3}
.tubli .det{font-size:13px;margin-top:3px;line-height:1.4}
.tubli .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tubli .acts{display:flex;gap:14px;margin-top:6px}
@media (max-width:420px){.tubli{grid-template-columns:1fr;gap:2px}}
.tubchip{font:600 12px var(--dd-ui);padding:3px 8px;border-radius:999px;background:var(--dd-canvas);border:1px solid var(--dd-line)}
.tubchip.ok{background:var(--dd-success-bg);border-color:#BFDCCB} .tubchip.warn{background:var(--dd-warning-bg);border-color:#EBD3A0}
.tubchip.bad{background:var(--dd-danger-bg);border-color:#E9C0BA;color:var(--dd-danger)}

.tubtimers{position:sticky;bottom:10px;z-index:5;display:flex;flex-direction:column;gap:4px;background:var(--dd-navy);color:#fff;
  border-radius:var(--dd-r-lg);padding:10px 14px;margin-top:12px;font-size:14px;box-shadow:var(--dd-shadow)}
.tubtimers b{font:700 16px ui-monospace,Menlo,monospace;margin-right:6px}

/* dialogs */
.tubtips{padding-left:20px;margin:6px 0 12px;display:flex;flex-direction:column;gap:5px;font-size:14px}
.tubbig{min-height:54px;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tubconfirm{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.tubconfirm .crow{display:grid;grid-template-columns:26px 1fr 96px;gap:8px;align-items:center;padding:6px 8px;border-radius:var(--dd-r);
  border:1px solid var(--dd-line);border-left:5px solid var(--dd-line)}
.tubconfirm .crow.ok{border-left-color:var(--dd-success)} .tubconfirm .crow.warn{border-left-color:#C98A12} .tubconfirm .crow.bad{border-left-color:var(--dd-danger)}
.tubconfirm label{font-weight:600;font-size:14px;line-height:1.2}
.tubconfirm label small{display:block;font-weight:400;font-size:11.5px;color:var(--dd-ink-muted)}
.tubconfirm input{font-size:17px;text-align:right;padding:8px}
.tubconfirm .ci{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-weight:700;font-size:13px}
.ci.ok{background:var(--dd-success-bg);color:var(--dd-success)} .ci.warn{background:var(--dd-warning-bg);color:var(--dd-warning)}
.ci.none{background:var(--dd-canvas);color:var(--dd-ink-muted)}

/* Sun mode: everything bigger and higher contrast, for a phone in direct sunlight. */
html.sun body{background:#fff;color:#000;font-size:17px}
html.sun .muted,html.sun .tubval .k,html.sun .tubli .when,html.sun .tubsmall{color:#1f2624!important}
html.sun .card,html.sun .tubval,html.sun .tubli,html.sun .tubact,html.sun .tubnav button{border-width:2px;border-color:#4a5250}
html.sun .tubval .v{font-size:30px}
html.sun .btn{min-height:46px;font-size:16px}
html.sun .tubact.primary{background:#063f3f}
html.sun .tubsvg .ln{stroke-width:3} html.sun .tubsvg .pt{r:4.5}
html.sun .step input{width:30px;height:30px}
.tubtimers[hidden]{display:none!important}
.tubtask .pill{justify-self:start}
.tubconfirm label,.tubconfirm label small{text-transform:none;letter-spacing:0;color:var(--dd-ink)}
.tubconfirm label small{color:var(--dd-ink-muted)}
.tubx .dayplan h2{margin-bottom:8px}
.tubx .tcard{background:var(--dd-surface);border:1px solid var(--dd-line);border-radius:var(--dd-r-lg);padding:14px 16px;margin-bottom:12px}