/* ════════════════════════════════════════════════════════════════════════
   PHASE 158 — Tablet writer: maximise the writing area
   On tablets the floating element pill (#mode-indicator) and the word-count
   bar (#editor-stats) are wide and sit over the page — worst in landscape with
   the soft keyboard up, where writing space is already halved. This slims both,
   drops the word count while you're typing, and strips chrome in focus mode.
   Companion to phase155 (which lifts the bottom controls above the keyboard).

   Pattern borrowed from iPad scriptwriting apps (Final Draft, WriterDuet,
   Highland/Slugline): keep the page maximal — the element control is a compact
   picker, word count is a glance not a banner, and focus mode is just the page.
   phase159-tablet-writer-tags.js adds tag-on-selection so tagging no longer
   needs the sidebar.
   ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 761px) and (max-width: 1024px) {

  /* ── Element pill → a compact picker ──────────────────────────────────────
     The pill showed a redundant "DIALOGUE  → ACTION  [Dialogue ▾]". Keep only
     the <select>: it already shows the current element AND lets you jump to any
     of them (better on a tablet than tap-to-cycle through 11 types). */
  #mode-indicator {
    bottom: 12px !important;
    padding: 5px 8px !important;
    gap: 5px !important;
  }
  #mode-indicator #mode-text,
  #mode-indicator .p147-next { display: none !important; }
  #mode-indicator #block-type-select {
    display: inline-block !important;
    font-size: .8rem;
    padding: 5px 8px;
    max-width: 150px;
    pointer-events: auto !important;
  }

  /* ── Word count → thin, and out of the way while writing ──────────────────
     Reference info you don't need mid-sentence. Thin it; and while the keyboard
     is up (phase155 sets [data-tablet-keyboard]) hide it entirely so the page
     gets the room. It returns the moment the keyboard closes. The header keeps
     its own "Saved" indicator, so nothing critical is lost. */
  #editor-stats.editor-statusbar {
    padding: 3px 10px !important;
    font-size: .66rem !important;
    gap: 5px !important;
    max-width: 92vw;
  }
  html[data-tablet-keyboard="true"] #editor-stats.editor-statusbar {
    display: none !important;
  }

  /* ── Focus mode: the page and nothing else ────────────────────────────────*/
  body.focus-mode #editor-stats.editor-statusbar { display: none !important; }
  body.focus-mode #mode-indicator { opacity: .4; }
  body.focus-mode #mode-indicator:hover,
  body.focus-mode #mode-indicator:focus-within { opacity: 1; }

  /* ── Tag-on-selection float bar (shown by phase159-tablet-writer-tags.js) ──
     18 categories won't fit a tablet width, so make it a tidy horizontally
     scrollable strip that sits just above the keyboard. Tag right at the
     selection — no reaching or scrolling the sidebar. */
  #tag-float-bar.visible {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 96vw;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding: 7px 9px;
  }
  #tag-float-bar.visible::-webkit-scrollbar { display: none; }
  #tag-float-bar .tag-float-btn { flex: 0 0 auto; min-height: 34px; }
}