/**
 * Atlas Arcadia — the single Token page.
 *
 * Plan: docs/plans/2026-10-03-001-feat-token-page-redesign-plan.md (U4)
 * Design: Claude Design "Token Page v2" (desktop) / "Token Page v2 Mobile"
 * (project 70abdabc-aea7-45e0-bb4a-efa93a4c98e8).
 *
 * TOKENS. Same approach as aa-location-page-assets/page.css: the design system
 * names things semantically (--surface-page, --action-primary, --text-muted);
 * the site names its palette (--aa-orange etc., inlined by aa-points.php on
 * every page). This file maps the first onto the second, scoped to the page
 * root, with literal fallbacks matching the design system's own token values
 * — so the page follows the site's palette the day it changes and still draws
 * correctly if aa-points.php is absent.
 *
 * BACKGROUND AND FOREGROUND ARE SET TOGETHER, on the root and on every card.
 * The7 regenerates custom.css on cache clears and has reverted the site to a
 * dark #252525 body more than once; a section that only set its text colour
 * went invisible that day.
 *
 * BREAKPOINT. 1024px, matching Elementor's tablet boundary (max-width:
 * 1023px) and aa-lp's own choice, so this page stacks at the same width the
 * header does.
 *
 * VT323 IS SELF-HOSTED (KTD12). The design loads it from Google Fonts; this
 * file instead serves wp/mu-plugins/aa-token-page-assets/fonts/VT323-Regular.woff2
 * under its own OFL licence (fonts/OFL.txt), so the Inscriptions font never
 * adds a third-party request. 400 is the only weight VT323 ships.
 *
 * NOT IN HERE, deliberately: the mobile canvas's fixed 390px artboard width
 * (a canvas artefact, not layout) and its `provenance`/`sources` arrays
 * (out of scope per the plan).
 */

@font-face {
	font-family: 'VT323';
	src: url( '../aa-token-page-assets/fonts/VT323-Regular.woff2' ) format( 'woff2' );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.aa-tp {
	--tp-orange: var( --aa-orange, #db680b );
	--tp-orange-dark: var( --aa-orange-dark, #b8560a );
	--tp-brown: var( --aa-brown, #6a3306 );
	--tp-brown-dark: var( --aa-brown-dark, #4a2404 );
	--tp-yellow: var( --aa-yellow, #fae905 );
	--tp-cream: var( --aa-cream, #fdf6e8 );
	--tp-white: #fff;
	--tp-muted: var( --aa-muted, #8a7a63 );
	--tp-ink: var( --aa-ink, #8a4a12 );
	--tp-rule: #e8ddc4;
	--tp-green: var( --aa-green-count, #8fc93a );
	--tp-shadow: 0 2px 8px rgba( 74, 36, 4, .10 );
	--tp-shadow-hover: 0 6px 20px rgba( 74, 36, 4, .18 );
	--tp-radius: 8px;
	--tp-radius-sm: 4px;
	--tp-pill: 999px;
	--tp-display: var( --aa-display, 'Cartridge', ui-sans-serif, system-ui, sans-serif );
	--tp-text: var( --aa-text, 'Poppins', ui-sans-serif, system-ui, sans-serif );
	--tp-accent: 'Righteous', var( --tp-display ), sans-serif;
	--tp-mono: 'VT323', ui-monospace, 'Courier New', monospace;
	--tp-container-max: 1340px;

	box-sizing: border-box;
	background: var( --tp-cream );
	color: var( --tp-brown );
	font-family: var( --tp-text );
	font-size: 16px;
	line-height: 1.6;
}

.aa-tp *,
.aa-tp *::before,
.aa-tp *::after {
	box-sizing: border-box;
}

.aa-tp a:not( .aa-points__cta ) {
	color: var( --tp-orange );
	text-decoration: none;
}

.aa-tp a:not( .aa-points__cta ):hover {
	color: var( --tp-brown );
	text-decoration: underline;
}

/* The brown hover above is for links on white cards. On the brown hero and
   admin bar it outranks their own link colours (breadcrumbs, Suggest an edit,
   admin links) and turns them brown on brown, so on those surfaces hover goes
   orange instead. One element more specific, so it wins. */
.aa-tp .aa-tp__hero a:not( .aa-points__cta ):hover,
.aa-tp .aa-tp__adminbar a:not( .aa-points__cta ):hover {
	color: var( --tp-orange );
	text-decoration: underline;
}

.aa-tp a:focus-visible,
.aa-tp button:focus-visible,
.aa-tp [tabindex]:focus-visible {
	outline: 3px solid var( --tp-brown );
	outline-offset: 2px;
}

.aa-tp h1,
.aa-tp h2,
.aa-tp h3 {
	font-family: var( --tp-display );
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	margin: 0;
}

.aa-tp p {
	margin: 0;
}

.aa-tp .aa-tp__h2 {
	font-size: 24px;
	line-height: 1.2;
	color: var( --tp-brown );
}

.aa-tp .aa-tp__eyebrow {
	font-family: var( --tp-accent );
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --tp-muted );
	margin-bottom: 6px;
}

.aa-tp__muted {
	font-size: 13px;
	color: var( --tp-muted );
}

.aa-tp__empty {
	font-size: 14px;
	color: var( --tp-muted );
}

/* --- admin bar ---------------------------------------------------------- */

.aa-tp__adminbar {
	background: var( --tp-brown );
	color: var( --tp-yellow );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .4px;
	padding: 9px 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.aa-tp__adminbar-meta {
	color: rgba( 255, 255, 255, .55 );
	font-weight: 400;
}

.aa-tp .aa-tp__adminbar-link {
	margin-left: auto;
	color: var( --tp-white );
	text-decoration: underline;
}

.aa-tp .aa-tp__adminbar-link + .aa-tp__adminbar-link {
	margin-left: 16px;
}

/* --- hero ---------------------------------------------------------------
   Full-bleed brown band. The shell's own container is full-width with no
   padding (wp/build-token-page-shell.php), but The7 still wraps the theme-
   builder output in its own boxed content column, so the Elementor setting
   alone does not reach the viewport edge — on desktop the band stopped at
   that column's width. aa-lp has no full-bleed colour band (its hero is a
   boxed photo), so there was no existing pattern to copy; this is the
   standard breakout instead: size the band to the viewport and recentre it
   with a negative margin, independent of whatever ancestor box it sits in.
   `100vw` can be a few pixels wider than the page when a scrollbar is
   present (the scrollbar track sits outside `vw` in some engines), which
   would show as horizontal overflow on this page only. `overflow-x: hidden`
   on `body` eats that sliver — safe here because this stylesheet only loads
   on a single Token (is_singular( 'tokens' ) in aa-token-page.php), so it
   never reaches a page without this hero. It must sit on `body`, not `.aa-tp`
   itself: clipping there would cut off the very breakout this rule exists
   to create. Measured with the CDP sweep at 1440/1025/1024px: no
   scrollWidth > innerWidth. */

body:has( .aa-tp ) {
	overflow-x: hidden;
}

/* The7 pads #main by 50px top (under Hello the Elementor content location is a
   direct child of <body> and has no such padding; the second selector is the
   same reset there, and matches nothing under The7). It left a cream band between the site
   header and the brown hero. The hero is the page's own top spacing, so drop
   The7's at the top only; its bottom padding still separates content from
   the footer. */
body:has( .aa-tp ) #main,
body:has( .aa-tp ) > .elementor-location-single {
	padding-top: 0;
}

.aa-tp__hero {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: var( --tp-brown );
	color: var( --tp-white );
	padding: 0 28px 44px;
}

.aa-tp__hero-inner {
	max-width: var( --tp-container-max );
	margin: 0 auto;
}

.aa-tp__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 22px 0 26px;
	color: rgba( 255, 255, 255, .6 );
}

.aa-tp .aa-tp__crumbs a {
	color: var( --tp-yellow );
}

.aa-tp__crumbs span[aria-current] {
	color: var( --tp-white );
}

.aa-tp__sep {
	padding: 0;
}

.aa-tp__hero-grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.15fr );
	gap: 48px;
	align-items: center;
}

.aa-tp .aa-tp__title {
	font-size: clamp( 32px, 4vw, 56px );
	line-height: 1.05;
	color: var( --tp-white );
	margin-bottom: 12px;
	text-wrap: pretty;
}

.aa-tp__variant {
	font-family: var( --tp-accent );
	font-size: 16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var( --tp-yellow );
	margin-bottom: 22px;
}

.aa-tp__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}

.aa-tp__chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border-radius: var( --tp-pill );
	font-size: 12px;
	font-weight: 500;
	background: rgba( 255, 255, 255, .12 );
	color: var( --tp-white );
	white-space: nowrap;
}

.aa-tp__chip--count {
	font-weight: 600;
	background: var( --tp-yellow );
	color: var( --tp-brown );
}

.aa-tp__description {
	font-size: 17px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, .82 );
	max-width: 56ch;
	margin: 0 0 30px;
	text-wrap: pretty;
}

.aa-tp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.aa-tp .aa-tp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var( --tp-pill );
	font-family: var( --tp-display );
	font-size: 15px;
	letter-spacing: .5px;
	padding: 11px 22px;
	cursor: pointer;
	border: 0;
	min-height: 44px;
}

.aa-tp .aa-tp__btn--ghost {
	border: 2px solid rgba( 255, 255, 255, .35 );
	background: transparent;
	color: var( --tp-white );
}

.aa-tp .aa-tp__btn--ghost:hover {
	border-color: rgba( 255, 255, 255, .6 );
	text-decoration: none;
}

/* The collect control is page-local (it toggles between two looks), not the
   site's orange pill — the "owned" state needs a colour .aa-points__cta does
   not have, and the hero/sidebar pair must restyle together from one class. */
.aa-tp .aa-tp__collect {
	background: var( --tp-orange );
	color: var( --tp-white );
	padding: 13px 24px;
}

.aa-tp .aa-tp__collect[ aria-pressed="true" ] {
	background: var( --tp-green );
	color: var( --tp-brown );
}

/* U6 — optimistic-disable while a collect/uncollect request is in flight. */
.aa-tp .aa-tp__collect:disabled,
.aa-tp .aa-tp__collect--pending {
	opacity: .6;
	cursor: default;
}

/* U6 — inline error message, inserted by page.js right after a collect
   button when its request fails; cleared on the next attempt. */
.aa-tp__collect-msg {
	display: block;
	width: 100%;
	font-size: 12px;
	margin-top: 4px;
	color: rgba( 255, 255, 255, .85 );
}

.aa-tp .aa-tp__haveone .aa-tp__collect-msg {
	color: var( --tp-brown );
}

.aa-tp__owners {
	font-size: 13px;
	color: rgba( 255, 255, 255, .6 );
}

.aa-tp__faces {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.aa-tp__face {
	margin: 0;
}

.aa-tp .aa-tp__face-frame {
	display: block;
	background: var( --tp-cream );
	border-radius: var( --tp-radius );
	padding: 14px;
	box-shadow: var( --tp-shadow );
}

.aa-tp .aa-tp__face-img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	max-width: none;
	display: block;
	border-radius: var( --tp-radius-sm );
}

.aa-tp__face--missing .aa-tp__face-frame {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px;
	color: var( --tp-muted );
	font-size: 14px;
}

.aa-tp .aa-tp__face-cap {
	font-family: var( --tp-accent );
	font-size: 12px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var( --tp-yellow );
	margin-top: 10px;
	text-align: center;
}

/* --- body grid ------------------------------------------------------------ */

.aa-tp__grid {
	max-width: var( --tp-container-max );
	margin: 0 auto;
	padding: 44px 28px;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 360px;
	gap: 44px;
	align-items: start;
}

/* At >=1024px .aa-tp itself still sits inside whatever boxed column The7
   wraps the theme-builder output in (the same ancestor the hero fix above
   works around) — so `max-width + margin: auto` here centres the grid on
   THAT column's width, not the viewport, while .aa-tp__hero-inner centres
   on the viewport (it lives inside the now-full-bleed .aa-tp__hero). The two
   drifted apart: the hero's content tracked the viewport, the grid's didn't.
   Fix: give the grid the same full-bleed-then-recentre treatment, so its
   content edge lands at the same point as the hero's. The two formulas are
   equivalent by construction — work through the algebra and hero-inner's
   edge reduces to exactly `(100vw - container-max) / 2` once vw is wide
   enough for the 1340px cap to bite, which is what this calc reproduces
   directly. Scoped to >=1024px only: below that the existing media query
   further down keeps its own narrower gutters untouched. */
@media ( min-width: 1024px ) {
	.aa-tp__grid {
		position: relative;
		left: 50%;
		width: 100vw;
		max-width: none;
		margin-left: -50vw;
		padding-left: max( 28px, calc( ( 100vw - var( --tp-container-max ) ) / 2 ) );
		padding-right: max( 28px, calc( ( 100vw - var( --tp-container-max ) ) / 2 ) );
	}
}

.aa-tp__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.aa-tp__side {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	/* `top` is the sticky header's height plus a 14px gutter. It must clear the
	   header or the sidebar's first card starts underneath it. The height is
	   --aa-header-h (aa-design-system base.css, default 114px: The7's
	   .the7-e-sticky-effects fixed 0-114, z-index 999, measured via CDP on
	   staging, not assumed from the design canvas's top:120px). The header
	   template overrides the property; no The7 class is involved. */
	position: sticky;
	top: var( --tp-sticky-top, calc( var( --aa-header-h, 114px ) + 14px ) );
}

.aa-tp__card {
	background: var( --tp-white );
	color: var( --tp-brown );
	border-radius: var( --tp-radius );
	box-shadow: var( --tp-shadow );
	padding: 28px 30px 30px;
}

.aa-tp__section-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-bottom: 20px;
}

.aa-tp .aa-tp__section-edit {
	font-size: 12px;
	font-weight: 600;
	margin-left: auto;
}

.aa-tp__total {
	font-size: 18px;
	color: var( --tp-muted );
	font-weight: 400;
}

/* --- Inscriptions, VT323 ---------------------------------------------- */

.aa-tp__inscriptions-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.aa-tp__inscription-text {
	background: var( --tp-cream );
	border: 1px solid var( --tp-rule );
	border-radius: var( --tp-radius-sm );
	padding: 16px 18px;
	font-family: var( --tp-mono );
	font-size: 22px;
	line-height: 1.35;
	letter-spacing: .5px;
	color: var( --tp-brown );
}

.aa-tp__inscription-text--missing {
	font-family: var( --tp-text );
	font-size: 14px;
	letter-spacing: normal;
	color: var( --tp-muted );
}

/* Side by side, the Front and Back boxes must match in height. Each box is
   sized by its own content — VT323 at 22px, possibly several lines, against
   "Unknown" in the 14px body font with an add link underneath — so a plain
   grid only aligns the cells, never the boxes inside them. Subgrid makes every
   cell span three shared rows (label, box, add link): the two boxes land in
   the same row and the shorter one stretches to the taller. Row gap moves to
   0 so the cell's own spacing is unchanged. Stacked (below 1024px) there is
   nothing to align, and without subgrid support the old layout stands. */
@supports ( grid-template-rows: subgrid ) {
	@media ( min-width: 1024px ) {
		.aa-tp__inscriptions-grid {
			row-gap: 0;
		}

		.aa-tp__inscription {
			display: grid;
			grid-row: span 3;
			grid-template-rows: subgrid;
		}

		/* As grid items these would stretch to the full cell width. */
		.aa-tp__inscription > .aa-tp__add,
		.aa-tp__inscription > .aa-tp__pending {
			justify-self: start;
			align-self: start;
		}
	}
}

.aa-tp .aa-tp__add {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
}

/* --- Specifications ----------------------------------------------------- */

.aa-tp__specs-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 0;
	border-top: 1px solid var( --tp-rule );
	margin-top: 16px;
}

.aa-tp__spec {
	padding: 16px 20px 16px 0;
	border-bottom: 1px solid var( --tp-rule );
}

.aa-tp__spec-value {
	font-size: 16px;
	font-weight: 500;
	color: var( --tp-brown );
}

.aa-tp__spec--missing .aa-tp__spec-value {
	color: var( --tp-muted );
	font-weight: 400;
}

.aa-tp__spec-sub {
	font-size: 12px;
	color: var( --tp-muted );
	margin-top: 3px;
}

/* --- Related locations ---------------------------------------------------- */

.aa-tp__loc-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 340px, 1fr ) );
	gap: 14px;
}

.aa-tp .aa-tp__loc-card {
	display: flex;
	align-items: stretch;
	background: var( --tp-white );
	border-radius: var( --tp-radius-sm );
	box-shadow: var( --tp-shadow );
	overflow: hidden;
	color: var( --tp-brown );
}

.aa-tp .aa-tp__loc-card:hover {
	box-shadow: var( --tp-shadow-hover );
	text-decoration: none;
}

.aa-tp__loc-media {
	width: 84px;
	flex: none;
	background: var( --tp-cream );
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.aa-tp .aa-tp__loc-img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

.aa-tp__loc-nophoto {
	font-size: 11px;
	color: var( --tp-muted );
	text-align: center;
	padding: 8px;
}

.aa-tp__loc-body {
	flex: 1;
	min-width: 0;
	padding: 14px 16px 12px;
	display: flex;
	flex-direction: column;
}

.aa-tp__loc-name {
	font-family: var( --tp-display );
	font-size: 17px;
	color: var( --tp-brown );
	margin-bottom: 4px;
}

.aa-tp__loc-place {
	font-size: 14px;
	color: var( --tp-muted );
	margin-bottom: 10px;
}

.aa-tp__loc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.aa-tp__loc-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var( --tp-pill );
	font-size: 12px;
	font-weight: 600;
	color: var( --tp-brown );
}

.aa-tp__loc-chip--type {
	padding: 5px 11px;
	background: var( --tp-yellow );
}

.aa-tp__loc-chip--coin {
	border: 1px solid var( --tp-rule );
}

.aa-tp .aa-tp__loc-credit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	color: var( --tp-muted );
	padding-top: 10px;
	border-top: 1px solid var( --tp-rule );
	margin-top: auto;
}

.aa-tp__loc-cta {
	margin-top: 16px;
	font-size: 13px;
	color: var( --tp-muted );
}

.aa-tp__loc-more {
	margin-top: 12px;
}

/* Related locations, paged: 4 at a time. Same track/page pattern as
   aa-lp__token-track (KTD13) — a scroll-snap row of one-page-wide pages. */

.aa-tp__loc-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	margin: 0 -6px;
}

.aa-tp__loc-track::-webkit-scrollbar {
	display: none;
}

.aa-tp__loc-track:focus-visible {
	outline: 3px solid var( --tp-brown );
	outline-offset: 2px;
}

.aa-tp .aa-tp__loc-page {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	align-content: start;
	padding: 4px 6px 8px;
	scroll-snap-align: start;
}

.aa-tp__loc-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.aa-tp__loc-prev,
.aa-tp__loc-next {
	flex: none;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var( --tp-orange );
	color: var( --tp-white );
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.aa-tp__loc-prev:hover:not( :disabled ),
.aa-tp__loc-next:hover:not( :disabled ) {
	background: var( --tp-brown );
}

.aa-tp__loc-prev:disabled,
.aa-tp__loc-next:disabled {
	background: var( --tp-rule );
	color: var( --tp-muted );
	cursor: default;
}

.aa-tp__loc-count {
	font-size: 13px;
	color: var( --tp-muted );
}

@media ( prefers-reduced-motion: reduce ) {
	.aa-tp__loc-track {
		scroll-behavior: auto;
	}
}

/* --- Siblings ------------------------------------------------------------- */

.aa-tp__sib-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 18px;
}

.aa-tp .aa-tp__sib {
	display: block;
	color: var( --tp-brown );
}

.aa-tp .aa-tp__sib:hover {
	color: var( --tp-orange );
	text-decoration: none;
}

.aa-tp__sib-face {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: var( --tp-radius );
	background: var( --tp-cream );
	border: 1px solid var( --tp-rule );
	overflow: hidden;
}

.aa-tp .aa-tp__sib-img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

.aa-tp__sib-blank {
	font-family: var( --tp-display );
	font-size: 13px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var( --tp-muted );
}

.aa-tp__sib--add .aa-tp__sib-face {
	border-color: var( --tp-orange );
}

.aa-tp__sib-face--add {
	font-family: var( --tp-display );
	font-size: 26px;
	color: var( --tp-orange );
}

.aa-tp__sib-title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-top: 10px;
}

.aa-tp__sib-meta {
	display: block;
	font-size: 12px;
	color: var( --tp-muted );
	margin-top: 2px;
}

/* --- comments ------------------------------------------------------------
   One card, same fix as aa-lp__comments: The7 nests .comment-respond inside
   .comments-area, and carding both drew a box inside a box. The submit
   button's teal-to-orange fix lives in Elementor Custom Code #94971
   (wp/update-comment-button-snippet.php) and needs no page-local override —
   see docs/solutions/ui-bugs/comment-button-style-lives-in-elementor-custom-code.md. */

.aa-tp__comments-hint {
	font-size: 14px;
	color: var( --tp-muted );
	margin: 0 0 24px;
	max-width: 62ch;
}

.aa-tp__comments :is( .comments-area, :where( #comments ) ) {
	background: transparent;
	color: var( --tp-brown );
}

.aa-tp__comments .comment-respond {
	background: var( --tp-cream );
	border: 1px solid var( --tp-rule );
	border-radius: var( --tp-radius );
	box-shadow: none;
	padding: 16px;
	margin: 0 0 30px;
}

.aa-tp .aa-tp__comments .comment-reply-title {
	font-family: var( --tp-display );
	font-size: 18px;
	color: var( --tp-brown );
	margin: 0 0 4px;
}

.aa-tp__comments .logged-in-as,
.aa-tp__comments .must-log-in {
	font-size: 14px;
	color: var( --tp-muted );
	margin-bottom: 10px;
}

.aa-tp .aa-tp__comments textarea {
	display: block;
	width: 100%;
	min-height: 70px;
	padding: 12px 14px;
	background: var( --tp-white );
	color: var( --tp-brown );
	font-family: var( --tp-text );
	font-size: 15px;
	border: 1px solid var( --tp-rule );
	border-radius: var( --tp-radius-sm );
	box-shadow: none;
	resize: vertical;
}

.aa-tp .aa-tp__comments textarea:focus {
	outline: 2px solid var( --tp-orange );
	outline-offset: 1px;
	border-color: transparent;
}

.aa-tp__comments .form-submit {
	margin: 12px 0 0;
}

.aa-tp__comments ol.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.aa-tp__comments .comment-body {
	font-size: 15px;
	line-height: 1.65;
}

/* --- sidebar: Record status + Have one of these? --------------------------- */

.aa-tp__status-title,
.aa-tp .aa-tp__haveone-title {
	font-family: var( --tp-display );
	font-size: 18px;
	margin-bottom: 16px;
}

.aa-tp__status-bar {
	flex: 1;
	height: 10px;
	border-radius: var( --tp-pill );
	background: var( --tp-rule );
	overflow: hidden;
	display: block;
	margin-bottom: 8px;
}

.aa-tp__status-fill {
	display: block;
	height: 100%;
	background: var( --tp-orange );
}

.aa-tp__status-pct {
	/* The design's completenessPct uses --font-arcade (Beep Mode One), not
	   VT323 — VT323 is reserved for Inscriptions (KTD12). Beep Mode One is
	   already loaded site-wide as --aa-pixel (aa-points.php), so this needs
	   no extra font request. */
	font-family: var( --aa-pixel, 'Beep Mode One', var( --tp-mono ) );
	font-size: 18px;
	margin-bottom: 8px;
}

.aa-tp__status-detail {
	font-size: 13px;
	color: var( --tp-muted );
	line-height: 1.6;
}

.aa-tp .aa-tp__status-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
}

.aa-tp__haveone {
	background: var( --tp-yellow );
	box-shadow: none;
}

.aa-tp .aa-tp__haveone-title {
	color: var( --tp-brown );
	margin-bottom: 8px;
}

.aa-tp__haveone-text {
	font-size: 13px;
	line-height: 1.6;
	color: var( --tp-brown );
	margin-bottom: 14px;
}

.aa-tp .aa-tp__haveone .aa-tp__collect {
	background: var( --tp-brown );
	color: var( --tp-white );
	padding: 10px 20px;
}

.aa-tp .aa-tp__haveone .aa-tp__collect[ aria-pressed="true" ] {
	background: var( --tp-green );
	color: var( --tp-brown );
}

/* --- stacked: below Elementor's desktop boundary --------------------------- */

@media ( max-width: 1023px ) {
	.aa-tp__hero {
		padding: 0 16px 28px;
	}

	.aa-tp__crumbs {
		padding: 16px 0 18px;
	}

	.aa-tp__hero-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 22px;
	}

	/* Faces before title (R5): the hero-copy block (title, chips, actions)
	   and the faces grid are the two direct children of aa-tp__hero-grid, so
	   reordering them here is the whole job — no markup change needed. */
	.aa-tp__hero-copy {
		order: 2;
	}

	.aa-tp__faces {
		order: -1;
	}

	.aa-tp .aa-tp__title {
		font-size: 34px;
	}

	.aa-tp__description {
		max-width: none;
	}

	/* Actions: 2-col grid, 44px min targets, owners line spans both columns. */
	.aa-tp__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.aa-tp .aa-tp__btn {
		padding: 11px 12px;
	}

	.aa-tp__owners,
	.aa-tp__collect-msg {
		grid-column: 1 / -1;
		text-align: center;
	}

	.aa-tp__grid {
		padding: 20px 12px;
		grid-template-columns: minmax( 0, 1fr );
		gap: 16px;
	}

	.aa-tp__main {
		gap: 16px;
	}

	/* Sidebar after main (R5): no longer sticky once stacked, and it already
	   follows main in source order, so this only cancels the sticky offset. */
	.aa-tp__side {
		position: static;
		gap: 16px;
	}

	.aa-tp__card {
		padding: 20px 16px 22px;
	}

	.aa-tp__section-head {
		margin-bottom: 20px;
	}

	.aa-tp__inscriptions-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.aa-tp__inscription-text {
		font-size: 20px;
		padding: 12px 14px;
	}

	.aa-tp__specs-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 0 14px;
	}

	.aa-tp__spec {
		padding: 14px 0;
	}

	.aa-tp__loc-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.aa-tp .aa-tp__loc-page {
		grid-template-columns: minmax( 0, 1fr );
	}

	.aa-tp__sib-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 14px;
	}
}

@media ( max-width: 480px ) {
	.aa-tp__faces {
		gap: 12px;
	}

	.aa-tp .aa-tp__face-frame {
		padding: 8px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.aa-tp * {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * U7 — Corrections: the "Your suggestion is pending" sibling, and the
 * Suggest-an-edit dialog.
 *
 * THE DIALOG IS APPENDED TO <body>, not inside .aa-tp — a native <dialog>'s
 * top-layer rendering means its ancestors' stacking/transform context does
 * not matter, and appending to body is what page.js's buildDialog() does.
 * That means it CANNOT read the .aa-tp custom properties (they are scoped to
 * that element), so this block re-declares the same --aa-* site palette with
 * the same literal fallbacks aa-tp's own :root block uses, independently.
 * ---------------------------------------------------------------------- */

.aa-tp__pending {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	font-style: italic;
	color: var( --aa-muted, #8a7a63 );
}

/* page.js toggles the [hidden] attribute on both the "+ Add this detail"
   control and this pending sibling (applyCorrectionsState()). Author CSS
   beats the UA stylesheet's own `[hidden] { display: none }` rule regardless
   of specificity (origin, not specificity, decides that contest), so BOTH
   elements' own `display` declarations above/in the main sheet would
   otherwise silently defeat `hidden` and show both states at once — exactly
   what a screenshot caught during this unit's own verification. These two
   rules are what actually make `hidden` hide anything here. */
.aa-tp__pending[ hidden ],
.aa-tp .aa-tp__add[ hidden ] {
	display: none;
}

.aa-tp-dialog {
	--d-orange: var( --aa-orange, #db680b );
	--d-brown: var( --aa-brown, #6a3306 );
	--d-cream: var( --aa-cream, #fdf6e8 );
	--d-muted: var( --aa-muted, #8a7a63 );
	--d-rule: #e8ddc4;
	--d-pill: 999px;
	--d-radius: 8px;
	--d-display: var( --aa-display, 'Cartridge', ui-sans-serif, system-ui, sans-serif );
	--d-text: var( --aa-text, 'Poppins', ui-sans-serif, system-ui, sans-serif );

	box-sizing: border-box;
	width: min( 480px, calc( 100vw - 32px ) );
	max-height: calc( 100vh - 48px );
	overflow: auto;
	border: 0;
	border-radius: var( --d-radius );
	padding: 0;
	background: var( --d-cream );
	color: var( --d-brown );
	font-family: var( --d-text );
	box-shadow: 0 12px 40px rgba( 74, 36, 4, .35 );
}

.aa-tp-dialog::backdrop {
	background: rgba( 74, 36, 4, .55 );
}

.aa-tp-dialog *,
.aa-tp-dialog *::before,
.aa-tp-dialog *::after {
	box-sizing: border-box;
}

.aa-tp-dialog__form {
	position: relative;
	padding: 28px 24px 20px;
}

.aa-tp-dialog__title {
	margin: 0 0 16px;
	font-family: var( --d-display );
	font-size: 22px;
	color: var( --d-brown );
}

.aa-tp-dialog__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: var( --d-muted );
	cursor: pointer;
}

.aa-tp-dialog__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.aa-tp-dialog__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var( --d-brown );
}

.aa-tp-dialog__select-field,
.aa-tp-dialog__input,
.aa-tp-dialog__note {
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var( --d-rule );
	border-radius: 6px;
	background: #fff;
	color: var( --d-brown );
	font-family: var( --d-text );
	font-size: 15px;
	font-weight: 400;
}

textarea.aa-tp-dialog__input,
.aa-tp-dialog__note {
	min-height: 72px;
	resize: vertical;
}

.aa-tp-dialog__current {
	margin: 0;
	font-size: 13px;
	color: var( --d-muted );
}

.aa-tp-dialog__editor {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Same `hidden`-vs-own-`display` fix as .aa-tp__pending above — page.js
   toggles [hidden] on this element when the selected field already has a
   pending suggestion (renderCorrectionsField()). */
.aa-tp-dialog__editor[ hidden ] {
	display: none;
}

.aa-tp-dialog__radios {
	display: flex;
	gap: 16px;
}

.aa-tp-dialog__radio {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-weight: 400;
}

.aa-tp-dialog__pending {
	padding: 14px;
	border-radius: 6px;
	background: rgba( 143, 201, 58, .18 );
	color: var( --d-brown );
	font-size: 14px;
}

.aa-tp-dialog__pending p {
	margin: 0 0 10px;
}

.aa-tp-dialog__error {
	margin: 0;
	padding: 10px 12px;
	border-radius: 6px;
	background: rgba( 178, 34, 34, .1 );
	color: #8a1f1f;
	font-size: 13px;
}

.aa-tp-dialog__success {
	margin: 0;
	padding: 10px 12px;
	border-radius: 6px;
	background: rgba( 143, 201, 58, .22 );
	color: var( --d-brown );
	font-size: 13px;
}

.aa-tp-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 20px;
}

.aa-tp-dialog .aa-tp__btn {
	min-height: 44px;
	padding: 10px 20px;
	border-radius: var( --d-pill );
	font-family: var( --d-display );
	font-size: 14px;
	letter-spacing: .5px;
	cursor: pointer;
}

.aa-tp-dialog .aa-tp-dialog__submit {
	border: 0;
	background: var( --d-orange );
	color: #fff;
}

.aa-tp-dialog .aa-tp-dialog__submit:disabled,
.aa-tp-dialog .aa-tp-dialog__withdraw:disabled {
	opacity: .6;
	cursor: default;
}

.aa-tp-dialog .aa-tp__btn--ghost {
	border: 2px solid var( --d-rule );
	background: transparent;
	color: var( --d-brown );
}

@media ( max-width: 480px ) {
	.aa-tp-dialog {
		width: calc( 100vw - 24px );
	}

	.aa-tp-dialog__form {
		padding: 24px 16px 16px;
	}

	.aa-tp-dialog__actions {
		flex-direction: column-reverse;
	}

	.aa-tp-dialog .aa-tp__btn {
		width: 100%;
	}
}