/* Deck — the one small stylesheet on top of 00.css.
 *
 * Every colour here is a 00.css semantic token (--ink, --line, --surface, --accent …), so the page
 * wears the window's theme in light and dark and never picks a colour of its own. Nothing is fetched:
 * no font, no image, no CDN — the page has no network.
 */

/* ── header ───────────── */

.deck-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s2);
}
.deck-head .toolbar { flex: 0 0 auto; }
#deck-path { font-size: 12px; }
#deck-picker { max-width: 15rem; }

/* ── the outline ───────────── */

/* An <ol> that is a .list: kill the numbers, we draw our own. */
#slides { list-style: none; }

.slide {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s2);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
}
.slide.selected { border-color: var(--accent); background: var(--surface-2); }
.slide.dragging { opacity: 0.7; border-style: dashed; }
.slide:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.slide-main { flex: 1 1 220px; min-width: 0; }

.slide-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.slide-num {
  flex: none;
  min-width: 2ch;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}
.slide-title { flex: 1 1 140px; min-width: 0; font-weight: 600; }

/* The layout name, said in words as well as by position. */
.slide-layout {
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.slide-bullets {
  margin: var(--s2) 0 0;
  padding-left: 1.1rem;
  font-size: 13px;
}
.slide-bullets li { overflow-wrap: anywhere; }
.slide-notes {
  margin: var(--s1) 0 0;
  font-size: 12px;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}
.slide-image {
  margin: var(--s1) 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
}

.slide-thumb {
  flex: none;
  width: 96px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.slide-moves { display: flex; flex: none; gap: var(--s1); }

/* ── drop target ───────────── */

.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 72px;
  padding: var(--s3);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  font-size: 13px;
}
.drop.over { border-color: var(--accent); background: var(--surface-2); }
.drop.disabled { opacity: 0.55; }
.drop-title { font-weight: 600; }

/* ── present mode ───────────── */

/* Full pane: the app's own window, taken over. Escape and Close both leave. */
.stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.stage-bar {
  flex: none;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
}
#stage-counter { font-variant-numeric: tabular-nums; font-size: 13px; }
/* The hint is a nicety on a Mac and noise on a 360 px phone. */
@media (max-width: 620px) { #stage-hint { display: none; } }

.stage-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* Speaker's rail: the outline, still there, still showing which slide is up — but only where there
   is room for it. Below 900 px (the phone, a narrow pane) present mode is the slide and nothing
   else. */
.stage-rail {
  display: none;
  flex: 0 0 240px;
  margin: 0;
  padding: var(--s2);
  overflow: auto;
  list-style: none;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
@media (min-width: 900px) { .stage-rail { display: block; } }

.stage-rail li {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  min-height: var(--tap);
  padding: var(--s1) var(--s2);
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.stage-rail li.current { background: var(--surface-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.stage-rail li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stage-rail .slide-num { min-width: 2ch; }

.stage-slide {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  padding: var(--s5) var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.stage-title {
  margin: 0;
  font-size: clamp(24px, 5vw, 44px);
  font-weight: 650;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.stage-bullets {
  margin: 0;
  padding-left: 1.2em;
  font-size: clamp(15px, 2.4vw, 22px);
  line-height: 1.5;
}
.stage-bullets li { margin-bottom: var(--s2); overflow-wrap: anywhere; }
.stage-image {
  max-height: 46vh;
  object-fit: contain;
  align-self: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stage-notes {
  margin: auto 0 0;
  padding-top: var(--s2);
  border-top: 1px dashed var(--line);
  overflow-wrap: anywhere;
}