/* One viewport, never a page scrollbar: the whole app is a fixed-height grid,
   and the stage takes whatever is left after the panel and the bottom bar.
   Nothing here knows a stage size - resize() measures the box it was given. */

:root{
  --ink:#1e2024;
  --muted:#8b9099;
  --line:#e6e8ec;
  --line-soft:#eef0f3;
  --card:#fff;
  --page:#fbfbfc;
  --accent:#2f6df6;
  --track:#e9ebef;
  --radius:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--page);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  font-synthesis:none;-webkit-font-smoothing:antialiased;
  overflow:hidden;                       /* the page itself never scrolls */
}

.app{
  height:100dvh;
  display:grid;grid-template-columns:274px minmax(0,1fr);
  gap:20px;padding:20px;
}

/* ---------------- panel ---------------- */
/* the left column: the panel, then the credit under it. The credit never
   shrinks; when the window is too short, the panel gives up height and its cards
   scroll - the page itself still never does. */
.side{min-height:0;display:flex;flex-direction:column;gap:14px}
.panel{
  flex:0 1 auto;
  min-height:0;display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:16px 14px 14px;
}
.panel-head{display:flex;justify-content:center}
.panel h1{
  font-size:13px;font-weight:600;letter-spacing:.01em;text-align:center;
  color:var(--ink);padding-bottom:2px;
}
.cards{
  display:flex;flex-direction:column;gap:9px;
  overflow-y:auto;min-height:0;flex:1 1 auto;   /* the panel scrolls, not the page */
  scrollbar-width:thin;
}
.card{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px 10px;background:var(--card);
}
.lbl{display:block;font-size:11px;color:var(--muted);margin-bottom:7px}
.row{display:flex;align-items:center;gap:10px}
.row input[type=range]{flex:1 1 auto;min-width:0}
.row b{
  flex:0 0 auto;min-width:46px;text-align:right;
  font-size:11px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
}
.panel-foot{flex:0 0 auto;padding-top:2px}

/* background card: swatch + upload, side by side */
.bg-row{display:flex;align-items:center;gap:9px}
.swatch{
  position:relative;flex:0 0 auto;width:42px;height:30px;border-radius:10px;
  border:1px solid var(--line);cursor:pointer;overflow:hidden;
  box-shadow:inset 0 0 0 3px #fff;
}
.swatch input[type=color]{
  position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);
  padding:0;border:none;background:none;cursor:pointer;
}
.swatch input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.swatch input[type=color]::-webkit-color-swatch{border:none}
/* whichever background is live says so */
.swatch.on{border-color:var(--accent);box-shadow:inset 0 0 0 3px #fff,0 0 0 2px #2f6df633}
#bgbtn.on{border-color:var(--accent);color:var(--accent)}
#bgbtn.on .ico{stroke:var(--accent)}

/* ---------------- credit ---------------- */
.credit{flex:0 0 auto;padding:0 2px;display:flex;flex-direction:column;gap:9px}
.credit p{font-size:12px;color:var(--muted);letter-spacing:.005em}
.credit b{color:var(--ink);font-weight:600}
.social{display:flex;gap:8px}
.social a{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--card);color:var(--muted);
  transition:color .15s,border-color .15s,background .15s;
}
.social a:hover,.social a:focus-visible{color:var(--ink);border-color:#cfd3da;background:#f6f7f9}
.social a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.social svg{width:15px;height:15px;fill:currentColor;display:block}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:12px;font-weight:500;color:var(--ink);
  padding:8px 13px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
.btn:hover{background:#f6f7f9;border-color:#d8dbe1}
.btn.wide{width:100%}
.ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
     stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
input[type=file]{display:none}

select{
  font:inherit;font-size:12px;color:var(--ink);
  padding:8px 30px 8px 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--card) url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9099' \
stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 9px center/13px;
  -webkit-appearance:none;appearance:none;cursor:pointer;max-width:210px;
}
select:hover{border-color:#d8dbe1}

/* ---------------- sliders ---------------- */
input[type=range]{
  -webkit-appearance:none;appearance:none;height:4px;
  background:var(--track);border-radius:4px;outline:none;cursor:ew-resize;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:#fff;border:1.5px solid #b9bfc9;box-shadow:0 1px 2px #0000001f;cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:#fff;
  border:1.5px solid #b9bfc9;cursor:pointer;
}

/* ---------------- stage ---------------- */
.main{min-width:0;min-height:0;display:flex;flex-direction:column;gap:14px}
.stagewrap{
  position:relative;flex:1 1 auto;min-height:0;min-width:0;
  display:flex;align-items:center;justify-content:center;
}
#stage{
  display:block;max-width:100%;max-height:100%;
  border-radius:18px;cursor:pointer;background:#f6f6f3;
}

/* ---------------- bottom bar ---------------- */
.bottom{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:11px}
.bar{
  display:flex;align-items:center;gap:11px;
  max-width:100%;padding:10px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 8px 24px -18px #0000004d;
}
.mini{font-size:11px;color:var(--muted);white-space:nowrap}
.sep{width:1px;height:24px;background:var(--line);flex:0 0 auto}
.play{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);display:flex;align-items:center;justify-content:center;
  transition:filter .15s;
}
.play:hover{filter:brightness(1.08)}
.play svg{width:15px;height:15px;fill:#fff}
#scrub{flex:1 1 260px;min-width:120px;max-width:420px}

/* play/pause: one button, two glyphs */
.ico-pause{display:none}
.is-playing .ico-play{display:none}
.is-playing .ico-pause{display:block}

/* ---------------- readouts ---------------- */
.meta{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.tag{
  font-size:10.5px;color:var(--muted);
  padding:4px 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);
}
.tag b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;margin-left:3px}

/* ---------------- mismatch banner ---------------- */
.warn{
  position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  max-width:min(760px,calc(100vw - 40px));z-index:5;
  padding:9px 16px;border-radius:12px;
  background:#fdf6e7;border:1px solid #ecd9ae;color:#7a5c1e;
  font-size:11.5px;line-height:1.6;text-align:center;
  box-shadow:0 10px 30px -14px #0000004d;
}
.warn[hidden]{display:none}

/* phone-only pieces: the sheet's handle and close button, and the button that
   opens it. The desktop layout never shows them. This sits after .btn on
   purpose - same specificity, so whichever comes later wins. */
.sheet-handle,.sheet-close,.settings-open{display:none}

/* ================= phones =================
   Same page, reshaped. The artwork comes first at full width, the controls sit
   under it, and the settings panel turns into a sheet that slides up over the
   bottom half (sideways on a phone held flat) - mobile.js opens it and moves
   the artwork clear of it, so a slider's effect is always in view. The stage is
   still measured by resize(), so none of this knows a stage size either. */
@media (max-width: 760px), (max-height: 520px){
  .app{
    display:flex;flex-direction:column;gap:12px;
    padding:12px 12px max(12px, env(safe-area-inset-bottom));
  }
  .side{display:contents}                /* panel and credit join the column */
  .main{order:1;flex:1 1 auto;gap:12px}
  .credit{order:2;flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  .social{gap:6px}
  .social a{width:34px;height:34px}

  .stagewrap{transition:transform .34s cubic-bezier(.2,.8,.2,1)}
  .meta{display:none}                    /* readouts are for tuning, not for a phone */
  .bottom{gap:10px;align-items:stretch}

  /* the bar: play and scrub on the first line, size and upload on the second */
  .bar{width:100%;flex-wrap:wrap;gap:10px;border-radius:22px;padding:10px 12px}
  .bar .mini,.bar .sep{display:none}
  .play{order:1;width:42px;height:42px}
  /* the scrub claims the rest of line one, which pushes size and upload down */
  #scrub{order:2;flex:1 1 calc(100% - 60px);min-width:0;max-width:none}
  #size{order:3;flex:1 1 0;min-width:0;max-width:none}
  .bar .file{order:4}

  .settings-open{display:inline-flex;width:100%;padding:12px}

  /* bigger targets for a finger */
  .btn{font-size:13px;padding:10px 14px}
  select{font-size:13px;padding:10px 30px 10px 12px}
  input[type=range]{height:6px}
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px;border-width:2px}
  input[type=range]::-moz-range-thumb{width:22px;height:22px}
  .card{padding:11px 14px 12px}
  .lbl{font-size:12px}
  .row b{font-size:12px}

  /* the sheet */
  .panel{
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    height:60dvh;border-radius:24px 24px 0 0;border-bottom:none;
    padding:6px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -18px 50px -22px #00000059;
    transform:translateY(105%);visibility:hidden;
    transition:transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s linear .34s;
  }
  .sheet-open .panel{
    transform:translateY(var(--drag, 0px));visibility:visible;
    transition:transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s;
  }
  .sheet-handle{
    display:block;flex:0 0 auto;width:40px;height:5px;border-radius:3px;
    background:#d5d9df;margin:4px auto 2px;
  }
  .panel-head{position:relative;align-items:center;min-height:38px;touch-action:none}
  .sheet-close{
    display:inline-flex;align-items:center;justify-content:center;
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:34px;height:34px;border-radius:50%;cursor:pointer;
    border:1px solid var(--line);background:var(--card);color:var(--muted);
  }
}

/* a phone held flat: too short for a sheet from below, so it comes in from the
   right, and the bar and the settings button share one line */
@media (max-height: 520px) and (orientation: landscape){
  .bottom{flex-direction:row;align-items:stretch}
  .bar{flex:1 1 auto;flex-wrap:nowrap}
  #scrub{flex:1 1 120px}
  #size{flex:0 1 180px}
  .settings-open{width:auto;flex:0 0 auto}
  .social a{width:30px;height:30px}

  .stagewrap{transition:transform .34s cubic-bezier(.2,.8,.2,1)}
  .panel{
    left:auto;top:0;height:auto;width:min(360px, 48vw);
    border-radius:24px 0 0 24px;border-bottom:1px solid var(--line);border-right:none;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom));
    transform:translateX(105%);
  }
  .sheet-open .panel{transform:translateX(0)}
  .sheet-handle{display:none}
}