/* Extend the existing navy toolbar without covering the slide canvas. */
.deck-shell { container: preschool-deck / inline-size; grid-template-rows: auto minmax(0, 1fr) 42px; }
.topbar { min-height: 56px; gap: 14px; }
.brand, .top-actions { flex-shrink: 0; }
.brand { white-space: nowrap; }
.lecture-countdown { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; color: #edf4ff; }
.countdown-label { min-width: 3em; color: #d5deed; font-size: 12px; }
.countdown-clock { min-width: 5ch; font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.lecture-countdown button { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.04); color: #edf4ff; border-radius: 7px; padding: 7px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.lecture-countdown button:hover:not(:disabled), .lecture-countdown button:focus-visible { background: rgba(255,255,255,.13); outline: 2px solid #84b7ff; outline-offset: 2px; }
.lecture-countdown button:active:not(:disabled) { background: rgba(255,255,255,.22); }
.lecture-countdown button:disabled { opacity: .45; cursor: default; }
.lecture-countdown[data-state="warning"] .countdown-clock,
.lecture-countdown[data-state="finished"] .countdown-clock,
.lecture-countdown[data-state="finished"] .countdown-label { color: #f4d7a5; }
.countdown-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@container preschool-deck (max-width: 1120px) {
  .brand small, .brand i { display: none; }
}
@container preschool-deck (max-width: 720px) {
  .topbar { flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding: 8px 12px; }
  .top-actions { margin-left: auto; gap: 6px; }
  .top-actions button:nth-child(-n+2) { display: none; }
  .lecture-countdown { order: 3; width: 100%; justify-content: center; margin: 0; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.16); }
  .lecture-countdown button { min-height: 36px; padding: 8px 14px; }
}
@media (max-aspect-ratio: 4/3) {
  .deck-shell { grid-template-rows: auto minmax(0, 1fr) 44px; }
}
@media (pointer: coarse) {
  .lecture-countdown button { min-height: 44px; }
}