/* ==========================================================================
   responsive.css — the phone / tablet experience
   --------------------------------------------------------------------------
   Desktop (> 900px) is untouched. On phones the old layout fell apart: the
   mode tabs were absolutely centred and wrapped inside a 52px bar, the sidebar
   hid every primary control behind a hamburger, and the action bar stayed
   desktop-sized. This is a proper mobile shell:

     ┌──────────────────────────────┐
     │ logo            undo redo ···│  app bar
     ├──────────────────────────────┤
     │  Grid  │  Stitch  │  Free    │  mode segmented control
     ├──────────────────────────────┤
     │                              │
     │           canvas             │
     │                              │
     ├──────────────────────────────┤
     │ Add  Layout  Style  Tools  ⤓ │  dock (replaces the action bar)
     └──────────────────────────────┘

   Primary controls live in a bottom sheet that hosts the *real* sidebar
   sections (moved at runtime), so every existing binding keeps working.
   ========================================================================== */

/* Hidden on desktop, switched on inside the mobile query below. */
.m-modebar, .m-dock, .m-selbar, .m-more { display: none; }
.m-top-actions { display: flex; align-items: center; gap: 2px; }

@media (max-width: 900px) {
  :root {
    --topbar-h: 52px;
    --sidebar-w: 0px;
    --m-mode-h: 48px;
    --m-dock-h: 58px;
    --m-safe-t: env(safe-area-inset-top, 0px);
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --m-safe-l: env(safe-area-inset-left, 0px);
    --m-safe-r: env(safe-area-inset-right, 0px);
  }

  /* ---- page shell: no rubber-banding, correct dynamic viewport ---------- */
  html { height: 100%; height: 100dvh; }
  body {
    height: 100%;
    height: 100dvh;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
  }
  button, .tab, .layout-cell, .tool-btn, .seg-btn, .chip, .m-dock-btn, .m-sel-btn {
    touch-action: manipulation;
  }
  /* A focused field must not make iOS zoom the whole page. */
  input[type="number"], input[type="text"], select, textarea { font-size: 16px; }

  /* ---- top app bar ------------------------------------------------------ */
  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(var(--topbar-h) + var(--m-safe-t));
    padding: var(--m-safe-t) calc(10px + var(--m-safe-r)) 0 calc(10px + var(--m-safe-l));
    gap: 6px;
  }
  .topbar-left, .topbar-right { gap: 2px; }
  /* every primary control lives in the dock now — no drawer sliver on screen */
  .sidebar { display: none; }
  .brand { gap: 7px; padding: 7px; margin: -7px; }
  .brand-name { display: inline; font-size: 15px; letter-spacing: -.2px; }
  .brand-mark { width: 30px; height: 30px; }
  .menu-toggle { display: none; }
  html:not(.m-ready) .menu-toggle { display: inline-flex; }
  .topbar-center { display: none; }          /* moved into .m-modebar by mobile.js */

  .icon-btn { width: 42px; height: 42px; border-radius: 12px; }
  .topbar .icon-btn { color: var(--text-soft); }
  .topbar .icon-btn:active { background: var(--panel-2); }

  .m-more { display: inline-flex; }
  .lang-switch, .theme-toggle, #installBtn { display: none; }
  .trust-pill { height: 40px; padding: 0 11px; }
  .trust-label { display: none; }

  /* undo / redo relocated out of the sidebar so they are always one tap away */
  .m-top-actions .tool-btn {
    width: 42px; height: 42px; padding: 0;
    border: 0; background: transparent; border-radius: 12px;
    font-size: 19px; line-height: 1; color: var(--text-soft);
  }
  .m-top-actions .tool-btn span { display: none; }
  .m-top-actions .tool-btn:disabled { opacity: .28; }
  .m-top-actions .tool-btn:active { background: var(--panel-2); }

  /* ---- mode segmented control ------------------------------------------ */
  .m-modebar {
    position: fixed;
    top: calc(var(--topbar-h) + var(--m-safe-t));
    left: 0; right: 0;
    height: var(--m-mode-h);
    display: flex; align-items: center;
    padding: 0 calc(10px + var(--m-safe-r)) 8px calc(10px + var(--m-safe-l));
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    z-index: 29;
  }
  .m-modebar #modeTabs {
    position: static; transform: none;
    display: grid; grid-template-columns: repeat(3, 1fr);
    width: 100%; gap: 3px; padding: 3px;
    background: var(--panel-2);
    border-radius: 12px;
  }
  .m-modebar .tab {
    height: 40px; padding: 0 4px; border-radius: 9px;
    font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-modebar .tab:hover { background: transparent; color: var(--text-soft); }
  .m-modebar .tab.active { background: var(--primary); color: #fff; }

  /* ---- canvas stage ----------------------------------------------------- */
  .stage {
    position: fixed;
    top: calc(var(--topbar-h) + var(--m-safe-t) + var(--m-mode-h));
    bottom: calc(var(--m-dock-h) + var(--m-safe-b));
    left: 0; right: 0;
    padding: 8px;
    overflow: hidden;
  }
  .stage-inner { width: 100%; height: 100%; max-width: none; max-height: none; }
  #mosaic {
    max-width: 100%;
    max-height: 100%;
    width: auto; height: auto;
    border-radius: 6px;
  }
  .hint-bar { display: none; }

  /* ---- gesture hint ----------------------------------------------------- */
  .m-hint {
    position: absolute;
    left: 50%; top: 10px;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 6px;
    max-width: calc(100% - 16px);
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--panel);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--text-soft);
    font-size: 11.5px; line-height: 1.2;
    white-space: nowrap; overflow: hidden;
    pointer-events: none;
    animation: m-hint-in .3s ease both;
  }
  .m-hint[hidden] { display: none; }
  .m-hint svg { flex: 0 0 14px; color: var(--primary); }
  .m-hint span { overflow: hidden; text-overflow: ellipsis; }
  @keyframes m-hint-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

  /* ---- empty state ------------------------------------------------------ */
  .dropzone {
    width: 100%;
    height: min(560px, 100%);
    min-height: 0;
    border-width: 1.5px;
    border-radius: 16px;
  }
  .dropzone-inner { padding: 18px 18px 20px; max-width: 440px; margin: 0 auto; }
  .dropzone-inner svg { width: 42px; height: 42px; margin-bottom: 2px; }
  .dz-h1 { font-size: 21px; line-height: 1.28; margin: 10px 0 4px; }
  .dropzone-title { font-size: 15px; }
  .dropzone-sub { font-size: 12.5px; margin: 3px 0 16px; }
  #uploadBtn { width: 100%; max-width: 260px; height: 48px; font-size: 16px; border-radius: 14px; }
  /* three equal trust tiles read better than a ragged wrap at 320px */
  .privacy-strip {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; margin: 16px 0 10px;
  }
  .privacy-strip li {
    flex-direction: column; justify-content: center; gap: 4px;
    padding: 8px 4px; border-radius: 12px;
    font-size: 10.5px; line-height: 1.25; text-align: center;
    white-space: normal;
  }
  .privacy-strip li svg { width: 15px; height: 15px; }
  .privacy-note { font-size: 11px; }
  .dropzone .link-btn { font-size: 12.5px; padding: 6px 0; }

  /* ---- bottom dock ------------------------------------------------------ */
  .actionbar { display: none; }
  .m-dock {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--m-dock-h) + var(--m-safe-b));
    padding: 0 calc(4px + var(--m-safe-r)) var(--m-safe-b) calc(4px + var(--m-safe-l));
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--panel);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    z-index: 40;
  }
  .m-dock-btn {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-height: 44px; padding: 5px 2px;
    border: 0; border-radius: 13px; background: none;
    color: var(--text-soft);
    font-size: 10px; font-weight: 600; letter-spacing: .1px;
    transition: background .12s, color .12s;
  }
  .m-dock-btn .m-dock-ico { display: flex; align-items: center; justify-content: center; }
  .m-dock-btn .m-dock-lbl {
    max-width: 100%; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .m-dock-btn:active { background: var(--panel-2); color: var(--text); }
  .m-dock-btn.active { color: var(--primary); background: var(--primary-soft); }
  .m-dock-btn.accent { color: var(--primary); }
  .m-dock-btn.accent .m-dock-ico {
    width: 36px; height: 27px; border-radius: 10px;
    background: var(--primary); color: #fff;
  }
  .m-dock-btn.accent:active .m-dock-ico { background: var(--primary-hover); }

  /* ---- selection toolbar ----------------------------------------------- */
  .m-selbar {
    position: fixed;
    left: 50%; bottom: calc(var(--m-dock-h) + var(--m-safe-b) + 10px);
    transform: translateX(-50%);
    align-items: center; gap: 2px;
    padding: 4px;
    max-width: calc(100vw - 16px);
    background: var(--panel);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 41;
  }
  .m-selbar:not([hidden]) { display: flex; }
  .m-sel-idx {
    flex: 0 0 auto; margin-right: 2px; padding: 7px 7px;
    font-size: 11px; font-weight: 700;
    color: var(--primary); background: var(--primary-soft);
    border-radius: 10px; font-variant-numeric: tabular-nums;
  }
  .m-sel-btn {
    flex: 0 0 auto;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    min-width: 52px; height: 46px; padding: 0 4px;
    border: 0; border-radius: 11px; background: none;
    color: var(--text-soft); font-size: 9.5px; font-weight: 600;
  }
  .m-sel-btn:active { background: var(--panel-2); color: var(--text); }
  .m-sel-btn.danger { color: var(--danger); }
  body.m-sheet-open .m-selbar { display: none; }

  /* ---- bottom sheet ----------------------------------------------------- */
  .m-sheet { position: fixed; inset: 0; z-index: 90; }
  .m-sheet[hidden] { display: none; }
  .m-sheet-backdrop {
    position: absolute; inset: 0;
    background: rgba(10, 10, 20, .42);
    opacity: 0; transition: opacity .24s;
  }
  .m-sheet.show .m-sheet-backdrop { opacity: 1; }
  .m-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    max-height: 68dvh;
    padding-bottom: var(--m-safe-b);
    background: var(--panel);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 44px rgba(10, 10, 30, .22);
    transform: translateY(101%);
    transition: transform .3s cubic-bezier(.22, .9, .24, 1);
    will-change: transform;
  }
  .m-sheet.show .m-sheet-panel { transform: translateY(0); }
  .m-sheet-panel.dragging { transition: none; }
  .m-sheet-grab {
    display: flex; justify-content: center;
    padding: 9px 0 3px; touch-action: none; cursor: grab;
  }
  .m-sheet-grab span {
    width: 42px; height: 4px; border-radius: 99px;
    background: var(--border-strong);
  }
  .m-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 2px 16px 10px;
    border-bottom: 1px solid var(--border);
  }
  .m-sheet-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.1px; }
  .m-sheet-done {
    height: 34px; padding: 0 13px;
    border: 0; border-radius: 10px;
    background: var(--primary-soft); color: var(--primary);
    font-size: 13px; font-weight: 700;
  }
  .m-sheet-done:active { transform: scale(.96); }
  .m-sheet-body {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px 16px 24px;
  }
  .m-panel[hidden] { display: none; }

  /* the real sidebar controls, now inside a thumb-reachable sheet */
  .m-sheet .sidebar-section { margin: 0 0 22px; }
  .m-sheet .sidebar-section:last-child { margin-bottom: 0; }
  .m-sheet .m-panel.m-single .sidebar-title { display: none; }
  .m-sheet .sidebar-section[data-m-section="history"] .sidebar-title { display: none; }
  .m-sheet .sidebar-title { font-size: 11px; margin-bottom: 10px; }
  .m-sheet .layout-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .m-sheet .layout-cell { padding: 7px; }
  .m-sheet .tool-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .m-sheet .tool-btn { height: 46px; font-size: 14px; border-radius: 12px; }
  .m-sheet .select { height: 46px; font-size: 15px; border-radius: 12px; }
  .m-sheet .size-custom { gap: 10px; margin-top: 10px; }
  .m-sheet .size-custom input { height: 44px; border-radius: 10px; font-size: 16px; }
  .m-sheet .control-row { margin-bottom: 14px; gap: 10px; }
  .m-sheet .control-label { flex: 0 0 74px; font-size: 13px; }
  .m-sheet .control-value { flex: 0 0 34px; font-size: 13px; }
  .m-sheet input[type="range"] { height: 44px; margin: 0; }
  .m-sheet input[type="color"] { width: 44px; height: 40px; border-radius: 9px; }
  .m-sheet .chip { height: 40px; padding: 0 14px; font-size: 13px; }
  .m-sheet .link-btn { font-size: 13px; padding: 8px 0; }
  .m-sheet .sidebar-foot { border-top: 0; padding-top: 0; }

  /* settings panel */
  .m-set-block { margin-bottom: 16px; }
  .m-set-label {
    display: block; margin-bottom: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .6px;
    text-transform: uppercase; color: var(--text-soft);
  }
  .m-set-select {
    width: 100%; height: 48px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-2); font-size: 15px; font-weight: 500;
  }
  .m-set-row {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 54px; border-top: 1px solid var(--border);
  }
  .m-set-row-lbl { font-size: 14px; font-weight: 600; }
  .m-switch {
    position: relative;
    width: 50px; height: 30px; padding: 3px;
    border: 0; border-radius: 99px;
    background: var(--border-strong);
    transition: background .2s;
  }
  .m-switch span {
    display: block; width: 24px; height: 24px;
    border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
    transition: transform .2s;
  }
  .m-switch[aria-checked="true"] { background: var(--primary); }
  .m-switch[aria-checked="true"] span { transform: translateX(20px); }
  .m-set-item {
    display: flex; align-items: center; gap: 11px;
    width: 100%; min-height: 52px; padding: 0 2px;
    border: 0; border-top: 1px solid var(--border);
    background: none; color: var(--text);
    font-size: 14px; font-weight: 500; text-align: left;
    text-decoration: none;
  }
  .m-set-item svg { flex: 0 0 19px; color: var(--text-soft); }
  .m-set-item:active { opacity: .6; }
  .m-set-item.danger, .m-set-item.danger svg { color: var(--danger); }
  .m-set-foot { margin: 18px 0 0; text-align: center; font-size: 11px; color: var(--text-dim); }

  /* text editor */
  .m-text-input {
    width: 100%; min-height: 92px; padding: 12px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--panel-2); color: var(--text);
    font-size: 16px; line-height: 1.45; resize: none;
  }
  .m-text-row {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0 16px; font-size: 13px; color: var(--text-soft);
  }
  .m-text-row input[type="range"] { flex: 1; height: 44px; }
  .m-text-row input[type="color"] { width: 44px; height: 40px; }
  .m-text-row output { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
  .m-text-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-text-actions .btn-primary, .m-text-actions .btn-ghost { height: 48px; font-size: 15px; }

  /* ---- dialogs become bottom sheets too -------------------------------- */
  .modal { align-items: flex-end; }
  .modal-panel {
    width: 100%; max-width: 100%;
    max-height: 90dvh; overflow-y: auto;
    padding: 18px 16px calc(18px + var(--m-safe-b));
    border-radius: 20px 20px 0 0;
    transform: translateY(102%);
  }
  .modal.show .modal-panel { transform: translateY(0); }
  .modal-panel::before {
    content: '';
    display: block; width: 42px; height: 4px;
    margin: -4px auto 14px;
    border-radius: 99px; background: var(--border-strong);
  }
  .privacy-panel { width: 100%; max-height: 92dvh; }
  .modal-title { font-size: 17px; }
  .form-row { flex-wrap: wrap; gap: 8px 10px; margin-bottom: 14px; }
  .form-row > label:first-child {
    flex: 1 0 100%; margin-bottom: -2px;
    font-size: 11px; font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase;
  }
  /* a checkbox reads as "label — checkbox", not as a stacked field */
  .form-row:has(input[type="checkbox"]) > label:first-child {
    flex: 1 0 auto; margin-bottom: 0;
    font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  }
  .form-row:has(input[type="checkbox"]) input[type="checkbox"] {
    width: 24px; height: 24px; accent-color: var(--primary);
  }
  .seg { width: 100%; }
  .seg-btn { flex: 1; min-height: 40px; }
  .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .modal-actions .btn-primary, .modal-actions .btn-ghost { height: 48px; font-size: 15px; }
  .modal-x { width: 40px; height: 40px; top: 8px; right: 8px; }
  .promise-grid { grid-template-columns: 1fr; }
  .netcheck-stats { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 10px 6px; }
  .danger-btn { height: 46px; }

  /* ---- toast ------------------------------------------------------------ */
  .toast {
    bottom: calc(var(--m-dock-h) + var(--m-safe-b) + 12px);
    max-width: calc(100vw - 32px);
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 12.5px; line-height: 1.4;
  }
  /* while a sheet is open the toast would land on top of its content */
  body.m-sheet-open .toast { top: calc(var(--m-safe-t) + 10px); bottom: auto; }
}

/* ---- large phones / small tablets: centre the sheet --------------------- */
@media (min-width: 640px) and (max-width: 900px) {
  .stage { padding: 14px; }
  .m-sheet-panel {
    left: 50%; right: auto;
    width: min(560px, 100%);
    transform: translate(-50%, 101%);
  }
  .m-sheet.show .m-sheet-panel { transform: translate(-50%, 0); }
  .m-selbar { max-width: 560px; }
  .modal-panel { width: min(560px, 100%); margin: 0 auto; }
}

/* ---- short phones (SE-class / small Androids): keep everything above the fold */
@media (max-width: 900px) and (max-height: 700px) and (orientation: portrait) {
  .dropzone-inner { padding: 14px 16px 16px; }
  .dropzone-inner svg { width: 34px; height: 34px; }
  .dz-h1 { font-size: 18px; line-height: 1.25; margin: 6px 0 2px; }
  .dropzone-title { font-size: 14px; }
  .dropzone-sub { display: none; }
  #uploadBtn { height: 46px; margin-top: 4px; }
  .privacy-strip { margin: 12px 0 8px; }
  .privacy-strip li { padding: 6px 3px; font-size: 10px; }
  .privacy-note { display: none; }
  .dropzone .link-btn { padding: 4px 0; }
}

/* ---- very narrow phones ---- */
@media (max-width: 360px) {
  .brand-name { display: none; }
  .m-sel-btn { min-width: 48px; }
  .m-sel-idx { padding: 6px; }
}

/* ---- phone landscape: spend the height on the canvas ------------------- */
@media (max-width: 900px) and (max-height: 540px) and (orientation: landscape) {
  :root { --topbar-h: 46px; --m-mode-h: 46px; --m-dock-h: 50px; }
  .dz-h1 { font-size: 18px; margin: 6px 0 2px; }
  .dropzone-inner svg { display: none; }
  .dropzone-sub { margin-bottom: 12px; }
  .privacy-strip { display: none; }
  .privacy-note { margin-top: 12px; }
  .m-dock-btn { flex-direction: row; gap: 6px; font-size: 11px; }
  .m-dock-btn.accent .m-dock-ico { width: 28px; height: 24px; }
  .m-sheet-panel { max-height: calc(100dvh - 10px); }
  .m-sheet .layout-grid { grid-template-columns: repeat(6, 1fr); }
  .m-modebar { padding-bottom: 6px; }
  .m-modebar .tab { height: 40px; font-size: 12px; }
  .m-selbar { bottom: calc(var(--m-dock-h) + var(--m-safe-b) + 6px); }
}

/* Touch-friendly targets wherever the pointer is coarse */
@media (max-width: 900px) and (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .layout-cell { padding: 8px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}