/* Deck workshop composition, opted in by workshop-system. Game logic and
   navigation remain in the existing workshop state machine. */
.workshop-system { color: var(--pm-ui-text); }
.workshop-system .workshop-header { box-sizing: border-box; flex: 0 0 auto; padding: 0 52px 8px 0; border: 0; }
.workshop-system .workshop-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.workshop-system .workshop-header h2 { margin: 0; padding: 0; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.workshop-system .workshop-deck-count { padding: 5px 10px; border-radius: 999px; background: var(--pm-ui-surface-soft); color: var(--pm-ui-text); font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.workshop-system .workshop-deck-count small { font-size: 13px; color: var(--pm-ui-muted); }
.workshop-system .workshop-hero-picker { margin: 4px 0 0; padding: 0; border: 0; }
.workshop-system .workshop-hero-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; font-size: 14px; color: var(--pm-ui-accent); cursor: pointer; }
.workshop-system .workshop-hero-picker > summary span { font-size: 13px; color: var(--pm-ui-muted); }
.workshop-system .workshop-heroes { margin: 0 0 12px; max-height: 156px; overflow-y: auto; overscroll-behavior: contain; }
.workshop-system .workshop-heroes button { min-height: 48px; font-size: 14px; border-radius: 999px; }
.workshop-system .workshop-section-heading { margin: 4px 0 12px; gap: 8px; align-items: center; }
.workshop-system .workshop-section-heading > span { font-size: 15px; line-height: 1.4; color: var(--pm-ui-text); letter-spacing: 0; }
.workshop-system .workshop-link { border: 0; border-radius: 999px; background: transparent; box-shadow: none; min-height: 44px; padding: 8px; font-size: 13px; line-height: 1.3; color: var(--pm-ui-accent); }
.workshop-system .workshop-help { font-size: 14px; line-height: 1.5; color: var(--pm-ui-muted); }
.workshop-system .workshop-incoming-note { margin: 0 0 12px; font-size: 15px; line-height: 1.4; color: var(--pm-ui-muted); }
.workshop-system .workshop-incoming-note strong { color: var(--pm-ui-text); }
.workshop-system .workshop-deck-details { margin-top: 16px; }
.workshop-system .workshop-deck-details > summary { font-size: 15px; }
.workshop-system .workshop-deck-details .workshop-totals { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 0; border-radius: 0; background: transparent; padding: 8px 0; margin: 0; font-size: 14px; }
.workshop-system .workshop-identity { border: 0; border-radius: 0; background: transparent; padding: 8px 0; margin: 0; }
.workshop-system .workshop-identity > span { font-size: 13px; }
.workshop-system .workshop-identity-counts > span { border: 0; background: transparent; padding: 4px 8px 4px 0; font-size: 14px; }
.workshop-system .workshop-identity > small { font-size: 13px; line-height: 1.45; }
.workshop-system .workshop-grid .workshop-tile { border-color: transparent; background: transparent; box-shadow: none; border-radius: 10px; }
.workshop-system .workshop-grid .workshop-tile.selected { background: var(--pm-ui-surface-raised); outline: 2px solid var(--pm-ui-accent); outline-offset: -2px; }
.workshop-system .workshop-tile > strong { font-size: 13px; line-height: 1.3; min-height: 34px; }
.workshop-system .workshop-tile > small { font-size: 12px; line-height: 1.3; }
.workshop-system .workshop-tile > .workshop-card-tags { display: none; }
.workshop-system .workshop-footer { border: 0; padding-top: 12px; background: transparent; gap: 12px; }
.workshop-system .workshop-footer > span { font-size: 13px; line-height: 1.4; }
.workshop-system .workshop-primary { min-height: 48px; padding: 10px 16px; font-size: 15px; color: var(--pm-ui-on-accent); background: var(--pm-ui-accent); border-radius: 999px; }
.workshop-system .workshop-flow { border: 0; background: transparent; padding: 0; margin: 0 0 8px; }
.workshop-system .workshop-flow li strong { font-size: 12px; }
.workshop-system .workshop-search label { font-size: 14px; }
.workshop-system .workshop-search input { min-height: 48px; font-size: 16px; }
.workshop-system .workshop-filters button { min-height: 44px; font-size: 13px; }
.workshop-system .workshop-results { font-size: 13px; }
.workshop-system .workshop-preview-state, .workshop-system .workshop-fit { font-size: 14px; line-height: 1.5; }
.workshop-system .workshop-swap-balance { border: 0; border-radius: 0; background: transparent; padding: 8px 0; }
.workshop-system .workshop-swap-balance > div { gap: 12px; }
.workshop-system .workshop-swap-balance > div > span { border: 0; background: transparent; }
.workshop-system .workshop-lock-note { font-size: 14px; line-height: 1.5; }
@media (max-width: 360px) {
  .workshop-system .workshop-title-row { flex-wrap: wrap; gap: 4px 12px; }
  .workshop-system .workshop-header h2 { font-size: 20px; }
  .workshop-system .workshop-footer { flex-wrap: wrap; }
  .workshop-system .workshop-footer > span { width: 100%; }
  .workshop-system .workshop-footer > div { width: 100%; justify-content: flex-end; }
}
@media (max-height: 480px) and (min-width: 600px) {
  .workshop-system .workshop-header { display: flex; align-items: center; gap: 16px; }
  .workshop-system .workshop-title-row { flex: 1; padding-right: 0; }
  .workshop-system .workshop-header h2 { font-size: 20px; }
  .workshop-system .workshop-hero-picker { flex: 0 0 180px; }
  .workshop-system .workshop-hero-picker[open] { position: absolute; z-index: 5; top: 48px; right: 16px; width: min(340px, 70%); padding: 8px 12px; margin-right: 0; background: var(--pm-ui-surface); box-shadow: 0 8px 24px var(--pm-ui-shadow); }
  .workshop-system .workshop-section-heading { margin-bottom: 4px; }
}

/* Cards carry the visual grouping; comparison copy sits on the same table. */
.workshop-system .workshop-grid .workshop-portrait { border: 0; box-shadow: 0 3px 12px var(--pm-ui-shadow); border-radius: 10px; }
.workshop-system .workshop-compare-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.workshop-system .workshop-compare-card > small:first-child { background: transparent; color: var(--pm-ui-muted); padding-inline: 0; }
.workshop-system .workshop-compare-card > .workshop-portrait { border-radius: 12px; box-shadow: 0 6px 18px var(--pm-ui-shadow); }
.workshop-system .workshop-filters button { border-radius: 999px; border: 0; background: var(--pm-ui-surface-soft); color: var(--pm-ui-muted); }
.workshop-system .workshop-filters button[aria-pressed=true] { background: var(--pm-ui-accent); color: var(--pm-ui-on-accent); }
.workshop-system .workshop-footer > div { margin-left: auto; }
.workshop-system .workshop-footer .workshop-primary { min-width: 128px; }