/* ─────────────────────────────────────────────────────────────────────
   DiveOS info card — .dv-card

   Promoted from the Booking Details "Forked card shell" (the page-scoped
   `.bk-detail .card` in account/bookings.css), which the product owner blessed
   as the canonical info-card shell: white surface, 1px hairline, radius-lg,
   NO resting shadow, and an uppercase eyebrow head that flows straight into the
   body (no divider). Reproduced here verbatim as an unscoped component so any
   surface can use it.

   Interaction states (--interactive / --selected) are modeled on the design-
   system handoff's `.dos-card` (Design/templates/rails-handoff): interactive
   cards lift on hover; selected cards take an accent border.

   Spacing note: the 22px vertical padding is intentionally OFF the 8pt grid —
   it's preserved to match the blessed reference pixel-for-pixel. Horizontal
   padding and head/actions gaps use the --space-* scale. If the 22px is later
   reconciled to 24px (--space-6), change it here once.
   Token-driven; @imported from application.css after components/booking-v2.css.
   ───────────────────────────────────────────────────────────────────── */

.dv-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
}
/* Table-wrapper card (heading head + a flush .dv-table-wrap body via bare:true):
   the card owns the frame, so the nested table-wrap drops its own border/radius
   — no box-in-box. The card's overflow:hidden clips the table to the radius. */
.dv-card > .dv-table-wrap {
  border: 0;
  border-radius: 0;
  transition: box-shadow var(--t-fast) var(--ease-standard),
              border-color var(--t-fast) var(--ease-standard),
              background-color var(--t-fast) var(--ease-standard);
}

/* Head — uppercase eyebrow label (left) + optional actions (right). Top-only
   padding so the head flows into the body with no divider. */
.dv-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--space-6) 0;
}
.dv-card__title {
  display: flex;
  align-items: center;
  gap: 7px;                 /* optical icon gap; off-grid by intent */
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.dv-card__title i,
.dv-card__title svg { flex-shrink: 0; color: var(--muted-2); }
/* Display-title head — the 15px General Sans heading (matches
   shared/patterns/_card_title), for cards whose head is a prominent section
   heading rather than the 11px uppercase eyebrow. Pair with --divided when the
   head also carries an action. */
.dv-card__title--display {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  font-family: var(--font-display);
}
.dv-card__actions { display: flex; align-items: center; gap: var(--space-2); }

.dv-card__body { padding: 22px var(--space-6); }

/* ── Variants ────────────────────────────────────────────────────────
   --raised  : soft elevation (the bk2-card treatment) for cards that float
               above the canvas rather than sit flush in a column.
   --divided : head sits in its own band with a hairline divider, instead of
               flowing into the body. Use when the head carries an action row
               or the body is dense. */
.dv-card--raised { box-shadow: var(--shadow-sm); }
.dv-card--divided .dv-card__head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

/* ── Interaction states (from handoff .dos-card) ─────────────────────────
   Apply --interactive only when the whole card is a click target. */
.dv-card--interactive { cursor: pointer; }
.dv-card--interactive:hover {
  box-shadow: var(--shadow-hover);
  background-color: var(--canvas);
}
.dv-card--interactive:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.dv-card--selected { border-color: var(--accent); }