/* =========================================================
   Maldives Financial Expo 2026 — design system.
   "Bright Archipelago": deep-indigo brand world dotted with
   vibrant textured tiles. Authored fresh per DESIGN.md — only
   the build engine is shared with the MMA Awards site.
   Content is rendered at build time by Eleventy; the agenda
   additionally hydrates live from a Google Sheet at runtime.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Base / ground */
  --indigo: #1A1F4F;
  --indigo-deep: #12163A;
  --indigo-lift: #353E88;
  --ink: #1A1F4F;
  --ink-soft: #4A4F73;
  --muted: color-mix(in srgb, var(--ink-soft) 62%, #fff);
  /* Content neutrals */
  --white: #FFFFFF;
  --mist: #F4F5FB;
  --line: #E3E5F0;
  /* Accent family + AA text tokens */
  /* Accent dark/light pairs taken directly from the expo logo tiles.
     The *-text tokens stay deeper for AA-legible small text on white. */
  --teal: #48A9A6;   --teal-text: #2C7B78;   --teal-ink: #06302E;   --teal-lt: #9AD8D5;
  --purple: #B377ED; --purple-text: #7A3FD0; --purple-lt: #D1ADF4;
  --orange: #DB7D3E; --orange-text: #B26A00; --orange-lt: #F49F60;
  --green: #6AAF4A;  --green-text: #2E7D32;  --green-lt: #9ED889;
  --blue: #659BEA;   --blue-text: #1E5FB0;   --blue-lt: #80BAFF;   --blue-sky: #5B9BD5;
  --gold: #C9A24B;   --gold-lt: #E4CB84;

  /* Floor-plan zone palette — keyed to the colours printed on the V04 plan so
     the legend, booth hotspots and code chips read the same as the map. Brand
     tokens are reused where the hue matches; red / yellow / lime are plan-only
     (the brand has no equivalent) and tuned to sit with the theme. */
  --zone-regulator: #D8403F;   /* red   */
  --zone-banking:   var(--green);
  --zone-markets:   var(--blue);
  --zone-payments:  #E6C21E;   /* yellow */
  --zone-insurance: var(--purple-lt);
  --zone-education: #B6C24C;   /* lime  */
  --zone-finance:   #AC74C1;
  --zone-host:      #DE9CD4;   /* pink  */

  /* Per-page accent (set via [data-hue]); defaults to teal */
  --accent: var(--teal);
  --accent-text: var(--teal-text);
  --accent-lt: var(--teal-lt);

  /* Geometry */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-pill: 999px;
  --gutter: clamp(1.1rem, 5vw, 4rem);
  --sec: clamp(2.6rem, 7vw, 5rem);
  --maxw: 1100px;
  --maxw-text: 72ch;
  --nav-h: 60px;

  --shadow: 0 14px 36px -22px rgba(26,31,79,.45);
  --shadow-lg: 0 26px 56px -28px rgba(26,31,79,.55);
  --ease: cubic-bezier(.22,1,.36,1);

  /* Frosted-glass surfaces (landing cards + nav). One language, reused. */
  --glass-bg: linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  --glass-border: rgba(255,255,255,.22);
  --glass-blur: blur(18px) saturate(1.5);
  --glass-hi: inset 0 1px 0 rgba(255,255,255,.32);
  --glass-shadow: 0 20px 42px -24px rgba(0,0,0,.7);

  --ff-display: "Poppins", sans-serif;
  --ff-body: "Fira Sans", system-ui, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

[data-hue="teal"]   { --accent: var(--teal);   --accent-text: var(--teal-text);   --accent-lt: var(--teal-lt); }
[data-hue="purple"] { --accent: var(--purple); --accent-text: var(--purple-text); --accent-lt: var(--purple-lt); }
[data-hue="orange"] { --accent: var(--orange); --accent-text: var(--orange-text); --accent-lt: var(--orange-lt); }
[data-hue="green"]  { --accent: var(--green);  --accent-text: var(--green-text);  --accent-lt: var(--green-lt); }
[data-hue="gold"]   { --accent: var(--gold);   --accent-text: var(--gold);        --accent-lt: var(--gold-lt); }
[data-hue="blue"]   { --accent: var(--blue);   --accent-text: var(--blue-text);   --accent-lt: var(--blue-lt); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  color: var(--ink);
  /* Brand backdrop lifted verbatim from the Maldives Financial Expo app:
     the textured SVG over deep indigo, fixed so it reads as one canvas. */
  background-color: var(--indigo);
  background-image: url("/assets/images/background.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font: inherit; }
h1, h2, h3, h4 { font-family: var(--ff-display); line-height: 1.1; letter-spacing: -.01em; }
:focus-visible { outline: 2.5px solid var(--purple); outline-offset: 3px; border-radius: 3px; }

/* ---------- a11y helpers ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--white); color: var(--indigo);
  padding: .65rem 1.1rem; border-radius: 0 0 var(--r-xs) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec); }
.eyebrow {
  font-family: var(--ff-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.measure { max-width: var(--maxw-text); }
.sparkle { display: inline-block; color: var(--accent); }

/* =========================================================
   NAV — fixed, transparent over the indigo hero, frosting on
   scroll; off-canvas drawer ≤860px.
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: var(--nav-h); padding-inline: var(--gutter);
  background: transparent; transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(26,31,79,.55);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: rgba(255,255,255,.14);
  box-shadow: var(--glass-hi);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ff-display); font-weight: 700; color: #fff; font-size: .95rem;
}
.brand-logo { width: auto; height: 30px; flex: none; }
.nav__links { list-style: none; display: flex; align-items: center; gap: .3rem; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: .35rem;
  color: rgba(255,255,255,.82); font-weight: 500; font-size: .95rem;
  padding: .5rem .8rem; border-radius: var(--r-xs); transition: color .2s;
}
.nav__link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: #fff; }
.nav__link--teal[aria-current="page"]   { color: var(--teal-lt); }
.nav__link--purple[aria-current="page"] { color: var(--purple-lt); }
.nav__link--orange[aria-current="page"] { color: var(--orange-lt); }
.nav__link--green[aria-current="page"]  { color: var(--green-lt); }
.nav__link--blue[aria-current="page"]   { color: var(--blue-lt); }
.nav__link--gold[aria-current="page"]   { color: var(--gold-lt); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__ext-icon { width: 13px; height: 13px; opacity: .7; }

.nav__toggle { display: none; width: 44px; height: 44px; place-items: center; border-radius: var(--r-xs); }
.nav__bars { display: inline-block; width: 22px; height: 16px; position: relative; }
.nav__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__bars span:nth-child(1) { top: 0; }
.nav__bars span:nth-child(2) { top: 7px; }
.nav__bars span:nth-child(3) { top: 14px; }
.nav.is-open .nav__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__bars span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
  /* Toggle sits above the drawer so the X stays the close affordance */
  .nav__toggle { display: grid; position: relative; z-index: 2; }

  /* While the drawer is open, drop the scrolled-nav backdrop-filter: a filtered
     ancestor becomes the containing block for its fixed children, which would
     shrink the full-page drawer to the 60px bar and kill the backdrop tap. */
  .nav.is-open.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Full-page translucent drawer; links centred on both axes */
  .nav__panel {
    position: fixed; inset: 0; z-index: 1;
    display: grid; place-items: center;
    padding: var(--nav-h) 1.2rem 1.2rem;
    background: rgba(18,22,58,.6);
    backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    box-shadow: var(--glass-hi);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .nav.is-open .nav__panel { opacity: 1; visibility: visible; }

  .nav__links { flex-direction: column; align-items: center; gap: 1.6rem; }
  .nav__link {
    font-family: var(--ff-display); font-size: 1.55rem; font-weight: 600;
    color: rgba(255,255,255,.92); padding: .1rem .4rem; border-radius: 0;
  }
  .nav__link::after { display: none; }
  .nav__link:hover { color: #fff; }
  /* Active link: text colour (from its hue) + underline, not a button fill */
  .nav__link[aria-current="page"] {
    background: none;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
  }
  .nav__ext-icon { width: 18px; height: 18px; }
}

/* =========================================================
   Buttons / pills
   ========================================================= */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: var(--teal-ink); font-weight: 600; font-size: .95rem;
  padding: .7rem 1.4rem; border-radius: var(--r-pill);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
[data-hue="purple"] .pill, [data-hue="orange"] .pill, [data-hue="gold"] .pill { color: #1a1208; }
.pill:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(1.04); }
.pill svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.pill:hover svg { transform: translateX(3px); }
.pill--sm { padding: .45rem 1rem; font-size: .82rem; }
.pill--sm svg { width: 14px; height: 14px; }
.pill--ghost {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5);
}
.pill--ghost:hover { border-color: #fff; filter: none; }
.pill--on-light.pill--ghost { color: var(--ink); border-color: var(--line); }

/* =========================================================
   Hero / brand band (sub-page header + landing head share tone)
   ========================================================= */
.stage { position: relative; isolation: isolate; }
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 540px at 80% -4%, rgba(73,169,166,.22), transparent 62%),
    radial-gradient(820px 640px at -6% 24%, rgba(185,127,255,.14), transparent 58%);
}

.page-head {
  position: relative; color: #fff; isolation: isolate;
  padding: calc(var(--nav-h) + clamp(2rem,7vw,3.4rem)) 0 clamp(2rem,6vw,3.2rem);
  overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(800px 460px at 82% -10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%);
}
.page-head__eyebrow { color: var(--accent-lt); }
.page-head h1 {
  font-weight: 800; font-size: clamp(2.1rem, 5.5vw, 3.6rem); line-height: 1.04;
  letter-spacing: -.02em; margin-top: .5rem; text-wrap: balance;
}
.page-head__lead { color: rgba(255,255,255,.82); margin-top: 1rem; max-width: 60ch; }
.page-head__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1.3rem;
  color: rgba(255,255,255,.8); font-size: .92rem; font-weight: 500;
}
.page-head__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.page-head__meta svg { width: 16px; height: 16px; stroke: var(--accent-lt); }
.page-head__meta b { color: #fff; font-weight: 600; }

/* =========================================================
   LANDING — logo head
   ========================================================= */
.head { position: relative; text-align: center; padding: calc(var(--nav-h) + clamp(2rem,7vw,3.6rem)) 0 clamp(1.6rem,5vw,2.4rem); }
.head__logo { width: min(300px, 70vw); height: auto; object-fit: contain; margin: 0 auto; }
.head__meta {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem;
  color: rgba(255,255,255,.84); font-size: .92rem; font-weight: 500;
}
.head__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.head__meta b { color: #fff; font-weight: 600; }
.head__meta svg { width: 16px; height: 16px; }
.head__hours { margin-top: .9rem; color: rgba(255,255,255,.6); font-size: .85rem; }

/* =========================================================
   Sponsors carousel
   ========================================================= */
.car-sec { padding-bottom: var(--sec); }
.car { max-width: var(--maxw); margin-inline: auto; }
.car__head { text-align: center; margin-bottom: 1.2rem; }
.car__head .eyebrow { color: var(--teal-lt); }
.car__view {
  position: relative; aspect-ratio: 16/9; background: var(--indigo-deep);
  border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}
@media (min-width: 680px) { .car__view { aspect-ratio: 16/9; } }
.car__slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; text-align: center; padding: 1.4rem;
}
.car__slide { padding: 0; }
.car__slide.is-active { opacity: 1; }
.car__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.4rem .9rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--indigo-deep) 85%, transparent), transparent);
  color: #fff; font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(.95rem,2.6vw,1.3rem); text-align: left;
}
.car__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: 50%; background: rgba(18,22,58,.4); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  color: #fff; display: grid; place-items: center; transition: background .25s, border-color .25s;
}
.car__nav:hover { background: rgba(18,22,58,.85); border-color: var(--teal); }
.car__nav svg { width: 18px; height: 18px; }
.car__nav--prev { left: .6rem; } .car__nav--next { right: .6rem; }
@media (max-width: 560px) { .car__nav { width: 36px; height: 36px; } .car__nav svg { width: 16px; height: 16px; } .car__nav--prev { left: .4rem; } .car__nav--next { right: .4rem; } }
.car__bar { display: none; }
.car__dots { display: flex; gap: .4rem; }
.car__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); transition: background .25s, transform .25s; }
.car__dot.is-active { background: var(--teal); transform: scale(1.25); }
.car__play { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; display: grid; place-items: center; }
.car__play svg { width: 13px; height: 13px; }
.car__play .i-play { display: none; } .car.is-paused .i-pause { display: none; } .car.is-paused .i-play { display: block; }
.car__cap { text-align: center; color: rgba(255,255,255,.55); font-size: .78rem; margin-top: .6rem; }

/* =========================================================
   FUNCTION TILES (landing wayfinding)
   ========================================================= */
.links-sec { position: relative; isolation: isolate; padding-bottom: var(--sec); }
/* Soft accent glows sitting behind the cards so the frost refracts colour —
   roughly one blob per tile (blue / purple / green / orange). */
.links-sec::before {
  content: ""; position: absolute; inset: -8% 0 2%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 64% at 16% 34%, color-mix(in srgb, var(--blue) 42%, transparent), transparent 72%),
    radial-gradient(38% 64% at 44% 70%, color-mix(in srgb, var(--purple) 40%, transparent), transparent 72%),
    radial-gradient(38% 64% at 70% 30%, color-mix(in srgb, var(--green) 40%, transparent), transparent 72%),
    radial-gradient(38% 64% at 92% 66%, color-mix(in srgb, var(--orange) 42%, transparent), transparent 72%);
  filter: blur(30px); opacity: .55;
}
.links { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 760px) { .links { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.link {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .1rem;
  min-height: 132px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-md); padding: 1.1rem;
  overflow: hidden; isolation: isolate; box-shadow: var(--glass-shadow), var(--glass-hi);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
@media (min-width: 760px) { .link { min-height: 196px; padding: 1.3rem; } }
.link:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), var(--glass-hi); border-color: rgba(255,255,255,.38); }
.link__corner {
  position: absolute; top: 0; right: 0; width: 60px; height: 60px; border-radius: 0 var(--r-md) 0 100%;
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 8px; transition: transform .4s var(--ease);
}
@media (min-width: 760px) { .link__corner { width: 90px; height: 90px; padding: 11px; } }
.link:hover .link__corner { transform: scale(1.09); }
.link__corner svg { width: 36px; height: 36px; }
@media (min-width: 760px) { .link__corner svg { width: 48px; height: 48px; } }
.link__corner svg * { stroke: var(--indigo-deep); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Titles are bottom-aligned; a long word (e.g. "Performances") wraps to two lines
   whose top line must clear the corner curve. Tight line-height + right padding
   keep even the longest label off the corner on the narrow mobile card. */
.link h2 { color: #fff; font-size: 1rem; line-height: 1.15; font-weight: 700; padding-right: 42px; }
@media (min-width: 760px) { .link h2 { font-size: 1.3rem; } }
.link__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-weight: 700; font-size: .85rem; color: var(--tile-lt); }
.link__go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.link:hover .link__go svg { transform: translateX(4px); }
/* Each tile pairs its accent with a light tint for the "open" link; the
   corner quarter-tile is the solid accent carrying the dark line motif. */
.link--agenda { --tile: var(--blue);   --tile-lt: var(--blue-lt); }
.link--panels { --tile: var(--purple); --tile-lt: var(--purple-lt); }
.link--map    { --tile: var(--green);  --tile-lt: var(--green-lt); }
.link--performances { --tile: var(--orange); --tile-lt: var(--orange-lt); }
.link--awards { --tile: var(--orange); --tile-lt: var(--orange-lt); }
.link__corner { background: var(--tile); }

/* =========================================================
   DIRECTORY — exhibitors & partners (logos)
   ========================================================= */
.dir { background: var(--white); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--sec) 0; }
.dir__head { margin-bottom: 1.6rem; }
.dir__head .eyebrow { color: var(--teal-text); }
.dir__head h2 { font-size: clamp(1.4rem,4vw,2rem); color: var(--ink); margin-top: .3rem; font-weight: 700; }
.logo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }
@media (min-width: 560px) { .logo-grid { grid-template-columns: repeat(4,1fr); } }
@media (min-width: 860px) { .logo-grid { grid-template-columns: repeat(6,1fr); } }
.logo-cell {
  aspect-ratio: 3/2; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  display: grid; place-items: center; padding: .6rem; text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.logo-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.logo-cell img { max-height: 100%; object-fit: contain; }
.logo-cell__mk {
  width: clamp(34px,9vw,46px); height: clamp(34px,9vw,46px); border-radius: var(--r-xs);
  display: grid; place-items: center; font-family: var(--ff-display); font-weight: 700;
  font-size: .78rem; color: #fff; letter-spacing: .02em;
}
.logo-cell__name { font-size: .68rem; color: var(--ink-soft); margin-top: .35rem; line-height: 1.25; }
.partners { margin-top: var(--sec); }
.partners .logo-grid { grid-template-columns: repeat(2,1fr); }
@media (min-width: 560px) { .partners .logo-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 860px) { .partners .logo-grid { grid-template-columns: repeat(4,1fr); } }
.partners .logo-cell { aspect-ratio: 5/2; }
.dir__note { margin-top: 1rem; font-size: .8rem; color: var(--ink-soft); font-style: italic; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--indigo); color: rgba(255,255,255,.7); padding: var(--sec) 0 2rem; }
.footer__row {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; justify-content: space-between; align-items: center;
  padding-bottom: 1.6rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__brand { display: inline-flex; align-items: center; }
.footer__logo { width: min(180px, 48vw); height: auto; }
.footer__links { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .9rem; }
.footer__links a { transition: color .2s; }
.footer__links a:hover { color: #fff; }
.footer__bot { padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; font-size: .8rem; color: rgba(255,255,255,.5); }

@media (max-width: 600px) {
  .footer__row { flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; }
  .footer__logo { width: 190px; }
  .footer__links { justify-content: center; gap: .8rem 1.4rem; }
  .footer__bot { flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
}

/* =========================================================
   LIGHT CONTENT SURFACE (sub-pages)
   ========================================================= */
.surface { background: var(--mist); color: var(--ink); }
.surface--white { background: var(--white); }
.card {
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.6rem;
}

/* Chips & status badges */
.chip {
  display: inline-flex; align-items: center; gap: .35rem; background: var(--mist);
  color: var(--ink-soft); font-family: var(--ff-display); font-weight: 600; font-size: .72rem;
  letter-spacing: .04em; padding: .3rem .7rem; border-radius: var(--r-pill); text-transform: uppercase;
}
.chip--accent { background: color-mix(in srgb, var(--accent) 16%, white); color: var(--accent-text); }
.badge {
  display: inline-flex; align-items: center; gap: .35rem; font-family: var(--ff-display);
  font-weight: 600; font-size: .72rem; letter-spacing: .04em; padding: .25rem .65rem;
  border-radius: var(--r-pill); text-transform: uppercase;
}
.badge--confirmed { background: color-mix(in srgb, var(--teal) 18%, white); color: var(--teal-text); }
.badge--tentative { background: color-mix(in srgb, var(--orange) 22%, white); color: var(--orange-text); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* =========================================================
   AGENDA
   ========================================================= */
.agenda { background: var(--mist); color: var(--ink); }
/* The timetable is one centred reading column of cards, like the source design. */
.agenda__controls,
.agenda__error,
#agendaDays { max-width: 680px; margin-inline: auto; }
.agenda__controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem;
  margin-bottom: 1.8rem;
}
.agenda__filters { display: flex; flex-wrap: wrap; gap: .55rem; }
.filterpill {
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  font-family: var(--ff-display); font-weight: 600; font-size: .84rem;
  padding: .45rem 1rem; border-radius: var(--r-pill); transition: all .2s var(--ease);
}
.filterpill:hover { border-color: var(--accent); color: var(--accent-text); }
.filterpill[aria-pressed="true"] { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.agenda__status { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .82rem; color: var(--ink-soft); }
.agenda__updated { display: inline-flex; align-items: center; gap: .4rem; }
.agenda__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
.agenda__refresh {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.agenda__refresh:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.agenda__refresh svg { width: 15px; height: 15px; transition: transform .5s var(--ease); }
.agenda__refresh.is-loading svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.day { margin-bottom: 2.4rem; }
.day__head { margin: 0 0 1.1rem; font-weight: 400; }
/* The whole header is the accordion trigger */
.day__trigger {
  width: 100%; display: flex; align-items: baseline; gap: .65rem;
  border: 0; background: none; cursor: pointer; text-align: left; color: inherit;
  padding: .4rem .55rem; margin-left: -.55rem; border-radius: var(--r-sm);
  transition: background .2s var(--ease);
}
.day__trigger:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.day__name { font-size: 1.4rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.day__count { font-size: .85rem; color: var(--muted); font-weight: 500; }
.day__chevron {
  margin-left: auto; align-self: center; display: inline-flex; color: var(--muted);
  transition: transform .25s var(--ease), color .2s var(--ease);
}
.day__chevron svg { display: block; width: 18px; height: 18px; }
.day__trigger[aria-expanded="false"] .day__chevron { transform: rotate(-90deg); }
.day__trigger:hover .day__chevron { color: var(--accent-text); }
.day[hidden] { display: none; }
.slot[hidden] { display: none; }

/* Design 1C — sessions are flat editorial rows divided by hairlines, grouped
   under time-of-day headers, sitting directly on the page (no card). Each row
   stacks start over end on the left, with a quiet type + host line under the title. */

/* Time-of-day group header: a short accent dash, an uppercase label, a hairline */
.day-group { margin-top: 1.15rem; }
.day-group:first-child { margin-top: .35rem; }
.day-group[hidden] { display: none; }
.day-group__head { display: flex; align-items: center; gap: .65rem; padding: .15rem 0 .1rem; }
.day-group__dash { flex: 0 0 auto; width: 16px; height: 2px; border-radius: var(--r-pill); background: var(--accent); }
.day-group__label {
  font-family: var(--ff-display); font-weight: 600; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.day-group__rule { flex: 1; height: 1px; background: var(--line); }

.day-group__list { display: flex; flex-direction: column; }
.slot {
  position: relative; display: flex; gap: 14px;
  padding: .9rem 0; border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 1.25rem);
  transition: opacity .3s var(--ease);
}
.day-group__list > .slot:last-child { border-bottom: 0; }

.slot__time {
  flex: 0 0 54px; font-family: var(--ff-mono); text-align: center;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.25;
}
.slot__start { display: block; font-weight: 600; font-size: .78rem; color: var(--ink); }
/* Start/end read as a range: matched size, linked by a centered muted connector. */
.slot__end { display: block; position: relative; font-weight: 400; font-size: .78rem; color: var(--muted); margin-top: 15px; }
.slot__end::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: -13px; height: 10px; border-left: 2px solid color-mix(in srgb, var(--muted) 45%, transparent);
}

.slot__body { flex: 1; min-width: 0; }
.slot__title {
  font-family: var(--ff-display); font-weight: 600; font-size: 1.02rem;
  line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.slot__title a {
  color: inherit; text-decoration: none;
  transition: color .2s var(--ease);
}
.slot__title a:hover { color: var(--accent-text); }
.slot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .4rem; }
.slot__type {
  font-family: var(--ff-display); font-weight: 600; font-size: .68rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.slot__venue {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ff-display); font-weight: 600; font-size: .68rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft);
}
.slot__venue::before {
  content: "·"; color: var(--muted); font-weight: 700;
}
.slot__host { display: none; }
/* Status flags: flat dot/glyph + text, no pill */
.slot__flag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--ff-display); font-weight: 600; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.slot__flag--tentative { color: var(--orange-text); }
.slot__flag--tentative::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.slot__flag--closed { color: var(--accent-text); }
.slot__flag--closed svg { width: 12px; height: 12px; }
.slot__speaker { display: flex; align-items: center; gap: .55rem; margin-top: .5rem; }
.slot__avatar {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, white); color: var(--accent-text);
}
.slot__avatar svg { width: 15px; height: 15px; }
.slot__person { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.slot__person-name { font-size: .84rem; font-weight: 600; color: var(--ink); }
.slot__person-title { font-size: .76rem; font-weight: 500; color: var(--muted); margin-top: 1px; }
.slot__panel-link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .55rem;
  font-family: var(--ff-display); font-weight: 600; font-size: .82rem; color: var(--accent-text);
}
.slot__panel-link svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.slot__panel-link:hover svg { transform: translateX(3px); }

/* Activities stand out in green */
.slot--activity .slot__type { color: var(--green-text); }

/* Breaks: a quiet centred strip rather than a row */
.slot--break {
  display: flex; justify-content: center; align-items: center;
  border-bottom: 0; padding: 0; margin: .55rem 0;
}
.slot__break {
  width: 100%; text-align: center; padding: .6rem .75rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--ff-display); font-weight: 500; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* The one bold moment — the ongoing event: tinted block, accent rail, live label */
.slot.is-now {
  border-bottom-color: transparent; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 11%, var(--white));
  padding: .9rem 12px .9rem 14px; margin: .2rem 0;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.slot.is-now::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: var(--r-pill); background: var(--accent);
}
.slot__now {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .25rem;
  color: var(--accent-text); font-family: var(--ff-display); font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
}
.slot__now svg { width: 13px; height: 13px; fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .slot__now svg { animation: nowpulse 1.8s var(--ease) infinite; }
}
@keyframes nowpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Past events recede — visible but clearly done (faded, no background) */
.slot.is-past { opacity: .45; }
.day.is-past .day-group__head { opacity: .55; }
.day.is-past .day__name,
.day.is-past .day__count { opacity: .5; }

/* Past days collapse by default; clicking the header folds/unfolds the body */
.day.is-collapsed .day__body { display: none; }

.agenda__empty {
  padding: 2rem; text-align: center; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
}
.agenda__empty-state {
  padding: 3.5rem 2rem; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
}
.agenda__empty-icon { width: 40px; height: 40px; margin: 0 auto; color: var(--ink-soft); opacity: .5; }
.agenda__empty-title { margin: 1rem 0 .35rem; font-weight: 600; color: var(--ink); }
.agenda__empty-sub { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.agenda__error { margin-top: 1rem; font-size: .82rem; color: var(--orange-text); }

/* Performances — static Outdoor Stage Schedule (reuses the agenda day/slot shell) */
.perf-updated { margin: 0 0 1.4rem; font-size: .82rem; color: var(--ink-soft); }

@media (max-width: 540px) {
  .slot__title { font-size: 1.02rem; }
}

/* =========================================================
   PANELS — accordion
   ========================================================= */
.panels { background: var(--mist); color: var(--ink); }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 1rem; overflow: hidden; }
.panel__btn {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 1rem;
  padding: 1.3rem 1.5rem; text-align: left;
}
.panel__num {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-xs) 50% 50% 50%;
  display: grid; place-items: center; font-family: var(--ff-display); font-weight: 800;
  font-size: 1.2rem; color: #fff; background: var(--purple);
}
.panel__heading { min-width: 0; }
.panel__title { font-size: 1.2rem; font-weight: 600; line-height: 1.28; letter-spacing: -.015em; text-wrap: balance; }
.panel__when {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; margin-top: .65rem;
  font-family: var(--ff-body); font-size: .8rem; font-weight: 400; color: var(--ink-soft);
}
.panel__when span { display: inline-flex; align-items: center; gap: .4rem; }
.panel__when .panel__date { font-weight: 500; color: var(--ink); }
.panel__when svg { width: 14px; height: 14px; flex: none; opacity: .55; }
.panel__when .badge { margin-left: .15rem; }
.panel__chev { width: 24px; height: 24px; flex: none; margin-top: .55rem; color: var(--ink-soft); transition: transform .3s var(--ease); }
.panel__btn[aria-expanded="true"] .panel__chev { transform: rotate(180deg); }
.panel__body { padding: 0 1.5rem; }
.panel__body-inner { padding: .4rem 0 1.6rem; border-top: 1px solid var(--line); }
.panel__section { margin-top: 1.4rem; }
.panel__section h3 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--purple-text); font-weight: 600; margin-bottom: .7rem; }
.panel__overview p + p { margin-top: .8rem; }
.panel__overview { max-width: var(--maxw-text); }

@media (max-width: 540px) {
  .panel__btn { gap: .8rem; padding: 1.1rem 1.15rem; }
  .panel__num { width: 38px; height: 38px; font-size: 1.05rem; }
  .panel__title { font-size: 1.08rem; }
  .panel__chev { margin-top: .4rem; }
  .panel__body { padding: 0 1.15rem; }
}

.people { display: flex; flex-direction: column; }
.person { padding: .85rem 0; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; padding-top: .15rem; }
.person__tag {
  display: block; font-family: var(--ff-display); font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--purple-text); margin-bottom: .3rem;
}
.person__name { display: block; font-family: var(--ff-display); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.person__role { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: .2rem; line-height: 1.45; max-width: 62ch; }

.qlist { list-style: none; display: grid; gap: .6rem; counter-reset: q; }
.qlist li { position: relative; padding-left: 2rem; font-size: .98rem; }
.qlist li::before {
  counter-increment: q; content: counter(q); position: absolute; left: 0; top: 0;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--ff-display); font-size: .72rem; font-weight: 700;
  color: var(--purple-text); background: color-mix(in srgb, var(--purple) 16%, white);
}
.seg { margin-top: 1rem; }
.seg__title { font-weight: 600; font-size: .95rem; }
.seg ul { margin: .5rem 0 0 1.1rem; color: var(--ink-soft); font-size: .92rem; }
.seg li { margin-bottom: .3rem; }
.obj-list { margin-left: 1.1rem; display: grid; gap: .4rem; }

/* =========================================================
   MAP
   ========================================================= */
.map { background: var(--mist); color: var(--ink); }

/* Map switcher — segmented control: pick the park grounds or the tent plan */
.maptabs {
  display: flex; width: fit-content; margin: 0 auto 1.8rem;
  gap: .25rem; padding: .3rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
  box-shadow: var(--shadow);
}
.maptab {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .62rem 1.15rem; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--r-pill); color: var(--ink-soft);
  font: 600 .92rem/1 var(--ff-display); white-space: nowrap;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.maptab svg { width: 17px; height: 17px; }
.maptab:hover { color: var(--ink); }
.maptab:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.maptab[aria-selected="true"] { background: var(--accent); color: var(--teal-ink); }

.mappanel[hidden] { display: none; }
.map__sub { color: var(--orange-text); margin-top: var(--sec); margin-bottom: 1rem; }

.map__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.map__actions--center { justify-content: center; }
.map__dims { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1rem; font-size: .85rem; color: var(--ink-soft); }
.map__dims--center { justify-content: center; text-align: center; }

.legend { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.6rem 0; }
.legend__item { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 500; }
.legend__sw { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.landmarks { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.landmark { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: .35rem .8rem; font-size: .82rem; color: var(--ink-soft); }
.landmark svg { width: 15px; height: 15px; stroke: var(--accent-text); }

.stall-search { position: relative; margin-bottom: 1.2rem; max-width: 420px; }
.stall-search input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff;
  padding: .7rem 1rem .7rem 2.6rem; color: var(--ink);
}
/* Drop the harsh default focus ring; subtle on-brand highlight instead */
.stall-search input:focus { outline: none; }
.stall-search input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.stall-search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--ink-soft); pointer-events: none; }
.stall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
.stall {
  display: flex; align-items: center; gap: .7rem; padding: .8rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.stall[hidden] { display: none; }
.stall__code {
  width: 44px; height: 32px; flex: none; border-radius: var(--r-xs); display: grid; place-items: center;
  font-family: var(--ff-display); font-weight: 700; font-size: .78rem; letter-spacing: .02em;
  color: var(--ink); /* fallback for browsers without relative-colour syntax */
  /* Auto black/white text from the chip's own lightness — flips with the bg. */
  color: oklch(from var(--zc) clamp(0, (0.65 - l) * 1000, 1) 0 0);
}
.stall__name { display: block; font-size: .9rem; font-weight: 500; line-height: 1.25; }
.stall__zone { display: block; font-size: .74rem; color: var(--ink-soft); margin-top: .15rem; }
.stall-empty { color: var(--ink-soft); padding: 1rem 0; }
/* zone colours — keyed to the printed plan (see --zone-* tokens). Each exposes
   its colour as --zc so chip text can auto-contrast against it. */
.z-regulator { --zc: var(--zone-regulator); background: var(--zc); }
.z-banking   { --zc: var(--zone-banking);   background: var(--zc); }
.z-markets   { --zc: var(--zone-markets);   background: var(--zc); }
.z-payments  { --zc: var(--zone-payments);  background: var(--zc); }
.z-insurance { --zc: var(--zone-insurance); background: var(--zc); }
.z-education { --zc: var(--zone-education);  background: var(--zc); }
.z-finance   { --zc: var(--zone-finance);   background: var(--zc); }
.z-host      { --zc: var(--zone-host);      background: var(--zc); }

/* =========================================================
   INTERACTIVE FLOOR PLAN (Expo Tent tab)
   The base raster is the original V04 plan; the SVG hotspots
   overlay it 1:1 in PDF-point space. The whole canvas pans /
   zooms via a transform set in JS; on mobile it also rotates
   90° so the landscape plan fills a portrait phone.
   ========================================================= */

/* Search becomes the hero control and sticks under the nav. */
.tent__bar { position: sticky; top: var(--nav-h); z-index: 6; background: var(--mist); padding: .7rem 0 .8rem; margin-bottom: 1rem; }
.tent__bar .stall-search { margin: 0 auto; max-width: 540px; }

.plan__stage {
  position: relative; height: clamp(340px, 56vh, 560px);
  background: linear-gradient(180deg, var(--white), var(--mist));
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 1px 0 #fff, var(--shadow);
}
.plan__stage:active { cursor: grabbing; }
.plan__canvas { position: absolute; top: 0; left: 0; width: 824px; height: 312px; transform-origin: 0 0; will-change: transform; }
/* Park map: no fixed coordinate space, so the canvas takes the image's own
   size (the engine measures and scales it to fit). */
.plan__canvas--free { width: auto; height: auto; }
.plan__canvas--free .plan__img { width: 560px; height: auto; }
.plan__img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.plan__hotspots { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.hotspot {
  fill: transparent; stroke: transparent; stroke-width: 2.5; vector-effect: non-scaling-stroke;
  pointer-events: auto; cursor: pointer; transition: fill .16s var(--ease), stroke .16s var(--ease);
}
.hotspot.z-regulator { --hue: var(--zone-regulator); } .hotspot.z-banking { --hue: var(--zone-banking); }
.hotspot.z-markets { --hue: var(--zone-markets); } .hotspot.z-payments { --hue: var(--zone-payments); }
.hotspot.z-insurance { --hue: var(--zone-insurance); } .hotspot.z-education { --hue: var(--zone-education); }
.hotspot.z-finance { --hue: var(--zone-finance); }
.hotspot.z-host { --hue: var(--zone-host); }
/* Booths already carry their zone colour on the plan, so deepen that hue and
   add a navy outline (not a same-hue one) so the picked booth clearly pops. */
.hotspot:hover { fill: color-mix(in srgb, var(--hue) 34%, transparent); stroke: var(--ink); stroke-width: 2.5; }
.hotspot.is-hit { fill: color-mix(in srgb, var(--hue) 44%, transparent); stroke: var(--ink); stroke-width: 3; }
.hotspot.is-active { fill: color-mix(in srgb, var(--hue) 58%, transparent); stroke: var(--ink); stroke-width: 4.5; }

/* Floating overlay controls (shared with the park figure download button) */
.map__tools { position: absolute; left: .7rem; bottom: .7rem; z-index: 3; display: flex; gap: .4rem; }
.plan__zoom { position: absolute; right: .7rem; bottom: .7rem; z-index: 3; display: flex; flex-direction: column; gap: .4rem; }
.map__tool {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: rgba(26,31,79,.55); color: #fff; border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3);
  cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease);
}
.map__tool:hover { background: rgba(26,31,79,.82); }
.map__tool:active { transform: scale(.93); }
.map__tool:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.map__tool svg { width: 17px; height: 17px; }

.plan__hint {
  position: absolute; left: .7rem; top: .7rem; z-index: 2; pointer-events: none;
  background: rgba(26,31,79,.5); color: #fff; font-size: .72rem; font-weight: 500;
  padding: .32rem .65rem; border-radius: var(--r-pill);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .3s var(--ease);
}
.plan__stage.is-touched .plan__hint { opacity: 0; }
.plan__readout {
  position: absolute; top: .7rem; left: 50%; z-index: 3; max-width: calc(100% - 1.4rem);
  background: rgba(255,255,255,.94); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .38rem .85rem; font-size: .82rem; font-weight: 600;
  box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translate(-50%, -5px); transition: opacity .22s var(--ease), transform .22s var(--ease); pointer-events: none;
}
.plan__readout.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Mobile: taller stage so the 90°-rotated plan fills the portrait screen. */
@media (max-width: 700px) {
  .plan__stage { height: min(72vh, 600px); }
  .plan__hint { font-size: .68rem; }
}

/* Directory rows become "locate on plan" buttons */
.stall { cursor: pointer; transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease); }
.stall:hover { border-color: var(--accent-lt); box-shadow: var(--shadow); transform: translateY(-1px); }
.stall:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stall.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent); }

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

/* =========================================================
   MOTION — reveal (enhances already-visible content)
   ========================================================= */
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
}