/* YesWas components (wave 1, agent 01, 2026-10-27). Everything is prefixed yw- and inert until a template uses it.
   Reads tokens.css. Catalogue, markup and states: docs/DESIGN_SYSTEM.md.
   Selectors for links/buttons carry an element name (a.yw-btn) so they beat the parent theme's `.entry-content a` and button resets. */

/* ---------- base for yw- elements ---------- */
.yw-btn, .yw-pill, .yw-input, .yw-card, .yw-badge, .yw-section, .yw-field, .yw-search {
	box-sizing: border-box;
	font-family: var(--yw-font);
}
.yw-btn *, .yw-pill *, .yw-card *, .yw-search *, .yw-field * { box-sizing: border-box; }

/* Parent theme centres some headings and paragraphs; yw- blocks always start-align. */
.yw-card, .yw-section, .yw-field, .yw-search, .yw-section__title, .yw-section__lead, .yw-card__title, .yw-card__summary, .yw-card__meta { text-align: start; }

/* One focus ring for every interactive yw- element. Dark surfaces get the yellow one via .yw-on-dark. */
:is(a, button, input, select, textarea, summary).yw-focusable:focus-visible,
a.yw-btn:focus-visible, button.yw-btn:focus-visible, input.yw-btn:focus-visible,
a.yw-pill:focus-visible, button.yw-pill:focus-visible,
.yw-input:focus-visible,
.yw-search__field:focus-visible,
.yw-card.yw-card .yw-card__title a:focus-visible,
a.yw-link:focus-visible {
	outline: var(--yw-ring-width) solid var(--yw-ring-color);
	outline-offset: var(--yw-ring-offset);
}

/* ---------- layout helpers ---------- */
.yw-visually-hidden {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.yw-visually-hidden.yw-focusable:focus, .yw-skip-link:focus {
	position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
}
.yw-container { width: 100%; max-width: 70rem; margin-inline: auto; padding-inline: var(--yw-gutter); box-sizing: border-box; }
.yw-stack { display: flex; flex-direction: column; gap: var(--yw-gap, var(--yw-space-4)); }
.yw-stack > * { margin-block: 0; }
.yw-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yw-gap, var(--yw-space-3)); }
.yw-prose { max-width: var(--yw-measure); }
.yw-skip-link {
	position: absolute; left: var(--yw-space-4); top: var(--yw-space-2); z-index: 100000;
	padding: var(--yw-space-3) var(--yw-space-4); background: var(--yw-ink); color: var(--yw-on-dark);
	border-radius: var(--yw-radius); font: var(--yw-weight-strong) var(--yw-text-base)/1.2 var(--yw-font); text-decoration: none;
}

/* ---------- link ---------- */
a.yw-link { font-size: var(--yw-text-base); color: var(--yw-link); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; font-weight: var(--yw-weight-strong); }
a.yw-link:hover { color: var(--yw-link-hover); text-decoration-thickness: 2px; }
.yw-on-dark a.yw-link { color: var(--yw-on-dark-link); }
.yw-on-dark a.yw-link:hover { color: var(--yw-on-dark); }

/* ---------- button ---------- */
/* Parent theme underlines and recolours every `.entry-content a` (0,1,1) and sidebar link. Doubling the class (0,2,0) wins without !important. */
.yw-btn.yw-btn, .yw-btn.yw-btn:hover, .yw-btn.yw-btn:focus, .yw-pill.yw-pill, .yw-pill.yw-pill:hover, .yw-pill.yw-pill:focus { text-decoration: none; }
.yw-btn.yw-btn { font-weight: var(--yw-weight-strong); }
/* Default = primary (brand blue). Modifiers: --secondary (outlined), --on-dark (white on black/navy), --sm is intentionally absent: 44px is the floor. */
.yw-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--yw-space-2);
	min-height: var(--yw-target); min-width: var(--yw-target); padding: var(--yw-space-2) var(--yw-space-5);
	border: 2px solid var(--yw-blue); border-radius: var(--yw-radius);
	background: var(--yw-blue); color: var(--yw-on-dark);
	font-size: var(--yw-text-base); font-weight: var(--yw-weight-strong); line-height: var(--yw-leading-snug);
	text-align: center; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
	transition: background-color var(--yw-dur) var(--yw-ease), border-color var(--yw-dur) var(--yw-ease), color var(--yw-dur) var(--yw-ease);
}
a.yw-btn, button.yw-btn, input.yw-btn { color: var(--yw-on-dark); text-decoration: none; }
a.yw-btn:hover, button.yw-btn:hover, input.yw-btn:hover { background: var(--yw-blue-hover); border-color: var(--yw-blue-hover); color: var(--yw-on-dark); text-decoration: none; }
a.yw-btn:active, button.yw-btn:active, input.yw-btn:active { background: var(--yw-blue-active); border-color: var(--yw-blue-active); color: var(--yw-on-dark); }

a.yw-btn--secondary, button.yw-btn--secondary, input.yw-btn--secondary { background: var(--yw-surface); color: var(--yw-navy); border-color: var(--yw-navy); }
a.yw-btn--secondary:hover, button.yw-btn--secondary:hover, input.yw-btn--secondary:hover { background: var(--yw-surface-tint); color: var(--yw-navy-deep); border-color: var(--yw-navy-deep); }
a.yw-btn--secondary:active, button.yw-btn--secondary:active, input.yw-btn--secondary:active { background: var(--yw-navy); color: var(--yw-on-dark); border-color: var(--yw-navy); }

a.yw-btn--on-dark, button.yw-btn--on-dark, input.yw-btn--on-dark { background: var(--yw-on-dark); color: var(--yw-ink); border-color: var(--yw-on-dark); }
a.yw-btn--on-dark:hover, button.yw-btn--on-dark:hover, input.yw-btn--on-dark:hover { background: var(--yw-surface-tint); color: var(--yw-ink); border-color: var(--yw-surface-tint); }
a.yw-btn--on-dark:active, button.yw-btn--on-dark:active, input.yw-btn--on-dark:active { background: var(--yw-on-dark-muted); color: var(--yw-ink); border-color: var(--yw-on-dark-muted); }
/* Ghost variant on dark: outline only. */
a.yw-btn--on-dark-outline, button.yw-btn--on-dark-outline { background: transparent; color: var(--yw-on-dark); border-color: var(--yw-on-dark); }
a.yw-btn--on-dark-outline:hover, button.yw-btn--on-dark-outline:hover { background: var(--yw-on-dark); color: var(--yw-ink); border-color: var(--yw-on-dark); }
a.yw-btn--on-dark-outline:active, button.yw-btn--on-dark-outline:active { background: var(--yw-on-dark-muted); color: var(--yw-ink); border-color: var(--yw-on-dark-muted); }

.yw-btn[disabled], .yw-btn[aria-disabled="true"] {
	background: var(--yw-disabled-bg); border-color: var(--yw-disabled-bg); color: var(--yw-disabled-ink);
	cursor: not-allowed; pointer-events: none;
}
.yw-btn--block { display: flex; width: 100%; }

/* ---------- badge: episode number, date ---------- */
/* Black number plate, the same device the single-episode date already uses. */
.yw-badge {
	display: inline-block; padding: 2px var(--yw-space-2); border-radius: var(--yw-radius-sm);
	background: var(--yw-ink); color: var(--yw-on-dark);
	font-size: var(--yw-text-sm); font-weight: var(--yw-weight-bold); line-height: var(--yw-leading-snug);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.yw-badge--soft { background: var(--yw-surface-tint); color: var(--yw-navy); }
.yw-on-dark .yw-badge { background: var(--yw-blue); }

/* ---------- pill: topic / filter chip ---------- */
.yw-pill {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--yw-space-2);
	min-height: var(--yw-target); padding: var(--yw-space-2) var(--yw-space-4);
	border: 1px solid var(--yw-border-strong); border-radius: var(--yw-radius-pill);
	background: var(--yw-surface); color: var(--yw-ink);
	font-size: var(--yw-text-base); font-weight: var(--yw-weight-regular); line-height: var(--yw-leading-snug);
	text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
	transition: background-color var(--yw-dur-fast) var(--yw-ease), border-color var(--yw-dur-fast) var(--yw-ease), color var(--yw-dur-fast) var(--yw-ease);
}
a.yw-pill, button.yw-pill { color: var(--yw-ink); text-decoration: none; }
a.yw-pill:hover, button.yw-pill:hover { background: var(--yw-surface-tint); border-color: var(--yw-navy); color: var(--yw-ink); }
a.yw-pill:active, button.yw-pill:active { background: var(--yw-on-dark-muted); border-color: var(--yw-navy); }
/* Pressed = chosen. Not colour alone: the weight changes too and a check is drawn with CSS (no icon font). */
a.yw-pill[aria-pressed="true"], button.yw-pill[aria-pressed="true"], a.yw-pill[aria-current="true"] {
	background: var(--yw-navy); border-color: var(--yw-navy); color: var(--yw-on-dark); font-weight: var(--yw-weight-strong);
}
.yw-pill[aria-pressed="true"]::before, a.yw-pill[aria-current="true"]::before {
	content: ""; width: 0.35em; height: 0.65em; margin-top: -0.15em;
	border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.yw-pill[aria-pressed="true"]:hover { background: var(--yw-navy-deep); border-color: var(--yw-navy-deep); color: var(--yw-on-dark); }
.yw-pill[disabled], .yw-pill[aria-disabled="true"] { background: var(--yw-disabled-bg); border-color: var(--yw-disabled-bg); color: var(--yw-disabled-ink); cursor: not-allowed; pointer-events: none; }
.yw-pills > li { margin: 0; padding: 0; list-style: none; }
.yw-pills { display: flex; flex-wrap: wrap; gap: var(--yw-space-2); margin: 0; padding: 0; list-style: none; }

/* ---------- section ---------- */
.yw-section { padding-block: var(--yw-space-7); color: var(--yw-ink); }
@media (min-width: 48rem) { .yw-section { padding-block: var(--yw-space-8); } }
.yw-section--alt { background: var(--yw-surface-alt); }
.yw-section--dark { background: var(--yw-hero); color: var(--yw-on-dark); --yw-ring-color: var(--yw-focus-on-dark); }
.yw-section--navy { background: var(--yw-navy); color: var(--yw-on-dark); --yw-ring-color: var(--yw-focus-on-dark); }
.yw-section__header {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
	gap: var(--yw-space-2) var(--yw-space-5); margin-bottom: var(--yw-space-5);
}
.yw-section__title { margin: 0; font-size: var(--yw-text-xl); font-weight: var(--yw-weight-bold); line-height: var(--yw-leading-tight); letter-spacing: -0.01em; color: inherit; }
.yw-section__lead { flex-basis: 100%; margin: 0; max-width: var(--yw-measure); font-size: var(--yw-text-md); line-height: var(--yw-leading-body); color: var(--yw-ink-muted); }
.yw-section--dark .yw-section__lead, .yw-section--navy .yw-section__lead { color: var(--yw-on-dark-muted); }

/* ---------- card: episode ---------- */
/* Outlined, no shadow at rest. Whole card is clickable through the title link (stretched ::after); actions sit above it. */
.yw-card {
	position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--yw-space-4);
	padding: var(--yw-space-4); background: var(--yw-surface); color: var(--yw-ink);
	border: 1px solid var(--yw-border); border-radius: var(--yw-radius-lg);
	transition: border-color var(--yw-dur) var(--yw-ease), box-shadow var(--yw-dur) var(--yw-ease);
}
@media (min-width: 40rem) { .yw-card { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--yw-space-5); padding: var(--yw-space-5); } }
.yw-card:hover { border-color: var(--yw-navy); box-shadow: var(--yw-shadow-2); }
.yw-card:focus-within { border-color: var(--yw-navy); }
.yw-card__art { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--yw-radius); background: var(--yw-surface-alt); }
.yw-card__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yw-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--yw-space-2); min-width: 0; }
.yw-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yw-space-2) var(--yw-space-3); margin: 0; font-size: var(--yw-text-sm); line-height: var(--yw-leading-snug); color: var(--yw-ink-muted); }
.yw-card__title { margin: 0; font-size: var(--yw-text-lg); font-weight: var(--yw-weight-bold); line-height: var(--yw-leading-tight); }
.yw-card.yw-card .yw-card__title a, .yw-card.yw-card .yw-card__title a:visited { color: var(--yw-ink); text-decoration: none; font-weight: inherit; }
.yw-card.yw-card .yw-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--yw-radius-lg); }
.yw-card.yw-card .yw-card__title a:hover { color: var(--yw-navy); text-decoration: underline; text-underline-offset: 0.18em; }
.yw-card.yw-card .yw-card__title a:focus-visible { outline-offset: 0; border-radius: var(--yw-radius-sm); }
.yw-card:has(.yw-card.yw-card .yw-card__title a:focus-visible) { outline: var(--yw-ring-width) solid var(--yw-ring-color); outline-offset: var(--yw-ring-offset); }
@supports selector(:has(*)) { .yw-card.yw-card .yw-card__title a:focus-visible { outline: none; } }
.yw-card__summary {
	margin: 0; max-width: var(--yw-measure); font-size: var(--yw-text-base); line-height: var(--yw-leading-body); color: var(--yw-ink);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.yw-card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--yw-space-2) var(--yw-space-3); margin-top: var(--yw-space-1); }
.yw-card--loading .yw-card__art { background: linear-gradient(90deg, var(--yw-surface-alt), var(--yw-surface-tint), var(--yw-surface-alt)); }
/* Stacked variant for narrow columns / sidebar. */
.yw-card--stacked { grid-template-columns: minmax(0, 1fr); }
.yw-card--stacked .yw-card__art { max-width: 12rem; }

/* ---------- forms ---------- */
.yw-field { display: flex; flex-direction: column; gap: var(--yw-space-2); margin: 0; }
.yw-field__label { font-size: var(--yw-text-base); font-weight: var(--yw-weight-strong); line-height: var(--yw-leading-snug); color: var(--yw-ink); }
.yw-field__hint { margin: 0; font-size: var(--yw-text-sm); line-height: var(--yw-leading-snug); color: var(--yw-ink-muted); }
.yw-field__error { margin: 0; font-size: var(--yw-text-sm); font-weight: var(--yw-weight-strong); line-height: var(--yw-leading-snug); color: var(--yw-error); }
.yw-input {
	display: block; width: 100%; min-height: var(--yw-target); padding: var(--yw-space-2) var(--yw-space-3);
	border: 1px solid var(--yw-border-strong); border-radius: var(--yw-radius);
	background: var(--yw-surface); color: var(--yw-ink);
	font-family: var(--yw-font); font-size: var(--yw-text-base); /* 16px also stops iOS zoom on focus */ line-height: var(--yw-leading-snug);
	-webkit-appearance: none; appearance: none;
	transition: border-color var(--yw-dur-fast) var(--yw-ease), box-shadow var(--yw-dur-fast) var(--yw-ease);
}
textarea.yw-input { min-height: 8rem; resize: vertical; line-height: var(--yw-leading-body); }
.yw-input::placeholder { color: var(--yw-ink-muted); opacity: 1; }
.yw-input:hover { border-color: var(--yw-navy); }
.yw-input:focus, .yw-input:focus-visible { border-color: var(--yw-navy); box-shadow: inset 0 0 0 1px var(--yw-navy); }
.yw-input[aria-invalid="true"], .yw-field--error .yw-input { border-color: var(--yw-error); box-shadow: inset 0 0 0 1px var(--yw-error); background: var(--yw-error-bg); }
.yw-input[disabled] { background: var(--yw-disabled-bg); color: var(--yw-disabled-ink); border-color: var(--yw-disabled-bg); cursor: not-allowed; }
.yw-field--success .yw-input { border-color: var(--yw-success); box-shadow: inset 0 0 0 1px var(--yw-success); }
.yw-field--success .yw-field__hint { color: var(--yw-success); font-weight: var(--yw-weight-strong); }

/* Search: field + button joined on one line; wraps under 20rem. */
.yw-search { display: flex; flex-wrap: wrap; gap: 0; max-width: 36rem; }
.yw-search__field {
	flex: 1 1 12rem; min-width: 0; min-height: var(--yw-target); padding: var(--yw-space-2) var(--yw-space-3);
	border: 1px solid var(--yw-border-strong); border-right: 0; border-radius: var(--yw-radius) 0 0 var(--yw-radius);
	background: var(--yw-surface); color: var(--yw-ink); font-family: var(--yw-font); font-size: var(--yw-text-base); line-height: var(--yw-leading-snug);
	-webkit-appearance: none; appearance: none;
}
.yw-search__field::placeholder { color: var(--yw-ink-muted); opacity: 1; }
.yw-search__field:hover { border-color: var(--yw-navy); }
.yw-search__field:focus, .yw-search__field:focus-visible { border-color: var(--yw-navy); box-shadow: inset 0 0 0 1px var(--yw-navy); }
.yw-search__submit.yw-btn { border-radius: 0 var(--yw-radius) var(--yw-radius) 0; flex: 0 0 auto; }
.yw-search__field:focus-visible { outline-offset: 0; position: relative; z-index: 1; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.yw-btn, .yw-pill, .yw-card, .yw-input { transition: none; }
}