/* Global CSS Settings */
/* --------------------------------------------------------------------------- */
:root {
  --paper-dark:#0f1115; --plot-dark:#0e111a; --grid-dark:#232b38; --ink-dark:#ffffff;
  --paper-light:#ffffff; --plot-light:#ffffff; --grid-light:#e5e7eb; --ink-light:#0b0f1a;
}
body { min-height: 100vh; }
header.container { padding-top: .8rem; padding-bottom: .4rem; }
section#welcome { padding-bottom: 1rem; }
.toolbar { display:flex; gap:.5rem; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.badge { font-size:.75rem; background: var(--muted, #eee); color: inherit; padding:.15rem .5rem; border-radius:999px; }
.chart-figure { height: 72vh; }

/* Header CSS Settings */
/* --------------------------------------------------------------------------- */
/* Make the nav a flex row and vertically center its children */
header > nav {
  display: flex;
  align-items: center;          /* vertical centering */
}

/* Right side: push to the right and center it vertically in the nav */
header > nav > ul.toolbar {
  margin-left: auto;            /* push to right */
  padding: 0;
  list-style: none;
  align-self: center;           /* ensure vertical centering even if parent differs */
}

/* Stack the inner controls neatly */
header > nav > ul.toolbar > li {
  display: flex;
  flex-direction: column;       /* stack items */
  align-items: flex-end;        /* right align the column */
  gap: .5rem;                   /* spacing between controls */
}

/* Remove any extra margins that add vertical offset */
header > nav > ul.toolbar > li > label { margin: 0; }

/* Remove Pico's generated separator in the header's right list */
header > nav > ul.toolbar > li::before {
  content: none !important;
  display: none !important;
}

/* Grid-specific CSS Settings*/
/* --------------------------------------------------------------------------- */
/* Force certain grid children to only take half width */
.half-width {
  grid-column: span 1;       /* one grid column */
}

/* On large screens, make grids 2 cols by default */
.grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Ensure the 3rd item (Fed Net Liquidity) sits below left column */
.grid > .half-width:nth-child(3) {
  grid-column: 1 / 2;        /* force it under left item */
}

article > header.on-chain {
  background-color: #a85700;
  font-weight: bold;
}

article > header.strategy {
  background-color: #009da8;
  font-weight: bold;
}

article > header.liquidity {
  background-color: #00a830;
  font-weight: bold;
}


/* Chart-specific CSS Settings*/
/* --------------------------------------------------------------------------- */
/* Toolbar */
.chart-toolbar{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.25rem 0 .5rem}
.chart-toolbar button{padding:.2rem .55rem}
.chart-toolbar .spacer{flex:1 0 1rem}
.chart-note{opacity:.7}

/* Put Plotly modebar in the bottom-right of this page */
#mvrv-figure .modebar{
  top:auto !important;
  bottom:8px !important;
  right:8px !important;
  left:auto !important;
}

/* Wider Pico containers (override Pico's width setting) */
.container,
header.container,
main.container,
footer.container {
  width: min(92vw, 1600px);   /* 92% of viewport up to 1600px */
  max-width: none;            /* ignore any earlier max-width */
  margin-inline: auto;
}

/* Optional: on very large displays let it grow more */
@media (min-width: 2000px) {
  .container,
  header.container,
  main.container,
  footer.container { width: min(92vw, 1800px); }
}

/* Footer-specific CSS Settings*/
/* --------------------------------------------------------------------------- */
/* Keep columns snug: text on left, links on right */
.footer-grid { grid-template-columns: 1fr auto; align-items: start; }

/* Right column alignment */
.footer-right {
  justify-self: end;         /* push the whole section to the right edge */
  text-align: right;         /* right-align text and links inside */
}

/* Make footer links inline and right-justified */
.footer-right nav ul {
  display: flex;
  gap: var(--pico-spacing);
  justify-content: flex-end;
  list-style: none;
  margin: var(--pico-spacing) 0 0;
  padding: 0;
}

/* Optional: keep things left-aligned on small screens */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-right { justify-self: start; text-align: left; }
  .footer-right nav ul { justify-content: flex-start; }
}