/*
 * NASPA brand layer for map pages (brand.naspa.org: Open Sans, NASPA Blue/Green/Navy, square corners).
 *
 * Each map page links this file right after its own <style> and puts a .naspa-bar header before its
 * app element (see README.md). It restyles the page chrome: the nav bar, side panel, tabs, chips,
 * buttons, popover cards and map controls. The map artwork itself (isometric drawing, pin, route and
 * category colors, map labels) is left alone.
 *
 * Covers both map app prefixes in use: .nh-* (area maps) and .gv-* (venue floor plans).
 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap");

:root{
  --naspa-blue:#0E6BB1; --naspa-green:#007960; --naspa-navy:#043352; --naspa-emerald:#34B879; --naspa-mint:#BAF5DC;
  --naspa-cloud:#F6F6F6; --naspa-mist:#E8EEF4; --naspa-slate:#4A6A84; --naspa-ink:#1F2D36;
}

/* ── Page layout: nav bar on top, map app fills the rest ── */
/* The map pages' base style pads the whole page for iPhone safe areas; with a full-height layout that makes the page
   taller than the screen. The bottom panel takes the home-indicator space instead (see the phone rules below). */
:root{padding:0}
html,body{height:100%}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--naspa-cloud)}
:is(.nh-app,.gv-app){flex:1 1 auto;height:auto;min-height:0;max-height:none}

/* ── NASPA nav bar ── */
.naspa-bar{position:relative;z-index:10;flex:none;display:flex;align-items:stretch;height:52px;background:var(--naspa-navy);color:#fff;font:600 13px/1.2 "Open Sans","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.naspa-bar a{color:#fff;text-decoration:none}
.naspa-bar a:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.naspa-bar-logo{flex:none;display:flex;align-items:center;padding:0 20px;background:var(--naspa-blue)}
.naspa-bar-logo img{display:block;height:24px;width:auto}
.naspa-bar-name{display:flex;align-items:center;padding:0 18px;font-size:14px;font-weight:700;white-space:nowrap}
.naspa-bar-links{display:flex;align-items:center;gap:22px;margin-left:auto;padding:0 20px}
.naspa-bar-links a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.naspa-bar-links a:hover{text-decoration:underline;text-underline-offset:3px}
.naspa-bar-links svg{width:15px;height:15px}
@media (max-width:720px){
  .naspa-bar{height:46px}
  .naspa-bar-logo{padding:0 14px}
  .naspa-bar-logo img{height:20px}
  .naspa-bar-name{padding:0 12px;font-size:13px}
  .naspa-bar-links{padding:0 14px;gap:16px}
  .naspa-bar-wide{display:none!important}
}
/* phones: logo + Help + All maps only (the logo already links home), so the bar never widens the page */
@media (max-width:540px){
  .naspa-bar-name{display:none}
}

/* ── "How to use this map" (assets/map-help.js) ── */
.naspa-help-btn{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:#fff;font:inherit;cursor:pointer;white-space:nowrap}
.naspa-help-btn svg{width:18px;height:18px}
.naspa-help-btn:hover span{text-decoration:underline;text-underline-offset:3px}
.naspa-help-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.naspa-help{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(4,51,82,.45);font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.naspa-help.show{display:flex}
.naspa-help-card{display:flex;flex-direction:column;width:100%;max-width:520px;max-height:min(720px,calc(100dvh - 32px));background:#fff;color:var(--naspa-navy);border-top:4px solid var(--naspa-blue);box-shadow:0 12px 40px rgba(4,51,82,.3)}
.naspa-help-head{display:flex;align-items:center;gap:12px;padding:18px 20px 10px}
.naspa-help-head h2{flex:1;margin:0;font-size:20px;font-weight:800}
.naspa-help-x{width:40px;height:40px;margin:-8px -10px -8px 0;border:0;background:none;color:var(--naspa-slate);display:grid;place-items:center;cursor:pointer}
.naspa-help-x svg{width:18px;height:18px}
.naspa-help-x:hover{background:var(--naspa-mist)}
.naspa-help-list{flex:1;min-height:0;overflow-y:auto;margin:0;padding:4px 20px 8px;list-style:none;overscroll-behavior:contain}
.naspa-help-list li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--naspa-mist)}
.naspa-help-list li:last-child{border-bottom:0}
.naspa-help-list li>svg{flex:none;width:24px;height:24px;margin-top:1px;color:var(--naspa-blue)}
.naspa-help-list h3{margin:0 0 3px;font-size:15px;font-weight:700}
.naspa-help-list p{margin:0;font-size:14px;line-height:1.5;color:var(--naspa-ink)}
.naspa-help-foot{padding:12px 20px 18px;border-top:1px solid var(--naspa-mist)}
.naspa-help-ok{width:100%;min-height:44px;border:0;background:var(--naspa-navy);color:#fff;font:600 15px "Open Sans",Arial,sans-serif;cursor:pointer}
.naspa-help-ok:hover{background:var(--naspa-blue)}
.naspa-help :focus-visible{outline:2px solid var(--naspa-blue);outline-offset:2px}
.naspa-help-nudge{position:fixed;z-index:999;max-width:calc(100vw - 16px);display:flex;align-items:center;gap:8px;padding:10px 12px;border:0;background:var(--naspa-navy);color:#fff;font:600 13px "Open Sans",Arial,sans-serif;box-shadow:0 6px 18px rgba(4,51,82,.3);cursor:pointer;transition:opacity .5s}
.naspa-help-nudge::before{content:"";position:absolute;top:-6px;right:22px;border:6px solid transparent;border-top:0;border-bottom-color:var(--naspa-navy)}
.naspa-help-nudge b{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.naspa-help-nudge span{margin-left:4px;font-size:18px;line-height:1;opacity:.8;padding:0 2px}
.naspa-help-nudge.fade{opacity:0}
.naspa-help-nudge.up::before{top:auto;bottom:-6px;border-bottom:0;border-top:6px solid var(--naspa-navy)}
/* Phones: no NASPA bar (more map), Help + All maps as icons in the panel header instead */
.naspa-mini{display:none}
@media (max-width:720px){
  .naspa-bar{display:none}
  .naspa-mini{display:flex;align-items:center;gap:2px;margin-left:auto}
  .naspa-mini a,.naspa-mini button{width:38px;height:38px;margin:-9px 0;padding:0;border:0;background:none;color:var(--naspa-navy);display:grid;place-items:center;cursor:pointer}
  .naspa-mini svg{width:21px;height:21px}
  /* keep the panel header to one line: name + icons (the dates badge is on the homepage card) */
  :is(.nh-conf,.gv-conf){display:none}
  :is(.nh-brand,.gv-brand){flex-wrap:nowrap}
  :is(.nh-brand,.gv-brand) h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .naspa-mini :focus-visible{outline:2px solid var(--naspa-blue);outline-offset:-2px}
}
@media (max-width:720px){
  .naspa-help{align-items:flex-end;padding:0}
  .naspa-help-card{max-width:none;max-height:88dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media (prefers-reduced-motion:reduce){ .naspa-help-nudge{transition:none} }

/* ── Tokens: brand palette for the UI (pin/route/category colors stay as each map sets them) ── */
:is(.nh-app,.gv-app){
  --ink:var(--naspa-navy); --muted:var(--naspa-slate); --faint:var(--naspa-slate);
  --line:var(--naspa-mist); --line-2:var(--naspa-mist);
  --paper:#FFFFFF; --panel:#FFFFFF; --hover:var(--naspa-mist); --canvas:var(--naspa-cloud);
  --focus:var(--naspa-blue);
  --shadow:0 6px 20px rgba(4,51,82,.16);
}
.gv-app{font-family:"Open Sans","Helvetica Neue",Arial,sans-serif}
#gv-svg{font-family:Montserrat,"Helvetica Neue",Arial,sans-serif} /* map labels keep their original face */

/* Text in a category / session-type colour: darkened so small text keeps 4.5:1 contrast (the pins keep the full colour) */
:is(.nh-sec,.gv-sec) h2,.gv-type,:is(.nh-card-cat,.gv-card-cat){color:color-mix(in srgb,var(--c) 72%,#000)}

/* ── Panel header ── */
:is(.nh-brand,.gv-brand) h1{font-weight:800;letter-spacing:-.005em}
:is(.nh-kicker,.gv-kicker){color:var(--naspa-green)}
:is(.nh-conf,.gv-conf){border-radius:0;padding:5px 10px;background:var(--naspa-navy)}

/* Tabs: underline style */
:is(.nh-tabs,.gv-tabs){gap:0;padding:0;background:transparent;border-bottom:1px solid var(--naspa-mist);border-radius:0}
:is(.nh-tabs,.gv-tabs) button{border-radius:0;padding:10px 8px;color:var(--naspa-slate);box-shadow:inset 0 -3px 0 transparent}
:is(.nh-tabs,.gv-tabs) button:hover{color:var(--naspa-navy)}
:is(.nh-tabs,.gv-tabs) button[aria-selected="true"]{background:transparent;color:var(--naspa-navy);box-shadow:inset 0 -3px 0 var(--naspa-blue)}
:is(.nh-tabs,.gv-tabs) button:focus-visible{outline:2px solid var(--naspa-blue);outline-offset:-2px}

/* Inputs */
:is(.nh-search,.gv-search) input,
:is(.nh-select,.gv-select) select{border-radius:0;background:var(--naspa-mist);border-color:var(--naspa-mist);color:var(--naspa-navy)}
:is(.nh-search,.gv-search) input::placeholder{color:var(--naspa-slate)}
:is(.nh-search,.gv-search) svg{color:var(--naspa-slate)}
:is(.nh-search,.gv-search) input:focus,
:is(.nh-select,.gv-select) select:focus{background:#fff;border-color:var(--naspa-blue);box-shadow:0 0 0 1px var(--naspa-blue)}

/* Chips, day picker, counts */
:is(.nh-chip,.gv-chip){border-radius:0;border-color:var(--naspa-mist);color:var(--naspa-navy)}
:is(.nh-chip,.gv-chip):hover{border-color:var(--naspa-blue)}
:is(.nh-chip,.gv-chip)[aria-pressed="true"]{background:var(--naspa-navy);border-color:var(--naspa-navy);color:#fff}
:is(.nh-chip,.gv-chip):focus-visible,.gv-day:focus-visible{outline:2px solid var(--naspa-blue);outline-offset:2px}
.gv-day{border-radius:0;border-color:var(--naspa-mist)}
.gv-day:hover{border-color:var(--naspa-blue)}
.gv-day[aria-pressed="true"]{background:var(--naspa-navy);border-color:var(--naspa-navy)}
.gv-count{border-radius:0;background:var(--naspa-mist);color:var(--naspa-navy)}

/* List rows and badges */
:is(.nh-row,.gv-row,.gv-sess,.nh-step,.gv-step){border-radius:0}
:is(.nh-badge,.gv-badge).sq,.gv-badge.lv{border-radius:0}
.gv-row.is-idle .gv-badge{background:rgba(74,106,132,.45)}
:is(.nh-sec,.gv-sec) h2,.gv-time-h{letter-spacing:.14em}

/* Session flags: text carries the meaning, colors from the brand palette */
.gv-flag{border-radius:0;background:var(--naspa-mist);color:var(--naspa-navy)}
.gv-flag.pre{background:var(--naspa-mint);color:var(--naspa-navy)}
.gv-flag.now{background:var(--naspa-green);color:#fff}

/* Callouts, messages, route summary */
:is(.nh-tip,.gv-tip){border-radius:0;border-color:var(--naspa-mist);border-left:4px solid var(--naspa-blue)}
:is(.nh-msg,.gv-msg){border-radius:0;border-color:var(--naspa-slate)}
:is(.nh-summary,.gv-summary){border-radius:0;background:var(--naspa-navy)}
.gv-sf{border-radius:0;border-color:var(--naspa-mist)}
.gv-sf input{accent-color:var(--naspa-blue)}

/* Buttons: Navy primary, NASPA Blue on hover */
:is(.nh-btn,.gv-btn){border-radius:0;border-color:var(--naspa-navy);color:var(--naspa-navy);font-weight:600}
:is(.nh-btn,.gv-btn):hover{background:var(--naspa-mist)}
:is(.nh-btn,.gv-btn).primary{background:var(--naspa-navy);border-color:var(--naspa-navy);color:#fff}
:is(.nh-btn,.gv-btn).primary:hover{filter:none;background:var(--naspa-blue);border-color:var(--naspa-blue)}
:is(.nh-btn,.gv-btn):focus-visible,:is(.nh-swap,.gv-swap):focus-visible{outline:2px solid var(--naspa-blue);outline-offset:2px}
:is(.nh-swap,.gv-swap){border-radius:0}
.nh-reset{border-radius:0;background:var(--naspa-navy);box-shadow:0 2px 8px rgba(4,51,82,.25)}
.nh-reset:hover{filter:none;background:var(--naspa-blue)}

/* ── Map overlays: popover card, controls, hint, legend ── */
:is(.nh-card,.gv-card){border-radius:0;border:1px solid var(--naspa-mist)}
:is(.nh-card,.gv-card)::after,:is(.nh-card,.gv-card).below::after{border-radius:0}
:is(.nh-card-x,.gv-card-x){border-radius:0}
:is(.nh-ctl-group,.gv-ctl-group){border-radius:0;border:1px solid var(--naspa-mist);box-shadow:0 2px 8px rgba(4,51,82,.12)}
:is(.nh-ctl-group,.gv-ctl-group) button{color:var(--naspa-navy)}
:is(.nh-compass,.gv-compass){box-shadow:0 2px 8px rgba(4,51,82,.12)}
:is(.nh-hint,.gv-hint){border-radius:0;background:rgba(4,51,82,.92)}
.gv-legend{border-radius:0;border:1px solid var(--naspa-mist);box-shadow:0 2px 8px rgba(4,51,82,.12);color:var(--naspa-navy)}

/* ── Phone: bottom sheet ── */
@media (max-width:720px){
  :is(.nh-panel,.gv-panel){border-radius:0;border-top:3px solid var(--naspa-blue);box-shadow:0 -8px 24px rgba(4,51,82,.16);padding-bottom:env(safe-area-inset-bottom,0px)}
  :is(.nh-handle,.gv-handle)::before{border-radius:0;background:var(--naspa-slate);opacity:.45}
  :is(.nh-tabs,.gv-tabs){margin:0 18px}
  :is(.nh-conf,.gv-conf){padding:4px 8px}
}