/* ═══════════════════════════════════════════════════════════════
   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; }

/* The day-one goal, rendered under the rank bar. Onboarding promises this card
   shows it; before this there was no slot anywhere and the promise was false. */
.sd-goal { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 3px; }
.sd-goal .k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; color: rgba(255,255,255,.45); }
.sd-goal .v { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.9); }
.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; }
}

/* ── teacher announcements — a card under the Today plan in the left column,
   matching the plan card's shape so it reads as part of the cockpit. Hidden
   entirely (empty host) when there are no announcements. ── */
.sd-ann { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  margin: 16px 0 0; overflow: hidden; box-shadow: var(--shadow-card); }
.sd-ann-h { display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--red); border-bottom: 1px solid var(--border); }
.sd-ann-item { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.sd-ann-item:last-child { border-bottom: 0; }
.sd-ann-item.unseen { background: linear-gradient(90deg, var(--red-glow), transparent 70%); }
.sd-ann-tack { position: absolute; top: 13px; right: 14px; font-size: 10px; color: var(--muted); transform: rotate(20deg); }
.sd-ann-t { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.sd-ann-b { font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.sd-ann-m { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.sd-ann-new { color: var(--red); font-weight: 800; letter-spacing: .5px; }

/* 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. */