/* ============================================================
   NEXORA · Screen / Home — Learning Command Center styles
   Premium SaaS, calm, intelligent. All tokens from design system.
   ============================================================ */

.home-screen {
  gap: clamp(1rem, 1vw, 1.4rem);
  animation: home-enter .45s var(--ease-out) both;
}
@keyframes home-enter { from { opacity:0; transform: translateY(6px)} to {opacity:1; transform:none} }
html.nx-reduced-motion .home-screen { animation: none; }

/* Offline banner */
.home-offline {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem;
  border-radius: var(--radius-md);
  background: var(--warning-soft); color: var(--warning-text); border: 1px solid var(--warning-border);
  font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
}
[data-theme="dark"] .home-offline { background:var(--warning-soft); color:var(--warning-text); border-color:var(--warning-border) }
.home-offline .icon { width:16px; height:16px; flex:none }

/* Welcome */
.home-welcome { align-items: center; }
.welcome-copy { min-width: 0; flex: 1 1 420px; }
.welcome-meta { display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; margin-top:.9rem }
.w-meta { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.72rem; color:var(--text-2) }
.w-meta .icon { width:14px; height:14px; color:var(--text-3); flex:none }
.w-meta .icon:has(use[href="#i-flame"]) { color:var(--achievement) }
.w-meta b { color:var(--text-1) }

/* ---------- Notification indicator ------------------------------ */
.notif-wrap { position:relative; display:inline-flex; align-items:center; }
.notif-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--radius-full);
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-2);
  cursor:pointer; transition:background .16s var(--ease-out), color .16s, border-color .16s;
}
.notif-btn:hover { background:var(--surface-2); color:var(--text-1); border-color:var(--border-strong) }
.notif-btn .icon { width:19px; height:19px }
.notif-count {
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center; border-radius:var(--radius-full);
  background:var(--text-1); color:var(--bg-page); font-family:var(--font-mono);
  font-size:.58rem; font-weight:700; line-height:1;
}
.notif-panel {
  position:absolute; top:calc(100% + .55rem); right:0; z-index:40;
  width:min(300px, calc(100vw - 2rem));
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--hi-top), var(--elev-3); padding:.55rem; box-sizing:border-box;
  animation:notif-in .2s var(--ease-out) both;
}
@keyframes notif-in { from{ opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
html.nx-reduced-motion .notif-panel { animation:none }
.notif-list { display:grid; gap:.35rem }
.notif-item { display:flex; align-items:flex-start; gap:.6rem; padding:.55rem .55rem; border-radius:var(--radius-sm); }
.notif-item:hover { background:var(--surface-2) }
.notif-item .notif-ic { flex:none; width:30px; height:30px; border-radius:var(--radius-xs); display:grid; place-items:center; background:var(--surface); color:var(--text-2) }
.notif-item .notif-ic .icon { width:16px; height:16px }
.notif-item .n-body { min-width:0 }
.notif-item .n-body b { display:block; font-size:.8rem; font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.notif-item .n-body i { font-style:normal; display:block; font-family:var(--font-mono); font-size:.64rem; color:var(--text-3); margin-top:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.notif-btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px }

.home-grid {
  display: grid;
  grid-template-columns: 1.58fr 1fr;
  gap: var(--content-gutter);
  /* Cards keep their natural content height — no stretching means no dead
     filler space inside cards such as Recommended for You, Ready for
     Review, or Streak Heatmap. */
  align-items: start;
  min-width: 0;
  width: 100%;
}
.home-main, .home-rail { min-width:0 }
/* Left column holds four fixed sections (Next Move, Mission, Recommended,
   Ready for Review). Rows are auto-sized so each card hugs its content. */
.home-main{ grid-auto-rows: auto }
/* Rail cards use their natural height too — no .home-rail-fill growth. */
.home-rail{
  display:flex;
  flex-direction:column;
  gap:var(--content-gutter);
}

/* ---------- Next best move panel ------------------------------ */
.move-panel {
  position: relative;
  padding: clamp(1.2rem, 1rem + 1.2vw, 1.8rem);
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}
.move-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.6rem;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.move-main { min-width: 0; width: 100%; box-sizing: border-box; }
.move-label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; margin-bottom: 0.9rem; flex-wrap: wrap;
}
.move-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2);
}
.move-eyebrow .icon { animation: pulse-dot 2.2s infinite; }
html.nx-reduced-motion .move-eyebrow .icon { animation: none; }
.mv-title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  margin-bottom: 0.85rem; word-break: break-word; overflow-wrap: break-word;
}
.mv-why {
  display: flex; gap: 0.75rem; padding: 0.9rem 1rem;
  border-radius: var(--radius-md); background: var(--surface-2); border: none;
  margin-bottom: 1.1rem; min-width: 0; box-sizing: border-box;
  /* AI reasoning box — neutral surface with a whisper of accent on the
     edge (matches the AI dock assistant bubble treatment). */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ai-accent) 12%, transparent);
}
[data-theme="dark"] .mv-why { background: var(--surface); }
.mv-why .icon { color: var(--accent-2); margin-top: 0.15rem; flex: none; }
.mv-why p { font-size: 0.88rem; line-height: 1.6; color: var(--text-2); min-width: 0; word-break: break-word; }
.mv-meta { display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; margin-bottom: 0.85rem; }
.mv-meta .mm { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-2); }
.mv-meta .mm .icon { color: var(--text-3); width: 0.95em; height: 0.95em; }
.mv-meta .mm .icon:has(use[href="#i-star"]) { color: var(--achievement); }
.mv-skills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.move-side {
  display: grid; justify-items: center; gap: 0.75rem;
  padding: 1.2rem 1.15rem; border-radius: var(--radius-md);
  background: var(--glass-bg); box-shadow: var(--depth), var(--glass-edge);
  box-sizing: border-box; max-width: 100%;
}
.ring-lg { width: 118px; height: 118px; }
.ring-lg .ring-text b { font-size: 1.9rem; }
.streak-chip { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.streak-chip .icon { color: var(--gold); }
.streak-sub { font-size: 0.64rem; letter-spacing: 0.06em; color: var(--text-3); text-align: center; }
.streak-week { display:flex; gap:.35rem; margin-top:.2rem }
.streak-dot { width:28px; height:28px; border-radius:999px; display:grid; place-items:center; font-family:var(--font-mono); font-size:.62rem; font-weight:700; border:1px solid var(--border); color:var(--text-3); background:var(--surface) }
.streak-dot.done { background: var(--achievement-soft); color: var(--achievement-text); border-color: var(--achievement-border) }
.streak-dot.today { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--accent) }

/* ---------- Daily Mission ----------------------------------- */
.home-mission .mission-pct { font-size:.9rem; font-weight:700; color:var(--text-1) }
.mission-grid { display:grid; gap:.6rem; margin-top:1rem }
.mission-task {
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem .95rem; border-radius:var(--radius-md);
  background: var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well);
  transition: background .2s var(--ease-out), border-color .2s, box-shadow .2s;
}
.mission-task:hover { background: var(--bg-elevated); border-color: var(--border-strong); box-shadow: var(--hi-top), var(--elev-1) }
.mission-task.done { background: var(--success-soft); border-color: var(--success-border) }
[data-theme="dark"] .mission-task.done { background: var(--success-soft); border-color: var(--success-border) }
.mission-check {
  width:26px; height:26px; border-radius:999px; flex:none;
  display:grid; place-items:center; border:1.5px solid var(--border-strong);
  color: transparent; background: var(--surface); transition: all .2s;
}
.mission-task.done .mission-check { background: var(--success); border-color:var(--success); color:var(--n-0) }
[data-theme="dark"] .mission-task.done .mission-check { color: var(--n-950) }
.mission-task .m-body { flex:1; min-width:0 }
.mission-task .m-body b { display:block; font-size:.9rem; font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mission-task .m-body span { display:block; font-family:var(--font-mono); font-size:.66rem; color:var(--text-3); margin-top:.15rem }
.mission-task .m-cta { flex:none; font-family:var(--font-mono); font-size:.7rem; font-weight:600; color:var(--text-2) }
.mission-task.done .m-cta { color: var(--success-text) }

/* ---------- Recommended ------------------------------------- */
.rec-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.85rem }
@media (max-width: 640px){ .rec-grid { grid-template-columns: 1fr } }
.rec-card {
  display:grid; gap:.7rem; padding:1rem 1.05rem; border-radius:var(--radius-md);
  background: var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well);
  transition: transform .18s var(--ease-out), border-color .18s, background .18s, box-shadow .18s;
}
.rec-card:hover { transform: translateY(-1px); border-color: var(--border-strong); background: var(--bg-elevated); box-shadow: var(--hi-top), var(--elev-1) }
html.nx-reduced-motion .rec-card:hover { transform:none }
.rec-card .rec-why { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3) }
.rec-card .rec-why .dot { width:6px; height:6px; border-radius:999px; background:var(--text-2) }
.rec-card h4 { font-size:.96rem; line-height:1.35; color:var(--text-1); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.rec-card p { font-size:.8rem; line-height:1.5; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.rec-card .rec-meta { display:flex; flex-wrap:wrap; gap:.4rem }
.rec-card .rec-meta span { font-family:var(--font-mono); font-size:.66rem; color:var(--text-3) }

/* ---------- Identity snapshot ----------------------------------- */
.id-panel { padding: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); box-sizing: border-box; max-width: 100%; }
.id-snapshot { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.15rem; }
.id-who b { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-size: 1rem; color: var(--text-1); }
.id-who b .icon { width: 0.95em; height: 0.95em; color: var(--accent-2); }
.id-who .mono { font-size: 0.7rem; color: var(--text-3); }
.id-verified { display: grid; gap: 0.55rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.verified-label { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Progress Snapshot ------------------------------- */
.snapshot-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.75rem }
/* Stat tiles are STATIC inset wells inside the card — recessed tone,
   hairline, inset shadow; no hover motion. */
.snap-kpi {
  padding:.9rem .95rem; border-radius:var(--radius-md); background:var(--surface-inset);
  border:1px solid var(--border-subtle); box-shadow:var(--inset-well);
  display:grid; gap:.35rem
}
.snap-kpi b { font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:var(--text-1); line-height:1 }
.snap-kpi span { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3) }
.snap-kpi i { font-style:normal; font-family:var(--font-mono); font-size:.68rem; color:var(--text-2) }
.snapshot-error { margin-top:.7rem; font-size:.68rem; color:var(--text-3) }

/* ---------- Competency Map — web diagram (from Skills) ---------- */
#sec-radar .skills-radar{ width:100%; max-width:220px; height:180px; display:grid; place-items:center; margin:0 auto }
#sec-radar .skills-radar svg{ width:100%; height:100%; overflow:visible }
#sec-radar .radar-poly{ fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width:1.6; stroke-linejoin:round }
[data-theme="light"] #sec-radar .radar-poly{ fill: color-mix(in srgb, var(--accent) 8%, transparent) }
#sec-radar .radar-grid{ fill:none; stroke: var(--border); stroke-width:.8 }
#sec-radar .radar-dot{ fill: var(--accent); stroke: var(--bg-elevated); stroke-width:2 }
#sec-radar .radar-label{ font-family:var(--font-mono); font-size:6.5px; fill:var(--text-3); text-anchor:middle }

/* ---------- Goals ----------------------------------------- */
.goal-wrap { display:grid; gap:.9rem }
.goal-row { display:flex; align-items:baseline; justify-content:space-between; gap:.8rem }
.goal-row b { font-size:1.1rem; color:var(--text-1) }
.goal-row span { font-family:var(--font-mono); font-size:.72rem; color:var(--text-2) }
.goal-bar { height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden }
.goal-fill { height:100%; background:var(--accent); border-radius:inherit; transition: width .6s var(--ease-out) }
html.nx-reduced-motion .goal-fill { transition:none }
.goal-meta { display:flex; flex-wrap:wrap; gap:.6rem 1rem; font-family:var(--font-mono); font-size:.68rem; color:var(--text-3) }

/* ---------- Quick Actions ---------------------------------- */
.quick-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.6rem }
@media (max-width: 480px){ .quick-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.qa-btn {
  display:grid; place-items:center; gap:.45rem;
  padding:.85rem .4rem; border-radius:var(--radius-md);
  background:var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well);
  text-align:center; text-decoration:none; color:var(--text-2);
  transition: transform .16s var(--ease-out), border-color .16s, background .16s, box-shadow .16s;
}
.qa-btn:hover { transform: translateY(-1px); border-color:var(--border-strong); color:var(--text-1); background:var(--bg-elevated); box-shadow:var(--hi-top), var(--elev-1) }
html.nx-reduced-motion .qa-btn:hover { transform:none }
.qa-btn .icon { width:22px; height:22px; color:var(--accent); }
.qa-btn span { font-family:var(--font-mono); font-size:.62rem; font-weight:600; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100% }

/* ---------- Ask NEXORA ------------------------------------- */
.ask-card { display:grid; gap:.9rem }
.ask-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2) }
.ask-card h3 { font-size:1.1rem; margin-top:.2rem }
.ask-card .sub { font-family:var(--font-mono); font-size:.7rem; color:var(--text-3); margin-top:.3rem }
.ask-prompts { display:flex; flex-wrap:wrap; gap:.5rem }
.ask-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem; border-radius:999px;
  background: var(--surface-2); color: var(--text-2);
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  border:1px solid var(--border); cursor:pointer; text-decoration:none;
  transition: background .16s, color .16s, border-color .16s;
}
[data-theme="dark"] .ask-chip { background:var(--surface) }
.ask-chip:hover { background:var(--ai-soft); color:var(--ai-text); border-color:var(--ai-border) }

/* ---------- Project rows ---------------------------------------- */
.proj-progress {
  display: grid; justify-items: end; gap: 0.3rem; min-width: 90px; flex: none;
}
.proj-progress .mono { font-size: 0.72rem; font-weight: 600; color: var(--text-2); }
.proj-progress .bar { width: 100%; }

/* ---------- Module status icons — perfect square centered ---- */
.ms-ic {
  display: grid; place-items: center; place-content: center;
  width: 34px; height: 34px; min-width: 34px; min-height: 34px; aspect-ratio: 1;
  border-radius: var(--radius-xs); flex: none; line-height: 0; padding: 0;
}
.ms-ic .icon { display: block; width: 18px; height: 18px; margin: 0; line-height: 0; }
.ms-ic.done { color: var(--success); background: var(--success-soft); border: 1px solid var(--success-border); }
[data-theme="dark"] .ms-ic.done { background: var(--success-soft); }
.ms-ic.active { color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-border); }
.ms-ic.active .icon { animation: none; color: var(--accent); }
.ms-ic.todo { color: var(--text-3); background: var(--surface); border: 1px solid var(--border); }

/* ---------- Learning courses mini list --------------------- */
.learning-courses { display:grid; gap:.7rem; margin-top:1.1rem }
.course-mini {
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem .95rem; border-radius:var(--radius-md);
  background:var(--surface-inset); border:1px solid var(--border-subtle); box-shadow:var(--inset-well);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.course-mini:hover { border-color: var(--border-strong); background: var(--bg-elevated); box-shadow: var(--hi-top), var(--elev-1) }
.course-mini .c-icon { width:36px; height:36px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--surface); color:var(--text-2); flex:none }
.course-mini .c-body { flex:1; min-width:0 }
.course-mini .c-body b { display:block; font-size:.9rem; font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.course-mini .c-body span { display:block; font-family:var(--font-mono); font-size:.66rem; color:var(--text-3); margin-top:.15rem }
.course-mini .c-pct { font-family:var(--font-mono); font-size:.78rem; font-weight:700; color:var(--text-1); flex:none }

/* ---------- Empty & skeleton & error ----------------------- */
.empty-state {
  display:grid; place-items:center; text-align:center; gap:.4rem;
  padding:1.4rem 1rem; border-radius:var(--radius-md);
  background: var(--surface); border:1px dashed var(--border-strong);
}
.empty-state p { font-size:.9rem; font-weight:600; color:var(--text-1) }
.empty-state span { font-size:.78rem; color:var(--text-3); max-width:28ch; line-height:1.5 }
.empty-state .btn { margin-top:.5rem }
.skeleton { position:relative; overflow:hidden; background: var(--surface-2); border-radius: var(--radius-sm); }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
[data-theme="dark"] .skeleton::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) }
@keyframes shimmer { 100%{ transform: translateX(100%) } }
html.nx-reduced-motion .skeleton::after{ animation:none }

/* subtle card entrance stagger + a11y focus */
.home-screen .card { animation: card-in .42s var(--ease-out) both; }
.home-screen .card:nth-child(2){ animation-delay:.04s } .home-screen .card:nth-child(3){ animation-delay:.08s }
@keyframes card-in { from{ opacity:0; transform: translateY(8px)} to{opacity:1; transform:none}}
html.nx-reduced-motion .home-screen .card{ animation:none }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.mission-task:focus-visible, .rec-card:focus-visible, .qa-btn:focus-visible, .ask-chip:focus-visible, .course-mini:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Dashboard Charts — Full analytics ---------- */
.home-charts{ display:grid; gap:var(--content-gutter) }
.charts-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:var(--content-gutter) }
.chart-card{ display:grid; gap:.8rem; padding:1rem 1.1rem }
.chart-card.span-2{ grid-column:1 / -1 }
.chart-wrap{ min-height:90px; display:grid; place-items:center }
#sec-chart-skills .chart-wrap{ display:block; place-items:initial }
.chart-bars{ display:flex; align-items:end; gap:.35rem; height:90px; width:100%; padding:0 .4rem }
.chart-bar{ flex:1; background:var(--surface-2); border:1px solid var(--border); border-radius:6px 6px 0 0; display:grid; place-items:start center; position:relative; min-height:4px }
.chart-bar.is-today{ background:var(--accent); border-color:var(--accent) }
.chart-bar-label{ position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.58rem; color:var(--text-3); white-space:nowrap }
.chart-bar-val{ font-family:var(--font-mono); font-size:.62rem; color:var(--text-2); margin-top:.3rem }
.chart-line{ width:100%; height:90px; overflow:visible }
.chart-line path{ fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.chart-line .area{ fill:color-mix(in srgb, var(--accent) 10%, transparent); stroke:none }
[data-theme="dark"] .chart-line .area{ fill:color-mix(in srgb, var(--accent) 12%, transparent) }
.chart-line .dot{ fill:var(--accent); stroke:var(--bg-elevated); stroke-width:1.6 }
.chart-skill{ display:grid; gap:.65rem; align-content:start }
.chart-skill-row{ display:grid; gap:.3rem }
.chart-skill-row-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem }
.chart-skill-row-top b{ font-size:.84rem; font-weight:600; color:var(--text-1) }
.chart-skill-row-top span{ font-family:var(--font-mono); font-size:.68rem; font-weight:700; color:var(--text-1) }
.chart-skill-row .bar{ height:7px; border-radius:999px; overflow:hidden; background:var(--surface-3) }
.chart-skill-row .bar-fill{ height:100%; background:var(--accent); border-radius:inherit }
.skill-row .name .icon { color: var(--success) }
.id-who b .icon, .verified-label .icon { color: var(--success) }
.chart-donut{ width:120px; height:120px; position:relative; display:grid; place-items:center }
.chart-donut svg{ width:100%; height:100%; transform:rotate(-90deg) }
.chart-donut-center{ position:absolute; display:grid; place-items:center; text-align:center }
.chart-donut-center b{ font-size:1.1rem; color:var(--text-1) }
.chart-donut-center span{ font-family:var(--font-mono); font-size:.62rem; color:var(--text-3) }
.chart-legend{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:.5rem }
.chart-legend span{ display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-mono); font-size:.62rem; color:var(--text-3) }
.chart-legend i{ width:8px; height:8px; border-radius:50%; display:inline-block }
/* Streak heat grid fills the full card width so there is no dead space on
   either side of the heatmap. */
.chart-heat{ display:grid; grid-template-columns: repeat(7, 1fr); gap:.16rem; width:100% }
.chart-heat-cell{ aspect-ratio:1; min-height:16px; border-radius:3px; border:1px solid var(--border); display:grid; place-items:center; font-family:var(--font-mono); font-size:.46rem; line-height:1; color:var(--text-3); background:var(--surface) }
.chart-heat-cell.done{ background:var(--achievement-soft); color:var(--achievement-text); border-color:var(--achievement-border) }
.chart-heat-cell.today{ box-shadow:0 0 0 1.5px var(--bg-elevated), 0 0 0 3px var(--accent) }
@media (max-width: 767px){ .charts-grid{ grid-template-columns:1fr } .chart-card.span-2{ grid-column:auto } }

/* ---------- Tablet/phone — single column stacks naturally (fill only applies wide) */
@media (max-width: 1120px) {
  .home-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .move-panel { padding: 1.1rem !important; }
  .move-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .move-side {
    grid-template-columns: auto 1fr;
    justify-items: start; align-items: center;
    gap: 0.75rem 1.1rem; padding: 0.9rem 1rem; width: 100%;
  }
  .ring-lg { width: 86px; height: 86px; grid-row: 1 / span 2; }
  .ring-lg .ring-text b { font-size: 1.4rem; }
  .streak-chip { align-self: flex-end; font-size: 0.8rem; padding: 0.26rem 0.65rem; }
  .streak-sub { grid-column: 2; text-align: left; align-self: flex-start; margin-top: -0.2rem; font-size: 0.62rem; }
  .proj-progress { min-width: 74px; }
  .welcome-meta { gap:.5rem .8rem }
}