/* ============================================================================
   Slides Studio (static/js/slides.js)

   Every rule is scoped under `#slidesView`, which is the app's convention for a
   modular studio: nothing here can leak into another view, and no other view's
   styles can reach in. Palette comes from the shared tokens (--brand-600 indigo,
   --border, --text-*) so a slide deck reads as the same product as Design Studio
   and the landing page; the two local variables exist only so the "this is
   selected" accent has one definition instead of a dozen.
   ========================================================================= */

#slidesView {
  --sl-primary: var(--brand-600, #4f46e5);
  --sl-primary-soft: rgba(79, 70, 229, .10);
  --sl-line: var(--border, #e2e8f0);
  --sl-ink: var(--text, #0f172a);
  --sl-2: var(--text-2, #475569);
  --sl-dim: var(--text-3, #64748b);
  --sl-surface: var(--surface-2, #eef2f6);
  --sl-danger: var(--danger, #dc2626);
}

/* Cards must not clip: the sticky bars inside them are the reason (see the same
   note in design_studio.css). */
#slidesView .card { overflow: visible; margin-bottom: 16px; }

/* ---- header ------------------------------------------------------------- */
#slidesView .sl-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
#slidesView .sl-head-main { flex: 1 1 320px; min-width: 0; }
#slidesView .sl-head-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#slidesView .sl-h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--sl-ink); }
#slidesView .sl-h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--sl-ink); }
#slidesView .sl-sub { margin: 6px 0 0; font-size: 13px; color: var(--sl-dim); max-width: 72ch; }

#slidesView .sl-meter {
  display: flex; flex-direction: column; gap: 2px; text-align: start;
  padding: 7px 12px; border: 1px solid var(--sl-line); border-radius: 10px;
  background: var(--sl-surface);
}
#slidesView .sl-meter-n { font-size: 13px; font-weight: 700; color: var(--sl-ink); }
#slidesView .sl-meter-d { font-size: 11px; color: var(--sl-dim); }

/* ---- deck list ---------------------------------------------------------- */
#slidesView .sl-jobs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
#slidesView .sl-jobs-head .sl-h3 { margin: 0; }
#slidesView .sl-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#slidesView .sl-sortl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--sl-dim);
}
#slidesView .sl-sort { padding: 5px 8px; font-size: 12.5px; min-width: 140px; }
#slidesView .sl-viewbtns {
  display: inline-flex; gap: 0; border: 1px solid var(--sl-line);
  border-radius: 9px; overflow: hidden;
}
#slidesView .sl-viewbtns .sl-mini {
  border: 0; border-radius: 0; padding: 5px 10px; font-size: 14px; line-height: 1;
  background: #fff; color: var(--sl-2);
}
#slidesView .sl-viewbtns .sl-mini.on { background: var(--sl-primary-soft); color: var(--sl-primary); }

/* The bulk bar appears the moment something is ticked and carries every action
   that only makes sense for several decks. */
#slidesView .sl-bulk {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 12px; border: 1px solid var(--sl-line);
  border-radius: 11px; background: var(--sl-surface);
}
#slidesView .sl-bulk-n { font-size: 13px; font-weight: 700; color: var(--sl-ink); }

#slidesView .sl-job-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
/* The BOX is the wrapper, and the row's own actions live INSIDE it on the right —
   there is room there, and a deck's useful buttons belong on the deck rather than
   under it. They cannot be children of the card itself (a button inside a button is
   invalid HTML, and a click on Delete must not also open the deck), so the box is the
   wrapper and the card is its transparent middle. They also wrap to their own line
   with the card first when the screen is too narrow to hold both. */
#slidesView .sl-job-wrap {
  position: relative; display: flex; align-items: center; gap: 6px 10px;
  flex-wrap: wrap; padding: 0 12px;
  border: 1px solid var(--sl-line); border-radius: 12px; background: #fff;
}
#slidesView .sl-job-wrap:hover {
  border-color: var(--sl-primary); box-shadow: 0 4px 14px rgba(15, 23, 42, .07);
}
#slidesView .sl-job-wrap.is-picked {
  border-color: var(--sl-primary); box-shadow: 0 0 0 2px var(--sl-primary-soft);
}
/* Every one of them is an `sl-mini` pill with its own padding (the app has no base
   `.btn`), right-aligned so the row ends cleanly at the box's edge. */
#slidesView .sl-job-acts {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  flex: 1 1 auto; flex-wrap: wrap; padding: 6px 0;
}
#slidesView .sl-job-acts .sl-mini { white-space: nowrap; }
/* THE ROW'S FOUR DROPDOWNS, and `\u22ef` only when they do not fit. A row offers the
   same four groups the deck page's toolbar does (Export / Present / Send to… /
   Options) — requested as "these buttons … where it says copy link. use three dots
   only if there is no room" — so the four are shown while the deck's own name keeps
   `ROW_MENUS_MIN_CARD` px beside them, and the one `\u22ef` (the SAME items, flat)
   takes over below that. Which of the two is showing is a MEASUREMENT, not a media
   query: it depends on the deck's name, not on the window alone (see `fitRowMenus`).
   The triggers are a size down from the toolbar's so a row stays on one line. */
/* SELECTOR NOTE: `.sl-menus` (shared with the toolbar) sets `display: flex` and sits
   LATER in this file, so with equal weight it beats a plain `#slidesView
   .sl-row-menus` — the four then stayed visible on a phone, beside the `\u22ef`. The
   extra class here is what makes these rules decide. */
#slidesView .sl-job-acts .sl-row-menus { display: flex; align-items: center; gap: 6px;
  /* ONE LINE, never wrapped: a wrapped row of four also reports a smaller width, so
     the measurement below would call "wrapped" a case of "it fits" — and the row
     would be judged by how badly it already fits. */
  flex-wrap: nowrap;
  /* CONTENT-SIZED, so `fitRowMenus` can MEASURE the four: a flex item that stretches
     to fill the row reports the row's width, and "the row minus the row" is always
     zero — which is how the first version of this hid the four at every size. */
  flex: 0 0 auto; }
/* ...a size down, and it carries its OWN padding + radius: this rule overrides the
   toolbar's, and a variant that leaves the radius out is the "smear" the R17 sweep
   exists to catch. */
#slidesView .sl-row-menus .sl-menu-btn { padding: 5px 10px; border-radius: 8px;
  font-size: 12px; gap: 5px; }
#slidesView .sl-job-acts .sl-row-more { display: none; flex: 0 0 auto; }
#slidesView .sl-job-wrap.is-tight .sl-row-menus { display: none; }
#slidesView .sl-job-wrap.is-tight .sl-row-more { display: block; }
/* Inside the box is still the rule on a phone — the actions just take their own
   line under the card. There the four never fit beside the name, so the `\u22ef` is
   what a phone gets (which is what "only if there is no room" means at 380px). */
@media (max-width: 760px) {
  #slidesView .sl-job-acts .sl-row-menus { display: none; }
  #slidesView .sl-job-wrap .sl-job-acts .sl-row-more { display: block; }
}
#slidesView .sl-pick {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 7px; cursor: pointer;
  background: #fff; border: 1px solid var(--sl-line);
}
#slidesView .sl-pick input { margin: 0; cursor: pointer; width: 14px; height: 14px; }
#slidesView .sl-job {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  text-align: start; cursor: pointer; font: inherit; min-width: 0;
  flex: 1 1 240px;
  /* The tick is the wrapper's, at 8px (22px wide); this is its room. */
  padding: 12px 0 12px 30px;
  border: 0; border-radius: 0; background: transparent; position: relative;
}
#slidesView .sl-job-ico { font-size: 18px; }
#slidesView .sl-job-t { font-size: 14px; font-weight: 700; color: var(--sl-ink); }
#slidesView .sl-job-s { font-size: 12px; color: var(--sl-dim); }
/* When the deck is deleted — the DATE, in red. "Kept for N days" makes the user do
   the arithmetic, and every other job list in the app shows the date. */
#slidesView .sl-job-del { font-size: 11px; font-weight: 700; color: #dc2626; }

/* LIST VIEW: the same cards, one dense row each. Nothing is hidden — the tick, the
   badges and the deletion date all stay, they just line up. */
#slidesView .sl-jobs-list { display: flex; flex-direction: column; gap: 6px; }
#slidesView .sl-jobs-list .sl-job {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px;
  align-items: center; padding: 9px 0 9px 30px;
}
#slidesView .sl-jobs-list .sl-job-ico { grid-row: span 3; font-size: 16px; }
#slidesView .sl-jobs-list .sl-job-t,
#slidesView .sl-jobs-list .sl-job-s,
#slidesView .sl-jobs-list .sl-job-del { grid-column: 2; }
/* The badges are a row of their own in the same column, right-aligned. */
#slidesView .sl-jobs-list .sl-job-badges { grid-column: 2; justify-self: end;
  align-self: center; }
#slidesView .sl-jobs-list .sl-job-wrap:hover { box-shadow: none; }
#slidesView .sl-jobs-list .sl-pick { top: 50%; transform: translateY(-50%); }

/* ≤760px the row would clip its own meta line, so it goes back to a stack. */
@media (max-width: 760px) {
  #slidesView .sl-jobs-list .sl-job {
    grid-template-columns: auto minmax(0, 1fr); padding: 10px 0 10px 30px;
  }
  /* Inside the box is still the rule on a phone — the actions just take their own
     line under the card, which is what "inside the box" has to mean at 380px. The
     tick comes back up beside the TITLE, or it floats beside the buttons. */
  #slidesView .sl-job-acts { justify-content: flex-start; padding: 0 0 8px; }
  #slidesView .sl-jobs-list .sl-pick { top: 14px; transform: none; }
}
/* The badges are inline pills on their own line inside the card, right-aligned —
   "Writing…", "Rendered", "Shared" can all be on one deck. Pinning them to the
   corner meant a long meta line ran underneath them once the card had room for the
   row's buttons beside it. */
#slidesView .sl-job-badges {
  display: flex; gap: 6px; flex-wrap: wrap; align-self: flex-end;
}
#slidesView .sl-job-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--sl-primary-soft); color: var(--sl-primary);
}
#slidesView .sl-job-busy { background: #fef3c7; color: #92400e; }
#slidesView .sl-job-failed { background: #fee2e2; color: #991b1b; }

/* ---- the pop-up that asks the questions ---------------------------------
   The interview is the SHARED module's pop-up (studio_wizard.js), so the only
   Slides-specific rule needed is this one: the module's card already IS the
   card, and a `.sl-body` card inside it would read as a box in a box. */
#slidesView .sw-card .sl-body {
  border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent;
}
#slidesView .sw-card .sl-body + .sl-body { margin-top: 14px; }
#slidesView .sw-card .sl-text { min-height: 150px; }
#slidesView .sl-empty { text-align: center; color: var(--sl-dim); font-size: 13px; }

/* ---- steps -------------------------------------------------------------- */
#slidesView .sl-steps {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 12px 0 14px; font-size: 12px;
}
#slidesView .sl-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--sl-line); background: #fff; color: var(--sl-dim);
}
#slidesView .sl-step b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--sl-surface); color: var(--sl-2); font-size: 11px;
}
#slidesView .sl-step.on { border-color: var(--sl-primary); color: var(--sl-primary); font-weight: 700; }
#slidesView .sl-step.on b { background: var(--sl-primary); color: #fff; }
#slidesView .sl-step.done { color: var(--sl-2); }
#slidesView .sl-step.done b { background: var(--sl-primary-soft); color: var(--sl-primary); }
#slidesView .sl-step-sep { color: var(--sl-dim); }

/* ---- form furniture ----------------------------------------------------- */
#slidesView .sl-body { display: flex; flex-direction: column; gap: 14px; }
#slidesView .sl-field { display: flex; flex-direction: column; gap: 5px; }
#slidesView .sl-field-grow { flex: 1 1 220px; min-width: 0; }
#slidesView .sl-field label { font-size: 12px; font-weight: 600; color: var(--sl-2); }
#slidesView .sl-input, #slidesView .sl-text {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 9px 11px; border: 1px solid var(--sl-line); border-radius: 10px;
  background: #fff; color: var(--sl-ink);
}
#slidesView .sl-input:focus, #slidesView .sl-text:focus {
  outline: none; border-color: var(--sl-primary); box-shadow: 0 0 0 3px var(--sl-primary-soft);
}
#slidesView .sl-area { resize: vertical; line-height: 1.5; }
/* The title and the body are EDITED as they will be SHOWN: a `contenteditable`
   showing real bold/italic/underline instead of the `**markers**` around them.
   It has to look like the input it replaced, or the panel reads as unfinished. */
#slidesView .sl-rich {
  min-height: 38px; white-space: pre-wrap; overflow-wrap: anywhere;
  line-height: 1.5; cursor: text;
}
#slidesView .sl-area.sl-rich { min-height: 78px; max-height: 340px; overflow: auto; }
#slidesView .sl-rich:empty::before {
  content: attr(data-ph); color: var(--sl-dim); pointer-events: none;
}
#slidesView .sl-rich b, #slidesView .sl-rich strong { font-weight: 700; }
#slidesView .sl-rich i, #slidesView .sl-rich em { font-style: italic; }
#slidesView .sl-rich u { text-decoration: underline; }
#slidesView .sl-text { resize: vertical; line-height: 1.6; }

/* ---- source tabs -------------------------------------------------------- */
#slidesView .sl-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
#slidesView .sl-tab {
  font: inherit; font-size: 13px; cursor: pointer;
  /* A tab is a control: a rounded rectangle, like every other button here. */
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--sl-line); background: #fff; color: var(--sl-2);
}
#slidesView .sl-tab.on {
  border-color: var(--sl-primary); background: var(--sl-primary-soft);
  color: var(--sl-primary); font-weight: 700;
}
#slidesView .sl-soon {
  font-size: 13px; color: var(--sl-2); background: var(--sl-surface);
  border: 1px dashed var(--sl-line); border-radius: 10px; padding: 11px 13px;
}

/* ---- audio source picker ------------------------------------------------ */
#slidesView .sl-src-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
  max-height: 330px; overflow-y: auto; padding: 2px;
}
#slidesView .sl-src {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  text-align: start; cursor: pointer; font: inherit;
  padding: 10px 12px; border: 1px solid var(--sl-line); border-radius: 10px; background: #fff;
}
#slidesView .sl-src.on { border-color: var(--sl-primary); background: var(--sl-primary-soft); }
#slidesView .sl-src b { font-size: 13px; color: var(--sl-ink); }
#slidesView .sl-src span { font-size: 11px; color: var(--sl-dim); }
#slidesView .sl-src em {
  font-size: 11px; color: var(--sl-dim); font-style: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#slidesView .sl-src-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
#slidesView .sl-tag {
  font-style: normal; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  background: var(--sl-primary-soft); color: var(--sl-primary);
}

/* ---- format tiles ------------------------------------------------------- */
#slidesView .sl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
#slidesView .sl-tile {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  text-align: start; cursor: pointer; font: inherit; position: relative;
  padding: 14px; border: 1px solid var(--sl-line); border-radius: 12px; background: #fff;
}
#slidesView .sl-tile:hover:not(:disabled) { border-color: var(--sl-primary); }
#slidesView .sl-tile.on { border-color: var(--sl-primary); background: var(--sl-primary-soft); }
#slidesView .sl-tile:disabled { opacity: .55; cursor: not-allowed; }
#slidesView .sl-tile-t { font-size: 14px; font-weight: 700; color: var(--sl-ink); }
#slidesView .sl-tile-s { font-size: 12px; color: var(--sl-dim); }
#slidesView .sl-tile-d { font-size: 11px; color: var(--sl-2); font-variant-numeric: tabular-nums; }
#slidesView .sl-tile-soon {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--sl-surface); color: var(--sl-2);
}

/* ---- theme picker ------------------------------------------------------- */
#slidesView .sl-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
#slidesView .sl-theme {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  text-align: start; cursor: pointer; font: inherit;
  padding: 10px; border: 1px solid var(--sl-line); border-radius: 12px; background: #fff;
}
#slidesView .sl-theme:hover { border-color: var(--sl-primary); }
#slidesView .sl-theme.on { border-color: var(--sl-primary); box-shadow: 0 0 0 2px var(--sl-primary-soft); }
#slidesView .sl-theme-t { font-size: 13px; font-weight: 700; color: var(--sl-ink); }
#slidesView .sl-theme-s { font-size: 11px; color: var(--sl-dim); }

/* ---- render step: the deck's workspace --------------------------------
   ONE preview/EDITOR pair per slide. On a desktop the pair is two columns — the
   slide being previewed on one side, the fields that change it on the other, which
   is the room a wide screen has and the only way an edit is checkable at a glance.
   A phone stacks them. */
#slidesView .sl-work { display: flex; flex-direction: column; gap: 14px; }
#slidesView .sl-pairs { display: flex; flex-direction: column; gap: 0; }
#slidesView .sl-pair {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  align-items: start;
  padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--sl-line);
}
#slidesView .sl-pair:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
@media (min-width: 900px) {
  #slidesView .sl-pair {
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr); gap: 18px;
  }
}

/* THE DECK'S ACTIONS, PINNED. Render and Save are the two a fourteen-slide deck
   has to reach from wherever the reader is, so they lead this bar and it sticks to
   the top of the scroll container (the same `top: 0; z-index: 6` Video Studio's
   preview uses). Opaque, because the pairs scroll UNDER it. */
#slidesView .sl-actions {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--sl-line);
  background: #fff;
}
/* On the DECK page the bar sits in a card of the page itself, under the app's own
   header — and `.topbar` is `position: sticky; top: 0; z-index: 40`, so a bar pinned
   at `top: 0` pins itself BEHIND the header: of its 68px only the last 6px stayed on
   screen and the buttons could not be pressed at all. The offset has to be the
   topbar's height, exactly as `.au-toolbar` (Admin → Users) already does it. */
#slidesView > .card > .sl-actions { top: 62px; }
#slidesView .sl-actions .btn { flex: 0 1 auto; }
/* The gap that pushes the menus to the far end of the bar, so the two buttons the
   deck is FOR sit on the left and every grouped action sits together on the right. */
#slidesView .sl-act-gap { flex: 1 1 auto; }
#slidesView .sl-menus {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}

/* ---- the toolbar's dropdowns -------------------------------------------- */
#slidesView .sl-menu { position: relative; }
#slidesView .sl-menu-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 8px; font-weight: 600;
}
#slidesView .sl-menu-btn .sl-chev { font-size: 10px; line-height: 1; opacity: .65; }
#slidesView .sl-menu.open .sl-menu-btn {
  border-color: var(--sl-primary); color: var(--sl-primary);
}
#slidesView .sl-menu-panel {
  display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0;
  z-index: 40; min-width: 236px; max-width: min(340px, 92vw);
  padding: 6px; border: 1px solid var(--sl-line); border-radius: 10px;
  background: #fff; box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
}
#slidesView .sl-menu.open .sl-menu-panel { display: block; }
/* The last trigger sits at the end of the bar: its panel opens INWARDS, or it hangs
   off the screen on a phone. */
#slidesView .sl-menus .sl-menu:last-child .sl-menu-panel {
  inset-inline-start: auto; inset-inline-end: 0;
}
#slidesView .sl-menu-item {
  display: block; width: 100%; text-align: start; cursor: pointer;
  padding: 8px 10px; border: 0; border-radius: 6px; background: transparent;
  color: var(--sl-2); font: inherit; font-size: 13px; white-space: nowrap;
}
#slidesView .sl-menu-item:hover,
#slidesView .sl-menu-item:focus-visible {
  background: var(--sl-primary-soft); color: var(--sl-primary); outline: none;
}
#slidesView .sl-menu-sep { height: 1px; margin: 5px 6px; background: var(--sl-line); }

/* A CONTROL IS A ROUNDED RECTANGLE, NOT A CAPSULE. The product draws its buttons as
   capsules (`--r-pill: 999px` in design.css) — fine for one button on a page, and a
   row of competing pills in a bar of twelve, which is the clutter this rebuild is
   about. Inside Slides every CONTROL is a rounded rectangle: 8px, and 6px for the
   small ones. Badges, dots and the circular icon buttons stay round, because those
   are not controls. */
#slidesView .btn,
#slidesView .sl-mini,
#slidesView .sl-tab,
#slidesView .bt-pill { border-radius: 8px; }
#slidesView .sl-menu-item,
#slidesView .sl-brand-state { border-radius: 6px; }
#slidesView .sl-actions .sl-wm { flex: 1 1 220px; }

/* ---- review ------------------------------------------------------------- */
#slidesView .sl-review-head { display: flex; gap: 12px; flex-wrap: wrap; }
#slidesView .sl-review-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--sl-line); border-bottom: 1px solid var(--sl-line);
}
#slidesView .sl-count { font-size: 12px; font-weight: 700; color: var(--sl-2); margin-inline-end: auto; }
#slidesView .sl-edits { display: flex; flex-direction: column; gap: 12px; }
#slidesView .sl-edit {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px; border: 1px solid var(--sl-line); border-radius: 12px; background: #fff;
}
#slidesView .sl-edit-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#slidesView .sl-edit-n { font-size: 12px; font-weight: 800; color: var(--sl-dim); font-variant-numeric: tabular-nums; }
#slidesView .sl-edit-type { width: auto; flex: 0 0 auto; padding: 5px 9px; font-size: 12px; }
#slidesView .sl-edit-act { margin-inline-start: auto; display: flex; gap: 4px; }

/* The review screen's summary. It replaced a list of empty slide editors: this is
   what is about to be made, not what has been made — see `reviewStepHtml`. */
#slidesView .sl-sum-lead { margin: 0 0 12px; font-size: 13px; color: var(--sl-2); }
#slidesView .sl-sum {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--sl-line); border-radius: 12px; overflow: hidden;
}
#slidesView .sl-sum-row {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 13px; font-size: 13px; background: #fff;
}
#slidesView .sl-sum-row + .sl-sum-row { border-top: 1px solid var(--sl-line); }
#slidesView .sl-sum-row span {
  flex: 0 0 120px; color: var(--sl-dim); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
#slidesView .sl-sum-row b { font-weight: 600; color: var(--sl-ink); }
#slidesView .sl-cost-note { font-size: 12.5px; font-weight: 600; color: var(--sl-2); }

/* ---- the deck's own editor --------------------------------------------- */
#slidesView .sl-ed-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--sl-line);
}
#slidesView .sl-ed-head .sl-h3 { margin: 0; }
#slidesView .sl-ed-head .sl-count { margin-inline-end: 0; }
#slidesView .sl-ed-acts { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; }
#slidesView .sl-ed-hint { font-size: 12px; color: var(--sl-dim); margin: 0; }

/* ---- deck-wide choices: apply to all, and the background ---------------- */
/* These answer questions about the WHOLE deck, so they sit above the slides rather
   than inside one of them. The switch turns the per-slide format row into a
   deck-wide one ("justify them all left" used to be one press per slide). */
#slidesView .sl-deckwide {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  background: var(--sl-surface); border: 1px solid var(--sl-line);
}
#slidesView .sl-deckwide.on {
  background: var(--sl-primary-soft); border-color: var(--sl-primary);
}
#slidesView .sl-deckwide-hint { font-size: 11.5px; color: var(--sl-dim); flex: 1 1 220px; }
#slidesView .sl-bgpick {
  display: flex; align-items: center; gap: 8px; margin-inline-start: auto;
  font-size: 12px; color: var(--sl-2);
}
#slidesView .sl-bgpick input[type="color"] {
  width: 34px; height: 26px; padding: 0; border: 1px solid var(--sl-line);
  border-radius: 7px; background: #fff; cursor: pointer;
}
#slidesView .sl-bgpick .sl-dim { font-size: 11px; }
#slidesView .sl-brand-up {
  display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 8px;
  cursor: pointer;
}
#slidesView .sl-brand-up input { display: none; }

/* ---- the slide's VISUAL canvas ----------------------------------------- */
/* A full-screen working surface: the slide, and the boxes the user placed on it.
   The marketing editor's feel (drag, a corner to resize, pink snap guides, a
   properties rail) without its print pipeline — these numbers end up as ordinary
   draw layers on the slide, so the PNG, the PDF and the shared page agree. */
#slidesView .sl-cv {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 14px;
  background: rgba(15, 23, 42, .55);
}
#slidesView .sl-cv-card {
  background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
  width: min(1060px, 100%); max-height: calc(100vh - 28px);
  display: flex; flex-direction: column; overflow: hidden;
}
#slidesView .sl-cv-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--sl-line);
}
#slidesView .sl-cv-bar b { font-size: 13.5px; color: var(--sl-ink); }
#slidesView .sl-cv-nav { display: flex; gap: 4px; }
#slidesView .sl-cv-nav button {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--sl-line);
  background: #fff; cursor: pointer; font-size: 15px; line-height: 1; color: var(--sl-2);
}
#slidesView .sl-cv-nav button:disabled { opacity: .4; cursor: default; }
#slidesView .sl-cv-body {
  display: flex; gap: 14px; padding: 14px; overflow: auto; align-items: flex-start;
}
#slidesView .sl-cv-stage {
  position: relative; flex: 0 0 auto; width: 520px; max-width: 100%;
  background: #fff; border: 1px solid var(--sl-line); border-radius: 10px;
  overflow: hidden; touch-action: none;
}
#slidesView .sl-cv-stage canvas { display: block; width: 100%; }
#slidesView .sl-cv-boxes { position: absolute; inset: 0; }
#slidesView .sl-cv-box {
  position: absolute; border: 1px dashed transparent; cursor: move;
  /* A box is turned about its own centre — the same pivot the painter uses, so the
     outline on screen and the drawn layer cannot disagree. */
  transform-origin: 50% 50%;
}
#slidesView .sl-cv-box:hover { border-color: rgba(79, 70, 229, .45); }
#slidesView .sl-cv-box.on { border: 2px solid var(--sl-primary); }
/* FOUR corners, because a box is pulled from whichever one is nearest the pointer.
   The grip sits OUTSIDE the box so it never covers the words it is sizing. */
#slidesView .sl-cv-handle {
  position: absolute; width: 14px; height: 14px;
  border-radius: 4px; background: var(--sl-primary); border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
#slidesView .sl-cv-h-nw { left: -8px; top: -8px; cursor: nwse-resize; }
#slidesView .sl-cv-h-ne { right: -8px; top: -8px; cursor: nesw-resize; }
#slidesView .sl-cv-h-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
#slidesView .sl-cv-h-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
/* The rotation knob: a round grip on a short stem above the box, the universal "turn
   me" sign. It is the same accent colour as the corners so it reads as part of the
   rig rather than as another corner. */
#slidesView .sl-cv-rot {
  position: absolute; left: 50%; top: -30px; width: 16px; height: 16px;
  margin-left: -8px; border-radius: 50%; background: #fff;
  border: 2px solid var(--sl-primary); cursor: grab;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
#slidesView .sl-cv-rot::before {
  content: ""; position: absolute; left: 50%; top: 14px; width: 2px; height: 14px;
  margin-left: -1px; background: var(--sl-primary);
}
#slidesView .sl-cv-rot:active { cursor: grabbing; }
#slidesView .sl-cv-guide {
  position: absolute; display: none; pointer-events: none;
  background: #ec4899; z-index: 3;
}
#slidesView .sl-cv-guide[data-sl-cv-guide="x"] { top: 0; bottom: 0; width: 1px; }
#slidesView .sl-cv-guide[data-sl-cv-guide="y"] { left: 0; right: 0; height: 1px; }
#slidesView .sl-cv-panel {
  flex: 1 1 260px; min-width: 220px; display: flex; flex-direction: column; gap: 7px;
  font-size: 12px; color: var(--sl-2);
}
/* The keyboard hint under the slide: the copy/paste and arrow keys are the
   fastest way to place a box, and nobody finds them by guessing. */
#slidesView .sl-cv-keys {
  margin: 0 0 10px; padding: 0 2px; font-size: 11.5px; line-height: 1.6;
  color: var(--sl-2); text-align: start;
}
#slidesView .sl-cv-ptitle { display: flex; align-items: center; gap: 8px; }
#slidesView .sl-cv-ptitle b { font-size: 12.5px; color: var(--sl-ink); }
#slidesView .sl-cv-ptitle .sl-mini { margin-inline-start: auto; }
#slidesView .sl-cv-lab { font-size: 11.5px; font-weight: 700; color: var(--sl-2); }
#slidesView .sl-cv-text { min-height: 62px; resize: vertical; }
#slidesView .sl-cv-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#slidesView .sl-cv-colour {
  width: 34px; height: 28px; padding: 0; border: 1px solid var(--sl-line);
  border-radius: 7px; background: #fff; cursor: pointer;
}
#slidesView .sl-cv-order { display: flex; gap: 6px; margin-top: 2px; }
#slidesView .sl-cv-icons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 4px; max-height: 240px; overflow: auto; padding: 4px;
  border: 1px solid var(--sl-line); border-radius: 8px;
}
#slidesView .sl-cv-ic {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1;
  border: 1px solid transparent; border-radius: 7px; background: #fff;
  color: var(--sl-2); cursor: pointer; padding: 3px;
}
#slidesView .sl-cv-ic svg { width: 100%; height: 100%; }
#slidesView .sl-cv-ic.on { border-color: var(--sl-primary); color: var(--sl-primary);
  background: var(--sl-primary-soft); }
#slidesView .sl-cv-empty { margin: 0; font-size: 12px; line-height: 1.6; }
#slidesView .sl-cv-note { margin: 4px 0 0; font-size: 11px; line-height: 1.5; }
@media (max-width: 760px) {
  #slidesView .sl-cv-body { flex-direction: column; }
  #slidesView .sl-cv-stage { width: 100%; }
  #slidesView .sl-cv-panel { flex: 1 1 auto; width: 100%; }
}

/* One slide's picture, and the picker strip that changes it. The strip is drawn
   INSIDE the slide it belongs to, so there is never a question of which slide is
   being given a picture. */
#slidesView .sl-prow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 4px;
}

/* ---- the WYSIWYG options (one slide's own formatting) ------------------- */
/* A bar of small buttons in the slide's own editor, above its fields: what it
   changes is in the preview beside it, which is the whole point of offering it. */
#slidesView .sl-fmtrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--sl-line);
}
#slidesView .sl-fmt {
  min-width: 30px; height: 28px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer;
  border: 1px solid var(--sl-line); border-radius: 8px; background: #fff;
  color: var(--sl-2);
}
#slidesView .sl-fmt:hover { border-color: var(--sl-primary); color: var(--sl-ink); }
#slidesView .sl-fmt.on {
  border-color: var(--sl-primary); background: var(--sl-primary-soft);
  color: var(--sl-primary);
}
#slidesView .sl-fmt u { text-decoration: underline; }
#slidesView .sl-fmt-sep {
  width: 1px; height: 18px; background: var(--sl-line); margin: 0 3px;
}
#slidesView .sl-fmt-al { display: grid; gap: 2px; justify-items: start; }
#slidesView .sl-fmt-al i {
  display: block; height: 2px; width: 14px; border-radius: 2px;
  background: currentColor; opacity: .85;
}
#slidesView .sl-fmt-al i:nth-child(2) { width: 10px; }
#slidesView .sl-fmt-al i:nth-child(3) { width: 12px; }
#slidesView .sl-fmt-al.center { justify-items: center; }
#slidesView .sl-fmt-al.end { justify-items: end; }
#slidesView .sl-fmt-reset { font-size: 14px; }
/* Says where the bold lands: the row's first three buttons work on the SELECTION,
   the rest on the whole slide. */
#slidesView .sl-fmt-hint {
  font-size: 11px; color: var(--sl-dim); margin-top: 6px; line-height: 1.45;
}
#slidesView .sl-pnone {
  font-size: 12px; color: var(--sl-dim); font-style: italic;
  padding: 5px 10px; border: 1px dashed var(--sl-line); border-radius: 9px;
}
#slidesView .sl-prow-act { display: flex; gap: 6px; margin-inline-start: auto; }
#slidesView .sl-pick-strip {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px; padding: 10px; border-radius: 11px;
  background: var(--sl-primary-soft);
}
#slidesView .sl-pick-hint { font-size: 11.5px; color: var(--sl-2); }

/* ---- generate a picture for one slide ---------------------------------- */
/* Same shape as the picture strip beside it: an inline panel, so the choice is
   made where the slide is, on a phone as much as on a desktop. */
#slidesView .sl-gen-strip {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px; padding: 10px; border-radius: 11px;
  background: var(--sl-primary-soft);
}
#slidesView .sl-gen-strip .sl-input { font-size: 13px; }
#slidesView .sl-gen-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#slidesView .sl-gen-style { flex: 1 1 150px; min-width: 0; }
#slidesView .sl-gen-cost {
  font-size: 11.5px; color: var(--sl-2); font-variant-numeric: tabular-nums;
  margin-inline-start: auto;
}
#slidesView .sl-gen-model { font-size: 11px; color: var(--sl-dim); }
#slidesView .sl-pick-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px;
}
#slidesView .sl-pick-tile {
  position: relative; padding: 0; cursor: pointer; overflow: hidden;
  aspect-ratio: 1 / 1; border-radius: 9px; border: 2px solid transparent;
  background: #fff;
}
#slidesView .sl-pick-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
#slidesView .sl-pick-tile:hover { border-color: var(--sl-primary); }
#slidesView .sl-pick-tile.on { border-color: var(--sl-primary); }
#slidesView .sl-pick-tile.on::after {
  content: "\2713"; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  background: var(--sl-primary); color: #fff; font-size: 11px; font-weight: 800;
  border-radius: 99px; padding: 1px 5px;
}
#slidesView .sl-pick-tile i {
  position: absolute; inset-block-end: 3px; inset-inline-end: 3px;
  background: rgba(15, 23, 42, .72); color: #fff; font-size: 10px; font-style: normal;
  border-radius: 99px; padding: 1px 6px; font-variant-numeric: tabular-nums;
}
#slidesView .sl-pick-strip .sl-mini { align-self: flex-start; }

/* A file that is still being read. It exists to justify a LIVE Next button: the
   upload no longer holds the interview up, so the screen has to say so. */
#slidesView .sl-reading {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border-radius: 11px;
  background: var(--sl-primary-soft); color: var(--sl-primary);
  font-size: 12.5px; font-weight: 600;
}
#slidesView .sl-reading b { display: block; font-size: 13px; }
#slidesView .sl-reading span { display: block; }
#slidesView .sl-reading > span:last-child { font-weight: 500; color: var(--sl-2); }
#slidesView .sl-reading b + span { font-weight: 500; }

/* A modal a phone can actually read.
   Two things were wrong on a handset. The summary's label column is 120px of
   uppercase text, which on a 360px screen leaves a ragged column two words wide;
   and every input and textarea in the studio was 14px, which makes iOS SAFARI ZOOM
   THE WHOLE PAGE on focus (it does that below 16px) — so tapping a field enlarged
   the letters and pushed the rest of the card off screen. The 16px floor is the fix
   for that, not a taste.
   `dvh` is used where a height matters so the on-screen keyboard does not cut the
   footer off. */
@media (max-width: 640px) {
  #slidesView .sl-input,
  #slidesView .sl-text,
  #slidesView .sl-area,
  #slidesView .sl-select,
  #slidesView .sl-drop-t,
  #slidesView .sw-card input,
  #slidesView .sw-card textarea,
  #slidesView .sw-card select { font-size: 16px; }
  #slidesView .sw-card .sl-text { min-height: 34dvh; }

  #slidesView .sl-sum-row { flex-direction: column; gap: 2px; padding: 10px 12px; }
  #slidesView .sl-sum-row span { flex: 0 0 auto; font-size: 10.5px; }
  #slidesView .sl-sum-row b { font-size: 14px; line-height: 1.45; }
  #slidesView .sl-sum-lead { font-size: 13.5px; line-height: 1.5; }
  #slidesView .sl-cost-note { font-size: 13px; }

  /* The deck's editor: the three name/title/subtitle fields stack, and the
     per-slide controls get a full-width row instead of wrapping mid-label. */
  #slidesView .sl-ed-head { gap: 8px; }
  #slidesView .sl-ed-acts { width: 100%; margin-inline-start: 0; }
  #slidesView .sl-ed-acts .sl-mini { flex: 1 1 auto; }
  #slidesView .sl-review-head { flex-direction: column; }
  #slidesView .sl-edit-top { gap: 6px; }
  #slidesView .sl-edit-act { margin-inline-start: 0; width: 100%; }
  #slidesView .sl-edit-act .sl-mini { flex: 1 1 auto; }
  #slidesView .sl-prow-act { margin-inline-start: 0; }
  #slidesView .sl-pick-tiles { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  /* The pinned bar wraps on a phone, and every action in it is thumb-sized. */
  #slidesView .sl-actions { gap: 6px; }
  #slidesView .sl-sharebar-top { flex-wrap: wrap; }
  #slidesView .sl-actions .btn { flex: 0 1 auto; }
  #slidesView .sl-menus { flex: 1 1 100%; justify-content: space-between; gap: 6px; }
  #slidesView .sl-menu { flex: 1 1 auto; }
  #slidesView .sl-menu-btn { width: 100%; justify-content: space-between; }
  #slidesView .sl-menu-panel { min-width: 200px; }
}

/* ---- buttons ------------------------------------------------------------ */
#slidesView .sl-mini {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--sl-line); background: #fff; color: var(--sl-2);
}
#slidesView .sl-mini:hover:not(:disabled) { border-color: var(--sl-primary); color: var(--sl-primary); }
#slidesView .sl-mini:disabled { opacity: .45; cursor: not-allowed; }
#slidesView .sl-mini-danger {
  color: #fff; background: var(--sl-danger); border-color: var(--sl-danger);
}
#slidesView .sl-mini-danger:hover:not(:disabled) {
  background: #b91c1c; border-color: #b91c1c; color: #fff;
}
/* A delete action is filled red at rest, never only on hover: a grey button that
   turns red when you point at it does not say “this removes something”.

   This rule has to carry the pill ITSELF (padding, radius, border): the app has no
   base `.btn` — `landing.css` defines one but the app shell never loads that file,
   so `.btn` alone is naked text and a variant that only sets COLOURS comes out as a
   red smear. Every `.btn` in slides.js therefore names a variant, and every variant
   is complete. */
#slidesView .sl-danger {
  background: var(--sl-danger); border: 1px solid var(--sl-danger); color: #fff;
  padding: .65rem 1.1rem; border-radius: 8px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
#slidesView .sl-danger:hover:not(:disabled) {
  background: #b91c1c; border-color: #b91c1c; color: #fff;
}
#slidesView .sl-danger:disabled { opacity: .45; cursor: not-allowed; }

/* ---- render step -------------------------------------------------------- */
#slidesView .sl-ok { font-size: 12px; font-weight: 600; color: #047857; }
#slidesView .sl-wm { font-size: 12px; color: var(--sl-dim); }
#slidesView .sl-slide {
  margin: 0; display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
}
#slidesView .sl-slide figcaption { font-size: 12px; color: var(--sl-dim); }
#slidesView .sl-slide figcaption b { color: var(--sl-2); }
/* The canvas's own box, so the deck logo can be laid over it in the painter's own
   coordinates (see `paintLogoBoxes`). */
#slidesView .sl-slide-stage {
  position: relative; width: 100%; max-width: 620px; line-height: 0;
}
#slidesView .sl-canvas {
  display: block; width: 100%; max-width: 620px; height: auto;
  border: 1px solid var(--sl-line); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
  background: #fff;
}
/* THE DECK'S LOGO, BY HAND: the box that sits over the mark on a preview. Move it by
   dragging, pull a corner to size it, turn the knob to rotate it. It is invisible
   until the pointer is on the preview, so a deck of fourteen slides does not read as
   fourteen dashed boxes. */
#slidesView .sl-logo {
  position: absolute; border: 1px dashed transparent; cursor: move;
  transform-origin: 50% 50%; touch-action: none; border-radius: 4px;
}
#slidesView .sl-logo:hover, #slidesView .sl-logo.on {
  border-color: rgba(79, 70, 229, .75); background: rgba(79, 70, 229, .06);
}
#slidesView .sl-logo-h {
  position: absolute; width: 11px; height: 11px; border-radius: 3px;
  background: var(--sl-primary); border: 2px solid #fff; display: none;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .35);
}
#slidesView .sl-logo:hover .sl-logo-h, #slidesView .sl-logo.on .sl-logo-h {
  display: block;
}
#slidesView .sl-logo-h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
#slidesView .sl-logo-h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
#slidesView .sl-logo-h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
#slidesView .sl-logo-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
#slidesView .sl-logo-rot {
  position: absolute; left: 50%; top: -22px; width: 13px; height: 13px;
  margin-left: -6.5px; border-radius: 50%; background: #fff;
  border: 2px solid var(--sl-primary); cursor: grab; display: none;
}
#slidesView .sl-logo:hover .sl-logo-rot, #slidesView .sl-logo.on .sl-logo-rot {
  display: block;
}
#slidesView .sl-logo-rot:active { cursor: grabbing; }
#slidesView .sl-slide-act { display: flex; gap: 6px; }

/* ---- footer nav --------------------------------------------------------- */
#slidesView .sl-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
#slidesView .sl-spacer { flex: 1 1 auto; }

/* ---- busy / error ------------------------------------------------------- */
#slidesView .sl-busy {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; margin-bottom: 14px; border-radius: 12px;
  background: var(--sl-primary-soft); color: var(--sl-primary);
  font-size: 13px; font-weight: 600;
}
#slidesView .sl-spin {
  width: 15px; height: 15px; border-radius: 999px; display: inline-block;
  border: 2px solid rgba(79, 70, 229, .28); border-top-color: var(--sl-primary);
  animation: slSpin .7s linear infinite;
}
@keyframes slSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #slidesView .sl-spin { animation-duration: 2.4s; }
}
#slidesView .sl-err {
  color: var(--sl-danger); font-size: 13px; font-weight: 600;
  background: rgba(220, 38, 38, .06); border-color: rgba(220, 38, 38, .25);
}

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 640px) {
  #slidesView .sl-meter { text-align: start; }
  #slidesView .sl-head-side { width: 100%; justify-content: space-between; }
  #slidesView .sl-canvas { max-width: 100%; }
}

/* ---- upload box --------------------------------------------------------- */
#slidesView .sl-drop {
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  text-align: center; cursor: pointer;
  padding: 26px 18px; border: 2px dashed var(--sl-line); border-radius: 14px;
  background: var(--sl-surface);
}
#slidesView .sl-drop:hover, #slidesView .sl-drop.over {
  border-color: var(--sl-primary); background: var(--sl-primary-soft);
}
#slidesView .sl-file {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
#slidesView .sl-drop-t { font-size: 14px; font-weight: 700; color: var(--sl-ink); }
#slidesView .sl-drop-s { font-size: 12px; color: var(--sl-dim); }
#slidesView .sl-file-card {
  display: block;
  padding: 11px 13px; border: 1px solid var(--sl-line); border-radius: 10px;
  background: #fff;
}
#slidesView .sl-file-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#slidesView .sl-file-top b { font-size: 13px; color: var(--sl-ink); }
#slidesView .sl-file-top span { font-size: 12px; color: var(--sl-dim); }
#slidesView .sl-file-top .sl-mini { margin-inline-start: auto; }
#slidesView .sl-file-card em {
  font-size: 11px; color: var(--sl-2); font-style: normal; display: block;
}

/* ---- format tiles: a shape swatch so 16:9 and 4:5 are told apart --------- */
/* The MINIATURE slide the three pickers show (static/js/slides.js ->
   `miniSlideHtml`). ONE stage height, and the box's own aspect-ratio: that is what
   makes a 4:5 portrait, a 1:1 square and a 16:9 landscape look like what they are
   instead of three identical rectangles — and what lets them line up on one
   baseline so the SHAPE is the only thing the eye has to read. `--mh` is the whole
   type scale: every size inside is in `em`, so a smaller stage is the same picture.

   `sl-prev`, NOT `sl-mini`: `.sl-mini` is this studio's own small BUTTON in the
   buttons section below, and two rules on one class fight over padding, border and
   font — which turned the miniature into a white chip with a 12px label. */
#slidesView .sl-shapestage {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--sl-mini-h, 104px); --mh: var(--sl-mini-h, 104px);
}
#slidesView .sl-shapestage-sm { --sl-mini-h: 80px; }
#slidesView .sl-prev {
  display: flex; flex-direction: column; gap: .30em; flex: 0 0 auto;
  height: 100%; box-sizing: border-box; padding: .62em .72em;
  border-radius: 8px; overflow: hidden;
  font-size: calc(var(--mh, 104px) * 0.105);
  background: var(--sl-primary-soft); color: var(--sl-primary);
  border: 1px solid rgba(15, 23, 42, .10);
}
#slidesView .sl-prev i {
  display: block; flex: 0 0 auto; width: 34%; height: .34em;
  border-radius: 99px; background: currentColor; opacity: .85;
}
#slidesView .sl-prev b {
  display: block; flex: 0 0 auto;
  font-size: 1.05em; line-height: 1.12; font-weight: 800; letter-spacing: -.01em;
}
#slidesView .sl-prev b.sl-prev-bar {
  height: .64em; border-radius: 99px; background: currentColor; opacity: .90;
}
#slidesView .sl-prev u {
  display: block; flex: 0 0 auto; height: .30em;
  border-radius: 99px; background: currentColor; opacity: .36; text-decoration: none;
}
#slidesView .sl-tile-x {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--sl-dim); text-transform: uppercase;
}

/* ---- content templates -------------------------------------------------- */
#slidesView .sl-tpls {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 12px;
}
#slidesView .sl-tpl {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  text-align: start; cursor: pointer; font: inherit; position: relative;
  padding: 12px; border: 1px solid var(--sl-line); border-radius: 12px; background: #fff;
}
#slidesView .sl-tpl:hover { border-color: var(--sl-primary); }
#slidesView .sl-tpl.on { border-color: var(--sl-primary); background: var(--sl-primary-soft); }
#slidesView .sl-tpl.locked { opacity: .62; }
#slidesView .sl-tpl-t { font-size: 13px; font-weight: 700; color: var(--sl-ink); }
#slidesView .sl-tpl-custom {
  font-style: normal; font-size: 9px; font-weight: 700; padding: 1px 5px;
  border-radius: 999px; background: var(--sl-primary-soft); color: var(--sl-primary);
  vertical-align: middle;
}
#slidesView .sl-tpl-s { font-size: 11.5px; color: var(--sl-dim); line-height: 1.4; }
#slidesView .sl-tpl-d { font-size: 11px; color: var(--sl-2); font-variant-numeric: tabular-nums; }
#slidesView .sl-tpl-lock {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--sl-surface); color: var(--sl-2);
}
#slidesView .sl-tpl-x {
  position: absolute; top: 6px; inset-inline-end: 6px;
  width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; color: var(--sl-danger); background: #fff; border: 1px solid var(--sl-line);
}
#slidesView .sl-tpl-x:hover { color: var(--sl-danger); border-color: var(--sl-danger); }
#slidesView .sl-tpl-foot {
  display: flex; align-items: center; gap: 10px; padding-top: 8px; margin-top: 0;
  font-size: 12px; color: var(--sl-dim);
}

/* ---- how many slides ---------------------------------------------------- */
/* The LENGTH chips sit ABOVE the templates on the screen where a deck's size is
   decided ("6 sections · ≈6–8 slides"): they are the answer to a long source being
   compressed into fifteen slides, and under a grid of nine templates nobody would
   scroll far enough to find them. */
#slidesView .sl-len {
  margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--sl-line);
}
#slidesView .sl-len .sl-tabs { margin-top: 2px; }
#slidesView .sl-len .sl-research-hint { margin: 4px 0 0; }

/* ---- one's own PowerPoint theme ----------------------------------------- */
/* The upload tile sits WITH the themes because a theme is a look, and the tile is
   styled like them so it reads as "one more choice you can add", not as a form.
   `position: relative` is what keeps the delete ✕ ON the tile: without it the ✕
   climbs to the nearest positioned ancestor and lands in the corner of the page. */
#slidesView .sl-theme { position: relative; }
#slidesView .sl-theme-up {
  border-style: dashed; background: var(--sl-surface); justify-content: flex-start;
}
#slidesView .sl-theme-up:hover { border-color: var(--sl-primary); background: #fff; }
#slidesView .sl-theme-up .sl-file { display: none; }
#slidesView .sl-theme-quota { font-variant-numeric: tabular-nums; }
#slidesView .sl-prev-up {
  background: #fff; border: 1px dashed var(--sl-line); align-items: center;
  justify-content: center; color: var(--sl-primary);
}
#slidesView .sl-prev-up i { display: none; }
#slidesView .sl-prev-up b { font-size: 1.45em; line-height: 1.05; opacity: .95; }
#slidesView .sl-prev-up u { width: 58%; opacity: .22; }
#slidesView .sl-theme > .sl-tpl-x { top: 4px; inset-inline-end: 4px; }
#slidesView .sl-theme > .sl-tpl-x:hover { background: #fff; }

/* ---- review extras ------------------------------------------------------ */
#slidesView .sl-edit-img {
  display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--sl-2);
  overflow-wrap: anywhere;
}

/* ---- a deck-wide AI picture run ----------------------------------------- */
/* The count, and the door out of it: a deck of thirteen images is a minute of
   watching, so the run says where it is and can be stopped. */
#slidesView .sl-pics-run {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 10px;
  background: var(--sl-primary-soft); border: 1px solid var(--sl-line);
  font-size: 13px; color: var(--sl-2);
}
#slidesView .sl-pics-run span { font-weight: 700; color: var(--sl-ink); }

/* ---- share row ---------------------------------------------------------- */
/* It is a ROW in the top panel, not a block at the foot of the page: the link, its
   password and its expiry belong beside the buttons that make the deck. */
#slidesView .sl-sharebar {
  margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--sl-line);
  border-radius: 12px; background: var(--sl-surface);
}
/* The bar's Share button lights the row up for a moment (it does not need to scroll
   to it any more — the row is right underneath). */
#slidesView .sl-sharebar.on {
  outline: 2px solid var(--sl-primary); outline-offset: 2px; border-radius: 12px;
}
#slidesView .sl-sharebar-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  margin-bottom: 9px;
}
/* ...so the hint shrinks instead of pushing the action onto its own line. On a phone
   the header wraps (there is no room for both) and the action keeps the right edge. */
#slidesView .sl-share-hint { min-width: 0; }
#slidesView .sl-sharebar-top b { font-size: 13px; }
/* The section's own action, at the top right of the card it belongs to. */
#slidesView .sl-share-head-act {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  margin-inline-start: auto;
}
#slidesView .sl-share-hint {
  margin: 0; font-size: 12.5px; color: var(--sl-dim); line-height: 1.5;
  flex: 1 1 260px;
}
/* ---- research --------------------------------------------------------- */
#slidesView .sl-check {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--sl-2);
}
#slidesView .sl-check input { width: 16px; height: 16px; flex: none; margin: 0; }
#slidesView .sl-research .sl-research-hint {
  margin: 5px 0 0; font-size: 12px; line-height: 1.5;
}
#slidesView .sl-research-price {
  margin: 7px 0 0; font-size: 12.5px; font-weight: 700; color: var(--sl-primary);
}
#slidesView .sl-researched { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 14px; }
#slidesView .sl-researched b { font-size: 13px; }
#slidesView .sl-researched .sl-dim { font-size: 12px; }
/* The pages a researched deck actually read. Numbered, because a source list is a
   citation list, and it must not look like a menu. */
#slidesView .sl-src-list {
  flex: 1 1 100%; margin: 6px 0 0; padding-inline-start: 20px;
  font-size: 12px; line-height: 1.6; max-height: 132px; overflow: auto;
}
#slidesView .sl-src-list a { color: var(--sl-primary); text-decoration: none;
  word-break: break-all; }
#slidesView .sl-src-list a:hover { text-decoration: underline; }
#slidesView .sl-share-url {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#slidesView .sl-share-url .sl-input { flex: 1 1 260px; min-width: 0; font-size: 12.5px; }
#slidesView .sl-share-url .sl-mini { text-decoration: none; white-space: nowrap; }
#slidesView .sl-share-stats {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 9px;
  font-size: 12px; color: var(--sl-dim);
}
#slidesView .sl-share-actions {
  display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px;
}
#slidesView .sl-share-none {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--sl-2);
}
#slidesView .sl-job-shared { top: 32px; }

/* ---- ONE door for typed text and for a file ---------------------------- */
#slidesView .sl-or {
  display: flex; align-items: center; gap: 10px; margin: 11px 0;
  font-size: 11px; color: var(--sl-dim); text-transform: uppercase;
  letter-spacing: .05em;
}
#slidesView .sl-or::before, #slidesView .sl-or::after {
  content: ""; flex: 1; height: 1px; background: var(--sl-line);
}
#slidesView .sl-keep {
  font-size: 12px; color: var(--sl-2); margin: 9px 0 0; line-height: 1.6;
}
#slidesView .sl-keep span { display: block; color: var(--sl-dim); }

/* ---- the file's pictures: ONE tile size, ONE crop, ONE radius ----------
   A deck's pictures are the part of an import the user recognises, so they get
   a grid rather than a list of names. 4:3 with `object-fit: cover` puts a tall
   chart and a wide photograph in the same rhythm; the tile is a button, so
   clicking one opens it full size. */
#slidesView .sl-pics { margin-top: 13px; }
#slidesView .sl-pics-head {
  font-size: 11px; font-weight: 700; color: var(--sl-dim); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .05em;
}
#slidesView .sl-pics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
#slidesView .sl-pic {
  padding: 0; margin: 0; border: 1px solid var(--sl-line); border-radius: 10px;
  overflow: hidden; background: var(--sl-surface); aspect-ratio: 4 / 3;
  cursor: zoom-in; line-height: 0;
}
#slidesView .sl-pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .16s ease;
}
#slidesView .sl-pic:hover { border-color: var(--sl-primary); }
#slidesView .sl-pic:hover img { transform: scale(1.05); }
#slidesView .sl-pic:focus-visible {
  outline: 2px solid var(--sl-primary); outline-offset: 2px;
}

/* ---- one picture, full size ------------------------------------------- */
#slidesView .sl-light {
  position: fixed; inset: 0; z-index: 150; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 23, 42, .82); cursor: zoom-out;
}
#slidesView .sl-light img {
  max-width: 92vw; max-height: 86vh; border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45); background: #fff;
}

/* ---- the picture attached to a slide, in the review editor ------------- */
#slidesView .sl-slide-pic {
  width: 60px; height: 44px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--sl-line); display: block; flex: 0 0 auto;
}


/* ---- the deck's LOGO (the mark on every page) --------------------------- */
/* A row beside the share bar: the deck-level things a user sets once and then
   forgets — the link, the password, and the logo on the pages. */
#slidesView .sl-brand {
  margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--sl-line);
  border-radius: 12px; background: var(--sl-surface);
}
#slidesView .sl-brand-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#slidesView .sl-brand-head b { font-size: 13px; }
#slidesView .sl-brand-head .spacer { flex: 1 1 auto; }
/* The pill this row shares with Photo and Video Studio. Its own stylesheet puts a
   14px bottom margin under it (it is a section there); inside this row it is a
   neighbour, so the margin would push the row's own controls down. */
#slidesView .sl-brand .bt-section { margin: 0; }
#slidesView .sl-brand-state {
  font-size: 11px; padding: 3px 8px; border-radius: 999px; font-weight: 700;
  background: var(--sl-chip, rgba(15, 23, 42, .06)); color: var(--sl-dim);
}
#slidesView .sl-brand-state.on {
  background: rgba(34, 197, 94, .16); color: #15803d;
}
#slidesView .sl-brand-thumb {
  height: 26px; width: auto; max-width: 90px; object-fit: contain; display: block;
  border-radius: 6px; background: #fff; border: 1px solid var(--sl-line);
}
#slidesView .sl-brand-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 9px;
}
#slidesView .sl-brand-lab { font-size: 12px; color: var(--sl-dim); }
#slidesView .sl-brand-pos { width: auto; max-width: 150px; padding: 6px 8px; }
/* A logo that has been DRAGGED is not in one of the nine places any more, so the
   corner picker is replaced by the truth and the way back. */
#slidesView .sl-brand-placed {
  font-size: 12px; font-weight: 700; color: var(--sl-primary);
  background: rgba(79, 70, 229, .08); border-radius: 7px; padding: 5px 9px;
}
/* A slider that cannot be dragged with a trackpad is not a control: give the thumb
   a real size and let the row scroll rather than squash on a phone. */
#slidesView .sl-brand input[type="range"] { width: 108px; max-width: 34vw; }
#slidesView .sl-brand-val {
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--sl-2);
  min-width: 38px; display: inline-block;
}
#slidesView .sl-brand-hint {
  margin: 8px 0 0; font-size: 12.5px; color: var(--sl-dim); line-height: 1.5;
}
/* The shared templates pill brings its own one-line hint (it sits UNDER the pill in
   Photo and Video Studio, where the section is a block of its own). In this row it
   would sit BESIDE the pill, across the whole width, so it is stacked under it and
   kept narrow — the same words, in the place they belong. */
#slidesView .sl-brand .bt-section {
  display: flex; flex-direction: column; align-items: flex-end;
}
#slidesView .sl-brand .bt-hint {
  max-width: 280px; text-align: end; margin-top: 3px;
}

/* ---- the row's own menus ------------------------------------------------- */
/* A row shows the deck's own four dropdowns (Export / Present / Send to… / Options)
   — requested as "these buttons … where it says copy link. use three dots only if
   there is no room" — and falls back to ONE `⋯` when the deck's name needs the room
   (see `fitRowMenus` in slides.js and `.sl-row-menus` above). */
/* It carries its own shape, like every other variant here: the app has no base
   `.btn`, so a class that only sets colours comes out as a smear. */
#slidesView .sl-icon-btn {
  padding: 5px 10px; border-radius: 8px; font-size: 15px; line-height: 1;
  letter-spacing: 1px;
}
#slidesView .sl-job-acts .sl-menu { flex: 0 0 auto; }
/* The `⋯` sits at the row's right edge, so ITS panel opens from that edge. */
#slidesView .sl-row-menu .sl-menu-panel {
  inset-inline-start: auto; inset-inline-end: 0;
}
/* ...and upwards when there is no room below (the last deck of a long list). The
   class goes on the MENU (`placeMenu`), so this reads from there — matching the panel
   instead left the class set and the panel still hanging off the bottom of the
   window. */
#slidesView .sl-menu.up .sl-menu-panel { top: auto; bottom: calc(100% + 6px); }
#slidesView .sl-menu-item.sl-menu-danger { color: var(--sl-danger); }
#slidesView .sl-menu-item.sl-menu-danger:hover,
#slidesView .sl-menu-item.sl-menu-danger:focus-visible {
  background: rgba(220, 38, 38, .10); color: var(--sl-danger);
}
/* On a PHONE a row's menu is anchored to the SCREEN, not to the row: the trigger sits
   at the right edge of a 390px screen and a 236px panel opening from it hangs off the
   left. It becomes a sheet at the foot of the screen — the same items, all of them
   reachable with a thumb. */
@media (max-width: 760px) {
  #slidesView .sl-row-menu .sl-menu-panel {
    position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto;
    min-width: 0; max-width: none; z-index: 60;
  }
  #slidesView .sl-menu.up.sl-row-menu .sl-menu-panel { bottom: 12px; }
}