/* Spoolette app chrome and components. Needs tokens.css first. */

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

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }   /* a page with a scrollbar and one without line up */

body {
	margin: 0;
	background: var(--ground);
	color: var(--text);
	font-family: var(--font-ui);
	font-size: var(--fs-md);
	line-height: var(--lh-ui);
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--link-hover); }

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

h1, h2, h3 { color: var(--heading); font-family: var(--font-heading); font-weight: var(--weight-heading); line-height: var(--lh-tight); margin: 0; }

.muted { color: var(--text-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- The logo ----------
 * "Spoolette" in Jost with the double o drawn as two eyes (inline SVG, sized to Jost's x-height).
 * The first t pulls in so the two t crossbars overlap; edge to edge they leave a hairline seam. */

.spool-word { font-family: var(--font-mark); font-weight: var(--weight-mark); font-size: 1.625rem; line-height: 1; color: var(--on-band); white-space: nowrap; }
.spool-word svg { width: 0.54em; height: 0.54em; margin: 0 0.025em; vertical-align: -0.02em; }
.spool-word .t1 { margin-right: -0.015em; }

/* ---------- Band (top bar) ---------- */

.band {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--band);
	color: var(--on-band);
	border-bottom: var(--border-w) solid var(--band-edge);
}
.band__inner {
	max-width: var(--page-max);
	margin: 0 auto;
	padding: 0 16px;
	min-height: var(--band-h);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--sp-4);
}
/* Every page draws the bar from these rules alone, so it never shifts between pages. */
.band__mark { display: flex; align-items: center; padding: var(--sp-1) 0; color: var(--on-band); text-decoration: none; }
.band__mark:hover { color: var(--on-band); }
.band__end { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-3); min-height: 2.5rem; font-size: var(--fs-sm); white-space: nowrap; }
/* Who sent the video, on the pages a client sees. */
.band__from { font-size: var(--fs-sm); font-weight: var(--weight-bold); color: var(--heading); }
@media (max-width: 700px) {
	.band { position: static; }
}
@media (max-width: 560px) {
	.spool-word { font-size: 1.375rem; }
	.band__inner { gap: 0 var(--sp-3); }
}

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

.page { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-4) 16px var(--sp-6); }
.page__title { font-size: var(--fs-2xl); }

.panel {
	background: var(--surface);
	border: var(--border-w) solid var(--line);
	border-radius: var(--r-panel);
	box-shadow: var(--shadow-panel);
	padding: var(--sp-3);
}
.panel__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: var(--fs-lg);
	color: var(--heading);
	margin: 0 0 var(--sp-2);
}

/* ---------- Buttons ----------
 * Every variant carries the same 1px border so hover changes colour, never size. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	min-height: 2.5rem;
	padding: 0 var(--sp-3);
	border: var(--border-w) solid transparent;
	border-radius: var(--r-control);
	background: transparent;
	color: var(--text);
	font: var(--weight-bold) var(--fs-sm)/1 var(--font-ui);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ease), color var(--ease), border-color var(--ease);
	white-space: nowrap;
}
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--secondary { background: var(--surface); border-color: var(--line-strong); color: var(--heading); }
.btn--secondary:hover { border-color: var(--heading); }
.btn--bad { background: var(--surface); border-color: var(--bad); color: var(--bad); }
.btn--bad:hover { background: var(--bad); color: var(--on-bad); }
.btn--quiet { color: var(--link); padding: 0 var(--sp-1); }
.btn--quiet:hover { color: var(--link-hover); text-decoration: underline; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Form controls ---------- */

.field { display: grid; gap: 0.3rem; }
.label { font-size: var(--fs-sm); font-weight: var(--weight-bold); color: var(--heading); }
.input {
	width: 100%;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: var(--border-w) solid var(--line-strong);
	border-radius: var(--r-control);
	background: var(--surface);
	color: var(--text);
	font: var(--fs-md)/var(--lh-ui) var(--font-ui);
}
.input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.input[aria-invalid="true"] { border-color: var(--bad); }
input[type="checkbox"] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }

/* ---------- Status badges (statuses only, never section labels) ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.6rem;
	border: var(--border-w) solid transparent;
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: var(--weight-bold);
	line-height: 1.4;
	white-space: nowrap;
}
.badge--drafting { border-color: var(--line-strong); color: var(--text-muted); }
.badge--review { background: var(--info-tint); color: var(--info); }
.badge--sentback { background: var(--bad-tint); color: var(--bad); }

/* ---------- List ---------- */

.rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.rows > li + li { border-top: var(--border-w) solid var(--line); }

.empty { padding: var(--sp-5) var(--sp-3); text-align: center; color: var(--text-muted); }

/* The bar stays put between the admin's pages: a same-origin cross-document view transition. */
@view-transition { navigation: auto; }
.band { view-transition-name: site-band; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}