/* IOOK mobile final polish
   Small mobile-only refinements layered on top of mobile.css.
   No desktop or business-logic changes.
*/

@media (max-width: 800px) {
  main {
    padding: 20px 14px calc(88px + env(safe-area-inset-bottom));
  }

  .topbar {
    margin-bottom: 18px;
  }

  .topbar h1 {
    max-width: calc(100vw - 28px);
    font-size: clamp(31px, 8.2vw, 36px);
    line-height: 1.01;
  }

  /* Slightly denser home cards so the useful controls arrive sooner. */
  .pillarGrid {
    gap: 9px;
    margin-bottom: 12px;
  }

  .pillarCard {
    min-height: 102px;
    padding: 13px;
  }

  .pillarCard strong {
    margin-bottom: 4px;
  }

  .pillarCard em {
    margin-top: 7px;
  }

  /* Reduce capture height without making it cramped for typing. */
  textarea {
    height: 145px;
    min-height: 136px;
  }

  .captureFooter {
    gap: 10px;
  }

  .examples {
    margin-top: 10px;
    margin-bottom: 16px;
  }

  .emptyState {
    padding-top: 26px;
    padding-bottom: 26px;
  }

  /* Stronger selected-tab treatment while staying subtle. */
  .sidebar .nav.active,
  .mobileMoreButton.active {
    background: rgba(216, 255, 85, .075);
    color: var(--text);
    box-shadow: inset 0 2px 0 rgba(216, 255, 85, .72);
  }

  .sidebar .nav.active span,
  .mobileMoreButton.active > span {
    color: var(--accent);
  }

  /* Make the sheet comfortable on short/small iPhones. */
  .mobileMoreSheet {
    max-height: min(80dvh, 680px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .mobileSheetGrid button {
    min-height: 76px;
  }

  /* Slightly tighter authentication screen on mobile. */
  .authCard {
    margin-top: 8px;
    padding: 20px;
  }

  .authBrand {
    margin-bottom: 22px;
  }

  .authCard h1 {
    font-size: 32px;
  }
}

@media (max-width: 390px) {
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .topbar h1 {
    font-size: 29px;
  }

  /* Keep the More sheet compact rather than turning it into a very tall one-column list. */
  .mobileSheetGrid {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .mobileSheetGrid button {
    min-height: 72px;
    padding: 11px;
  }

  .mobileSheetGrid button strong {
    font-size: 11px;
  }

  .mobileSheetGrid button small {
    font-size: 8px;
  }

  .pillarCard {
    min-height: 98px;
    padding: 11px;
  }

  textarea {
    height: 138px;
    min-height: 132px;
  }
}

@media (max-width: 340px) {
  .mobileSheetGrid {
    grid-template-columns: 1fr;
  }
}