/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSE — Mobile Polish v1
   Native-quality experience on all touchscreen devices.

   Scope: anything that makes the app feel cheap or "webby" on touch.
   Ordered by layer — from global primitives to specific components.

   Contains NO layout changes — those live in 3-layout.css.
   Contains NO desktop-only rules — everything here is either:
     (a) touch-input scoped via @media (hover: none) / (pointer: coarse)
     (b) a global primitive that is harmless on desktop (tap-highlight, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1. GLOBAL PRIMITIVES
   Applied to all elements; Safari / Chrome on touch ignore most of these.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1a. Kill the grey iOS tap-flash that appears on every tapped element.
       Must be on * — cannot be undone per-element after the fact on iOS.
       Desktop browsers ignore this property. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 1b. Prevent long-press callout (copy / look-up / share sheet) on
       chrome elements that aren't meant to be selected.
       Applied selectively — NOT on the editor or any text input. */
#topbar,
#toolbar-row,
#toolbar-mobile,
#sidebar,
.dropdown,
.modal,
.modal-overlay,
.sp-header,
.tb-btn,
.topbar-btn,
.dropdown-item,
.btn,
.hcp-swatch {
  -webkit-touch-callout: none;
}

/* 1c. Prevent accidental text selection during fast taps/swipes on UI chrome.
       The editor (.ProseMirror) is explicitly excluded so text selection
       in documents still works normally. */
#topbar,
#toolbar-row,
#toolbar-mobile,
.sp-header,
.tb-btn,
.topbar-btn,
.dropdown-item,
.btn,
.hcp-swatch,
.sp-close,
.sp-item,
.sp-section-label {
  user-select: none;
  -webkit-user-select: none;
}

/* 1d. touch-action: manipulation on every interactive element.
       Eliminates the 300ms click delay universally — not just the 2 swatches
       that had it in 8-components.css. Safe on desktop (no effect). */
button,
[role="button"],
[role="menuitem"],
[role="option"],
a,
label,
.tb-btn,
.topbar-btn,
.dropdown-item,
.btn,
.sp-item,
.sp-close,
.hcp-swatch,
.hcp-remove,
.sp-d-row,
.topbar-title-btn,
.toolbar-scroll-wrap {
  touch-action: manipulation;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. HOVER STATE SUPPRESSION ON TOUCH
   On pointer: coarse devices, :hover states are "sticky" — they fire on
   first tap and stay active. This makes buttons look permanently pressed.
   We disable hover visual feedback for touch-primary devices only.
   Keyboard :focus-visible and :active states are untouched.
   ══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) {
  /* Toolbar buttons */
  .tb-btn:hover {
    background: transparent;
    color: var(--text-sec);
  }
  .tb-btn.is-active:hover {
    background: var(--fill-selected);
    color: var(--accent);
  }
  [data-theme="dark"] .tb-btn.is-active:hover {
    background: rgba(var(--accent-rgb), .30);
    color: #A8C0FF;
  }

  /* Topbar buttons */
  .topbar-btn:hover {
    background: transparent;
    color: var(--text-muted);
  }
  .topbar-btn.is-active:hover {
    background: var(--fill-selected);
    color: var(--accent);
  }

  /* Dropdown items */
  .dropdown-item:hover {
    background: transparent;
    color: var(--text-sec);
  }
  .dropdown-item.is-destructive:hover {
    background: transparent;
  }

  /* Sidebar items */
  .sp-item:hover,
  .sp-close:hover {
    background: transparent;
    color: inherit;
  }
  .sp-d-row:hover {
    background: transparent;
  }

  /* Buttons */
  .btn--primary:hover    { filter: none; }
  .btn--secondary:hover  { background: var(--fill-subtle); color: var(--text-sec); }
  .btn--ghost:hover      { background: transparent; }
  .btn--danger:hover     { background: rgba(138,48,48,.1); }

  /* Link popover */
  .link-apply-btn:hover  { background: var(--accent); }
  .link-remove-btn:hover { background: transparent; color: var(--text-muted); }

  /* Highlight swatches */
  .hcp-swatch:hover { transform: none; box-shadow: none; }
  .hcp-remove:hover { background: transparent; }

  /* Scrollbar: hide entirely on touch — they're invisible anyway and
     the 4px wide track can accidentally trigger resize cursors */
  ::-webkit-scrollbar { display: none; }
  * { scrollbar-width: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   3. ACTIVE / PRESS STATES — tactile feedback on tap
   :active gives physical confirmation without hover side-effects.
   Only applied on pointer: coarse so desktop click behaviour is unchanged.
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  .tb-btn:active {
    background: var(--fill-active);
    color: var(--text);
    /* Micro-scale for physical press feel */
    transform: scale(0.92);
    transition: transform 60ms var(--ease), background 60ms var(--ease);
  }
  .tb-btn.is-active:active {
    background: rgba(var(--accent-rgb), .18);
  }

  .topbar-btn:active {
    background: var(--fill-active);
    transform: scale(0.90);
    transition: transform 60ms var(--ease);
  }

  .dropdown-item:active {
    background: var(--fill-active);
    color: var(--text);
  }

  .btn--primary:active  { filter: brightness(0.92); transform: scale(0.97); }
  .btn--secondary:active { background: var(--fill-active); transform: scale(0.97); }
  .btn--ghost:active    { background: var(--fill-active); }

  .sp-item:active {
    background: var(--fill-active);
    transition: background 60ms var(--ease);
  }

  .hcp-swatch:active {
    transform: scale(0.88);
    transition: transform 80ms var(--ease);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   4. MINIMUM TAP TARGETS — 44×44 px (Apple HIG / WCAG 2.5.5)
   Buttons that are visually smaller get an invisible touch extension via
   ::after pseudo-elements. The visual appearance is unchanged.
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* Toolbar buttons are 32×32 visually — extend to 44×44 touch area */
  .tb-btn {
    position: relative;
  }
  .tb-btn::after {
    content: '';
    position: absolute;
    /* Centre a 44px touch zone over the 32px button */
    inset: -6px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Topbar buttons — already 40px wide but only 48px tall shell, fine */
  .topbar-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Sidebar close button */
  .sp-close {
    width: 44px;
    height: 44px;
  }

  /* Modal close button */
  .modal-close {
    width: 44px;
    height: 44px;
  }

  /* Dropdown items — ensure full-height tap zone */
  .dropdown-item {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Sidebar nav items */
  .sp-item {
    min-height: 44px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   5. MOBILE TOOLBAR — height and button sizing for touch
   The toolbar is 40px on desktop. On mobile we give it more breathing room
   and make the icon buttons larger for comfortable thumb use.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Taller toolbar on mobile for easier thumb reach */
  :root {
    --toolbar-h: 50px;
  }

  /* Larger touch buttons in the mobile toolbar */
  #toolbar-mobile .tb-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--r-lg);
  }
  #toolbar-mobile .tb-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Wider select controls for easier tapping */
  #toolbar-mobile .tb-select {
    height: 34px;
    font-size: 13px;
  }

  /* Dividers in mobile toolbar: taller for visual grouping */
  #toolbar-mobile .tb-divider {
    height: 22px;
    margin: 0 4px;
  }

  /* More generous gap between toolbar groups */
  #toolbar-mobile .toolbar-inner {
    gap: 2px;
    padding: 0 8px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   6. TOPBAR — mobile sizing and spacing
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Slightly taller topbar on mobile */
  :root {
    --topbar-h: 52px;
  }

  /* Topbar buttons: full 44px height, comfortably tappable */
  .topbar-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--r-lg);
  }

  /* Title button — easier to tap for rename */
  .topbar-title-btn {
    padding: 6px 10px;
    border-radius: var(--r-md);
    min-height: 36px;
  }

  /* Status indicator — slightly larger on mobile */
  .topbar-status {
    font-size: 12px;
    padding: 0 8px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. EDITOR SCROLL — native momentum, overscroll, and rubber-band
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Native momentum scrolling — the gold standard for iOS feel */
  #editor-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;    /* prevent pull-to-refresh in PWA/web clip */
    scroll-behavior: auto;             /* no CSS smooth-scroll — let the OS handle it */
  }

  /* Extra bottom breathing room so last line isn't hidden by toolbar */
  #editor-paper {
    padding-bottom: 80px;
  }

  /* Slightly larger font for comfortable reading without zooming */
  .ProseMirror {
    font-size: max(var(--ed-font-size), 17px);
    line-height: max(var(--ed-line-height), 1.75);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   8. SIDEBAR BOTTOM SHEET — polish and scrolling behaviour
   The drag/snap JS is in sidebar.js. This layer handles visual refinements.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Native momentum in panel bodies */
  .sp-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Hide scrollbar track — native gesture replaces it */
    scrollbar-width: none;
  }
  .sp-body::-webkit-scrollbar { display: none; }

  /* Thicker, more visible drag handle — easier to find with thumb */
  #sidebar::before {
    width: 48px;
    height: 5px;
    border-radius: 3px;
    background: var(--border-strong);
    margin: 12px auto 0;
    /* Extend touch area downward via padding trick */
    padding-bottom: 8px;
    background-clip: content-box;
  }

  /* Panel header: taller for comfortable touch dismiss */
  .sp-header {
    height: 52px;
    padding: 0 12px;
  }

  /* Section items in sidebar — comfortable touch height */
  .sp-item {
    min-height: 44px;
    padding: 10px var(--sp-pad);
  }

  /* Document list rows — generous touch target */
  .sp-d-row {
    min-height: 52px;
    padding: 12px var(--sp-pad);
  }

  /* Active press on document rows */
  .sp-d-row:active {
    background: var(--fill-active);
  }

  /* Overlay — warmer, more opaque on mobile (smaller screen = needs more focus) */
  #overlay {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   9. DROPDOWNS — bottom-sheet style on mobile
   On small screens, a centred dropdown that appears mid-viewport is awkward
   to reach. We convert dropdowns to anchored bottom sheets on mobile.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* When the dropdown is triggered from the toolbar (bottom of screen),
     reanchor it to appear above the trigger, with a comfortable gap */
  #toolbar-mobile .dropdown,
  #toolbar-row .dropdown {
    bottom: calc(100% + 10px);
    top: auto;
    transform-origin: bottom center;
    transform: translateY(8px) scale(0.96);
    left: 50%;
    translate: -50% 0;
    max-width: min(280px, 92vw);
    border-radius: var(--r-2xl);
  }

  #toolbar-mobile .dropdown.is-open,
  #toolbar-row .dropdown.is-open {
    transform: translateY(0) scale(1);
    translate: -50% 0;
  }

  /* Topbar dropdowns: anchor below the topbar, right-aligned */
  #topbar .dropdown {
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    transform-origin: top right;
    max-width: min(260px, 92vw);
    border-radius: var(--r-2xl);
  }

  /* Dropdown items: comfortable touch height */
  .dropdown-item {
    min-height: 48px;
    padding: 12px var(--sp-4);
    font-size: 14px;
  }

  .dropdown-item svg {
    width: 16px;
    height: 16px;
  }

  /* Section labels in dropdowns — clearer hierarchy */
  .dropdown-section-label {
    padding: 10px var(--sp-4) 6px;
    font-size: 11px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   10. MODALS — sheet-style on mobile
   A centred modal on a small screen wastes space and feels webby.
   We slide it in from the bottom as a sheet.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    max-height: 88svh;
    /* Slide in from bottom */
    transform: translateY(100%);
    transition: transform var(--t-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Safe area padding at the bottom */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .modal-overlay.is-open .modal {
    transform: translateY(0);
  }

  /* Drag handle pill on modals (mirrors sidebar) */
  .modal::before {
    content: '';
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--border-strong);
    margin: 12px auto 0;
    flex-shrink: 0;
  }

  /* Adjust header to account for the handle */
  .modal-header {
    padding-top: 8px;
  }

  /* Full-width buttons in modal footer */
  .modal-footer {
    flex-direction: column-reverse;
    padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
    gap: var(--sp-2);
  }
  .modal-footer .btn {
    width: 100%;
    justify-content: center;
    height: 48px;
    font-size: 15px;
    border-radius: var(--r-lg);
  }

  /* Keyboard-aware modal: shift up when keyboard opens */
  .modal-overlay.is-open {
    padding-bottom: env(keyboard-inset-height, 0px);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   11. LINK POPOVER — mobile layout
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Link popover: wider and with better touch targets */
  .link-popover {
    min-width: min(340px, 94vw);
    border-radius: var(--r-xl);
    padding: var(--sp-3);
  }

  .link-popover input {
    height: 44px;
    font-size: 15px;
    border-radius: var(--r-md);
    /* Prevent iOS from zooming in on focus */
    font-size: max(16px, 15px);
  }

  .link-apply-btn,
  .link-remove-btn {
    height: 44px;
    font-size: 14px;
    border-radius: var(--r-md);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   12. FORM INPUTS — prevent iOS zoom, native feel
   iOS Safari zooms into inputs with font-size < 16px. We ensure all
   text inputs meet the threshold.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  input[type="text"],
  input[type="search"],
  input[type="url"],
  input[type="email"],
  textarea {
    font-size: max(16px, 1em);
    /* Rounded corners look native on iOS */
    border-radius: var(--r-md);
  }

  /* Search input in Find panel */
  #search-query {
    font-size: 16px;
    height: 44px;
    padding: 0 var(--sp-3);
  }

  /* Appearance font size input */
  #font-size-input {
    font-size: 16px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   13. HIGHLIGHT COLOUR PICKER — touch-sized swatches
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  .hcp-swatch {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   14. SCROLLABLE AREAS — bounce / rubber-band on iOS
   Ensures all scrollable containers feel native.
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* All explicitly scrollable containers get momentum + contain */
  .sp-body,
  #editor-scroll,
  .modal-body,
  #toolbar-mobile .toolbar-inner {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Editor: allow natural scroll but block page-level pull-to-refresh */
  #editor-scroll {
    overscroll-behavior-y: contain;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   15. FOCUS RINGS — only on keyboard, suppressed on touch
   iOS already handles its own focus indication for accessibility.
   Our CSS :focus-visible rings look odd after a tap.
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* Suppress focus rings that appear after touch — they persist visually */
  :focus-visible {
    outline: none;
  }

  /* Keep a subtle ring only on inputs, for accessibility */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   16. TOOLTIP SUPPRESSION ON TOUCH
   Tooltips (data-tip) serve no purpose on touch and the JS already
   suppresses them via pointerType detection. This CSS hides the tip
   element entirely on touch-primary devices as a belt-and-suspenders.
   ══════════════════════════════════════════════════════════════════════════ */

@media (hover: none) {
  #tooltip-root {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   17. TABLET (768px–1024px) — intermediate adjustments
   Tablets have large screens but coarse pointer. Give them desktop layout
   but with touch-appropriate target sizes and no hover states.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) {
  /* Sidebar stays as desktop column but with touch-sized items */
  .sp-item {
    min-height: 44px;
  }

  .sp-header {
    height: 52px;
  }

  /* Toolbar buttons — slightly larger on tablet */
  .tb-btn {
    width: 36px;
    height: 36px;
  }

  /* Topbar buttons */
  .topbar-btn {
    width: 44px;
    height: 44px;
  }

  /* Dropdown items: more comfortable on tablet */
  .dropdown-item {
    min-height: 44px;
    padding: 10px var(--sp-4);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   18. PWA / HOME SCREEN ADDITIONS
   When running as an installed PWA (display: standalone), we can add
   refinements that assume full native-app context.
   ══════════════════════════════════════════════════════════════════════════ */

@media (display-mode: standalone) {
  /* In standalone mode the status bar overlaps the top.
     The viewport-fit=cover + safe-area-inset-top combination handles this,
     but we add an explicit nudge for the topbar on notched devices. */
  #topbar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  }

  /* Bottom safe area already handled in layout.css toolbar padding,
     but reinforce for sidebar sheet in standalone mode */
  #sidebar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Remove the browser-style bottom padding that layout.css adds —
     standalone has no browser chrome to avoid. Already accounted for
     via canvas padding-bottom in 3-layout.css mobile block. */
}


/* ══════════════════════════════════════════════════════════════════════════
   19. APPEARANCE PANEL — touch-friendly range inputs
   The default browser range slider thumb is tiny on mobile.
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  input[type="range"] {
    height: 44px;       /* tall touch zone */
    cursor: default;    /* no pointer cursor on touch */
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
    background: var(--accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: default;
  }

  input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: default;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
  }

  input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   20. CITATIONS SHEET — mobile refinements
   Already bottom-positioned in 10-citations.css; this adds touch polish.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Citation list items — full touch height */
  .cite-item {
    min-height: 52px;
    padding: 12px var(--sp-4);
  }

  .cite-item:active {
    background: var(--fill-active);
  }

  /* Citation input area */
  .cite-search-input {
    font-size: 16px;   /* prevent iOS zoom */
    height: 44px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   21. SAFE-AREA INSETS — universal bottom gutter for notched devices
   Belt-and-suspenders. Most cases are already handled in layout.css.
   This catches any fixed-bottom element that might be added later.
   ══════════════════════════════════════════════════════════════════════════ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    /* toast notifications above home indicator */
    #toast-root {
      padding-bottom: calc(var(--toolbar-h) + env(safe-area-inset-bottom, 0px) + 8px);
    }
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   22. SMOOTH TRANSITIONS — native-calibrated easing
   Override any jarring transitions with values tuned for 60fps on mobile.
   iOS uses spring physics; we approximate with calibrated beziers.
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* Sidebar open/close: spring-approximated curve, slightly faster */
  #sidebar {
    transition: transform 280ms cubic-bezier(0.34, 1.20, 0.64, 1) !important;
  }

  /* When closed: standard deceleration (no overshoot on dismiss) */
  #sidebar[data-sidebar-open="false"] {
    transition: transform 240ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  /* Dropdown open: snappier on touch */
  .dropdown {
    transition: opacity 120ms var(--ease), transform 120ms var(--ease);
  }

  /* Overlay fade: faster — feels more responsive */
  #overlay {
    transition: opacity 200ms var(--ease);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   23. REDUCE MOTION — respect system accessibility preference
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  #sidebar,
  .dropdown,
  .modal,
  .modal-overlay,
  #overlay,
  .sp,
  .tb-btn,
  .topbar-btn {
    transition: none !important;
    animation: none !important;
  }
}