/* Layout for the /finance/* embeds.
 *
 * A Notion embed block is a fixed-height iframe the user drags to size. So
 * every chart page fills its viewport exactly and never scrolls: the chart
 * flexes to whatever height it is given rather than assuming a pixel height.
 * Loaded after tokens.css, which the habit charts also use — nothing here
 * touches the shared tokens.
 */

html, body { height: 100%; }
body { overflow: hidden; }

.page {
  height: 100%;
  max-width: 960px;
  gap: 10px;
}

.card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#chartWrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chart {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.table-view {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.legend-row { flex: none; }
.hero-row { flex: none; }
.filterbar { flex: none; }
.header { flex: none; }

/* Until the fetch resolves the card is empty. On a Notion page with a dozen
 * embeds that reads as broken, so say what is happening. */
.card.skel { position: relative; }
.card.skel::after {
  content: "Loading\2026";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Compact chrome when framed (Notion) or when ?embed=1 is passed. The
 * surrounding Notion heading and block caption already say what the chart is,
 * so the in-page subtitle is redundant there and only costs vertical space. */
body.embed .page { padding: 10px 12px 12px; gap: 8px; }
body.embed .header h1 { font-size: 13px; font-weight: 600; }
body.embed .header p.sub { display: none; }
body.embed .theme-toggle { width: 26px; height: 26px; font-size: 12px; }
body.embed .card { padding: 12px; border-radius: 12px; }
body.embed .pill { padding: 4px 10px; font-size: 11.5px; }
body.embed .table-toggle { font-size: 11.5px; }
body.embed .hero-value { font-size: 25px; }
body.embed .hero-label, body.embed .hero-delta { font-size: 11.5px; }
body.embed .hero-row { gap: 8px; }
body.embed .legend-row { margin-top: 8px; padding-top: 8px; gap: 8px 14px; }
body.embed .legend-item { font-size: 11.5px; }
body.embed .note { font-size: 11.5px; margin-top: 8px; }

/* Below roughly a Notion half-column, drop to the essentials. */
@media (max-width: 420px) {
  body.embed .header h1 { font-size: 12px; }
  body.embed .hero-value { font-size: 24px; }
  body.embed .table-toggle { display: none; }
}