/* 20261002layout1 — layout batch for the Alaska home (index.html) and Bahamas directory (bahamas.html).
   Loaded after styles.css. Since 20261002ux3 also loaded by village.html and bahamas-airport.html (section 7).
   1 map hero · 2 legend chip · 3 map controls stack · 4 compact feedback pill · 5 slim top bar · 6 phone cards */

/* ---------- 5. Slim top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1100;
  display: flex; align-items: center; gap: 10px 14px;
  min-height: 56px; padding: 8px max(16px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgb(250 245 236 / 96%);
  backdrop-filter: blur(8px);
  color: var(--navy);
}
.topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--navy); text-decoration: none; }
.topbar-brand .brand-logo { width: 38px; height: 38px; }
.topbar-brand strong { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.topbar-brand small { display: block; color: var(--slate); font-size: .72rem; line-height: 1.2; white-space: nowrap; }
.territory-switch { display: inline-flex; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.territory-switch a { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; border-radius: 999px; color: var(--navy); font-size: .86rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.territory-switch a:hover { background: var(--sky); }
.territory-switch a[aria-current="page"] { color: #fff; background: var(--navy); }
.topbar-menu-btn { display: none; margin-left: auto; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); background: #fff; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.topbar-menu-btn[aria-expanded="true"] { border-color: var(--navy); background: var(--sky); }
.topbar-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.topbar-links .button { min-height: 36px; padding: 6px 10px; border-color: transparent; background: transparent; font-size: .86rem; white-space: nowrap; }
.topbar-links .button:hover, .topbar-links .button:focus-visible { border-color: var(--line); background: #fff; }
.topbar-links #logout, .topbar-links #bahamas-logout, .topbar-links .topbar-logout { margin-left: 6px; border-color: var(--line); background: #fff; }
#directory-title, #bahamas-directory-title { scroll-margin-top: 104px; }
#airport-directory { scroll-margin-top: 64px; }

@media (max-width: 1023px) {
  .topbar { flex-wrap: nowrap; padding-inline: 12px; }
  .topbar-brand small { display: none; }
  .topbar-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
  .topbar-links {
    position: absolute; top: calc(100% + 6px); right: 10px; z-index: 1101;
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    width: min(280px, calc(100vw - 20px)); margin: 0; padding: 8px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
    box-shadow: 0 18px 44px rgb(11 37 64 / 20%);
  }
  .topbar.is-open .topbar-links { display: flex; }
  .topbar-links .button { justify-content: flex-start; min-height: 44px; width: 100%; padding: 8px 12px; font-size: .92rem; }
  .topbar-links #logout, .topbar-links #bahamas-logout, .topbar-links .topbar-logout { margin: 4px 0 0; }
}
/* 20261002ux5 — one more top-bar link (Trip planner): between 1024 and 1199 px show the logo only, as on phones,
   so the Alaska / Bahamas switch never covers the site name. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .topbar-brand strong, .topbar-brand small { display: none; }
}
@media (max-width: 520px) {
  .topbar { gap: 8px; padding-inline: 10px; }
  .topbar-brand strong { display: none; }  /* logo only; the switcher says where you are */
  .topbar-brand .brand-logo { width: 36px; height: 36px; }
  .territory-switch a { padding: 4px 12px; }
  .topbar-menu-btn .topbar-menu-label { display: none; }
  .topbar-menu-btn { min-width: 44px; justify-content: center; }
}

/* ---------- 1. Map is the hero ---------- */
.intro.intro-compact { align-items: center; gap: 12px 28px; padding-block: 18px 16px; }
.intro.intro-compact h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.intro.intro-compact .eyebrow { margin-bottom: 6px; }
.intro.intro-compact .stats > div { padding: 10px 16px; }
.intro.intro-compact .stats strong { font-size: 1.4rem; }
.map-section.map-hero { padding-bottom: 28px; }
.map-hero .map-wrap { isolation: isolate; }
#map, #bahamas-map {
  height: 65vh;                                   /* fallback for browsers without svh */
  height: clamp(320px, 65svh, 860px);
  min-height: 0;
}
.map-notes { margin-top: 14px; margin-bottom: 0; align-items: start; }
.map-notes.map-notes--above { margin-top: 0; margin-bottom: 14px; } /* 20261002ux2 — Alaska heading above the map */
.map-notes h2 { font-size: clamp(1.1rem, 2vw, 1.35rem) !important; }
.map-notes .map-notes-copy { max-width: 640px; }
.map-notes .map-notes-copy p { margin: 0 0 6px; color: var(--muted); font-size: .9rem; line-height: 1.55; text-align: right; }
@media (max-width: 980px) {
  .map-notes { display: block; }
  .map-notes .map-notes-copy { margin-top: 6px; }
  .map-notes .map-notes-copy p { text-align: left; }
}
@media (max-width: 980px) and (min-width: 681px) {
  #map, #bahamas-map { min-height: 0; height: 65vh; height: clamp(320px, 65svh, 860px); }
}
@media (max-width: 680px) {
  .intro.intro-compact { padding-block: 12px 12px; gap: 10px; }
  .intro.intro-compact h1 { font-size: 1.5rem; }
  .intro.intro-compact .eyebrow { font-size: .62rem; margin-bottom: 4px; }
  .intro.intro-compact .stats > div { padding: 8px; }
  .intro.intro-compact .stats strong { font-size: 1.2rem; }
  #map, #bahamas-map { min-height: 0; height: 62vh; height: clamp(300px, 62svh, 720px); }
  .map-notes .map-notes-copy p { text-align: left; }
}

/* ---------- 2. Legend: small chip, expands on tap ---------- */
.map-legend { top: 10px; right: 10px; width: auto; max-width: min(280px, calc(100% - 20px)); border-radius: 999px; }
.map-legend summary { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 14px; font-size: .84rem; font-weight: 800; list-style: none; user-select: none; }
.map-legend summary::-webkit-details-marker { display: none; }
.map-legend summary::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(var(--green) 0 33%, var(--amber, #D98E04) 0 66%, var(--red) 0); flex: 0 0 9px; }
.map-legend summary::after { content: '▾'; font-size: .8rem; color: var(--slate); }
.map-legend[open] { width: min(280px, calc(100% - 20px)); border-radius: var(--radius); max-height: calc(100% - 84px); overflow: auto; }
.map-legend[open] summary::after { content: '✕'; margin-left: auto; }
.map-legend[open] p { margin: 9px 0; font-size: .84rem; }
@media (max-width: 680px) {
  .map-legend { top: 8px; right: 8px; }
  .map-legend[open] { width: min(240px, calc(100% - 70px)); max-height: calc(100% - 96px); }
  .map-legend[open] > div { padding: 0 12px 10px; }
  .map-legend[open] p { margin: 7px 0; font-size: .8rem; }
}

/* ---------- 3. Map controls: hub chip is a Leaflet control; the layers box stacks above it ---------- */
.leaflet-control.map-chip-toggle { position: relative; left: auto; bottom: auto; z-index: auto; float: left; clear: both; }
#map .leaflet-control-layers { margin-bottom: 8px; }
#map .leaflet-bottom.leaflet-left .leaflet-control { margin-left: 10px; }
#map .leaflet-control-layers-expanded { padding: 5px 10px 5px 8px; }
@media (min-width: 681px) {
  /* tablet/desktop: layers box and hub chip side by side in one row (less map covered); phone: stacked */
  #map .leaflet-bottom.leaflet-left .leaflet-control { clear: none; margin-bottom: 10px; }
}
@media (max-width: 680px) {
  #map .leaflet-control-layers { font-size: .78rem; }
}

/* ---------- 4. Feedback: compact pill bottom-left (feedback-widget.js unchanged; assets/layout.js adds the toggle) ---------- */
.sw-fb-root.sw-fb-compact { left: 10px; right: auto; bottom: 10px; }
.sw-fb-root.sw-fb-compact .sw-fb-launcher { gap: 4px; padding: 3px; background: rgb(11 41 72 / 86%); box-shadow: 0 6px 16px rgb(11 41 72 / 24%); }
.sw-fb-root.sw-fb-compact .sw-fb-launcher button { width: 34px; height: 34px; font-size: 1rem; }
.sw-fb-root.sw-fb-compact .sw-fb-toggle { color: #fff; background: transparent; font-size: .95rem; }
.sw-fb-root.sw-fb-compact .sw-fb-toggle:hover, .sw-fb-root.sw-fb-compact .sw-fb-toggle:focus-visible { background: rgb(255 255 255 / 16%); outline: none; }
.sw-fb-root.sw-fb-compact:not(.is-open) #sw-fb-up,
.sw-fb-root.sw-fb-compact:not(.is-open) #sw-fb-down { display: none; }
.sw-fb-root.sw-fb-compact:not(.is-open) .sw-fb-launcher { opacity: .9; }
.sw-fb-root.sw-fb-compact .sw-fb-launcher { width: max-content; }
.sw-fb-compact-page .site-footer { padding-bottom: 54px; }
@media (max-width: 420px) {
  .sw-fb-root.sw-fb-compact { left: 8px; bottom: 8px; }
  .sw-fb-root.sw-fb-compact .sw-fb-launcher button { width: 36px; height: 36px; }
}

/* ---------- 6. Directory: table on tablet/desktop, cards on phones ---------- */
.t-cards { display: none; margin: 0; padding: 0; list-style: none; }
@media (min-width: 641px) and (max-width: 1023px) {
  /* fit the table in the page at tablet widths (no sideways scrolling) */
  .directory .table-scroll > table, .bahamas-table { min-width: 0; }
  .directory td { padding: 10px 8px; font-size: .86rem; }
  .directory th button { padding: 10px 8px; font-size: .8rem; }
  .directory .row-actions { flex-wrap: nowrap; gap: 4px; }
  .directory .row-actions a, .directory .row-actions button { min-height: 34px; padding: 5px 7px; font-size: .8rem; }
  .directory th button { white-space: normal; line-height: 1.2; }
  .directory td:first-child { min-width: 150px; }
  .directory td .status-chip { white-space: normal; }
}
@media (max-width: 640px) {
  .directory .table-scroll { display: none; }
  .t-cards { display: grid; gap: 8px; }
  .t-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 64px; padding: 12px 12px 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 8px; background: #fff; box-shadow: 0 4px 14px rgb(11 41 72 / 6%); cursor: pointer; }
  .t-card.is-worked { border-left-color: var(--green); }
  .t-card.is-stale { border-left-color: var(--amber, #D98E04); }
  .t-card:active, .t-card:focus-visible { background: var(--sky); }
  .t-card-name { display: block; color: var(--navy); font-weight: 700; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
  .t-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; color: var(--muted); font-size: .8rem; }
  .t-card-side { display: flex; align-items: center; gap: 8px; }
  .t-card-code { padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--navy); background: #f4f7fa; font-family: var(--font-data); font-size: .8rem; font-weight: 600; }
  .t-card-side [data-edit] { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--navy); background: #fff; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
  .t-card-arrow { color: var(--turquoise); font-size: 1.4rem; line-height: 1; }
}


/* ---------- 7. Profile pages (village.html, bahamas-airport.html) on the directory look — 20261002ux3 ---------- */
.profile-page.has-topbar .profile-shell { width: min(1040px, calc(100% - 40px)); padding-top: 14px; }
.profile-crumbs { margin: 0 0 6px; font-size: .86rem; }
.profile-crumbs a { display: inline-flex; align-items: center; min-height: 36px; color: var(--navy); font-weight: 700; text-decoration: none; }
.profile-crumbs a:hover, .profile-crumbs a:focus-visible { text-decoration: underline; }
.profile-hero.profile-hero--compact { margin-bottom: 20px; }
.profile-hero--compact .eyebrow { margin-bottom: 6px; }
.profile-hero--compact h1 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.08; }
.profile-hero--compact .status-pill { margin: 0 0 12px; }
.profile-hero--compact .fact-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); box-shadow: 0 8px 24px rgb(11 41 72 / 7%); }
.profile-hero--compact .fact-strip div { min-width: 0; padding: 10px 14px; background: #fff; }
.profile-hero--compact .fact-strip { margin-top: 0; }
.profile-hero--compact .fact-strip dt { font-family: var(--font-data); font-size: .68rem; letter-spacing: .02em; }
.profile-hero--compact .fact-strip dd { font-family: var(--font-data); font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.profile-hero--compact .hero-actions { margin-top: 14px; }
.profile-page.has-topbar .profile-card { border-radius: var(--radius); }
@media (max-width: 680px) {
  .profile-page.has-topbar .profile-shell { width: min(100% - 20px, 1040px); padding-top: 8px; }
  .profile-hero--compact h1 { font-size: 1.5rem; }
  .profile-hero--compact .eyebrow { font-size: .62rem; margin-bottom: 4px; }
  .profile-hero--compact .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-hero--compact .fact-strip div { min-width: 0; padding: 8px 10px; }
  .profile-hero--compact .fact-strip dd { font-size: .92rem; }
  .profile-hero--compact .fact-strip div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}