/* Installed app and compact web: one screen, with the composer in the last row. */
html:has(body.pwa-mode), body.pwa-mode { height: 100%; overflow: hidden; overscroll-behavior: none; }
.pwa-mode .viewport { height: var(--visible-height, 100dvh); overflow: hidden; }
.pwa-mode .scene {
  width: 100%; max-width: 720px; height: var(--visible-height, 100dvh); min-height: 0;
  padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 44px 36px 64px minmax(0, 1fr) 56px;
  gap: 6px; overflow: hidden;
}
.pwa-mode .sidebar { grid-column: 1; grid-row: 1; height: 44px; width: 100%; }
.pwa-mode .hamburger { top: 0; left: 0; }
.pwa-mode .brand { top: 0; left: 55px; width: 15px; height: 44px; }
.pwa-mode .side-intro, .pwa-mode .side-links, .pwa-mode .hero-copy h1,
.pwa-mode .hero-copy p, .pwa-mode .action-tiles, .pwa-mode .feature-banner { display: none; }
.pwa-mode .hero-copy { grid-column: 1; grid-row: 2; align-self: center; padding: 0; }
.pwa-mode .persona-choice { margin: 0; min-height: 36px; width: 100%; }
.pwa-mode .toolbar { top: max(8px, env(safe-area-inset-top)); width: 44px; height: 44px; }
.pwa-mode .quiet-control { right: 12px; }.pwa-mode .search-control { right: 66px; }
.pwa-mode .category-tabs { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 0 16px; justify-content: center; align-content: center; padding: 0; height: 64px; overflow: hidden; }
.pwa-mode .category-tabs button:nth-child(n) { height: 32px; line-height: 32px; font-size: 12px; }
.pwa-mode .fortune-card {
  grid-column: 1; grid-row: 4; align-self: center; justify-self: center; margin: 0;
  width: min(100%, calc((var(--visible-height, 100dvh) - 240px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 605 / 548));
  height: auto; min-height: 0; aspect-ratio: 605/548;
}
.pwa-mode .question-form { position: relative; inset: auto; transform: none; grid-column: 1; grid-row: 5; width: 100%; height: 56px; align-self: stretch; }
.pwa-mode .fortune-card h2 { left: 35%; top: 5.5%; }
.pwa-mode .fortune-date { top: 13%; right: 8%; }
.pwa-mode .read-button span { padding-right: 24px; font-size: clamp(12px, 3.3cqw, 18px); letter-spacing: 0; }
.pwa-mode .question-flower { top: 15px; }
.pwa-mode .question-submit { top: 4px; }
.pwa-mode .bottom-rail { display: none; }
/* Reuse existing actions only when the gap below the content can hold them. */
.pwa-mode.has-compact-actions .action-tiles {
  display: grid; position: absolute; grid-area: auto;
  top: var(--compact-actions-top); left: var(--compact-actions-left);
  width: var(--compact-actions-width); height: 48px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
.pwa-mode .action-tile { height: 48px; flex-direction: column; gap: 2px; }
.pwa-mode .action-tile img { width: 18px; height: 18px; }
.pwa-mode .action-tile span { font-size: 11px; line-height: 1.4; letter-spacing: .2px; text-align: center; }
.pwa-mode .action-tile small { display: none; }

.pwa-mode .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
.pwa-mode.keyboard-open .scene { grid-template-rows: 44px 36px minmax(0, 1fr) 56px; }
.pwa-mode.keyboard-open .category-tabs, .pwa-mode.keyboard-open .fortune-card,
.pwa-mode.keyboard-open .bottom-rail { display: none; }
.pwa-mode.keyboard-open .question-form { grid-row: 4; }
.pwa-mode .app-dialog[open] { top: calc(var(--visible-top, 0px) + 8px); bottom: auto; margin: 0 auto; height: calc(var(--visible-height, 100dvh) - 16px); max-height: none; }
.pwa-mode .dialog-heading { padding: 12px 16px; }
.pwa-mode .dialog-heading h2 { font-size: 19px; }
.pwa-mode .dialog-body { flex: 1; height: 0; min-height: 0; overflow: hidden; column-count: 1; column-gap: 32px; column-fill: auto; padding: 16px; overflow-wrap: anywhere; }
.pwa-mode .dialog-body .nav-list { display: block; }
.pwa-mode .nav-list > button { display: block; width: 100%; margin-bottom: 10px; break-inside: avoid; }
.pwa-mode .dialog-body button, .pwa-mode .dialog-body input,
.pwa-mode .dialog-body textarea, .pwa-mode .dialog-actions { break-inside: avoid; }
.pwa-mode .dialog-body label, .pwa-mode .dialog-body h3 { break-after: avoid; }
.pwa-mode .dialog-body textarea { min-height: 80px; max-height: 120px; resize: none; }
.pwa-mode .dialog-body .reading-stream { min-height: 0; }
.pwa-mode .dialog-footer { padding: 8px 16px; font-size: 10px; }
.dialog-pagination { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-top: 1px solid #967a5424; font-size: 12px; color: #674b36; }
.dialog-pagination[hidden] { display: none; }
.dialog-pagination button { min-width: 64px; height: 44px; border: 0; background: none; color: inherit; }
.dialog-pagination button:disabled { opacity: .35; cursor: default; }
@media (orientation: landscape) {
  .pwa-mode .scene { max-width: 1200px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 44px 36px minmax(0, 1fr) 56px; gap: 6px 24px; }
  .pwa-mode .sidebar { grid-column: 1 / 3; }
  .pwa-mode .hero-copy { grid-column: 1; grid-row: 2; }
  .pwa-mode .category-tabs { grid-column: 1; grid-row: 3; align-self: center; }
  .pwa-mode .fortune-card { grid-column: 2; grid-row: 2 / 4; width: min(100%, calc((var(--visible-height, 100dvh) - 134px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 605 / 548)); }
  .pwa-mode .question-form { grid-column: 1 / 3; grid-row: 4; }
  .pwa-mode.keyboard-open .question-form { grid-column: 1 / 3; }
}
@media (max-height: 460px) {
  .pwa-mode .dialog-heading { padding: 6px 12px; }
  .pwa-mode .eyebrow, .pwa-mode .dialog-footer, .pwa-mode .dialog-poem { display: none; }
  .pwa-mode .dialog-body { padding: 10px 16px; }
}
@media (orientation: portrait) and (max-height: 600px) {
  .pwa-mode .scene { grid-template-rows: 44px 36px minmax(0, 1fr) 56px; }
  .pwa-mode .category-tabs { display: none; }
  .pwa-mode .fortune-card { grid-row: 3; width: min(100%, calc((var(--visible-height, 100dvh) - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 605 / 548)); }
  .pwa-mode .question-form { grid-row: 4; }
}
@media (orientation: portrait) and (min-height: 760px) {
  .pwa-mode .scene { grid-template-rows: 44px 120px 64px minmax(0, 1fr) 56px; }
  .pwa-mode .hero-copy h1 { display: block; font-size: 21px; line-height: 1.5; }
  .pwa-mode .fortune-card { width: min(100%, calc((var(--visible-height, 100dvh) - 324px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 605 / 548)); }
  .pwa-mode.keyboard-open .scene { grid-template-rows: 44px 36px minmax(0, 1fr) 56px; }
  .pwa-mode.keyboard-open .hero-copy h1 { display: none; }
}