/* ===========================================================================
   Shared Deck Identity component (a.k.a. the Current Deck workspace).
   One flat surface — no boxes inside boxes. Reading order: commander art →
   deck/commander name → tool context → metadata → actions. Driven entirely by
   the browser workspace snapshot (single source of truth across every tool).
   8px spacing system; brand accent reserved for the current-tool label and the
   primary action only.
   =========================================================================== */
.deck-workspace {
  width: 100%;
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 16px);
  background: var(--surface-2, #17171d);
}
@media (min-width: 768px) {
  .deck-workspace { padding: 20px; margin-bottom: 32px; }
}

/* Heading is a quiet caption — the deck name below is the real headline. */
.deck-workspace__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.deck-workspace__heading h2 {
  margin: 0;
  color: var(--text-2, #8a879e);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.deck-workspace__eyebrow { display: none; }
.deck-workspace__local {
  flex: 0 0 auto;
  color: var(--text-2, #8a879e);
  font-size: 0.7rem;
  font-weight: 700;
}

/* Body / disclosure: identity on the left, actions on the right (desktop). */
.deck-workspace__body { min-width: 0; }
.deck-workspace__mobile-disclosure { display: block; }
.deck-workspace__mobile-disclosure[open] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.deck-workspace__mobile-disclosure:not([open]) > :not(summary) { display: none !important; }

/* Identity row (also the collapsed summary on mobile). */
.deck-workspace__summary {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.deck-workspace__summary::-webkit-details-marker { display: none; }

/* Commander artwork — consistent 4:5 crop, neutral monogram fallback. */
.deck-workspace__art { display: flex; flex: none; gap: 6px; }
.deck-workspace__art-thumb {
  position: relative;
  width: 72px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-3, #22252d);
}
.deck-workspace__art.is-pair .deck-workspace__art-thumb { width: 52px; }
.deck-workspace__art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.deck-workspace__art-mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-2, #8a879e);
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
}

/* Deck / commander identity + metadata. */
.deck-workspace__id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.deck-workspace__tool {
  color: var(--accent, #c9a84c);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.deck-workspace__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-1, #f4f4f5);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.deck-workspace__commander {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-2, #8a879e);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.deck-workspace__meta { margin-top: 4px; color: var(--text-2, #8a879e); font-size: 0.8rem; line-height: 1.4; }
@media (min-width: 768px) {
  .deck-workspace__name { font-size: 1.4rem; }
}

/* Tool-specific status: one primary + one supporting chip. The label carries
   the meaning; the tone dot is supplementary (never colour alone). */
.deck-workspace__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.deck-workspace__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-1, #f4f4f5);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.deck-workspace__stat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3, #56536a); flex: none; }
.deck-workspace__stat.is-ok { border-color: rgba(111, 207, 160, 0.4); background: rgba(111, 207, 160, 0.08); }
.deck-workspace__stat.is-ok .deck-workspace__stat-dot { background: var(--cda-ok, #6fcfa0); }
.deck-workspace__stat.is-warn { border-color: rgba(232, 176, 74, 0.4); background: rgba(232, 176, 74, 0.08); }
.deck-workspace__stat.is-warn .deck-workspace__stat-dot { background: var(--cda-warn, #e8b04a); }
.deck-workspace__stat.is-bad { border-color: rgba(232, 122, 112, 0.42); background: rgba(232, 122, 112, 0.08); }
.deck-workspace__stat.is-bad .deck-workspace__stat-dot { background: var(--cda-bad, #e87a70); }
.deck-workspace__stat.is-info .deck-workspace__stat-dot { background: #7cb2e8; }
.deck-workspace__stat.is-neutral .deck-workspace__stat-dot { background: var(--accent, #c9a84c); }

/* Actions — one primary, one secondary, the rest in an overflow menu. */
.deck-workspace__actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.deck-workspace__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: transparent;
  color: var(--text-1, #f4f4f5);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.deck-workspace__button:hover,
.deck-workspace__button:focus-visible { border-color: var(--accent, #c9a84c); }
.deck-workspace__button:focus-visible { outline: 2px solid var(--accent, #c9a84c); outline-offset: 2px; }
.deck-workspace__use {
  border-color: transparent;
  background: var(--accent, #c9a84c);
  color: #17130a;
}
.deck-workspace__use:hover { filter: brightness(1.06); }
.deck-workspace__change { border-color: transparent; color: var(--text-2, #8a879e); }
.deck-workspace__change:hover { color: var(--text-1, #f4f4f5); border-color: var(--border-strong, rgba(255, 255, 255, 0.12)); }

/* Save deck — a standard-weight control (never louder than the gold primary).
   Once the deck is saved it reads as a settled, non-interactive success state. */
.deck-workspace__save .dc-icon { color: var(--text-2, #8a879e); }
.deck-workspace__save.is-saved {
  border-color: rgba(111, 207, 160, 0.4);
  background: rgba(111, 207, 160, 0.08);
  color: #8fe4cc;
  cursor: default;
}
.deck-workspace__save.is-saved .dc-icon { color: #6fcfa0; }
.deck-workspace__save.is-saved:hover,
.deck-workspace__save.is-saved:focus-visible { border-color: rgba(111, 207, 160, 0.4); outline-color: #6fcfa0; }

/* Save offer — the compact, user-initiated account nudge shown only after a
   signed-out user clicks Save. Inline, dismissible, benefit-first. */
.deck-workspace__save-offer {
  flex: 1 1 100%;
  /* Own its full separation from the actions row: the parent flex row-gap does
     not reliably apply between the wrapped actions line and this block, so the
     visible gap is this margin. Keep it clear of the buttons above. */
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(201, 168, 76, 0.24);
  border-radius: var(--radius-md, 12px);
  background: rgba(201, 168, 76, 0.05);
}
.deck-workspace__save-offer-lead { margin: 0 0 12px; color: var(--text-1, #f4f4f5); font-size: 0.9rem; line-height: 1.45; }
.deck-workspace__save-offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.deck-workspace__save-offer-primary {
  border-color: transparent;
  background: var(--accent, #c9a84c);
  color: #17130a;
  min-height: 40px;
}
.deck-workspace__save-offer-primary:hover { filter: brightness(1.06); }
.deck-workspace__save-offer-signin { min-height: 40px; }
.deck-workspace__save-offer-dismiss {
  margin-left: auto;
  padding: 8px 10px;
  border: none;
  background: none;
  color: var(--text-2, #8a879e);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.deck-workspace__save-offer-dismiss:hover { color: var(--text-1, #f4f4f5); text-decoration: underline; }
.deck-workspace__save-offer-note { margin: 10px 0 0; color: var(--text-2, #8a879e); font-size: 0.78rem; line-height: 1.4; }
@media (max-width: 600px) {
  .deck-workspace__save-offer-actions { flex-direction: column; align-items: stretch; }
  .deck-workspace__save-offer-primary,
  .deck-workspace__save-offer-signin { width: 100%; }
  .deck-workspace__save-offer-dismiss { margin-left: 0; text-align: center; }
}

/* My Decks picker (Phase 2) — reuses the overflow-menu dropdown styling, with
   a chevron affordance and a small group label. Selecting an item loads that
   saved deck into this calculator without re-importing. */
/* Higher specificity than the shared `.deck-workspace__options > summary::after`
   overflow "⋯" so the picker shows a distinct chevron, not a second ⋯. */
.deck-workspace__options.deck-workspace__decks > summary::after { content: "\25BE"; color: var(--accent, #c9a84c); font-size: 0.85rem; }
.deck-workspace__decks-label {
  display: block;
  padding: 4px 10px 6px;
  color: var(--text-3, #56536a);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.deck-workspace__deck-item { min-width: 0; }
.deck-workspace__deck-item .dc-icon { flex: 0 0 auto; color: var(--text-2, #8a879e); }
.deck-workspace__deck-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Empty-state row: keep the "no deck yet" note and the picker on one line where
   there's room, stacking on narrow widths. */
.deck-workspace__empty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.deck-workspace__empty-row .deck-workspace__empty { flex: 1 1 260px; }
.deck-workspace__empty-actions { flex: 0 0 auto; }

/* Overflow menu (More) — used on every tool now. */
.deck-workspace__options { position: relative; }
.deck-workspace__options > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-2, #8a879e);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  list-style: none;
}
.deck-workspace__options > summary::-webkit-details-marker { display: none; }
.deck-workspace__options > summary::after { content: "\22EF"; color: var(--accent, #c9a84c); font-size: 1rem; }
.deck-workspace__options > summary:hover,
.deck-workspace__options > summary:focus-visible,
.deck-workspace__options[open] > summary {
  border-color: rgba(201, 168, 76, 0.24);
  background: rgba(201, 168, 76, 0.07);
  color: var(--text-1, #f4f4f5);
}
.deck-workspace__options > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(280px, calc(100vw - 48px));
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 12px;
  background: var(--surface, #111115);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}
.deck-workspace__options .deck-workspace__button {
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
  border-color: transparent;
  background: transparent;
  font-weight: 600;
}
.deck-workspace__options .deck-workspace__button:hover,
.deck-workspace__options .deck-workspace__button:focus-visible {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
}
.deck-workspace__clear[data-confirm="true"] { color: #e87a70; }
.deck-workspace__clear[data-confirm="true"]:hover { border-color: #e87a70; }

/* "Open in another tool" links inside the overflow menu. */
.deck-workspace__tools { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.deck-workspace__tools > summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--accent, #c9a84c);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  list-style: none;
}
.deck-workspace__tools > summary::-webkit-details-marker { display: none; }
.deck-workspace__tools > div { display: grid; gap: 0; margin-top: 4px; }
.deck-workspace__tools a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text-1, #f4f4f5);
  text-decoration: none;
  font-size: 0.85rem;
}
.deck-workspace__tools a:hover,
.deck-workspace__tools a:focus-visible { background: rgba(255, 255, 255, 0.05); color: var(--accent, #c9a84c); }

/* Empty / unavailable states — compact, no big empty deck card, no fake art. */
.deck-workspace__empty {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--text-2, #8a879e);
  font-size: 0.85rem;
  line-height: 1.5;
}
.deck-workspace__empty .dc-icon { flex: 0 0 auto; margin-top: 2px; color: var(--text-3, #56536a); }
.deck-workspace__status { min-height: 0; margin: 12px 0 0; color: var(--text-2, #8a879e); font-size: 0.82rem; }
.deck-workspace__status:empty { display: none; }
.deck-workspace__status.is-error { color: #e87a70; }

/* Simplified variant (bracket checkers) — same component, no structural change
   needed now that every tool shares the overflow menu. */
.deck-workspace--simple .deck-workspace__heading { margin-bottom: 8px; }

@media (max-width: 600px) {
  .deck-workspace__button { width: 100%; min-height: 48px; }
  .deck-workspace__heading h2 { font-size: 0.68rem; }
  .deck-workspace__art-thumb { width: 56px; }
  .deck-workspace__art.is-pair .deck-workspace__art-thumb { width: 44px; }
  .deck-workspace__name { font-size: 1.15rem; }
  /* Collapsed identity row shows a compact +/- affordance; actions live below. */
  .deck-workspace__summary { position: relative; padding-right: 28px; }
  .deck-workspace__summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    color: var(--accent, #c9a84c);
    font-size: 1.25rem;
    font-weight: 700;
  }
  .deck-workspace__mobile-disclosure[open] > .deck-workspace__summary::after { content: "\2212"; }
  .deck-workspace__mobile-disclosure[open] { gap: 12px; }
  .deck-workspace__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .deck-workspace__use { grid-column: 1 / -1; }
  .deck-workspace__options { grid-column: 1 / -1; }
  .deck-workspace__options > summary { width: 100%; justify-content: center; }
  .deck-workspace__options > div { width: min(272px, calc(100vw - 64px)); }
}