/* ============================================================
   Storyboard — board of frames, present mode, PDF print sheets
   Accent: coral
   ============================================================ */

.sb-wrap{
  flex:1; min-height:0;
  overflow-x:auto; overflow-y:auto;
  padding:26px 22px 90px;
}

.sb-board{
  display:flex; align-items:stretch;
  width:max-content; min-width:100%;
}

/* slot = leading connector + frame card, so they wrap as one unit */
.sb-slot{ display:flex; align-items:stretch; flex:none; }

.sb-conn{
  position:relative; flex:none;
  width:44px;
  display:flex; align-items:center; justify-content:center;
}
.sb-conn__line{
  position:relative;
  width:100%; height:2px;
  background:var(--accent-line);
  opacity:.55;
}
.sb-conn__line::after{
  content:"";
  position:absolute; right:-1px; top:50%;
  width:7px; height:7px;
  border-top:2px solid var(--accent-line);
  border-right:2px solid var(--accent-line);
  transform:translateY(-50%) rotate(45deg);
}
.sb-conn__ins{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--accent-border);
  color:var(--accent-ink);
  opacity:0;
  transition:opacity .14s var(--ease), transform .14s var(--ease);
}
.sb-conn__ins svg{ width:12px; height:12px; }
.sb-conn:hover .sb-conn__ins{ opacity:1; }
.sb-conn__ins:hover{ transform:translate(-50%,-50%) scale(1.12); }

/* ── Frame card ──────────────────────────────────────────── */
.sb-card{
  width:252px; flex:none;
  display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
}
.sb-card__top{
  display:flex; align-items:center; gap:6px;
  padding:8px 9px;
  border-bottom:1px solid var(--hair);
}
.sb-card__index{
  display:grid; place-items:center;
  width:21px; height:21px; flex:none;
  border-radius:50%;
  background:var(--accent-tint); color:var(--accent-ink);
  font-size:11.5px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.sb-card__tools{
  margin-left:auto; display:flex; gap:1px;
  opacity:0; transition:opacity .14s var(--ease);
}
.sb-card:hover .sb-card__tools,
.sb-card:focus-within .sb-card__tools{ opacity:1; }

.sb-media{
  position:relative;
  aspect-ratio:16/10;
  background:var(--surface-2);
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.sb-media img{
  width:100%; height:100%;
  display:block;
  background:#F1F2F4;
}
.sb-media img[data-fit="cover"]{ object-fit:cover; }
.sb-media img[data-fit="contain"]{ object-fit:contain; }

.sb-media__tools{
  position:absolute; right:6px; top:6px;
  display:flex; gap:4px;
  opacity:0; transition:opacity .14s var(--ease);
}
.sb-media:hover .sb-media__tools{ opacity:1; }
.sb-media__tools .icon-btn{
  background:rgba(255,255,255,.94);
  border:1px solid var(--hair);
  box-shadow:var(--sh-1);
}
.sb-media__tools .icon-btn:hover{ background:#fff; }

.sb-drop{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
  color:var(--faint); font-size:12.5px;
  transition:background .14s var(--ease), color .14s var(--ease);
}
.sb-drop svg{ width:19px; height:19px; }
.sb-drop:hover{ background:var(--accent-tint); color:var(--accent-ink); }
.sb-media.is-over .sb-drop{ background:var(--accent-tint); color:var(--accent-ink); }

.sb-card__body{ padding:9px 10px 10px; display:flex; flex-direction:column; gap:6px; }
.sb-title{
  width:100%; padding:4px 6px; margin:0 -6px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent;
  font-size:13.5px; font-weight:600; letter-spacing:-.008em;
}
.sb-title::placeholder{ color:var(--faint); font-weight:500; }
.sb-title:hover{ background:var(--surface-2); }
.sb-title:focus{
  outline:none; background:var(--surface);
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
.sb-desc{
  width:100%; min-height:52px;
  padding:5px 6px; margin:0 -6px;
  border:1px solid transparent; border-radius:var(--r-sm);
  background:transparent;
  font-family:inherit; font-size:12.5px; line-height:1.5; color:var(--muted);
  resize:none; overflow:hidden;
}
.sb-desc::placeholder{ color:var(--faint); }
.sb-desc:hover{ background:var(--surface-2); }
.sb-desc:focus{
  outline:none; background:var(--surface); color:var(--ink);
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
.sb-dur{
  display:flex; align-items:center; gap:5px;
  padding-top:2px;
  color:var(--faint); font-size:12px;
}
.sb-dur svg{ width:13px; height:13px; }
.sb-dur input{
  width:46px; padding:3px 5px;
  border:1px solid var(--hair-2); border-radius:6px;
  background:var(--surface);
  font-size:12px; text-align:right;
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.sb-dur input::-webkit-outer-spin-button,
.sb-dur input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sb-dur input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-tint); }

/* add frame tile */
.sb-add{
  width:180px; flex:none;
  margin-left:22px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  border:1px dashed var(--hair-2); border-radius:var(--r-lg);
  color:var(--muted); font-size:14px; font-weight:500;
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.sb-add:hover{ background:var(--accent-tint); border-color:var(--accent-border); color:var(--accent-ink); }
.sb-add svg{ width:19px; height:19px; }

.sb-runtime{
  display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 10px;
  border-radius:var(--pill);
  background:var(--accent-tint); color:var(--accent-ink);
  font-size:12px; font-weight:500;
  font-variant-numeric:tabular-nums;
}
.sb-runtime svg{ width:12px; height:12px; }

/* hidden while html2canvas captures */
.exporting .sb-card__tools,
.exporting .sb-media__tools,
.exporting .sb-conn__ins,
.exporting .sb-add{ display:none !important; }

/* ── Present (slideshow) ─────────────────────────────────── */
.sb-present{
  position:fixed; inset:0; z-index:150;
  display:flex; flex-direction:column;
  background:#14161A;
  color:#fff;
  animation:fade .16s var(--ease);
}
.sb-present__bar{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  flex:none;
}
.sb-present__count{
  font-size:13px; color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;
}
.sb-present__title{ font-size:13px; color:rgba(255,255,255,.62); }
.sb-present__close{
  margin-left:auto;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  color:rgba(255,255,255,.72);
  transition:background .14s var(--ease), color .14s var(--ease);
}
.sb-present__close:hover{ background:rgba(255,255,255,.12); color:#fff; }
.sb-present__close svg{ width:19px; height:19px; }

.sb-present__stage{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 18px;
}
.sb-present__nav{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.82);
  transition:background .14s var(--ease), color .14s var(--ease), opacity .14s var(--ease);
}
.sb-present__nav:hover{ background:rgba(255,255,255,.2); color:#fff; }
.sb-present__nav[disabled]{ opacity:.25; pointer-events:none; }
.sb-present__nav svg{ width:21px; height:21px; }

.sb-present__figure{
  flex:1; min-width:0; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
}
.sb-present__img{
  max-width:100%; max-height:66vh;
  object-fit:contain;
  border-radius:var(--r-md);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.sb-present__ph{
  width:min(70vw,620px); aspect-ratio:16/10;
  display:grid; place-items:center;
  border:1px dashed rgba(255,255,255,.2); border-radius:var(--r-md);
  color:rgba(255,255,255,.3);
}
.sb-present__ph svg{ width:34px; height:34px; }
.sb-present__cap{
  max-width:min(760px,92%); text-align:center;
  padding-bottom:8px;
}
.sb-present__cap h3{ font-size:18px; font-weight:600; }
.sb-present__cap p{
  margin-top:6px;
  font-size:14.5px; line-height:1.6;
  color:rgba(255,255,255,.68);
  white-space:pre-wrap;
}

/* ── Print sheet (rasterised into the PDF) ───────────────── */
.sb-sheet{
  position:fixed; left:-20000px; top:0;
  width:1414px; height:1000px;
  padding:44px 48px;
  background:#FFFFFF;
  box-sizing:border-box;
  font-family:var(--font);
  display:flex; flex-direction:column;
}
.sb-sheet__head{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:16px; margin-bottom:22px;
  border-bottom:1px solid #E1E4E8;
  flex:none;
}
.sb-sheet__title{ font-size:22px; font-weight:600; color:#1B1E23; letter-spacing:-.015em; }
.sb-sheet__meta{ font-size:14px; color:#6B7280; }
.sb-sheet__page{ margin-left:auto; font-size:13px; color:#9AA1AC; }
.sb-sheet__grid{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:24px;
}
.sb-sheet__card{
  display:flex; flex-direction:column;
  min-height:0;
  border:1px solid #E1E4E8; border-radius:12px;
  overflow:hidden;
  background:#FFFFFF;
}
.sb-sheet__img{
  flex:none; height:224px;
  background-color:#F1F2F4;
  background-repeat:no-repeat;
  background-position:center;
  border-bottom:1px solid #EAECEF;
}
.sb-sheet__body{ padding:12px 14px 14px; flex:1; min-height:0; overflow:hidden; }
.sb-sheet__num{
  display:inline-grid; place-items:center;
  width:22px; height:22px; margin-bottom:8px;
  border-radius:50%;
  font-size:12px; font-weight:600;
}
.sb-sheet__t{ font-size:15px; font-weight:600; color:#1B1E23; line-height:1.35; }
.sb-sheet__d{
  margin-top:5px;
  font-size:12.5px; line-height:1.5; color:#6B7280;
  white-space:pre-wrap;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.sb-sheet__dur{ margin-top:8px; font-size:11.5px; color:#9AA1AC; }

@media (max-width:640px){
  .sb-wrap{ padding:16px 12px 80px; overflow-x:hidden; }
  .sb-board{ flex-direction:column; width:auto; gap:14px; }
  .sb-slot{ flex-direction:column; width:100%; }
  .sb-conn{ display:none; }
  .sb-card{ width:100%; }
  .sb-add{ width:100%; margin-left:0; margin-top:14px; padding:18px; }
  .sb-present__stage{ padding:0 8px; gap:4px; }
  .sb-present__img{ max-height:52vh; }
  .sb-present__nav{ width:36px; height:36px; }
  .sb-present__cap h3{ font-size:16px; }
  .sb-present__cap p{ font-size:13.5px; }
}