/*
 * AMG Northwest Pasco: the one skin ("amg"). Phase 6 Step B.
 *
 * Derived from dojo.css (same selectors, same mechanics: hover scale, badge reserve, filter states, print),
 * with colours, fonts, borders and radii taken from BRAND.md. D1 contract: appearance only, every rule under
 * .mwpp-theme-amg; no grid mechanics, no float-layer positioning, no layout change. Sections: 1 palette +
 * category colour (stage 1), 2 tokens, 3-10 the Dojo section map, restyled (stage 2).
 *
 * CATEGORY COLOUR comes from HERE, keyed by data-category (the six live category keys, plus womens and openmat from 0.1.1; saved overrides are emitted inline by AMGS_Category_Styles), NOT from the stored
 * library colour; the library is never rewritten, so rollback restores the old look exactly. An unknown
 * category falls back to the renderer's own library colour (neutral fallback). Tag spec = Set 2 + amendment
 * (Youth Gi / Youth No-Gi carry a 1px Sage edge); text colour is the TAG's text colour, not the renderer's
 * luma pick. Specialty = Card tint fill + 2px Black outline.
 *
 * SPECIFICITY: the renderer's per-instance <style> block carries `.mwpp-page[data-schedule] .mwpp-card
 * [data-category]` (4 class-equivalents) and is emitted AFTER this stylesheet, so a tie loses. Every rule
 * below is `.mwpp-page.mwpp-theme-amg[data-schedule] ...` = 5 (card) / 6 (legend dot).
 */

.mwpp-page.mwpp-theme-amg {
	/* BRAND.md section 1 palette */
	--amgs-black: #010101;
	--amgs-cream: #f4f0ec;
	--amgs-sage: #7b8166;
	--amgs-primary-green: #394030;
	--amgs-deep-olive: #2d3127;
	--amgs-pale-sage: #b0b898;
	--amgs-pale-sage-tint: #d2d4c2;   /* Pale sage 50% toward Cream (Youth No-Gi) */
	--amgs-card-tint: #faf8f3;
	--amgs-tan: #e5e1d4;
	--amgs-dark-sage: #5b614b;

	--amgs-block-border-w: 1px;
}

.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-card[data-category="adult-gi"] {
	background: var(--amgs-primary-green);
	color: var(--amgs-cream);
	border: var(--amgs-block-border-w) solid var(--amgs-primary-green);
	--mwpp-cat-contrast: var(--amgs-black);
}
.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-legend-item[data-category="adult-gi"] .mwpp-legend-dot {
	background: var(--amgs-primary-green);
	box-shadow: inset 0 0 0 1px var(--amgs-primary-green);
}

.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-card[data-category="adult-nogi"] {
	background: var(--amgs-sage);
	color: var(--amgs-black);
	border: var(--amgs-block-border-w) solid var(--amgs-sage);
	--mwpp-cat-contrast: var(--amgs-cream);
}
.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-legend-item[data-category="adult-nogi"] .mwpp-legend-dot {
	background: var(--amgs-sage);
	box-shadow: inset 0 0 0 1px var(--amgs-sage);
}

.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-card[data-category="youth-gi"] {
	background: var(--amgs-pale-sage);
	color: var(--amgs-black);
	border: var(--amgs-block-border-w) solid var(--amgs-sage);
	--mwpp-cat-contrast: var(--amgs-cream);
}
.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-legend-item[data-category="youth-gi"] .mwpp-legend-dot {
	background: var(--amgs-pale-sage);
	box-shadow: inset 0 0 0 1px var(--amgs-sage);
}

.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-card[data-category="youth-nogi"] {
	background: var(--amgs-pale-sage-tint);
	color: var(--amgs-black);
	border: var(--amgs-block-border-w) solid var(--amgs-sage);
	--mwpp-cat-contrast: var(--amgs-cream);
}
.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-legend-item[data-category="youth-nogi"] .mwpp-legend-dot {
	background: var(--amgs-pale-sage-tint);
	box-shadow: inset 0 0 0 1px var(--amgs-sage);
}

.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-card[data-category="striking"] {
	background: var(--amgs-black);
	color: var(--amgs-cream);
	border: var(--amgs-block-border-w) solid var(--amgs-black);
	--mwpp-cat-contrast: var(--amgs-black);
}
.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-legend-item[data-category="striking"] .mwpp-legend-dot {
	background: var(--amgs-black);
	box-shadow: inset 0 0 0 1px var(--amgs-black);
}

.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-card[data-category="specialty"] {
	background: var(--amgs-card-tint);
	color: var(--amgs-black);
	border: 2px solid var(--amgs-black);
	--mwpp-cat-contrast: var(--amgs-cream);
}
.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-legend-item[data-category="specialty"] .mwpp-legend-dot {
	background: var(--amgs-card-tint);
	box-shadow: inset 0 0 0 2px var(--amgs-black);
}

/* Women's Class (key "womens") = W2 and Open Mat (key "openmat") = O1, Mike 2026-10-12 (Gate 10.0 preview). Dashed 2px outlines on
   Card tint / Cream, so they stay apart from Specialty's solid Black outline. Mirrored in AMGS_Category_Styles::DEFAULTS. */
.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-card[data-category="womens"] {
	background: var(--amgs-card-tint);
	color: var(--amgs-deep-olive);
	border: 2px dashed var(--amgs-primary-green);
	--mwpp-cat-contrast: var(--amgs-cream);
}
.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-legend-item[data-category="womens"] .mwpp-legend-dot {
	background: var(--amgs-card-tint);
	box-shadow: none;
	border: 2px dashed var(--amgs-primary-green);
}

.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-card[data-category="openmat"] {
	background: var(--amgs-cream);
	color: var(--amgs-black);
	border: 2px dashed var(--amgs-sage);
	--mwpp-cat-contrast: var(--amgs-cream);
}
.mwpp-page.mwpp-theme-amg[data-schedule] .mwpp-legend-item[data-category="openmat"] .mwpp-legend-dot {
	background: var(--amgs-cream);
	box-shadow: none;
	border: 2px dashed var(--amgs-sage);
}

/* ===================================================== 2. design tokens */

.mwpp-page.mwpp-theme-amg {
	/* Dojo's token NAMES are kept (the structure below is Dojo's), re-pointed at the BRAND palette. */
	--mwpp-canvas: var(--amgs-cream);
	--mwpp-ink: var(--amgs-black);
	--mwpp-deep: var(--amgs-primary-green);          /* notes panel, time header */
	--mwpp-olive: var(--amgs-sage);                  /* fallback fills (spacer row, legend dot) */
	--mwpp-green: var(--amgs-primary-green);         /* eyebrow, focus ring: 9.50 on Cream */
	--mwpp-hairline: #cbcabd;                        /* Sage 35% over Cream, as a solid (the table gap colour) */
	--mwpp-muted: var(--amgs-dark-sage);             /* 5.69 on Cream */
	--mwpp-notes-heading: var(--amgs-pale-sage);     /* Pale sage on Primary green only: 5.21 */
	--mwpp-shadow-color: transparent;

	/* Scoped family names (Q13) so Kadence's own Barlow loading is never fought; the plain names are a
	   second choice if the host provides them, then system faces. */
	--mwpp-font-display: 'AMGS Barlow Condensed', 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--mwpp-font-body: 'AMGS Barlow', 'Barlow', 'Helvetica Neue', Arial, sans-serif;

	--mwpp-space-1: 8px;
	--mwpp-space-2: 16px;
	--mwpp-space-3: 24px;
	--mwpp-space-4: 32px;
	--mwpp-space-5: 40px;
	--mwpp-space-6: 48px;

	--mwpp-card-radius: 8px;
	--mwpp-card-border-w: 1px;
	--mwpp-card-shadow: none;                        /* flat: BRAND has no offset shadows */
	--mwpp-card-shadow-hover: none;
	--mwpp-card-lift: -2px;

	/* Hover grow: unchanged from Dojo (a core-shared mechanic). */
	--mwpp-sticker-hover-scale: 1.5;

	/* MAT BADGE SIZE: ONE TOKEN. 0 = candidate A (~28x12, 9px text, the default); 1 = candidate B (~24x11, 8.5px text).
	   Every badge dimension below is  A + switch * (B - A), so flipping this single number re-sizes the badge with no other edit.
	   The band reserve (section "badge reserve") was measured for BOTH values; see dev/gate_badge.py (BADGE_B=1). */
	--amgs-badge-compact: 0;
	--amgs-sticky-top: 0px;                          /* mobile sticky mat header offset: set to a fixed site header's height */
	--mwpp-badge-radius: calc(2px - 0.5px * var(--amgs-badge-compact));
	/* 0.65 kept from Dojo. The badge is Cream with Black text on EVERY card, so it still reads 6.51:1 or
	   better against the faded fill (worst: Specialty) at this opacity; gate_skin.py recomputes it. */
	--mwpp-badge-hover-opacity: 0.65;

	--mwpp-panel-radius: 12px;                       /* BRAND class card ~12px */
	--mwpp-footer-radius: 8px;
	--mwpp-overlay-radius: 6px;

	--mwpp-pill-radius: 999px;
	--mwpp-dot-size: 10px;

	--mwpp-logo-size: 108px;
	--mwpp-logo-size-mobile: 88px;
	--mwpp-logo-radius: 12px;
	--mwpp-logo-shadow: none;

	--mwpp-eyebrow-size: 14px;                       /* BRAND eyebrow 14px, Barlow Condensed 700, 0.2em */
	--mwpp-eyebrow-size-mobile: 13px;
	--mwpp-eyebrow-weight: 700;
	--mwpp-eyebrow-tracking: 0.2em;
	--mwpp-title-tracking: 0;
	--mwpp-title-line-height: 1;
	--mwpp-title-size-mobile: 2rem;
}

/* ===================================================== 3. header / legend / notes */

.mwpp-theme-amg .mwpp-header {
	gap: var(--mwpp-space-3);
	padding-bottom: var(--mwpp-space-3);
	margin-bottom: var(--mwpp-space-3);
	/* "A single 1px Hairline rule runs under the entire header" — the
	   masthead treatment that replaces Classic's three boxed panels. */
	border-bottom: 1px solid var(--mwpp-hairline);
}

.mwpp-theme-amg .mwpp-brand {
	gap: var(--mwpp-space-2);
}

/* BRANDING: SPECIFICITY IS LOAD-BEARING HERE, NOT COSMETIC — same doctrine
 * as themes/classic.css section 3 (the 0.1.7 branding fix, carried forward
 * per THEME_SPEC §7.2's "0.1.7 theme-collision rule carries over
 * unchanged"). The renderer emits the title as an <h2> and the logo as an
 * <img>; a WP theme (Kadence on the reference site) styles those with
 * descendant selectors like `.entry-content h2` / `.entry-content img`
 * (0,1,1). Every rule below is scoped `.mwpp-theme-amg {context}
 * element.class` (0,3,1) to clear that, and each one explicitly RESETS
 * the properties a theme is likely to set even where we would not
 * otherwise mention them. Do not "simplify" these selectors back to a
 * single class. */
.mwpp-theme-amg .mwpp-brand img.mwpp-logo,
.mwpp-theme-amg .mwpp-mobile-header img.mwpp-logo {
	width: var(--mwpp-logo-size);
	height: var(--mwpp-logo-size);
	max-width: none; /* beats the theme's img { max-width: 100% } */
	border-radius: var(--mwpp-logo-radius);
	background: var(--mwpp-canvas);
	box-shadow: var(--mwpp-logo-shadow);
	object-fit: contain; /* contain, never cover — a logo is artwork, not a crop target */
	display: block;
	margin: 0;
	padding: 0;
	border: 1px solid var(--mwpp-hairline);
	flex-shrink: 0;
}

.mwpp-theme-amg .mwpp-brand .mwpp-eyebrow,
.mwpp-theme-amg .mwpp-mobile-header .mwpp-eyebrow {
	font-family: var(--mwpp-font-display);
	font-size: var(--mwpp-eyebrow-size);
	font-weight: var(--mwpp-eyebrow-weight);
	text-transform: uppercase;
	letter-spacing: var(--mwpp-eyebrow-tracking);
	line-height: 1.2;
	color: var(--mwpp-green);
	margin: 0 0 4px;
	padding: 0;
}

.mwpp-theme-amg .mwpp-brand h2.mwpp-title,
.mwpp-theme-amg .mwpp-mobile-header h2.mwpp-title {
	font-family: var(--mwpp-font-display);
	font-weight: 800;
	/* POST-T3 FIX (CLAUDE.md "ISSUE 3", header height pass): ceiling raised
	   from 3.25rem back to 3.5rem (56px), same as Classic — at real desktop
	   widths 52px read noticeably smaller than Classic and made the header
	   feel uncertain rather than authoritative, per Mike's call after
	   seeing both live. Same clamp discipline as 0.1.7/Classic otherwise:
	   reaches the ceiling by ~1366px and holds flat above that (verified in
	   a real browser down to 993px — no header overflow at any width in
	   between), never only at the widest viewports, while still shrinking
	   gracefully toward the 993px breakpoint. */
	font-size: clamp(1.75rem, 0.5rem + 3.6vw, 3.5rem);
	line-height: var(--mwpp-title-line-height);
	letter-spacing: var(--mwpp-title-tracking);
	color: var(--mwpp-ink);
	/* BRAND H1: Barlow Condensed 800, uppercase. Set explicitly (never inherited) so a host theme's
	   own heading rules cannot win. */
	text-transform: uppercase;
	margin: 0.15em 0 0;
	padding: 0;
}

.mwpp-theme-amg .mwpp-header .mwpp-legend,
.mwpp-theme-amg .mwpp-header .mwpp-notes {
	border-radius: var(--mwpp-panel-radius);
	padding: var(--mwpp-space-2) var(--mwpp-space-3);
}

/* POST-T3 FIX (CLAUDE.md "ISSUE 2/3", header height pass): legend and notes
   no longer share one flex-basis/max-width. Now that the legend's row count
   is fixed by grid-template-columns below (not a function of its own
   width), it doesn't need the 320px core default (.mwpp-header .mwpp-legend,
   .mwpp-header .mwpp-notes { flex: 1 1 200px; min-width: 0; }) to stay
   compact — it can afford to run narrower, freeing width for notes. Notes
   gets BOTH the freed width (max-width raised to 400px) and a heavier
   flex-grow (1.3 vs the core default's 1) so it actually reaches toward
   that cap instead of settling for whatever's left over: Dojo's notes use
   the non-condensed Barlow body face (a deliberate T3 design choice, see
   this file's own docblock), which wraps real sentences at a narrower
   column than Classic's condensed font ever does at the same width — this
   was misread as the notes panel "stretching to fill the header" when it
   was actually genuinely sizing to wrapped content in too narrow a column.
   Verified in a real browser: this alone took notes from 236-290px down to
   218-290px depending on width, without moving anything else. */
.mwpp-theme-amg .mwpp-header .mwpp-legend {
	flex: 0 1 300px;
	max-width: 300px;
}

.mwpp-theme-amg .mwpp-header .mwpp-notes {
	flex: 1.3 1 280px;
	max-width: 400px;
}

.mwpp-theme-amg .mwpp-legend {
	background: var(--amgs-card-tint);
	border: 1px solid var(--mwpp-hairline);
	color: var(--mwpp-ink);
}

.mwpp-theme-amg .mwpp-notes {
	/* The one dark element on the page — anchors the header without
	   Classic's heavier "boxed panel" weight (no border needed; the fill
	   itself reads as a panel against the Canvas page). */
	background: var(--mwpp-deep);
	color: var(--mwpp-canvas);
}

.mwpp-theme-amg .mwpp-legend h3,
.mwpp-theme-amg .mwpp-notes h3 {
	font-family: var(--mwpp-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 var(--mwpp-space-1);
}

.mwpp-theme-amg .mwpp-legend h3 {
	color: var(--mwpp-ink);
}

.mwpp-theme-amg .mwpp-notes h3 {
	color: var(--mwpp-notes-heading);
}

/* POST-T3 FIX (CLAUDE.md "ISSUE 1", header height pass): fixed 3-column
   grid, not the flex-wrap row of pills this replaced. flex-wrap made row
   count a function of the legend panel's own width — worse exactly when
   the header could least afford it (6 rows at 1200px vs 4 at 1920px,
   measured before this fix) — where a FIXED column count makes row count a
   function of the category COUNT only (8 categories / 3 columns = 3 rows,
   flat from 1920px down to 1366px, verified in a real browser). Same
   row-count-determinism mechanism Classic's two-column dot-list grid
   already relies on, just one column denser here since Dojo's pill chrome
   needs the extra column to land on a comparable total height. */
.mwpp-theme-amg .mwpp-legend-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px 8px;
}

.mwpp-theme-amg .mwpp-legend-item {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--mwpp-font-body);
	font-weight: 600;
	/* Tightened from 0.8125rem/5px 12px to fit three per row cleanly at the
	   legend's new, narrower 300px cap (see .mwpp-header .mwpp-legend
	   above) — reads a shade smaller than before, a deliberate trade Mike
	   accepted for the flatter row count. */
	font-size: 0.71875rem;
	background: var(--amgs-card-tint);
	border: 1px solid var(--mwpp-hairline);
	border-radius: var(--mwpp-pill-radius);
	padding: 4px 6px;
	cursor: pointer;
	text-align: left;
	color: var(--mwpp-ink);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mwpp-theme-amg .mwpp-legend-item:focus-visible,
.mwpp-theme-amg .mwpp-time-header button:focus-visible {
	outline: 2px solid var(--mwpp-green);
	outline-offset: 2px;
}

.mwpp-theme-amg .mwpp-legend-dot {
	width: var(--mwpp-dot-size);
	height: var(--mwpp-dot-size);
	min-width: var(--mwpp-dot-size);
	border-radius: 50%;
	background: var(--mwpp-olive);
	display: inline-block;
}

/* The olive fill above is a fallback only. The per-instance <style> block
   emitted by MWPP_Renderer adds one small selector rule per category
   actually used — .mwpp-legend-item[data-category="{key}"] .mwpp-legend-dot
   { background: var(--mwpp-cat-{key}); } — since plain CSS cannot turn a
   data-attribute value into a custom-property name. */

.mwpp-theme-amg .mwpp-notes ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--mwpp-font-body);
	font-weight: 400;
	font-size: 0.9375rem;
}

.mwpp-theme-amg .mwpp-notes li {
	padding: var(--mwpp-space-1) 0;
	border-top: 1px dashed rgba(244, 240, 236, 0.18);
}

.mwpp-theme-amg .mwpp-notes li:first-child {
	border-top: none;
}

.mwpp-theme-amg .mwpp-hover-hint {
	opacity: 0.7;
	font-style: italic;
}

/* ===================================================== 4. table + cells */

.mwpp-theme-amg .mwpp-schedule-wrap {
	border-radius: var(--mwpp-panel-radius);
	border: 1px solid var(--mwpp-hairline);
	background: var(--mwpp-canvas);
}

.mwpp-theme-amg .mwpp-schedule {
	background: var(--mwpp-hairline);
}

.mwpp-theme-amg .mwpp-schedule thead th {
	background: var(--mwpp-ink);
	color: var(--mwpp-canvas);
	font-family: var(--mwpp-font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mwpp-theme-amg .mwpp-show-times .mwpp-time-header {
	background: var(--mwpp-deep);
	color: var(--mwpp-canvas);
}

.mwpp-theme-amg .mwpp-time-cell {
	background: var(--mwpp-canvas);
	font-family: var(--mwpp-font-body);
	text-align: left;
	vertical-align: middle;
	padding: 0 var(--mwpp-space-1);
	color: var(--mwpp-ink);
}

.mwpp-theme-amg .mwpp-time-start {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
}

.mwpp-theme-amg .mwpp-time-range {
	display: block;
	font-family: var(--mwpp-font-body);
	font-weight: 400;
	font-size: 0.6875rem;
	color: var(--mwpp-muted);
}

.mwpp-theme-amg .mwpp-day-cell {
	background: var(--mwpp-canvas);
}

.mwpp-theme-amg .mwpp-spacer-row {
	/* CLAUDE.md "ISSUE 3": same var(--mwpp-spacer-color, var(--mwpp-olive))
	   fallback chain as themes/classic.css — an unset/uncustomized
	   schedule falls through to Dojo's own --mwpp-olive (#8F9678). */
	background: var(--mwpp-spacer-color, var(--mwpp-olive));
	/* Covers the table's own border-spacing gap below the last row —
	   same seam fix as themes/classic.css (see its own comment for the
	   full CSS2.1 §17.5.2.1 explanation); tied to the same core geometry
	   var so it can never drift out of sync, and to the same color var as
	   `background` above so a customized spacer_color covers the seam in
	   its own color. */
	box-shadow: 0 var(--mwpp-cell-gap) 0 0 var(--mwpp-spacer-color, var(--mwpp-olive));
}

/* ===================================================== 5. cards */

.mwpp-theme-amg .mwpp-card {
	/* The actual design height — under the core's structural
	   max-height:var(--mwpp-row-h) ceiling. Never min-height (see the
	   core's comment on why that reopens the row-height bug). */
	height: var(--mwpp-card-h);
	border-radius: var(--mwpp-card-radius);
	border: var(--mwpp-card-border-w) solid var(--mwpp-ink);
	box-shadow: var(--mwpp-card-shadow);
	background: var(--mwpp-olive);
	color: var(--mwpp-ink);
	text-align: center;
	padding: var(--mwpp-space-1);
	transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s;

	/* The hover name outline (see section 2 for the contrast measurements and
	   the full rationale). DECLARED HERE, on the card, ON PURPOSE: this is the
	   nearest element at which the renderer's per-card --mwpp-cat-contrast is
	   in scope, and a custom property's var()s resolve against the element the
	   declaration applies to — not against the element that later uses the
	   token. Declaring it in section 2's root token block computes the ink
	   fallback once, up there, and inherits that fixed value to every card, so
	   the outline would never adapt (verified in a real browser, not reasoned
	   about: both a dark-text and a light-text card came back with the same
	   #21211E). Declared here it computes PER CARD, which is the whole fix.
	   Setting it at rest costs nothing — nothing consumes it until :hover. */
	--mwpp-name-outline:
		 1px 0 0 var(--mwpp-cat-contrast, var(--mwpp-ink)), -1px 0 0 var(--mwpp-cat-contrast, var(--mwpp-ink)),
		 0 1px 0 var(--mwpp-cat-contrast, var(--mwpp-ink)), 0 -1px 0 var(--mwpp-cat-contrast, var(--mwpp-ink)),
		 1px 1px 0 var(--mwpp-cat-contrast, var(--mwpp-ink)), -1px 1px 0 var(--mwpp-cat-contrast, var(--mwpp-ink)),
		 1px -1px 0 var(--mwpp-cat-contrast, var(--mwpp-ink)), -1px -1px 0 var(--mwpp-cat-contrast, var(--mwpp-ink));
}

/* The olive/ink fill above is a fallback only (the only case it should
   ever apply is a dangling type reference). The per-instance <style>
   block adds one selector rule per category actually used — see
   MWPP_Renderer::render_style_block(). */

.mwpp-theme-amg .mwpp-mat-badge {
	/* Small top-left pill, not Classic's small centered text. */
	position: absolute;
	top: calc(4px - 1px * var(--amgs-badge-compact));
	left: calc(4px - 1px * var(--amgs-badge-compact));
	transform: none;
	font-family: var(--mwpp-font-body);
	font-weight: 600;
	font-size: calc(9px - 0.5px * var(--amgs-badge-compact));   /* A 9px, B 8.5px (Mike, round 2: below the earlier 10px floor, by decision) */
	line-height: calc(10px - 1px * var(--amgs-badge-compact));
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--amgs-cream);
	color: var(--amgs-black);
	border-radius: var(--mwpp-badge-radius);
	padding: 1px calc(3px - 2px * var(--amgs-badge-compact));

	/* Matches the card's own `transform 0.2s ease` exactly (see
	   .mwpp-theme-amg .mwpp-card) so the badge fades WHILE the card grows
	   rather than snapping partway through. Declared at rest, not on :hover,
	   because a transition must exist on the element in BOTH directions for
	   the fade back in on mouse-out to animate too. */
	transition: opacity 0.2s ease;
}

.mwpp-theme-amg .mwpp-name-abbr {
	font-family: var(--mwpp-font-display);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.2;
}

.mwpp-theme-amg .mwpp-name-full,
.mwpp-theme-amg .mwpp-time-line {
	font-family: var(--mwpp-font-body);
	line-height: 1.2;
}

.mwpp-theme-amg .mwpp-name-full {
	font-family: var(--mwpp-font-display);
	font-weight: 700;
	font-size: 1.05rem;
}

/* 0.625rem = 10px, reduced from 0.75rem/12px in v1.4.3 — see the same note in
   themes/classic.css. MEASURED benefit here is the largest of the three by
   card count: at 1277 the number of cards whose name+time stack overflows the
   content box halves, 14 -> 7, and 9px/8px hold at 7 (the knee is 10px).
   WHAT THIS DOES NOT FIX, recorded so it is not re-attempted: Dojo's 4-line
   hover names are 8/41 at EVERY candidate size, worst overflow 30px -> 28px.
   Those names are ~73px tall in a ~67px content box, so the name alone exceeds
   the box before the time is counted and no time reduction can resolve it.
   Mike reviewed that state and called it acceptable. */
.mwpp-theme-amg .mwpp-time-line {
	font-weight: 500;
	font-size: 0.625rem;
	margin-top: 0.2rem;
}

@media (min-width: 993px) {
	/* Hover: MIRROR Classic exactly — uniform transform: scale() grow-in-place.
	   The card enlarges from its own position (no reflow: a transform never
	   affects layout flow), the core swaps abbr -> full so the full name shows
	   inside the scaled card, and the core .mwpp-card:hover{z-index:20} (plus the
	   JS bindHoverZ inline z:20) lifts it above neighbours — all shared with
	   Classic, unchanged. Uniform scale is inherently CONSISTENT card-to-card,
	   which is the point: the earlier absolute-expansion mechanism flickered and
	   varied per card, and Mike rejected it for exactly that. If scale(1.5) does
	   not fully contain the longest dual-mat name in a narrow cell, that is
	   Classic's accepted behaviour and Dojo inherits it — do not "fix" it.
	   Classic also sets `width: var(--mwpp-sticker-hover-width)` (230px) here,
	   but it is INERT on a flex:1 1 0 card (flex-basis:0 overrides width — Classic
	   measures ~110px = 1.5x, not 230px), so it is deliberately OMITTED here
	   rather than carried over as a dead declaration. Do not add it back. */
	.mwpp-theme-amg .mwpp-card:hover {
		transform: scale(var(--mwpp-sticker-hover-scale));
		box-shadow: var(--mwpp-card-shadow-hover);
	}

	/* FIX 1 (v1.4.1) — badge z-order, HOVER ONLY. The mat badge is
	   position:absolute (see .mwpp-theme-amg .mwpp-mat-badge above) with no
	   z-index, and .mwpp-name-full is a static in-flow flex child, also with
	   no z-index. Per CSS 2.1 painting order a positioned descendant with
	   z-index:auto (step 8) paints ABOVE in-flow static content (steps 4-7)
	   regardless of DOM order — so the badge covered the name unconditionally.
	   That is a painting-order fact, not a z-index contest: there was no
	   number to out-bid, which is why only promoting the name to a POSITIONED
	   element fixes it. Measured at 1024px: 39 of the 41 badge-bearing desktop
	   cards had the badge overlapping the name (up to 54x24px), with
	   elementFromPoint at the overlap returning .mwpp-mat-badge.
	   position:relative carries NO offsets, so this is z-order only and shifts
	   nothing. Scoped to :hover deliberately — at REST the badge stays on top,
	   which is the intended resting look and stays byte-identical.
	   NOT applied to .mwpp-time-line: measured across all 41 badge-bearing
	   cards, the time line never overlaps the badge (0 of 41; minimum vertical
	   gap from badge bottom to time top is 24px), so promoting it would be
	   dead weight. If a future skin change moves the badge or the time line,
	   re-measure before assuming that still holds. */
	.mwpp-theme-amg .mwpp-card:hover .mwpp-name-full {
		position: relative;
		z-index: 1;
	}

	/* FIX 2 (v1.4.1) — name legibility, HOVER ONLY. See --mwpp-name-outline
	   in section 2 for the contrast measurements and why a crisp Ink outline
	   beats a glow on this palette. text-shadow is paint-only: it never
	   affects layout, so this cannot reflow or resize anything.
	   Hover-only by design. The same white-on-fill weakness exists at rest,
	   but rest is small abbr text on its own card rather than the magnified
	   focal point, and outlining every resting card would change Dojo's
	   resting appearance — which this pass deliberately leaves byte-identical.
	   Applied to the NAME only, never .mwpp-time-line. */
	.mwpp-theme-amg .mwpp-card:hover .mwpp-name-full {
		text-shadow: var(--mwpp-name-outline);
	}

	/* FIX 3 (v1.4.1) — badge hover fade. De-emphasises the mat badge while the
	   name is enlarged. See --mwpp-badge-hover-opacity in section 2 for the
	   measured contrast basis for the value.
	   THIS IS ADDITIONAL TO FIX 1, NOT A REPLACEMENT FOR IT: the name still
	   paints ABOVE the badge (z-index:1 above the badge's auto). Note that
	   opacity < 1 makes the badge a STACKING CONTEXT — it still paints at the
	   z-index:0 position within the card, so the name's z-index:1 continues to
	   win, but that is verified in a real browser (verify-dojo-hover item 10's
	   elementFromPoint check) rather than assumed from the spec.
	   opacity is paint-only: it cannot move or resize anything. */
	.mwpp-theme-amg .mwpp-card:hover .mwpp-mat-badge {
		opacity: var(--mwpp-badge-hover-opacity);
	}
}

/* Motion, not appearance: under prefers-reduced-motion the hover treatment must
   reach the SAME end state instantly instead of animating to it. The badge fade
   is new in v1.4.1, but the card's own scale transition has been unguarded since
   the Classic mirror landed — a real accessibility gap. Closing BOTH here is a
   DELIBERATE change to the approved scale mechanism (Mike's explicit call: "it's
   a real accessibility gap, it's one line, this is the cheapest moment to close
   it"), not an accidental side effect of the badge work. End states are
   identical either way: the card still scales, the badge still fades — they just
   arrive immediately. */
@media (prefers-reduced-motion: reduce) {
	.mwpp-theme-amg .mwpp-card,
	.mwpp-theme-amg .mwpp-mat-badge {
		transition: none;
	}
}

/* ---------------------------------------- badge reserve (re-measured for the AMG fonts and the two compact badges, Phase 7 badge round 2) */
/* Drops the RESTING name clear of the mat badge. Core declares the mechanism on .mwpp-name-abbr and defaults
   it to 0px (D5 define-don't-apply); this is the only place the AMG skin opts in. Measured with Barlow Condensed 700
   names at the normal 1.1rem and BOTH badge candidates, at the pixel-ink level (name ink under the badge rect, and
   name ink within 3px of the card's bottom edge: dev/gate_badge.py, BADGE_B=1 for candidate B).
   Only 993-1232px (three-line names: Youth Adv Grappling x2, Youth Sub Wrestling) can collide:
     candidate A (27.9x12): reserve 0 leaves 2 cards colliding (7 ink px); 1px is the minimum that clears.
     candidate B (23.9x11): reserve 0 already clears; nothing is declared (the calc below gives 0).
   Outside the band (two-line names) 0px clears at every width probed to 2600 for both. Nothing touches the card bottom.
   1232 is the last width at which any name wraps to three lines at 1.1rem (1px steps).
   SCHEDULE-DEPENDENT: re-measure if class names, the badge size or the card width change.
   Hover is untouched: .mwpp-name-abbr is display:none on hover. */
@media (min-width: 993px) and (max-width: 1232px) {
	.mwpp-theme-amg .mwpp-name-abbr {
		--mwpp-badge-reserve: calc(1px - 1px * var(--amgs-badge-compact));   /* A 1px, B 0px */
	}
}

/* A "(...)" part of a class title (wrapped at render time, AMGS_Display::nowrap_parens) is one unbreakable unit in the full name (mobile list, hover):
   the whole parenthetical moves to the next line together. inline-block is atomic in line breaking and max-width:100% lets it wrap inside itself only
   when it alone is wider than the card. Display only. */
.mwpp-theme-amg .mwpp-name-full .amgs-paren {
	display: inline-block;
	max-width: 100%;
}

/* ===================================================== 6. mobile (<= breakpoint) */

@media (max-width: 992px) {
	.mwpp-theme-amg .mwpp-mobile-header {
		gap: var(--mwpp-space-1);
		text-align: center;
		margin-bottom: var(--mwpp-space-2);
	}

	/* Same specificity-parity requirement as Classic's mobile block: must
	   carry at least the specificity of the branding rules in section 3
	   (0,3,1), or those would outrank them. */
	.mwpp-theme-amg .mwpp-mobile-header img.mwpp-logo-mobile {
		width: var(--mwpp-logo-size-mobile);
		height: var(--mwpp-logo-size-mobile);
	}

	.mwpp-theme-amg .mwpp-mobile-header .mwpp-eyebrow {
		font-size: var(--mwpp-eyebrow-size-mobile);
	}

	.mwpp-theme-amg .mwpp-mobile-header h2.mwpp-title {
		font-size: var(--mwpp-title-size-mobile);
	}

	.mwpp-theme-amg .mwpp-mobile-notes {
		background: var(--mwpp-deep);
		color: var(--mwpp-canvas);
		border-radius: var(--mwpp-panel-radius);
		padding: var(--mwpp-space-2) var(--mwpp-space-3);
		margin-bottom: var(--mwpp-space-2);
		text-align: center;
	}

	.mwpp-theme-amg .mwpp-mobile-notes h3 {
		font-family: var(--mwpp-font-display);
		font-weight: 800;
		text-transform: uppercase;
		color: var(--mwpp-notes-heading);
		margin: 0 0 var(--mwpp-space-1);
	}

	.mwpp-theme-amg .mwpp-mobile-notes ul {
		list-style: none;
		margin: 0;
		padding: 0;
		font-family: var(--mwpp-font-body);
		font-size: 0.9375rem;
	}

	.mwpp-theme-amg .mwpp-mobile-notes li {
		padding: 6px 0;
	}

	.mwpp-theme-amg .mwpp-legend-hint {
		background: var(--mwpp-ink);
		color: var(--mwpp-canvas);
		font-family: var(--mwpp-font-body);
		font-weight: 600;
		font-size: 0.8125rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		padding: var(--mwpp-space-1);
		border-radius: 6px;
		margin-bottom: var(--mwpp-space-2);
	}

	/* MONO POLISH PASS (issue 6), REVERSING A T3 DECISION: this was a single
	   column of full-width pills at T3 build time (per the THEME_SPEC
	   mobile note, "same pill style as desktop but full-width on mobile"),
	   which read as a deliberate design choice against Classic's own
	   viewport-dependent `repeat(auto-fit, minmax(200px,1fr))`. Measured
	   in a real browser at a 390px viewport: with only 8 legend items, one
	   per row consumed noticeably more vertical space than necessary before
	   the mat headers/schedule even start, and Classic doesn't actually
	   reach 2 columns at that width either (auto-fit needs >=400px) — so
	   "match Classic" wasn't really the baseline in practice. Switched to a
	   fixed 2-column grid (reliable at any width, unlike Classic's
	   auto-fit) per Mike's explicit request. display:grid itself is still
	   the core's switching mechanic (base state is display:none); this
	   skin only supplies the column pattern, per the D1 "legend pattern"
	   boundary. */
	.mwpp-theme-amg .mwpp-mobile-legend {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--mwpp-space-1);
		margin-bottom: var(--mwpp-space-3);
	}

	.mwpp-theme-amg .mwpp-mobile-legend .mwpp-legend-item {
		border: 1px solid var(--mwpp-hairline);
		border-radius: var(--mwpp-pill-radius);
		padding: 10px 16px;
		justify-content: flex-start;
		background: var(--amgs-card-tint);
	}

	/* STICKY MAT HEADER (Phase 7 badge round 2): the mobile grid has no per-card mat badge, so this "MAT 1 | MAT 2" row is the only
	   statement of which column is which mat; it stays pinned while the day list scrolls. position:sticky is relative to the page scroll and
	   to the nearest scrolling ancestor (none here: the wrap uses overflow:clip, which is not a scroll container). The row needs its own opaque
	   canvas fill so cards do not show through the gaps. TOP OFFSET = --amgs-sticky-top (default 0px, set on .mwpp-page.mwpp-theme-amg above):
	   a site with a fixed/sticky theme header (or the WP admin bar) sets it to that header's height. It is released when the schedule's
	   last day scrolls out, because sticky is bounded by .mwpp-mobile-schedule. z-index 3 sits above cards and day headers (auto) and below any site header. */
	.mwpp-theme-amg .mwpp-mobile-mat-headers {
		position: sticky;
		top: var(--amgs-sticky-top);
		z-index: 3;
		background: var(--mwpp-canvas);
		padding: var(--mwpp-space-1) 0;
		margin-bottom: 0;
	}

	.mwpp-theme-amg .mwpp-mobile-mat-header {
		background: var(--amgs-primary-green);
		color: var(--mwpp-canvas);
		font-family: var(--mwpp-font-body);
		font-weight: 600;
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: center;
		padding: 8px;
		border-radius: 6px;
	}

	.mwpp-theme-amg .mwpp-mobile-day-header {
		/* Barlow 600, matching the desktop day-header band treatment —
		   THEME_SPEC's mobile note calls for the same Ink/light/Barlow 600
		   treatment here, not Classic's Bebas mobile day header. */
		background: var(--mwpp-ink);
		color: var(--mwpp-canvas);
		font-family: var(--mwpp-font-body);
		font-weight: 600;
		font-size: 0.9375rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-align: center;
		padding: 10px;
		border-radius: 6px;
		margin: var(--mwpp-space-2) 0 var(--mwpp-space-1);
	}

	.mwpp-theme-amg .mwpp-mobile-day-header:first-of-type {
		margin-top: 0;
	}

	.mwpp-theme-amg .mwpp-mobile-schedule .mwpp-card {
		padding: var(--mwpp-space-2);
	}

	.mwpp-theme-amg .mwpp-mobile-schedule .mwpp-name-full {
		font-size: 1.05rem;
		text-wrap: balance;
	}

	.mwpp-theme-amg .mwpp-footer-note {
		text-align: center;
	}
}

/* ===================================================== 7. footer note */

.mwpp-theme-amg .mwpp-footer-note {
	background: var(--amgs-card-tint);
	border: 1px solid var(--mwpp-hairline);
	border-radius: var(--mwpp-footer-radius);
	padding: 10px var(--mwpp-space-2);
	margin-top: var(--mwpp-space-2);
	font-family: var(--mwpp-font-body);
	font-size: 0.85rem;
	color: var(--amgs-deep-olive);               /* body text is Deep olive: 12.52 on Card tint */
}

/* ===================================================== 8. filter states */

/* The .mwpp-filtering/.mwpp-match/.mwpp-dim dim/highlight/wiggle mechanic
   itself lives in the structural core (Phase T1 post-gate fix — see
   CLAUDE.md) with a universal working baseline. This theme overrides the
   legend .mwpp-dim opacity per THEME_SPEC's explicit Behavior States list
   (0.35, not core's 0.3) — a deliberate, theme-specific value, not an
   oversight if it reads differently from Classic. */
.mwpp-theme-amg .mwpp-legend-item.mwpp-dim {
	opacity: 0.35;
}

/* Active legend pill: Ink fill, Canvas text — the dot itself keeps its
   category color via the higher-specificity data-category rule in the
   per-instance <style> block, so it never inherits this text color. */
.mwpp-theme-amg .mwpp-legend-item[aria-pressed="true"] {
	background: var(--mwpp-ink);
	color: var(--mwpp-canvas);
	border-color: var(--mwpp-ink);
}

.mwpp-theme-amg .mwpp-mobile-legend .mwpp-legend-item[aria-pressed="true"] {
	background: var(--mwpp-ink);
	color: var(--mwpp-canvas);
	border-color: var(--mwpp-ink);
}

/* ===================================================== 9. time-toggle appearance */

.mwpp-theme-amg .mwpp-slot-time-overlay {
	padding: 4px 6px;
	background: var(--mwpp-ink);
	color: var(--mwpp-canvas);
	font-family: var(--mwpp-font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	line-height: 1.2;
	text-align: center;
	border-radius: 0 0 var(--mwpp-overlay-radius) var(--mwpp-overlay-radius);
}

/* ===================================================== 10. print */

@media print {
	.mwpp-theme-amg .mwpp-card:hover {
		transform: none !important;
		width: auto !important; /* mirrors Classic's print reset; harmless (hover sets no width) */
		box-shadow: var(--mwpp-card-shadow) !important;
	}

	/* Defensive, same posture as the width reset above: :hover cannot be
	   active while printing, so the v1.4.1 hover outline is already inert
	   here — this just guarantees no dark halo can reach paper if a print
	   preview ever resolves a hover state. */
	.mwpp-theme-amg .mwpp-card:hover .mwpp-name-full {
		text-shadow: none !important;
	}

	/* Same defensive posture again: the mat badge prints at FULL strength. The
	   hover fade is already inert on paper (:hover cannot be active while
	   printing), but a faded badge would lose the mat information the printed
	   schedule exists to carry, so this is guaranteed rather than assumed. */
	.mwpp-theme-amg .mwpp-card:hover .mwpp-mat-badge {
		opacity: 1 !important;
	}

	/* No dark panels in print, per THEME_SPEC: Notes renders with a
	   Hairline border on Canvas instead of the Deep background — category
	   fills on the cards themselves are untouched and still print. */
	.mwpp-theme-amg .mwpp-notes {
		background: var(--mwpp-canvas) !important;
		color: var(--mwpp-ink) !important;
		border: 1px solid var(--mwpp-hairline) !important;
	}

	.mwpp-theme-amg .mwpp-notes h3 {
		color: var(--mwpp-ink) !important;
	}

	.mwpp-theme-amg .mwpp-notes li {
		border-top-color: var(--mwpp-hairline) !important;
	}
}