/* ═══════════════════════════════════════════════════════════════
   XODE EDITOR — SMALL SCREENS

   The editor was built for a desktop three-column shell: tools bar at
   the bottom, layers on the left, inspector on the right. Below 900px
   both sidebars were simply switched off, which took the inspector —
   every property of every element — off the device entirely. And the
   bottom bar packed three clusters into one 56px row, so on a phone
   the tool pill sat on top of the page numbers and the zoom controls
   ran off the right edge.

   This file fixes both:

     • the bar becomes two rows, tools above the navigation row
     • the sidebars become bottom sheets you can actually open
     • touch targets grow to 40–44px
     • the top bar stops overflowing

   Loaded after styles.css, so it only ever adds overrides.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   SHARED — applies at every width
   ───────────────────────────────────────────────────────────── */

/* The bar is one row of two on desktop; the rows are transparent
   wrappers there and do the real work only on small screens. */
.bottom-row {
  display: contents;
}

/* The sheet toggles have no place on a desktop layout, where the
   panels they open are already on screen. */
.bottom-sheet-toggles { display: none; }

/* editor-mobile.js clones undo / redo / grid / preview into the tools
   row, because the top bar has no room for them on a phone. The clones
   are built once and hidden here rather than created and destroyed on
   every resize — on a wide screen the originals are still in the top
   bar, and leaving the copies visible pushed the page nav into the
   middle of the toolbar. */
[data-mobile-proxy] { display: none; }

/* ─────────────────────────────────────────────────────────────
   TABLET AND BELOW — ≤900px
   Where the sidebars used to disappear.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* ── The two-row bar ─────────────────────────────────────── */
  .editor-bottom-bar {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .bottom-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  /* Row 1 — tools, above the navigation row, scrolling sideways so
     every tool stays reachable however narrow the screen. */
  .bottom-row-tools {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-1);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bottom-row-tools::-webkit-scrollbar { display: none; }

  /* Stop being absolutely centred — that is what put the pill on top
     of the page numbers in the first place. */
  .bottom-tool-group {
    position: static;
    transform: none;
    left: auto;
    box-shadow: none;
    background: none;
    border: none;
    padding: 0;
    gap: 2px;
    margin: 0 auto;
  }

  /* Row 2 — pages, panels, zoom. */
  .bottom-row-nav {
    padding: 7px 10px;
    gap: 8px;
    justify-content: space-between;
  }

  .bottom-pagenav-wrap {
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 3px 6px;
  }
  .bottom-pagenav-wrap::-webkit-scrollbar { display: none; }
  .pagenav-label { display: none; }

  .bottom-right-zone { gap: 6px; flex: 0 0 auto; }

  /* Snapping, shortcuts and help move up into the scrolling tools row,
     where there is room for them. */
  .bottom-utility-group {
    order: 9;
    background: none;
    border: none;
    padding: 0;
  }

  /* The cloned top-bar controls appear only here. */
  [data-mobile-proxy] {
    display: flex;
    align-items: center;
    gap: 2px;
    order: -1;                 /* undo / redo sit before the tools */
    padding-right: 6px;
    margin-right: 4px;
    border-right: 1px solid var(--border-1);
  }

  /* ── Sidebars become bottom sheets ───────────────────────── */
  .sidebar-left,
  .sidebar-right {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: min(58dvh, 460px);
    z-index: 120;
    background: var(--bg-2);
    border: none;
    border-top: 1px solid var(--border-1);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .55);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(102%);
    transition: transform .26s cubic-bezier(.22, .68, 0, 1);
    overflow: hidden;
  }
  .sidebar-left.sheet-open,
  .sidebar-right.sheet-open { transform: none; }

  /* A grab handle, so it reads as a sheet rather than a stuck panel. */
  .sidebar-left::before,
  .sidebar-right::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-2);
    margin: 9px auto 4px;
    flex-shrink: 0;
  }

  .sidebar-left > *:not(.sheet-head),
  .sidebar-right > *:not(.sheet-head) { min-height: 0; }

  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 10px;
    flex-shrink: 0;
  }
  .sheet-title {
    font-family: 'Cabinet Grotesk', var(--font-body), sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-0);
    letter-spacing: -.01em;
  }
  .sheet-close {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--bg-4);
    border: 1px solid var(--border-1);
    color: var(--text-2);
    font-size: 15px;
    cursor: pointer;
  }
  .sheet-close:active { background: var(--bg-3); }

  .sidebar-left .sidebar-panel,
  .sidebar-right .inspector-content,
  .sidebar-right .inspector-page-settings,
  .sidebar-right .inspector-empty {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Backdrop behind an open sheet. */
  .sheet-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .sheet-scrim.on { opacity: 1; pointer-events: auto; }

  /* ── Sheet toggles ───────────────────────────────────────── */
  .bottom-sheet-toggles {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  .sheet-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    border-radius: 10px;
    background: var(--bg-1);
    border: 1px solid var(--border-1);
    color: var(--text-2);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
  }
  .sheet-toggle[aria-expanded="true"] {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
  }
  /* A dot when the inspector has something to show. */
  .sheet-toggle.has-selection::after {
    content: '';
    position: absolute;
    top: 5px; right: 6px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--amber, #FFB454);
  }
  .sheet-toggle[aria-expanded="true"].has-selection::after { background: #fff; }

  /* ── Top bar stops running off the edge ──────────────────── */
  /* The project name was a fixed 200px inside a container that could
     not shrink, so the whole right-hand cluster — Publish, Export —
     was pushed past the edge of the screen and out of reach. */
  .editor-topbar { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .project-name-input {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 44vw;
    text-overflow: ellipsis;
  }
  #save-indicator-text { display: none; }   /* the dot alone says it */
  .save-indicator { gap: 0; padding: 0 4px; }

  .topbar-center { display: none; }        /* undo/redo/grid move to the tools row */
  .topbar-right { gap: 5px; flex: 0 0 auto; }
  .topbar-divider { display: none; }
  .topbar-right .btn-ghost,
  .topbar-right .btn-publish,
  .topbar-right .btn-primary {
    padding: 0 12px;
    height: 36px;
    font-size: 12.5px;
    gap: 6px;
  }

  /* ── Bigger touch targets ────────────────────────────────── */
  .tool-btn { width: 40px; height: 40px; border-radius: 10px; }
  .tool-btn svg { width: 18px; height: 18px; }
  .pagenav-dot,
  .pagenav-add-btn,
  .pagenav-del-btn { width: 30px; height: 30px; }
  .bottom-right-zone .icon-btn.small { width: 32px; height: 32px; }

  /* Rulers eat scarce width and cannot be read at this size. */
  .ruler-h, .ruler-v, .ruler-corner { display: none; }
  .canvas-viewport { padding: 0; }
}

/* ─────────────────────────────────────────────────────────────
   PHONE — ≤600px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .bottom-row-nav { padding: 6px 8px; gap: 6px; }
  .bottom-row-tools { padding: 5px 8px; }

  /* The word labels go; the icons carry it from here. */
  .sheet-toggle { padding: 0 9px; gap: 0; width: 38px; justify-content: center; }
  .sheet-toggle span { display: none; }

  .zoom-readout { width: 34px; font-size: 10.5px; }
  .bottom-zoom-group { padding: 3px 4px; }
  /* Kept. Double-tapping the canvas also fits, but nobody discovers a
     gesture that is not written down, and this was the only way back
     to a whole page once you had zoomed — the buttons move in 10%
     steps, so from 17% that is a lot of tapping. */
  .bottom-zoom-group #btn-zoom-fit { display: inline-flex; }

  .editor-topbar { height: 52px; }
  .topbar-right .btn-ghost { display: none; }          /* Preview moves to the tools row */
  .topbar-right .btn-publish span,
  .topbar-right .btn-primary span { display: none; }
  .topbar-right .btn-publish,
  .topbar-right .btn-primary { padding: 0; width: 38px; justify-content: center; }
  .project-name-input { max-width: 36vw; font-size: 13px; }

  .sidebar-left, .sidebar-right { max-height: min(62dvh, 480px); }
}

/* ─────────────────────────────────────────────────────────────
   VERY SMALL / SPLIT SCREEN — ≤380px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .bottom-pagenav-wrap { max-width: 96px; }
  .tool-btn { width: 38px; height: 38px; }
  .project-name-input { max-width: 28vw; }
}

/* ─────────────────────────────────────────────────────────────
   PHONE IN LANDSCAPE — short viewports
   The canvas is the whole point; give it the height back.
   ───────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .editor-topbar { height: 44px; }
  .bottom-row-tools { padding: 3px 8px; }
  .bottom-row-nav { padding: 4px 8px; }
  .tool-btn { width: 34px; height: 34px; }
  .tool-btn svg { width: 15px; height: 15px; }
  .sidebar-left, .sidebar-right { max-height: 82dvh; }
}

/* ─────────────────────────────────────────────────────────────
   Sheets are a small-screen idea only. Above 900px the sidebars go
   back to being sidebars, whatever class the toggles left behind.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  .sidebar-left.sheet-open,
  .sidebar-right.sheet-open { transform: none; }
  .sheet-head, .sheet-scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-left, .sidebar-right, .sheet-scrim { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   FLEX PRIORITIES IN THE NAV ROW
   Without these the page numbers are the first thing to be crushed —
   at 280px they collapsed to 14px, which is no control at all. The
   page nav keeps a floor and scrolls inside it; the zoom cluster is
   what gives way instead.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bottom-pagenav-wrap { flex: 0 1 auto; min-width: 88px; }
  .bottom-sheet-toggles { flex: 0 0 auto; }
  .bottom-right-zone { flex: 0 1 auto; min-width: 0; }
  .bottom-zoom-group { min-width: 0; }
}

@media (max-width: 380px) {
  .bottom-pagenav-wrap { max-width: none; min-width: 84px; }
  .zoom-readout { width: 30px; font-size: 10px; }
  .bottom-zoom-group #btn-zoom-in,
  .bottom-zoom-group #btn-zoom-out { width: 28px; }
}

/* ─────────────────────────────────────────────────────────────
   POINTER-BASED SIZING
   A coarse pointer needs a bigger target than a mouse, whatever the
   screen width — a 13" touchscreen laptop included.
   ───────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .tool-btn { min-width: 40px; min-height: 40px; }
  .icon-btn.small { min-width: 32px; min-height: 32px; }
  .pagenav-dot { min-width: 30px; min-height: 30px; }
  .sheet-toggle { min-height: 36px; }
}

/* ─────────────────────────────────────────────────────────────
   THE NARROWEST SCREENS — folded phones, split-screen multitasking
   Around 300px the nav row genuinely runs out of room. Compact it
   first; below that let it wrap onto a second line rather than push
   the zoom controls off the edge.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .bottom-row-nav { padding: 6px; gap: 5px; }
  .sheet-toggle { width: 34px; padding: 0; }
  .bottom-pagenav-wrap { min-width: 76px; padding: 3px 4px; }
  .pagenav-dot, .pagenav-add-btn, .pagenav-del-btn { width: 26px; height: 26px; }
}

/* Letting the row wrap turned out worse than compacting it: flexbox
   wraps before it shrinks, so each cluster claimed a line of its own and
   the bar grew to three rows. Keep one row and drop the page add/delete
   buttons instead — both still live in the Pages panel inside the
   Layers sheet. */
@media (max-width: 340px) {
  .bottom-row-nav { flex-wrap: nowrap; padding: 6px 5px; gap: 5px; }
  .bottom-pagenav-wrap { min-width: 68px; }
  .pagenav-add-btn, .pagenav-del-btn { display: none; }
  .sheet-toggle { width: 32px; }
  .bottom-zoom-group { padding: 3px; gap: 1px; }
  /* Overrides the coarse-pointer floor further down; at this width the
     alternative is losing the control off the edge entirely. */
  .bottom-zoom-group .icon-btn.small {
    width: 26px;
    min-width: 26px;
  }
  .zoom-readout { width: 28px; }
}

/* ─────────────────────────────────────────────────────────────
   WIDE BUT SHORT — a phone or small tablet held sideways
   There is plenty of width here and almost no height, so the two rows
   go back to sitting side by side. That returns ~48px to the canvas,
   which on a 390px-tall viewport is most of what is left. The panel
   sheets stay, because the sidebars still have nowhere to live.
   ───────────────────────────────────────────────────────────── */
@media (max-height: 560px) and (orientation: landscape) and (min-width: 660px) {
  .editor-bottom-bar {
    flex-direction: row;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
  }
  .bottom-row { display: contents; }
  .bottom-row-tools { border-bottom: none; }
  .bottom-tool-group { margin: 0; }
  .bottom-utility-group { order: 0; }
}