/* Vibeoscope wireframe storyboard styles */
:root {
  --paper: #fafaf7;
  --ink: #3a3a3a;
  --ink-lt: #8a8a84;
  --sketch: #4a4a46;
  --accent: #c9971f;
  --accent-soft: #f3e3b4;
  --note: #2f6f9f;
  --fill: #efefea;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #e8e6e0;
  font-family: "IBM Plex Mono", monospace;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- chrome ---------- */
header.bar {
  background: var(--paper);
  border-bottom: 2px solid var(--sketch);
  padding: 14px 24px 0 24px;
  position: sticky; top: 0; z-index: 50;
}
.bar-top { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.bar-top h1 { font-family: "Caveat", cursive; font-size: 26px; font-weight: 700; }
.bar-top .sub { color: var(--ink-lt); font-size: 12px; }
.stepper { display: flex; gap: 0; }
.step {
  flex: 1; text-align: center; padding: 9px 4px 11px 4px;
  border: 1.5px solid var(--sketch); border-bottom: none;
  background: var(--fill); cursor: pointer; user-select: none;
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.5px;
  color: var(--ink);
}
.step + .step { margin-left: -1.5px; }
.step .n { display: block; font-family: "Caveat", cursive; font-size: 15px; color: var(--ink-lt); }
.step:hover { background: #fff; }
.step.active { background: var(--paper); font-weight: 600; position: relative; }
.step.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--paper); }
.step.active .n { color: var(--accent); }

main { max-width: 1280px; margin: 28px auto 80px auto; padding: 0 24px; }
section.screen { display: none; }
section.screen.visible { display: block; }

/* ---------- frame & annotations ---------- */
.frame-wrap { display: grid; grid-template-columns: 1fr 240px; gap: 20px; align-items: start; }
.frame {
  background: var(--paper); border: 2px solid var(--sketch);
  border-radius: 2px; padding: 22px; min-height: 560px;
  box-shadow: 3px 3px 0 rgba(74, 74, 70, 0.18);
}
.frame-title { display: flex; align-items: baseline; gap: 12px; border-bottom: 1.5px dashed var(--ink-lt); padding-bottom: 10px; margin-bottom: 16px; }
.frame-title h2 { font-family: "Caveat", cursive; font-size: 28px; font-weight: 700; }
.frame-title .loc { color: var(--ink-lt); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; }
.notes { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 110px; }
.note {
  font-family: "Caveat", cursive; font-size: 17px; line-height: 1.3; color: var(--note);
  border: 1.5px dashed var(--note); border-radius: 2px; padding: 10px 12px; background: #fff;
  transform: rotate(-0.5deg);
}
.note:nth-child(2n) { transform: rotate(0.6deg); }
.note b { font-weight: 700; }

/* ---------- wireframe primitives ---------- */
.wf-row { display: flex; gap: 12px; }
.wf-col { display: flex; flex-direction: column; gap: 12px; }
.box { border: 1.5px solid var(--sketch); background: #fff; border-radius: 2px; }
.box.dashed { border-style: dashed; background: transparent; }
.pad { padding: 12px; }
.label { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-lt); margin-bottom: 6px; display: block; }
.img-ph {
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--ink-lt) calc(50% - 0.5px), var(--ink-lt) calc(50% + 0.5px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ink-lt) calc(50% - 0.5px), var(--ink-lt) calc(50% + 0.5px), transparent calc(50% + 1px));
  background-color: var(--fill);
  border: 1.5px solid var(--sketch);
}
.btn {
  display: inline-block; border: 1.5px solid var(--sketch); background: #fff;
  padding: 8px 16px; font-family: "IBM Plex Mono", monospace; font-size: 12px;
  cursor: pointer; border-radius: 2px; color: var(--ink); user-select: none;
}
.btn:hover { background: var(--accent-soft); }
.btn.primary { background: var(--accent-soft); border-width: 2px; font-weight: 600; box-shadow: 2px 2px 0 rgba(74,74,70,0.25); }
.btn.primary:hover { background: var(--accent); color: #fff; }
.btn.ghost { border-style: dashed; color: var(--ink-lt); }
.cta-row { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1.5px dashed var(--ink-lt); }
.chip { display: inline-block; border: 1.5px solid var(--sketch); border-radius: 999px; padding: 3px 12px; font-size: 11.5px; background: #fff; cursor: pointer; user-select: none; }
.chip.on { background: var(--ink); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.meter { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-lt); }
.meter .track { width: 120px; height: 10px; border: 1.5px solid var(--sketch); background: #fff; }
.meter .bar { height: 100%; background: var(--accent); }
.stars { letter-spacing: 2px; color: var(--accent); font-size: 14px; }
.tone-tag { font-size: 10.5px; border: 1px dashed var(--note); color: var(--note); padding: 1px 8px; border-radius: 999px; }
.scribble { font-family: "Caveat", cursive; color: var(--ink-lt); font-size: 15px; }

/* lot map */
.lot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.building { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-align: center; }
.building:hover { background: var(--accent-soft); }
.building .glyph { font-family: "Caveat", cursive; font-size: 30px; line-height: 1; }
.building .bname { font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; }
.building .bsub { font-family: "Caveat", cursive; font-size: 14px; color: var(--ink-lt); }

/* casting */
.headshot { width: 132px; cursor: pointer; }
.headshot .face { height: 86px; }
.headshot .hname { font-size: 11px; font-weight: 600; margin-top: 5px; }
.headshot .statline { font-size: 10px; color: var(--ink-lt); }
.headshot .quirk { font-family: "Caveat", cursive; font-size: 14px; color: var(--note); }
.headshot.assigned { outline: 3px solid var(--accent); outline-offset: 2px; }
.role-slot { min-height: 96px; display: flex; align-items: center; gap: 10px; }
.role-slot .slot { width: 64px; height: 72px; flex: none; }

/* backlot stage grid */
.tilegrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.tile { aspect-ratio: 1; border: 1px dashed #c9c9c2; display: flex; align-items: center; justify-content: center; font-family: "Caveat", cursive; font-size: 14px; color: var(--ink); cursor: pointer; }
.tile:hover { background: var(--accent-soft); }
.tile.prop { border: 1.5px solid var(--sketch); background: #fff; }

/* sound stage */
.scene-strip { display: flex; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; }
.scene-strip.current { background: var(--accent-soft); border-style: solid; }
.scene-strip .st { font-size: 10px; color: var(--ink-lt); margin-left: auto; white-space: nowrap; }
.opt-group { flex: 1; }
.opt { display: block; border: 1.5px solid var(--sketch); background: #fff; padding: 6px 10px; margin-bottom: 6px; font-size: 11.5px; cursor: pointer; border-radius: 2px; }
.opt:hover { background: var(--accent-soft); }
.opt.sel { background: var(--ink); color: #fff; }
.opt .lock { color: var(--ink-lt); font-size: 10px; }

/* edit bay */
.timeline { display: flex; gap: 8px; align-items: stretch; }
.clip { width: 110px; cursor: grab; }
.clip .thumb { height: 60px; }
.clip .cname { font-size: 10px; margin-top: 4px; }
.input-ph { border-bottom: 1.5px solid var(--sketch); font-family: "Caveat", cursive; font-size: 19px; padding: 2px 4px; color: var(--ink); min-width: 200px; display: inline-block; }

/* premiere */
.screen-ph { position: relative; }
.playbtn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Caveat", cursive; font-size: 30px; color: var(--ink); cursor: pointer;
}
.audience { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.head-sil { width: 26px; height: 20px; border-radius: 12px 12px 0 0; background: var(--sketch); }
.review { font-family: "Caveat", cursive; font-size: 17px; line-height: 1.35; }
.review .src { font-family: "IBM Plex Mono", monospace; font-size: 10px; color: var(--ink-lt); letter-spacing: 1px; text-transform: uppercase; }

/* prev/next footer */
.float-nav { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 60; }
.float-nav .btn { box-shadow: 2px 2px 0 rgba(74,74,70,0.3); background: var(--paper); }