/* Actual phone browsers: use their visible viewport and keep both source layers readable. */
@media (max-width: 600px) {
  html, body {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background: #080b10;
  }

  .desktop-backdrop {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .ambient, .product-note, .phone-speaker { display: none; }

  .phone-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .app, .screen, .feed { height: 100%; }
  .app { border-radius: 0; }
  .feed { overscroll-behavior-y: contain; }
  .news-card { height: 100%; min-height: 100%; }

  .topbar {
    height: calc(68px + env(safe-area-inset-top));
    padding-top: calc(16px + env(safe-area-inset-top));
  }

  .top-actions { top: calc(18px + env(safe-area-inset-top)); }
  .feed-tabs { top: calc(61px + env(safe-area-inset-top)); }
  .live-status-bar { top: calc(99px + env(safe-area-inset-top)); }
  .count-chip { top: calc(105px + env(safe-area-inset-top)); }
  .headline-card:before { top: calc(160px + env(safe-area-inset-top)); }

  .compact-gov-chart {
    margin-top: calc(138px + env(safe-area-inset-top));
  }

  .headline-content {
    top: 45%;
    left: 18px;
    right: 18px;
    max-height: calc(100dvh - 385px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-bottom: 6px;
  }

  .headline-content h2 {
    font-size: clamp(23px, 7.2vw, 29px);
    line-height: 1.08;
  }

  .headline-content h3 { font-size: 10px; }
  .headline-content > p { -webkit-line-clamp: 3; }

  .bottom-nav {
    height: calc(var(--nav) + env(safe-area-inset-bottom));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .secondary-source-button {
    bottom: calc(var(--nav) + 8px + env(safe-area-inset-bottom));
    height: 78px;
    padding: 10px 13px;
    align-items: center;
  }

  .secondary-source-button span { min-width: 0; padding-right: 10px; }
  .secondary-source-button small,
  .secondary-source-button b,
  .secondary-source-button em { display: block; }
  .secondary-source-button b {
    margin-top: 4px;
    font: 750 10px/1.24 Manrope;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .secondary-source-button em {
    margin-top: 4px;
    color: #8996a3;
    font: 600 7px Manrope;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .secondary-source-button strong { flex: 0 0 27px; }

  .secondary-source-drawer {
    bottom: calc(var(--nav) + 94px + env(safe-area-inset-bottom));
    max-height: 0;
  }
  .secondary-source-drawer.open { max-height: 225px; }

  .no-second-source {
    bottom: calc(var(--nav) + 8px + env(safe-area-inset-bottom));
    min-height: 64px;
    display: grid;
    place-items: center;
  }

  .headline-card:has(.last-update-note) .secondary-source-button,
  .headline-card:has(.last-update-note) .no-second-source {
    bottom: calc(var(--nav) + 20px + env(safe-area-inset-bottom));
  }
  .headline-card:has(.last-update-note) .secondary-source-drawer {
    bottom: calc(var(--nav) + 106px + env(safe-area-inset-bottom));
  }
  .last-update-note { bottom: calc(var(--nav) + 8px + env(safe-area-inset-bottom)); }
  .swipe-hint { display: none; }
}

@media (max-width: 600px) and (max-height: 700px) {
  .headline-content {
    top: 43%;
    max-height: calc(100dvh - 355px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .headline-content h2 { font-size: 22px; }
  .headline-content h3 { display: none; }
  .secondary-source-button { height: 72px; }
  .secondary-source-drawer { bottom: calc(var(--nav) + 88px + env(safe-area-inset-bottom)); }
}