/*
 * Hindsight — daily political-history quiz
 * Skin: "modern civics with a retro-newsprint edge" (1.5.0)
 *
 * Defensive styling: every rule is scoped under `.hindsight-app` and uses
 * !important on layout-critical properties so an aggressive WordPress
 * theme can't break the timeline, the tiles, or the drag-and-drop slots.
 * Themes can still recolor by overriding the --hs-* CSS variables.
 *
 * Typefaces: the stacks below name "Old Standard TT" (headlines) and
 * "Libre Franklin" (UI/numerals). The plugin does not load webfonts itself;
 * the companion Hindsight theme enqueues them from Google Fonts. On other
 * themes the stacks fall back gracefully to Georgia / system sans.
 */

.hindsight-app {
	--hs-accent: #185FA5;             /* civic blue — election-night numerals   */
	--hs-red: #A32D2D;                /* ballot red — editorial accents         */
	--hs-gold: #EF9F27;               /* archive gold — streaks, highlights     */
	--hs-ink: #2C2C2A;
	--hs-paper: #FCFAF3;              /* card stock                             */
	--hs-paper-deep: #F4EFE2;         /* placed cards, tracks, wells            */
	--hs-rule: #B4B2A9;               /* aged hairline rule                     */
	--hs-card-bg: #FCFAF3;
	--hs-card-border: #B4B2A9;
	--hs-card-shadow: 0 1px 2px rgba(44, 44, 42, 0.07);
	--hs-tile-bg: #FCFAF3;
	--hs-tile-shadow: 0 4px 14px rgba(44, 44, 42, 0.12), 0 1px 3px rgba(44, 44, 42, 0.07);
	--hs-anchor-bg: #F4EFE2;
	--hs-line: #B4B2A9;
	--hs-correct: #3B6D11;
	--hs-incorrect: #A32D2D;
	--hs-text: #2C2C2A;
	--hs-muted: #5F5E5A;
	--hs-slot-bg: rgba(44, 44, 42, 0.03);
	--hs-slot-bg-hover: color-mix(in srgb, var(--hs-accent) 8%, transparent);
	--hs-font-serif: "Old Standard TT", "Iowan Old Style", "Times New Roman", Georgia, serif;
	--hs-font-sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;

	max-width: 720px !important;
	margin: 0 auto !important;
	padding: 16px !important;
	font-family: var(--hs-font-sans) !important;
	font-size: 16px;
	color: var(--hs-text) !important;
	line-height: 1.4 !important;
	box-sizing: border-box !important;
	-webkit-text-size-adjust: 100%;
}

.hindsight-app *,
.hindsight-app *::before,
.hindsight-app *::after {
	box-sizing: border-box !important;
}

.hindsight-app p {
	margin: 0 0 6px !important;
}

.hindsight-app h2,
.hindsight-app h3 {
	color: inherit !important;
	font-family: var(--hs-font-serif) !important;
}

.hindsight-app .hindsight-login-gate {
	text-align: center !important;
	padding: 32px 16px !important;
	border: 1px dashed var(--hs-rule) !important;
	border-radius: 8px !important;
	background: var(--hs-paper) !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 1.05rem !important;
}
.hindsight-app .hindsight-button {
	display: inline-block !important;
	background: var(--hs-accent) !important;
	color: #FCFAF3 !important;
	font-family: var(--hs-font-sans) !important;
	font-style: normal !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 11px 24px !important;
	margin-top: 6px !important;
	transition: filter 120ms ease !important;
}
.hindsight-app .hindsight-button:hover {
	filter: brightness(1.12) !important;
	color: #FCFAF3 !important;
	text-decoration: none !important;
}
.hindsight-app .hindsight-loading {
	text-align: center !important;
	padding: 48px 16px !important;
	color: var(--hs-muted) !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
}

/* Top status bar: progress + points */
.hindsight-app .hs-statusbar {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 18px !important;
	border-bottom: 1px solid var(--hs-rule) !important;
	padding-bottom: 10px !important;
}
.hindsight-app .hs-progress-label {
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--hs-muted) !important;
	flex: 0 0 auto !important;
}
.hindsight-app .hs-progress {
	flex: 1 1 auto !important;
	display: flex !important;
	gap: 4px !important;
}
.hindsight-app .hs-progress span {
	flex: 1 1 0 !important;
	height: 8px !important;
	border-radius: 2px !important;
	background: var(--hs-paper-deep) !important;
	border: 1px solid var(--hs-rule) !important;
	transition: background 200ms ease !important;
}
.hindsight-app .hs-progress span.is-correct   { background: var(--hs-correct) !important; border-color: var(--hs-correct) !important; }
.hindsight-app .hs-progress span.is-incorrect { background: var(--hs-incorrect) !important; border-color: var(--hs-incorrect) !important; }
.hindsight-app .hs-progress span.is-current {
	background: var(--hs-paper) !important;
	border-color: var(--hs-accent) !important;
	box-shadow: inset 0 0 0 1px var(--hs-accent) !important;
}
.hindsight-app .hs-points {
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	font-variant-numeric: tabular-nums !important;
	color: var(--hs-accent) !important;
	flex: 0 0 auto !important;
}

/* The pending tile — the card the player is placing right now.
   Sticky so it stays in view while the player scrolls the timeline below. */
.hindsight-app .hs-pending {
	margin-bottom: 24px !important;
	position: sticky !important;
	top: 8px !important;
	z-index: 50 !important;
}
/* Logged-in admins see the WP admin bar (32px desktop, 46px mobile) at the
   top of the viewport. Push the sticky tile down so it doesn't tuck under it. */
body.admin-bar .hindsight-app .hs-pending {
	top: 40px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .hindsight-app .hs-pending {
		top: 54px !important;
	}
}
.hindsight-app .hs-pending::before {
	/* Backdrop so the timeline doesn't show through the rounded corners
	   when the card is stuck near the top of the viewport. */
	content: "" !important;
	position: absolute !important;
	left: -8px !important;
	right: -8px !important;
	top: -8px !important;
	bottom: -16px !important;
	background: linear-gradient(to bottom, rgba(244, 239, 226, 0.95), rgba(244, 239, 226, 0.95) 70%, rgba(244, 239, 226, 0)) !important;
	z-index: -1 !important;
	pointer-events: none !important;
	-webkit-backdrop-filter: blur(6px) !important;
	backdrop-filter: blur(6px) !important;
}
.hindsight-app .hs-card-pending {
	background: var(--hs-tile-bg) !important;
	color: var(--hs-text) !important;
	border-radius: 8px !important;
	box-shadow: var(--hs-tile-shadow) !important;
	padding: 14px 16px !important;
	display: flex !important;
	gap: 14px !important;
	align-items: flex-start !important;
	border: 1px solid var(--hs-card-border) !important;
	border-top: 3px solid var(--hs-ink) !important;
	cursor: grab !important;
	user-select: none !important;
	-webkit-user-select: none !important;
	-webkit-touch-callout: none !important;
	touch-action: none !important; /* prevent the browser from claiming touch as scroll/zoom */
	transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease !important;
	position: relative !important;
}
@media (hover: hover) {
	.hindsight-app .hs-card-pending:hover {
		border-color: var(--hs-accent) !important;
		border-top-color: var(--hs-accent) !important;
		transform: translateY(-1px) !important;
	}
}
.hindsight-app .hs-card-pending:active,
.hindsight-app .hs-card-pending.is-dragging {
	cursor: grabbing !important;
	opacity: 0.4 !important;
	transform: scale(0.98) !important;
}

/* Scroll affordance rails — visible only during a drag. They mark the
   trigger zones at the top and bottom of the viewport, so players can see
   "drag here to scroll" instead of having to discover it. The rails are
   pointer-events: none so they don't interfere with elementFromPoint
   slot detection — the auto-scroll is driven by pointer Y position, not
   by hovering the rail itself. */
.hindsight-app .hs-scroll-rail,
.hs-scroll-rail {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	height: 64px !important;
	pointer-events: none !important;
	z-index: 99998 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #FCFAF3 !important;
	transition: opacity 150ms ease, background 150ms ease, box-shadow 150ms ease !important;
	opacity: 0.78 !important;
}
.hindsight-app .hs-scroll-rail-up,
.hs-scroll-rail-up {
	top: 0 !important;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--hs-accent) 92%, transparent), color-mix(in srgb, var(--hs-accent) 0%, transparent)) !important;
}
.hindsight-app .hs-scroll-rail-down,
.hs-scroll-rail-down {
	bottom: 0 !important;
	background: linear-gradient(to top, color-mix(in srgb, var(--hs-accent) 92%, transparent), color-mix(in srgb, var(--hs-accent) 0%, transparent)) !important;
}
.hindsight-app .hs-scroll-rail-inner,
.hs-scroll-rail-inner {
	background: color-mix(in srgb, var(--hs-accent) 95%, transparent) !important;
	color: #FCFAF3 !important;
	padding: 6px 14px !important;
	border-radius: 4px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}
/* Active state: tile is over the rail and we're scrolling. Brighten and pulse. */
.hindsight-app .hs-scroll-rail.is-active,
.hs-scroll-rail.is-active {
	opacity: 1 !important;
}
.hindsight-app .hs-scroll-rail.is-active .hs-scroll-rail-inner,
.hs-scroll-rail.is-active .hs-scroll-rail-inner {
	box-shadow: 0 0 0 4px rgba(252, 250, 243, 0.45), 0 6px 18px rgba(0, 0, 0, 0.25) !important;
	transform: scale(1.06) !important;
}
/* Push the top rail down when the WP admin bar is visible. */
body.admin-bar .hindsight-app .hs-scroll-rail-up,
body.admin-bar .hs-scroll-rail-up {
	top: 32px !important;
}
@media screen and (max-width: 782px) {
	body.admin-bar .hindsight-app .hs-scroll-rail-up,
	body.admin-bar .hs-scroll-rail-up {
		top: 46px !important;
	}
}
/* Subtle pulse so the rail catches the eye even before the tile reaches it. */
@keyframes hs-rail-pulse {
	0%, 100% { opacity: 0.78; }
	50%      { opacity: 0.95; }
}
.hindsight-app .hs-scroll-rail:not(.is-active),
.hs-scroll-rail:not(.is-active) {
	animation: hs-rail-pulse 1.6s ease-in-out infinite !important;
}

/* The ghost — a clone of the card that follows the pointer during a drag.
   It's appended inside .hindsight-app so all the scoped .hs-card-pending
   layout styles (flex, gap, padding, background) continue to apply — the
   ghost looks just like the source card, plus a stronger shadow.
   IMPORTANT: position must be `fixed` so the ghost follows the pointer in
   viewport coordinates. The .hs-card-pending rule sets `position: relative
   !important`, which would otherwise win over the inline style we set in JS,
   so we re-declare position here with !important. */
.hindsight-app .hs-drag-ghost,
.hs-drag-ghost {
	position: fixed !important;
	left: 0 !important;
	top: 0 !important;
	pointer-events: none !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20), 0 4px 10px rgba(0, 0, 0, 0.14) !important;
	transform-origin: top left !important;
	will-change: transform !important;
	cursor: grabbing !important;
	border-color: var(--hs-accent, #185FA5) !important;
	transition: none !important;
	opacity: 0.95 !important;
	z-index: 99999 !important;
	margin: 0 !important;
}
/* The "drag the card into a gap…" hint is only useful in the resting
   pending area, not on the ghost actively being dragged — hide it so the
   floating card looks compact. */
.hindsight-app .hs-drag-ghost .hs-pending-hint,
.hs-drag-ghost .hs-pending-hint {
	display: none !important;
}
.hindsight-app .hs-card-pending.is-armed {
	border-color: var(--hs-accent) !important;
	border-top-color: var(--hs-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-accent) 18%, transparent), var(--hs-tile-shadow) !important;
}
.hindsight-app .hs-card-pending:focus-visible {
	outline: 3px solid var(--hs-accent) !important;
	outline-offset: 2px !important;
}

.hindsight-app .hs-drag-handle {
	flex: 0 0 auto !important;
	width: 22px !important;
	color: var(--hs-rule) !important;
	font-size: 1.1rem !important;
	letter-spacing: -2px !important;
	line-height: 1 !important;
	padding-top: 4px !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

.hindsight-app .hs-card-pending .hs-card-img {
	flex: 0 0 auto !important;
	width: 84px !important;
	height: 84px !important;
	border-radius: 4px !important;
	border: 1px solid var(--hs-rule) !important;
	background: var(--hs-paper-deep) center/cover no-repeat !important;
	filter: saturate(0.85) contrast(1.02) !important;
}
.hindsight-app .hs-card-pending .hs-card-img.empty {
	background: var(--hs-paper-deep) !important;
	border-style: dashed !important;
}
.hindsight-app .hs-card-pending .hs-card-text { flex: 1 1 auto !important; min-width: 0 !important; }
.hindsight-app .hs-card-pending .hs-card-title {
	font-family: var(--hs-font-serif) !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin: 0 0 4px !important;
	color: var(--hs-ink) !important;
}
.hindsight-app .hs-card-pending .hs-card-desc {
	margin: 0 0 6px !important;
	font-size: 0.88rem !important;
	line-height: 1.45 !important;
	color: var(--hs-muted) !important;
}
.hindsight-app .hs-pending-hint {
	display: block !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--hs-red) !important;
	border-top: 1px dashed var(--hs-rule) !important;
	padding-top: 7px !important;
	margin-top: 8px !important;
}

/* The vertical timeline */
.hindsight-app .hs-timeline {
	position: relative !important;
	padding: 32px 0 32px 0 !important;
	margin: 0 !important;
}
.hindsight-app .hs-timeline::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 50% !important;
	width: 2px !important;
	background: var(--hs-rule) !important;
	transform: translateX(-50%) !important;
	z-index: 0 !important;
	pointer-events: none !important;
}
.hindsight-app .hs-end-label {
	text-align: center !important;
	letter-spacing: 0.18em !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	color: var(--hs-muted) !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	position: relative !important;
	z-index: 1 !important;
	background: transparent !important;
}
.hindsight-app .hs-end-label.top    { margin-bottom: 6px !important; }
.hindsight-app .hs-end-label.bottom { margin-top: 6px !important; }

/* Each row in the timeline can be either a placed event or a placement slot */
.hindsight-app .hs-row {
	position: relative !important;
	display: flex !important;
	justify-content: center !important;
	margin: 6px 0 !important;
	min-height: 28px !important;
	z-index: 1 !important;
}
.hindsight-app .hs-row.placed { margin: 10px 0 !important; }
.hindsight-app .hs-row.slot   { margin: 6px 0 !important; }

/* Placed event card */
.hindsight-app .hs-card-placed {
	background: var(--hs-anchor-bg) !important;
	color: var(--hs-text) !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	display: flex !important;
	gap: 12px !important;
	align-items: flex-start !important;
	max-width: 460px !important;
	width: 100% !important;
	border: 1px solid var(--hs-rule) !important;
	box-shadow: 0 1px 2px rgba(44, 44, 42, 0.05) !important;
	position: relative !important;
}
.hindsight-app .hs-card-placed.is-correct   { border-left: 4px solid var(--hs-correct) !important; }
.hindsight-app .hs-card-placed.is-incorrect { border-left: 4px solid var(--hs-incorrect) !important; }
.hindsight-app .hs-card-placed .hs-card-img {
	flex: 0 0 auto !important;
	width: 72px !important;
	height: 72px !important;
	border-radius: 4px !important;
	border: 1px solid var(--hs-rule) !important;
	background: var(--hs-paper-deep) center/cover no-repeat !important;
	filter: saturate(0.85) contrast(1.02) !important;
}
.hindsight-app .hs-card-placed .hs-card-img.empty {
	background: var(--hs-paper-deep) !important;
	border-style: dashed !important;
}
.hindsight-app .hs-card-placed .hs-card-text { flex: 1 1 auto !important; min-width: 0 !important; }

/* The year — the game's signature element. Big election-night numerals in
   civic blue rather than a dark pill; green/red once judged. */
.hindsight-app .hs-date-pill {
	display: inline-block !important;
	background: transparent !important;
	color: var(--hs-accent) !important;
	font-family: var(--hs-font-sans) !important;
	font-size: 1.15rem !important;
	font-weight: 900 !important;
	font-variant-numeric: tabular-nums !important;
	letter-spacing: 0.01em !important;
	line-height: 1 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	margin-bottom: 5px !important;
}
.hindsight-app .hs-date-pill.is-correct   { background: transparent !important; color: var(--hs-correct) !important; }
.hindsight-app .hs-date-pill.is-incorrect { background: transparent !important; color: var(--hs-incorrect) !important; }
.hindsight-app .hs-card-placed .hs-card-title {
	margin: 0 0 4px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--hs-ink) !important;
}
.hindsight-app .hs-card-placed .hs-card-desc {
	margin: 0 !important;
	font-size: 0.85rem !important;
	line-height: 1.45 !important;
	color: var(--hs-muted) !important;
}

/* Placement slot — a quiet dashed zone at rest, expands and reveals the
   "Drop here" label only when a tile is hovering over it. */
.hindsight-app .hs-slot {
	width: 100% !important;
	max-width: 460px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4px 16px !important;
	margin: 4px auto !important;
	min-height: 28px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	background: transparent !important;
	border: 2px dashed var(--hs-rule) !important;
	transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, min-height 150ms ease, padding 150ms ease !important;
	position: relative !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}
.hindsight-app .hs-slot:focus-visible {
	outline: 3px solid var(--hs-accent) !important;
	outline-offset: 2px !important;
}

/* Label is hidden at rest — it only appears when the slot is being hovered
   (mouse hover) or when a tile is being dragged over (.is-hover) it. */
.hindsight-app .hs-slot-label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: var(--hs-accent) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	pointer-events: none !important;
	opacity: 0 !important;
	transform: scale(0.92) !important;
	transition: opacity 150ms ease, transform 150ms ease !important;
}
.hindsight-app .hs-slot-plus {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 999px !important;
	background: var(--hs-accent) !important;
	color: #FCFAF3 !important;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	line-height: 1 !important;
}
.hindsight-app .hs-slot-text {
	font-weight: 700 !important;
}

/* Drag-target state: zone expands and the label fades in. The .is-hover
   class is set by the pointer-drag handler when a tile is being dragged
   over the slot. The :hover style only applies on devices with real hover
   (mouse/trackpad) — never on touch — so iOS Safari can't latch a sticky
   hover state onto a slot the user merely tapped. */
.hindsight-app .hs-slot.is-hover {
	background: color-mix(in srgb, var(--hs-accent) 10%, transparent) !important;
	border-color: var(--hs-accent) !important;
	border-style: solid !important;
	min-height: 48px !important;
	padding: 10px 16px !important;
	transform: scale(1.01) !important;
}
.hindsight-app .hs-slot.is-hover .hs-slot-label {
	opacity: 1 !important;
	transform: scale(1) !important;
}
@media (hover: hover) {
	.hindsight-app .hs-slot:hover {
		background: color-mix(in srgb, var(--hs-accent) 10%, transparent) !important;
		border-color: var(--hs-accent) !important;
		border-style: solid !important;
		min-height: 48px !important;
		padding: 10px 16px !important;
		transform: scale(1.01) !important;
	}
	.hindsight-app .hs-slot:hover .hs-slot-label {
		opacity: 1 !important;
		transform: scale(1) !important;
	}
}

/* While a drag is happening, every slot brightens its border, pulses, AND
   grows to a generous 48px hit target so the player can land the tile in
   any reasonably-near slot without having to thread the visual needle.
   The "Drop here" label still only appears on the slot the tile is over. */
.hindsight-app .is-dragging .hs-slot {
	border-color: var(--hs-accent) !important;
	background: color-mix(in srgb, var(--hs-accent) 4%, transparent) !important;
	min-height: 48px !important;
	padding: 10px 16px !important;
	animation: hs-slot-pulse 1.4s ease-in-out infinite !important;
}
@keyframes hs-slot-pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hs-accent) 0%, transparent); }
	50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hs-accent) 12%, transparent); }
}

/* Highlight ring on the row that just got placed. */
.hindsight-app .hs-row.is-flash .hs-card-placed {
	box-shadow: 0 0 0 3px var(--hs-accent), 0 1px 2px rgba(44, 44, 42, 0.05) !important;
	transition: box-shadow 600ms ease !important;
}

/* Reveal CTA — shown for one beat between the last placement and the
   results screen, so the score doesn't pop up the instant the tile lands. */
.hindsight-app .hs-reveal-cta {
	background: var(--hs-card-bg) !important;
	color: var(--hs-text) !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 3px double var(--hs-ink) !important;
	border-radius: 6px !important;
	padding: 22px 20px !important;
	box-shadow: var(--hs-card-shadow) !important;
	margin: 0 0 20px !important;
	text-align: center !important;
}
.hindsight-app .hs-reveal-headline {
	font-family: var(--hs-font-serif) !important;
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	margin: 0 0 6px !important;
	color: var(--hs-ink) !important;
}
.hindsight-app .hs-reveal-sub {
	margin: 0 0 16px !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	color: var(--hs-muted) !important;
}
.hindsight-app .hs-reveal-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--hs-accent) !important;
	color: #FCFAF3 !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 12px 28px !important;
	font-family: var(--hs-font-sans) !important;
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: 0 2px 8px rgba(44, 44, 42, 0.10) !important;
	transition: transform 120ms ease, filter 120ms ease !important;
}
.hindsight-app .hs-reveal-btn:hover {
	transform: translateY(-1px) !important;
	filter: brightness(1.08) !important;
}

/* Results screen */
.hindsight-app .hs-results {
	background: transparent !important;
	color: var(--hs-text) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	margin-top: 24px !important;
}
.hindsight-app .hs-results-headline {
	font-family: var(--hs-font-serif) !important;
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
	color: var(--hs-ink) !important;
}
.hindsight-app .hs-results-sub {
	margin: 0 0 16px !important;
	color: var(--hs-text) !important;
	opacity: 0.85 !important;
}

/* Result cards: newsprint clipping — heavy ink rule on top, aged hairlines
   around, card stock behind. */
.hindsight-app .hs-rescard {
	border: 1px solid var(--hs-rule) !important;
	border-top: 3px solid var(--hs-ink) !important;
	border-radius: 6px !important;
	background: var(--hs-card-bg) !important;
	padding: 18px 22px 20px !important;
	margin: 0 0 18px !important;
	text-align: left !important;
}
.hindsight-app .hs-kicker {
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--hs-red) !important;
	margin: 0 0 10px !important;
}
.hindsight-app .hs-res-context {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	color: var(--hs-muted) !important;
	font-size: 0.95rem !important;
	margin: 0 0 10px !important;
}
.hindsight-app .hs-bigscore-row {
	display: flex !important;
	align-items: baseline !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	margin: 0 0 10px !important;
}
.hindsight-app .hs-bigscore {
	font-family: var(--hs-font-sans) !important;
	font-size: 3rem !important;
	font-weight: 900 !important;
	font-variant-numeric: tabular-nums !important;
	line-height: 1 !important;
	color: var(--hs-accent) !important;
	letter-spacing: -0.02em !important;
}
.hindsight-app .hs-bigscore-sentence {
	font-family: var(--hs-font-serif) !important;
	font-size: 1.1rem !important;
	color: var(--hs-ink) !important;
}
.hindsight-app .hs-hint-note {
	color: var(--hs-muted) !important;
	font-size: 0.85rem !important;
	margin: 0 0 8px !important;
}

/* Result squares */
.hindsight-app .hs-squares {
	display: flex !important;
	gap: 7px !important;
	margin: 4px 0 16px !important;
	flex-wrap: wrap !important;
}
.hindsight-app .hs-square {
	width: 30px !important;
	height: 30px !important;
	border-radius: 3px !important;
	display: inline-block !important;
}
.hindsight-app .hs-square.is-correct   { background: var(--hs-correct) !important; }
.hindsight-app .hs-square.is-incorrect { background: var(--hs-incorrect) !important; }

/* Copy button: outlined, accent border + text */
.hindsight-app .hs-copy-row {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	margin: 0 0 20px !important;
	flex-wrap: wrap !important;
}
.hindsight-app .hs-copy-btn {
	background: transparent !important;
	color: var(--hs-accent) !important;
	border: 1px solid var(--hs-accent) !important;
	border-radius: 4px !important;
	padding: 10px 18px !important;
	font-family: var(--hs-font-sans) !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background 120ms ease, color 120ms ease !important;
}
.hindsight-app .hs-copy-btn:hover {
	background: color-mix(in srgb, var(--hs-accent) 7%, transparent) !important;
}
.hindsight-app .hs-copy-btn.is-copied {
	background: var(--hs-correct) !important;
	border-color: var(--hs-correct) !important;
	color: #FCFAF3 !important;
}
.hindsight-app .hs-copy-hint {
	font-size: 0.8rem !important;
	color: var(--hs-muted) !important;
}

/* Per-event recap on the results screen — newspaper listing: hairline
   rules between rows rather than gray boxes. */
.hindsight-app .hs-recap {
	margin-top: 24px !important;
	border-top: 1px solid var(--hs-rule) !important;
	padding-top: 18px !important;
}
.hindsight-app .hs-recap-head {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	margin: 0 0 12px !important;
}
.hindsight-app .hs-recap h3 {
	margin: 0 !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
}

/* Segmented toggle for swapping between chrono-order and placement-order —
   mid-century form control: rectangular, ink-ruled, solid ink when active. */
.hindsight-app .hs-recap-toggle {
	display: inline-flex !important;
	background: transparent !important;
	border: 1px solid var(--hs-ink) !important;
	border-radius: 4px !important;
	padding: 0 !important;
	gap: 0 !important;
	overflow: hidden !important;
}
.hindsight-app .hs-recap-tab {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--hs-ink) !important;
	font-family: var(--hs-font-sans) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	padding: 7px 12px !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background 120ms ease, color 120ms ease !important;
	box-shadow: none !important;
}
.hindsight-app .hs-recap-tab.is-active {
	background: var(--hs-ink) !important;
	color: #FCFAF3 !important;
	box-shadow: none !important;
}
@media (hover: hover) {
	.hindsight-app .hs-recap-tab:hover:not(.is-active) {
		background: rgba(44, 44, 42, 0.06) !important;
	}
}

/* The "belongs at position #N" note shown on incorrect rows in placement-order view. */
.hindsight-app .hs-recap-note {
	grid-column: 2 / -1 !important;
	font-size: 0.82rem !important;
	color: var(--hs-incorrect) !important;
	font-weight: 500 !important;
	margin-top: 2px !important;
}
.hindsight-app .hs-recap-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}
.hindsight-app .hs-recap-item {
	display: grid !important;
	grid-template-columns: 28px 64px 1fr !important;
	gap: 10px !important;
	align-items: center !important;
	padding: 9px 12px !important;
	border-radius: 0 !important;
	background: transparent !important;
	border-bottom: 1px solid var(--hs-paper-deep) !important;
	font-size: 0.92rem !important;
	line-height: 1.3 !important;
}
.hindsight-app .hs-recap-item:last-child {
	border-bottom: 0 !important;
}
.hindsight-app .hs-recap-item.is-correct {
	border-left: 3px solid var(--hs-correct) !important;
}
.hindsight-app .hs-recap-item.is-incorrect {
	border-left: 3px solid var(--hs-incorrect) !important;
	background: rgba(163, 45, 45, 0.05) !important;
}
.hindsight-app .hs-recap-item.is-anchor {
	border-left: 3px solid var(--hs-rule) !important;
	opacity: 0.85 !important;
}
.hindsight-app .hs-recap-mark {
	flex: 0 0 auto !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	text-align: center !important;
	line-height: 1 !important;
}
.hindsight-app .hs-recap-item.is-correct   .hs-recap-mark { color: var(--hs-correct) !important; }
.hindsight-app .hs-recap-item.is-incorrect .hs-recap-mark { color: var(--hs-incorrect) !important; }
.hindsight-app .hs-recap-item.is-anchor    .hs-recap-mark { color: var(--hs-muted) !important; }
.hindsight-app .hs-recap-year {
	font-weight: 900 !important;
	color: var(--hs-accent) !important;
	font-variant-numeric: tabular-nums !important;
}
.hindsight-app .hs-recap-title {
	font-family: var(--hs-font-serif) !important;
	color: var(--hs-text) !important;
	/* Allow wrapping — placement-order view prefixes titles with "Round N:"
	   so some entries are too long to fit on one line, and ellipsis would
	   hide useful info. */
	word-break: break-word !important;
}

/* Histogram — election-night bars: your row in civic blue, the field in
   newsprint gray, tracks in deep paper. */
.hindsight-app .hs-histogram {
	margin-top: 4px !important;
	border-top: 0 !important;
	padding-top: 0 !important;
}
.hindsight-app .hs-histogram h3 {
	margin: 0 0 12px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.15rem !important;
	font-weight: 700 !important;
}
.hindsight-app .hs-histogram-row {
	display: grid !important;
	grid-template-columns: 118px 1fr 52px 36px !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 !important;
	margin-bottom: 10px !important;
	font-size: 0.9rem !important;
}
.hindsight-app .hs-histogram-row .label {
	font-size: 0.92rem !important;
	opacity: 1 !important;
	color: var(--hs-text) !important;
	white-space: nowrap !important;
}
.hindsight-app .hs-histogram-row.is-you .label { font-weight: 700 !important; }
.hindsight-app .hs-histogram-row .bar-wrap {
	background: var(--hs-paper-deep) !important;
	border-radius: 3px !important;
	height: 16px !important;
	overflow: hidden !important;
}
.hindsight-app .hs-histogram-row .bar {
	background: var(--hs-rule) !important;
	height: 100% !important;
	border-radius: 3px !important;
}
.hindsight-app .hs-histogram-row.is-you .bar { background: var(--hs-accent) !important; }
.hindsight-app .hs-histogram-row .pct {
	text-align: right !important;
	font-size: 0.92rem !important;
	font-variant-numeric: tabular-nums !important;
	white-space: nowrap !important;
}
.hindsight-app .hs-histogram-row .you-tag {
	visibility: hidden;
	font-size: 0.7rem !important;
	font-weight: 900 !important;
	letter-spacing: 0.08em !important;
	color: var(--hs-accent) !important;
}
.hindsight-app .hs-histogram-row.is-you .you-tag { visibility: visible !important; }
.hindsight-app .hs-histogram-foot {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	color: var(--hs-muted) !important;
	font-size: 0.85rem !important;
	margin: 10px 0 0 !important;
}

.hindsight-app .hs-email-optin {
	margin-top: 18px !important;
	padding: 14px 16px !important;
	border: 1px dashed var(--hs-rule) !important;
	border-radius: 6px !important;
	background: var(--hs-paper) !important;
	text-align: center !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
}
.hindsight-app .hs-email-optin a {
	color: var(--hs-accent) !important;
	font-weight: 700 !important;
	text-decoration: underline !important;
}

/* Preview state — tile is sitting in a slot awaiting confirmation. */
.hindsight-app .hs-preview-banner {
	text-align: center !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 0.95rem !important;
	color: var(--hs-muted) !important;
	margin-bottom: 14px !important;
	padding: 8px 12px !important;
	background: color-mix(in srgb, var(--hs-accent) 6%, transparent) !important;
	border-radius: 6px !important;
}
.hindsight-app .hs-row.is-preview-row {
	margin: 14px 0 !important;
}
.hindsight-app .hs-slot.has-preview {
	flex-direction: column !important;
	gap: 10px !important;
	padding: 6px 0 !important;
	cursor: default !important;
}
.hindsight-app .hs-slot.has-preview:hover {
	background: transparent !important;
}
.hindsight-app .hs-card-pending.in-preview {
	max-width: 460px !important;
	width: 100% !important;
	border-color: var(--hs-accent) !important;
	border-top-color: var(--hs-accent) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-accent) 18%, transparent), var(--hs-tile-shadow) !important;
	animation: hs-preview-in 180ms ease-out !important;
}
@keyframes hs-preview-in {
	from { transform: scale(0.96); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}
.hindsight-app .hs-confirm-row {
	display: flex !important;
	gap: 10px !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
}
.hindsight-app .hs-confirm-btn,
.hindsight-app .hs-cancel-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 0 !important;
	border-radius: 4px !important;
	padding: 10px 20px !important;
	font-family: var(--hs-font-sans) !important;
	font-weight: 700 !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
}
.hindsight-app .hs-confirm-btn {
	background: var(--hs-accent) !important;
	color: #FCFAF3 !important;
}
.hindsight-app .hs-confirm-btn:hover {
	filter: brightness(1.08) !important;
}
.hindsight-app .hs-cancel-btn {
	background: transparent !important;
	color: var(--hs-ink) !important;
	border: 1px solid var(--hs-rule) !important;
	font-weight: 500 !important;
}
.hindsight-app .hs-cancel-btn:hover {
	background: rgba(44, 44, 42, 0.04) !important;
}

/* Mobile tweaks */
@media (max-width: 540px) {
	.hindsight-app { padding: 12px !important; }
	.hindsight-app .hs-card-placed { max-width: 100% !important; }
	.hindsight-app .hs-card-pending .hs-card-img { width: 64px !important; height: 64px !important; }
	.hindsight-app .hs-drag-handle { width: 16px !important; }
	.hindsight-app .hs-histogram-row {
		grid-template-columns: 90px 1fr 48px 36px !important;
		font-size: 0.82rem !important;
	}
}

/* =====================================================================
 * Toolbar, how-to modal, hints, off-by badges, stats, copy result,
 * archive list, screen-reader live region
 * ===================================================================== */

/* Visually hidden live region for screen-reader announcements. */
.hs-sr-live {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Toolbar above the game (How to play link, archive banner) */
.hindsight-app .hs-toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	margin: 0 0 10px !important;
	min-height: 20px !important;
}
.hindsight-app .hs-linklike {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	color: var(--hs-accent) !important;
	font-size: 0.85rem !important;
	cursor: pointer !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}
.hindsight-app .hs-archive-banner {
	margin-right: auto !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--hs-red) !important;
	background: var(--hs-paper) !important;
	border: 1px solid var(--hs-red) !important;
	border-radius: 3px !important;
	padding: 3px 10px !important;
}

/* How-to-play modal */
.hindsight-app .hs-howto-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(44, 44, 42, 0.5) !important;
	z-index: 99998 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
}
.hindsight-app .hs-howto-card {
	background: var(--hs-paper) !important;
	color: var(--hs-text) !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 3px double var(--hs-ink) !important;
	border-radius: 8px !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
	max-width: 440px !important;
	width: 100% !important;
	padding: 22px 24px !important;
	max-height: 85vh !important;
	overflow: auto !important;
}
.hindsight-app .hs-howto-card h3 {
	margin: 0 0 12px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.35rem !important;
}
.hindsight-app .hs-howto-step {
	margin: 0 0 10px !important;
	font-size: 0.95rem !important;
	line-height: 1.45 !important;
}
.hindsight-app .hs-howto-note {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	color: var(--hs-muted) !important;
	font-size: 0.88rem !important;
	margin: 12px 0 14px !important;
}

/* Hint button + reveal */
.hindsight-app .hs-hint-row,
.hindsight-app .hs-hint-reveal {
	text-align: center !important;
	margin-top: 8px !important;
}
.hindsight-app .hs-hint-btn {
	background: none !important;
	border: 1px dashed var(--hs-rule) !important;
	border-radius: 3px !important;
	padding: 5px 14px !important;
	font-family: var(--hs-font-sans) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--hs-muted) !important;
	cursor: pointer !important;
}
.hindsight-app .hs-hint-btn:hover {
	border-color: var(--hs-gold) !important;
	color: var(--hs-gold) !important;
}
.hindsight-app .hs-hint-reveal {
	font-size: 0.88rem !important;
	color: var(--hs-accent) !important;
	background: var(--hs-slot-bg-hover) !important;
	border-radius: 4px !important;
	padding: 6px 10px !important;
	display: inline-block !important;
}
.hindsight-app .hs-pending {
	text-align: center !important;
}

/* Off-by badge on misplaced cards */
.hindsight-app .hs-offby {
	position: absolute !important;
	right: 10px !important;
	bottom: 8px !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	color: var(--hs-incorrect) !important;
	background: rgba(163, 45, 45, 0.08) !important;
	border-radius: 3px !important;
	padding: 2px 8px !important;
	white-space: nowrap !important;
}

/* Stats panel */
.hindsight-app .hs-stats {
	margin: 0 0 20px !important;
	padding: 18px 22px 20px !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 3px solid var(--hs-ink) !important;
	border-radius: 6px !important;
	background: var(--hs-card-bg) !important;
}
.hindsight-app .hs-stats h3 {
	margin: 0 0 10px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.15rem !important;
}
.hindsight-app .hs-stats.hs-rescard {
	border: 1px solid var(--hs-rule) !important;
	border-top: 3px solid var(--hs-ink) !important;
	padding: 18px 22px 20px !important;
}
.hindsight-app .hs-fire-line {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	margin: 0 0 14px !important;
}
.hindsight-app .hs-stats-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 10px !important;
	text-align: center !important;
}
@media screen and (max-width: 520px) {
	.hindsight-app .hs-stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
.hindsight-app .hs-stat-num {
	font-size: 2rem !important;
	font-weight: 900 !important;
	font-variant-numeric: tabular-nums !important;
	line-height: 1.1 !important;
	color: var(--hs-ink) !important;
}
.hindsight-app .hs-stat-label {
	font-size: 0.7rem !important;
	color: var(--hs-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-top: 2px !important;
}
.hindsight-app .hs-stats-loading {
	color: var(--hs-muted) !important;
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 0.85rem !important;
	text-align: center !important;
	margin: 0 !important;
}

/* Archive list */
.hindsight-app .hs-archive {
	margin: 20px 0 8px !important;
	padding: 18px 22px 20px !important;
	border: 1px solid var(--hs-rule) !important;
	border-top: 3px solid var(--hs-ink) !important;
	border-radius: 6px !important;
	background: var(--hs-card-bg) !important;
}
.hindsight-app .hs-archive h3 {
	margin: 0 0 4px !important;
	font-family: var(--hs-font-serif) !important;
	font-size: 1.15rem !important;
}
.hindsight-app .hs-archive-note {
	font-family: var(--hs-font-serif) !important;
	font-style: italic !important;
	font-size: 0.85rem !important;
	color: var(--hs-muted) !important;
	margin: 0 0 10px !important;
}
.hindsight-app .hs-archive-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	gap: 6px !important;
}
.hindsight-app .hs-archive-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 8px !important;
	background: var(--hs-paper-deep) !important;
	border: 1px solid var(--hs-rule) !important;
	border-radius: 4px !important;
	padding: 7px 10px !important;
	font-family: var(--hs-font-sans) !important;
	font-size: 0.82rem !important;
	cursor: pointer !important;
	color: var(--hs-text) !important;
	text-align: left !important;
}
.hindsight-app .hs-archive-row:hover:not(:disabled) {
	border-color: var(--hs-accent) !important;
	background: var(--hs-slot-bg-hover) !important;
}
.hindsight-app .hs-archive-row:disabled {
	opacity: 0.55 !important;
	cursor: default !important;
}
.hindsight-app .hs-archive-row .hs-archive-status {
	font-weight: 700 !important;
	color: var(--hs-accent) !important;
	white-space: nowrap !important;
}
.hindsight-app .hs-archive-row.is-done .hs-archive-status {
	color: var(--hs-correct) !important;
}
.hindsight-app .hs-archive-back {
	text-align: center !important;
	margin-top: 14px !important;
}

/* Slot keyboard focus */
.hindsight-app .hs-slot:focus-visible {
	outline: 2px solid var(--hs-accent) !important;
	outline-offset: 2px !important;
}