/* editor.css — the studio layout. grid: header / [tools | stage] / timeline /
   actions. tuned to fit a laptop screen and collapse on mobile. */

html, body { height: 100%; overflow: hidden; }
body.editor {
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  height: 100vh;
}

/* filmstrip — the row of shot panels that makes "this is a movie" obvious */
.filmstrip { display: flex; align-items: stretch; gap: 8px; background: #0a0000; border-top: 3px solid var(--blood-dk); padding: 6px 10px; min-height: 88px; }
.filmstrip .fs-label { color: var(--blood); font-size: 11px; font-weight: bold; text-align: center; align-self: center; letter-spacing: 1px; }
.fs-shots { display: flex; gap: 6px; overflow-x: auto; flex: 1; align-items: center; }
.fs-shot { position: relative; flex: 0 0 auto; width: 104px; height: 74px; background: #fff; border: 2px solid #333; cursor: pointer; }
.fs-shot.sel { border-color: var(--blood); box-shadow: 0 0 8px rgba(192,6,26,0.6); }
.fs-shot canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.fs-shot .n { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.7); color: var(--lime); font-size: 10px; padding: 0 4px; }
.fs-actions { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.fs-actions .btn { font-size: 11px; padding: 3px 6px; }

/* cast list */
#castList { margin: 2px 0 4px; }
.cast-row { display: flex; align-items: center; gap: 5px; padding: 3px 4px; cursor: pointer; border: 1px solid transparent; font-size: 12px; }
.cast-row:hover { background: #1a0505; }
.cast-row.sel { border-color: var(--blood); background: #160404; }
.cast-row .sw { width: 13px; height: 13px; border: 1px solid #666; flex: 0 0 auto; }
.cast-row .nm { flex: 1; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-row .wp { color: var(--dim); font-size: 10px; }

/* pose stamp buttons */
#stampRow .btn { font-size: 11px; padding: 5px 3px; text-transform: none; letter-spacing: 0; }

/* header */
.ed-head {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px; background: #0a0000;
  border-bottom: 3px solid var(--blood-dk);
}
.ed-head .logo { font-size: 24px; }
.ed-head .meta { display: flex; gap: 8px; align-items: center; flex: 1; flex-wrap: wrap; }
.ed-head input.title { width: 200px; }
.ed-head input.author { width: 110px; }
.ed-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ed-head a.home { color: var(--dim); font-size: 12px; }
#status { color: var(--lime); font-size: 12px; min-width: 90px; }

/* main split */
.ed-main { display: grid; grid-template-columns: 188px 1fr; min-height: 0; }

/* tools */
.tools { overflow-y: auto; background: var(--panel); border-right: 3px solid #000; padding: 8px; }
.tools h4 { margin: 10px 0 4px; color: var(--blood); font-size: 12px; letter-spacing: 1px; border-bottom: 1px solid #2a2a2a; }
.tools h4:first-child { margin-top: 0; }
.tools .tool { display: block; width: 100%; text-align: left; margin: 3px 0; }
.tools .tool.active { background: linear-gradient(#3a1010, #1a0505); border-color: var(--blood) #000 #000 var(--blood); color: #fff; }
.tools .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.swatch { display: inline-block; width: 14px; height: 14px; border: 1px solid #555; vertical-align: middle; }

/* stage */
.stage-wrap { display: flex; align-items: center; justify-content: center; background:
    repeating-conic-gradient(#0e0e0e 0% 25%, #131313 0% 50%) 50% / 22px 22px; min-height: 0; overflow: auto; padding: 10px; }
#stage { background: #fff; box-shadow: 0 0 0 3px #000, 0 0 22px rgba(192,6,26,0.35); cursor: crosshair; touch-action: none; }
.stage-hint { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); color: var(--blood); font-size: 12px; background: rgba(0,0,0,0.7); padding: 2px 10px; border: 1px solid var(--blood-dk); pointer-events: none; }

/* timeline */
.timeline { background: #0a0a0a; border-top: 3px solid var(--blood-dk); padding: 6px 10px; }
.tl-transport { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.tl-transport .frame { color: var(--lime); font-size: 13px; min-width: 92px; }
.tl-transport label { font-size: 12px; color: var(--dim); }
.tl-grid { position: relative; background: #050505; border: 2px inset #222; height: 92px; overflow-x: auto; overflow-y: hidden; }
.tl-ruler { position: relative; height: 16px; background: #111; border-bottom: 1px solid #222; cursor: pointer; }
.tl-tick { position: absolute; top: 0; height: 16px; border-left: 1px solid #2a2a2a; color: #555; font-size: 9px; padding-left: 2px; }
.tl-rows { position: relative; }
.tl-row { position: relative; height: 24px; border-bottom: 1px solid #161616; cursor: pointer; }
.tl-row .lbl { position: absolute; left: 2px; top: 4px; font-size: 10px; color: var(--dim); z-index: 2; pointer-events: none; }
.tl-row.sel { background: #160404; }
.kf { position: absolute; top: 4px; width: 12px; height: 12px; background: var(--lime); border: 1px solid #000; transform: rotate(45deg); margin-left: -6px; cursor: pointer; }
.kf.hold { background: #ffb000; }
.kf.cur { background: #fff; box-shadow: 0 0 6px #fff; }
.fxmark { position: absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--blood); margin-left: -5px; bottom: 2px; }
.playhead { position: absolute; top: 0; width: 2px; background: var(--blood); height: 100%; z-index: 3; pointer-events: none; }

/* actions bar */
.actions { display: flex; gap: 8px; padding: 8px 12px; background: #0a0000; border-top: 2px solid #2a0306; flex-wrap: wrap; align-items: center; }
.actions .sp { flex: 1; }

/* progress / toast */
.toast { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: #0a0000; border: 2px solid var(--blood); color: #fff; padding: 8px 16px; z-index: 50; font-size: 13px; }
.bar { height: 6px; background: #222; margin-top: 5px; }
.bar > i { display: block; height: 100%; background: var(--blood); width: 0; }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal { background: var(--panel); border: 3px solid var(--blood-dk); padding: 18px; max-width: 460px; text-align: center; }
.modal h3 { color: var(--blood); margin: 0 0 8px; }
.modal input { width: 90%; margin: 6px 0; }
.linkbox { background: #000; color: var(--lime); padding: 6px; word-break: break-all; border: 1px inset #333; font-size: 12px; }

@media (max-width: 760px) {
  .ed-main { grid-template-columns: 150px 1fr; }
  .ed-head .meta { display: none; }
  /* keep weapon/tool labels readable in the narrow rail */
  .tools .btn, .tools button { font-size: 10px; letter-spacing: 0; padding: 5px 4px; white-space: normal; line-height: 1.05; }
  .tools .row2 { gap: 3px; }
}