/* pd_selected_card_html - the selected/draft container panel.
 *
 * This form had no <style> block. Every rule here replaces one of the two
 * STATIC inline style= attributes the template carried, which
 * the new format bans outright.
 *
 * SCOPING. `.pdLayout-selected-card` IS the form root and
 * `pack-deliveries-selected-root` sits beside it on the same element. Both
 * subjects below are descendants, so each gains `:where(.pack-deliveries-selected-root) `,
 * which adds zero specificity and cannot change which declaration wins.
 *
 * The three HIDE states this panel toggles (.pdLayout-selected-content,
 * .pdLayout-sel-cd-row, .pdLayout-sel-reprint-open-btn) use the section's
 * shared `.pdLayout-is-hidden`, declared once in pack_deliveries.css, because
 * four of the section's forms hide blocks the same way. That bare declaration
 * is (0,1,0) and it is enough for .pdLayout-selected-content, which no other
 * rule gives a `display`. Two of the three DO meet a competing `display`, and
 * each needs the override at the foot of this file - see the note there.
 *
 * Everything else this panel wears - .pdLayout-card-row, .pdLayout-bag-row and
 * its flash - lives in pack_deliveries.css under `.pack-deliveries-root`, and
 * the .px-btn* buttons are the dependency's. A leaf canvas has no
 * `.pack-deliveries-root` ancestor, so this form is drag-only in the designer:
 * the guide's expected outcome for a section child, accepted and recorded.
 *
 * No designer gate: every hide is the `.pdLayout-is-hidden` state class. The
 * designer canvas loads the head-linked assets, so the canvas shows what first
 * paint shows.
 */

:where(.pack-deliveries-selected-root) .pdLayout-sel-bags {
  margin-top: 8px;
}

:where(.pack-deliveries-selected-root) .pdLayout-sel-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* HIDE-STATE OVERRIDES.
   `.pdLayout-is-hidden` is declared bare in pack_deliveries.css at (0,1,0). The
   inline `style="display:none;"` it replaces beat everything; the class does
   not, and two of this panel's three hide targets carry a competing `display`
   from a sheet that loads AFTER every head <link>, so order cannot save them
   either. Each override below outranks its competitor on specificity, so the
   result is order-independent (the guide's "give the new one a second class"). */

/* The CD-bags row. The shell declares
   `.pack-deliveries-root .pdLayout-card-row { display: flex; ... }` at (0,2,0)
   in its own inline <style>, and the selected-card slot sits inside
   `.pack-deliveries-root`, so it matches this row. Doubling the hide class alone
   would only tie at (0,2,0) and then lose on document order. Three classes,
   (0,3,0), wins outright - and keeps winning when that shell rule moves into
   pack_deliveries.css at the shell's own conversion. */
:where(.pack-deliveries-selected-root) .pdLayout-card-row.pdLayout-sel-cd-row.pdLayout-is-hidden {
  display: none;
}

/* The Reprint OPEN button. The dependency's PX_CHROME_CSS declares
   `.px-btn { ... display: inline-flex; ... }` at (0,1,0) and injects it with
   document.head.appendChild at startup, which lands after every head <link>, so
   the bare hide class ties and loses. (0,2,0) beats it on specificity. */
:where(.pack-deliveries-selected-root) .px-btn.pdLayout-is-hidden {
  display: none;
}