/* Zirva – pass 9: concept card, hint sheet, practice hub, daily goal, teacher week. */

/* ---------- every tappable card answers the finger ---------- */
.gx-task,.gx-unit,.lr,.mat,.sub,.prev,.wb-card,.ph-row,.goal{transition:transform 120ms var(--ease-out)}
.gx-task:active,.gx-unit:active,.lr:active,.mat:active,.sub:active,.prev:active,.ph-row:active,.goal:active{transform:scale(.98)}

/* ---------- concept card (Brilliant-style idea before practice) ---------- */
.cc-fig{margin-top:32px;padding:24px 20px 20px;border-radius:24px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -5px 0 var(--color-surface-sunken)}
.cc-fig svg{display:block;width:100%;height:auto;overflow:visible}
.cc-line{stroke:var(--color-border);stroke-width:4;stroke-linecap:round}
.cc-arc{fill:none;stroke:var(--group-cobalt);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 900ms var(--ease-out) 500ms forwards}
.cc-dot{transform-box:fill-box;transform-origin:center;animation:pop 420ms var(--ease-spring) var(--d) both}
.cc-past{fill:var(--group-cobalt)}
.cc-now{fill:var(--color-text)}
.cc-lab{font:600 15px/1 var(--font-family-ui);fill:var(--color-text-secondary);animation:fade 300ms ease var(--d) both}
.cc-lab.k{fill:var(--group-cobalt)}
.cc-ex{margin-top:24px;font:500 22px/32px var(--font-family-ui)}
.cc-ex b{color:var(--group-cobalt);font-weight:600}

/* ---------- hint sheet ---------- */
.hint-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:24px;padding:0 14px;border-radius:12px;background:var(--color-accent-tint);color:var(--color-text);font:var(--type-label-md);border:0}
.hint-btn i{font-size:18px;color:var(--color-accent-strong)}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--color-border-strong);margin:0 auto 6px}
.hs-h{display:flex;align-items:center;gap:10px;font:600 20px/26px var(--font-family-ui)}
.hs-h i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--color-accent);font-size:20px;color:var(--color-text)}
.hs-rule{font:var(--type-body-lg);color:var(--color-text-secondary)}
.hs-ex{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px;border-radius:16px;background:var(--color-surface-sunken);font:600 26px/1 var(--font-family-display)}
.hs-ex i{font-size:22px;color:var(--color-text-tertiary)}
.hs-ex em{font-style:normal;color:var(--color-success);display:inline-block;animation:pop 420ms var(--ease-spring) 650ms both}

/* ---------- practice hub ---------- */
.ph-top{display:flex;align-items:center;gap:16px;margin-top:20px;padding:20px;border-radius:24px;background:var(--color-text);color:var(--color-text-inverse)}
.ph-top .n{width:64px;height:64px;border-radius:20px;flex:none;display:grid;place-items:center;background:var(--color-accent);color:var(--color-text);font:600 30px/1 var(--font-family-display);box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
.ph-top>div{flex:1;min-width:0}
.ph-top b{display:block;font:600 18px/24px var(--font-family-ui)}
.ph-top small{font:var(--type-body-sm);opacity:.75}
.ph-top .btn{background:var(--color-surface);color:var(--color-text);box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
.ph-list{display:flex;flex-direction:column;gap:8px}
.ph-row{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 16px;border-radius:18px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);color:var(--color-text);text-decoration:none}
.ph-row>div{flex:1;min-width:0}
.ph-row b{display:block;font:var(--type-label-lg)}
.str{display:flex;gap:4px;margin-top:8px;max-width:160px}
.str i{flex:1;height:8px;border-radius:4px;background:var(--color-surface-sunken)}
.str i.f{background:var(--sc);animation:segpop 320ms var(--ease-spring) var(--d) both}
.str.weak{--sc:var(--color-danger)} .str.mid{--sc:var(--color-warning)} .str.good{--sc:var(--color-success)}
.ph-row .chev{font-size:18px;color:var(--color-text-tertiary)}
.ph-row .lbl{font:var(--type-label-sm);color:var(--sc,var(--color-text-secondary))}

/* ---------- daily goal ---------- */
.dg-mascot{display:flex;align-items:flex-end;gap:12px;margin-top:20px}
.dg-mascot svg{width:64px;height:44px;color:var(--color-text);flex:none;animation:hop 520ms var(--ease-spring) 200ms both}
.dg-say{position:relative;padding:12px 16px;border-radius:18px 18px 18px 6px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong);font:500 16px/22px var(--font-family-ui);animation:pop 420ms var(--ease-spring) 450ms both}
.goals{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.goal{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 16px 14px;border:0;border-radius:16px;background:var(--color-surface);box-shadow:inset 0 0 0 1.5px var(--color-border-strong),inset 0 -4px 0 #D6D0C3;font:inherit;color:var(--color-text);text-align:left;cursor:pointer;animation:rise2 360ms var(--ease-out) var(--d) backwards}
.goal b{font:600 18px/22px var(--font-family-display);min-width:76px}
.goal span{flex:1;font:var(--type-body-md);color:var(--color-text-secondary)}
.goal .ck{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--color-border-strong);color:transparent;font-size:16px}
.goal[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--group-cobalt),inset 0 -4px 0 var(--group-cobalt);background:var(--group-cobalt-tint)}
.goal[aria-pressed="true"] .ck{background:var(--group-cobalt);box-shadow:none;color:#fff;animation:pop 320ms var(--ease-spring) both}

/* ---------- teacher week ---------- */
.tw-big{display:flex;align-items:baseline;gap:12px;margin-top:20px}
.tw-big b{font:600 72px/1 var(--font-family-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tw-big span{font:500 20px/26px var(--font-family-ui);color:var(--color-text-secondary)}
.tw-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:end;height:150px;margin-top:24px;padding:18px 18px 0;border-radius:22px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border)}
.tw-bars div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.tw-bars i{display:block;width:100%;max-width:36px;height:var(--h);border-radius:8px 8px 4px 4px;background:var(--color-success);transform-origin:bottom;animation:barup 600ms var(--ease-spring) var(--d) both}
.tw-bars i.z{background:var(--color-surface-sunken);height:6px}
.tw-bars small{font:var(--type-label-sm);color:var(--color-text-secondary);padding-bottom:12px}
@keyframes barup{from{transform:scaleY(0)}}
.tw-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.tw-k .qx-k b{font-size:24px}
.tw-k .qx-k.up b{color:var(--color-success)}

@media (prefers-reduced-motion:reduce){
  .cc-arc{animation:none;stroke-dashoffset:0} .cc-dot,.cc-lab,.hs-ex em,.str i.f,.dg-mascot svg,.dg-say,.goal,.goal[aria-pressed="true"] .ck,.tw-bars i{animation:none}
}
.sheet .hs-h{font:600 20px/26px var(--font-family-ui);color:var(--color-text)}