/**
 * RyE Studio front-end areas.
 *
 * Chrome is aligned to the site's Breakdance global variables — colours, fonts,
 * the size / radius / transition scales — through the semantic tokens defined
 * on .rye-studio below. Everything else in the file uses those tokens or a
 * Breakdance variable directly.
 *
 * Every Breakdance reference carries a fallback (`var(--orange, #ec6553)`),
 * because a missing or misspelt Breakdance variable renders nothing rather than
 * erroring. The fallbacks are the current brand values; if the site's variables
 * are renamed, update them in the Class Manager and here.
 */

.rye-studio {
	/* Brand */
	--rye-accent:    var(--orange, #ec6553);
	--rye-on-accent: var(--white, #ffffff);
	--rye-surface:   var(--offwhite, #f2f2f2);
	--rye-border:    var(--grey, #c0c0c0);
	--rye-muted:     var(--midblue, #6a8b96);
	--rye-ink:       var(--darkblue, #4b616f);
	--rye-alert:     #b32d2e; /* No red in the brand palette. */
	--rye-field-bg:  var(--white, #ffffff);

	/* Type */
	--rye-font-head: var(--header, "Raleway", system-ui, sans-serif);
	--rye-font-body: var(--body, "Nunito", system-ui, sans-serif);

	/* Radius */
	--rye-radius:    var(--radius-9px, 9px);
	--rye-radius-lg: var(--radius-12px, 12px);
	--rye-radius-pill: var(--radius-full, 9999px);

	/* Spacing scale */
	--rye-gap:    var(--size-16px, 16px);
	--rye-gap-xs: var(--size-3px, 3px);
	--rye-gap-sm: var(--size-9px, 9px);
	--rye-gap-md: var(--size-12px, 12px);
	--rye-gap-lg: var(--size-21px, 21px);
	--rye-gap-xl: var(--size-28px, 28px);

	font-family: var(--rye-font-body);
}

.rye-studio *,
.rye-studio *::before,
.rye-studio *::after {
	box-sizing: border-box;
}

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

.rye-muted {
	color: var(--rye-muted);
}

/* Headings take the site's Breakdance type. The variables are the site's own;
   a misspelt name fails silently, so copy them from the Class Manager.
   !important because Breakdance's global heading styles outrank a class. */
.rye-heading {
	margin: var(--rye-gap-xl) 0 var(--rye-gap);
	font-family: var(--header, "Raleway", system-ui, sans-serif) !important;
	color: var(--orange, #ec6553) !important;
	font-size: var(--clamp-28-greater-38, 1.75rem);
	font-weight: 400;
}

.rye-heading:first-child {
	margin-top: 0;
}

.rye-notice,
.rye-summary {
	margin: 0 0 var(--rye-gap);
}

.rye-notice {
	padding: var(--rye-gap-md) var(--rye-gap);
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius);
	background: var(--rye-surface);
}

/* --- Tiles --- */

.rye-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: var(--rye-gap-md);
}

.rye-tile {
	display: flex;
	flex-direction: column;
	gap: var(--rye-gap-xs);
	padding: var(--rye-gap-md) var(--rye-gap);
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--transition-150, 150ms);
}

.rye-tile:hover,
.rye-tile:focus-visible {
	border-color: var(--rye-accent);
}

.rye-tile-count {
	font-size: var(--clamp-21-greater-28, 1.75rem);
	font-family: var(--rye-font-head);
	font-weight: 700;
	line-height: var(--leading-none, 1.1);
}

.rye-tile-label {
	font-size: var(--font-08rem, 0.8rem);
	color: var(--rye-muted);
}

.rye-tile-alert {
	border-color: var(--rye-alert);
}

.rye-tile-alert .rye-tile-count {
	color: var(--rye-alert);
}

.rye-tiles-compact .rye-tile {
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: baseline;
	gap: var(--rye-gap-sm);
	padding: var(--rye-gap-sm) var(--rye-gap-md);
}

.rye-tiles-compact .rye-tile-count {
	font-size: var(--font-1rem, 1rem);
}

.rye-tiles-compact .rye-tile-label {
	flex: 1;
	color: inherit;
}

/* --- Filters --- */

.rye-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rye-gap-sm);
	margin: 0 0 var(--rye-gap);
}

.rye-filters input,
.rye-filters select,
.rye-filters button {
	font: inherit;
	padding: var(--rye-gap-sm) var(--rye-gap-md);
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius);
	background: var(--rye-field-bg);
	color: inherit;
}

/* The native arrow sits hard against the right edge, so draw our own: inset
   by the same padding as the text on the left, in the text's own colour. */
.rye-filters select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: calc(var(--rye-gap-md) * 2 + 10px);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - var(--rye-gap-md) - 5px) 50%,
		calc(100% - var(--rye-gap-md)) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
}

.rye-filters input[type="search"] {
	min-width: 14rem;
}

.rye-filters button {
	background: var(--rye-accent);
	border-color: var(--rye-accent);
	color: var(--rye-on-accent);
	cursor: pointer;
}

.rye-reset {
	color: var(--rye-muted);
}

/* --- Student table --- */

/* width: 0 + min-width: 100% keeps the table's width out of the wrapper's
   intrinsic size. Without it, a shortcode placed in a Breakdance flex or grid
   column stretches that column to the full table width and the whole page
   scrolls sideways; with it, the wrapper fills the column and scrolls itself. */
.rye-table-wrap {
	width: 0;
	min-width: 100%;
	overflow-x: auto;
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius);
}

.rye-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--font-09rem, 0.9rem);
}

.rye-table th,
.rye-table td {
	padding: var(--rye-gap-md) var(--rye-gap);
	border: 0;
	border-bottom: var(--border-1px, 1px) solid var(--rye-border);
	text-align: left;
	vertical-align: top;
}

.rye-table thead th {
	background: var(--rye-surface);
	font-size: var(--font-08rem, 0.8rem);
	font-weight: 600;
	letter-spacing: var(--tracking-002rem, 0.02rem);
	text-transform: uppercase;
	color: var(--rye-muted);
	white-space: nowrap;
}

.rye-table tbody tr:last-child td {
	border-bottom: 0;
}

.rye-table a {
	color: var(--rye-accent);
}

.rye-table .rye-email {
	color: var(--rye-muted);
	font-size: var(--font-08rem, 0.8rem);
	word-break: break-all;
}

.rye-studio .rye-table a.rye-view-as-link,
.rye-studio .rye-table a.rye-view-as-link:visited {
	color: var(--rye-accent);
	font-size: var(--font-08rem, 0.8rem);
	text-decoration: none;
}

.rye-studio .rye-table a.rye-view-as-link:hover,
.rye-studio .rye-table a.rye-view-as-link:focus {
	color: var(--rye-accent);
	text-decoration: underline;
}

.rye-table .rye-record-link {
	color: inherit;
	text-decoration: none;
}

.rye-table .rye-record-link:hover .rye-name,
.rye-table .rye-record-link:focus-visible .rye-name {
	color: var(--rye-accent);
	text-decoration: underline;
}

/* --- Pills, statuses, tags --- */

/* The status tints stay their own hues: the brand has no green/amber/red set,
   and these need to read apart at a glance. Former borrows the alert colour. */
.rye-pill {
	display: inline-block;
	padding: 0.1em 0.65em;
	border-radius: var(--rye-radius-pill);
	font-size: var(--font-08rem, 0.8rem);
	font-weight: 600;
	line-height: var(--leading-snug, 1.4);
	white-space: nowrap;
}

.rye-pill-none    { background: #f0f0f1; color: #646970; }
.rye-pill-general { background: #e6f0fa; color: #14538a; }
.rye-pill-pro     { background: #e6f4ea; color: #1a6334; }
.rye-pill-sales   { background: #f3e8fd; color: #5a2a86; }

.rye-status-paused { color: #8a5000; }
.rye-status-former { color: var(--rye-alert); }

.rye-tag {
	display: inline-block;
	margin-top: var(--rye-gap-xs);
	font-size: var(--font-08rem, 0.8rem);
	color: #8a5000;
}

/* --- Buttons and messages --- */

/*
 * The hidden attribute loses to any class that sets display, so the stepper's
 * Next button stayed visible beside Submit on the last step. Restate it.
 */
.rye-studio [hidden] {
	display: none !important;
}

.rye-button,
.rye-studio .acf-form-submit .acf-button {
	display: inline-block;
	font: inherit;
	font-family: var(--rye-font-head);
	padding: var(--rye-gap-sm) var(--rye-gap-lg);
	border: var(--border-1px, 1px) solid var(--rye-accent);
	border-radius: var(--rye-radius);
	background: var(--rye-accent);
	color: var(--rye-on-accent);
	text-decoration: none;
	cursor: pointer;
	transition: filter var(--transition-150, 150ms);
}

.rye-button:hover,
.rye-studio .acf-form-submit .acf-button:hover {
	filter: brightness(1.05);
}

.rye-button-secondary {
	background: transparent;
	color: var(--rye-accent);
}

/* A link styled as a button: the site's link colours (and their hover) are
   more specific than .rye-button, so restate the button's own. */
.rye-studio a.rye-button,
.rye-studio a.rye-button:visited,
.rye-studio a.rye-button:hover,
.rye-studio a.rye-button:focus {
	color: var(--rye-on-accent);
	text-decoration: none;
}

.rye-studio a.rye-button-secondary,
.rye-studio a.rye-button-secondary:visited,
.rye-studio a.rye-button-secondary:hover,
.rye-studio a.rye-button-secondary:focus {
	color: var(--rye-accent);
}

.rye-message {
	margin: 0 0 var(--rye-gap);
	padding: var(--rye-gap-md) var(--rye-gap);
	border-radius: var(--rye-radius);
}

.rye-message-success { background: #e6f4ea; color: #1a6334; }
.rye-message-error   { background: #fbeaea; color: var(--rye-alert); }

/* --- Inline table edit (admin dashboard status/teacher dropdowns) --- */

.rye-quick-select {
	font: inherit;
	max-width: 100%;
	padding: var(--rye-gap-xs) var(--rye-gap-sm);
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius);
	background: var(--rye-field-bg);
	color: inherit;
}

.rye-quick-select:focus {
	outline: none;
	border-color: var(--rye-accent);
	box-shadow: 0 0 0 1px var(--rye-accent);
}

.rye-button-small {
	padding: var(--rye-gap-xs) var(--rye-gap-md);
	font-size: var(--font-08rem, 0.8rem);
}

.rye-button:disabled,
.rye-button:disabled:hover {
	opacity: 0.5;
	filter: none;
	cursor: default;
}

/* --- Student record --- */

.rye-back {
	margin: 0 0 var(--rye-gap);
}

.rye-back a {
	color: var(--rye-muted);
}

.rye-record-head {
	margin: 0 0 var(--rye-gap);
}

.rye-record-head h2 {
	margin: 0;
}

.rye-record-email {
	margin: var(--rye-gap-xs) 0 var(--rye-gap-sm);
}

.rye-record-email a {
	color: var(--rye-muted);
}

.rye-record-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rye-gap-sm) var(--rye-gap);
}

.rye-record-view-as {
	margin: var(--rye-gap-md) 0 0;
}

.rye-panel {
	margin: 0 0 var(--rye-gap);
	padding: var(--rye-gap-lg);
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius-lg);
}

.rye-panel h3 {
	margin: 0 0 var(--rye-gap);
	font-family: var(--rye-font-head);
	color: var(--rye-ink);
}

.rye-panel h3:not(:first-child) {
	margin-top: var(--rye-gap-lg);
}

.rye-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--rye-gap-xs) var(--rye-gap);
}

.rye-field {
	margin: 0 0 var(--rye-gap-md);
}

.rye-field label {
	display: block;
	margin-bottom: var(--rye-gap-xs);
	font-size: var(--font-08rem, 0.8rem);
	font-weight: 600;
}

.rye-field-full {
	grid-column: 1 / -1;
}

.rye-req {
	color: var(--rye-alert);
}

.rye-field input:not([type="checkbox"]),
.rye-field select,
.rye-field textarea {
	width: 100%;
	font: inherit;
	padding: var(--rye-gap-sm) var(--rye-gap-md);
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius);
	background: var(--rye-field-bg);
	color: inherit;
}

.rye-field textarea {
	min-height: 5rem;
	resize: vertical;
}

.rye-field input:focus,
.rye-field select:focus,
.rye-field textarea:focus {
	outline: none;
	border-color: var(--rye-accent);
	box-shadow: 0 0 0 1px var(--rye-accent);
}

.rye-check label,
.rye-check-inline {
	display: flex;
	align-items: center;
	gap: var(--rye-gap-sm);
	font-weight: 400;
}

.rye-hint {
	margin: var(--rye-gap-xs) 0 0;
	font-size: var(--font-08rem, 0.8rem);
	color: var(--rye-muted);
}

.rye-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rye-gap-sm);
	margin-top: var(--rye-gap);
}

.rye-form-inline {
	margin-top: var(--rye-gap-md);
}

/* --- Registration & onboarding --- */

/* Honeypot: kept in the DOM for bots, out of sight for people. */
.rye-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rye-register .rye-form,
.rye-onboarding-form {
	max-width: 40rem;
}

.rye-steps {
	margin-bottom: var(--rye-gap);
}

.rye-step {
	padding: var(--rye-gap-lg);
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius-lg);
}

.rye-step-count {
	margin: 0 0 var(--rye-gap-xs);
	font-size: var(--font-08rem, 0.8rem);
	letter-spacing: var(--tracking-002rem, 0.02rem);
	text-transform: uppercase;
	color: var(--rye-muted);
}

.rye-step-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rye-gap-sm);
}

.rye-step-nav [data-rye-next],
.rye-step-nav [data-rye-submit] {
	margin-left: auto;
}

.rye-questions {
	display: grid;
	gap: var(--rye-gap);
}

.rye-question {
	margin: 0;
}

.rye-q-label {
	display: block;
	margin: 0 0 var(--rye-gap-sm);
	font-weight: 600;
}

.rye-options {
	display: grid;
	gap: var(--rye-gap-sm);
}

.rye-option {
	display: flex;
	align-items: flex-start;
	gap: var(--rye-gap-sm);
	padding: var(--rye-gap-sm) var(--rye-gap-md);
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius);
	font-weight: 400;
	cursor: pointer;
	transition: border-color var(--transition-150, 150ms);
}

.rye-option:hover {
	border-color: var(--rye-accent);
}

.rye-option:has(input:checked) {
	border-color: var(--rye-accent);
	background: var(--rye-surface);
}

.rye-option input {
	margin-top: 0.2em;
}

/* --- School policy --- */

.rye-policy {
	margin-bottom: var(--rye-gap);
	padding: var(--rye-gap-md) var(--rye-gap-lg);
	border: var(--border-1px, 1px) solid var(--rye-border);
	border-radius: var(--rye-radius);
	background: var(--rye-surface);
}

.rye-policy h4 {
	margin: 0 0 var(--rye-gap-sm);
	font-family: var(--rye-font-head);
	color: var(--rye-ink);
}

.rye-policy ol {
	margin: 0;
	padding-left: var(--rye-gap-lg);
	font-size: var(--font-09rem, 0.9rem);
}

.rye-policy li {
	margin-bottom: var(--rye-gap-xs);
}

.rye-policy-outro {
	margin: var(--rye-gap-sm) 0 0;
	font-weight: 600;
}

/* --- Onboarding answers, read-only on the record --- */

.rye-answers {
	margin: 0;
}

.rye-answers dt {
	font-size: var(--font-08rem, 0.8rem);
	font-weight: 600;
	color: var(--rye-muted);
}

.rye-answers dd {
	margin: 0 0 var(--rye-gap-md);
}

/* When a step is submitted incomplete, mark the native required fields. */
.rye-onboarding-form.rye-show-errors :invalid,
.rye-lt-form.rye-show-errors :invalid {
	border-color: var(--rye-alert);
}

/* --- Level tests --- */

.rye-lt-form {
	max-width: 40rem;
}

/* One skill per row: its label, then the 1–5 chips (feedback.css). */
.rye-lt-crit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rye-gap-sm) var(--rye-gap);
	padding-bottom: var(--rye-gap-md);
	border-bottom: var(--border-1px, 1px) solid var(--rye-border);
}

.rye-lt-crit:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.rye-lt-crit .rye-q-label {
	flex: 1;
	min-width: 12rem;
	margin: 0;
}

.rye-lt-form.rye-show-errors .rye-lt-crit:not(:has(input:checked)) .rye-q-label {
	color: var(--rye-alert);
}

/* Lead statuses. Functional tints, like the student statuses above: New is
   amber because it is waiting on the academy. */
.rye-lt-status {
	display: inline-block;
	padding: 0.1em 0.65em;
	border-radius: var(--rye-radius-pill);
	font-size: var(--font-08rem, 0.8rem);
	font-weight: 600;
	white-space: nowrap;
}

.rye-lt-status-new           { background: #f7ecd6; color: #8a5000; }
.rye-lt-status-contacted     { background: #e6f0fa; color: #14538a; }
.rye-lt-status-awaiting      { background: #f3e8fd; color: #5a2a86; }
.rye-lt-status-enrolled      { background: #e6f4ea; color: #1a6334; }
.rye-lt-status-not_enrolling { background: #f0f0f1; color: #646970; }
.rye-lt-status-archived      { background: transparent; color: #8c8f94; box-shadow: inset 0 0 0 1px #c3c4c7; }

.rye-lt-student {
	display: inline-block;
	margin-top: var(--rye-gap-xs);
	padding: 0.05em 0.55em;
	border-radius: var(--rye-radius-pill);
	background: #e6f4ea;
	color: #1a6334;
	font-size: var(--font-08rem, 0.8rem);
	font-weight: 600;
}

.rye-lt-table .rye-col-status,
.rye-lt-table .rye-col-date {
	white-space: nowrap;
}

/* The lead's record. */
.rye-lt-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--rye-gap-xl);
}

.rye-lt-scores {
	display: grid;
	gap: var(--rye-gap-sm);
	margin-bottom: var(--rye-gap);
}

.rye-lt-score {
	display: grid;
	grid-template-columns: minmax(10rem, 16rem) 1fr 3.5rem;
	align-items: center;
	gap: var(--rye-gap-md);
	font-size: var(--font-09rem, 0.9rem);
}

.rye-lt-score-value {
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

.rye-lt-bar {
	display: block;
	height: 0.6rem;
	border-radius: var(--rye-radius-pill);
	background: var(--rye-surface);
	overflow: hidden;
}

.rye-lt-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
}

.rye-lt-bar span[data-v="1"] { background: var(--rye-fb-s1, #ec6553); }
.rye-lt-bar span[data-v="2"] { background: var(--rye-fb-s2, #fade70); }
.rye-lt-bar span[data-v="3"] { background: var(--rye-fb-s3, #88b4bc); }
.rye-lt-bar span[data-v="4"] { background: var(--rye-fb-s4, #6a8b96); }
.rye-lt-bar span[data-v="5"] { background: var(--rye-fb-s5, #cddb77); }

.rye-lt-comments p {
	margin: 0 0 var(--rye-gap-sm);
}

@media (max-width: 540px) {
	.rye-lt-score {
		grid-template-columns: 1fr 3.5rem;
	}

	.rye-lt-score-label {
		grid-column: 1 / -1;
	}
}

/* --- Narrow screens: each row becomes a card --- */

@media (max-width: 720px) {

	.rye-table-wrap {
		overflow: visible;
		border: 0;
		border-radius: 0;
	}

	.rye-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.rye-table,
	.rye-table tbody,
	.rye-table tr,
	.rye-table td {
		display: block;
		width: 100%;
	}

	.rye-table tr {
		margin-bottom: var(--rye-gap-md);
		padding: var(--rye-gap-sm) var(--rye-gap-md);
		border: var(--border-1px, 1px) solid var(--rye-border);
		border-radius: var(--rye-radius);
	}

	.rye-table td,
	.rye-table tbody tr:last-child td {
		display: grid;
		grid-template-columns: 6.5rem 1fr;
		gap: var(--rye-gap-md);
		padding: var(--rye-gap-xs) 0;
		border-bottom: 0;
	}

	.rye-table td::before {
		content: attr(data-label);
		font-size: var(--font-08rem, 0.8rem);
		color: var(--rye-muted);
	}
}

/* --- View as (floating bar while an admin views the Studio as someone) --- */

.rye-studio.rye-view-as-bar {
	position: fixed;
	left: 50%;
	bottom: var(--rye-gap);
	transform: translateX(-50%);
	z-index: 99999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rye-gap-sm) var(--rye-gap);
	width: max-content;
	max-width: calc(100% - 2 * var(--rye-gap));
	padding: var(--rye-gap-sm) var(--rye-gap-sm) var(--rye-gap-sm) var(--rye-gap-lg);
	border-radius: var(--rye-radius-pill);
	background: var(--rye-ink);
	color: var(--rye-on-accent);
	font-family: var(--rye-font-body);
	font-size: var(--font-09rem, 0.9rem);
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
}

.rye-view-as-text strong {
	color: inherit;
}

.rye-view-as-blocked {
	display: block;
	font-size: var(--font-08rem, 0.8rem);
	opacity: 0.85;
}

@media (max-width: 600px) {
	.rye-studio.rye-view-as-bar {
		border-radius: var(--rye-radius-lg);
		padding: var(--rye-gap-sm) var(--rye-gap-md);
		text-align: center;
	}
}

@media print {
	.rye-studio.rye-view-as-bar {
		display: none;
	}
}