/* ============================================================
   V9 detail dock tidy. The card-detail READ pane as it renders in the
   workspace dock: flat obsidian panel (no card-art backdrop), compact
   identity, a price-hero action block, a location line, and animated
   disclosures. EVERY selector is scoped under .v9-dock-detail so the legacy
   centered modal (deleted in Stage C) is untouched — keep new rules scoped
   too. Layered after shell.css so the dock overrides here win.
   ============================================================ */

/* ---- panel: flat, tighter rhythm ---- */
.v9-dock-detail.card-detail {
  gap: var(--v9-space-3);
  padding: var(--v9-space-3) var(--v9-space-4) var(--v9-space-3);
}
/* Kill the blurred card-art backdrop + the accent glow behind the hero —
   "nice but distracting for UX" (Donovan, 2026-06-13). Flat obsidian. */
.v9-dock-detail .card-detail-ambient { display: none; }
.v9-dock-detail .card-detail-visual-stage::before { display: none; }

/* ---- hero: vh-driven so it stays large on tall screens but shrinks on short
   ones, keeping the collapsed panel scroll-free. Width drives height via the
   card's aspect ratio; the art stays undistorted. ---- */
.v9-dock-detail .card-detail-visual-stage { padding-top: 0; }
.v9-dock-detail .card-detail-visual-stage > * {
  width: clamp(7rem, 18vh, 12rem) !important;
}

/* ---- read pane stack ---- */
.v9-dock-detail .card-detail-dock-read {
  gap: var(--v9-space-2);
}

/* ---- identity: one eyebrow row, one controlled title, one muted meta line ---- */
.v9-dock-detail .card-detail-id {
  display: grid;
  gap: var(--v9-space-1);
}
.v9-dock-detail .card-detail-id-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--v9-space-2);
  flex-wrap: wrap;
}
.v9-dock-detail .card-detail-id-title {
  margin: 0;
  font: 500 var(--v9-text-lg)/1.15 var(--v9-font-ui);
  letter-spacing: -0.01em;
  color: var(--v9-text);
}
.v9-dock-detail .card-detail-id-meta {
  display: flex;
  align-items: baseline;
  gap: var(--v9-space-2);
  flex-wrap: wrap;
  color: var(--v9-text-mute);
  font-size: var(--v9-text-sm);
}
.v9-dock-detail .card-detail-id-code {
  font-family: var(--v9-font-mono);
  font-size: var(--v9-text-xs);
  letter-spacing: 0.02em;
  color: var(--v9-text-faint);
}
/* The shared meta override already de-absolutes the badge; keep it inline-sized
   and quiet so it rides the eyebrow row, not the title. */
.v9-dock-detail .card-detail-id .rarity-badge,
.v9-dock-detail .card-detail-id .item-kind-badge {
  position: static;
  align-self: center;
}

/* ---- action block: asking price = the key figure, qty pill, button row ---- */
.v9-dock-detail .card-detail-actionblock {
  display: grid;
  gap: var(--v9-space-2);
  padding-top: var(--v9-space-2);
  border-top: 1px solid var(--v9-line);
}
.v9-dock-detail .card-detail-actionblock-figures {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--v9-space-3);
}
.v9-dock-detail .card-detail-price-block {
  display: grid;
  gap: 2px;
}
/* The figure is bright + mono, NOT accent — the yellow is rationed to the
   primary button below it (the accent law). */
.v9-dock-detail .card-detail-price {
  font: 400 1.5rem/1 var(--v9-font-mono);
  color: var(--v9-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.v9-dock-detail .card-detail-qty-pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--v9-space-2);
  padding: var(--v9-space-1) var(--v9-space-3);
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-pill);
  color: var(--v9-text-mute);
  white-space: nowrap;
}
.v9-dock-detail .card-detail-qty-pill strong {
  color: var(--v9-text);
  font-family: var(--v9-font-mono);
  font-variant-numeric: tabular-nums;
}

/* button row — re-skin the legacy .btn classes to the V9 voice (behavior is
   unchanged; only the look). Primary = the one accent; Edit = line; ⋯ = ghost. */
.v9-dock-detail .card-detail-actionblock-buttons {
  display: flex;
  align-items: stretch;
  gap: var(--v9-space-2);
}
.v9-dock-detail .card-detail-actionblock .btn {
  min-height: 2.1rem;
  padding: 0 var(--v9-space-3);
  border-radius: var(--v9-r-sm);
  border: 1px solid var(--v9-line-strong);
  background: var(--v9-surface);
  color: var(--v9-text);
  font: 500 var(--v9-text-sm) var(--v9-font-ui);
  transition:
    background-color var(--v9-t-micro) var(--v9-ease),
    border-color var(--v9-t-micro) var(--v9-ease),
    color var(--v9-t-micro) var(--v9-ease);
}
.v9-dock-detail .card-detail-actionblock .btn:hover { background: var(--v9-hover); }
/* the prominent primary takes the row's stretch */
.v9-dock-detail .card-detail-actionblock .card-detail-dock-primary {
  flex: 1 1 auto;
  justify-content: center;
}
/* cart / sell primary = accent yellow */
.v9-dock-detail .card-detail-actionblock .card-detail-dock-primary.btn-primary {
  background: var(--v9-accent);
  border-color: var(--v9-accent);
  color: var(--v9-accent-ink);
}
.v9-dock-detail .card-detail-actionblock .card-detail-dock-primary.btn-primary:hover {
  background: var(--v9-accent-press);
  border-color: var(--v9-accent-press);
}
/* a secondary-variant primary (e.g. Restore) stays prominent but not yellow */
.v9-dock-detail .card-detail-actionblock .card-detail-dock-primary.btn-secondary {
  border-color: var(--v9-line-strong);
}
/* Edit (secondary, not the primary) + the overflow trigger sit compact */
.v9-dock-detail .card-detail-actionblock .btn-secondary:not(.card-detail-dock-primary) {
  flex: 0 0 auto;
  background: transparent;
}
.v9-dock-detail .card-detail-actionblock .card-detail-overflow { flex: 0 0 auto; }
.v9-dock-detail .card-detail-actionblock .card-detail-overflow-trigger {
  min-height: 2.1rem;
  width: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--v9-r-sm);
  border: 1px solid var(--v9-line-strong);
  background: var(--v9-surface);
  color: var(--v9-text-mute);
}
.v9-dock-detail .card-detail-actionblock .card-detail-overflow-trigger:hover {
  background: var(--v9-hover);
  color: var(--v9-text);
}

/* ---- location: a quiet, always-visible "where to pull it" line (only when
   the item has a location set). One muted row with a pin, so you don't have to
   open a disclosure to find the card. ---- */
.v9-dock-detail .card-detail-location {
  display: flex;
  align-items: baseline;
  gap: var(--v9-space-2);
  padding-top: var(--v9-space-2);
  border-top: 1px solid var(--v9-line);
}
.v9-dock-detail .card-detail-location-pin {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--v9-text-faint);
  transform: translateY(0.12rem);
}
.v9-dock-detail .card-detail-location-text {
  min-width: 0;
  color: var(--v9-text);
  font-size: var(--v9-text-sm);
}

/* ---- disclosures: uniform trigger rows, animated bodies ---- */
.v9-dock-detail .card-detail-disclosure { border-top: 1px solid var(--v9-line); }
.v9-dock-detail .card-detail-disclosure-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v9-space-3);
  padding: var(--v9-space-2) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--v9-text);
}
.v9-dock-detail .card-detail-disclosure-trigger .t-eyebrow {
  color: var(--v9-text-mute);
  transition: color var(--v9-t-micro) var(--v9-ease);
}
.v9-dock-detail .card-detail-disclosure-trigger:hover .t-eyebrow { color: var(--v9-text); }
.v9-dock-detail .card-detail-disclosure-trigger:focus-visible {
  outline: none;
  box-shadow: var(--v9-focus-glow);
  border-radius: var(--v9-r-sm);
}
.v9-dock-detail .card-detail-disclosure-chevron {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--v9-text-faint);
  transform: rotate(0deg);
  transition: transform var(--v9-t-std) var(--v9-ease);
}
.v9-dock-detail .card-detail-disclosure-trigger[aria-expanded="true"] .card-detail-disclosure-chevron {
  transform: rotate(90deg);
  color: var(--v9-text-mute);
}
.v9-dock-detail .card-detail-disclosure-inner {
  display: grid;
  gap: var(--v9-space-3);
  padding-bottom: var(--v9-space-3);
}

/* On phone the dock is a full-screen slide-over; give the hero a touch more
   room since there's no height pressure from a pinned dock. */
@media (max-width: 700px) {
  .v9-dock-detail .card-detail-visual-stage > * { width: min(13rem, 42vw) !important; }
}