/* Useful archive navigation replaces the repeated picture/stat card. */
.detail-archive-nav { margin-top:28px; border-top:1px solid var(--line); color:var(--ink); }
.detail-archive-nav h2 { font-size:12px; font-weight:600; margin:16px 0; }
.detail-archive-nav .detail-league { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 14px; color:var(--muted); font-size:12px; }
.vehicle-league { display:inline-flex; gap:8px; align-items:center; color:var(--ink); vertical-align:middle; }
.vehicle-league .league-badge { --league-badge-size:28px; flex-shrink:0; }
.detail-archive-nav .vehicle-league { font-size:20px; }
.detail-archive-nav .league-badge { --league-badge-size:54px; }
.detail-archive-nav > button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:12px 0; border-top:1px solid var(--line); font-size:14px; color:var(--ink); text-align:left; }
.detail-archive-nav > button:hover { color:var(--muted); }
.detail-archive-nav > button:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
#detail-performance,#detail-story,#detail-sources { scroll-margin-top:88px; }
@media (max-width:700px), (orientation:portrait) and (max-width:1100px) {
  .detail-archive-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px; }
  .detail-archive-nav h2,.detail-archive-nav .detail-league { grid-column:1/-1; }
  .detail-archive-nav > button { font-size:12px; align-items:center; }
  .detail-archive-nav .league-badge { --league-badge-size:38px; }
  .detail-archive-nav .vehicle-league { font-size:16px; }
}
/* Coarse/hybrid landscape devices have no mouse location to reveal controls.
   Keep the real route buttons in each sheet, clear of the theme switch. */
@media (any-pointer:coarse) and (min-width:701px) and (orientation:landscape) {
  :is(body,body:has(#theme-toggle-input:checked)) .sheet > .vertical-close,
  :is(body,body:has(#theme-toggle-input:checked)) .ranking-sheet > .vertical-close,
  :is(body,body:has(#theme-toggle-input:checked)) .detail-sheet > #detail-back {
    left:auto!important; right:max(160px,env(safe-area-inset-right))!important;
    top:max(12px,env(safe-area-inset-top))!important; transform:none!important;
    writing-mode:horizontal-tb; direction:ltr; min-height:44px; padding:10px 14px;
    background:var(--paper); border:1px solid var(--line); color:var(--ink);
    opacity:1; mix-blend-mode:normal; z-index:40; font-size:13px;
  }
  .sheet > .vertical-close span { display:inline; margin:0 0 0 8px; }
  :is(body,body:has(#theme-toggle-input:checked)) #compare-close {
    left:max(16px,env(safe-area-inset-left))!important; right:auto!important;
    top:max(12px,env(safe-area-inset-top))!important;
    transform:none!important; translate:none; animation:none!important; min-height:44px; padding:10px 14px;
    border:1px solid var(--line); background:var(--paper); color:var(--ink);
    z-index:73; font-size:13px; mix-blend-mode:normal;
  }
  #compare-close span { margin-left:8px; }
  .sheet-scroll { scroll-padding-top:72px; }
  .edge-sheet > .sheet-scroll { padding-top:72px; }
  .compare-top { padding-top:76px; }
}
@media (any-pointer:coarse) and (min-width:701px) and (orientation:landscape) and (max-height:560px) {
  .detail-visual { position:static; }
}