/* Shared phone layout. Keep the desktop rail and desktop page geometry intact. */
@media (max-width: 1023px) {
  html,
  body {
    max-width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 16px;
  }

  .desktop-content-shell {
    width: 100%;
  }

  .mobile-topbar-title {
    min-width: 0;
    color: #2d2924;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #main-panel:not(.p-0) {
    padding: 1.5rem 1rem calc(6.5rem + env(safe-area-inset-bottom));
  }

  #main-panel > main,
  #main-panel > .mx-auto,
  #main-panel > div > .mx-auto {
    width: 100%;
    max-width: none;
  }

  /* Readable type scale for utility pages using Tailwind's display classes. */
  #main-panel [class~="text-5xl"] { font-size: 36px !important; line-height: 1.05 !important; }
  #main-panel [class~="text-4xl"] { font-size: 32px !important; line-height: 1.1 !important; }
  #main-panel [class~="text-3xl"] { font-size: 28px !important; line-height: 1.15 !important; }
  #main-panel [class~="text-2xl"] { font-size: 24px !important; line-height: 1.2 !important; }

  #main-panel h1 { font-size: 32px !important; line-height: 1.1 !important; }
  #main-panel h2 { font-size: 24px !important; line-height: 1.2 !important; }
  body h1 { font-size: 32px !important; line-height: 1.1 !important; }

  #main-panel h1,
  #main-panel h2,
  #main-panel h3,
  #main-panel p,
  #main-panel a,
  #main-panel button,
  #main-panel label,
  #main-panel input,
  #main-panel textarea,
  #main-panel select {
    overflow-wrap: anywhere;
  }

  #main-panel button {
    overflow-wrap: normal;
    word-break: normal;
  }

  #main-panel button,
  #main-panel a.inline-flex,
  #main-panel a.block {
    -webkit-tap-highlight-color: transparent;
  }

  #main-panel button:not(.sr-only),
  #main-panel a.inline-flex {
    min-height: 44px;
  }

  #main-panel .rounded-2xl,
  #main-panel .rounded-xl {
    border-radius: 1rem;
  }

  #main-panel .p-8 { padding: 20px !important; }
  #main-panel .p-6 { padding: 16px !important; }
  #main-panel .p-5 { padding: 16px !important; }

  #main-panel table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  #main-panel pre {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Instagram-like library/feed cards: image-led, edge-to-edge and fluid. */
  .library-page {
    max-width: none;
  }

  .library-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .library-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    border-radius: .9rem;
  }

  .text-overview-title {
    font-size: clamp(2.25rem, 11vw, 3rem);
    line-height: .98;
  }

  .text-overview-author {
    font-size: 1rem;
  }

  .text-overview-blurb {
    font-size: 1.15rem;
    line-height: 1.45;
  }

  .text-overview-image-frame {
    height: min(78vw, 25rem);
  }

  .element-detail-page-title {
    max-width: 100%;
    font-size: clamp(2.5rem, 13vw, 4rem);
    line-height: .96;
    overflow-wrap: anywhere;
  }

  .element-detail-summary-text {
    font-size: 26px !important;
    line-height: 1.35 !important;
  }

  .element-detail-magazine .editorial-content-card .text-base {
    font-size: 18px !important;
    line-height: 1.65 !important;
  }

  .element-detail-editorial-grid {
    gap: 1.5rem;
  }

  .chapter-detail-page-title {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .chapter-detail-prose,
  .chapter-detail-events {
    font-size: 21px;
    line-height: 1.6;
  }

  .secondary-panel-group-title,
  .secondary-panel-heading h2 {
    font-size: 1rem;
  }

  .secondary-panel-item-title {
    font-size: 1.05rem;
  }

  .secondary-panel-item-summary {
    font-size: 19px;
  }

  .secondary-panel-create-actions {
    flex-wrap: wrap;
  }

  .secondary-panel-create-actions button {
    min-height: 44px;
  }

  /* Keep dense status/admin feeds readable without forcing desktop rows. */
  #main-panel .flex.items-start.justify-between,
  #main-panel .flex.items-end.justify-between {
    gap: 1rem;
  }

  #main-panel form.flex.items-end,
  #main-panel form.sm\:flex-row {
    align-items: stretch;
  }

  #main-panel .grid.grid-cols-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .library-card-grid {
    gap: .6rem;
  }

  .mobile-narrative-tray-item {
    min-height: 52px;
  }

  .mobile-narrative-tray-item svg {
    width: 26px;
    height: 26px;
  }
}

/* Standalone account and invitation pages do not inherit base.html. */
@media (max-width: 1023px) {
  body > main.w-full,
  body > main.max-w-md {
    width: 100%;
    max-width: calc(100vw - 2rem);
    padding: 20px !important;
  }

  body > main h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  body > main input,
  body > main select,
  body > main textarea,
  body > main button,
  body > main a.rounded-lg {
    min-height: 44px;
  }
}