/*
Theme Name:   Evidence At Trial
Theme URI:    https://evidenceattrial.com/
Author:       Evidence Central
Description:  A clean, Apple-inspired dashboard theme for the Evidence Central Membership plugin. There is no traditional site header, nav menu or widgetized footer — every screen is built to read as a private member application rather than a marketing site.
Version:      1.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain:  evidenceattrial
*/

/* ==================================================================
   1. Design tokens
   ------------------------------------------------------------------
   Values are Apple's own: #1d1d1f / #6e6e73 / #d2d2d7 / #f5f5f7 from
   apple.com, #0071e3 for the accent, and the iOS system grays for the
   elevated dark surfaces. Separation comes from hairlines and surface
   contrast rather than drop shadows — shadows appear only where Apple
   uses them (a lifted segmented-control thumb, a hovered card, modals).
   ================================================================== */

:root {
	/* The app is light-only by design. Declaring it keeps the browser from
	   dark-rendering form fields and scrollbars for visitors whose OS is
	   set to dark — without this the password input comes up charcoal. */
	color-scheme: light;

	--evat-bg: #f5f5f7;
	--evat-surface: #ffffff;
	--evat-surface-alt: #f5f5f7;
	--evat-fill: rgba(118, 118, 128, 0.12);
	--evat-border: #d2d2d7;
	--evat-ink: #1d1d1f;
	--evat-text: #1d1d1f;
	--evat-muted: #6e6e73;
	--evat-accent: #0071e3;
	--evat-accent-hover: #0077ed;
	--evat-accent-soft: rgba(0, 113, 227, 0.1);
	--evat-accent-ring: rgba(0, 125, 250, 0.35);
	--evat-accent-contrast: #ffffff;
	--evat-danger: #d70015;
	--evat-danger-soft: rgba(215, 0, 21, 0.08);

	/* The nav bar is the one dark surface, so it carries its own tokens. */
	--evat-navbar: rgba(22, 22, 23, 0.8);
	--evat-on-dark: #f5f5f7;
	--evat-on-dark-muted: rgba(245, 245, 247, 0.7);
	--evat-on-dark-line: rgba(255, 255, 255, 0.22);
	--evat-on-dark-fill: rgba(255, 255, 255, 0.1);
	--evat-accent-on-dark: #2997ff;
	--evat-warning: #8a6d00;
	--evat-warning-soft: rgba(217, 163, 0, 0.12);

	--evat-radius-sm: 8px;
	--evat-radius: 12px;
	--evat-radius-lg: 18px;
	--evat-radius-pill: 980px;

	--evat-lift: 0 12px 28px rgba(0, 0, 0, 0.1);
	--evat-thumb: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
	--evat-modal: 0 24px 60px rgba(0, 0, 0, 0.35);

	--evat-topbar-h: 3.5rem;
	--evat-container: 70rem;
	--evat-ease: cubic-bezier(0.28, 0.11, 0.32, 1);

	--evat-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--evat-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ==================================================================
   2. Reset + base
   ================================================================== */

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

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

body {
	margin: 0;
	background: var(--evat-bg);
	color: var(--evat-text);
	font-family: var(--evat-font);
	/* Apple's body metrics. */
	font-size: 17px;
	line-height: 1.47059;
	letter-spacing: -0.022em;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--evat-accent);
	text-decoration: none;
}

a:hover {
	color: var(--evat-accent-hover);
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--evat-ink);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 0.4em;
}

h1 {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	letter-spacing: -0.003em;
}

h2 {
	font-size: 1.45rem;
}

h3 {
	font-size: 1.2rem;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

button {
	font-family: inherit;
	letter-spacing: inherit;
}

::selection {
	background: var(--evat-accent-soft);
	color: var(--evat-ink);
}

:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--evat-accent-ring);
	border-radius: var(--evat-radius-sm);
}

.evat-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
   3. App shell — topbar
   ------------------------------------------------------------------
   The translucency here is apple.com's exact global-nav treatment:
   a heavily saturated blur over a mostly-opaque surface.
   ================================================================== */

.evat-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.evat-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--evat-topbar-h);
	display: flex;
	align-items: center;
	/* apple.com's global nav: near-black at 80% over a saturated blur, and
	   no bottom hairline — the dark band is its own edge. */
	background: var(--evat-navbar);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
}

.evat-topbar__inner {
	width: 100%;
	max-width: var(--evat-container);
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.evat-topbar__left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.evat-brand {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--evat-on-dark);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.022em;
	min-width: 0;
}

.evat-brand:hover {
	color: var(--evat-on-dark);
	text-decoration: none;
}

.evat-brand img {
	display: block;
	height: 28px;
	width: auto;
}

.evat-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	flex: 0 0 auto;
	/* An app-icon squircle, inverted to read on the dark bar. */
	border-radius: 7px;
	background: var(--evat-on-dark);
	color: #1d1d1f;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0;
}

.evat-brand__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A hairline divider then a plain-case section label — the sub-nav
   pattern Apple uses, rather than an uppercase tracked-out eyebrow. */
.evat-topbar__sep {
	width: 1px;
	height: 18px;
	flex: 0 0 auto;
	background: var(--evat-on-dark-line);
}

.evat-topbar__context {
	font-size: 0.94rem;
	font-weight: 400;
	color: var(--evat-on-dark-muted);
	white-space: nowrap;
}

/* Base .evat-nav-link is the LIGHT-page variant: the app bar's "Leave this
   course" button uses this same class on the white body. The dark variant is
   scoped to .evat-topbar below so it can't leak there. */
.evat-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex: 0 0 auto;
	padding: 0.3rem 0.75rem 0.3rem 0.5rem;
	font-size: 0.88rem;
	font-weight: 400;
	color: var(--evat-accent);
	border-radius: var(--evat-radius-pill);
	white-space: nowrap;
	max-width: 15rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.evat-nav-link:hover {
	color: var(--evat-accent-hover);
	background: var(--evat-accent-soft);
	text-decoration: none;
}

.evat-nav-link svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

/* The label, not the flex container, has to do the truncating — a long
   course title lands here. */
.evat-nav-link span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Dark-bar variant. */
.evat-topbar .evat-nav-link {
	color: var(--evat-accent-on-dark);
}

.evat-topbar .evat-nav-link:hover {
	color: var(--evat-accent-on-dark);
	background: var(--evat-on-dark-fill);
}

/* ==================================================================
   4. App shell — content well + footer
   ================================================================== */

.evat-main {
	flex: 1 0 auto;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.evat-container {
	width: 100%;
	max-width: var(--evat-container);
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.evat-container--narrow {
	max-width: 44rem;
}

.evat-page-head {
	margin-bottom: 2rem;
}

.evat-page-head h1 {
	margin-bottom: 0.3rem;
}

/* Replaces the uppercase eyebrow: a plain-case gray subtitle, which is
   how Apple carries secondary context under a headline. */
.evat-page-head__sub {
	color: var(--evat-muted);
	font-size: 1.05rem;
	margin: 0;
	max-width: 40rem;
}

.evat-page-head__intro {
	color: var(--evat-muted);
	margin-top: 0.75rem;
	max-width: 40rem;
}

.evat-card {
	background: var(--evat-surface);
	border-radius: var(--evat-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.evat-article .evat-card {
	max-width: 44rem;
	margin-inline: auto;
}

.evat-article img {
	border-radius: var(--evat-radius);
}

.evat-article__meta {
	color: var(--evat-muted);
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}

.evat-article__thumb {
	margin-bottom: 1.5rem;
}

.evat-back-course {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.9rem;
	color: var(--evat-accent);
	margin-bottom: 1rem;
}

.evat-back-course:hover {
	text-decoration: none;
	color: var(--evat-accent-hover);
}

.evat-footer {
	flex: 0 0 auto;
	padding: 2rem clamp(1.25rem, 4vw, 2.5rem);
	text-align: center;
	font-size: 0.75rem;
	color: var(--evat-muted);
	letter-spacing: -0.01em;
}

/* ==================================================================
   5. Course directory — icon-box grid
   ------------------------------------------------------------------
   White cards on the gray canvas, no borders in light mode: the
   surface contrast does the separating. Shadow appears only on hover.
   ================================================================== */

.evat-course-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.evat-course-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	background: var(--evat-surface);
	border-radius: var(--evat-radius-lg);
	padding: 1.5rem;
	color: inherit;
	transition: transform 0.4s var(--evat-ease), box-shadow 0.4s var(--evat-ease);
}

a.evat-course-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--evat-lift);
	color: inherit;
	text-decoration: none;
}

/* The iconbox: an app-icon squircle, tinted with the accent. */
.evat-course-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 12px;
	background: var(--evat-accent-soft);
	color: var(--evat-accent);
	margin-bottom: 0.25rem;
}

.evat-course-card__title {
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.022em;
	margin: 0;
}

.evat-course-card__excerpt {
	color: var(--evat-muted);
	font-size: 0.95rem;
	margin: 0;
	flex: 1 0 auto;
}

/* Caption-weight meta, dot-separated — no bordered badge pills. */
.evat-course-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.8rem;
	color: var(--evat-muted);
	letter-spacing: -0.01em;
}

.evat-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
}

.evat-badge svg {
	width: 11px;
	height: 11px;
}

.evat-course-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin-top: 0.35rem;
	font-size: 0.95rem;
	color: var(--evat-accent);
}

.evat-course-card__cta svg {
	width: 13px;
	height: 13px;
	transition: transform 0.3s var(--evat-ease);
}

a.evat-course-card:hover .evat-course-card__cta svg {
	transform: translateX(3px);
}

.evat-course-card--unlinked {
	opacity: 0.7;
}

.evat-course-card__notice {
	font-size: 0.8rem;
	color: var(--evat-danger);
	margin: 0;
}

.evat-empty-state {
	color: var(--evat-muted);
	text-align: center;
	padding: 4rem 1rem;
}

/* ==================================================================
   6. Evidence Central Membership — theme skin
   ------------------------------------------------------------------
   The plugin never sets a text colour and mixes its neutral tokens out
   of currentColor, so most of the skin is just pointing its custom
   properties at our tokens (see the plugin README's "Styling").
   Everything here is prefixed with .evat-shell (the body class) on
   purpose: the plugin enqueues its stylesheet during shortcode render,
   which can print AFTER this file, so equal-specificity overrides
   would lose. The extra class keeps us ahead regardless of order.
   ================================================================== */

.evat-shell .ecm {
	--ecm-accent: var(--evat-accent);
	--ecm-accent-contrast: var(--evat-accent-contrast);
	--ecm-border: var(--evat-border);
	--ecm-surface: var(--evat-surface);
	--ecm-surface-alt: var(--evat-fill);
	--ecm-muted: var(--evat-muted);
	--ecm-radius: var(--evat-radius-lg);
	--ecm-gap: 1.5rem;
}

/* ---- Segmented control (iOS UISegmentedControl) in place of the
        plugin's underline tabs ---- */

.evat-shell .ecm-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 2px;
	background: var(--evat-fill);
	border: 0;
	border-bottom: 0;
	border-radius: 9px;
	margin-bottom: 1.75rem;
}

.evat-shell .ecm-tabs__tab {
	appearance: none;
	border: 0;
	border-bottom: 0;
	margin-bottom: 0;
	border-radius: 7px;
	padding: 0.35rem 0.95rem;
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--evat-ink);
	background: transparent;
	transition: background 0.2s var(--evat-ease);
}

.evat-shell .ecm-tabs__tab:hover {
	color: var(--evat-ink);
	background: transparent;
}

.evat-shell .ecm-tabs__tab.is-active {
	color: var(--evat-ink);
	background: var(--evat-surface);
	border-bottom-color: transparent;
	box-shadow: var(--evat-thumb);
}

/* Plain muted numerals — a bordered count pill inside a segment reads
   as clutter at this size. */
.evat-shell .ecm-tabs__count {
	margin-left: 0.35em;
	padding: 0;
	font-size: 0.85em;
	color: var(--evat-muted);
	background: none;
	border: 0;
	border-radius: 0;
}

/* ---- Videos as cards, matching the surface treatment of the template
        and news lists so the three tabs read as one system ---- */

.evat-shell .ecm-video {
	display: flex;
	flex-direction: column;
	background: var(--evat-surface);
	border-radius: var(--evat-radius-lg);
	overflow: hidden;
	transition: transform 0.4s var(--evat-ease), box-shadow 0.4s var(--evat-ease);
}

.evat-shell .ecm-video:hover {
	transform: translateY(-4px);
	box-shadow: var(--evat-lift);
}

/* The card clips the corners, so the poster itself is square-cornered. */
.evat-shell .ecm-video__trigger {
	border-radius: 0;
	box-shadow: none;
}

.evat-shell .ecm-video__meta {
	padding: 1rem 1.15rem 1.15rem;
}

.evat-shell .ecm-video__title {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.022em;
	margin-bottom: 0.25rem;
}

.evat-shell .ecm-video__desc {
	font-size: 0.9rem;
	margin-bottom: 0.3rem;
}

/* Same tertiary treatment as the file rows — see the note there. */
.evat-shell .ecm-video__file {
	font-family: var(--evat-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

/* ---- Templates as an inset grouped list (iOS Settings) ---- */

.evat-shell .ecm-files,
.evat-shell .ecm-news {
	gap: 0;
	background: var(--evat-surface);
	border-radius: var(--evat-radius-lg);
	overflow: hidden;
}

.evat-shell .ecm-file {
	position: relative;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0.9rem 1.25rem;
	gap: 0.9rem;
}

/* Spacing inside the row comes from the margins below, not a flex gap that
   would stack on top of them. */
.evat-shell .ecm-file__body {
	gap: 0;
}

/* Hairline separators between rows only, inset to the row padding. */
.evat-shell .ecm-file + .ecm-file::before,
.evat-shell .ecm-news__item + .ecm-news__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 1.25rem;
	right: 0;
	height: 1px;
	background: var(--evat-border);
}

/* A neutral file-type chip: colour here competes with the download
   affordance, which is the only thing that should read as actionable. */
.evat-shell .ecm-file__ext {
	min-width: 3rem;
	padding: 0.3rem 0.45rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--evat-muted);
	background: var(--evat-fill);
	border-radius: var(--evat-radius-sm);
}

/* Three distinct tiers. The plugin ships description and metadata at the
   same size and colour, so prose and "filename · size" read as one blur.
   Separating them by colour alone would mean going lighter than #6e6e73,
   which drops under 4.5:1 on white — so the split is size + weight, plus
   a monospace face for the technical string, which reads as data at a
   glance and keeps full contrast. */

.evat-shell .ecm-file__title {
	font-size: 1rem;
	font-weight: 500;
	color: var(--evat-ink);
	line-height: 1.35;
}

.evat-shell .ecm-file__desc {
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--evat-muted);
	margin-top: 0.1rem;
}

.evat-shell .ecm-file__meta {
	margin-top: 0.3rem;
	font-family: var(--evat-font-mono);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--evat-muted);
}

/* Tinted circle that fills on hover — Apple's download affordance in
   Music and Podcasts. */
.evat-shell .ecm-file__download {
	width: 2rem;
	height: 2rem;
	color: var(--evat-accent);
	background: var(--evat-accent-soft);
	transition: background 0.2s var(--evat-ease), color 0.2s var(--evat-ease);
}

.evat-shell .ecm-file__download svg {
	width: 16px;
	height: 16px;
}

.evat-shell .ecm-file__download:hover,
.evat-shell .ecm-file__download:focus-visible {
	color: var(--evat-accent-contrast);
	background: var(--evat-accent);
	filter: none;
	transform: none;
}

.evat-shell .ecm-file__download:active {
	transform: scale(0.92);
}

/* ---- Latest News as a grouped list ---- */

.evat-shell .ecm-news__item {
	position: relative;
	border-bottom: 0;
	padding: 0.95rem 1.25rem;
}

.evat-shell .ecm-news__item:last-child {
	padding-bottom: 0.95rem;
}

.evat-shell .ecm-news__link {
	font-size: 1rem;
	font-weight: 400;
	color: var(--evat-accent);
}

.evat-shell .ecm-news__date {
	font-size: 0.8rem;
	margin-top: 0.2rem;
}

.evat-shell .ecm-news__excerpt {
	font-size: 0.9rem;
	margin-top: 0.3rem;
}

/* ---- Buttons: the apple.com blue pill ---- */

.evat-shell .ecm-gate__submit,
.evat-shell .ecm-course__button {
	padding: 0.68rem 1.35rem;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: -0.022em;
	border-radius: var(--evat-radius-pill);
	background: var(--evat-accent);
	color: var(--evat-accent-contrast);
	box-shadow: none;
	transition: background 0.2s var(--evat-ease);
}

.evat-shell .ecm-gate__submit:hover,
.evat-shell .ecm-course__button:hover {
	background: var(--evat-accent-hover);
	filter: none;
	text-decoration: none;
}

/* ---- Inputs ---- */

.evat-shell .ecm-gate__input {
	padding: 0.7rem 0.85rem;
	font-size: 1rem;
	background: var(--evat-surface);
	border: 1px solid var(--evat-border);
	border-radius: var(--evat-radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.evat-shell .ecm-gate__input:focus {
	outline: none;
	border-color: var(--evat-accent);
	box-shadow: 0 0 0 4px var(--evat-accent-ring);
}

.evat-shell .ecm-gate__label {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--evat-muted);
}

/* ---- Notices ---- */

.evat-shell .ecm-gate__error {
	color: var(--evat-danger);
	background: var(--evat-danger-soft);
	border-left: 0;
	border-radius: var(--evat-radius);
	padding: 0.7rem 0.9rem;
	font-size: 0.92rem;
}

.evat-shell .ecm-notice {
	color: var(--evat-warning);
	background: var(--evat-warning-soft);
	border-left: 0;
	border-radius: var(--evat-radius);
	padding: 0.7rem 0.9rem;
	font-size: 0.92rem;
}

/* ---- Lightbox ---- */

.evat-shell .ecm-lightbox__player {
	border-radius: var(--evat-radius-lg);
	box-shadow: var(--evat-modal);
}

/* ==================================================================
   7. Course page app bar (resources.php override)
   ================================================================== */

.evat-appbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.evat-appbar__main {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.evat-appbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	border-radius: 13px;
	background: var(--evat-accent-soft);
	color: var(--evat-accent);
}

.evat-appbar__title {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.022em;
}

/* Real information in place of a decorative eyebrow. */
.evat-appbar__sub {
	margin: 0.15rem 0 0;
	font-size: 0.88rem;
	color: var(--evat-muted);
	letter-spacing: -0.01em;
}

.evat-appbar__signout {
	flex: 0 0 auto;
	margin-top: 0.5rem;
}

.evat-shell .ecm-resources__intro {
	color: var(--evat-muted);
	margin-bottom: 1.5rem;
	max-width: 42rem;
}

/* ==================================================================
   8. Sign-in gate (password-form.php override)
   ================================================================== */

.evat-gate-wrap {
	display: flex;
	justify-content: center;
	padding-block: clamp(1rem, 6vw, 3rem);
}

.evat-gate-card {
	width: 100%;
	max-width: 25rem;
	text-align: center;
}

.evat-gate-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 1.25rem;
	border-radius: var(--evat-radius-pill);
	background: var(--evat-fill);
	color: var(--evat-ink);
}

.evat-shell .ecm-gate__title {
	font-size: 1.5rem;
	margin-bottom: 0.4rem;
}

.evat-shell .ecm-gate__excerpt {
	color: var(--evat-muted);
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
}

.evat-shell .evat-gate-card .ecm-gate__panel {
	max-width: none;
	text-align: left;
	background: var(--evat-surface);
	border: 0;
	border-radius: var(--evat-radius-lg);
	padding: 1.75rem;
}

.evat-shell .ecm-gate__lead {
	font-size: 0.95rem;
	margin-bottom: 1.25rem;
}

.evat-shell .evat-gate-card .ecm-gate__submit {
	width: 100%;
	margin-top: 1.25rem;
}

.evat-shell .ecm-gate__thumb img {
	border-radius: var(--evat-radius-lg);
	margin-bottom: 1.25rem;
}

/* ==================================================================
   9. Responsive + motion
   ================================================================== */

@media (max-width: 44rem) {
	.evat-topbar__sep,
	.evat-topbar__context {
		display: none;
	}

	.evat-nav-link {
		max-width: 10rem;
	}

	.evat-appbar {
		flex-direction: column;
		gap: 1rem;
	}

	.evat-appbar__signout {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evat-course-card,
	.evat-course-card__cta svg,
	.evat-shell .ecm-tabs__tab,
	.evat-shell .ecm-file__download,
	.evat-shell .ecm-gate__submit,
	.evat-shell .ecm-gate__input {
		transition: none;
	}

	a.evat-course-card:hover {
		transform: none;
	}

	a.evat-course-card:hover .evat-course-card__cta svg {
		transform: none;
	}
}