/*
 * KAI-SHELL-001 — studio rail + responsive/mobile header.
 *
 * Mobile-first: base rules are the compact top-header model (<1200px). At
 * 1200px and above it becomes a persistent 316px sticky rail — Route 2A
 * "refined" (336 -> 316px). The rail is never squeezed narrower — below
 * 1200px it is fully replaced by the header model, not shrunk.
 *
 * QA widths to check against: 1440, 1280, 1024, 768, 390.
 *
 * Deliberately restrained: no shadows, no card radius, no pills, no
 * gradients, no background fill beyond the page surface — it must read as
 * an architectural surface, not an app/dashboard sidebar.
 */

.kts-shell {
	min-height: 100vh;
}

/* ---------- header/rail: shared rules (mobile/compact by default) ---------- */

.kts-rail {
	display: flex;
	flex-direction: column;
	padding: var(--kts-space-16) var(--kts-space-24);
	border-bottom: 1px solid var(--kts-hairline);
	background: var(--kts-off-white);
	position: sticky;
	top: 0;
	z-index: 100;
}

.kts-rail__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kts-space-16);
	position: relative;
	z-index: 2;
}

.kts-rail__brand a {
	font-family: var(--kts-font-serif);
	font-size: var(--kts-text-wordmark);
	line-height: 1;
	text-decoration: none;
	letter-spacing: -0.015em;
	color: var(--kts-ink-black);
}

.kts-rail__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--kts-hairline);
	color: var(--kts-ink-black);
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.kts-rail__toggle:hover,
.kts-rail__toggle:focus-visible {
	background: var(--kts-surface-faint);
	border-color: var(--kts-border-default);
}

.kts-rail__toggle-icon,
.kts-rail__toggle-icon::before,
.kts-rail__toggle-icon::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform 180ms ease;
}

.kts-rail__toggle-icon {
	position: relative;
}

.kts-rail__toggle-icon::before,
.kts-rail__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.kts-rail__toggle-icon::before {
	top: -7px;
}

.kts-rail__toggle-icon::after {
	top: 7px;
}

.kts-rail__toggle[aria-expanded="true"] .kts-rail__toggle-icon {
	background: transparent;
}

.kts-rail__toggle[aria-expanded="true"] .kts-rail__toggle-icon::before {
	top: 0;
	transform: rotate(45deg);
}

.kts-rail__toggle[aria-expanded="true"] .kts-rail__toggle-icon::after {
	top: 0;
	transform: rotate(-45deg);
}

.kts-rail__capabilities {
	/* 0.6.1: tight margin binds this to the wordmark above it as one
	   identity statement ("KAITAGO / Design · Print · Digital") rather
	   than a second, disconnected line -- was reading as three isolated
	   words once desktop switched it to a vertical stack (see the
	   1200px override below, now removed). */
	margin: var(--kts-space-8) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--kts-space-4);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kts-deep-olive);
}

.kts-rail__capabilities li:not(:last-child)::after {
	content: "\00b7"; /* middle dot */
	margin-left: var(--kts-space-4);
}

.kts-rail__nav {
	position: fixed;
	inset: 0;
	top: 0;
	z-index: 1;
	padding: var(--kts-space-96) var(--kts-space-24) var(--kts-space-24);
	background: var(--kts-off-white);
	transform: translateY(-100%);
	/*
	 * Sprint A Gate 0 fix: the panel was only ever moved off-screen
	 * (transform), never removed from the tab order -- a keyboard user
	 * tabbing past the closed toggle landed on invisible off-screen nav
	 * links next ("focus order logical" failure). visibility:hidden takes
	 * it out of the tab order and accessibility tree.
	 *
	 * Deliberately not delaying this via a CSS transition-delay on
	 * visibility (tried first): that depends on a transitionend-style
	 * timer actually firing, which proved unreliable in testing and not
	 * worth the risk on a real accessibility path. shell.js instead
	 * toggles a .is-closing class and clears it via setTimeout matched to
	 * this 220ms duration -- see setOpen() -- so the panel stays visible
	 * for the slide-out and only then leaves the tab order, on a
	 * deterministic JS timer rather than a CSS transition event.
	 */
	visibility: hidden;
	transition: transform 220ms ease-out;
	overflow-y: auto;
}

.kts-rail__nav[data-open="true"],
.kts-rail__nav.is-closing {
	visibility: visible;
}

.kts-rail__nav[data-open="true"] {
	transform: translateY(0);
}

.kts-rail__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--kts-space-24);
}

.kts-rail__nav a {
	font-family: var(--kts-font-serif);
	font-size: 1.5rem;
	text-decoration: none;
	color: var(--kts-ink-black);
	/*
	 * 0.6.2 Journal Surface System — Studio Rail "surface tabs" (0.6.1's
	 * slab, strengthened per Product Owner feedback that it was still too
	 * subtle). Every entry now carries a light --kts-surface-faint
	 * resting surface (was transparent/text-only at rest, background only
	 * appeared on hover/current) so the nav reads as a set of tabs before
	 * any interaction; hover/focus/current step up to the stronger
	 * --kts-surface-tint. --kts-radius-sm (8px) is the one Product-Owner-
	 * approved radius exception in this system, shared with the Journal
	 * tiles -- no shadow, no pill, no icon anywhere.
	 */
	display: block;
	padding: var(--kts-space-8) var(--kts-space-12);
	margin: 0 calc(var(--kts-space-12) * -1);
	background: var(--kts-surface-faint);
	border-radius: var(--kts-radius-sm);
	transition: background-color 150ms ease;
}

.kts-rail__nav a:hover,
.kts-rail__nav a:focus-visible {
	background: var(--kts-surface-tint);
}

.kts-rail__nav-item--current a {
	background: var(--kts-surface-tint);
	color: var(--kts-deep-olive);
}

.kts-rail__meta {
	display: none;
}

.kts-rail__location {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--kts-text-secondary);
}

.kts-rail__contact {
	display: inline-block;
	margin-top: var(--kts-space-16);
	font-size: 0.85rem;
	color: var(--kts-ink-black);
	text-decoration: none;
	border-bottom: 1px solid var(--kts-signal-orange);
	padding-bottom: 2px;
}

.kts-main {
	padding: var(--kts-space-32) var(--kts-space-24);
	/* Editorial measure utility — content should not run edge to edge on
	   wide viewports on non-home templates. */
	max-width: 72ch;
}

.kts-main--wide {
	max-width: none;
}

/* ---------- 1200px and up: persistent 316px sticky rail ---------- */

@media (min-width: 1200px) {
	.kts-shell {
		display: grid;
		grid-template-columns: var(--kts-rail-width) minmax(0, 1fr);
		align-items: start;
	}

	.kts-rail {
		height: 100vh;
		padding: var(--kts-space-32) var(--kts-space-24) var(--kts-space-24);
		border-bottom: 0;
		/*
		 * 0.7.0 RC: was --kts-hairline (20%-alpha mix), which read as
		 * nearly invisible between the rail and main canvas at normal
		 * viewing distance. --kts-border-default is the same soft-grey
		 * already used for row dividers elsewhere (Route 2A reference) --
		 * one step stronger, still restrained, not a heavy sidebar border.
		 * Desktop-only; rail width/padding unchanged.
		 */
		border-right: 1px solid var(--kts-border-default);
		overflow-y: auto;
		/*
		 * 0.6.3 root-cause fix: this used to be justify-content:space-between
		 * on FOUR direct children (top/capabilities/nav/meta), which spread
		 * every one of them evenly across the full 100vh -- wordmark,
		 * subtext, nav and contact all pulled apart from each other, not
		 * just contact pulled to the bottom. Two groups now: a naturally-
		 * spaced top cluster (wordmark/subtext/nav, tight margins below)
		 * and .kts-rail__meta pushed to the bottom on its own via
		 * margin-top:auto -- the only flexible space is between the two
		 * clusters, not scattered across every child.
		 */
	}

	.kts-rail__top {
		display: block;
	}

	.kts-rail__toggle {
		display: none;
	}

	.kts-rail__capabilities {
		/*
		 * 0.6.1: was a vertical stack of three plain-cased words here
		 * (flex-direction:column, no separators) -- the exact "three tiny
		 * isolated words" the art direction correction calls out. Reverts
		 * to the same horizontal dot-separated line as mobile, just a
		 * touch larger, so "Design · Print · Digital" keeps reading as
		 * one bound statement under the wordmark at every width.
		 */
		margin-top: var(--kts-space-8);
		font-size: 0.75rem;
	}

	.kts-rail__nav {
		position: static;
		inset: auto;
		/* 0.6.3: was 64px, plus the space-between distribution above --
		   compounded into the large dead gap between subtext and nav.
		   32px lands in the instructed 28-48px range on its own. */
		margin-top: var(--kts-space-32);
		padding: 0;
		background: transparent;
		transform: none;
		/* Desktop rail nav is always visible/focusable regardless of the
		   mobile toggle's data-open state (the toggle itself is hidden at
		   this width, see .kts-rail__toggle above). */
		visibility: visible;
		transition: none;
		overflow-y: visible;
	}

	.kts-rail__nav ul {
		/* 0.6.3: was 12px; instructed range for nav-item gaps is 6-10px. */
		gap: var(--kts-space-8);
	}

	.kts-rail__nav a {
		font-size: 1rem;
		font-family: var(--kts-font-sans);
		color: var(--kts-ink-black);
		/*
		 * 0.6.1: replaces the old dash-marker current-state (::before, a
		 * 14px line) with the same editorial slab used everywhere else in
		 * the rail -- a full-width neutral-grey rectangle instead of a
		 * thin mark, "editorial labels/slabs rather than buttons". Base
		 * padding/margin (block + negative-margin slab sizing) already
		 * set in the shared rule above; this just tightens it for the
		 * narrower desktop rail column.
		 */
		padding: var(--kts-space-8) var(--kts-space-12);
		margin: 0 calc(var(--kts-space-12) * -1);
	}

	.kts-rail__nav-item--current a {
		color: var(--kts-deep-olive);
	}

	.kts-rail__meta {
		display: block;
		/* 0.6.3: this is now the ONLY flexible gap in the rail -- pushes
		   the bottom cluster (location/contact) to the end of the column,
		   however much space that leaves, instead of every child sharing
		   space-between distribution equally. See the .kts-rail comment
		   above. */
		margin-top: auto;
		border-top: 1px solid var(--kts-hairline);
		padding-top: var(--kts-space-24);
	}

	.kts-main {
		padding: var(--kts-space-64) var(--kts-space-64);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kts-rail__nav,
	.kts-rail__toggle,
	.kts-rail__toggle-icon,
	.kts-rail__toggle-icon::before,
	.kts-rail__toggle-icon::after {
		transition: none;
	}
}