/* ============================================================
   summary-card.css — DiveOS Summary Card (design-system component).
   Header band · icon-tile rows · tinted total footer.
   Palette is a cool blue-gray surface (NOT the white card surface) so
   the summary reads as a distinct "running tally" object:
     · card    #F2F5F9   · icon tile #E3EAF2   · footer band #E3EAF1
   Type: label 12px · row title 14px/700 · desc 12px · icon 16 · price 24.
   ============================================================ */
.ds-sum {
  --ds-sum-bg:     #F2F5F9;
  --ds-sum-tile:   #E3EAF2;
  --ds-sum-line:   var(--slate-200);
  --ds-sum-foot:   #E3EAF1;
  --ds-sum-bd:     #D5DEEA;   /* cool blue-gray outer border — bespoke to this card */
  background: var(--ds-sum-bg);
  border: 1px solid var(--ds-sum-bd);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 1px 0 rgba(255,255,255,.6) inset;
  overflow: hidden;
}

/* header band */
.ds-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px 13px; }
.ds-sum-head .t { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--slate-500, var(--slate-500)); white-space: nowrap; }
.ds-sum-head .st { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.ds-sum-head .st.ok { color: var(--confirmed); }

/* icon-tile rows */
.ds-sum-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--ds-sum-line); }
.ds-sum-row:first-of-type { border-top: 0; }
.ds-sum-row .ico { width: 36px; height: 36px; border-radius: var(--radius); background: var(--ds-sum-tile); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.ds-sum-row .main { flex: 1; min-width: 0; }
.ds-sum-row .main .nm { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); letter-spacing: -0.005em; color: var(--ink); line-height: 1.2; }
.ds-sum-row .main .sub { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; line-height: 1.2; }
.ds-sum-row .val { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }

/* progress strip (payment) */
.ds-sum-prog { padding: 13px 20px; border-top: 1px solid var(--ds-sum-line); }
.ds-sum-prog .bar { height: 7px; border-radius: 99px; background: rgba(100,116,139,0.20); overflow: hidden; }
.ds-sum-prog .bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .25s cubic-bezier(0.32,0.72,0,1); }
.ds-sum-prog .bar.full > span { background: var(--confirmed); }
.ds-sum-prog .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: var(--text-xs); }
.ds-sum-prog .row .paid { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.ds-sum-prog .row .paid.ok { color: var(--confirmed); }
.ds-sum-prog .row .total { color: var(--muted); }
.ds-sum-prog .row .total .mono { font-family: var(--font-mono); }

.ds-sum-state { display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-top: 1px solid var(--ds-sum-line); font-size: var(--text-xs); color: var(--gray-700); }
.ds-sum-state.ok { color: var(--confirmed); }
.ds-sum-state.no { color: var(--briefing); }
.ds-sum-state .ico { display: inline-flex; }
.ds-sum-defer { display: flex; align-items: baseline; justify-content: space-between; padding: 0 20px 12px; margin-top: -2px; font-size: var(--text-xs); color: var(--muted); }
.ds-sum-defer .mono { font-family: var(--font-mono); }

/* tinted total footer */
.ds-sum-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; background: var(--ds-sum-foot); border-top: 1px solid var(--ds-sum-line); }
.ds-sum-foot .k { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate-500, var(--slate-500)); }
.ds-sum-foot .v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1; }
.ds-sum-foot .v.accent { color: var(--accent); }
.ds-sum-foot .v.ok { color: var(--confirmed); }
.ds-sum-foot .v .cents { font-size: var(--text-md); color: var(--muted-2); }