/* Mobile sheets & overlays (phones only, < 768px): login/register, request a
   novel, add to list, reader settings. Loaded on every page (reader included);
   everything sits inside the media query, so desktop is untouched. */

.na-sheet-wrap { display: none; }

@keyframes na-sheet-up { from { transform: translateY(32px); opacity: 0.4; } to { transform: none; opacity: 1; } }

@media (max-width: 767.98px) {
   /* Shared bottom-sheet frame -------------------------------------------- */
   .na-sheet-handle::before,
   #na-auth-modal .na-auth-card::before,
   #na-request-modal .na-req-card::before,
   .na-sheet::before {
      content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
      border-radius: 3px; background: rgba(255, 255, 255, 0.18); z-index: 2;
   }

   /* ── Login / register ─────────────────────────────────────────────── */
   #na-auth-modal { overflow: hidden !important; }
   #na-auth-modal .na-auth-card {
      position: fixed !important; left: 0; right: 0; bottom: 0; margin: 0 !important;
      width: 100% !important; max-width: none !important; max-height: 92vh; overflow-y: auto !important;
      border-radius: 22px 22px 0 0 !important; border-width: 1px 0 0 0 !important; background: #111114 !important;
      padding-bottom: env(safe-area-inset-bottom, 0px); animation: na-sheet-up 0.22s ease-out;
   }
   #na-auth-modal .na-auth-card > .flex > div:last-child { padding: 26px 20px 22px !important; }
   #na-auth-close { top: 14px !important; right: 12px !important; background: #18181b; }
   #na-auth-heading { font-size: 22px !important; }
   .na-auth-tabs {
      gap: 0 !important; padding: 3px; border-radius: 12px; background: #09090b;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
   }
   .na-auth-tabs button {
      flex: 1; height: 42px; margin: 0 !important; padding: 0 !important; border: 0 !important;
      border-radius: 9px; font-size: 12px !important; letter-spacing: 0.1em !important;
   }
   .na-auth-tabs button.text-white { background: #27272a; }
   /* 16px inputs stop iOS zooming the page on focus. */
   #na-auth-modal input:not([type="hidden"]) { font-size: 16px !important; min-height: 50px; }
   #na-auth-modal label { font-size: 11px !important; }
   #na-auth-submit, #na-passkey-btn { min-height: 52px; font-size: 12px !important; }

   /* ── Request a novel ──────────────────────────────────────────────── */
   #na-request-modal { align-items: flex-end !important; padding: 0 !important; overflow: hidden !important; }
   #na-request-modal .na-req-card {
      margin: 0 !important; width: 100% !important; max-width: none !important; max-height: 92vh !important;
      border-radius: 22px 22px 0 0 !important; border-width: 1px 0 0 0 !important; background: #111114 !important;
      padding-bottom: env(safe-area-inset-bottom, 0px); animation: na-sheet-up 0.22s ease-out;
   }
   #na-request-modal .na-req-card > div:first-child { padding-top: 26px !important; }
   #na-request-close { top: 14px !important; right: 12px !important; background: #18181b; }
   #na-request-modal input, #na-request-modal select, #na-request-modal textarea {
      font-size: 16px !important; min-height: 50px; border-radius: 12px !important;
   }
   #na-request-modal label { font-size: 11px !important; }
   #na-request-modal .na-rtype { min-height: 64px; }
   #na-request-submit, #na-request-cancel { min-height: 50px; font-size: 12px !important; border-radius: 12px !important; }
   #na-request-submit { flex: 1; }

   /* ── Add to list (novel page) ─────────────────────────────────────── */
   .na-sheet-wrap { display: block; position: fixed; inset: 0; z-index: 420; }
   .na-sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
   .na-sheet {
      position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; overflow-y: auto;
      border-radius: 22px 22px 0 0; background: #111114; border-top: 1px solid rgba(255, 255, 255, 0.12);
      padding: 22px 0 calc(22px + env(safe-area-inset-bottom, 0px)); animation: na-sheet-up 0.22s ease-out;
      color: #fafafa; font-family: Inter, sans-serif;
   }
   .na-sheet-head {
      display: flex; align-items: center; gap: 12px; padding: 4px 12px 14px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   }
   .na-sheet-cover { width: 40px; height: 58px; flex-shrink: 0; border-radius: 6px; object-fit: cover; }
   .na-sheet-kicker { margin: 0; font-size: 10.5px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: #71717a; }
   .na-sheet-title { margin: 3px 0 0; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .na-sheet-x {
      width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; background: transparent; color: #a1a1aa;
      display: inline-flex; align-items: center; justify-content: center;
   }
   .na-sheet-rows { padding: 8px 12px 0; }
   .na-sheet-row {
      width: 100%; height: 52px; padding: 0 10px; display: flex; align-items: center; gap: 12px;
      border: 0; border-radius: 12px; background: transparent; color: #d4d4d8; font-size: 14px; font-weight: 600; text-align: left;
   }
   .na-sheet-row .material-symbols-outlined { font-size: 21px; color: #71717a; }
   .na-sheet-row.is-on { background: rgba(168, 85, 247, 0.14); color: #fff; font-weight: 700; }
   .na-sheet-row.is-on .material-symbols-outlined { color: #c084fc; font-variation-settings: 'FILL' 1; }
   .na-sheet-row .na-sheet-check { font-variation-settings: 'FILL' 0 !important; }
   .na-sheet-block { margin: 12px 20px 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
   .na-sheet-label { margin: 0 0 10px; font-size: 10.5px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: #71717a; }
   .na-sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
   .na-sheet-chip {
      height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1); background: transparent; color: #d4d4d8; font-size: 12.5px; font-weight: 700;
   }
   .na-sheet-chip .material-symbols-outlined { font-size: 17px; }
   .na-sheet-chip.is-new { border-style: dashed; border-color: rgba(255, 255, 255, 0.2); color: #c084fc; }
   .na-sheet-remove {
      margin: 16px 20px 0; width: calc(100% - 40px); height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px;
      border-radius: 12px; border: 1px solid rgba(248, 113, 113, 0.3); background: transparent; color: #fca5a5; font-size: 13px; font-weight: 700;
   }

   /* ── Reader settings (reader page; follows the reader theme vars) ──── */
   #reader-settings-modal .rd-modal-shell {
      height: auto !important; max-height: 86vh !important; border-radius: 22px 22px 0 0 !important;
      border-width: 1px 0 0 0 !important; animation: na-sheet-up 0.22s ease-out;
   }
   #reader-settings-modal .rd-modal-shell > .md\:hidden:first-child { margin-top: 10px; }
   #reader-settings-modal .rd-modal-rail {
      position: static; gap: 4px !important; padding: 6px 96px 0 12px !important; background: transparent !important;
      scrollbar-width: none;
   }
   #reader-settings-modal .rd-modal-rail::-webkit-scrollbar { display: none; }
   #reader-settings-modal .rs-tab {
      height: 44px; padding: 0 10px !important; border: 0 !important; border-bottom: 2px solid transparent !important;
      border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
      font-size: 12px !important; font-weight: 800 !important;
   }
   #reader-settings-modal .rs-tab.active { border-bottom-color: var(--accent) !important; color: var(--text) !important; }
   #reader-settings-modal .rs-tab .material-symbols-outlined { display: none; }
   #reader-settings-modal .rs-reset {
      position: absolute; top: 22px; right: 54px; width: 44px; height: 44px; padding: 0 !important;
      justify-content: center; font-size: 0 !important; border-radius: 10px; background: transparent; border-color: transparent;
   }
   #reader-settings-modal .rs-reset .material-symbols-outlined { margin: 0 !important; font-size: 20px !important; }
   #reader-settings-modal .rd-modal-shell > .relative.flex-1 { position: static; }
   #reader-settings-close { width: 44px !important; height: 44px !important; top: 22px !important; right: 8px !important; }
   #reader-settings-close .material-symbols-outlined { font-size: 22px !important; }
   #reader-settings-modal .rs-panel > h2 { display: none; }
   #reader-settings-modal .rs-panel { --tw-space-y-reverse: 0; }
   #reader-settings-modal .rs-panel > * + * { margin-top: 18px !important; }
   #reader-settings-modal .px-5.py-6 { padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
   #reader-settings-modal .rs-label { font-size: 10.5px; font-weight: 900; letter-spacing: 0.2em; margin-bottom: 8px; }
   .rs-swatches { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
   .rs-swatches .rd-theme-opt {
      position: relative; height: 40px; padding: 0; overflow: hidden; border-radius: 10px;
      border: 1px solid rgba(128, 128, 128, 0.35); background: transparent;
   }
   .rs-swatches .rd-theme-opt.active { border: 2px solid var(--accent); }
   .rs-swatches .rd-theme-dot { position: absolute; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; }
   .rs-swatches .rd-theme-dot::after { width: 12px; height: 12px; right: 4px; bottom: 4px; }
   .rs-swatches .rd-theme-opt > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
   #rs-font-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
   #rs-font-grid.is-collapsed .rs-font-btn:nth-child(n+4):not(.active) { display: none; }
   #reader-settings-modal .rs-font-btn {
      height: 46px; padding: 0 6px; border-radius: 10px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
      font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text);
   }
   #reader-settings-modal .rs-font-btn.active { border-width: 2px; box-shadow: none; }
   #reader-settings-modal .rs-font-btn .preview-text { display: none; }
   #reader-settings-modal [data-rs-font="Lora"] { font-family: Lora, Georgia, serif; }
   #reader-settings-modal [data-rs-font="Merriweather"] { font-family: Merriweather, Georgia, serif; font-size: 12.5px; }
   #reader-settings-modal [data-rs-font="Georgia"] { font-family: Georgia, serif; }
   #reader-settings-modal [data-rs-font="Source Serif 4"] { font-family: 'Source Serif 4', Georgia, serif; font-size: 12.5px; }
   #reader-settings-modal [data-rs-font="Inter"] { font-family: Inter, sans-serif; }
   #reader-settings-modal [data-rs-font="Atkinson Hyperlegible"] { font-family: 'Atkinson Hyperlegible', Inter, sans-serif; }
   #reader-settings-modal [data-rs-font="System"] { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
   .rs-more { margin-top: 6px; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; }
   /* Size: A- [value] A+, the slider hides. */
   #rs-fontSize-range { display: none; }
   #rs-fontSize-input { flex: 1; width: auto; height: 46px; border-radius: 10px; font-size: 15px; font-weight: 800; }
   .rs-step {
      width: 52px; height: 46px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--border-strong);
      background: transparent; color: var(--text); font-size: 13px; font-weight: 800;
   }
   .rs-step-up { font-size: 17px; }
   #reader-settings-modal .rd-muted:has(#rs-fontSize-val) { display: none; }
   /* Auto-scroll speed has no slider: its box stays, between touch-sized arrows. */
   #reader-settings-modal input.rs-num:not(#rs-fontSize-input):not(#rs-autoscroll-input) { display: none; }
   #reader-settings-modal .rs-stepper { display: flex; width: 100%; }
   #reader-settings-modal .rs-step-btn { width: 52px; height: 46px; border-radius: 10px; }
   #rs-autoscroll-input { flex: 1; width: auto; height: 46px; border-radius: 10px; font-size: 16px; font-weight: 800; }
   #reader-settings-modal .rs-range { height: 6px; }
   #reader-settings-modal input[type="number"], #reader-settings-modal .rs-hex, #reader-settings-modal .rs-select { font-size: 16px; }
   #reader-settings-modal .rs-seg-btn { min-height: 44px; font-size: 11.5px; letter-spacing: 0.04em; border-radius: 10px; }
   #reader-settings-modal .rd-hint { font-size: 11.5px !important; }

}