/* App-level overlays: the Undo toast and the confirm dialog (board 11). Both
   float above every view on frosted glass. Square corners are only for photos
   and video, so these controls keep the 6px radius. */

html.ov-lock { overflow: hidden; }

/* ---- Toast ------------------------------------------------------------- */
.toast-host {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 16px 28px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 320px;
  max-width: min(520px, 100%);
  padding: 14px 14px 14px 20px;
  border-radius: var(--radius);
  box-shadow: var(--glass-edge), 0 18px 40px -20px rgba(26, 26, 26, .45);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast.is-out { opacity: 0; transform: translateY(14px); }
.toast__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast__label { color: var(--red-text); }
.toast__detail { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast__action {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  margin-left: auto;
  border: 0;
  border-radius: var(--radius);
  background: var(--red);
  color: var(--on-red);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-hover) var(--ease-out);
}
.toast__action:hover { background: var(--red-hover); }
.toast__close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius);
  background: transparent; color: var(--text-quiet); cursor: pointer;
  transition: background var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.toast__close:hover { background: var(--tone-1); color: var(--text); }
.toast__close svg { stroke: currentColor; }
.toast__bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--red);
  transform-origin: left center;
  transform: scaleX(1);
}

/* ---- Confirm dialog ---------------------------------------------------- */
.cfm-overlay { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
.cfm-backdrop {
  position: absolute; inset: 0;
  background: rgba(17, 17, 17, .36);
  opacity: 0; transition: opacity .2s var(--ease-out);
}
.cfm-overlay.is-in .cfm-backdrop { opacity: 1; }
.cfm-overlay.is-out .cfm-backdrop { opacity: 0; }
.cfm-panel {
  position: relative;
  width: min(440px, 100%);
  padding: 28px;
  border-radius: var(--radius);
  box-shadow: var(--glass-edge), 0 30px 70px -28px rgba(26, 26, 26, .55);
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.cfm-overlay.is-in .cfm-panel { opacity: 1; transform: translateY(0) scale(1); }
.cfm-overlay.is-out .cfm-panel { opacity: 0; transform: translateY(10px) scale(.98); }
.cfm-title { margin: 0 0 10px; font-family: var(--font-display); font-weight: 900; letter-spacing: -.01em; font-size: 22px; line-height: 1.2; color: var(--text); }
.cfm-body { margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: var(--glass-text-2); }
.cfm-acts { display: flex; justify-content: flex-end; gap: 10px; }
.cfm-acts button { height: 42px; padding: 0 20px; border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; }
.cfm-acts .cfm-ok.red { color: var(--on-red); }

@media (max-width: 480px) {
  .cfm-acts { flex-direction: column-reverse; }
  .cfm-acts button { width: 100%; }
  .toast { min-width: 0; width: 100%; }
}

/* A toast for running work has no countdown. */
.toast--progress .toast__bar { display: none; }

/* Add tags dialog. */
.tagdlg { width: min(520px, calc(100vw - 32px)); }
.tagdlg .ed-tags { margin: 12px 0 8px; }
.tagdlg__sug { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.tagdlg__list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow: auto; }

/* Add caption files dialog. */
.capdlg { width: min(680px, calc(100vw - 32px)); }
.capdlg__choose { margin: 8px 0 4px; align-self: flex-start; }
.capdlg__rows { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; max-height: 280px; overflow: auto; }
.capdlg__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.capdlg__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.capdlg__code { grid-column: 2; }
.capdlg__rm { position: static; }
@media (max-width: 640px) { .capdlg__row { grid-template-columns: 1fr auto; } .capdlg__name { grid-column: 1 / -1; } }

/* Download choice: "Video only" or "Video and all caption files". */
.dlchoice { width: min(520px, calc(100vw - 32px)); }
.dlchoice__opts { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; }
.dlchoice__opt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; cursor: pointer; transition: background var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); }
.dlchoice__opt strong { font-size: 15px; }
.dlchoice__opt span { font-size: 13px; line-height: 1.45; color: var(--text-quiet); }
.dlchoice__opt:hover { background: var(--tone-1); border-color: var(--text-quiet); }
.dlchoice__opt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }