/* Device foundations only; view styling belongs to the application. */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --visual-viewport-height: 100vh;
  --visual-viewport-offset-top: 0px;
  --keyboard-inset: 0px;
  --bottom-nav-height: 76px;
}
@supports (height: 100dvh) {
  :root { --visual-viewport-height: 100dvh; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.shell, .login-page, .startup-error { min-height: 100vh; min-height: 100dvh; }
dialog[open] {
  max-height: calc(var(--visual-viewport-height) - var(--safe-area-top) - var(--safe-area-bottom) - 20px);
  overscroll-behavior: contain;
  scroll-padding-block: 80px 120px;
}
dialog .modal-head { flex: none; }
dialog .modal-body { min-height: 0; overflow-wrap: anywhere; }
dialog input, dialog textarea, dialog select { scroll-margin-block: 90px 130px; }
.close-button { min-width: 48px; min-height: 48px; flex: none; }
@media (max-width: 700px), (max-height: 500px) and (max-width: 1000px) {
  .shell { padding-left: 0; padding-bottom: calc(var(--bottom-nav-height) + 16px); }
  .main, .topbar, .demo-strip {
    padding-left: max(16px, var(--safe-area-left));
    padding-right: max(16px, var(--safe-area-right));
  }
  .topbar { padding-top: max(12px, var(--safe-area-top)); }
  .sidebar {
    inset: auto 0 0;
    width: auto;
    height: auto;
    min-height: 66px;
    flex-direction: row;
    padding: 6px max(5px, var(--safe-area-right)) calc(6px + var(--safe-area-bottom)) max(5px, var(--safe-area-left));
    align-items: center;
  }
  .sidebar .brand, .sidebar .nav-section, .sidebar .sidebar-bottom { display: none; }
  .sidebar nav { display: flex; width: 100%; justify-content: space-around; gap: 0; }
  .sidebar .nav-link {
    flex: 1 1 0;
    min-width: 0;
    min-height: 54px;
    margin: 0;
    padding: 6px 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    font-size: .6875rem;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .sidebar .nav-link .icon { width: 20px; height: 20px; flex: none; }
  .sidebar .nav-link[href="#setup"] { display: none; }
  .button, .account-option, .user-button, .theme-toggle,
  .response-related button, .response-tools button, .response-actions .button { min-height: 48px; }
  input, textarea, select,
  .modal-body input, .modal-body textarea, .modal-body select { font-size: max(1rem, 16px); }
  dialog[open], dialog.response-dialog[open] {
    position: fixed;
    top: calc(var(--visual-viewport-offset-top) + var(--safe-area-top) + 6px);
    bottom: auto;
    inset-inline: max(6px, var(--safe-area-left)) max(6px, var(--safe-area-right));
    width: auto;
    max-width: none;
    margin: 0;
    height: auto;
    max-height: calc(var(--visual-viewport-height) - var(--safe-area-top) - var(--safe-area-bottom) - 12px);
    border-radius: 14px;
  }
  dialog.response-dialog[open] { height: calc(var(--visual-viewport-height) - var(--safe-area-top) - var(--safe-area-bottom) - 12px); }
  .response-actions { padding-bottom: calc(10px + var(--safe-area-bottom)); }
}
@media (max-height: 500px) and (max-width: 1000px) {
  dialog .modal-head { padding-block: 8px; }
  dialog .modal-head .eyebrow { display: none; }
  dialog .modal-head h2 { font-size: 1rem; line-height: 1.3; }
  dialog .modal-body { padding-top: 12px; }
  .sidebar .nav-link { flex-direction: row; min-height: 48px; }
  .sidebar { min-height: 60px; }
}
/* iOS can shrink only VisualViewport while its layout viewport stays tall. */
:root[data-compact-viewport="true"] dialog .modal-head { padding-block: 8px; }
:root[data-compact-viewport="true"] dialog .modal-head .eyebrow { display: none; }
:root[data-compact-viewport="true"] dialog .modal-head h2 { font-size: 1rem; line-height: 1.3; }
:root[data-compact-viewport="true"] .response-actions .response-next-action { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}