/* ==========================================================================
   SOLVO — Base: reset, typography, form controls, buttons
   Every value here comes from tokens.css. No raw colors.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body { min-height: 100%; }
body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: var(--lh-tight); letter-spacing: var(--track-tight); font-weight: var(--fw-bold); }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-hero); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }
svg { display: block; }

/* Money and any other figure the eye scans in a column must line up digit
   for digit. Tabular numerals are not decoration — they are what makes a
   column of balances comparable at a glance. */
.money, .kpi, td.money, th.money,
.ui-summary-cell strong, .ui-product-money, .ui-domain-money,
.personal-debt-card-total, .debt-category-total, .investor-amount,
.tnum { font-variant-numeric: tabular-nums; letter-spacing: var(--track-num); }

td.money, th.money, .money { text-align: right; }

/* --- utility ------------------------------------------------------------ */
[hidden], .hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.positive, .ok-text { color: var(--pos); font-weight: var(--fw-semi); }
.negative, .danger-text { color: var(--neg); font-weight: var(--fw-semi); }
.warning { color: var(--warn); }
.wide { grid-column: 1 / -1; }
.stack { display: grid; gap: var(--s-3); }
.grid { display: grid; gap: var(--s-4); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.subtle-divider { height: 1px; background: var(--line); margin: var(--s-1) 0; }

.eyebrow {
  margin: 0 0 var(--s-1);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.group-title, .debt-section-title, .tm-fixed-title, .tmobile-side-title, .taxonomy-title {
  margin: var(--s-4) 0 var(--s-2);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* ==========================================================================
   Form controls — one height, one radius, one focus treatment
   ========================================================================== */
button, input, select, textarea { font: inherit; color: inherit; }

label {
  display: grid;
  gap: var(--s-1);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}

input, select, textarea {
  width: 100%;
  min-height: var(--ctrl-h);
  padding: 7px 11px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
textarea { min-height: 84px; padding: 9px 11px; resize: vertical; line-height: var(--lh-snug); }

select {
  appearance: none;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible,
[tabindex]:focus-visible { outline: none; box-shadow: var(--ring); }

input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; }

/* --- toggle switch ------------------------------------------------------ */
.compact-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
}
.compact-switch input {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 19px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface-soft);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.compact-switch input::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--t-fast), background var(--t-fast);
}
.compact-switch input:checked { background: var(--brand); border-color: var(--brand); }
.compact-switch input:checked::after { transform: translateX(15px); background: var(--on-brand); }
.compact-switch span { font-size: var(--fs-sm); font-weight: var(--fw-semi); }

/* ==========================================================================
   Buttons
   Exactly one primary action per surface. Everything else is ghost or quiet
   — the previous version painted every card action in the accent color,
   which left no hierarchy and made the page feel like an alarm.
   ========================================================================== */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--ctrl-h);
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
button:hover { background: var(--surface-soft); color: var(--ink); border-color: var(--muted); }
button:disabled, button[disabled] { opacity: .5; cursor: not-allowed; }
button:disabled:hover { background: var(--surface); border-color: var(--line-strong); }

button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
button.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }

button.ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink-2); }
button.ghost:hover { background: var(--surface-soft); color: var(--ink); }

/* A quiet action: reads as a link, keeps the button hit target. */
button.quiet, button.product-button {
  height: var(--ctrl-h-sm);
  padding: 0 9px;
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}
button.quiet:hover, button.product-button:hover { background: var(--surface-soft); color: var(--ink); border-color: transparent; }

button.danger { border-color: var(--neg); color: var(--neg); background: transparent; }
button.danger:hover { background: var(--neg-soft); color: var(--neg); border-color: var(--neg); }

.small-btn, button.small-btn {
  height: var(--ctrl-h-sm);
  padding: 0 9px;
  font-size: var(--fs-xs);
  border-radius: var(--r-xs);
}

.icon-btn {
  width: var(--ctrl-h);
  height: var(--ctrl-h);
  padding: 0;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  font-size: 18px;
  line-height: 1;
}

.button-row, .top-actions, .toolbar, .modal-actions,
.compact-actions, .workspace-actions, .template-actions,
.taxonomy-actions, .promo-card-actions, .financial-product-actions,
.ui-workspace-actions, .dashboard-card-actions, .category-toolbar-actions,
.pill-actions, .taxonomy-pill-actions, .admin-product-columns {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.modal-actions, .detail-drawer-actions, .ui-workspace-actions,
.workspace-actions, .category-toolbar-actions { justify-content: flex-end; }

.form-message { min-height: 18px; margin: 0; color: var(--warn); font-size: var(--fs-sm); }

/* --- print -------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .toolbar, .modal, .toast, .detail-drawer,
  .top-actions, button { display: none !important; }
  .app-shell { display: block; }
  .main { padding: 0; }
  .view { display: block !important; }
  .panel, .mini-card, .table-shell { box-shadow: none; border-color: var(--print-line); }
}