/* present.css -- Present mode bar (round 4 P3; js/present.js). Colors from tokens only.
   The bar is fixed above the footer and is a sibling of #shell (inserted right after it), so the dock,
   the Ask composer and a phone card's action row step above it through the sibling selectors below.
   --present-h is set by present.js from the bar's measured height (56 px desktop, taller when the
   sentence wraps on a phone); every reservation below reads it. */

.present-bar {
  position: fixed; left: 0; right: 0; bottom: var(--footer-h); z-index: 29;
  display: flex; align-items: center; gap: var(--s3);
  min-height: 56px; padding: 8px var(--gutter);
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  color: var(--text);
  animation: present-in var(--t-panel, 200ms) var(--ease) 1;
}
@keyframes present-in { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

.present-head { flex: none; display: flex; align-items: baseline; gap: 10px; max-width: 42%; }
.present-count {
  font-family: var(--font-mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums;
  color: var(--text-secondary); white-space: nowrap;
}
.present-title {
  font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.present-title:hover { text-decoration: underline; }

.present-say {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary);
}
.present-say::before { content: '"'; }
.present-say::after { content: '"'; }

.present-btns { flex: none; display: flex; align-items: center; gap: var(--s1); }
.present-chev { display: inline-flex; }
.present-chev-back { transform: rotate(180deg); }
.present-bar .btn[disabled], .present-bar .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.present-kbd { margin-left: 2px; }

/* the frame reserves the bar's height: the work area stops above it, so nothing (the split pane, the
   Ask composer, a sticky card row) is hidden under the bar. */
.shell.is-presenting .work { margin-bottom: var(--present-h, 56px); }
.shell.is-presenting ~ .dock { bottom: calc(var(--footer-h) + var(--present-h, 56px) + 12px); }
.shell.is-presenting[data-page="ask"] ~ .dock { bottom: calc(var(--footer-h) + var(--present-h, 56px) + 84px); }

@media (max-width: 1100px) {
  .present-kbd { display: none; }
  .present-head { max-width: 50%; }
}

/* phone: two rows -- chapter and title, then the sentence; Prev / Next become icon buttons.
   The shell scrolls with the document here, so the bar sits at the bottom of the viewport and the
   shell reserves its height instead. */
@media (max-width: 719px) {
  .present-bar {
    bottom: 0; flex-wrap: wrap; align-items: center; gap: 4px var(--s2);
    min-height: 72px; padding: 8px 16px;
    border-top: 1px solid var(--line);
  }
  .present-head { order: 1; max-width: none; flex: 1 1 auto; }
  .present-btns { order: 2; margin-left: auto; }
  .present-say { order: 3; flex: 1 1 100%; }
  .present-title { white-space: normal; }
  .present-btxt { display: none; }
  .present-bar .btn { width: 36px; padding: 0; justify-content: center; }

  .shell.is-presenting { padding-bottom: var(--present-h, 72px); }
  .shell.is-presenting .work { margin-bottom: 0; }
  .shell.is-presenting ~ .dock,
  .shell.is-presenting[data-page="ask"] ~ .dock { bottom: calc(var(--present-h, 72px) + 12px); }
  /* the Ask composer and a focused card's action row sit on top of the bar, not under it */
  .shell.is-presenting .ask-dock { bottom: calc(var(--present-h, 72px)); }
  .shell.is-presenting .pcard[data-state="proposed"]:not(.collapsing):not(.is-editing):focus-within .pactions:not(.pactions-done) {
    bottom: calc(var(--present-h, 72px));
  }
  .shell.is-presenting.has-dock .pcard[data-state="proposed"]:not(.collapsing):not(.is-editing):focus-within .pactions:not(.pactions-done) {
    bottom: calc(var(--present-h, 72px) + 60px);
  }
  /* while a card value is edited the fixed action row owns the bottom of the visual viewport */
  .shell.is-editing ~ .present-bar { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .present-bar { animation: none; }
}