/* ============================================================================
   shared/dash-stage.css — the dashboard skin.   [slice: demo-dashboard-finance]

   Every selector starts with (or descends from) a .db- class (R4 — the .hero collision of 2026-09-06
   is why). No hue absent from site.css (R5): surfaces var(--dd)/var(--dm), text var(--pa), muted
   var(--gl), accent var(--b), primary var(--p), warn #E07A72; the five aging shades and chart fills
   are color-mix()/rgba() of --p/--b/--gl or the warn literal. Square corners. The only motion is the
   count-up (JS rAF) and the db-flash keyframes, disabled under prefers-reduced-motion (R6).
   ============================================================================ */

.db-wrap { display: block; }
.db-root { display: flex; flex-direction: column; gap: 22px; padding: 8px 0 48px; color: var(--pa); }

/* ── bar ─────────────────────────────────────────────────────────────────── */
.db-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--d); padding-bottom: 14px; }
.db-eyebrow { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--b); }
.db-company { font-family: var(--fd); font-size: 1.5rem; margin-top: 2px; }
.db-company-name { margin-right: 8px; }
.db-fict { color: var(--gl); font-family: var(--fb); font-size: 0.95rem; }
.db-asof { color: var(--gl); font-size: 0.9rem; margin-top: 2px; }
.db-asof-k { margin-right: 6px; }
.db-bar-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.db-lens-switch { display: inline-flex; border: 1px solid var(--d); }
.db-lens { background: var(--dd); color: var(--gl); border: 0; padding: 8px 14px; font-family: var(--fb); font-size: 0.95rem; cursor: pointer; }
.db-lens + .db-lens { border-left: 1px solid var(--d); }
.db-lens-on { background: var(--p); color: var(--pa); }
.db-reset { background: transparent; color: var(--b); border: 1px solid var(--b); padding: 8px 14px; font-family: var(--fb); cursor: pointer; }
.db-reset:hover { background: var(--b); color: var(--ink); }

/* ── tiles ───────────────────────────────────────────────────────────────── */
.db-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.db-tile { background: var(--dm); border: 1px solid var(--d); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.db-tile-label { color: var(--gl); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.db-tile-figure { font-family: var(--fd); font-size: 1.7rem; }
.db-tile-sub { color: var(--gl); font-size: 0.85rem; }
.db-sparkslot { height: 26px; color: var(--p); }
.db-queue { display: flex; flex-direction: column; gap: 4px; }
.db-queue-item { display: flex; align-items: baseline; gap: 8px; }
.db-queue-label { color: var(--gl); font-size: 0.85rem; }

/* db-num = a clickable figure; db-static = a leaf figure */
.db-num { background: transparent; border: 0; color: var(--pa); font: inherit; cursor: pointer; padding: 0; border-bottom: 1px dotted var(--b); }
.db-num:hover { color: var(--b); }
.db-static { color: var(--pa); }

/* ── breadcrumb + drill ──────────────────────────────────────────────────── */
.db-drill { background: var(--dd); border: 1px solid var(--d); padding: 12px 14px; }
.db-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 0.9rem; }
.db-crumb { background: transparent; border: 0; color: var(--b); cursor: pointer; font: inherit; padding: 0; }
.db-crumb-current { color: var(--pa); }
.db-crumb-sep { color: var(--gl); }

/* ── tables ──────────────────────────────────────────────────────────────── */
.db-table-wrap { overflow-x: auto; }
.db-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.db-table th, .db-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--d); white-space: nowrap; }
.db-table th { color: var(--gl); font-weight: 600; text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.04em; }
.db-table .db-r { text-align: right; }
.db-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; background: color-mix(in srgb, var(--p) 40%, var(--dm)); color: var(--pa); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* ── summary ─────────────────────────────────────────────────────────────── */
.db-summary { background: var(--dm); border-left: 3px solid var(--b); padding: 14px 18px; font-size: 1.02rem; line-height: 1.5; }

/* ── panels ──────────────────────────────────────────────────────────────── */
.db-panels { display: flex; flex-direction: column; gap: 18px; }
.db-panel { background: var(--dm); border: 1px solid var(--d); width: 100%; }
.db-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--d); }
.db-panel-title { font-family: var(--fd); font-size: 1.15rem; margin: 0; }
.db-panel-lede { color: var(--gl); font-size: 0.9rem; margin: 4px 0 0; }
.db-collapse { background: transparent; color: var(--gl); border: 1px solid var(--d); padding: 4px 10px; cursor: pointer; font-family: var(--fb); font-size: 0.82rem; white-space: nowrap; }
.db-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.db-panel.db-collapsed .db-panel-head { border-bottom: 0; }
.db-foot-wall { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--d); color: var(--gl); font-size: 0.85rem; }
.db-lock { width: 14px; height: 14px; flex: 0 0 auto; color: var(--gl); }
.db-lock-body { fill: currentColor; }
.db-lock-shackle { stroke: currentColor; stroke-width: 1.4; }

/* ── blocks (generic wrappers; the LOOK of each Finance panel is unchanged) ── */
.db-block-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.db-block-hbar, .db-block-line, .db-chartslot, .db-block-ranked { display: block; } /* ranked styling lives on .db-table */

/* ── form block (was the invoice form) ─────────────────────────────────────── */
.db-block-form { display: flex; flex-direction: column; gap: 12px; }
.db-field { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.db-field-k { color: var(--gl); font-size: 0.82rem; }
.db-field-select, .db-field-number, .db-line-sku, .db-line-qty { background: var(--dd); color: var(--pa); border: 1px solid var(--d); padding: 7px 9px; font: inherit; }
.db-lines { display: flex; flex-direction: column; gap: 8px; }
.db-line { display: grid; grid-template-columns: 1fr 90px 120px auto; gap: 8px; align-items: center; }
.db-line-total { text-align: right; }
.db-line-remove, .db-add-line { background: transparent; color: var(--b); border: 1px solid var(--d); padding: 6px 10px; cursor: pointer; font-family: var(--fb); font-size: 0.82rem; }
.db-totals { display: flex; flex-direction: column; gap: 4px; max-width: 300px; margin-left: auto; }
.db-tot { display: flex; justify-content: space-between; color: var(--gl); }
.db-tot-strong { color: var(--pa); font-weight: 600; border-top: 1px solid var(--d); padding-top: 4px; }
.db-submit { background: var(--p); color: var(--pa); border: 0; padding: 10px 18px; font-family: var(--fb); font-size: 1rem; cursor: pointer; align-self: flex-start; }
.db-submit[disabled] { opacity: 0.5; cursor: not-allowed; }
.db-receipts { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--d); padding-top: 10px; }
.db-receipt { color: var(--b); font-size: 0.9rem; }

/* ── ranked-row action button + reminder/draft drawer ────────────────────── */
.db-action { background: transparent; color: var(--b); border: 1px solid var(--b); padding: 5px 10px; cursor: pointer; font-family: var(--fb); font-size: 0.8rem; white-space: nowrap; }
.db-drawer { background: var(--dd); border: 1px solid var(--b); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.db-drawer-row { display: flex; gap: 10px; font-size: 0.9rem; }
.db-drawer-k { color: var(--gl); min-width: 60px; }
.db-drawer-body { background: var(--dm); border: 1px solid var(--d); padding: 12px; white-space: pre-wrap; font-family: var(--fb); font-size: 0.9rem; color: var(--pa); margin: 0; }
.db-drawer-actions { display: flex; gap: 10px; }
.db-copy { background: var(--b); color: var(--ink); border: 0; padding: 6px 14px; cursor: pointer; font-family: var(--fb); }
.db-close { background: transparent; color: var(--gl); border: 1px solid var(--d); padding: 6px 14px; cursor: pointer; font-family: var(--fb); }

/* ── stats block (was the cash in-panel tiles) + note block (was the gap line) */
.db-stat { background: var(--dd); border: 1px solid var(--d); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.db-stat-k { color: var(--gl); font-size: 0.8rem; }
.db-stat-v { font-family: var(--fd); font-size: 1.2rem; }
.db-block-note { color: var(--b); font-size: 0.95rem; margin: 0; border-left: 3px solid var(--b); padding-left: 12px; }

/* ── charts (SVG, fills via class; R5) ───────────────────────────────────── */
.db-chart { display: block; width: 100%; }
.db-hbar { height: 20px; }
.db-hbar .db-seg-0 { fill: color-mix(in srgb, var(--b) 60%, var(--dm)); }
.db-hbar .db-seg-1 { fill: color-mix(in srgb, var(--p) 45%, var(--dm)); }
.db-hbar .db-seg-2 { fill: color-mix(in srgb, var(--p) 72%, var(--dm)); }
.db-hbar .db-seg-3 { fill: color-mix(in srgb, #E07A72 55%, var(--dm)); }
.db-hbar .db-seg-4 { fill: #E07A72; }
.db-hbar .db-seg-empty { fill: var(--d); }
.db-line-chart { height: 160px; }
.db-line-chart .db-line { stroke: var(--b); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.db-line-chart .db-floor { stroke: var(--gl); stroke-width: 0.8; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.db-line-chart .db-mark { fill: #E07A72; }
.db-spark { height: 26px; }
.db-spark .db-spark-line { stroke: var(--p); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* ── flash (R6) ──────────────────────────────────────────────────────────── */
@keyframes db-flash { 0% { background: color-mix(in srgb, var(--b) 55%, transparent); } 100% { background: transparent; } }
.db-flash { animation: db-flash 1.2s ease-out; }

/* ── the no-JS hero + hidden ─────────────────────────────────────────────── */
.db-root [hidden] { display: none !important; }

/* ── responsive (R-1.6) ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .db-bar { align-items: flex-start; }
  .db-line { grid-template-columns: 1fr 70px 100px auto; }
}
@media (max-width: 600px) {
  .db-bar-controls { width: 100%; justify-content: space-between; }
  .db-line { grid-template-columns: 1fr 1fr; }
  .db-totals { margin-left: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .db-flash { animation: none; }
}