/* ==========================================================================
   Venue map.

   Used in three places: the My Conference Venue Map screen, the public venue
   page (anonymous), and the compact inset on session detail pages.

   The artwork is dark by design and carries its own internal palette. Rather
   than fight it, the map sits in a dark frame on both the light dashboard and
   the light public page, so it reads as a deliberate object rather than a
   pasted-in image.
   ========================================================================== */

:root {
    --venue-map-frame: #0f172a;
    --venue-map-frame-edge: rgba(255, 255, 255, 0.08);
    --venue-map-highlight-fill: #3BA0E8;
    --venue-map-highlight-stroke: #A8D8F5;
    --venue-map-highlight-text: #ffffff;
}

.venue-map {
    margin: 0 0 1.5rem;
}

/* --------------------------------------------------------------------------
   Level switcher
   -------------------------------------------------------------------------- */

/* A segmented control, not a row of loose pills. Two free-floating lozenges of unequal width,
   each with its own shadow and a 999px radius wrapped around two lines of text, read as debris
   above the map. One track with the segments inside it reads as a single switch. */
.venue-map-levels {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.85rem;
    padding: 0.3rem;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.85rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.venue-map-level-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Equal segments: the names differ in length, and ragged widths are most of why the old
       pills looked accidental. */
    flex: 1 0 auto;
    min-width: 9.5rem;
    padding: 0.4rem 1rem;
    min-height: 44px;
    border-radius: 0.6rem;
    background: transparent;
    color: var(--theme-dark);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.venue-map-level-tab:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--theme-dark);
}

.venue-map-level-tab:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: -2px;
}

.venue-map-level-tab.active,
.venue-map-level-tab.active:hover {
    background: var(--theme-primary);
    color: #fff;
}

.venue-map-level-floor {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
    .venue-map-level-tab {
        transition: none;
    }
}

@media (max-width: 575.98px) {
    /* Full width on a phone: the track and its segments stretch rather than wrapping raggedly. */
    .venue-map-levels {
        display: flex;
        width: 100%;
    }

    .venue-map-level-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.4rem 0.65rem;
        font-size: 0.875rem;
    }
}

/* --------------------------------------------------------------------------
   "You are looking for" banner
   -------------------------------------------------------------------------- */

.venue-map-youarehere {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    background: #fff;
    border-left: 4px solid var(--theme-primary);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.venue-map-youarehere-level {
    color: #6c757d;
    font-size: 0.9rem;
}

/* A room we could not place. Deliberately looks the same minus the map — the
   attendee still gets the room name, we simply never guess where it is. */
.venue-map-youarehere-unmapped {
    border-left-color: #adb5bd;
}

/* --------------------------------------------------------------------------
   Viewport — where the gestures happen
   -------------------------------------------------------------------------- */

.venue-map-viewport {
    position: relative;
    overflow: hidden;
    background: var(--venue-map-frame);
    border: 1px solid var(--venue-map-frame-edge);
    border-radius: 0.75rem;
    /* THE critical line. Every gesture inside the map belongs to the map: without
       it a pinch zooms the browser page and the map is unusable on a phone. */
    touch-action: none;
    /* Stops the long-press text selection that otherwise fires mid-drag. */
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

/* Height cap for the full-screen map, applied by narrowing the frame rather than by cropping or
   letterboxing it: the SVG is width-driven (width:100%, height:auto), so bounding the width by
   `height x aspect` is the same as bounding the height, and the frame still hugs the artwork with
   no dead bands inside it.

   It matters because the levels are different shapes — Brilliance is 1106x786 but Discovery is
   656x716 — so at any given width Discovery renders half again as tall. Without this, the wider
   container pushes it well past the fold.

   --venue-map-aspect comes from the artwork's viewBox (see the view component). The 1.4 fallback
   is Brilliance's shape, used only if the hint is missing. */
@media (min-width: 992px) {
    .venue-map-interactive .venue-map-viewport {
        max-width: calc(110vh * var(--venue-map-aspect, 1.4));
        margin-inline: auto;
    }
}

.venue-map-viewport:focus-visible {
    outline: 3px solid var(--theme-primary);
    outline-offset: 2px;
}

.venue-map-viewport.is-zoomed {
    cursor: grabbing;
}

.venue-map-canvas {
    transform-origin: center center;
    will-change: transform;
}

.venue-map-canvas svg {
    display: block;
    width: 100%;
    height: auto;
}

/* The static inset on a session page: a picture, not a tool. */
.venue-map-static .venue-map-viewport {
    touch-action: auto;
    cursor: default;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.venue-map-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.venue-map-btn {
    /* 44x44 minimum: these are the primary controls on a phone. */
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: var(--theme-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 1rem;
    cursor: pointer;
}

.venue-map-btn:hover,
.venue-map-btn:focus-visible {
    background: var(--theme-primary);
    color: #fff;
}

.venue-map-hint {
    text-align: center;
    color: #6c757d;
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
}

.venue-map-unavailable {
    background: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    color: #6c757d;
}

/* --------------------------------------------------------------------------
   Room list — the accessible representation, and the artwork's fallback
   -------------------------------------------------------------------------- */

.venue-map-roomlist {
    margin-top: 0.75rem;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 1rem;
}

.venue-map-roomlist summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.venue-map-roomlist ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.35rem 1rem;
}

.venue-map-roomlist li {
    color: #495057;
}

.venue-map-roomlist-hint {
    margin-left: 0.5rem;
    font-weight: 400;
    font-size: 0.8rem;
    color: #6c757d;
}

/* Each room is a control, so it has to look and behave like one: full-width hit area, 44px tall,
   its own focus ring. */
.venue-map-room-btn {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0.35rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: transparent;
    color: #495057;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.venue-map-room-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--theme-dark);
}

.venue-map-room-btn:focus-visible {
    outline: 2px solid var(--theme-primary);
    outline-offset: 1px;
}

.venue-map-room-btn.is-active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
    font-weight: 600;
}

/* The non-interactive case: artwork failed, or the room has no region in it. */
.venue-map-room-plain {
    display: block;
    padding: 0.35rem 0.6rem;
}

.venue-map-roomlist li.current .venue-map-room-plain {
    font-weight: 700;
    color: var(--theme-primary);
}

@media (prefers-reduced-motion: reduce) {
    .venue-map-room-btn {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Room highlight driven from the list

   The server-rendered highlight emits its own scoped <style> per render (see the view). This is
   the client-side twin, applied by class so the script can move it without touching styles.
   !important for the same reason the server's rule needs it: the artwork styles its own regions.
   -------------------------------------------------------------------------- */

.venue-map-canvas .venue-map-room-active > rect,
.venue-map-canvas .venue-map-room-active > path,
.venue-map-canvas .venue-map-room-active > polygon {
    fill: var(--venue-map-highlight-fill) !important;
    stroke: var(--venue-map-highlight-stroke) !important;
    stroke-width: 3 !important;
}

.venue-map-canvas .venue-map-room-active text {
    fill: var(--venue-map-highlight-text) !important;
    font-weight: 700 !important;
}

.venue-map-fulllink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.venue-map-fulllink:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .venue-map-level-tab {
        flex: 1 1 auto;
        text-align: center;
        align-items: center;
    }

    .venue-map-roomlist ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .venue-map-canvas {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   Session detail inset — a picture of where the room is, not a tool
   -------------------------------------------------------------------------- */

.session-venue-map {
    margin: 1.5rem 0;
    max-width: 640px;
}

.session-venue-map .venue-map-viewport {
    border-radius: 0.5rem;
}