/* ============ Search overlay + mobile tab bar ============ */
.searchbox{position:fixed;inset:0;z-index:900;display:flex;align-items:flex-start;justify-content:center}
.searchbox[hidden]{display:none!important}
.searchbox-backdrop{position:absolute;inset:0;background:rgba(24,36,32,.52);backdrop-filter:blur(3px)}
.searchbox-panel{position:relative;width:min(620px,92vw);margin-top:12vh;background:#fffdf7;border:1px solid rgba(32,63,57,.2);border-radius:18px;box-shadow:0 30px 70px -30px rgba(20,36,31,.75);padding:18px 18px 14px}
.searchbox-panel input{width:100%;box-sizing:border-box;font:inherit;font-size:1.06rem;padding:13px 15px;border:1px solid rgba(32,63,57,.28);border-radius:12px;background:#f6f1e6;color:#1d2b25}
.searchbox-panel input:focus-visible{outline:2px solid #203f39;outline-offset:2px}
.searchbox-status{margin:10px 2px 6px;font-size:.8rem;color:#6b7a70}
.searchbox-results{list-style:none;margin:0;padding:0;max-height:46vh;overflow:auto}
.searchbox-results li a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:10px;text-decoration:none;color:inherit;min-height:44px;box-sizing:border-box}
.searchbox-results li.is-active a{background:#eae2cd}
.sr-name{font-size:.97rem;line-height:1.45}
.sr-kind{flex:0 0 auto;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#8a7a5e}
.searchbox-hint{margin:10px 2px 0;font-size:.74rem;color:#8a9791}
body.searchbox-open{overflow:hidden}

/* Header actions */
.header-tools{display:flex;align-items:center;gap:8px}
.icon-button{position:relative;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(32,63,57,.24);border-radius:11px;background:transparent;color:inherit;cursor:pointer;text-decoration:none}
.icon-button:hover,.icon-button:focus-visible{border-color:rgba(32,63,57,.5);background:rgba(32,63,57,.05)}
.icon-button .ib-glyph{font-size:1rem;line-height:1}
.icon-button .qs-badge{top:-6px;right:-6px}

/* Mobile tab bar */
.tabbar{display:none}
@media (max-width:900px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:800;display:grid;grid-template-columns:repeat(4,1fr);
    background:#fffdf7;border-top:1px solid rgba(32,63,57,.18);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 22px -18px rgba(20,36,31,.7)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;border:0;background:transparent;color:#3c4a43;font:inherit;font-size:.72rem;text-decoration:none;cursor:pointer;position:relative}
  .tabbar [aria-current="page"]{color:#203f39;font-weight:700}
  .tabbar .tb-glyph{font-size:1.08rem;line-height:1}
  .tabbar .qs-badge{top:2px;right:calc(50% - 22px);position:absolute}
  body{padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){.searchbox-backdrop{backdrop-filter:none}}

/* Auto-harvested news rows */
.news-sum{font-size:.84rem;line-height:1.6;color:#55625a}
.news-auto-tag{align-self:flex-start;font-size:.68rem;letter-spacing:.07em;padding:2px 8px;border-radius:999px;background:#efe6cd;color:#7a6234;border:1px solid rgba(122,98,52,.28)}
.news-row.is-auto .news-date{color:#7a6234}

/* ============ Directory entries added by research ============ */
.shop-extra > span:last-child{display:flex;flex-direction:column;gap:5px;min-width:0}
.shop-note{font-size:.86rem;line-height:1.6;color:#4c574f}
.shop-meta{font-size:.79rem;color:#7a8880}
.shop-nav,.shop-src{font-size:.76rem;width:fit-content}
.shop-nav{color:#203f39;text-decoration:underline;text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}
.shop-src{color:#8a7a5e;letter-spacing:.04em}
a.shop-src:hover{color:#a3492f}
.shop-warn{font-size:.72rem;padding:2px 8px;border-radius:999px;background:#f3e6d6;color:#8a5a29;width:fit-content}
.shop-list li.shop-extra{padding-top:12px;padding-bottom:12px}
@media (max-width:600px){
  .shop-extra > span:last-child{gap:6px}
  .shop-nav{min-height:44px}
}

/* ============ Header that survives a nine-item menu ============ */
.nav-toggle{display:none;place-items:center;width:42px;height:42px;border:1px solid rgba(32,63,57,.24);border-radius:11px;background:transparent;color:inherit;cursor:pointer;font:inherit}
.nav-toggle .ib-glyph{font-size:1.05rem;line-height:1}
.site-header{gap:14px}
.site-header nav{display:flex;flex-wrap:wrap;gap:2px 16px;min-width:0}
@media (max-width:1180px){
  .site-header nav a{font-size:.92rem}
  .site-header nav{gap:2px 12px}
}
@media (max-width:1040px){
  .site-header .header-map{display:none}
}
@media (max-width:900px){
  /* The bottom tab bar carries navigation on small screens, so the top menu
     collapses into a disclosure instead of scrolling off the edge. */
  .site-header nav{
    position:absolute;left:0;right:0;top:100%;z-index:700;
    flex-direction:column;gap:0;align-items:stretch;
    background:#fffdf7;border-bottom:1px solid rgba(32,63,57,.18);
    box-shadow:0 18px 30px -24px rgba(20,36,31,.8);
    padding:6px 18px 12px;max-height:70vh;overflow:auto;
  }
  .site-header nav[hidden]{display:none}
  .site-header nav a{padding:13px 4px;min-height:46px;display:flex;align-items:center;border-bottom:1px solid rgba(32,63,57,.1)}
  .site-header nav a:last-child{border-bottom:0}
  .site-header{position:relative}
  .nav-toggle{display:grid}
}

/* ============ Touch targets ============ */
/* Standalone action links need a real tap area on a phone. Links inside running
   text are left alone: padding them out would break the line rhythm, and
   inline links are exempt from the minimum target size anyway. */
@media (max-width:900px){
  a.text-link,
  a.news-out,
  a.shop-nav,
  a.index-link,
  .story-place-links a,
  .route-jumps a,
  .card-go{
    display:inline-flex;align-items:center;min-height:44px;
  }
  a.shop-src{display:inline-flex;align-items:center;min-height:36px}
  .maplibregl-ctrl button{width:36px;height:36px}
}
@media (max-width:900px){
  /* Place names sit inside the news meta line, so they get a taller hit area
     without becoming block elements that would break the sentence. */
  .news-meta a{display:inline-block;padding:6px 0;line-height:1.4}
  .news-row{padding:16px 0}
}
