/* Stage 21 brand checkpoint — canonical masthead on the validated shell.
 * iOS standalone safe-area ownership:
 * the app paints beneath the translucent status area while the masthead
 * reserves the real env(safe-area-inset-top) above its 92px visual band.
 * Bottom safe-area ownership belongs exclusively to the canonical shell.
 */
.brand-header,
.brand-header.compact,
.brand-header.track{
  box-sizing:border-box;
  height:calc(92px + env(safe-area-inset-top));
  min-height:calc(92px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 12px 0;
  justify-content:center;
  transition:none;
}
.brand-header .brand-lockup,
.brand-header.compact .brand-lockup,
.brand-header.track .brand-lockup{
  width:100%;
  height:92px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-header .brand-lockup img,
.brand-header.compact .brand-lockup img,
.brand-header.track .brand-lockup img{
  display:block;
  width:min(92vw,520px);
  max-width:100%;
  height:78px;
  max-height:78px;
  object-fit:contain;
  object-position:center center;
  transform:none;
}
.brand-header .brand-note{display:none!important}

/* Stage 21 Trail Marker Accent — selected state changes appearance only,
 * never geometry. */
.bottom-nav.stage16-six-tabs .nav-item{
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:transparent!important;
  color:color-mix(in srgb,var(--charcoal) 72%,var(--stone));
  -webkit-tap-highlight-color:transparent;
  outline:none;
  transition:none!important;
  font-size:11px!important;
  line-height:1.08;
}
.bottom-nav.stage16-six-tabs .nav-item:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 40%,transparent);
  outline-offset:2px;
}
.bottom-nav.stage16-six-tabs .nav-item::before{
  content:"";
  position:absolute;
  left:50%;
  pointer-events:none;
  opacity:0;
  z-index:0;
  transition:none!important;
  top:1px;
  width:42px;
  height:36px;
  transform:translateX(-50%);
  background:#255D3A;
  clip-path:polygon(50% 0,82% 12%,100% 30%,100% 100%,0 100%,0 30%,18% 12%);
  border-radius:18px 18px 5px 5px;
}
.bottom-nav.stage16-six-tabs .nav-item::after{content:none!important;display:none!important}
.bottom-nav.stage16-six-tabs .nav-item>.sd20-nav-slot,
.bottom-nav.stage16-six-tabs .nav-item>span:last-child{
  position:relative;
  z-index:1;
}
.bottom-nav.stage16-six-tabs .nav-item.is-active,
.bottom-nav.stage16-six-tabs .nav-item[aria-current="page"]{
  background:transparent!important;
  color:var(--accent)!important;
}
.bottom-nav.stage16-six-tabs .nav-item.is-active::before,
.bottom-nav.stage16-six-tabs .nav-item[aria-current="page"]::before{opacity:1}
.bottom-nav.stage16-six-tabs .nav-item.is-active>.sd20-nav-slot,
.bottom-nav.stage16-six-tabs .nav-item[aria-current="page"]>.sd20-nav-slot{color:#fff!important}
.bottom-nav.stage16-six-tabs .nav-item.is-active>span:last-child,
.bottom-nav.stage16-six-tabs .nav-item[aria-current="page"]>span:last-child{color:var(--accent)!important}
.bottom-nav.stage16-six-tabs .sd20-nav-slot{
  width:30px;
  height:30px;
  font-size:20px!important;
}
.bottom-nav.stage16-six-tabs .nav-item>span:first-child.sd20-nav-slot{font-size:20px!important}

/* Stage 21 Trail Detail key facts.
 * One component owns this surface: equal adaptive columns, a single centered
 * header rail and a single centered value rail, matching the visual discipline
 * of the Explore card while allowing icon-only Difficulty and Route. */
.trail-detail__head .page-title{margin-bottom:6px!important}
.trail-detail__location{
  margin:0;
  color:var(--stone);
  font-size:13px;
  font-weight:650;
  line-height:1.4;
}
.trail-detail__location + .trail-subline{margin-top:5px}
.trail-detail .stat-row--detail{
  display:grid!important;
  align-items:stretch!important;
  gap:0!important;
  padding:0!important;
  overflow:hidden;
  border:1px solid var(--divider)!important;
  border-radius:18px!important;
  background:var(--card);
}
.trail-detail .stat-row--detail.stat-row--4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.trail-detail .stat-row--detail.stat-row--3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.trail-detail .stat-row--detail.stat-row--2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.trail-detail .stat-row--detail.stat-row--1{grid-template-columns:1fr!important}
.trail-detail .stat-row--detail>.detail-stat{
  box-sizing:border-box;
  min-width:0;
  height:80px;
  padding:7px 8px 8px;
  display:grid!important;
  grid-template-rows:26px 30px;
  align-content:center;
  justify-items:center;
  text-align:center;
  position:relative;
}
.trail-detail .stat-row--detail>.detail-stat+.detail-stat::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:1px;
  background:var(--divider);
}
.trail-detail .stat-row--detail .stat-label{
  box-sizing:border-box;
  width:100%;
  height:26px;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  text-align:center!important;
  color:color-mix(in srgb,var(--text) 60%,var(--stone));
  font-size:9px!important;
  font-weight:780;
  line-height:1;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}
.trail-detail .detail-stat__value{
  box-sizing:border-box;
  width:100%;
  height:30px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-width:0;
}
.trail-detail .detail-stat__value .stat-value{
  display:block;
  width:100%;
  margin:0;
  text-align:center!important;
  color:var(--text);
  font-size:16px!important;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.trail-detail .difficulty{
  width:100%;
  height:30px;
  margin:0;
  display:flex!important;
  align-items:center;
  justify-content:center;
  min-height:0!important;
}
.trail-detail .difficulty--icon-only .peaks{
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  transform:scale(1.40);
  transform-origin:center;
}
.trail-detail .difficulty-text{display:none!important}
.route-type-stat{color:var(--accent)}
.route-type-value{
  width:100%;
  height:30px;
  margin:0;
  display:flex!important;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  line-height:1;
}
.route-type-icon{
  display:block;
  flex:0 0 auto;
  width:41px;
  height:26px;
  overflow:visible;
}
.route-type-icon circle{stroke:none}
.route-type-icon path{fill:none}
.route-type-stat--out-back .route-type-icon{width:45px}
.route-type-stat--point-connector .route-type-icon{width:42px}
.route-type-stat--figure-eight .route-type-icon{width:43px}
.route-type-stat--network .route-type-icon{width:40px}

@media(max-width:430px){
  .brand-header,
  .brand-header.compact,
  .brand-header.track{padding-left:10px;padding-right:10px}
  .brand-header .brand-lockup img,
  .brand-header.compact .brand-lockup img,
  .brand-header.track .brand-lockup img{
    width:min(92vw,410px);
    height:76px;
    max-height:76px;
  }
  .bottom-nav.stage16-six-tabs .nav-item{padding-inline:1px;font-size:10.75px!important}
  .bottom-nav.stage16-six-tabs .sd20-nav-slot{width:29px;height:29px;font-size:20px!important}
  .bottom-nav.stage16-six-tabs .nav-item>span:first-child.sd20-nav-slot{font-size:20px!important}
  .trail-detail__location{font-size:12.5px}
  .trail-detail .stat-row--detail{border-radius:17px!important}
  .trail-detail .stat-row--detail>.detail-stat{
    height:78px;
    padding:6px 5px 7px;
    grid-template-rows:25px 29px;
  }
  .trail-detail .stat-row--detail>.detail-stat+.detail-stat::before{top:10px;bottom:10px}
  .trail-detail .stat-row--detail .stat-label{
    height:25px;
    font-size:8.5px!important;
    letter-spacing:.035em;
  }
  .trail-detail .detail-stat__value,
  .trail-detail .difficulty,
  .route-type-value{height:29px}
  .trail-detail .detail-stat__value .stat-value{font-size:15px!important}
  .trail-detail .difficulty--icon-only .peaks{transform:scale(1.38)}
  .route-type-icon{width:39px;height:25px}
  .route-type-stat--out-back .route-type-icon{width:43px}
  .route-type-stat--point-connector .route-type-icon{width:40px}
  .route-type-stat--figure-eight .route-type-icon{width:41px}
  .route-type-stat--network .route-type-icon{width:38px}
}

@media(max-width:360px){
  .trail-detail .stat-row--detail>.detail-stat{padding-inline:4px}
  .trail-detail .stat-row--detail .stat-label{font-size:8px!important;letter-spacing:.02em}
  .trail-detail .detail-stat__value .stat-value{font-size:14px!important}
  .trail-detail .stat-row--detail .peak{width:9px}
  .route-type-icon{width:37px;height:24px}
  .route-type-stat--out-back .route-type-icon{width:41px}
}

@media(prefers-reduced-motion:reduce){
  .bottom-nav.stage16-six-tabs .nav-item,
  .bottom-nav.stage16-six-tabs .nav-item::before{transition:none!important}
}