/* Compact layouts share the existing Night bloom type, palette, and artwork. */
@media (max-width: 720px) {
  .interior-page { --page-gutter: clamp(16px, 5vw, 28px); }
  .page-width, .docs-body, .docs-article-layout > article,
  .product-hero-copy, .download-summary, .desktop-terminal > div { min-width: 0; }
  .section-wrap { padding-inline: clamp(16px, 5vw, 28px); }

  /* Keep all primary destinations available behind one touch-sized control. */
  .site-header, .interior-header { padding-inline: max(16px, env(safe-area-inset-left)); }
  .nav-shell, .nav-primary, .is-scrolled .nav-shell, .is-scrolled .nav-primary { gap: 12px; }
  [data-page-navigation] .nav-shell { gap: 0; }
  .brand { min-height: 44px; }
  .nav-shell > .brand, .nav-primary > .brand { order: 1; }
  .nav-shell > .header-cta, .nav-primary > .header-cta {
    order: 3;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 12px;
    white-space: nowrap;
  }
  .has-mobile-menu .nav-menu-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    order: 2;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #090e1540;
  }
  .nav-menu-toggle svg { width: 22px; height: 22px; }
  .nav-menu-toggle[aria-expanded="true"] { background: var(--soft); border-color: var(--accent); }
  .has-mobile-menu .nav-main {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100svh - 160px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    border: 1px solid #d6dff333;
    border-radius: 22px;
    background: #0d151df5;
    box-shadow: 0 16px 36px #0005;
  }
  .is-menu-open .nav-main { display: flex; }
  .nav-main a { min-height: 48px; padding: 12px 16px; border-radius: 12px; font-size: 15px; }
  .nav-main a:hover, .nav-main a:focus-visible { background: #ffffff08; opacity: 1; }

  /* The docked docs search gets its own row, rather than squeezing the input. */
  /* The extra row floats below the unchanged header height to avoid a scroll jump. */
  .docs-page .is-search-docked { height: 74px; align-items: flex-start; }
  .docs-page .is-search-docked .nav-shell {
    flex-wrap: wrap;
    align-content: center;
    gap: 8px 12px;
    height: auto;
    margin-top: 8px;
    padding: 10px 12px;
  }
  .docs-page .is-search-docked .nav-shell::before { border-radius: 26px; }
  .docs-page .is-search-docked .brand { width: 64px; }
  .docs-page .is-search-docked .header-cta { min-height: 44px; font-size: 12px; padding-inline: 12px; }
  [data-nav-search-slot] { order: 4; flex: 1 0 100%; max-width: none; margin: 0; }
  [data-nav-search-slot] .docs-search { min-height: 44px; padding: 6px 12px; }
  [data-nav-search-slot] .docs-search input, .docs-search input,
  .table-controls input, .auth-field input { font-size: 16px; }
  #docs-view, .doc-content :is(h2, h3, h4) { scroll-margin-top: 152px; }

  .page-heading h1, .product-hero h1, .docs-home-heading h1, .doc-title {
    font-size: clamp(38px, 10vw, 54px);
    overflow-wrap: anywhere;
  }
  .bulb-intro h2, .approach h2 { font-size: clamp(40px, 11vw, 58px); }
  .hero { min-height: 540px; height: 100svh; }
  .hero-content { padding-block: 96px; }
  .hero-intro > p { font-size: 14px; }
  .hero-bottom { bottom: max(16px, env(safe-area-inset-bottom)); }
  .analytics-meta { flex-wrap: wrap; gap: 8px 14px; font-size: 12px; }
  .analytics-meta .demo-label { font-size: 11px; }
  .model-summary-name { min-width: 0; overflow-wrap: anywhere; }
  .model-summary-bottom { align-items: flex-start; }
  .model-total { font-size: 27px; }

  /* Keep long daily breakdowns in the page, with an independent touch scroller. */
  .usage-chart, .dashboard-section .usage-chart { height: auto; }
  .usage-day-picker { display: grid; gap: 6px; margin-bottom: 16px; }
  .usage-day-picker[hidden] { display: none; }
  .usage-day-picker label { color: var(--muted); font-size: 13px; }
  .usage-day-picker select {
    width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
    font: 16px var(--sans); color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px;
  }
  .usage-day-picker select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  #usage-svg { height: 300px; }
  .usage-tooltip {
    position: static;
    width: 100%;
    margin-top: 12px;
    max-height: min(420px, 60svh);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    font-size: 12px;
    background: #111923;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .usage-breakdown-row { grid-template-columns: minmax(0, 1fr) 54px 44px; gap: 8px; padding-block: 7px; }
  .usage-breakdown-row dt { overflow-wrap: anywhere; }
  .usage-chart-footer { flex-wrap: wrap; gap: 4px; font-size: 12px; }
  .usage-chart-footer p:last-child { text-align: left; }
  .chart-legend { gap: 6px; margin-top: 18px; }
  button.usage-legend-item { padding: 9px 10px; min-height: 44px; font-size: 12px; }
  .usage-legend-item[aria-pressed="true"] { background: #d6dff312; }
  .dashboard-section { scroll-margin-top: 100px; }
  .dashboard-section-header { gap: 18px; }
  .dashboard-section-header > div { min-width: 0; }
  .dashboard-controls { padding-block: 6px; gap: 12px; }
  .dashboard-section-nav { overscroll-behavior-x: contain; }
  .dashboard-section-nav a { min-height: 44px; font-size: 13px; }
  .range-control { max-width: 100%; }
  .range-control button { min-height: 44px; padding-inline: 14px; font-size: 13px; }
  .metric-strip { gap: 24px 16px; padding: 24px 16px; }
  .metric-strip dt, .metric-strip small { font-size: 12px; }
  .metric-strip dt { min-height: 3em; line-height: 1.5; }
  .metric-strip small a { text-decoration: underline; text-underline-offset: 3px; }
  .metric-strip dd.metric-model { font-size: 17px; overflow-wrap: anywhere; }
  .table-controls { flex-wrap: wrap; gap: 10px; }
  .table-controls input { width: 100%; flex-basis: 100%; }
  .table-controls .sort-select { width: 100%; }
  .table-controls .sort-select-trigger { width: 100%; font-size: 14px; }
  .sort-select-menu { width: 100%; }
  .sort-select-menu button { min-height: 44px; font-size: 14px; }
  .data-table { white-space: normal; min-width: 640px; }
  .data-table th, .data-table td { padding: 16px; }
  .data-table th:nth-child(2) { width: 190px; }
  .data-table td:nth-child(2) { overflow-wrap: anywhere; }
  .data-table td.numeric { white-space: nowrap; }
  .data-table-wrap { overscroll-behavior-x: contain; }
  .table-scroll-hint { display: block; margin: 0 0 12px; color: var(--muted); font-size: 12px; }
  .comparison-label { font-size: 14px; gap: 12px; align-items: flex-start; }
  .comparison-label > .legend-label { min-width: 0; overflow-wrap: anywhere; }
  .comparison-label > span:last-child { flex-shrink: 0; }
  .metric-panel, .distribution-panel { padding: 24px 18px; }
  .distribution-row { font-size: 14px; gap: 12px; }
  .distribution-row > .legend-label { min-width: 0; overflow-wrap: anywhere; }
  #share-bars .distribution-row { min-height: 44px; padding-block: 8px; font-size: 14px; }
  .rate-note { font-size: 12px; }

  .docs-nav-group a, .docs-category a { min-height: 44px; font-size: 14px; }
  .docs-nav-group h2 { font-size: 13px; }
  .docs-search kbd { display: none; }
  .doc-kicker { flex-wrap: wrap; }
  .doc-content pre { padding: 56px 16px 18px; }
  .copy-code { min-height: 44px; font-size: 12px !important; }
  .docs-quickstart { padding: 24px 20px; }
  .doc-pagination a { font-size: 14px; }

  .product-jump-nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 16px; }
  .product-jump-nav a { min-height: 44px; flex-shrink: 0; font-size: 13px; }
  .feature-card { padding: 26px 22px; }
  .feature-card a, .download-release, .terminal-guide, .download-steps a {
    display: inline-flex; align-items: center; min-height: 44px; font-size: 14px;
  }
  .download-panel, .desktop-terminal, .product-next { padding: 24px 20px; }
  .download-platforms button { padding-inline: 8px; min-height: 44px; }
  .download-architecture { flex-wrap: wrap; }
  .download-architecture button { min-height: 44px; }
  .download-summary .product-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .download-summary .product-button { white-space: normal; text-align: center; }
  .build-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px; }
  .build-row .product-button { justify-self: start; min-height: 44px; }
  .terminal-command { grid-template-columns: minmax(0, 1fr); }
  .terminal-command button { justify-self: end; min-height: 44px; }
  .product-actions .product-button { max-width: 100%; white-space: normal; }

  .install-platforms { max-width: 100%; }
  .install-platforms button { min-height: 44px; font-size: 12px; }
  .install-copy, .bulb-resources a { min-height: 44px; }
  .bulb-panel { padding: 24px 18px; }
  .plan-description, .plan-features { font-size: 15px; }
  .plan-payment { font-size: 13px; }
  .plan-payment :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; }
  .auth-close, .auth-password-toggle { width: 44px; height: 44px; }
  .auth-switch { min-height: 44px; }
  .auth-content { padding-inline: 20px; }
  .page-footer nav { flex-wrap: wrap; }
  .page-footer nav a, .footer-meta a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Landscape phones need room for the content below the sticky header. */
@media (max-height: 540px) {
  .dashboard-section { scroll-margin-top: 100px; }
}