/* ── 查手机 · 健康 B 手表 / C 训练日志 / D 周报 / E 心电图纸 + 往日 (js/apps/phone-peek-health.js) ── */
/* B · 手表: an OLED watch face (black in the day too), complications swap the face */
.hb-watch{position:relative;width:300px;height:300px;margin:18px auto 0;border-radius:50%;background:#050506;box-shadow:0 0 0 7px #1d1f23,0 0 0 8px #3a3d43,0 22px 44px rgba(0,0,0,.35);color:#f2f3f5;overflow:hidden}
.hb-watch svg{position:absolute;inset:0;width:100%;height:100%}
.hb-face{position:absolute;inset:0}
.hb-ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.hb-ctr small{font-size:11px;letter-spacing:.18em;color:rgba(242,243,245,.5)}
.hb-ctr b{font-family:var(--pk-clock-font);font-size:58px;font-weight:300;line-height:1.05;font-variant-numeric:tabular-nums}
.hb-ctr span{font-size:12px;color:rgba(242,243,245,.6);margin-top:4px}
.hb-ctr span.hb-youtxt{color:var(--pk-you-d)}
.hb-tick{stroke:rgba(255,255,255,.22);stroke-width:1.2}.hb-tick.big{stroke:rgba(255,255,255,.5);stroke-width:2}
.hb-hl{font-size:10px;fill:rgba(255,255,255,.45);font-family:inherit;text-anchor:middle;dominant-baseline:middle}
.hb-comp{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.hb-comp button{aspect-ratio:1;border-radius:50%;border:0;background:#0b0c0e;color:#f2f3f5;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 0 0 1.5px rgba(255,255,255,.08),0 8px 18px rgba(0,0,0,.18);transition:box-shadow .25s}
.hb-comp button.on{box-shadow:0 0 0 2px var(--pk-acc-d),0 8px 18px rgba(0,0,0,.18)}
.hb-comp b{font-family:var(--pk-clock-font);font-size:17px;font-weight:400;font-variant-numeric:tabular-nums}
.hb-comp small{font-size:10px;color:rgba(242,243,245,.5)}
.hb-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}.hb-dots i{width:6px;height:6px;border-radius:50%;background:var(--pk-t3);transition:background .3s,width .3s}.hb-dots i.on{background:var(--pk-t1);width:16px;border-radius:3px}
.hb-info{margin-top:16px;border-radius:20px;padding:4px 16px}
.hb-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 0;font-size:13.5px}.hb-row+.hb-row{border-top:1px solid var(--pk-hair)}
.hb-row span{color:var(--pk-t2)}.hb-row b{font-weight:500;text-align:right}.hb-row b.you{color:var(--pk-you)}

/* C · 训练日志: a clipboard, typed log paper */
.hl-board{position:relative;margin-top:22px;padding:30px 12px 14px;border-radius:14px;background:linear-gradient(160deg,#6b5a45,#4c3f30);box-shadow:0 18px 34px rgba(10,20,40,.22)}
.hl-clip{position:absolute;left:50%;top:-12px;width:120px;height:34px;margin-left:-60px;border-radius:8px 8px 12px 12px;background:linear-gradient(180deg,#d6d9de,#8d939b 60%,#6b7179);box-shadow:0 4px 8px rgba(0,0,0,.3);z-index:2}
.hl-clip::after{content:'';position:absolute;left:44px;right:44px;top:7px;height:8px;border-radius:4px;background:#4a4f56}
.hl-paper{position:relative;background:#f7f5ef;color:#24262b;padding:18px 16px 18px;border-radius:2px;min-height:560px;box-shadow:0 1px 0 rgba(0,0,0,.06)}
#peek-app-root[data-mode="dark"] .hl-board{background:linear-gradient(160deg,#2b2620,#1b1814)}
#peek-app-root[data-mode="dark"] .hl-paper{background:#18191c;color:#e8eaee}
.hl-paper{--ink2:rgba(36,38,43,.55);--ink3:rgba(36,38,43,.3);--rule:rgba(36,38,43,.14)}
#peek-app-root[data-mode="dark"] .hl-paper{--ink2:rgba(232,234,238,.55);--ink3:rgba(232,234,238,.3);--rule:rgba(255,255,255,.1)}
.hl-hd{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid currentColor;padding-bottom:6px}
.hl-hd b{font-family:'Courier New',ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:19px;letter-spacing:.06em}
.hl-hd span{font-size:11px;color:var(--ink2);text-align:right;line-height:1.4}
.hl-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:14px}
.hl-wk button{border:1px solid var(--rule);background:none;color:inherit;font:inherit;padding:6px 0 7px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.hl-wk button small{font-size:10px;color:var(--ink2)}
.hl-wk button b{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:13px;font-weight:500}
.hl-wk button em{font-style:normal;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:9.5px;color:var(--ink2);height:12px}
.hl-wk button.tr em{color:inherit;font-weight:500}
.hl-wk button.tr::after{content:'';position:absolute;left:6px;right:6px;bottom:-1px;height:3px;background:var(--pk-acc-l)}
#peek-app-root[data-mode="dark"] .hl-wk button.tr::after{background:var(--pk-acc-d)}
.hl-wk button.on{background:color-mix(in srgb,currentColor 8%,transparent);border-color:currentColor}
.hl-sec{font-size:10.5px;letter-spacing:.24em;color:var(--ink2);margin:18px 0 6px}
.hl-tb{width:100%;border-collapse:collapse;font-size:12.5px}
.hl-tb th{font-weight:500;font-size:10px;color:var(--ink2);text-align:left;padding:4px 4px;border-bottom:1px solid currentColor;letter-spacing:.1em}
.hl-tb td{padding:8px 4px;border-bottom:1px solid var(--rule);vertical-align:baseline}
.hl-tb td.m{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12px;white-space:nowrap}
.hl-tb td.p{color:var(--ink2);font-size:11.5px}
.hl-tb tr.rest td{color:var(--ink3)}
.hl-tb tr.you td:nth-child(2){color:var(--pk-you-l)}#peek-app-root[data-mode="dark"] .hl-tb tr.you td:nth-child(2){color:var(--pk-you-d)}
.hl-none{font-size:12.5px;color:var(--ink2);padding:10px 4px;border-bottom:1px solid var(--rule)}
.hl-fill{display:grid;grid-template-columns:auto 1fr;gap:10px 10px;align-items:baseline;font-size:12.5px}
.hl-fill span{color:var(--ink2)}
.hl-fill b{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-weight:500;border-bottom:1px solid var(--ink3);padding:0 4px 2px}
.hl-fill b small{font-family:inherit;font-weight:400;color:var(--ink2);margin-left:6px;font-size:11px}
.hl-mg{margin-top:16px;font-size:11.5px;color:var(--ink2);line-height:1.7;border-left:2px solid var(--pk-you-l);padding-left:10px}
#peek-app-root[data-mode="dark"] .hl-mg{border-color:var(--pk-you-d)}
.hl-sign{display:flex;justify-content:flex-end;gap:8px;align-items:baseline;margin-top:22px;font-size:11px;color:var(--ink2)}
.hl-sign b{font-family:'Courier New',ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:15px;font-weight:400;color:inherit;border-bottom:1px solid var(--ink3);padding:0 10px 2px}

/* D · 周报: the week, one day selected across all charts */
.hd-sel{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;border-radius:18px;font-size:13px}
.hd-sel b{font-weight:600;margin-right:4px}.hd-sel span{color:var(--pk-t2)}.hd-sel span+span::before{content:'· ';color:var(--pk-t3)}
.hd-c{margin-top:14px;padding:16px 16px 12px;border-radius:22px}
.hd-h{display:flex;justify-content:space-between;align-items:baseline}.hd-h b{font-size:14.5px}.hd-h span{font-size:12px;color:var(--pk-t3)}
.hd-big{font-size:26px;margin-top:4px}.hd-big small{font-size:12px;color:var(--pk-t2);margin-left:4px;font-family:inherit}
.hd-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:110px;margin-top:10px;position:relative}
.hd-bars button{height:100%;border:0;background:none;padding:0;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}
.hd-bars button i{display:block;width:100%;max-width:26px;border-radius:7px 7px 3px 3px;background:color-mix(in srgb,var(--pk-h1) 40%,transparent);transition:background .25s;transform-origin:bottom}
.hd-bars button.on i{background:var(--pk-h1)}
.hd-avg{position:absolute;left:0;right:0;border-top:1.5px dashed color-mix(in srgb,var(--pk-t1) 25%,transparent);pointer-events:none}
.hd-avg span{position:absolute;right:0;top:-16px;font-size:10px;color:var(--pk-t3)}
.hd-x{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:6px;text-align:center;font-size:11px;color:var(--pk-t3)}
.hd-x span.on{color:var(--pk-t1);font-weight:600}
.hd-sleep{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:150px;margin-top:10px}
.hd-sleep button{position:relative;border:0;background:none;padding:0;cursor:pointer}
.hd-sleep button i{position:absolute;left:50%;width:100%;max-width:22px;transform:translateX(-50%);border-radius:8px;background:color-mix(in srgb,var(--pk-h2) 38%,transparent);transition:background .25s}
.hd-sleep button.on i{background:var(--pk-h2)}
.hd-sleep button u{position:absolute;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--pk-you);box-shadow:0 0 0 2px var(--pk-gl2)}
.hd-gl{position:absolute;left:0;right:0;border-top:1px solid var(--pk-hair);pointer-events:none}
.hd-gl span{position:absolute;left:-2px;top:-7px;font-size:9.5px;color:var(--pk-t3);background:none}
.hd-key{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--pk-t3);margin-top:8px}.hd-key i{width:7px;height:7px;border-radius:50%;background:var(--pk-you)}
.hd-blocks{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:12px;height:110px;align-items:end;overflow:hidden}
.hd-blocks button{border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column-reverse;align-items:center;gap:var(--bg,3px);height:100%}
.hd-blocks button i{width:100%;max-width:22px;height:var(--bh,9px);flex-shrink:0;border-radius:min(3px,calc(var(--bh,9px) / 3));background:color-mix(in srgb,var(--pk-h3) 35%,transparent)}
.hd-blocks button.on i{background:var(--pk-h3)}
.hd-blocks button em{font-style:normal;font-size:10px;color:var(--pk-t3);margin-top:auto}
.hd-spark{display:block;width:100%;height:56px;margin-top:10px;overflow:visible}
.hd-spark path{fill:none;stroke:var(--pk-h3);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.hd-spark circle{fill:var(--pk-h3)}.hd-spark circle.on{r:5}

/* E · 心电图纸: a monitor strip you scroll through the day, then the printed readout */
.he-hd{display:flex;justify-content:space-between;align-items:baseline;margin:10px 4px 0;font-size:11px;letter-spacing:.14em;color:var(--pk-t2)}
.he-hd b{font-size:22px;letter-spacing:.02em;color:var(--pk-t1)}
.he-wrap{position:relative;margin-top:16px}
/* soft colour behind the glass, so it has something to bend */
.he-amb{position:absolute;inset:-10px -6px;border-radius:40px;pointer-events:none;filter:blur(28px);opacity:.9;
  background:radial-gradient(38% 55% at 16% 34%,color-mix(in srgb,var(--pk-you-d) 75%,transparent),transparent 70%),radial-gradient(42% 60% at 84% 70%,color-mix(in srgb,var(--pk-lt) 85%,transparent),transparent 72%),radial-gradient(30% 40% at 55% 10%,rgba(255,255,255,.9),transparent 70%)}
#peek-app-root[data-mode="dark"] .he-amb{opacity:.55;background:radial-gradient(45% 60% at 18% 30%,color-mix(in srgb,var(--pk-you-d) 40%,transparent),transparent 70%),radial-gradient(50% 70% at 82% 75%,color-mix(in srgb,var(--pk-mid) 70%,transparent),transparent 70%)}
.he-glass{position:relative;border-radius:26px;overflow:hidden;background:linear-gradient(170deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.38) 45%,rgba(255,255,255,.52) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(1.9) brightness(1.06);backdrop-filter:blur(18px) saturate(1.9) brightness(1.06);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -10px 18px -10px color-mix(in srgb,var(--pk-mid) 35%,transparent),inset 0 -1.5px 0 color-mix(in srgb,var(--pk-mid) 22%,transparent),
    0 1px 2px rgba(20,30,50,.08),0 10px 18px -6px rgba(20,30,50,.14),0 28px 50px -18px color-mix(in srgb,var(--pk-you-l) 30%,rgba(20,30,50,.25))}
#peek-app-root[data-mode="dark"] .he-glass{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 55%,rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.08),inset 1px 0 0 rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.4)}
/* the curved highlight a thick piece of glass catches along its top */
.he-glass::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(110% 46% at 28% -12%,rgba(255,255,255,.85),rgba(255,255,255,.2) 45%,transparent 62%),linear-gradient(105deg,transparent 38%,rgba(255,255,255,.32) 46%,transparent 54%),radial-gradient(80% 30% at 70% 112%,rgba(255,255,255,.45),transparent 70%)}
#peek-app-root[data-mode="dark"] .he-glass::after{background:radial-gradient(120% 60% at 30% -20%,rgba(255,255,255,.16),transparent 55%),linear-gradient(100deg,transparent 40%,rgba(255,255,255,.06) 48%,transparent 56%)}
.he-strip{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  --grid:color-mix(in srgb,var(--pk-mid) 16%,transparent);--grid2:color-mix(in srgb,var(--pk-mid) 6%,transparent);--trace:var(--pk-you-l);--lab:var(--pk-t2)}
.he-strip::-webkit-scrollbar{display:none}
#peek-app-root[data-mode="dark"] .he-strip{--grid:rgba(255,255,255,.1);--grid2:rgba(255,255,255,.035);--trace:var(--pk-you-d)}
.he-paper{position:relative;height:240px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px}
.he-paper svg{position:absolute;top:0;overflow:visible;pointer-events:none}
.he-tr{fill:none;stroke:var(--trace);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--trace) 60%,transparent)) drop-shadow(0 3px 3px rgba(20,30,50,.12))}
.he-area{fill:color-mix(in srgb,var(--trace) 16%,transparent);stroke:none}
.he-now{stroke:var(--trace);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.he-dot{fill:var(--trace);filter:drop-shadow(0 0 6px var(--trace))}
.he-mk{position:absolute;top:0;bottom:22px;border-left:1px dashed var(--lab);opacity:.8;pointer-events:none}
.he-mk span{position:absolute;left:4px;top:calc(6px + var(--row,0) * 15px);font-size:10.5px;color:var(--lab);white-space:nowrap;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.he-mk.you{border-left-style:solid;border-color:var(--pk-you-l)}.he-mk.you span{color:var(--pk-you-l);font-weight:600}
#peek-app-root[data-mode="dark"] .he-mk.you{border-color:var(--pk-you-d)}#peek-app-root[data-mode="dark"] .he-mk.you span{color:var(--pk-you-d)}
.he-band{position:absolute;bottom:22px;height:10px;background:repeating-linear-gradient(135deg,var(--lab) 0 1px,transparent 1px 5px);opacity:.55;border-radius:2px}
.he-band span{position:absolute;left:4px;top:-15px;font-size:10px;color:var(--lab);font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;white-space:nowrap}
.he-axis{position:absolute;left:0;right:0;bottom:0;height:22px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:10px;color:var(--lab)}
.he-axis span{position:absolute;bottom:5px;transform:translateX(-50%)}
.he-scale{position:absolute;left:6px;font-size:9.5px;color:var(--lab);font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.he-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.he-chips button{border:1px solid var(--pk-edge);background:var(--pk-gl2);color:var(--pk-t1);font:inherit;font-size:12px;padding:5px 11px;border-radius:999px;cursor:pointer}
.he-chips button.you{color:var(--pk-you)}
.he-print{position:relative;margin-top:18px;padding:16px 16px 26px;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.6));-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);color:var(--pk-t1);font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:12px;line-height:1.9;box-shadow:0 10px 24px rgba(10,20,40,.12);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x}
#peek-app-root[data-mode="dark"] .he-print{background:rgba(255,255,255,.08)}
.he-print .r{display:flex;justify-content:space-between;gap:10px}.he-print .r span{opacity:.55}
.he-print .r.hl{background:color-mix(in srgb,var(--pk-you-l) 12%,transparent);margin:0 -6px;padding:0 6px}
.he-print hr{border:0;border-top:1px dashed currentColor;opacity:.3;margin:6px 0}
.he-print .r b.you{color:var(--pk-you-l)}#peek-app-root[data-mode="dark"] .he-print .r b.you{color:var(--pk-you-d)}


/* ── additions for the real page: days, week / month navigation, history ── */
.ph-scroll .pk-note{margin-top:22px}
.ph-days{display:flex;gap:6px;margin:14px -18px 0;padding:0 18px 4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.ph-days::-webkit-scrollbar{display:none}
.ph-days button{flex:0 0 48px;scroll-snap-align:center;border:1px solid transparent;background:none;font:inherit;color:var(--pk-t2);display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0;border-radius:14px;cursor:pointer;transition:background .25s,color .25s}
.ph-days button small{font-size:10.5px}.ph-days button b{font-size:18px;font-weight:400}
.ph-days button.on{background:var(--pk-gl2);border-color:var(--pk-edge);color:var(--pk-t1)}
.ph-none{padding:36px 10px}
.ph-wnav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;font-size:13.5px}
.ph-wnav b{font-weight:500;min-width:120px;text-align:center}
.ph-wnav button,.hd-wkbar button{width:32px;height:32px;border-radius:50%;border:1px solid var(--pk-edge);background:var(--pk-gl2);color:var(--pk-t1);font:inherit;font-size:16px;cursor:pointer}
.ph-wnav button:disabled,.hd-wkbar button:disabled{opacity:.3;cursor:default}
.hb-watch{touch-action:pan-y}
.hb-gbg{fill:none;stroke-width:13;stroke-linecap:round;stroke-opacity:.18}.hb-g{fill:none;stroke-width:13;stroke-linecap:round}
.hb-gbg.g1,.hb-g.g1{stroke:color-mix(in srgb,var(--pk-acc-d) 85%,#fff)}.hb-gbg.g2,.hb-g.g2,.hb-seg.g2{stroke:color-mix(in srgb,var(--pk-lt) 80%,#9fd0b0)}.hb-gbg.g3,.hb-g.g3{stroke:#e9c7cf}
.hb-seg{fill:none;stroke-width:22}
.hb-seg.s-deep{stroke:color-mix(in srgb,var(--pk-acc-d) 85%,#fff)}.hb-seg.s-light{stroke:color-mix(in srgb,var(--pk-acc-d) 45%,#333)}.hb-seg.s-rem{stroke:color-mix(in srgb,var(--pk-lt) 80%,#9fd0b0)}.hb-seg.s-awake{stroke:#e9c7cf}
.hb-line{fill:none;stroke:#e9c7cf;stroke-width:1.6;stroke-linejoin:round}
.hb-you{fill:none;stroke:var(--pk-you-d);stroke-width:4;stroke-linecap:round}
.hb-hand{stroke:#fff;stroke-width:2;stroke-linecap:round}
.hl-wkbar{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:11px;color:var(--ink2)}
.hl-wkbar button{border:0;background:none;font:inherit;font-size:11.5px;color:inherit;cursor:pointer;padding:4px 2px;font-family:'Courier New',ui-monospace,monospace}
.hl-wkbar button:disabled{opacity:.35;cursor:default}
.hl-wk{margin-top:8px}
.hl-wk button.none b{opacity:.45}.hl-wk button:disabled{opacity:.3;cursor:default}
.hl-small{font-size:11px;color:var(--ink2);margin-top:8px;line-height:1.6}
.hd-wkbar{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:13px;color:var(--pk-t2)}
.hd-sel span.you{color:var(--pk-you)}
.hd-bars button:disabled,.hd-sleep button:disabled,.hd-blocks button:disabled{cursor:default}
.hd-bars button.none i{background:none}
.ph-mhead{margin-top:10px}.ph-mhead .pc-mnav:disabled{opacity:.3;cursor:default}
.hd-mg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.hd-wd{text-align:center;font-size:10.5px;color:var(--pk-t3);padding-bottom:4px}
.hd-mg button{position:relative;height:48px;border:0;border-radius:10px;background:color-mix(in srgb,var(--pk-t1) 4%,transparent);font:inherit;color:var(--pk-t2);cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:3px 0 4px;overflow:hidden}
.hd-mg button small{position:absolute;top:3px;left:0;right:0;text-align:center;font-size:10px}
.hd-mg button i{width:60%;max-width:16px;border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--pk-h1) 45%,transparent);margin-top:auto;max-height:28px}
.hd-mg button.on{background:color-mix(in srgb,var(--pk-h1) 16%,transparent);color:var(--pk-t1)}.hd-mg button.on i{background:var(--pk-h1)}
.hd-mg button.today small{font-weight:700;color:var(--pk-t1)}
.hd-mg button:disabled{opacity:.35;cursor:default}
.hd-mline{position:relative;display:flex;gap:2px;height:120px;margin-top:10px}
.hd-mline button{position:relative;flex:1;border:0;background:none;padding:0;cursor:pointer;border-radius:3px}
.hd-mline button.on{background:color-mix(in srgb,var(--pk-h2) 14%,transparent)}
.hd-mline button i{position:absolute;left:15%;right:15%;border-radius:3px;background:color-mix(in srgb,var(--pk-h2) 45%,transparent)}
.hd-mline button.on i{background:var(--pk-h2)}
.hd-mline button u{position:absolute;left:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--pk-you)}
.hd-mline button:disabled{cursor:default}
.hd-mx{display:flex;justify-content:space-between;font-size:10.5px;color:var(--pk-t3);margin-top:4px}
.he-day{position:absolute;bottom:24px;font-size:10px;color:var(--lab);font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;opacity:.8;white-space:nowrap}
.he-nodata{position:absolute;top:44%;transform:translateX(-50%);font-size:12px;color:var(--lab);white-space:nowrap}
.he-old{margin-top:0;padding-bottom:22px}
.he-old .r{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;text-align:right}.he-old .r>*:first-child{text-align:left}
.he-old .r.h span{opacity:.5;font-size:10.5px}