/* ====================================================================
   the deck conversion card (slice H, Tor 2026-09-02)
   ====================================================================
   Tor: "have some kind of status/loading message so that the user
   doesn't sit there wondering why the upload shows 100% but it's not
   doing anything. Be verbose, maybe a loading animation too."

   Its own file on purpose. panels.css and stage.css are both being
   changed by other slices this week, and a new block in either is a
   merge conflict waiting to happen. Nothing here restyles an existing
   element: every rule below names a class this slice created.

   The one animation in the studio, and the rule it does not break.
   shell.css says the transfer bar never animates on its own, because a
   bar that moves without measured bytes behind it is a lie about work.
   That rule is kept: the bar here is drawn only over a real page count
   and its width is the real fraction.

   The dots are not a bar and claim no fraction. They say "the studio is
   working". A person could not tell that before this card existed. Tor
   asked for the animation by name.

   Accessibility floor (docs/CODEBASE.html#style-accessibility): 15px
   is the smallest text here, the card's own words are 19px, and
   nothing truncates.
   ==================================================================== */
.deck-convert-card{
  /* The .deck-empty shape, deliberately (panels.css S4). That overlay was
     hardened through open item 14 for exactly this cell: a letterbox that
     can shrink to a sliver at 200 percent text. `safe center` keeps the
     centring wherever there is room. Where there is none, it gives up
     centring rather than hang the content out of the stage. overflow-y
     lets the person scroll to the words then. A translate-centred box
     does neither. */
  position:absolute;
  inset:0;
  /* Above the empty-stage art it replaces. It never covers a slide:
     ui/deck-convert.js hides the card the moment page one is on the
     stage (Tor, 2026-09-04). */
  z-index:3;
  padding:14px;
  display:grid;
  place-content:safe center;
  justify-items:center;
  gap:10px;
  overflow-y:auto;
  text-align:center;
  background:rgba(5,8,15,.78);
}
.deck-convert-title{
  margin:0;
  font-size:22px;
  font-weight:700;
  color:var(--text);
}
/* The verbose sentence. It wraps and it is never clipped: the count it
   carries ("12 of 40 done") is the whole point of the card. */
.deck-convert-line{
  margin:0;
  max-width:44ch;
  font-size:19px;
  line-height:1.4;
  color:var(--text);
}
.deck-convert-next{
  margin:0;
  max-width:44ch;
  font-size:15px;
  line-height:1.4;
  color:var(--dim);
}
.deck-convert-card.is-failed .deck-convert-title{color:var(--red)}

/* The determinate half. Same vocabulary as the transfer bar one rail
   over (shell.css .upload-progress), so the two read as one studio. */
.deck-convert-bar{
  width:min(420px,100%);
  height:16px;
  border:2px solid var(--steel);
  border-radius:8px;
  background:var(--void);
  overflow:hidden;
}
.deck-convert-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--azure);
}

/* The indeterminate half: three dots that light in turn while the page
   count is still unknown. */
.deck-convert-band{display:flex;gap:10px;height:14px;align-items:center}
.deck-convert-band span{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--steel);
  animation:deck-convert-pulse 1.2s ease-in-out infinite;
}
.deck-convert-band span:nth-child(2){animation-delay:.2s}
.deck-convert-band span:nth-child(3){animation-delay:.4s}
@keyframes deck-convert-pulse{
  0%,100%{background:var(--steel)}
  50%{background:var(--azure)}
}
/* A person who asked for no motion gets none. The dots stay, lit, so
   the card still shows the same three shapes and nothing moves. */
@media (prefers-reduced-motion:reduce){
  .deck-convert-band span{animation:none;background:var(--azure)}
}

/* The rail row's sub-line, which exists only while a conversion runs
   (ui/deck-convert.js creates and removes the element). Rail v3 deleted
   the permanent sub-labels and this does not bring one back: an idle
   rail still has none, which tests/rail-v3.mjs counts.
   15px is the floor for this reader, and it wraps rather than
   truncating, the row grows for the minute it takes. */
.deck-convert-sub{
  display:block;
  font-size:15px;
  line-height:1.3;
  color:var(--dim);
  white-space:normal;
  overflow-wrap:anywhere;
}
/* The icon rails have no room for words at all; the sentence is in the
   row's accessible name and on the card. */
.rail-collapsed .deck-convert-sub{display:none}

/* ====================================================================
   the progress strip, under a stage that is in use (Tor, 2026-09-17)
   ====================================================================
   Tor: "the presentation should never show until it's fully uploaded
   and all slides are ready to go." A deck already on the stage is in
   use, and it stays there until the new one is complete. So the new
   deck's progress cannot be the card: the card fills the stage and
   would cover a slide the person is presenting from.

   Tor's rule of 2026-09-02 settles where it goes instead: nothing over
   the camera or the slides. The page counter was moved UNDER the
   picture for that reason (.slide-strip in stage.css). This row is its
   neighbour, in normal flow between the surface and that strip, so it
   covers nothing and enters no recording. The recording canvas is
   drawn from the stage image alone (features/deck.js drawCanvas), so
   neither shape was ever in a take.

   15px is the accessibility floor and the words wrap rather than
   truncate. The bar repeats the card's vocabulary, so the two shapes
   of one surface read as one thing.
   ==================================================================== */
.deck-progress-strip{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 4px;
}
.deck-progress-strip-line{
  min-width:0;
  flex:1 1 auto;
  font-size:15px;
  line-height:1.3;
  color:var(--text);
  white-space:normal;
  overflow-wrap:anywhere;
}
.deck-progress-strip.is-failed .deck-progress-strip-line{color:var(--red)}
/* The bar keeps its own width here rather than the card's 420px, so a
   narrow stage gives the words the room instead. */
.deck-progress-strip-bar{
  flex:0 0 auto;
  width:min(180px,38%);
  height:12px;
}
/* Below the point where the stage is only a few hundred pixels wide the
   bar is the first thing to go: the sentence carries the same number in
   words, and the words are what this reader needs. */
@media (max-width:560px){
  .deck-progress-strip{flex-wrap:wrap}
  .deck-progress-strip-bar{width:100%}
}

/* ====================================================================
   the three shapes of the replacement progress (Tor, 2026-09-17)
   ====================================================================
   Tor chose the shape off docs/design/deck-replace-options-2026-09-17.html:
   "We're going to go with option B for the slides". So B ships, and
   FEATURE_DECK_PROGRESS_SHAPE carries it. A and C stay behind the same
   switch, because a feature is hidden by a flag and never deleted.

   An older ruling of 2026-09-02 refused a band over the slide. Tor's
   choice of 2026-09-17 replaces it for this surface.

   The rules above this block style the shape itself. These three place
   it. One node in all three.
   ==================================================================== */

/* A: a row of its own, between the stage and the counter. It covers
      nothing and it costs the picture its own height: 32 px at 1440 and
      73 px at 390, measured. */

/* B: a band inside the stage's lower edge. SHIPPED. It costs the
      picture no height and it lies over the slide's lower band. The
      translucency is what keeps the slide under it readable, and the
      band never reaches a recording: the slides track is a canvas that
      features/deck.js draws from the slide raster alone. */
.deck-progress-b{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  padding:8px 12px;
  background:rgba(5,8,15,.82);
  border-top:2px solid var(--steel);
}

/* C: inside the counter row the stage already has. No height at all and
      it covers nothing, but it shares 142px of copy with the counter,
      so it carries the short words. margin-right:auto keeps the counter
      where the eye already looks for it. */
.deck-progress-c{
  margin-right:auto;
  padding:0;
  gap:8px;
  min-width:0;
}
.deck-progress-c .deck-progress-strip-line{
  font-size:15px;
  white-space:normal;
}
.deck-progress-c .deck-progress-strip-bar{width:min(120px,30vw)}