/* Barrie & District Christmas Cheer — shared brand system
   Palette lifted from the organisation's logo: cranberry script, spruce
   lettering, handprint-tree greens and the gold star. */

:root {
	--cheer-red: #d8232a;
	--cheer-red-dark: #ab171d;
	--cheer-red-soft: #fdeceb;
	--cheer-green: #0e7a3c;
	--cheer-green-bright: #3fae49;
	--cheer-green-soft: #e8f5ec;
	--cheer-gold: #f0b429;
	--cheer-gold-soft: #fdf3dc;

	--ink: #1f2421;
	--ink-muted: #5b6560;
	--ink-faint: #8a938e;
	--paper: #fbf8f4;
	--surface: #ffffff;
	--line: #e4ded6;
	--line-strong: #cfc7bc;

	--amber: #b7791f;
	--amber-soft: #fdf3dc;

	--radius: 12px;
	--radius-lg: 18px;
	--shadow-sm: 0 1px 2px rgba(31, 36, 33, 0.06), 0 1px 3px rgba(31, 36, 33, 0.04);
	--shadow: 0 2px 4px rgba(31, 36, 33, 0.05), 0 8px 20px rgba(31, 36, 33, 0.08);

	--font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-display: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;

	color-scheme: light;
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.4em;
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(1.6rem, 4.5vw, 2.2rem);
}
h2 {
	font-size: clamp(1.25rem, 3.4vw, 1.55rem);
}
h3 {
	font-size: 1.08rem;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--cheer-green);
}

/* --- Layout ------------------------------------------------------------ */

.shell {
	max-width: 780px;
	margin: 0 auto;
	padding: 0 18px 96px;
}

/* The staff portal only. Its pages are wide data tables rather than prose, so
   capping them at reading width left several hundred pixels idle either side
   while the table itself scrolled sideways. */
.shell-wide {
	max-width: 1680px;
}

.site-header {
	background: var(--surface);
	border-bottom: 3px solid var(--cheer-red);
	padding: 18px;
	text-align: center;
}

.site-header img {
	max-width: min(330px, 74vw);
	height: auto;
	display: block;
	margin: 0 auto;
}

.site-header .tagline {
	margin: 10px 0 0;
	color: var(--ink-muted);
	font-size: 0.92rem;
}

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: clamp(18px, 4vw, 30px);
	margin-bottom: 20px;
}

.card-tight {
	padding: 18px;
}

/* Standfirst under a page title. The staff portal puts the title in its top
   bar, so a view opens on this rather than repeating its own name. */
.lead {
	font-size: 1.02rem;
	color: var(--ink-muted);
	margin: 0 0 20px;
	max-width: 68ch;
}

/* A heading inside a page, set in the body face so it reads as a label rather
   than competing with the display-face page title above it. */
.section-title {
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0;
	margin: 0 0 14px;
}

.stack > * + * {
	margin-top: 18px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.row > * {
	flex: 1 1 200px;
	min-width: 0;
}

.grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* --- Forms ------------------------------------------------------------- */

.field {
	display: block;
	margin-bottom: 4px;
}

.field > label,
.label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 0.93rem;
	margin-bottom: 6px;
	color: var(--ink);
}

/* In a multi-column row some labels run to one line and some to two ("Work
   income" beside "OW, ODSP, CPP, pension or disability"), which left the inputs
   on that row sitting at different heights.

   Each field lends its three parts — label, control, hint — to the parent's own
   row tracks, so every control on a row starts at the same height and so does
   every hint beneath them. Reserving a fixed two lines of label would do the
   same job but would strand short labels miles above their input; this only
   spends the space where a label actually wraps. Without subgrid the fields
   simply keep their natural heights, which is what they did before. */
.grid > .field > label,
.row > .field > label {
	align-items: flex-start;
}

.grid > .field > label > .help,
.row > .field > label > .help {
	margin-top: 1px;
}

/* Only .grid — subgrid needs a grid parent, and .row is a flex container. */
@supports (grid-template-rows: subgrid) {
	.grid > .field {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		gap: 0;
		margin-bottom: 0;
	}
}

/* A red star on its own was easy to miss, so the marker spells it out as a
   small red tag beside the question. */
.required-dot {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--cheer-red-soft);
	color: var(--cheer-red-dark);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.6;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: 1px;
}

.required-legend {
	margin: -4px 0 16px;
	font-size: 0.9rem;
	color: var(--ink-muted);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='date'],
select,
textarea {
	width: 100%;
	padding: 12px 13px;
	font: inherit;
	font-size: 16px; /* keeps iOS from zooming on focus */
	color: var(--ink);
	background: var(--surface);
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

textarea {
	min-height: 96px;
	resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--cheer-green);
	box-shadow: 0 0 0 3px var(--cheer-green-soft);
}

input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
	border-color: var(--cheer-red);
	border-width: 2px;
	background: #fff7f7;
}

.field.is-missing > label,
.field.is-missing > .label {
	color: var(--cheer-red-dark);
}

.field.is-missing::after {
	content: 'This needs an answer';
	display: block;
	margin-top: 6px;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--cheer-red-dark);
}

.hint {
	font-size: 0.84rem;
	color: var(--ink-muted);
	margin: 6px 0 0;
}

/* Applicant lookup — anywhere staff have to name a person, they pick them from
   the data rather than retyping a number that is easy to get wrong. */
.lookup {
	position: relative;
	flex: 1 1 260px;
}

/* Room for the chevron, so a long name never runs under it. */
.lookup-input {
	padding-right: 40px;
}

/* The affordance that says this is a list you can open, not just a box to type
   into. Deliberately looks like a select's caret. */
.lookup-toggle {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--ink-muted);
	cursor: pointer;
	border-radius: 0 var(--radius) var(--radius) 0;
}

.lookup-toggle svg {
	width: 18px;
	height: 18px;
}

.lookup-toggle:hover {
	color: var(--cheer-green);
}

.lookup-results {
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	max-height: 320px;
	overflow-y: auto;
	background: var(--surface);
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.lookup-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	background: none;
	text-align: left;
	font: inherit;
	color: var(--ink);
	cursor: pointer;
	border-bottom: 1px solid var(--line);
}

.lookup-item:last-child {
	border-bottom: 0;
}

.lookup-item:hover,
.lookup-item.is-active {
	background: var(--cheer-green-soft);
}

.lookup-item .lookup-name {
	font-weight: 600;
}

.lookup-item .lookup-meta {
	font-size: 0.82rem;
	color: var(--ink-muted);
	white-space: nowrap;
}

.lookup-empty {
	padding: 10px 12px;
	font-size: 0.86rem;
	color: var(--ink-muted);
}

/* Help guides: the whole heading is the toggle, so there is no small target to
   hunt for. */
.help-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}

.help-head:hover strong {
	color: var(--cheer-green);
}

.help-steps {
	margin: 0;
	padding-left: 20px;
}

.help-steps li {
	margin-bottom: 7px;
	line-height: 1.5;
}

/* The household total is added up from the answers above it, so it is shown as
   a derived figure rather than a box to type a number into. */
.computed-total {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding: 12px 14px;
	background: var(--cheer-green-soft);
	border: 1.5px solid var(--cheer-green);
	border-radius: var(--radius);
}

.computed-total .computed-value {
	font-family: var(--font-display);
	font-size: 1.55rem;
	font-weight: 700;
	line-height: 1.1;
	color: #0a5029;
}

.computed-total .computed-parts {
	font-size: 0.86rem;
	color: #0a5029;
}

/* Every field carries a help bubble — a stated requirement for the rebuild. */
.help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	background: var(--cheer-green);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-family: var(--font-body);
	cursor: help;
	border: none;
	padding: 0;
	line-height: 1;
}

.help:focus-visible {
	outline: 2px solid var(--cheer-gold);
	outline-offset: 2px;
}

.help-bubble {
	position: fixed;
	z-index: 90;
	max-width: 280px;
	background: var(--ink);
	color: #fff;
	font-size: 0.84rem;
	line-height: 1.45;
	padding: 9px 12px;
	border-radius: 10px;
	box-shadow: var(--shadow);
	pointer-events: none;
}

.money-input {
	position: relative;
}

.money-input::before {
	content: '$';
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-faint);
	font-weight: 600;
	pointer-events: none;
}

.money-input input {
	padding-left: 26px;
}

fieldset {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	margin: 0;
}

legend {
	font-weight: 600;
	font-size: 0.93rem;
	padding: 0 6px;
}

.choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 13px 14px;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--radius);
	cursor: pointer;
	background: var(--surface);
	margin-bottom: 9px;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.choice:last-child {
	margin-bottom: 0;
}

.choice:hover {
	border-color: var(--cheer-green-bright);
}

.choice input {
	margin: 3px 0 0;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	accent-color: var(--cheer-green);
}

.choice-body strong {
	display: block;
	font-size: 0.95rem;
}

.choice-body span {
	display: block;
	font-size: 0.85rem;
	color: var(--ink-muted);
}

.choice.is-selected {
	border-color: var(--cheer-green);
	background: var(--cheer-green-soft);
}

/* --- Buttons ----------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	min-height: 48px;
	font: inherit;
	font-weight: 600;
	font-size: 0.97rem;
	border-radius: var(--radius);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.btn:active {
	transform: translateY(1px);
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-primary {
	background: var(--cheer-red);
	color: #fff;
}
.btn-primary:hover:not(:disabled) {
	background: var(--cheer-red-dark);
}

.btn-approve {
	background: var(--cheer-green);
	color: #fff;
}
.btn-approve:hover:not(:disabled) {
	background: #0a5e2e;
}

.btn-secondary {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--line-strong);
}
.btn-secondary:hover:not(:disabled) {
	border-color: var(--ink-muted);
}

.btn-ghost {
	background: transparent;
	color: var(--cheer-green);
	border-color: transparent;
	padding: 8px 10px;
	min-height: 40px;
}
.btn-ghost:hover:not(:disabled) {
	background: var(--cheer-green-soft);
}

.btn-danger {
	background: var(--surface);
	color: var(--cheer-red-dark);
	border-color: var(--cheer-red);
}
.btn-danger:hover:not(:disabled) {
	background: var(--cheer-red-soft);
}

.btn-sm {
	padding: 8px 14px;
	min-height: 38px;
	font-size: 0.88rem;
}

.btn-block {
	width: 100%;
}

.btn-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* --- Status and feedback ----------------------------------------------- */

.note {
	padding: 13px 15px;
	border-radius: var(--radius);
	border-left: 4px solid;
	font-size: 0.92rem;
}

.note-error {
	background: var(--cheer-red-soft);
	border-color: var(--cheer-red);
	color: #7d1116;
}
.note-ok {
	background: var(--cheer-green-soft);
	border-color: var(--cheer-green);
	color: #0a5029;
}
.note-warn {
	background: var(--amber-soft);
	border-color: var(--cheer-gold);
	color: #7c5310;
}
.note-info {
	background: #eef4fb;
	border-color: #3b7cc4;
	color: #1d4f85;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.pill-red {
	background: var(--cheer-red-soft);
	color: #9b1319;
}
.pill-amber {
	background: var(--amber-soft);
	color: var(--amber);
}
.pill-green {
	background: var(--cheer-green-soft);
	color: #0a5e2e;
}
.pill-grey {
	background: #eeeae4;
	color: var(--ink-muted);
}

/* The Stage 2 traffic lights: status, auditor and flag. */
.lights {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.light {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--line-strong);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.light[data-colour='Red'] {
	background: var(--cheer-red);
}
.light[data-colour='Amber'] {
	background: var(--cheer-gold);
}
.light[data-colour='Green'] {
	background: var(--cheer-green-bright);
}

/* --- Tables ------------------------------------------------------------ */

.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}

/* A table that must never scroll sideways: the columns share the width it has
   rather than each demanding what its longest cell wants. Content wraps instead,
   which on these pages is always better than losing the right-hand columns. */
.table-fit {
	table-layout: fixed;
	width: 100%;
}

.table-fit th,
.table-fit td {
	overflow-wrap: anywhere;
	white-space: normal;
}

/* Counts stay on one line and centred so a column of them can be read down. */
/* Narrow fixed columns leave no room for a letter-spaced uppercase heading, so
   the headings give the ground up rather than clipping or splitting a word. */
.table-fit th {
	font-size: 0.72rem;
	letter-spacing: 0.01em;
	overflow-wrap: normal;
	word-break: keep-all;
	padding-left: 8px;
	padding-right: 8px;
}

.table-fit .num {
	text-align: center;
	white-space: nowrap;
}

.table-fit th.num {
	white-space: normal;
}

/* Stacked, full-width actions so a cell of buttons cannot force the table wider. */
.table-fit .row-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: stretch;
}

.table-fit .row-actions .btn {
	width: 100%;
	justify-content: center;
	/* The cell may break long data, but never a button's own label: "Withdraw"
	   splitting into "With draw" is worse than any amount of empty space. */
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
	padding-left: 6px;
	padding-right: 6px;
}

/* Application numbers and card barcodes are long unbroken strings; they may
   wrap mid-token because there is nowhere else to break them. */
.table-fit .mono {
	overflow-wrap: anywhere;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

th,
td {
	text-align: left;
	padding: 11px 13px;
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}

th {
	background: #f6f2ec;
	font-weight: 600;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ink-muted);
	position: sticky;
	top: 0;
	box-shadow: inset 0 -1px 0 var(--line);
}

/* Long queues are read across, so the row under the cursor is picked out. */
tbody tr {
	transition: background 0.1s ease;
}

tbody tr:hover {
	background: #faf7f3;
}

@media (prefers-reduced-motion: reduce) {
	tbody tr {
		transition: none;
	}
}

tbody tr:last-child td {
	border-bottom: none;
}

tbody tr:hover {
	background: #faf7f3;
}

td.wrap {
	white-space: normal;
	min-width: 180px;
}

/* Breaks the label run into the groups the envelopes are staged in, so the
   stuffing team can see where one table's pile ends and the next begins. */
.group-row td {
	background: var(--cheer-green-soft);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cheer-green);
	padding-top: 8px;
	padding-bottom: 8px;
}

.group-row:hover td {
	background: var(--cheer-green-soft);
}

/* --- Stat tiles -------------------------------------------------------- */

.stats {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
}

.stat {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 15px 16px;
}

.stat .value {
	font-family: var(--font-display);
	font-size: 1.85rem;
	font-weight: 600;
	line-height: 1.1;
	display: block;
}

.stat .label {
	font-size: 0.82rem;
	color: var(--ink-muted);
	margin-top: 3px;
	display: block;
}

/* Year-on-year movement, under a headline figure and inside report tables. */
.delta {
	font-size: 0.74rem;
	color: var(--ink-muted);
}

.stat .delta {
	display: block;
	margin-top: 4px;
}

.delta[data-dir='up'] {
	color: var(--cheer-green);
}

.delta[data-dir='down'] {
	color: var(--cheer-red);
}

.stat-red .value {
	color: var(--cheer-red);
}
.stat-green .value {
	color: var(--cheer-green);
}
.stat-amber .value {
	color: var(--amber);
}

/* --- Progress ---------------------------------------------------------- */

.progress {
	margin: 20px 0 24px;
}

.progress-bar {
	height: 7px;
	background: var(--line);
	border-radius: 999px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: var(--cheer-green);
	border-radius: 999px;
	transition: width 0.3s ease;
}

.progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	color: var(--ink-muted);
	margin-bottom: 8px;
	gap: 12px;
}

.progress-label strong {
	color: var(--ink);
}

/* --- Misc -------------------------------------------------------------- */

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

.small {
	font-size: 0.85rem;
}

.mono {
	font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.divider {
	height: 1px;
	background: var(--line);
	border: 0;
	margin: 22px 0;
}

.center {
	text-align: center;
}

.hidden {
	display: none !important;
}

.spinner {
	width: 17px;
	height: 17px;
	border: 2.5px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@media print {
	.no-print {
		display: none !important;
	}
	body {
		background: #fff;
	}
	.card {
		box-shadow: none;
		border: 1px solid #999;
		break-inside: avoid;
	}
}

/* --- In-app dialogs and toasts ----------------------------------------- */
/* Replaces window.alert / confirm / prompt so the portal never hands the
   viewer a browser chrome popup. */

.dialog-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(31, 36, 33, 0.5);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	animation: dialog-fade 0.12s ease;
}

@keyframes dialog-fade {
	from {
		opacity: 0;
	}
}

.dialog {
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 50px rgba(31, 36, 33, 0.28);
	width: min(460px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: 22px;
	animation: dialog-rise 0.14s ease;
}

@keyframes dialog-rise {
	from {
		transform: translateY(10px);
		opacity: 0;
	}
}

.dialog h2 {
	margin: 0 0 8px;
	font-size: 1.2rem;
}

.dialog .dialog-body {
	font-size: 0.95rem;
	color: var(--ink-muted);
	margin: 0 0 16px;
	white-space: pre-wrap;
	word-break: break-word;
}

.dialog .dialog-body strong {
	color: var(--ink);
}

.dialog input[type='text'],
.dialog input[type='password'] {
	margin-bottom: 4px;
}

.dialog-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-top: 18px;
}

.dialog-actions .btn {
	min-width: 104px;
}

.dialog-icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 12px;
}

.dialog-icon[data-tone='danger'] {
	background: var(--cheer-red-soft);
	color: var(--cheer-red);
}
.dialog-icon[data-tone='warn'] {
	background: var(--amber-soft);
	color: var(--amber);
}
.dialog-icon[data-tone='ok'] {
	background: var(--cheer-green-soft);
	color: var(--cheer-green);
}
.dialog-icon[data-tone='info'] {
	background: #eef4fb;
	color: #1d4f85;
}

.toast-host {
	position: fixed;
	bottom: 18px;
	right: 18px;
	z-index: 210;
	display: flex;
	flex-direction: column;
	gap: 9px;
	max-width: min(370px, calc(100vw - 36px));
}

.toast {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--cheer-green);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 12px 15px;
	font-size: 0.9rem;
	animation: toast-in 0.16s ease;
}

.toast[data-tone='error'] {
	border-left-color: var(--cheer-red);
}
.toast[data-tone='warn'] {
	border-left-color: var(--cheer-gold);
}

.toast.is-leaving {
	animation: toast-out 0.2s ease forwards;
}

@keyframes toast-in {
	from {
		transform: translateX(16px);
		opacity: 0;
	}
}

@keyframes toast-out {
	to {
		transform: translateX(16px);
		opacity: 0;
	}
}

/* --- Admin sub-navigation ---------------------------------------------- */

.subtabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
}

.subtab {
	padding: 8px 14px;
	border: 1.5px solid var(--line-strong);
	background: var(--surface);
	border-radius: 999px;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink-muted);
	cursor: pointer;
	white-space: nowrap;
}

.subtab:hover {
	border-color: var(--cheer-green-bright);
}

.subtab.is-active {
	background: var(--cheer-green);
	border-color: var(--cheer-green);
	color: #fff;
}

.danger-zone {
	border-color: var(--cheer-red);
	background: linear-gradient(180deg, var(--cheer-red-soft) 0%, var(--surface) 90px);
}