/**
 * Daily Engagement channels.
 *
 * Mobile first throughout: social clicks resolve to phones, so the narrow
 * layout is the default and the wider one is the exception.
 *
 * Spacing follows the repo scale (multiples of 4px; 24px is the ceiling for
 * routine spacing) — see AGENTS.md.
 */

/*
 * Every colour and radius resolves against the child theme's design tokens.
 * The --dep-* indirection is kept rather than using --ts-* directly throughout:
 * these templates are meant to survive on a theme that has never heard of them,
 * and a bare var(--ts-coral-400) would collapse to nothing there.
 *
 * The fallbacks are the same palette written out, not the plugin's old green —
 * so wp-admin and any other context without the theme's stylesheet still render
 * the brand rather than a retired one. With the theme present these follow it
 * automatically when it is retuned.
 */
.dep-scope {
	--dep-bg: var(--ts-plum-600, #2A1E30);
	--dep-accent: var(--ts-coral-400, #F0553F);
	--dep-accent-strong: var(--ts-coral-500, #D6412C);
	--dep-text: var(--fg-1, #111827);
	--dep-muted: var(--fg-3, #6B7280);
	--dep-line: var(--border-1, #E5E7EB);
	--dep-surface: var(--ts-ink-50, #F9FAFB);
	--dep-white: var(--ts-white, #FFFFFF);
	--dep-danger: #b3261e;
	--dep-radius: var(--r-sm, 4px);
	--dep-radius-lg: var(--r-md, 8px);

	/* Declared twice on purpose: the flat rgba is what a browser without
	   color-mix() keeps, and it is the only pair here that cannot be derived
	   from the token above it. */
	--dep-accent-soft: rgba(240, 85, 63, 0.08);
	--dep-accent-soft: color-mix(in srgb, var(--dep-accent) 8%, transparent);
	--dep-danger-soft: rgba(179, 38, 30, 0.06);
	--dep-danger-soft: color-mix(in srgb, var(--dep-danger) 6%, transparent);

	max-width: 720px;
	margin: 0 auto;
	padding: 40px 16px 24px;
	color: var(--dep-text);
}

/*
 * The UA stylesheet gives [hidden] display:none at zero specificity, so any
 * class rule setting display beats it — and several here do: .dep-index__item
 * becomes a grid on desktop, .dep-jump__letter and .dep-filter are flex. Each
 * of those would keep a hidden element on screen, and .dep-filter would show
 * its buttons to a reader with no JavaScript to make them work. !important is
 * right for once: hidden means hidden.
 */
.dep-scope [hidden] {
	display: none !important;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.dep-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dep-muted);
}

.dep-eyebrow__label {
	color: var(--dep-accent);
}

.dep-eyebrow__sep {
	opacity: 0.5;
}

.dep-title {
	margin: 0;
	font-size: 32px;
	line-height: 1.15;
}

.dep-pillars {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}

.dep-pillar {
	padding: 4px 8px;
	border: 1px solid var(--dep-line);
	border-radius: var(--dep-radius);
	font-size: 12px;
	color: var(--dep-muted);
}

/* ── Body copy ────────────────────────────────────────────────────────── */

.dep-lede {
	margin: 16px 0 0;
	font-size: 19px;
	line-height: 1.6;
}

.dep-attribution,
.dep-credit {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--dep-muted);
}

.dep-example {
	margin: 16px 0 0;
	padding: 16px;
	border-left: 4px solid var(--dep-accent);
	background: var(--dep-surface);
}

.dep-example p {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
}

/* Inline rather than a line of its own: it labels the sentence it introduces,
   and a reader should take both in as one. */
.dep-example__label {
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--dep-muted);
}

/* ── Read-more link ───────────────────────────────────────────────────── */

.dep-more {
	margin: 16px 0 0;
}

.dep-more__link {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 0;
	line-height: 1.4;
	font-size: 17px;
	font-weight: 600;
	color: var(--dep-accent);
}

.dep-more__link:hover {
	text-decoration: underline;
}

/* Visible, not screen-reader-only: a new tab surprises a sighted reader just
   as much, and the warning is only useful before the click. */
.dep-more__hint {
	font-size: 13px;
	font-weight: 400;
	color: var(--dep-muted);
}

.dep-empty {
	margin: 24px 0 0;
	color: var(--dep-muted);
}

/* ── Card ─────────────────────────────────────────────────────────────── */

.dep-card {
	margin: 24px 0 0;
}

.dep-card__canvas {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dep-radius-lg);
	background: var(--dep-bg);
}

.dep-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.dep-card__download {
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--dep-line);
	border-radius: var(--dep-radius);
	background: var(--dep-white);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.dep-card__download:hover {
	border-color: var(--dep-accent);
	color: var(--dep-accent);
}

.dep-card__hint {
	font-size: 13px;
	color: var(--dep-muted);
}

/* ── Poll ─────────────────────────────────────────────────────────────── */

.dep-poll {
	margin: 24px 0 0;
}

.dep-poll__options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dep-poll__item + .dep-poll__item {
	margin-top: 8px;
}

.dep-poll__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 44px;
	padding: 12px 16px;
	border: 1px solid var(--dep-line);
	border-radius: var(--dep-radius);
	background: var(--dep-white);
	font-size: 16px;
	text-align: left;
	cursor: pointer;
}

.dep-poll__btn:hover:not(:disabled) {
	border-color: var(--dep-accent);
}

.dep-poll__btn:disabled {
	cursor: default;
}

.dep-poll__figure {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--dep-muted);
}

.dep-poll__bar {
	display: block;
	height: 6px;
	margin-top: 4px;
	border-radius: var(--dep-radius);
	background: var(--dep-line);
	overflow: hidden;
}

.dep-poll__fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--dep-accent);
	transition: width 0.4s ease;
}

.dep-poll__item.is-picked .dep-poll__btn {
	border-color: var(--dep-accent);
	background: var(--dep-accent-soft);
}

.dep-poll__total,
.dep-poll__message,
.dep-form__message,
.dep-signup__message {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--dep-muted);
}

.dep-poll__message.is-error,
.dep-form__message.is-error,
.dep-signup__message.is-error {
	color: var(--dep-danger);
}

/* ── Scenario ─────────────────────────────────────────────────────────── */

.dep-scenario {
	margin: 24px 0 0;
}

.dep-scenario__prompt {
	margin: 0 0 16px;
	font-size: 20px;
}

.dep-scenario__options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dep-scenario__item + .dep-scenario__item {
	margin-top: 8px;
}

.dep-scenario__btn {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 12px 16px;
	border: 1px solid var(--dep-line);
	border-radius: var(--dep-radius);
	background: var(--dep-white);
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
}

.dep-scenario__btn:hover:not(:disabled) {
	border-color: var(--dep-accent);
}

.dep-scenario__marker {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: var(--dep-radius);
	background: var(--dep-surface);
	font-size: 13px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	color: var(--dep-muted);
}

.dep-scenario__btn.is-answer {
	border-color: var(--dep-accent);
	background: var(--dep-accent-soft);
}

.dep-scenario__btn.is-wrong-pick {
	border-color: var(--dep-danger);
	background: var(--dep-danger-soft);
}

.dep-scenario__reveal {
	margin-top: 16px;
	padding: 16px;
	border-radius: var(--dep-radius);
	background: var(--dep-surface);
}

.dep-scenario__verdict {
	margin: 0 0 8px;
	font-weight: 700;
}

.dep-scenario__note {
	margin: 0;
	line-height: 1.55;
}

.dep-scenario__cta {
	margin: 16px 0 0;
	font-size: 15px;
}

/* No rule previously existed here at all, so the browser default (blue,
   purple once visited) was showing through instead of the brand accent. */
.dep-scenario__submit-link {
	color: var(--dep-accent);
	text-decoration: underline;
}

.dep-scenario__submit-link:hover {
	color: var(--dep-accent-strong);
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.dep-form {
	margin: 24px 0 0;
}

.dep-field {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.dep-field__label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
}

.dep-field__hint {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--dep-muted);
}

.dep-field textarea,
.dep-field input[type="text"],
.dep-signup__row input[type="email"] {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--dep-line);
	border-radius: var(--dep-radius);
	font: inherit;
	font-size: 16px; /* Below 16px, iOS Safari zooms the page on focus. */
}

.dep-option-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.dep-option-row input[type="text"] {
	flex: 1;
}

.dep-form__btn,
.dep-signup__btn {
	min-height: 44px;
	padding: 8px 20px;
	border: 0;
	border-radius: var(--dep-radius);
	background: var(--dep-accent);
	color: var(--dep-white);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.dep-form__btn:hover:not(:disabled),
.dep-signup__btn:hover:not(:disabled) {
	background: var(--dep-accent-strong);
}

.dep-form__btn:disabled,
.dep-signup__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ── Signup ───────────────────────────────────────────────────────────── */

.dep-signup {
	margin: 24px 0 0;
	padding: 20px;
	border: 1px solid var(--dep-line);
	border-radius: var(--dep-radius-lg);
	background: var(--dep-surface);
}

.dep-signup__title {
	margin: 0 0 16px;
	font-size: 20px;
}

.dep-signup__blurb {
	margin: 0 0 16px;
	color: var(--dep-muted);
}

.dep-signup__note {
	margin: 0 0 16px;
	font-weight: 600;
	color: var(--dep-accent);
}

.dep-signup__label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
}

.dep-signup__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dep-signup__row input[type="email"] {
	flex: 1 1 220px;
}

.dep-signup__small {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--dep-muted);
}

/* ── Share ────────────────────────────────────────────────────────────── */

.dep-share {
	margin: 24px 0 0;
}

.dep-share__label {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dep-muted);
}

.dep-share__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dep-share__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--dep-line);
	border-radius: var(--dep-radius);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	color: var(--dep-text);
}

.dep-share__btn:hover {
	border-color: var(--dep-accent);
	color: var(--dep-accent);
}

/* ── Navigation and cross-promotion ───────────────────────────────────── */

.dep-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--dep-line);
}

.dep-nav__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 44px;
	/* Capped at half the row: a glossary label is a term, not a short date,
	   and two long ones would otherwise push each other off a phone. */
	max-width: 50%;
	text-decoration: none;
	color: var(--dep-text);
}

.dep-nav__link--next {
	margin-left: auto;
	text-align: right;
}

/* Only the label reacts: .dep-nav__dir sets its own muted colour, so the
   "Previous"/"Next" eyebrow stays put and the term itself is what lights up. */
.dep-nav__link:hover {
	color: var(--dep-accent);
}

.dep-nav__link:hover .dep-nav__day {
	text-decoration: underline;
}

.dep-nav__dir {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dep-muted);
}

.dep-nav__day {
	font-weight: 600;
	overflow-wrap: break-word;
}

.dep-cross {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
}

.dep-cross__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: var(--dep-radius);
	background: var(--dep-surface);
	font-size: 14px;
	text-decoration: none;
	color: var(--dep-text);
}

.dep-cross__link:hover {
	color: var(--dep-accent);
}

/* ── Glossary index ───────────────────────────────────────────────────── */

/* Wider than a reading column: this page is a lookup table, not prose. */
.dep-scope--index {
	max-width: 880px;
}

.dep-index__count {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--dep-muted);
}

.dep-index__today {
	margin: 24px 0 0;
	padding: 16px;
	border-left: 4px solid var(--dep-accent);
	background: var(--dep-surface);
}

.dep-index__today .dep-eyebrow {
	margin: 0 0 8px;
}

.dep-index__today-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
}

.dep-index__today-title a {
	color: inherit;
	text-decoration: none;
}

.dep-index__today-title a:hover {
	color: var(--dep-accent);
}

.dep-index__today-def {
	margin: 16px 0 0;
	font-size: 15px;
	color: var(--dep-muted);
}

/* Sticks while the list scrolls, so the letters stay reachable on a long
   index without a jump back to the top. */
.dep-jump {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 24px 0 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--dep-line);
	background: var(--dep-white);
}

.dep-jump__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
	border-radius: var(--dep-radius);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--dep-muted);
}

.dep-jump__letter:hover {
	background: var(--dep-surface);
	color: var(--dep-accent);
}

.dep-index__group {
	margin: 24px 0 0;
	/* Clears the sticky letter bar when a jump link lands here. */
	scroll-margin-top: 56px;
}

.dep-index__letter {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--dep-accent);
}

.dep-index__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--dep-line);
}

.dep-index__item {
	padding: 16px 0;
	border-bottom: 1px solid var(--dep-line);
}

.dep-index__term {
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	color: var(--dep-text);
}

.dep-index__term:hover {
	color: var(--dep-accent);
}

.dep-index__def {
	display: block;
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dep-muted);
}

.dep-index__empty {
	margin: 24px 0 0;
	color: var(--dep-muted);
}

.dep-index-link {
	margin: 24px 0 0;
	font-size: 15px;
}

.dep-index-link a {
	color: var(--dep-accent);
}

/* ── Pillar filter ────────────────────────────────────────────────────── */

.dep-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
}

.dep-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--dep-line);
	border-radius: var(--r-pill, 999px);
	background: var(--dep-white);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--dep-muted);
	cursor: pointer;
}

.dep-filter__btn:hover {
	border-color: var(--dep-accent);
	color: var(--dep-accent);
}

.dep-filter__btn.is-active {
	border-color: var(--dep-accent);
	background: var(--dep-accent);
	color: var(--dep-white);
}

.dep-filter__count {
	font-size: 12px;
	font-weight: 500;
	opacity: 0.7;
}

.dep-filter__status {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--dep-muted);
}

/* A pillar badge that leads somewhere, on channels with an index. */
.dep-pillar--link {
	text-decoration: none;
}

.dep-pillar--link:hover {
	border-color: var(--dep-accent);
	color: var(--dep-accent);
}

/* ── Wider screens ────────────────────────────────────────────────────── */

@media ( min-width: 768px ) {
	.dep-scope {
		padding: 56px 24px 24px;
	}

	.dep-title {
		font-size: 42px;
	}

	.dep-lede {
		font-size: 21px;
	}

	/* Two columns once the term and its definition can sit side by side. */
	.dep-index__item {
		display: grid;
		grid-template-columns: 240px 1fr;
		gap: 24px;
		align-items: baseline;
	}

	.dep-index__def {
		margin: 0;
	}
}