/**
 * WC Pedagógica Eventos — floor plan (escolha de stands).
 *
 * Mobile-first, no dependencies. Loads on top of frontend.css, which owns the
 * .pedev base, --pedev-brand and the derived brand tokens.
 *
 * Colour is never the only signal: every square also carries its own words
 * ("Disponível", "Reservado", the brand that took it), so the map still reads
 * on a black-and-white printout, on a bright phone in a warehouse, and to
 * anyone who does not separate the two area hues.
 */

:root {
	/*
	 * The two areas are named after their colours, so these are identity, not
	 * decoration — they must not follow the brand colour from Settings.
	 * Surfaces are pale and text is near-black on top of them: the yellow that
	 * names the área amarela can never carry white text at AA.
	 */
	--pedev-area-amarela: #b26a00;
	--pedev-area-amarela-soft: #fff6e0;
	--pedev-area-amarela-line: #e9a93c;

	--pedev-area-azul: #0b4f9e;
	--pedev-area-azul-soft: #e8f1fd;
	--pedev-area-azul-line: #5b93d6;

	--pedev-stand-free: #036c4a;
	--pedev-stand-free-soft: #e6f6ef;
	--pedev-stand-free-line: #0f9d64;

	--pedev-stand-mine: #044e8a;
	--pedev-stand-mine-soft: #e4f0fb;

	--pedev-stand-taken-soft: #f1f2f4;
	--pedev-stand-taken-ink: #5a6270;

	--pedev-stand-danger: #a3101c;
	--pedev-stand-danger-soft: #fdeceb;

	/*
	 * Two states that did not exist while a stand was either free or taken.
	 *
	 * Amber is the clock: somebody is filling the form in right now and this
	 * will resolve itself in minutes, one way or the other. Violet is the
	 * organiser: the space is spoken for and only they can move it. Neither may
	 * borrow green or grey — a lock that reads as "free" is a race, and a
	 * pending request that reads as "taken" hides the one state the exhibitor
	 * can still ask about.
	 */
	--pedev-stand-hold: #96530a;
	--pedev-stand-hold-soft: #fff3e0;
	--pedev-stand-hold-line: #d98a20;

	--pedev-stand-pending: #4f3aa8;
	--pedev-stand-pending-soft: #eeeaff;
	--pedev-stand-pending-line: #8674dd;
}

/* -------------------------------------------------------------------------
 * Tokens, declared here on purpose.
 *
 * These live in frontend.css, which the standalone map route does not load —
 * it serves its own document with stands.css alone. A missing custom property
 * does not fall back: `border: 1px solid var(--pedev-border)` becomes an
 * invalid declaration and is dropped entirely, so every field rendered with no
 * border at all and looked like it had not rendered.
 *
 * Only defaults live here. The brand colours are still injected by PHP and,
 * because :root wins over these by cascade order when frontend.css is present,
 * loading both stylesheets together changes nothing.
 * ---------------------------------------------------------------------- */
.pedev-stands {
	/* Brand is NOT redeclared here: PHP injects it on :root, and a copy on
	 * this selector would win by proximity and discard the configured colour. */
	--pedev-ink: #101828;
	--pedev-muted: #4b5565;
	--pedev-faint: #667085;
	--pedev-line: #e4e7ec;
	--pedev-border: #8a94a6;
	--pedev-surface: #fff;
	--pedev-soft: #f7f8fa;
	--pedev-radius: 12px;
}

.pedev-stands {
	--pedev-stand-min: 5.5rem;
}

.pedev-stands__title {
	font-size: 1.375rem;
	line-height: 1.25;
	margin: 0 0 0.5rem;
}

.pedev-stands__lead {
	color: var(--pedev-muted);
	margin: 0 0 1.25rem;
}

/* ------------------------------------------------------------- Notices */

.pedev-stands__notice {
	border-left: 4px solid var(--pedev-border);
	border-radius: 8px;
	background: var(--pedev-soft);
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
}

.pedev-stands__notice.is-ok {
	background: var(--pedev-stand-free-soft);
	border-left-color: var(--pedev-stand-free);
	color: #073b2a;
}

.pedev-stands__notice.is-warn {
	background: var(--pedev-area-amarela-soft);
	border-left-color: var(--pedev-area-amarela);
	color: #4a2f00;
}

.pedev-stands__notice.is-error {
	background: var(--pedev-stand-danger-soft);
	border-left-color: var(--pedev-stand-danger);
	color: #6d0d15;
}

/* ------------------------------------------------- Identification form */

/* Self-sufficient card: .pedev-card lives in frontend.css, which the
   standalone route never loads. */
.pedev-stands__identify {
	background: var(--pedev-surface);
	border: 1px solid var(--pedev-line);
	border-radius: var(--pedev-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	margin-bottom: 1.5rem;
	padding: 1.25rem;
}

.pedev-stands__steps {
	color: var(--pedev-muted);
	display: none;
	margin: 1.25rem 0 0;
	padding-left: 1.25rem;
}

.pedev-stands__steps li {
	margin-bottom: 0.6rem;
}

.pedev-stands__steps li::marker {
	color: var(--pedev-brand);
	font-weight: 700;
}

/* The "i" inside the access-code control, and the tip floating over it —
   the same pattern as the participants form, rebuilt on this page's tokens
   because form.css never loads here. */
.pedev-stands__control {
	position: relative;
}

.pedev-stands .pedev-field input.pedev-stands__input--tipped {
	padding-right: 2.75rem;
}

.pedev-stands__infobtn {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: transparent;
	border: 1px solid var(--pedev-border);
	border-radius: 50%;
	color: var(--pedev-faint);
	cursor: pointer;
	display: inline-flex;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.8125rem;
	font-style: italic;
	font-weight: 700;
	height: 1.375rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.375rem;
}

.pedev-stands__infobtn:hover {
	border-color: var(--pedev-brand);
	color: var(--pedev-brand);
}

.pedev-stands__infobtn:focus-visible {
	outline: 2px solid var(--pedev-brand);
	outline-offset: 2px;
}

.pedev-stands__infobtn[aria-expanded="true"] {
	background: var(--pedev-brand);
	border-color: var(--pedev-brand);
	color: #fff;
}

/* Floating: absolute, so opening it never reflows the form. */
.pedev-stands__tip {
	background: #101828;
	border-radius: 8px;
	bottom: calc(100% + 0.5rem);
	box-shadow: 0 8px 24px -8px rgba(16, 24, 40, 0.45);
	color: #fff;
	font-size: 0.8125rem;
	left: 0;
	line-height: 1.45;
	margin: 0;
	padding: 0.5rem 0.6875rem;
	position: absolute;
	right: 0;
	z-index: 5;
}

.pedev-stands__tip::after {
	border: 6px solid transparent;
	border-top-color: #101828;
	content: "";
	position: absolute;
	right: 0.9375rem;
	top: 100%;
}

.pedev-stands__tip[hidden] {
	display: none;
}

.pedev-stands .pedev-field {
	margin: 0 0 1rem;
}

.pedev-stands .pedev-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.pedev-stands .pedev-field input,
.pedev-stands .pedev-field select {
	background: var(--pedev-surface);
	border: 1px solid var(--pedev-border);
	border-radius: 10px;
	color: var(--pedev-ink);
	font: inherit;
	min-height: 48px;
	padding: 0.6rem 0.75rem;
	width: 100%;
}

.pedev-stands .pedev-field input:focus,
.pedev-stands .pedev-field select:focus {
	border-color: var(--pedev-brand);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pedev-brand) 30%, transparent);
	outline: none;
}

.pedev-stands .pedev-field.has-error input,
.pedev-stands .pedev-field.has-error select {
	border-color: var(--pedev-stand-danger);
}

/*
 * The access code. Monospaced, spaced out and upper-case because it is read
 * off an e-mail and retyped on a phone: the Crockford alphabet already removed
 * the look-alikes, and this removes the rest of the guesswork.
 */
.pedev-stands .pedev-field input.pedev-stands__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.pedev-stands .pedev-field__hint {
	color: var(--pedev-faint);
	font-size: 0.875rem;
	margin: 0.35rem 0 0;
}

.pedev-stands .pedev-field__error {
	color: var(--pedev-stand-danger);
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0.35rem 0 0;
}

/* ------------------------------------------------------------- Buttons */

.pedev-stands .pedev-btn {
	background: var(--pedev-brand);
	border: 1px solid var(--pedev-brand);
	border-radius: 10px;
	color: var(--pedev-on-brand);
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 600;
	min-height: 48px;
	padding: 0.7rem 1.25rem;
	text-align: center;
	text-decoration: none;
}

.pedev-stands .pedev-btn:hover,
.pedev-stands .pedev-btn:focus {
	background: var(--pedev-brand-dark);
	border-color: var(--pedev-brand-dark);
	color: var(--pedev-on-brand-dark);
}

.pedev-stands .pedev-btn--ghost {
	background: transparent;
	border-color: var(--pedev-border);
	color: var(--pedev-ink);
}

.pedev-stands .pedev-btn--ghost:hover,
.pedev-stands .pedev-btn--ghost:focus {
	background: var(--pedev-soft);
	border-color: var(--pedev-ink);
	color: var(--pedev-ink);
}

.pedev-stands .pedev-btn--danger {
	background: var(--pedev-stand-danger);
	border-color: var(--pedev-stand-danger);
	color: #fff;
}

.pedev-stands .pedev-btn--danger:hover,
.pedev-stands .pedev-btn--danger:focus {
	background: #7c0c15;
	border-color: #7c0c15;
	color: #fff;
}

.pedev-stands__submit {
	width: 100%;
}

.pedev-stands .pedev-link {
	color: var(--pedev-brand-ink);
	text-decoration: underline;
}

/* --------------------------------------------------------- Who is here */

/* Identity panel: brand, who is booking, and the way out. */
.pedev-stands__who {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
}

.pedev-who__brand {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.pedev-who__eyebrow {
	color: var(--pedev-faint);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pedev-who__name {
	color: var(--pedev-brand-dark, #06327f);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.pedev-who__details {
	display: grid;
	gap: 0.75rem 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, max-content));
	margin: 0;
	min-width: 0;
}

.pedev-who__item {
	min-width: 0;
}

.pedev-who__label {
	color: var(--pedev-faint);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.pedev-who__value {
	color: var(--pedev-ink);
	font-size: 0.9375rem;
	margin: 0.125rem 0 0;
	/* Addresses are the one value with no spaces to break on. */
	overflow-wrap: anywhere;
}

.pedev-who__exit {
	margin: 0;
	width: 100%;
}

.pedev-who__exit .pedev-btn {
	width: 100%;
}

/* ------------------------------------------------------- The running lock */

/*
 * The card that says a stand is being kept for this browser, and for how long.
 * Amber like the square it is about, and loud enough that nobody wanders off
 * thinking the stand is theirs for good.
 */
.pedev-stands__holding {
	background: var(--pedev-stand-hold-soft);
	border-color: var(--pedev-stand-hold-line);
	margin-bottom: 1rem;
}

.pedev-stands__holding h3 {
	color: #4a2b00;
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

.pedev-stands__holding-line {
	margin: 0 0 0.75rem;
}

.pedev-stands__holding-actions {
	margin: 0 0 0.5rem;
}

.pedev-stands__holding form {
	margin: 0;
}

/* The deadline on the classic confirmation screen: no dialog there to count
   anything down, so it names the minute instead of ticking. */
.pedev-stands__deadline {
	background: var(--pedev-stand-hold-soft);
	border-left: 4px solid var(--pedev-stand-hold);
	border-radius: 8px;
	color: #4a2b00;
	font-weight: 600;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
}

.pedev-stands__confirm-quit {
	margin: 0.75rem 0 0;
}

/* --------------------------------------------------------- My reservations */

.pedev-stands__mine {
	margin-bottom: 1rem;
}

.pedev-stands__mine-item.is-pending strong {
	background: var(--pedev-stand-pending-soft);
	color: var(--pedev-stand-pending);
}

.pedev-stands__mine h3 {
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

.pedev-stands__mine-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pedev-stands__mine-item {
	align-items: center;
	border-top: 1px solid var(--pedev-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 0;
}

.pedev-stands__mine-item:first-child {
	border-top: 0;
}

.pedev-stands__mine-item strong {
	background: var(--pedev-stand-mine-soft);
	border-radius: 6px;
	color: var(--pedev-stand-mine);
	padding: 0.15rem 0.5rem;
}

.pedev-stands__mine-item span {
	color: var(--pedev-muted);
	flex: 1 1 auto;
}

.pedev-stands__hint {
	color: var(--pedev-faint);
	font-size: 0.875rem;
	margin: 0.75rem 0 0;
}

/* -------------------------------------------------------------- Legend */

.pedev-stands__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

.pedev-stands__legend-item {
	align-items: center;
	color: var(--pedev-muted);
	display: flex;
	font-size: 0.875rem;
	gap: 0.4rem;
}

.pedev-stands__swatch {
	border: 2px solid var(--pedev-border);
	border-radius: 5px;
	display: inline-block;
	height: 1rem;
	width: 1rem;
}

.pedev-stands__swatch.is-free {
	background: var(--pedev-stand-free-soft);
	border-color: var(--pedev-stand-free-line);
}

.pedev-stands__swatch.is-mine {
	background: var(--pedev-stand-mine-soft);
	border-color: var(--pedev-stand-mine);
}

.pedev-stands__swatch.is-earmarked {
	background: var(--pedev-stand-free-soft);
	border-color: var(--pedev-stand-free);
	border-style: dashed;
}

.pedev-stands__swatch.is-holding {
	background: var(--pedev-stand-hold-soft);
	border-color: var(--pedev-stand-hold);
}

.pedev-stands__swatch.is-held {
	background: repeating-linear-gradient(
		45deg,
		var(--pedev-stand-hold-soft),
		var(--pedev-stand-hold-soft) 3px,
		#f4d7a8 3px,
		#f4d7a8 6px
	);
	border-color: var(--pedev-stand-hold-line);
}

.pedev-stands__swatch.is-pending {
	background: var(--pedev-stand-pending-soft);
	border-color: var(--pedev-stand-pending);
	border-style: dotted;
}

.pedev-stands__swatch.is-taken {
	background: var(--pedev-stand-taken-soft);
	border-color: var(--pedev-stand-taken-ink);
}

.pedev-stands__swatch.is-locked {
	background: repeating-linear-gradient(
		45deg,
		var(--pedev-stand-taken-soft),
		var(--pedev-stand-taken-soft) 3px,
		#dcdfe4 3px,
		#dcdfe4 6px
	);
	border-color: var(--pedev-stand-taken-ink);
}

.pedev-stands__swatch.is-blocked {
	background: var(--pedev-stand-danger-soft);
	border-color: var(--pedev-stand-danger);
}

/* --------------------------------------------------------------- Areas */

.pedev-stands__area {
	border: 1px solid var(--pedev-line);
	border-radius: var(--pedev-radius);
	margin: 0 0 1.25rem;
	padding: 1rem 0.75rem;
}

.pedev-stands__area--amarela {
	background: var(--pedev-area-amarela-soft);
	border-color: var(--pedev-area-amarela-line);
}

.pedev-stands__area--azul {
	background: var(--pedev-area-azul-soft);
	border-color: var(--pedev-area-azul-line);
}

.pedev-stands__area-title {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.05rem;
	gap: 0.25rem 0.6rem;
	margin: 0 0 0.75rem;
}

.pedev-stands__area--amarela .pedev-stands__area-title {
	color: #4a2f00;
}

.pedev-stands__area--azul .pedev-stands__area-title {
	color: #0a2f5c;
}

.pedev-stands__area-count {
	font-size: 0.8125rem;
	font-weight: 400;
	opacity: 0.85;
}

/* ---------------------------------------------------------------- Grid */

.pedev-stands__grid {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(var(--pedev-stand-min), 1fr));
}

/* A 3×6 é o dobro de uma 3×3 no chão do pavilhão; o card conta a mesma
   história: coluna com o dobro da largura, mesma altura — um retângulo
   deitado em vez do quadrado das 3×3. */
.pedev-stands__area--amarela .pedev-stands__grid {
	grid-template-columns: repeat(auto-fill, minmax(calc(var(--pedev-stand-min) * 2 + 0.5rem), 1fr));
}

.pedev-stand {
	align-items: center;
	background: var(--pedev-surface);
	border: 2px solid var(--pedev-border);
	border-radius: 10px;
	color: var(--pedev-ink);
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	justify-content: center;
	min-height: 5.25rem;
	padding: 0.5rem 0.35rem;
	text-align: center;
	text-decoration: none;
	word-break: break-word;
}

.pedev-stand__code {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.1;
}

.pedev-stand__size {
	color: var(--pedev-faint);
	font-size: 0.75rem;
	line-height: 1.2;
}

.pedev-stand__state {
	font-size: 0.6875rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Available to this brand: the only clickable state, and it must look it. */
a.pedev-stand.is-free {
	background: var(--pedev-stand-free-soft);
	border-color: var(--pedev-stand-free-line);
	box-shadow: 0 1px 0 rgba(3, 108, 74, 0.18);
	color: #073b2a;
	cursor: pointer;
}

a.pedev-stand.is-free .pedev-stand__state {
	color: var(--pedev-stand-free);
	font-weight: 700;
}

a.pedev-stand.is-free .pedev-stand__size {
	color: #2c6a55;
}

a.pedev-stand.is-free:hover,
a.pedev-stand.is-free:focus {
	background: #d3efe3;
	border-color: var(--pedev-stand-free);
	outline: none;
	transform: translateY(-1px);
}

a.pedev-stand.is-free:focus-visible {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pedev-stand-free) 35%, transparent);
}

/* Set aside by the organiser for this very brand: still a free stand, but one
   nobody else is going to take. A dashed ring says "kept", not "open". */
a.pedev-stand.is-earmarked {
	border-style: dashed;
	border-color: var(--pedev-stand-free);
}

/* This browser is holding it right now, clock running. Amber, and the only
   square that pulses: it is the one thing on the page with a deadline. */
a.pedev-stand.is-holding {
	background: var(--pedev-stand-hold-soft);
	border-color: var(--pedev-stand-hold);
	border-style: solid;
	box-shadow: 0 1px 0 rgba(150, 83, 10, 0.18);
	color: #4a2b00;
}

a.pedev-stand.is-holding .pedev-stand__state,
a.pedev-stand.is-holding .pedev-stand__clock {
	color: var(--pedev-stand-hold);
	font-weight: 700;
}

a.pedev-stand.is-holding:hover,
a.pedev-stand.is-holding:focus {
	background: #ffe8c6;
	border-color: var(--pedev-stand-hold);
}

/* Another company is filling in the form. Hatched, because in a few minutes
   this is either theirs or back on the map — it is not a decision yet. */
.pedev-stand.is-held {
	background: repeating-linear-gradient(
		45deg,
		var(--pedev-stand-hold-soft),
		var(--pedev-stand-hold-soft) 5px,
		#fae0bb 5px,
		#fae0bb 10px
	);
	border-color: var(--pedev-stand-hold-line);
	color: #5c3600;
	cursor: help;
}

.pedev-stand.is-held .pedev-stand__state,
.pedev-stand.is-held .pedev-stand__clock {
	color: var(--pedev-stand-hold);
	text-transform: none;
	letter-spacing: 0;
}

/* Waiting on the organiser. Off the market for everyone, including the brand
   that asked — dotted, because the decision is somewhere else. */
.pedev-stand.is-pending {
	background: var(--pedev-stand-pending-soft);
	border-color: var(--pedev-stand-pending-line);
	border-style: dotted;
	color: #2f2170;
	cursor: help;
}

.pedev-stand.is-pending .pedev-stand__state {
	color: var(--pedev-stand-pending);
	text-transform: none;
	letter-spacing: 0;
}

.pedev-stand.is-mine {
	background: var(--pedev-stand-mine-soft);
	border-color: var(--pedev-stand-mine);
	color: #06305a;
}

.pedev-stand.is-mine .pedev-stand__state {
	color: var(--pedev-stand-mine);
	font-weight: 700;
}

/* Theirs, and still waiting: the brand's own blue, the approval's dotted edge. */
.pedev-stand.is-mine.is-pending {
	background: var(--pedev-stand-mine-soft);
	border-color: var(--pedev-stand-pending);
	color: #06305a;
}

.pedev-stand.is-mine.is-pending .pedev-stand__state {
	color: var(--pedev-stand-pending);
	font-weight: 700;
}

/* The seconds a lock has left. Written by stands.js, once a second. */
.pedev-stand__clock {
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.pedev-stand__clock:empty {
	display: none;
}

/* The lock is being taken: the click already happened, the answer has not
   arrived, and the square must not look ignorable in the meantime. */
.pedev-stand.is-waiting,
.pedev-spot.is-waiting {
	cursor: progress;
	opacity: 0.65;
}

/* Taken and locked stay on the map on purpose: an exhibitor who cannot find
   B14 at all phones the organiser; one who sees it greyed out understands. */
.pedev-stand.is-taken,
.pedev-stand.is-locked {
	background: var(--pedev-stand-taken-soft);
	border-color: #c8ccd3;
	color: var(--pedev-stand-taken-ink);
	cursor: help;
}

.pedev-stand.is-taken .pedev-stand__state,
.pedev-stand.is-locked .pedev-stand__state {
	color: var(--pedev-stand-taken-ink);
	text-transform: none;
	letter-spacing: 0;
}

.pedev-stand.is-locked {
	background: repeating-linear-gradient(
		45deg,
		#f4f5f7,
		#f4f5f7 5px,
		#e9ebee 5px,
		#e9ebee 10px
	);
}

.pedev-stand.is-blocked {
	background: var(--pedev-stand-danger-soft);
	border-color: #e2a7a3;
	color: #6d0d15;
	cursor: help;
}

.pedev-stand.is-blocked .pedev-stand__state {
	color: var(--pedev-stand-danger);
	text-transform: none;
	letter-spacing: 0;
}

/* A square that changed under the exhibitor's eyes during a refresh. */
.pedev-stand.is-changed {
	animation: pedev-stand-flash 1.2s ease-out 1;
}

@keyframes pedev-stand-flash {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--pedev-brand) 55%, transparent);
	}

	100% {
		box-shadow: 0 0 0 10px transparent;
	}
}

/* ------------------------------------------------------------- Summary */

.pedev-stands__summary {
	margin: 0 0 1rem;
}

.pedev-stands__summary > div {
	border-top: 1px solid var(--pedev-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	padding: 0.45rem 0;
}

.pedev-stands__summary > div:first-child {
	border-top: 0;
}

.pedev-stands__summary dt {
	color: var(--pedev-faint);
	flex: 0 0 8rem;
	font-size: 0.875rem;
}

.pedev-stands__summary dd {
	flex: 1 1 10rem;
	font-weight: 600;
	margin: 0;
}

/* ------------------------------------------------- Confirm and success */

.pedev-stands__confirm h3,
.pedev-stands__success h3 {
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}

.pedev-stands__confirm {
	border-color: var(--pedev-brand);
}

.pedev-stands__confirm--release {
	border-color: var(--pedev-stand-danger);
}

.pedev-stands__success {
	background: var(--pedev-stand-free-soft);
	border-color: var(--pedev-stand-free-line);
}

.pedev-stands__success h3 {
	color: #073b2a;
}

/* Sent, not settled. The green of a done deal would be a promise the
   organiser has not made yet. */
.pedev-stands__success.is-pending {
	background: var(--pedev-stand-pending-soft);
	border-color: var(--pedev-stand-pending-line);
}

.pedev-stands__success.is-pending h3 {
	color: #2f2170;
}

.pedev-stands__back {
	margin: 1rem 0 0;
}

.pedev-stands__status {
	color: var(--pedev-faint);
	font-size: 0.875rem;
	margin: 0.5rem 0 0;
}

/* -------------------------------------------------------------- Dialog */

.pedev-stands__dialog {
	background: var(--pedev-surface);
	border: 1px solid var(--pedev-line);
	border-radius: var(--pedev-radius);
	color: var(--pedev-ink);
	font-size: 1rem;
	line-height: 1.5;
	max-height: calc(100vh - 2rem);
	max-width: min(32rem, calc(100vw - 1.5rem));
	padding: 0;
	width: 100%;
}

.pedev-stands__dialog::backdrop {
	background: rgba(16, 24, 40, 0.55);
}

.pedev-stands__dialog-inner {
	padding: 1.25rem;
}

.pedev-stands__dialog-title {
	font-size: 1.15rem;
	margin: 0 0 0.5rem;
}

.pedev-stands__dialog-lead {
	color: var(--pedev-muted);
	margin: 0 0 1rem;
}

.pedev-stands__dialog-msg {
	background: var(--pedev-stand-danger-soft);
	border-left: 4px solid var(--pedev-stand-danger);
	border-radius: 8px;
	color: #6d0d15;
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
}

.pedev-stands__dialog-msg.is-ok {
	background: var(--pedev-stand-free-soft);
	border-left-color: var(--pedev-stand-free);
	color: #073b2a;
}

/*
 * "Este stand está guardado para você por 7:32."
 *
 * The one number on this page the client owns, so it is styled as a fact and
 * not as a warning: the stand IS theirs while it reads. Tabular figures keep
 * the sentence from shivering once a second.
 */
.pedev-stands__dialog-clock {
	background: var(--pedev-stand-hold-soft);
	border-left: 4px solid var(--pedev-stand-hold);
	border-radius: 8px;
	color: #4a2b00;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	margin: 0 0 1rem;
	padding: 0.65rem 1rem;
}

.pedev-stands__dialog-clock:empty {
	display: none;
}

.pedev-stands__dialog-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.pedev-stands__dialog-actions .pedev-btn {
	width: 100%;
}

/* ============================================================ Floor plan */

/*
 * The map is the organiser's own drawing with one target per stand laid over
 * it. Three boxes, and each does exactly one job:
 *
 *   .pedev-stands__viewport  the window. Clips, and swallows touch gestures.
 *   .pedev-stands__canvas    what moves. Zoom and pan are one transform here,
 *                            so the SVG and the 37 targets can never drift.
 *   .pedev-stands__spots     the targets, positioned in percentages of the
 *                            viewBox, which is why they hold at any zoom.
 *
 * The viewport and the canvas both carry the drawing's aspect ratio. That is
 * load-bearing: the SVG is drawn with preserveAspectRatio, so a box of any
 * other shape would letterbox it and every percentage below would point at the
 * wrong place.
 */

.pedev-stands__plan {
	margin: 0 0 1.25rem;
}

/* ------------------------------------------------------ Zoom controls */

/* Hidden until stands.js removes [hidden]: without it they do nothing. */
.pedev-stands__zoom {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.5rem;
}

.pedev-stands__zoom[hidden] {
	display: none;
}

.pedev-stands__zoom-btn,
.pedev-stands__zoom-fit {
	background: var(--pedev-surface);
	border: 2px solid var(--pedev-border);
	border-radius: 10px;
	color: var(--pedev-ink);
	cursor: pointer;
	font: inherit;
	min-height: 44px;
	min-width: 44px;
}

.pedev-stands__zoom-btn {
	font-size: 1.375rem;
	line-height: 1;
}

.pedev-stands__zoom-fit {
	font-size: 0.875rem;
	padding: 0 0.85rem;
}

.pedev-stands__zoom-btn:hover,
.pedev-stands__zoom-fit:hover {
	border-color: var(--pedev-brand);
}

.pedev-stands__zoom-btn:focus-visible,
.pedev-stands__zoom-fit:focus-visible {
	border-color: var(--pedev-brand);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pedev-brand) 30%, transparent);
	outline: none;
}

.pedev-stands__zoom-btn[disabled] {
	cursor: not-allowed;
	opacity: 0.45;
}

.pedev-stands__zoom-level {
	color: var(--pedev-muted);
	font-size: 0.8125rem;
	margin-left: auto;
}

/* ----------------------------------------------------------- Viewport */

.pedev-stands__viewport {
	-webkit-user-select: none;
	user-select: none;
	aspect-ratio: 729.6 / 550.98; /* the REV 02 viewBox */
	background: #fff;
	border: 1px solid var(--pedev-line);
	border-radius: var(--pedev-radius);
	position: relative;
	width: 100%;

	/*
	 * `clip`, not `hidden`. An overflow:hidden box is still a scroll container,
	 * and the browser scrolls it to bring a focused stand into view — which
	 * slides the canvas out from under the transform that is meant to be
	 * placing it, and leaves every coordinate here wrong by the scroll offset.
	 * `clip` is the same clipping with no scrolling at all. The `hidden` above
	 * it is for browsers that do not know `clip`; stands.js keeps their scroll
	 * offset pinned to zero.
	 */
	overflow: hidden;
	overflow: clip;
}

/* Fullscreen — the native kind and the fixed-overlay fallback share the
   rules: the plan becomes a white column, the viewport takes all the height
   the aspect-ratio was choosing before, and the zoom bar stays visible. */
.pedev-stands__plan:fullscreen,
.pedev-stands__plan.is-fullwindow {
	background: #fff;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0.75rem;
}

.pedev-stands__plan.is-fullwindow {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.pedev-stands__plan:fullscreen .pedev-stands__viewport,
.pedev-stands__plan.is-fullwindow .pedev-stands__viewport {
	aspect-ratio: auto;
	flex: 1 1 auto;
	/* The everyday cap below (72vh) is what was leaving a third of the
	   screen empty in fullscreen. Here the screen IS the budget. */
	max-height: none;
	min-height: 0;
}

.pedev-noscroll {
	overflow: hidden;
}

.pedev-stands__viewport:focus-visible {
	border-color: var(--pedev-brand);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pedev-brand) 30%, transparent);
	outline: none;
}

/*
 * Only once the map can actually be moved. Without scripting it cannot, so the
 * browser should keep its own panning and pinch-zoom and the frame should stay
 * tall enough to show the whole plan in one go.
 */
.pedev-stands__viewport.is-interactive {
	max-height: min(72vh, 40rem);
}

/*
 * touch-action: none hands every touch inside the frame to stands.js. That is
 * the right trade only where there are pointer events to hand them to —
 * otherwise a finger on the map could neither pan it nor scroll past it. The
 * frame is capped well short of the viewport either way, so there is always
 * page above and below to scroll by.
 */
.pedev-stands__viewport.is-gesture {
	cursor: grab;
	overscroll-behavior: contain;
	touch-action: none;
}

.pedev-stands__viewport.is-gesture.is-panning {
	cursor: grabbing;
}

.pedev-stands__canvas {
	aspect-ratio: 729.6 / 550.98; /* the REV 02 viewBox */
	left: 0;
	position: absolute;
	top: 0;
	transform-origin: 0 0;
	width: 100%;
}

.pedev-stands__canvas > svg,
.pedev-stands__canvas .pedev-planta {
	display: block;
	height: 100%;
	width: 100%;
}

.pedev-stands__spots {
	inset: 0;
	position: absolute;
}

.pedev-stands__plan-hint {
	color: var(--pedev-muted);
	font-size: 0.8125rem;
	margin: 0.5rem 0 0;
}

/* -------------------------------------------------------------- Spots */

/*
 * A target sits exactly on the rectangle the drawing paints for that stand, so
 * the fill underneath is still the plan's own colour coding — yellow 3x6, blue
 * 3x3. Free stands stay translucent to keep that; the states that cannot be
 * booked cover it, because at that point the size no longer matters and the
 * status does.
 *
 * Every state carries a texture as well as a hue: hatching survives a
 * greyscale printout, a bright phone in a warehouse, and colour blindness.
 */
.pedev-spot {
	/*
	 * Zoom is a transform on the canvas, so every length inside it is
	 * multiplied too — a 2 px ring becomes 16 px at the 8x maximum and eats
	 * the square it outlines. stands.js publishes the live scale as
	 * --pedev-zoom and these two divide by it, so an outline is 2 px and a
	 * hatch stripe 4 px on screen at every zoom. The type is left alone: a
	 * label should grow with the rectangle it names.
	 */
	--pedev-spot-line: calc(2px / var(--pedev-zoom, 1));
	--pedev-spot-hatch: calc(4px / var(--pedev-zoom, 1));

	align-items: center;
	border-radius: calc(3px / var(--pedev-zoom, 1));
	box-sizing: border-box;
	color: var(--pedev-ink);
	display: flex;
	flex-direction: column;
	font-size: 0.6875rem;
	gap: 0.15em;
	justify-content: center;
	line-height: 1;
	overflow: hidden;
	position: absolute;
	text-align: center;
	text-decoration: none;
}

.pedev-spot__code {
	font-weight: 700;
	letter-spacing: 0.01em;
}

/*
 * The size caption is a nicety, not the point, so it appears only once the
 * square can hold it without crowding the number. Without container query
 * support it simply never shows — the list and the confirmation screen both
 * carry the size anyway.
 */
/* The occupant's logo. It shares the square with the hatch pattern of a taken
   stand, so it sits on a small white plate for contrast; the number shrinks
   into a caption underneath instead of competing with it. */
.pedev-spot__logo {
	/* Inert: a pointerdown on the image must start a pan, not a native
	   image drag, and the click must reach the anchor underneath. */
	-webkit-user-drag: none;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.92);
	border-radius: calc(4px / var(--pedev-zoom, 1));
	box-sizing: border-box;
	height: 52%;
	max-width: 86%;
	object-fit: contain;
	padding: 4% 5%;
	width: auto;
}

.pedev-spot.has-logo {
	gap: 0.1em;
}

.pedev-spot.has-logo .pedev-spot__code {
	font-size: 0.72em;
	font-weight: 600;
	opacity: 0.85;
}

.pedev-spot.has-logo .pedev-spot__size {
	display: none;
}

.pedev-spot__size {
	display: none;
	opacity: 0.75;
}

/* Container query units size the number against its own rectangle, which a
   fixed length cannot: the same square is 22 px wide at fit-to-screen and
   176 px at the maximum zoom. */
@supports (container-type: size) {
	.pedev-spot {
		container-type: size;
	}

	.pedev-spot__code {
		font-size: min(38cqh, 30cqw);
	}

	.pedev-spot__size {
		font-size: min(15cqh, 12cqw);
	}
}

/* stands.js sets this once the squares are big enough on screen to hold a
   second line without crowding the number. */
.pedev-stands__canvas.is-detailed .pedev-spot__size {
	display: block;
}

/* Available: the drawing shows through, so the exhibitor still sees which
   colour — which size — the stand is. A saturated ring says "take me". */
a.pedev-spot.is-free {
	background: color-mix(in srgb, #fff 30%, transparent);
	box-shadow: inset 0 0 0 var(--pedev-spot-line) var(--pedev-stand-free);
	color: #04351f;
	cursor: pointer;
}

a.pedev-spot.is-free:hover {
	background: color-mix(in srgb, var(--pedev-stand-free-soft) 88%, transparent);
	box-shadow: inset 0 0 0 calc(var(--pedev-spot-line) * 1.5) var(--pedev-stand-free);
}

a.pedev-spot.is-free:focus-visible {
	background: var(--pedev-stand-free-soft);
	box-shadow: inset 0 0 0 calc(var(--pedev-spot-line) * 1.5) var(--pedev-stand-free);
	outline: calc(var(--pedev-spot-line) * 1.5) solid var(--pedev-stand-free);
	outline-offset: var(--pedev-spot-line);
}

/* Set aside for this brand: the plan's own colour still shows through, and a
   thicker ring says the organiser put their name on it. */
a.pedev-spot.is-earmarked {
	background: color-mix(in srgb, var(--pedev-stand-free-soft) 60%, transparent);
	box-shadow:
		inset 0 0 0 calc(var(--pedev-spot-line) * 2) var(--pedev-stand-free),
		inset 0 0 0 calc(var(--pedev-spot-line) * 3.5) rgba(255, 255, 255, 0.85);
}

/* Held by this browser, clock running. */
a.pedev-spot.is-holding {
	background: color-mix(in srgb, var(--pedev-stand-hold-soft) 92%, transparent);
	box-shadow: inset 0 0 0 calc(var(--pedev-spot-line) * 2) var(--pedev-stand-hold);
	color: #4a2b00;
}

a.pedev-spot.is-holding:hover,
a.pedev-spot.is-holding:focus-visible {
	background: var(--pedev-stand-hold-soft);
	box-shadow: inset 0 0 0 calc(var(--pedev-spot-line) * 2.5) var(--pedev-stand-hold);
}

/* Held by somebody else. Same amber, hatched the other way from "taken" so the
   two never read as one another on a black-and-white printout. */
.pedev-spot.is-held {
	background: repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.9),
			rgba(255, 255, 255, 0.9) var(--pedev-spot-hatch),
			rgba(217, 138, 32, 0.35) var(--pedev-spot-hatch),
			rgba(217, 138, 32, 0.35) calc(var(--pedev-spot-hatch) * 2)
		),
		var(--pedev-stand-hold-soft);
	box-shadow: inset 0 0 0 var(--pedev-spot-line) var(--pedev-stand-hold-line);
	color: #5c3600;
}

/* Waiting on the organiser: dots, which is neither a hatch nor a plain fill. */
.pedev-spot.is-pending {
	background: radial-gradient(
			circle at center,
			rgba(79, 58, 168, 0.45) calc(var(--pedev-spot-hatch) * 0.28),
			transparent calc(var(--pedev-spot-hatch) * 0.3)
		),
		var(--pedev-stand-pending-soft);
	background-size: calc(var(--pedev-spot-hatch) * 1.6) calc(var(--pedev-spot-hatch) * 1.6);
	box-shadow: inset 0 0 0 var(--pedev-spot-line) var(--pedev-stand-pending-line);
	color: #2f2170;
}

.pedev-spot.is-mine {
	background: var(--pedev-stand-mine-soft);
	box-shadow: inset 0 0 0 calc(var(--pedev-spot-line) * 1.5) var(--pedev-stand-mine);
	color: #06305a;
}

.pedev-spot.is-mine.is-pending {
	background: var(--pedev-stand-mine-soft);
	box-shadow: inset 0 0 0 calc(var(--pedev-spot-line) * 1.5) var(--pedev-stand-pending);
	color: #06305a;
}

/* The clock on a square. Like the size caption, it only appears once the
   rectangle is big enough to hold a second line without crowding the number. */
.pedev-spot__clock {
	display: none;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

.pedev-stands__canvas.is-detailed .pedev-spot__clock {
	display: block;
}

/* Three lines never fit. While a lock is running its clock is the news; the
   size is on the row below and on the confirmation screen either way. */
.pedev-stands__canvas.is-detailed .pedev-spot[data-hold-ends] .pedev-spot__size {
	display: none;
}

.pedev-spot__clock:empty {
	display: none;
}

@supports (container-type: size) {
	.pedev-spot__clock {
		font-size: min(15cqh, 12cqw);
	}
}

/* Diagonal hatch, one way for "somebody has it", the other for "not yours".
   Texture rather than hue alone: the map has to read on a greyscale printout
   and to anyone who does not separate the two. */
.pedev-spot.is-taken {
	background: repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.92),
			rgba(255, 255, 255, 0.92) var(--pedev-spot-hatch),
			rgba(90, 98, 112, 0.28) var(--pedev-spot-hatch),
			rgba(90, 98, 112, 0.28) calc(var(--pedev-spot-hatch) * 2)
		),
		#f1f2f4;
	box-shadow: inset 0 0 0 calc(var(--pedev-spot-line) * 0.5) var(--pedev-stand-taken-ink);
	color: #2f3742;
}

.pedev-spot.is-locked {
	background: repeating-linear-gradient(
			-45deg,
			rgba(255, 255, 255, 0.93),
			rgba(255, 255, 255, 0.93) calc(var(--pedev-spot-hatch) * 0.75),
			rgba(90, 98, 112, 0.24) calc(var(--pedev-spot-hatch) * 0.75),
			rgba(90, 98, 112, 0.24) calc(var(--pedev-spot-hatch) * 1.5)
		),
		#f4f5f7;
	box-shadow: inset 0 0 0 calc(var(--pedev-spot-line) * 0.5) #9aa2af;
	color: #3d444f;
}

.pedev-spot.is-blocked {
	background: repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.9),
			rgba(255, 255, 255, 0.9) var(--pedev-spot-hatch),
			rgba(163, 16, 28, 0.3) var(--pedev-spot-hatch),
			rgba(163, 16, 28, 0.3) calc(var(--pedev-spot-hatch) * 2)
		),
		#fdeceb;
	box-shadow: inset 0 0 0 var(--pedev-spot-line) var(--pedev-stand-danger);
	color: #6d0d15;
}

/* A stand that changed hands while the exhibitor was looking at it. */
.pedev-spot.is-changed {
	animation: pedev-spot-flash 1.4s ease-out 1;
}

@keyframes pedev-spot-flash {
	0%,
	40% {
		outline: calc(var(--pedev-spot-line) * 1.5) solid var(--pedev-brand);
		outline-offset: var(--pedev-spot-line);
	}

	100% {
		outline: calc(var(--pedev-spot-line) * 1.5) solid transparent;
		outline-offset: var(--pedev-spot-line);
	}
}

/* ------------------------------------------------------- List fallback */

.pedev-stands__list {
	margin: 1.5rem 0 0;
}

.pedev-stands__list-summary {
	cursor: pointer;
	font-weight: 600;
	margin-bottom: 1rem;
	min-height: 44px;
	padding: 0.6rem 0;
}

.pedev-stands__list-summary:focus-visible {
	border-radius: 8px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pedev-brand) 30%, transparent);
	outline: none;
}

/* Without scripting the map cannot be zoomed, so the list is the way in and
   the disclosure would only be one more thing to open. */
.pedev-stands:not(.is-enhanced) .pedev-stands__list-summary {
	display: none;
}

.pedev-stands__legend-title {
	color: var(--pedev-muted);
	font-size: 0.8125rem;
	margin: 0 0 0.35rem;
}

.pedev-stands__legend--areas .pedev-stands__swatch {
	border-color: rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------- Wider screens */

@media (min-width: 40em) {
	.pedev-stands {
		--pedev-stand-min: 6.5rem;
	}

	.pedev-stands__area {
		padding: 1.25rem;
	}

	.pedev-stands__submit {
		width: auto;
	}

	.pedev-stands__who {
		/* Brand fixed, details taking the slack, exit shrink-wrapped: the
		 * button no longer wraps to two lines when an address is long. */
		align-items: center;
		display: grid;
		gap: 1.5rem;
		grid-template-columns: minmax(9rem, auto) 1fr auto;
	}

	.pedev-who__exit,
	.pedev-who__exit .pedev-btn {
		white-space: nowrap;
		width: auto;
	}

	.pedev-stands__dialog-actions {
		flex-direction: row-reverse;
		justify-content: flex-start;
	}

	.pedev-stands__dialog-actions .pedev-btn {
		width: auto;
	}
}

/* Desktop: a card that owns the screen. Copy on the left telling the person
   what is about to happen, fields on the right doing it — instead of the
   phone column floating alone in a sea of white. */
@media (min-width: 64em) {
	.pedev-stands__identify {
		align-items: start;
		column-gap: 4rem;
		display: grid;
		grid-template-columns: minmax(18rem, 2fr) 3fr;
		padding: 2.75rem 3rem;
	}

	.pedev-stands__identify .pedev-stands__title {
		font-size: 1.75rem;
	}

	.pedev-stands__steps {
		display: block;
	}

	.pedev-stands__identify-fields {
		column-gap: 1.25rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	/* The code is the star and the name is long: a full row each. E-mail and
	   phone are short and related: one row between them. */
	.pedev-stands__identify-fields .pedev-field--access-code,
	.pedev-stands__identify-fields .pedev-field--name,
	.pedev-stands__identify-fields .pedev-stands__submit {
		grid-column: 1 / -1;
	}

	.pedev-stands__identify-fields .pedev-stands__submit {
		justify-self: start;
		margin-top: 0.25rem;
	}
}

/* ----------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.pedev-stand,
	.pedev-stand.is-changed,
	.pedev-spot,
	.pedev-spot.is-changed {
		animation: none !important;
		transition: none !important;
	}

	a.pedev-stand.is-free:hover,
	a.pedev-stand.is-free:focus {
		transform: none;
	}

	/* The zoom buttons and the focus-follow still move the canvas — they just
	   stop gliding there. stands.js reads the same media query and skips the
	   eased step, so this is the belt to its braces. */
	.pedev-stands__canvas {
		transition: none !important;
	}
}

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

@media print {
	.pedev-stands__identify,
	.pedev-stands__who form,
	.pedev-stands__status,
	.pedev-stands__zoom,
	.pedev-stands__plan-hint,
	.pedev-stands__dialog {
		display: none !important;
	}

	.pedev-stand {
		border-width: 1px;
	}

	/* A printed map has no zoom, so it prints whole: drop the clipping frame
	   and whatever transform the reader left the canvas in. */
	.pedev-stands__viewport {
		border: 1px solid #999;
		max-height: none !important;
		overflow: visible;
	}

	/* The plan's own colours are the whole point of printing it. */
	.pedev-stands__canvas {
		print-color-adjust: exact;
		transform: none !important;
		-webkit-print-color-adjust: exact;
	}

	.pedev-stands__spots {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
}

/* -------------------------------------------------------------------------
 * Standalone route wrapper.
 *
 * The map is served on its own URL under the theme's header and footer, so it
 * needs the content width the theme would normally give a page — the theme's
 * own container never wraps it, because its content loop is bypassed.
 * ---------------------------------------------------------------------- */
.pedev-standalone {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 76rem;
	padding: 1.5rem 1rem 3rem;
	width: 100%;
}

@media (max-width: 40em) {
	.pedev-standalone {
		padding: 1rem 0.75rem 2rem;
	}
}