/**
 * Lobby screen (src/pages/public-map.php?screen=lobby, public/js/pages/public-map-lobby.js): the public visitor
 * map laid out 16:9 for a lobby TV, readable from across a room. No controls, no scrolling.
 * Every size is a multiple of --u, one hundredth of the screen height on a 16:9 screen (10.8px at 1920 x 1080,
 * 7.2px at 1280 x 720), so the layout is the same at any TV resolution. A portrait or narrow window stacks the
 * numbers above the map instead.
 */

html, body { margin: 0; height: 100%; }
.pml {
    --u: min(1vh, 0.5625vw);
    background: var(--color-stone);
    color: var(--color-forest);
    font-family: var(--font-body);
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
.pml p { margin: 0; }

.pml-app { display: grid; grid-template-columns: minmax(0, 33fr) minmax(0, 67fr); height: 100vh; height: 100dvh; }

/* ---------- Panel: logo, name, the counts ---------- */
.pml-panel {
    display: flex; flex-direction: column; align-items: flex-start; gap: calc(2.2 * var(--u));
    padding: calc(5.5 * var(--u)) calc(4.5 * var(--u)) calc(4 * var(--u));
    min-width: 0; min-height: 0; overflow: hidden;
}
.pml-logo { display: block; width: auto; height: auto; max-height: calc(10 * var(--u)); max-width: 100%; object-fit: contain; }
.pml-label span {
    display: inline-block; font-family: var(--font-hand); font-weight: 600; font-size: calc(3.6 * var(--u)); line-height: 1;
    color: var(--color-trail-dark); transform: rotate(-2deg); transform-origin: left bottom;
    padding-bottom: calc(0.3 * var(--u)); border-bottom: max(2px, calc(0.22 * var(--u))) solid currentColor;
}
.pml-title {
    font-family: var(--font-heading); font-weight: 400; font-size: calc(5.4 * var(--u)); line-height: 1.06;
    letter-spacing: -0.01em; color: var(--color-forest); margin: 0; text-wrap: balance; overflow-wrap: anywhere;
}
.pml-title--long { font-size: calc(4.4 * var(--u)); line-height: 1.1; }
.pml-title__name { font-style: italic; }

.pml-counts {
    list-style: none; margin: calc(1.2 * var(--u)) 0 0; padding: 0; width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(2.6 * var(--u)) calc(3 * var(--u));
}
.pml-count {
    display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); min-width: 0;
    border-top: max(2px, calc(0.35 * var(--u))) solid var(--color-trail); padding-top: calc(1.2 * var(--u));
}
.pml-count[hidden] { display: none; }
.pml-count--main { grid-column: 1 / -1; border-top-color: var(--color-forest); }
.pml-count__value {
    font-family: var(--font-heading); font-weight: 400; font-size: calc(7.6 * var(--u)); line-height: 0.95;
    color: var(--color-forest); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pml-count--main .pml-count__value { font-size: calc(12 * var(--u)); }
.pml-count__label { font-size: calc(2.7 * var(--u)); line-height: 1.2; color: var(--color-body); }

/* If a long name and a long list leave no room, the list of countries gives way, never the note below it. */
.pml-abroad { width: 100%; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.pml-abroad[hidden] { display: none; }
.pml .pml-abroad__title { font-size: calc(2.1 * var(--u)); font-weight: 600; color: var(--color-forest); margin-bottom: calc(0.8 * var(--u)); }
.pml-abroad__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(0.7 * var(--u)) calc(2.2 * var(--u)); }
.pml-abroad__item, .pml-abroad__more { font-size: calc(2.1 * var(--u)); line-height: 1.3; color: var(--color-body); white-space: nowrap; }
.pml-abroad__count { font-weight: 600; color: var(--color-forest); font-variant-numeric: tabular-nums; }
.pml-abroad__more { color: var(--color-muted-green); }

.pml-spacer { flex: 1 1 0; }
.pml-note, .pml-credit { flex-shrink: 0; }

/* With the organization's logo: the logo stands in for the handwritten label, and the numbers sit a little smaller. */
.pml-panel--logo .pml-label { display: none; }
.pml-panel--logo .pml-logo { max-height: calc(8.5 * var(--u)); }
.pml-panel--logo .pml-count--main .pml-count__value { font-size: calc(10.5 * var(--u)); }
.pml-panel--logo .pml-count__value { font-size: calc(6.8 * var(--u)); }
.pml-note { font-size: calc(1.8 * var(--u)); line-height: 1.4; color: var(--color-muted-green); max-width: 34em; }
.pml-credit { display: flex; align-items: center; gap: calc(1 * var(--u)); font-size: calc(1.8 * var(--u)); color: var(--color-muted-green); }
.pml-credit img { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); }
.pml-credit__name { font-family: var(--font-wordmark); font-weight: 800; letter-spacing: -0.02em; color: var(--color-forest); }

/* ---------- Stage: the map fills the rest ---------- */
.pml-stage { position: relative; min-width: 0; min-height: 0; background: #E9E5DC; border-left: 1px solid var(--color-rule); }
.pml-map { position: absolute; inset: 0; }
.pml-stage .mapboxgl-ctrl-attrib, .pml-stage .mapboxgl-ctrl-logo { opacity: .75; }

.pml-legend {
    position: absolute; left: calc(2.4 * var(--u)); bottom: calc(3.6 * var(--u)); z-index: 2; max-width: 60%;
    background: rgba(250, 250, 248, .96); border: 1px solid var(--color-rule); border-radius: 10px;
    padding: calc(1.4 * var(--u)) calc(1.8 * var(--u)); box-shadow: 0 4px 16px rgba(27, 58, 45, .10);
}
.pml-legend:empty { display: none; }
.pml .pml-legend__title { font-size: calc(1.9 * var(--u)); font-weight: 600; color: var(--color-forest); margin-bottom: calc(0.9 * var(--u)); }
.pml-legend__scale { list-style: none; margin: 0; padding: 0; display: flex; gap: calc(0.4 * var(--u)); }
.pml-legend__step { display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); min-width: calc(8 * var(--u)); }
.pml-legend__swatch { display: block; height: calc(1.3 * var(--u)); border-radius: 2px; background: var(--pml-swatch); }
.pml-legend__value { font-size: calc(1.7 * var(--u)); line-height: 1; color: var(--color-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pml-legend__note { font-size: calc(1.7 * var(--u)); line-height: 1.4; color: var(--color-muted-green); }

.pml-status { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: calc(4 * var(--u)); pointer-events: none; }
.pml-status[hidden] { display: none; }
.pml-status__text {
    max-width: 30em; padding: calc(1.6 * var(--u)) calc(2.4 * var(--u)); font-size: calc(2.2 * var(--u)); line-height: 1.45; color: var(--color-body);
    background: rgba(250, 250, 248, .97); border: 1px solid var(--color-rule); border-radius: 10px; box-shadow: 0 10px 30px rgba(27, 58, 45, .14);
}
.pml-noscript { position: fixed; inset: auto 0 0 0; padding: 12px 16px; background: var(--color-paper); font-size: 16px; }

/* ---------- Portrait or narrow windows: numbers above, map below ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 700px) {
    .pml { --u: min(0.9vh, 1.7vw); overflow: auto; }
    .pml-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(320px, 1fr); min-height: 100vh; height: auto; }
    .pml-panel { padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(3 * var(--u)); }
    .pml-spacer { display: none; }
    .pml-stage { border-left: 0; border-top: 1px solid var(--color-rule); min-height: 56vh; }
}