/* Shared geometry: normal phones stay edge-to-edge; a touch inner screen can
   expand without changing routes or replacing any business/reading nodes. */
:root {
  --app-width: min(100%, 430px);
  --app-left: max(0px, calc((100% - var(--app-width)) / 2));
  --app-top: 0px;
  --app-height: 100dvh;
  --app-bottom: max(0px, calc(100dvh - var(--app-top) - var(--app-height)));
}

@media (pointer: coarse), (hover: none) {
  :root { --app-width: min(100%, 960px); }
}

/* CSS fallback when the browser exposes segment env() but no JS segments. */
@media (horizontal-viewport-segments: 2) {
  :root {
    --segment-0-left: env(viewport-segment-left 0 0);
    --segment-0-top: env(viewport-segment-top 0 0);
    --segment-0-width: env(viewport-segment-width 0 0);
    --segment-0-height: env(viewport-segment-height 0 0);
    --segment-1-left: env(viewport-segment-left 1 0);
    --segment-1-top: env(viewport-segment-top 1 0);
    --segment-1-width: env(viewport-segment-width 1 0);
    --segment-1-height: env(viewport-segment-height 1 0);
    --app-width: env(viewport-segment-width 0 0, 430px);
    --app-left: env(viewport-segment-left 0 0, 0px);
    --app-top: env(viewport-segment-top 0 0, 0px);
    --app-height: env(viewport-segment-height 0 0, 100dvh);
  }
}
@media (vertical-viewport-segments: 2) {
  :root {
    --segment-0-left: env(viewport-segment-left 0 0);
    --segment-0-top: env(viewport-segment-top 0 0);
    --segment-0-width: env(viewport-segment-width 0 0);
    --segment-0-height: env(viewport-segment-height 0 0);
    --segment-1-left: env(viewport-segment-left 0 1);
    --segment-1-top: env(viewport-segment-top 0 1);
    --segment-1-width: env(viewport-segment-width 0 1);
    --segment-1-height: env(viewport-segment-height 0 1);
    --app-width: env(viewport-segment-width 0 0, 430px);
    --app-left: env(viewport-segment-left 0 0, 0px);
    --app-top: env(viewport-segment-top 0 0, 0px);
    --app-height: env(viewport-segment-height 0 0, 100dvh);
  }
}

body .phone-shell, .reader-page .phone-shell, .media-page .phone-shell {
  width: var(--app-width);
  max-width: 100%;
  min-height: var(--app-height);
  margin-inline: var(--app-left) 0;
  margin-block: var(--app-top) 0;
  container: app / inline-size;
}
.phone-shell .screen { min-height: var(--app-height); }
.read-header, .media-header { top: var(--app-top); }
.read-tabs { top: calc(var(--app-top) + var(--read-header-height)); }
.bottom-nav, .read-bottom, .media-save-bar {
  left: var(--app-left);
  width: var(--app-width);
  max-width: none;
  transform: none;
  bottom: var(--app-bottom);
}
.reader-page.reading-detail .read-bottom { bottom: var(--app-bottom); }
.bottom-nav { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
.read-bottom { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }
#quota-undo, .quota-undo {
  left: calc(var(--app-left) + 16px);
  width: calc(var(--app-width) - 32px);
  max-width: none;
  transform: none;
  bottom: calc(var(--app-bottom) + var(--nav-height) + 10px);
}

dialog, dialog.detail-dialog, .media-page #media-preview {
  left: var(--dialog-pane-left, var(--app-left));
  right: auto;
  width: var(--dialog-pane-width, var(--app-width));
  max-width: none;
  margin-inline: 0;
  top: var(--dialog-inset-top, var(--app-top)) !important;
  bottom: var(--dialog-inset-bottom, var(--app-bottom)) !important;
  --panel-height: max(0px, calc(var(--dialog-visible-height, var(--app-height)) - 24px));
  max-height: var(--panel-height);
}
dialog form, dialog .detail-shell, dialog .read-export-shell {
  max-height: var(--panel-height);
  min-width: 0;
  padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right));
}
dialog .dialog-scroll, dialog .detail-content {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  scroll-padding-block: 14px;
}
dialog .dialog-head > div, dialog .detail-head > div,
dialog .dialog-actions > *, .read-header > *, .media-header > * { min-width: 0; }
dialog .dialog-actions { flex-wrap: wrap; }
.media-page #media-preview {
  height: var(--panel-height);
  margin-block: auto 0;
}
.media-preview-shell { min-height: 0; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
.media-preview-stage img { min-height: 0; }

/* Layout responds to the actual usable pane, not the overall screen width. */
@container app (min-width: 600px) {
  .phone-shell .screen { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  .home-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .home-view > .home-hero, .home-view > #home-devices,
  .home-view > #open-gpt, .home-view > .attention-list { grid-column: 1 / -1; }
  .home-view > .home-hero { margin-bottom: 0; }
  .home-view > .feature-card { margin-bottom: 0; height: 100%; }
  .home-view > #home-devices { margin-bottom: 0; }
  .home-view > .attention-list { margin-top: 8px; }
  .device-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
  .device-slot { padding: 10px 12px; }
  .device-slot-account { white-space: normal; overflow-wrap: anywhere; }
  .peek-badges, .device-badges { max-width: 240px; }
  .peek-badges .device-badges { max-width: 160px; }
  .deck-active .quick-copy { max-width: 600px; }
  .deck-active .account-actions { max-width: 600px; }
  .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
  .media-video-preview { height: 360px; }
  .read-pad, .media-pad { padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)); }
  #reader-document { max-width: 680px; margin-inline: auto; }
  .read-doc-heading, #reader-compose, #reader-login,
  #media-login, .media-compose, #media-native-help { max-width: 720px; margin-inline: auto; }
  .read-tabs { padding-inline: max(24px, calc((100% - 640px) / 2)); }
  .read-options, #reader-selection-tools { max-width: 640px; margin-inline: auto; }
  .read-options { padding-inline: 20px; }
}
@container app (min-width: 820px) {
  .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container app (max-width: 359px) {
  .peek-metrics { flex-wrap: wrap; row-gap: 1px; }
  .peek-metrics > .peek-time { flex: 1 1 110px; }
  .device-badges { max-width: 105px; }
  .peek-badges { max-width: 130px; }
  .read-header, .media-header { gap: 6px; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .read-brand { font-size: 13px; }
  .media-save-actions { gap: 6px; }
}

/* Keep form actions reachable on a short landscape screen without shrinking
   touch targets or forcing the page to change its route. */
@media (max-height: 480px) {
  dialog form, dialog .detail-shell { padding-top: 10px; }
  dialog .dialog-head, dialog .detail-head { margin-bottom: 4px; }
  dialog .dialog-head h2, dialog .detail-head h2 { margin-top: 4px; font-size: 18px; }
  dialog .dialog-actions { margin-top: 8px; padding-block: 8px max(8px, env(safe-area-inset-bottom)); }
  .media-preview-shell { padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .media-preview-shell > .media-mode { margin-block: 2px; }
  .media-preview-shell > footer { gap: 6px; }
  .media-preview-shell > footer p { margin-block: 3px; }
  .read-export-shell > header { top: -18px; }
}