/* ═══════════════════════════════════════════════════════════════
   THE DEMO SCREEN — two states of the same payout run.

   `data-identity` swaps how it looks.
   `data-mode` swaps what it says.

   The second half is the important one. A generic screen is not
   just plainer, it is *wrong about money*: it abbreviates amounts
   people have to reconcile, drops currency codes, shows a total
   that does not tie, and reports a failure with no reason. Those
   are content differences, not style ones, so they are authored
   as paired spans and toggled in CSS — no JS rewriting text.

   Console, Bloom and Signal moved to _future-identities.css.
   ═══════════════════════════════════════════════════════════════ */

.pv {
  container-type: inline-size;
  transition: background 220ms ease, color 220ms ease;
}
.pv .d-container { padding-left: var(--d-space-5); padding-right: var(--d-space-5); }
.pv .d-masthead { padding-top: var(--d-space-3); padding-bottom: var(--d-space-3); }
.pv .d-pagehead { padding-top: var(--d-space-6); padding-bottom: var(--d-space-4); }

@media (prefers-reduced-motion: reduce) {
  .pv { transition: none; }
}

/* ── Content states ───────────────────────────────────────────
   Both variants are in the DOM; one is hidden. Hidden content is
   removed from the accessibility tree by `display: none`, so a
   screen reader never hears both versions of a figure. */

.pv[data-mode="good"] .only-bad  { display: none; }
.pv[data-mode="bad"]  .only-good { display: none; }

/* ═══════════════════════════════════════════════════════════════
   WITHOUT DAYBOOK — what a coding agent writes unprompted.
   Competent-looking, anonymous, and wrong in six places.
   ═══════════════════════════════════════════════════════════════ */

.pv[data-identity="default"] {
  --d-paper:        #0F172A;
  --d-paper-raised: #1E293B;
  --d-paper-sunk:   #1E293B;
  --d-ink:          #E2E8F0;
  --d-ink-muted:    #94A3B8;
  --d-ink-faint:    #94A3B8;
  --d-rule:         #334155;
  --d-rule-faint:   #334155;
  --d-accent:       #8B5CF6;
  --d-credit:       #4ADE80;
  --d-hold:         #FACC15;
  --d-debit:        #F87171;
  --d-serif: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --d-mono:  ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
.pv[data-identity="default"] .d-masthead { border-bottom-color: #334155; }
.pv[data-identity="default"] .d-label,
.pv[data-identity="default"] .d-table th,
.pv[data-identity="default"] .d-nav a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
}
.pv[data-identity="default"] .d-display { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; }
.pv[data-identity="default"] .d-title { font-weight: 600; font-size: 18px; }
.pv[data-identity="default"] .d-stat-figure { font-weight: 700; letter-spacing: -0.02em; }
.pv[data-identity="default"] .d-stats {
  border: 0;
  gap: 12px;
  padding: 0 var(--d-space-5);
}
.pv[data-identity="default"] .d-stat {
  background: #1E293B;
  border: 0;
  border-radius: 12px;
}
.pv[data-identity="default"] .d-panel {
  background: #1E293B;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}
.pv[data-identity="default"] .d-panel-head,
.pv[data-identity="default"] .d-panel-foot { border-color: #334155; }
.pv[data-identity="default"] .d-avatar {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  color: #fff;
}
.pv[data-identity="default"] .d-status {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.pv[data-identity="default"] .d-status::before { display: none; }
.pv[data-identity="default"] .d-status[data-tone="credit"] { background: rgba(74,222,128,.15); }
.pv[data-identity="default"] .d-status[data-tone="hold"]   { background: rgba(250,204,21,.15); }
.pv[data-identity="default"] .d-status[data-tone="debit"]  { background: rgba(248,113,113,.15); }
.pv[data-identity="default"] .d-btn {
  border-radius: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
}
.pv[data-identity="default"] .d-btn-primary {
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  border-color: transparent;
  color: #fff;
}
.pv[data-identity="default"] .d-btn-secondary { border-color: #334155; color: #E2E8F0; }

/* The destructive action rendered as the loudest control on the
   screen — which is exactly what an agent does when nothing tells
   it otherwise, and what rule B6 forbids. */
.pv[data-identity="default"] .d-btn-danger {
  background: #DC2626;
  border-color: #DC2626;
  color: #fff;
}
.pv[data-identity="default"] .d-notice {
  border-radius: 8px;
  border-width: 1px;
  border-left-width: 4px;
  background: #1E293B;
}
.pv[data-identity="default"] .d-ref { color: #64748B; }
.pv[data-identity="default"] .d-status-group .d-caption { display: none; }

/* ═══════════════════════════════════════════════════════════════
   WITH DAYBOOK — the real stylesheet rendering the real classes.
   No component overrides; this block only pins the palette so the
   specimen does not follow the site's theme toggle mid-comparison.
   ═══════════════════════════════════════════════════════════════ */

.pv[data-identity="daybook"] {
  --d-paper:        #F7F6F2;
  --d-paper-raised: #FDFCF9;
  --d-paper-sunk:   #F1EFE8;
  --d-ink:          #1A1D1A;
  --d-ink-muted:    #514F45;
  --d-ink-faint:    #726F61;
  --d-rule:         #DAD7CC;
  --d-rule-faint:   #E6E3D9;
  --d-accent:       #1F4D3D;
  --d-accent-hover: #173B2E;
  --d-credit:       #1F4D3D;
  --d-hold:         #8A6A1F;
  --d-debit:        #8C2B22;
}