/* Tides exhibit: local layout for the figures. */
.stretch-stage { --aspect: 2 / 1; }
.turn-stage    { --aspect: 2 / 1; }
.sun-stage     { --aspect: 2 / 1; }
@media (max-width: 40rem) {
  .stretch-stage { --aspect: 4 / 3; }
  .turn-stage    { --aspect: 3 / 4; }
  .sun-stage     { --aspect: 3 / 4; }
}
.fig .btn-row { flex-wrap: wrap; }
.fig .fig-note { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-3); margin: 0.4rem 0 0; }
table.ratio { border-collapse: collapse; font-family: var(--sans); font-size: 0.92rem; margin: 1rem 0; width: 100%; }
table.ratio th, table.ratio td { text-align: right; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--rule); }
table.ratio th:first-child, table.ratio td:first-child { text-align: left; }
table.ratio td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

.bars { display: grid; gap: 0.6rem; font-family: var(--sans); font-size: 0.9rem; padding: 0.5rem 0; }
.bar-row { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 5.5rem; gap: 0.6rem; align-items: center; }
.bar-label { color: var(--ink-2); }
.bar-track { display: block; height: 1rem; background: var(--paper-2); border-radius: 2px; }
.bar { display: block; height: 100%; min-width: 3px; background: var(--verdigris-lit); border-radius: 2px; }
.bar.real { background: var(--brass-lit); }
.bar-val { text-align: right; color: var(--ink); white-space: nowrap; }
@media (max-width: 30rem) { .bar-row { grid-template-columns: 1fr auto; } .bar-track { grid-column: 1 / -1; grid-row: 2; } }