/*
 * Design Ledger — presentation-only preview layer.
 *
 * This file deliberately sits after the base theme/layout styles. It changes
 * the visual language and responsive composition through tokens and selectors;
 * the game engine, content data, DOM ids, and JS contracts remain unchanged.
 * Set localStorage.sv_ui_style to "classic" to bypass this preview.
 */

body[data-ui-style="ledger"] {
  background: var(--sv-bg);
}

body[data-ui-style="ledger"] .header {
  background: var(--sv-header-grad);
  border-bottom: 1px solid color-mix(in srgb, var(--sv-accent) 38%, transparent);
  box-shadow: 0 8px 24px rgba(2,10,18,.24);
}
body[data-ui-style="ledger"] .header-hud {
  border: 1px solid rgba(166,214,214,.18);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}
body[data-ui-style="ledger"] .header h1 {
  color: var(--sv-hud-text);
  letter-spacing: -.025em;
  text-shadow: none;
}
body[data-ui-style="ledger"] .header h1::after {
  content: "LIFE LEDGER";
  align-self: flex-end;
  margin: 0 0 3px -2px;
  color: var(--sv-accent);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .16em;
}
body[data-ui-style="ledger"] .header .bloodline { color: var(--sv-hud-text); text-shadow: none; }
body[data-ui-style="ledger"] .header-hud * { text-shadow: none; }
body[data-ui-style="ledger"] .header-hud { color: var(--sv-hud-text); }
body[data-ui-style="ledger"] .header-hud [style*="color:"] { color: var(--sv-hud-text) !important; }

body[data-ui-style="ledger"] .main {
  max-width: 1520px;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(230px, 280px);
  gap: 18px;
  padding: 20px;
}
body[data-ui-style="ledger"] .panel {
  border-color: rgba(111,163,173,.25);
  background: var(--sv-surface);
  box-shadow: var(--sv-panel-shadow);
}
body[data-ui-style="ledger"] .panel h2 {
  color: var(--sv-text);
  border-bottom-color: color-mix(in srgb, var(--sv-accent) 22%, transparent);
  font-size: .86rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body[data-ui-style="ledger"] #panel-content { min-height: 520px; }
body[data-ui-style="ledger"] #panel-stats,
body[data-ui-style="ledger"] #panel-jobs { align-self: start; }
body[data-ui-style="ledger"] #sidebar-cash {
  background: linear-gradient(135deg, rgba(99,230,190,.12), rgba(20,57,69,.42)) !important;
  border-color: rgba(99,230,190,.36) !important;
}
body[data-ui-style="ledger"] .tab-bar-scroll {
  margin: -4px -4px 16px;
  padding: 4px;
}
body[data-ui-style="ledger"] .tab-bar { gap: 6px; }
body[data-ui-style="ledger"] .tab {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--sv-text-muted);
  font-size: .76rem;
  font-weight: 700;
}
body[data-ui-style="ledger"] .tab:hover { background: rgba(99,230,190,.08); color: var(--sv-text); }
body[data-ui-style="ledger"] .tab.active {
  background: rgba(99,230,190,.14);
  border-color: rgba(99,230,190,.34);
  color: var(--sv-accent);
}
body[data-ui-style="ledger"] .btn { border-radius: 11px; font-weight: 750; }
body[data-ui-style="ledger"] .btn-primary {
  background: linear-gradient(135deg, var(--sv-accent), var(--sv-accent-h));
  color: var(--sv-primary-ink);
  box-shadow: 0 6px 16px rgba(60,203,160,.18);
}
body[data-ui-style="ledger"] .btn-primary:hover { background: linear-gradient(135deg, var(--sv-accent-h), var(--sv-accent)); }
body[data-ui-style="ledger"] .btn-secondary { border: 1px solid rgba(116,176,187,.35); }
body[data-ui-style="ledger"] .activity-item,
body[data-ui-style="ledger"] .job-node,
body[data-ui-style="ledger"] .finance-card {
  border-color: rgba(111,163,173,.24);
  border-radius: 12px;
  box-shadow: var(--sv-card-shadow);
}
body[data-ui-style="ledger"] .activity-item:hover,
body[data-ui-style="ledger"] .job-node:hover { border-color: rgba(99,230,190,.55); }
body[data-ui-style="ledger"] input,
body[data-ui-style="ledger"] select,
body[data-ui-style="ledger"] textarea {
  border-color: rgba(111,163,173,.38);
  border-radius: 9px;
}
body[data-ui-style="ledger"] :focus-visible {
  outline: 3px solid rgba(99,230,190,.42);
  outline-offset: 2px;
}

/* The stat rail is information-dense on desktop and breathable on phones. */
body[data-ui-style="ledger"] #life-stats-bars {
  display: grid;
  gap: 7px;
}
body[data-ui-style="ledger"] .stat-row { border-bottom-color: rgba(111,163,173,.17); }
body[data-ui-style="ledger"] #compact-stats-bar {
  background: rgba(17,34,49,.92);
  border-color: rgba(99,230,190,.22);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

@media (max-width: 999px) and (min-width: 760px) {
  body[data-ui-style="ledger"] .main { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }
  body[data-ui-style="ledger"] #panel-jobs { grid-column: 1 / -1; }
}

@media (max-width: 759px) {
  body[data-ui-style="ledger"] { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  body[data-ui-style="ledger"] .header { box-shadow: 0 5px 16px rgba(2,10,18,.28); }
  body[data-ui-style="ledger"] .hud-strip { background: rgba(9,20,34,.94); }
  body[data-ui-style="ledger"] .header-hud { border-right: 1px solid rgba(116,176,187,.18); }
  body[data-ui-style="ledger"] .header h1::after { display: none; }
  body[data-ui-style="ledger"] .main { padding: 7px; gap: 7px; }
  body[data-ui-style="ledger"] #compact-stats-bar {
    border-radius: 12px;
    padding: 7px 8px;
    gap: 5px;
  }
  body[data-ui-style="ledger"] .mob-nav-grid { gap: 7px; padding: 7px 2px; }
  body[data-ui-style="ledger"] .mob-nav-btn {
    min-height: 56px;
    border-color: rgba(111,163,173,.3);
    background: linear-gradient(145deg, rgba(24,47,66,.98), rgba(15,31,48,.98));
    box-shadow: 0 5px 14px rgba(0,0,0,.14);
  }
  body[data-ui-style="ledger"] .mob-nav-btn:active,
  body[data-ui-style="ledger"] .mob-nav-btn:hover { border-color: var(--sv-accent); background: rgba(99,230,190,.12); }
  body[data-ui-style="ledger"] .mob-nav-icon { font-size: 1.15rem; }
  body[data-ui-style="ledger"] .mob-nav-label { color: var(--sv-text); font-size: .74rem; }
  body[data-ui-style="ledger"] .mob-nav-more { border-color: rgba(111,163,173,.3); background: rgba(13,28,44,.98); }
  body[data-ui-style="ledger"] #panel-content,
  body[data-ui-style="ledger"] #panel-stats { background: var(--sv-bg); }
  body[data-ui-style="ledger"] #mob-tab-topbar { background: #102235; border-bottom-color: rgba(99,230,190,.3); }
  body[data-ui-style="ledger"] .mob-back-btn { border-color: rgba(99,230,190,.34); background: rgba(99,230,190,.1); }
  body[data-ui-style="ledger"] .tab-content h2 { letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-style="ledger"] *, body[data-ui-style="ledger"] *::before, body[data-ui-style="ledger"] *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}