/* Data terminal skin. Figures: JetBrains Mono so payments stack. Text: Public Sans.
   Accent is a 1px brass rule, the colour of a ledger line, and nothing wider. */

:root {
  --ground: #171719;
  --surface: #131217;
  --raised: #212023;
  --border: #222224;
  --rule: #1b1a1f;
  --control: #3a3a3e;
  --text: #ffffff;
  --muted: #8a8c92;
  --accent: #c4a574;
  --positive: #44a282;
  --negative: #e5566f;
  --warning: #d9a441;
  --radius-card: 6px;
  --fs-title: 26px;
  --fs-section: 20px;
  --fs-body: 13px;
  --fs-small: 12px;
}

html {
  font-size: 16px !important;
}

html, body {
  background: var(--ground) !important;
  color: var(--text) !important;
  font-family: "Public Sans", system-ui, sans-serif !important;
}

body {
  font-size: var(--fs-body);
}

body {
  background-image: none !important;
}

h1 {
  font-size: var(--fs-title) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
}

.engine-panel h2,
.engine-panel h3 {
  font-size: var(--fs-section) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
}

.uppercase,
.tracking-wide,
.tracking-wider,
.tracking-widest {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

header {
  position: static !important;
  background: var(--ground) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.glass-panel,
aside > div,
.engine-panel,
.fintech-lead-card,
.solution-card,
.solution-card-emerald,
.solution-card-blue,
.solution-card-amber,
.modal-card,
.bg-slate-900,
.bg-slate-900\/90,
.bg-slate-900\/80,
.bg-slate-900\/60,
.bg-slate-900\/50,
.bg-slate-950,
.bg-slate-950\/60,
.bg-slate-950\/40,
[class*="bg-slate-9"],
[class*="bg-slate-8"],
[class*="bg-gradient"],
[class*="bg-emerald"],
[class*="bg-teal"],
[class*="bg-blue"],
[class*="from-emerald"],
[class*="from-blue"],
[class*="from-teal"] {
  background-color: var(--surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.glass-panel,
.engine-panel,
aside > div,
.fintech-lead-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
}

.rounded-2xl,
.rounded-xl,
.rounded-lg,
.rounded-md,
.rounded,
.rounded-full {
  border-radius: var(--radius-card) !important;
}

[class*="text-emerald"],
[class*="text-teal"],
[class*="text-blue"],
[class*="text-sky"],
[class*="text-cyan"] {
  color: var(--text) !important;
}

[class*="border-emerald"],
[class*="border-teal"],
[class*="border-blue"],
[class*="border-sky"] {
  border-color: var(--border) !important;
}

.text-slate-500,
.text-slate-600,
.text-slate-700,
[class*="text-slate-5"],
[class*="text-slate-6"] {
  color: var(--muted) !important;
}

.text-white,
.text-slate-100,
.text-slate-200,
.text-slate-300 {
  color: var(--text);
}

.text-slate-400 {
  color: var(--muted) !important;
}

.text-xs,
[class*="text-[8px]"],
[class*="text-[9px]"],
[class*="text-[10px]"],
[class*="text-[11px]"] {
  font-size: var(--fs-small) !important;
}

svg text {
  font-size: 12px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

button,
.tab-btn,
.ws-chip,
.category-chip,
.toggle-btn,
.preset-chip,
.workflow-step-btn,
.fintech-cta-btn {
  background-color: var(--raised) !important;
  background-image: none !important;
  color: var(--muted) !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 500;
}

button:hover,
.tab-btn:hover,
.ws-chip:hover {
  color: var(--text) !important;
  transform: none !important;
}

.tab-btn.active,
.ws-chip.active,
.toggle-btn.active,
.category-chip.active,
.preset-chip.active,
.workflow-step-btn.active,
.mortgage-term-btn.active,
.refinance-term-btn.active,
.affordability-term-btn.active,
.biweekly-term-btn.active,
.autoloan-term-btn.active,
.personalloan-term-btn.active,
.autorefi-term-btn.active,
.student-term-btn.active,
.heloc-term-btn.active,
.amort-modal-preset-btn.active,
button.active {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  border-color: transparent !important;
  border-bottom: 1px solid var(--accent) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

.tab-btn.active::before,
.tab-btn.active::after {
  content: none !important;
  box-shadow: none !important;
}

input,
select,
textarea {
  background-color: var(--raised) !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--control) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}

input[type="range"] {
  accent-color: var(--accent);
  height: 2px;
  background: var(--control) !important;
  border: none !important;
  border-radius: 0 !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 14px;
  border-radius: 0;
  background: var(--accent);
  border: none;
  box-shadow: none;
}

.font-mono,
.font-mono-num,
.output-value,
td,
input[type="number"],
output {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* The one physical object: a flat tally plate. Digits stay upright. */
.result-display-card {
  position: relative;
  background: var(--raised) !important;
  background-image: none !important;
  border: 1px solid #323136 !important;
  border-bottom: 8px solid #0c0b10 !important;
  border-radius: var(--radius-card) !important;
  box-shadow: inset 0 -1px 0 var(--accent) !important;
  margin-bottom: 16px;
}

.solution-card,
.solution-card-emerald,
.solution-card-blue,
.solution-card-amber,
.fintech-lead-card,
[class*="border-emerald"],
[class*="border-teal"],
[class*="border-green"] {
  border-color: var(--border) !important;
}

.engine-panel,
.engine-panel.overflow-hidden {
  overflow: visible !important;
}

.rentbuy-verdict-rent,
.rentbuy-verdict-buy,
.rentbuy-verdict-tie {
  background: var(--raised) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

.session-sheet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.session-sheet p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
}

#session-sheet-count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

#session-sheet-go {
  margin-left: auto;
  padding: 6px 0;
  background: transparent !important;
  color: var(--text) !important;
  border: none !important;
  border-bottom: 1px solid var(--accent) !important;
  border-radius: 0 !important;
  cursor: pointer;
}

.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--raised);
  color: var(--text);
  border-bottom: 1px solid var(--accent);
  font-weight: 600;
  font-size: 14px;
}

::selection {
  background: var(--accent);
  color: #171719;
}

.modal-overlay:not(.active),
.drawer-panel:not(.active),
.toast-notice:not(.show) {
  visibility: hidden !important;
}

.modal-overlay.active,
.drawer-panel.active,
.toast-notice.show {
  visibility: visible !important;
}

html:not(.dark) {
  --ground: #f3f1ec;
  --surface: #fffdf8;
  --raised: #efeae2;
  --border: #e3ddd2;
  --rule: #e3ddd2;
  --control: #d7d0c4;
  --text: #1c1b19;
  --muted: #5e5a53;
  --accent: #8a6232;
}

html:not(.dark) .result-display-card::after {
  background: #d9d2c6;
}

@media print {
  .result-display-card::after,
  .session-sheet,
  #session-sheet {
    display: none !important;
  }
}

.tab-btn.active,
.ws-chip.active,
.toggle-btn.active,
.category-chip.active,
.preset-chip.active,
.workflow-step-btn.active,
button.active,
#session-sheet-go {
  border-color: transparent !important;
  border-bottom: 1px solid var(--accent) !important;
  color: var(--text) !important;
  background-color: transparent !important;
  background-image: none !important;
}

a.tab-btn,
#tab-banking-hub,
#session-sheet-go {
  text-decoration: none;
}

.calculator-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 16px 40px;
}

.calculator-index h2,
.calculator-index > p {
  grid-column: 1 / -1;
}

.calculator-index h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 0;
}

.calculator-index h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 16px 0 8px;
}

.calculator-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calculator-index li {
  margin: 0 0 8px;
}

.calculator-index a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-size: 14px;
}

.calculator-index a:hover {
  border-bottom-color: var(--accent);
}

@media (max-width: 800px) {
  .calculator-index {
    grid-template-columns: 1fr;
  }
}
.engine-panel,
.result-display-card,
.glass-panel,
.solution-card,
.fintech-lead-card,
aside > div,
.modal-card {
  border-radius: 6px !important;
}