/* ==========================================================================
   SkipNavi V2 — feature modules
   Patterns that appear on more than one V2 screen. Page-only rules live in
   the matching v2-page-*.css file.
   Figma: HUa1t2P7nhVWCqbGcd1zpx nodes 30:3 / 30:297 / 30:537 / 30:855 /
   30:1098 / 30:1417 / 30:1674.
   ========================================================================== */

/* ── summary list: label on the left, value on the right ──────────────── */
.v2-deflist { display: flex; flex-direction: column; }
.v2-deflist > div {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--v2-line-3);
}
.v2-deflist > div:last-child { border-bottom: 0; }
.v2-deflist dt, .v2-deflist .v2-dt {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--v2-muted); flex: none;
}
.v2-deflist dt svg, .v2-deflist .v2-dt svg { width: 15px; height: 15px; color: var(--v2-muted-2); }
.v2-deflist dd, .v2-deflist .v2-dd {
  margin: 0; margin-left: auto; text-align: right;
  font-size: 15px; font-weight: 700; color: var(--v2-ink-2); letter-spacing: -.02em;
}
.v2-deflist .v2-dd i { font-style: normal; font-weight: 500; color: var(--v2-muted); font-size: 13px; }

/* boxed variant used by the student特이사항 rail (node 30:426) */
.v2-deflist.is-boxed { border: 1px solid var(--v2-line-3); border-radius: var(--v2-r); overflow: hidden; }
.v2-deflist.is-boxed > div { padding: 5px 13px; gap: 16px; align-items: flex-start; }
.v2-deflist.is-boxed dt, .v2-deflist.is-boxed .v2-dt { width: 92px; font-size: 13px; padding-top: 1px; }
.v2-deflist.is-boxed dd, .v2-deflist.is-boxed .v2-dd {
  margin-left: 0; text-align: left; font-size: 13px; font-weight: 500;
  color: var(--v2-ink-3); line-height: 1.55;
}

/* ── meta strip: icon + label + big value, divided ────────────────────── */
.v2-metastrip { display: flex; align-items: stretch; flex-wrap: wrap; }
.v2-metastrip > div {
  flex: 1 1 0; min-width: 168px; display: flex; align-items: center; gap: 12px;
  padding: 0 22px; border-left: 1px solid var(--v2-line-3);
}
.v2-metastrip > div:first-child { border-left: 0; padding-left: 2px; }
.v2-metastrip .v2-stat-icon { width: 40px; height: 40px; border-radius: var(--v2-r); }
.v2-metastrip .v2-stat-icon svg { width: 19px; height: 19px; }
.v2-metastrip span { display: block; font-size: 12.5px; color: var(--v2-muted); }
.v2-metastrip b { display: block; margin-top: 2px; font-size: 21px; font-weight: 700; color: var(--v2-ink); letter-spacing: -.045em; }
.v2-metastrip b i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--v2-ink-4); margin-left: 2px; letter-spacing: 0; }

/* ── stepper (node 30:584) ────────────────────────────────────────────── */
.v2-stepper { display: flex; align-items: flex-start; gap: 0; }
.v2-step { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 108px; flex: none; }
.v2-step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: var(--v2-surface); border: 1.5px solid var(--v2-line-2); color: var(--v2-muted);
}
.v2-step-label { font-size: 14px; font-weight: 600; color: var(--v2-muted); white-space: nowrap; }
.v2-step.is-on .v2-step-dot { background: var(--v2-blue); border-color: var(--v2-blue); color: #fff; }
.v2-step.is-on .v2-step-label { color: var(--v2-blue); font-weight: 700; }
.v2-step.is-done .v2-step-dot { background: var(--v2-blue-soft); border-color: var(--v2-blue-line); color: var(--v2-blue); }
.v2-step.is-done .v2-step-label { color: var(--v2-ink-4); }
.v2-step-line { flex: 1 1 auto; height: 2px; background: var(--v2-line-2); margin-top: 14px; min-width: 24px; }
.v2-step-line.is-done { background: var(--v2-blue-line); }

/* ── unit tree (node 30:722) ──────────────────────────────────────────── */
.v2-unittree { display: flex; flex-direction: column; gap: 2px; }
.v2-unit-row { display: flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 6px 0 0; border-radius: var(--v2-r-xs); }
.v2-unit-row:hover { background: var(--v2-surface-2); }
.v2-unit-row.is-selected { background: var(--v2-blue-soft); }
.v2-unit-row.is-selected .v2-check-text { color: var(--v2-blue); font-weight: 600; }
.v2-unit-toggle {
  width: 26px; height: 26px; flex: none; border: 0; background: none; border-radius: var(--v2-r-xs);
  display: grid; place-items: center; color: var(--v2-muted-2);
}
.v2-unit-toggle svg { width: 14px; height: 14px; transition: transform .18s ease; }
.v2-unit-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.v2-unit-toggle.is-hidden { visibility: hidden; }
.v2-unit-children { display: flex; flex-direction: column; gap: 2px; padding-left: 26px; }
.v2-unittree-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v2-line-3); display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.v2-unittree-foot b { color: var(--v2-blue); font-weight: 700; }

/* ── stage matrix (nodes 30:657 / 30:962 / 30:1541) ───────────────────── */
.v2-stagegrid { width: 100%; border-collapse: collapse; }
.v2-stagegrid th, .v2-stagegrid td { padding: 0; }
.v2-stagegrid thead th {
  font-size: 12.5px; font-weight: 600; color: var(--v2-muted);
  padding: 0 4px 12px; text-align: center; white-space: nowrap;
}
.v2-stagegrid thead th:first-child { text-align: left; padding-left: 2px; }
.v2-stagegrid tbody td { border-top: 1px solid var(--v2-line-3); padding: 9px 4px; text-align: center; }
.v2-stagegrid tbody tr:first-child td { border-top: 0; }
.v2-stagegrid .v2-stage-unit { text-align: left; padding-left: 2px; padding-right: 14px; min-width: 132px; }
.v2-stagegrid .v2-stage-unit b { display: block; font-size: 13.5px; font-weight: 600; color: var(--v2-ink-2); letter-spacing: -.02em; }
.v2-stagegrid .v2-stage-unit span { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--v2-blue); }
.v2-stagegrid .v2-stage-unit span i { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--v2-muted-2); margin-left: 3px; }
.v2-stagegrid .v2-stage-unit span.is-green { color: var(--v2-green-ink); }
.v2-stagegrid .v2-stage-unit span.is-muted { color: var(--v2-muted-2); }

.v2-cell {
  width: 46px; height: 46px; border-radius: var(--v2-r); display: inline-grid; place-items: center;
  border: 1px solid var(--v2-line-2); background: var(--v2-surface); color: var(--v2-faint);
  font-size: 14px; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.v2-cell svg { width: 20px; height: 20px; }
.v2-cell.is-done { border-color: var(--v2-green-line); background: var(--v2-green-soft); color: var(--v2-green); }
.v2-cell.is-current { border-color: var(--v2-blue); background: var(--v2-surface); color: var(--v2-blue); }
.v2-cell.is-current::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--v2-blue); }
.v2-cell.is-selected { border-color: var(--v2-blue); background: var(--v2-blue-soft); color: var(--v2-blue); }
.v2-cell.is-selected::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--v2-blue); }
.v2-cell.is-inrange { border-color: var(--v2-blue-line-2); background: var(--v2-blue-soft); }
.v2-cell.is-empty { border-style: solid; border-color: var(--v2-line-3); }
button.v2-cell { cursor: pointer; }
button.v2-cell:hover:not(:disabled) { border-color: var(--v2-blue-line); background: var(--v2-blue-soft); }
button.v2-cell:disabled { cursor: default; }
.v2-stagegrid td.is-inrange { background: var(--v2-blue-soft); }
.v2-stagegrid td.is-range-start { border-top-left-radius: var(--v2-r); border-bottom-left-radius: var(--v2-r); }
.v2-stagegrid td.is-range-end { border-top-right-radius: var(--v2-r); border-bottom-right-radius: var(--v2-r); }

.v2-legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--v2-muted); }
.v2-legend span { display: inline-flex; align-items: center; gap: 7px; }
.v2-legend .v2-swatch { width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; }
.v2-legend .v2-swatch svg { width: 15px; height: 15px; }
.v2-legend .v2-swatch.is-done { color: var(--v2-green); }
.v2-legend .v2-swatch.is-current { border: 1.5px solid var(--v2-blue); }
.v2-legend .v2-swatch.is-current::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v2-blue); }
.v2-legend .v2-swatch.is-box { border: 1.5px solid var(--v2-blue-line); border-radius: 4px; }
.v2-legend .v2-swatch.is-dash { color: var(--v2-faint); font-size: 14px; }

/* ── activity list (nodes 30:933 / 30:1441) ───────────────────────────── */
.v2-activity { display: flex; flex-direction: column; gap: 13px; }
.v2-activity-item { display: flex; gap: 11px; }
.v2-activity-mark { margin-top: 3px; flex: none; width: 16px; height: 16px; display: grid; place-items: center; }
.v2-activity-mark svg { width: 16px; height: 16px; color: var(--v2-green); }
.v2-activity-mark.is-current { border: 2px solid var(--v2-blue); border-radius: 50%; }
.v2-activity-mark.is-current::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v2-blue); }
.v2-activity-body { min-width: 0; flex: 1 1 auto; }
.v2-activity-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v2-activity-title b { font-size: 13.5px; font-weight: 700; color: var(--v2-ink-2); }
.v2-activity-title span { font-size: 12.5px; color: var(--v2-muted-2); }
.v2-activity-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12.5px; color: var(--v2-muted); }
.v2-activity-meta time { margin-left: auto; color: var(--v2-muted-2); }

/* ── record timeline (node 30:353) ────────────────────────────────────── */
.v2-timeline { display: flex; flex-direction: column; }
.v2-timeline-item { display: flex; gap: 16px; padding-bottom: 12px; }
.v2-timeline-when { width: 96px; flex: none; text-align: right; padding-top: 14px; }
.v2-timeline-when b { display: block; font-size: 12.5px; font-weight: 700; color: var(--v2-ink-3); }
.v2-timeline-when small { display: block; font-size: 12.5px; color: var(--v2-muted-2); margin-top: 2px; }
.v2-timeline-item.is-latest .v2-timeline-when b,
.v2-timeline-item.is-latest .v2-timeline-when small { color: var(--v2-blue-ink); }
.v2-timeline-rail { flex: none; width: 14px; display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.v2-timeline-rail::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--v2-line-2); background: var(--v2-surface); flex: none;
}
.v2-timeline-item.is-latest .v2-timeline-rail::before { border-color: var(--v2-blue); }
.v2-timeline-rail::after { content: ""; width: 1px; flex: 1 1 auto; background: var(--v2-line); margin-top: 6px; }
.v2-timeline-item:last-child .v2-timeline-rail::after { display: none; }
.v2-timeline-card {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--v2-line); border-radius: var(--v2-r-md);
  background: var(--v2-surface); padding: 10px 15px 9px;
}
.v2-timeline-top { display: flex; align-items: center; gap: 10px; }
.v2-timeline-top .v2-spacer { flex: 1 1 auto; }
.v2-timeline-top time { font-size: 12.5px; color: var(--v2-muted-2); }
.v2-timeline-text { margin-top: 6px; font-size: 14px; color: var(--v2-ink-2); line-height: 1.55; }
.v2-timeline-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--v2-line-3);
  font-size: 12.5px; color: var(--v2-muted-2);
}
.v2-timeline-foot span { display: inline-flex; align-items: center; gap: 6px; }
.v2-timeline-foot svg { width: 13px; height: 13px; }
.v2-timeline-foot .v2-btn-icon { min-height: 24px; width: 24px; }
.v2-timeline-foot .v2-btn-icon svg { width: 14px; height: 14px; }
.v2-timeline-foot .v2-cell-actions { margin-left: auto; }
.v2-pin { color: var(--v2-blue); }

/* ── radar chart (node 30:304) ────────────────────────────────────────── */
.v2-radar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2-radar svg { flex: none; overflow: visible; }
.v2-radar-poly { fill: rgba(36, 86, 230, .14); stroke: var(--v2-blue); stroke-width: 1.5; }
.v2-radar-web { fill: none; stroke: var(--v2-line-2); stroke-width: 1; }
.v2-radar-spoke { stroke: var(--v2-line-2); stroke-width: 1; }
.v2-radar-node { fill: var(--v2-blue); }
.v2-radar-axis { font-size: 10.5px; fill: var(--v2-muted); }
.v2-radar-val { font-size: 11px; font-weight: 700; fill: var(--v2-ink-3); }
.v2-radar-key { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--v2-muted); }
.v2-radar-key span { display: flex; align-items: center; gap: 7px; }
.v2-radar-key i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ── bar chart (node 30:906) ──────────────────────────────────────────── */
.v2-barchart { display: flex; align-items: flex-end; gap: 8px; height: 132px; padding-top: 12px; }
.v2-barchart-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.v2-barchart-col > b { font-size: 12.5px; font-weight: 700; color: var(--v2-ink-3); }
.v2-barchart-bar { width: 12px; border-radius: 3px 3px 0 0; background: var(--v2-blue); flex: none; }
.v2-barchart-col.is-today .v2-barchart-bar { background: var(--v2-blue); }
.v2-barchart-col.is-today { background: var(--v2-blue-soft); border-radius: var(--v2-r-xs); }
.v2-barchart-col > small { font-size: 12px; color: var(--v2-muted-2); }

/* ── message thread (node 30:1674) ────────────────────────────────────── */
.v2-threadlayout { display: grid; grid-template-columns: 375px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.v2-threadlist { border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: var(--v2-surface); display: flex; flex-direction: column; overflow: hidden; }
.v2-threadlist-head { display: flex; gap: 10px; padding: 14px; border-bottom: 1px solid var(--v2-line-3); }
.v2-threadlist-head .v2-search { flex: 1 1 auto; }
.v2-threadlist-head .v2-input { min-height: 40px; }
.v2-threadlist-head .v2-select-btn { min-height: 40px; }
.v2-threadlist-scroll { overflow: auto; flex: 1 1 auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.v2-threaditem {
  display: flex; gap: 12px; width: 100%; text-align: left;
  padding: 14px; border-radius: var(--v2-r-md); border: 1px solid transparent; background: none;
}
.v2-threaditem:hover { background: var(--v2-surface-2); }
.v2-threaditem[aria-selected="true"] { background: var(--v2-blue-soft); border-color: var(--v2-blue-line); }
.v2-threaditem-body { min-width: 0; flex: 1 1 auto; }
.v2-threaditem-top { display: flex; align-items: center; gap: 8px; }
.v2-threaditem-top b { font-size: 14.5px; font-weight: 700; color: var(--v2-ink-2); letter-spacing: -.02em; }
.v2-threaditem-top time { margin-left: auto; font-size: 12.5px; color: var(--v2-muted-2); flex: none; }
.v2-threaditem-preview {
  margin-top: 6px; font-size: 13.5px; color: var(--v2-ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-threaditem .v2-chip { margin-top: 9px; }
.v2-unread {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; flex: none;
  background: var(--v2-blue); color: #fff; font-size: 11.5px; font-weight: 700;
  display: inline-grid; place-items: center;
}

.v2-threadview { border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: var(--v2-surface); display: flex; flex-direction: column; overflow: hidden; }
.v2-threadview-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.v2-threadview-head b { display: block; font-size: 14.5px; font-weight: 700; color: var(--v2-ink-2); }
.v2-threadview-head b i { font-style: normal; font-weight: 500; color: var(--v2-muted); }
.v2-threadview-head small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--v2-green-ink); }
.v2-linked-hw {
  display: flex; align-items: center; gap: 12px; margin: 0 20px;
  padding: 12px 14px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-md);
  background: var(--v2-surface-2);
}
.v2-linked-hw .v2-stat-icon { width: 36px; height: 36px; border-radius: var(--v2-r-sm); }
.v2-linked-hw .v2-stat-icon svg { width: 17px; height: 17px; }
.v2-linked-hw b { font-size: 14px; font-weight: 700; color: var(--v2-ink-2); }
.v2-linked-hw span { font-size: 13.5px; color: var(--v2-muted); }

.v2-bubbles { flex: 1 1 auto; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.v2-daysep { text-align: center; font-size: 12.5px; color: var(--v2-muted-2); margin: 6px 0; }
.v2-bubble-row { display: flex; align-items: flex-end; gap: 10px; }
.v2-bubble-row.is-me { flex-direction: row-reverse; }
.v2-bubble {
  max-width: 60%; padding: 12px 15px; border-radius: var(--v2-r-md);
  background: var(--v2-amber-soft-2); color: var(--v2-ink-2);
  font-size: 14px; line-height: 1.6; white-space: pre-line;
}
.v2-bubble-row.is-me .v2-bubble { background: var(--v2-blue-soft-2); }
.v2-bubble-time { font-size: 12px; color: var(--v2-muted-2); flex: none; display: inline-flex; align-items: center; gap: 4px; }
.v2-bubble-time svg { width: 13px; height: 13px; color: var(--v2-blue); }

.v2-composer { border-top: 1px solid var(--v2-line-3); padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.v2-composer-actions { display: flex; align-items: center; gap: 10px; }
.v2-send {
  margin-left: auto; width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--v2-blue); border: 0; color: #fff; display: grid; place-items: center;
}
.v2-send svg { width: 20px; height: 20px; }
.v2-send:hover:not(:disabled) { background: var(--v2-blue-hover); }
.v2-send:disabled { opacity: .45; cursor: not-allowed; }
.v2-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--v2-muted-2); }
.v2-secure svg { width: 14px; height: 14px; }

/* ── student homework rows (node 30:1098) ─────────────────────────────── */
.v2-group-title { font-size: 16px; font-weight: 700; color: var(--v2-ink-2); letter-spacing: -.03em; margin: 4px 0 2px; }
.v2-hwrow {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 78px minmax(170px, 1fr) 112px 132px 58px 152px 96px 132px max-content;
  padding: 13px 18px; border-bottom: 1px solid var(--v2-line-3);
}
.v2-hwrow:last-child { border-bottom: 0; }
.v2-hwrow:hover { background: var(--v2-surface-2); }
.v2-hwrow-title { font-size: 14px; font-weight: 600; color: var(--v2-ink-2); letter-spacing: -.02em; }
.v2-hwrow-owner { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--v2-muted); }
.v2-hwrow-owner svg { width: 14px; height: 14px; color: var(--v2-muted-2); }
.v2-hwrow-due { font-size: 13.5px; color: var(--v2-muted); white-space: nowrap; }
.v2-hwrow-due.is-red { color: var(--v2-red-ink); font-weight: 600; }
.v2-hwrow-due.is-amber { color: var(--v2-amber-ink); font-weight: 600; }
.v2-hwrow-pct { font-size: 15px; font-weight: 700; color: var(--v2-ink-2); text-align: right; }
.v2-hwrow-pct i { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--v2-muted); }
.v2-hwrow-steps { font-size: 13px; color: var(--v2-muted); white-space: nowrap; }
.v2-hwrow-eta span { display: block; font-size: 11.5px; color: var(--v2-muted-2); }
.v2-hwrow-eta b { display: block; font-size: 13px; font-weight: 600; color: var(--v2-ink-3); margin-top: 2px; }
.v2-hwrow-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* featured homework card (node 30:1274) */
.v2-featured { display: flex; align-items: center; gap: 26px; padding: 22px 24px; flex-wrap: wrap; }
.v2-featured-lead { min-width: 210px; }
.v2-featured-lead h2 { margin-top: 12px; font-size: 20px; font-weight: 700; color: var(--v2-ink-2); letter-spacing: -.04em; }
.v2-featured-meta { display: flex; align-items: center; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--v2-muted); }
.v2-featured-meta span { display: inline-flex; align-items: center; gap: 6px; }
.v2-featured-meta svg { width: 14px; height: 14px; color: var(--v2-muted-2); }
.v2-featured-steps { min-width: 150px; }
.v2-featured-steps b { font-size: 22px; font-weight: 700; color: var(--v2-ink); letter-spacing: -.04em; }
.v2-featured-steps b i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--v2-muted); }
.v2-featured-steps small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--v2-muted); }
.v2-featured-quote {
  flex: 1 1 260px; min-width: 240px; align-self: stretch;
  background: var(--v2-surface-3); border-radius: var(--v2-r-md); padding: 14px 18px;
  display: flex; flex-direction: column; justify-content: center;
}
.v2-featured-quote span { font-size: 12.5px; color: var(--v2-muted); }
.v2-featured-quote p { margin-top: 8px; font-size: 13.5px; color: var(--v2-ink-3); line-height: 1.6; }
.v2-featured-actions { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }

/* mentor comment banner (nodes 30:869 / 30:1512) */
.v2-commentbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--v2-r-md);
  background: var(--v2-amber-soft-2); border: 1px solid var(--v2-amber-line);
}
.v2-commentbar .v2-avatar { width: 36px; height: 36px; }
.v2-commentbar b { font-size: 14px; font-weight: 700; color: var(--v2-amber-ink); white-space: nowrap; }
.v2-commentbar p { flex: 1 1 260px; min-width: 200px; font-size: 14px; color: var(--v2-ink-3); line-height: 1.55; }

/* inbox strip (node 30:1242) */
.v2-inboxstrip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: var(--v2-r-md);
  background: var(--v2-surface); border: 1px solid var(--v2-line);
}
.v2-inboxstrip > svg { width: 18px; height: 18px; color: var(--v2-blue); flex: none; }
.v2-inboxstrip b { font-size: 13.5px; font-weight: 700; color: var(--v2-ink-2); }
.v2-inboxstrip span { font-size: 13.5px; color: var(--v2-muted); }

/* ── rail lists (node 30:31 / 30:45) ──────────────────────────────────── */
.v2-raillist { display: flex; flex-direction: column; }
.v2-raillist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--v2-line-3);
}
.v2-raillist-item:last-child { border-bottom: 0; }
.v2-raillist-item .v2-avatar { width: 32px; height: 32px; }
.v2-raillist-body { min-width: 0; flex: 1 1 auto; }
.v2-raillist-body b { display: block; font-size: 13px; font-weight: 700; color: var(--v2-ink-2); }
.v2-raillist-body small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--v2-muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-raillist-meta { flex: none; font-size: 12.5px; color: var(--v2-muted-2); text-align: right; }
.v2-raillist-meta.is-red { color: var(--v2-red-ink); font-weight: 600; }

.v2-checklist { display: flex; flex-direction: column; }
.v2-checklist > div { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; color: var(--v2-ink-4); }
.v2-checklist > div b { margin-left: auto; font-weight: 700; }
.v2-checklist .is-red { color: var(--v2-red-ink); }
.v2-checklist .is-amber { color: var(--v2-amber-ink); }
.v2-checklist .is-blue { color: var(--v2-blue); }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .v2-hwrow { grid-template-columns: 74px minmax(150px, 1fr) 104px 120px 54px 120px max-content; }
  .v2-hwrow-eta, .v2-hwrow-steps { display: none; }
}
@media (max-width: 1024px) {
  .v2-threadlayout { grid-template-columns: minmax(0, 1fr); }
  .v2-metastrip > div { border-left: 0; padding-left: 4px; }
  .v2-timeline-when { width: 74px; }
}
@media (max-width: 720px) {
  .v2-hwrow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .v2-hwrow-actions { justify-content: flex-start; }
  .v2-stepper { overflow-x: auto; max-width: 100%; }
  .v2-featured { gap: 18px; }
  .v2-bubble { max-width: 84%; }
}

/* ── student hero (node 30:465) ───────────────────────────────────────── */
.v2-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.v2-hero-body { flex: 1 1 400px; min-width: 0; }
.v2-hero-name { font-size: 23px; font-weight: 700; color: var(--v2-ink); letter-spacing: -.04em; }
.v2-hero-meta {
  display: flex; flex-wrap: wrap; margin-top: 10px;
  background: var(--v2-surface-3); border-radius: var(--v2-r-md); padding: 7px 4px;
}
.v2-hero-meta > div { flex: 1 1 0; min-width: 118px; padding: 2px 16px; border-left: 1px solid var(--v2-line-2); }
.v2-hero-meta > div:first-child { border-left: 0; }
.v2-hero-meta span { display: block; font-size: 12px; color: var(--v2-muted-2); }
.v2-hero-meta b {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 14px; font-weight: 700; color: var(--v2-ink-2); letter-spacing: -.02em; white-space: nowrap;
}
.v2-hero-meta b svg { width: 14px; height: 14px; color: var(--v2-blue); flex: none; }

/* ── schedule item (node 30:333) ──────────────────────────────────────── */
.v2-sched-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--v2-line-3); border-radius: var(--v2-r);
  background: var(--v2-surface);
}
.v2-sched-item .v2-stat-icon { width: 34px; height: 34px; border-radius: var(--v2-r-sm); }
.v2-sched-item .v2-stat-icon svg { width: 17px; height: 17px; }
.v2-sched-body { flex: 1 1 auto; min-width: 0; }
.v2-sched-body b { display: block; font-size: 13.5px; line-height: 1.35; font-weight: 700; color: var(--v2-ink-2); }
.v2-sched-body small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--v2-muted-2); }

/* ── progress modal / detail header (nodes 30:1417, 30:855) ───────────── */
.v2-progress-top { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 2px 0 14px; }
.v2-subject-tile {
  width: 92px; height: 92px; flex: none; border-radius: var(--v2-r-md);
  border: 1.5px solid var(--v2-blue-line); background: var(--v2-surface);
  display: grid; place-content: center; text-align: center; color: var(--v2-blue);
}
.v2-subject-tile b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
.v2-subject-tile i { display: block; margin-top: 2px; font-style: normal; font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
.v2-progress-title { flex: 1 1 280px; min-width: 240px; }
.v2-progress-title h3 { font-size: 25px; font-weight: 700; color: var(--v2-ink); letter-spacing: -.04em; }
.v2-progress-title p { display: flex; align-items: center; gap: 8px; margin-top: 9px; font-size: 14px; color: var(--v2-muted); }
.v2-progress-title p svg { width: 15px; height: 15px; color: var(--v2-muted-2); flex: none; }
.v2-progress-title p b { font-weight: 600; color: var(--v2-ink-3); }
.v2-progress-figs { flex: 0 1 260px; min-width: 220px; }
.v2-figline { display: flex; align-items: baseline; gap: 8px; }
.v2-figline b { font-size: 32px; font-weight: 700; color: var(--v2-ink); letter-spacing: -.05em; }
.v2-figline i { font-style: normal; font-size: 15px; color: var(--v2-muted); }
.v2-figlabel { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 14px; color: var(--v2-muted); }
.v2-figlabel svg { width: 15px; height: 15px; }
.v2-progress-figs .v2-figline + .v2-figlabel { margin-top: 14px; }
.v2-progress-figs .v2-figlabel + .v2-figline b { font-size: 21px; }
.v2-progress-figs .v2-bar { margin-top: 10px; }

.v2-progress-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; margin-top: 14px; }
.v2-progress-side { border-left: 1px solid var(--v2-line-3); padding-left: 26px; }
.v2-panel-title { font-size: 14.5px; font-weight: 700; color: var(--v2-ink-2); letter-spacing: -.03em; margin-bottom: 10px; }
.v2-state-line { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--v2-green-ink); }
.v2-state-line svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 1024px) {
  .v2-progress-cols { grid-template-columns: minmax(0, 1fr); }
  .v2-progress-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--v2-line-3); padding-top: 18px; }
  .v2-hero-meta > div { border-left: 0; }
}

.v2-card-body.v2-hero { padding: 14px 16px; }

/* ── assignment summary row (node 30:1032) ────────────────────────────── */
.v2-summaryrow { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.v2-summary-donut { flex: none; padding: 0 30px 0 8px; }
.v2-summary-cell { flex: 1 1 0; min-width: 170px; padding: 2px 24px; border-left: 1px solid var(--v2-line-3); }
.v2-summary-cell .v2-figlabel { margin-top: 0; font-size: 13.5px; }
.v2-summary-cell .v2-figline { margin-top: 6px; }
.v2-summary-cell .v2-bar { margin-top: 10px; }
.v2-forecast-note { margin-top: 7px; font-size: 13px; color: var(--v2-green-ink); font-weight: 600; }

/* ── alert / guide cards (nodes 30:906, 30:867) ───────────────────────── */
.v2-alert-title { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--v2-amber-ink); }
.v2-alert-title svg { width: 17px; height: 17px; flex: none; }
.v2-alert-title b { font-weight: 700; }
.v2-alert-body { margin-top: 10px; font-size: 13.5px; color: var(--v2-ink-4); line-height: 1.6; }

.v2-guiderow { display: flex; align-items: stretch; gap: 20px; flex-wrap: wrap; }
.v2-guide { flex: 0 1 300px; min-width: 260px; }
.v2-guide .v2-panel-title { display: flex; align-items: center; gap: 7px; }
.v2-guide .v2-panel-title svg { width: 15px; height: 15px; color: var(--v2-muted-2); }
.v2-guide ul { display: flex; flex-direction: column; gap: 7px; }
.v2-guide li { position: relative; padding-left: 12px; font-size: 13px; color: var(--v2-ink-4); }
.v2-guide li::before { content: "·"; position: absolute; left: 2px; color: var(--v2-muted-2); }
.v2-commentbar b svg { width: 14px; height: 14px; color: var(--v2-amber); vertical-align: -2px; margin-right: 5px; }

/* ── assignment scope row (node 30:611) ───────────────────────────────── */
.v2-scoperow {
  display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap;
  padding: 4px 0 2px;
}
.v2-scope-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v2-scope-group .v2-label { font-size: 13.5px; color: var(--v2-ink-4); }
.v2-studentchip {
  display: flex; align-items: center; gap: 10px;
  height: 45px; padding: 0 8px 0 10px; min-width: 196px;
  border: 1px solid var(--v2-line-2); border-radius: var(--v2-r); background: var(--v2-surface);
}
.v2-studentchip b { font-size: 14.5px; font-weight: 600; color: var(--v2-ink-3); white-space: nowrap; }
.v2-studentchip .v2-btn-icon { min-height: 28px; width: 28px; margin-left: auto; }

.v2-autochip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px; border-radius: var(--v2-r);
  background: var(--v2-blue-soft); color: var(--v2-blue);
}
.v2-autochip > svg { width: 18px; height: 18px; }
.v2-autochip .v2-switch { gap: 10px; font-size: 14px; font-weight: 600; }

.v2-scopecols { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 0; padding: 0 !important; }
.v2-scope-tree { padding: 16px 18px; border-right: 1px solid var(--v2-line-3); }
.v2-scope-matrix { padding: 16px 20px; min-width: 0; }
.v2-scope-matrix .v2-panel-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.v2-recobar { background: var(--v2-blue-soft); gap: 12px; flex-wrap: wrap; }
.v2-recobar > svg { width: 20px; height: 20px; color: var(--v2-blue); flex: none; }
.v2-recobar p { font-size: 14px; color: var(--v2-ink-3); }
.v2-recobar p b { color: var(--v2-blue); font-weight: 700; }

.v2-commentcard { background: var(--v2-amber-soft-2); border-color: var(--v2-amber-line); }
.v2-commentcard .v2-card-head { border-bottom-color: var(--v2-amber-line); }
.v2-commentcard .v2-card-head h2 { color: var(--v2-amber-ink); display: flex; align-items: center; gap: 7px; }
.v2-commentcard .v2-card-head h2 svg { width: 15px; height: 15px; color: var(--v2-amber); }
.v2-commentcard .v2-textarea { background: #fffdf7; border-color: var(--v2-amber-line); }

/* sticky action bar (node 30:546) */
.v2-actionbar {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 14px var(--v2-pad-x);
  background: var(--v2-surface); border-top: 1px solid var(--v2-line);
}

@media (max-width: 1180px) {
  .v2-scopecols { grid-template-columns: minmax(0, 1fr); }
  .v2-scope-tree { border-right: 0; border-bottom: 1px solid var(--v2-line-3); }
}

/* ── student page top bar (nodes 30:1868, 30:1660) ────────────────────── */
.v2-studenttop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px var(--v2-pad-x) 0;
}
.v2-studenttop-title { font-size: 27px; font-weight: 700; color: var(--v2-ink); letter-spacing: -.045em; }
.v2-studenttop .v2-sub { margin-top: 4px; font-size: 13.5px; color: var(--v2-muted); }
.v2-statuspill {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 44px; padding: 4px 16px; border-radius: var(--v2-r-sm);
  border: 1px solid var(--v2-line-2); background: var(--v2-surface);
}
.v2-statuspill small { font-size: 11.5px; color: var(--v2-muted-2); }
.v2-statuspill b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--v2-green-ink); }
.v2-bignum { font-size: 26px; font-weight: 700; color: var(--v2-ink); letter-spacing: -.05em; margin-top: 2px; }

/* ── compact rail cards (node 30:59 / 30:45 / 30:31 / 30:10) ──────────── */
.v2-card.is-rail .v2-card-head { padding: 8px 16px 6px; border-bottom: 0; }
.v2-card.is-rail .v2-card-head h2 { font-size: 15px; }
.v2-card.is-rail .v2-card-body { padding: 4px 16px 12px; }
.v2-card.is-rail .v2-checklist > div { padding: 5px 0; }
.v2-card.is-rail .v2-raillist-item { padding: 6px 0; }
.v2-card.is-rail .v2-raillist-body b { line-height: 1.35; }
.v2-card.is-rail .v2-raillist-body small { margin-top: 2px; line-height: 1.35; }
.v2-card.is-rail .v2-barchart { height: 116px; padding-top: 10px; }
.v2-card.is-rail .v2-btn-sm { min-height: 30px; }
.v2-statcard .v2-spark { height: 52px; }
.v2-statcard .v2-spark svg { height: 52px; }

/* ── Fluent V2 fidelity pass ────────────────────────────────────────────
   Screen-scoped adjustments restore the proportions of the approved
   1672 × 941 planning frames without changing data flow or interactions. */

/* Student management — the approved summary cards are intentionally roomy. */
.v2-screen-management .v2-content { padding-top: 39px; }
.v2-screen-management .v2-statcard {
  min-height: 166px;
  padding: 24px 20px 18px;
  gap: 10px;
  border-radius: 12px;
}
.v2-screen-management .v2-stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.v2-screen-management .v2-stat-icon svg { width: 28px; height: 28px; }
.v2-screen-management .v2-statcard .v2-spark {
  width: 60%;
  height: 46px;
  margin-left: auto;
}
.v2-screen-management .v2-statcard .v2-spark svg { height: 46px; }
.v2-screen-management .v2-table tbody td { padding-top: 15px; padding-bottom: 15px; }
.v2-screen-management [id="panel-students"] > .v2-card-body { padding-top: 32px !important; padding-bottom: 32px !important; }
.v2-screen-management .v2-card.is-rail:first-child .v2-card-body { padding-bottom: 37px; }
.v2-screen-management aside .v2-card:nth-child(2) .v2-card-body { padding-bottom: 0; }
.v2-screen-management aside .v2-card:nth-child(2) .v2-raillist-item { padding-top: 1px; padding-bottom: 1px; }
.v2-screen-management aside .v2-card:nth-child(3) .v2-card-body { padding-bottom: 6px; }
.v2-screen-management aside .v2-card:nth-child(3) .v2-raillist-item { padding-top: 3px; padding-bottom: 3px; }
.v2-screen-management aside .v2-card:last-child .v2-card-body { padding-bottom: 28px; }

/* Student detail — align the profile/record stack with the approved rhythm. */
.v2-screen-student-detail .v2-content { padding-top: 25px; }
.v2-screen-student-detail .v2-grid-main > .v2-stack:not(aside) { gap: 17px; }

/* Assignment setup — match the wider, less compressed planning workflow. */
.v2-screen-homework-assign .v2-content { padding-top: 30px; padding-right: 16px; gap: 24px; }
.v2-screen-homework-assign > .v2-side-mentor.is-compact { width: 274px; }
.v2-screen-homework-assign .v2-pagehead { position: relative; }
.v2-screen-homework-assign .v2-pagehead-actions {
  position: absolute;
  left: 430px;
  margin-left: 0;
}
.v2-screen-homework-assign .v2-pagehead.is-md h1 { font-size: 31px; }
.v2-screen-homework-assign .v2-pagehead .v2-sub { margin-top: 10px; }
.v2-screen-homework-assign .v2-grid-main {
  grid-template-columns: minmax(0, 1fr) 299px !important;
  column-gap: 63px !important;
}
.v2-screen-homework-assign .v2-step { width: 120px; gap: 10px; }
.v2-screen-homework-assign .v2-scoperow { padding-top: 14px; padding-bottom: 10px; gap: 34px; }
.v2-screen-homework-assign .v2-grid-main > .v2-stack.is-sm { gap: 30px; }
.v2-screen-homework-assign .v2-grid-main > aside {
  padding-top: 32px;
}
.v2-screen-homework-assign .v2-grid-main > aside.v2-stack.is-sm { gap: 20px; }
.v2-assignment-rail-title {
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: var(--v2-ink);
  letter-spacing: -.03em;
}
.v2-screen-homework-assign .v2-commentcard .v2-card-body { padding: 9px; }
.v2-comment-input { display: block; position: relative; }
.v2-comment-input .v2-textarea { height: 152px; min-height: 152px; padding-bottom: 34px; }
.v2-comment-input #commentCount { position: absolute; right: 12px; bottom: 10px; }
.v2-screen-homework-assign .v2-scope-tree { padding: 20px 24px; }
.v2-screen-homework-assign .v2-scope-matrix { padding: 20px 24px; }
.v2-screen-homework-assign .v2-card-head { padding: 16px 24px; }
.v2-screen-homework-assign .v2-recobar { min-height: 68px; }

/* Assignment progress — preserve the 257 / 326 px rails and add vertical air. */
.v2-screen-homework-progress .v2-content { padding-top: 30px; gap: 16px; }
.v2-screen-homework-progress > .v2-side-mentor.is-compact { width: 260px; }
.v2-screen-homework-progress .v2-content > .v2-card:first-of-type { margin-top: 20px; }
.v2-screen-homework-progress .v2-summaryrow { min-height: 112px; }
.v2-screen-homework-progress .v2-summaryrow.v2-card-body { padding: 18px 20px; }
.v2-screen-homework-progress .v2-grid-main { row-gap: 18px !important; }
.v2-screen-homework-progress .v2-cell { width: 42px; height: 42px; }

/* Student homework — restore the header divider and planning-frame density. */
.v2-screen-student-homework .v2-content { padding-top: 29px; gap: 18px; }
.v2-screen-student-homework .v2-pagehead {
  padding-bottom: 27px;
  border-bottom: 1px solid var(--v2-line);
}
.v2-screen-student-homework .v2-statcard { min-height: 84px !important; padding: 16px 18px; }
.v2-screen-student-homework .v2-featured { gap: 30px; }
.v2-screen-student-homework .v2-featured-lead { min-width: 270px; }
.v2-screen-student-homework .v2-featured-steps { min-width: 175px; }
.v2-screen-student-homework .v2-inboxstrip { padding-top: 3px; padding-bottom: 3px; }
.v2-screen-student-homework .v2-hwrow { padding-top: 9px; padding-bottom: 9px; }

/* Progress modal — approved frame uses a larger subject tile and progress ring. */
.v2-modal.v2-progress-modal {
  height: 857px;
  max-height: calc(100vh - 48px);
  position: relative;
  top: 6px;
}
.v2-progress-modal .v2-progress-top {
  gap: 38px;
  padding: 0 12px 18px;
  flex-wrap: nowrap;
}
.v2-progress-modal .v2-modal-head { padding-bottom: 2px; }
.v2-progress-modal .v2-subject-tile { width: 118px; height: 114px; }
.v2-progress-modal .v2-subject-tile b { font-size: 21px; }
.v2-progress-modal .v2-subject-tile i { font-size: 32px; }
.v2-progress-modal .v2-progress-title { flex: 0 0 375px; min-width: 0; }
.v2-progress-modal .v2-progress-title h3 { font-size: 27px; }
.v2-progress-modal .v2-progress-figs { flex: 0 0 219px; min-width: 0; margin-left: 26px; }
.v2-progress-modal .v2-commentbar { padding: 8px 14px; }
.v2-progress-modal .v2-progress-cols { grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; margin-top: 21px; }
.v2-progress-modal .v2-progress-side { padding-left: 24px; }
.v2-progress-modal .v2-cell { width: 44px; height: 44px; }

/* Messages modal — same width, but positioned and sized like the approved frame. */
.v2-modal.v2-messages-modal {
  height: 808px;
  max-height: calc(100vh - 32px);
  position: relative;
  top: 27px;
}
.v2-messages-modal .v2-modal-body { padding-right: 26px; }
.v2-messages-modal .v2-threadlayout {
  grid-template-columns: 369px minmax(0, 1fr);
  gap: 26px;
  height: 630px;
}
.v2-messages-modal .v2-threadlist,
.v2-messages-modal .v2-threaditem-body { min-width: 0; }
.v2-messages-modal .v2-threadlist-scroll {
  overflow-x: hidden;
  overflow-y: auto;
}
.v2-messages-modal .v2-bubble-row > div { max-width: 60%; }
.v2-messages-modal .v2-bubble { max-width: none; }

@media (max-width: 1280px) {
  .v2-screen-management .v2-statcard { min-height: 132px; padding: 18px 16px; }
  .v2-screen-management .v2-stat-icon { width: 52px; height: 52px; }
  .v2-screen-homework-assign .v2-grid-main > aside { padding-top: 0; }
  .v2-progress-modal .v2-progress-top { flex-wrap: wrap; gap: 24px; }
  .v2-progress-modal .v2-progress-title { flex: 1 1 320px; }
}

@media (max-width: 1024px) {
  .v2-screen-management .v2-content,
  .v2-screen-homework-assign .v2-content,
  .v2-screen-homework-progress .v2-content { padding-top: 24px; }
  .v2-progress-modal .v2-progress-cols { grid-template-columns: minmax(0, 1fr); }
  .v2-modal.v2-progress-modal,
  .v2-modal.v2-messages-modal { height: auto; top: 0; }
}