/**
 * Card components — ported 1:1 from React.
 *
 * Each block names the source file + key lines so future edits stay in sync.
 * Spacing uses MUI's defaults: theme.spacing = 8px (so `mb: 2` = 16px),
 * theme.shape.borderRadius = 4 (so `borderRadius: 4` via sx = 16px).
 *
 * Variants:
 *   .tdn-card                  — base (BaseCard.tsx)
 *   .tdn-card--horizontal      — flex-direction: { xs: column, sm: row } (default)
 *   .tdn-card--vertical        — flex-direction: column (always)
 *   .tdn-card--meeting         — MeetingCard.tsx
 *   .tdn-card--govt            — GovernmentCard.tsx (red left-border, grey.50 bg)
 *   .tdn-card--story           — StoryCard.tsx (direct MUI, photo-left, serif title)
 *   .tdn-card--editorial       — EditorialCard.tsx (vertical, 16:9 media)
 *   .tdn-card--record          — RecordCard.tsx (navy left-border, embedded video)
 *   .tdn-card--crime, .tdn-card--person, .tdn-card--game, etc.
 */

/* =========================================================================
 * .tdn-card — base (mirrors BaseCard.tsx)
 *   Card variant="outlined" + sx={{ borderRadius:4, display:flex,
 *   flexDirection horizontal/vertical, overflow:hidden, mb:2,
 *   transition, hover lift, height:100% }}
 * ===================================================================== */
.tdn-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);          /* MUI outlined Card = divider */
	border-radius: 16px;                             /* sx borderRadius:4 → 4*4 = 16px */
	display: flex;
	overflow: hidden;
	margin-bottom: 16px;                             /* mb:2 → 16px */
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	height: 100%;
	color: var(--color-text-primary);
	text-decoration: none;
}
.tdn-card--horizontal { flex-direction: column; }    /* xs: column */
@media (min-width: 600px) {                          /* MUI sm breakpoint */
	.tdn-card--horizontal { flex-direction: row; }
}
.tdn-card--vertical { flex-direction: column; }

/* Hover lift only when the card is interactive (an anchor or has data-interactive). */
.tdn-card[href]:hover,
a.tdn-card:hover,
.tdn-card[data-interactive]:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-4);
	cursor: pointer;
}

/* Wrapper when card is a Link — preserves height:100% in grid contexts.   */
a.tdn-card { display: flex; }

/* Media Box (the optional image/video slot). */
.tdn-card__media {
	background-color: var(--color-grey-100);          /* bgcolor: grey.100 = #f5f5f5 */
	flex-shrink: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
/* BaseCard default media size for horizontal cards */
.tdn-card--horizontal .tdn-card__media {
	width: 100%;                                      /* xs */
	height: 200px;                                    /* xs */
}
@media (min-width: 600px) {
	.tdn-card--horizontal .tdn-card__media {
		width: 140px;                                 /* sm: 140 */
		height: auto;
	}
}
.tdn-card--vertical .tdn-card__media {
	width: 100%;
	height: 200px;
}
.tdn-card__media img,
.tdn-card__media video,
.tdn-card__media iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* CardContent (Material UI default p:2 padding). */
.tdn-card__content {
	flex: 1;
	padding: 16px;                                    /* p:2 */
	display: flex;
	flex-direction: column;
}

/* =========================================================================
 * Typography tokens used inside cards (MUI Typography variants).
 * h5/h6 + body2/subtitle1/caption — sizes pulled from MUI v5 defaults,
 * weights & families come from our theme.ts overrides.
 * ===================================================================== */
.tdn-card__title-h5 {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 700;                                 /* sx={{ fontWeight: 700 }} on cards */
	line-height: 1.334;
	letter-spacing: 0;
	margin: 0 0 0.35em;                               /* mimic Typography gutterBottom */
	color: var(--color-text-primary);
}
.tdn-card__title-h6 {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 700;                                 /* GovernmentCard uses 'bold' on h6 */
	line-height: 1.6;
	letter-spacing: 0.0075em;
	margin: 0;
	color: var(--color-text-primary);
}
.tdn-card__subtitle1 {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.75;
	color: var(--color-text-secondary);               /* MeetingCard uses text.secondary */
	margin: 0 0 0.35em;
}
.tdn-card__body2 {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.43;
	color: var(--color-text-secondary);
	margin: 0 0 0.35em;
}
.tdn-card__caption {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.66;
	color: var(--color-text-secondary);
	letter-spacing: 0.03333em;
	display: block;
	margin: 0;
}

/* =========================================================================
 * .tdn-card--story  (StoryCard.tsx)
 *   Direct MUI Card (not BaseCard) → borderRadius:4, horizontal row layout,
 *   media 200×150 (xs:150) on left, serif title, red byline, gray excerpt.
 * ===================================================================== */
.tdn-card--story {
	cursor: pointer;
}
.tdn-card--story .tdn-card__media {
	width: 100%;
	height: 150px;
}
@media (min-width: 600px) {
	.tdn-card--story .tdn-card__media {
		width: 200px;
		height: auto;
	}
}
.tdn-card--story .tdn-card__byline {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0 0 8px;                                  /* mb:1 = 8px */
	color: var(--color-text-primary);
}
.tdn-card--story .tdn-card__byline a {
	color: var(--color-red);                          /* StoryCard.tsx:74 → #a42a38 */
	text-decoration: none;
}
.tdn-card--story .tdn-card__byline a:hover { text-decoration: underline; }
.tdn-card--story .tdn-card__excerpt {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.43;
}

/* =========================================================================
 * .tdn-card--meeting  (MeetingCard.tsx)
 *   BaseCard with media 200×150 on left, h5 governingBody, subtitle1 meetingType,
 *   body2 location, body2 date+time.
 * ===================================================================== */
.tdn-card--meeting .tdn-card__media {
	width: 100%;
	height: 150px;
}
@media (min-width: 600px) {
	.tdn-card--meeting .tdn-card__media {
		width: 200px;
		height: auto;
	}
}
/* MeetingCard.tsx:113-115 — CardContent paddingBottom: 2 override = 16px. Already covered by base p:16. */

/* =========================================================================
 * .tdn-card--govt  (GovernmentCard.tsx)
 *   sx={{ flexDirection: 'row' (forced), borderLeft: 6px facts.main,
 *        bgcolor: grey.50, boxShadow: 3, mt:4, mb:2 }}
 *   Media 100×100 square. Content: h6 name + body2 type + 2-col grid
 *   (Elected Officials + Next Meeting left, action buttons right).
 * ===================================================================== */
.tdn-card--govt {
	flex-direction: row !important;                   /* GovernmentCard.tsx:76 — forced row */
	border-left: 6px solid var(--color-red);          /* facts.main = #a42a38 */
	background: var(--color-grey-50);                 /* grey.50 = #fafafa */
	box-shadow: var(--shadow-3);
	margin-top: 32px;                                 /* mt:4 = 32px */
	margin-bottom: 16px;
}
.tdn-card--govt .tdn-card__media {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
}
.tdn-card--govt .tdn-card__facts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;                                        /* Grid container spacing={2} = 16px */
	margin-top: 8px;                                  /* sx mt:1 = 8px */
}
.tdn-card--govt .tdn-card__facts-grid > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tdn-card--govt .tdn-card__facts-grid .tdn-card__caption + .tdn-card__fact-value {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;                                 /* fontWeight: 'medium' = 500 */
	color: var(--color-text-primary);
	margin: 0 0 8px;
}
/* Right column inside the facts grid — Stack spacing={1} justifyContent:'center' height:100%. */
.tdn-card--govt .tdn-card__actions-col {
	display: flex;
	flex-direction: column;
	justify-content: center;                          /* Stack justifyContent:'center' */
	gap: 8px;                                         /* Stack spacing={1} = 8px */
	align-items: stretch;
}
.tdn-card--govt .tdn-card__action-btn {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.8125rem;                             /* MUI size="small" */
	font-weight: 500;
	text-transform: none;                             /* sx textTransform: 'none' */
	padding: 4px 10px;
	border-radius: 8px;                               /* borderRadius:2 = 8px */
	border: 1px solid var(--color-navy);
	color: var(--color-navy);
	background: transparent;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
}
.tdn-card--govt .tdn-card__action-btn:hover {
	background: rgba(0, 40, 85, 0.04);                /* MUI outlined hover */
}
.tdn-card--govt .tdn-card__action-btn--text {
	border: none;
	padding: 4px 8px;
}

/* =========================================================================
 * .tdn-card--editorial  (EditorialCard.tsx)
 *   Vertical Card, sx={{ borderRadius:4, flexDirection:'column', height:'100%',
 *   hover lift }}. Media is 16:9 (paddingTop 56.25%) bgcolor grey.100; falls
 *   back to grey.300 box with the author's initial in h3 text.secondary.
 *   CardContent: h5 serif 700 title, body2 bold byline (red linked), body2
 *   secondary excerpt via dangerouslySetInnerHTML.
 * ===================================================================== */
.tdn-card--editorial {
	flex-direction: column !important;                /* EditorialCard.tsx:49 forced */
}
.tdn-card--editorial .tdn-card__media {
	width: 100%;
	padding-top: 56.25%;                              /* 16:9 aspect ratio */
	height: 0;                                        /* paddingTop trick */
	position: relative;
}
.tdn-card--editorial .tdn-card__media > * {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
}
.tdn-card--editorial .tdn-card__media-fallback {
	background: var(--color-grey-300);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-serif);
	font-size: 3rem;                                  /* Typography h3 default */
	font-weight: 600;
	color: var(--color-text-secondary);
}
.tdn-card--editorial .tdn-card__byline {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	margin: 0 0 8px;                                  /* mb:1 = 8px */
}
.tdn-card--editorial .tdn-card__byline a {
	color: var(--color-red);                          /* #a42a38 */
	text-decoration: none;
}
.tdn-card--editorial .tdn-card__byline a:hover { text-decoration: underline; }
.tdn-card--editorial .tdn-card__excerpt {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin: 0;
}

/* =========================================================================
 * .tdn-card--record  (RecordCard.tsx)
 *   sx={{ mb:3, borderRadius:3, borderLeft:'6px solid #002855' }}. CardContent:
 *   Stack of Chips (meeting_type grey + jurisdictions navy-outlined), h5 serif
 *   bold Georgia title color #0f172a, meta line with EventIcon, optional
 *   key-topics blockquote, embedded YouTube iframe (16:9), action buttons.
 * ===================================================================== */
.tdn-card--record {
	flex-direction: column !important;
	border-left: 6px solid var(--color-navy);         /* #002855 */
	border-radius: 12px;                              /* borderRadius:3 = 12px */
	margin-bottom: 24px;                              /* mb:3 = 24px */
	/* MUI Card extends Paper which uses theme.palette.background.paper.
	 * The app's theme.ts override (per app/theme/theme.ts) sets
	 *   background.paper = #f5f5f5
	 * so every Card renders with a soft light-gray bg, not pure white. */
	background: #f5f5f5;
	overflow: hidden;                                  /* clip media to rounded corners */
}
.tdn-card--record:hover { box-shadow: var(--shadow-4); }
/* Media area at TOP of card — RecordCard.tsx:55-65 embed iframe (when
 * video_url is set) OR the meeting's featured image. 16:9 aspect via
 * the padding-top:56.25% trick (matches React's `aspect-video`). */
.tdn-card--record .tdn-card__media--16x9 {
	position: relative;
	width: 100%;
	padding-top: 56.25%;                              /* 16:9 */
	height: 0;
	background: var(--color-grey-100);
}
.tdn-card--record .tdn-card__media--16x9 iframe,
.tdn-card--record .tdn-card__media--16x9 img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.tdn-card--record .tdn-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.tdn-card--record .tdn-card__title-h5 {
	font-family: Georgia, var(--font-serif);          /* RecordCard.tsx:33 uses Georgia explicitly */
	color: #0f172a;
}
.tdn-card--record .tdn-card__meta {
	display: flex;
	align-items: center;
	color: var(--color-text-secondary);
	margin-bottom: 16px;
	font-size: 0.875rem;
	font-weight: 500;
	gap: 8px;
}
.tdn-card--record .tdn-card__meta-icon {
	width: 18px; height: 18px;
	color: #64748b;
	flex-shrink: 0;
}
.tdn-card--record .tdn-card__key-topics {
	margin-bottom: 16px;
	padding: 12px 16px 12px 16px;
	border-left: 3px solid #cbd5e1;
	background: #f8fafc;
	border-radius: 0 8px 8px 0;
}
.tdn-card--record .tdn-card__key-topics-label {
	font-size: 0.75rem;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 6px;
}
.tdn-card--record .tdn-card__key-topics-text {
	font-size: 0.875rem;
	color: #334155;
	font-style: italic;
	line-height: 1.6;
	white-space: pre-line;
	margin: 0;
}
.tdn-card--record .tdn-card__embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	margin-bottom: 24px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--shadow-2);
}
.tdn-card--record .tdn-card__embed iframe {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	border: 0;
}
.tdn-card--record .tdn-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;                                        /* Stack spacing={2} */
	margin-top: 16px;
}

/* =========================================================================
 * .tdn-card--crime  (CrimeCard.tsx)
 *   Direct MUI Card, horizontal row layout (xs:col, sm:row), media 200×150
 *   grey.300 with agency name overline placeholder, CardContent with:
 *   h5 serif 700 "{type} Report", date body2 secondary, location body2
 *   secondary, chip row (type=error, status=outlined), description body2.
 * ===================================================================== */
.tdn-card--crime .tdn-card__media {
	width: 100%;
	height: 150px;
	background: var(--color-grey-300);
}
@media (min-width: 600px) {
	.tdn-card--crime .tdn-card__media {
		width: 200px;
		height: auto;
	}
}
.tdn-card--crime .tdn-card__media-agency {
	font-family: var(--font-sans);
	font-size: 0.75rem;                               /* MUI overline */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08333em;
	color: var(--color-text-secondary);
	line-height: 2.66;
}
.tdn-card--crime .tdn-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}
.tdn-card--crime .tdn-card__description {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-primary);
	margin: 16px 0 0;                                 /* mt:2 = 16px */
}

/* =========================================================================
 * .tdn-card--person  (PeopleCard.tsx)
 *   BaseCard horizontal, media 140×auto (xs:200), CardContent flex column:
 *   Top row: overline organization (color primary, fontWeight 600) +
 *            h5 serif 700 name + body2 title + RIGHT party badge.
 *   Bottom grid (2-col sm): caption "IN OFFICE SINCE" + body2 value,
 *                           caption "NEXT ELECTION" + body2 value.
 *   Grid has top: 1px solid divider + pt: 2 + mt: auto.
 * ===================================================================== */
.tdn-card--person .tdn-card__media {
	width: 100%;
	height: 200px;
}
@media (min-width: 600px) {
	.tdn-card--person .tdn-card__media {
		width: 140px;
		height: auto;
	}
}
.tdn-card--person .tdn-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;                               /* mb:1 = 8px */
	gap: 12px;
}
.tdn-card--person .tdn-card__org {
	font-family: var(--font-sans);
	font-size: 0.75rem;                               /* overline */
	font-weight: 600;                                 /* PeopleCard.tsx:91 */
	line-height: 1;
	letter-spacing: 0.08333em;
	text-transform: uppercase;
	color: var(--color-navy);                         /* primary.main */
	display: block;
	margin-bottom: 4px;
}
.tdn-card--person .tdn-card__name {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 4px;                                  /* mb:0.5 = 4px */
	color: var(--color-text-primary);
}
.tdn-card--person .tdn-card__title {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-primary);
	margin: 0;
}
.tdn-card--person .tdn-card__party-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;                                 /* px:1 py:0.5 = 8/4 */
	border-radius: 4px;                               /* borderRadius:1 = 4px */
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}
.tdn-card--person .tdn-card__party-badge--r { background-color: #d32f2f; }
.tdn-card--person .tdn-card__party-badge--d { background-color: #1976d2; }
.tdn-card--person .tdn-card__party-badge--i { background-color: #757575; }
.tdn-card--person .tdn-card__facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;                                        /* gap:1.5 = 12px */
	margin-top: auto;
	padding-top: 16px;                                /* pt:2 = 16px */
	border-top: 1px solid var(--color-divider);
}
@media (min-width: 600px) {
	.tdn-card--person .tdn-card__facts { grid-template-columns: 1fr 1fr; }
}
.tdn-card--person .tdn-card__fact-label {
	font-family: var(--font-sans);
	display: block;
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.08333em;
	line-height: 1.66;
}
.tdn-card--person .tdn-card__fact-value {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-primary);
	margin: 0;
}

/* =========================================================================
 * .tdn-card--game  (GameCard.tsx)
 *   Direct MUI Card, vertical (column), borderRadius:2 = 8px, p:2 CardContent,
 *   header row (date caption mono + status Chip), then two rows of
 *   team name (body1) + score (h6 bold mono). Winner team gets fontWeight: bold.
 *   Hover lifts -2px, boxShadow:3, borderColor: primary.main.
 * ===================================================================== */
.tdn-card--game {
	flex-direction: column !important;
	border-radius: 8px;                               /* borderRadius:2 = 8px */
	background: var(--color-paper);                   /* bgcolor: background.paper */
	transition: all 0.2s ease-in-out;
}
.tdn-card--game:hover {
	transform: translateY(-2px);                      /* GameCard.tsx:46 -2 not -4 */
	box-shadow: var(--shadow-3);
	cursor: pointer;
	border-color: var(--color-navy);
}
.tdn-card--game .tdn-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;                               /* mb:1 */
}
.tdn-card--game .tdn-card__date {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
}
.tdn-card--game .tdn-card__team-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;                               /* mb:0.5 */
}
.tdn-card--game .tdn-card__team-row:last-child { margin-bottom: 0; }
.tdn-card--game .tdn-card__team-name {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* body1 */
	font-weight: 400;
	color: var(--color-text-primary);
}
.tdn-card--game .tdn-card__team-name.is-winner { font-weight: 700; }
.tdn-card--game .tdn-card__team-score {
	font-family: var(--font-mono);
	font-size: 1.25rem;                               /* h6 */
	font-weight: 700;
	color: var(--color-text-primary);
}

/* Older .tdn-card--election / .tdn-card--vote / .tdn-card--document blocks
 * removed — they used selectors (.tdn-card__date, .tdn-card__candidate-count,
 * .tdn-card__result-row, .tdn-card__tally-row) that the current PHP renderers
 * (tdn_render_card_election / vote / document in category-layout.php) no
 * longer emit. The strict-port versions live further down in this same file
 * around line 970+ and use .tdn-card__body2-bold, .tdn-card__media--strip,
 * .tdn-card__media--placeholder, .tdn-card__vote-result, .tdn-card__vote-tally
 * — those match the PHP markup. */

/* =========================================================================
 * .tdn-card--agenda  (AgendaItemCard.tsx)
 *   BaseCard vertical orientation, height:100%. CardContent flex column with
 *   a 3-piece header (governingBody, meetingType, date — divided by •),
 *   h6 serif 700 title, body2 description CLAMPED to 3 lines via
 *   -webkit-line-clamp, and a status chip pinned to the bottom (mt:auto).
 * ===================================================================== */
.tdn-card--agenda {
	flex-direction: column !important;
	height: 100%;
}
.tdn-card--agenda .tdn-card__header {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;                               /* mb:1 */
}
.tdn-card--agenda .tdn-card__org {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-navy);                         /* primary.main */
	text-transform: uppercase;
	letter-spacing: 0.08333em;
}
.tdn-card--agenda .tdn-card__divider {
	color: var(--color-text-secondary);
	font-size: 0.75rem;
}
.tdn-card--agenda .tdn-card__meeting-type,
.tdn-card--agenda .tdn-card__date {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
}
.tdn-card--agenda .tdn-card__title-h6 {
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px;
}
.tdn-card--agenda .tdn-card__excerpt {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin: 0 0 16px;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tdn-card--agenda .tdn-card__footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* =========================================================================
 * .tdn-card--position  (PositionCard.tsx)
 *   BaseCard with 100×100 media (sealUrl image or ⚖️ emoji). CardContent:
 *   h6 serif 700 title, body2 secondary department, two grey.100 pill
 *   captions (Term: + Salary:) with px:1 borderRadius:1.
 * ===================================================================== */
.tdn-card--position .tdn-card__media {
	width: 100%;
	height: 100px;
}
@media (min-width: 600px) {
	.tdn-card--position .tdn-card__media {
		width: 100px;
		height: auto;
	}
}
.tdn-card--position .tdn-card__media-emoji {
	font-size: 3rem;
	line-height: 1;
}
.tdn-card--position .tdn-card__pill-row {
	display: flex;
	gap: 16px;                                        /* gap:2 */
	margin-top: 8px;                                  /* mt:1 */
}
.tdn-card--position .tdn-card__pill {
	background: var(--color-grey-100);
	padding: 0 8px;                                   /* px:1 */
	border-radius: 4px;                               /* borderRadius:1 */
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
	line-height: 1.66;
}

/* =========================================================================
 * .tdn-card--player  (PlayerCard.tsx)
 *   Direct MUI Card horizontal (xs:col, sm:row), media 200×150 grey.300
 *   placeholder. CardContent: h5 serif 700 name, body2 secondary
 *   "#{number} - {position}", body2 secondary team, stats row PPG/RPG/APG
 *   (body2 label + h6 bold value).
 * ===================================================================== */
.tdn-card--player .tdn-card__media {
	width: 100%;
	height: 150px;
	background: var(--color-grey-300);
}
@media (min-width: 600px) {
	.tdn-card--player .tdn-card__media {
		width: 200px;
		height: auto;
	}
}
.tdn-card--player .tdn-card__stats {
	margin-top: 16px;
	display: flex;
	gap: 24px;                                        /* gap:3 = 24px */
}
.tdn-card--player .tdn-card__stat-label {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}
.tdn-card--player .tdn-card__stat-value {
	font-family: var(--font-serif);
	font-size: 1.25rem;                               /* h6 */
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0;
}

/* =========================================================================
 * .tdn-card--team  (TeamCard.tsx)
 *   Direct MUI Card horizontal. Media 200×150 grey.300 with team initials
 *   in h2 white bold. CardContent: h5 serif 700 name, body2 secondary
 *   league, optional body2 secondary "Coach: …", stats row Record /
 *   Conference Rank / Streak (last one in success.main green).
 * ===================================================================== */
.tdn-card--team .tdn-card__media {
	width: 100%;
	height: 150px;
	background: var(--color-grey-300);
}
@media (min-width: 600px) {
	.tdn-card--team .tdn-card__media {
		width: 200px;
		height: auto;
	}
}
.tdn-card--team .tdn-card__media-initials {
	font-family: var(--font-serif);
	font-size: 3.75rem;                               /* h2 */
	font-weight: 700;
	color: #fff;
}
.tdn-card--team .tdn-card__stats {
	margin-top: 16px;
	display: flex;
	gap: 24px;
}
.tdn-card--team .tdn-card__stat-value--streak {
	color: #2e7d32;                                   /* success.main */
}

/* =========================================================================
 * Shared MUI primitives — Chip, Button, Icon — replicated as plain CSS.
 * Used across multiple card variants.
 * ===================================================================== */
.tdn-chip {
	display: inline-flex;
	align-items: center;
	height: 24px;                                     /* MUI size="small" */
	padding: 0 8px;
	border-radius: 16px;                              /* MUI Chip radius = height/2 + 4ish, but actually 16 */
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.08);                  /* color="default" */
	color: rgba(0, 0, 0, 0.87);
}
.tdn-chip--primary { background: var(--color-navy); color: #fff; }
.tdn-chip--error   { background: #d32f2f; color: #fff; }
.tdn-chip--success { background: #2e7d32; color: #fff; }
.tdn-chip--outlined {
	background: transparent;
	border: 1px solid currentColor;
}
.tdn-chip--outlined.tdn-chip--primary { color: var(--color-navy); border-color: rgba(0, 40, 85, 0.5); }
.tdn-chip--bold { font-weight: 700; }
.tdn-chip--slate { background: #e2e8f0; color: var(--color-text-primary); font-weight: 700; }

/* MUI Button base spec — matches @mui/material/Button size="small". */
.tdn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;                                         /* MUI startIcon mr:1 -> ~8px */
	min-width: 64px;                                  /* .MuiButton-root */
	font-family: var(--font-sans);
	font-size: 0.8125rem;                             /* .MuiButton-sizeSmall */
	font-weight: 500;                                 /* .MuiButton-root */
	line-height: 1.75;
	letter-spacing: 0.02857em;
	border-radius: 8px;                               /* borderRadius:2 -> 8px (theme.shape.borderRadius*2) */
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	text-transform: none;                             /* sx textTransform: 'none' */
	box-sizing: border-box;
	transition: background-color 0.25s, box-shadow 0.25s, border-color 0.25s, color 0.25s;
}
/* MUI .MuiButton-containedSizeSmall — padding 4px 10px. */
.tdn-btn--contained {
	padding: 4px 10px;
	background: var(--color-navy);                    /* bgcolor: #002855 */
	color: #fff;
	box-shadow: var(--shadow-2);
}
.tdn-btn--contained:hover { background: #00193a; box-shadow: var(--shadow-4); }
/* MUI .MuiButton-outlinedSizeSmall — padding 3px 9px (1px less to compensate for the border). */
.tdn-btn--outlined {
	padding: 3px 9px;
	background: transparent;
	border-color: rgba(0, 40, 85, 0.5);
	color: var(--color-navy);
}
.tdn-btn--outlined:hover { background: rgba(0, 40, 85, 0.04); border-color: var(--color-navy); }
.tdn-btn--text {
	background: transparent;
	color: var(--color-navy);
}
.tdn-btn--text:hover { background: rgba(0, 40, 85, 0.04); }
.tdn-btn--secondary { color: var(--color-red); border-color: rgba(164, 42, 56, 0.5); }
.tdn-btn--secondary:hover { background: rgba(164, 42, 56, 0.04); border-color: var(--color-red); }

/* Inline SVG icons (matching @mui/icons-material — calendar, link, play). */
.tdn-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	fill: currentColor;
}

/* =========================================================================
 * .tdn-card--document  (DocumentCard.tsx)
 *   BaseCard (no media), CardContent p:3. h5 serif 700 title +
 *   "Published: {date}" body2 + chip row (type filled, pages outlined,
 *   format outlined).
 * ===================================================================== */
.tdn-card--document {
	flex-direction: column !important;
	background: #f5f5f5;                              /* theme.palette.background.paper */
}
.tdn-card--document .tdn-card__content { padding: 24px; }   /* p:3 = 24px */
.tdn-card--document .tdn-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;                                  /* mt:2 = 16px */
}

/* =========================================================================
 * .tdn-card--election  (ElectionCard.tsx)
 *   BaseCard with a thin party-color strip (15px wide on sm+, 15px tall on xs).
 *   CardContent p:2. overline header + h5 serif 700 + body2 bold date +
 *   body2 secondary "N Candidates Running".
 * ===================================================================== */
.tdn-card--election {
	flex-direction: column !important;
	background: #f5f5f5;
}
@media (min-width: 600px) {
	.tdn-card--election { flex-direction: row !important; }
}
.tdn-card--election .tdn-card__media--strip {
	width: 100%;
	height: 15px;
	flex-shrink: 0;
}
@media (min-width: 600px) {
	.tdn-card--election .tdn-card__media--strip {
		width: 15px;
		height: auto;
	}
}
.tdn-card--election .tdn-card__content { padding: 16px; }
.tdn-card--election .tdn-card__overline {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.75rem;                                /* variant=overline */
	font-weight: 400;
	line-height: 2.66;
	letter-spacing: 0.08333em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}
.tdn-card--election .tdn-card__body2-bold {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 4px;
}

/* =========================================================================
 * .tdn-card--vote  (VoteCard.tsx)
 *   Card variant=outlined, flex row sm+. Left: gray.300 placeholder 200x150
 *   (xs full-width 150 height). Right: h5 serif 700 + Voted: date + Result
 *   chip (success/error) + Yea/Nay/Present tally row.
 * ===================================================================== */
.tdn-card--vote {
	background: #f5f5f5;
}
.tdn-card--vote .tdn-card__media--placeholder {
	background: var(--color-grey-300);                /* grey.300 */
}
.tdn-card--vote .tdn-card__media {
	width: 100%;
	height: 150px;
}
@media (min-width: 600px) {
	.tdn-card--vote .tdn-card__media {
		width: 200px;
		height: auto;
	}
}
.tdn-card--vote .tdn-card__vote-result {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 16px;                                  /* mt:2 = 16px */
}
.tdn-card--vote .tdn-card__subtitle2 {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-text-primary);
}
.tdn-card--vote .tdn-card__vote-tally {
	display: flex;
	gap: 16px;
	margin-top: 8px;                                   /* mt:1 = 8px */
	flex-wrap: wrap;
}
.tdn-card--vote .tdn-card__vote-tally .tdn-card__body2 {
	color: var(--color-text-secondary);
	margin: 0;
}