/* ═══════════════════════════════════════════════════════════════
   Student "Today" dashboard (Option B) — streamlined home.
   Uses the platform's existing :root tokens from beta-style.css.
   All classes are sd- prefixed to avoid collisions.
   ═══════════════════════════════════════════════════════════════ */

.sd-home { --m-accent: var(--red); }

.sd-greet { font-size: 14.5px; color: var(--muted); margin-bottom: 16px; }
.sd-greet strong { color: var(--text); font-weight: 700; }

.sd-cockpit {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px;
  align-items: start;
}

/* ── Left: the plan ── */
.sd-plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.sd-ph { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.sd-ph .k { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.sd-ph .t { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-top: 4px; }
.sd-ph .d { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.sd-step { display: flex; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--border); position: relative; }
.sd-step:last-child { border-bottom: none; }
.sd-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; font-weight: 700; font-size: 12.5px;
  border: 1.5px solid var(--border-light); color: var(--muted2);
  display: flex; align-items: center; justify-content: center; background: var(--surface-2);
}
.sd-step.done .sd-num { background: var(--green); border-color: var(--green); color: #fff; }
.sd-step.cur  .sd-num { background: var(--red);   border-color: var(--red);   color: #fff; }
.sd-si { flex: 1; min-width: 0; }
.sd-sl { font-size: 13.5px; font-weight: 600; }
.sd-step.done .sd-sl { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.2); }
.sd-sm { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sd-stime { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); flex-shrink: 0; padding-top: 4px; }
.sd-step.cur { background: linear-gradient(90deg, var(--red-glow), transparent 60%); }
.sd-startbtn { margin-top: 10px; }

/* ── Right rail ── */
.sd-side { display: flex; flex-direction: column; gap: 14px; }
.sd-side > .dash-widget { position: relative; display: flex; }
.sd-side > .dash-widget > .sd-card { flex: 1; width: 100%; }
.sd-side .reorder-handle.corner {
  position: absolute; top: 12px; right: 12px; z-index: 8;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--muted); box-shadow: var(--shadow-card);
  font-size: 13px; cursor: grab; opacity: .55; touch-action: none;
  transition: opacity .15s, color .15s, background .15s, border-color .15s;
}
.sd-side > .dash-widget:hover .reorder-handle.corner,
.sd-side .reorder-handle.corner:hover { opacity: 1; color: var(--text); background: var(--off); }
.sd-side .reorder-handle.corner:active { cursor: grabbing; }
.sd-side > .dash-widget.dragging { border-radius: 14px; }
.sd-side.dw-dragging { cursor: grabbing; }
.sd-side.dw-dragging > .dash-widget:not(.dragging) { transition: transform .14s ease; }
.sd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.sd-card.dark { background: var(--badge-bg); color: #fff; position: relative; overflow: hidden; --rk: var(--red); }
.sd-card.dark::after {
  content: ''; position: absolute; right: -22px; top: -22px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rk) 30%, transparent), transparent 70%); pointer-events: none;
}
.sd-rk-row { display: flex; align-items: center; gap: 12px; position: relative; }
.sd-emblem { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sd-emblem .rk-svg { width: 42px; height: 42px; }
.sd-rk-tier { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 1.5px; color: rgba(255,255,255,.5); }
.sd-rk-name { font-size: 16px; font-weight: 700; }
.sd-frames { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: rgba(255,255,255,.6); margin-top: 10px; }
.sd-track { height: 6px; border-radius: 20px; background: rgba(255,255,255,.14); margin-top: 6px; overflow: hidden; }
.sd-track .fill { height: 100%; border-radius: 20px; }

.sd-ministats { display: grid; grid-template-columns: repeat(3, 1fr); }
.sd-ministats .ms { text-align: center; padding: 2px 6px; }
.sd-ministats .ms + .ms { border-left: 1px solid var(--border); }
.sd-ministats .v { font-size: 21px; font-weight: 800; line-height: 1; }
.sd-ministats .v small { font-size: 11px; color: var(--muted); font-weight: 600; }
.sd-ministats .l { font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

.sd-sh { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.sd-duemini { display: flex; align-items: center; gap: 10px; font-size: 12.5px; cursor: pointer; }
.sd-duemini + .sd-duemini { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.sd-duemini .badge { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sd-duemini .nm { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-duemini .w { font-size: 11px; font-weight: 700; flex-shrink: 0; }
.sd-alldue { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--red); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sd-allude i, .sd-alldue i { font-size: 10px; }

/* engage block (streak + leaderboard) spacing when anchored below modules */
#sd-engage-anchor + .ns-engage { margin-top: 22px; }

/* ── responsive ── */
@media (max-width: 900px) {
  .sd-cockpit { grid-template-columns: 1fr; }
  .sd-side { flex-direction: row; flex-wrap: wrap; }
  .sd-side > * { flex: 1 1 220px; }
}
@media (max-width: 560px) {
  .sd-side { flex-direction: column; }
  .sd-step { padding: 13px 16px; }
  .sd-ph { padding: 16px 16px 12px; }
}

/* Dark theme is automatic: .sd-plan / .sd-card / .sd-num use var(--surface)
   / var(--surface-2), which re-map themselves in body.theme-dark. No
   per-component remap needed — that's the whole point of the token. */