/* A tactile, accessible illustration of reusable value. */
.value-calculator #usage-label{display:block;text-align:center;font-size:15px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.usage-dial{position:relative;max-width:360px;margin:0 auto;border-radius:18px}
#usage-dial-surface{display:block;width:100%;height:auto;overflow:visible;touch-action:none;cursor:grab;user-select:none}
.usage-dial.is-dragging #usage-dial-surface{cursor:grabbing}
.dial-wash{fill:var(--page-glow,#f7d5e5);opacity:.25}
.dial-track,.dial-progress{fill:none;stroke-width:16;stroke-linecap:round}
.dial-track{stroke:var(--page-glow,#f7d5e5)}
.dial-progress{stroke:var(--theme-strong,#783957);stroke-dasharray:100 100;stroke-dashoffset:51.8;transition:stroke-dashoffset .3s cubic-bezier(.22,1,.36,1)}
.dial-ticks{fill:none;stroke:var(--theme-strong,#783957);stroke-width:2;stroke-linecap:round;opacity:.35}
.dial-thumb{transform:translate(172px,36.2px);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.dial-thumb>circle{fill:white;stroke:var(--theme-strong,#783957);stroke-width:2;filter:drop-shadow(0 3px 5px #0002)}
.dial-paw{fill:var(--theme-strong,#783957)}
#usage-dial-surface text{fill:var(--muted);font-size:12px}
.dial-count{position:absolute;top:48%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.dial-count output{font-size:clamp(36px,5vw,48px);line-height:1.1;letter-spacing:-1.5px;font-weight:600;color:var(--theme-strong,#783957);font-variant-numeric:tabular-nums}
.dial-count span{font-size:13px;color:var(--muted);margin-top:6px;white-space:nowrap}
.value-calculator #value-uses{width:100%;padding:0;accent-color:var(--theme-strong,#783957)}
.usage-dial.is-enhanced #value-uses{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;left:50%;top:55%;pointer-events:none}
.usage-dial:has(#value-uses:focus-visible){outline:3px solid var(--theme-strong,#783957);outline-offset:5px}
.usage-dial.is-dragging .dial-thumb,.usage-dial.is-dragging .dial-progress{transition:none}
.usage-adjust{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 16px}
.usage-adjust button{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);background:white;color:var(--theme-strong,#783957);font:inherit;font-size:24px;cursor:pointer;transition:transform .2s,background .2s}
.usage-adjust button:hover:not(:disabled){background:var(--page-tint,#fff3f8);transform:scale(1.06)}
.usage-adjust button:disabled{opacity:.4;cursor:default}
#usage-help{font-size:12px;line-height:1.5;text-align:center;color:var(--ink);margin:0}
#usage-help span{font-size:11px;color:var(--muted)}
.usage-presets{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.usage-presets button{font:inherit;font-size:12px;min-height:40px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:white;color:var(--theme-strong,#783957);cursor:pointer;transition:background .2s,color .2s}
.usage-presets button[aria-pressed=true]{color:white;background:var(--theme-strong,#783957);border-color:var(--theme-strong,#783957)}
.usage-presets button:focus-visible,.usage-adjust button:focus-visible{outline:2px solid var(--theme-strong,#783957);outline-offset:3px}
.everyday-value-panel .value-result{text-align:center;border-top:1px solid var(--line);padding-top:20px}
.everyday-value-panel #value-calculation{text-align:center}
.care-topics{margin-top:22px;display:grid;gap:20px}
.care-topics>section{display:flex;gap:12px;align-items:flex-start}
.care-topic-icon{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--page-glow,#f7d5e5);color:var(--theme-strong,#783957);border-radius:50%;margin-top:3px}
.care-topics h3{font-size:16px;line-height:1.4;letter-spacing:-.2px;margin:0 0 7px}
.care-topics p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.drying-care-panel .care-source{margin-top:20px}
@media(max-width:800px){.value-calculator #usage-label{font-size:14px}.usage-presets button{padding-inline:12px}.care-topics{gap:18px}.usage-adjust{gap:6px}.dial-count output{font-size:40px}}
@media(prefers-reduced-motion:reduce){.dial-thumb,.dial-progress,.usage-adjust button,.usage-presets button{transition:none}}