/* CLAUDE 10-09: the editor screen on a phone (the owner, CapCut 9 on an iPhone). Below 768 px, with a project open
   (phonescreen.js sets body.pe-on), the editor is one fixed screen: a top bar, the preview, a row of controls, the
   timeline, and a bottom toolbar. The left tools panel (aside.library) and the right inspector (aside.inspector) are
   the same elements as on the desktop; here they are restyled as two bottom sheets that slide up over the timeline and
   toolbar and leave the preview visible above them. Nothing on a wider screen changes: every rule that moves the
   layout is inside the phone query and starts with body.pe-on, and the new elements are display:none everywhere else. */

.pe-bar,
.pe-tools,
.pe-rec,
.pe-fullx,
.pe-spacer,
.pe-playhead,
.pe-head,
.pe-key,
.pe-slash,
.pe-qpop {
  display: none;
}

@media (max-width: 767.98px) {
  body.pe-on {
    overflow: hidden;
    overscroll-behavior: none;
    --pe-line: #232328;
    --pe-ink: #f1f2f4;
    --pe-soft: #a3a7b0;
    --pe-raise: #1a1b1f;
    --pe-bg: #0b0b0d;
    --pe-ease: cubic-bezier(0.32, 0.72, 0, 1);
  }
  body.pe-on > header,
  body.pe-on > .skip-link {
    display: none !important;
  }

  /* ----- the one fixed screen ----- */
  body.pe-on main {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: hidden;
    background: var(--pe-bg);
    animation: none;
    z-index: 5;
  }
  body.pe-on .stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 var(--pe-sheet-h, 0px);
    grid-area: auto;
    max-height: none;
    position: relative;
    /* CLAUDE 10-11 (phone speed): no transition on padding-bottom (nor on #editTimeline's height below). Animating them
       laid the whole stage out on every frame of a sheet opening and redrew the preview canvas each time; the stage now
       changes once and phonescreen.js glides the picture with a transform (flipPreview). */
  }
  body.pe-on .stage > .stage-heading,
  body.pe-on .stage > .stage-note,
  body.pe-on .stage > .trim-bar,
  body.pe-on .stage > #sequenceStrip,
  body.pe-on .stage > #sourceVideo {
    display: none !important;
  }

  /* ----- top bar: back, search, quality, Export ----- */
  body.pe-on .pe-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right, 0px)) 0
      max(6px, env(safe-area-inset-left, 0px));
    background: var(--pe-bg);
    position: relative;
    z-index: 70;
  }
  body.pe-on .pe-grow {
    flex: 1;
  }
  body.pe-on .pe-ib {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--pe-ink);
  }
  body.pe-on .pe-ib:hover,
  body.pe-on .pe-ib:active {
    background: #1b1c20;
  }
  body.pe-on .pe-i {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.pe-on .pe-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 44px;
    min-height: 44px;
    padding: 0 6px 0 12px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    color: var(--pe-ink);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  body.pe-on .pe-chip .pe-i {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: transform 0.2s var(--pe-ease);
  }
  body.pe-on .pe-chip[aria-expanded='true'] .pe-i {
    transform: rotate(180deg);
  }
  body.pe-on .pe-export {
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    margin-left: 4px;
    padding: 0 20px;
    border: 0;
    border-radius: 22px;
    background: var(--accent, #53fc18);
    color: #061000;
    font-size: 14px;
    font-weight: 700;
  }
  body.pe-on .pe-export:hover {
    background: #6dff3a;
  }
  body.pe-on .pe-export:disabled {
    opacity: 0.45;
  }
  body.pe-on .pe-qpop {
    display: block;
    position: absolute;
    top: calc(100% - 4px);
    right: 8px;
    left: 8px;
    padding: 14px;
    border: 1px solid #2c2e35;
    border-radius: 18px;
    background: #17181c;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
    z-index: 80;
    animation: pe-pop 0.18s var(--pe-ease) both;
  }
  body.pe-on .pe-qpop > b {
    display: block;
    margin: 4px 0 8px;
    color: var(--pe-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  body.pe-on .pe-qpop > small {
    display: block;
    margin-top: 12px;
    color: var(--pe-soft);
    font-size: 12px;
    line-height: 1.4;
  }
  body.pe-on .pe-seg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  body.pe-on .pe-seg.pe-fps {
    grid-template-columns: repeat(5, 1fr);
  }
  body.pe-on .pe-seg button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 4px;
    border: 1px solid #2c2e35;
    border-radius: 12px;
    background: #1d1e23;
    color: var(--pe-ink);
  }
  body.pe-on .pe-seg.pe-fps button {
    min-height: 48px;
  }
  body.pe-on .pe-seg button b {
    font-size: 15px;
  }
  body.pe-on .pe-seg button small {
    color: var(--pe-soft);
    font-size: 10.5px;
  }
  body.pe-on .pe-seg button[aria-checked='true'] {
    border-color: var(--accent, #53fc18);
    background: rgba(83, 252, 24, 0.12);
    color: #9dff7a;
  }

  /* ----- the preview ----- */
  body.pe-on .stage > .preview-wrap {
    order: 1;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #050506;
    transition: none;
  }
  body.pe-on .preview-wrap canvas {
    touch-action: manipulation;
  }
  body.pe-on.pe-noproj .preview-wrap {
    min-height: 40vh;
  }
  body.pe-on.pe-noproj #previewEmpty {
    padding: 24px;
  }

  /* the one-line caption editor a tap on a caption opens (app-captions.js capEditText): full width under the top bar, where
     the keyboard does not cover it, 16 px so iOS does not zoom in */
  /* (the :not()s only raise the specificity above style.css's rule for every plain input) */
  body.pe-on input.cap-edit:not([type='checkbox']):not([type='range']):not([type='color']) {
    left: 12px !important;
    top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box;
    width: calc(100vw - 24px);
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 16px;
    z-index: 120;
  }

  /* ----- the row: time, play, keyframe, undo, redo, full screen ----- */
  body.pe-on .stage > .transport {
    order: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    height: 52px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 max(8px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
    background: var(--pe-bg);
  }
  body.pe-on .transport > #seek,
  body.pe-on .transport > .ratio-pick,
  body.pe-on .transport > #snapBtn,
  body.pe-on .transport > #muteBtn {
    display: none;
  }
  body.pe-on .transport #clock,
  body.pe-on .transport #duration,
  body.pe-on .transport .pe-slash {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--pe-soft);
  }
  body.pe-on .transport #clock {
    color: var(--pe-ink);
  }
  body.pe-on .transport .pe-slash {
    display: inline;
    margin: 0 4px;
  }
  body.pe-on .transport #duration {
    display: inline;
  }
  body.pe-on .transport .tp-btn,
  body.pe-on .transport .pe-key {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pe-ink);
  }
  body.pe-on .transport .pe-key {
    order: 6;
  }
  body.pe-on .transport #playBtn {
    order: 5;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin-left: auto;
    background: var(--pe-ink);
    color: #0b0b0d;
  }
  body.pe-on .transport #playBtn:hover {
    background: #fff;
  }
  body.pe-on .transport #undoBtn {
    order: 7;
  }
  body.pe-on .transport #redoBtn {
    order: 8;
  }
  body.pe-on .transport #fullBtn {
    order: 9;
  }
  body.pe-on .transport .tp-btn .ic {
    width: 22px;
    height: 22px;
  }
  body.pe-on .transport .pe-key {
    display: grid;
  }
  body.pe-on .transport .pe-key .pe-i {
    width: 22px;
    height: 22px;
  }
  body.pe-on .transport .pe-key.on {
    color: #ffd54a;
  }
  body.pe-on .transport .pe-key.on .pe-i {
    fill: currentColor;
  }
  body.pe-on .transport .tp-btn:disabled {
    opacity: 0.32;
  }

  /* ----- the timeline: the playhead in the middle, the tracks scroll under it ----- */
  body.pe-on #editTimeline {
    order: 3;
    display: flex;
    flex-direction: column;
    flex: none;
    height: min(34dvh, 262px);
    min-height: 168px;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--pe-line);
    border-radius: 0;
    background: #0d0d0f;
    overflow: hidden;
    position: relative;
    transition: opacity 0.2s ease;
  }
  body.pe-on.pe-noproj #editTimeline,
  body.pe-on.pe-noproj .transport,
  body.pe-on.pe-noproj .pe-tools {
    display: none;
  }
  body.pe-on #editTimeline .tl-tools,
  body.pe-on #editTimeline .tl-labels {
    display: none;
  }
  body.pe-on .tl-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    scrollbar-width: none;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.pe-on .tl-body::-webkit-scrollbar {
    display: none;
  }
  body.pe-on .pe-spacer {
    display: block;
    flex: none;
    width: 50%;
    height: 1px;
  }
  body.pe-on .tl-body > .tl-tracks {
    flex: none;
    width: calc(100% * var(--tlz, 1));
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 10px;
    position: relative;
  }
  body.pe-on .tl-ruler {
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 4;
    flex: none;
    height: 28px;
    margin: 0;
    background:
      repeating-linear-gradient(90deg, #34343a 0 1px, transparent 1px 10%) bottom/100% 5px no-repeat,
      #0d0d0f;
    border-bottom: 1px solid var(--pe-line);
    color: #7f838c;
    font-size: 11px;
    cursor: default;
  }
  body.pe-on .tl-ruler span {
    position: absolute;
    top: 5px;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
  }
  body.pe-on .tl-ruler span:first-child {
    transform: none;
  }
  body.pe-on .tl-track {
    flex: none;
    height: 44px;
    line-height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    overflow: visible;
    position: relative;
  }
  body.pe-on .tl-track[data-track='video'] {
    height: 60px;
    line-height: 60px;
    background: rgba(255, 255, 255, 0.02);
  }
  body.pe-on .tl-track.pe-off {
    display: none;
  }
  body.pe-on .tl-track:empty::after {
    display: none;
  }
  body.pe-on .tl-block {
    top: 3px;
    bottom: 3px;
    font-size: 11px;
    border-radius: 7px;
  }
  /* a finger on a block scrolls the tracks (the playhead stays in the middle); only the end handles of the SELECTED block
     grab it, to trim. Moving a block by dragging it is the mouse's; on a phone its times are numbers in its editor. */
  body.pe-on .tl-trim {
    touch-action: pan-x pan-y;
  }
  body.pe-on .tl-grip {
    touch-action: none;
    width: 24px;
  }
  body.pe-on .tl-trim:not(.selected) > .tl-grip {
    pointer-events: none;
    opacity: 0;
  }
  body.pe-on .tl-trim.selected > .tl-grip {
    opacity: 1;
  }
  body.pe-on .tl-block b,
  body.pe-on .tl-block > b[title='Remove'] {
    display: none; /* the small × is not a finger target: Delete is in the toolbar */
  }
  body.pe-on .tl-block.selected {
    outline: 2px solid #fff;
    outline-offset: -2px;
    z-index: 2;
  }
  body.pe-on .tl-playhead {
    visibility: hidden;
  }
  body.pe-on .pe-playhead {
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
    border-radius: 1px;
    pointer-events: none;
    z-index: 8;
  }
  body.pe-on .pe-playhead::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 12px;
    height: 10px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
  }
  /* what sits on the main track's two ends */
  body.pe-on .pe-lead-btns {
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
  }
  body.pe-on .pe-lb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 52px;
    height: 56px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #1b1c20;
    color: var(--pe-ink);
    font-size: 10px;
    line-height: 1.1;
  }
  body.pe-on .pe-lb .pe-i {
    width: 20px;
    height: 20px;
  }
  body.pe-on .pe-lb[aria-pressed='true'] {
    color: #ff9a9a;
  }
  body.pe-on .pe-lb[data-set='1'] {
    box-shadow: inset 0 0 0 1.5px var(--accent, #53fc18);
  }
  body.pe-on .pe-plus {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 10px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pe-ink);
    color: #0b0b0d;
  }
  body.pe-on .pe-plus:active {
    transform: translateY(-50%) scale(0.95);
  }
  body.pe-on .pe-pill {
    position: sticky;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #2b2d34;
    border-radius: 10px;
    background: #17181c;
    color: #d7dae0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
  body.pe-on .pe-pill .pe-i {
    width: 18px;
    height: 18px;
  }
  body.pe-on .pe-pill:hover {
    background: #1d1f24;
  }

  /* ----- the bottom toolbar ----- */
  body.pe-on .stage > .pe-tools {
    order: 4;
    display: flex;
    align-items: stretch;
    width: 100%;
    flex: none;
    height: calc(68px + env(safe-area-inset-bottom, 0px));
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--pe-line);
    background: var(--pe-bg);
    position: relative;
    z-index: 3;
  }
  body.pe-on .pe-tool-scroll {
    flex: 1;
    min-width: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  body.pe-on .pe-tool-scroll::-webkit-scrollbar {
    display: none;
  }
  body.pe-on .pe-tools.pe-swap .pe-tool-scroll {
    animation: pe-swap 0.2s var(--pe-ease) both;
  }
  body.pe-on .pe-back {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--pe-line);
    border-radius: 0;
    background: transparent;
    color: var(--pe-ink);
  }
  body.pe-on .pe-back[hidden] {
    display: none;
  }
  body.pe-on .pe-tool {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 72px;
    min-height: 56px;
    padding: 6px 8px 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #c9ccd3;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
  }
  body.pe-on .pe-tool:active {
    background: #1b1c20;
  }
  body.pe-on .pe-tool:disabled {
    opacity: 0.34;
  }
  body.pe-on .pe-tool .pe-i {
    width: 24px;
    height: 24px;
  }
  body.pe-on .pe-rec {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 50%;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    min-height: 44px;
    padding: 0 18px 0 14px;
    border: 0;
    border-radius: 22px;
    background: #d92d3a;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    z-index: 75;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
  body.pe-on .pe-rec[hidden] {
    display: none;
  }
  body.pe-on .pe-rec i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation: pe-blink 1.1s ease-in-out infinite;
  }

  /* ----- while a sheet is open the timeline and toolbar give way; the preview and its row stay ----- */
  body.pe-on.pe-sheet #editTimeline {
    height: 0;
    min-height: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
  }
  body.pe-on.pe-sheet .stage > .pe-tools {
    visibility: hidden;
    height: 0;
    min-height: 0;
    border: 0;
    padding: 0;
    overflow: hidden;
  }
  body.pe-on.pe-full .stage > .transport {
    display: none;
  }
  body.pe-on.pe-sheet .pe-rec {
    bottom: calc(var(--pe-sheet-h, 0px) + 12px);
  }

  /* ----- the two sheets ----- */
  body.pe-on main > aside.library,
  body.pe-on main > aside.inspector {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: none;
    min-height: 0;
    max-height: none;
    height: var(--pe-sheet-h, 46dvh);
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border: 0;
    border-top: 1px solid #2a2b31;
    border-radius: 20px 20px 0 0;
    background: #111114;
    box-shadow: 0 -18px 52px rgba(0, 0, 0, 0.6);
    z-index: 60;
    transform: translateY(104%);
    visibility: hidden;
    overscroll-behavior: contain;
    /* CLAUDE 10-11: transform only: the sheet's height changes at once (a drag follows the finger with a transform, phonescreen.js
       grabbable); a height transition re-laid out every tile in the grid on each frame */
    transition:
      transform 0.28s var(--pe-ease),
      visibility 0s linear 0.28s;
  }
  body.pe-on main > aside.pe-open {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  body.pe-on main > aside.inspector {
    overflow-y: auto;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
    display: block;
  }
  body.pe-on aside .pe-head {
    display: flex;
    align-items: center;
    flex: none;
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: 56px;
    margin: 0 -16px;
    padding: 6px 6px 0 20px;
    background: #111114;
    touch-action: none;
    cursor: grab;
  }
  body.pe-on main > aside.library .pe-head {
    margin: 0;
  }
  /* CLAUDE 10-11: an effect's settings (tiledrop.js) fill the sheet; its title and close button are the sheet's own */
  body.pe-on .dnd-inspect .dnd-head {
    display: none;
  }
  /* the text and sound editors hide every other child of the inspector: the sheet's handle stays */
  body.pe-on aside.inspector.layer-open:not(.dnd-on) > .pe-head,
  body.pe-on aside.inspector.audio-open:not(.dnd-on) > .pe-head {
    display: flex !important;
  }
  /* the text editor's own back / duplicate / delete row: the sheet has its close button and the toolbar has Duplicate and
     Delete, so two crosses that mean different things are not shown */
  body.pe-on #layerEd .overlay-head button,
  body.pe-on #audioEd .overlay-head button {
    display: none;
  }
  body.pe-on #layerEd .overlay-card,
  body.pe-on #audioEd .overlay-card {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }
  body.pe-on .pe-grab {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 2px;
    background: #3b3c43;
  }
  body.pe-on .pe-title {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 650;
    color: var(--pe-ink);
  }
  body.pe-on .pe-head .pe-x {
    margin: 6px 0 0 auto;
  }
  /* the left tools panel: the category row goes (the toolbar picks the category); its sub list is a row of chips */
  body.pe-on main > aside.library.cc-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.pe-on aside.library .cc-cats {
    display: none;
  }
  body.pe-on aside.library .cc-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.pe-on aside.library .cc-subs {
    flex: none;
    width: auto;
    flex-direction: row;
    gap: 8px;
    padding: 4px 16px 10px;
    border: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.pe-on aside.library .cc-subs::-webkit-scrollbar {
    display: none;
  }
  body.pe-on aside.library .cc-subs:not(:has(> button:nth-child(2))) {
    display: none;
  }
  body.pe-on aside.library .cc-subs button {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 20px;
    background: #1b1c20;
    border: 1px solid #2a2c33;
    font-size: 13px;
    font-weight: 550;
    white-space: nowrap;
  }
  body.pe-on aside.library .cc-subs button.active {
    background: var(--pe-ink);
    border-color: var(--pe-ink);
    color: #0b0b0d;
  }
  body.pe-on aside.library .cc-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  /* a finger and a phone keyboard: fields and buttons in the sheets are 44 px tall, fields 16 px so iOS does not zoom */
  body.pe-on
    aside.pe-open
    :is(
      select,
      textarea,
      input:not([type]),
      input[type='text'],
      input[type='search'],
      input[type='number'],
      input[type='email'],
      input[type='url']
    ) {
    min-height: 44px;
    font-size: 16px;
  }
  body.pe-on aside.pe-open :is(button, summary):not(.kf-dia):not(.cc-fx *):not(.cc-filter):not(.cc-texttpl *) {
    min-height: 44px;
  }
  /* the Style studio's own tab row */
  body.pe-on aside.inspector .tabs {
    display: flex;
    gap: 6px;
    margin: 0 -16px 12px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.pe-on aside.inspector .tabs::-webkit-scrollbar {
    display: none;
  }
  body.pe-on aside.inspector .tabs button {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 22px;
  }

  /* ----- the quick sheets (Beats, Cover), search, and the page's own full screen ----- */
  dialog.pe-quick {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid #2a2b31;
    border-radius: 20px 20px 0 0;
    background: #141417;
    color: var(--pe-ink);
  }
  dialog.pe-quick::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }
  dialog.pe-quick .pe-qhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
  }
  dialog.pe-quick .pe-qhead b {
    font-size: 17px;
    font-weight: 650;
  }
  dialog.pe-quick .pe-ib {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pe-ink);
  }
  dialog.pe-quick .pe-i {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  dialog.pe-quick .pe-qrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    margin-bottom: 8px;
    padding: 10px 16px;
    border: 1px solid #25262c;
    border-radius: 14px;
    background: #1a1b1f;
    color: var(--pe-ink);
    text-align: left;
  }
  dialog.pe-quick .pe-qrow span {
    display: grid;
    gap: 3px;
  }
  dialog.pe-quick .pe-qrow b {
    font-size: 15px;
    font-weight: 600;
  }
  dialog.pe-quick .pe-qrow small {
    color: var(--pe-soft);
    font-size: 12.5px;
    line-height: 1.35;
  }
  dialog.pe-quick .pe-sw {
    flex: none;
    position: relative;
    width: 46px;
    height: 28px;
    border-radius: 14px;
    background: #34353c;
    transition: background 0.18s;
  }
  dialog.pe-quick .pe-sw::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s var(--pe-ease);
  }
  dialog.pe-quick .pe-qrow[aria-pressed='true'] .pe-sw {
    background: var(--accent, #53fc18);
  }
  dialog.pe-quick .pe-qrow[aria-pressed='true'] .pe-sw::after {
    transform: translateX(18px);
    background: #061000;
  }
  dialog.pe-quick .pe-qbtn {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    border-radius: 14px;
    font-weight: 600;
  }
  dialog.pe-quick .pe-cover {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 4px 0 8px;
  }
  dialog.pe-quick .pe-cover p {
    margin: 0;
    color: var(--pe-soft);
    font-size: 13.5px;
    line-height: 1.45;
  }
  dialog.pe-quick .pe-cover p b {
    color: var(--pe-ink);
  }
  dialog.pe-quick .pe-cover-box {
    flex: none;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #2a2c33;
    background: #000;
  }
  dialog.pe-quick .pe-cover-pic {
    display: block;
    max-width: 150px;
    height: auto;
  }
  dialog.pe-search {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: env(safe-area-inset-top, 0px) 0 0;
    border: 0;
    border-radius: 0;
    background: #0d0d0f;
    color: var(--pe-ink);
    overflow-y: auto;
  }
  dialog.pe-search .pe-sbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--pe-line);
  }
  dialog.pe-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #2a2c33;
    border-radius: 22px;
    background: #17181c;
    color: var(--pe-ink);
    font-size: 16px; /* iOS zooms into a field under 16 px */
  }
  dialog.pe-search .pe-ib {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pe-ink);
  }
  dialog.pe-search .pe-i {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  dialog.pe-search .pe-results {
    display: grid;
    padding: 8px 8px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  dialog.pe-search .pe-res {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 6px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--pe-ink);
    text-align: left;
  }
  dialog.pe-search .pe-res:active,
  dialog.pe-search .pe-res:hover {
    background: #17181c;
  }
  dialog.pe-search .pe-res span {
    display: grid;
    gap: 2px;
  }
  dialog.pe-search .pe-res b {
    font-size: 15px;
    font-weight: 600;
  }
  dialog.pe-search .pe-res small {
    color: var(--pe-soft);
    font-size: 12px;
  }
  dialog.pe-search .pe-none {
    margin: 24px 16px;
    color: var(--pe-soft);
    font-size: 14px;
    line-height: 1.5;
  }
  /* the export's progress card sits above the toolbar */
  /* the export's progress and its downloads sit over the top of the preview, so a sheet never hides them */
  body.pe-on .job-card {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(64px + env(safe-area-inset-top, 0px));
    bottom: auto;
    width: auto;
    z-index: 65;
    background: rgba(16, 20, 16, 0.96);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  }
  body.pe-on .job-card :is(button, a) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.pe-on #toast {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 24px);
    z-index: 95;
  }
  /* full screen where the browser has none (an iPhone): the preview takes the whole screen */
  body.pe-on .preview-wrap.pe-fake {
    position: fixed !important;
    inset: 0 !important;
    z-index: 300;
    background: #000 !important;
    flex: none;
  }
  body.pe-on .pe-fullx {
    display: none;
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    z-index: 6;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
  }
  body.pe-on.pe-fakefull .pe-fullx:not([hidden]) {
    display: grid;
  }
  @keyframes pe-pop {
    from {
      opacity: 0;
      transform: translateY(-6px) scale(0.98);
    }
  }
  @keyframes pe-swap {
    from {
      opacity: 0;
      transform: translateX(10px);
    }
  }
  @keyframes pe-blink {
    50% {
      opacity: 0.25;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    body.pe-on .stage,
    body.pe-on main > aside.library,
    body.pe-on main > aside.inspector,
    body.pe-on #editTimeline,
    body.pe-on .pe-qpop,
    body.pe-on .pe-tool-scroll,
    body.pe-on .pe-rec i {
      transition: none !important;
      animation: none !important;
    }
  }
}