/* Rates & debt pages (/rates/...), on top of the shared «Бенто, графит» classes
   in style.css. Treasury yields are bonds (--bond), recessions a soft band in
   --track, inversions red (--cash); colors come from theme variables, so the
   light, paper, graphite and black themes all work without redrawing. */

/* the switches rates.js runs stay hidden until it runs them */
.rt-wait { visibility: hidden; }
#rt [hidden] { display: none; }
.intro .rt-mode { justify-self: start; margin-top: 4px; }

/* tiles */
.rt-top-s { margin-top: 8px; }
.rt-top-m { margin-top: 12px; }
p.rt-flat { margin-bottom: 0; }
.rt-head { flex-wrap: nowrap; align-items: flex-start; }
.rt-spark { height: 72px; }
.rt-lead .rt-spark { height: 80px; }
.rt-exact { margin: 10px 0 0; font: 500 14px/1.3 var(--mono); letter-spacing: -0.02em; color: var(--ink-2); overflow-wrap: anywhere; }
.rt-more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
a.rt-explain { display: flex; flex-direction: column; align-items: flex-start; }
.rt-explain-text { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.card .label a { color: var(--accent-ink); }

/* overview cards: three in a row, one under another on narrow screens */
.rt-cards { margin-top: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .rt-cards { grid-template-columns: minmax(0, 1fr); } }
.rt-card { display: flex; flex-direction: column; }
.rt-card .card-title { font-size: 17px; }
.rt-card .rt-head .label { display: block; margin-top: 2px; }
.rt-card .rt-more { margin-top: auto; padding-top: 14px; }

/* notes next to charts and tables */
.rt-note { margin: -4px 0 12px; max-width: 82ch; }
.rt-foot { margin: 10px 0 0; max-width: 82ch; }
.rt-h3 { margin: 30px 0 10px; }
.rt-nyfed { margin: 14px 0 0; max-width: 82ch; }
.rt-honest { margin: 16px 0 0; max-width: 86ch; }
.rt-honest h3 { margin: 0 0 6px; }
.rt-honest p { margin: 0; color: var(--ink-2); font-size: 15px; }
.rt-prose p { margin: 0 0 12px; }

/* charts: legend inside the card, room kept before the JS draws */
#rt .chart .legend { padding: 2px 40px 0 10px; margin: 0 0 4px; } /* right: room for the full-screen button */
.rt-plot { min-height: 300px; }
.rt-plot-curve { min-height: 280px; }
.rt-plot-spread { min-height: 240px; }
.rt-plot-small { min-height: 240px; }
.rt-plot.rt-fail { min-height: 0; padding: 28px 12px; font-size: 14px; color: var(--muted); }
/* NBER recessions behind the lines (painted by rates.js) and their legend swatch */
.rt-rec { fill: var(--track); }
:root[data-theme="paper"] .rt-rec { fill: #efe4cc; }
:root[data-theme="dark"] .rt-rec, :root[data-theme="black"] .rt-rec { fill: rgba(255, 255, 255, 0.07); }
.sw-sq.rt-rec-sw { background: var(--track); box-shadow: inset 0 0 0 1px var(--axis); }
.rt-tip-note span:nth-child(2) { color: var(--muted); }

/* the date picker of the yield curve */
.rt-date { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--font); color: var(--muted); }
.rt-date input { font: 600 13px var(--font); color: var(--ink); background: var(--track); border: 0; border-radius: 10px; padding: 7px 10px; min-height: 34px; }
.rt-date input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rt-msg { flex-basis: 100%; margin: 0; min-height: 0; }
.rt-msg:empty { display: none; }

/* tables */
.rt-gap { margin-top: 14px; }
.rt-table td, .rt-table th { font-variant-numeric: tabular-nums; vertical-align: top; }
.rt-table th[scope="row"] { text-align: left; font-weight: 600; }
.rt-table .rt-sub { display: block; font-size: 11px; line-height: 1.4; font-weight: 500; color: var(--muted); }
.rt-neg { color: var(--cash-ink); font-weight: 600; }
.rt-dir { font-weight: 650; }
.rt-dir.up { color: var(--ink); }
.rt-dir.up::before { content: "↑ "; color: var(--muted); }
.rt-dir.down { color: var(--ink); }
.rt-dir.down::before { content: "↓ "; color: var(--muted); }
.rt-older { margin: 12px 0 0; }
.rt-older > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent-ink); padding: 6px 2px; width: max-content; max-width: 100%; }
.rt-older[open] > summary { margin-bottom: 10px; }

.rt-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; font-weight: 600; }

@media (max-width: 640px) {
  /* wide tables scroll sideways; the first column stays in view */
  .rt-table th:first-child, .rt-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  .rt-table thead th:first-child { z-index: 2; }
  .rt-date { flex-wrap: wrap; }
  .rt-exact { font-size: 13px; }
}