/*
 * The hall plan — see _HallMap.cshtml for where it came from.
 *
 * Its own file because two pages draw it over different stylesheets: the invitation over
 * invite.css, the seating screen over admin.css. Every colour is a site.css token, which both
 * have, so the map takes on each page's palette without a second set of rules.
 *
 * Strokes and type sizes are in the plan's own units, so they shrink with it: on a phone the whole
 * 1010-unit room is about 350px across and a table's number lands under 8px. That is the design's
 * scale. The map is for finding the spot; the number above it is the thing to read.
 */
.hall-map {
    margin-top: var(--space-md);
}

.hall-map svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hall-map text {
    font-size: 13px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    fill: var(--color-accent);
}

.hall-map .hall-map-note {
    fill: var(--color-ink-muted);
}

.hall-map-walls {
    fill: var(--color-surface);
    stroke: var(--color-accent);
    stroke-width: 1.6;
}

/* --color-rule is defined by invite.css alone; on the seating screen the border colour stands in. */
.hall-map-guide,
.hall-map-floor {
    fill: none;
    stroke: var(--color-rule, var(--color-border));
    stroke-width: 1;
    stroke-dasharray: 3 6;
}

.hall-map-floor {
    stroke-dasharray: 4 6;
}

.hall-map-seat {
    fill: var(--color-bg);
    stroke: var(--color-ink-muted);
    stroke-width: 1.3;
}

/* After .hall-map-seat, so the bridal table — which is both — keeps the stage's long-table look. */
.hall-map-feature {
    fill: var(--color-border);
    stroke: var(--color-accent);
    stroke-width: 1.2;
}

.hall-map-door-gap {
    stroke: var(--color-surface);
    stroke-width: 4;
}

.hall-map-door-sill {
    stroke: var(--color-accent);
    stroke-width: 1.6;
    stroke-dasharray: 3 4;
}

.hall-map-door-arrow {
    stroke: var(--color-accent);
    stroke-width: 1.4;
}

.hall-map-door-head {
    fill: var(--color-accent);
}

/* Two classes deep, or `.hall-map text` above would win and set the numbers as letterspaced caps. */
.hall-map .hall-map-number {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 0.02em;
}

.hall-map-ring {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.2;
    stroke-dasharray: 4 5;
    opacity: 0;
}

.hall-map .is-marked .hall-map-ring {
    opacity: 1;
}

/* Seats taken of seats there, on the admin screens only. Small and unspaced so "10/10" still fits
   inside a table's circle under its number. */
.hall-map .hall-map-count {
    font-size: 12px;
    letter-spacing: 0;
    fill: var(--color-ink-muted);
}

/* The admin's one red, as .error-text uses. Only admin pages draw a count, so nothing else sees it. */
.hall-map .hall-map-count.is-over {
    fill: #b3261e;
    font-weight: 600;
}

.hall-map .is-marked .hall-map-seat {
    fill: var(--color-accent);
    stroke: var(--color-accent);
}

.hall-map .is-marked text {
    fill: var(--color-surface);
}

.hall-map .is-marked .hall-map-number {
    font-size: 26px;
    font-weight: 500;
}

/* The seating screen, where every table is a link down to its card. */
.hall-map a[href] {
    cursor: pointer;
}

.hall-map-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.5rem;
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.hall-map-legend li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hall-map-swatch {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 0.75rem;
    height: 0.75rem;
    border: 1px solid var(--color-ink-muted);
    border-radius: 50%;
    font-size: 0.45rem;
    letter-spacing: 0;
    color: var(--color-accent);
}

.hall-map-swatch.is-marked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}