/* Typing in Dew on an iPad (IPAD-KEYBOARD-1, IDEA 1062). js/typing-room.js is the script; js/keyboard-room.js says when the keyboard is up.
   Four things, all about a finger and an on-screen keyboard (a coarse pointer); a mouse and a keyboard see none of it but the bar's absence.

   1. Every text field is at least 16px. Safari on iPad zooms the whole page when a field smaller than 16px gets the cursor, and does not zoom back,
      which "messes up the interface". The known fields are listed below; js/typing-room.js adds .t16 to any other that is smaller (one made by a script later).
   2. While the keyboard is up in a note, the box has the room: the things around it that only take height (the AI area, the links row, the hint, the folders
      card, the crumbs, the list of pages on a narrow screen) step aside; they are back the moment the keyboard goes down. Nothing is rebuilt, nothing is
      removed from the page, and the field is never touched: only display changes on its neighbours.
   3. The slim bar on the top edge of the keyboard (#typing-bar): fixed, placed by js/typing-room.js inside the visual viewport (the part of the screen people
      see), 52px high, with 44px targets. It sits over the lowest 52px of the window, so the window keeps that much room below the note.
   The window boxes keep the heights dew.css, phone-tidy.css and js/keep-in-view give them (dvh with a vh fallback is already there); this file adds none. */

/* ---- 1. at least 16px under a finger ---- */
@media (pointer: coarse) {
  #search, #search-map, #search-web, #search-ask, #lp-q, #nx-input, #set-search, #fb-text, #st-q, .t16 { font-size: 16px; }
  #note-title { font-size: max(16px, calc(20px * var(--ts))); }
  #notes { font-size: max(16px, calc(16px * var(--ts))); }
  .t16 { font-size: 16px !important; }
}

/* ---- 2. the note has the room while the keyboard is up ---- */
.panel.typing-note :is(.nx-ai, .nx-split, #your-folders, .readonly-note, #crumbs, #notes-page > .hint, #note-links, #note-link, #note-delete) { display: none; }
.panel.typing-note #notes { flex: 1 1 auto; min-height: 96px; }
@media (max-width: 560px) {
  .panel.typing-note .explorer > #places { display: none; }
}
/* the bar lies over the lowest 52px of the window: the note keeps clear of it */
body.typing-bar-on .panel.typing-note #notes-page { padding-bottom: 52px; }
body.typing-bar-on .panel.typing-note .explorer-main { padding-bottom: 0; }

/* ---- 3. the bar on the keyboard ---- */
#typing-bar {
  position: fixed; z-index: 9000; left: 0; top: 0; width: 100%; height: 52px; box-sizing: border-box;
  display: flex; align-items: center; gap: 4px; padding: 4px 8px;
  border-top: 1px solid var(--line); background: var(--glass-strong, rgba(30, 30, 36, .94)); backdrop-filter: blur(14px);
  color: var(--text); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#typing-bar[hidden] { display: none; }
#typing-bar button {
  flex: none; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#typing-bar button:active { background: rgba(var(--tint), .14); }
#typing-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#typing-bar .tb-gap { flex: 1 1 auto; }
#typing-bar .tb-done { color: var(--accent); font-weight: 600; padding: 0 14px; }
#typing-bar [hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  #typing-bar:not([hidden]) { animation: tb-in .12s ease-out; }
}
@keyframes tb-in { from { opacity: 0; } }