/* =====================================================================
   CSI.CareerTrack.Client — design pass (Corey, 2026-10-08)

   Styles for the pages the design pass rebuilt on CSI.UI parts: My courses,
   Students, the student page, Sections, the section page, Grading and
   Settings. Kept apart from app.css so the course page redesign, which edits
   app.css, and this pass never touch the same lines.

   Same rule as app.css: every colour is a CSI.UI token that is actually
   declared (tokens/, themes/). Grep before adding one.
   ==================================================================== */

/* ── Page rhythm ───────────────────────────────────────────────────── */

.ct-stack { display: flex; flex-direction: column; gap: var(--csi-space-lg); }
.ct-stack-sm { display: flex; flex-direction: column; gap: var(--csi-space-sm); }
.ct-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--csi-space-sm); }
.ct-row-end { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--csi-space-md); }
.ct-small { font-size: 0.8125rem; }

/* ── People: a name, a role tag, linked to the directory ───────────── */

/* #2123: on the token scale; 2px and 6px were off it, so each takes the nearest step. */
.ct-people { display: flex; flex-direction: column; gap: var(--csi-space-1); }
.ct-people-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--csi-space-2); }
.ct-people-role { font-size: var(--csi-text-xs); color: var(--csi-fg-muted); }
.ct-person-link:focus-visible {
    outline: 2px solid var(--csi-color-brand-500);
    outline-offset: 1px;
}

/* ── Fact cards under a page header (section page, student page) ───── */

.ct-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--csi-space-md);
}

.ct-fact {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: var(--csi-space-md) var(--csi-space-lg);
    background: var(--csi-bg-raised);
    border: 1px solid var(--csi-border-subtle);
    border-radius: var(--csi-radius-lg);
}

.ct-fact-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--csi-fg-muted);
}

.ct-fact-value { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ct-fact-value small { font-size: 0.8125rem; font-weight: 400; color: var(--csi-fg-secondary); }
.ct-fact-note { margin: 0; font-size: 0.8125rem; color: var(--csi-fg-muted); }

/* ── Key / value lists inside a card ──────────────────────────────── */

.ct-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--csi-space-sm) var(--csi-space-lg);
    margin: 0;
}

.ct-kv dt { color: var(--csi-fg-muted); font-weight: 600; font-size: 0.875rem; }
.ct-kv dd { margin: 0; }

/* ── Card headings ─────────────────────────────────────────────────── */

.ct-card-title { margin: 0; font-size: 1rem; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--csi-space-sm); }
.ct-card-sub { margin: 0.125rem 0 0; font-size: 0.875rem; color: var(--csi-fg-secondary); }
.ct-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--csi-space-md); }

/* ── Small data tables inside cards (a handful of rows, no toolbar) ── */

.ct-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ct-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--csi-border-default);
    color: var(--csi-fg-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.ct-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--csi-border-subtle); vertical-align: top; }
.ct-table tr:last-child td { border-bottom: none; }
.ct-table-wrap { overflow-x: auto; }

/* ── Section page: history timeline ───────────────────────────────── */

.ct-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ct-timeline-row {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    gap: 0.25rem var(--csi-space-md);
    align-items: start;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--csi-border-subtle);
}
.ct-timeline-row:last-child { border-bottom: none; }
.ct-timeline-when { font-size: 0.8125rem; color: var(--csi-fg-muted); }
.ct-timeline-detail { grid-column: 2 / -1; font-size: 0.875rem; padding-left: 0.5rem; border-left: 3px solid var(--csi-color-warning-100); }
.ct-timeline-detail.is-danger { border-left-color: var(--csi-color-danger-100); }

@media (max-width: 640px) {
    .ct-timeline-row { grid-template-columns: minmax(0, 1fr); }
    .ct-timeline-detail { grid-column: 1; }
}

/* ── Section page: the link chooser ───────────────────────────────── */

.ct-linkrow {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.4fr);
    gap: 0.25rem var(--csi-space-md);
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--csi-border-subtle);
}
.ct-linkrow:last-child { border-bottom: none; }

/* Caleb feedback 06B/05: "Checked ..." and Check again sit beside the card title; a hand pick stacks its hint under it. */
.ct-existing-head { justify-content: space-between; }
.ct-existing-head .ct-card-title { margin-right: auto; }
.ct-existing-pickcell { display: flex; flex-direction: column; gap: var(--csi-space-1); }

/* ── Section page: the student drawer ─────────────────────────────── */

.ct-drawer-body { display: flex; flex-direction: column; gap: var(--csi-space-lg); }
.ct-drawer-body:focus { outline: none; }
/* #2379: Previous and Next at the top of the Final grade check slide-out. */
.ct-drawer-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--csi-space-sm); }
.ct-drawer-section h3 { margin: 0 0 var(--csi-space-sm); font-size: 0.875rem; font-weight: 700; }
.ct-student-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--csi-color-brand-700);
    text-align: left;
    cursor: pointer;
}
.ct-student-button:hover { text-decoration: underline; }
.ct-student-button:focus-visible { outline: 2px solid var(--csi-color-brand-500); outline-offset: 2px; }
.ct-progress-cell { display: inline-flex; align-items: center; gap: 0.5rem; font-variant-numeric: tabular-nums; }

/* ── Grading: activities beside the queue, the form beside both ────── */

.ct-grading {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr);
    gap: var(--csi-space-lg);
    align-items: start;
}

/* Inline submissions: the form and the submission share the side column, which scrolls on its own when the work is long. */
.ct-grading-form {
    position: sticky;
    top: var(--csi-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--csi-space-md);
    max-height: calc(100vh - 2 * var(--csi-space-lg));
    overflow-y: auto;
}

@media (max-width: 1000px) {
    .ct-grading { grid-template-columns: minmax(0, 1fr); }
    .ct-grading-form { position: static; max-height: none; overflow-y: visible; }
}

.ct-grading-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--csi-space-sm);
}

.ct-row-actions { display: inline-flex; gap: 0.375rem; align-items: center; }

.ct-submission-frame,
.ct-attachment-pdf {
    display: block;
    width: 100%;
    border: 1px solid var(--csi-border-subtle);
    border-radius: var(--csi-radius-md);
    background: #fff;
}
.ct-submission-frame { height: 24rem; }
.ct-attachment-pdf { height: 32rem; }

.ct-submission-link { display: flex; flex-direction: column; gap: 0.125rem; overflow-wrap: anywhere; }
.ct-submission-link a { font-weight: 600; }

.ct-attachment {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: var(--csi-space-sm);
    border-top: 1px solid var(--csi-border-subtle);
}
.ct-attachment-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--csi-space-sm); overflow-wrap: anywhere; }
.ct-attachment-image { max-width: 100%; height: auto; border-radius: var(--csi-radius-md); }

/* #2378: a video in a player, and a spreadsheet or CSV file as a scrolling grid. */
.ct-attachment-video { width: 100%; max-height: 32rem; border-radius: var(--csi-radius-md); background: #000; }
.ct-attachment-sheets { display: flex; flex-direction: column; gap: var(--csi-space-sm); }
.ct-attachment-sheet { max-height: 28rem; overflow: auto; border: 1px solid var(--csi-border-subtle); border-radius: var(--csi-radius-md); }
.ct-attachment-sheet table { border-collapse: collapse; font-size: 0.8125rem; }
.ct-attachment-sheet td { border: 1px solid var(--csi-border-subtle); padding: 0.25rem 0.5rem; white-space: pre-wrap; vertical-align: top; }
.ct-attachment-sheet tr:first-child td { background: var(--csi-bg-page); font-weight: 600; }
.ct-attachment-text {
    max-height: 28rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem;
    border-radius: var(--csi-radius-md);
    background: var(--csi-bg-page);
    font-family: inherit;
    font-size: 0.875rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ct-submission-comments { display: flex; flex-direction: column; gap: 0.5rem; }
.ct-submission-comment p { margin: 0.125rem 0 0; white-space: pre-wrap; }

.ct-activities { display: flex; flex-direction: column; gap: 0.375rem; }
.ct-activity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--csi-space-sm);
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--csi-border-subtle);
    border-radius: var(--csi-radius-md);
    background: var(--csi-bg-raised);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.ct-activity:hover { border-color: var(--csi-border-strong); }
.ct-activity[aria-pressed="true"] { border-color: var(--csi-color-brand-500); background: var(--csi-color-brand-50); }
.ct-activity:focus-visible { outline: 2px solid var(--csi-color-brand-500); outline-offset: 1px; }
.ct-activity-name { display: flex; flex-direction: column; min-width: 0; }
.ct-activity-name span { font-size: 0.8125rem; color: var(--csi-fg-muted); }

.ct-ratings { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ct-rating {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-full);
    background: var(--csi-bg-raised);
    font: inherit;
    font-size: 0.8125rem;
    color: inherit;
    cursor: pointer;
}
.ct-rating[aria-pressed="true"] { border-color: var(--csi-color-brand-500); background: var(--csi-color-brand-50); font-weight: 600; }
.ct-rating:focus-visible { outline: 2px solid var(--csi-color-brand-500); outline-offset: 1px; }

.ct-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--csi-space-sm);
    border-top: 1px solid var(--csi-border-subtle);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ct-selection-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--csi-space-sm);
    padding: 0.5rem 0.75rem;
    border-radius: var(--csi-radius-md);
    background: var(--csi-color-brand-50);
    font-size: 0.875rem;
}

/* ── Settings: student list choices ───────────────────────────────── */

/* #2122: each import kind is a CsiRadioGroup option, its name over one line saying what the list is. */
.ct-import-choice b { display: block; }
.ct-import-choice span { font-size: var(--csi-text-sm); color: var(--csi-fg-muted); }

.ct-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: var(--csi-space-lg);
    border: 2px dashed var(--csi-border-strong);
    border-radius: var(--csi-radius-lg);
    text-align: center;
    color: var(--csi-fg-secondary);
}

.ct-fieldset { border: none; margin: 0; padding: 0; }
.ct-fieldset legend { padding: 0; margin-bottom: var(--csi-space-sm); }
.ct-drop input[type="file"] { max-width: 100%; }

/* ── Settings, Courses: Import sections dialog ─────────────────────── */

.ct-section-import .ct-drop { padding: var(--csi-space-md); }
.ct-import-counts { gap: var(--csi-space-sm); }
.ct-import-outcome { white-space: nowrap; }

/* =====================================================================
   Grading redesign, Option B "list, then grade" (Corey, 2026-10-14)

   The list is a plain CSI data table; these style the grader that a row
   opens: a bar (back, position, previous/next, SpeedGrader), the student's
   work on the left (about two thirds) and the rubric or score and the
   comment on the right, which stays in view while the work scrolls.
   Narrow screens stack the work above the rubric. Additive only: the
   rules above for the old activity list and side form are left for a
   later tidy-up so this block merges cleanly with other page work.
   ==================================================================== */

.ct-grade-student { display: flex; flex-direction: column; min-width: 0; }

.ct-bulk { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--csi-space-sm); }

.ct-grader { display: flex; flex-direction: column; gap: var(--csi-space-md); outline: none; }

.ct-grader-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--csi-space-sm);
    padding: var(--csi-space-sm) var(--csi-space-md);
    border: 1px solid var(--csi-border-subtle);
    border-radius: var(--csi-radius-lg);
    background: var(--csi-bg-raised);
}
.ct-grader-nav { display: inline-flex; align-items: center; gap: var(--csi-space-1); }
.ct-grader-position { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* #2376: the next submissions read ahead; green ready, amber loading, grey failed (it is read again when opened). */
.ct-preload { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--csi-space-sm); }
.ct-preload-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--csi-color-warning-500); }
.ct-preload-dot[data-state="ready"] { background: var(--csi-color-success-500); }
.ct-preload-dot[data-state="failed"] { background: var(--csi-color-neutral-300); }
.ct-preload .ct-small { margin-left: 2px; white-space: nowrap; }
.ct-grader-spacer { flex: 1 1 auto; }

.ct-grader-panes {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: var(--csi-space-lg);
    align-items: start;
}

.ct-grader-side {
    position: sticky;
    top: var(--csi-space-lg);
    max-height: calc(100vh - 2 * var(--csi-space-lg));
    overflow-y: auto;
}

/* The work gets the room: taller frames than the old side column allowed. */
.ct-grader-work .ct-submission-frame { height: 32rem; }
.ct-grader-work .ct-attachment-pdf { height: 44rem; }

.ct-group-students { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.ct-criterion { display: flex; flex-direction: column; gap: 0.375rem; }
.ct-criterion-head { margin: 0; font-size: 0.875rem; }

/* A criterion's ratings as one segmented control, the most points first. */
.ct-segmented {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--csi-border-strong);
    border-radius: var(--csi-radius-md);
    overflow: hidden;
}
.ct-segmented .ct-segment {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    min-width: 5rem;
    border: none;
    border-left: 1px solid var(--csi-border-subtle);
    border-radius: 0;
    padding: 0.375rem 0.5rem;
    text-align: center;
}
.ct-segmented .ct-segment:first-child { border-left: none; }
.ct-segment-points { font-size: 0.75rem; color: var(--csi-fg-muted); font-variant-numeric: tabular-nums; }
.ct-segment[aria-pressed="true"] .ct-segment-points { color: inherit; }

.ct-keys { margin: 0; }

@media (max-width: 1000px) {
    .ct-grader-panes { grid-template-columns: minmax(0, 1fr); }
    .ct-grader-side { position: static; max-height: none; overflow-y: visible; }
}