/* 首页“我的一周”（2026-10-19 整体布局和图表）。颜色只用 style.css 的变量：紫 → 蓝 → 青当刻度（待重做/没掌握 → 已掌握），文字不上色。 */
#home .hd { margin-top:30px; }
.hd-sec { align-items:center; margin:0 0 12px; }
/* 这周 / 近 30 天：iOS 那种两格切换，亮的小块滑过去 */
.hd-seg { position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:3px; border-radius:16px; background:var(--line); flex:none; }
.hd-seg button { position:relative; z-index:1; min-height:44px; min-width:64px; padding:0 12px; border-radius:13px; font-size:13px; font-weight:600; color:var(--fg2); transition:color .3s cubic-bezier(.22,1,.36,1); }
.hd-seg button[aria-pressed="true"] { color:var(--fg); }
.hd-seg-pill { position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:13px; background:var(--card2); box-shadow:0 1px 4px var(--line),inset 0 0 0 1px var(--line); transition:transform .45s cubic-bezier(.32,.72,0,1); }
.hd-seg[data-on="month"] .hd-seg-pill { transform:translateX(100%); }

.hd-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.hd-card { min-width:0; padding:14px 16px 12px; border-radius:20px; background:var(--card2); box-shadow:inset 0 0 0 1px var(--line); display:flex; flex-direction:column; }
.hd-card.hd-wide { grid-column:1 / -1; }
.hd-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:24px; }
.hd-head h3 { margin:0; font-size:14px; font-weight:600; color:var(--fg2); }
.hd-go { display:inline-flex; align-items:center; justify-content:flex-end; min-width:44px; min-height:44px; margin:-10px -8px -10px 0; padding:0 8px; font-size:12.5px; color:var(--fg2); }
.hd-line { margin:8px 0 0; font-size:12px; line-height:1.55; color:var(--fg2); }
.hd-big { display:flex; align-items:baseline; margin-top:2px; font-variant-numeric:tabular-nums; }
.hd-big-v { font:700 30px/1.1 var(--num); color:var(--fg); }
.hd-big small { margin-left:3px; font-size:13px; color:var(--fg2); }
.hd-big-of { margin-left:8px; font-size:13px; color:var(--fg2); }
#hd-plan .hd-big-of { margin-left:4px; }
#hd-plan .hd-big small { margin-left:4px; }

/* 学习的日子：竖条从底下长出来；今天那根最亮，没学的日子只留一个小点 */
.hd-bars { position:relative; display:flex; align-items:stretch; gap:8px; height:96px; margin-top:12px; outline:none; cursor:pointer; touch-action:pan-y; border-radius:10px; }
.hd-bars:focus-visible { box-shadow:0 0 0 2px var(--a2); }
.hd-bars.hd-thin { gap:3px; }
.hd-bar { position:relative; flex:1; min-width:0; display:flex; align-items:flex-end; }
.hd-bar i { display:block; width:100%; height:0; border-radius:7px 7px 4px 4px; background:linear-gradient(180deg,var(--a1),var(--a2) 55%,var(--a3)); opacity:.55;
  transition:height .8s cubic-bezier(.32,.72,0,1),opacity .35s cubic-bezier(.22,1,.36,1); }
.hd-bars.hd-thin .hd-bar i { border-radius:3px 3px 2px 2px; }
.hd-bar.hd-today i,.hd-bar.hd-sel i { opacity:1; }
.hd-bar.hd-sel::after { content:""; position:absolute; left:50%; bottom:-7px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--fg2); }
.hd-bar.hd-none::before,.hd-bar.hd-future::before { content:""; position:absolute; left:50%; bottom:0; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--tick-off); }
.hd-bars.hd-thin .hd-bar.hd-none::before,.hd-bars.hd-thin .hd-bar.hd-future::before { width:3px; height:3px; margin-left:-1.5px; }
.hd-bar.hd-future::before { background:none; box-shadow:inset 0 0 0 1px var(--tick-off); }
.hd-axis { display:flex; gap:8px; margin-top:8px; font-size:11.5px; color:var(--fg2); }
.hd-axis span { flex:1; text-align:center; }
.hd-axis span.hd-on { color:var(--fg); font-weight:600; }
.hd-axis.hd-spread { justify-content:space-between; }
.hd-axis.hd-spread span { flex:none; }

/* 错题：三段的环，中间是总数 */
.hd-ring-row { display:flex; align-items:center; gap:12px; margin-top:8px; }
.hd-ring { position:relative; width:76px; height:76px; flex:none; }
.hd-ring svg { width:100%; height:100%; overflow:visible; }
.hd-arc-bg,.hd-arc { fill:none; stroke-width:9; }
.hd-arc-bg { stroke:var(--tick-off); opacity:.6; }
.hd-arc { stroke-linecap:round; transition:stroke-dasharray .9s cubic-bezier(.32,.72,0,1),stroke-dashoffset .9s cubic-bezier(.32,.72,0,1); }
.hd-arc0 { stroke:var(--a1); } .hd-arc1 { stroke:var(--a2); } .hd-arc2 { stroke:var(--a3); }
.hd-ring-c { position:absolute; inset:0; display:grid; place-content:center; text-align:center; line-height:1.05; }
.hd-ring-n { font:700 22px var(--num); font-variant-numeric:tabular-nums; color:var(--fg); }
.hd-ring-c small { font-size:11px; color:var(--fg2); }
.hd-legend { list-style:none; margin:0; padding:0; display:grid; gap:4px; min-width:0; font-size:12px; color:var(--fg2); }
.hd-legend li { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.hd-legend b { margin-left:auto; padding-left:6px; font-weight:600; color:var(--fg); font-variant-numeric:tabular-nums; }
.hd-legend-row { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; }
.hd-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.hd-dot0 { background:var(--a1); } .hd-dot1 { background:var(--a2); } .hd-dot2 { background:var(--a3); }

/* 计划：一条进度 */
.hd-track { position:relative; display:block; height:8px; border-radius:4px; background:color-mix(in srgb,var(--tick-off) 60%,transparent); overflow:hidden; }
#hd-plan .hd-track { margin-top:14px; }
.hd-fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--a1),var(--a2) 60%,var(--a3)); transition:width .8s cubic-bezier(.32,.72,0,1); }

/* 常错在哪、各科掌握：一行一条，整行能点 */
.hd-hrows,.hd-stack-rows { display:grid; margin-top:4px; transition:opacity .35s cubic-bezier(.22,1,.36,1); }
.hd-hrows.hd-faint .hd-track { opacity:.55; }
.hd-hrow,.hd-srow { display:grid; grid-template-columns:4.6em 1fr 2em; align-items:center; gap:10px; min-height:44px; padding:0 2px; margin:0 -2px; text-align:left; border-radius:10px; }
.hd-srow { grid-template-columns:2.6em 1fr 2em; }
.hd-hl { font-size:13px; color:var(--fg); white-space:nowrap; }
.hd-hrow b,.hd-srow b { justify-self:end; font-size:13px; font-weight:600; color:var(--fg); font-variant-numeric:tabular-nums; }
.hd-hrow.hd-zero .hd-hl,.hd-hrow.hd-zero b { color:var(--fg2); }
.hd-stack { display:flex; gap:2px; height:10px; border-radius:5px; overflow:hidden; background:color-mix(in srgb,var(--tick-off) 60%,transparent); }
.hd-stack i { display:block; min-width:0; flex-basis:0; transition:flex-grow .8s cubic-bezier(.32,.72,0,1); }
.hd-stack i.hd-zero { margin-left:-2px; }
.hd-part0 { background:var(--a1); } .hd-part1 { background:var(--a2); } .hd-part2 { background:var(--a3); }

@media(hover:hover) {
  .hd-hrow:hover,.hd-srow:hover { background:var(--line); }
  .hd-bar:hover i { opacity:.85; }
}
@media(max-width:350px) {
  .hd-grid { grid-template-columns:1fr; }
  .hd-seg button { min-width:52px; padding:0 8px; }
}