/**
 * Fulford shared mobile layer — one source for main app + Book Library.
 * Loaded by public/index.html and public/library/index.html.
 * Breakpoint: 767px (aligns with forge.css).
 */

/* ----- Base (all viewports; mobile-first safety) ----- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-tap-highlight-color: rgba(181, 106, 49, 0.15);
}
/* Comfortable touch targets for primary controls */
@media (max-width: 767px) {
  button,
  .btn,
  .tab-btn,
  .chip,
  a.btn,
  input[type="submit"],
  input[type="button"],
  label.btn {
    min-height: 44px;
  }
  /* Don't force giant height on tiny icon chips */
  .chip,
  .fchip,
  .btn.sm,
  .btn.ghost.sm,
  button.sm {
    min-height: 36px;
  }
  input[type="text"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important; /* iOS: avoid auto-zoom on focus */
    min-height: 44px;
  }
  textarea {
    min-height: 88px;
  }
}

/* Safe areas (notched phones) */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
    .bar,
    .forge-topbar,
    .library-shell-bar,
    .mobile-drawer-panel {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
    main,
    #app main,
    .forge-main {
      padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
  }
}

/* ----- Main Fulford shell ----- */
@media (max-width: 767px) {
  /* Library tab: full-bleed usable height */
  .library-shell {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 0;
  }
  .library-shell-bar {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .library-shell-bar p {
    font-size: 11px;
    line-height: 1.35;
  }
  .library-frame {
    min-height: calc(100dvh - 100px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 100px - env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }
  /* Dashboard cards breathe */
  .n-card-radius,
  .bg-n-raised.border {
    max-width: 100%;
  }
  /* Horizontal chip rows scroll instead of crushing */
  .filters,
  #filters,
  .viewtabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .filters > *,
  #filters > *,
  .viewtabs > * {
    flex-shrink: 0;
  }
}

/* ----- Book Library (standalone + embed) ----- */
@media (max-width: 767px) {
  /* Sticky search bar: sit under notch; reduce side padding */
  body.library-page header,
  body.library-page .bar,
  body.library-page .bar-in,
  body.library-page main,
  /* library page has no body class yet — use presence of #search */
  header:has(+ .bar),
  .bar,
  .bar-in,
  main {
    padding-left: max(12px, env(safe-area-inset-left, 12px));
    padding-right: max(12px, env(safe-area-inset-right, 12px));
  }

  h1 {
    font-size: 1.35rem !important;
    line-height: 1.2;
  }
  .sub {
    font-size: 13px !important;
    max-width: none;
  }
  .stats {
    gap: 6px !important;
  }
  .stats > span {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  .bar {
    top: env(safe-area-inset-top, 0);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .bar-in {
    align-items: stretch !important;
    gap: 8px !important;
  }
  #search {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    width: 100%;
    border-radius: 12px !important;
    padding: 12px 14px !important;
  }
  .filters {
    width: 100%;
    max-width: 100%;
  }
  .chip,
  .fchip {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Default book grid: one column readable cards */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.gallery .grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
    gap: 8px !important;
  }
  body.gallery .cover img,
  body.gallery .cover .ph {
    height: 140px !important;
  }

  /* Shelf strip: taller touch spines */
  body.shelf .card .spine {
    width: 28px !important;
    min-height: 120px !important;
    height: 128px !important;
  }
  body.shelf .card.is-open .spine {
    width: 36px !important;
  }
  body.shelf .spine-expand {
    width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
    line-height: 22px !important;
    opacity: 0.95 !important; /* always visible on touch */
  }
  body.shelf .grid {
    padding: 10px 8px 18px !important;
    min-height: 148px !important;
  }

  .book-expand {
    padding: 12px !important;
    margin-left: 0;
    margin-right: 0;
  }
  .book-expand-inner {
    flex-direction: column !important;
  }
  .book-expand .ex-actions {
    width: 100%;
  }
  .book-expand .ex-actions .btn,
  .book-expand .ex-actions a.btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    min-height: 40px;
  }

  .two,
  .three {
    flex-direction: column !important;
  }
  .wiki-grid {
    grid-template-columns: 1fr !important;
  }

  .toolbar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .toolgroup {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .toolrow {
    flex-wrap: nowrap !important;
  }
  .toolrow .btn,
  .toolrow label.btn {
    flex-shrink: 0;
  }

  .lib-chrome {
    gap: 6px !important;
  }
  .lib-more-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
    min-width: 0 !important;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 40 !important;
  }

  /* Modals full-sheet on phone */
  .modal .sheet,
  #reportModal .sheet,
  .sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, 100%) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 14px max(16px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
  }
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .shelf-top {
    grid-template-columns: 1fr !important;
  }
  .shelf-photo,
  .ghead-photo .photo-thumb {
    max-height: 180px;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
  }
  .ghead-photo {
    flex-direction: column;
  }

  /* Embed inside Fulford shell: less chrome */
  body.embed header {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }
  body.embed h1 {
    font-size: 1.15rem !important;
  }
  body.embed .bar {
    top: 0;
  }
  body.embed main {
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }
  body.embed .sub {
    display: none; /* save vertical space in iframe */
  }
}

/* Prefer dynamic viewport when available */
@supports (height: 100dvh) {
  @media (max-width: 767px) {
    .library-frame {
      min-height: calc(100dvh - 100px);
    }
  }
}