/* Collaborative edit shell — inspired by konpatp/online-slide */

html.online-shell-active,
html.online-shell-active body {
  overflow: hidden;
}

/* Reveal's PDF export wraps each slide in a .pdf-page container that's
   deliberately a bit TALLER than the deck's real 1280x720 (padded by
   config.margin for printer breathing room — see js/reveal.js
   PrintContext). theme.css's section.center/.cover rules set
   `height: 100% !important` so live/present mode fills the screen
   edge-to-edge; inside a print page that 100% resolves against the padded
   page box instead of the true 720px slide height, stretching every
   slide's contents to match. Pinning it to the deck's actual configured
   height (matching Reveal.initialize's `height: 720` in index.html) fixes
   that: flex + justify-content: center (from section.center/.cover, still
   in effect) now centers content within the *correct* box, matching
   present mode, and section::after's percentage-based footer position
   resolves against the right height too. Overriding just `height` (not
   `display`) keeps this the same flex-centering mechanism present mode
   already uses, rather than switching to reveal's own scrollHeight-based
   top-offset centering — which only triggers for slides literally classed
   `.center` (not `.cover`, this deck's title-slide class), leaving the
   cover slide's content pinned to the top of the page instead of
   centered. */
html.reveal-print .reveal .slides section.center,
html.reveal-print .reveal .slides section.cover {
  height: 720px !important;
}

/* Chrome's headless --print-to-pdf pipeline evaluates theme.css's
   `@media (max-width: 900px)` mobile layout breakpoint against some
   internal print-layout width, not the deck's real 1280px slide width —
   so cards/grids/team rows silently collapse to their narrow-viewport
   column count while still occupying full slide-width space, run out of
   room, and get clipped against the bottom of the printed page. The
   printed deck should always use the same wide layout present mode does,
   regardless of what width Chrome's print pass thinks it's working with. */
html.reveal-print .icongrid,
html.reveal-print .grid-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}
html.reveal-print .team,
html.reveal-print .grid-5 {
  grid-template-columns: repeat(5, 1fr) !important;
}

.online-shell {
  --online-ink: #14233b;
  --online-muted: #6b7890;
  --online-line: #dfe5ee;
  --online-panel: #f7f9fc;
  --online-blue: #2f6fed;
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: 56px 1fr;
  pointer-events: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.online-shell * {
  box-sizing: border-box;
}

.online-shell > * {
  pointer-events: auto;
}

.online-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--online-line);
  backdrop-filter: blur(8px);
}

.online-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--online-ink);
  font-weight: 760;
  letter-spacing: -0.02em;
  font-size: 14px;
}

.online-brand small {
  color: var(--online-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.online-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.online-btn {
  border: 1px solid var(--online-line);
  background: white;
  color: var(--online-ink);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.online-btn:hover:not(:disabled) {
  border-color: #aebbd0;
}

.online-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.online-btn.primary {
  border-color: var(--online-blue);
  background: var(--online-blue);
  color: white;
}

.online-btn.primary.active {
  background: #173e8c;
  border-color: #173e8c;
}

.online-btn.active {
  border-color: var(--online-blue);
  color: var(--online-blue);
  background: #eaf1fe;
}

.online-presence {
  color: #4bb487;
  font-size: 11px;
  cursor: pointer;
}

.online-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #547087;
  font-size: 11px;
  font-weight: 700;
}

.online-save::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4bb487;
}

.online-save.saving::before {
  background: #d79528;
}

.online-save.error {
  color: #aa3f4c;
}

.online-save.error::before {
  background: #d55b67;
}

.online-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 0;
  pointer-events: none;
  transition: grid-template-columns 0.18s ease;
}

html.online-rail-collapsed .online-body {
  grid-template-columns: 0 1fr;
}

.online-rail {
  background: var(--online-panel);
  border-right: 1px solid var(--online-line);
  overflow: auto;
  padding: 16px 12px;
  pointer-events: auto;
}

html.online-rail-collapsed .online-rail {
  padding: 16px 0;
  overflow: hidden;
  border-right: none;
}

html.online-rail-collapsed .online-rail > * {
  opacity: 0;
  pointer-events: none;
}

.online-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 12px;
}

.online-rail-head strong {
  display: block;
  font-size: 16px;
}

.online-rail-head span {
  color: var(--online-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.online-count {
  min-width: 26px;
  padding: 3px 7px;
  border-radius: 99px;
  text-align: center;
  color: #537093;
  background: #e7edf7;
  font-size: 11px;
  font-weight: 800;
}

.online-thumbs {
  display: grid;
  gap: 8px;
}

.online-thumb {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: white;
  box-shadow: 0 2px 10px rgba(43, 62, 95, 0.05);
  cursor: pointer;
}

.online-thumb:hover {
  border-color: #b6c6dc;
}

.online-thumb.current {
  border-color: var(--online-blue);
  box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.11);
}

.online-thumb.hidden-slide {
  opacity: 0.55;
}

.online-thumb-index {
  padding-top: 4px;
  color: #8b98ab;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.online-thumb-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.online-thumb-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.online-thumb-live {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 720px;
  transform-origin: top left;
  pointer-events: none;
}

.online-thumb-frame.no-thumb {
  display: grid;
  place-items: center;
  color: #8ea0b8;
  font-size: 10px;
  font-weight: 700;
}

.online-thumb-gap {
  height: 9px;
  margin: -3px 0;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.online-thumb-insert {
  width: 100%;
  height: 3px;
  border: none;
  border-radius: 2px;
  background: transparent;
  padding: 0;
  cursor: default;
  position: relative;
  transition: background 0.12s ease;
}

.online-thumb-insert::before {
  content: "+";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--online-blue);
  color: white;
  font-size: 12px;
  line-height: 18px;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

html.online-edit-mode .online-thumb-gap {
  cursor: pointer;
}

html.online-edit-mode .online-thumb-insert:hover {
  background: rgba(47, 111, 237, 0.35);
}

html.online-edit-mode .online-thumb-insert:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.online-thumb-title {
  margin-top: 5px;
  color: #233754;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
}

.online-thumb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 5px;
}

.online-thumb-actions button {
  border: 1px solid var(--online-line);
  background: #f8fafc;
  border-radius: 6px;
  width: 22px;
  height: 20px;
  font-size: 10px;
  cursor: pointer;
}

.online-add-slide {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

.online-rail-help {
  margin: 14px 6px 0;
  color: var(--online-muted);
  font-size: 11px;
  line-height: 1.45;
}

.online-stage-gap {
  pointer-events: none;
}

.online-notes-panel {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  width: 320px;
  display: flex;
  flex-direction: column;
  background: white;
  border-left: 1px solid var(--online-line);
  box-shadow: -8px 0 24px rgba(20, 35, 59, 0.08);
  pointer-events: auto;
}

.online-notes-panel[hidden] {
  display: none;
}

.online-notes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--online-line);
}

.online-notes-head span {
  color: var(--online-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.online-notes-head small {
  color: var(--online-ink);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-notes-textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  color: var(--online-ink);
  background: white;
}

.online-notes-textarea:read-only {
  color: var(--online-muted);
  background: var(--online-panel);
}

.online-notes-textarea::placeholder {
  color: #9aa7ba;
}

.online-history-list {
  flex: 1;
  overflow: auto;
  padding: 10px 16px 16px;
}

.online-history-empty {
  color: var(--online-muted);
  font-size: 12px;
  margin-top: 8px;
}

.online-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--online-line);
}

.online-history-meta {
  min-width: 0;
}

.online-history-date {
  color: var(--online-ink);
  font-size: 11px;
  font-weight: 700;
}

.online-history-message {
  color: var(--online-muted);
  font-size: 11px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-history-restore {
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .online-notes-panel {
    width: 100%;
  }
}

/* Free-floating text/image objects. reveal.js keeps the current slide at
   position:static (no containing block for absolutely-positioned children),
   so give it position:relative — at the same specificity as reveal's own
   !important rule but scoped tighter (adds .present), so it wins. Uses
   .online-active (not .online-shell-active) so this still applies in the
   chrome-free ?present=1 view, which never builds the editor shell. */
html.online-active .reveal .slides > section.present {
  position: relative !important;
}

.online-objects-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.online-object {
  position: absolute;
  min-height: 1.4em;
  pointer-events: none;
}

html.online-edit-mode .online-object {
  pointer-events: auto;
  outline: 1px dashed transparent;
}

html.online-edit-mode .online-object:hover {
  outline-color: rgba(47, 111, 237, 0.35);
}

html.online-edit-mode .online-object.selected {
  outline: 2px solid var(--online-blue, #2f6fed);
}

.online-object-body {
  width: 100%;
  height: 100%;
}

.online-object[data-object-type="image"] .online-object-body,
.online-object[data-object-type="image"] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.online-object-text {
  color: var(--fg, #f3f1ea);
  font-size: 0.5em;
  line-height: 1.4;
  padding: 0.2em;
  outline: none;
  cursor: text;
}

.online-object-grip,
.online-object-resize,
.online-object-delete {
  display: none;
}

html.online-edit-mode .online-object.selected .online-object-grip,
html.online-edit-mode .online-object.selected .online-object-resize,
html.online-edit-mode .online-object.selected .online-object-delete {
  display: flex;
}

.online-object-grip {
  position: absolute;
  top: -22px;
  left: -1px;
  width: 22px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: var(--online-blue, #2f6fed);
  color: white;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  cursor: grab;
  pointer-events: auto;
}

.online-object-delete {
  position: absolute;
  top: -22px;
  right: -1px;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: #d55b67;
  color: white;
  border: none;
  border-radius: 6px 6px 0 0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.online-object-resize {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  background: var(--online-blue, #2f6fed);
  border: 2px solid white;
  border-radius: 50%;
  cursor: nwse-resize;
  pointer-events: auto;
}

.online-format-toolbar {
  position: fixed;
  z-index: 70;
  transform: translate(-50%, -100%) translateY(-8px);
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgba(20, 35, 59, 0.95);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20, 35, 59, 0.25);
}

.online-format-toolbar[hidden] {
  display: none;
}

.online-format-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: white;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.online-format-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.online-format-italic {
  font-style: italic;
}

.online-format-underline {
  text-decoration: underline;
}

.online-format-accent {
  color: #3e8fff;
  font-style: normal;
}

.online-format-size {
  font-size: 10px;
  font-weight: 700;
}

/* reset.css sets `font: inherit` on every tag (including b/i/u), which erases
   their default weight/style/decoration — restore it for the tags our own
   sanitizer emits (bold/italic/underline saved from the format toolbar). */
[data-online-editable] b,
.online-object-text b {
  font-weight: 700;
}

[data-online-editable] i,
.online-object-text i {
  font-style: italic;
}

[data-online-editable] u,
.online-object-text u {
  text-decoration: underline;
}

html.online-shell-active .reveal-viewport {
  height: calc(100vh - 56px) !important;
  margin-left: 260px;
  width: calc(100vw - 260px) !important;
  transition: margin-left 0.18s ease, width 0.18s ease;
}

html.online-shell-active.online-rail-collapsed .reveal-viewport {
  margin-left: 0;
  width: 100vw !important;
}

html.online-shell-active .reveal .controls,
html.online-shell-active .reveal .progress {
  z-index: 30;
}

html.online-edit-mode [data-online-editable="true"] {
  outline: 1px dashed rgba(47, 111, 237, 0.45);
  outline-offset: 2px;
  cursor: text;
}

html.online-edit-mode [data-online-editable="true"]:focus {
  outline: 2px solid rgba(47, 111, 237, 0.75);
}

/* An empty field (a blank new/duplicated slide's kicker, title, body) has no
   visible content and can collapse to a sliver too small to find or click —
   give it a real hit target and a placeholder in edit mode only. */
html.online-edit-mode [data-online-editable="true"]:empty {
  display: inline-block;
  min-width: 8em;
  min-height: 1.3em;
}

html.online-edit-mode [data-online-editable="true"]:empty::before {
  content: "Click to add text";
  opacity: 0.4;
  font-size: 0.55em;
  pointer-events: none;
}

.online-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(20, 35, 59, 0.92);
  color: white;
  font-size: 12px;
  font-weight: 600;
  transition: 0.2s ease;
}

.online-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 960px) {
  .online-body {
    grid-template-columns: 1fr;
  }

  .online-rail {
    display: none;
  }

  html.online-shell-active .reveal-viewport {
    margin-left: 0;
    width: 100vw !important;
  }
}