/* Mobile and touch layer. Loaded last. Three parts: touch behaviour (any coarse pointer), compact pages and modals, rich text and menus.
   The compact board chrome (topbar, dock, sheets) lives in mobile-board.css. Desktop with a mouse is untouched. */

/* Page level: no rubber band, no double tap zoom outside the canvas, no grey tap flash */
html, body { overscroll-behavior: none; }
body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.topbar-more, .topbar-menu, .add-sheet, .dock-add { display: none; }
.canvas.easing .world, .canvas.easing .canvas-grid { transition: transform 260ms var(--ease-out); }
.canvas.link-pending { cursor: crosshair; }
.canvas.link-pending .card:not(.selected) { box-shadow: 0 0 0 2px rgba(var(--cyan-rgb), 0.5); }

/* Nothing may depend on hover: no sticky tooltips, no lift or tilt after a tap */
@media (hover: none) {
  [data-tip]::after { display: none; }
  .btn:hover, .dock-btn:hover, .die:hover, .feature:hover, .tpl:hover, .cast-tile:hover, .ability:hover, .accent-dot:hover, .cl-box:hover { transform: none; }
  .btn:hover::before { transform: translateX(-70%) skewX(-18deg); }
  .card-tool.port:hover { animation: none; }
  .cast-tile:hover .cast-img { transform: none; }
  .x-btn { opacity: 0.6; }
  .preview-board, .hero-visual:hover .preview-board { transform: none; }
}

@media (pointer: coarse) {
  /* iOS zooms the page when a field under 16px takes focus */
  input, textarea, select, .input, .textarea, .select, .board-title, .ed, .rt-editor,
  .card .card-body :is(input, textarea, select), .sheet-top .combo .input, .inspector :is(input, textarea, select) { font-size: 16px; }
  .ed.body, .ed.body.serif, .tl-item .ed.body, .rt-editor.ed.body { font-size: max(16px, calc(13.5px * var(--prose-scale))); }
  .ed.title { font-size: 18px; }
  .ability input, .stepper input { font-size: 16px; }

  /* Tap targets of 44px */
  .btn, .btn-sm, .die, .theme-opt, .wb-chip, .tp-chip, .rel-pick, .rel-chip { min-height: 44px; }
  .btn-icon { width: 44px; height: 44px; }
  .btn-sm { height: 44px; }
  .dock-btn { width: 48px; height: 48px; }
  .dock-btn .kbd { display: none; }
  .accent-row.accent-row { gap: 8px; }
  .accent-row .accent-dot { width: 34px; height: 34px; }
  .accent-custom input[type="color"] { inset: -4px; width: 44px; height: 44px; }
  .card-tool { width: 44px; height: 44px; margin: -10px -4px; pointer-events: none; }
  .card.selected .card-tool { pointer-events: auto; }
  .card-head { padding-top: 12px; }
  /* Corner and link handles keep a fingertip size on screen however far the board is zoomed out (--zoom is set on .world). */
  .card .resize { --hit: min(110px, calc(44px / var(--zoom, 1))); width: var(--hit); height: var(--hit); right: 0; bottom: 0; opacity: 0.6; background-repeat: no-repeat;
    background-size: calc(16px / var(--zoom, 1)) calc(16px / var(--zoom, 1)); background-position: right calc(6px / var(--zoom, 1)) bottom calc(6px / var(--zoom, 1)); }
  .card-tool.port::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(96px, calc(44px / var(--zoom, 1))); height: min(96px, calc(44px / var(--zoom, 1))); transform: translate(-50%, -50%); }
  .x-btn { width: 36px; height: 36px; }
  .add-line, .skill, .sheet-actions .btn { min-height: 36px; }
  .cl-box { width: 26px; height: 26px; }
  .step-btn { width: 28px; height: 28px; }
  .cast-actions .btn { min-width: 44px; }

  /* Scrolling panels scroll, the canvas never does */
  .inspector, .word-bank, .codex-panel, .tables-panel, .dice-tray, .modal, .cx-main, .wb-list, .tp-list, .tp-out, .dice-log, .rel-chips { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* touch-action only reaches up to the nearest scroll container, so every card needs its own: the board owns touch,
     except a card body that really overflows (marked .scrolls by canvas.js), which scrolls on a vertical drag. */
  .card, .card * { touch-action: none; }
  .card .card-body.scrolls, .card .card-body.scrolls * { touch-action: pan-y; }
  .card-body { overscroll-behavior: contain; }
  .canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .canvas :is(.ed, input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }

  /* Cheap cards: a flat hairline shadow on every card, no big blurred ones */
  .card, .card:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
  .card.selected, .card.link-target { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.6); }
  .card.link-target { box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), 0.6); }
  .toast, .dice-tray, .inspector, .modal { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }

  /* Typeable dropdown menu */
  .combo-menu { max-width: calc(100vw - 16px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; font-size: 16px; }
  .combo-menu li { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; white-space: normal; }

  /* Rich text toolbar: docked above the keyboard, scrolls sideways, menus open as a sheet above it */
  .rt-toolbar.is-docked { left: 0; right: 0; top: auto; bottom: var(--rt-bottom, 0px); width: auto; max-width: none; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-radius: 14px 14px 0 0; border-width: 1px 0 0;
    overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35); }
  .rt-toolbar.is-docked::-webkit-scrollbar { display: none; }
  .rt-toolbar.is-docked .rt-row { flex: none; flex-wrap: nowrap; gap: 2px 6px; padding: 0 10px 0 0; border: 0; }
  .rt-toolbar.is-docked .rt-row + .rt-row { padding: 0 10px; border: 0; border-left: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18)); }
  .rt-toolbar.is-docked.is-caret .rt-row-color, .rt-toolbar.is-docked.is-caret .rt-drop { display: flex; }
  .rt-toolbar .rt-btn { min-width: 44px; height: 44px; font-size: 16px; }
  .rt-toolbar .rt-swatch { min-width: 0; width: 34px; height: 34px; margin: 0 3px; }
  .rt-toolbar .rt-drop-font .rt-drop-trigger { width: 150px; } .rt-toolbar .rt-drop-size .rt-drop-trigger { width: 96px; }
  .rt-toolbar.is-docked .rt-panel { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(var(--rt-bottom, 0px) + 68px + env(safe-area-inset-bottom)); max-height: min(50dvh, 340px); min-width: 0; touch-action: pan-y; overscroll-behavior: contain; }
  .rt-toolbar.is-docked .rt-panel-orn { flex-wrap: wrap; }
  .rt-font-item, .rt-size-item { min-height: 44px; }
  .rt-orn-item { width: 44px; height: 44px; }
}

/* Compact pages: landing, library, modals */
@media (max-width: 820px), (max-height: 520px) and (pointer: coarse) {
  .landing, .library { min-height: 100vh; min-height: 100dvh; }
  .nav { flex-wrap: wrap; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
  .nav-links { display: contents; }
  .nav-left { gap: 10px; }
  .nav .brand { flex: 1 1 auto; min-width: 0; }
  .nav .theme-switch { display: flex; order: 9; flex: 1 0 100%; margin: 0; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
  .nav .theme-switch::-webkit-scrollbar { display: none; }
  .nav .theme-switch .theme-prev { width: 78px; }
  .hero { padding: 22px max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left)); gap: 24px; }
  .hero h1 { font-size: clamp(32px, 9.5vw, 46px); }
  .hero-visual { height: 340px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .section { padding: 40px 16px; }
  .features, .templates { gap: 12px; margin-top: 24px; }
  .footer { padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); }
  .library { padding: 16px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .library-head { margin: 8px 0 18px; }
  .library-head h1 { font-size: 34px; }
  .cast-grid { grid-template-columns: 1fr; gap: 12px; }
  .cast-cover { aspect-ratio: 16 / 9; }
  .cast-tile.new { aspect-ratio: auto; min-height: 96px; grid-auto-flow: column; justify-content: center; }
  .cast-tile.new svg { width: 24px; height: 24px; }

  .modal-backdrop { inset: auto 0 auto 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); place-items: end center; }
  .modal { width: 100%; max-height: calc(100% - 8px); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 20px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .modal h2 { font-size: 21px; }
  .modal .sub { margin-bottom: 14px; }
  .modal .row .btn { flex: 1 1 0; }
  .tpl-grid { grid-template-columns: 1fr; gap: 8px; margin: 12px 0; }
  .tpl-grid .tpl { min-height: 0; padding: 10px 14px; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; }
  .tpl-grid .tpl .emoji { grid-row: 1 / span 2; margin: 0; }
  .tpl-grid .tpl h3, .tpl-grid .tpl p { padding-right: 0; }
  .tpl-grid .tpl .go { display: none; }
  .theme-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}

@media (max-width: 520px) {
  .nav .brand-name small, .nav-links > a.btn-ghost, .home-pill span, .nav-left .brand-name { display: none; }
  .home-pill { padding: 0; width: 44px; height: 44px; justify-content: center; }
  .templates { grid-template-columns: 1fr; }
  .tpl { min-height: 150px; }
}