/* Public website layout. Match the trail network frame: 1120px including
   20px side gutters. Keep text measures separate from the page frame. */
:root {
  --site-max-width: 1120px;
  --site-gutter: 20px;
  --site-content-width: calc(var(--site-max-width) - 2 * var(--site-gutter));
  --site-reading-width: 68ch;
}

/* Neutral placeholders never imply a verdict. Geometry follows the trail hero
   and tidal chart, with the same 1120px frame as the finished page. */
.navigation-loading{position:fixed;inset:0;z-index:10000;overflow:auto;background:#191f1a;color:#f3f6f2;font-family:'National Park',sans-serif}
.navigation-loading-inner{box-sizing:border-box;max-width:1120px;margin:0 auto;padding:64px 20px 40px}
.navigation-loading-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
.navigation-loading p{font-size:16px;margin:0}
.navigation-skeleton>div{position:relative;overflow:hidden;background:rgba(243,246,242,.07);border-radius:8px;margin-bottom:20px}
.navigation-skeleton>div:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(243,246,242,.07),transparent);transform:translateX(-100%);animation:navigation-shimmer 1.6s linear infinite}
.navigation-skeleton-title{height:56px;max-width:560px}
.navigation-skeleton-meta{height:18px;max-width:280px}
.navigation-skeleton-verdict{height:76px;max-width:360px;margin-top:40px}
.navigation-skeleton-chart{height:300px;margin-top:32px}
.navigation-loading button{min-height:44px;padding:10px 16px;border:1px solid rgba(243,246,242,.25);border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer;flex-shrink:0}
.navigation-loading button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.navigation-loading-paused .navigation-skeleton>div:after{animation-play-state:paused}
@keyframes navigation-shimmer{to{transform:translateX(100%)}}
@media(max-width:600px){.navigation-loading-inner{padding-top:40px}.navigation-skeleton-title{height:44px;width:85%}.navigation-skeleton-chart{height:260px}}
@media(prefers-reduced-motion:reduce){.navigation-skeleton>div:after{animation:none;display:none}}

.navigation-skeleton-row{height:76px}