/*
 * Rubric CLO Wizard — laptop-first.
 *
 * WHY LAPTOP-FIRST AND NOT MOBILE-FIRST. The job is reading a wide grid of marks: one row per
 * student, one column per rubric criterion, with a dozen more columns of derived figures. That
 * shape does not reduce to a phone usefully, and the people doing it are at a desk at the end of
 * a term with a gradebook open. So the layout is designed for 1280-1680px, degrades honestly to
 * a tablet, and on a phone shows the steps and the summary but sends wide tables to a scroller
 * rather than pretending to reflow them.
 *
 * The density is deliberate too: 13px in data tables, tight line height, numbers right-aligned
 * and tabular. A marks grid set at comfortable reading size means scrolling to compare two
 * students, which is the main thing a teacher does here.
 */

.rcw {
	--rcw-ink: #0f172a;
	--rcw-ink-2: #334155;
	--rcw-ink-3: #64748b;
	--rcw-line: #e2e8f0;
	--rcw-line-2: #cbd5e1;
	--rcw-bg: #ffffff;
	--rcw-bg-2: #f8fafc;
	--rcw-bg-3: #f1f5f9;
	--rcw-navy: #1e3a5f;
	--rcw-navy-2: #16304f;
	--rcw-accent: #0d6a7a;
	--rcw-good: #0f7b55;
	--rcw-good-bg: #ecfdf5;
	--rcw-warn: #92500e;
	--rcw-warn-bg: #fffbeb;
	--rcw-bad: #9f1239;
	--rcw-bad-bg: #fff1f2;
	--rcw-radius: 10px;
	--rcw-shadow: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.14);

	color: var(--rcw-ink);
	font: 400 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
}
.rcw *, .rcw *::before, .rcw *::after { box-sizing: inherit; }

/* ---------------------------------------------------------------- shell */
.rcw-shell {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	max-width: 1680px;
	margin: 0 auto;
	padding: 8px 0 48px;
}
.rcw-rail { position: sticky; top: 24px; }
.rcw-main { min-width: 0; }

.rcw-brand { padding: 0 0 20px; border-bottom: 1px solid var(--rcw-line); margin-bottom: 20px; }
.rcw-brand__name { font-size: 16px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.rcw-brand__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--rcw-ink-3); line-height: 1.45; }

/* ------------------------------------------------------------ step rail */
.rcw-steps { list-style: none; margin: 0; padding: 0; }
.rcw-step {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 9px 10px 9px 8px;
	border-radius: 8px;
	position: relative;
}
/* The connector between the markers: drawn on the item rather than between them so a step
   appearing or disappearing cannot leave a dangling line. */
.rcw-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 20.5px; top: 35px; bottom: -4px;
	width: 1px; background: var(--rcw-line-2);
}
.rcw-step--done:not(:last-child)::before { background: var(--rcw-accent); }
.rcw-step__mark {
	width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center;
	font-size: 12px; font-weight: 650;
	border: 1.5px solid var(--rcw-line-2);
	background: var(--rcw-bg); color: var(--rcw-ink-3);
	position: relative; z-index: 1;
}
.rcw-step__label { font-size: 13.5px; font-weight: 500; color: var(--rcw-ink-3); padding-top: 3px; }
.rcw-step__note { display: block; font-size: 12px; font-weight: 400; color: var(--rcw-ink-3); opacity: .85; margin-top: 1px; }
.rcw-step--done .rcw-step__mark { background: var(--rcw-accent); border-color: var(--rcw-accent); color: #fff; }
.rcw-step--done .rcw-step__label { color: var(--rcw-ink-2); }
.rcw-step--active { background: var(--rcw-bg-3); }
.rcw-step--active .rcw-step__mark { border-color: var(--rcw-navy); color: var(--rcw-navy); border-width: 2px; }
.rcw-step--active .rcw-step__label { color: var(--rcw-ink); font-weight: 600; }
.rcw-step--clickable { cursor: pointer; }
.rcw-step--clickable:hover { background: var(--rcw-bg-3); }

/* ----------------------------------------------------------------- card */
.rcw-card {
	background: var(--rcw-bg);
	border: 1px solid var(--rcw-line);
	border-radius: var(--rcw-radius);
	box-shadow: var(--rcw-shadow);
	margin-bottom: 20px;
	overflow: hidden;
}
.rcw-card__head { padding: 20px 24px 16px; border-bottom: 1px solid var(--rcw-line); }
.rcw-card__head h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.012em; }
.rcw-card__head p { margin: 6px 0 0; color: var(--rcw-ink-3); font-size: 13.5px; max-width: 76ch; }
.rcw-card__body { padding: 20px 24px 24px; }
.rcw-card__foot {
	padding: 16px 24px; background: var(--rcw-bg-2); border-top: 1px solid var(--rcw-line);
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.rcw-card__foot .rcw-spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------- forms */
.rcw-field { margin-bottom: 18px; max-width: 560px; }
.rcw-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.rcw-field .rcw-hint { font-size: 12.5px; color: var(--rcw-ink-3); margin: 6px 0 0; line-height: 1.5; }
.rcw-input, .rcw-select {
	width: 100%; padding: 10px 12px; font: inherit; font-size: 14.5px;
	border: 1px solid var(--rcw-line-2); border-radius: 8px; background: var(--rcw-bg);
	color: var(--rcw-ink); transition: border-color .12s, box-shadow .12s;
}
.rcw-input:focus, .rcw-select:focus {
	outline: none; border-color: var(--rcw-navy);
	box-shadow: 0 0 0 3px rgba(30,58,95,.12);
}
.rcw-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.rcw-input--sm { padding: 6px 8px; font-size: 13px; }
.rcw-field--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; max-width: 760px; }

.rcw-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px; font: inherit; font-size: 14.5px; font-weight: 550;
	border-radius: 8px; border: 1px solid transparent; cursor: pointer;
	background: var(--rcw-navy); color: #fff;
	transition: background .12s, box-shadow .12s, opacity .12s;
}
.rcw-btn:hover:not(:disabled) { background: var(--rcw-navy-2); }
.rcw-btn:focus-visible { outline: 2px solid var(--rcw-navy); outline-offset: 2px; }
.rcw-btn:disabled { opacity: .5; cursor: not-allowed; }
.rcw-btn--ghost { background: transparent; color: var(--rcw-ink-2); border-color: var(--rcw-line-2); }
.rcw-btn--ghost:hover:not(:disabled) { background: var(--rcw-bg-3); }
.rcw-btn--accent { background: var(--rcw-accent); }
.rcw-btn--accent:hover:not(:disabled) { background: #0a5663; }
.rcw-btn--sm { padding: 6px 12px; font-size: 13px; }

/* -------------------------------------------------------------- banners */
.rcw-banner {
	border: 1px solid var(--rcw-line-2); border-left-width: 3px;
	border-radius: 8px; padding: 14px 16px; margin: 0 0 16px;
	font-size: 13.8px; line-height: 1.55;
}
.rcw-banner h3 { margin: 0 0 6px; font-size: 14px; font-weight: 650; }
.rcw-banner ul { margin: 8px 0 0; padding-left: 20px; }
.rcw-banner li { margin: 4px 0; }
.rcw-banner--bad { background: var(--rcw-bad-bg); border-color: #fda4af; border-left-color: var(--rcw-bad); color: #7f1d2e; }
.rcw-banner--warn { background: var(--rcw-warn-bg); border-color: #fcd34d; border-left-color: #b45309; color: #78350f; }
.rcw-banner--good { background: var(--rcw-good-bg); border-color: #6ee7b7; border-left-color: var(--rcw-good); color: #065f46; }
.rcw-banner--info { background: var(--rcw-bg-2); border-color: var(--rcw-line-2); border-left-color: var(--rcw-navy); color: var(--rcw-ink-2); }

/* --------------------------------------------------------------- tables */
.rcw-tablewrap { overflow-x: auto; border: 1px solid var(--rcw-line); border-radius: 8px; background: var(--rcw-bg); }
.rcw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rcw-table th, .rcw-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--rcw-line); white-space: nowrap; }
.rcw-table thead th {
	position: sticky; top: 0; z-index: 2;
	background: var(--rcw-navy); color: #fff; font-weight: 600; font-size: 12px;
	letter-spacing: .02em; border-bottom: none;
}
.rcw-table tbody tr:last-child td { border-bottom: none; }
.rcw-table tbody tr:hover td { background: var(--rcw-bg-2); }
.rcw-table .rcw-num { text-align: right; font-variant-numeric: tabular-nums; }
.rcw-table .rcw-wrap { white-space: normal; min-width: 240px; }
.rcw-table tfoot td { font-weight: 650; background: var(--rcw-bg-3); border-top: 2px solid var(--rcw-line-2); }
/* The first column sticks so a student's name stays visible while scrolling a wide marks grid —
   the single most useful thing in a table this shape. */
.rcw-table--sticky td:first-child, .rcw-table--sticky th:first-child {
	position: sticky; left: 0; z-index: 1; background: var(--rcw-bg);
	box-shadow: 1px 0 0 var(--rcw-line);
}
.rcw-table--sticky thead th:first-child { z-index: 3; background: var(--rcw-navy); }
.rcw-table--sticky tbody tr:hover td:first-child { background: var(--rcw-bg-2); }

/* ---------------------------------------------------------------- bits */
.rcw-pill {
	display: inline-block; padding: 2px 8px; border-radius: 999px;
	font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
	background: var(--rcw-bg-3); color: var(--rcw-ink-2);
}
.rcw-pill--good { background: var(--rcw-good-bg); color: var(--rcw-good); }
.rcw-pill--warn { background: var(--rcw-warn-bg); color: var(--rcw-warn); }
.rcw-pill--bad { background: var(--rcw-bad-bg); color: var(--rcw-bad); }
.rcw-pill--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; }

.rcw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); gap: 1px; background: var(--rcw-line); border: 1px solid var(--rcw-line); border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.rcw-kpi { background: var(--rcw-bg); padding: 14px 16px; }
.rcw-kpi__v { font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.rcw-kpi__l { font-size: 12px; color: var(--rcw-ink-3); margin-top: 3px; line-height: 1.35; }

.rcw-ident { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 24px; }
.rcw-ident dt { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--rcw-ink-3); }
.rcw-ident dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 500; }

.rcw-courselist { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.rcw-course {
	display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center;
	padding: 12px 14px; border: 1px solid var(--rcw-line); border-radius: 8px;
	cursor: pointer; background: var(--rcw-bg); text-align: left; font: inherit; width: 100%;
	transition: border-color .12s, background .12s;
}
.rcw-course:hover { border-color: var(--rcw-navy); background: var(--rcw-bg-2); }
/* Both are spans inside a span, so each needs to be told it is a block — without it the course
   name and its code run together on one line. */
.rcw-course__t { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.rcw-course__m { display: block; font-size: 12.5px; color: var(--rcw-ink-3); margin-top: 2px; }

.rcw-split { border: 1px solid var(--rcw-line); border-radius: 8px; padding: 16px; margin-bottom: 14px; background: var(--rcw-bg-2); }
.rcw-split__h { font-weight: 650; font-size: 14.5px; margin-bottom: 4px; }
.rcw-split__rows { display: grid; gap: 10px; margin-top: 12px; max-width: 520px; }
.rcw-split__row { display: grid; grid-template-columns: minmax(0,1fr) 108px; gap: 12px; align-items: center; }
.rcw-split__sum { font-size: 12.5px; margin-top: 10px; font-weight: 600; }

.rcw-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.rcw-pre {
	background: var(--rcw-ink); color: #e2e8f0; padding: 14px 16px; border-radius: 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
	line-height: 1.7; overflow-x: auto; white-space: pre; margin: 0 0 12px;
}
.rcw-muted { color: var(--rcw-ink-3); font-size: 13px; }
.rcw-sect { margin: 26px 0 12px; font-size: 15px; font-weight: 650; letter-spacing: -.008em; }
.rcw-sect:first-child { margin-top: 0; }
.rcw-sect__note { font-weight: 400; font-size: 12.5px; color: var(--rcw-ink-3); display: block; margin-top: 3px; }

.rcw-spinner {
	display: inline-block; width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
	animation: rcw-spin .7s linear infinite;
}
.rcw-btn--ghost .rcw-spinner { border-color: rgba(15,23,42,.2); border-top-color: var(--rcw-ink-2); }
@keyframes rcw-spin { to { transform: rotate(360deg); } }
.rcw-loading { display: flex; align-items: center; gap: 10px; color: var(--rcw-ink-3); font-size: 13.5px; padding: 20px 0; }
.rcw-loading .rcw-spinner { border-color: rgba(15,23,42,.18); border-top-color: var(--rcw-navy); }

/* The in-app credit, repeated in the WordPress footer by the plugin for every page. */
.rcw-credit {
	margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rcw-line);
	text-align: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--rcw-ink-3);
}

.rcw-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- narrower screens */
@media (max-width: 1080px) {
	.rcw-shell { grid-template-columns: 1fr; gap: 20px; }
	.rcw-rail { position: static; }
	.rcw-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px; }
	.rcw-step:not(:last-child)::before { display: none; }
	.rcw-step__note { display: none; }
}
@media (max-width: 640px) {
	.rcw-card__head, .rcw-card__body { padding-left: 16px; padding-right: 16px; }
	.rcw-card__foot { padding-left: 16px; padding-right: 16px; }
	.rcw-kpi__v { font-size: 20px; }
}

@media print {
	.rcw-rail, .rcw-card__foot, .rcw-btn { display: none !important; }
	.rcw-shell { display: block; max-width: none; }
	.rcw-card { box-shadow: none; break-inside: avoid; border-color: #cbd5e1; }
	.rcw-table th, .rcw-table td { white-space: normal; }
}

/* --------------------------------------------------- course list filters */
/* Term first and wider, because it is the control that does the work; search is the fallback
   for a teacher with a dozen courses in one term. */
.rcw-filters {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 14px;
	align-items: end;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--rcw-line);
}
.rcw-filters label {
	display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px;
}
@media (max-width: 720px) { .rcw-filters { grid-template-columns: 1fr; } }

/* ------------------------------------------- columns, grouped by assignment */
/* A Mid and a Final both holding Q1, Q2, Q3 are different columns with different marks. A flat
   list of identical-looking rows invites exactly the mistake it looks like, so each assignment
   gets its own heading and its own table. */
.rcw-asg { margin-bottom: 18px; }
.rcw-asg__h {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	padding: 0 2px 8px;
}
.rcw-asg__n { font-size: 14.5px; font-weight: 650; letter-spacing: -.006em; }
.rcw-asg__m { display: block; font-size: 12px; color: var(--rcw-ink-3); margin-top: 2px; }
.rcw-asg__h > span:first-child { flex: 1 1 auto; min-width: 0; }

/* -------------------------------------------------------- bulk tagging */
.rcw-bulk {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 10px; margin-bottom: 20px;
}
.rcw-bulk__row {
	display: grid; grid-template-columns: minmax(0, 1fr) 164px; gap: 12px; align-items: center;
	padding: 10px 12px; border: 1px solid var(--rcw-line); border-radius: 8px; background: var(--rcw-bg-2);
}
.rcw-bulk__label {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
.rcw-bulk__n { display: block; font-size: 11.5px; color: var(--rcw-ink-3); margin-top: 2px; }

/* The LDL picker inside a table cell: a select inherits the cell's width, which truncates
   "Not recorded" to "Not rec…" and makes every option unreadable. */
.rcw-ldlcell select { min-width: 148px; }

/* ----------------------------------------------------- the sample sheets */
.rcw-samples { display: grid; gap: 10px; margin: 14px 0 0; }
.rcw-sample {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
	padding: 12px 14px; border: 1px solid var(--rcw-line); border-radius: 8px; background: var(--rcw-bg-2);
}
.rcw-sample__t { display: block; font-size: 14px; font-weight: 600; }
.rcw-sample__n { display: block; font-size: 12.5px; color: var(--rcw-ink-3); margin-top: 3px; line-height: 1.5; }

/* The gradebook group editor: a derived grouping a teacher confirms or corrects. */
.rcw-select--sm { padding: 5px 26px 5px 8px; font-size: 13px; min-width: 150px; }
.rcw-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--rcw-ink-2); cursor: pointer; }
.rcw-check input { width: 15px; height: 15px; accent-color: var(--rcw-navy); cursor: pointer; }
.rcw-sample__b { display: flex; gap: 8px; flex-shrink: 0; }

/* ---------------------------------------------------------------- the four files
   One row per deliverable: what it is, one line of why, and the button. A grid rather than a
   list of buttons because the four are not interchangeable -- a teacher picking between them
   needs the sentence more than the label. */
.rcw-files { display: flex; flex-direction: column; gap: 2px; }
.rcw-files__row {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
	padding: 12px 0; border-top: 1px solid var(--rcw-line, #e6e6ea);
}
.rcw-files__row:first-child { border-top: 0; }
.rcw-files__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rcw-files__text strong { font-weight: 600; }
.rcw-files__text .rcw-muted { font-size: 13px; line-height: 1.45; }
/* The button column does not shrink: a long reason (the no-TeX message is a whole sentence)
   would otherwise squeeze "Download" onto three lines. */
.rcw-files__act { flex: 0 0 auto; display: flex; align-items: center; min-height: 32px; }
@media (max-width: 640px) {
	.rcw-files__row { flex-direction: column; gap: 10px; }
	.rcw-files__act { align-self: flex-start; }
}