/**
 * Student Dashboard design system.
 *
 * The only front-end stylesheet. Components use tokens; tokens default to the active
 * theme's presets (teal, then primary) and fall back to the built-in palette.
 * Catalogue and markup: .claude/skills/student-dashboard/references/design-system.md
 *
 * Sections: 1 tokens · 2 base · 3 layout · 4 sidebar · 5 page header · 6 cards and stats ·
 * 7 buttons · 8 forms · 9 tables · 10 badges and notices · 11 lists, details, tabs, filters,
 * pagination · 12 empty states · 13 chat · 14 sign-in · 15 utilities · 16 responsive · 17 print,
 * motion, forced colours · 18 dashboard home · 19 shared helpers · 20 calendar · 21 quizzes
 */

/* 1. Tokens ----------------------------------------------------------------- */
.stdash {
	--stdash-primary: var(--wp--preset--color--teal, var(--wp--preset--color--primary, #005b5c));
	/* Hover and pressed: the design's Primary deep. */
	--stdash-primary-strong: var(--wp--preset--color--teal-900, #00403f);
	--stdash-primary-deep: var(--wp--preset--color--teal-900, #00403f);
	--stdash-primary-soft: var(--wp--preset--color--teal-50, #f0f9fa);
	--stdash-primary-tint: var(--wp--preset--color--teal-100, #d9f1f2);
	--stdash-text: var(--wp--preset--color--ink, #0f172a);
	--stdash-muted: var(--wp--preset--color--slate, #475569);
	--stdash-border: var(--wp--preset--color--slate-200, #e2e8f0);
	--stdash-input-border: #64748b;
	--stdash-surface: #fff;
	/* Ground: never pure white, so white cards read as surfaces. */
	--stdash-canvas: var(--wp--preset--color--ground, #f5f8f8);
	--stdash-success: #166534;
	--stdash-success-soft: #dcfce7;
	--stdash-warning: var(--wp--preset--color--amber-800, #854d0e);
	--stdash-warning-soft: var(--wp--preset--color--amber-100, #fef3c7);
	/* Amber that carries white text (about 5:1): the sidebar's new-item count and the pending dot. */
	--stdash-warning-strong: #b45309;
	--stdash-danger: #b91c1c;
	--stdash-danger-soft: #fee2e2;
	--stdash-neutral: #334155;
	--stdash-neutral-soft: #f1f5f9;
	--stdash-border-soft: var(--wp--preset--color--slate-100, #f1f5f9);
	--stdash-focus: var(--stdash-primary);
	--stdash-radius: 8px;
	--stdash-radius-sm: 6px;
	--stdash-space-1: 0.25rem;
	--stdash-space-2: 0.5rem;
	--stdash-space-3: 0.75rem;
	--stdash-space-4: 1rem;
	--stdash-space-5: 1.25rem;
	--stdash-space-6: 1.75rem;
	--stdash-space-7: 2.5rem;
	--stdash-card-x: 1.5rem;
	--stdash-card-y: 1.25rem;
	--stdash-widget-min: 20rem;
	--stdash-shadow: 0 1px 2px 0 rgb(15 23 42 / 6%);
	--stdash-shadow-raised: 0 4px 6px -1px rgb(15 23 42 / 10%), 0 2px 4px -2px rgb(15 23 42 / 10%);
	--stdash-font-small: 0.875rem;
	--stdash-tap: 2.75rem;
	--stdash-sidebar: 16rem;
	--stdash-sticky-offset: calc(var(--ict-header-height, 5rem) + 1.5rem);
	/* The portal is a workspace, not an article: it runs wider than the theme's reading measure
	   so a wide screen shows more rows and another column of widgets. Themes can still narrow it. */
	--stdash-max: 86rem;
}

/* 2. Base ------------------------------------------------------------------- */
.stdash,
.stdash *,
.stdash *::before,
.stdash *::after {
	box-sizing: border-box;
}

/* The hidden attribute must beat component display rules (.stdash-button and friends),
   which are author styles and would otherwise override the user-agent [hidden] rule. */
.stdash [hidden] {
	display: none;
}

.stdash {
	width: 100%;
	max-width: calc(var(--stdash-max) + 2 * var(--wp--style--root--padding-left, 1.5rem));
	margin-inline: auto;
	padding: var(--stdash-space-6) var(--wp--style--root--padding-right, 1.5rem) var(--stdash-space-7);
	color: var(--stdash-text);
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.55;
}

/* Portal pages sit on the Ground colour; the theme's header and footer keep their own backgrounds. */
body.stdash-is-portal {
	background-color: var(--wp--preset--color--ground, #f5f8f8);
}

.stdash h1,
.stdash h2,
.stdash h3,
.stdash h4 {
	margin: 0;
	color: var(--stdash-text);
	line-height: 1.25;
}

.stdash h1 {
	font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
}

.stdash h2 {
	font-size: 1.25rem;
	font-weight: 700;
}

.stdash h3 {
	font-size: 1.0625rem;
	font-weight: 700;
}

/* :where() keeps this at class weight, so a component's own paragraph margin (written later) always wins. */
.stdash :where(p) {
	margin: 0 0 var(--stdash-space-3);
}

.stdash a {
	color: var(--stdash-primary);
	text-underline-offset: 0.2em;
}

.stdash a:hover {
	color: var(--stdash-primary-strong);
}

.stdash :focus-visible {
	outline: 3px solid var(--stdash-focus);
	outline-offset: 2px;
}

.stdash .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

.stdash-icon.dashicons {
	width: 1.25rem;
	height: 1.25rem;
	font-size: 1.25rem;
	line-height: 1;
	flex-shrink: 0;
}

/* In-place navigation: a slow load dims the screen and shows a thin bar; the heading takes focus without a ring. */
.stdash-content {
	position: relative;
	transition: opacity 0.15s ease;
}

.stdash-content.stdash-is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.stdash-content.stdash-is-loading::before {
	content: "";
	position: absolute;
	top: calc(var(--stdash-space-3) * -1);
	right: 0;
	left: 0;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent 0%, var(--stdash-primary) 50%, transparent 100%) 0 0 / 40% 100% no-repeat var(--stdash-primary-tint);
	animation: stdash-loading 1s ease-in-out infinite;
}

@keyframes stdash-loading {
	from {
		background-position: -40% 0;
	}

	to {
		background-position: 140% 0;
	}
}

.stdash-content h1[tabindex="-1"]:focus {
	outline: none;
}

/* 3. Layout ----------------------------------------------------------------- */
.stdash-app {
	display: grid;
	grid-template-columns: var(--stdash-sidebar) minmax(0, 1fr);
	gap: var(--stdash-space-6);
	align-items: start;
}

.stdash-content {
	min-width: 0;
}

.stdash-stack > * + * {
	margin-top: var(--stdash-space-5);
}

.stdash-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--stdash-space-5);
}

.stdash-grid > .stdash-col-full {
	grid-column: span 12;
}

.stdash-grid > .stdash-col-half {
	grid-column: span 6;
}

.stdash-grid > .stdash-col-third {
	grid-column: span 4;
}

.stdash-grid > .stdash-col-two-thirds {
	grid-column: span 8;
}

/* 4. Sidebar ---------------------------------------------------------------- */
.stdash-sidebar {
	position: sticky;
	top: var(--stdash-sticky-offset);
	display: flex;
	flex-direction: column;
	gap: var(--stdash-space-4);
	max-height: calc(100vh - var(--stdash-sticky-offset) - 1rem);
	padding: var(--stdash-space-4);
	overflow-y: auto;
	border: 1px solid var(--stdash-border);
	border-radius: var(--stdash-radius);
	background: var(--stdash-surface);
	box-shadow: var(--stdash-shadow);
}

.stdash-user {
	display: flex;
	gap: var(--stdash-space-3);
	align-items: center;
	padding-bottom: var(--stdash-space-4);
	border-bottom: 1px solid var(--stdash-border);
}

/* Name and role read as one block next to the avatar; a long name ends in "…" with the full name as a tooltip. */
.stdash-user__text {
	flex: 1 1 auto;
	min-width: 0;
}

.stdash-user .stdash-user__name {
	overflow: hidden;
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stdash-user .stdash-user__role {
	margin: 0.125rem 0 0;
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
	line-height: 1.4;
}

.stdash-user .stdash-nav-toggle {
	display: none;
}

/* Groups are split by a hairline so each heading reads as the start of a section. */
.stdash-nav__group + .stdash-nav__group {
	margin-top: var(--stdash-space-3);
	padding-top: var(--stdash-space-4);
	border-top: 1px solid var(--stdash-border-soft);
}

/* Headings are quiet labels (small, grey, spaced capitals, no icon) so they never read as links. */
.stdash .stdash-nav__heading {
	margin: 0 0 var(--stdash-space-2);
	padding-inline: var(--stdash-space-3);
	color: var(--stdash-input-border);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.stdash-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stdash-nav__link {
	display: flex;
	gap: var(--stdash-space-3);
	align-items: center;
	min-height: var(--stdash-tap);
	padding: var(--stdash-space-2) var(--stdash-space-3);
	border-radius: var(--stdash-radius-sm);
	color: var(--stdash-text) !important;
	font-weight: 600;
	text-decoration: none;
}

.stdash-nav__link:hover {
	background: var(--stdash-primary-soft);
	color: var(--stdash-primary-strong) !important;
}

.stdash-nav__link[aria-current="page"] {
	background: var(--stdash-primary);
	color: #fff !important;
	font-weight: 700;
}

/* Every menu item carries a teal icon; the active item turns it white with its text. */
.stdash-nav__link .stdash-icon {
	color: var(--stdash-primary);
}

.stdash-nav__link[aria-current="page"] .stdash-icon {
	color: inherit;
}

.stdash-nav__label {
	flex: 1;
}

.stdash-nav__count {
	min-width: 1.5rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--stdash-warning-strong);
	color: #fff;
	font-size: var(--stdash-font-small);
	font-weight: 700;
	line-height: 1.5rem;
	text-align: center;
}

.stdash-nav__link[aria-current="page"] .stdash-nav__count {
	background: #fff;
	color: var(--stdash-primary);
}

.stdash-signout {
	margin-top: auto;
	padding-top: var(--stdash-space-3);
	border-top: 1px solid var(--stdash-border);
}

/* 5. Page header ------------------------------------------------------------ */
.stdash-page-header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-4);
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--stdash-space-5);
}

.stdash-page-header__text {
	flex: 1 1 22rem;
	min-width: 0;
}

.stdash-page-header__description {
	margin: var(--stdash-space-2) 0 0;
	color: var(--stdash-muted);
}

.stdash-page-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-2);
}

.stdash-back {
	display: inline-flex;
	gap: var(--stdash-space-1);
	align-items: center;
	min-height: var(--stdash-tap);
	margin-bottom: var(--stdash-space-2);
	font-weight: 600;
	text-decoration: none;
}

/* Same arrow and underline treatment as the dashboard "All … >" links, pointing back. */
.stdash-back:hover .stdash-link-text {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.stdash-back .stdash-icon.dashicons {
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
	transition: transform 0.15s ease;
}

.stdash-back:hover .stdash-icon {
	transform: translateX(-2px);
}

/* 6. Cards and stats -------------------------------------------------------- */
.stdash-card {
	border: 1px solid var(--stdash-border);
	border-radius: var(--stdash-radius);
	background: var(--stdash-surface);
	box-shadow: var(--stdash-shadow);
}

.stdash-card__header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-3);
	align-items: center;
	justify-content: space-between;
	padding: var(--stdash-card-y) var(--stdash-card-x) var(--stdash-space-3);
	border-bottom: 1px solid var(--stdash-border-soft);
}

.stdash-card__title {
	font-size: 1.0625rem !important;
}

.stdash-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-2);
}

.stdash-card__body {
	padding: var(--stdash-space-4) var(--stdash-card-x);
}

.stdash-card__body > :last-child {
	margin-bottom: 0;
}

.stdash-card--flush .stdash-card__body {
	padding: 0;
}

.stdash-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--stdash-space-4);
}

.stdash-stat {
	padding: var(--stdash-space-4) var(--stdash-space-5);
	border: 1px solid var(--stdash-border);
	border-radius: var(--stdash-radius);
	background: var(--stdash-surface);
	box-shadow: var(--stdash-shadow);
}

.stdash-stat__value {
	display: block;
	color: var(--stdash-text);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
}

.stdash-stat__label {
	display: block;
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
	font-weight: 600;
}

.stdash-stat a {
	text-decoration: none;
}

/* 7. Buttons: one height for every variant (2px border on all) -------------- */
.stdash-button {
	display: inline-flex;
	gap: var(--stdash-space-2);
	align-items: center;
	justify-content: center;
	min-height: var(--stdash-tap);
	padding: calc(0.625rem - 2px) calc(1.25rem - 2px);
	border: 2px solid transparent;
	border-radius: var(--stdash-radius);
	background: transparent;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.stdash-button--primary {
	border-color: transparent;
	background: var(--stdash-primary);
	color: #fff !important;
}

.stdash-button--primary:hover {
	background: var(--stdash-primary-strong);
}

.stdash-button--secondary {
	border-color: var(--stdash-primary);
	color: var(--stdash-primary) !important;
}

.stdash-button--secondary:hover {
	background: var(--stdash-primary-soft);
}

.stdash-button--danger {
	border-color: var(--stdash-danger);
	color: var(--stdash-danger) !important;
}

.stdash-button--danger:hover {
	background: var(--stdash-danger-soft);
}

.stdash-button--ghost {
	color: var(--stdash-primary) !important;
}

.stdash-button--ghost:hover {
	background: var(--stdash-primary-soft);
}

.stdash-button--small {
	padding-inline: calc(0.875rem - 2px);
	font-size: var(--stdash-font-small);
}

.stdash-button--block {
	width: 100%;
}

.stdash-button[disabled],
.stdash-button[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.55;
}

.stdash-inline-form {
	display: inline;
	margin: 0;
}

.stdash-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-2);
	align-items: center;
}

/* 8. Forms ------------------------------------------------------------------ */
.stdash-form {
	margin: 0;
}

/* A group of fields shown only for some choices (see [data-stdash-show-when]); its fields stay on the form grid. */
.stdash-form__group {
	display: contents;
}

.stdash-form__group[hidden] {
	display: none;
}

.stdash-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--stdash-space-5);
}

/* Two fields side by side line their boxes up along the bottom, even when only one has help text. */
:is(.stdash-form__grid, .stdash-form__group) > .stdash-field:not(.stdash-field--wide) {
	display: flex;
	flex-direction: column;
}

:is(.stdash-form__grid, .stdash-form__group) > .stdash-field:not(.stdash-field--wide) > :is(.stdash-input, .stdash-select, .stdash-password) {
	margin-top: auto;
}

:is(.stdash-form__grid, .stdash-form__group) > .stdash-field--wide,
:is(.stdash-form__grid, .stdash-form__group) > .stdash-fieldset,
:is(.stdash-form__grid, .stdash-form__group) > .stdash-form__actions,
:is(.stdash-form__grid, .stdash-form__group) > .stdash-form__section {
	grid-column: 1 / -1;
}

.stdash-form__section {
	margin: var(--stdash-space-5) 0 var(--stdash-space-3);
	padding-top: var(--stdash-space-4);
	border-top: 1px solid var(--stdash-border);
}

.stdash-field {
	margin-bottom: var(--stdash-space-5);
}

.stdash-field__label,
.stdash-fieldset legend {
	display: block;
	margin-bottom: var(--stdash-space-1);
	font-weight: 600;
}

.stdash-field__required {
	color: var(--stdash-danger);
	font-weight: 700;
}

.stdash-field__optional {
	color: var(--stdash-muted);
	font-weight: 400;
}

.stdash-field__help {
	margin: 0 0 var(--stdash-space-2);
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
}

.stdash-field__error {
	display: flex;
	gap: var(--stdash-space-1);
	align-items: center;
	margin: 0 0 var(--stdash-space-2);
	color: var(--stdash-danger);
	font-size: var(--stdash-font-small);
	font-weight: 600;
}

.stdash-input,
.stdash-select,
.stdash-textarea {
	display: block;
	width: 100%;
	min-height: var(--stdash-tap);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--stdash-input-border);
	border-radius: var(--stdash-radius-sm);
	background: var(--stdash-surface);
	color: var(--stdash-text);
	font: inherit;
	line-height: 1.4;
}

.stdash-textarea {
	min-height: 7.5rem;
	resize: vertical;
}

/* Own chevron: the browser's arrow is tiny and sits against the border. */
.stdash-select:not([multiple]) {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-position: right 0.875rem center;
	background-repeat: no-repeat;
	background-size: 1rem;
	cursor: pointer;
	appearance: none;
}

.stdash-select:not([multiple]):hover {
	border-color: var(--stdash-primary);
}

.stdash-select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.stdash-input:focus,
.stdash-select:focus,
.stdash-textarea:focus {
	border-color: var(--stdash-primary);
	outline: 3px solid var(--stdash-focus);
	outline-offset: 1px;
}

.stdash-field--error .stdash-input,
.stdash-field--error .stdash-select,
.stdash-field--error .stdash-textarea {
	border: 2px solid var(--stdash-danger);
	background-color: #fffafa;
}

.stdash-input[type="file"] {
	padding: var(--stdash-space-3);
	border-style: dashed;
	background: var(--stdash-canvas);
	color: var(--stdash-muted);
	cursor: pointer;
}

.stdash-input[type="file"]::file-selector-button {
	min-height: var(--stdash-tap);
	margin-right: var(--stdash-space-3);
	padding: 0 calc(1rem - 2px);
	border: 2px solid var(--stdash-primary);
	border-radius: var(--stdash-radius);
	background: var(--stdash-surface);
	color: var(--stdash-primary);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.stdash-input[type="file"]:hover::file-selector-button {
	background: var(--stdash-primary-soft);
}

.stdash-fieldset {
	margin: 0 0 var(--stdash-space-5);
	padding: 0;
	border: 0;
}

.stdash-choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-1) var(--stdash-space-4);
}

.stdash-choice {
	display: inline-flex;
	gap: var(--stdash-space-2);
	align-items: center;
	min-height: var(--stdash-tap);
	cursor: pointer;
}

.stdash-choice input {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--stdash-primary);
}

.stdash-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-3);
	align-items: center;
	margin-top: var(--stdash-space-2);
}

.stdash-counter {
	margin-top: var(--stdash-space-1);
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
}

.stdash-error-summary {
	margin-bottom: var(--stdash-space-5);
	padding: var(--stdash-space-4) var(--stdash-space-5);
	border: 2px solid var(--stdash-danger);
	border-radius: var(--stdash-radius);
	background: #fef2f2;
}

.stdash .stdash-error-summary h2 {
	margin-bottom: var(--stdash-space-2);
	color: var(--stdash-danger);
	font-size: 1.0625rem;
}

.stdash-error-summary ul {
	margin: 0;
	padding-left: 1.25rem;
}

.stdash-error-summary a {
	color: var(--stdash-danger);
	font-weight: 600;
}

/* 9. Tables ----------------------------------------------------------------- */
.stdash-table-wrap {
	overflow-x: auto;
}

.stdash-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.stdash-table caption {
	padding: var(--stdash-space-3) var(--stdash-space-5);
	font-weight: 700;
	text-align: left;
}

.stdash-table th,
.stdash-table td {
	padding: var(--stdash-space-3) var(--stdash-space-4);
	border-bottom: 1px solid var(--stdash-border-soft);
	text-align: left;
	/* Text, pills and buttons in a row share one centre line. */
	vertical-align: middle;
}

.stdash-table thead th {
	background: var(--stdash-surface);
	border-bottom-color: var(--stdash-border);
	color: var(--stdash-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.stdash-table tbody tr:last-child td,
.stdash-table tbody tr:last-child th {
	border-bottom: 0;
}

.stdash-table tbody tr:hover {
	background: var(--stdash-primary-soft);
}

.stdash-table__primary {
	font-weight: 600;
}

.stdash-table__actions {
	text-align: right !important;
	white-space: nowrap;
}

/* Up to three buttons stay on one row, right-aligned with the heading; four or more pair up into tidy rows. */
.stdash-table__actions .stdash-actions {
	flex-wrap: nowrap;
	justify-content: flex-end;
}

.stdash-table__actions .stdash-actions:has(> :nth-child(4)) {
	flex-wrap: wrap;
	max-width: 16rem;
	margin-left: auto;
}

/* Dates and pills never break mid-value; text columns wrap at words instead. */
.stdash-table td time,
.stdash-table td .stdash-badge {
	white-space: nowrap;
}

/* A title with a short muted line under it, for rows that carry a note. */
.stdash-table__title,
.stdash-table__sub {
	display: block;
}

.stdash-table__sub {
	margin-top: 0.125rem;
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
	font-weight: 400;
}

/* 10. Badges and notices ---------------------------------------------------- */
.stdash-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	font-size: var(--stdash-font-small);
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

/* Statuses: a dot plus a word, never colour alone. */
.stdash-badge--status::before {
	content: "";
	flex-shrink: 0;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.375rem;
	border-radius: 50%;
	background: var(--stdash-badge-dot, currentcolor);
}

.stdash-badge--neutral {
	--stdash-badge-dot: var(--stdash-muted);
	background: var(--stdash-neutral-soft);
	color: var(--stdash-neutral);
}

.stdash-badge--muted {
	--stdash-badge-dot: #94a3b8;
	background: var(--stdash-neutral-soft);
	color: var(--stdash-neutral);
}

.stdash-badge--info {
	--stdash-badge-dot: var(--stdash-primary);
	background: var(--stdash-primary-tint);
	color: var(--stdash-primary-strong);
}

.stdash-badge--success {
	--stdash-badge-dot: #15803d;
	background: var(--stdash-success-soft);
	color: var(--stdash-success);
}

.stdash-badge--warning {
	--stdash-badge-dot: var(--stdash-warning-strong);
	background: var(--stdash-warning-soft);
	color: var(--stdash-warning);
}

.stdash-badge--danger {
	--stdash-badge-dot: var(--stdash-danger);
	background: var(--stdash-danger-soft);
	color: var(--stdash-danger);
}

.stdash-notices {
	display: grid;
	gap: var(--stdash-space-3);
	margin-bottom: var(--stdash-space-5);
}

.stdash-notice {
	display: flex;
	gap: var(--stdash-space-3);
	align-items: flex-start;
	padding: var(--stdash-space-3) var(--stdash-space-4);
	border: 1px solid var(--wp--preset--color--teal-200, #b8e3e6);
	border-left: 4px solid var(--stdash-primary);
	border-radius: var(--stdash-radius-sm);
	background: var(--stdash-primary-soft);
	color: var(--stdash-primary-strong);
}

.stdash-notice > .stdash-icon {
	margin-top: 0.125rem;
}

.stdash-notice p {
	margin: 0;
}

.stdash-notice--success {
	border-color: #bbf7d0;
	border-left-color: #15803d;
	background: #f0fdf4;
	color: var(--stdash-success);
}

.stdash-notice--error {
	border-color: #fecaca;
	border-left-color: var(--stdash-danger);
	background: #fef2f2;
	color: var(--stdash-danger);
}

.stdash-notice--warning {
	border-color: #fde68a;
	border-left-color: var(--stdash-warning-strong);
	background: #fffbeb;
	color: var(--stdash-warning);
}

/* 11. Lists, details, tabs, filters, pagination ----------------------------- */
.stdash-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stdash-list__item {
	display: flex;
	gap: var(--stdash-space-3);
	align-items: flex-start;
	padding: var(--stdash-space-3) var(--stdash-card-x);
	border-bottom: 1px solid var(--stdash-border-soft);
}

.stdash-list__item:last-child {
	border-bottom: 0;
}

.stdash-list__item--unread {
	background: var(--stdash-primary-soft);
}

.stdash-list__main {
	flex: 1;
	min-width: 0;
}

.stdash-list__title {
	margin: 0 0 var(--stdash-space-1);
	font-size: 1rem !important;
	font-weight: 700;
}

.stdash-list__title a {
	color: var(--stdash-text);
	text-decoration: none;
}

/* Title and name links get a 44px hit area; the negative margin keeps the line where it was. */
.stdash-list__title a,
.stdash-card__title a,
.stdash-table__primary a,
.stdash-meta a,
.stdash-tap-link {
	display: inline-block;
	padding-block: calc((var(--stdash-tap) - 1.5em) / 2);
	margin-block: calc((var(--stdash-tap) - 1.5em) / -2);
	line-height: 1.5;
}

.stdash-list__title a:hover {
	color: var(--stdash-primary);
	text-decoration: underline;
}

.stdash-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-1) var(--stdash-space-3);
	align-items: center;
	margin: 0;
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
}

.stdash-details {
	display: grid;
	gap: 0;
	margin: 0;
}

.stdash-details__row {
	grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
	gap: var(--stdash-space-4);
	padding: var(--stdash-space-3) 0;
	border-bottom: 1px solid var(--stdash-border);
}

.stdash-details__row:last-child {
	border-bottom: 0;
}

.stdash-details dt {
	color: var(--stdash-muted);
	font-weight: 600;
}

.stdash-details dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.stdash-prose {
	max-width: 48rem;
	overflow-wrap: anywhere;
}

.stdash-prose > :last-child {
	margin-bottom: 0;
}

.stdash-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-1);
	margin: 0 0 var(--stdash-space-5);
	padding: 0;
	border-bottom: 1px solid var(--stdash-border);
	list-style: none;
}

/* Tabs after a card (the to-do add form) keep the standard gap above them. */
.stdash-content > .stdash-card + nav > .stdash-tabs {
	margin-top: var(--stdash-space-5);
}

.stdash-tabs a {
	display: inline-flex;
	align-items: center;
	min-height: var(--stdash-tap);
	margin-bottom: -1px;
	padding: 0 var(--stdash-space-4);
	border-bottom: 3px solid transparent;
	color: var(--stdash-muted);
	font-weight: 600;
	text-decoration: none;
}

.stdash-tabs a:hover {
	color: var(--stdash-primary);
}

.stdash-tabs a[aria-current="page"] {
	border-bottom-color: var(--stdash-primary);
	color: var(--stdash-primary);
}

.stdash-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-3);
	align-items: flex-end;
	margin-bottom: var(--stdash-space-5);
	padding: var(--stdash-space-4);
	border: 1px solid var(--stdash-border);
	border-radius: var(--stdash-radius);
	background: var(--stdash-surface);
	box-shadow: var(--stdash-shadow);
}

.stdash-filters .stdash-field {
	flex: 1 1 12rem;
	max-width: 22rem;
	margin: 0;
}

/* A search box may take the spare width; selects and dates stay a readable size. */
.stdash-filters .stdash-field:has(input[type="search"]) {
	max-width: none;
}

.stdash-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-2);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--stdash-space-5);
}

.stdash-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stdash-pagination a,
.stdash-pagination span[aria-current] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--stdash-tap);
	min-height: var(--stdash-tap);
	padding: 0 var(--stdash-space-2);
	border: 1px solid var(--stdash-border);
	border-radius: var(--stdash-radius-sm);
	font-weight: 600;
	text-decoration: none;
}

/* Previous and Next carry the same 16px arrows as the rest of the portal. */
.stdash-pagination__step {
	gap: var(--stdash-space-1);
}

.stdash-pagination__step .stdash-icon.dashicons,
.stdash-calendar__nav .stdash-icon.dashicons {
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
}

.stdash-pagination span[aria-current] {
	border-color: var(--stdash-primary);
	background: var(--stdash-primary);
	color: #fff;
}

.stdash-pagination__summary {
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
}

.stdash-file-link {
	display: inline-flex;
	gap: var(--stdash-space-1);
	align-items: center;
	min-height: var(--stdash-tap);
}

.stdash-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 12. Empty states ---------------------------------------------------------- */
.stdash-empty {
	margin: var(--stdash-space-4);
	padding: var(--stdash-space-6) var(--stdash-card-x);
	border: 1px dashed var(--stdash-input-border);
	border-radius: var(--stdash-radius);
	background: #fbfcfc;
	text-align: center;
}

.stdash-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: var(--stdash-space-3);
	color: var(--stdash-muted);
}

.stdash-empty__icon .stdash-icon.dashicons {
	width: 2rem;
	height: 2rem;
	font-size: 2rem;
}

.stdash-empty__icon .dashicons {
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.75rem;
}

.stdash .stdash-empty__title {
	margin-bottom: var(--stdash-space-1) !important;
	font-size: 1.0625rem;
	font-weight: 700;
}

.stdash-empty__text {
	max-width: 32rem;
	margin: 0 auto var(--stdash-space-4) !important;
	color: var(--stdash-muted);
}

/* 13. Avatar and chat -------------------------------------------------------- */
.stdash-avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--stdash-primary-tint);
	color: var(--stdash-primary-strong);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.stdash-user .stdash-avatar {
	background: var(--stdash-primary);
	color: #fff;
}

.stdash-avatar--sm {
	width: 2.25rem;
	height: 2.25rem;
	font-size: 0.875rem;
}

.stdash-avatar--lg {
	width: 4rem;
	height: 4rem;
	font-size: 1.25rem;
}

.stdash-chat {
	display: flex;
	flex-direction: column;
	height: min(36rem, 70vh);
}

.stdash-chat__log {
	flex: 1;
	margin: 0;
	padding: var(--stdash-space-4);
	overflow-y: auto;
	list-style: none;
}

.stdash-chat__message {
	display: flex;
	gap: var(--stdash-space-3);
	margin-bottom: var(--stdash-space-4);
}

.stdash-chat__bubble {
	max-width: min(36rem, 85%);
	padding: var(--stdash-space-2) var(--stdash-space-3);
	border-radius: var(--stdash-radius);
	background: #eef2f6;
}

.stdash-chat__message--own {
	flex-direction: row-reverse;
}

.stdash-chat__message--own .stdash-chat__bubble {
	background: var(--stdash-primary-tint);
}

.stdash-chat__author {
	margin: 0;
	font-size: var(--stdash-font-small);
	font-weight: 700;
}

.stdash-chat__text {
	margin: 0;
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.stdash-chat__composer {
	display: flex;
	gap: var(--stdash-space-3);
	align-items: flex-end;
	padding: var(--stdash-space-4);
	border-top: 1px solid var(--stdash-border);
}

.stdash-chat__composer .stdash-field {
	flex: 1;
	margin: 0;
}

.stdash-chat__composer .stdash-textarea {
	min-height: var(--stdash-tap);
}

/* The counter under the box has a fixed height, and Send is lifted by it so it lines up with the box's bottom edge. */
.stdash-chat__composer .stdash-counter {
	height: 1.5rem;
	margin: 0.25rem 0 0;
	line-height: 1.5rem;
}

.stdash-chat__composer:has(.stdash-counter) > .stdash-button {
	margin-bottom: 1.75rem;
}

/* 14. Sign-in ----------------------------------------------------------------- */
.stdash-auth {
	display: flex;
	justify-content: center;
	padding-block: var(--stdash-space-7);
}

.stdash-auth .stdash-input,
.stdash-auth .stdash-select {
	min-height: 3rem;
	padding: 0 0.875rem;
	font-size: 1rem;
}

.stdash-auth .stdash-select:not([multiple]) {
	padding-right: 2.75rem;
}

.stdash-auth .stdash-form__actions .stdash-button--primary {
	min-height: 3rem;
	font-size: 1rem;
}

.stdash-auth__card {
	width: 100%;
	max-width: 28rem;
	padding: var(--stdash-space-6);
	border: 1px solid var(--stdash-border);
	border-radius: var(--stdash-radius);
	background: var(--stdash-surface);
	box-shadow: var(--stdash-shadow-raised);
}

.stdash-auth__eyebrow {
	margin: 0 0 var(--stdash-space-1) !important;
	color: var(--stdash-primary);
	font-size: var(--stdash-font-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.stdash-auth__lead {
	margin: var(--stdash-space-2) 0 var(--stdash-space-5) !important;
	color: var(--stdash-muted);
}

.stdash-auth__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-2) var(--stdash-space-4);
	justify-content: space-between;
	margin-top: var(--stdash-space-4);
}

.stdash-auth__links a {
	display: inline-flex;
	align-items: center;
	min-height: var(--stdash-tap);
	font-weight: 600;
}

.stdash-password {
	position: relative;
}

.stdash-password .stdash-input {
	min-height: 3rem;
	padding-right: 5.5rem;
}

.stdash-password__toggle {
	position: absolute;
	top: 50%;
	right: 0.125rem;
	min-height: var(--stdash-tap) !important;
	transform: translateY(-50%);
}

.stdash-placeholder {
	padding: var(--stdash-space-5);
	border: 1px dashed var(--stdash-input-border);
	border-radius: var(--stdash-radius);
	color: var(--stdash-muted);
	text-align: center;
}

/* 15. Utilities --------------------------------------------------------------- */
.stdash-muted {
	color: var(--stdash-muted);
}

.stdash-small {
	font-size: var(--stdash-font-small);
}

.stdash-nowrap {
	white-space: nowrap;
}

.stdash-text-right {
	text-align: right;
}

.stdash-mt-0 {
	margin-top: 0 !important;
}

.stdash-section-title {
	margin: var(--stdash-space-6) 0 var(--stdash-space-3) !important;
}

/* 16. Responsive -------------------------------------------------------------- */
/* On a short screen the full menu does not fit beside the content, so it scrolls with the page
   instead of hiding its last groups inside a sticky box. */
@media (min-width: 961px) and (max-height: 62rem) {
	.stdash-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

@media (max-width: 960px) {
	.stdash {
		padding-top: var(--stdash-space-5);
	}

	.stdash-app {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--stdash-space-5);
	}

	.stdash-sidebar {
		position: static;
		max-height: none;
		padding: var(--stdash-space-3) var(--stdash-space-4);
	}

	.stdash-user {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.stdash-user .stdash-nav-toggle {
		display: inline-flex;
		margin-left: auto;
	}

	.stdash-js .stdash-sidebar__panel[hidden] {
		display: none;
	}

	.stdash-sidebar__panel {
		padding-top: var(--stdash-space-3);
		border-top: 1px solid var(--stdash-border);
	}

	.stdash-grid > .stdash-col-half,
	.stdash-grid > .stdash-col-third,
	.stdash-grid > .stdash-col-two-thirds {
		grid-column: span 12;
	}
}

@media (max-width: 640px) {
	.stdash-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One side padding for every part of a card (header, body, list rows, widget bodies, empty states),
	   so their text lines up on phones as it does on wider screens. */
	.stdash {
		--stdash-card-x: var(--stdash-space-4);
	}

	.stdash-auth__card {
		padding: var(--stdash-space-5);
	}

	.stdash-details__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--stdash-space-1);
	}

	.stdash-chat__composer {
		flex-direction: column;
		align-items: stretch;
	}

	.stdash-chat__composer:has(.stdash-counter) > .stdash-button {
		margin-bottom: 0;
	}
}

/* Card-style tables: on tablets and phones each row becomes a card of label and value pairs, so nothing scrolls sideways. */
@media (max-width: 960px) {
	.stdash-table--stack thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

	.stdash-table--stack tr {
		display: block;
		padding: var(--stdash-space-2) 0;
		border-bottom: 1px solid var(--stdash-border);
	}

	/* The label is pinned on the left; the value flows normally beside it, whatever mix of text, pills and links it holds. */
	.stdash-table--stack td,
	.stdash-table--stack th {
		--stdash-stack-label: min(38%, 11rem);
		display: block;
		position: relative;
		min-height: calc(var(--stdash-space-2) * 2 + 1.5em);
		padding: var(--stdash-space-2) var(--stdash-space-4) var(--stdash-space-2) calc(var(--stdash-stack-label) + var(--stdash-space-4) + var(--stdash-space-3));
		border-bottom: 0;
	}

	.stdash-table--stack td::before,
	.stdash-table--stack th[data-label]::before {
		content: attr(data-label);
		position: absolute;
		top: 50%;
		left: var(--stdash-space-4);
		width: var(--stdash-stack-label);
		transform: translateY(-50%);
		color: var(--stdash-muted);
		font-size: var(--stdash-font-small);
		font-weight: 700;
		line-height: 1.3;
	}

	/* A row heading without a label (such as a totals row) starts at the card edge. */
	.stdash-table--stack th:not([data-label]) {
		padding-left: var(--stdash-space-4);
	}

	.stdash-table--stack .stdash-table__actions {
		text-align: left !important;
		white-space: normal;
	}

	.stdash-table--stack .stdash-table__actions .stdash-actions,
	.stdash-table--stack .stdash-table__actions .stdash-actions:has(> :nth-child(4)) {
		flex-wrap: wrap;
		justify-content: flex-start;
		max-width: none;
		margin-left: 0;
	}

	/* Values held on one line on wide screens may wrap inside a stacked card. */
	.stdash-table--stack td.stdash-nowrap {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* 17. Print, motion, forced colours ------------------------------------------- */
@media print {
	.stdash-is-portal header.wp-block-template-part,
	.stdash-is-portal footer.wp-block-template-part,
	.stdash-sidebar,
	.stdash-page-header__actions,
	.stdash-back,
	.stdash-noprint {
		display: none !important;
	}

	.stdash-app {
		display: block;
	}

	.stdash-card {
		border: 0;
		box-shadow: none;
	}
}

/* Very narrow screens: the name and ID need the room, so the menu button keeps its icon and
   its word is left for screen readers. portal.js still swaps that text between Menu and Close. */
@media (max-width: 26.25em) {
	.stdash-user .stdash-nav-toggle {
		min-width: var(--stdash-tap);
	}

	.stdash-user .stdash-nav-toggle [data-stdash-nav-label] {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stdash *,
	.stdash *::before {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.stdash-button,
	.stdash-badge,
	.stdash-card,
	.stdash-nav__link[aria-current="page"] {
		border: 1px solid CanvasText;
	}

	.stdash-nav__link[aria-current="page"] {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText !important;
	}
}

/* Widget bodies inside flush dashboard cards. */
.stdash-widget-body {
	padding: var(--stdash-space-3) var(--stdash-card-x) var(--stdash-space-4);
}

.stdash-widget-body > :last-child {
	margin-bottom: 0;
}

/* Empty widget: a dashed box that names the one thing to do next ("Never a dead end"). */
.stdash-widget-body--empty {
	padding-top: var(--stdash-space-4);
}

.stdash-widget-empty {
	display: flex;
	flex-direction: column;
	gap: var(--stdash-space-2);
	align-items: center;
	padding: var(--stdash-space-5) var(--stdash-space-4);
	border: 1px dashed var(--stdash-input-border);
	border-radius: var(--stdash-radius);
	text-align: center;
}

.stdash-widget-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--stdash-primary-tint);
	color: var(--stdash-primary);
}

.stdash .stdash-widget-empty__title {
	font-size: 1rem;
	font-weight: 700;
}

.stdash-widget-empty__text {
	max-width: 30ch;
	margin: 0;
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
}

.stdash-widget-empty .stdash-button {
	margin-top: var(--stdash-space-2);
}

/* 18. Dashboard home --------------------------------------------------------- */
.stdash-home {
	display: grid;
	gap: var(--stdash-space-5);
}

/* Welcome band: flat primary deep, white text; the screen's only H1. */
.stdash-welcome {
	--stdash-focus: var(--wp--preset--color--teal-200, #b8e3e6);
	padding: var(--stdash-space-6) var(--stdash-space-6) var(--stdash-space-6);
	border-radius: var(--stdash-radius);
	background: var(--stdash-primary-deep);
	color: #fff;
}

.stdash-welcome__eyebrow {
	margin: 0 0 var(--stdash-space-2);
	color: var(--wp--preset--color--teal-100, #d9f1f2);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.stdash .stdash-welcome__title {
	color: #fff;
	font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.stdash-welcome__lead {
	margin: var(--stdash-space-2) 0 0;
	color: var(--wp--preset--color--teal-100, #d9f1f2);
}

/* Needs you today: one sentence and one link per row ("Now, first"). */
.stdash-today__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.stdash-today__item,
.stdash-today__clear {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-2) var(--stdash-space-4);
	align-items: center;
	padding: var(--stdash-space-3) var(--stdash-card-x);
}

.stdash-today__item + .stdash-today__item {
	border-top: 1px solid var(--stdash-border-soft);
}

/* The one row happening now carries the screen's amber accent. */
.stdash-today__item--now {
	box-shadow: inset 4px 0 0 var(--stdash-warning);
	background: var(--stdash-warning-soft);
}

.stdash-today__now {
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: var(--stdash-surface);
	color: var(--stdash-warning);
	font-size: var(--stdash-font-small);
	font-weight: 700;
}

.stdash-today__text {
	flex: 1 1 18rem;
	margin: 0;
}

.stdash-today__link,
.stdash-widget-link {
	display: inline-flex;
	gap: var(--stdash-space-1);
	align-items: center;
	min-height: var(--stdash-tap);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* Underline the words only: one unbroken line, never under the gap or the arrow. */
.stdash-today__link:hover .stdash-link-text,
.stdash-widget-link:hover .stdash-link-text {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Smaller arrow, centred on the text's x-height. */
.stdash-today__link .stdash-icon.dashicons,
.stdash-widget-link .stdash-icon.dashicons {
	width: 1rem;
	height: 1rem;
	font-size: 1rem;
	transition: transform 0.15s ease;
}

.stdash-today__link:hover .stdash-icon,
.stdash-widget-link:hover .stdash-icon {
	transform: translateX(2px);
}

.stdash-today__clear > .stdash-icon {
	color: var(--stdash-success);
}

/* Widget cards: white, 1px light border, Tint icon chip before an H2 set at 17/700. */
.stdash-card--widget {
	transition: border-color 0.15s ease;
}

.stdash-card--widget:hover {
	border-color: var(--wp--preset--color--teal-300, #8acbd1);
}

.stdash-card__title {
	display: flex;
	gap: var(--stdash-space-3);
	align-items: center;
	font-weight: 700;
}

/* A widget's single "All … →" link stays top-right; a long title wraps instead of pushing it down. */
.stdash-card--widget .stdash-card__header {
	flex-wrap: nowrap;
}

.stdash-card--widget .stdash-card__title {
	flex: 1 1 auto;
	min-width: 0;
}

.stdash-card--widget .stdash-card__actions {
	flex-shrink: 0;
}

.stdash-card__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--stdash-radius-sm);
	background: var(--stdash-primary-tint);
	color: var(--stdash-primary);
}

.stdash-card--widget .stdash-card__actions a {
	font-size: var(--stdash-font-small);
}

/* The dashboard follows the design's wrapping row rather than a fixed pair of columns: each widget
   flexes from a 320px basis, so the row fills itself: two across on a laptop, three once the
   screen is wide enough to keep each card readable, without a breakpoint for each case. */
.stdash-dashboard {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-5);
	align-items: stretch;
}

.stdash-dashboard > * {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.stdash-dashboard > * > .stdash-card {
	flex: 1 1 auto;
}

.stdash-dashboard > .stdash-col-full {
	flex: 1 1 100%;
}

.stdash-dashboard > .stdash-col-two-thirds,
.stdash-dashboard > .stdash-col-half {
	flex: 1 1 var(--stdash-widget-min);
}

.stdash-dashboard > .stdash-col-third {
	flex: 1 1 15rem;
}

/* Career progress ring with its own next step. */
.stdash-progress {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-4);
	align-items: center;
}

.stdash-progress__ring {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	background: conic-gradient(var(--stdash-primary) calc(var(--stdash-progress, 0) * 1%), var(--stdash-primary-tint) 0);
}

.stdash-progress__ring::before {
	content: "";
	grid-area: 1 / 1;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 50%;
	background: var(--stdash-surface);
}

.stdash-progress__value {
	z-index: 1;
	grid-area: 1 / 1;
	color: var(--stdash-primary);
	font-size: 1.25rem;
	font-weight: 800;
}

.stdash-progress__text {
	display: grid;
	flex: 1 1 12rem;
	gap: var(--stdash-space-3);
	justify-items: start;
}

.stdash-progress__lead {
	margin: 0;
	font-weight: 600;
}

.stdash-progress__checklist {
	margin-top: var(--stdash-space-4);
	border-top: 1px solid var(--stdash-border-soft);
}

.stdash-progress__checklist summary {
	display: flex;
	align-items: center;
	min-height: var(--stdash-tap);
	color: var(--stdash-primary);
	font-weight: 700;
	cursor: pointer;
}

.stdash-checklist {
	display: grid;
	gap: var(--stdash-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stdash-checklist__item {
	display: flex;
	gap: var(--stdash-space-2);
	align-items: center;
	color: var(--stdash-muted);
}

.stdash-checklist__item--done {
	color: var(--stdash-text);
}

.stdash-checklist__item--done .stdash-icon {
	color: var(--stdash-success);
}

@media (max-width: 640px) {
	.stdash-welcome {
		padding: var(--stdash-space-5) var(--stdash-space-4);
	}
}

@media (forced-colors: active) {
	.stdash-welcome,
	.stdash-progress__ring {
		border: 1px solid CanvasText;
	}
}

/* 19. Shared helpers for new screens ---------------------------------------- */
.stdash-section {
	margin-top: var(--stdash-space-5);
}

.stdash-form__lead {
	margin: 0 0 var(--stdash-space-4);
}

/* Row buttons beside a list item; they drop under the text on narrow screens. */
.stdash-list__item > .stdash-button,
.stdash-list__item > .stdash-inline-form,
.stdash-list__actions {
	flex-shrink: 0;
}

.stdash-list__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-2);
}

.stdash-stats--compact {
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	gap: var(--stdash-space-3);
}

.stdash-stats--compact .stdash-stat {
	padding: var(--stdash-space-3) var(--stdash-space-4);
	box-shadow: none;
}

.stdash-stats--compact .stdash-stat__value {
	font-size: 1.5rem;
}

/* Results widget: the student against the class, as labelled bars on a 0–10 scale. */
.stdash .stdash-compare__title {
	margin: var(--stdash-space-4) 0 var(--stdash-space-2);
	font-size: 1rem;
}

.stdash-compare {
	display: grid;
	gap: var(--stdash-space-2);
	margin: 0;
}

.stdash-compare__row {
	display: grid;
	grid-template-columns: minmax(6.5rem, auto) 1fr;
	gap: var(--stdash-space-3);
	align-items: center;
}

.stdash-compare__row dt {
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
}

.stdash-compare__row--you dt {
	color: var(--stdash-text);
	font-weight: 700;
}

.stdash-compare__row dd {
	display: flex;
	gap: var(--stdash-space-2);
	align-items: center;
	margin: 0;
}

.stdash-compare__bar {
	flex: 1;
	height: 0.625rem;
	border-radius: 999px;
	background: linear-gradient(to right, var(--stdash-primary-tint) var(--stdash-bar, 0%), var(--stdash-border-soft) 0);
}

.stdash-compare__row--you .stdash-compare__bar {
	background: linear-gradient(to right, var(--stdash-primary) var(--stdash-bar, 0%), var(--stdash-border-soft) 0);
}

.stdash-compare__value {
	min-width: 2.75rem;
	font-size: var(--stdash-font-small);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

/* 20. Calendar -------------------------------------------------------------- */
.stdash-calendar__header {
	flex-wrap: wrap;
}

.stdash-calendar__nav {
	display: flex;
	gap: var(--stdash-space-2);
}

.stdash-calendar__grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.stdash-calendar__grid th {
	padding: var(--stdash-space-2);
	border-bottom: 1px solid var(--stdash-border);
	color: var(--stdash-muted);
	font-size: var(--stdash-font-small);
	font-weight: 700;
	text-align: left;
}

.stdash-calendar__grid abbr {
	text-decoration: none;
}

.stdash-calendar__day {
	height: 7.5rem;
	padding: var(--stdash-space-2);
	border: 1px solid var(--stdash-border-soft);
	vertical-align: top;
}

.stdash-calendar__day--outside {
	background: var(--stdash-canvas);
}

.stdash-calendar__day--outside .stdash-calendar__date {
	color: var(--stdash-muted);
}

.stdash-calendar__date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	margin-bottom: var(--stdash-space-1);
	border-radius: 999px;
	font-size: var(--stdash-font-small);
	font-weight: 700;
}

.stdash-calendar__day--today .stdash-calendar__date {
	background: var(--stdash-primary);
	color: #fff;
}

/* The full date is for the narrow list view; the grid shows the day number. */
.stdash-calendar__long {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.stdash-calendar__items {
	display: grid;
	gap: var(--stdash-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stdash-calendar__items li {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-1);
	align-items: center;
	min-width: 0;
}

.stdash-calendar__item {
	display: block;
	width: 100%;
	min-width: 0;
	padding: 0.125rem var(--stdash-space-2);
	border-left: 3px solid var(--stdash-primary);
	border-radius: var(--stdash-radius-sm);
	background: var(--stdash-primary-soft);
	color: var(--stdash-text);
	font-size: var(--stdash-font-small);
	line-height: 1.35;
	text-decoration: none;
}

.stdash-calendar__item:hover {
	background: var(--stdash-primary-tint);
}

.stdash-calendar__kind {
	display: block;
	color: var(--stdash-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.stdash-calendar__title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stdash-calendar__none {
	margin: 0;
	padding: var(--stdash-space-4) var(--stdash-card-x);
	color: var(--stdash-muted);
}

/* Narrow screens: a list of only the days that have something on. */
@media (max-width: 960px) {
	.stdash-calendar__grid,
	.stdash-calendar__grid tbody,
	.stdash-calendar__grid tr,
	.stdash-calendar__grid td {
		display: block;
		width: 100%;
	}

	.stdash-calendar__grid thead,
	.stdash-calendar__day--empty:not(.stdash-calendar__day--today),
	.stdash-calendar__day--outside {
		display: none !important;
	}

	.stdash-calendar__day {
		height: auto;
		padding: var(--stdash-space-3) var(--stdash-card-x);
		border-width: 0 0 1px;
	}

	.stdash-calendar__date {
		justify-content: flex-start;
		height: auto;
		padding: 0;
		border-radius: 0;
		font-size: 1rem;
	}

	.stdash-calendar__day--today .stdash-calendar__date {
		background: none;
		color: var(--stdash-primary);
	}

	.stdash-calendar__date > [aria-hidden="true"] {
		display: none;
	}

	.stdash-calendar__long {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	.stdash-calendar__title {
		white-space: normal;
	}
}

/* 21. Quizzes --------------------------------------------------------------- */
.stdash-quiz__review {
	display: grid;
	gap: var(--stdash-space-5);
	margin: 0;
	padding-left: var(--stdash-space-5);
}

.stdash-quiz__question-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stdash-space-3);
	align-items: flex-start;
	justify-content: space-between;
}

.stdash-quiz__text {
	flex: 1 1 16rem;
	margin: 0 0 var(--stdash-space-2);
	font-weight: 600;
}

.stdash-quiz__options {
	display: grid;
	gap: var(--stdash-space-1);
	margin: 0;
	padding-left: var(--stdash-space-5);
}

.stdash-quiz__options li {
	display: list-item;
}

.stdash-quiz__options .stdash-badge {
	margin-left: var(--stdash-space-2);
}

.stdash-quiz__option--correct {
	font-weight: 600;
}

.stdash-quiz__instructions {
	margin-bottom: var(--stdash-space-3);
}

@media (max-width: 640px) {
	.stdash-list__item {
		flex-wrap: wrap;
	}

	.stdash-list__item > .stdash-button,
	.stdash-list__item > .stdash-inline-form,
	.stdash-list__actions {
		margin-left: auto;
	}
}

/* A card holding nothing but an empty state: the dashed empty state is the frame, so the card
   drops its own border and shadow instead of drawing a box inside a box. */
.stdash-card:has(> .stdash-empty:only-child) {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.stdash-card:has(> .stdash-empty:only-child) > .stdash-empty {
	margin: 0;
	background: var(--stdash-surface);
}

/* Phones: tabs stay on one line and scroll sideways instead of wrapping a lone tab underneath. */
@media (max-width: 640px) {
	.stdash-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	.stdash-tabs li {
		flex-shrink: 0;
	}

	.stdash-tabs a {
		white-space: nowrap;
	}

	/* Inside the scrolling row the focus ring is drawn inside the tab so it is never clipped. */
	.stdash-tabs a:focus-visible {
		outline-offset: -3px;
	}
}