/* ==========================================================================
   Passport Club document stylesheet, v2 corrective
   Namespace: tss-pc-  (ZERO overlap with the legacy passport-club-page.css
   class names; the v1 tss-passport-* mapping collided with V3 public-page
   classes and caused the live stamp/actions/terms breakage of 2026-07-28)
   Contract: tab/panel visibility is PURE CSS from
   [data-active-passport-view] + container queries. JS only writes that
   attribute and ARIA. See 00-defects-and-fixes.md for the JS diff.
   ========================================================================== */

/* ---- 1. Scope + tokens ---------------------------------------------------- */
.tss-pc-scope {
	--pc-black: #101010;
	--pc-ink: #2e2a22;
	--pc-muted: #5d564b;
	--pc-cream: #fff5d8;
	--pc-paper: #fffdf3;
	--pc-panel: #ffffff;
	--pc-yellow: #ffd633;
	--pc-sage: #dbeee8;
	--pc-teal: #157d74;
	--pc-coral-ink: #9f3c2d;
	--pc-gold: #a87f00;
	--pc-sage-ink: #3f6f5e;

	--pc-w-body: 500;
	--pc-w-bold: 700;
	--pc-w-black: 900;
	--pc-caps: 0.05em;

	--pc-line-1: 1px;
	--pc-line-2: 2px;
	--pc-line-3: 3px;
	--pc-r: 8px;
	--pc-r-card: 14px;

	--pc-shadow-sm: 2px 2px 0 rgba(16, 16, 16, 0.2);
	--pc-shadow-md: 4px 4px 0 rgba(16, 16, 16, 0.22);
	--pc-shadow-lg: 8px 8px 0 rgba(16, 16, 16, 0.28);

	--pc-dur-press: 140ms;
	--pc-dur-slide: 180ms;
	--pc-dur-settle: 240ms;
	--pc-dur-draw: 360ms;
	--pc-ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);

	/* Baseline ruling. Copy on ruled pages uses this exact line-height. */
	--pc-rule: 26px;

	container: tss-passport-doc / inline-size;
	display: grid;
	gap: 20px;
	width: 100%;
	min-width: 0;
	color: var(--pc-ink);
	font-weight: var(--pc-w-body);
}

.tss-pc-scope *,
.tss-pc-scope *::before,
.tss-pc-scope *::after { box-sizing: border-box; }

.tss-pc-scope :is(h1, h2, h3, p, ol, ul, dl, details) { margin: 0; }

.tss-pc-scope :is(a, button):focus-visible {
	outline: 3px solid #ff8e78;
	outline-offset: 3px;
}

/* ---- 2. Heading + document voice ------------------------------------------ */
.tss-pc-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.tss-pc-head > div { display: grid; gap: 5px; }

.tss-pc-head h2 {
	color: var(--pc-black);
	font-size: clamp(26px, 4cqw, 40px);
	font-weight: var(--pc-w-black);
	line-height: 1;
	letter-spacing: -0.02em;
}

.tss-pc-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--pc-muted);
	font-size: 12px;
	font-weight: var(--pc-w-black);
	letter-spacing: var(--pc-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-pc-label::before {
	content: "";
	width: 14px;
	height: 2px;
	background: currentColor;
	opacity: 0.55;
}

.tss-pc-formno {
	display: inline-block;
	border: var(--pc-line-1) solid rgba(16, 16, 16, 0.4);
	border-radius: 4px;
	padding: 6px 8px;
	color: rgba(16, 16, 16, 0.6);
	font-size: 10px;
	font-weight: var(--pc-w-black);
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

/* ---- 3. State chips -------------------------------------------------------- */
.tss-pc-chip {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: 999px;
	padding: 5px 9px;
	background: var(--pc-paper);
	color: var(--pc-black);
	font-size: 11px;
	font-weight: var(--pc-w-black);
	letter-spacing: var(--pc-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-pc-chip--ready { background: var(--pc-yellow); box-shadow: var(--pc-shadow-sm); }
.tss-pc-chip--held { border-color: var(--pc-sage-ink); background: var(--pc-sage); color: var(--pc-sage-ink); }
.tss-pc-chip--muted { border-color: rgba(16, 16, 16, 0.24); color: var(--pc-muted); }

/* ---- 4. Buttons + links ---------------------------------------------------- */
.tss-pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: 999px;
	padding: 10px 20px;
	background: var(--pc-panel);
	color: var(--pc-black);
	box-shadow: 3px 3px 0 var(--pc-black);
	font: inherit;
	font-size: 14px;
	font-weight: var(--pc-w-black);
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--pc-dur-press) var(--pc-ease-out),
		box-shadow var(--pc-dur-press) var(--pc-ease-out),
		background-color var(--pc-dur-press) var(--pc-ease-out);
}

.tss-pc-btn--primary { background: var(--pc-yellow); }
.tss-pc-btn:hover { background: var(--pc-cream); }
.tss-pc-btn--primary:hover { background: var(--pc-yellow); filter: brightness(1.03); }
.tss-pc-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--pc-black); }

.tss-pc-link {
	width: fit-content;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--pc-black);
	font: inherit;
	font-size: 13px;
	font-weight: var(--pc-w-black);
	text-align: left;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---- 5. Tabs ---------------------------------------------------------------- */
/* Hidden above 980cqw. Active tab is BLACK (yellow is reserved for actions,
   current progress and ready rewards; a tab is navigation, not a reward). */
.tss-pc-tabs {
	display: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: var(--pc-r);
	background: var(--pc-paper);
	box-shadow: var(--pc-shadow-sm);
	overflow: hidden;
}

.tss-pc-tabs button {
	min-height: 46px;
	border: 0;
	border-right: var(--pc-line-1) solid var(--pc-black);
	background: transparent;
	color: var(--pc-black);
	font: inherit;
	font-size: 13px;
	font-weight: var(--pc-w-black);
	cursor: pointer;
}

.tss-pc-tabs button:last-child { border-right: 0; }
.tss-pc-tabs button[aria-selected="true"] { background: var(--pc-black); color: var(--pc-paper); }
.tss-pc-tabs button:active { background: var(--pc-cream); color: var(--pc-black); }

/* ---- 6. The spread ---------------------------------------------------------- */
.tss-pc-spread {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
	border: var(--pc-line-3) solid var(--pc-black);
	border-radius: var(--pc-r-card);
	background: var(--pc-paper);
	box-shadow: var(--pc-shadow-lg);
	overflow: hidden;
}

/* Security paper: whisper-quiet teal line work across the whole spread. */
.tss-pc-spread::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(43deg, rgba(21, 125, 116, 0.04) 0 1px, transparent 1px 9px),
		repeating-linear-gradient(-43deg, rgba(21, 125, 116, 0.03) 0 1px, transparent 1px 9px);
	pointer-events: none;
}

.tss-pc-page {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--pc-rule);
	min-width: 0;
	padding: clamp(16px, 3cqw, 28px);
	background:
		repeating-linear-gradient(0deg,
			transparent 0 calc(var(--pc-rule) - 1px),
			rgba(16, 16, 16, 0.05) calc(var(--pc-rule) - 1px) var(--pc-rule));
	background-origin: content-box;
}

.tss-pc-page--status {
	background:
		linear-gradient(135deg, rgba(219, 238, 232, 0.5), transparent 55%),
		repeating-linear-gradient(0deg,
			transparent 0 calc(var(--pc-rule) - 1px),
			rgba(16, 16, 16, 0.05) calc(var(--pc-rule) - 1px) var(--pc-rule));
	background-origin: content-box;
}

/* No min-height anywhere on pages: the spread is content-tall by law. */

.tss-pc-spine {
	position: relative;
	border-inline: var(--pc-line-1) dashed rgba(16, 16, 16, 0.25);
	background: linear-gradient(90deg, rgba(16, 16, 16, 0.07), transparent 50%, rgba(16, 16, 16, 0.07));
}

.tss-pc-spine::after {
	content: "";
	position: absolute;
	inset: 8px auto 8px 50%;
	width: 2px;
	background: radial-gradient(circle, rgba(16, 16, 16, 0.26) 0 1px, transparent 2px) 0 0 / 2px 12px repeat-y;
	transform: translateX(-50%);
}

.tss-pc-pagehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

/* Ruled-page copy sits ON the ruling. */
.tss-pc-page .tss-pc-copy {
	color: var(--pc-ink);
	font-size: 15px;
	line-height: var(--pc-rule);
}

/* ---- 7. Seal ----------------------------------------------------------------- */
.tss-pc-seal {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: var(--pc-line-2) solid currentColor;
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, currentColor 0deg 5deg, transparent 5deg 11deg),
		radial-gradient(circle, transparent 0 16px, var(--pc-paper) 17px 100%);
	color: rgba(16, 16, 16, 0.45);
}

/* ---- 8. Stamps ---------------------------------------------------------------- */
.tss-pc-stamps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 13px;
}

.tss-pc-stamp {
	position: relative;
	display: grid;
	place-content: center;
	gap: 4px;
	min-height: 118px;
	max-width: 150px;
	width: 100%;
	justify-self: center;
	border-radius: 12px;
	padding: 10px;
	text-align: center;
}

/* Rotation set {-4,-2,2,6} applied by position, never per-element inline. */
.tss-pc-stamps > .tss-pc-stamp:nth-child(4n+1) { transform: rotate(-2deg); }
.tss-pc-stamps > .tss-pc-stamp:nth-child(4n+2) { transform: rotate(2deg); }
.tss-pc-stamps > .tss-pc-stamp:nth-child(4n+3) { transform: rotate(-4deg); }
.tss-pc-stamps > .tss-pc-stamp:nth-child(4n+4) { transform: rotate(6deg); }

.tss-pc-stamp strong {
	font-size: clamp(20px, 3.4cqw, 32px);
	font-weight: var(--pc-w-black);
	line-height: 0.92;
}

.tss-pc-stamp small {
	max-width: 100%;
	font-size: 10px;
	font-weight: var(--pc-w-black);
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.tss-pc-stamp--next {
	border: var(--pc-line-3) solid var(--pc-black);
	background: var(--pc-yellow);
	color: var(--pc-black);
	box-shadow: var(--pc-shadow-md);
}

.tss-pc-stamp--inked {
	--ink: var(--pc-teal);
	border: var(--pc-line-3) solid var(--ink);
	color: var(--ink);
	background:
		radial-gradient(circle at 30% 70%, rgba(16, 16, 16, 0.05) 0 2px, transparent 3px),
		radial-gradient(circle at 72% 28%, rgba(16, 16, 16, 0.04) 0 2px, transparent 3px),
		rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 16%, transparent);
}

.tss-pc-stamp--inked.is-coral { --ink: var(--pc-coral-ink); }
.tss-pc-stamp--inked.is-gold { --ink: var(--pc-gold); }

.tss-pc-stamp--ghost {
	border: var(--pc-line-2) dashed rgba(16, 16, 16, 0.24);
	color: rgba(16, 16, 16, 0.32);
}

.tss-pc-stamp--ghost i {
	position: absolute;
	right: 6px;
	bottom: 5px;
	font-size: 8px;
	font-style: normal;
	font-weight: var(--pc-w-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* Splash ring for the moment system (kept from live behaviour). */
.tss-pc-stamp em {
	position: absolute;
	inset: -9px;
	border: var(--pc-line-2) solid currentColor;
	border-radius: 14px;
	opacity: 0;
	pointer-events: none;
}

/* ---- 9. Rank stamp ------------------------------------------------------------ */
/* The identity object: pressed, yellow, 5px border. Not a paper card. */
.tss-pc-rankstamp {
	display: grid;
	gap: 4px;
	width: fit-content;
	border: 5px solid var(--pc-black);
	border-radius: var(--pc-r);
	padding: 12px 16px;
	background: var(--pc-yellow);
	color: var(--pc-black);
	box-shadow: var(--pc-shadow-md);
	transform: rotate(-2deg);
}

.tss-pc-rankstamp span {
	font-size: 11px;
	font-weight: var(--pc-w-black);
	letter-spacing: var(--pc-caps);
	line-height: 1;
	text-transform: uppercase;
}

.tss-pc-rankstamp strong {
	font-size: clamp(26px, 4cqw, 40px);
	font-weight: var(--pc-w-black);
	line-height: 0.95;
}

/* ---- 10. Route track ------------------------------------------------------------ */
/* Full treatment restored: dashed route, black ink fill, yellow tag marker,
   goal waypoint. At 0% the marker sits at the start flag: a route not yet
   travelled, never an empty gauge. */
.tss-pc-track {
	--pc-progress: 0%;
	display: grid;
	grid-template-columns: auto minmax(70px, 1fr) auto;
	gap: 10px;
	align-items: center;
	min-height: 30px;
}

.tss-pc-track > span,
.tss-pc-track > strong {
	font-size: 12px;
	font-weight: var(--pc-w-black);
	letter-spacing: var(--pc-caps);
	line-height: 1.15;
	text-transform: uppercase;
}

.tss-pc-track > span { color: var(--pc-black); }
.tss-pc-track > strong { color: var(--pc-muted); }
.tss-pc-track[data-complete="true"] > strong { color: var(--pc-black); }

.tss-pc-track__line {
	position: relative;
	height: 20px;
	display: flex;
	align-items: center;
}

.tss-pc-track__line::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(16, 16, 16, 0.35) 0 8px, transparent 8px 15px);
	transform: translateY(-50%);
}

.tss-pc-track__line::after {
	content: "";
	position: absolute;
	right: -1px;
	top: 50%;
	width: 10px;
	height: 10px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: 50%;
	background: var(--pc-paper);
	transform: translateY(-50%);
}

.tss-pc-track i {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--pc-progress);
	height: 4px;
	border-radius: 2px;
	background: var(--pc-black);
	transform: translateY(-50%);
	transition: width var(--pc-dur-draw) var(--pc-ease-out);
}

.tss-pc-track b {
	position: absolute;
	top: 50%;
	left: var(--pc-progress);
	width: 16px;
	height: 18px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: 3px 3px 6px 6px;
	background: var(--pc-yellow);
	box-shadow: var(--pc-shadow-sm);
	transform: translate(-50%, -50%) rotate(6deg);
	transition: left var(--pc-dur-draw) var(--pc-ease-out);
}

.tss-pc-track b::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 50%;
	width: 4px;
	height: 4px;
	border: 1px solid var(--pc-black);
	border-radius: 50%;
	background: var(--pc-paper);
	transform: translateX(-50%);
}

/* ---- 11. Counterfoil ------------------------------------------------------------ */
.tss-pc-counterfoil {
	display: grid;
	gap: 12px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: var(--pc-r);
	padding: 16px;
	background:
		linear-gradient(90deg, rgba(16, 16, 16, 0.05) 1px, transparent 1px) 0 0 / 18px 18px,
		var(--pc-panel);
	box-shadow: var(--pc-shadow-sm);
}

.tss-pc-counterfoil__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.tss-pc-counterfoil > strong {
	color: var(--pc-black);
	font-size: clamp(19px, 2.4cqw, 25px);
	font-weight: var(--pc-w-black);
	line-height: 1.05;
}

.tss-pc-counterfoil > p {
	color: var(--pc-ink);
	font-size: 14px;
	line-height: 1.45;
}

.tss-pc-counterfoil dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.tss-pc-counterfoil dl div {
	min-width: 0;
	border-top: var(--pc-line-1) solid rgba(16, 16, 16, 0.2);
	padding-top: 8px;
}

.tss-pc-counterfoil dt {
	color: var(--pc-muted);
	font-size: 11px;
	font-weight: var(--pc-w-black);
	letter-spacing: var(--pc-caps);
	text-transform: uppercase;
}

.tss-pc-counterfoil dd {
	margin: 3px 0 0;
	color: var(--pc-ink);
	font-size: 13px;
	font-weight: var(--pc-w-bold);
	line-height: 1.35;
}

/* ---- 12. Paused note + actions --------------------------------------------------- */
.tss-pc-paused {
	border-left: var(--pc-line-3) solid var(--pc-sage-ink);
	padding: 2px 0 2px 12px;
	color: var(--pc-sage-ink);
	font-size: 13px;
	font-weight: var(--pc-w-bold);
	line-height: 1.45;
}

.tss-pc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	/* Deliberately NOT sticky and no backdrop blur: plain row. */
	position: static;
}

/* ---- 13. Panels ------------------------------------------------------------------- */
.tss-pc-panel {
	min-width: 0;
	border: var(--pc-line-3) solid var(--pc-black);
	border-radius: var(--pc-r-card);
	padding: clamp(16px, 3cqw, 24px);
	background: var(--pc-paper);
	box-shadow: var(--pc-shadow-md);
}

/* One-level head: h3 left, ONE quiet label right. Never an eyebrow above
   the h3 repeating the same words. */
.tss-pc-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 16px;
}

.tss-pc-panel__head h3 {
	color: var(--pc-black);
	font-size: 22px;
	font-weight: var(--pc-w-black);
	line-height: 1;
	letter-spacing: -0.02em;
}

.tss-pc-terms {
	box-shadow: none;
	border-width: var(--pc-line-2);
	border-color: rgba(16, 16, 16, 0.25);
}

.tss-pc-terms summary { cursor: pointer; }
.tss-pc-terms p {
	margin-top: 12px;
	color: var(--pc-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* ---- 14. Tickets ------------------------------------------------------------------- */
.tss-pc-ticket-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	align-items: start;
	padding: 0;
	list-style: none;
}

.tss-pc-ticket {
	position: relative;
	display: grid;
	gap: 8px;
	width: 100%;
	min-height: 132px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: var(--pc-r);
	padding: 15px 16px 15px 28px;
	background: var(--pc-panel);
	color: var(--pc-black);
	font: inherit;
	text-align: left;
	transition:
		transform var(--pc-dur-press) var(--pc-ease-out),
		box-shadow var(--pc-dur-press) var(--pc-ease-out),
		background-color var(--pc-dur-press) var(--pc-ease-out);
}

.tss-pc-ticket summary {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 7px 12px;
	min-height: 92px;
	align-content: center;
	cursor: pointer;
	list-style: none;
}

.tss-pc-ticket summary::-webkit-details-marker { display: none; }
.tss-pc-ticket summary .tss-pc-chip { justify-self: start; }
.tss-pc-ticket summary strong { grid-column: 1; }
.tss-pc-ticket summary small { grid-column: 1; }
.tss-pc-ticket summary > b {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	font-size: 24px;
	line-height: 1;
	transition: transform var(--pc-dur-slide) var(--pc-ease-out);
}
.tss-pc-ticket[open] summary > b { transform: rotate(45deg); }
.tss-pc-ticket__body {
	display: grid;
	gap: 12px;
	border-top: 1px dashed rgba(16, 16, 16, 0.34);
	padding-top: 14px;
}
.tss-pc-wallet-intro {
	margin-bottom: 14px;
	color: var(--pc-muted);
	font-size: 13px;
	font-weight: var(--pc-w-bold);
}

/* Punch holes, colour set per surface via --pc-punch. */
.tss-pc-ticket::before,
.tss-pc-ticket::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: 50%;
	background: var(--pc-punch, var(--pc-paper));
	transform: translateY(-50%);
}

.tss-pc-ticket::before { left: -10px; }
.tss-pc-ticket::after { right: -10px; }

/* Left tab strip carries the state colour. */
.tss-pc-ticket > i,
.tss-pc-ticket summary > i {
	position: absolute;
	inset: -2px auto -2px -2px;
	width: 14px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: var(--pc-r) 0 0 var(--pc-r);
	background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(16, 16, 16, 0.12) 6px 8px), var(--pc-sage);
}

.tss-pc-ticket strong {
	color: var(--pc-black);
	font-size: 18px;
	font-weight: var(--pc-w-black);
	line-height: 1.05;
}

.tss-pc-ticket p {
	color: var(--pc-ink);
	font-size: 13px;
	line-height: 1.4;
}

.tss-pc-ticket small {
	color: var(--pc-muted);
	font-size: 12px;
	font-weight: var(--pc-w-bold);
}

.tss-pc-ticket--ready { box-shadow: var(--pc-shadow-md); }
.tss-pc-ticket--ready > i,
.tss-pc-ticket--ready summary > i { background: var(--pc-yellow); }

.tss-pc-ticket--held { box-shadow: var(--pc-shadow-sm); }
.tss-pc-ticket--held > i,
.tss-pc-ticket--held summary > i { background: var(--pc-sage); }

.tss-pc-ticket--preview {
	max-width: 520px;
	border-style: dashed;
	background: transparent;
	box-shadow: none;
	color: var(--pc-muted);
}
.tss-pc-ticket--preview > i { border-style: dashed; background: transparent; }
.tss-pc-ticket--preview::before,
.tss-pc-ticket--preview::after { border-style: dashed; }
.tss-pc-ticket--preview strong { color: rgba(16, 16, 16, 0.5); }

.tss-pc-ticket--used { opacity: 0.78; }
.tss-pc-ticket--expired {
	border-color: rgba(16, 16, 16, 0.3);
	background: rgba(255, 253, 243, 0.6);
	color: var(--pc-muted);
}
.tss-pc-ticket--expired > i { background: rgba(16, 16, 16, 0.08); }

.tss-pc-reward-form {
	display: grid;
	gap: 9px;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px dashed rgba(16, 16, 16, 0.34);
}

.tss-pc-reward-form label {
	display: grid;
	gap: 5px;
	font-size: 12px;
	font-weight: var(--pc-w-black);
}

.tss-pc-reward-form select {
	width: 100%;
	min-height: 44px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: 0;
	padding: 8px 34px 8px 10px;
	background-color: var(--pc-paper);
	color: var(--pc-black);
	font: inherit;
}

.tss-pc-reward-form em,
.tss-pc-ticket > em,
.tss-pc-reward-unavailable {
	color: var(--pc-muted);
	font-size: 11px;
	font-style: normal;
	line-height: 1.4;
}

.tss-pc-rescue-form__intro {
	color: var(--pc-muted);
	font-size: 13px;
	line-height: 1.45;
}

.tss-pc-rescue-fallback {
	display: grid;
	gap: 10px;
	margin: 3px 0 0;
	border: var(--pc-line-2) solid var(--pc-black);
	padding: 13px;
	background: var(--pc-paper);
}

.tss-pc-rescue-fallback legend {
	padding: 0 5px;
	font-size: 13px;
	font-weight: var(--pc-w-black);
}

.tss-pc-rescue-fallback p {
	color: var(--pc-muted);
	font-size: 12px;
	line-height: 1.45;
}

.tss-pc-rescue-fallback .tss-pc-rescue-check {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.4;
}

.tss-pc-rescue-check input {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--pc-black);
}

.tss-pc-rescue-enhanced { display: none; }
.tss-pc-rescue-form[data-rescue-ui="enhanced"] .tss-pc-rescue-fallback { display: none; }
.tss-pc-rescue-form[data-rescue-ui="enhanced"] .tss-pc-rescue-enhanced { display: inline-flex; }
.tss-pc-rescue-form[aria-busy="true"] select { pointer-events: none; }

.tss-pc-rescue-dialog {
	--pc-black: #101010;
	--pc-muted: #5d564b;
	--pc-paper: #fffdf3;
	--pc-yellow: #ffd633;
	--pc-line-2: 2px;
	--pc-w-bold: 700;
	--pc-w-black: 900;
	width: min(560px, calc(100vw - 28px));
	max-width: none;
	max-height: min(760px, calc(100dvh - 28px));
	margin: auto;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--pc-black);
	overflow: auto;
}

.tss-pc-rescue-dialog::backdrop { background: rgba(16, 16, 16, 0.62); }

.tss-pc-rescue-dialog__paper {
	position: relative;
	display: grid;
	gap: 15px;
	border: 3px solid var(--pc-black);
	border-radius: 10px;
	padding: 24px;
	background: var(--pc-paper);
	box-shadow: 6px 6px 0 var(--pc-black);
}

.tss-pc-rescue-dialog__paper h2 {
	max-width: calc(100% - 38px);
	margin: 0;
	font-size: clamp(24px, 5vw, 32px);
	font-weight: var(--pc-w-black);
	line-height: 1.05;
}

.tss-pc-rescue-dialog__paper > p {
	max-width: 58ch;
	color: var(--pc-muted);
	font-size: 14px;
	line-height: 1.5;
}

.tss-pc-rescue-dialog__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: 0;
	padding: 0;
	background: var(--pc-paper);
	color: var(--pc-black);
	font: inherit;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.tss-pc-rescue-dialog__facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	border: var(--pc-line-2) solid var(--pc-black);
	background: var(--pc-black);
}

.tss-pc-rescue-dialog__facts div {
	min-width: 0;
	padding: 11px 12px;
	background: var(--pc-paper);
}

.tss-pc-rescue-dialog__facts dt {
	color: var(--pc-muted);
	font-size: 11px;
	font-weight: var(--pc-w-bold);
}

.tss-pc-rescue-dialog__facts dd {
	margin: 3px 0 0;
	overflow-wrap: anywhere;
	font-size: 14px;
	font-weight: var(--pc-w-black);
	line-height: 1.35;
}

.tss-pc-rescue-dialog__notice {
	border-left: 4px solid var(--pc-yellow);
	padding: 10px 12px;
	background: #fff3b5;
}

.tss-pc-rescue-dialog__notice strong { font-size: 14px; }
.tss-pc-rescue-dialog__notice p {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.45;
}

.tss-pc-rescue-dialog__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.tss-pc-rescue-dialog :is(button, select, input):focus-visible {
	outline: 3px solid #ff8e78;
	outline-offset: 3px;
}

.tss-pc-reward-preview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	border: var(--pc-line-2) solid var(--pc-black);
	background: var(--pc-black);
}
.tss-pc-reward-preview div { padding: 9px 10px; background: var(--pc-paper); }
.tss-pc-reward-preview dt { color: var(--pc-muted); font-size: 10px; font-weight: var(--pc-w-black); text-transform: uppercase; }
.tss-pc-reward-preview dd { margin: 2px 0 0; color: var(--pc-black); font-size: 13px; font-weight: var(--pc-w-black); }

.tss-pc-pending,
.tss-pc-reward-notice {
	margin-bottom: 16px;
	border: var(--pc-line-2) solid var(--pc-black);
	padding: 14px 16px;
	background: #fff3b5;
	box-shadow: var(--pc-shadow-sm);
}

.tss-pc-pending h4 { margin: 4px 0 10px; font-size: 18px; }
.tss-pc-pending ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tss-pc-pending li { display: grid; gap: 2px; }
.tss-pc-pending li span { color: var(--pc-muted); font-size: 12px; }
.tss-pc-pending li .tss-pc-pending__facts { color: var(--pc-black); font-weight: var(--pc-w-bold); }
.tss-pc-reward-notice.is-error { background: #ffe2dc; }

/* ---- 15. Itinerary: progressive trail ---------------------------------------------- */
.tss-pc-itinerary summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--pc-black);
	font-size: 14px;
	font-weight: var(--pc-w-black);
	cursor: pointer;
	list-style: none;
}

.tss-pc-itinerary summary::-webkit-details-marker { display: none; }

.tss-pc-itinerary summary em {
	color: var(--pc-muted);
	font-size: 12px;
	font-style: normal;
	font-weight: var(--pc-w-bold);
}

.tss-pc-itinerary ol {
	position: relative;
	display: grid;
	gap: 10px;
	margin-top: 16px;
	padding: 0 0 0 22px;
	list-style: none;
}

.tss-pc-itinerary ol::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: repeating-linear-gradient(0deg, rgba(16, 16, 16, 0.3) 0 6px, transparent 6px 11px);
}

.tss-pc-itinerary li {
	position: relative;
	display: grid;
	gap: 3px;
	border: var(--pc-line-2) solid rgba(16, 16, 16, 0.16);
	border-radius: var(--pc-r);
	padding: 12px;
	background: rgba(255, 255, 255, 0.72);
}

.tss-pc-itinerary li::before {
	content: "";
	position: absolute;
	left: -19px;
	top: 16px;
	width: 10px;
	height: 10px;
	border: var(--pc-line-2) solid var(--pc-black);
	border-radius: 50%;
	background: var(--pc-paper);
}

.tss-pc-itinerary li.is-unlocked::before { background: var(--pc-teal); border-color: var(--pc-teal); }
.tss-pc-itinerary li.is-current::before { background: var(--pc-yellow); box-shadow: var(--pc-shadow-sm); }

.tss-pc-itinerary li.is-current {
	border-color: var(--pc-black);
	background: rgba(219, 238, 232, 0.6);
	box-shadow: var(--pc-shadow-sm);
	padding: 15px;
}

.tss-pc-itinerary li.is-locked { opacity: 0.72; }

.tss-pc-itinerary li > strong {
	color: var(--pc-black);
	font-size: 13px;
	font-weight: var(--pc-w-black);
}

.tss-pc-itinerary li.is-current > strong { font-size: 15px; }

.tss-pc-itinerary li > b { color: var(--pc-black); font-size: 14px; font-weight: var(--pc-w-black); }

.tss-pc-itinerary li > p {
	color: var(--pc-ink);
	font-size: 12px;
	font-weight: var(--pc-w-bold);
	line-height: 1.35;
}

.tss-pc-itinerary li > em {
	width: fit-content;
	border-radius: 999px;
	padding: 3px 7px;
	background: rgba(16, 16, 16, 0.06);
	color: var(--pc-muted);
	font-size: 11px;
	font-style: normal;
	font-weight: var(--pc-w-black);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tss-pc-itinerary li > em:empty { display: none; }

/* ---- 16. Endorsements (lore) --------------------------------------------------------- */
.tss-pc-lore {
	display: grid;
	gap: 12px;
	padding: 0;
	list-style: none;
}

.tss-pc-lore li {
	--tone: var(--pc-teal);
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	gap: 11px;
	align-items: start;
	border-left: var(--pc-line-3) solid var(--tone);
	border-radius: var(--pc-r);
	padding: 10px 10px 10px 12px;
	background: var(--pc-panel);
}

.tss-pc-lore li.is-reward { --tone: var(--pc-gold); }
.tss-pc-lore li.is-warning { --tone: var(--pc-coral-ink); }
.tss-pc-lore li.is-old { opacity: 0.62; }

.tss-pc-lore__glyph {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: var(--pc-line-2) solid var(--tone);
	border-radius: 50%;
	color: var(--tone);
	font-size: 13px;
	font-weight: var(--pc-w-black);
	transform: rotate(-4deg);
}

.tss-pc-lore strong {
	display: block;
	color: var(--pc-black);
	font-size: 14px;
	font-weight: var(--pc-w-black);
	line-height: 1.2;
}

.tss-pc-lore p {
	margin-top: 3px;
	color: var(--pc-muted);
	font-size: 13px;
	line-height: 1.35;
}

.tss-pc-lore time {
	color: var(--pc-muted);
	font-size: 11px;
	font-weight: var(--pc-w-bold);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---- 17. Motion ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.tss-pc-scope[data-tss-passport-settle="true"] .tss-pc-spread {
		animation: tssPcSettle var(--pc-dur-settle) var(--pc-ease-out) both;
	}

	.tss-pc-stamp.is-stamping em,
	.tss-pc-stamp em.is-visible {
		animation: tssPcSplash 560ms var(--pc-ease-out) both;
	}

	.tss-pc-scope [data-passport-panel].tss-pc-incoming {
		animation: tssPcSlide var(--pc-dur-slide) var(--pc-ease-out) both;
	}
}

@keyframes tssPcSettle { from { opacity: 0.65; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes tssPcSplash { 0% { opacity: 0; transform: scale(0.82); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes tssPcSlide { from { opacity: 0.35; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.tss-pc-scope * { transition: none !important; animation: none !important; }
}

/* ---- 18. Responsive + PURE-CSS tab mechanics ------------------------------------------- */
/* One breakpoint owns both changes: spread collapses AND tabs govern.
   Visibility comes from the root attribute the server renders and JS updates.
   No JS-computed style checks, no hidden-attribute timing dependency. */
@container tss-passport-doc (max-width: 980px) {
	.tss-pc-tabs { display: grid; }

	.tss-pc-spread { grid-template-columns: 1fr; }
	.tss-pc-spine { display: none; }

	.tss-pc-scope[data-active-passport-view="next"] [data-passport-panel]:not([data-passport-panel="next"]),
	.tss-pc-scope[data-active-passport-view="wallet"] [data-passport-panel]:not([data-passport-panel="wallet"]),
	.tss-pc-scope[data-active-passport-view="history"] [data-passport-panel]:not([data-passport-panel="history"]) {
		display: none;
	}
}

@container tss-passport-doc (max-width: 720px) {
	.tss-pc-scope { gap: 14px; }
	.tss-pc-panel { padding: 16px; box-shadow: var(--pc-shadow-sm); }
	.tss-pc-stamps { gap: 9px; }
	.tss-pc-stamp { min-height: 100px; padding: 8px; }
	.tss-pc-counterfoil dl { grid-template-columns: 1fr; }
	.tss-pc-btn { width: 100%; }
	.tss-pc-ticket-list { grid-template-columns: 1fr; }
}

@container tss-passport-doc (max-width: 520px) {
	.tss-pc-head { align-items: flex-start; }
	.tss-pc-formno { font-size: 9px; }
	.tss-pc-stamp { min-height: 88px; }
	.tss-pc-stamp strong { font-size: 21px; }
	.tss-pc-stamp small { font-size: 9px; }
	.tss-pc-stamp--ghost:nth-child(n+4) { display: none; }
	.tss-pc-lore li { grid-template-columns: 28px minmax(0, 1fr); }
	.tss-pc-lore time { grid-column: 2; }
	.tss-pc-reward-preview { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
	.tss-pc-rescue-dialog__paper { gap: 13px; padding: 20px 16px 16px; box-shadow: 4px 4px 0 var(--pc-black); }
	.tss-pc-rescue-dialog__facts { grid-template-columns: 1fr; }
	.tss-pc-rescue-dialog__actions { align-items: stretch; flex-direction: column-reverse; gap: 10px; }
	.tss-pc-rescue-dialog__actions .tss-pc-link { min-height: 44px; }
}