/* Native names wrap at their original size; GARAGE sets the docked ceiling. */
#detail-sheet { --detail-header-title-size:5vw; }
:is(body, body:has(#theme-toggle-input:checked)) #detail-sheet::before { content:''; }
#detail-sheet .detail-title-garage {
  position:absolute; top:0; left:26.8vw; height:72px; z-index:30;
  display:flex; align-items:center; pointer-events:none; user-select:none;
  font-family:var(--font-display); font-size:var(--detail-header-title-size); font-weight:700; line-height:1;
  letter-spacing:-.035em; color:var(--decorative-strong, #b5b5ae);
}
#detail-sheet .detail-title-slot {
  position:absolute; top:0; left:26.8vw; width:calc(73.2vw - 24px); height:72px;
  visibility:hidden; pointer-events:none;
}
#detail-sheet .detail-title-flight {
  position:absolute; left:0; top:0; z-index:30; margin:0; padding:0;
  transform-origin:0 0; pointer-events:none; user-select:none;
  font-family:var(--font-display); font-weight:700; line-height:1;
  overflow:visible; white-space:normal; overflow-wrap:normal; word-break:normal;
  text-align:start; hyphens:none;
  /* The moving vehicle name remains readable when it docks in the header. */
  color:var(--muted, #5e5e56);
  color:color-mix(in srgb, var(--ink), var(--muted, #5e5e56) var(--detail-title-gray-share, 0%));
}
#detail-sheet .detail-title-flight[hidden] { display:none!important; }
#detail-sheet .detail-title-flight.is-moving { will-change:transform; }
#detail-sheet .detail-title-fragment {
  position:absolute; left:0; top:0; margin:0; padding:0;
  white-space:pre; overflow:visible; transform-origin:0 0;
}
#detail-sheet .detail-title-measure {
  position:absolute; left:-100000px; top:0; width:max-content; margin:0; padding:0;
  visibility:hidden; pointer-events:none; user-select:none;
  white-space:nowrap; overflow-wrap:anywhere; word-break:normal; hyphens:none;
}
/* Opacity preserves the accessible h1's natural layout during flight. No
   transition in either direction may leak a delayed second title layer. */
#detail-sheet #detail-heading {
  transition:none!important; white-space:normal; overflow-wrap:anywhere;
  word-break:normal; hyphens:none; overflow:visible;
}
#detail-sheet #detail-heading.detail-title-is-migrating { opacity:0!important; transition:none!important; }
/* The mouse-tracking BACK label crosses the title without painting a box. */
:is(body, body:has(#theme-toggle-input:checked)) #detail-sheet > #detail-back {
  background:transparent; box-shadow:none;
}
@media (max-width:700px), (orientation:portrait) and (max-width:1100px) {
  #detail-sheet { --portrait-header-height:calc(104px + env(safe-area-inset-top, 0px)); --detail-header-title-size:32px; }
  #detail-sheet .detail-title-slot {
    left:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    right:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    width:auto; height:44px;
    top:calc(56px + env(safe-area-inset-top, 0px));
  }
  #detail-sheet .detail-title-garage {
    left:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    right:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    justify-content:center; height:44px;
    top:calc(56px + env(safe-area-inset-top, 0px)); letter-spacing:0;
  }
  :is(body, body:has(#theme-toggle-input:checked)) #detail-sheet > #detail-back { background:var(--paper); }
}
@media (prefers-reduced-motion:reduce) {
  #detail-sheet .detail-title-flight { will-change:auto; }
}