/* Deck builder shell (.prd/19 L1–L4, L7, R1, R2, W7) — WU0. Every number is the reference's
   (tests/fixtures/riftatlas-deck-builder.json; [CSS f:o] = its stylesheet offset, [DOM] = computed).
   Scoped under .deck-builder: the reference's token names (--muted, --accent …) mean something else in
   styles.css, and styles.css's global button/input/select rules are reset here. */

/* The theme tokens (L7) live in /catalog-menus.css, shared with /cards' menus (.prd/20 F8). */
.deck-builder {
  /* Tailwind v4 palette entries the builder uses [DOM theme.dark.vars] */
  --amber-300: lab(86.4156% 6.13147 78.3961);
  --amber-500: oklab(0.769006 0.0640422 0.176756);
  --rose-300: lab(76.6339% 38.3549 9.68835);
  --rose-500: oklab(0.645008 0.235914 0.0696316);
  --db-header-h: 63px;
  display: block;
  min-height: calc(100vh - var(--db-header-h));
  background: var(--background);
  color: var(--foreground);
  font-size: 16px;
  line-height: 1.5;
}

/* styles.css sets button { min-height: 38px; padding: 0 14px; font-weight: 780; border-radius: 7px }
   and the input / select / hover borders for the whole site. */
.deck-builder button,
.deck-builder input,
.deck-builder select {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  width: auto;
}

.deck-builder button {
  cursor: default;
}

.deck-builder svg.lucide {
  flex: none;
  width: 14px;
  height: 14px;
}

.db-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* L1 page grid [CSS :26104; DOM §2]: catalog 58 % · 14px splitter · workspace, inside a 32px page gutter
   (the reference's `main > section` sits at x 32, 1856 wide at 1920). The splitter rewrites the inline
   grid-template-columns (L2), which wins over this rule. Below 1024px the split is gone [DOM record §2b]:
   one column (the phone sheet is P2, R2) and gutters of 24 / 16 / 8 px under 1024 / 768 / 640 — the
   !important beats the inline split there. */
.deck-builder {
  padding-inline: 32px;
}

.db-split {
  display: grid;
  grid-template-columns: 58% 14px minmax(0, 1fr);
  align-items: start;
}

@media (width < 64rem) {
  /* The workspace pane lives in the phone sheet here (deck-sheet.js, P2); the page keeps 96px under the
     catalog for the sheet's 88px peek (main pb-24, probe page.main390 / main1023). */
  .deck-builder {
    padding-inline: 24px;
    padding-bottom: 96px;
  }

  .db-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (width < 48rem) {
  .deck-builder {
    padding-inline: 16px;
  }
}

@media (width < 40rem) {
  .deck-builder {
    padding-inline: 8px;
  }
}

.db-catalog-pane {
  position: relative;
  min-width: 0;
}

@media (min-width: 64rem) {
  .db-catalog-pane {
    padding-right: 16px;
  }
}

/* L2 splitter [CSS :36705 cursor-col-resize, :26104 h-[calc(100vh-55px)]] — ours uses our header. */
.db-splitter {
  display: none;
}

@media (min-width: 64rem) {
  .deck-builder .db-splitter {
    position: sticky;
    top: var(--db-header-h);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: calc(100vh - var(--db-header-h));
    color: var(--muted-foreground);
    cursor: col-resize;
    touch-action: none;
  }

  .deck-builder .db-splitter:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
  }
}

/* Workspace pane: sticky at our header, full height below it. */
.db-workspace-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: color-mix(in oklab, var(--muted) 6%, transparent);
}

@media (min-width: 64rem) {
  .db-workspace-pane {
    position: sticky;
    top: var(--db-header-h);
    height: calc(100vh - var(--db-header-h));
    overflow: hidden;
  }
}

/* L3 header: 765.5 × 121 at 1920 — 6px padding, three rows 28 / 34 / 34 with 6px between, 1px rule. */
.db-ws-header {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 6px;
  padding: 6px 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  background-image: linear-gradient(rgba(34, 39, 52, 0.82), rgba(29, 34, 47, 0.56));
}

.db-ws-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.db-ws-row.is-top {
  justify-content: space-between;
  min-height: 28px;
}

.db-ws-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.db-ws-title {
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.db-ws-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.db-ws-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.deck-builder .db-tool {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  min-width: 28px;
  padding: 0 10px;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--background) 78%, transparent);
  color: color-mix(in oklab, var(--foreground) 82%, transparent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.deck-builder .db-tool.is-icon {
  width: 28px;
  padding: 0;
}

.deck-builder .db-tool:disabled {
  color: var(--muted-foreground);
  opacity: 0.55;
  cursor: not-allowed;
}

.deck-builder .db-ws-name {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--background) 90%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.deck-builder .db-ws-name::placeholder {
  color: var(--muted-foreground);
}

.deck-builder .db-ws-name:focus {
  border-color: var(--ring);
  outline: none;
}

/* H7 Try It Out: 142.4 × 34 (min-width 8.9rem [CSS :33960]), dark gradient [CSS :98750], eyebrow 0.48rem
   [CSS :119523], label 0.82rem [CSS :120027]; disabled with × while issues remain, ✓ when legal. The icon
   box and the eyebrow's gold are read off screenshots 59 / 27 [추정 — not in the fixture]. */
.deck-builder .db-try {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 8.9rem;
  height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius);
  background-color: var(--secondary);
  background-image: linear-gradient(rgba(24, 27, 38, 0.96), rgba(14, 16, 25, 0.98));
  color: var(--foreground);
  white-space: nowrap;
}

.deck-builder .db-try:disabled {
  color: var(--muted-foreground);
  opacity: 0.6;
  cursor: not-allowed;
}

.db-try-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--background) 60%, transparent);
}

.db-try-icon .lucide-x {
  color: lab(64.4125% 63.0291 19.2068); /* rose-400 [DOM theme.dark.vars] */
}

.db-try-icon .lucide-circle-check {
  color: lab(75.0771% -60.7313 19.4147); /* emerald-400 [DOM theme.dark.vars] */
}

.db-try-copy {
  display: grid;
  text-align: left;
}

.db-try-eyebrow {
  font-size: 0.48rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 214, 143, 0.72);
}

.db-try-label {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Row 3: view tabs (191 × 34, tabs 61.7 × 28), issues badge, Discard Draft pushed to the end. */
.db-view-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 34px;
  padding: 2px;
  border: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--background) 45%, transparent);
}

.deck-builder .db-view-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 0.36rem;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.deck-builder .db-view-tab[aria-selected="true"] {
  background: color-mix(in oklab, var(--foreground) 90%, transparent);
  color: var(--background);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.db-issues-wrap {
  position: relative;
  display: flex;
}

.db-issues-wrap:empty {
  display: none;
}

/* R2 issues badge: 32 tall, 12px/500, amber; the dropdown lists the reference's messages. */
.deck-builder .db-issues {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in oklab, var(--amber-500) 20%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--amber-500) 10%, transparent);
  color: var(--amber-300);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* The dropdown's look was not measured [추정]: a popover in the builder's tokens. */
.db-issues-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 18rem;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--popover);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.db-issue-row {
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--foreground);
  font-size: 12px;
  line-height: 1.5;
}

.deck-builder .db-discard {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* Icon-button tooltips: role=tooltip, 11px, 26.5 tall, 6px under the button. */
.db-tooltip {
  position: absolute;
  z-index: 40;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

.db-tooltip.is-center {
  transform: translateX(-50%);
}

/* L4 sections: one column at this width (two columns at ≥ 52rem container = L5, R2); Legend and
   Champion side by side; 24px between sections, 8px inside one. */
.db-ws-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.db-ws-columns,
.db-ws-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
  align-content: start;
}

.db-ws-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.db-section {
  position: relative;
  display: grid;
  gap: 8px;
  align-self: start;
}

.db-section-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  background: color-mix(in oklab, var(--background) 78%, transparent);
}

.db-section-header.is-under {
  border-bottom-color: color-mix(in oklab, var(--amber-500) 32%, transparent);
}

.db-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.db-section-end {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* R1 counter: 60.8 × 28, min-width 3.8rem [CSS :33817], 15px/600, radius 4; amber / neutral / rose. */
.db-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 3.8rem;
  padding: 0 8px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--background) 55%, transparent);
  color: var(--foreground);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.db-counter.is-under {
  border-color: color-mix(in oklab, var(--amber-500) 26%, transparent);
  background: color-mix(in oklab, var(--amber-500) 10%, transparent);
  color: var(--amber-300);
}

.db-counter.is-over {
  border-color: color-mix(in oklab, var(--rose-500) 28%, transparent);
  background: color-mix(in oklab, var(--rose-500) 10%, transparent);
  color: var(--rose-300);
}

.db-counter.is-muted {
  color: var(--muted-foreground);
}

/* Main Deck header: group select (128 × 28 wrap), sort select + direction (W2 options; behaviour R2),
   6px apart and 6px before the counter. Under a 34rem section [CSS :253873–:254204] the sort select
   becomes an invisible 32px overlay on its arrow-up-down glyph (fixture 1440 sortSelect 32 × 26). */
[data-deck-workspace-section="mainDeck"] {
  container-type: inline-size;
}

.db-section-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.db-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--background) 55%, transparent);
  box-shadow: 0 1px 3px 0 oklab(0 0 0 / 0.1), 0 1px 2px -1px oklab(0 0 0 / 0.1);
}

.db-sort-trigger {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.deck-builder .db-select {
  appearance: none;
  width: 126px;
  height: 26px;
  padding: 0 24px 0 8px;
  color: var(--foreground);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.deck-builder .db-select.is-sort {
  width: 110px;
  padding-left: 4px;
}

.deck-builder .db-select option {
  background: var(--popover);
  color: var(--foreground);
}

.db-select-wrap .db-select-chevron {
  position: absolute;
  right: 8px;
  pointer-events: none;
}

@container not (min-width: 34rem) {
  .db-sort-trigger {
    justify-content: center;
    width: 32px;
    height: 26px;
    padding: 0;
  }

  .deck-builder .db-select.is-sort {
    position: absolute;
    inset: 0;
    width: 32px;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }

  .db-sort-trigger .db-select-chevron {
    display: none;
  }
}

.deck-builder .db-sort-direction {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 26px;
  border-left: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
}

/* W7 "+ Add …" row: dashed, 36px, full section width; gone once the section holds a card. */
.deck-builder .db-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 36px;
  border: 1px dashed color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: calc(var(--radius) - 2px);
  background: color-mix(in oklab, var(--background) 45%, transparent);
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Toasts (R3 / R4). The reference's sonner toaster was not measured beyond its 8px radius [추정]. */
.db-toaster {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(356px, calc(100vw - 48px));
  pointer-events: none;
}

.db-toast {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--popover);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.5;
}