/* Touch and small screens. Loaded after the other editor styles.
   Three layouts: desktop (panels either side), tablets and phones on their side (panels slide in as
   drawers), and phones held upright (panels open as sheets above a bottom tab bar). */

/* ---------- Every device: gestures the editor handles itself ---------- */
html:has(body.editor-page) { overscroll-behavior: none; }
body.editor-page { overscroll-behavior: none; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
@supports (height: 100dvh) { body.editor-page, #app { height: 100dvh; } }
.tl-scroll { touch-action: pan-x pan-y; overscroll-behavior: contain; }
.tl-ruler, .clip.sel, .stage-overlay, .tl-resize, .sheet-grip { touch-action: none; }
.mobile-tabs, .sheet-grip, .drawer-shade { display: none; }
.touch-only { display: none !important; }
button.tl-kind { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 4px; width: 24px; height: 24px; place-items: center; flex: none; margin-left: -5px; }
button.tl-kind:hover { color: var(--text); }
.tl-row.is-hidden .tl-kind, .tl-row.is-muted .tl-kind, .tl-row.is-locked .tl-kind { color: var(--yellow); }
.tl-toolbar .tl-multi { flex: none; }
.menu-pop.ctx hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.menu-pop.ctx button.on { color: var(--accent-2); }
.menu-pop.ctx { right: auto; width: max-content; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; }
.rec-view.tall { aspect-ratio: auto; }
.rec-view.tall video { width: auto; height: auto; max-width: 100%; max-height: 56vh; }
.insp-jump { display: none; flex-basis: 100%; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 2px -14px -2px; padding: 0 14px; }
.insp-jump::-webkit-scrollbar { display: none; }
.insp-jump button { flex: none; border: 1px solid var(--border-2); background: none; color: var(--text-2); font: 600 12px var(--font); padding: 6px 10px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.insp-jump button:active { background: var(--panel-2); color: var(--text); }
.touch-tips { display: grid; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.touch-tips b { color: var(--text); }

/* ---------- Fingers: larger targets ---------- */
@media (pointer: coarse) {
  .touch-only { display: inline-flex !important; }
  body.editor-page { position: fixed; left: 0; top: 0; width: 100%; height: var(--vvh, 100dvh); }
  #app { height: 100%; }
  .editor-page .modal-backdrop { bottom: auto; height: var(--vvh, 100dvh); }
  .editor-page .toasts { position: absolute; }
  /* iOS zooms the page when a field with smaller text is focused. */
  .editor-page .input, .editor-page textarea, .editor-page select, .proj-name { font-size: 16px; }

  .editor-page .btn.sm { height: 36px; }
  .editor-page .btn.sm.icon { width: 36px; }
  .timeline { grid-template-rows: 48px minmax(0, 1fr); }
  .menu-pop button, .menu-pop a { padding: 11px 12px; }

  .ctl input[type=range] { height: 6px; margin: 10px 0; }
  .ctl input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
  .ctl input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
  .ctl input[type=color] { width: 46px; height: 34px; }
  .ctl .input.num { height: 36px; width: 86px; }
  .seg button { padding: 9px 6px; font-size: 13px; }
  .switch { width: 44px; height: 26px; }
  .switch::after { width: 22px; height: 22px; }
  .switch:checked::after { transform: translateX(18px); }
  .chips button { padding: 7px 12px; font-size: 13px; }
  .zoom-item { padding: 4px 4px 4px 10px; }
  .zoom-item .zi-go { padding: 8px 0; }
  .zoom-item .zi-del { padding: 9px; }
  .zoom-item select { padding: 6px; }
  .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
  .emoji-btn { font-size: 25px; }
  .brand-colors input { width: 52px; height: 40px; }

  /* Nothing to drop onto with a finger: the Upload button is the way in. */
  .library .dropzone { display: none; }
  /* No hover on a touch screen: keep the per-file buttons visible. */
  .madd { opacity: 1; transform: none; width: 30px; height: 30px; right: 5px; bottom: 5px; }
  .mdel { opacity: 1; padding: 6px; }
  .mdel svg { width: 16px; height: 16px; }

  /* Track controls live in a menu behind the track icon. */
  .tl-acts { display: none; }
  button.tl-kind { width: 34px; height: 34px; place-items: center; flex: none; margin-left: -6px; }
  button.tl-kind svg { width: 16px; height: 16px; }
  .tl-ruler-row { height: 34px; }
  .tl-tick { line-height: 20px; }
  .tl-empty { top: 34px; }
  .tl-ph-handle { left: -9px; width: 19px; height: 22px; }
  /* Trim handles belong to the selected clip only, and are wide enough to grab. */
  .clip:not(.sel) .h { display: none; }
  .clip .h { width: min(24px, 34%); }
  .clip.sel .h { background: rgba(255, 255, 255, .34); }
  .clip.sel .h::after { left: calc(50% - 1.5px); }
  .clip.sel .clip-label { padding-left: 30px; padding-right: 30px; }

  /* Handles stay small enough not to hide the clip; an invisible margin makes them easy to grab. */
  .sel-box .hd::before, .sel-box .rot::before { content: ''; position: absolute; inset: -15px; }
  .sel-box .rot { top: -38px; }
  .sel-box .rot::after { height: 22px; }
}
/* No room above the box (a full-frame clip): the rotate handle moves inside it. */
.sel-box.rot-in .rot { top: 10px; }
.sel-box.rot-in .rot::after { display: none; }
.switch { background: color-mix(in srgb, var(--text-2) 38%, var(--panel)); } /* an "off" switch still reads as a switch */
@media (pointer: coarse) and (min-width: 641px) {
  #app { grid-template-rows: 54px minmax(0, 1fr) 14px var(--tl-h); }
  .tl-resize::after { top: 5px; height: 3px; }
}

/* ---------- Drawers (tablets, narrow windows, phones on their side) ---------- */
@media (max-width: 900px) {
  /* Closed drawers sit beside the screen; without this they widen the page. */
  .workspace { overflow: hidden; }
  .tl-toolbar [data-act=add-v], .tl-toolbar [data-act=add-a] { display: none; } /* in the ⋯ menu */
  .tl-acts { display: none; } /* no room beside the name: the track icon opens the same actions */
  .touch-only { display: inline-flex !important; }
  .topbar .spacer { min-width: 0; }
  .proj-name { flex: 0 1 120px; min-width: 48px; }
}
@media (min-width: 641px) and (max-width: 900px), (min-width: 641px) and (max-height: 520px) {
  body.show-lib .drawer-shade { display: block; position: absolute; inset: 0; z-index: 19; background: rgba(0, 0, 0, .4); }
}
@media (min-width: 901px) and (max-height: 520px) {
  .workspace { grid-template-columns: minmax(0, 1fr); position: relative; overflow: hidden; }
  .library, .inspector { position: absolute; top: 0; bottom: 0; z-index: 20; width: min(320px, 88vw); box-shadow: var(--shadow); transform: translateX(-105%); transition: transform .2s; }
  .library { left: 0; }
  .inspector { right: 0; transform: translateX(105%); }
  body.show-lib .library, body.show-insp .inspector { transform: none; }
  .mobile-only { display: inline-flex !important; }
}
@media (min-width: 641px) and (max-height: 520px) {
  body.editor-page { --tl-h: clamp(118px, 38vh, 170px) !important; }
  #app { grid-template-rows: 46px minmax(0, 1fr) 0 var(--tl-h); }
  .tl-resize { visibility: hidden; }
  .stage { grid-template-rows: minmax(0, 1fr) 44px; }
  .play-btn { width: 36px; height: 36px; }
  .tl-row { height: 46px; }
  .tl-row.audio { height: 40px; }
  .timeline { grid-template-rows: 42px minmax(0, 1fr); }
}

/* ---------- Phones held upright: bottom tab bar + sheets ---------- */
@media (max-width: 640px) {
  /* The preview gets the height its shape needs (--stage-h, set by the stage); the timeline takes the
     rest, and an open sheet covers exactly the timeline — so the preview never jumps. */
  body.editor-page {
    --top-h: 50px;
    --tab-h: calc(58px + env(safe-area-inset-bottom, 0px));
    --stage-h: 44vh;
  }
  #app { position: relative; grid-template-rows: var(--top-h) var(--stage-h) minmax(0, 1fr) var(--tab-h); }
  body.show-lib .timeline, body.show-insp .timeline { visibility: hidden; }
  .tl-resize { display: none; }

  /* Top bar: back, name, save state, undo/redo, account, export. */
  .topbar { gap: 2px; padding: 0 6px; }
  .topbar .logo-mark, .topbar .mobile-only, .topbar .spacer { display: none !important; }
  .proj-name { flex: 1 1 0; width: auto; min-width: 40px; padding: 6px 4px; }
  .save-status { padding: 0 4px; }
  .export-btn { margin: 0 4px; }

  /* Preview */
  .stage { grid-template-rows: minmax(0, 1fr) 48px; }
  .transport { padding: 0 8px; }
  .transport-btns { gap: 0; }
  .play-btn { margin: 0 4px; }
  .tc { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.25; }
  .tc > .muted:not(.tot) { display: none; }

  /* Panels become sheets over the timeline. They hang off the app box (not the screen) so they stay
     above the on-screen keyboard. Dragging the handle up makes a sheet tall (over the preview). */
  .workspace { position: static; overflow: visible; }
  .library, .inspector {
    position: absolute; left: 0; right: 0; top: calc(var(--top-h) + var(--stage-h) + 22px); bottom: var(--tab-h); width: auto; height: auto; z-index: 20;
    border: 0; box-shadow: none; visibility: hidden; opacity: 0; transform: translateY(18px);
    transition: transform .18s ease, opacity .18s ease, visibility .18s, top .2s ease;
  }
  body.show-lib .library, body.show-insp .inspector { opacity: 1; }
  body.show-lib .library, body.show-insp .inspector { visibility: visible; }
  body.sheet-tall .library, body.sheet-tall .inspector { top: calc(var(--top-h) + 30px); }
  .library { grid-template-columns: minmax(0, 1fr); }
  .lib-tabs { display: none; }
  .media-grid { grid-template-columns: 1fr 1fr; }
  .text-presets { grid-template-columns: 1fr 1fr; }
  .bg-grid { grid-template-columns: repeat(5, 1fr); }
  .shape-grid { grid-template-columns: repeat(4, 1fr); }
  .inspector .fmt-grid { grid-template-columns: repeat(4, 1fr); }
  .sheet-grip {
    position: absolute; left: 0; right: 0; top: calc(var(--top-h) + var(--stage-h)); height: 22px; z-index: 21; padding: 0; cursor: grab;
    border: 0; border-top: 1px solid var(--border-2); border-radius: 14px 14px 0 0; background: var(--bg-2); transition: top .2s ease;
  }
  /* A taller invisible strip so the handle is easy to catch with a thumb. */
  .sheet-grip::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -6px; }
  body.show-lib .sheet-grip, body.show-insp .sheet-grip { display: grid; place-items: center; }
  body.sheet-tall .sheet-grip { top: calc(var(--top-h) + 8px); }
  .sheet-grip i { width: 40px; height: 4px; border-radius: 4px; background: var(--border-2); }

  /* Bottom bar: what to add (nothing selected) or what to do with the selected clip. */
  .mobile-tabs { display: block; position: relative; z-index: 30; background: var(--bg-2); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mobile-tabs > div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 100%; }
  .mobile-tabs .mt-clip, body.clip-bar .mobile-tabs .mt-main { display: none; }
  body.clip-bar .mobile-tabs .mt-clip { display: grid; grid-template-columns: 52px; }
  .mobile-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text-2); font: 600 10.5px var(--font); cursor: pointer; }
  .mobile-tabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-tabs button svg { width: 21px; height: 21px; }
  .mobile-tabs button:active { background: var(--panel); }
  .mobile-tabs button.on { color: var(--text); }
  .mobile-tabs button.on svg { color: var(--accent-2); }
  .mobile-tabs button.on::before { content: ''; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; background: var(--accent); }
  .mobile-tabs button.has-sel:not(.on)::after { content: ''; position: absolute; top: 8px; left: calc(50% + 7px); width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .mt-clip [data-c=done] { color: var(--muted); border-right: 1px solid var(--border); }
  .mt-clip [data-c=edit] svg { color: var(--accent-2); }
  .mt-clip [data-c=del] { color: var(--red); }

  /* Timeline: icon-only track heads (tap for the track menu), no zoom slider (pinch instead).
     Clip actions live in the bottom bar, so the toolbar keeps only what works without a selection. */
  .tl-head, .tl-corner { width: 44px; }
  .tl-head { padding: 0; justify-content: center; }
  .tl-name { display: none; }
  button.tl-kind { margin: 0; width: 38px; height: 38px; display: grid; place-items: center; }
  .tl-row { height: 54px; }
  .tl-row.audio { height: 46px; }
  .tl-rows { padding-bottom: 24px; }
  .tl-empty { left: 44px; }
  .tl-empty > div { font-size: 12px; padding: 8px 12px; max-width: 280px; }
  .tl-empty svg { width: 22px; height: 22px; }
  .tl-zoom { display: none; }
  .tl-toolbar { gap: 4px; padding: 0 6px; }
  .tl-toolbar [data-act=dup], .tl-toolbar [data-act=del], .tl-toolbar [data-act=ripple], .tl-sep { display: none; }
  .tl-toolbar [data-act=split] span { display: inline; }
  .timeline { grid-template-rows: 44px minmax(0, 1fr); }

  /* Properties: section names under the header jump down the long list. */
  .insp-head { flex-wrap: wrap; padding: 10px 14px; }
  .insp-head > [data-a] { display: none; } /* Duplicate and Delete are in the bottom bar */
  .insp-jump { display: flex; }
  .insp-sec { scroll-margin-top: 110px; }

  .editor-page .toasts { bottom: calc(var(--tab-h) + 14px); }
  .drop-overlay > div { padding: 32px 24px; margin: 16px; }

  /* Keyboard up: drop the bottom bar and keep a short sheet, so the preview is still visible while typing. */
  body.kb-open { --tab-h: 0px; }
  body.kb-open #app { grid-template-rows: var(--top-h) minmax(0, 1fr) 172px 0; }
  body.kb-open .library, body.kb-open .inspector { top: auto; height: 150px; }
  body.kb-open .sheet-grip { top: auto; bottom: 150px; }
  body.kb-open .mobile-tabs { display: none; }
  body.kb-open .insp-jump { display: none; }
}
@media (max-width: 359px) {
  .topbar a.upgrade-btn, .topbar .plan-badge { display: none; }
  .transport .btn.sm.icon { width: 32px; }
  .transport { padding: 0 4px; }
}