/* ==========================================================================
   PDFPlug Core Fix — 2026-10-18 overhaul (from Conroy's mobile audit)
   Mobile header, touch targets, active nav, handoff banner, template CTAs.
   Adapted from the audit's Module 2 to this site's real markup
   (header.site-head > .wrap > nav.nav, .tool-card grids).
   ========================================================================== */

/* 1. Mobile header: single-row horizontal scrollable pill bar instead of
      9 tiny links wrapping into two cramped rows. */
@media (max-width: 768px) {
  .site-head .wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  .site-head .nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    margin-left: 0 !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }

  .site-head .nav::-webkit-scrollbar { display: none; }

  .site-head .nav a {
    flex: 0 0 auto !important;
    /* Apple HIG minimum touch target */
    min-height: 44px !important;
    min-width: 44px;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* Active tool in the nav (set by pdfplug-core-fix.js) */
.site-head .nav a.pdfplug-nav-active {
  background: #16a34a !important;
  color: #ffffff !important;
}

/* 2. Handoff status banner */
.pdfplug-status-banner {
  margin: 14px auto;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.4;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}

.pdfplug-status-loading { background: #eff6ff; border: 1px solid #93c5fd; color: #1e3a8a; }
.pdfplug-status-success { background: #f0fdf4; border: 1px solid #86efac; color: #14532d; }
.pdfplug-status-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #7f1d1d; }

/* Dropzone drag-active state (shell.js toggles .over; keep parity) */
.drop.over, .studio-drop.over { border-color: #2563eb !important; background-color: #eff6ff !important; }

/* 3. Templates page: category filter cards + template card CTAs */
[data-filter] { transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; }

[data-filter].active-category {
  border: 2px solid #2563eb !important;
  background-color: #eff6ff !important;
}

/* NOTE: no !important on display here — the templates filter hides cards via
   inline style="display:none", which must be able to win. */
.tool-card[data-category] {
  display: flex;
  flex-direction: column;
}

.pdfplug-template-cta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #2563eb;
}

.pdfplug-template-cta strong {
  background: #2563eb;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 3b. Round 5 page containment: a page block can NEVER be wider than
      its card, and every layer is locked to the card's box. Backing-store
      pixels (DPR) live in canvas.width — display size is CSS only. */
.pp-page {
  position: relative !important;
  margin: 0 auto 14px auto !important;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  max-width: 100% !important;
}
.pp-page > canvas:first-child,
.pp-page > .pp-form-layer,
.pp-page > .pp-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.pp-page > canvas:first-child { display: block !important; }
.pp-form-layer { z-index: 4; }
.pp-overlay { z-index: 5; }
/* Round 5 AcroForm controls */
.pp-acro-text, .pp-acro-select { outline: none; }
.pp-acro-text:focus, .pp-acro-select:focus { border-color: #2563eb !important; background: rgba(37, 99, 235, 0.14) !important; }
.pp-acro-check:active, .pp-acro-sign:active { background: rgba(37, 99, 235, 0.2) !important; }

/* 4. Editor inline text box (Round 2): compact, proportional, explicit
      Done/Cancel — replaces the giant "Type here..." pill. */
.te-wrap {
  position: absolute;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.97);
  border: 1.5px solid #2563eb;
  border-radius: 6px;
  padding: 2px 4px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  transform: translateY(-50%);
  max-width: 88vw;
  pointer-events: auto;
}

.te-input {
  /* Round 5: a <textarea> — auto-sizing multi-line entry */
  width: 230px;
  min-width: 160px;
  max-width: calc(100vw - 110px);
  border: none !important;
  outline: none !important;
  background: transparent !important;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  /* 16px: compact, and prevents iOS/Android auto-zoom on focus */
  font-size: 16px !important;
  line-height: 1.25 !important;
  padding: 2px 4px !important;
  color: #111827;
}

.te-done {
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
}

.te-del {
  background: #fee2e2;
  color: #b91c1c;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-height: 32px;
}

/* 5. Homepage secondary image picker (documents are the primary button) */
.studio-img-pick {
  position: relative;
  max-width: 760px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  padding: 10px;
  min-height: 44px;
}

.studio-img-pick:active { color: #1d4ed8; }

/* 6. Round 3 app shell: full-screen editor on mobile, top bar, bottom
      dock, loading modal, toast, mini bar, bottom sheets. */
.pp-topbar {
  display: none;
  height: 56px;
  flex: 0 0 56px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 8px;
}

.pp-topbar .pp-fname {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.pp-top-actions { display: inline-flex; align-items: center; gap: 6px; }

.pp-icon-btn {
  width: 40px; height: 40px;
  border-radius: 10px; border: none; background: transparent;
  color: #334155; font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

.pp-done-btn {
  height: 40px; padding: 0 16px;
  border-radius: 10px; border: none;
  background: #22c55e; color: #ffffff;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.28);
}

.tbtn-lbl { display: none; }

@media (max-width: 900px) {
  body.pp-editor-open { overflow: hidden !important; height: 100dvh; }

  #workarea.pp-shell {
    position: fixed; inset: 0; z-index: 1200;
    display: flex !important; flex-direction: column;
    height: 100dvh; background: #eef2f6;
  }

  #workarea.pp-shell .pp-topbar { display: flex; order: 0; }
  #workarea.pp-shell #text-controls,
  #workarea.pp-shell #draw-controls { order: 1; background: #fff; margin: 0; padding: 8px; }
  #workarea.pp-shell #stage-wrap {
    order: 2; flex: 1 1 auto; overflow: auto;
    border: none !important; border-radius: 0 !important;
    background: #eef2f6; padding: 12px 6px 24px;
  }
  #workarea.pp-shell .edit-bottombar { order: 3; background: #fff; }
  #workarea.pp-shell .edit-toolbar {
    order: 4; background: #fff; border-top: 1px solid #e2e8f0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; margin: 0;
  }
  #workarea.pp-shell .row.mt { display: none; } /* topbar ✓ Done replaces the Apply row */
  #workarea.pp-shell .tbtn {
    flex-direction: column; gap: 2px;
    min-width: 52px; min-height: 52px; height: auto;
  }
  #workarea.pp-shell .tbtn-lbl { display: block; font-size: 10px; font-weight: 600; }
  /* Page/zoom bar stays on ONE line in the shell (it wrapped the + button
   * onto a second row at 390px and pushed the bar off the right edge). */
  #workarea.pp-shell .edit-bottombar {
    flex-wrap: nowrap; gap: 6px; padding: 6px 8px; overflow-x: auto;
  }
  #workarea.pp-shell .edit-bottombar > * { flex: 0 0 auto; }
  #workarea.pp-shell .edit-bottombar button { min-width: 42px; padding: 6px 8px; }
  #workarea.pp-shell #pginfo { font-size: 13px; }
}

/* Loading modal with productivity tip */
.pp-loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

.pp-loading-card {
  width: 100%; max-width: 380px;
  background: #ffffff; border-radius: 20px;
  padding: 24px 20px; text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.pp-loading-title { font-size: 18px; font-weight: 700; color: #0f172a; margin: 0 0 14px; }

.pp-progress-track {
  width: 100%; height: 6px; background: #e2e8f0;
  border-radius: 999px; overflow: hidden; margin-bottom: 18px;
}

.pp-progress-bar {
  height: 100%; width: 15%;
  background: #2563eb; border-radius: 999px;
  transition: width 0.35s ease;
}

.pp-tip-box {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 14px; padding: 14px; text-align: left;
}

.pp-tip-badge {
  display: inline-flex; background: #eff6ff; color: #2563eb;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 8px;
}

.pp-tip-text { font-size: 13px; color: #475569; line-height: 1.45; margin: 0; }

/* Instruction toast */
.pp-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 150px; z-index: 9995;
  background: rgba(30, 41, 59, 0.95); color: #ffffff;
  padding: 10px 16px; border-radius: 12px;
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-width: 92vw;
}

@media (min-width: 901px) { .pp-toast { bottom: 28px; } }

.pp-toast button {
  background: none; border: none; color: #94a3b8;
  font-size: 16px; cursor: pointer; padding: 0;
}

/* Selected-text mini bar [ T↓ | T↑ | ✏️ | 🗑️ ] */
.pp-minibar {
  position: fixed; z-index: 9996;
  display: inline-flex; gap: 2px;
  background: #334155; border-radius: 8px; padding: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.pp-minibar button {
  width: 38px; height: 34px;
  border: none; background: transparent; color: #ffffff;
  font-size: 14px; font-weight: 700; border-radius: 6px; cursor: pointer;
}

.pp-minibar button:active { background: rgba(255, 255, 255, 0.18); }

/* Bottom sheets (export sheet + homepage tools sheet) */
.pp-sheet-backdrop {
  position: fixed; inset: 0; z-index: 9994;
  background: rgba(15, 23, 42, 0.5);
  display: none; align-items: flex-end; justify-content: center;
}

.pp-sheet-backdrop.open { display: flex; }

.pp-bottom-sheet {
  width: 100%; max-width: 540px;
  background: #ffffff; border-radius: 22px 22px 0 0;
  padding: 12px 18px 28px;
  max-height: 85dvh; overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2);
}

.pp-sheet-pill {
  width: 42px; height: 5px; background: #cbd5e1;
  border-radius: 999px; margin: 0 auto 14px;
}

.pp-export-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 14px 0 18px;
}

.pp-format-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding: 12px;
  border: 1.5px solid #e2e8f0; border-radius: 12px;
  cursor: pointer; background: #ffffff;
  font-weight: 700; font-size: 14px; color: #0f172a;
}

.pp-format-card.selected { border-color: #2563eb; background: #eff6ff; }
.pp-format-tag { font-size: 11px; font-weight: 700; }

.pp-filename-input {
  width: 100%; height: 44px;
  border: 1px solid #cbd5e1; border-radius: 10px;
  padding: 0 12px; font-size: 14px;
  margin: 6px 0 14px; box-sizing: border-box;
}

.pp-primary-download-btn {
  width: 100%; height: 48px;
  background: #2563eb; color: #ffffff; border: none;
  border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer;
}

.pp-sheet-cancel {
  width: 100%; margin-top: 10px; height: 40px;
  background: none; border: none; color: #64748b;
  font-size: 14px; font-weight: 600; cursor: pointer;
}

/* Homepage: social proof strip + segmented tabs + tools sheet */
.proof-strip {
  max-width: 760px; margin: 16px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}

.proof-item {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px 8px; text-align: center;
}

.proof-item b { display: block; font-size: 20px; color: #0f172a; }
.proof-item span { font-size: 12px; color: #64748b; font-weight: 600; }

.seg-tabs {
  display: inline-flex; background: #f1f5f9; border-radius: 999px;
  padding: 4px; gap: 4px; margin: 18px 0 4px;
}

.seg-tabs button {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #475569; min-height: 40px;
}

.seg-tabs button.on { background: #ffffff; color: #0f172a; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }

.pp-tool-tabs { display: flex; gap: 18px; border-bottom: 1px solid #e2e8f0; margin-bottom: 14px; }

.pp-tool-tab {
  padding: 8px 4px 10px; background: none; border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 600; color: #64748b; cursor: pointer;
}

.pp-tool-tab.active { color: #2563eb; border-bottom-color: #2563eb; }

.pp-tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.pp-tool-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; padding: 4px;
}

.pp-tool-tile-box {
  width: 62px; height: 56px; border-radius: 12px;
  border: 1px solid #e2e8f0; background: #ffffff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}

.pp-tool-tile span { font-size: 11.5px; color: #334155; text-align: center; }

.pdfplug-cat-count {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 10px;
  border-radius: 999px;
}

/* ==========================================================================
   APPLE iOS 18 / macOS SEQUOIA EDITOR DESIGN SYSTEM (Conroy, 2026-10-22)
   Frosted glass chrome, SF-Symbol stroke icons, a single-row 7-tool dock
   that can never wrap, a compact page/zoom bar, borderless document text.
   Adapted to this codebase's real selectors (.edit-toolbar dock,
   .edit-bottombar, .btn-p = active mode, .pp-fname title).
   ========================================================================== */
:root {
  --apple-bg: #f2f2f7;
  --apple-surface: rgba(255, 255, 255, 0.88);
  --apple-border: rgba(60, 60, 67, 0.14);
  --apple-ink: #1c1c1e;
  --apple-muted: #636366;
  --apple-blue: #007aff;
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
}

/* Top bar — frosted glass */
.pp-topbar {
  background: var(--apple-surface) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--apple-border) !important;
  font-family: var(--apple-font);
  height: 52px; flex-basis: 52px;
}
.pp-topbar .pp-fname {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--apple-ink); text-align: left; padding: 0 4px;
}
.pp-icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: #f2f2f7; color: var(--apple-ink); font-size: 14px;
}
.pp-icon-btn:active { background: #e5e5ea; }
.pp-history-pill {
  display: inline-flex; align-items: center; height: 34px;
  background: #f2f2f7; border-radius: 999px; padding: 0 2px; flex-shrink: 0;
}
.pp-hist-btn {
  width: 34px; height: 30px; border: none; background: transparent;
  color: var(--apple-ink); display: inline-flex; align-items: center;
  justify-content: center; border-radius: 999px; padding: 0; cursor: pointer;
}
.pp-hist-btn:active { background: rgba(60, 60, 67, 0.12); }
.pp-hist-btn.is-disabled, .pp-hist-btn:disabled { opacity: 0.3; pointer-events: none; }
.pp-hist-sep { width: 1px; height: 16px; background: rgba(60, 60, 67, 0.16); }
.pp-done-btn {
  height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--apple-blue); color: #ffffff;
  font-family: var(--apple-font); font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25);
}
.pp-done-btn:active { background: #0062cc; }

/* Stage — system grouped background, slim scrollbars, centered page */
#workarea.pp-shell #stage-wrap {
  background: var(--apple-bg);
  padding: 12px 12px 20px;
  scrollbar-width: thin;
}
#stage-wrap::-webkit-scrollbar { width: 4px; height: 4px; }
#stage-wrap::-webkit-scrollbar-thumb { background: rgba(60, 60, 67, 0.22); border-radius: 999px; }
.pp-page { margin-left: auto; margin-right: auto; }

/* Page/zoom bar — compact frosted row */
#workarea.pp-shell .edit-bottombar {
  background: var(--apple-surface);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--apple-border);
  font-family: var(--apple-font);
  min-height: 38px; align-items: center;
}
#workarea.pp-shell .edit-bottombar button {
  width: 28px !important; height: 28px !important;
  min-width: 28px !important; min-height: 28px !important;
  border-radius: 8px !important; border: none !important;
  background: #f2f2f7 !important; color: var(--apple-ink) !important;
  font-size: 15px !important; font-weight: 600 !important; padding: 0 !important;
}
#workarea.pp-shell .edit-bottombar .bb-info {
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--apple-muted) !important; font-variant-numeric: tabular-nums;
}

/* The dock — 7-column grid, NEVER wraps (mobile shell) */
@media (max-width: 900px) {
  #workarea.pp-shell .edit-toolbar {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--apple-surface) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-top: 0.5px solid var(--apple-border) !important;
    overflow: hidden !important;
  }
  #workarea.pp-shell .edit-toolbar .tbtn {
    width: 100% !important; min-width: 0 !important;
    height: 50px !important; min-height: 50px !important;
    padding: 4px 2px !important; margin: 0 !important;
    border-radius: 12px !important; border: none !important;
    background: transparent !important; color: var(--apple-ink) !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 3px !important; font-family: var(--apple-font) !important;
    box-shadow: none !important;
  }
  #workarea.pp-shell .edit-toolbar .tbtn .tbtn-ico {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; width: 22px !important; height: 22px !important;
  }
  #workarea.pp-shell .edit-toolbar .tbtn .tbtn-lbl {
    display: block !important;
    font-size: 10px !important; font-weight: 500 !important; line-height: 1.1 !important;
    letter-spacing: -0.01em !important; color: var(--apple-muted) !important;
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important; max-width: 100% !important;
  }
  #workarea.pp-shell .edit-toolbar .tbtn.btn-p {
    background: var(--apple-blue) !important; color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.28) !important;
  }
  #workarea.pp-shell .edit-toolbar .tbtn.btn-p .tbtn-lbl { color: #ffffff !important; font-weight: 600 !important; }
}

/* Desktop toolbar polish */
@media (min-width: 901px) {
  .edit-toolbar {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    padding: 6px !important; background: var(--apple-surface) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    border: 0.5px solid var(--apple-border) !important; border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important; flex-wrap: nowrap !important;
  }
  .edit-toolbar .tbtn {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    height: 38px !important; min-height: 38px !important; padding: 0 12px !important;
    border-radius: 10px !important; border: none !important;
    background: transparent !important; color: var(--apple-ink) !important;
    font-family: var(--apple-font) !important; font-size: 13px !important; font-weight: 500 !important;
  }
  .edit-toolbar .tbtn .tbtn-lbl { display: inline !important; font-size: 13px !important; }
  .edit-toolbar .tbtn.btn-p { background: var(--apple-blue) !important; color: #ffffff !important; }
}

/* ==========================================================================
   VIDEO-FIX ROUND (Conroy's 3-minute phone recording, 2026-10-22)
   1) Shell containment: flex children may not widen the shell past the
      viewport at ANY zoom; the stage absorbs zoom scrolling internally.
      (Companion fix: the editor/sign pages lock native browser pinch-
      zoom via meta viewport — the app runs its own pinch handler, and
      the two fighting was the visible "dock explodes" mechanism.)
   2) Format bar: ONE 48px row on mobile, horizontally scrollable.
   ========================================================================== */
@media (max-width: 900px) {
  #workarea.pp-shell { width: 100vw; max-width: 100vw; overflow: hidden; }
  #workarea.pp-shell > * { min-width: 0 !important; }
  #workarea.pp-shell > #stage-wrap { min-height: 0 !important; }
  #workarea.pp-shell .edit-bottombar,
  #workarea.pp-shell .edit-toolbar { max-width: 100vw; box-sizing: border-box; }

  #workarea.pp-shell #text-controls,
  #workarea.pp-shell #draw-controls {
    display: flex; flex-direction: row; flex-wrap: nowrap !important;
    align-items: center; gap: 6px;
    height: 48px; min-height: 48px; max-height: 48px;
    padding: 0 10px !important; margin: 0 !important;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.14);
  }
  #workarea.pp-shell #text-controls::-webkit-scrollbar,
  #workarea.pp-shell #draw-controls::-webkit-scrollbar { display: none; }
  #workarea.pp-shell #text-controls > *,
  #workarea.pp-shell #draw-controls > * { flex-shrink: 0 !important; }
  #workarea.pp-shell #text-controls select,
  #workarea.pp-shell #text-controls button,
  #workarea.pp-shell #draw-controls select,
  #workarea.pp-shell #draw-controls button,
  #workarea.pp-shell #draw-controls input { height: 34px; }
}

/* ================================================================
   r10 — FIXED-LAYER SHELL (Conroy's videos, 2026-10-23)
   The flex-column shell let document zoom/layout shifts reach the
   chrome: labels vanished and Move/Image slid off-screen at higher
   zooms on his phone. The bars are now INDEPENDENT fixed layers
   pinned to the layout viewport; the document lives in its own
   fixed window between them. Nothing inside the stage can move,
   resize, or relabel a bar — there is no shared layout anymore.
   Stacking: stage 100 < subbar 140 < bars 150 < paywall overlay 200
   < export sheet 9994 < toast 9995 < minibar 9996.
   ================================================================ */
@media (max-width: 900px) {
  :root {
    --pp-topbar-h: 52px;
    --pp-subbar-h: 0px; /* tool-edit.js raises to 48px when a format/draw bar shows */
    --pp-pagebar-h: 40px;
    --pp-dock-h: calc(58px + env(safe-area-inset-bottom, 0px));
  }
  #workarea.pp-shell { display: block !important; }
  #workarea.pp-shell .pp-topbar {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; height: var(--pp-topbar-h) !important;
    z-index: 150; touch-action: none;
  }
  #workarea.pp-shell #text-controls,
  #workarea.pp-shell #draw-controls {
    position: fixed !important; top: var(--pp-topbar-h) !important; left: 0 !important; right: 0 !important;
    width: auto !important; z-index: 140;
  }
  #workarea.pp-shell #stage-wrap {
    position: fixed !important; left: 0 !important; right: 0 !important;
    top: calc(var(--pp-topbar-h) + var(--pp-subbar-h)) !important;
    bottom: calc(var(--pp-dock-h) + var(--pp-pagebar-h)) !important;
    width: auto !important; height: auto !important; z-index: 100;
  }
  #workarea.pp-shell .edit-bottombar {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: var(--pp-dock-h) !important; height: var(--pp-pagebar-h) !important;
    width: auto !important; z-index: 150; touch-action: none;
  }
  #workarea.pp-shell .edit-toolbar {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: var(--pp-dock-h) !important;
    z-index: 150; touch-action: none;
  }
  /* Labels are part of the dock's contract — visible at every zoom. */
  #workarea.pp-shell .edit-toolbar .tbtn .tbtn-lbl {
    display: block !important; visibility: visible !important; opacity: 1 !important;
  }
}