/* #region zone:flights.style-detail-phone — หน้ารายละเอียดบนมือถือ: แถบบนติดหัวจอ การ์ดสรุปก่อน ลูกโลกพอดีจอ ปุ่มแถวเดียว */
.foot-short {
  display: none;
}
@media (max-width: 760px) {
  /* The page header becomes a compact sticky bar: back, flight number, status. It respects the notch/safe areas and
     never scrolls away, so the title cannot end up half-hidden under the in-app browser's toolbar. */
  body[data-view='detail'] .wrap {
    gap: var(--space-4);
  }
  body[data-view='detail'] .top {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    margin-top: -24px;
    margin-left: calc(-1 * max(var(--u-space-4), env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(var(--u-space-4), env(safe-area-inset-right, 0px)));
    padding: calc(var(--u-space-2) + env(safe-area-inset-top, 0px))
      max(var(--u-space-4), env(safe-area-inset-right, 0px)) var(--u-space-2)
      max(var(--u-space-4), env(safe-area-inset-left, 0px));
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  body[data-view='detail'] .top-actions {
    order: -1;
  }
  body[data-view='detail'] .brand-mark,
  body[data-view='detail'] .brand-name,
  body[data-view='detail'] #subtitle,
  body[data-view='detail'] #set-passcode,
  body[data-view='detail'] #sign-out {
    display: none;
  }
  body[data-view='detail'] .top h1 {
    font-size: 1.125rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-view='detail'] #back {
    width: 44px;
    padding: 0;
  }
  body[data-view='detail'] .back-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body[data-view='detail'] .top-status {
    display: inline-flex;
    padding: 6px var(--u-space-3);
  }
  .summary {
    padding: var(--space-4);
    gap: var(--space-3);
  }
  .sum-head #d-status {
    display: none;
  }
  .sum-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .route b {
    font-size: 1.375rem;
  }
  .times b {
    font-size: 1.375rem;
  }
  /* Globe: a sensible phone height, then one toolbar row, the legend and the numbers in normal flow. */
  .hero {
    height: auto;
    display: grid;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
  }
  .stage {
    position: relative;
    inset: auto;
    height: clamp(260px, 78vw, 340px);
  }
  .globe-info {
    top: 16px;
    right: 16px;
    bottom: auto;
  }
  .hero .globe-info .globe-legend {
    top: 52px;
    bottom: auto;
  }
  .age {
    left: 10px;
    top: 10px;
  }
  .globe-tools {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 var(--space-3);
  }
  .view-switch {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--u-space-2);
    padding: 3px;
    border: 1px solid var(--control-line);
    border-radius: var(--u-radius-pill);
    background: var(--panel);
  }
  .view-switch .btn {
    border-color: transparent;
    background: transparent;
    padding: 6px 10px;
    white-space: nowrap;
  }
  .view-switch .btn[aria-pressed='true'] {
    background: var(--accent-primary);
    color: var(--on-accent);
  }
  .tools-more {
    display: inline-grid;
    flex: none;
  }
  .tools-more .flight-icon {
    transition: transform 160ms ease;
  }
  .tools-more[aria-expanded='true'] .flight-icon {
    transform: rotate(180deg);
  }
  .tool-icons {
    display: none;
  }
  .tools-more[aria-expanded='true'] + .tool-icons {
    display: flex;
    flex: 1 0 100%;
    justify-content: space-between;
  }
  .globe-legend {
    position: static;
    margin: 0 var(--space-3);
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .panel {
    padding: var(--space-4);
  }
}
@media (max-width: 359px) {
  .view-switch .flight-icon {
    display: none;
  }
}
@media (max-width: 600px) {
  .foot-long {
    display: none;
  }
  .foot-short {
    display: inline;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tools-more .flight-icon {
    transition: none;
  }
}
/* #endregion */