/* shell.css — ARAIWA-APP-SHELL-V1 shared product shell layer (KUITUNEN CONFIRMED 2026-07-15).

   One shell for every AraiWa surface (home hub, Discover landing, Events, Map, Saved, Watch, Know,
   guides, News, trust pages):
     * skip-to-content link (new — the surfaces had none),
     * desktop: the existing sticky .site-bar top bar now carrying the five product zones + News secondary,
     * mobile (<=600px): the top bar shrinks to brand + language control; a fixed bottom tab bar
       (.aw-tabbar) carries the five primary zones with safe-area inset handling,
     * Saved count badge (.aw-badge) on the Saved destination in both navs — filled by shell.js.

   Layered ON TOP of events.css (the single token sheet): only tokens defined there are used here.
   ACCESSIBILITY LOCK respected: vermilion/--accent-bright only on dark surfaces (the chrome IS dark);
   active state is never colour-only (aria-current + weight + top indicator bar). No animation. */

:root { --aw-tabbar-h: 54px; }

/* ---- skip link (visible on keyboard focus only) ------------------------------------------------ */
.aw-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--indigo); color: #FFFFFF; text-decoration: none;
  font: 600 14px/1.4 var(--font); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.aw-skip:focus { left: 0; }

/* ---- Saved count badge (server-rendered empty + hidden; shell.js fills the device count) ------- */
.aw-badge {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 5px;
  border-radius: 999px; background: var(--accent-bright); color: #14110E;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: middle;
}
.aw-badge[hidden] { display: none; }

/* ---- desktop top bar: News is a SECONDARY link after the five zones (owner decision 5/6) ------- */
.site-nav .aw-nav-secondary {
  color: var(--band-ink-3);
  padding-left: 16px; border-left: 1px solid var(--band-line);
}
.site-nav .aw-nav-secondary:hover { color: var(--accent-bright); }
.site-nav .aw-nav-secondary[aria-current="page"] { color: var(--accent-bright); font-weight: 700; }

/* ---- mobile bottom tab bar --------------------------------------------------------------------- */
/* Hidden on desktop; the top bar carries the zones there. */
.aw-tabbar { display: none; }

@media (max-width: 600px) {
  /* The bottom tab bar takes over primary navigation on mobile: hide the top-bar link list so the
     header is ONE compact row (brand + language control only — owner decision 1). */
  .site-bar .site-nav { display: none; }
  .site-bar { flex-wrap: nowrap; gap: 0 10px; }
  /* The static-page language chip shrinks to its essential "EN · ไทย" form; the explanatory tail
     stays available on desktop and to assistive tech via the chip's aria-label. */
  .lang-scope .lang-scope-tail { display: none; }

  /* Reserve room so the fixed bar never obstructs content, footer or map controls (contract F). */
  body { padding-bottom: calc(var(--aw-tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  .aw-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--band-bg); border-top: 1px solid var(--band-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .aw-tab {
    flex: 1 1 0; min-height: 48px; min-width: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px 2px; text-decoration: none;
    font-size: 12.5px; font-weight: 600; color: var(--band-ink-2);
  }
  .aw-tab:hover { color: var(--band-ink); }
  /* Active zone: aria-current (semantic) + weight + a top indicator bar — never colour alone. */
  .aw-tab[aria-current="page"] {
    color: var(--accent-bright); font-weight: 700;
    box-shadow: inset 0 3px 0 var(--accent-bright);
  }
  /* The global indigo focus ring is invisible on the dark bar — use the dark-surface signal colour. */
  .aw-tab:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: -3px; border-radius: 0; }

  /* Map decision sheet sits ABOVE the tab bar, never behind or across it (contract F): lift the
     fixed drawer by the bar height + safe-area so sheet actions and close stay fully reachable. */
  .mp-drawer { bottom: calc(var(--aw-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ---- /saved/ page ------------------------------------------------------------------------------ */
/* The Saved surface reuses the map list card components (mp-list / mp-card via map.css); only the
   page-specific states live here. */
.sv-count { font: 600 14px/1.5 var(--font); color: var(--ink-2); margin: 0 0 14px; }
.sv-note {
  font-size: 13.5px; color: var(--ink-2); background: var(--surface-tint);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 18px;
}
.sv-empty {
  border: 1px dashed var(--border-2); border-radius: var(--radius);
  background: var(--surface-tint); padding: 22px 18px; margin: 0 0 18px;
  font-size: 15px; color: var(--ink-2);
}
.sv-empty a { color: var(--indigo); font-weight: 600; }