/**
 * Your Record page — dark navy header with silver-embossed title,
 * tab UI, gold/navy/red record sub-tabs, assessment card.
 * Matches live's /politics/your-record visual identity.
 */

.tdn-yr {
	margin: 0;
	padding: 0;
}

/* ---------- Hero header (dark navy band) ---------- */
.tdn-yr__head {
	background: #001F40;
	background-image:
		linear-gradient( 180deg, rgba(0,0,0,.2), transparent 40% ),
		linear-gradient( 0deg, #000814 0%, #001F40 60%, #002868 100% );
	color: #fff;
	padding: 60px 24px 70px;
	text-align: center;
	border-bottom: 4px solid #A6192E;
}
/* Silver-embossed title (matches live's chrome/etched effect). */
.tdn-yr__title {
	font-family: var(--tdn-serif, 'Times New Roman', serif);
	font-size: clamp( 3rem, 7vw, 5rem );
	font-weight: 900;
	letter-spacing: 4px;
	margin: 0 0 12px;
	color: #d0d4d8;
	background: linear-gradient( 180deg, #fafbfc 0%, #d4d8dd 50%, #a8aeb5 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow:
		0 1px 0 rgba(0,0,0,.4),
		0 2px 2px rgba(0,0,0,.6);
}
.tdn-yr__subtitle {
	font-family: var(--tdn-mono, 'JetBrains Mono', monospace);
	font-size: .85rem;
	letter-spacing: 4px;
	color: #8b95a6;
	text-transform: uppercase;
	margin: 0;
}

/* ---------- Top-level tabs (Cognitive Dissonance Test | The Capitol Grid) ---------- */
.tdn-yr__tabs {
	display: flex;
	justify-content: center;
	gap: 4rem;
	background: #0a1428;
	border-bottom: 1px solid #1a2540;
	padding: 0 24px;
}
.tdn-yr__tab {
	background: transparent;
	border: 0;
	color: #6b7790;
	padding: 16px 8px 14px;
	font-size: .92rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	font-family: var(--tdn-mono, 'JetBrains Mono', monospace);
	border-bottom: 3px solid transparent;
	transition: color .15s, border-color .15s;
}
.tdn-yr__tab:hover { color: #fff; }
.tdn-yr__tab.is-active {
	color: #fff;
	border-bottom-color: #A6192E;
}

/* ---------- Panel container ---------- */
.tdn-yr__panel {
	background: #001428;
	padding: 36px 24px 64px;
	min-height: 60vh;
}
.tdn-yr__panel[hidden] { display: none; }

/* ---------- Record sub-tabs (LOCAL / STATE / FEDERAL) ---------- */
.tdn-yr__record-tabs {
	display: flex;
	max-width: 720px;
	margin: 0 auto 8px;
	gap: 0;
	position: relative;
	z-index: 2;
}
.tdn-yr__record-tab {
	flex: 1;
	background: transparent;
	border: 0;
	color: rgba(255,255,255,.8);
	padding: 14px 12px;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-family: var(--tdn-mono, 'JetBrains Mono', monospace);
	border-radius: 6px 6px 0 0;
	cursor: pointer;
	transition: opacity .15s;
	opacity: .55;
}
.tdn-yr__record-tab:hover { opacity: .85; }
.tdn-yr__record-tab.is-active { opacity: 1; }

/* Per-tab brand colors (live's color-coded record cards). */
.tdn-yr__record-tab--local   { background: #002868; }
.tdn-yr__record-tab--state   { background: #B5952F; }  /* gold */
.tdn-yr__record-tab--federal { background: #A6192E; }  /* red */

/* ---------- Assessment card (newspaper-style on dark bg) ---------- */
.tdn-yr__assessment-card {
	max-width: 760px;
	margin: 0 auto;
	background: #fdfbf7;  /* paper / cream */
	color: #1a1a1a;
	border: 1px solid #002868;
	border-top: 8px solid #002868;
	border-radius: 0 0 8px 8px;
	padding: 36px 40px 44px;
	box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.tdn-yr__assessment-title {
	font-family: var(--tdn-serif, 'Times New Roman', serif);
	font-size: clamp( 1.6rem, 3vw, 2.1rem );
	font-weight: 900;
	color: #002868;
	margin: 0 0 14px;
	text-align: center;
}
.tdn-yr__assessment-lede {
	font-family: var(--tdn-mono, 'JetBrains Mono', monospace);
	font-size: .92rem;
	line-height: 1.6;
	color: #2c3e50;
	text-align: center;
	margin: 0 0 28px;
	padding-bottom: 22px;
	border-bottom: 2px double #002868;
}
.tdn-yr__instructions h3 {
	font-family: var(--tdn-serif);
	font-size: 1.1rem;
	font-weight: 800;
	color: #002868;
	margin: 0 0 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.tdn-yr__instructions ul {
	margin: 0 0 24px;
	padding-left: 20px;
	font-size: .94rem;
	line-height: 1.6;
	color: #1a1a1a;
}
.tdn-yr__instructions li { margin-bottom: 6px; }
.tdn-yr__begin-cta {
	display: block;
	margin: 0 auto;
	background: #002868;
	color: #fff;
	border: 0;
	padding: 14px 32px;
	border-radius: 4px;
	font-family: var(--tdn-mono, 'JetBrains Mono', monospace);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s;
}
.tdn-yr__begin-cta:disabled { opacity: .65; cursor: not-allowed; }
.tdn-yr__begin-cta:not(:disabled):hover { background: #001838; }
.tdn-yr__beta-note {
	margin: 14px 0 0;
	font-size: .78rem;
	color: #6b7280;
	text-align: center;
	font-style: italic;
}

/* The Capitol Grid panel inherits its own styles from assets/capitol/capitol.css.
   We just give it some breathing room on the dark bg. */
.tdn-yr__panel[data-panel="capitol"] { background: #f4f1ea; padding: 32px 16px; }

/* ---------- Active quiz state (question + options) ---------- */
.tdn-yr__quiz[hidden] { display: none; }
.tdn-yr__qhead {
	display: flex; flex-direction: column; gap: 8px;
	margin-bottom: 22px;
}
.tdn-yr__qprogress {
	height: 6px;
	background: #e5e7eb;
	border-radius: 999px;
	position: relative;
	overflow: hidden;
}
.tdn-yr__qprogress::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient( 90deg, #002868, #A6192E );
	width: var( --p, 0% );
	transition: width .3s;
}
.tdn-yr__qcount {
	margin: 0;
	font-family: var(--tdn-mono, 'JetBrains Mono', monospace);
	font-size: .72rem;
	color: #6b7280;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.tdn-yr__qtext {
	font-family: var(--tdn-serif, 'Times New Roman', serif);
	font-size: 1.4rem;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.4;
	margin: 0 0 22px;
}
.tdn-yr__qoptions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.tdn-yr__qopt {
	background: #fff;
	border: 2px solid #E0E0E0;
	color: #1a1a1a;
	padding: 14px 18px;
	border-radius: 6px;
	font-size: .98rem;
	font-family: inherit;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.tdn-yr__qopt:hover { border-color: #002868; background: #f8f9fa; }
.tdn-yr__qopt.is-selected {
	border-color: #002868;
	background: #002868;
	color: #fff;
	font-weight: 700;
}
.tdn-yr__qnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #e5e7eb; }
.tdn-yr__qbtn {
	background: #002868;
	color: #fff;
	border: 0;
	padding: 12px 24px;
	border-radius: 4px;
	font-family: var(--tdn-mono, 'JetBrains Mono', monospace);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}
.tdn-yr__qbtn:hover { background: #001838; }
.tdn-yr__qbtn--secondary { background: transparent; color: #6b7280; }
.tdn-yr__qbtn--secondary:hover { background: #f3f4f6; color: #1a1a1a; }

/* ---------- Results: axis bars per layer ---------- */
.tdn-yr__results[hidden] { display: none; }
.tdn-yr__layer-result {
	background: #fff;
	border: 1px solid #E0E0E0;
	border-radius: 6px;
	padding: 20px 24px;
	margin-bottom: 18px;
}
.tdn-yr__layer-title {
	font-family: var(--tdn-serif, 'Times New Roman', serif);
	font-size: 1.2rem;
	font-weight: 800;
	color: #002868;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid #002868;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.tdn-yr__axis { margin-bottom: 16px; }
.tdn-yr__axis:last-child { margin-bottom: 0; }
.tdn-yr__axis-labels {
	display: flex; justify-content: space-between;
	font-family: var(--tdn-mono, 'JetBrains Mono', monospace);
	font-size: .72rem;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: .8px;
	margin-bottom: 4px;
}
.tdn-yr__axis-bar {
	height: 12px;
	background: linear-gradient( 90deg, #fef3c7 0%, #e5e7eb 50%, #fee2e2 100% );
	border-radius: 999px;
	position: relative;
	border: 1px solid #d1d5db;
}
.tdn-yr__axis-fill {
	position: absolute;
	top: -3px;
	width: 18px;
	height: 18px;
	background: #002868;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0,0,0,.3);
	transform: translateX( -50% );
	transition: left .3s;
}
.tdn-yr__axis-pct {
	margin: 4px 0 0;
	font-size: .82rem;
	color: #4b5563;
	text-align: right;
	font-weight: 600;
}