/* Vault editor captions (v3.1.139, js/vault-captions.js). Self-contained: the preview layer is
 * .sb-cap-layer (inside the editor's picture) and the controls are .vault-edit-captions, so either
 * can move without other rules following it. The fonts are the same files Stoner Bot draws with. */
@font-face { font-family:"SBCapBold"; src:url("./assets/fonts/Poppins-Bold.woff") format("woff"); font-weight:700; font-display:swap; }
@font-face { font-family:"SBCapClean"; src:url("./assets/fonts/Inter-Bold.woff") format("woff"); font-weight:700; font-display:swap; }
@font-face { font-family:"SBCapSerif"; src:url("./assets/fonts/DejaVuSerif-Bold.woff") format("woff"); font-weight:700; font-display:swap; }
@font-face { font-family:"SBCapMono"; src:url("./assets/fonts/DejaVuSansMono-Bold.woff") format("woff"); font-weight:700; font-display:swap; }

/* ---- Preview, over the picture ---- */
#screen .sb-cap-layer { position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden; }
#screen .sb-cap { position:absolute;box-sizing:border-box;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  font-weight:700;text-align:center;white-space:pre;paint-order:stroke fill;-webkit-tap-highlight-color:transparent; }
#screen .sb-cap[hidden] { display:none; }
#screen .sb-cap-line { white-space:pre;overflow:visible; }
/* The caption being edited gets a dashed frame; outside its time it shows faded so you can still place it. */
#screen .sb-cap[data-selected="true"] { outline:1.5px dashed rgba(255,255,255,.75);outline-offset:3px; }
#screen .sb-cap[data-offtime="true"] { opacity:.45; }
#screen .sb-cap-guide { position:absolute;background:rgba(179,136,235,.9);pointer-events:none; }
#screen .sb-cap-guide[hidden] { display:none; }
#screen .sb-cap-guide-x { top:0;bottom:0;left:50%;width:1px; }
#screen .sb-cap-guide-y { left:0;right:0;top:50%;height:1px; }

/* ---- The Captions card ---- */
#screen .vault-edit-captions { display:flex;flex-direction:column;gap:10px; }
#screen .vault-edit-captions .sb-cap-count { font-size:12px;color:#c9bbd8; }
#screen .vault-edit-captions .sb-cap-empty, #screen .vault-edit-captions .sb-cap-hint { margin:0;font-size:12px;line-height:1.4;color:#a998bb; }
#screen .vault-edit-captions .sb-cap-empty[hidden] { display:none; }
#screen .vault-edit-captions .sb-cap-note { margin:0;font-size:12px;line-height:1.4;color:#e9def4; }
#screen .vault-edit-captions .sb-cap-note:empty { display:none; }
#screen .vault-edit-captions .sb-cap-list { display:flex;flex-direction:column;gap:6px; }
#screen .vault-edit-captions .sb-cap-list:empty { display:none; }
#screen .vault-edit .sb-cap-chip { display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:40px;
  padding:6px 10px;border-radius:12px;border:1px solid rgba(217,183,247,.16);background:rgba(180,139,214,.06);color:#e9def4;text-align:left;font-size:13px; }
#screen .vault-edit .sb-cap-chip[aria-selected="true"] { border-color:rgba(201,166,242,.65);background:rgba(179,136,235,.2); }
#screen .vault-edit .sb-cap-chip-n { display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(179,136,235,.25);font-size:11px;font-weight:750; }
#screen .vault-edit .sb-cap-chip[data-live="true"] .sb-cap-chip-n { background:#b388eb;color:#14091f; }
#screen .vault-edit .sb-cap-chip-text { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650; }
#screen .vault-edit .sb-cap-chip-when { font-size:11px;color:#bfaed1;white-space:nowrap;font-variant-numeric:tabular-nums; }
#screen .vault-edit .sb-cap-chip[data-outside="true"] .sb-cap-chip-when { color:#ffcf6e; }
#screen .vault-edit .sb-cap-add { align-self:flex-start;width:auto;min-height:38px;padding:0 14px; }

#screen .vault-edit-captions .sb-cap-editor { display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:14px;
  border:1px solid rgba(179,136,235,.2);background:rgba(21,15,34,.55); }
#screen .vault-edit-captions .sb-cap-editor[hidden] { display:none; }
#screen .vault-edit .sb-cap-text { width:100%;box-sizing:border-box;min-height:58px;resize:vertical;font-size:16px;line-height:1.4;margin:0; }
#screen .vault-edit-captions .sb-cap-section { display:flex;flex-direction:column;gap:6px;min-width:0; }
#screen .vault-edit-captions .sb-cap-heading { margin:0;font-size:12px;font-weight:700;letter-spacing:.02em;color:#d9cbe8; }
#screen .vault-edit-captions .sb-cap-seg { display:flex;flex-wrap:wrap;gap:6px; }
#screen .vault-edit .sb-cap-segbtn, #screen .vault-edit .sb-cap-toggle { min-height:34px;width:auto;padding:0 13px;border-radius:999px;
  border:1px solid rgba(217,183,247,.2);background:rgba(180,139,214,.08);color:#c9bbd8;font-size:13px;font-weight:650; }
#screen .vault-edit .sb-cap-segbtn[aria-checked="true"], #screen .vault-edit .sb-cap-toggle[aria-pressed="true"] {
  background:rgba(179,136,235,.24);border-color:rgba(201,166,242,.6);color:#fff; }
#screen .vault-edit .sb-cap-fonts .sb-cap-segbtn { font-size:15px;font-weight:700; }
#screen .vault-edit-captions .sb-cap-sizerow { display:flex;align-items:center;gap:10px; }
#screen .vault-edit .sb-cap-range { flex:1 1 auto;min-width:0;min-height:32px;margin:0;padding:0!important;border:0!important;background:transparent!important;
  box-shadow:none!important;accent-color:#b388eb; }
#screen .vault-edit-captions .sb-cap-value { flex:0 0 46px;text-align:right;font-size:13px;color:#d9cbe8;font-variant-numeric:tabular-nums; }
#screen .vault-edit-captions .sb-cap-swatches { display:flex;flex-wrap:wrap;gap:8px;align-items:center; }
#screen .vault-edit .sb-cap-swatch { width:32px;height:32px;min-height:0;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.25);box-shadow:none; }
#screen .vault-edit .sb-cap-swatch[aria-checked="true"] { border-color:#fff;box-shadow:0 0 0 2px #b388eb; }
/* The color wheel: iPhone's own color picker (grid, spectrum and sliders) behind a rainbow button. */
#screen .vault-edit-captions .sb-cap-wheel { position:relative;display:block;width:32px;height:32px;border-radius:50%;overflow:hidden;cursor:pointer;
  background:conic-gradient(#ff4d4d,#ffe14d,#4dff88,#4dd2ff,#7a5cff,#ff7ad9,#ff4d4d);border:2px solid rgba(255,255,255,.25); }
#screen .vault-edit-captions .sb-cap-wheel[data-on="true"] { border-color:#fff;box-shadow:0 0 0 2px #b388eb; }
#screen .vault-edit-captions .sb-cap-wheel[data-on="true"]::after { content:"";position:absolute;inset:8px;border-radius:50%;background:var(--sb-cap-pick,#fff);border:1px solid rgba(0,0,0,.35); }
#screen .vault-edit-captions .sb-cap-wheel .sb-cap-color { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0; }
#screen .vault-edit-captions .sb-cap-effects { display:flex;flex-direction:column;gap:8px; }
#screen .vault-edit-captions .sb-cap-effect { display:flex;flex-direction:column;align-items:flex-start;gap:6px; }
#screen .vault-edit-captions .sb-cap-effect-body { align-self:stretch; }
#screen .vault-edit .sb-cap-whole { align-self:flex-start; }
#screen .vault-edit-captions .sb-cap-effect-body { display:flex;flex-direction:column;gap:6px;padding-left:10px;border-left:2px solid rgba(179,136,235,.3); }
#screen .vault-edit-captions .sb-cap-effect-body[hidden] { display:none; }
#screen .vault-edit-captions .sb-cap-row { display:flex;align-items:center;gap:10px;margin:0; }
#screen .vault-edit-captions .sb-cap-label { flex:0 0 72px;font-size:12px;font-weight:650;color:#d9cbe8; }
#screen .vault-edit-captions .sb-cap-row .sb-cap-color { flex:0 0 44px;width:44px!important;height:32px!important;min-height:0!important;min-width:0!important;
  padding:2px!important;margin:0!important;border-radius:9px!important;border:1px solid rgba(255,255,255,.25)!important;background:transparent!important;
  box-shadow:none!important;-webkit-appearance:none;appearance:none;cursor:pointer; }
#screen .vault-edit-captions .sb-cap-color::-webkit-color-swatch-wrapper { padding:0; }
#screen .vault-edit-captions .sb-cap-color::-webkit-color-swatch { border:0;border-radius:6px; }
#screen .vault-edit-captions .sb-cap-times { display:flex;flex-direction:column;gap:6px; }
#screen .vault-edit-captions .sb-cap-times[hidden] { display:none; }
#screen .vault-edit-captions .sb-cap-time { display:flex;align-items:center;gap:8px; }
#screen .vault-edit-captions .sb-cap-time .sb-cap-label { flex:0 0 40px; }
#screen .vault-edit .sb-cap-timein { flex:1 1 auto;min-width:0;width:auto;font-size:16px;font-variant-numeric:tabular-nums;margin:0; }
#screen .vault-edit .sb-cap-set { flex:0 0 auto;width:auto;min-height:38px;padding:0 12px;font-size:13px; }
#screen .vault-edit-captions .sb-cap-actions { display:flex;gap:8px; }
#screen .vault-edit .sb-cap-actions button { flex:1 1 0;width:auto;min-height:38px; }
#screen .vault-edit .sb-cap-del { color:#ffb3b3; }

/* ---- v3.1.140: the Preview card docks to the top while you work below it (js/vault.js paintDock) ---- */
.sb-editor-safeprobe { position:fixed;top:0;left:0;width:1px;height:env(safe-area-inset-top,0px);visibility:hidden;pointer-events:none; }
#screen .sb-editor-dockslot { position:relative;display:flow-root; }
#screen .vault-edit-preview[data-docked="true"] { position:fixed!important;top:var(--sb-dock-top,6px);z-index:30;margin:0!important;box-sizing:border-box;
  padding:8px!important;--sb-edit-stage-h:var(--sb-dock-h,160px);box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 1px rgba(201,166,242,.28); }
#screen .vault-edit-preview[data-docked="true"] > :not(.sb-editor-stage) { display:none!important; }
#screen .vault-edit-preview[data-docked="true"] .sb-editor-stage { border-radius:12px; }
#screen .sb-editor-typespacer { pointer-events:none; }