/**
 * PRISM Custom Styles
 * Only for things Web Awesome doesn't handle
 */

/* ============================================================================
   Visually Hidden
   ============================================================================ */

/* Structural headings that give the page a navigable outline without changing
   the visual design. Not display:none — that would hide them from assistive
   tech too, which is the opposite of the point. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Sync Status Indicator
   ============================================================================ */

.sync-status-indicator {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-neutral-text-subtle);
  white-space: nowrap;
}

.sync-status-indicator.sync-status-ok {
  color: var(--wa-color-success-text);
}

.sync-status-indicator.sync-status-failed {
  color: var(--wa-color-warning-text);
  font-weight: 600;
}

/* ============================================================================
   Mobile Navigation Toggle
   ============================================================================ */

wa-page[view='desktop'] [data-toggle-nav] {
  display: none;
}

/* ============================================================================
   Color Swatches (for deck color selection)
   ============================================================================ */

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--wa-border-radius-s);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.color-swatch:hover {
  transform: scale(1.1);
}

.color-swatch.selected {
  border-color: var(--wa-color-brand-fill);
  box-shadow: 0 0 0 2px var(--wa-color-brand-fill-subtle);
}

/* ============================================================================
   Deck Color Indicators
   ============================================================================ */

.deck-color-indicator {
  width: 24px;
  height: 24px;
  border-radius: var(--wa-border-radius-s);
  border: 1px solid var(--wa-color-neutral-stroke);
  flex-shrink: 0;
}

.deck-color-indicator.small {
  width: 18px;
  height: 18px;
}

/* ============================================================================
   Results Table
   ============================================================================ */

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wa-font-size-m);
}

.results-table th,
.results-table td {
  padding: var(--wa-space-s) var(--wa-space-m);
  text-align: left;
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.results-table th {
  background: var(--wa-color-surface-2);
  font-weight: 600;
  white-space: nowrap;
}

.results-table tbody tr:hover {
  background: var(--wa-color-surface-2);
}

/* Zebra banding. The old rule was `tr:nth-child(even)` filled with
   rgba(255,255,255,0.015) — a 1.5%-opacity white wash over a white surface,
   which rendered nothing in light mode and almost nothing in dark. It is now
   driven by an `alt-row` class set per card in results.js, because the
   stripe-detail rows interleave and only some cards emit one, so :nth-child()
   parity no longer tracks cards at all.

   Kept well below the hover fill so hover still reads as the stronger state.
   The band colour is a variable rather than two competing rules, so the class
   selector stays at one level: row hover and the stale-mark tint then win on
   specificity and source order without needing overrides. */
:root {
  --prism-zebra: color-mix(in srgb, var(--wa-color-neutral-90) 45%, transparent);
}

.wa-dark {
  --prism-zebra: color-mix(in srgb, var(--wa-color-neutral-30) 30%, transparent);
}

.results-table .alt-row {
  background: var(--prism-zebra);
}

/* No Pool row tint. Pool is already legible three ways: the Stripes column
   shows one mark per deck, the default sort puts many-mark cards on top, and
   the Pool filter isolates them. A fourth encoding on the row background
   added nothing, and it used the warning ramp — amber reading as caution on
   the rows that are actually saving the user money. The stale-mark tint below
   stays: that one marks real outstanding work. */

.results-table .mark-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--wa-color-brand-fill);
}

/* The most-repeated target in a marking session. A <label> wrapper carries the
   hit area natively (no JS, no ::before on a replaced element) while the box
   itself stays 18px, per DESIGN.md §8: pad the target, don't shrink the block.
   Sized by input method rather than viewport — a touchscreen laptop needs the
   big target too, and a mouse-driven phone-width window does not. */
.mark-checkbox-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

@media (pointer: coarse) {
  .mark-checkbox-hit {
    min-width: 44px;
    min-height: 44px;
    margin: calc(var(--wa-space-xs) * -1) 0;
  }
}

/* A done row recedes without becoming unreadable.

   This replaced `opacity: 0.45`, which computed body text (#34353c) to roughly
   #a3a3a7 on white — about 2.6:1, failing WCAG AA in what becomes the majority
   state of the table by the end of a marking session. It also dimmed the stripe
   swatches, so the colour you had just painted got harder to compare against the
   pen in your hand, which is exactly the check you want before sleeving a card
   back into a deck.

   So: the name goes quiet and struck through, while the swatches and the
   checkbox stay at full strength and the row stays auditable. */
.results-table .marked-row .card-name-cell,
.results-table .marked-row .batch-subrow-label,
.results-table .marked-row .copies-cell {
  color: var(--wa-color-neutral-text-subtle);
}

/* DESIGN.md §"Results table" specifies the card name struck through. The old
   rule targeted td:first-child, which is the checkbox cell. */
.results-table .marked-row .card-name-cell,
.results-table .marked-row .batch-subrow-label {
  text-decoration: line-through;
}

.results-table .basic-land {
  font-style: italic;
}

.results-table .basic-tag {
  color: var(--wa-color-neutral-text-subtle);
  font-size: var(--wa-font-size-s);
}

/* Marking-batch rows (#149): expandable multi-batch cards */
.results-table .batch-toggle {
  background: none;
  border: none;
  padding: 0 var(--wa-space-2xs) 0 0;
  cursor: pointer;
  color: var(--wa-color-neutral-text-subtle);
  vertical-align: middle;
}

.results-table .batch-subrow td {
  background: var(--wa-color-neutral-fill-quiet);
}

.results-table .batch-subrow .batch-subrow-label {
  padding-left: var(--wa-space-xl);
  color: var(--wa-color-neutral-text-subtle);
  font-size: var(--wa-font-size-s);
}

/* Derived roll-up checkbox is informational, not a control */
.results-table .batch-parent-check {
  pointer-events: none;
}

.results-table .copies-cell {
  text-align: center;
}

/* ============================================================================
   Stripe Indicators (in results table)
   ============================================================================ */

.stripe-indicators {
  display: flex;
  gap: var(--wa-space-2xs);
  flex-wrap: wrap;
}

.stripe-indicator {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: var(--wa-border-radius-s);
  border: 1px solid var(--wa-color-neutral-stroke);
}

/* Counting-aid slot number overlaid on an anchor stripe (every 5th slot/side) */
.stripe-pos-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  pointer-events: none;
}

/* On empty/unfilled anchor slots there is no colored fill — use neutral text */
.stripe-pos-num.stripe-pos-num-muted {
  color: var(--wa-color-neutral-text);
  text-shadow: none;
}

.stripe-empty {
  background-color: transparent;
  border: 1px dashed var(--wa-color-surface-border);
}

/* ============================================================================
   Stripe Position List Items
   ============================================================================ */

.position-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-s);
  padding: var(--wa-space-s) var(--wa-space-m);
  background: var(--wa-color-surface-2);
  border-radius: var(--wa-border-radius-m);
  border: 1px solid var(--wa-color-surface-border);
}

.position-item-info {
  flex: 1;
  min-width: 0;
}

.position-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.position-item-controls {
  flex-shrink: 0;
}

.position-select {
  width: 160px;
}

@media (max-width: 768px) {
  .position-item {
    flex-wrap: wrap;
  }
  .position-item-controls {
    width: 100%;
    justify-content: flex-end;
  }
  .position-select {
    flex: 1;
    min-width: 0;
    width: auto;
  }
}

/* ============================================================================
   Landing page: Duplicates You Free Up table (index.html #payoff)
   Same structural DNA as .results-table (collapsed borders, 1px rules, token
   spacing), scaled up for marketing: the resale column carries the heading
   serif at display size, because that number is the point of the section.
   ============================================================================ */

.impact-table {
  width: 100%;
  /* Capped well inside the 720px section container. At full width the row
     stretched to 720px and left ~285px of dead space between "5 decks" and
     "~$919", so the two halves of a single fact read as separate items. The
     same table is legible on a 390px phone precisely because that gap is small;
     this brings the desktop gap back to roughly the same absolute distance. */
  max-width: 30rem;
  margin-inline: auto;
  border-collapse: collapse;
}

/* Deliberately no `font-variant-numeric: tabular-nums` here. It is the obvious
   move for a column of figures, but halyard-micro's tnum feature also widens
   the space glyph: it stretched the pure-text header "Duplicates freed" by
   4.4px and left visible gaps in "5 decks" and "166 cards". The money column is
   right-aligned with values of differing length, so lining figures buy almost
   nothing here and cost legibility in every other cell. */

.impact-table caption {
  /* The visible lead paragraph already frames the table, so this is for
     screen readers only rather than a second on-screen summary. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.impact-table th,
.impact-table td {
  padding: var(--wa-space-m) var(--wa-space-s);
  text-align: left;
  /* `surface-border` is picked for a white page. This table sits on the sunken
     `surface-2` ground, where that token resolves to the same value as the
     ground itself in dark mode (both rgb(52,53,60)) — a 1.00 contrast ratio, so
     the rules were literally invisible, and only 1.12 in light. `neutral-stroke`
     is the token that stays one step off the surface in both themes. */
  border-bottom: 1px solid var(--wa-color-neutral-stroke);
}

.impact-table thead th {
  font-size: var(--wa-font-size-s);
  font-weight: 600;
  color: var(--wa-color-neutral-text-subtle);
  white-space: nowrap;
}

.impact-table tbody tr:last-child th,
.impact-table tbody tr:last-child td {
  border-bottom: none;
}

.impact-table .impact-collection {
  font-weight: 600;
  white-space: nowrap;
}

.impact-table .impact-value {
  font-family: var(--wa-font-family-heading);
  font-size: var(--wa-font-size-2xl);
  font-weight: var(--wa-font-weight-heading);
  line-height: 1.2;
  color: var(--wa-color-brand-text);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .impact-table th,
  .impact-table td {
    padding: var(--wa-space-s) var(--wa-space-2xs);
  }

  .impact-table .impact-value {
    font-size: var(--wa-font-size-xl);
  }
}

/* ============================================================================
   Dark Mode Overrides
   ============================================================================ */

.wa-dark .color-swatch {
  border-color: transparent;
}

.wa-dark .color-swatch.selected {
  border-color: var(--wa-color-brand-fill);
}

/* Theme-aware logo swap: -Invert (white facets) for dark, -Main (dark facets) for light */
.theme-logo-dark { display: none; }
.wa-dark .theme-logo-dark { display: inline-block; }
.wa-dark .theme-logo-light { display: none; }

/* Ensure white swatches stay visible against the surface in both themes */
.color-swatch[data-color="#FFFFFF" i],
.deck-color-indicator[style*="#FFFFFF" i],
.stripe-indicator[style*="#FFFFFF" i] {
  border-color: var(--wa-color-neutral-stroke);
}

/* ============================================================================
   Stripes Cell — tap to decode
   ============================================================================ */

/* One focusable control wrapping the whole strip: a keyboard user gets a single
   tab stop per row carrying every mark in its accessible name, and a touch user
   gets a way to read deck names that `title` never gave them. */
.stripe-cell-toggle {
  display: block;
  width: 100%;
  padding: var(--wa-space-2xs);
  margin: calc(var(--wa-space-2xs) * -1);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--wa-border-radius-s);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.stripe-cell-toggle:hover {
  background: var(--wa-color-surface-2);
}

.stripe-cell-toggle:focus-visible {
  outline: 2px solid var(--wa-color-brand-fill);
  outline-offset: 1px;
}

.stripe-cell-toggle[aria-expanded='true'] {
  border-color: var(--wa-color-surface-border);
  background: var(--wa-color-surface-2);
}

/* Full-width row under the card, so the decode reads at the left edge instead
   of inside the Stripes column, which sits past the right edge of a phone. */
.results-table .stripe-detail-row > td {
  background: var(--wa-color-surface-2);
  padding-top: var(--wa-space-xs);
  padding-bottom: var(--wa-space-xs);
}

.stripe-detail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-2xs) var(--wa-space-l);
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-neutral-text-subtle);
}

.stripe-detail li {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
}

.stripe-detail-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--wa-border-radius-s);
  border: 1px solid var(--wa-color-neutral-stroke);
}

.stripe-detail-swatch-dot {
  border-radius: 50%;
}

/* ============================================================================
   Loading Skeletons
   ============================================================================ */

/* Card-shaped placeholder approximating a rendered deck card */
.skeleton-deck-card {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
  padding: var(--wa-space-l);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-surface-default);
}

.skeleton-line-title {
  width: 40%;
  height: 1.5rem;
}

.skeleton-line {
  width: 90%;
  height: 1rem;
}

.skeleton-line-short {
  width: 60%;
  height: 1rem;
}

/* Matches the height of the outlined nav auth button it stands in for */
.nav-auth-skeleton {
  width: 100%;
  height: 2.5rem;
}

/* Second bar when a stored session exists — stands in for the small plain
   Log Out button below the Profile button */
.nav-auth-skeleton-secondary {
  width: 100%;
  height: 2.5rem;
}

.nav-auth-skeleton::part(indicator),
.skeleton-avatar::part(indicator) {
  border-radius: var(--wa-border-radius-m);
}

.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
}

/* ============================================================================
   Deck Cards
   ============================================================================ */

.deck-card {
  transition: box-shadow 0.15s ease;
}

.deck-card:hover {
  box-shadow: var(--wa-shadow-m);
}

/* Deck action buttons: inline cluster on desktop, kebab dropdown on mobile */
.deck-actions-kebab {
  display: none;
}

.deck-actions-kebab-menu {
  min-width: 12rem;
  padding: var(--wa-space-2xs);
}

.deck-actions-kebab-menu .kebab-item::part(base) {
  width: 100%;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .deck-actions-inline {
    display: none;
  }
  .deck-actions-kebab {
    display: inline-flex;
  }
}

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */

@media (max-width: 768px) {
  /* Tighten main content gutters on mobile (WA default padding is desktop-sized) */
  wa-page > main {
    padding-inline: var(--wa-space-s);
  }
}

@media (max-width: 600px) {
  .results-table th,
  .results-table td {
    padding: var(--wa-space-xs) var(--wa-space-s);
    font-size: var(--wa-font-size-s);
  }

  /* The stripe block is the thing being matched against a pen at the table, so
     it keeps its 18px size on narrow screens. DESIGN.md §8: pad the target,
     never shrink the visual block. */
}

/* Toast styles handled by <wa-toast> component */

/* ============================================================================
   Sortable Table Headers
   ============================================================================ */

.results-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.results-table th.sortable:hover {
  background: var(--wa-color-surface-3);
}

.results-table th .sort-icon {
  margin-left: var(--wa-space-2xs);
  opacity: 0.4;
  font-size: 0.85em;
}

.results-table th.sorted .sort-icon {
  opacity: 1;
}

/* ============================================================================
   Deck Filter Dropdown
   ============================================================================ */

/* Deck filter menu mirrors the deck-actions kebab menu styling */
.deck-filter-menu {
  min-width: 14rem;
  padding: var(--wa-space-2xs);
}

.deck-filter-menu wa-button::part(base) {
  width: 100%;
  justify-content: flex-start;
}

.deck-filter-menu wa-divider {
  margin: var(--wa-space-2xs) 0;
}

.deck-filter-menu .deck-color-indicator {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  margin-inline-end: var(--wa-space-2xs);
}

/* ============================================================================
   Removed Cards View
   ============================================================================ */

.results-table .removed-row {
  background: var(--wa-color-danger-surface-subtle);
}

.results-table .removed-row:hover {
  background: var(--wa-color-danger-surface);
}

/* "Clear All" is a <wa-button appearance="outlined" variant="danger">; the
   hand-rolled rules that lived here referenced five WA 2.x token names that no
   longer resolve in 3.11 (--wa-border-radius-medium, --wa-font-size-x-small,
   --wa-space-2x-small, --wa-space-x-small, --wa-color-danger-border), so every
   declaration was being dropped. */
#clear-all-removed-btn {
  white-space: nowrap;
}

.removed-deck-label {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-danger-text);
}

/* ============================================================================
   Deck Overlap Matrix
   ============================================================================ */

.overlap-matrix-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--wa-font-size-s);
}

.overlap-matrix-table th,
.overlap-matrix-table td {
  padding: var(--wa-space-xs) var(--wa-space-s);
  text-align: center;
  border: 1px solid var(--wa-color-surface-border);
  white-space: nowrap;
}

.overlap-matrix-table thead th {
  background: var(--wa-color-surface-raised);
  font-weight: var(--wa-font-weight-semibold);
  position: sticky;
  top: 0;
  z-index: 2;
}

.overlap-matrix-table tbody th {
  background: var(--wa-color-surface-raised);
  font-weight: var(--wa-font-weight-semibold);
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 1;
}

.overlap-matrix-table thead th:first-child {
  z-index: 3;
}

.overlap-cell {
  min-width: 48px;
  transition: background 0.15s ease;
}

.overlap-cell.overlap-self {
  background: var(--wa-color-surface-3);
}

.overlap-cell.overlap-has-value {
  font-weight: var(--wa-font-weight-semibold);
  cursor: default;
}

.overlap-header {
  display: flex;
  align-items: center;
  gap: var(--wa-space-2xs);
}

.deck-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================================
   What-If Analysis
   ============================================================================ */

.what-if-panel {
  margin-top: var(--wa-space-m);
  padding: var(--wa-space-m);
  background: var(--wa-color-surface-2);
  border-radius: var(--wa-border-radius-m);
  border: 1px solid var(--wa-color-surface-border);
}

.what-if-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--wa-space-s);
  margin-bottom: var(--wa-space-m);
}

.what-if-stat {
  text-align: center;
  padding: var(--wa-space-s);
  background: var(--wa-color-surface-1);
  border-radius: var(--wa-border-radius-s);
}

.what-if-stat .stat-value {
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-bold);
}

.what-if-stat .stat-label {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-neutral-text-subtle);
}

.what-if-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.what-if-card-list li {
  padding: var(--wa-space-2xs) 0;
  border-bottom: 1px solid var(--wa-color-surface-border);
  font-size: var(--wa-font-size-s);
}

.what-if-card-list li:last-child {
  border-bottom: none;
}

/* ============================================================================
   Card Preview Tooltip
   ============================================================================ */

.card-preview-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: var(--wa-color-surface-1);
  border: 1px solid var(--wa-color-neutral-stroke);
  border-radius: var(--wa-border-radius-m);
  box-shadow: var(--wa-shadow-xl);
  padding: var(--wa-space-xs);
}

.card-preview-tooltip[hidden] {
  display: none;
}

.card-preview-container {
  position: relative;
  width: 244px;
  height: 340px;
}

.card-preview-loading,
.card-preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--wa-color-surface-2);
  border-radius: var(--wa-border-radius-s);
}

.card-preview-image {
  width: 100%;
  height: 100%;
  border-radius: var(--wa-border-radius-s);
  object-fit: cover;
}

.card-preview-stripes {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stripe-mark {
  position: absolute;
  right: 0px;
  width: 24px;
  height: 5px;
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(1,1,1, .8);
}

.stripe-mark-left {
  right: auto;
  left: 0px;
}

/* Counting-aid slot number beside a card-preview stripe */
.stripe-mark-num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 3px #000;
  pointer-events: none;
}

.stripe-dot-mark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(1,1,1, .8);
}

.stripe-dot-mark-right {
  right: auto;
}

/* Reference ruler — faint tick + number at every 5th slot down a card edge,
   drawn even on empty slots so any lone stripe can be located by eye. */
.stripe-ruler-tick {
  position: absolute;
  right: 0px;
  width: 10px;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}

.stripe-ruler-tick-left {
  right: auto;
  left: 0px;
}

.stripe-ruler-num {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 2px #000, 0 0 3px #000;
  pointer-events: none;
}

/* Card name hover cursor */
.card-name-cell {
  cursor: pointer;
}

.card-name-cell:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* ============================================================================
   Split Groups & Side A/B Indicators
   ============================================================================ */

.split-group-card {
  border: 1px solid var(--wa-color-brand-stroke-subtle);
}

.split-group-header {
  padding-bottom: var(--wa-space-s);
  border-bottom: 1px solid var(--wa-color-surface-border);
  margin-bottom: var(--wa-space-s);
}

.split-children {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-s);
  padding-left: var(--wa-space-m);
  border-left: 2px solid var(--wa-color-brand-stroke-subtle);
}

.split-child-card {
  padding: var(--wa-space-s);
  background: var(--wa-color-surface-2);
  border-radius: var(--wa-border-radius-s);
}

/* Side B stripe indicators - dashed border to distinguish from Side A */
.stripe-indicator.stripe-side-b {
  border-style: dashed;
  border-width: 2px;
}

/* ö-style slot: dot row above square in results table */
.stripe-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.slot-dot-row {
  display: flex;
  gap: 2px;
  min-height: 10px;
  align-items: center;
  justify-content: center;
}

/* Dot variant indicators in results table */
.stripe-indicator.stripe-dot-indicator {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  align-self: center;
  border: 1px solid var(--wa-color-neutral-stroke);
  flex-shrink: 0;
}

/* Printable guide Side B dots */
.stripe-dot.stripe-side-b {
  border-style: dashed;
}

/* ============================================================================
   Stripe Reorder Dialog
   ============================================================================ */

.stripe-reorder-sleeve-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wa-space-xs);
}

.stripe-reorder-sleeve {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 480px;
  min-height: 320px;
  border: 2px solid var(--wa-color-neutral-stroke);
  border-radius: 12px;
  background: var(--wa-color-surface-1);
  overflow: hidden;
}

.stripe-reorder-edge {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--wa-color-surface-3);
  flex-shrink: 0;
}

.stripe-reorder-card-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-color-surface-2);
}

.stripe-reorder-card-hint {
  text-align: center;
  color: var(--wa-color-neutral-text-subtle);
  padding: var(--wa-space-m);
  font-size: var(--wa-font-size-s);
}

.stripe-reorder-slot {
  width: 28px;
  height: 10px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
  position: relative;
}

/* Invisible tap-area extension. The 24-slot column is a to-scale sleeve edge,
   so slots can't be 44px tall — instead each slot's hit area bleeds sideways
   and into the 2px gaps so fingers get a much larger effective target. */
.stripe-reorder-slot::after {
  content: '';
  position: absolute;
  inset: -1px -10px;
}

.stripe-reorder-slot--empty {
  background: transparent;
  border: 1.5px dashed var(--wa-color-neutral-40);
}

.stripe-reorder-slot--occupied {
  border: 1.5px solid;
}

.stripe-reorder-slot--active {
  border: 2px solid var(--wa-color-success-70);
  box-shadow: 0 0 0 2px var(--wa-color-success-70);
}

.stripe-reorder-slot--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hover state — only on non-active, non-disabled slots */
.stripe-reorder-slot--empty:hover,
.stripe-reorder-slot--occupied:hover {
  border-color: var(--wa-color-warning-70) !important;
  box-shadow: 0 0 0 2px var(--wa-color-warning-70);
}

/* Touch active state (no hover on mobile) */
.stripe-reorder-slot--empty:active,
.stripe-reorder-slot--occupied:active {
  border-color: var(--wa-color-warning-70) !important;
  box-shadow: 0 0 0 2px var(--wa-color-warning-70);
}

/* Keyboard focus. The slots carry a roving tabindex, so this ring is the only
   thing telling a keyboard user where they are on the sleeve. It must read
   against both the empty (dashed) and the deck-colored occupied slots, so it
   sits outside the border rather than replacing it. */
.stripe-reorder-slot:focus-visible {
  outline: 2px solid var(--wa-color-brand-fill);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--wa-color-brand-fill-subtle);
}

.stripe-reorder-edge-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  padding: 0 4px;
  color: var(--wa-color-neutral-text-subtle);
}

.stripe-reorder-swap-confirm {
  padding: var(--wa-space-s) var(--wa-space-m);
  background: var(--wa-color-warning-surface);
  border: 1px solid var(--wa-color-warning-stroke-subtle);
  border-radius: var(--wa-border-radius-m);
}

.stripe-reorder-legend {
  padding: var(--wa-space-s) var(--wa-space-m);
  background: var(--wa-color-surface-2);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
}


/* Wider touch targets on mobile */
@media (max-width: 768px) {
  .stripe-reorder-slot {
    width: 44px;
    height: 14px;
  }

  .stripe-reorder-slot::after {
    inset: -1px -14px;
  }

  .stripe-reorder-sleeve {
    min-height: 400px;
  }

  .results-table .mark-checkbox {
    width: 24px;
    height: 24px;
  }
}

/* Mobile: tap a card name to open the preview overlay (no hover on touch) */
@media (max-width: 768px) {
  .card-name-cell {
    cursor: pointer;
  }
}

/* ============================================
   MPC Stripe Compositor (mpc-stripes.html)
   ============================================ */

.mpc-preview-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--wa-space-xl);
  align-items: start;
}

@media (max-width: 768px) {
  .mpc-preview-layout {
    grid-template-columns: 1fr;
  }
}

/* Canvas is native image resolution; scale it down to fit its column */
.mpc-preview-canvas {
  width: 100%;
  height: auto;
  border-radius: var(--wa-border-radius-s);
  box-shadow: var(--wa-shadow-m);
  background: var(--wa-color-surface-2);
}

.mpc-geom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--wa-space-m);
}

.mpc-match-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
}

.mpc-match-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wa-font-size-s);
}

.mpc-match-table th,
.mpc-match-table td {
  padding: var(--wa-space-xs) var(--wa-space-s);
  text-align: left;
  border-bottom: 1px solid var(--wa-color-surface-border);
  vertical-align: middle;
}

.mpc-match-table thead th {
  position: sticky;
  top: 0;
  background: var(--wa-color-surface-2);
  z-index: 1;
}

.mpc-filename {
  font-family: var(--wa-font-family-code, monospace);
  word-break: break-all;
}

.mpc-match-ok {
  font-weight: var(--wa-font-weight-semibold);
}

.mpc-match-marks {
  margin-left: var(--wa-space-xs);
  color: var(--wa-color-neutral-text-subtle);
  font-size: var(--wa-font-size-xs);
}

.mpc-match-select {
  max-width: 260px;
  padding: 4px 6px;
  border-radius: var(--wa-border-radius-s);
  border: 1px solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-1);
  color: inherit;
  font: inherit;
  font-size: var(--wa-font-size-s);
}

.mpc-row-unmatched {
  background: var(--wa-color-warning-fill-quiet, rgba(255, 200, 0, 0.08));
}

.mpc-row-skipped {
  opacity: 0.5;
}

.mpc-process-log {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--wa-font-size-s);
}

.mpc-process-log li {
  padding: var(--wa-space-2xs) 0;
}

.mpc-log-summary {
  padding-bottom: var(--wa-space-xs);
}

.mpc-log-warn {
  color: var(--wa-color-warning-text);
}

.mpc-log-error {
  color: var(--wa-color-danger-text);
}

/* ============================================================
   Gallery (gallery.html)
   ============================================================ */

.gallery-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--wa-space-m);
  flex-wrap: wrap;
  padding: var(--wa-space-m);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-lowered);
  margin-block: var(--wa-space-m);
}

.gallery-toolbar-search {
  flex: 1;
  min-width: 200px;
}

.gallery-tlabel {
  display: block;
  font-size: var(--wa-font-size-2xs);
  font-weight: var(--wa-font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wa-color-neutral-text-subtle);
  margin-bottom: var(--wa-space-2xs);
}

.gallery-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  font-size: var(--wa-font-size-2xs);
  font-weight: var(--wa-font-weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wa-color-neutral-text-subtle);
  margin: var(--wa-space-l) 0 var(--wa-space-s);
}

.gallery-eyebrow .count {
  font-weight: var(--wa-font-weight-normal);
  letter-spacing: 0.02em;
  text-transform: none;
}

.gallery-card {
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  overflow: hidden;
  background: var(--wa-color-surface-default);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.gallery-card:hover {
  box-shadow: var(--wa-shadow-m);
}

.gallery-card--feat {
  border-color: var(--wa-color-brand-60);
  box-shadow: 0 0 0 1px var(--wa-color-brand-70);
}

.gallery-art {
  position: relative;
  aspect-ratio: 63 / 88; /* physical MTG card ratio */
  background: var(--wa-color-surface-lowered);
  display: grid;
  place-items: center;
  color: var(--wa-color-neutral-text-subtle);
  font-size: var(--wa-font-size-xl);
}

.gallery-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-art--lg {
  aspect-ratio: 63 / 88;
  max-width: 26rem; /* card ratio is tall — cap width so detail art doesn't tower */
  width: 100%;
  margin-inline: auto;
  border-radius: var(--wa-border-radius-m);
  border: 1px solid var(--wa-color-surface-border);
  overflow: hidden;
}

.gallery-flag {
  position: absolute;
  top: var(--wa-space-xs);
  left: var(--wa-space-xs);
  z-index: 1;
}

.gallery-cbody {
  padding: var(--wa-space-xs) var(--wa-space-s) var(--wa-space-s);
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
}

.gallery-ctitle {
  font-weight: var(--wa-font-weight-semibold);
  font-size: var(--wa-font-size-s);
  line-height: 1.25;
}

.gallery-arow {
  display: flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-neutral-text-subtle);
}

.gallery-cfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gallery-likes {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-neutral-text-subtle);
  background: none;
  border: 0;
  padding: var(--wa-space-2xs);
  cursor: pointer;
  border-radius: var(--wa-border-radius-s);
}

.gallery-likes:hover {
  color: var(--wa-color-brand-text);
}

.gallery-likes.liked {
  color: var(--wa-color-brand-text);
}

.gallery-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--wa-space-s);
  padding: var(--wa-space-3xl) var(--wa-space-l);
  border: 1px dashed var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  margin-top: var(--wa-space-m);
}

.gallery-empty .ic {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--wa-border-radius-circle);
  background: var(--wa-color-surface-lowered);
  display: grid;
  place-items: center;
  color: var(--wa-color-neutral-text-subtle);
  font-size: var(--wa-font-size-l);
}

/* Detail view */
.gallery-detail {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--wa-space-xl);
  align-items: start;
}

@media (max-width: 768px) {
  .gallery-detail {
    grid-template-columns: 1fr;
  }
}

.gallery-orig {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  font-size: var(--wa-font-size-s);
  padding: var(--wa-space-s) var(--wa-space-m);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-lowered);
}

.gallery-desc {
  font-family: var(--wa-font-family-longform);
  font-size: var(--wa-font-size-m);
  line-height: 1.6;
}

.gallery-artist-card {
  display: flex;
  gap: var(--wa-space-m);
  padding: var(--wa-space-m);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
}

.gallery-license {
  display: flex;
  gap: var(--wa-space-xs);
  align-items: flex-start;
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-neutral-text-subtle);
}

/* Artist page */
.gallery-artist-head {
  display: flex;
  gap: var(--wa-space-l);
  align-items: flex-start;
  padding: var(--wa-space-l);
  border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-brand-fill-quiet);
  border: 1px solid var(--wa-color-brand-border-quiet);
}

.gallery-artist-head--community {
  background: var(--wa-color-surface-lowered);
  border-color: var(--wa-color-surface-border);
}

@media (max-width: 600px) {
  .gallery-artist-head {
    flex-direction: column;
  }
}

.gallery-stats {
  display: flex;
  gap: var(--wa-space-xl);
  margin-top: var(--wa-space-xs);
}

.gallery-stat b {
  display: block;
  font-size: var(--wa-font-size-l);
}

.gallery-stat span {
  font-size: var(--wa-font-size-2xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wa-color-neutral-text-subtle);
}

/* Upload form */
.gallery-form {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-l);
}

.gallery-ack {
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
  background: var(--wa-color-surface-lowered);
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xs);
}

.gallery-suggest {
  position: relative;
}

.gallery-suggest-list {
  position: absolute;
  z-index: 10;
  inset-inline: 0;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
  box-shadow: var(--wa-shadow-m);
  max-height: 14rem;
  overflow-y: auto;
}

.gallery-suggest-list button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--wa-space-xs) var(--wa-space-s);
  font-size: var(--wa-font-size-s);
  cursor: pointer;
  color: inherit;
}

.gallery-suggest-list button:hover {
  background: var(--wa-color-surface-lowered);
}

/* Rows (my uploads / moderation queue) */
.gallery-row {
  display: flex;
  gap: var(--wa-space-m);
  align-items: center;
  padding: var(--wa-space-s) var(--wa-space-m);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
}

.gallery-row--rejected {
  background: var(--wa-color-danger-fill-quiet);
}

.gallery-thumb {
  width: 4.75rem;
  height: 3.5rem;
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-surface-lowered);
  flex: none;
  display: grid;
  place-items: center;
  color: var(--wa-color-neutral-text-subtle);
  overflow: hidden;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-rowmeta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-3xs);
}

.gallery-rowsub {
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-neutral-text-subtle);
  display: flex;
  gap: var(--wa-space-s);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .gallery-row {
    flex-wrap: wrap;
  }
}

.gallery-queue-card {
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-s);
}

.gallery-avatar {
  border-radius: var(--wa-border-radius-circle);
  background: var(--wa-color-surface-lowered);
  color: var(--wa-color-neutral-text-subtle);
  flex: none;
  display: grid;
  place-items: center;
}

.gallery-reject-row {
  display: none;
}

.gallery-reject-row.open {
  display: flex;
  gap: var(--wa-space-xs);
  align-items: center;
}

.gallery-reject-row wa-input {
  flex: 1;
  min-width: 14rem;
}

.gallery-grid {
  --min-column-size: 220px;
}

@media (max-width: 768px) {
  .gallery-grid {
    --min-column-size: 140px;
  }
}

/* ============================================================================
   Before / After Comparison (index.html)
   ============================================================================ */

/* The section centers its children, so the comparison needs an explicit width
   or it collapses to content size. */
.prism-comparison {
  inline-size: 100%;
}

/* Round the outer wrapper via the documented `comparison` part — the host
   itself has no documented background/radius support. */
.prism-comparison::part(comparison) {
  border-radius: var(--wa-border-radius-l);
  overflow: hidden;
}

/* Both slotted images are 1000x750, so each side fills the frame identically. */
.prism-comparison img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}