/* Deck frame: the Aloud head bar and progress bar drawn by frame.js.
   Load after deck-styles.css and before the deck's own deck.css.
   Sized in screen pixels through --px, so they stay thin on any projector.
   The section padding replaces the 72px slide-head and slide-foot rows, so a
   framed deck carries neither. */
deck-stage > section { padding: calc(50 * var(--px, 1px) + 72px) 100px calc(72px + 3 * var(--px, 1px)); }
.frame-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  height: calc(50 * var(--px, 1px));
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: calc(28 * var(--px, 1px));
  border-bottom: var(--px, 1px) solid rgb(var(--cream-ch) / 0.22);
  font-family: var(--font-sans);
  font-weight: var(--weight-normal);
  font-size: calc(11 * var(--px, 1px));
  font-variant-numeric: tabular-nums;
  color: rgb(var(--cream-ch) / 0.55);
  white-space: pre;
}
.frame-credit { display: flex; align-items: center; gap: 16px; text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.frame-count { word-spacing: calc(2 * var(--tracking-widest)); }
.frame-logo { height: 24px; width: auto; opacity: 0.7; }
.frame-progress { position: absolute; left: 0; bottom: 0; z-index: 5; width: 100%; height: calc(3 * var(--px, 1px)); fill: var(--green); }
section[data-theme="light"] .frame-progress { fill: var(--cream); }
section[data-theme="accent"] .frame-head { opacity: 0.55; color: inherit; }
section[data-theme="accent"] .frame-progress { fill: currentColor; }
/* Print and PDF lay slides out at design size, one frame pixel per pixel */
@media print { deck-stage { --px: 1px !important; } }

/* Fluid frame: slides are 1080 high and as wide as the screen, 1280 at the
   narrowest, 1920 on 16:9. The section is the query container, so a deck's
   narrow-frame rules follow the frame, not the browser window. */
deck-stage > section { container-type: inline-size; }