* { margin: 0; padding: 0; box-sizing: border-box; }

/* DOGA house style: white ground, near-black type, hairline rules, square corners everywhere. */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --sunken: #f0f0f1;
  --edge: #d7d7da;
  --text: #111113;
  --dim: #76767c;
  --faint: #9d9da3;
  --accent: #111113;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 'DOGA Graphik', Graphik, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.btn {
  background: #f4f4f5;
  color: var(--text);
  border: 1px solid var(--edge);
  padding: 8px 13px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: #e8e8ea; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.btn.primary:hover { background: #33333a; }
.btn.danger { color: #c4342a; padding: 5px 10px; }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn.wide { width: 100%; text-align: left; }

.seg { display: flex; border: 1px solid var(--edge); }
.seg button {
  flex: 1;
  background: transparent; color: var(--dim); border: 0;
  padding: 8px 12px; font: inherit; cursor: pointer;
}
.seg button.on { background: var(--accent); color: #fff; }
.btn.wide.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.wide.on::after { content: ' ✓'; color: rgba(255,255,255,0.55); }
.label { color: var(--faint); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

.btnGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.btnGrid button {
  background: #f4f4f5;
  color: var(--text);
  border: 1px solid var(--edge);
  padding: 7px 6px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.btnGrid button:hover { background: #e8e8ea; }

/* ---------- stage + sidebar ---------- */
#main { flex: 1; display: flex; min-height: 0; }
#stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  padding: 18px;
  background: var(--sunken);
}
#preview {
  max-width: 100%;
  max-height: 100%;
  background: #000;
  box-shadow: 0 0 0 1px var(--edge);
  cursor: grab;
}
#dropHint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--dim);
  font-size: 17px;
  pointer-events: none;
}
#dropHint span { font-size: 13px; }
#dropHint.hidden { display: none; }
body.dragover #stage { outline: 2px dashed var(--accent); outline-offset: -10px; }

#side {
  width: 248px;
  border-left: 1px solid var(--edge);
  background: var(--panel);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.wordmark { font-weight: 800; letter-spacing: 0.18em; color: var(--text); text-decoration: none; display: block; }
.wordmark:hover { text-decoration: underline; }
.section { display: flex; flex-direction: column; gap: 8px; }
#timecode { color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------- sidebar tabs ---------- */
/* A rule with an underlined active tab — deliberately unlike the segmented ratio control
   sitting right above it, so the two don't read as the same kind of switch. */
.tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--edge); }
.tabs button {
  background: transparent;
  color: var(--dim);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 4px 0 7px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.tabPanel { display: flex; flex-direction: column; gap: 10px; }
.tabPanel[hidden] { display: none; }
#exportRow { margin-top: auto; padding-top: 4px; }

/* ---------- media tab ---------- */
#dropZone {
  border: 1px dashed #b6b6bc;
  background: #fafafa;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  cursor: pointer;
}
#dropZone:hover { background: #f1f1f2; border-color: var(--accent); }
#dropZone strong { font-size: 13px; font-weight: 600; }
#dropZone span { color: var(--dim); font-size: 11px; }
body.dragover #dropZone { border-color: var(--accent); background: #ebebec; }

#assetList { display: flex; flex-direction: column; gap: 2px; }
.asset {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  min-width: 0;
}
.asset[draggable="true"] { cursor: grab; }
.asset.dragging { opacity: 0.45; }
.asset:hover { background: #f1f1f2; }
.asset.selected { border-color: var(--accent); background: #f1f1f2; }
.asset .thumb { width: 40px; height: 40px; flex: none; display: block; background: #e2e2e4; }
.asset .meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.asset .meta b {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset .meta i { font-style: normal; font-size: 11px; color: var(--dim); }
.asset .x { margin-left: auto; padding: 0 4px; color: var(--dim); visibility: hidden; }
.asset:hover .x { visibility: visible; }

/* ---------- floating layer window ---------- */
#layerWin {
  position: fixed;
  z-index: 12;
  width: 248px;
  background: var(--panel);
  border: 1px solid var(--edge);
  box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
}
#layerWin[hidden] { display: none; }
#layerBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  background: #f7f7f8;
  border-bottom: 1px solid var(--edge);
  cursor: grab;
}
#layerBar:active { cursor: grabbing; }
#inspTitle { font-weight: 600; font-size: 12px; }
#layerClose {
  background: transparent;
  border: 0;
  color: var(--dim);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
}
#layerClose:hover { color: var(--text); }
#layerBody {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.insp-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--edge); padding-top: 10px; }
#textControls, #clipControls { display: flex; flex-direction: column; gap: 10px; }
#textInput {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--edge);
  padding: 9px;
  font: 14px/1.4 Georgia, serif;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
  width: 100%;
}
.ctl { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.ctl input[type=range] { flex: 1; accent-color: var(--accent); }
.ctl input[type=number] {
  flex: 1;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--edge);
  padding: 6px 8px;
  font: inherit;
  user-select: text;
  -webkit-user-select: text;
}
.ctl select {
  flex: 1;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--edge);
  border-radius: 0;
  padding: 6px 8px;
  font: inherit;
}
.ctl span { min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.hint { color: var(--dim); font-size: 12px; }

/* ---------- timeline ---------- */
#timeline {
  border-top: 1px solid var(--edge);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  max-height: 44vh;
}
/* Transport sits directly above the tracks, where the playhead it drives is */
#tlHead {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--edge);
}
#tlHead #playBtn { padding: 5px 0; width: 68px; text-align: center; }
#tlHead #loopBtn { padding: 5px 0; width: 58px; text-align: center; }
.btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
#tlScroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 10px;
}

/* AE-style zoom slider, pinned below the scrolling tracks */
#tlFoot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-top: 1px solid var(--edge);
}
.zi {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent var(--faint) transparent;
  flex: none;
}
.zi.s { border-width: 0 4px 5px 4px; }
.zi.l { border-width: 0 6px 9px 6px; }
#zoomInput {
  -webkit-appearance: none;
  appearance: none;
  width: 132px;
  height: 12px;
  background: transparent;
  cursor: pointer;
  flex: none;
}
#zoomInput::-webkit-slider-runnable-track { height: 1px; background: var(--edge); }
#zoomInput::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 11px;
  margin-top: -5px;
  background: var(--accent);
}
#zoomInput::-moz-range-track { height: 1px; background: var(--edge); }
#zoomInput::-moz-range-thumb { width: 9px; height: 11px; border: 0; border-radius: 0; background: var(--accent); }
#spanLabel, #cacheLabel {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  min-width: 40px;
}
#tlFoot .spacer { flex: 1; }
.cacheKey {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cacheKey i { width: 12px; height: 3px; background: #1a9e48; }

.block.bad { background: #fae3e0; border-color: #dfa198; }
.block.bad .dur { color: #c4342a; }
#ruler {
  height: 22px;
  position: relative;
  cursor: ew-resize;
  border-bottom: 1px solid var(--edge);
  min-width: 100%;
}
#ruler .tick {
  position: absolute;
  top: 0;
  height: 100%;
  border-left: 1px solid var(--edge);
  color: var(--dim);
  font-size: 10px;
  padding-left: 4px;
  pointer-events: none;
}
.track {
  position: relative;
  margin-top: 8px;
  min-width: 100%;
  min-height: 40px;
}
#clipTrack.media-dragover {
  background: rgba(17,17,19,0.035);
  outline: 1px dashed var(--accent);
  outline-offset: -1px;
}
#clipTrack.media-dragover::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: var(--drop-x, 46px);
  width: 2px;
  background: var(--accent);
  pointer-events: none;
}
.trackLabel {
  position: absolute;
  left: 6px;
  top: 4px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.block {
  position: absolute;
  height: 34px;
  overflow: hidden;
  cursor: grab;
  border: 1px solid #c6c6ca;
  background: #ececee;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 6px;
  white-space: nowrap;
}
.block .name { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.block .dur { color: var(--dim); font-size: 11px; }
.block.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.block.still { background: #e2edef; border-color: #b3ccd1; }
.block.text { background: #f0ecd9; border-color: #d3cba6; }
.block.k-body, .block.k-label { background: #e4e9f2; border-color: #bcc7da; }
.block.k-pill, .block.k-wordmark, .block.k-arrow { background: #e9e4f3; border-color: #c7bedb; }
.block.k-scrim { background: #e6e6e8; border-color: #c6c6ca; }
.block .grip {
  position: absolute;
  top: 0;
  width: 9px;
  height: 100%;
  cursor: col-resize;
}
.block .grip.l { left: 0; border-left: 3px solid rgba(0,0,0,0.3); }
.block .grip.r { right: 0; border-right: 3px solid rgba(0,0,0,0.3); }
/* AE-style cache strip: green where the source is buffered */
.block .cache {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0,0,0,0.07);
  pointer-events: none;
}
.block .cache i {
  position: absolute;
  top: 0;
  height: 100%;
  background: #1a9e48;
}

.block .x {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  cursor: pointer;
  display: none;
  font-size: 13px;
}
.block:hover .x { display: block; }

#playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent);
  pointer-events: none;
}

#marquee {
  position: absolute;
  border: 1px solid var(--accent);
  background: rgba(17,17,19,0.07);
  pointer-events: none;
  z-index: 5;
}
#marquee[hidden] { display: none; }

/* ---------- export modal ---------- */
#exportModal {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.84);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
#exportModal[hidden] { display: none; }
.modal {
  background: var(--panel);
  border: 1px solid var(--accent);
  padding: 26px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
.modal h2 { font-size: 16px; }
.bar {
  height: 8px;
  background: #e6e6e8;
  overflow: hidden;
}
#exportBar { height: 100%; width: 0%; background: var(--accent); }
#exportInfo { color: var(--dim); min-height: 18px; }

/* ---------- phone ---------- */
/* One screen, one frame, one island. phone.js decides when this applies — a narrow desktop
   window is still the desktop editor, and ?phone / ?desktop force it either way. */
body.phone #side,
body.phone #timeline,
body.phone #layerWin { display: none; }
body.phone #stage { padding: 0 0 128px; background: #000; }
/* the frame lifts as one when the keyboard takes the bottom of the screen */
body.phone #main { transition: transform 0.16s ease-out; }
body.phone #preview { box-shadow: none; touch-action: none; cursor: default; }
body.phone #dropHint { font-size: 15px; }
body.phone .modal { width: auto; max-width: min(340px, calc(100vw - 32px)); }

#island {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  z-index: 14;
}
#island button {
  flex: 1;
  background: var(--panel);
  color: var(--text);
  border: 0;
  padding: 14px 4px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#island button.go { background: var(--accent); color: #fff; font-weight: 600; }
body.editing #island,
body.editing #ptl { display: none; }

/* transport + scrub, docked just above the island */
#ptl {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--edge);
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  z-index: 14;
}
#ptlPlay {
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  width: 22px;
  padding: 0;
  cursor: pointer;
}
#ptlTrack {
  position: relative;
  flex: 1;
  height: 22px;              /* a thumb's worth of grab around a hairline track */
  display: flex;
  align-items: center;
  touch-action: none;
  cursor: pointer;
}
#ptlTrack::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--edge);
}
#ptlFill { position: absolute; left: 0; height: 1px; background: var(--accent); }
#ptlHead {
  position: absolute;
  width: 2px;
  height: 13px;
  margin-left: -1px;
  background: var(--accent);
}
#ptlTime { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 11px; }
.backLink { color: var(--dim); text-decoration: none; font-size: 12px; }

#sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--panel);
  border-top: 1px solid var(--edge);
  padding: 12px 14px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 15;
}
#sheet[hidden] { display: none; }
.sheetBar { display: flex; align-items: center; justify-content: space-between; }
.sheetBar button {
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 2px;
  cursor: pointer;
}

/* The type hands itself over to a real input in place: same face, size and position, so the
   only thing that changes when the keyboard comes up is that there is now a caret. */
#editScrim { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 15; display: none; }
body.editing #editScrim { display: block; }
#tapEdit {
  position: fixed;
  z-index: 16;
  margin: 0;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  -webkit-appearance: none;
  user-select: text;
  -webkit-user-select: text;
  caret-color: #2f7cff;
}
/* Between edits the input stays in the page — iOS will not raise the keyboard for an element
   that was created by the same tap that focuses it — so it waits here: a focusable speck in
   the middle of the screen, invisible and out of the way of the thumb. */
#tapEdit.parked {
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}