/**
 * Q8tly — ChainHub hub surface (M11-B2, Section-B board layout).
 *
 * Scoped to .q8tly-chainhub* — the sitewide handle is inert off the hub route
 * (the house pattern). Logical properties throughout: AR mirrors RTL with no
 * [dir] overrides (the GD-physical-CSS lesson, D-176 §7/§8 — none of that
 * class of rule here). Tokens per D-049.
 */

.q8tly-chainhub {
	max-width: 760px;
	margin-inline: auto;
	padding: 24px 16px 48px;
}

/* --- Brand header ------------------------------------------------------- */

.q8tly-chainhub__header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-block-end: 20px;
}

.q8tly-chainhub__logo {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--ink, #16213D);
	color: #fff;
	font-weight: 700;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.q8tly-chainhub__brand {
	margin: 0;
	font-size: clamp(24px, 4vw, 32px);
	line-height: 1.15;
}

.q8tly-chainhub__countline {
	margin: 4px 0 0;
	color: var(--muted, #5B6472);
	font-size: 14px;
}

/* The hidden-attribute contract: these blocks set their own display values,
 * which would otherwise OVERRIDE the UA's [hidden]{display:none} — the B2
 * defect Bader's walk caught (an empty card frame on the default state; the
 * geo/picker also rendered JS-off). [hidden] must always win. */
.q8tly-chainhub__highlight[hidden],
.q8tly-chainhub__geo[hidden],
.q8tly-chainhub__picker[hidden] {
	display: none;
}

/* --- Heading-state row + geo controls ----------------------------------- */

.q8tly-chainhub__staterow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-block: 18px 10px;
}

.q8tly-chainhub__state {
	margin: 0;
	font-size: 18px;
}

.q8tly-chainhub__geo {
	display: flex;
	gap: 8px;
}

.q8tly-chainhub__geo-use,
.q8tly-chainhub__chip {
	appearance: none;
	border: 1px solid var(--line, #D9DEE7);
	background: #fff;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	color: var(--ink, #16213D);
	cursor: pointer;
}

.q8tly-chainhub__geo-use {
	border-color: var(--accent, #FE4747);
	color: var(--accent, #FE4747);
}

/* --- Highlight card (non-default states only) --------------------------- */

.q8tly-chainhub__highlight {
	display: flex;
	gap: 14px;
	border: 1px solid var(--line, #D9DEE7);
	border-inline-start: 4px solid var(--accent, #FE4747);
	border-radius: 12px;
	padding: 12px;
	margin-block-end: 16px;
	background: #fff;
}

.q8tly-chainhub__hl-media {
	flex: 0 0 112px;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: var(--ink, #16213D) center / cover no-repeat;
}

.q8tly-chainhub__hl-title {
	margin: 0 0 2px;
	font-weight: 700;
}

.q8tly-chainhub__hl-meta {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--muted, #5B6472);
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.q8tly-chainhub__hl-actions {
	margin: 0;
	display: flex;
	gap: 14px;
	font-size: 14px;
}

.q8tly-chainhub__hl-view,
.q8tly-chainhub__hl-dir,
.q8tly-chainhub__row-dir {
	color: var(--accent, #FE4747);
	text-decoration: none;
	font-weight: 600;
}

/* --- Area picker --------------------------------------------------------- */

.q8tly-chainhub__picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 14px;
}

.q8tly-chainhub__chip.is-active {
	background: var(--ink, #16213D);
	border-color: var(--ink, #16213D);
	color: #fff;
}

/* --- All-locations list -------------------------------------------------- */

.q8tly-chainhub__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.q8tly-chainhub__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-block: 14px;
	border-block-end: 1px solid var(--line, #D9DEE7);
}

.q8tly-chainhub__row.is-filtered {
	display: none;
}

.q8tly-chainhub__row.is-highlighted {
	border-inline-start: 4px solid var(--accent, #FE4747);
	padding-inline-start: 10px;
}

.q8tly-chainhub__row-media {
	flex: 0 0 88px;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: var(--ink, #16213D) center / cover no-repeat;
	overflow: hidden;
}

.q8tly-chainhub__row-body {
	flex: 1 1 auto;
	min-width: 0;
}

.q8tly-chainhub__row-title {
	font-weight: 700;
	color: var(--ink, #16213D);
	text-decoration: none;
}

.q8tly-chainhub__row-meta {
	margin: 2px 0 4px;
	font-size: 13px;
	color: var(--muted, #5B6472);
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.q8tly-chainhub__row-dist:empty {
	display: none;
}

.q8tly-chainhub__row-dir {
	flex: 0 0 auto;
	font-size: 14px;
}

/* (B3: the static-map rules were removed with the map — D-198.) */

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 480px) {
	.q8tly-chainhub__highlight {
		flex-direction: column;
	}

	.q8tly-chainhub__hl-media {
		flex-basis: auto;
		width: 100%;
	}
}

/* --- Ownership door (chain claim, Bader model 2026-07-24) ----------------- */

.q8tly-chainhub__claimdoor {
	margin: 24px 0 0;
	padding: 16px;
	border: 1px solid var(--line, #d9dfe9);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.q8tly-chainhub__claimdoor-q {
	margin: 0;
	font-weight: 600;
	color: var(--ink, #1b2a4a);
}

.q8tly-chainhub__claimdoor-cta {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--ink, #1b2a4a);
	color: var(--paper, #fff);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}