/* Aliases so existing PHP inline vars match the Next.js token names */
:root {
  --brass: var(--color-brass);
  --brass-hi: var(--color-brass-hi);
  --brass-deep: var(--color-brass-deep);
  --up: var(--color-up);
  --down: var(--color-down);
  --line: var(--color-line);
  --line-soft: var(--color-line-soft);
  --muted: var(--color-muted);
  --faint: var(--color-faint);
  --porcelain: var(--color-porcelain);
  --panel: var(--color-panel);
  --panel-2: var(--color-panel-2);
  --ground: var(--color-ground);
  --ground-2: var(--color-ground-2);
}

.page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.page-title h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.tiles {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .tiles { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1280px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tile { padding: 1rem; position: relative; overflow: hidden; }
.tile .v {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 0.5rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-line);
}
.grid-2 { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgb(0 0 0 / 0.7);
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow: auto;
}
.modal-bg.open { display: flex; }
.modal {
  width: min(560px, 100%);
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 3px;
  margin-top: 2rem;
}
.modal.wide { width: min(820px, 100%); }
.modal-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-line);
}
.hide-sm { display: none; }
@media (min-width: 640px) {
  .hide-sm { display: table-cell; }
}
.alert-warn {
  border: 1px solid color-mix(in oklab, var(--color-brass) 35%, transparent);
  background: color-mix(in oklab, var(--color-brass) 7%, transparent);
  padding: 0.75rem 1rem;
  border-radius: 3px;
  margin-bottom: 1.5rem;
}
.muted { color: var(--color-muted); }
.faint { color: var(--color-faint); }
.hero { font-family: var(--font-display); }
.wrap { width: min(1180px, 100%); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.flash-ok, .flash-err {
  border-radius: 2px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.flash-ok {
  border: 1px solid color-mix(in oklab, var(--color-up) 35%, transparent);
  background: color-mix(in oklab, var(--color-up) 8%, transparent);
  color: var(--color-up);
}
.flash-err {
  border: 1px solid color-mix(in oklab, var(--color-down) 35%, transparent);
  background: color-mix(in oklab, var(--color-down) 8%, transparent);
  color: var(--color-down);
}

/* Dashboard mobile drawer */
.bfx-drawer { display: none; }
.bfx-drawer.open { display: block; }

#hero-alloc .bar { height: 3px; }

/* Projection slider: native range with a 3px track was 3px tall, so the
   thumb could not be grabbed (and overflow:hidden on the panel ate it). */
.bfx-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 1.25rem 0 0;
  background: transparent;
  cursor: pointer;
}
.bfx-slider:focus { outline: none; }
.bfx-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgb(242 162 60 / 0.28);
}
.bfx-slider::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--color-line);
  border-radius: 999px;
}
.bfx-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7.5px;
  border-radius: 999px;
  background: var(--color-brass);
  border: 2px solid #04121a;
  box-shadow: 0 0 0 3px rgb(242 162 60 / 0.22);
  cursor: grab;
}
.bfx-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.bfx-slider::-moz-range-track {
  height: 3px;
  background: var(--color-line);
  border-radius: 999px;
  border: none;
}
.bfx-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-brass);
  border: 2px solid #04121a;
  box-shadow: 0 0 0 3px rgb(242 162 60 / 0.22);
  cursor: grab;
}