/* ShredRoster prototype: the weight trend chart (/assets/chart.js). The line is the tone; gridlines,
   axis labels and the goal line use the theme's quiet colors, so Daylight, Obsidian and Graphite all read. */
.wch{--wch-c:var(--gold);--wch-q:var(--dim);--wch-g:color-mix(in srgb,var(--ink) 9%,transparent);--wch-h:200px;--wch-l:34px;position:relative;font-variant-numeric:tabular-nums}
.wch.wch-d{--wch-h:250px;--wch-l:42px}
.pv .wch{--wch-c:var(--acc)}
.wch-top{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.wch-sum{font-size:12px;color:var(--wch-q);flex:1;min-width:0}
.wch-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--wch-g)}
.wch-seg button{min-width:40px;height:28px;padding:0 10px;border-radius:999px;font:inherit;font-size:12px;font-weight:600;color:var(--wch-q);background:transparent;border:0;cursor:pointer;
  transition:background .18s ease,color .18s ease}
.wch-seg button:hover{color:var(--ink)}
.wch-seg button.on{background:var(--wch-c);color:var(--accent-text,var(--on-acc,#171103))}
.wch-box{position:relative;height:var(--wch-h);margin:22px 0 22px}
.wch-unit{position:absolute;left:0;top:-22px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wch-q)}
.wch-y{position:absolute;left:0;top:0;bottom:0;width:calc(var(--wch-l) - 8px)}
.wch-y span{position:absolute;right:0;transform:translateY(-50%);font-size:11px;color:var(--wch-q);line-height:1}
.wch-plot{position:absolute;left:var(--wch-l);right:8px;top:0;bottom:0}
.wch-grid{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--wch-g)}
.wch-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wch-svg .s0{stop-color:var(--wch-c);stop-opacity:.34}
.wch-svg .s1{stop-color:var(--wch-c);stop-opacity:0}
.wch-line{fill:none;stroke:var(--wch-c);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wch-goal{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed color-mix(in srgb,var(--wch-q) 75%,transparent)}
.wch-goal span{position:absolute;left:4px;bottom:4px;font-size:11px;font-weight:600;color:var(--wch-q);white-space:nowrap;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--card) 80%,transparent)}
.wch-start{position:absolute;transform:translate(-2px,calc(-100% - 10px));font-size:11px;font-weight:600;color:var(--wch-q);white-space:nowrap}
.wch-start.below{transform:translate(-2px,10px)}
.wch-dot{position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:var(--card);border:2px solid var(--wch-c);box-sizing:border-box;pointer-events:none;
  transition:width .15s ease,height .15s ease,box-shadow .15s ease}
.wch-dot.wd-first{background:transparent;width:10px;height:10px;border-style:solid}
.wch-dot.wd-last{width:13px;height:13px;background:var(--wch-c);box-shadow:0 0 0 4px color-mix(in srgb,var(--wch-c) 24%,transparent)}
.wch-dot.wd-on{width:12px;height:12px;box-shadow:0 0 0 5px color-mix(in srgb,var(--wch-c) 22%,transparent)}
.wch-dot.wd-last.wd-on{width:15px;height:15px}
.wch-guide{position:absolute;top:0;bottom:0;width:0;border-left:1px solid color-mix(in srgb,var(--wch-c) 55%,transparent);opacity:0;pointer-events:none;transition:opacity .15s ease}
.wch-tip{position:absolute;left:0;top:0;min-width:132px;padding:8px 11px;border-radius:8px;background:var(--card);border:1px solid var(--edge,var(--line));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 26px -10px rgba(0,0,0,.45);display:grid;gap:2px;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:3}
.wch-tip b{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wch-q)}
.wch-tip .wt-w{font-size:16px;font-weight:700;color:var(--ink)}
.wch-tip .wt-c{font-size:12px;color:var(--wch-q)}
.wch-tip .wt-c.wt-good{color:var(--good-ink,var(--good))}
.wch.wch-hov .wch-guide,.wch.wch-hov .wch-tip{opacity:1}
.wch-hit{position:absolute;inset:-6px -8px;cursor:crosshair;touch-action:pan-y}
.wch-x{position:absolute;left:var(--wch-l);right:8px;bottom:-20px;height:14px}
.wch-x span{position:absolute;top:0;transform:translateX(-50%);font-size:11px;color:var(--wch-q);white-space:nowrap}
.wch-x span:first-child{transform:none}
.wch-x span:last-child{transform:translateX(-100%)}

/* touch screens: the range pills keep their look, with a 44px tall hit area (step 14) */
@media (pointer:coarse){
  .wch-seg button{position:relative}
  .wch-seg button::after{content:"";position:absolute;inset:-8px -2px}
}