/* STONK desk v2 additions: layout (KPIs left / price right), sticky time switch, permalink copy button,
   the chart download menu and the STONK/USD toggle. Lives alongside the STONK-desk rules in styles.css
   (tokens: see :root there — nothing here invents a colour or a size). */

/* ---------- Sticky time switch ---------- */
.sticky-controls { position: sticky; top: 0; z-index: 30; }

/* ---------- Top row: KPI tiles (left) + Price chart (right), same height on desktop ---------- */
.top-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }

@media (min-width: 1181px) {
  .top-row .panel { display: flex; flex-direction: column; }
  .top-row .kpis-panel .kpis { flex: 1; align-content: start; }
  .price-chart .plot { flex: 1; height: auto; min-height: 280px; }
}

/* ---------- Chart titlebar: room for the download menu next to the note ---------- */
.chart .titlebar { flex-wrap: wrap; }
.chart .titlebar > .note { margin-left: auto; }
.chart-menu-wrap { position: relative; margin-left: 10px; flex: none; }
.chart-menu-btn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--on-blue);
  opacity: 0.9;
}
.chart-menu-btn:hover, .chart-menu-btn[aria-expanded="true"] { opacity: 1; }
.chart-menu-btn svg { width: 17px; height: 17px; fill: currentColor; }
.chart-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  background: var(--panel);
  border: 2px solid;
  border-color: var(--panel-hi) var(--panel-lo) var(--panel-lo) var(--panel-hi);
  box-shadow: var(--shadow);
}
.chart-menu[hidden] { display: none; }
.chart-menu button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 9px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.chart-menu button:hover, .chart-menu button:focus-visible { background: var(--row-hover); }

/* ---------- Permalink: a copy-link button, not a navigating anchor ---------- */
.permalink {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--blue);
  font-weight: 700;
  font: inherit;
  font-size: inherit;
}
.permalink svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.permalink:hover span, .permalink:focus-visible span { text-decoration: underline; }

.foot-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-right:empty { display: none; }

/* ---------- STONK / USD toggle on the burns and paid charts ---------- */
.unit-toggle button { padding: 4px 10px; font-size: 13px; }

/* ---------- Narrower screens: stack the top row like everything else ---------- */
@media (max-width: 1180px) {
  .top-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .chart-menu-btn { width: 24px; height: 24px; }
  .chart-menu-btn svg { width: 15px; height: 15px; }
  .chart-menu { min-width: 150px; }
  .chart-menu button { padding: 8px 12px; font-size: 13px; }
  .unit-toggle button { padding: 5px 8px; font-size: 12px; }
}