/*
 * ALL AT SEA Awards — the bar kit page (/awards/bar/<slug>/, MP-109 §3).
 *
 * Tokens from the Type & Space Standard v1 and the v2 visual identity, with a
 * literal fallback on every var() so the page still reads correctly if the
 * theme's tokens.css is absent or renamed. Versioned on AAS_BAR_VER, its own
 * constant — this file never touches, and is never touched by, the theme's
 * contested components.css.
 *
 * Design intent: one thing at a time. This page is read once, at speed, by a
 * bar owner doing three other things. Generous space, a strict 1-2-3
 * hierarchy, no boxes competing for attention, nothing that needs explaining.
 */

.aas-bar {
	--aas-bar-navy: var(--aas-navy, #163A57);
	--aas-bar-foam: var(--aas-foam, #F1F4F4);
	--aas-bar-text: var(--aas-text, #1B3A50);
	--aas-bar-muted: var(--aas-muted-2, #3E566A);
	--aas-bar-sunset: var(--aas-sunset-link, #A63C22);
	--aas-bar-seaglass: var(--aas-seaglass, #2F7E80);
	--aas-bar-hair: var(--aas-hair, #D3DEE0);

	color: var(--aas-bar-text);
	font-size: var(--fs-body, 1.25rem);
	line-height: var(--lh-body, 1.7);
}

.aas-bar__wrap {
	max-width: 52rem;
	margin: 0 auto;
	padding: var(--space-56, 56px) var(--space-24, 24px) var(--space-96, 96px);
}

/* ---------------------------------------------------------------- Header */

.aas-bar__head { margin-bottom: var(--space-56, 56px); }

.aas-bar__kicker {
	font-family: var(--aas-sans, "Archivo", system-ui, sans-serif);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8125rem;
	color: var(--aas-bar-sunset);
	margin: 0 0 var(--space-16, 16px);
}

.aas-bar__title {
	font-family: var(--aas-serif, Georgia, serif);
	font-size: var(--fs-h1, clamp(2.05rem, 1.5rem + 2.2vw, 2.75rem));
	line-height: var(--lh-tight, 1.1);
	font-weight: 600;
	color: var(--aas-bar-navy);
	margin: 0 0 var(--space-16, 16px);
}

.aas-bar__island { font-weight: 400; color: var(--aas-bar-muted); }

.aas-bar__stand {
	font-size: var(--fs-deck, 1.375rem);
	color: var(--aas-bar-muted);
	margin: 0;
}

/* -------------------------------------------------------------- Sections */

.aas-bar__section {
	margin: var(--space-64, 64px) 0 0;
	padding-top: var(--space-40, 40px);
	border-top: 1px solid var(--aas-bar-hair);
}

.aas-bar__h2 {
	font-family: var(--aas-serif, Georgia, serif);
	font-size: var(--fs-h2, 1.8rem);
	line-height: var(--lh-head, 1.2);
	font-weight: 600;
	color: var(--aas-bar-navy);
	margin: 0 0 var(--space-16, 16px);
}

.aas-bar__h3 {
	font-family: var(--aas-sans, "Archivo", system-ui, sans-serif);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--aas-bar-navy);
	margin: 0;
}

.aas-bar__lede { margin: 0 0 var(--space-24, 24px); color: var(--aas-bar-muted); }

.aas-bar__note {
	font-size: var(--fs-small, 0.95rem);
	line-height: 1.5;
	color: var(--aas-bar-muted);
	margin: var(--space-8, 8px) 0 0;
}

/* -------------------------------------------------------------- Standing */

.aas-bar__standing { border-top: 0; padding-top: 0; margin-top: var(--space-48, 48px); }

.aas-bar__standing-line {
	font-family: var(--aas-serif, Georgia, serif);
	font-size: var(--fs-h2, 1.8rem);
	line-height: 1.25;
	color: var(--aas-bar-navy);
	background: rgba(47, 126, 128, 0.08);
	border-left: 4px solid var(--aas-bar-seaglass);
	padding: var(--space-24, 24px) var(--space-32, 32px);
	margin: 0;
}

/* ------------------------------------------------------------- Vote link */

.aas-bar__linkrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16, 16px);
	margin-bottom: var(--space-32, 32px);
}

.aas-bar__url {
	font-family: var(--aas-sans, "Archivo", system-ui, sans-serif);
	font-size: clamp(1.1rem, 0.7rem + 1.6vw, 1.6rem);
	font-weight: 700;
	color: var(--aas-bar-navy);
	background: #fff;
	border: 1px solid var(--aas-bar-hair);
	border-radius: 2px;
	padding: var(--space-16, 16px) var(--space-24, 24px);
	word-break: break-all;
}

.aas-bar__copy,
.aas-bar__cta {
	appearance: none;
	display: inline-block;
	cursor: pointer;
	font-family: var(--aas-sans, "Archivo", system-ui, sans-serif);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	text-decoration: none;
	color: #fff;
	background: var(--aas-sunset, #C24A2C);
	border: 0;
	border-radius: 2px;
	padding: 14px 20px;
	transition: background 180ms ease-in-out;
}

.aas-bar__copy:hover,
.aas-bar__cta:hover { background: var(--aas-sunset-lift, #E8825E); }

.aas-bar__copy.is-done { background: var(--aas-bar-seaglass); }

.aas-bar__qr {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-32, 32px);
	align-items: flex-start;
}

.aas-bar__qr-canvas {
	background: #fff;
	padding: var(--space-16, 16px);
	border: 1px solid var(--aas-bar-hair);
	line-height: 0;
}

.aas-bar__qr-canvas img,
.aas-bar__qr-canvas canvas { display: block; max-width: 100%; height: auto; }

.aas-bar__qr-canvas.is-failed::after {
	content: "QR unavailable — the link below works on its own.";
	display: block;
	font-size: var(--fs-small, 0.95rem);
	line-height: 1.4;
	color: var(--aas-bar-muted);
	max-width: 18rem;
}

.aas-bar__qr-side { flex: 1 1 16rem; }

/* ----------------------------------------------------------------- Cards */

.aas-bar__cards,
.aas-bar__pieces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-24, 24px);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.aas-bar__card img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--aas-bar-hair);
}

.aas-bar__card-meta {
	font-family: var(--aas-sans, "Archivo", system-ui, sans-serif);
	font-size: var(--fs-small, 0.95rem);
	margin: var(--space-8, 8px) 0 0;
}

.aas-bar__card-meta span { display: block; color: var(--aas-bar-muted); }

.aas-bar__card-meta--pending { color: var(--aas-bar-muted); }

.aas-bar__card-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8, 8px);
	margin: var(--space-8, 8px) 0 0;
	font-size: var(--fs-small, 0.95rem);
}

.aas-bar__card-link code {
	font-family: var(--aas-sans, "Archivo", system-ui, sans-serif);
	font-weight: 700;
	color: var(--aas-bar-navy);
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- Print pieces */

.aas-bar__piece {
	display: block;
	text-decoration: none;
	color: var(--aas-bar-navy);
	background: #fff;
	border: 1px solid var(--aas-bar-hair);
	border-radius: 2px;
	padding: var(--space-24, 24px);
	transition: border-color 180ms ease-in-out;
}

.aas-bar__piece:hover { border-color: var(--aas-bar-seaglass); }

.aas-bar__piece strong {
	display: block;
	font-family: var(--aas-sans, "Archivo", system-ui, sans-serif);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--aas-bar-sunset);
	margin-bottom: var(--space-8, 8px);
}

.aas-bar__piece span {
	font-family: var(--aas-serif, Georgia, serif);
	font-size: 1.05rem;
	line-height: 1.4;
	color: var(--aas-bar-muted);
}

/* ----------------------------------------------------------------- Posts */

.aas-bar__post { margin-bottom: var(--space-40, 40px); }

.aas-bar__post-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16, 16px);
	margin-bottom: var(--space-8, 8px);
}

.aas-bar__textarea {
	width: 100%;
	font-family: var(--aas-serif, Georgia, serif);
	font-size: 18px;
	line-height: 1.6;
	color: var(--aas-bar-text);
	background: #fff;
	border: 1px solid var(--aas-bar-hair);
	border-radius: 2px;
	padding: var(--space-16, 16px);
	margin-top: var(--space-8, 8px);
	resize: vertical;
}

.aas-bar__textarea--code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	word-break: break-all;
}

/* ----------------------------------------------------------------- Badge */

.aas-bar__badge {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-32, 32px);
	align-items: flex-start;
}

.aas-bar__badge img { display: block; border: 1px solid var(--aas-bar-hair); }

.aas-bar__badge-side { flex: 1 1 20rem; }

/* ------------------------------------------------------------ First Mate */

.aas-bar__fm {
	background: var(--aas-bar-navy);
	color: var(--aas-bar-foam);
	border-top: 0;
	border-radius: 2px;
	padding: var(--space-40, 40px);
}

.aas-bar__fm .aas-bar__h2 { color: var(--aas-bar-foam); }
.aas-bar__fm .aas-bar__lede { color: rgba(241, 244, 244, 0.85); }

.aas-bar__ctarow { display: flex; flex-wrap: wrap; gap: var(--space-12, 12px); align-items: center; }

.aas-bar__cta--ghost {
	background: transparent;
	color: var(--aas-bar-foam);
	border: 1px solid rgba(241, 244, 244, 0.55);
}

/* ---------------------------------------------------------------- Footer */

.aas-bar__foot {
	margin-top: var(--space-64, 64px);
	padding-top: var(--space-24, 24px);
	border-top: 1px solid var(--aas-bar-hair);
	font-size: var(--fs-small, 0.95rem);
	line-height: 1.6;
	color: var(--aas-bar-muted);
}

.aas-bar__foot p { margin: 0 0 var(--space-8, 8px); }

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 600px) {
	.aas-bar__wrap { padding: var(--space-32, 32px) var(--space-16, 16px) var(--space-64, 64px); }
	.aas-bar__standing-line { padding: var(--space-16, 16px) var(--space-24, 24px); font-size: 1.35rem; }
	.aas-bar__textarea { font-size: 16px; } /* iOS no-zoom floor */
	.aas-bar__copy, .aas-bar__cta { width: 100%; text-align: center; }
}

/* v0.9.3 — this page is for the bar's owner, not a reader: no house-ad band
   over their name, no newsletter pitch under their kit. Theme chrome hooked
   by closures; hidden here rather than removed there (no theme release). */
.aas-bar-page .aas-ad-band--leaderboard,
.aas-bar-page .aas-signup,
.aas-bar-page .aas-anchor { display: none !important; }