/**
 * Layout primitives — ported 1:1 from React.
 *
 * Source files:
 *   reference-nextj-src/the_directory/frontend/src/components/layout/Header.tsx
 *   reference-nextj-src/the_directory/frontend/src/components/layout/Footer.tsx
 *   reference-nextj-src/the_directory/frontend/src/components/layout/ViewModeToggle.tsx
 *
 * Loaded AFTER tokens.css + cards.css but BEFORE theme.css so theme.css can
 * still scope-override anything page-specific.
 */

/* =========================================================================
 * MASTHEAD — strict port of Header.tsx (lines 141-330).
 *
 * <Box header sticky top:0 zIndex:1201 bgcolor:background.default>
 *   <Box py:0.5>                              ← .tdn-topbar (4px top+bottom)
 *     <Stack row maxW:lg mx:auto px:2         ← .tdn-topbar__inner (1200×16px gutter)
 *            justify:space-between
 *            align:center>
 *       <Stack flex:1 />                      ← .tdn-topbar__spacer (empty)
 *       <HeaderWeather />                     ← .tdn-topbar__weather (natural width)
 *       <Stack flex:1 justify:center>         ← .tdn-topbar__logo
 *         <Link><Box h:80><img/></Box></Link>
 *       <Stack col flex:1                     ← .tdn-topbar__right
 *              align:flex-end
 *              justify:center
 *              spacing:1>
 *         (xs only) IconButton hamburger
 *         (md+ only) <Stack row spacing:1>    ← .tdn-topbar__auth
 *           Subscribe / Login  OR
 *           My Account / Log Out
 *         <Box w:100% justify:center pr:1>    ← .tdn-topbar__write
 *           Write for Us
 * ===================================================================== */
.tdn-masthead {
	background: var(--color-bg);                      /* bgcolor: background.default = #fff */
	position: sticky;
	top: 0;
	z-index: 1201;
}
body.admin-bar .tdn-masthead { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .tdn-masthead { top: 46px; }
}

.tdn-topbar {
	padding: 4px 0;                                   /* py:0.5 = 4px each side */
}
.tdn-topbar__inner {
	max-width: 1200px;                                /* maxWidth="lg" */
	margin: 0 auto;
	padding: 0 16px;                                  /* px:2 = 16px */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

/* Left flex:1 empty spacer. Mobile hamburger lives here (xs only). */
.tdn-topbar__spacer {
	flex: 1;
	display: flex;
	align-items: center;
}

/* HeaderWeather slot — natural width, NO flex (React: just a component
 * sibling between the spacer and the logo). */
.tdn-topbar__weather {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.tdn-topbar__weather-temp {
	font-weight: 700;
	color: #1f2937;
	font-size: 0.92rem;
}
.tdn-topbar__weather-loc {
	font-weight: 500;
	color: var(--color-text-secondary);
	letter-spacing: 0.4px;
}

/* Center logo column — Stack flex:1 justify-center → Link → Box h:80. */
.tdn-topbar__logo {
	flex: 1;
	display: flex;
	justify-content: center;
}
.tdn-topbar__logo a,
.tdn-topbar__logo .custom-logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;                                     /* Box height: 80 */
}
.tdn-topbar__logo img,
.tdn-topbar__logo .custom-logo {
	width: auto;                                      /* React: style width:auto */
	height: 100%;
	max-height: 80px;
	object-fit: contain;
}

/* Right column — Stack col flex:1 align:flex-end justify:center spacing:1. */
.tdn-topbar__right {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;                            /* Stack alignItems: 'flex-end' */
	justify-content: center;
	gap: 8px;                                         /* Stack spacing={1} = 8px */
}

/* Auth row — Stack row spacing:1 (md+ only). */
.tdn-topbar__auth {
	display: flex;
	flex-direction: row;
	gap: 8px;                                         /* Stack spacing={1} */
	align-items: center;
}
@media (max-width: 899px) { .tdn-topbar__auth { display: none; } }

/* Auth button base (Header.tsx:189-239 for My Account / Log Out;
 * Header.tsx:243-300 for Subscribe / Login).
 *   - height 40
 *   - borderRadius 15
 *   - borderWidth 5 (3 on Log Out)
 *   - textTransform none
 *   - fontWeight bold (700)
 *   - fontFamily var(--font-sans)
 *   - fontSize 18
 *   - color black (default), white on hover (filled bg)
 *   - px:0 (no horizontal padding)
 */
.tdn-auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 15px;
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	text-decoration: none;
	color: #000;
	background: transparent;
	border-style: solid;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	box-sizing: border-box;
}
.tdn-auth-btn--subscribe {
	width: 150px;
	border-width: 5px;
	border-color: var(--color-red);                   /* facts.main */
}
.tdn-auth-btn--subscribe:hover {
	background: var(--color-red);
	color: #fff;
	border-color: var(--color-red);
}
.tdn-auth-btn--login {
	width: 100px;
	border-width: 5px;
	border-color: var(--color-navy);                  /* opinions.main */
}
.tdn-auth-btn--login:hover {
	background: var(--color-navy);
	color: #fff;
	border-color: var(--color-navy);
}
.tdn-auth-btn--logout {
	width: 115px;
	border-width: 3px;
	border-color: #ccc;
}
.tdn-auth-btn--logout:hover {
	background: #f5f5f5;
	border-color: #999;
}

/* Write for Us row — Box width:100% display:flex justify:center pr:1.
 * Wraps a MUI Button variant=text size=small with React's text-style. */
.tdn-topbar__write {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-right: 8px;                               /* pr:1 = 8px */
}
.tdn-topbar__write a {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	color: #666;
	text-decoration: none;
	text-transform: none;
	background: transparent;
	border: 0;
	padding: 4px 5px;                                 /* MUI size=small default */
	cursor: pointer;
	transition: color 0.2s;
}
.tdn-topbar__write a:hover {
	color: var(--color-navy);
	background: transparent;
	text-decoration: underline;
}

/* Mobile hamburger — visible only on xs (per Header.tsx:169 display:{xs:flex,md:none}). */
.tdn-hamburger {
	display: none;
	background: transparent;
	border: 0;
	color: #000;
	padding: 8px;
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
}
@media (max-width: 899px) { .tdn-hamburger { display: inline-flex; } }

/* =========================================================================
 * PRIMARY NAV TABS — strict port of Header.tsx (lines 334-433).
 *
 * <Container maxW:lg position:relative>
 *   <Stack row justify:center align:flex-end mt:0 display:{xs:none,md:flex}>
 *     tabs.map(tab => {
 *       <Link><Box w:115 h:30 ml:isFirst?0:-10 zIndex:isActive?20:1>
 *         <svg w:145 h:30 left:-15 zIndex:0
 *              filter:isActive?'drop-shadow(0 -2px 5px rgba(0,0,0,0.1))':none>
 *           <path d="..." fill={section_bgcolor} stroke="none"/>
 *         </svg>
 *         <Typography fontWeight:bold fontSize:0.9rem zIndex:2 color:WHITE
 *                     whiteSpace:nowrap>{tab}</Typography>
 *       </Box></Link>
 *     })
 *
 * Every tab gets section_bgcolor SVG fill + WHITE text — ALWAYS.
 * Active state ONLY adds drop-shadow + raises zIndex to 20. No color invert.
 * ===================================================================== */
.tdn-tabs-wrap {
	max-width: 1200px;                                /* Container maxWidth lg */
	margin: 0 auto;
	padding: 0 16px;
	position: relative;
}
.tdn-tabs {
	display: none;                                    /* {xs:none, md:flex} */
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) { .tdn-tabs { display: flex; } }

.tdn-tab {
	position: relative;
	width: 115px;                                    /* Header.tsx:391 */
	height: 30px;
	margin-left: -10px;                              /* ml:'-10px' overlap */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
}
.tdn-tab:first-child { margin-left: 0; }
.tdn-tab.is-active { z-index: 20; }                  /* zIndex: isActive ? 20 : 1 */
.tdn-tab.is-active .tdn-tab__shape {
	filter: drop-shadow(0 -2px 5px rgba(0,0,0,0.1));  /* drop-shadow ONLY on active */
}

/* SVG folder-tab shape — w:145 h:30 left:-15 (overflows the 115px Box). */
.tdn-tab__shape {
	position: absolute;
	top: 0;
	left: -15px;
	width: 145px;
	height: 30px;
	overflow: visible;
	z-index: 0;
}
.tdn-tab__shape path {
	fill: var(--tab-color, #fff);                     /* section bgcolor — ALWAYS */
	stroke: none;
}

/* Anchor wraps the SVG + label, gives the whole tile an interactive area. */
.tdn-tab a {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* Label — Typography fontWeight:bold fontSize:0.9rem zIndex:2 color:WHITE.
 * IMPORTANT: position:relative + z-index:2 is REQUIRED — without it the span
 * is non-positioned (static) and paints BEFORE positioned siblings (SVG with
 * z-index:0), so the SVG fill ends up on top of the text and the label
 * disappears. React's MUI Typography with sx={{ zIndex: 2 }} implicitly sets
 * position:relative because zIndex requires positioning to function. */
.tdn-tab__label {
	position: relative;
	z-index: 2;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	font-weight: 700;
	color: #fff !important;                           /* always white per Header.tsx:427 */
	white-space: nowrap;
}

/* =========================================================================
 * SUB-NAV — Header.tsx bottom strip (per-section colored bar)
 *   bgcolor: matches active tab. py:1 (8px). mt:-1px. Container maxWidth lg.
 *   Stack direction="row" spacing={3} of sub-tab Links. Right-side absolute
 *   dropdown for Politics local/state.
 * ===================================================================== */
.tdn-subnav {
	background: var(--tab-color, var(--section-frontpage));
	padding: 8px 0;
	position: relative;
	z-index: 10;
	margin-top: -1px;
}
.tdn-subnav__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 32px;
}
.tdn-subnav__list {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;                                       /* Stack spacing={3} = 24px */
	list-style: none;
	margin: 0;
	padding: 0;
}
.tdn-subnav__list li a {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* body1 */
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: color 0.2s;
}
.tdn-subnav__list li a:hover { color: var(--subnav-hover-color, var(--color-red)); }
.tdn-subnav__list li.is-active a {
	color: var(--subnav-active-color, var(--color-red));
}
/* Per-section subnav active colors (Header.tsx:474-475):
 *   Politics → active text #002855 (navy)
 *   Sports   → active text black
 *   Other    → active text #a42a38 (red)  */
.tdn-subnav[data-section="politics"] { --subnav-active-color: var(--color-navy); --subnav-hover-color: var(--color-navy); }
.tdn-subnav[data-section="sports"]   { --subnav-active-color: #000;             --subnav-hover-color: #000; }

/* Jurisdiction dropdown lives absolutely positioned on the right. */
.tdn-subnav__extras {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

/* Autocomplete-style dropdown — 200×35 px, 15px radius, 3px white border. */
.tdn-juris-dropdown {
	width: 200px;
	position: relative;
}
.tdn-juris-dropdown > summary {
	height: 35px;
	border-radius: 15px;
	border: 3px solid #fff;
	color: #fff;
	background: transparent;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1rem;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	width: 100%;
	box-sizing: border-box;
}
.tdn-juris-dropdown > summary::-webkit-details-marker { display: none; }
.tdn-juris-dropdown > summary::marker { content: ''; }
.tdn-juris-dropdown:hover > summary { background: #fff; color: var(--color-red); }
.tdn-juris-dropdown ul {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 220px;
	background: #fff;
	border: 1px solid var(--color-divider);
	border-radius: 6px;
	box-shadow: var(--shadow-6);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	z-index: 50;
}
.tdn-juris-dropdown li a {
	display: block;
	padding: 8px 14px;
	color: var(--color-text-primary);
	text-decoration: none;
	font-size: 0.875rem;
}
.tdn-juris-dropdown li a:hover { background: var(--color-paper); color: var(--color-navy); }

/* =========================================================================
 * VIEW MODE TOGGLE — ViewModeToggle.tsx
 *   Two pill buttons "The Record" (facts) + "Analysis" (opinions),
 *   border 5px solid, px:3 (24px), borderRadius 15px, fontSize 18px,
 *   fontWeight 'bold'. When active: bg = facts.main / opinions.main + white text.
 * ===================================================================== */
.tdn-view-pills {
	display: inline-flex;
	gap: 16px;                                        /* Stack spacing={2} */
}
.tdn-view-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;                                 /* px:3 = 24px (default) */
	height: 40px;
	border-radius: 15px;
	border: 5px solid;
	background: #fff;
	color: #000;
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	white-space: nowrap;                              /* CategoryLayout.tsx:47/81 — keep label on one line */
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
	box-sizing: border-box;
}
.tdn-view-pill--record { border-color: var(--color-red); }                /* facts.main */
.tdn-view-pill--analysis { border-color: var(--color-navy); }             /* opinions.main */
.tdn-view-pill--record:hover,
.tdn-view-pill--record.is-active   { background: var(--color-red); color: #fff; }
.tdn-view-pill--analysis:hover,
.tdn-view-pill--analysis.is-active { background: var(--color-navy); color: #fff; }

/* =========================================================================
 * FOOTER — Footer.tsx
 *   bgcolor: facts.main (#a42a38), color: white, py:3 (24px), mt:auto.
 *   Container maxWidth lg. Stack centered with serif h6 copyright + flex
 *   row of 4 buttons (About/Contact/Privacy/Shop), each 140×40, 5px white
 *   border, 15px radius, 18px font, bold.
 * ===================================================================== */
.tdn-footer {
	background: var(--color-red);                    /* facts.main */
	color: #fff;
	padding: 24px 0;                                  /* py:3 */
	margin-top: auto;
}
.tdn-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;                                         /* spacing={0.5} */
}
.tdn-footer__copy {
	font-family: var(--font-serif);
	font-size: 1.25rem;                               /* Typography h6 */
	font-weight: 400;                                 /* fontWeight: 'normal' */
	margin: 0 0 16px;                                 /* mb:2 = 16px */
	color: #fff;
}
.tdn-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 600px;
}
.tdn-footer-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 40px;
	border-radius: 15px;
	border: 5px solid #fff;
	background: transparent;
	color: #fff;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px !important;
	font-weight: 700;
	text-transform: none;
	text-decoration: none;
	padding: 0;
	transition: background 0.2s, color 0.2s;
}
.tdn-footer-btn:hover {
	background: #fff;
	color: var(--color-red);
}

/* =========================================================================
 * CATEGORY LAYOUT — CategoryLayout.tsx wraps section pages.
 *   Two-column scaffold: LEFT = facts blocks, RIGHT = stories/editorials.
 *   We'll fill in this section after porting CategoryLayout itself.
 * ===================================================================== */
.tdn-section__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 36px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}
.tdn-section__cols--2to1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) {
	.tdn-section__cols,
	.tdn-section__cols--2to1 { grid-template-columns: 1fr; }
}

/* =========================================================================
 * HOMEPAGE — ported 1:1 from src/app/page.tsx (RegionalizedFrontpage).
 *
 * Sections:
 *   .tdn-home-ticker     — navy LIVE POLLS bar with marquee (page.tsx:113-146)
 *   .tdn-home            — Container maxWidth lg, pt:4 pb:8
 *   .tdn-home-hero       — "BELL EDITION" header + flex 2:1 hero card
 *   .tdn-home-grid       — Grid container spacing={4}, 8/4 split
 *   .tdn-home-wire       — Local Wire (left, 2-col grid of 6)
 *   .tdn-home-sidebar    — Statewide + National Desk panel (right, bg #FFFDF0)
 * ===================================================================== */

/* ── Ticker (page.tsx:113-146) ─── */
.tdn-home-ticker {
	background: var(--color-navy);                   /* #002855 */
	color: #fff;
	border-bottom: 3px solid #d32f2f;                /* error.main = MUI default */
	padding: 4px 16px;                                /* py:0.5 px:2 */
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
}
.tdn-home-ticker__badge {
	background: #d32f2f;
	padding: 2px 8px;                                 /* px:1 */
	border-radius: 4px;                               /* borderRadius:1 */
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-right: 16px;                               /* mr:2 */
}
.tdn-home-ticker__viewport {
	flex: 1;
	overflow: hidden;
}
.tdn-home-ticker__track {
	display: inline-flex;
	gap: 32px;                                        /* gap:4 = 32px */
	animation: tdn-marquee 30s linear infinite;       /* page.tsx:127 */
}
.tdn-home-ticker__item {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 600;
}
@keyframes tdn-marquee {
	0%   { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}

/* ── Container (page.tsx:148) ─── */
.tdn-home {
	max-width: 1200px;                                /* maxWidth="lg" */
	margin: 0 auto;
	padding: 32px 16px 64px;                          /* pt:4 pb:8 px:2 */
}

/* ── Hero Block (page.tsx:150-217) ─── */
.tdn-home-hero { margin-bottom: 48px; }              /* mb:6 = 48px */
.tdn-home-hero__head {
	border-bottom: 4px solid #000;
	margin-bottom: 24px;                              /* mb:3 */
}
/* Double-class scope to beat theme.css's `.tdn-page__content h2 { font-weight:700 }`
 * cascade — React sets explicit fontWeight: 900. */
.tdn-home-hero h2.tdn-home-hero__edition,
.tdn-home-hero__edition {
	font-family: var(--font-serif);
	font-size: 3rem;                                  /* h3 */
	font-weight: 900 !important;                       /* page.tsx:154 */
	color: var(--color-navy);
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 0 0 0.35em;
	line-height: 1.167;                                /* MUI h3 default */
}
.tdn-home-hero__card {
	display: flex;
	flex-direction: column;                           /* xs */
	gap: 32px;                                        /* gap:4 = 32px */
	text-decoration: none;
	color: inherit;
}
@media (min-width: 900px) {
	.tdn-home-hero__card { flex-direction: row; }    /* md:row */
}
.tdn-home-hero__media {
	flex: 2;
	background: #f1f5f9;
	height: 250px;                                    /* xs */
	border-radius: 8px;                               /* borderRadius:2 */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
@media (min-width: 900px) {
	.tdn-home-hero__media { height: 450px; }         /* md:450 */
}
.tdn-home-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tdn-home-hero__media-placeholder {
	color: rgba(0, 0, 0, 0.38);                       /* text.disabled */
	font-family: var(--font-sans);
	font-weight: 700;
}
.tdn-home-hero__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tdn-home-hero__kicker {
	color: #d32f2f;                                   /* color="error" */
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.875rem;                              /* subtitle2 */
	text-transform: uppercase;
	margin: 0 0 8px;                                  /* mb:1 */
}
.tdn-home-hero__title {
	font-family: Georgia, var(--font-serif);          /* page.tsx:182 explicit Georgia */
	font-size: 3.75rem;                               /* h2 default */
	font-weight: 700;
	color: var(--color-navy);
	line-height: 1.1;
	margin: 0 0 16px;                                 /* mb:2 */
}
.tdn-home-hero__excerpt {
	font-family: var(--font-sans);
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--color-text-secondary);
	margin: 0 0 24px;                                 /* mb:3 */
}
.tdn-home-hero__byline {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* subtitle1 */
	font-weight: 700;
	color: var(--color-navy);                         /* color="primary" */
	margin: 0;
}
.tdn-home-hero__byline span { text-decoration: underline; }
.tdn-home-hero__card:hover .tdn-home-hero__title { text-decoration: underline; }
.tdn-home-hero__empty {
	padding: 64px 0;                                  /* py:8 */
	text-align: center;
	background: #f8fafc;
	border-radius: 8px;
}
.tdn-home-hero__empty-title {
	font-family: Georgia, serif;
	font-size: 1.5rem;
	color: var(--color-text-secondary);
	margin: 0 0 8px;
}
.tdn-home-hero__empty-sub {
	font-size: 0.875rem;
	color: rgba(0, 0, 0, 0.38);
	margin: 0;
}

/* ── 8/4 Grid (page.tsx:219) ─── */
.tdn-home-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;                                        /* spacing={4} */
}
@media (min-width: 900px) {
	.tdn-home-grid { grid-template-columns: 8fr 4fr; }  /* md:8 / md:4 */
}

/* ── Local Wire (page.tsx:221-255) ─── */
.tdn-home-wire__head {
	border-top: 2px solid #000;
	padding-top: 16px;                                /* pt:2 */
	margin-bottom: 32px;                              /* mb:4 */
}
.tdn-home-wire__title {
	font-family: var(--font-sans);
	font-size: 1.5rem;                                /* h5 */
	font-weight: 700;
	margin: 0;
	color: var(--color-text-primary);
}
.tdn-home-wire__grid {
	display: grid;
	grid-template-columns: 1fr;                       /* xs:12 */
	gap: 24px;                                        /* spacing={3} = 24px */
}
@media (min-width: 600px) {
	.tdn-home-wire__grid { grid-template-columns: 1fr 1fr; }  /* sm:6 */
}
.tdn-home-wire__item {
	display: block;
	text-decoration: none;
	color: inherit;
}
.tdn-home-wire__media {
	width: 100%;
	height: 180px;
	background: #e2e8f0;
	border-radius: 4px;                               /* borderRadius:1 */
	overflow: hidden;
	margin-bottom: 16px;                              /* mb:2 */
}
.tdn-home-wire__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tdn-home-wire__kicker {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	letter-spacing: 0.03333em;
}
.tdn-home-wire__headline {
	font-family: Georgia, var(--font-serif);          /* page.tsx:240 */
	font-size: 1.25rem;                               /* h6 */
	font-weight: 700;
	line-height: 1.3;
	margin: 4px 0 8px;                                /* mt:0.5 mb:1 */
	color: var(--color-text-primary);
	transition: color 0.2s;
}
.tdn-home-wire__item:hover .tdn-home-wire__headline { color: #d32f2f; }
.tdn-home-wire__excerpt {
	font-family: var(--font-sans);
	font-size: 0.875rem;                              /* body2 */
	color: var(--color-text-secondary);
	margin: 0;
}
.tdn-home-wire__empty {
	font-family: var(--font-sans);
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

/* ── Sidebar (page.tsx:258-294) ─── */
.tdn-home-sidebar { display: block; }
.tdn-home-sidebar__panel {
	background: #FFFDF0;                              /* page.tsx:261 */
	padding: 24px;                                    /* p:3 */
	border: 1px solid #e0e0e0;
	height: 100%;
}
.tdn-home-sidebar__section--forecast { margin-bottom: 40px; }
.tdn-home-sidebar__head--with-cta {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.tdn-home-sidebar__cta {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	padding-bottom: 8px;
}
.tdn-home-sidebar__cta:hover { text-decoration: underline; }
.tdn-home-sidebar__forecast {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tdn-home-sidebar__forecast li {
	display: grid;
	grid-template-columns: 1fr 2fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-family: var(--font-sans);
	font-size: 0.875rem;
}
.tdn-home-sidebar__forecast li:last-child { border-bottom: 0; }
.tdn-home-sidebar__forecast-day { color: var(--color-navy); font-weight: 700; }
.tdn-home-sidebar__forecast-cond { color: var(--color-text-secondary); font-size: 0.8rem; }
.tdn-home-sidebar__forecast-temp { color: var(--color-red); font-weight: 700; text-align: right; }
.tdn-home-sidebar__section { margin-bottom: 40px; }  /* mb:5 = 40px */
.tdn-home-sidebar__section:last-child { margin-bottom: 0; }
.tdn-home-sidebar__head {
	border-bottom: 2px solid #000;
	padding-bottom: 8px;                              /* pb:1 */
	margin-bottom: 24px;                              /* mb:3 */
}
.tdn-home-sidebar__title {
	font-family: var(--font-sans);
	font-size: 1.25rem;                               /* h6 */
	font-weight: 700;
	margin: 0;
	color: var(--color-text-primary);
}
.tdn-home-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;                                        /* Stack spacing={3} */
}
.tdn-home-sidebar__list li a {
	display: block;
	font-family: Georgia, var(--font-serif);
	font-size: 1rem;                                  /* body1 */
	font-weight: 700;
	color: var(--color-navy);                         /* color="primary" */
	text-decoration: none;
	transition: color 0.2s;
}
.tdn-home-sidebar__list li a:hover {
	color: var(--color-navy);
	text-decoration: underline;
}
.tdn-home-sidebar__empty {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}

/* =========================================================================
 * CATEGORY LAYOUT — wrapper for politics/crime/culture/sports landing pages.
 * Mirrors React's <CategoryLayout> + <FactsPanel> + <OpinionsPanel>.
 *
 *   <section.tdn-cat>
 *     .tdn-cat-header  (Record pill | Title | Analysis pill)
 *     .tdn-cat-body
 *       .tdn-cat-panel--facts   (left)
 *       .tdn-cat-divider        (2px black vertical, md+)
 *       .tdn-cat-panel--opinions (right)
 * ===================================================================== */
.tdn-cat {
	max-width: 1200px;                               /* Container maxWidth lg */
	margin: 25px auto 32px;                          /* mt:25px mb:4 */
	padding: 0 16px;                                 /* px:2 */
}

/* Header row — Record pill LEFT, h3 serif title CENTER, Analysis pill RIGHT. */
.tdn-cat-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;                             /* mb:3 */
	gap: 16px;
}
.tdn-cat-header__title {
	font-family: var(--font-serif);
	font-size: 3rem;                                  /* h3 */
	font-weight: 700;
	text-align: center;
	margin: 0;
	color: var(--color-text-primary);
	flex: 1;
}
/* Override view-pill default width — CategoryLayout uses 125x40 not 100x40. */
.tdn-cat-header .tdn-view-pill {
	width: 125px;
	padding: 0;
}

/* Two-column body with vertical divider between. */
.tdn-cat-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
@media (min-width: 900px) {
	.tdn-cat-body {
		grid-template-columns: 1fr 2px 1fr;          /* facts | divider | opinions */
		gap: 16px;
	}
}
.tdn-cat-divider {
	display: none;
}
@media (min-width: 900px) {
	.tdn-cat-divider {
		display: block;
		background: #000;
		width: 2px;
		margin-top: 50px;
	}
}
.tdn-cat-panel { min-width: 0; }

/* Section block-head row — h4 serif title + filter + View All red button. */
.tdn-cat-section { margin-bottom: 32px; }            /* mb:4 = 32px */
.tdn-cat-section__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 25px;                             /* mb:'25px' */
}
.tdn-cat-section__title {
	font-family: var(--font-serif);
	font-size: 2.125rem;                              /* h4 */
	font-weight: 600;                                  /* theme.ts overrides h3-h6 serif to 600 (no explicit sx fontWeight here) */
	margin: 0;
	color: var(--color-text-primary);
	line-height: 1.235;                                /* MUI h4 default */
}
.tdn-cat-section__filter {
	min-width: 250px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--color-divider);
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	background: #fff;
}
/* React: <Button sx={{ bgcolor: facts.main, color: white, px:2, py:0.5, borderRadius:1, textTransform:'none' }}>
 *   <Typography variant="button" sx={{ fontWeight:'bold', textTransform:'none' }}>View All</Typography>
 * Hover: bgcolor white, color facts.main, border:'1px solid facts.main'
 * NB: pre-hover has NO border (matches MUI's 0 border on text variant).
 * Color depends on which panel: facts (left) = red, opinions (right) = navy.  */
.tdn-cat-section__viewall {
	display: inline-flex;
	align-items: center;
	background: var(--color-red);                    /* facts.main — default */
	color: #fff;
	padding: 4px 16px;                                /* py:0.5 px:2 */
	border-radius: 4px;                               /* borderRadius:1 = theme.shape.borderRadius (4px) */
	font-family: var(--font-sans);
	font-size: 0.875rem;                              /* variant="button" */
	font-weight: 700;
	text-transform: none;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border 0.2s;
	border: 1px solid transparent;                    /* placeholder so hover swap doesn't reflow */
}
.tdn-cat-section__viewall:hover {
	background: #fff;
	color: var(--color-red);
	border-color: var(--color-red);
}
/* Opinions panel — same shape, navy bg matches opinions.main */
.tdn-cat-panel--opinions .tdn-cat-section__viewall {
	background: var(--color-navy);
	border-color: transparent;
}
.tdn-cat-panel--opinions .tdn-cat-section__viewall:hover {
	background: #fff;
	color: var(--color-navy);
	border-color: var(--color-navy);
}

/* Group inside meetings section: GovernmentCard + Grid of RecordCards. */
.tdn-cat-section__group { margin-bottom: 48px; }    /* mb:6 = 48px */
.tdn-cat-section__group-meetings {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;                                        /* spacing:3 */
	margin-top: 8px;                                  /* mt:1 */
}

.tdn-cat-section__body { display: block; }
.tdn-cat-section__cta-empty {
	padding: 16px 0;
	text-align: center;
}

.tdn-cat-empty {
	padding: 32px;
	text-align: center;
	background: var(--color-grey-100);
	border-radius: 8px;
	font-family: var(--font-sans);
	color: var(--color-text-secondary);
	margin: 0;
}

/* =========================================================================
 * CULTURE PAGE — direct port of src/app/culture/page.tsx
 *   Container maxWidth lg, mt:5 mb:8.
 *   Centered head: h2 Georgia serif 800 "CULTURE" + uppercase subtitle.
 *   2-col 70/30 grid (md+):
 *     LEFT: "FEATURES & REVIEWS" h5 sans 800 + Stack of features
 *           (each: 40% gray image 220px + 60% body w/ h4 serif title +
 *            orange byline caption + body excerpt)
 *     RIGHT: #F9F9F9 panel "THE LEDGER" h6 sans 800 + Stack of facts
 *           (each: orange caption date + h6 sans 800 title)
 * ===================================================================== */
.tdn-culture {
	max-width: 1200px;                                /* Container maxWidth="lg" */
	margin: 40px auto 64px;                           /* mt:5 mb:8 */
	padding: 0 24px;                                  /* Container lg default px:3 */
}
.tdn-culture__head {
	text-align: center;
	border-bottom: 2px solid #000;
	padding-bottom: 16px;                            /* pb:2 */
	margin-bottom: 40px;                             /* mb:5 */
}
/* Double-class scope to beat theme.css's `.tdn-page__content h2` (spec 0,1,1)
 * which would otherwise force navy + 1.5rem + 700 weight onto the title. */
.tdn-page__content .tdn-culture__title,
.tdn-culture .tdn-culture__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.75rem;                              /* h2 */
	font-weight: 800 !important;                     /* beat .tdn-page__content h2 weight:700 */
	letter-spacing: -0.5px;
	margin: 0;
	color: var(--color-text-primary, #000) !important;
	line-height: 1.167;                              /* MUI h2 default */
}
/* Same scoping for the subtitle (h6) — theme.css's `h1..h6 { color: navy }` would
 * otherwise leak. React variant=subtitle1 → MUI default tag h6, color text.secondary. */
.tdn-page__content .tdn-culture__sub,
.tdn-culture .tdn-culture__sub {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* subtitle1 */
	font-weight: 400;
	color: var(--color-text-secondary) !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 8px 0 0;                                  /* mt:1 */
	line-height: 1.75;                                /* MUI subtitle1 default */
}
.tdn-culture__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;                                        /* spacing:4 */
}
@media (min-width: 900px) {
	.tdn-culture__grid { grid-template-columns: 8fr 4fr; }
}
/* Double-class scope + !important to beat theme.css's
 *   .tdn-page__content h2 { color: var(--color-navy) }
 * cascade. React: variant=h5/h6, no color specified → text.primary=#000. */
.tdn-page__content .tdn-culture__section-title,
.tdn-culture .tdn-culture__section-title {
	font-family: var(--font-sans);
	font-size: 1.5rem;                                /* h5 */
	font-weight: 800;
	border-bottom: 1px solid #ddd;
	padding-bottom: 8px;
	margin: 0 0 24px;                                 /* mb:3 */
	color: #000 !important;                            /* MUI default text.primary */
	line-height: 1.334;                                /* MUI h5 default */
}
.tdn-page__content .tdn-culture__section-title--ledger,
.tdn-culture .tdn-culture__section-title--ledger {
	font-size: 1.25rem;                               /* h6 */
	border-bottom: 2px solid #000;
}
/* Header.tsx:128 returns ['Business','Lifestyle','Real Estate','Community']
 * for activeTab === 'Culture' — an orange (#e65100) sub-nav strip renders
 * above the page content. The earlier hide rule was a misread of CulturePage.tsx
 * (which doesn't render the sub-nav itself — the global Header does). */

/* =========================================================================
 * CATEGORY-LAYOUT VIEW MODES — strict port of CategoryLayout.tsx +
 * FactsPanel/OpinionsPanel collapsed-sidebar behavior.
 *
 *   handleExpand:
 *     'facts'    → body.view-facts    → Record expanded, Opinions COLLAPSED
 *                                      + fixed RIGHT navy sidebar w/ rotated "Analysis" button
 *     'opinions' → body.view-opinions → Analysis expanded, Facts COLLAPSED
 *                                      + fixed LEFT red sidebar w/ rotated "The Record" button
 *     default    → body.view-split    → 50/50 split + middle divider
 *
 *   React renders the collapsed sidebar via FactsPanel.tsx:337-401 /
 *   OpinionsPanel.tsx:181-245 — fixed pos, top 167px (header+subnav height),
 *   60px wide, bgcolor section color, with an arrow icon at top (resets to
 *   split) and a rotated -90deg label Button.
 * ===================================================================== */

/* Default mode → grid 1fr | 2px | 1fr (the existing rule above applies). */

/* view-facts → Record expanded, Opinions collapsed, RIGHT navy sidebar shown. */
body.view-facts .tdn-cat-body {
	grid-template-columns: 1fr !important;            /* single column */
}
body.view-facts .tdn-cat-panel--opinions,
body.view-facts .tdn-cat-divider {
	display: none;
}
body.view-facts .tdn-cat-sidebar--opinions { display: flex; }
body.view-facts .tdn-cat-header .tdn-view-pill--record {
	background: var(--color-red);                     /* facts.main */
	color: #fff;
}
body.view-facts .tdn-cat-header .tdn-view-pill--analysis {
	background: #fff;
	color: #000;
}

/* view-opinions → Analysis expanded, Facts collapsed, LEFT red sidebar shown. */
body.view-opinions .tdn-cat-body {
	grid-template-columns: 1fr !important;
}
body.view-opinions .tdn-cat-panel--facts,
body.view-opinions .tdn-cat-divider {
	display: none;
}
body.view-opinions .tdn-cat-sidebar--facts { display: flex; }
body.view-opinions .tdn-cat-header .tdn-view-pill--analysis {
	background: var(--color-navy);                    /* opinions.main */
	color: #fff;
}
body.view-opinions .tdn-cat-header .tdn-view-pill--record {
	background: #fff;
	color: #000;
}

/* Fixed-position collapsed sidebar — both states hidden by default. */
.tdn-cat-sidebar {
	display: none;                                    /* shown via body class */
	position: fixed;
	top: 167px;                                       /* React FactsPanel.tsx:343 */
	bottom: 0;
	width: 60px;
	height: calc(100% - 167px);
	flex-direction: column;
	align-items: center;
	padding-top: 20px;                                /* paddingTop: '20px' */
	z-index: 1000;
}
.tdn-cat-sidebar--facts {
	left: 0;
	background: var(--color-red);                     /* facts.main */
}
.tdn-cat-sidebar--opinions {
	right: 0;
	background: var(--color-navy);                    /* opinions.main */
}

/* Arrow icon (back-to-split). React renders the reset-arrow as a Box with
 * onClick={onReset}; we use a button for keyboard access. */
.tdn-cat-sidebar__close {
	cursor: pointer;
	color: #fff;
	margin-bottom: 20px;
	background: transparent;
	border: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
}
.tdn-cat-sidebar__close:hover { opacity: 0.7; }
.tdn-cat-sidebar__close svg {
	width: 32px;
	height: 32px;
}

/* Rotated label button — 125×40, 5px white border, 15px radius, 18px bold,
 * rotated -90deg, mt:50px. Background = sidebar's section color. */
.tdn-cat-sidebar .tdn-cat-sidebar__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 5px solid #fff;
	color: #fff;
	width: 125px;
	height: 40px;
	padding: 0;
	border-radius: 15px;
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 700;
	text-transform: none;
	cursor: pointer;
	transform: rotate(-90deg);
	transform-origin: center;
	margin-top: 50px;                                 /* marginTop: '50px' */
	white-space: nowrap;
	transition: background 0.2s, color 0.2s;
}
.tdn-cat-sidebar--facts .tdn-cat-sidebar__pill { background: var(--color-red); }
.tdn-cat-sidebar--opinions .tdn-cat-sidebar__pill { background: var(--color-navy); }
.tdn-cat-sidebar--facts .tdn-cat-sidebar__pill:hover {
	background: #fff;
	color: var(--color-red);
}
.tdn-cat-sidebar--opinions .tdn-cat-sidebar__pill:hover {
	background: #fff;
	color: var(--color-navy);
}
.tdn-culture__features-list {
	display: flex;
	flex-direction: column;
	gap: 32px;                                        /* Stack spacing={4} */
}
.tdn-culture__feature {
	display: flex;
	flex-direction: column;
	gap: 24px;
	text-decoration: none;
	color: inherit;
}
@media (min-width: 600px) {
	.tdn-culture__feature { flex-direction: row; }
}
.tdn-culture__feature-media {
	width: 100%;
	height: 220px;
	background: #e0e0e0;
	border-radius: 8px;                               /* borderRadius:2 */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
@media (min-width: 600px) {
	.tdn-culture__feature-media { width: 40%; }
}
.tdn-culture__feature-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tdn-culture__feature-placeholder {
	color: rgba(0, 0, 0, 0.38);
	font-family: var(--font-sans);
	font-weight: 700;
}
.tdn-culture__feature-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
}
.tdn-culture__feature-title {
	font-family: Georgia, "Playfair Display", serif;
	font-size: 2.125rem;                              /* h4 */
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 12px;                                 /* mb:1.5 */
	/* React variant=h4 with no color override → MUI text.primary = #000.
	 * theme.css applies `h1..h6 { color: var(--tdn-navy) }` — beat with
	 * explicit color so the title isn't navy. */
	color: var(--color-text-primary, #000) !important;
	transition: color 0.2s;
}
.tdn-culture__feature:hover .tdn-culture__feature-title { color: #e65100; }
.tdn-culture__feature-meta {
	font-family: var(--font-sans);
	font-size: 0.875rem;                              /* subtitle2 */
	font-weight: 600;
	color: var(--section-culture);                    /* #e65100 */
	text-transform: uppercase;
	margin: 0 0 8px;
}
.tdn-culture__feature-excerpt {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* body1 */
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0;
}
.tdn-culture__ledger {
	background: var(--color-paper);                  /* #F9F9F9 */
	padding: 24px;                                    /* p:3 */
	border-radius: 8px;
}
.tdn-culture__ledger-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;                                        /* Stack spacing={3} */
}
.tdn-culture__ledger-item {
	padding-bottom: 16px;                            /* pb:2 */
	border-bottom: 1px solid #e0e0e0;
}
.tdn-culture__ledger-item:last-child { border-bottom: none; }
.tdn-culture__ledger-date {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--section-culture);                   /* #e65100 */
	text-transform: uppercase;
	margin-bottom: 4px;                              /* mb:0.5 */
}
/* The Link wraps a Typography variant="subtitle1"; the link is just a transparent
 * navigation wrapper, the heading does the styling. */
.tdn-culture__ledger-link {
	text-decoration: none;
	color: inherit;
	display: block;
}
.tdn-culture__ledger-title {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* subtitle1 */
	font-weight: 800;
	line-height: 1.3;
	color: var(--color-text-primary);
	margin: 0;
	transition: color 0.2s;
}
.tdn-culture__ledger-link:hover .tdn-culture__ledger-title { color: var(--section-culture); }
.tdn-culture__empty {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* body1 default — features empty */
	color: var(--color-text-secondary);
	margin: 0;
}
/* Ledger empty state uses Typography variant="body2" — smaller. */
.tdn-culture__empty--small {
	font-size: 0.875rem;
}

/* =========================================================================
 * SPORTS PRESS BOX — sidebar component on /sports.
 * React: bgcolor white, borderLeft #eee, h5 Oswald 'THE PRESS BOX' with
 * bottom-border 2px #d32f2f. Stack of OpinionCard items.
 * ===================================================================== */
.tdn-sports__pressbox {
	padding-left: 32px;
	border-left: 1px solid #eee;
}
@media (max-width: 900px) { .tdn-sports__pressbox { border-left: 0; padding-left: 0; } }
.tdn-sports__pressbox-head {
	border-bottom: 2px solid #d32f2f;
	padding-bottom: 8px;
	margin-bottom: 24px;
}
.tdn-sports__pressbox-title {
	font-family: 'Oswald', var(--font-sans);
	font-size: 1.5rem;
	font-weight: 700;
	color: #d32f2f;
	margin: 0;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.tdn-sports__pressbox-list {
	display: flex;
	flex-direction: column;
	gap: 16px;                                        /* Stack spacing={2} */
}
.tdn-sports__pressbox-item {
	display: block;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--color-grey-300);
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s, transform 0.2s;
}
.tdn-sports__pressbox-item:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}
.tdn-sports__pressbox-item h3 {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 6px;
	line-height: 1.3;
}
.tdn-sports__pressbox-byline {
	font-family: var(--font-sans);
	font-size: 0.78rem;
	font-weight: 700;
	color: #d32f2f;
	margin: 0 0 6px;
}
.tdn-sports__pressbox-snippet {
	font-family: var(--font-sans);
	font-size: 0.82rem;
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.45;
}
.tdn-sports__pressbox-empty {
	font-family: var(--font-sans);
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

/* =========================================================================
 * FINANCIAL PAYWALL — port of src/app/financial/page.tsx:40-58.
 * Slate bg full-screen, centered Card maxWidth md, crimson border + shadow,
 * h4 Georgia "Premium Access Required", body, contained crimson CTA button.
 * ===================================================================== */
.tdn-financial-paywall {
	background: #f8fafc;                             /* globalTheme.bg */
	min-height: 50vh;
	padding: 64px 16px;                              /* py:8 */
	display: flex;
	justify-content: center;
	align-items: center;
}
.tdn-financial-paywall__card {
	max-width: 760px;                                /* maxWidth="md" */
	width: 100%;
	background: #fff;                                /* globalTheme.surface */
	border: 1px solid #a42a38;                       /* globalTheme.danger */
	border-radius: 8px;                              /* borderRadius:2 */
	box-shadow: var(--shadow-3);
	padding: 48px;                                    /* p:6 */
	text-align: center;
	color: var(--color-navy);                        /* globalTheme.textPrimary */
}
.tdn-financial-paywall__title {
	font-family: Georgia, serif;
	font-size: 2.125rem;                              /* h4 */
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 0.35em;
}
.tdn-financial-paywall__body {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* body1 */
	color: #64748b;                                   /* globalTheme.textSecondary */
	margin: 0 0 32px;                                 /* mb:4 */
	line-height: 1.6;
}
.tdn-financial-paywall__cta {
	display: inline-block;
	background: #a42a38;                              /* globalTheme.danger */
	color: #fff;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 10px 24px;
	border-radius: 4px;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: var(--shadow-2);
	transition: background 0.2s;
}
.tdn-financial-paywall__cta:hover { background: #8b0000; }

/* =========================================================================
 * WEATHER FORECAST — ported from src/app/weather/forecast/page.tsx.
 * ===================================================================== */
.tdn-weather {
	max-width: 1200px;
	margin: 25px auto 64px;                          /* mt:25px mb:8 */
	padding: 0 16px;
}
.tdn-weather__head {
	border-bottom: 4px solid var(--section-weather); /* #0284c7 */
	padding-bottom: 16px;                            /* pb:2 */
	margin-bottom: 32px;                             /* mb:4 */
}
.tdn-weather__title {
	font-family: var(--font-serif);
	font-size: 3rem;                                 /* h3 */
	font-weight: 700;
	color: var(--section-weather);
	text-transform: uppercase;
	margin: 0 0 4px;
}
.tdn-weather__county {
	font-family: var(--font-sans);
	font-size: 1.25rem;                              /* h6 */
	color: var(--color-text-secondary);
	margin: 0;
}
.tdn-weather__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 900px) {
	.tdn-weather__grid { grid-template-columns: 8fr 4fr; }
}

/* LEFT — current conditions + outlook */
.tdn-weather__current {
	background: #f8fafc;
	border: 1px solid var(--color-divider);
	border-radius: 8px;                              /* borderRadius:2 */
	padding: 32px;                                    /* p:4 */
	margin-bottom: 32px;                              /* mb:4 */
}
.tdn-weather__current-label {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.08333em;
	display: block;
	margin-bottom: 16px;                              /* mt:2 */
}
.tdn-weather__current-row {
	display: flex;
	align-items: center;
	gap: 32px;                                        /* mr:4 */
}
.tdn-weather__current-temp {
	font-family: var(--font-sans);
	font-size: 6rem;                                  /* h1 */
	font-weight: 900;
	color: #0f172a;
	line-height: 1;
}
.tdn-weather__current-cond {
	font-family: var(--font-sans);
	font-size: 1.5rem;                                /* h5 */
	font-weight: 700;
	color: #334155;
}
.tdn-weather__outlook-head {
	border-top: 2px solid #000;
	padding-top: 16px;                                /* pt:2 */
	margin-bottom: 32px;                              /* mb:4 */
}
.tdn-weather__outlook-title {
	font-family: var(--font-sans);
	font-size: 1.5rem;                                /* h5 */
	font-weight: 700;
	margin: 0;
}
.tdn-weather__outlook {
	display: flex;
	flex-direction: column;
	gap: 16px;                                        /* Stack spacing={2} */
}
.tdn-weather__outlook-div { border-top: 1px solid var(--color-divider); }
.tdn-weather__outlook-row {
	display: flex;
	gap: 24px;                                        /* gap:3 */
	align-items: center;
	padding: 8px 0;                                   /* py:1 */
}
.tdn-weather__outlook-name {
	flex-shrink: 0;
	width: 120px;
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* subtitle1 */
	font-weight: 700;
}
.tdn-weather__outlook-temp {
	flex-shrink: 0;
	width: 80px;
	text-align: center;
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: 700;
}
.tdn-weather__outlook-temp.is-day  { color: #ef4444; }
.tdn-weather__outlook-temp.is-night { color: #3b82f6; }
.tdn-weather__outlook-desc {
	flex: 1;
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* body1 */
	color: var(--color-text-secondary);
}

/* RIGHT — radar panel */
.tdn-weather__radar {
	background: #FFFDF0;
	padding: 24px;                                    /* p:3 */
	border: 1px solid #e0e0e0;
	height: 100%;
}
.tdn-weather__radar-head {
	border-bottom: 2px solid #000;
	padding-bottom: 8px;                              /* pb:1 */
	margin-bottom: 24px;                              /* mb:3 */
}
.tdn-weather__radar-title {
	font-family: var(--font-sans);
	font-size: 1.25rem;                               /* h6 */
	font-weight: 700;
	margin: 0;
}
.tdn-weather__radar-frame {
	width: 100%;
	height: 350px;
	background: #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 24px;
}
.tdn-weather__radar-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.tdn-weather__radar-credit {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	font-style: italic;
	margin: 0;
}

/* =========================================================================
 * POLLING ARCHIVE — port of src/components/polls/PollsContainer.tsx.
 * Background slate #F8F9FA full-screen, sticky red #9E2A2F bar at top,
 * centered nav-text, search field, 3-col PollCard grid.
 * ===================================================================== */
.tdn-polls {
	background: #F8F9FA;
	min-height: 100vh;
	padding-bottom: 64px;                            /* pb:8 */
	margin: 0;
}
/* PollsContainer.tsx:66 outer <Box bgcolor:#F8F9FA> is full-viewport-wide.
 * Lift the three WP wrappers so the gray bg + sticky red bar extend
 * to the screen edges instead of being clipped by the .tdn-page__content
 * 760px max-width that prose pages use. */
.tdn-container:has(.tdn-polls),
.tdn-page__content:has(.tdn-polls) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-polls) { padding-block: 0; }
.tdn-polls__sticky {
	background: #9E2A2F;
	color: #fff;
	padding: 8px 16px;
	position: sticky;
	top: 0;
	z-index: 100;
	overflow: hidden;
	white-space: nowrap;
}
.tdn-polls__sticky-inner {
	max-width: 1440px;                                /* maxWidth="xl" */
	margin: 0 auto;
}
.tdn-polls__sticky-label {
	font-family: var(--font-sans);
	font-size: 0.875rem;                              /* subtitle2 */
	font-weight: 700;
	letter-spacing: 0.05em;
}
.tdn-polls__container {
	max-width: 1200px;                                /* maxWidth="lg" */
	margin: 0 auto;
	padding: 32px 16px 0;                             /* mt:4 */
}
.tdn-polls__head {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e5e7eb;
	text-align: center;
}
@media (min-width: 900px) { .tdn-polls__head { text-align: left; } }
/* theme.ts:54-57 — h3.fontFamily = var(--font-serif), fontWeight 600 default
 * (PollsContainer sx overrides fontWeight to 900). */
.tdn-polls__title {
	font-family: var(--font-serif);
	font-size: 3rem;                                  /* h3 */
	font-weight: 900;
	color: var(--color-navy);
	margin: 0 0 8px;
	line-height: 1.167;
}
.tdn-polls__sub {
	font-family: Georgia, serif;
	font-size: 1.25rem;                               /* h6 */
	font-style: italic;
	color: #4b5563;
	margin: 0;
}
.tdn-polls__search { margin: 0 0 32px; }
.tdn-polls__search-input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-divider);
	border-radius: 4px;
	background: #fff;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--color-text-primary);
}
.tdn-polls__search-input::placeholder { color: var(--color-text-secondary); }
.tdn-polls__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;                                        /* spacing:4 */
}
@media (min-width: 600px)  { .tdn-polls__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .tdn-polls__grid { grid-template-columns: 1fr 1fr 1fr; } }
/* React PollCard.tsx — outer <Box>:
 *   bgcolor: '#fffdf0'  (newsprint cream)
 *   boxShadow: '2px 3px 5px rgba(0,0,0,0.1)'
 *   border: '1px solid #e0ddd0'
 *   display: 'flex', flexDirection: 'column'
 *   transition: 'transform 0.2s'
 *   '&:hover': transform translateY(-2px) + boxShadow 4px 5px 10px rgba(0,0,0,0.15)
 *   p: 3 (= 24px)
 *   fontFamily: '"Courier New", Courier, monospace'
 *   cursor: 'pointer'
 *   height: '100%'
 *   (NO borderRadius — defaults to 0)
 */
.tdn-poll-card {
	background: #fffdf0;
	border: 1px solid #e0ddd0;
	padding: 24px;
	box-shadow: 2px 3px 5px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	font-family: "Courier New", Courier, monospace;
	cursor: pointer;
	height: 100%;
	transition: transform 0.2s, box-shadow 0.2s;
	text-decoration: none;
}
.tdn-poll-card:hover {
	transform: translateY(-2px);
	box-shadow: 4px 5px 10px rgba(0,0,0,0.15);
}
/* React Typography h6 title:
 *   color: '#002855', fontWeight: 900, mb: 1, fontFamily: '"Georgia", serif', lineHeight: 1.3 */
.tdn-poll-card__title {
	font-family: "Georgia", serif;
	font-size: 1.25rem;                               /* variant=h6 */
	font-weight: 900;
	color: #002855;
	margin: 0 0 8px;                                  /* mb:1 = 8px */
	line-height: 1.3;
}
/* React Typography body2 meta:
 *   color: '#666', mb: 2 (inherits Courier from parent) */
.tdn-poll-card__meta {
	font-family: inherit;                             /* Courier from parent */
	font-size: 0.875rem;                              /* variant=body2 */
	color: #666;
	margin: 0 0 16px;                                 /* mb:2 = 16px */
}
/* React Button variant=text size=small:
 *   color: '#9E2A2F'  (specific dark red, NOT the brand #a42a38)
 *   fontWeight: 'bold'
 *   (inherits Courier from parent, MUI button does NOT uppercase here because textTransform isn't overridden — wait, MUI Button DOES uppercase by default for variant=text. Source has no textTransform override so MUI default uppercase applies.) */
/* React: <Box sx={{ mt:'auto', textAlign:'right' }}> wraps the Button.
 * mt:auto pushes the wrapper to the bottom of the flex column;
 * textAlign:right right-aligns the inline button inside it. */
.tdn-poll-card__cta-wrap {
	display: block;
	margin-top: auto;
	text-align: right;
}
/* MUI Button size=small variant=text — defaults applied:
 *   padding: 4px 5px
 *   font-size: 0.8125rem
 *   text-transform: uppercase (MUI default for Button)
 *   letter-spacing: 0.02857em
 *   color from sx: #9E2A2F
 *   font-weight from sx: bold (700)
 *   font-family: inherits Courier from the outer Box. */
.tdn-poll-card__cta {
	display: inline-block;
	padding: 4px 5px;
	font-family: inherit;                             /* Courier from outer .tdn-poll-card */
	font-size: 0.8125rem;
	font-weight: 700;
	color: #9E2A2F;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02857em;
}
.tdn-poll-card:hover .tdn-poll-card__cta { text-decoration: underline; }
/* ShareWidget.tsx — outer Box:
 *   mt:4 mb:4 p:3 bgcolor:#f8fafc borderRadius:2 border:'1px solid #e2e8f0' textAlign:center */
.tdn-polls__share {
	margin: 32px 0;                                   /* mt:4 mb:4 */
	padding: 24px;                                    /* p:3 */
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;                               /* borderRadius:2 = 8px */
	text-align: center;
}
/* Title: Typography variant=h6 fontWeight:bold gutterBottom color:#0f172a
 * theme.ts:66-69 — h6.fontFamily = var(--font-serif) */
.tdn-polls__share-label {
	font-family: var(--font-serif);
	font-size: 1.25rem;                               /* variant=h6 */
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 12px;                                  /* gutterBottom = 0.35em ≈ 12px at 1.25rem */
	line-height: 1.6;
}
/* Stack direction={xs:col,sm:row} spacing:2 justifyContent:center mt:2 */
.tdn-polls__share-btns {
	display: flex;
	flex-direction: column;
	gap: 16px;                                        /* spacing:2 */
	justify-content: center;
	margin-top: 16px;                                  /* mt:2 */
}
@media (min-width: 600px) {
	.tdn-polls__share-btns { flex-direction: row; }
}
/* MUI Button variant=contained:
 *   py:1.5 (12px top/bottom) px:4 (32px left/right)
 *   fontWeight:bold (700)
 *   fontSize:'1rem'
 *   color:white
 *   border-radius:4 (theme.shape.borderRadius default; no override)
 *   text-transform:uppercase (MUI default)
 *   letter-spacing: 0.02857em
 *   box-shadow: MUI elevation 2 */
.tdn-polls__share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;                               /* py:1.5 px:4 */
	border: 0;
	border-radius: 4px;                               /* theme.shape.borderRadius */
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	color: #fff;
	box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);  /* MUI elevation 2 */
	transition: background-color 0.25s, box-shadow 0.25s;
}
.tdn-polls__share-btn--copy { background: #0f172a; }
.tdn-polls__share-btn--copy:hover { background: #1e293b; }
.tdn-polls__share-btn--fb   { background: #1877f2; }
.tdn-polls__share-btn--fb:hover   { background: #166fe5; }
.tdn-polls__share-btn--x    { background: #000000; }
.tdn-polls__share-btn--x:hover    { background: #333333; }

/* =========================================================================
 * VIEW-MODE BODY CLASSES — drive the FactsPanel/OpinionsPanel flex ratios.
 * Source: src/components/layout/CategoryLayout.tsx:115-156.
 *
 *   view-split    (default) → Facts:Opinions = 1:1, divider visible
 *   view-facts             → Facts:Opinions = 3:0, hide opinions + divider
 *   view-opinions          → Facts:Opinions = 0:3, hide facts + divider
 * ===================================================================== */
@media (min-width: 900px) {
	body.view-facts    .tdn-cat-body { grid-template-columns: 1fr; }
	body.view-facts    .tdn-cat-divider,
	body.view-facts    .tdn-cat-panel--opinions { display: none; }

	body.view-opinions .tdn-cat-body { grid-template-columns: 1fr; }
	body.view-opinions .tdn-cat-divider,
	body.view-opinions .tdn-cat-panel--facts { display: none; }
}

/* Active-pill visual state on category headers (mirrors React's sx={{ bgcolor:
 * viewMode === 'facts' ? 'facts.main' : 'white' }}). */
.tdn-cat-header .tdn-view-pill[aria-pressed="true"].tdn-view-pill--record   { background: var(--color-red);  color: #fff; }
.tdn-cat-header .tdn-view-pill[aria-pressed="true"].tdn-view-pill--analysis { background: var(--color-navy); color: #fff; }

/* =========================================================================
 * DETAIL PAGES — ported wrappers around CPT singles (single-meeting,
 * single-person, single-government, single-article, single-crime).
 * Mirrors React's <DetailPageLayout> with breadcrumb, hero, sections.
 * ===================================================================== */
.tdn-detail {
	max-width: 1200px;
	margin: 32px auto 64px;
	padding: 0 16px;
}
.tdn-detail__breadcrumb {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.tdn-detail__breadcrumb a { color: var(--color-navy); text-decoration: none; }
.tdn-detail__breadcrumb a:hover { text-decoration: underline; }
.tdn-detail__breadcrumb span { color: var(--color-text-primary); }

.tdn-detail__section { margin: 32px 0; }
.tdn-detail__section-title {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text-primary);
	border-bottom: 2px solid var(--color-red);
	padding-bottom: 8px;
	margin: 0 0 18px;
}
.tdn-detail__empty {
	font-family: var(--font-sans);
	color: var(--color-text-secondary);
	font-style: italic;
}
.tdn-detail__body {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-primary);
	max-width: 760px;
}
.tdn-detail__body p { margin: 0 0 1em; }
.tdn-detail__summary {
	background: var(--color-paper);
	border-left: 4px solid var(--color-red);
	padding: 12px 16px;
	margin: 0 0 16px;
	font-style: italic;
}

/* Shared facts grid (used by person, govt, meeting heroes). */
.tdn-detail__facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin: 16px 0;
}
.tdn-detail__facts-grid > div { display: flex; flex-direction: column; }
.tdn-detail__facts-grid dt {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}
.tdn-detail__facts-grid dd {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: 4px 0 0;
}
.tdn-detail__facts-grid dd a { color: var(--color-navy); text-decoration: none; }
.tdn-detail__facts-grid dd a:hover { text-decoration: underline; }

/* ── MEETING detail ── */
.tdn-detail__hero { margin-bottom: 32px; }
.tdn-detail__key-topics {
	margin: 16px 0;
	padding: 12px 16px;
	border-left: 3px solid #cbd5e1;
	background: #f8fafc;
	border-radius: 0 8px 8px 0;
}
.tdn-detail__key-topics-label {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0 0 6px;
}
.tdn-detail__key-topics-text {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: #334155;
	font-style: italic;
	line-height: 1.6;
	margin: 0;
}
.tdn-detail__agenda { list-style: none; padding: 0; margin: 0; }
.tdn-detail__agenda-item {
	border: 1px solid var(--color-divider);
	border-radius: 6px;
	margin-bottom: 8px;
	background: #fff;
}
.tdn-detail__agenda-item details summary {
	cursor: pointer;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-sans);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text-primary);
}
.tdn-detail__agenda-item details[open] summary {
	background: #f8fafc;
	border-bottom: 1px solid var(--color-divider);
}
.tdn-detail__agenda-item summary::-webkit-details-marker { display: none; }
.tdn-detail__agenda-num {
	background: var(--color-navy);
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
}
.tdn-detail__agenda-title { flex: 1; }
.tdn-detail__agenda-desc {
	padding: 12px 16px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.6;
}

/* ── PERSON detail ── */
.tdn-detail__person-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 32px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--color-divider);
	border-radius: 8px;
	box-shadow: var(--shadow-1);
}
@media (min-width: 700px) {
	.tdn-detail__person-hero { grid-template-columns: 220px 1fr; }
}
.tdn-detail__person-photo {
	width: 220px;
	height: 220px;
	background: var(--color-grey-300);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.tdn-detail__person-photo img { width: 100%; height: 100%; object-fit: cover; }
.tdn-detail__person-initials {
	font-family: var(--font-serif);
	font-size: 4rem;
	font-weight: 700;
	color: var(--color-text-secondary);
}
.tdn-detail__person-body { display: flex; flex-direction: column; gap: 6px; }
.tdn-detail__person-name {
	font-family: var(--font-serif);
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.1;
	margin: 0;
}
.tdn-detail__person-office {
	font-family: var(--font-sans);
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--color-text-primary);
	margin: 0;
}

/* ── GOVERNMENT detail ── */
.tdn-detail__govt-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 32px;
	background: #fff;
	border: 1px solid var(--color-divider);
	border-left: 6px solid var(--color-red);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--shadow-2);
}
@media (min-width: 700px) {
	.tdn-detail__govt-hero { grid-template-columns: 320px 1fr; }
}
.tdn-detail__govt-photo {
	width: 100%;
	height: 220px;
	background: linear-gradient(135deg, var(--color-navy) 0%, #1d3a6e 60%, var(--color-red) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--font-serif);
	font-size: 3rem;
	font-weight: 800;
}
.tdn-detail__govt-photo img { width: 100%; height: 100%; object-fit: cover; }
.tdn-detail__govt-initial { text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.tdn-detail__govt-body { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.tdn-detail__govt-name {
	font-family: var(--font-serif);
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--color-navy);
	margin: 0;
}
.tdn-detail__govt-type {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}
.tdn-detail__govt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}
.tdn-detail__people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.tdn-detail__person-tile {
	display: flex;
	gap: 12px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--color-divider);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s, transform .2s;
}
.tdn-detail__person-tile:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}
.tdn-detail__person-tile-photo {
	width: 56px; height: 56px; flex-shrink: 0;
	background: var(--color-navy); color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem;
	overflow: hidden;
}
.tdn-detail__person-tile-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tdn-detail__person-tile-body h3 {
	font-family: var(--font-serif);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 4px;
	line-height: 1.2;
}
.tdn-detail__person-tile-body p {
	font-family: var(--font-sans);
	font-size: 0.78rem;
	color: var(--color-text-secondary);
	margin: 0;
}
.tdn-detail__meetings-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tdn-detail__meetings-list li a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--color-divider);
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	border-left: 4px solid var(--color-navy);
}
.tdn-detail__meetings-list li a:hover { background: var(--color-paper); }
.tdn-detail__meetings-title {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-navy);
}
.tdn-detail__meetings-meta {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	color: var(--color-text-secondary);
}

/* ── ARTICLE detail ── */
.tdn-detail--article { max-width: none; padding: 0; }
.tdn-detail__article-cover {
	width: 100%;
	height: 480px;
	overflow: hidden;
	background: var(--color-grey-300);
}
.tdn-detail__article-cover img { width: 100%; height: 100%; object-fit: cover; }
.tdn-detail__article-inner {
	max-width: 760px;
	margin: 32px auto;
	padding: 0 16px;
}
.tdn-detail__article-head { margin: 16px 0 24px; }
.tdn-detail__article-kicker {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-red);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 8px;
}
.tdn-detail__article-title {
	font-family: Georgia, var(--font-serif);
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 800;
	color: var(--color-text-primary);
	line-height: 1.1;
	margin: 0 0 16px;
	letter-spacing: -0.5px;
}
.tdn-detail__article-byline {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 24px;
}
.tdn-detail__article-byline a { color: var(--color-red); text-decoration: none; }
.tdn-detail__article-byline a:hover { text-decoration: underline; }
.tdn-detail__article-date { color: var(--color-text-secondary); font-weight: 400; }
.tdn-detail__article-body {
	font-family: Georgia, var(--font-serif);
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--color-text-primary);
}
.tdn-detail__article-body p { margin: 0 0 1.25em; }
.tdn-detail__article-body a { color: var(--color-red); }
.tdn-detail__article-body img { margin: 24px 0; border-radius: 4px; }
.tdn-detail__article-footer {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 2px solid var(--color-divider);
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

/* ── CRIME detail ── */
.tdn-detail__crime-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	background: #fff;
	border: 1px solid var(--color-divider);
	border-left: 6px solid var(--color-red);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--shadow-1);
}
@media (min-width: 700px) { .tdn-detail__crime-hero { grid-template-columns: 200px 1fr; } }
.tdn-detail__crime-agency {
	background: var(--color-grey-300);
	color: var(--color-text-secondary);
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08333em;
	display: flex; align-items: center; justify-content: center;
	min-height: 150px;
	padding: 16px;
	text-align: center;
}
.tdn-detail__crime-body { padding: 24px; }
.tdn-detail__crime-title {
	font-family: var(--font-serif);
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 12px;
}
.tdn-detail__crime-date, .tdn-detail__crime-location {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin: 0 0 4px;
}
.tdn-detail__crime-chips { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.tdn-detail__crime-description {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-text-primary);
	margin: 16px 0;
}

/* ============================================================
   DetailPageLayout — ported from React's components/layout/DetailPageLayout.tsx
   Used on: single-government, single-meeting, single-person, single-article,
            single-crime, single-election, agenda-items, etc.
   ============================================================ */

.tdn-detail-layout { padding-top: 32px; padding-bottom: 32px; max-width: 1200px; }
.tdn-detail-layout__back {
	display: inline-flex; align-items: center; gap: 4px;
	margin-bottom: 24px;
	font-family: var(--font-sans);
	font-size: 0.875rem; text-transform: none;
	color: var(--color-text-secondary); text-decoration: none;
}
.tdn-detail-layout__back svg { transform: rotate(180deg); }
.tdn-detail-layout__back:hover { color: var(--color-text-primary); text-decoration: underline; }
.tdn-detail-layout__breadcrumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-bottom: 24px; font-family: var(--font-sans);
}
.tdn-detail-layout__breadcrumbs a,
.tdn-detail-layout__breadcrumbs span {
	font-size: 1.25rem; font-weight: 700; color: var(--color-text-primary);
}
.tdn-detail-layout__breadcrumbs a { text-decoration: none; cursor: pointer; }
.tdn-detail-layout__breadcrumbs a:hover { text-decoration: underline; }
.tdn-detail-layout__breadcrumbs-sep svg { color: var(--color-text-secondary); vertical-align: middle; }
.tdn-detail-layout__header {
	display: flex; justify-content: center; align-items: center;
	margin-bottom: 32px;
}
.tdn-detail-layout__title {
	font-family: var(--font-sans);
	font-size: 2.125rem;  /* MUI h4 */
	font-weight: 700;
	text-align: center;
	padding: 0 16px;
	margin: 0;
}
.tdn-detail-layout__body > section + section,
.tdn-detail-layout__body > .tdn-paper + .tdn-paper,
.tdn-detail-layout__body > .tdn-paper + .tdn-grid,
.tdn-detail-layout__body > .tdn-grid + .tdn-share-widget,
.tdn-detail-layout__body > .tdn-paper + .tdn-share-widget {
	margin-top: 32px;
}

/* ============================================================
   .tdn-paper — MUI <Paper variant="outlined" elevation={0}>
   ============================================================ */

.tdn-paper {
	background: #fff;
	border: 1px solid var(--color-divider, #e0e0e0);
	border-radius: 16px;   /* React: borderRadius: 4 → 4 * 4px = 16px */
	padding: 24px;
	box-shadow: none;
}
.tdn-paper + .tdn-paper { margin-top: 24px; }
.tdn-paper--header { padding: 32px; margin-bottom: 32px; }   /* p:4 on the header */
.tdn-paper__title {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 12px;
	font-family: var(--font-sans);
	font-size: 1.25rem;   /* MUI h6 */
	font-weight: 700;
	color: var(--color-text-primary);
}
.tdn-paper__title--lg {
	font-size: 1.5rem;  /* MUI h5 */
	margin-bottom: 24px;
}
.tdn-paper__title svg { color: var(--color-navy, #002855); flex: 0 0 auto; }
.tdn-paper__lede { margin: 0 0 16px; font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.55; color: var(--color-text-primary); }
.tdn-paper__empty { padding: 16px 8px; font-family: var(--font-sans); color: var(--color-text-secondary); }

/* Paper header card (avatar + facts column) */
.tdn-paper__header-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 32px;
	align-items: center;
}
.tdn-paper__header-media {
	width: 120px; height: 120px; flex: 0 0 auto;
	display: grid; place-items: center;
	border-radius: 8px; overflow: hidden;
	background: var(--tdn-paper, #f5f5f5);
}
.tdn-paper__header-photo { width: 100%; height: 100%; object-fit: cover; }
.tdn-paper__header-avatar { font-size: 40px; font-weight: 700; color: var(--color-text-primary); }
.tdn-paper__header-type {
	margin: 0 0 4px;
	font-family: var(--font-sans);
	font-size: 1.25rem; font-weight: 500;
	color: var(--color-text-secondary);
}
.tdn-paper__header-fact {
	margin: 4px 0 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}
.tdn-paper__header-fact strong { color: var(--color-text-primary); font-weight: 600; }
.tdn-paper__header-quote {
	margin: 16px 0 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-style: italic;
	line-height: 1.6;
	max-width: 800px;
	color: var(--color-text-primary);
}
@media (max-width: 640px) {
	.tdn-paper__header-grid { grid-template-columns: 1fr; gap: 16px; }
	.tdn-paper__header-media { width: 96px; height: 96px; margin: 0 auto; }
	.tdn-paper--header { padding: 24px; }
}

/* ============================================================
   .tdn-info-list — MUI List dense
   ============================================================ */

.tdn-info-list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column;
}
.tdn-info-list > li {
	padding: 8px 0;
	border-bottom: 1px solid var(--color-divider, #f0f0f0);
}
.tdn-info-list > li:last-child { border-bottom: 0; }
.tdn-info-list > li > a { display: block; text-decoration: none; color: inherit; }
.tdn-info-list > li > a:hover { background: rgba(0,0,0,0.04); }
.tdn-info-list__primary {
	display: block; font-family: var(--font-sans);
	font-size: 0.95rem; font-weight: 500;
	color: var(--color-text-primary);
}
.tdn-info-list__secondary {
	display: block; font-family: var(--font-sans);
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	margin-top: 2px;
}

/* ============================================================
   .tdn-grid — MUI Grid container/item; 12-col responsive
   ============================================================ */

.tdn-grid { display: grid; gap: 32px; }
.tdn-grid--4-8 { grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.tdn-grid--4-8 { grid-template-columns: 4fr 8fr; }
}
.tdn-grid__col > .tdn-paper + .tdn-paper { margin-top: 24px; }

/* ============================================================
   .tdn-officials-grid + .tdn-official-card — React's Elected Officials grid
   ============================================================ */

.tdn-officials-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 600px) {
	.tdn-officials-grid { grid-template-columns: 1fr 1fr; }
}
.tdn-official-card {
	display: flex; align-items: center; gap: 16px;
	padding: 16px;
	border: 1px solid var(--color-divider, #e0e0e0);
	border-radius: 8px;
	background: #fff;
	text-decoration: none; color: inherit;
	transition: background-color .15s ease;
}
.tdn-official-card:hover { background: rgba(0,0,0,0.04); }
.tdn-official-card__avatar {
	width: 56px; height: 56px; flex: 0 0 auto;
	border-radius: 50%; overflow: hidden;
	background: var(--tdn-paper, #f5f5f5);
	display: grid; place-items: center;
}
.tdn-official-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tdn-official-card__avatar svg { color: var(--color-text-secondary); }
.tdn-official-card__meta { display: flex; flex-direction: column; min-width: 0; }
.tdn-official-card__name {
	font-family: var(--font-sans);
	font-size: 1rem; font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.4;
}
.tdn-official-card__title {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin-top: 2px;
}

/* ============================================================
   .tdn-btn — outlined / contained variants used inside Papers
   ============================================================ */

.tdn-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.9375rem; font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	background: transparent;
	transition: background-color .15s ease, border-color .15s ease;
}
.tdn-btn--outlined {
	border-color: var(--color-navy, #002855);
	color: var(--color-navy, #002855);
}
.tdn-btn--outlined:hover {
	background: rgba(0, 40, 85, 0.06);
}
.tdn-btn--contained {
	background: var(--color-navy, #002855); color: #fff;
}
.tdn-btn--contained:hover { background: #001f44; }
.tdn-btn--text { color: var(--color-navy, #002855); }
.tdn-btn--text:hover { background: rgba(0, 40, 85, 0.06); }
.tdn-btn--block { display: flex; width: 100%; }

/* ============================================================
   .tdn-share-widget — React's components/ui/ShareWidget.tsx
   ============================================================ */

.tdn-share-widget {
	margin: 32px auto;
	padding: 24px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	text-align: center;
	max-width: 1200px;
}
.tdn-share-widget__heading {
	margin: 0 0 16px;
	font-family: var(--font-sans);
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
}
.tdn-share-widget__buttons {
	display: flex; flex-direction: column; gap: 16px;
	justify-content: center; align-items: stretch;
}
@media (min-width: 600px) {
	.tdn-share-widget__buttons { flex-direction: row; align-items: center; }
}
.tdn-share-widget__btn {
	padding: 12px 32px;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	transition: background-color .25s ease;
}
.tdn-share-widget__btn--copy          { background: #0f172a; }
.tdn-share-widget__btn--copy:hover    { background: #1e293b; }
.tdn-share-widget__btn--copy.is-copied { background: #16a34a; }
.tdn-share-widget__btn--copy.is-copied:hover { background: #15803d; }
.tdn-share-widget__btn--facebook      { background: #1877f2; }
.tdn-share-widget__btn--facebook:hover{ background: #166fe5; }
.tdn-share-widget__btn--twitter       { background: #000; }
.tdn-share-widget__btn--twitter:hover { background: #333; }

.tdn-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ============================================================
   Meeting detail — single-meeting.php
   Ported 1:1 from React's meetings/[id]/page.tsx
   ============================================================ */

.tdn-detail-stack { display: flex; flex-direction: column; gap: 24px; }
.tdn-detail-stack > section + section,
.tdn-detail-stack > details + details,
.tdn-detail-stack > details + section,
.tdn-detail-stack > section + details { /* MUI Stack spacing 3 = 24px */ margin-top: 0; }

/* Video player (Card sx={{ bgcolor: '#000', color: 'white' }} in React) */
.tdn-meeting-video {
	background: #000;
	border-radius: 16px;
	overflow: hidden;
	padding: 0;
}
.tdn-meeting-video__player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}
.tdn-meeting-video__player + .tdn-meeting-video__player { margin-top: 16px; }
.tdn-meeting-video__player iframe,
.tdn-meeting-video__player video {
	position: absolute; inset: 0;
	width: 100%; height: 100%; border: 0;
}
.tdn-meeting-video__part {
	position: absolute; top: 0; left: 0; z-index: 1;
	background: rgba(0,0,0,.7); color: #fff;
	padding: 4px 8px;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-weight: 600;
}

/* External archive fallback card */
.tdn-meeting-external__link {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 8px;
	font-family: var(--font-sans);
	font-size: 1rem; font-weight: 600;
	color: var(--color-navy, #002855);
	text-decoration: underline;
}
.tdn-meeting-external__link:hover { color: #001f44; }

/* MUI Accordion → <details>/<summary> */
.tdn-accordion {
	background: #fff;
	border: 1px solid var(--color-divider, #e0e0e0);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tdn-accordion__summary {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 20px;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text-primary);
	list-style: none;
	user-select: none;
}
.tdn-accordion__summary::-webkit-details-marker { display: none; }
.tdn-accordion__summary::marker { display: none; }
.tdn-accordion__chevron {
	font-size: 1.5rem; line-height: 1;
	color: var(--color-text-secondary);
	transition: transform .2s ease;
}
.tdn-accordion[open] > .tdn-accordion__summary .tdn-accordion__chevron { transform: rotate(180deg); }
.tdn-accordion__body { padding: 0 20px 20px; }

/* Meeting Information dl */
.tdn-meeting-info { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tdn-meeting-info__row dt {
	font-family: var(--font-sans);
	font-size: 0.8125rem; font-weight: 600;
	color: var(--color-text-secondary);
	text-transform: none;
	margin-bottom: 2px;
}
.tdn-meeting-info__row dd {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--color-text-primary);
	line-height: 1.5;
}

/* Agenda list */
.tdn-agenda-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.tdn-agenda-item {
	padding: 12px 0;
	border-bottom: 1px solid var(--color-divider, #f0f0f0);
}
.tdn-agenda-item:last-child { border-bottom: 0; }
.tdn-agenda-item__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-bottom: 4px;
}
.tdn-agenda-item__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tdn-agenda-item__title {
	margin: 4px 0 0;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text-primary);
	line-height: 1.5;
}
.tdn-agenda-item__desc {
	margin: 4px 0 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}

/* Chip — MUI <Chip variant="outlined" />, small */
.tdn-chip {
	display: inline-flex; align-items: center;
	height: 24px; padding: 0 10px;
	border-radius: 12px;
	border: 1px solid var(--color-divider, #c0c0c0);
	background: transparent;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-primary);
	line-height: 1;
	white-space: nowrap;
}
.tdn-chip--primary { color: var(--color-navy, #002855); border-color: var(--color-navy, #002855); }
.tdn-chip--outlined { background: transparent; }
.tdn-chip--muted   { background: var(--tdn-paper, #f5f5f5); border-color: transparent; color: var(--color-text-secondary); }
.tdn-chip--error   { color: var(--color-red, #a42a38); border-color: var(--color-red, #a42a38); }

/* Small btn variant for accordion-row actions */
.tdn-btn--sm { padding: 4px 12px; font-size: 0.8125rem; }

/* Documents card */
.tdn-meeting-docs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tdn-meeting-docs__list a { color: var(--color-navy, #002855); text-decoration: underline; font-family: var(--font-sans); }

/* Key topics blockquote */
.tdn-meeting-keytopics {
	margin: 0;
	padding: 16px 20px;
	border-left: 4px solid var(--color-navy, #002855);
	background: var(--tdn-paper, #f5f5f5);
	font-family: var(--font-sans);
	font-style: italic;
	color: var(--color-text-primary);
}

/* Transcript */
.tdn-transcript-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.tdn-transcript-item__time {
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
}
.tdn-transcript-item__text {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-text-primary);
}

/* ============================================================
   Person detail — single-person.php
   Ported 1:1 from React's people/[id]/page.tsx
   ============================================================ */

.tdn-person-card { padding: 0; overflow: hidden; }
.tdn-person-card__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #e8e8e8;
	display: grid; place-items: center;
	overflow: hidden;
}
.tdn-person-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.tdn-person-card__photo-empty {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
}
.tdn-person-card__body { padding: 24px; }
.tdn-person-card__name {
	margin: 0 0 12px;
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.3;
}
.tdn-person-card__chip { margin-bottom: 16px; }
.tdn-person-card__divider {
	margin: 16px 0;
	border: 0;
	border-top: 1px solid var(--color-divider, #e0e0e0);
}
.tdn-person-card__field { margin-bottom: 16px; }
.tdn-person-card__field:last-child { margin-bottom: 0; }
.tdn-person-card__label {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: var(--color-text-secondary);
	margin-bottom: 2px;
}
.tdn-person-card__value {
	display: block;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--color-text-primary);
}
.tdn-person-card__value a { color: inherit; text-decoration: underline; }

/* Details grid — 2-col responsive label/value pairs */
.tdn-details-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
}
@media (min-width: 600px) {
	.tdn-details-grid { grid-template-columns: 1fr 1fr; }
}
.tdn-details-grid__row dt {
	font-family: var(--font-sans);
	font-size: 0.8125rem; font-weight: 600;
	color: var(--color-text-secondary);
}
.tdn-details-grid__row dd {
	margin: 4px 0 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--color-text-primary);
	word-break: break-word;
}
.tdn-details-grid__row--full { grid-column: 1 / -1; }

/* Biography blocks */
.tdn-person-bio { margin-bottom: 24px; }
.tdn-person-bio:last-child { margin-bottom: 0; }
.tdn-person-bio__body {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-text-primary);
	white-space: pre-wrap;
}
.tdn-person-bio__body p { margin: 0 0 12px; }
.tdn-person-bio__body p:last-child { margin-bottom: 0; }

/* Election history */
.tdn-election-history { display: flex; flex-direction: column; gap: 24px; }
.tdn-election-row__head {
	margin: 0 0 12px;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
}
.tdn-election-row__results { width: 100%; border-collapse: collapse; }
.tdn-election-row__results th,
.tdn-election-row__results td {
	padding: 6px 8px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	color: var(--color-text-primary);
	text-align: left;
	font-weight: 400;
	border-bottom: 1px solid var(--color-divider, #f0f0f0);
}
.tdn-election-row__results th:first-child { font-weight: 700; }
.tdn-election-row__results td { text-align: right; white-space: nowrap; }
.tdn-election-row__opp { opacity: 0.8; }
.tdn-election-row__opp th { font-weight: 400; }

/* Crime detail */
.tdn-crime-detail__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 16px; gap: 12px;
}
.tdn-chip--warning {
	background: #fff7ed; border-color: #f97316; color: #9a3412;
}

/* ============================================================
   Article detail — single-article.php
   Ported 1:1 from React's components/newsroom/ArticleDetail.tsx
   ============================================================ */

.tdn-article-card { padding: 24px; }
@media (min-width: 900px) { .tdn-article-card { padding: 48px; } }
.tdn-article-card__byline-row {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.tdn-article-card__byline {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem; font-weight: 700;
	color: var(--color-navy, #002855);
}
.tdn-article-card__byline a { color: inherit; text-decoration: none; }
.tdn-article-card__byline a:hover { text-decoration: underline; }
.tdn-article-card__bullet { color: var(--color-text-secondary); }
.tdn-article-card__date {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}
.tdn-article-card__chips {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-bottom: 24px;
}
.tdn-article-card__chips .tdn-chip { height: 24px; font-size: 0.75rem; padding: 0 10px; }
.tdn-article-card__cover {
	width: 100%;
	margin-bottom: 32px;
	border-radius: 8px;
	overflow: hidden;
	max-height: 400px;
}
.tdn-article-card__cover img {
	width: 100%; height: 100%; object-fit: cover;
	max-height: 400px;
}
@media (max-width: 600px) {
	.tdn-article-card__cover, .tdn-article-card__cover img { max-height: 200px; }
}
@media (min-width: 601px) and (max-width: 899px) {
	.tdn-article-card__cover, .tdn-article-card__cover img { max-height: 300px; }
}
.tdn-article-card__divider {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--color-divider, #e0e0e0);
}
.tdn-article-card__body { font-family: var(--font-sans); }
.tdn-article-card__body p { margin-bottom: 16px; font-size: 1.1rem; line-height: 1.8; color: #334155; }
.tdn-article-card__body h2,
.tdn-article-card__body h3 { margin: 32px 0 16px; font-weight: 700; color: #0f172a; font-family: var(--font-serif); }
.tdn-article-card__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 24px 0; }
.tdn-article-card__body a { color: #2563eb; text-decoration: none; }
.tdn-article-card__body a:hover { text-decoration: underline; }

/* Attachments box */
.tdn-article-card__attachments {
	margin-top: 40px;
	padding: 24px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}
.tdn-article-card__attachments-title {
	margin: 0 0 16px;
	font-family: var(--font-sans);
	font-size: 1rem; font-weight: 700;
	color: var(--color-text-primary);
}
.tdn-article-card__attachments-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   Contact page — /contact      [SUPERSEDED — see bottom of file]
   The block below was an earlier translation. It is intentionally left in
   place as a comparison anchor; the live rules sit in the "Contact
   page — strict port from contact/page.tsx" block at the very end of
   this file, which wins on cascade order.
   ============================================================ */
/*
   Strictly ported from React's app/contact/page.tsx using the literal
   MUI sx values + this app's theme.ts overrides:
       text.primary       = #000000
       text.secondary     = #6c757d
       background.paper   = #f5f5f5
       primary.main       = #002855
       h2 family/weight   = Times New Roman / 700
       h5 family/weight   = Times New Roman / 600
   React layout (every sx prop translated literally):
       <Container maxWidth="md" sx={{ py: 8 }}>      → max-width 900px, padding 64px 0
         <Typography variant="h2" fontWeight="bold">→ font-size 3.75rem, weight 700, serif, color #000
         <Typography variant="body1" color="text.secondary">→ 1rem, #6c757d
         <Stack spacing={4} sx={{ mt: 4 }}>          → gap 32px, margin-top 32px
           <Card>                                     → bg #f5f5f5, MUI elevation 1, radius 4px
             <CardContent>                            → padding 16px (default p=16 on CardContent)
               <Typography variant="h5" fontWeight="bold">→ 1.5rem, weight 700, serif, color #000
               <Box component="form">
                 <TextField fullWidth label margin="normal">  → 56px tall, mt 16px
                   - label at rest: 1rem, rgba(0,0,0,0.6), inside box
                   - label on focus/value: 0.75rem, primary.main, notch
                 <Button variant="contained" fullWidth sx={{ mt:3, bgcolor:'opinions.main' }}>
                   → mt 24px, bg #002855, 36px tall default, white text, uppercase
           <Card> (Contact Information)               → second card stacked
   ============================================================ */

/* Container maxWidth="md" → 900px. Lift WP's 760px content cap on this page. */
.page-id-14 .tdn-page__content,
.tdn-page__content:has(.tdn-contact-wrap) { max-width: 900px !important; margin-inline: auto; }

/* <Container sx={{ py: 8 }}> → 64px top/bottom inside content area. The WP
   page wrapper already supplies its own 32px top — add the remainder so total
   matches React. */
.tdn-page:has(.tdn-contact-wrap) { padding-block: 64px; }

/* <Typography variant="h2" fontWeight="bold" gutterBottom> for "Contact Us".
   Theme: h2 serif 3.75rem weight 700, text.primary #000. gutterBottom = mb:0.35em. */
.page-id-14 .tdn-page__title,
.tdn-page:has(.tdn-contact-wrap) .tdn-page__title {
	color: #000 !important;
	font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
	font-weight: 700;
	font-size: 3.75rem;
	line-height: 1.2;
	margin: 0 0 1.3125rem;     /* 0.35em on 3.75rem */
}

.tdn-contact-wrap { width: 100%; box-sizing: border-box; padding: 0; }

/* <Typography variant="body1" color="text.secondary" paragraph> for the lede.
   body1 = 1rem regular, line-height 1.5. paragraph = mb:16px. */
.tdn-contact-wrap__lede {
	margin: 0 0 16px;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
	color: #6c757d;       /* text.secondary literal */
}

/* <Stack spacing={4} sx={{ mt: 4 }}> → gap 32px, margin-top 32px. */
.tdn-contact-wrap__stack {
	display: flex; flex-direction: column;
	gap: 32px;
	margin-top: 32px;
	width: 100%;
}

/* <Card> in this app's theme = background.paper = #f5f5f5 (NOT white).
   MUI default elevation 1 shadow + radius 4px. CardContent padding = 16px.
   Our shortcode flattens Card+CardContent into one element, so it carries
   both: 16px CardContent padding. */
.tdn-contact-card {
	width: 100%; box-sizing: border-box; display: block;
	background: #f5f5f5;       /* theme.background.paper */
	border-radius: 4px;
	padding: 16px;             /* CardContent default p */
	box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),
	            0 1px 1px 0 rgba(0,0,0,.14),
	            0 1px 3px 0 rgba(0,0,0,.12);
}
.tdn-contact-card--info { /* second Card, same defaults */ }

/* <Typography variant="h5" fontWeight="bold" gutterBottom> for "Send us a message".
   Theme h5: serif weight 600 (we use 700 because fontWeight="bold"=700 in MUI).
   variant h5 = 1.5rem, line-height 1.334. gutterBottom = mb 0.35em. */
.tdn-contact-wrap .tdn-contact-card__title,
.tdn-page__content .tdn-contact-card__title {
	margin: 0 0 0.525rem;       /* 0.35em on 1.5rem */
	font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
	font-size: 1.5rem;
	font-weight: 700;            /* React's fontWeight="bold" */
	line-height: 1.334;
	color: #000;                 /* text.primary literal */
}

/* <Button variant="contained" fullWidth sx={{ mt: 3, bgcolor: 'opinions.main' }}>
   variant=contained default height 36.5px, padding 6px 16px, font-size 0.875rem
   weight 500 uppercase. mt:3 = 24px. opinions.main = #002855. */
.tdn-contact-card__submit {
	margin-top: 24px;
	display: block;
	width: 100%;
	padding: 6px 16px;
	min-height: 36.5px;
	background: #002855;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02857em;
	cursor: pointer;
	box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),
	            0 2px 2px 0 rgba(0,0,0,.14),
	            0 1px 5px 0 rgba(0,0,0,.12);
	transition: background-color .25s ease, box-shadow .25s ease;
}
.tdn-contact-card__submit:hover { background: #00194a; }

/* <TextField variant="outlined" fullWidth label="Name" margin="normal">.
   variant=outlined → notched outline border. margin=normal = mt 16px mb 8px.
   default size → 56px tall, padding 16.5px 14px.
   label color: rgba(0,0,0,0.6) at rest → primary.main on focus or has-value. */
.tdn-field { position: relative; margin: 16px 0 8px; }
.tdn-field input,
.tdn-field textarea {
	display: block; width: 100%; box-sizing: border-box;
	padding: 16.5px 14px;
	height: 56px;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.4375em;
	color: #000;                  /* text.primary literal */
	background: transparent;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	outline: 0;
	transition: border-color .15s ease, border-width .15s ease, padding .15s ease;
}
.tdn-field textarea {
	height: auto;
	min-height: 145px;
	resize: vertical;
	padding-top: 16.5px;
	font-family: var(--font-sans);
}
.tdn-field input:hover,
.tdn-field textarea:hover { border-color: rgba(0,0,0,0.87); }
.tdn-field input:focus,
.tdn-field textarea:focus {
	border-color: #002855;
	border-width: 2px;
	padding: 15.5px 13px;
}
.tdn-field textarea:focus { padding-top: 15.5px; }

/* Hide the placeholder=" " marker — used only for :placeholder-shown logic. */
.tdn-field input::placeholder,
.tdn-field textarea::placeholder { color: transparent; }

/* Label at rest = inside the box, vertically centered, 1rem, text.secondary tint.
   Selectors are bumped to (0,2,1) so they outrank theme.css's `.tdn-form label`. */
.tdn-contact-wrap .tdn-field label,
.tdn-form--contact .tdn-field label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1;
	color: rgba(0,0,0,0.6);
	pointer-events: none;
	background: transparent;
	padding: 0;
	transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease, background-color .15s ease, padding .15s ease;
}
.tdn-contact-wrap .tdn-field--textarea label,
.tdn-form--contact .tdn-field--textarea label { top: 16.5px; transform: none; }

/* Lifted state — input is focused OR has value. */
.tdn-contact-wrap .tdn-field input:focus + label,
.tdn-contact-wrap .tdn-field input:not(:placeholder-shown) + label,
.tdn-contact-wrap .tdn-field textarea:focus + label,
.tdn-contact-wrap .tdn-field textarea:not(:placeholder-shown) + label {
	top: 0;
	transform: translateY(-50%);
	font-size: 0.75rem;
	background: #f5f5f5;             /* matches card bg → MUI notched look */
	padding: 0 4px;
	color: #002855;                  /* primary.main on focus/has-value */
}

.tdn-contact-info-row {
	display: flex; align-items: flex-start; gap: 16px;
	margin-bottom: 16px;
}
.tdn-contact-info-row:last-child { margin-bottom: 0; }
.tdn-contact-info-row__icon { color: var(--color-opinions, #002855); flex: 0 0 auto; }
.tdn-contact-info-row__label {
	margin: 0 0 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}
.tdn-contact-info-row__value {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--color-text-primary);
	line-height: 1.55;
}
.tdn-contact-info-row__value a { color: inherit; text-decoration: none; }
.tdn-contact-info-row__value a:hover { text-decoration: underline; }

.tdn-alert {
	padding: 12px 16px;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	margin-bottom: 16px;
}
.tdn-alert--success { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.tdn-alert--error   { background: #fdecea; color: #b71c1c; border: 1px solid #ef9a9a; }

/* Financial dashboard 2-col grid + panels */
.tdn-grid--8-4 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .tdn-grid--8-4 { grid-template-columns: 8fr 4fr; } }
.tdn-dash__panel {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tdn-dash__panel-title {
	margin: 0 0 8px;
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-navy, #002855);
}
.tdn-dash__panel-sub {
	margin: 0 0 16px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}
.tdn-dash__title--xl {
	font-family: var(--font-serif);
	font-size: 3rem;
	color: var(--color-navy, #002855);
	margin: 0 0 32px;
}
.tdn-dash__coming-soon {
	height: 150px;
	background: #f1f5f9;
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: #94a3b8;
	letter-spacing: 0.1em;
}

/* (duplicate width-fix block removed — handled in the main Contact block above.) */

/* ============================================================
   Contact page — strict port from contact/page.tsx
   Read app/contact/page.tsx end to end. Every value below is a literal
   translation from a JSX prop, an sx={{}} key, or a theme.ts override.
   Reference: visual-qa/MUI_TRANSLATION_REFERENCE.md
   theme.ts overrides used:
     text.primary       = #000
     text.secondary     = #6c757d
     background.paper   = #f5f5f5
     primary.main       = #002855
     opinions.main      = #002855
     h2/h3/h4/h5/h6     = Times New Roman serif; h1/h2 weight 700, rest 600
   ============================================================ */

/* React: <Container maxWidth="md" sx={{ py: 8 }}>
   maxWidth=md → 900px. py:8 → padding-top + padding-bottom 64px.
   Container also has horizontal padding 16px (default).
   The WP page wrapper provides outer body padding; this rule lifts the
   inner content width to 900px and applies React's 64px vertical pad. */
.page-id-14 .tdn-page__content,
.tdn-page__content:has(.tdn-contact) {
	max-width: 900px !important;
	margin-inline: auto;
	padding: 0 16px;
}
.tdn-page:has(.tdn-contact) { padding-block: 64px; }

/* React: <Typography variant="h2" fontWeight="bold" gutterBottom>Contact Us</Typography>
   theme.h2 = Times New Roman, weight 700.
   MUI default h2 = font-size 3.75rem, line-height 1.2.
   gutterBottom = margin-bottom 0.35em (→ 1.3125rem here).
   Selector is double-classed so it beats theme.css's .tdn-page__content h2. */
.tdn-page__content .tdn-contact__title,
.tdn-contact .tdn-contact__title {
	margin: 0 0 1.3125rem !important;
	font-family: var(--font-serif) !important;   /* theme.h2 (no sx fontFamily override) */
	font-weight: 700 !important;
	font-size: 3.75rem !important;
	line-height: 1.2 !important;
	color: #000 !important;
}

/* React: <Typography variant="body1" color="text.secondary" paragraph>
   body1 = 1rem regular, line-height 1.5.  paragraph = margin-bottom 16px.
   color="text.secondary" = #6c757d (theme.ts override). */
.tdn-contact .tdn-contact__lede {
	margin: 0 0 16px;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
	color: #6c757d;
}

/* React: <Stack spacing={4} sx={{ mt: 4 }}>
   Stack default direction=column. spacing=4 → gap 32px. mt:4 → margin-top 32px. */
.tdn-contact .tdn-contact__stack {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 32px;
}

/* React: <Card>
   MUI <Card> = <Paper elevation={1}>. background = theme.background.paper.
   theme override: background.paper = #f5f5f5.
   border-radius: 4px (MUI default shape.borderRadius).
   elevation=1 → box-shadow:
     0 2px 1px -1px rgba(0,0,0,0.2),
     0 1px 1px 0 rgba(0,0,0,0.14),
     0 1px 3px 0 rgba(0,0,0,0.12) */
.tdn-contact .tdn-contact-card {
	background: #f5f5f5;
	border-radius: 4px;
	box-shadow:
		0 2px 1px -1px rgba(0,0,0,0.2),
		0 1px 1px 0   rgba(0,0,0,0.14),
		0 1px 3px 0   rgba(0,0,0,0.12);
	color: #000;
}

/* React: <CardContent>
   MUI default CardContent = padding 16px; last child padding-bottom 24px. */
.tdn-contact .tdn-contact-card__content {
	padding: 16px;
}
.tdn-contact .tdn-contact-card__content:last-child {
	padding-bottom: 24px;
}

/* React: <Typography variant="h5" fontWeight="bold" gutterBottom>Send us a message
   theme.h5 = Times New Roman, weight 600. fontWeight="bold" → 700 (overrides theme).
   MUI default h5 = 1.5rem, line-height 1.334.
   gutterBottom = mb 0.35em (= 0.525rem). color = text.primary = #000. */
.tdn-contact .tdn-contact-card__title {
	margin: 0 0 0.525rem !important;
	font-family: var(--font-serif) !important;   /* theme.h5 (no sx fontFamily override) */
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	line-height: 1.334 !important;
	color: #000 !important;
}

/* React: {success && <Alert severity="success" sx={{ mb: 2 }}>...</Alert>}
   MUI Alert severity=success default → bg light-green, color dark-green.
   sx mb:2 = margin-bottom 16px. */
.tdn-contact .tdn-alert {
	margin: 0 0 16px;
	padding: 6px 16px;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.43;
}
.tdn-contact .tdn-alert--success {
	background: rgb(237, 247, 237);
	color: rgb(30, 70, 32);
}

/* React: <TextField fullWidth label="..." required margin="normal" />
   variant=outlined (default). size=medium → input 56px tall.
   margin="normal" → margin-top 16px, margin-bottom 8px.
   Input padding 16.5px 14px. border 1px solid rgba(0,0,0,0.23) at rest,
   border 2px solid primary.main (#002855) on focus.
   The label sits centered inside the box at rest. On focus or has-value
   it lifts to the top border notch, shrinks to 0.75rem, color primary.main. */
.tdn-contact .tdn-field {
	position: relative;
	margin: 16px 0 8px;
}
.tdn-contact .tdn-field input,
.tdn-contact .tdn-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16.5px 14px;
	height: 56px;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.4375em;
	color: #000;
	background: transparent;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	outline: 0;
	transition: border-color .15s ease, border-width .15s ease, padding .15s ease;
}
.tdn-contact .tdn-field textarea {
	height: auto;
	min-height: 138px;          /* rows=6 × line-height 1.4375em × 16px = 138 exact */
	padding-top: 16.5px;
	font-family: var(--font-sans);
	resize: vertical;
}
.tdn-contact .tdn-field input:hover,
.tdn-contact .tdn-field textarea:hover {
	border-color: rgba(0,0,0,0.87);
}
.tdn-contact .tdn-field input:focus,
.tdn-contact .tdn-field textarea:focus {
	border-color: #002855;
	border-width: 2px;
	padding: 15.5px 13px;
}
.tdn-contact .tdn-field textarea:focus { padding-top: 15.5px; }
.tdn-contact .tdn-field input::placeholder,
.tdn-contact .tdn-field textarea::placeholder { color: transparent; }

/* Label at rest: inside the box, vertically centered, regular size.
   Bumped specificity (.tdn-contact .tdn-field label = 0,3,1) so it beats
   theme.css's .tdn-form label (0,1,1). */
.tdn-contact .tdn-field label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1;
	color: rgba(0,0,0,0.6);
	pointer-events: none;
	background: transparent;
	padding: 0;
	transition: top .15s ease, transform .15s ease, font-size .15s ease,
	            color .15s ease, background-color .15s ease, padding .15s ease;
}
.tdn-contact .tdn-field--textarea label { top: 16.5px; transform: none; }

/* Lifted: input is focused OR has value (placeholder=" " trick).
   font-size shrinks to 0.75rem, sits on the top border at left:14px, color
   becomes primary.main. The label's background matches the card's
   background (#f5f5f5) so it looks like a notched outline. */
.tdn-contact .tdn-field input:focus + label,
.tdn-contact .tdn-field input:not(:placeholder-shown) + label,
.tdn-contact .tdn-field textarea:focus + label,
.tdn-contact .tdn-field textarea:not(:placeholder-shown) + label {
	top: 0;
	transform: translateY(-50%);
	font-size: 0.75rem;
	background: #f5f5f5;
	padding: 0 4px;
	color: #002855;
}

/* React: <Button variant="contained" fullWidth disabled={loading}
            sx={{mt:3, bgcolor:'opinions.main', '&:hover':{bgcolor:'opinions.dark'}}}>
   variant=contained medium → padding 6px 16px, min-height 36.5px.
   font-size 0.875rem, weight 500, uppercase, letter-spacing 0.02857em.
   border-radius 4px. fullWidth → width 100%.
   mt:3 = margin-top 24px.
   bgcolor='opinions.main' = #002855. */
.tdn-contact .tdn-contact-card__submit {
	display: block;
	width: 100%;
	margin-top: 24px;
	padding: 6px 16px;
	min-height: 36.5px;
	background: #002855;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow:
		0 3px 1px -2px rgba(0,0,0,0.2),
		0 2px 2px 0   rgba(0,0,0,0.14),
		0 1px 5px 0   rgba(0,0,0,0.12);
	transition: background-color .25s ease, box-shadow .25s ease;
}
.tdn-contact .tdn-contact-card__submit:hover { background: #00194a; }

/* React inside the Contact Information card:
   <Stack spacing={2} sx={{ mt: 2 }}>
     <Box display="flex" alignItems="center">
       <EmailIcon sx={{ mr: 2, color: 'opinions.main' }} />
       <Box> ... </Box>
   spacing=2 → gap 16px. mt:2 → margin-top 16px.
   icon mr:2 → margin-right 16px. icon color = opinions.main = #002855. */
.tdn-contact .tdn-contact-info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}
.tdn-contact .tdn-contact-info__row {
	display: flex;
	align-items: center;
}
.tdn-contact .tdn-contact-info__icon {
	flex: 0 0 auto;
	width: 24px; height: 24px;       /* MuiSvgIcon fontSize=medium = 1.5rem (24px) */
	margin-right: 16px;
	fill: #002855;                    /* opinions.main */
}

/* <Typography variant="body2" color="text.secondary">Email/Address</Typography>
   body2 = 0.875rem regular. text.secondary = #6c757d. */
.tdn-contact .tdn-contact-info__label {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.43;
	color: #6c757d;
}
/* <Typography variant="body1">…</Typography>
   body1 = 1rem regular. inline anchor has style={{color:'inherit'}} → also #000. */
.tdn-contact .tdn-contact-info__value {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
	color: #000;
}
.tdn-contact .tdn-contact-info__value a {
	color: inherit;
	text-decoration: none;
}
.tdn-contact .tdn-contact-info__value a:hover { text-decoration: underline; }

/* Phone-narrow tweak — React Container shrinks via theme breakpoints but
   the only visible change is the h2 size. Keep it consistent. */
@media (max-width: 600px) {
	.tdn-page__content .tdn-contact__title,
	.tdn-contact .tdn-contact__title { font-size: 2.5rem !important; }
}

/* ============================================================
   About page — strict port from app/about/page.tsx
   Read end-to-end. Every value below is a literal translation
   of a JSX prop, sx={{}} key, or theme.ts override.
   ============================================================ */

/* React: outer <Box sx={{ minHeight:'100vh', pb:10 }}>
   pb:10 → padding-bottom 80px. Hosted inside .tdn-page which already
   gives bottom padding; we add the remainder via a :has() guard. */
.tdn-page:has(.tdn-about-hero) { padding-block: 0 80px; }

/* React: <Box sx={{bgcolor:'#002855', color:'white', py:8, mb:6, textAlign:'center'}}>
   bgcolor literal #002855. py:8 = padding 64px top/bottom.
   mb:6 = margin-bottom 48px. textAlign center. */
.tdn-about-hero {
	background: #002855;
	color: #fff;
	padding: 64px 0;
	margin: 0 0 48px;
	text-align: center;
}
.tdn-about-hero__inner {
	/* React: <Container maxWidth="md"> = 900px centered with 16px h-padding */
	max-width: 900px;
	margin: 0 auto;
	padding: 0 16px;
}

/* React: <Typography variant="h2" sx={{fontFamily:'Georgia, serif', fontWeight:'bold', mb:2}}>About The Directory
   variant=h2 → font-size 3.75rem, line-height 1.2.
   fontFamily literal "Georgia, serif". fontWeight 700.
   mb:2 → margin-bottom 16px.  color inherits #fff from hero. */
/* Specificity bumped to beat theme.css `.tdn-page__content h2 { color: navy }`. */
.tdn-page__content .tdn-about-hero__title,
.tdn-about-hero .tdn-about-hero__title {
	margin: 0 0 16px !important;
	font-family: Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 3.75rem !important;
	line-height: 1.2 !important;
	color: #fff !important;
}

/* React: <Typography variant="h6" sx={{fontFamily:'var(--font-sans)', fontWeight:'normal', opacity:0.9}}> */
.tdn-page__content .tdn-about-hero__sub,
.tdn-about-hero .tdn-about-hero__sub {
	margin: 0 !important;
	font-family: var(--font-sans) !important;
	font-weight: 400 !important;
	font-size: 1.25rem !important;
	line-height: 1.6 !important;
	color: #fff !important;
	opacity: 0.9;
}

/* React: <Container maxWidth="md"><Stack spacing={6}>
   maxWidth=md → 900px. spacing 6 → gap 48px. */
.tdn-about {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 16px;
}
.tdn-about__stack {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* React: <Divider /> — MUI default border-bottom 1px solid rgba(0,0,0,0.12). */
.tdn-about__divider {
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(0,0,0,0.12);
}

/* React (each block): <Box>...</Box> — just a div */
.tdn-about-block { margin: 0; }

/* React: <Typography variant="h4" sx={{fontFamily:'Georgia, serif', fontWeight:'bold', mb:2, color:'#0f172a'}}>
   variant=h4 = font-size 2.125rem, line-height 1.235.
   mb:2 = 16px. literal color #0f172a. (Same for The Bullpen and Our Supporters,
   except Bullpen uses mb:1 = 8px.) */
.tdn-about-block__title {
	margin: 0 0 16px !important;       /* beats theme.css .tdn-page__content h2 */
	font-family: Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 2.125rem !important;
	line-height: 1.235 !important;
	color: #0f172a !important;
}
/* Bullpen specifically has mb:1 on its title (8px), then a separate body1 lede. */
#bullpen .tdn-about-block__title { margin-bottom: 8px !important; }

/* React: <Typography variant="body1" sx={{fontSize:'1.1rem', lineHeight:1.8, color:'#334155', whiteSpace:'pre-line'}}>
   Mission and Supporters intro use these literal values.
   Bullpen lede uses just color:'#64748b'. */
.tdn-about-block__body {
	margin: 0 0 16px;
	font-family: var(--font-sans);
	font-size: 1.1rem;
	line-height: 1.8;
	color: #334155;
}
.tdn-about-block__body:last-child { margin-bottom: 0; }
.tdn-about-block__body strong {
	font-weight: 700;
	color: #0f172a;
}

/* React Bullpen lede: <Typography variant="body1" sx={{mb:4, color:'#64748b'}}>
   mb:4 = 32px. */
#bullpen .tdn-about-block__lede,
.tdn-about-block__lede {
	margin: 0 0 32px;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.5;
	color: #64748b;
}

/* React: Bullpen <Grid container spacing={3}> with Cards xs=12 sm=6 md=4
   spacing 3 = 24px gap. */
.tdn-bullpen-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 600px) {
	.tdn-bullpen-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
	.tdn-bullpen-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* React: <Card sx={{height:'100%', borderRadius:2, '&:hover':{boxShadow:4, transition:'0.2s'}}}>
   borderRadius 2 = 8px. <Card>=<Paper elevation=1>. bg = theme.background.paper (#f5f5f5).
   Hover boxShadow=4: MUI elevation 4. */
.tdn-bullpen-card {
	height: 100%;
	background: #f5f5f5;
	border-radius: 8px;
	box-shadow:
		0 2px 1px -1px rgba(0,0,0,0.2),
		0 1px 1px 0   rgba(0,0,0,0.14),
		0 1px 3px 0   rgba(0,0,0,0.12);
	transition: box-shadow .2s ease;
}
.tdn-bullpen-card:hover {
	box-shadow:
		0 2px 4px -1px rgba(0,0,0,0.2),
		0 4px 5px 0   rgba(0,0,0,0.14),
		0 1px 10px 0  rgba(0,0,0,0.12);
}

/* React: <CardContent sx={{display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', p:3}}>
   p:3 = padding 24px. flex column centered. */
.tdn-bullpen-card__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px;
}

/* React: <Avatar sx={{width:100, height:100, mb:2, border:'2px solid #e2e8f0'}}>
   100x100, mb:2 = 16px, border 2px solid #e2e8f0. No bgcolor sx prop, so
   MUI Avatar defaults apply when no src:
     background: #bdbdbd
     color: #fff
     font: var(--font-sans), 1.25rem
   Plus border-radius 50% (round). */
.tdn-bullpen-card__avatar {
	width: 100px;
	height: 100px;
	margin-bottom: 16px;
	border-radius: 50%;
	border: 2px solid #e2e8f0;
	overflow: hidden;
	background: #bdbdbd;           /* MUI Avatar default (drift fix) */
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 1.25rem;
}
.tdn-bullpen-card__avatar img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* React: <Link href={`/writer/${id}`}><Typography variant="h6" sx={{fontFamily:'Georgia, serif', fontWeight:'bold', color:'#002855', '&:hover':{textDecoration:'underline'}}}>
   variant=h6 → font-size 1.25rem, line-height 1.6, weight 500 (overridden to 700).
   color literal #002855. */
.tdn-bullpen-card__name {
	margin: 0;
	font-family: Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.6;
	color: #002855;
	text-decoration: none;
}
.tdn-bullpen-card__name:hover { text-decoration: underline; }

/* React: <Typography variant="caption" sx={{color:'#a42a38', fontWeight:'bold', letterSpacing:1, mt:0.5, textTransform:'uppercase'}}>
   variant=caption → font-size 0.75rem, line-height 1.66.
   color #a42a38. letterSpacing 1 = MUI px (1px). mt:0.5 = 4px. uppercase. */
.tdn-bullpen-card__role {
	margin: 4px 0 0;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	line-height: 1.66;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #a42a38;
}

/* React: <Paper variant="outlined" sx={{p:4, bgcolor:'#f8fafc', borderRadius:2}}>
   variant=outlined → border 1px solid rgba(0,0,0,0.12), no shadow.
   p:4 = padding 32px. bg literal #f8fafc. borderRadius 2 = 8px. */
.tdn-about-supporters {
	padding: 32px;
	background: #f8fafc;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 8px;
}

/* React: <Grid container spacing={2}> with body1 Georgia-bold-navy items xs=12 sm=6 md=4
   spacing 2 = 16px gap. */
.tdn-about-supporters__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 600px) { .tdn-about-supporters__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .tdn-about-supporters__grid { grid-template-columns: 1fr 1fr 1fr; } }

/* React: <Typography variant="body1" sx={{fontFamily:'Georgia, serif', fontWeight:'bold', color:'#002855'}}> */
.tdn-about-supporters__name {
	margin: 0;
	font-family: Georgia, serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5;
	color: #002855;
}

/* React: <Box sx={{mt:4, textAlign:'center'}}>
            <Typography variant="body2" color="text.secondary" sx={{fontStyle:'italic'}}>
   mt:4 = 32px. variant=body2 → 0.875rem. text.secondary = #6c757d (theme).
   Inline Link color #a42a38. */
.tdn-about-supporters__note {
	margin: 32px 0 0;
	text-align: center;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.43;
	color: #6c757d;
	font-style: italic;
}
.tdn-about-supporters__note a {
	color: #a42a38;
	text-decoration: underline;
}

/* Phone-narrow tightening (React h2 default media query at <600px = 2.4rem) */
@media (max-width: 600px) {
	.tdn-about-hero__title { font-size: 2.4rem; }
	.tdn-about-block__title { font-size: 1.75rem !important; }
}

/* Lift the WP wrappers' max-width AND horizontal padding on About so the
   navy hero can run edge-to-edge.  `.tdn-container { padding: 0 16px }` was
   pinching the hero by 16px on each side. */
.page-id-13 .tdn-container,
.tdn-container:has(.tdn-about-hero) {
	padding: 0 !important;
	max-width: 100% !important;
}
.page-id-13 .tdn-page__content,
.tdn-page__content:has(.tdn-about-hero) {
	max-width: 100% !important;
	padding: 0;
}
.page-id-13 .tdn-page,
.tdn-page:has(.tdn-about-hero) {
	padding-block: 0 80px;
}

/* ============================================================
   Privacy page — strict port from app/privacy/page.tsx
   Outer Box: width 100%, bgcolor white, py:8 → 64px top/bottom.
   Container maxWidth=md → 900px.
   ============================================================ */

/* Suppress the WP page H1 + widen content area for /privacy. */
.tdn-page__content:has(.tdn-privacy) {
	max-width: 100% !important;
	padding: 0;
}
.tdn-page:has(.tdn-privacy) {
	padding-block: 64px;
}

.tdn-privacy {
	width: 100%;
	background: #fff;
}
.tdn-privacy__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 16px;
}

/* React: <Typography variant="h2" component="h1" sx={{fontFamily:'Georgia, serif', fontWeight:'bold', color:'#002855', mb:4, textAlign:'center'}}>
   variant=h2 = font-size 3.75rem, line-height 1.2.
   mb:4 = 32px. color literal #002855 (navy). textAlign center. */
.tdn-page__content .tdn-privacy__title,
.tdn-privacy .tdn-privacy__title {
	margin: 0 0 32px !important;
	font-family: Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 3.75rem !important;
	line-height: 1.2 !important;
	color: #002855 !important;
	text-align: center;
}

/* React: <Typography variant="body1" sx={{fontFamily:'var(--font-serif)', fontSize:'1.1rem', lineHeight:1.8, color:'#333', mb:6, textAlign:'center'}}>Effective Date: ...
   mb:6 = 48px. color literal #333. */
.tdn-privacy .tdn-privacy__effective {
	margin: 0 0 48px;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.1rem;
	line-height: 1.8;
	color: #333;
	text-align: center;
}

/* React: <Stack spacing={4}> → gap 32px. */
.tdn-privacy__stack {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* React: <Divider /> = 1px solid rgba(0,0,0,0.12). */
.tdn-privacy__divider {
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(0,0,0,0.12);
}

.tdn-privacy-section { margin: 0; }

/* React: <Typography variant="h5" component="h2" sx={{fontFamily:'var(--font-sans)', fontWeight:'bold', color:'#002855', mb:2}}>
   variant=h5 = 1.5rem, line-height 1.334.
   fontFamily sans (overrides theme.h5 serif default).
   fontWeight bold (700). color literal #002855. mb:2 = 16px. */
.tdn-page__content .tdn-privacy-section__title,
.tdn-privacy .tdn-privacy-section__title {
	margin: 0 0 16px !important;
	font-family: var(--font-sans) !important;
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	line-height: 1.334 !important;
	color: #002855 !important;
}

/* React: <Typography variant="body1" sx={{fontFamily:'var(--font-serif)', fontSize:'1.1rem', lineHeight:1.8, color:'#444', mb:2}}> */
.tdn-privacy .tdn-privacy-section__body {
	margin: 0;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.1rem;
	line-height: 1.8;
	color: #444;
}

/* Phone-narrow: shrink the h2 like MUI's responsive defaults. */
@media (max-width: 600px) {
	.tdn-privacy .tdn-privacy__title,
	.tdn-page__content .tdn-privacy__title { font-size: 2.4rem !important; }
}

/* ============================================================
   /write-for-us — strict port from app/write-for-us/page.tsx
   ============================================================ */

/* Outer Container maxWidth="md" sx={{py:8}} → max 900px, 64px top/bottom */
.tdn-page__content:has(.tdn-write) { max-width: 100% !important; padding: 0; }
.tdn-page:has(.tdn-write) { padding-block: 64px; }

.tdn-write {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 16px;
}
.tdn-write--success {
	max-width: 600px; /* React uses maxWidth="sm" = 600px on the success branch */
}

/* SUCCESS branch -----------------------------------------------------------
 *   <Paper elevation={3} sx={{ p:6, textAlign:'center', borderRadius:4 }}>
 *     <Typography variant="h3" sx={{fontWeight:900, color:'#002855', mb:2}}>
 *     <Typography variant="h6" sx={{mb:4, color:'#555'}}>
 *     <Button variant="contained" href="/" sx={{bgcolor:'#002855'}}>
 * --------------------------------------------------------------------------- */
.tdn-write-success__card {
	padding: 48px;             /* p:6 */
	text-align: center;
	border-radius: 16px;       /* borderRadius:4 = 4*4 */
	background: #f5f5f5;       /* MUI Paper background.paper override */
	box-shadow:
		0 3px 3px -2px rgba(0,0,0,0.2),
		0 3px 4px 0   rgba(0,0,0,0.14),
		0 1px 8px 0   rgba(0,0,0,0.12);  /* MUI elevation 3 */
}
.tdn-page__content .tdn-write-success__title,
.tdn-write-success__title {
	margin: 0 0 16px !important;
	font-family: var(--font-serif) !important;   /* theme.h3 (no sx fontFamily override) */
	font-weight: 900 !important;
	font-size: 3rem !important;                  /* MUI h3 */
	line-height: 1.167 !important;
	color: #002855 !important;
}
.tdn-write-success__lede {
	margin: 0 0 32px;
	font-family: var(--font-serif);              /* theme.h6 (no sx fontFamily override) */
	font-size: 1.25rem;                          /* MUI h6 */
	line-height: 1.6;
	color: #555;
}
.tdn-write-success__btn {
	display: inline-block;
	background: #002855;
	color: #fff;
	padding: 6px 16px;
	min-height: 36.5px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	box-shadow:
		0 3px 1px -2px rgba(0,0,0,0.2),
		0 2px 2px 0   rgba(0,0,0,0.14),
		0 1px 5px 0   rgba(0,0,0,0.12);
}

/* DEFAULT branch ------------------------------------------------------------
 *   <Box mb:6 textAlign:center>
 *     <Typography overline letterSpacing:2 fontWeight:bold color:#a42a38>THE MERIT SHARE
 *     <Typography h2 fontWeight:900 color:#002855 mb:1>Join the Ranks
 *     <Typography h6 maxWidth:600 mx:auto color:#666 Georgia italic>{lede}
 *   <Paper elevation=0 p:{xs:3, md:5} border 1px solid #e0e0e0 borderRadius:2>
 *     <form><Stack spacing={4}>...
 * --------------------------------------------------------------------------- */
.tdn-write__header {
	margin: 0 0 48px;
	text-align: center;
}

/* Typography variant=overline → font-size 0.75rem, line-height 2.66,
   uppercase by default, weight 400 (overridden to bold).  letterSpacing:2 = 2px. */
.tdn-write__overline {
	margin: 0 0 8px;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 2.66;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #a42a38;
}

/* Typography variant=h2 (no fontFamily sx) → inherits theme.h2 = var(--font-serif).
   fontWeight:900 color:#002855 mb:1 = 8px. */
.tdn-page__content .tdn-write__title,
.tdn-write__title {
	margin: 0 0 8px !important;
	font-family: var(--font-serif) !important;   /* theme.h2 (no sx override) */
	font-weight: 900 !important;
	font-size: 3.75rem !important;
	line-height: 1.2 !important;
	color: #002855 !important;
}

/* Typography variant=h6 maxWidth:600 mx:auto Georgia italic color:#666 */
.tdn-write__lede {
	max-width: 600px;
	margin: 0 auto;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.6;
	color: #666;
}

/* <Paper elevation={0} sx={{p:{xs:3, md:5}, border:'1px solid #e0e0e0', borderRadius:2}}>
   elevation 0 = no shadow. border literal. borderRadius 2 = 8px.
   p:{xs:3, md:5} = 24px mobile, 40px desktop. */
.tdn-write-paper {
	background: #f5f5f5;     /* MUI Paper background.paper override */
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 24px;
}
@media (min-width: 900px) {
	.tdn-write-paper { padding: 40px; }
}

/* <Stack spacing={4}> = gap 32px */
.tdn-write__stack {
	display: flex; flex-direction: column;
	gap: 32px;
}

.tdn-write-block { margin: 0; }

/* Section title — <Typography variant=h6 fontWeight:bold color:#002855 mb:1>
   variant h6 (no sx fontFamily) → inherits theme.h6 = var(--font-serif).
   = 1.25rem, line-height 1.6.  mb:1 = 8px. */
.tdn-page__content .tdn-write-block__title,
.tdn-write-block__title {
	margin: 0 0 8px !important;
	font-family: var(--font-serif) !important;   /* theme.h6 (no sx override) */
	font-weight: 700 !important;
	font-size: 1.25rem !important;
	line-height: 1.6 !important;
	color: #002855 !important;
}

/* <Typography variant=body2 mb:2 color:#666> */
.tdn-write-block__hint {
	margin: 0 0 16px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.43;
	color: #666;
}

/* Inner <Stack spacing={3}> = gap 24px */
.tdn-write-block__stack {
	display: flex; flex-direction: column;
	gap: 24px;
}

/* <Stack direction={{xs:'column', md:'row'}} spacing={2}> = gap 16px, side-by-side on md */
.tdn-write-row {
	display: flex; flex-direction: column;
	gap: 16px;
}
@media (min-width: 900px) {
	.tdn-write-row { flex-direction: row; }
	.tdn-write-row > * { flex: 1 1 0; }
}

/* TextField outlined — same MUI defaults as /contact (lifted-label, notched). */
.tdn-write-field { position: relative; }
.tdn-write-field input,
.tdn-write-field textarea,
.tdn-write-field select {
	display: block; width: 100%; box-sizing: border-box;
	padding: 16.5px 14px;
	height: 56px;
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.4375em;
	color: #000;
	background: transparent;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	outline: 0;
	transition: border-color .15s ease, border-width .15s ease, padding .15s ease;
}
.tdn-write-field textarea {
	height: auto;
	min-height: 68px;
	padding-top: 16.5px;
	resize: vertical;
}
.tdn-write-field--xl textarea {
	font-size: 1.2rem;
	min-height: 80px;
}
/* <select> dropdown — strip native styling so it picks up the same MUI-style
   outlined-input look as the inputs. Custom chevron via inline SVG bg image. */
.tdn-write-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;                          /* room for chevron */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(0,0,0,0.54)'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 24px;
	cursor: pointer;
}
.tdn-write-field select::-ms-expand { display: none; }
.tdn-write-field input:hover,
.tdn-write-field textarea:hover,
.tdn-write-field select:hover { border-color: rgba(0,0,0,0.87); }
.tdn-write-field input:focus,
.tdn-write-field textarea:focus,
.tdn-write-field select:focus {
	border-color: #002855;
	border-width: 2px;
	padding: 15.5px 13px;
}
.tdn-write-field select:focus { padding-right: 39px; }
.tdn-write-field textarea:focus { padding-top: 15.5px; }
.tdn-write-field input::placeholder,
.tdn-write-field textarea::placeholder { color: rgba(0,0,0,0.42); }

/* Lifted-label CSS. Two states:
   (a) AT REST  → label sits inside the input, centered vertically (mid).
                  Triggered when input is empty AND placeholder is " " (single
                  space — kept invisible).
   (b) LIFTED   → label sits notched on the top border at 0.75rem font, navy.
                  Triggered when:
                    - input is focused, OR
                    - input has a value (`:not(:placeholder-shown)`), OR
                    - input has a REAL placeholder (placeholder NOT equal to " "),
                      because MUI lifts the label whenever a placeholder is
                      visible alongside it. Detected via attribute selector
                      `[placeholder]:not([placeholder=" "])`. */
.tdn-write-paper .tdn-write-field label {
	position: absolute;
	left: 14px;
	top: 28px;                        /* half of input height 56px — anchors to
	                                     input center, not parent center, so the
	                                     helper text under "Writing Sample Link"
	                                     doesn't push the label below the input. */
	transform: translateY(-50%);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1;
	color: rgba(0,0,0,0.6);
	pointer-events: none;
	background: transparent;
	padding: 0;
	transition: top .15s ease, transform .15s ease, font-size .15s ease, color .15s ease, background-color .15s ease, padding .15s ease;
}
.tdn-write-paper .tdn-write-field textarea ~ label { top: 16.5px; transform: none; }
/* Lifted state */
.tdn-write-paper .tdn-write-field--select label,
.tdn-write-paper .tdn-write-field input:focus + label,
.tdn-write-paper .tdn-write-field input:not(:placeholder-shown) + label,
.tdn-write-paper .tdn-write-field input[placeholder]:not([placeholder=" "]) + label,
.tdn-write-paper .tdn-write-field textarea:focus ~ label,
.tdn-write-paper .tdn-write-field textarea:not(:placeholder-shown) ~ label,
.tdn-write-paper .tdn-write-field textarea[placeholder]:not([placeholder=" "]) ~ label,
.tdn-write-paper .tdn-write-field select ~ label {
	top: 0 !important;
	transform: translateY(-50%) !important;
	font-size: 0.75rem !important;
	background: #f5f5f5 !important;
	padding: 0 4px !important;
	color: #002855 !important;
}

/* Helper text — <TextField helperText="..."> default body2-ish */
.tdn-write-field__helper {
	margin: 3px 14px 0;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	line-height: 1.66;
	color: rgba(0,0,0,0.6);
}

/* Submit button — <Button variant="contained" size="large" sx={{bgcolor:'#002855', py:2, fontWeight:'bold', fontSize:'1.1rem'}}>
   React's enclosing <Stack spacing={4}> is a flex column (no align-items
   override). The default `align-items: stretch` on a column flex container
   stretches inline-flex Buttons to fill the cross axis → the button
   renders FULL-WIDTH visually even without `fullWidth` prop.
   MUI size=large defaults: padding 8px 22px (y overridden by py:2 → 16px),
   line-height 1.75, min-height ~42px.  background literal #002855. */
.tdn-write__submit {
	display: block;
	width: 100%;
	background: #002855;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 16px 22px;            /* py:2 → 16px; px = MUI size=large default */
	font-family: var(--font-sans);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.02857em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow:
		0 3px 1px -2px rgba(0,0,0,0.2),
		0 2px 2px 0   rgba(0,0,0,0.14),
		0 1px 5px 0   rgba(0,0,0,0.12);
	transition: background-color .25s ease, box-shadow .25s ease;
}
.tdn-write__submit:hover { background: #001e3d; }

/* Phone-narrow tightening */
@media (max-width: 600px) {
	.tdn-write__title { font-size: 2.4rem !important; }
	.tdn-write-success__title { font-size: 2rem !important; }
}

/* ============================================================
   /shop — strict port from app/shop/page.tsx
   React: outer Box width:100% minHeight:100vh bgcolor:#f8fafc pb:8
            Hero Box bgcolor:#002855 white py:{xs:8, md:12} center
              Container md
                Typography h2 Georgia bold mb:2 letterSpacing:-1px
                Typography h6 var(--font-sans) normal opacity:0.9
            Container lg mt:-6
              Grid container spacing:4
                Card height:100% flex col borderRadius:3 hover translateY(-4px)
                  Box paddingTop:100% (1:1 aspect)  →  <img absolute cover>
                  CardContent flex col p:3 flexGrow:1
                    h6 var(--font-sans) bold #002855 mb:1 line-height:1.2  ← name
                    body2 text.secondary mb:2 flexGrow:1                    ← description
                    Box flex space-between center mt:auto
                      h6 Georgia bold #a42a38                                ← price
                      Button outlined facts.main borderWidth:2 borderRadius:20 fontWeight:bold textTransform:none
   ============================================================ */
.tdn-shop {
	background: #f8fafc;
	min-height: 100vh;
	padding-bottom: 64px;
}

/* Hero — navy banner */
.tdn-shop-hero {
	background: #002855;
	color: #fff;
	padding: 64px 0;                  /* py:8 mobile, override 96px at md */
	text-align: center;
}
@media (min-width: 900px) {
	.tdn-shop-hero { padding: 96px 0; }   /* py:12 at md */
}
.tdn-shop-hero__inner {
	max-width: 900px;                  /* Container maxWidth=md */
	margin: 0 auto;
	padding: 0 16px;
}
.tdn-page__content .tdn-shop-hero__title,
.tdn-shop-hero__title {
	margin: 0 0 16px !important;
	font-family: Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 3.75rem !important;     /* h2 */
	line-height: 1.2 !important;
	letter-spacing: -1px !important;
	color: #fff !important;
}
.tdn-shop-hero__lede {
	margin: 0 auto;
	max-width: 600px;
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 1.25rem;                /* h6 */
	line-height: 1.6;
	color: #fff;
	opacity: 0.9;
}

/* Grid wrap — Container maxWidth="lg" sx={{mt:-6}} = 1200px, lift -48px to overlap hero */
.tdn-shop__grid-wrap {
	max-width: 1200px;
	margin: -48px auto 0;
	padding: 0 16px;
	position: relative;
	z-index: 1;
}
.tdn-shop__main { width: 100%; }

/* Hide WC's stock breadcrumbs / result count / orderby on shop page — React
   renders just the product grid here. */
.tdn-shop .woocommerce-breadcrumb,
.tdn-shop .woocommerce-result-count,
.tdn-shop .woocommerce-ordering,
.tdn-shop .woocommerce-notices-wrapper:empty { display: none; }

/* Product loop — using our template override at
   theme/woocommerce/content-product.php (one <.tdn-shop-product> per <li>).
   WooCommerce's bundled CSS uses `float:left; width:22.05%` on .product when
   the list has class .columns-4. That fights our grid layout — we use
   !important to make the grid win on every column declaration. */
.tdn-shop .products,
.tdn-shop ul.products,
.tdn-shop .woocommerce ul.products {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 32px !important;
	clear: both;
}
@media (min-width: 600px) {
	.tdn-shop .products,
	.tdn-shop ul.products,
	.tdn-shop .woocommerce ul.products { grid-template-columns: 1fr 1fr !important; }
}
@media (min-width: 900px) {
	.tdn-shop .products,
	.tdn-shop ul.products,
	.tdn-shop .woocommerce ul.products { grid-template-columns: 1fr 1fr 1fr !important; }
}
.tdn-shop .products .product,
.tdn-shop ul.products li.product,
.tdn-shop .woocommerce ul.products li.product {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;          /* override .columns-4 li { width: 22.05% } */
	float: none !important;          /* override WC default float layout */
	clear: none !important;
	list-style: none !important;
}
/* WC sometimes wraps the loop in <header.woocommerce-products-header> with
   its own <h1>. Belt-and-suspenders: hide the header entirely on /shop —
   the React hero we render above already provides the title. */
.tdn-shop .woocommerce-products-header,
.tdn-shop header.woocommerce-products-header { display: none !important; }

/* WooCommerce's bundled CSS adds a clearfix to `<ul.products>`:
     .woocommerce ul.products::before,
     .woocommerce ul.products::after { content: ""; display: table; }
   In a CSS Grid context, those pseudo-elements ACT AS GRID ITEMS, eating
   the first and last cell — pushing every product one cell to the right
   so the first row shows the first card in column 2, column 1 empty.
   Kill them on /shop so the grid only contains the actual product <li>s. */
.tdn-shop ul.products::before,
.tdn-shop ul.products::after { display: none !important; }

/* Belt-and-suspenders: hide the breadcrumb above the product grid on /shop —
   React's shop has no breadcrumb above the grid. */
.tdn-shop .woocommerce-breadcrumb { display: none; }

/* <Card sx={{height:'100%', display:'flex', flexDirection:'column',
            borderRadius:3, boxShadow:'0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
            '&:hover':{transform:'translateY(-4px)', boxShadow:'0 10px 15px...'}}}> */
.tdn-shop-product {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;                  /* borderRadius:3 = 3*4 = 12px */
	overflow: hidden;
	box-shadow:
		0 4px 6px -1px rgba(0,0,0,0.1),
		0 2px 4px -2px rgba(0,0,0,0.1);
	transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}
.tdn-shop-product:hover {
	transform: translateY(-4px);
	box-shadow:
		0 10px 15px -3px rgba(0,0,0,0.1),
		0 4px 6px -4px rgba(0,0,0,0.1);
}

/* <Box sx={{width:'100%', paddingTop:'100%', position:'relative', bgcolor:'#e2e8f0'}}>
            <img absolute cover>
   1:1 aspect ratio square image at top. */
.tdn-shop-product__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #e2e8f0;
	overflow: hidden;
	text-decoration: none;
}
.tdn-shop-product__image img,
.tdn-shop-product__image .tdn-shop-product__img,
.tdn-shop-product__image .attachment-woocommerce_thumbnail,
.tdn-shop-product__image .wp-post-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* <CardContent sx={{flexGrow:1, display:'flex', flexDirection:'column', p:3}}> */
.tdn-shop-product__content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	padding: 24px;
}

/* <Typography variant="h6" sx={{fontFamily:'var(--font-sans)', fontWeight:'bold', color:'#002855', mb:1, lineHeight:1.2}}> */
.tdn-page__content .tdn-shop-product__name,
.tdn-shop-product__name {
	margin: 0 0 8px !important;            /* mb:1 = 8px */
	font-family: var(--font-sans) !important;
	font-weight: 700 !important;
	font-size: 1.25rem !important;          /* MUI h6 */
	line-height: 1.2 !important;
	color: #002855 !important;
}

/* <Typography variant="body2" color="text.secondary" sx={{mb:2, flexGrow:1}}> */
.tdn-shop-product__desc {
	flex-grow: 1;
	margin: 0 0 16px;                       /* mb:2 = 16px */
	font-family: var(--font-sans);
	font-size: 0.875rem;
	line-height: 1.43;
	color: #6c757d;                         /* theme.text.secondary */
}

/* <Box sx={{display:'flex', justifyContent:'space-between', alignItems:'center', mt:'auto'}}> */
.tdn-shop-product__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	gap: 12px;
}

/* <Typography h6 Georgia bold #a42a38>${price} */
.tdn-shop-product__price {
	font-family: Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;                     /* MUI h6 */
	line-height: 1.6;
	color: #a42a38;
}
.tdn-shop-product__price .woocommerce-Price-amount,
.tdn-shop-product__price bdi { font: inherit; color: inherit; }
.tdn-shop-product__price del { opacity: 0.5; margin-right: 6px; font-weight: 400; }
.tdn-shop-product__price ins { text-decoration: none; }

/* <Button variant="outlined" sx={{borderColor:'facts.main', color:'facts.main',
            textTransform:'none', fontWeight:'bold', borderRadius:'20px', px:3, borderWidth:'2px',
            '&:hover':{bgcolor:'facts.main', color:'white', borderWidth:'2px'}}}>
   facts.main = #a42a38. px:3 = 24px h-padding. borderRadius 20px. textTransform none. */
.tdn-shop-product__cta {
	display: inline-block;
	padding: 6px 24px;
	background: transparent;
	color: #a42a38;
	border: 2px solid #a42a38;
	border-radius: 20px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.02857em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.tdn-shop-product__cta:hover {
	background: #a42a38;
	color: #fff;
}

/* Lift WP wrappers so hero runs edge-to-edge */
.tdn-container:has(.tdn-shop),
.tdn-page__content:has(.tdn-shop) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-shop) { padding-block: 0; }

/* =========================================================================
 * /sports — strict port of app/sports/page.tsx + SportsNav + GameRow + OpinionCard
 *
 *   SportsNav  — horizontal white bar w/ logo (60×60) + level pills (gray
 *                rounded-bar container) + date widget. shadow + 1px #eee
 *                bottom border. Container maxWidth lg inside.
 *   Container lg py:3
 *   Grid spacing={4} — left 8/12 (games), right 4/12 (Press Box, borderLeft
 *                      1px #eee, pl:4 from md+)
 *
 *   GameRow   — <Paper p:1.5 mb:1 border:1px #eee borderRadius:8px>
 *               Stack row spacing:2: status 60px | teams (away then home,
 *               each row: 24×24 colored circle + name + score right)
 *               FINAL+unrevealed → 40px gray spoiler covering score area
 *
 *   OpinionCard — <Paper p:3 bgcolor:#fcfbf9 borderRadius:4px boxShadow:1
 *                  border:1px #e5e5e5 h:100% column center>
 *                OPINION caption red letterSpacing 2 borderBottom 2px red,
 *                Avatar 80×80 (3px #e0e0e0 border),
 *                Author Oswald uppercase #666,
 *                Headline h5 Playfair italic bold #1a1a1a,
 *                Snippet body2 Merriweather #444 lineHeight 1.6
 * ===================================================================== */
.tdn-sports-page {
	background: #fff;
}
/* React's Header.tsx:127 returns SCORES/PRO/SEMI-PRO/COLLEGE/HS as the
 * sub-nav for `activeTab === 'Sports'` — so the theme sub-nav IS shown above
 * the SportsNav. The earlier suppression was a misread of /sports/layout.tsx
 * (which is unrelated chrome). Both bars render together: theme sub-nav (teal
 * shelf) above SportsNav (white). */
/* Full-bleed horizontally + add top breathing room between the teal site
 * sub-nav and the white Sports Hub chrome. (v0.18.1's margin-top approach
 * vanished into the parent's padding override via margin-collapse — using
 * top padding on the parent here works because padding never collapses.) */
.tdn-container:has(.tdn-sports-page),
.tdn-page__content:has(.tdn-sports-page) {
	max-width: 100% !important;
	padding: 24px 0 0 0 !important;
}
@media (max-width: 640px) {
	.tdn-container:has(.tdn-sports-page),
	.tdn-page__content:has(.tdn-sports-page) {
		padding: 14px 0 0 0 !important;
	}
}
.tdn-page:has(.tdn-sports-page) { padding-block: 0; }

.tdn-sports-nav {
	background: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.06);             /* boxShadow:2 */
	position: relative;
	z-index: 1;
	border-bottom: 1px solid #eee;
}
.tdn-sports-nav__container {
	max-width: 1200px;                                    /* Container maxWidth lg */
	margin: 0 auto;
	padding: 0 24px;                                      /* lg default 24px */
}
.tdn-sports-nav__main {
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
/* League strip — Stack row spacing:3 py:1.5 borderTop overflowX:auto minHeight:40. */
.tdn-sports-nav__leagues {
	display: flex;
	flex-direction: row;
	gap: 24px;                                            /* spacing:3 = 24px */
	padding: 12px 0;                                      /* py:1.5 = 12px */
	border-top: 1px solid #f8f8f8;
	overflow-x: auto;
	min-height: 40px;
	scrollbar-width: none;                                /* hide scrollbar */
}
.tdn-sports-nav__leagues::-webkit-scrollbar { display: none; }
.tdn-sports-nav__league {
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 700;                                     /* bold */
	color: #999;
	white-space: nowrap;
	padding-bottom: 4px;                                  /* pb:0.5 = 4px */
	border-bottom: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s;
}
.tdn-sports-nav__league:hover { color: #555; }
.tdn-sports-nav__league.is-active {
	color: #1a1a1a;                                       /* sports.colors.primary */
	border-bottom-color: #1a1a1a;
}
.tdn-sports-nav__logo {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
.tdn-sports-nav__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.tdn-sports-nav__pills {
	display: inline-flex;
	gap: 8px;                                             /* Stack spacing={1} = 8px */
	background: #f4f4f4;                                  /* bgcolor #f4f4f4 */
	padding: 4px;                                         /* p:0.5 = 4px */
	border-radius: 64px;                                  /* borderRadius:8 ≈ pill */
}
.tdn-sports-nav__pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 20px;                                    /* px:2.5 py:0.5 = 20px / 4px */
	border-radius: 64px;
	color: #666;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 0.8rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.2s;
}
.tdn-sports-nav__pill:hover { color: #000; }
.tdn-sports-nav__pill.is-active {
	background: #000;
	color: #fff;
}
.tdn-sports-nav__date {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: 1px solid #eee;
	border-radius: 8px;                                   /* borderRadius:2 = 8px */
	padding: 1.6px 8px;
}
.tdn-sports-nav__date-nav {
	background: transparent;
	border: 0;
	color: #555;
	cursor: pointer;
	padding: 4px 6px;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;             /* <a> defaults */
	border-radius: 4px;
}
.tdn-sports-nav__date-nav:hover,
.tdn-sports-nav__date-nav:focus-visible {
	background: #f3f4f6;
	color: #1a1a1a;
	outline: none;
}
.tdn-sports-nav__date-label {
	/* Phase 1 — rendered as <button> so it's keyboard accessible + opens
	 * the native date input. Reset the default button chrome so it looks
	 * like the original <div> label. */
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 80px;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 4px 8px;
	border-radius: 4px;
	font: inherit;
	color: inherit;
}
.tdn-sports-nav__date-label:hover,
.tdn-sports-nav__date-label:focus-visible {
	background: #f3f4f6;
	outline: none;
}
.tdn-sports-nav__date-day {
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	color: #1a1a1a;
	letter-spacing: 0.04em;
}
.tdn-sports-nav__date-sub {
	font-family: var(--font-sans);
	font-size: 0.65rem;
	color: #888;
	margin-top: -2px;
}
/* Native date input — visually hidden but stays in DOM so showPicker() works. */
.tdn-sports-nav__date-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	pointer-events: none;
}
/* "Today" reset link — shows only when viewing a non-today date. */
.tdn-sports-nav__date-today {
	font-family: var(--font-sans);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #d32f2f;                    /* sports.colors.live */
	text-decoration: none;
	margin-left: 4px;
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid #d32f2f;
	line-height: 1;
}
.tdn-sports-nav__date-today:hover,
.tdn-sports-nav__date-today:focus-visible {
	background: #d32f2f;
	color: #fff;
	outline: none;
}
/* AJAX busy state on the games column. */
[data-tdn-games-swap][aria-busy="true"] {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}
/* Team logo as <img> — keep same 24×24 footprint as the colored square. */
.tdn-game-row__logo--img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	background: transparent;
	border-radius: 0;
	display: inline-block;
}

.tdn-sports-page__container {
	max-width: 1200px;                                    /* Container maxWidth lg */
	margin: 0 auto;
	padding: 24px;                                        /* py:3 = 24px */
}
.tdn-sports-page__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;                                            /* spacing:4 = 32px */
}
@media (min-width: 900px) {
	.tdn-sports-page__grid {
		grid-template-columns: 8fr 4fr;
	}
}

/* Games column head: "X GAMES • LEVEL" overline + "SHOW ALL SCORES" toggle. */
.tdn-sports-page__games-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;                                  /* mb:2 = 16px */
}
.tdn-sports-page__overline {
	font-family: var(--font-sans);
	font-size: 0.75rem;                                   /* variant=overline */
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #6c757d;                                       /* text.secondary */
}
/* Toggle (SportsPage.tsx:170-181). Default: primary.main. When showScores=true:
 * color #6c757d (text.secondary) + label flips to "HIDE SCORES". */
.tdn-sports-page__toggle {
	background: transparent;
	border: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 0.75rem;                                   /* variant=caption */
	font-weight: 700;
	color: var(--color-navy);                             /* primary.main */
	text-decoration: none;
	cursor: pointer;
}
.tdn-sports-page__toggle:hover { text-decoration: underline; }
.tdn-sports-page__toggle.is-hiding { color: #6c757d; }
.tdn-sports-page__toggle-hide { display: none; }
.tdn-sports-page__toggle.is-hiding .tdn-sports-page__toggle-show { display: none; }
.tdn-sports-page__toggle.is-hiding .tdn-sports-page__toggle-hide { display: inline; }

/* Empty state (SportsPage.tsx:200-208) — Box py:8 textAlign:center bgcolor:#f5f5f5 borderRadius:2. */
.tdn-sports-page__empty {
	padding: 64px 16px;                                   /* py:8 = 64px */
	text-align: center;
	background: #f5f5f5;
	border-radius: 8px;                                   /* borderRadius:2 = 8px */
}
.tdn-sports-page__empty-title {
	font-family: var(--font-sans);
	font-size: 1.25rem;                                   /* variant=h6 */
	font-weight: 600;
	color: #6c757d;                                       /* text.secondary */
	margin: 0 0 4px;
}
.tdn-sports-page__empty-body {
	font-family: var(--font-sans);
	font-size: 0.875rem;                                  /* variant=body2 */
	color: #6c757d;
	margin: 0;
}

.tdn-game-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;                                             /* Stack spacing={1} = 8px */
}

/* GameRow: <Paper p:1.5 border:1px #eee borderRadius:2 hover-lift>
 *   Stack row spacing:2: status 60px | teams flex:1 */
.tdn-game-row {
	display: flex;
	align-items: center;
	gap: 16px;                                            /* spacing:2 = 16px */
	padding: 12px;                                        /* p:1.5 = 12px */
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;                                   /* borderRadius:2 = 8px */
	cursor: pointer;
	transition: all 0.2s;
	margin: 0;
}
.tdn-game-row:hover {
	background: #fafafa;
	border-color: #ddd;
	transform: translateY(-1px);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /* MUI elevation 1 */
}
.tdn-game-row__status {
	width: 60px;
	text-align: center;
	flex-shrink: 0;
}
.tdn-game-row__status-label {
	font-family: var(--font-sans);
	font-size: 0.75rem;                                   /* variant=caption */
	font-weight: 700;
	color: #666;
	letter-spacing: 0.5px;
}
.tdn-game-row[data-state="live"] .tdn-game-row__status-label {
	color: red;
}
.tdn-game-row__teams {
	flex: 1;
	position: relative;
	min-width: 0;
}
/* Each team row: <Stack direction="row" justifyContent="space-between"> with
 * the team Link (logo + name) on the left and the score on the right. */
.tdn-game-row__team {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;                                             /* spacing:1 = 8px */
}
.tdn-game-row__team:first-child { margin-bottom: 8px; }  /* away row mb:1 */
.tdn-game-row__team-link {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	min-width: 0;
	flex: 1;
}
.tdn-game-row__team-link:hover .tdn-game-row__name { text-decoration: underline; }
.tdn-game-row__logo {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
}
.tdn-game-row__name {
	font-family: var(--font-sans);
	font-size: 0.875rem;                                  /* variant=body2 */
	color: #1a1a1a;
	font-weight: 400;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Winner SCORE is always bold (GameRow.tsx:112 — no revealed check on score
 * fontWeight). Winner NAME is only bold AFTER reveal (line 107 — gated on
 * `revealed`). So we gate the name-bold on `.is-revealed` on the row. */
.tdn-game-row__team.is-winner .tdn-game-row__score { font-weight: 700; }
.tdn-game-row.is-revealed .tdn-game-row__team.is-winner .tdn-game-row__name { font-weight: 700; }
/* Non-FINAL games (LIVE/UPCOMING) have no spoiler — name bolding follows the
 * score directly. */
.tdn-game-row:not([data-state="final"]):not([data-state="post"]) .tdn-game-row__team.is-winner .tdn-game-row__name { font-weight: 700; }
.tdn-game-row__score {
	font-family: var(--font-sans);
	font-size: 1rem;                                      /* variant=body1 */
	color: #1a1a1a;
	min-width: 30px;
	text-align: right;
	transition: opacity 0.2s;
}
/* Spoiler — covers the score column (40px) on FINAL until clicked.
 * Click toggles a .is-revealed class on the parent (handled by view-mode.js). */
.tdn-game-row__spoiler {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	background: #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	border: 0;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s;
}
.tdn-game-row__spoiler:hover { background: #d0d0d0; }
.tdn-game-row__spoiler span {
	font-family: var(--font-sans);
	font-size: 0.6rem;
	font-weight: 700;
	color: #555;
	letter-spacing: 0.5px;
}
/* Hide scores when spoiler is shown (state-driven by data attr / class). */
.tdn-game-row[data-state="final"]:not(.is-revealed) .tdn-game-row__score {
	opacity: 0;
}
.tdn-game-row[data-state="final"].is-revealed .tdn-game-row__spoiler,
.tdn-sports-page__toggle.is-revealed-all ~ * .tdn-game-row__spoiler {
	display: none;
}

/* Press Box column: borderLeft 1px #eee pl:4 on md+. */
.tdn-sports-page__pressbox {
	min-width: 0;
}
@media (min-width: 900px) {
	.tdn-sports-page__pressbox {
		border-left: 1px solid #eee;
		padding-left: 32px;                               /* pl:4 = 32px */
	}
}
.tdn-pressbox-head {
	border-bottom: 2px solid #d32f2f;
	padding-bottom: 8px;                                  /* pb:1 = 8px */
	margin-bottom: 24px;                                  /* mb:3 = 24px */
}
.tdn-pressbox-title {
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;                                    /* variant=h5 */
	font-weight: 700;
	color: #d32f2f;
	margin: 0;
	letter-spacing: 0;
}
.tdn-pressbox-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;                                            /* Stack spacing={2} = 16px */
}

/* OpinionCard — <Paper p:3 bgcolor:#fcfbf9 borderRadius:1 boxShadow:1 border:1px #e5e5e5 center column>
 * (borderRadius:1 = 4px since theme.shape.borderRadius=4) */
.tdn-opinion-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px;                                        /* p:3 = 24px */
	background: #fcfbf9;                                  /* off-white / newsprint */
	background-image: url('https://www.transparenttextures.com/patterns/cream-paper.png');
	border-radius: 4px;                                   /* borderRadius:1 = 4px */
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /* MUI elevation 1 */
	border: 1px solid #e5e5e5;
}
.tdn-opinion-card__tag {
	font-family: var(--font-sans);
	font-size: 0.75rem;                                   /* variant=caption */
	font-weight: 700;
	color: #d32f2f;
	letter-spacing: 2px;
	margin-bottom: 16px;                                  /* mb:2 = 16px */
	border-bottom: 2px solid #d32f2f;
	padding-bottom: 4px;                                  /* pb:0.5 = 4px */
	text-transform: uppercase;
}
.tdn-opinion-card__avatar {
	width: 80px;
	height: 80px;
	margin-bottom: 16px;                                  /* mb:2 = 16px */
	border: 3px solid #e0e0e0;
	border-radius: 50%;
	background: #bdbdbd center / cover no-repeat;         /* MUI Avatar default bg */
}
.tdn-opinion-card__author {
	font-family: 'Oswald', sans-serif;
	font-size: 0.875rem;                                  /* variant=subtitle2 */
	font-weight: 500;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;                                  /* mb:2 = 16px */
}
.tdn-opinion-card__title {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size: 1.5rem;                                    /* variant=h5 = 1.5rem */
	font-weight: 700;
	line-height: 1.2;
	color: #1a1a1a;
	margin: 0 0 16px;                                     /* mb:2 = 16px */
}
.tdn-opinion-card__title a { color: inherit; text-decoration: none; }
.tdn-opinion-card__title a:hover { text-decoration: underline; }
.tdn-opinion-card__snippet {
	font-family: 'Merriweather', Georgia, serif;
	font-size: 0.875rem;                                  /* variant=body2 */
	color: #444;
	line-height: 1.6;
	margin: 0;
}
.tdn-opinion-card__empty {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: #6c757d;
	padding: 16px 0;
}

/* ============================================================
 * /sports/[level] — LevelPage strict port (LevelPage.tsx).
 * ============================================================ */

/* Container maxWidth lg py:4 (32px vertical). */
.tdn-sports-level__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px;                                       /* py:4 = 32px, lg px:3 = 24px */
}

/* Page header (LevelPage.tsx:99) — borderBottom 4px solid #1a1a1a, pb:1, mb:4, flex space-between baseline. */
.tdn-sports-level__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 4px solid #1a1a1a;
	padding-bottom: 8px;                                      /* pb:1 = 8px */
	margin-bottom: 32px;                                      /* mb:4 = 32px */
	gap: 16px;
	flex-wrap: wrap;
}
.tdn-sports-level__title {
	font-family: 'Oswald', sans-serif;
	font-size: 3rem;                                          /* variant=h3 */
	font-weight: 700;
	color: #1a1a1a;
	letter-spacing: -1px;
	margin: 0;
	line-height: 1.1;
}
.tdn-sports-level__subtitle {
	font-family: 'Merriweather', Georgia, serif;
	font-size: 1rem;                                          /* variant=subtitle1 */
	font-style: italic;
	color: #666;
	margin: 0;
}

/* Grid container spacing:4 — 2 cols md=8 + md=4 (default to single column on mobile). */
.tdn-sports-level__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;                                                /* spacing:4 = 32px */
}
@media (min-width: 900px) {
	.tdn-sports-level__grid {
		grid-template-columns: 8fr 4fr;                       /* md=8 + md=4 */
	}
}

/* Left column Stack spacing:6 (48px gap). */
.tdn-sports-level__left {
	display: flex;
	flex-direction: column;
	gap: 48px;                                                /* spacing:6 = 48px */
	min-width: 0;
}
.tdn-sports-level__section { display: block; }

/* h5 Oswald bold #444 mb:3 (24px). */
.tdn-sports-level__h5 {
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;                                        /* variant=h5 */
	font-weight: 700;
	color: #444;
	margin: 0 0 24px;                                         /* mb:3 = 24px */
	letter-spacing: 0;
}

/* Leagues Grid — container spacing:3 (24px), each item xs:12 sm:6. */
.tdn-sports-level__leagues {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;                                                /* spacing:3 = 24px */
}
@media (min-width: 600px) {
	.tdn-sports-level__leagues {
		grid-template-columns: 1fr 1fr;                       /* sm:6 = 2 cols */
	}
}

/* LeagueCard (LeagueCard.tsx) — Paper p:2 flex space-between hover-lift. */
.tdn-league-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;                                            /* p:2 = 16px */
	background: #fff;
	border-radius: 4px;                                       /* theme.shape.borderRadius=4 */
	box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12); /* MUI elevation 1 */
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s, box-shadow 0.2s;
}
.tdn-league-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12); /* elevation 4 */
	cursor: pointer;
}
.tdn-league-card__main {
	display: flex;
	align-items: center;
	gap: 16px;                                                /* gap:2 = 16px */
	min-width: 0;
}
.tdn-league-card__logo {
	position: relative;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
}
.tdn-league-card__logo.is-fallback {
	background: #f5f5f5;
}
.tdn-league-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.tdn-league-card__letter {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: rgba(0,0,0,0.38);                                  /* text.disabled */
	text-transform: uppercase;
}
.tdn-league-card__name {
	font-family: 'Oswald', sans-serif;
	font-size: 1.25rem;                                       /* variant=h6 */
	font-weight: 700;
	color: #1a1a1a;
}
.tdn-league-card__arrow {
	color: #ccc;
	flex-shrink: 0;
}

/* StandingsWidget empty state — caption "No standings available." */
.tdn-standings-widget__empty {
	font-family: var(--font-sans);
	font-size: 0.75rem;                                       /* variant=caption */
	color: rgba(0,0,0,0.6);
	margin: 0;
}

/* "Select a league for detailed standings." body2 text.secondary. */
.tdn-sports-level__hint {
	font-family: var(--font-sans);
	font-size: 0.875rem;                                      /* body2 */
	color: rgba(0,0,0,0.6);                                   /* text.secondary */
	margin: 0;
}

/* LeadersWidget — Paper elev=0 p:2 bgcolor:#f8f8f8 border:1px #ddd. */
.tdn-sports-level__leaders {
	display: flex;
	flex-direction: column;
	gap: 32px;                                                /* Stack spacing:4 = 32px */
}
.tdn-leaders-widget {
	padding: 16px;                                            /* p:2 */
	background: #f8f8f8;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.tdn-leaders-widget__title {
	font-family: 'Oswald', sans-serif;
	font-size: 1.25rem;                                       /* variant=h6 */
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 16px;                                         /* mb:2 = 16px */
	color: #1a1a1a;
}
.tdn-leaders-widget__empty {
	padding: 32px 0;                                          /* py:4 = 32px */
	text-align: center;
}
.tdn-leaders-widget__empty-line {
	font-family: var(--font-sans);
	font-size: 0.875rem;                                      /* body2 */
	font-style: italic;
	color: rgba(0,0,0,0.6);                                   /* text.secondary */
	margin: 0;
}
.tdn-leaders-widget__empty-hint {
	font-family: var(--font-sans);
	font-size: 0.75rem;                                       /* variant=caption */
	color: rgba(0,0,0,0.38);                                  /* text.disabled */
	margin: 0;
}

/* Right column — TOP STORIES head + favorites buttons. */
.tdn-sports-level__right { min-width: 0; }
.tdn-sports-level__top-stories-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;                                      /* mb:2 = 16px */
	gap: 8px;
	flex-wrap: wrap;
}
/* When no FILTERED BY child renders, React's space-between with a single
 * child puts the buttons at the LEFT (flex default). Mirror that. */
.tdn-sports-level__top-stories-head.is-no-filter {
	justify-content: flex-start;
}
.tdn-sports-level__filtered-by {
	font-family: var(--font-sans);
	font-size: 0.75rem;                                       /* variant=caption */
	font-weight: 700;
	color: var(--color-navy);                                 /* primary.main */
}
.tdn-sports-level__fav-actions {
	display: flex;
	align-items: center;
	gap: 8px;                                                 /* gap:1 = 8px */
}
/* Show My Teams button — outlined size:small borderRadius:8 textTransform:none. */
.tdn-sports-level__fav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;                                         /* MUI outlined size:small */
	background: transparent;
	color: rgba(0,0,0,0.87);
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 8px;
	font-family: var(--font-sans);
	font-size: 0.8125rem;                                     /* size:small */
	font-weight: 500;
	text-transform: none;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}
.tdn-sports-level__fav-toggle:hover {
	background: rgba(0,0,0,0.04);
	border-color: rgba(0,0,0,0.5);
}
.tdn-sports-level__fav-toggle.is-active {
	color: #d32f2f;                                           /* color="error" */
	border-color: rgba(211,47,47,0.5);
}
/* Heart icon: outline (FavoriteBorderIcon) by default, filled when toggled.
 * The toggle's `is-active` class swaps the second label and recolors the icon. */
.tdn-sports-level__heart { flex-shrink: 0; }
.tdn-sports-level__fav-label-on { display: none; }
.tdn-sports-level__fav-toggle.is-active .tdn-sports-level__fav-label-off { display: none; }
.tdn-sports-level__fav-toggle.is-active .tdn-sports-level__fav-label-on { display: inline; }
.tdn-sports-level__fav-settings {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	background: transparent;
	border: 0;
	color: rgba(0,0,0,0.54);                                  /* action color */
	cursor: pointer;
	border-radius: 50%;
}
.tdn-sports-level__fav-settings:hover { background: rgba(0,0,0,0.04); }

/* NewsCard — Card display:flex flexDirection:row mb:2 (LevelPage.tsx NewsCard list). */
.tdn-sports-level__news-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;                                                /* Stack spacing:2 = 16px */
}
.tdn-sports-level__news-empty {
	font-family: var(--font-sans);
	font-size: 1rem;                                          /* body1 */
	color: rgba(0,0,0,0.6);                                   /* text.secondary */
	margin: 0;
}
.tdn-news-card {
	display: flex;
	flex-direction: row;
	background: #fff;
	box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12); /* MUI Card elevation 1 */
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s;
}
.tdn-news-card:hover { box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12); }
.tdn-news-card__media {
	width: 120px;
	flex-shrink: 0;
	object-fit: cover;
}
.tdn-news-card__media.is-fallback {
	background: #eee;
}
.tdn-news-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px;                                            /* CardContent p:2 = 16px */
	min-width: 0;
}
.tdn-news-card__meta {
	display: flex;
	align-items: center;
	gap: 4px;                                                 /* Stack spacing:1, but we use 4 for `•` sep */
	margin-bottom: 8px;                                       /* mb:1 = 8px */
	font-family: var(--font-sans);
	font-size: 0.75rem;                                       /* variant=caption */
}
.tdn-news-card__team { font-weight: 700; }
.tdn-news-card__sep { color: rgba(0,0,0,0.6); }
.tdn-news-card__date { color: rgba(0,0,0,0.6); }              /* text.secondary */
.tdn-news-card__title {
	font-family: var(--font-sans);
	font-size: 1rem;                                          /* variant=subtitle1 */
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px;
	color: #1a1a1a;
}
.tdn-news-card__author {
	margin-top: 8px;                                          /* mt:1 = 8px */
	font-family: var(--font-sans);
	font-size: 0.75rem;                                       /* variant=caption */
	color: rgba(0,0,0,0.6);                                   /* text.secondary */
}

/* Lift the WP wrappers (full-bleed SportsNav on the level page too). */
.tdn-container:has(.tdn-sports-level),
.tdn-page__content:has(.tdn-sports-level) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-sports-level) { padding-block: 0; }

/* ============================================================
 * /sports/[level]/[leagueSlug] — LeaguePage overrides.
 * LeaguePage h5 differs from LevelPage h5: mb:2 (not mb:3) and
 * default text color (#1a1a1a, not #444).
 * ============================================================ */
.tdn-sports-league__h5 {
	color: #1a1a1a;
	margin: 0 0 16px;                                         /* mb:2 = 16px */
}
.tdn-sports-league__left {
	gap: 32px;                                                /* Stack spacing:4 = 32px (vs LevelPage's spacing:6=48) */
}
.tdn-sports-league__no-headlines {
	font-family: var(--font-sans);
	font-size: 0.875rem;                                      /* body2 */
	color: rgba(0,0,0,0.6);                                   /* text.secondary */
	margin: 0 0 16px;                                         /* mb:2 */
}

/* ============================================================
 * /sports/team/[id] — TeamPage strict port (TeamPage.tsx).
 * ============================================================ */
.tdn-sports-team {
	background: #f5f5f5;
	min-height: 100vh;
}
/* Dark hero banner — bgcolor team color (default #1a1a1a), py:6 (48px), white text. */
.tdn-sports-team__hero {
	color: #fff;
	padding: 48px 0;                                          /* py:6 = 48px */
	transition: background-color 0.5s;
}
.tdn-sports-team__hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.tdn-sports-team__head {
	display: flex;
	align-items: center;
	gap: 32px;                                                /* spacing:4 = 32px */
}
.tdn-sports-team__logo {
	width: 100px;
	height: 100px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;                                             /* p:1 = 8px */
	overflow: hidden;
	flex-shrink: 0;
}
.tdn-sports-team__logo img { width: 90%; height: 90%; object-fit: contain; }
.tdn-sports-team__letter {
	font-family: 'Oswald', sans-serif;
	font-size: 3rem;                                          /* variant=h3 */
	font-weight: 700;
	color: #000;
}
.tdn-sports-team__title-wrap { min-width: 0; }
.tdn-sports-team__title {
	font-family: 'Oswald', sans-serif;
	font-size: 3.75rem;                                       /* variant=h2 */
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: 0;
	line-height: 1.1;
	color: #fff;
}
.tdn-sports-team__meta {
	display: flex;
	gap: 16px;
	align-items: center;
}
.tdn-sports-team__record {
	font-family: var(--font-sans);
	font-size: 1.5rem;                                        /* variant=h5 */
	font-weight: 700;
}
.tdn-sports-team__sub {
	font-family: var(--font-sans);
	font-size: 1rem;                                          /* body1 */
	opacity: 0.8;
}
/* Tabs — Schedule / Standings / Roster / Team Leaders. textColor=inherit (white), mt:4 (32px). */
.tdn-sports-team__tabs {
	margin-top: 32px;
	display: flex;
	gap: 8px;
	border-bottom: 1px solid rgba(255,255,255,0.18);
}
.tdn-sports-team__tab {
	background: transparent;
	border: 0;
	color: rgba(255,255,255,0.7);
	font-family: var(--font-sans);
	font-size: 0.875rem;                                      /* MUI tab default ~0.875rem */
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 12px 16px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.2s;
}
.tdn-sports-team__tab:hover { color: #fff; }
.tdn-sports-team__tab.is-active {
	color: #fff;
	border-bottom-color: #fff;                                /* MUI Tabs indicator */
}

.tdn-sports-team__body {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.tdn-sports-team__panel { padding: 24px 0; }                  /* py:3 = 24px */
.tdn-sports-team__panel[hidden] { display: none; }
.tdn-sports-team__h5 {
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 16px;                                         /* gutterBottom */
}
.tdn-sports-team__h6 {
	font-family: var(--font-sans);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 16px;
}
.tdn-sports-team__empty {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: rgba(0,0,0,0.6);
	margin: 0;
}

/* Full-bleed: lift the WP wrappers so the dark hero spans full width. */
.tdn-container:has(.tdn-sports-team),
.tdn-page__content:has(.tdn-sports-team) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-sports-team) { padding-block: 0; }

/* ============================================================
 * /sports/standings — StandingsPage strict port.
 * ============================================================ */
.tdn-sports-standings__head {
	border-bottom: 2px solid #1a1a1a;
	padding-bottom: 8px;                                      /* pb:1 = 8px */
	margin-bottom: 32px;                                      /* mb:4 = 32px */
}
.tdn-sports-standings__title {
	font-family: 'Oswald', sans-serif;
	font-size: 2.125rem;                                      /* variant=h4 */
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
}
.tdn-standings-table {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 4px;
	padding: 24px;
}
.tdn-container:has(.tdn-sports-standings),
.tdn-page__content:has(.tdn-sports-standings) {
	max-width: 100% !important;
	padding: 0 !important;
}

/* ============================================================
 * /sports/high-school/* — strict ports of every HS route.
 * ============================================================ */
.tdn-sports-hs__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px;                                       /* py:4 px:3 */
}
/* Landing (HS index). */
.tdn-sports-hs__hero {
	border-bottom: 4px solid #1a1a1a;
	padding-bottom: 16px;
	margin-bottom: 32px;
}
.tdn-sports-hs__title {
	font-family: 'Oswald', sans-serif;
	font-size: 3rem;
	font-weight: 700;
	color: #1a1a1a;
	letter-spacing: -1px;
	margin: 0 0 8px;
}
.tdn-sports-hs__lede {
	font-family: 'Merriweather', Georgia, serif;
	font-size: 1rem;
	color: #666;
	margin: 0;
}
.tdn-sports-hs__split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 900px) {
	.tdn-sports-hs__split { grid-template-columns: 1fr 1fr; }
}
.tdn-sports-hs__col {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 24px;
}
.tdn-sports-hs__col-title {
	font-family: 'Oswald', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 16px;
	color: #1a1a1a;
}
.tdn-sports-hs__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tdn-sports-hs__nav a {
	display: block;
	padding: 12px 16px;
	background: #f8f8f8;
	border-radius: 4px;
	color: #1a1a1a;
	text-decoration: none;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 600;
	transition: background 0.2s;
}
.tdn-sports-hs__nav a:hover { background: #e8e8e8; }

/* List pages (players / teams / games). */
.tdn-sports-hs__list-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 2px solid #1a1a1a;
	padding-bottom: 8px;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 16px;
}
.tdn-sports-hs__list-title {
	font-family: 'Oswald', sans-serif;
	font-size: 2.125rem;                                      /* variant=h4 */
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
}
.tdn-sports-hs__search-input {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	padding: 8px 12px;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	min-width: 240px;
}

.tdn-sports-hs__grid {
	display: grid;
	gap: 24px;                                                /* spacing:3 = 24px */
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.tdn-sports-hs__grid--players,
	.tdn-sports-hs__grid--teams { grid-template-columns: 1fr 1fr; }
	.tdn-sports-hs__grid--games { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
	.tdn-sports-hs__grid--games { grid-template-columns: 1fr 1fr 1fr; }
}

.tdn-sports-hs-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tdn-sports-hs-card--player { flex-direction: row; align-items: center; }
.tdn-sports-hs-card__avatar {
	width: 60px;
	height: 60px;
	background: #e0e0e0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tdn-sports-hs-card__initial {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	color: #666;
}
.tdn-sports-hs-card__body { flex: 1; min-width: 0; }
.tdn-sports-hs-card__title {
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: #1a1a1a;
}
.tdn-sports-hs-card__num {
	font-family: var(--font-mono);
	color: #999;
	font-weight: 500;
}
.tdn-sports-hs-card__meta {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: #666;
	margin: 0;
}
.tdn-sports-hs-card__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 8px 0 0;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
}
.tdn-sports-hs-card__stats dt { color: #999; margin: 0; text-transform: uppercase; font-size: 0.75rem; }
.tdn-sports-hs-card__stats dd { margin: 0; font-weight: 700; color: #1a1a1a; }
.tdn-sports-hs-card__game-teams {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-sans);
}
.tdn-sports-hs-card__home, .tdn-sports-hs-card__away {
	font-weight: 700;
	color: #1a1a1a;
}
.tdn-sports-hs-card__score {
	font-family: var(--font-mono);
	font-size: 1.25rem;
	font-weight: 700;
	color: #1a1a1a;
}
.tdn-sports-hs-card__date {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: #999;
	margin: 4px 0 0;
}
.tdn-sports-hs-card__cta {
	margin-top: 8px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-red);
	text-decoration: none;
}
.tdn-sports-hs-card__cta:hover { text-decoration: underline; }

/* Detail pages — placeholder shell. */
.tdn-sports-hs__crumb { margin-bottom: 16px; }
.tdn-sports-hs__crumb a {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: var(--color-navy);
	text-decoration: none;
}
.tdn-sports-hs__crumb a:hover { text-decoration: underline; }
.tdn-sports-hs__detail-head {
	border-bottom: 2px solid #1a1a1a;
	padding-bottom: 16px;
	margin-bottom: 24px;
}
.tdn-sports-hs__kind {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-red);
	letter-spacing: 2px;
	display: block;
	margin-bottom: 4px;
}
.tdn-sports-hs__detail-title {
	font-family: 'Oswald', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
}
.tdn-sports-hs__detail-body {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: #666;
	margin: 0;
}

/* Full-bleed for HS pages too. */
.tdn-container:has(.tdn-sports-hs),
.tdn-page__content:has(.tdn-sports-hs) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-sports-hs) { padding-block: 0; }

/* ============================================================
 * ManageFavoritesDialog — strict port of MUI Dialog maxWidth=xs fullWidth.
 * Used by the gear ⚙ button next to "Show My Teams" on LevelPage/LeaguePage.
 * ============================================================ */
.tdn-fav-dialog {
	position: fixed;
	inset: 0;
	z-index: 1300;                                            /* MUI modal default */
	display: flex;
	align-items: center;
	justify-content: center;
}
.tdn-fav-dialog[hidden] { display: none; }
.tdn-fav-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5);                              /* MUI Backdrop */
}
.tdn-fav-dialog__panel {
	position: relative;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12); /* elevation 24 */
	width: 100%;
	max-width: 444px;                                         /* MUI Dialog maxWidth=xs */
	max-height: calc(100% - 64px);
	margin: 32px;
	display: flex;
	flex-direction: column;
}
.tdn-fav-dialog__title {
	font-family: 'Oswald', sans-serif;
	font-size: 1.25rem;                                       /* DialogTitle default */
	font-weight: 700;
	margin: 0;
	padding: 16px 24px;
	color: #1a1a1a;
}
.tdn-fav-dialog__body {
	padding: 8px 24px 0;
	overflow-y: auto;
}
.tdn-fav-dialog__lede {
	font-family: var(--font-sans);
	font-size: 0.875rem;                                      /* body2 */
	color: rgba(0,0,0,0.6);
	margin: 0 0 16px;
}
.tdn-fav-dialog__add-row {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	align-items: flex-start;
}
.tdn-fav-dialog__input {
	flex: 1;
	height: 40px;
	padding: 8px 12px;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
}
.tdn-fav-dialog__input:focus {
	outline: 2px solid #1a1a1a;
	outline-offset: -1px;
	border-color: transparent;
}
.tdn-fav-dialog__add {
	height: 40px;
	padding: 0 16px;
	background: #1a1a1a;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
}
.tdn-fav-dialog__add:hover { background: #000; }
.tdn-fav-dialog__add:disabled { opacity: 0.4; cursor: not-allowed; }
.tdn-fav-dialog__list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: #f5f5f5;
	border-radius: 4px;
	min-height: 56px;
}
.tdn-fav-dialog__list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 16px;
	font-family: var(--font-sans);
	font-size: 1rem;
}
.tdn-fav-dialog__list .tdn-fav-dialog__empty {
	color: rgba(0,0,0,0.6);
	text-align: center;
	justify-content: center;
}
.tdn-fav-dialog__remove {
	background: transparent;
	border: 0;
	padding: 4px;
	color: #d32f2f;
	cursor: pointer;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tdn-fav-dialog__remove:hover { background: rgba(211,47,47,0.08); }
.tdn-fav-dialog__actions {
	padding: 8px 24px 16px;
	display: flex;
	justify-content: flex-end;
}
.tdn-fav-dialog__close {
	background: transparent;
	border: 0;
	padding: 6px 16px;
	color: rgba(0,0,0,0.87);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 4px;
}
.tdn-fav-dialog__close:hover { background: rgba(0,0,0,0.04); }

/* ============================================================
 * /more — strict port of app/more/page.tsx (20 LOC).
 *   Container maxWidth=lg py:4
 *   Typography h2 component=h1 gutterBottom: "More Tools"
 *   Stack spacing:2 of 2 Buttons (contained primary / secondary)
 * ============================================================ */
.tdn-more {
	max-width: 1200px;                                /* Container lg */
	margin: 0 auto;
	padding: 32px 24px;                               /* py:4 + lg default px:3 */
}
/* `component="h1"` + `variant="h2"` → semantic <h1>, h2 styling.
 * MUI h2 defaults: fontWeight=300 light, fontSize=3.75rem.
 * gutterBottom = mb 0.35em.
 * theme.css `h1..h6 { color: var(--tdn-navy) }` would leak; double-class
 * scope to win over `.tdn-page__content h1` if present. */
.tdn-page__content .tdn-more__title,
.tdn-more .tdn-more__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.75rem;                               /* h2 default */
	font-weight: 300;
	line-height: 1.167;
	letter-spacing: -0.00833em;
	margin: 0 0 0.35em;                               /* gutterBottom */
	color: var(--color-text-primary, #000) !important;
}
.tdn-more__stack {
	display: flex;
	flex-direction: column;
	gap: 16px;                                        /* spacing:2 = 16px */
	align-items: flex-start;
}
/* Both buttons render full-width inside a Link wrapper in React.
 * Per MUI Button contained: padding 6px 16px, borderRadius 4px, uppercase. */
.tdn-more__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 16px;
	min-height: 36px;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02857em;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
	transition: background 0.2s, box-shadow 0.2s;
}
/* MUI palette.primary.main = navy (#002855 per theme.ts), secondary.main = red. */
.tdn-more__btn--primary {
	background: var(--color-navy, #002855);
	color: #fff;
}
.tdn-more__btn--primary:hover { background: #001f44; }
/* React theme.ts does NOT override secondary.main → MUI default = #9c27b0 (purple). */
.tdn-more__btn--secondary {
	background: #9c27b0;
	color: #fff;
}
.tdn-more__btn--secondary:hover { background: #7b1fa2; }

/* ============================================================
 * /update-password — strict port of app/update-password/page.tsx.
 *   Box flex centered py:10 bgcolor:#f8fafc minH:100vh
 *     Card maxW:450 borderRadius:2 elevation
 *       CardContent p:5
 *         h4 Georgia bold center #1e293b mb:1
 *         body2 #64748b center mb:4
 *         form flex col gap:3 — 2 TextField outlined + Button contained
 * ============================================================ */
/* Full-bleed: React's outer <Box minHeight:100vh bgcolor:#f8fafc> fills the
 * viewport. WP wraps content in .tdn-container (max 1180) + .tdn-page__content
 * (max 760) + .tdn-page (padding-block 32). Lift all three so the blue bg
 * spans full width, matching React. */
.tdn-container:has(.tdn-update-pw),
.tdn-page__content:has(.tdn-update-pw) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-update-pw) { padding-block: 0; }
.tdn-update-pw {
	background: #f8fafc;
	min-height: 100vh;
	padding: 80px 16px;                               /* py:10 = 80px */
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tdn-update-pw__card {
	width: 100%;
	max-width: 450px;
	/* React: <Card> with no bgcolor override → MUI background.paper.
	 * theme.ts:29 sets background.paper='#f5f5f5'. NOT white. */
	background: #f5f5f5;
	border-radius: 8px;                               /* borderRadius:2 = 8px */
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.tdn-update-pw__body {
	padding: 40px;                                    /* p:5 = 40px */
}
/* h4 Georgia bold center #1e293b — double-class to beat theme.css h*. */
.tdn-page__content .tdn-update-pw__title,
.tdn-update-pw .tdn-update-pw__title {
	font-family: Georgia, serif;
	font-size: 2.125rem;                              /* h4 default */
	font-weight: 700 !important;
	color: #1e293b !important;
	text-align: center;
	margin: 0 0 8px;                                  /* mb:1 */
	line-height: 1.235;
}
.tdn-update-pw__lede {
	font-family: var(--font-sans);
	font-size: 0.875rem;                              /* body2 */
	color: #64748b;
	text-align: center;
	margin: 0 0 32px;                                 /* mb:4 */
}
.tdn-update-pw__form {
	display: flex;
	flex-direction: column;
	gap: 24px;                                        /* spacing:3 = 24px */
}
/* MUI outlined TextField: input + floating label as sibling. */
.tdn-update-pw__field {
	position: relative;
	padding-top: 4px;
}
.tdn-update-pw__label {
	position: absolute;
	top: 19px;
	left: 14px;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: rgba(0,0,0,0.6);
	/* Card bg is #f5f5f5 — label uses the same so notch blends in. */
	background: #f5f5f5;
	padding: 0 4px;
	pointer-events: none;
	transform-origin: top left;
	transition: transform 0.2s, color 0.2s;
}
.tdn-update-pw__input:focus + .tdn-update-pw__label,
.tdn-update-pw__input:not(:placeholder-shown) + .tdn-update-pw__label {
	transform: translateY(-22px) scale(0.75);
	color: #002855;                                   /* primary on focus */
}
/* MUI TextField variant=outlined: 1px border, 4px radius, padding 16.5x14px. */
.tdn-update-pw__input {
	width: 100%;
	padding: 16.5px 14px;
	font-family: var(--font-sans);
	font-size: 1rem;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	box-sizing: border-box;
	background: #fff;
	transition: border 0.2s;
}
.tdn-update-pw__input:hover { border-color: rgba(0,0,0,0.87); }
.tdn-update-pw__input:focus {
	outline: none;
	border: 2px solid #002855;
	padding: 15.5px 13px;
}
/* Button contained fullWidth bgcolor:#002855 white bold py:1.5. */
.tdn-update-pw__submit {
	display: block;
	width: 100%;
	padding: 12px 16px;                               /* py:1.5 = 12px */
	background: #002855;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02857em;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
	transition: background 0.2s;
}
.tdn-update-pw__submit:hover { background: #001b3a; }
.tdn-update-pw__alert {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	padding: 6px 16px;
	border-radius: 4px;
	margin-bottom: 24px;
}
.tdn-update-pw__alert--error {
	background: #fdeded;
	color: #5f2120;
}

/* ============================================================
 * /register — strict port of app/register/page.tsx (168 LOC).
 * ============================================================ */
/* Full-bleed: React's outer Box minHeight:100vh fills the viewport. */
.tdn-container:has(.tdn-register),
.tdn-page__content:has(.tdn-register) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-register) { padding-block: 0; }
.tdn-register {
	background: #f8fafc;
	min-height: 100vh;
	padding: 80px 16px;                               /* py:10 */
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tdn-register__card {
	width: 100%;
	max-width: 450px;
	background: #fff;
	padding: 40px;                                    /* p:5 */
	border-radius: 8px;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
	box-sizing: border-box;
}
.tdn-page__content .tdn-register__title,
.tdn-register .tdn-register__title {
	font-family: Georgia, serif;
	font-size: 2.125rem;                              /* h4 */
	font-weight: 700 !important;
	color: #1e293b !important;
	text-align: center;
	margin: 0 0 8px;
	line-height: 1.235;
}
.tdn-register__lede {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* body1 */
	color: #64748b;
	text-align: center;
	margin: 0 0 32px;
	line-height: 1.5;
}
.tdn-register__form {
	display: flex;
	flex-direction: column;
	gap: 24px;                                        /* spacing:3 */
}
.tdn-register__row {
	display: flex;
	gap: 16px;                                        /* spacing:2 inside row */
}
.tdn-register__row .tdn-register__field { flex: 1; }
/* MUI v5 outlined TextField — label sits INSIDE the border as a floating
 * notch, sized 1rem when empty (in-field), shrinks to 0.75rem on focus or
 * when the input has value (out-of-field, sitting on the border).
 * We use the placeholder-shown CSS state to detect "empty" — no JS needed
 * as long as the input has a non-empty placeholder. */
.tdn-register__field {
	position: relative;
	padding-top: 4px;                                 /* room for floating label */
}
.tdn-register__label {
	position: absolute;
	top: 19px;                                        /* MUI baseline when input empty */
	left: 14px;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: rgba(0,0,0,0.6);
	background: #fff;
	padding: 0 4px;
	pointer-events: none;
	transform-origin: top left;
	transition: transform 0.2s, color 0.2s;
}
/* Label floats up when input focused OR has value. */
.tdn-register__input:focus + .tdn-register__label,
.tdn-register__input:not(:placeholder-shown) + .tdn-register__label {
	transform: translateY(-22px) scale(0.75);
	color: var(--color-red, #a42a38);
}
.tdn-register__input {
	width: 100%;
	padding: 16.5px 14px;
	font-family: var(--font-sans);
	font-size: 1rem;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	box-sizing: border-box;
	background: #fff;
	transition: border 0.2s;
}
.tdn-register__input:hover { border-color: rgba(0,0,0,0.87); }
.tdn-register__input:focus {
	outline: none;
	border: 2px solid var(--color-red, #a42a38);
	padding: 15.5px 13px;
}
.tdn-register__helper {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: rgba(0,0,0,0.6);
	margin: 3px 14px 0;
}
.tdn-register__alert {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	padding: 12px 16px;                               /* p:1.5 */
	border-radius: 4px;
}
.tdn-register__alert--error {
	background: #fee2e2;
	color: #d32f2f;
}
/* MUI Button contained bgcolor=facts.main (red) py:1.5 bold uppercase. */
.tdn-register__submit {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: var(--color-red, #a42a38);
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02857em;
	cursor: pointer;
	box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
	transition: background 0.2s;
}
.tdn-register__submit:hover { background: #001b3a; }   /* matches React hover */
.tdn-register__submit:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 480px) {
	.tdn-register__row { flex-direction: column; }
}

/* ============================================================
 * /master-index — strict port of app/master-index/page.tsx (210 LOC).
 *   Outer Box bgcolor:#F8F9FA minH:100vh pb:8
 *   Header band: bgcolor:white borderBottom:'1px #e5e7eb' py:6
 *     h2 Georgia bold #1f2937 "The Index"
 *     h6 #6b7280 maxW:600 "The complete archive..."
 *     TextField search fullWidth maxW:800 borderRadius:2 shadow
 *     Tabs row: 4 segmented buttons (rounded top corners)
 *   Body: Container lg mt:6 flex gap:4
 *     Main col flex:1: per-letter sections with Grid xs:12 sm:6 md:4 cards
 *     Sidebar: 60px wide, sticky top:100, letter quick-jump (md+ only)
 * ============================================================ */
/* Full-bleed: React Box minH:100vh bg:#F8F9FA fills viewport. */
.tdn-container:has(.tdn-mi),
.tdn-page__content:has(.tdn-mi) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-mi) { padding-block: 0; }
.tdn-mi {
	background: #f8f9fa;
	min-height: 100vh;
	padding-bottom: 64px;                             /* pb:8 */
}
.tdn-mi__head {
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	padding: 48px 0;                                  /* py:6 = 48px */
}
.tdn-mi__head-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.tdn-page__content .tdn-mi__title,
.tdn-mi .tdn-mi__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.75rem;                               /* h2 default */
	font-weight: 700 !important;
	color: #1f2937 !important;
	margin: 0 0 16px;                                 /* mb:2 */
	line-height: 1.167;
	letter-spacing: -0.00833em;
}
.tdn-page__content .tdn-mi__sub,
.tdn-mi .tdn-mi__sub {
	font-family: var(--font-sans);
	font-size: 1.25rem;                               /* h6 default */
	font-weight: 400;
	color: #6b7280 !important;
	max-width: 600px;
	margin: 0 0 32px;                                 /* mb:4 */
	line-height: 1.6;
}
/* TextField with SearchIcon adornment, fullWidth maxW:800, borderRadius:2, shadow. */
.tdn-mi__search {
	position: relative;
	max-width: 800px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
	display: flex;
	align-items: center;
}
.tdn-mi__search-icon {
	margin: 0 12px;
	flex-shrink: 0;
}
.tdn-mi__search-input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 16px 16px 16px 0;
	font-family: var(--font-sans);
	font-size: 1.2rem;
}
.tdn-mi__search-input:focus { outline: 2px solid #002855; outline-offset: -2px; border-radius: 8px; }
/* Tabs row: 4 segmented buttons with rounded top corners (no bottom radius). */
.tdn-mi__tabs {
	display: flex;
	gap: 8px;
	margin-top: 32px;                                 /* mt:4 */
}
.tdn-mi__tab {
	padding: 8px 24px;                                /* px:3 py:1 */
	background: transparent;
	border: 1px solid #e5e7eb;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: #6b7280;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.tdn-mi__tab:hover { background: #f9fafb; }
.tdn-mi__tab.is-active {
	background: #f3f4f6;
	color: #1f2937;
	font-weight: 700;
}

/* Body */
.tdn-mi__body {
	max-width: 1200px;
	margin: 48px auto 0;                              /* mt:6 = 48px */
	padding: 0 24px;
	display: flex;
	gap: 32px;                                        /* gap:4 = 32px */
}
.tdn-mi__main { flex: 1; min-width: 0; }
.tdn-mi__letter { margin-bottom: 48px; }              /* mb:6 */
.tdn-mi__letter-head {
	display: flex;
	align-items: baseline;
	margin-bottom: 24px;                              /* mb:3 */
	border-bottom: 2px solid #e5e7eb;
	padding-bottom: 8px;                              /* pb:1 */
}
.tdn-page__content .tdn-mi__letter-title,
.tdn-mi .tdn-mi__letter-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3rem;                                  /* h3 default */
	font-weight: 700 !important;
	color: #1f2937 !important;
	margin: 0 16px 0 0;                               /* mr:2 */
	line-height: 1.167;
}
.tdn-mi__letter-count {
	font-family: var(--font-sans);
	font-size: 0.875rem;                              /* body2 */
	color: #9ca3af;
}
.tdn-mi__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;                                        /* spacing:2 */
}
@media ( min-width: 600px ) { .tdn-mi__grid { grid-template-columns: 1fr 1fr; } }
@media ( min-width: 900px ) { .tdn-mi__grid { grid-template-columns: 1fr 1fr 1fr; } }
.tdn-mi__item {
	display: block;
	padding: 16px;                                    /* p:2 */
	background: #fff;
	border-radius: 4px;                               /* borderRadius:1 */
	border: 1px solid #f3f4f6;
	text-decoration: none;
	color: inherit;
	transition: all 0.2s;
}
.tdn-mi__item:hover {
	border-color: #d1d5db;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.tdn-mi__item-typewrap {
	display: flex;
	align-items: center;
	margin-bottom: 4px;                               /* mb:0.5 */
}
.tdn-mi__item-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 8px;                                /* mr:1 */
}
.tdn-mi__item-type {
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
}
.tdn-mi__item-label {
	display: block;
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* subtitle1 */
	font-weight: 700;
	color: #1f2937;
	line-height: 1.3;
}
.tdn-mi__item-meta {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: #9ca3af;
	margin-top: 4px;                                  /* mt:0.5 */
}

/* Sticky sidebar (md+ only) */
.tdn-mi__sidebar {
	display: none;
}
@media ( min-width: 900px ) {
	.tdn-mi__sidebar {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 60px;
		position: sticky;
		top: 100px;
		height: calc(100vh - 100px);
		overflow-y: auto;
	}
}
.tdn-mi__sidebar-link {
	font-family: var(--font-sans);
	font-weight: 700;
	color: #9ca3af;
	padding: 4px 0;
	text-decoration: none;
	transition: all 0.1s;
}
.tdn-mi__sidebar-link:hover {
	color: #1f2937;
	transform: scale(1.2);
}

/* ============================================================
 * /calendar — strict port of app/calendar/page.tsx authorized branch.
 *   Outer Box bgcolor:#f8fafc minH:100vh py:8
 *   Header: CalendarMonthIcon 48 #a42a38 + h3 Georgia bold #002855 + subtitle1
 *   Two-col: filter sidebar (md:300) + main feed
 *   Event Card: borderRadius:3 borderLeft:6px #a42a38 hover-lift
 *     chips + title + datetime + (optional) summary + bottom buttons
 * ============================================================ */
/* Full-bleed: React Box minH:100vh bg:#f8fafc fills viewport. */
.tdn-container:has(.tdn-cal),
.tdn-page__content:has(.tdn-cal) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-cal) { padding-block: 0; }
.tdn-cal {
	background: #f8fafc;
	min-height: 100vh;
	padding: 64px 0;                                  /* py:8 = 64px */
}
.tdn-cal__container {
	max-width: 1200px;                                /* Container lg */
	margin: 0 auto;
	padding: 0 24px;
}
.tdn-cal__head {
	display: flex;
	align-items: center;
	margin-bottom: 48px;                              /* mb:6 = 48px */
	gap: 16px;
}
.tdn-cal__head-icon { flex-shrink: 0; }
.tdn-page__content .tdn-cal__title,
.tdn-cal .tdn-cal__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3rem;                                  /* h3 */
	font-weight: 700 !important;
	color: #002855 !important;
	margin: 0 0 4px;
	line-height: 1.167;
}
.tdn-cal__subtitle {
	font-family: var(--font-sans);
	font-size: 1rem;                                  /* subtitle1 */
	color: rgba(0,0,0,0.6);
	margin: 0;
}
.tdn-cal__body {
	display: flex;
	flex-direction: column;
	gap: 32px;                                        /* spacing:4 */
	align-items: flex-start;
}
@media ( min-width: 900px ) {
	.tdn-cal__body { flex-direction: row; }
}
/* Filter sidebar */
.tdn-cal__filters {
	width: 100%;
	padding: 24px;                                    /* p:3 */
	background: #fff;
	border-radius: 12px;                              /* borderRadius:3 = 12px */
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	flex-shrink: 0;
}
@media ( min-width: 900px ) {
	.tdn-cal__filters { width: 300px; }
}
.tdn-page__content .tdn-cal__filter-title,
.tdn-cal .tdn-cal__filter-title {
	font-family: var(--font-sans);
	font-size: 1.25rem;                               /* h6 */
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 0 16px;
}
.tdn-cal__filter-empty,
.tdn-cal__check-label {
	font-family: var(--font-sans);
	font-size: 0.875rem;
}
.tdn-cal__filter-empty { color: rgba(0,0,0,0.6); margin: 0; }
.tdn-cal__checkboxes { display: flex; flex-direction: column; gap: 8px; }
.tdn-cal__check {
	display: flex;
	align-items: center;
	gap: 9px;                                         /* MUI default Checkbox + label spacing */
	cursor: pointer;
	color: rgba(0,0,0,0.87);
}
/* Custom red checkbox to match #a42a38 per React sx. */
.tdn-cal__check-input {
	appearance: none;
	width: 20px;
	height: 20px;
	border: 2px solid #a42a38;
	border-radius: 2px;
	background: #fff;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	margin: 9px;                                      /* match MUI Checkbox spacing */
}
.tdn-cal__check-input:checked { background: #a42a38; }
.tdn-cal__check-input:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 12px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* Main feed */
.tdn-cal__feed { flex: 1; min-width: 0; width: 100%; }
.tdn-cal__empty {
	background: #fff;
	padding: 48px;                                    /* p:6 */
	border-radius: 16px;                              /* borderRadius:4 */
	text-align: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tdn-page__content .tdn-cal__empty-title,
.tdn-cal .tdn-cal__empty-title {
	font-family: var(--font-sans);
	font-size: 1.5rem;                                /* h5 */
	font-weight: 400 !important;
	color: rgba(0,0,0,0.6) !important;
	margin: 0 0 16px;
}
.tdn-cal__empty-body {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: rgba(0,0,0,0.6);
	margin: 0;
}
.tdn-cal__stack { display: flex; flex-direction: column; gap: 24px; }
/* Event Card */
.tdn-cal__event {
	background: #fff;
	border-radius: 12px;                              /* borderRadius:3 */
	border-left: 6px solid #a42a38;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	padding: 32px;                                    /* p:4 = 32px */
	transition: transform 0.2s, box-shadow 0.2s;
}
.tdn-cal__event:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.tdn-cal__event-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.tdn-cal__event-tags { flex: 1; min-width: 200px; }
.tdn-cal__chips {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.tdn-cal__chip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 16px;
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
}
.tdn-cal__chip--type {
	background: #e2e8f0;
	color: #0f172a;
}
.tdn-cal__chip--juris {
	background: transparent;
	color: #002855;
	border: 1px solid #002855;
}
.tdn-page__content .tdn-cal__event-title,
.tdn-cal .tdn-cal__event-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.5rem;                                /* h5 */
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0;
	line-height: 1.334;
}
.tdn-cal__event-title a {
	color: inherit;
	text-decoration: none;
}
.tdn-cal__event-title a:hover { color: #a42a38; }
.tdn-cal__event-cta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.tdn-cal__btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 8px;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	color: #fff;
	transition: background 0.2s;
}
.tdn-cal__btn--google { background: #4285F4; }
.tdn-cal__btn--google:hover { background: #3367d6; }
.tdn-cal__btn--apple { background: #000; }
.tdn-cal__btn--apple:hover { background: #333; }
.tdn-cal__event-time {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(0,0,0,0.6);
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 16px;
}
.tdn-cal__summary {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 16px;
	margin: 16px 0;
}
.tdn-cal__summary-label {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	color: rgba(0,0,0,0.6);
	margin: 0 0 8px;
}
.tdn-cal__summary-body {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: rgba(0,0,0,0.87);
	margin: 0;
	white-space: pre-line;
}
.tdn-cal__event-links {
	display: flex;
	gap: 16px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.tdn-cal__link-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.23);
	background: transparent;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-navy);
	text-decoration: none;
}
.tdn-cal__link-btn:hover {
	background: rgba(0,0,0,0.04);
	border-color: rgba(0,0,0,0.5);
}

/* ============================================================
 * /account — strict port of app/account/page.tsx (486 LOC).
 *   Outer Box bgcolor:#f8fafc minH:100vh py:8
 *     <Container lg>
 *       Header (Welcome h3 + Active Status chip + Logout outlined-error btn)
 *       2-col Grid:
 *         Profile Card (p:4) — MUI TextField outlined + floating labels
 *         Newsletter Card (p:4) — Switch toggles + scrollable list
 *       Section h4 with 2px border-bottom
 *       3-col Vault Grid: Calendar / Q&A / Test (locked overlay if no tier)
 *       Dialog (modal) for Q&A — DialogTitle navy bg + body f8fafc bg
 *       Snackbar (bottom center, dismissable)
 * ============================================================ */
/* Full-bleed: React Box minH:100vh bg:#f8fafc fills viewport. */
.tdn-container:has(.tdn-acct),
.tdn-page__content:has(.tdn-acct) {
	max-width: 100% !important;
	padding: 0 !important;
}
.tdn-page:has(.tdn-acct) { padding-block: 0; }

.tdn-acct {
	background: #f8fafc;
	min-height: 100vh;
	padding: 64px 0;                                  /* py:8 */
}
.tdn-acct__container {
	max-width: 1200px;                                /* Container lg */
	margin: 0 auto;
	padding: 0 24px;
}
/* Guest CTA */
.tdn-acct--guest .tdn-acct__guest-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	padding: 48px;
	text-align: center;
}
.tdn-page__content .tdn-acct__guest-title,
.tdn-acct .tdn-acct__guest-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.5rem;
	font-weight: 700 !important;
	color: #002855 !important;
	margin: 0 0 12px;
}
.tdn-acct__guest-body { font-family: var(--font-sans); color: rgba(0,0,0,0.6); margin: 0 0 24px; }
.tdn-acct__guest-btn {
	display: inline-block;
	background: #002855;
	color: #fff;
	padding: 8px 22px;
	border-radius: 8px;
	font-family: var(--font-sans);
	font-weight: 700;
	text-decoration: none;
}

/* Header row */
.tdn-acct__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 48px;                              /* mb:6 */
	flex-wrap: wrap;
	gap: 16px;
}
.tdn-page__content .tdn-acct__welcome,
.tdn-acct .tdn-acct__welcome {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3rem;                                  /* h3 */
	font-weight: 700 !important;
	color: #002855 !important;
	margin: 0 0 16px;                                 /* gutterBottom */
	line-height: 1.167;
	word-break: break-word;
}
.tdn-acct__status-row { display: flex; align-items: center; gap: 16px; }
.tdn-acct__status-label {
	font-family: var(--font-sans);
	font-size: 1.25rem;                               /* h6 */
	font-weight: 500;
	color: rgba(0,0,0,0.6);
}
.tdn-acct__chip {
	display: inline-block;
	padding: 12px 16px;                               /* py:2 in chip context */
	border-radius: 16px;
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}
.tdn-acct__chip--default { background: rgba(0,0,0,0.08); color: rgba(0,0,0,0.87); }
.tdn-acct__chip--success { background: #2e7d32; color: #fff; }
.tdn-acct__logout {
	display: inline-block;
	border: 1px solid rgba(211,47,47,0.5);
	color: #d32f2f;
	padding: 5px 15px;
	border-radius: 8px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	background: transparent;
	transition: background 0.2s, border-color 0.2s;
}
.tdn-acct__logout:hover { background: rgba(211,47,47,0.04); border-color: #d32f2f; }

/* 2-col / 3-col grids */
.tdn-acct__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;                                        /* spacing:4 */
	margin-bottom: 48px;                              /* mb:6 */
}
@media ( min-width: 900px ) {
	.tdn-acct__grid--2 { grid-template-columns: repeat(2, 1fr); }
	.tdn-acct__grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Cards */
.tdn-acct__card {
	background: #f5f5f5;                              /* MUI background.paper override */
	border-radius: 4px;
	box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
	height: 100%;
	display: flex;
}
.tdn-acct__card-body { padding: 32px; flex: 1; }    /* p:4 */
.tdn-page__content .tdn-acct__card-title,
.tdn-acct .tdn-acct__card-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.5rem;                                /* h5 */
	font-weight: 700 !important;
	color: rgba(0,0,0,0.87) !important;
	margin: 0 0 24px;                                 /* mb:3 */
}
.tdn-acct__card-body-text {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	color: rgba(0,0,0,0.6);
	margin: -16px 0 24px;                             /* mb:1 then mb:3 → tighter */
}

/* Form rows + MUI outlined fields */
.tdn-acct__form { display: flex; flex-direction: column; gap: 24px; }
.tdn-acct__row { display: flex; gap: 16px; }

.tdn-acct__field {
	position: relative;
	display: block;
}
.tdn-acct__row .tdn-acct__field { flex: 1; }
.tdn-acct__field input,
.tdn-acct__field select,
.tdn-acct__field textarea {
	width: 100%;
	padding: 10.5px 14px;                             /* MUI size=small input padding */
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	background: #fff;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: rgba(0,0,0,0.87);
	box-sizing: border-box;
}
.tdn-acct__field textarea { padding: 16.5px 14px; resize: vertical; min-height: 96px; }
.tdn-acct__field input:focus,
.tdn-acct__field select:focus,
.tdn-acct__field textarea:focus {
	outline: none;
	border-color: #1976d2;
	border-width: 2px;
	padding: 9.5px 13px;                              /* compensate for 2px border */
}
.tdn-acct__field textarea:focus { padding: 15.5px 13px; }
.tdn-acct__field--disabled input,
.tdn-acct__field input:disabled {
	background: rgba(0,0,0,0.04);
	color: rgba(0,0,0,0.38);
	-webkit-text-fill-color: rgba(0,0,0,0.38);
}
/* Floating label */
.tdn-acct__field-label {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%) scale(1);
	transform-origin: top left;
	background: #f5f5f5;                              /* match Card bg */
	padding: 0 4px;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: rgba(0,0,0,0.6);
	pointer-events: none;
	transition: transform 0.2s, color 0.2s;
}
.tdn-acct__field--textarea .tdn-acct__field-label { top: 24px; }
.tdn-acct__field input:not(:placeholder-shown) + .tdn-acct__field-label,
.tdn-acct__field input:focus + .tdn-acct__field-label,
.tdn-acct__field textarea:not(:placeholder-shown) + .tdn-acct__field-label,
.tdn-acct__field textarea:focus + .tdn-acct__field-label,
.tdn-acct__field select:valid + .tdn-acct__field-label,
.tdn-acct__field select:focus + .tdn-acct__field-label {
	transform: translateY(-50%) scale(0.75);
	top: 0;
	color: #1976d2;
}
.tdn-acct__field input:not(:placeholder-shown):not(:focus) + .tdn-acct__field-label,
.tdn-acct__field textarea:not(:placeholder-shown):not(:focus) + .tdn-acct__field-label,
.tdn-acct__field select:valid:not(:focus) + .tdn-acct__field-label {
	color: rgba(0,0,0,0.6);
}
.tdn-acct__field-help {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	color: rgba(0,0,0,0.6);
	margin: 4px 14px 0;
}

/* Newsletter switch list */
.tdn-acct__switch-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 200px;
	overflow-y: auto;
	padding: 8px;
	border: 1px solid #f1f5f9;
	border-radius: 4px;
	margin-bottom: 24px;                              /* mt:3 on button */
}
.tdn-acct__switch {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 4px 11px;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: rgba(0,0,0,0.87);
}
.tdn-acct__switch input { appearance: none; position: absolute; opacity: 0; pointer-events: none; }
.tdn-acct__switch-track {
	position: relative;
	width: 34px;
	height: 14px;
	background: rgba(0,0,0,0.38);
	border-radius: 7px;
	flex-shrink: 0;
	transition: background 0.2s;
}
.tdn-acct__switch-thumb {
	position: absolute;
	top: -3px;
	left: 0;
	width: 20px;
	height: 20px;
	background: #fafafa;
	border-radius: 50%;
	box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
	transition: left 0.2s, background 0.2s;
}
.tdn-acct__switch input:checked + .tdn-acct__switch-track { background: rgba(0,40,85,0.5); }
.tdn-acct__switch input:checked + .tdn-acct__switch-track .tdn-acct__switch-thumb { left: 14px; background: #002855; }

/* Buttons */
.tdn-acct__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tdn-acct__btn--primary {
	background: #002855;
	color: #fff;
	box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
}
.tdn-acct__btn--primary:hover { background: #001d3e; box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2); }
.tdn-acct__btn--outlined {
	background: transparent;
	color: #002855;
	border-color: rgba(0,40,85,0.5);
}
.tdn-acct__btn--outlined:hover { background: rgba(0,40,85,0.04); border-color: #002855; }
.tdn-acct__btn--text { background: transparent; color: rgba(0,0,0,0.87); }
.tdn-acct__btn--text:hover { background: rgba(0,0,0,0.04); }
.tdn-acct__btn--upgrade {
	background: #002855;
	color: #fff;
	padding: 6px 16px;
	margin-top: 16px;
}
.tdn-acct__btn--self-start { align-self: flex-start; }
.tdn-acct__btn--full { width: 100%; padding: 12px 16px; }   /* py:1.5 */
.tdn-acct__btn--disabled {
	background: rgba(0,0,0,0.12);
	color: rgba(0,0,0,0.26);
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}
.tdn-acct__btn:disabled {
	background: rgba(0,0,0,0.12);
	color: rgba(0,0,0,0.26);
	box-shadow: none;
	cursor: not-allowed;
}

/* Section header */
.tdn-page__content .tdn-acct__section-title,
.tdn-acct .tdn-acct__section-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.125rem;                              /* h4 */
	font-weight: 700 !important;
	color: rgba(0,0,0,0.87) !important;
	margin: 0 0 32px;                                 /* mb:4 */
	padding-bottom: 16px;                             /* pb:2 */
	border-bottom: 2px solid #e2e8f0;
}

/* Vault cards (Calendar / Q&A / Test) */
.tdn-acct__vault {
	position: relative;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s, box-shadow 0.3s;
}
.tdn-acct__vault--locked { background: #f1f5f9; opacity: 0.85; }
.tdn-acct__vault--open:hover {
	transform: translateY(-5px);
	box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
}
.tdn-acct__vault-lock {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 10;
	border-radius: 4px;
}
.tdn-acct__vault-lock-text {
	font-family: var(--font-sans);
	font-size: 1.25rem;                               /* h6 */
	font-weight: 700;
	color: #64748b;
	margin: 16px 0 0;
}
.tdn-acct__vault-body { padding: 32px; flex: 1; display: flex; flex-direction: column; }
.tdn-acct__vault-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.tdn-page__content .tdn-acct__vault-title,
.tdn-acct .tdn-acct__vault-title {
	font-family: var(--font-sans);
	font-size: 1.5rem;                                /* h5 */
	font-weight: 700 !important;
	color: rgba(0,0,0,0.87) !important;
	margin: 0;
}
.tdn-acct__vault-text {
	font-family: var(--font-sans);
	font-size: 1rem;
	color: rgba(0,0,0,0.6);
	margin: 0 0 32px;                                 /* mb:4 */
	flex: 1;
}

/* Dialog (modal) */
.tdn-acct__dialog {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
}
.tdn-acct__dialog[hidden] { display: none; }
.tdn-acct__dialog-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.tdn-acct__dialog-panel {
	position: relative;
	background: #fff;
	border-radius: 4px;
	width: 100%;
	max-width: 600px;                                 /* maxWidth="sm" */
	max-height: calc(100vh - 64px);
	display: flex;
	flex-direction: column;
	box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
}
.tdn-acct__dialog-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #002855;
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.25rem;
	font-weight: 500;
	padding: 16px 24px;
}
.tdn-acct__dialog-close {
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	display: inline-flex;
	transition: background 0.2s;
}
.tdn-acct__dialog-close:hover { background: rgba(255,255,255,0.08); }
.tdn-acct__dialog-body {
	background: #f8fafc;
	padding: 24px;
	overflow-y: auto;
	border-top: 1px solid rgba(0,0,0,0.12);
	border-bottom: 1px solid rgba(0,0,0,0.12);
}
.tdn-acct__dialog-body .tdn-acct__field-label { background: #f8fafc; }
.tdn-acct__dialog-intro {
	font-family: var(--font-sans);
	color: rgba(0,0,0,0.6);
	margin: 0 0 24px;
}
.tdn-acct__qa-form { display: flex; flex-direction: column; gap: 24px; }
.tdn-acct__dialog-actions { padding: 8px 24px; display: flex; justify-content: flex-end; gap: 8px; }

/* Snackbar */
.tdn-acct__snack {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #2e7d32;
	color: #fff;
	padding: 6px 16px;
	border-radius: 4px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
	z-index: 1400;
	min-width: 288px;
	max-width: 568px;
}
.tdn-acct__snack[hidden] { display: none; }

/* ============================================================
 * [tdn_list] / ListPageLayout — shared shell for Wave-B list routes.
 *   Strict port of components/layout/ListPageLayout.tsx:
 *     Container lg py:4
 *     Header row mb:4: [Facts btn 100×40] [h4 title center] [Opinions btn 150×40]
 *     Search bar (mb:3)
 *     Filter accordion (collapsed)
 *     Sort accordion (collapsed) with chip row
 *     Content grid (mb:4)
 *     Pagination (centered, only if totalPages > 1)
 *
 * Button geometry: 40px tall, 5px border, 15px radius, textTransform:none,
 * fontWeight:bold, fontSize:18px. Facts color #5f7da9 / Opinions #a42a38.
 * ============================================================ */
.tdn-lp__container {
	max-width: 1200px;                                /* Container lg */
	margin: 0 auto;
	padding: 32px 24px;                               /* py:4 = 32px */
}
/* Header row */
.tdn-lp__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px;                              /* mb:4 */
}
.tdn-page__content .tdn-lp__title,
.tdn-lp .tdn-lp__title {
	font-family: var(--font-sans);
	font-size: 2.125rem;                              /* h4 */
	font-weight: 700 !important;
	color: rgba(0,0,0,0.87) !important;
	text-align: center;
	flex: 1;
	margin: 0;
	line-height: 1.235;
}
.tdn-lp__tab,
.tdn-lp__tab-spacer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 15px;
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 700;
	box-sizing: border-box;
}
.tdn-lp__tab {
	border: 5px solid currentColor;
	background: transparent;
	color: #000;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.tdn-lp__tab--facts:hover    { background: #5f7da9; color: #fff; }
.tdn-lp__tab--opinions:hover { background: #a42a38; color: #fff; }
.tdn-lp__tab--active { color: #fff !important; }
.tdn-lp__tab-spacer { visibility: hidden; }

/* Controls (search + accordions) */
.tdn-lp__controls { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.tdn-lp__search {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8.5px 14px;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 4px;
	background: #fff;
}
.tdn-lp__search input {
	border: 0;
	outline: 0;
	background: transparent;
	flex: 1;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: rgba(0,0,0,0.87);
}
.tdn-lp__acc {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
}
.tdn-lp__acc summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.tdn-lp__acc summary::-webkit-details-marker { display: none; }
.tdn-lp__acc-label {
	flex: 1;
	font-family: var(--font-sans);
	font-weight: 700;
	color: rgba(0,0,0,0.87);
}
.tdn-lp__clear {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	color: #1976d2;
	text-decoration: none;
	padding: 4px 5px;
	border-radius: 4px;
	background: transparent;
	min-width: 64px;
	text-align: center;
}
.tdn-lp__clear:hover { background: rgba(25,118,210,0.04); }
.tdn-lp__acc-icon { transition: transform 0.2s; color: rgba(0,0,0,0.54); }
.tdn-lp__acc[open] .tdn-lp__acc-icon { transform: rotate(180deg); }
.tdn-lp__acc-body { padding: 8px 16px 16px; border-top: 1px solid #e0e0e0; }
.tdn-lp__acc-hint { font-family: var(--font-sans); color: rgba(0,0,0,0.6); margin: 0; }
.tdn-lp__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tdn-lp__chip {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 16px;
	border: 1px solid rgba(0,0,0,0.23);
	background: transparent;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	color: rgba(0,0,0,0.87);
	text-decoration: none;
}
.tdn-lp__chip:hover { background: rgba(0,0,0,0.04); }
.tdn-lp__chip--on {
	background: #002855;
	color: #fff;
	border-color: #002855;
}

/* Content grid */
.tdn-lp__content { margin-bottom: 32px; }
.tdn-lp__grid {
	display: grid;
	gap: 24px;                                        /* Grid spacing={3} */
	grid-template-columns: 1fr;                       /* meetings/governments/etc default xs:12 */
}
.tdn-lp__grid--people,
.tdn-lp__grid--documents,
.tdn-lp__grid--votes {
	grid-template-columns: 1fr;
}
@media ( min-width: 600px ) {
	.tdn-lp__grid--people    { grid-template-columns: repeat(2, 1fr); }
	.tdn-lp__grid--documents { grid-template-columns: repeat(2, 1fr); }
}
@media ( min-width: 900px ) {
	.tdn-lp__grid--people    { grid-template-columns: repeat(3, 1fr); }
}
.tdn-lp__empty {
	background: #fff;
	border-radius: 8px;
	padding: 48px;
	text-align: center;
	color: rgba(0,0,0,0.6);
	font-family: var(--font-sans);
}

/* Pagination */
.tdn-lp__pagi {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 16px;
}
.tdn-lp__pagi-item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 20px;
	font-family: var(--font-sans);
	font-size: 0.9375rem;                             /* size="large" */
	color: rgba(0,0,0,0.87);
	text-decoration: none;
}
.tdn-lp__pagi-item .page-numbers:hover { background: rgba(0,0,0,0.04); }
.tdn-lp__pagi-item .current {
	background: #002855;
	color: #fff;
}

/* ============================================================
 * single-meeting (/meetings/<slug>/) — strict port of
 * /record/[id]/page.tsx (the actual destination of RecordCard's
 * "View Full Details" button).
 *
 *   <Stack spacing={4}>
 *     (a) Card borderRadius:3 borderTop:6px-#002855 — chips + date + buttons
 *     (b) YouTube iframe (full width, 16:9, rounded)
 *     (c) AI Summary Card bg:#f8fafc — ArticleIcon + h5 Georgia + body
 *     (d) Transcript Card — h6 + monospace box (#f1f5f9 bg, maxH:400, scroll)
 * ============================================================ */
.tdn-record-stack { display: flex; flex-direction: column; gap: 32px; }   /* spacing:4 */

/* (a) Header Card */
.tdn-record-card {
	background: #fff;
	border-radius: 12px;                              /* borderRadius:3 */
	box-shadow: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
	overflow: hidden;
}
.tdn-record-card--header { border-top: 6px solid #002855; }
.tdn-record-card__body { padding: 32px; }            /* p:4 */
.tdn-record-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;                              /* mb:2 */
}
.tdn-record-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 16px;
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	line-height: 1.5;
}
.tdn-record-chip--type {
	background: #e2e8f0;
	color: rgba(0,0,0,0.87);
	font-weight: 700;
}
.tdn-record-chip--juris {
	background: transparent;
	color: #002855;
	border: 1px solid #002855;
	font-weight: 500;
}
.tdn-record-date {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(0,0,0,0.6);
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 500;
	margin-bottom: 32px;                              /* mb:4 */
}
.tdn-record-date svg { flex-shrink: 0; }
.tdn-record-buttons {
	display: flex;
	flex-direction: column;
	gap: 16px;                                        /* spacing:2 */
}
@media ( min-width: 600px ) {
	.tdn-record-buttons { flex-direction: row; flex-wrap: wrap; }
}
.tdn-record-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 22px;                                /* size:large MUI Button */
	border: 1px solid rgba(0,40,85,0.5);
	border-radius: 8px;                               /* borderRadius:2 */
	background: transparent;
	color: #002855;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	text-transform: none;
	transition: background 0.2s, border-color 0.2s;
}
.tdn-record-btn:hover {
	background: rgba(0,40,85,0.04);
	border-color: #002855;
}
.tdn-record-btn--secondary {
	border-color: rgba(156,39,176,0.5);
	color: #9c27b0;                                   /* MUI secondary default purple */
}
.tdn-record-btn--secondary:hover {
	background: rgba(156,39,176,0.04);
	border-color: #9c27b0;
}

/* (b) YouTube embed */
.tdn-record-video {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
.tdn-record-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* (c) AI Summary Card */
.tdn-record-card--summary { background: #f8fafc; }
.tdn-record-summary-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;                              /* mb:2 */
}
.tdn-page__content .tdn-record-summary-title,
.tdn-record-card .tdn-record-summary-title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.5rem;                                /* h5 */
	font-weight: 700 !important;
	color: rgba(0,0,0,0.87) !important;
	margin: 0;
}
.tdn-record-summary-body {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.8;
	color: #334155;
	white-space: pre-line;
	margin: 0;
}

/* (d) Transcript Card */
.tdn-page__content .tdn-record-transcript-title,
.tdn-record-card .tdn-record-transcript-title {
	font-family: var(--font-sans);
	font-size: 1.25rem;                               /* h6 */
	font-weight: 700 !important;
	color: rgba(0,0,0,0.87) !important;
	margin: 0 0 16px;                                 /* gutterBottom */
}
.tdn-record-transcript-box {
	padding: 24px;                                    /* p:3 */
	background: #f1f5f9;
	border-radius: 8px;
	max-height: 400px;
	overflow-y: auto;
}
.tdn-record-transcript-text {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: 0.875rem;
	color: #475569;
	white-space: pre-line;
	margin: 0;
}

/* ============================================================
 * Tier 1 polish — silhouette + city-hall fallback SVGs, 404 page,
 * calendar restricted (Tier-3 paywall) card.
 * ============================================================ */
.tdn-card__media-silhouette,
.tdn-card__media-cityhall {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* 404 page */
.tdn-404 {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 64px 24px;
}
.tdn-404__inner { max-width: 640px; text-align: center; }
.tdn-404__eyebrow {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #a42a38;
	margin: 0 0 16px;
}
.tdn-404__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3rem;
	font-weight: 700;
	color: #002855;
	margin: 0 0 24px;
	line-height: 1.1;
}
.tdn-404__lede {
	font-family: var(--font-sans);
	font-size: 1.125rem;
	color: rgba(0,0,0,0.6);
	line-height: 1.6;
	margin: 0 0 40px;
}
.tdn-404__search {
	display: flex;
	gap: 8px;
	margin: 0 auto 40px;
	max-width: 480px;
}
.tdn-404__search-input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid rgba(0,0,0,0.23);
	border-radius: 8px;
	font-family: var(--font-sans);
	font-size: 1rem;
}
.tdn-404__search-input:focus {
	outline: 2px solid #002855;
	outline-offset: -1px;
	border-color: #002855;
}
.tdn-404__search-btn {
	padding: 12px 24px;
	background: #002855;
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-family: var(--font-sans);
	font-weight: 700;
	cursor: pointer;
}
.tdn-404__search-btn:hover { background: #001d3e; }
.tdn-404__links-label {
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(0,0,0,0.6);
	margin: 0 0 16px;
}
.tdn-404__links-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.tdn-404__link {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #002855;
	border-radius: 20px;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	color: #002855;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}
.tdn-404__link:hover { background: #002855; color: #fff; }

/* Calendar — Tier-3 restricted card (matches React's app/calendar/page.tsx
 * unauthorized branch). */
.tdn-cal-restricted {
	background: #fff;
	border-radius: 16px;
	padding: 64px 32px;
	text-align: center;
	max-width: 640px;
	margin: 64px auto;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.tdn-cal-restricted__title {
	font-family: var(--font-sans);
	font-size: 2.125rem;
	font-weight: 700;
	color: #002855;
	margin: 16px 0 16px;
}
.tdn-cal-restricted__body {
	font-family: var(--font-sans);
	font-size: 1rem;
	color: rgba(0,0,0,0.6);
	margin: 0 0 32px;
	line-height: 1.5;
}
.tdn-cal-restricted__btn {
	display: inline-block;
	padding: 12px 28px;
	background: #a42a38;
	color: #fff;
	border-radius: 8px;
	font-family: var(--font-sans);
	font-weight: 700;
	text-decoration: none;
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
}
.tdn-cal-restricted__btn:hover { background: #8b2230; }

/* ============================================================
 * Newsletter signup ([tdn_newsletter_signup]) — two variants:
 *   variant=footer — compact one-line, inverted colors for dark footer
 *   variant=card   — boxed with heading + lede (homepage / inline)
 * ============================================================ */
.tdn-footer__newsletter {
	border-top: 1px solid rgba(255,255,255,0.15);
	padding-top: 24px;
	margin-bottom: 16px;
}
.tdn-news-signup--footer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 520px;
	margin: 0 auto;
}
.tdn-news-signup--card {
	background: #f8fafc;
	border-radius: 12px;
	padding: 32px;
	max-width: 520px;
	margin: 32px auto;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	text-align: center;
}
.tdn-news-signup__heading {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #002855;
	margin: 0 0 8px;
}
.tdn-news-signup__lede {
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	color: rgba(0,0,0,0.6);
	margin: 0 0 16px;
}
.tdn-news-signup__row {
	display: flex;
	gap: 8px;
}
.tdn-news-signup__email {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 8px;
	background: rgba(255,255,255,0.95);
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	color: rgba(0,0,0,0.87);
}
.tdn-news-signup--card .tdn-news-signup__email {
	border-color: rgba(0,0,0,0.23);
}
.tdn-news-signup__email:focus {
	outline: 2px solid #fff;
	outline-offset: -1px;
}
.tdn-news-signup--card .tdn-news-signup__email:focus { outline-color: #002855; }
.tdn-news-signup__btn {
	padding: 10px 18px;
	background: #fff;
	color: #002855;
	border: 0;
	border-radius: 8px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background 0.2s;
}
.tdn-news-signup--card .tdn-news-signup__btn {
	background: #002855;
	color: #fff;
}
.tdn-news-signup__btn:hover { background: rgba(255,255,255,0.85); }
.tdn-news-signup--card .tdn-news-signup__btn:hover { background: #001d3e; }
.tdn-news-signup__btn:disabled { opacity: 0.6; cursor: wait; }
.tdn-news-signup__status {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	margin: 4px 0 0;
	min-height: 1.2em;
	color: rgba(255,255,255,0.9);
}
.tdn-news-signup--card .tdn-news-signup__status { color: rgba(0,0,0,0.6); }
.tdn-news-signup__status--ok { color: #86efac !important; }
.tdn-news-signup__status--err { color: #fca5a5 !important; }
.tdn-news-signup--card .tdn-news-signup__status--ok { color: #15803d !important; }
.tdn-news-signup--card .tdn-news-signup__status--err { color: #b91c1c !important; }

/* ============================================================
 * Mobile responsiveness pass (Tier 2 #18) — fixes the 5 overflow
 * sources surfaced by visual-qa/mobile-audit.mjs at 375px viewport.
 *
 * Approach: clip horizontal scroll at the page level, then per-component
 * either stack, shrink, or enable horizontal scroll on the offender.
 * ============================================================ */

/* --- Page-level safety net ---
 * Prevent ANY rogue child from causing horizontal page scroll. Each
 * component still chooses its own internal scroll strategy below. */
html, body { max-width: 100vw; overflow-x: hidden; }

@media ( max-width: 640px ) {

	/* --- Home ticker (marquee LIVE POLLS bar) ---
	 * The track is intentionally wider than the viewport so it can animate
	 * across, but its parent must clip it to the screen. */
	.tdn-home-ticker        { max-width: 100vw; overflow: hidden; }
	.tdn-home-ticker__viewport { max-width: 100vw; overflow: hidden; }

	/* --- View-mode pills (Record / Analysis on /politics, /crime etc.) ---
	 * Two pills at 100px + 150px + gap don't fit at 375px. Stack them or
	 * shrink. Stacking reads better on a phone — title still centers. */
	.tdn-view-pills {
		flex-wrap: wrap;
		gap: 8px;
		row-gap: 8px;
	}
	.tdn-view-pill {
		flex: 0 1 auto;
		min-width: 0;
		font-size: 14px;
		padding: 4px 10px;
	}
	.tdn-view-pill--analysis { width: auto !important; }
	.tdn-view-pill--record   { width: auto !important; }
	.tdn-cat-header {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* --- Sports nav pills (ALL / PRO / SEMI / COLLEGE / HS) ---
	 * Five pills + filters add up to 408px. Make the container horizontally
	 * scrollable; user swipes left/right. Hide native scrollbar for clean look. */
	.tdn-sports-nav__pills,
	.tdn-sports-nav__leagues {
		overflow-x: auto;
		overflow-y: hidden;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.tdn-sports-nav__pills::-webkit-scrollbar,
	.tdn-sports-nav__leagues::-webkit-scrollbar { display: none; }
	.tdn-sports-nav__pill {
		flex-shrink: 0;
		white-space: nowrap;
	}
	.tdn-sports-nav__date {
		flex-shrink: 0;
		margin-left: auto;
	}

	/* --- Master Index segmented tabs (People / Topics / Meetings) ---
	 * Three pills overflow at 412px. Same horizontal-scroll treatment. */
	.tdn-mi__tabs {
		overflow-x: auto;
		overflow-y: hidden;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.tdn-mi__tabs::-webkit-scrollbar { display: none; }
	.tdn-mi__tab {
		flex-shrink: 0;
		white-space: nowrap;
		font-size: 13px;
		padding: 8px 12px;
	}

	/* --- Header masthead ---
	 * Mobile auth row (Subscribe / Login buttons) can crowd; allow wrap.
	 * Hide the weather chip on very narrow screens — it's secondary. */
	.tdn-topbar {
		flex-wrap: wrap;
		gap: 8px;
	}
	@media ( max-width: 420px ) {
		.tdn-topbar__weather { display: none; }
	}

	/* --- Hero / category headers ---
	 * Reduce hero font-size + padding so first-screen text fits without
	 * forcing horizontal scroll on extra-long titles. */
	.tdn-page__title         { font-size: 1.875rem; line-height: 1.15; }
	.tdn-section-hero h1,
	.tdn-section-hero h2     { font-size: 1.875rem; line-height: 1.15; }

	/* --- Footer (was tested; just tighten spacing) --- */
	.tdn-footer__inner {
		flex-direction: column;
		text-align: center;
		gap: 16px;
	}
	.tdn-footer__links {
		justify-content: center;
		flex-wrap: wrap;
	}

	/* --- Single-meeting "View Full Agenda" / "View Full Minutes" button row ---
	 * Already stacks via media query above 600px; this just enforces
	 * full-width buttons on tiny phones for thumb-friendly tap targets. */
	.tdn-record-buttons { flex-direction: column; }
	.tdn-record-btn     { width: 100%; justify-content: center; }

	/* --- Wave B list pages: filter sidebar + main feed ---
	 * Already responsive via min-width:900 break, but the search input row
	 * inside can crowd at very small widths. */
	.tdn-lp__search input { min-width: 0; }
}

/* ============================================================
 * ESPN-backed standings widget (Tier 2 #19) — replaces the old
 * "No standings available" placeholder. Renders per-conference
 * tables with team logo + W/L/PCT/GB columns.
 * ============================================================ */
.tdn-standings-widget__group { margin-bottom: 24px; }
.tdn-standings-widget__group-name {
	font-family: 'Oswald', var(--font-sans);
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #475569;
	margin: 0 0 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid #e2e8f0;
}
.tdn-standings-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans);
	font-size: 0.875rem;
}
.tdn-standings-table th {
	text-align: right;
	padding: 8px 6px;
	font-weight: 700;
	font-size: 0.75rem;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid #e2e8f0;
}
.tdn-standings-table th.tdn-standings-table__team { text-align: left; }
.tdn-standings-table td {
	padding: 8px 6px;
	text-align: right;
	color: #0f172a;
	border-bottom: 1px solid #f1f5f9;
}
.tdn-standings-table tr:last-child td { border-bottom: 0; }
.tdn-standings-table__team {
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
	color: #002855;
	font-weight: 600;
}
.tdn-standings-table__logo {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
}
@media ( max-width: 640px ) {
	.tdn-standings-table { font-size: 0.8125rem; }
	.tdn-standings-table th, .tdn-standings-table td { padding: 6px 4px; }
	.tdn-standings-table__logo { width: 16px; height: 16px; }
}

/* =====================================================================
 * Sports Phase 2 — match detail page (/sports/game/{league}/{eventId}/)
 * theScore-style structure, TDN editorial-light visual treatment.
 * ===================================================================== */

/* Clickable scoreboard row — added when ESPN event ID is known. */
.tdn-game-row.is-linkable {
	cursor: pointer;
	transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.tdn-game-row.is-linkable:hover {
	background: #fafbfc;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
	transform: translateY(-1px);
}
.tdn-game-row.is-linkable:focus-within {
	outline: 2px solid var(--brand-navy, #002855);
	outline-offset: 2px;
}

/* Match-page outer wrapper from sports-match.php theme template. */
.tdn-match-page {
	background: #f8fafc;
	min-height: 100vh;
	padding: 0 0 64px;
}

.tdn-match {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 24px 0;
}

.tdn-match-empty {
	max-width: 640px;
	margin: 80px auto;
	padding: 32px;
	text-align: center;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}
.tdn-match-empty__back {
	color: var(--brand-navy, #002855);
	font-weight: 700;
	text-decoration: none;
}

/* Breadcrumb */
.tdn-match__crumb {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.78rem;
	color: #6b7280;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 16px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.tdn-match__crumb a {
	color: var(--brand-navy, #002855);
	text-decoration: none;
	font-weight: 700;
}
.tdn-match__crumb a:hover { text-decoration: underline; }

/* Score hero */
.tdn-match__hero {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 28px 28px 24px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.tdn-match__hero-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid #f1f5f9;
}
.tdn-match__team {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 16px;
	align-items: center;
}
.tdn-match__team--away { grid-template-columns: 56px 1fr auto; }
.tdn-match__team-logo {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: 4px;
}
.tdn-match__team-logo--swatch { display: inline-block; }
.tdn-match__team-text { display: flex; flex-direction: column; min-width: 0; }
.tdn-match__team-name {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdn-match__team-record {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.75rem;
	color: #64748b;
	margin-top: 2px;
}
.tdn-match__team-score {
	font-family: var(--font-sans, sans-serif);
	font-size: 2.5rem;
	font-weight: 800;
	color: #94a3b8;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.tdn-match__team.is-winner .tdn-match__team-score {
	color: var(--brand-navy, #002855);
}
.tdn-match__team.is-winner .tdn-match__team-name {
	color: var(--brand-navy, #002855);
}

/* Status banner */
.tdn-match__status {
	text-align: center;
	padding: 14px 0 4px;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
}
.tdn-match__status.is-live {
	color: #d32f2f;
}
.tdn-match__status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #d32f2f;
	border-radius: 50%;
	animation: tdn-match-pulse 1.5s ease-in-out infinite;
}
@keyframes tdn-match-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.85); }
}

/* Meta dl row (Venue / TV / Attendance / Date) */
.tdn-match__meta {
	display: flex;
	gap: 32px;
	margin: 8px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid #f1f5f9;
	flex-wrap: wrap;
	justify-content: center;
}
.tdn-match__meta > div { display: flex; flex-direction: column; align-items: center; }
.tdn-match__meta dt {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.65rem;
	font-weight: 700;
	color: #94a3b8;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}
.tdn-match__meta dd {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.85rem;
	color: #0f172a;
	margin: 2px 0 0;
	font-weight: 600;
}

/* Tab strip */
.tdn-match__tabs {
	display: flex;
	gap: 4px;
	margin: 20px 0 0;
	border-bottom: 2px solid #e5e7eb;
	overflow-x: auto;
}
.tdn-match__tab {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #64748b;
	background: transparent;
	border: 0;
	padding: 12px 18px;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color 0.12s ease, border-color 0.12s ease;
	white-space: nowrap;
}
.tdn-match__tab:hover { color: #0f172a; }
.tdn-match__tab.is-active {
	color: var(--brand-navy, #002855);
	border-bottom-color: var(--brand-navy, #002855);
}
.tdn-match__tab[hidden] { display: none; }

/* Panel container */
.tdn-match__panels {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-top: 0;
	border-radius: 0 0 14px 14px;
	padding: 24px 28px;
	margin-bottom: 24px;
}
.tdn-match__panel[hidden] { display: none; }
.tdn-match__placeholder {
	color: #94a3b8;
	font-style: italic;
	text-align: center;
	padding: 32px 0;
	margin: 0;
}

/* Mobile */
@media (max-width: 640px) {
	.tdn-match { padding: 16px 12px 0; }
	.tdn-match__hero { padding: 20px 16px 18px; border-radius: 10px; }
	.tdn-match__hero-row { grid-template-columns: 1fr 1fr; gap: 12px; }
	.tdn-match__team { grid-template-columns: 40px 1fr auto; gap: 10px; }
	.tdn-match__team-logo { width: 40px; height: 40px; }
	.tdn-match__team-name { font-size: 0.9rem; }
	.tdn-match__team-score { font-size: 1.8rem; }
	.tdn-match__meta { gap: 16px; }
	.tdn-match__tab { padding: 10px 12px; font-size: 0.78rem; }
	.tdn-match__panels { padding: 16px; border-radius: 0 0 10px 10px; }
}

/* --- Match: Game tab (line score / scoring summary / leaders) --- */
.tdn-match-game__linescore-wrap {
	overflow-x: auto;
	margin: 0 0 24px;
}
.tdn-match-game__linescore {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans, sans-serif);
}
.tdn-match-game__linescore th,
.tdn-match-game__linescore td {
	padding: 10px 12px;
	text-align: center;
	font-size: 0.85rem;
	border-bottom: 1px solid #f1f5f9;
	font-variant-numeric: tabular-nums;
}
.tdn-match-game__linescore thead th {
	color: #94a3b8;
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.tdn-match-game__linescore tbody th {
	text-align: left;
	font-weight: 700;
	color: #0f172a;
	padding-left: 0;
}
.tdn-match-game__linescore tbody tr.is-winner th,
.tdn-match-game__linescore tbody tr.is-winner .tdn-match-game__linescore-total {
	color: var(--brand-navy, #002855);
}
.tdn-match-game__linescore-total {
	font-weight: 800;
	font-size: 1rem;
	color: #0f172a;
}

.tdn-match-game__block {
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid #f1f5f9;
}
.tdn-match-game__block:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.tdn-match-game__block-title {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
	margin: 0 0 14px;
}

/* Scoring summary list */
.tdn-match-game__scoring {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tdn-match-game__scoring-item {
	display: grid;
	grid-template-columns: 92px 56px 1fr auto;
	gap: 12px;
	align-items: baseline;
	padding: 10px 12px;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid var(--brand-navy, #002855);
	font-family: var(--font-sans, sans-serif);
	font-size: 0.88rem;
}
.tdn-match-game__scoring-when {
	color: #64748b;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
.tdn-match-game__scoring-team {
	font-weight: 800;
	color: var(--brand-navy, #002855);
	font-size: 0.85rem;
}
.tdn-match-game__scoring-text {
	color: #0f172a;
	line-height: 1.45;
}
.tdn-match-game__scoring-score {
	color: #64748b;
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Leaders — two-column team breakdown */
.tdn-match-game__leaders {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.tdn-match-game__leaders-col {
	display: flex;
	flex-direction: column;
}
.tdn-match-game__leaders-team {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--brand-navy, #002855);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #f1f5f9;
}
.tdn-match-game__leaders-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tdn-match-game__leader-cat {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 4px;
}
.tdn-match-game__leader-row {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 10px;
	align-items: center;
}
.tdn-match-game__leader-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: #f1f5f9;
}
.tdn-match-game__leader-avatar--placeholder {
	display: inline-block;
}
.tdn-match-game__leader-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.tdn-match-game__leader-name {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.88rem;
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tdn-match-game__leader-pos {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.7rem;
	color: #94a3b8;
}
.tdn-match-game__leader-value {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--brand-navy, #002855);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

@media (max-width: 640px) {
	.tdn-match-game__scoring-item {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.tdn-match-game__scoring-when,
	.tdn-match-game__scoring-team,
	.tdn-match-game__scoring-score {
		font-size: 0.7rem;
	}
	.tdn-match-game__leaders {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* --- Match: Stats tab (team comparison + player tables) --- */
.tdn-match-stats__block {
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid #f1f5f9;
}
.tdn-match-stats__block:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.tdn-match-stats__legend {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 14px;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	color: #0f172a;
}
.tdn-match-stats__legend-team {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tdn-match-stats__legend-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

.tdn-match-stats__bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tdn-match-stats__bar { font-family: var(--font-sans, sans-serif); }
.tdn-match-stats__bar-head {
	display: grid;
	grid-template-columns: 64px 1fr 64px;
	align-items: center;
	gap: 12px;
	font-size: 0.85rem;
	margin-bottom: 6px;
}
.tdn-match-stats__bar-away {
	text-align: left;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #0f172a;
}
.tdn-match-stats__bar-label {
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #64748b;
}
.tdn-match-stats__bar-home {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #0f172a;
}
.tdn-match-stats__bar-track {
	display: flex;
	height: 8px;
	border-radius: 4px;
	overflow: hidden;
	background: #f1f5f9;
}
.tdn-match-stats__bar-fill {
	height: 100%;
	transition: width 0.3s ease;
}
.tdn-match-stats__bar-fill--away { border-radius: 4px 0 0 4px; }
.tdn-match-stats__bar-fill--home { border-radius: 0 4px 4px 0; }

/* Player stats tables */
.tdn-match-stats__team-block {
	margin-top: 24px;
}
.tdn-match-stats__team-block:first-of-type { margin-top: 16px; }
.tdn-match-stats__team-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--brand-navy, #002855);
	margin: 0 0 8px;
}
.tdn-match-stats__cat {
	border-top: 1px solid #f1f5f9;
	padding: 8px 0;
}
.tdn-match-stats__cat-summary {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #64748b;
	cursor: pointer;
	padding: 6px 0;
	list-style: none;
	position: relative;
	padding-left: 18px;
}
.tdn-match-stats__cat-summary::-webkit-details-marker { display: none; }
.tdn-match-stats__cat-summary::before {
	content: '▸';
	position: absolute;
	left: 0;
	font-size: 0.8rem;
	color: #94a3b8;
	transition: transform 0.15s ease;
}
.tdn-match-stats__cat[open] > .tdn-match-stats__cat-summary::before {
	transform: rotate(90deg);
}
.tdn-match-stats__cat-table-wrap {
	overflow-x: auto;
	margin: 8px 0 0;
}
.tdn-match-stats__cat-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.82rem;
}
.tdn-match-stats__cat-table th,
.tdn-match-stats__cat-table td {
	padding: 8px 10px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	border-bottom: 1px solid #f1f5f9;
	white-space: nowrap;
}
.tdn-match-stats__cat-table th:first-child,
.tdn-match-stats__cat-table td:first-child {
	text-align: left;
	font-weight: 700;
	color: #0f172a;
}
.tdn-match-stats__cat-table thead th {
	color: #94a3b8;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.tdn-match-stats__cat-pos {
	color: #94a3b8;
	font-size: 0.7rem;
	font-weight: 600;
	margin-left: 6px;
}

@media (max-width: 640px) {
	.tdn-match-stats__bar-head { grid-template-columns: 48px 1fr 48px; gap: 8px; font-size: 0.78rem; }
	.tdn-match-stats__bar-label { font-size: 0.65rem; }
	.tdn-match-stats__cat-table { font-size: 0.75rem; }
}

/* --- Match: Plays tab --- */
.tdn-match-plays {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 720px;
	overflow-y: auto;
	border: 1px solid #f1f5f9;
	border-radius: 10px;
	padding: 12px;
	background: #fafbfc;
}
.tdn-match-plays__item {
	display: grid;
	grid-template-columns: 90px 1fr auto;
	gap: 14px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #f1f5f9;
	border-radius: 8px;
	align-items: start;
	font-family: var(--font-sans, sans-serif);
}
.tdn-match-plays__item.is-scoring {
	border-left: 3px solid var(--brand-navy, #002855);
	background: #fff8e1;
}
.tdn-match-plays__when {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-variant-numeric: tabular-nums;
}
.tdn-match-plays__period {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #64748b;
}
.tdn-match-plays__clock {
	font-size: 0.85rem;
	font-weight: 700;
	color: #0f172a;
}
.tdn-match-plays__body { min-width: 0; }
.tdn-match-plays__team-badge {
	display: inline-block;
	background: #0f172a;
	color: #fff;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 3px 6px;
	border-radius: 3px;
	margin-right: 8px;
	vertical-align: 1px;
}
.tdn-match-plays__type {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-right: 6px;
}
.tdn-match-plays__text {
	margin: 4px 0 0;
	font-size: 0.85rem;
	color: #0f172a;
	line-height: 1.45;
}
.tdn-match-plays__score {
	display: flex;
	gap: 4px;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--brand-navy, #002855);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	align-self: center;
}

/* --- Match: Lineups tab --- */
.tdn-match-lineups {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.tdn-match-lineups__col {}
.tdn-match-lineups__team {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--brand-navy, #002855);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #f1f5f9;
}
.tdn-match-lineups__group {
	margin-bottom: 16px;
}
.tdn-match-lineups__group-title {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
	margin: 0 0 8px;
	cursor: pointer;
}
.tdn-match-lineups__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tdn-match-lineups__list li {
	display: grid;
	grid-template-columns: 40px 36px 1fr;
	gap: 10px;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px solid #f8fafc;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.85rem;
}
.tdn-match-lineups__jersey {
	font-weight: 800;
	color: #94a3b8;
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem;
}
.tdn-match-lineups__pos {
	font-weight: 700;
	color: var(--brand-navy, #002855);
	font-size: 0.72rem;
	text-transform: uppercase;
}
.tdn-match-lineups__name {
	color: #0f172a;
}

@media (max-width: 640px) {
	.tdn-match-plays__item { grid-template-columns: 72px 1fr; gap: 10px; }
	.tdn-match-plays__score { grid-column: 1 / -1; padding-top: 4px; border-top: 1px solid #f1f5f9; margin-top: 4px; }
	.tdn-match-lineups { grid-template-columns: 1fr; gap: 24px; }
	.tdn-match-lineups__list li { grid-template-columns: 32px 32px 1fr; }
}

/* --- Match: News tab --- */
.tdn-match-news__block {
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid #f1f5f9;
}
.tdn-match-news__block:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.tdn-match-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 14px;
}
.tdn-match-news__item {}
.tdn-match-news__link {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 12px;
	padding: 12px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.tdn-match-news__link:hover {
	border-color: var(--brand-navy, #002855);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
	transform: translateY(-1px);
}
.tdn-match-news__thumb {
	display: block;
	width: 88px;
	height: 64px;
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	background-color: #f1f5f9;
}
.tdn-match-news__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.tdn-match-news__tag {
	display: inline-block;
	background: var(--brand-navy, #002855);
	color: #fff;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 3px;
	width: fit-content;
}
.tdn-match-news__tag--ext {
	background: #94a3b8;
}
.tdn-match-news__title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 0.92rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tdn-match-news__byline {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.7rem;
	color: #94a3b8;
	margin-top: auto;
}
.tdn-match-news__item--press .tdn-match-news__link {
	border-left: 3px solid var(--brand-navy, #002855);
}

/* Live-poll indicator — appears in the status row only on live games. */
.tdn-match__status-poll {
	font-size: 0.65rem;
	color: #94a3b8;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	margin-left: 8px;
}

/* Phase 2 fix — individual-sport row overline (race name + field size). */
.tdn-game-row.is-individual {
	display: block;
	padding: 12px;
}
.tdn-game-row__event-name {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px dashed #f1f5f9;
	font-family: var(--font-sans, sans-serif);
}
.tdn-game-row__event-title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--brand-navy, #002855);
}
.tdn-game-row__event-meta {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #94a3b8;
}
.tdn-game-row.is-individual .tdn-game-row__status,
.tdn-game-row.is-individual .tdn-game-row__teams {
	display: inline-block;
}
.tdn-game-row.is-individual .tdn-game-row__status {
	margin-right: 12px;
}

/* =====================================================================
 * Sports Phase 3 — team detail page (/sports/team/{league}/{teamId}/)
 * ===================================================================== */

/* Inert team link — used on scoreboard rows when no team ID exists
 * (demo data, individual sports). Removes click affordance. */
.tdn-game-row__team-link--inert {
	cursor: default;
	color: inherit;
	text-decoration: none;
}

/* Outer page wrapper from sports-team.php theme template. */
.tdn-team-page {
	background: #f8fafc;
	min-height: 100vh;
	padding: 0 0 64px;
}

.tdn-team {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 24px 0;
}

.tdn-team-empty {
	max-width: 640px;
	margin: 80px auto;
	padding: 32px;
	text-align: center;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}
.tdn-team-empty__back {
	color: var(--brand-navy, #002855);
	font-weight: 700;
	text-decoration: none;
}

/* Breadcrumb */
.tdn-team__crumb {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.78rem;
	color: #6b7280;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 16px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.tdn-team__crumb a {
	color: var(--brand-navy, #002855);
	text-decoration: none;
	font-weight: 700;
}
.tdn-team__crumb a:hover { text-decoration: underline; }

/* Hero — uses --tdn-team-color CSS variable for the accent stripe. */
.tdn-team__hero {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
	border-top: 6px solid var(--tdn-team-color, #002855);
}
.tdn-team__hero-inner {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 24px;
	align-items: center;
}
.tdn-team__hero-logo {
	width: 96px;
	height: 96px;
	object-fit: contain;
	border-radius: 8px;
	background: #fff;
}
.tdn-team__hero-logo--placeholder {
	display: inline-block;
}
.tdn-team__hero-text { min-width: 0; }
.tdn-team__hero-location {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	color: #64748b;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.tdn-team__hero-name {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--brand-navy, #002855);
	line-height: 1.1;
	margin: 4px 0 8px;
}
.tdn-team__hero-meta {
	display: flex;
	gap: 16px;
	align-items: baseline;
	flex-wrap: wrap;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.88rem;
}
.tdn-team__hero-record {
	font-weight: 800;
	font-size: 1.1rem;
	color: var(--tdn-team-color, #0f172a);
	font-variant-numeric: tabular-nums;
}
.tdn-team__hero-standing {
	color: #64748b;
	font-weight: 600;
}

/* Tab strip — same shape as match page */
.tdn-team__tabs {
	display: flex;
	gap: 4px;
	margin: 20px 0 0;
	border-bottom: 2px solid #e5e7eb;
	overflow-x: auto;
}
.tdn-team__tab {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #64748b;
	background: transparent;
	border: 0;
	padding: 12px 18px;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color 0.12s ease, border-color 0.12s ease;
	white-space: nowrap;
}
.tdn-team__tab:hover { color: #0f172a; }
.tdn-team__tab.is-active {
	color: var(--brand-navy, #002855);
	border-bottom-color: var(--brand-navy, #002855);
}
.tdn-team__tab[hidden] { display: none; }

.tdn-team__panels {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-top: 0;
	border-radius: 0 0 14px 14px;
	padding: 24px 28px;
	margin-bottom: 24px;
}
.tdn-team__panel[hidden] { display: none; }
.tdn-team__placeholder {
	color: #94a3b8;
	font-style: italic;
	text-align: center;
	padding: 32px 0;
	margin: 0;
}
.tdn-team__block-title {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
	margin: 0 0 14px;
}

/* Overview — Up next */
.tdn-team-overview__upnext-card {
	display: block;
	background: #f8fafc;
	border-left: 3px solid var(--brand-navy, #002855);
	border-radius: 8px;
	padding: 14px 16px;
	text-decoration: none;
	color: #0f172a;
	margin-bottom: 24px;
	transition: background 0.12s ease;
}
.tdn-team-overview__upnext-card:hover { background: #f1f5f9; }
.tdn-team-overview__upnext-name {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--brand-navy, #002855);
	display: block;
}
.tdn-team-overview__upnext-status {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.78rem;
	color: #64748b;
	display: block;
	margin-top: 4px;
}

/* Overview — Recent results */
.tdn-team-overview__results-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tdn-team-overview__result {
	display: grid;
	grid-template-columns: 32px 1fr auto auto;
	gap: 12px;
	padding: 10px 12px;
	background: #f8fafc;
	border-radius: 6px;
	align-items: center;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.85rem;
}
.tdn-team-overview__result-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
	font-size: 0.75rem;
}
.tdn-team-overview__result.is-win  .tdn-team-overview__result-badge { background: #16a34a; }
.tdn-team-overview__result.is-loss .tdn-team-overview__result-badge { background: #dc2626; }
.tdn-team-overview__result-opp { font-weight: 600; color: #0f172a; }
.tdn-team-overview__result-score {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--brand-navy, #002855);
}
.tdn-team-overview__result-date { color: #94a3b8; font-size: 0.78rem; }

/* Overview — Splits */
.tdn-team-overview__splits-list {
	display: flex;
	gap: 32px;
	margin: 0;
	font-family: var(--font-sans, sans-serif);
}
.tdn-team-overview__splits-list > div { display: flex; flex-direction: column; }
.tdn-team-overview__splits-list dt {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #94a3b8;
	margin: 0;
}
.tdn-team-overview__splits-list dd {
	font-size: 1.1rem;
	font-weight: 800;
	color: #0f172a;
	margin: 2px 0 0;
	font-variant-numeric: tabular-nums;
}

/* Schedule */
.tdn-team-schedule {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tdn-team-schedule__row {
	border-bottom: 1px solid #f1f5f9;
}
.tdn-team-schedule__link {
	display: grid;
	grid-template-columns: 110px 1fr auto auto;
	gap: 14px;
	padding: 12px 6px;
	align-items: center;
	text-decoration: none;
	color: inherit;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.85rem;
}
.tdn-team-schedule__link:hover { background: #fafbfc; }
.tdn-team-schedule__date {
	font-size: 0.78rem;
	font-weight: 700;
	color: #64748b;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.tdn-team-schedule__matchup {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #0f172a;
	font-weight: 600;
}
.tdn-team-schedule__matchup img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}
.tdn-team-schedule__status,
.tdn-team-schedule__tv {
	font-size: 0.78rem;
	color: #64748b;
}
.tdn-team-schedule__result {
	display: flex;
	align-items: center;
	gap: 8px;
	font-variant-numeric: tabular-nums;
}
.tdn-team-schedule__wl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
	font-size: 0.7rem;
}
.tdn-team-schedule__row.is-win  .tdn-team-schedule__wl { background: #16a34a; }
.tdn-team-schedule__row.is-loss .tdn-team-schedule__wl { background: #dc2626; }
.tdn-team-schedule__score {
	font-weight: 700;
	color: var(--brand-navy, #002855);
}

/* Roster */
.tdn-team-roster__group { margin-bottom: 24px; }
.tdn-team-roster__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 12px;
}
.tdn-team-roster__card {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 12px;
	padding: 12px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	align-items: center;
}
.tdn-team-roster__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	background: #f1f5f9;
}
.tdn-team-roster__avatar--placeholder { display: inline-block; }
.tdn-team-roster__info { min-width: 0; }
.tdn-team-roster__name {
	display: block;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.9rem;
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tdn-team-roster__meta {
	display: flex;
	gap: 10px;
	margin-top: 4px;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.7rem;
	color: #64748b;
	font-weight: 600;
}

/* News */
.tdn-team-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 14px;
}
.tdn-team-news__link {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 12px;
	padding: 12px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-left: 3px solid var(--brand-navy, #002855);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.tdn-team-news__link:hover {
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
	transform: translateY(-1px);
}
.tdn-team-news__thumb {
	display: block;
	width: 88px;
	height: 64px;
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	background-color: #f1f5f9;
}
.tdn-team-news__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.tdn-team-news__tag {
	display: inline-block;
	background: var(--brand-navy, #002855);
	color: #fff;
	font-family: var(--font-sans, sans-serif);
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 3px;
	width: fit-content;
}
.tdn-team-news__title {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 0.92rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tdn-team-news__byline {
	font-family: var(--font-sans, sans-serif);
	font-size: 0.7rem;
	color: #94a3b8;
	margin-top: auto;
}

@media (max-width: 640px) {
	.tdn-team { padding: 16px 12px 0; }
	.tdn-team__hero { padding: 18px 16px; }
	.tdn-team__hero-inner { grid-template-columns: 64px 1fr; gap: 14px; }
	.tdn-team__hero-logo { width: 64px; height: 64px; }
	.tdn-team__hero-name { font-size: 1.6rem; }
	.tdn-team__panels { padding: 16px; }
	.tdn-team-schedule__link { grid-template-columns: 80px 1fr auto; gap: 8px; font-size: 0.78rem; }
	.tdn-team-schedule__tv { display: none; }
}