/* Keep the same learning tools within reach on phones, tablets and desktops. */
.home-grid > *, .rail, .panel, .field, .breadcrumb { min-width: 0; }
.field-row, .budget-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-heading h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-heading .icon-button { flex-shrink: 0; }
.cadence-courses summary > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.cadence-courses summary > b { flex-shrink: 0; }
.task-meta, .recall-card h3 { overflow-wrap: anywhere; }
.topbar-right { flex-shrink: 0; }
dialog { overflow-y: auto; overscroll-behavior-y: contain; }

@media (min-width: 651px) {
  .sidebar { overflow-y: auto; overscroll-behavior-y: contain; }
  .sidebar nav { flex-shrink: 0; }
}

@media (min-width: 651px) and (max-width: 1000px) {
  .sidebar { padding-left: max(14px, env(safe-area-inset-left)); }
  .topbar, main { padding-right: max(28px, env(safe-area-inset-right)); }
  .sidebar nav button span { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 650px) {
  .topbar {
    height: calc(65px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
  main {
    padding-left: max(17px, env(safe-area-inset-left));
    padding-right: max(17px, env(safe-area-inset-right));
  }
  .sidebar {
    padding-left: max(9px, env(safe-area-inset-left));
    padding-right: max(9px, env(safe-area-inset-right));
  }
  .workspace { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  dialog { max-width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  .field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
  .ai-response, .smart-context textarea, .input-row input, .search {
    font-size: 16px;
    max-width: 100%;
  }
  .heading-row > .button, .plan-block .button, .input-row .button,
  .icon-button, .task-action, .round-arrow, .filter-button, .text-link {
    min-height: 44px;
  }
  .icon-button, .task-action, .round-arrow { min-width: 44px; }
}

@media (max-width: 420px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
}

/* A phone in landscape must scroll inside the focus dialog, not off-screen. */
@media (max-height: 650px) {
  .immersive { min-height: 0; }
  .immersive .timer-ring { width: 180px; height: 180px; margin: 26px auto; }
  .immersive .timer-display { font-size: 52px; }
}

@media (min-width: 651px) and (max-height: 650px) {
  .sidebar .nav-label { margin-top: 22px; }
  .sidebar-bottom p, .sidebar-bottom .small-leaf { display: none; }
}