/* The rent chart (templates/_rent_chart.html, static/chart.js). Builds on app.css tokens; a light page sets --rc-grid, --rc-gap, --rc-cursor and --rc-market.
   Thin lines, two faint horizontals, numbers in the serif; amber is the market line only. The three AMI lines are
   ink at three strengths (80% darkest, 40% lightest), 1px, labelled in a gutter right of the plot; the chosen band
   (the text toggles under the title) is the one shaded against market and drawn a touch heavier. */
.rchart { --rc-num: 2.75rem; --rc-small: 0.875rem; --rc-ami80: 0.9; --rc-ami60: 0.62; --rc-ami40: 0.4; margin: 0; }
/* the gutter labels keep the lines' order (80% darkest) but every one reads at 4.5:1 or more on
   paper (ink at 0.6 is 4.8:1; the 40% label at the line's 0.4 was 2.6:1) */
.rchart { --rc-tag80: 0.9; --rc-tag60: 0.75; --rc-tag40: 0.6; }
@media (min-width: 1024px) { .rchart { --rc-num: 3.5rem; } }
@media (max-width: 480px) { .rchart { --rc-num: 2rem; } }  /* phones: 32; the small size stays 14, nothing under it */
.rchart__title { font-size: var(--rc-small); color: var(--text-3); margin-bottom: 6px; }
/* the title's two words are the city and bedroom switches: plain text with a dotted hairline under them (the
   chart's control style), the tap area grown to 44px with padding that the negative margin takes back, the
   tracking the headline's (the UA sheet resets a button's letter-spacing). A button stays inline-block (Chromium
   never lays one out inline), so a word in it cannot break at a hyphen the way "1-bedroom" could as plain text:
   the landing page gives the title 22ch, room for the city and the size on one line (landing.css) */
.rchart__pick {
  appearance: none; background: none; border: 0; margin: -12px 0; padding: 12px 0; font: inherit;
  letter-spacing: inherit; word-spacing: inherit; text-align: inherit; color: var(--text-2);
  cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--line-3); text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.rchart__pick:hover { color: var(--text); text-decoration-color: var(--text-2); }
.rchart__pick:focus-visible { outline: 1px solid var(--text); outline-offset: -9px; border-radius: 2px; }
.rchart__coming { width: 100%; color: var(--text-2); }
.rchart__coming[hidden] { display: none; }
.rchart.is-market-only .rchart__bands, .rchart.is-market-only .rchart__earn, .rchart.is-market-only .rchart__pair--ami,
.rchart.is-market-only .rchart__sep, .rchart.is-market-only .rchart__keep, .rchart.is-market-only .rchart__below,
.rchart.is-market-only .rchart__gap, .rchart.is-market-only .rchart__dot--ami { display: none; }
.rchart.is-market-only .rchart__tags { visibility: hidden; }  /* the gutter keeps its width: the plot does not jump */
.rchart__dek { font-size: var(--rc-small); color: var(--text-3); margin: -12px 0 14px; max-width: 52ch; line-height: 1.45; }
/* the band toggles: "You earn about" then plain text buttons, the chosen one ink with an underline, the others grey;
   under them, what the chosen band earns for the visitor's household */
.rchart__bands { font-size: var(--rc-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rchart__bands-label { margin-right: 4px; }
.rchart__earn { margin: 4px 0 14px; font-size: var(--rc-small); color: var(--text-2); font-variant-numeric: tabular-nums; }
.rchart__earn b { font-weight: 600; color: var(--text); }
.rchart__band {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--text-3);
  cursor: pointer; text-decoration: none; text-underline-offset: 0.22em; text-decoration-thickness: 1px;
}
.rchart__band:hover { color: var(--text-2); }
.rchart__band[aria-pressed="true"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--text); }
.rchart__band:focus-visible { outline: 1px solid var(--text); outline-offset: 3px; border-radius: 2px; }
.rchart__read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; font-size: var(--rc-small); color: var(--text-2); }
.rchart__year {
  width: 100%; font-family: var(--font-display); font-weight: 500; font-size: var(--rc-num); line-height: 1;
  letter-spacing: -0.02em; color: var(--text); font-variant-numeric: lining-nums tabular-nums;
}
.rchart__pair { display: inline-flex; align-items: baseline; gap: 6px; }
.rchart__pair--mk::before, .rchart__pair--ami::before { content: ""; align-self: center; width: 14px; height: 2px; border-radius: 1px; background: var(--rc-market, var(--accent)); }
.rchart__pair--ami::before { background: var(--text); height: 1px; }
.rchart__read b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rchart__keep { width: 100%; }  /* its own line: "You keep $2,617/mo" */
.rchart__sep { color: var(--text-3); margin: 0 -8px; }
@media (max-width: 480px) { .rchart__sep { display: none; } }
/* at 56px the serif year's glyphs hang ~9px below its line box: room before the readout under it */
@media (min-width: 1024px) { .rchart__year { margin-bottom: 8px; } }  /* the two pairs take a line each on a phone: no orphaned dot */
.rchart__keep b { margin-left: 4px; }
.rchart__keep[hidden], .rchart__below[hidden] { display: none; }
.rchart__below { width: 100%; color: var(--text-2); }
.rchart__plot { display: flex; align-items: stretch; margin-top: 18px; }
.rchart__svg { display: block; flex: 1 1 auto; min-width: 0; width: 100%; height: 220px; overflow: visible; touch-action: pan-y; cursor: crosshair; }
@media (min-width: 640px) { .rchart__svg { height: 280px; } }
/* the AMI labels: a gutter the plot's height, each label at its line's last value (top: %) */
/* the top tag reads "Rent cap · 80% AMI": one line where the gutter is wide, two on a phone, its last line
   ("80% AMI") centred on the line like the others (translate up by all but half a line) */
.rchart__tags { position: relative; flex: none; width: 84px; }  /* "80% AMI" at 14px is 56px + the 14px gap (the market end dot is 9px wide and must not touch "Rent cap"), with room to wrap "Rent cap ·" above it */
@media (min-width: 640px) { .rchart__tags { width: 138px; } .rchart__tag { white-space: nowrap; } }
.rchart__tag {
  position: absolute; left: 14px; width: calc(100% - 14px); transform: translateY(calc(-100% + 0.5em)); line-height: 1;
  font-size: var(--rc-small); color: var(--text); font-variant-numeric: tabular-nums;
}
.rchart__tag-word { font-weight: 400; }
.rchart__tag--80 { opacity: var(--rc-tag80); }
.rchart__tag--60 { opacity: var(--rc-tag60); }
.rchart__tag--40 { opacity: var(--rc-tag40); }
.rchart__tag.is-on { opacity: 1; font-weight: 600; }
.rchart__svg:focus-visible { outline: 1px solid var(--line-3); outline-offset: 6px; border-radius: 4px; }
.rchart__grid { stroke: var(--rc-grid, rgba(255, 255, 255, 0.08)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rchart__gap { fill: var(--rc-gap, rgba(255, 255, 255, 0.05)); }
.rchart__line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rchart__line--mk { stroke: var(--rc-market, var(--accent)); }
.rchart__line--ami { stroke: var(--text); stroke-width: 1; }
.rchart__line--ami80 { stroke-opacity: var(--rc-ami80); }
.rchart__line--ami60 { stroke-opacity: var(--rc-ami60); }
.rchart__line--ami40 { stroke-opacity: var(--rc-ami40); }
.rchart__line--ami.is-on { stroke-opacity: 1; stroke-width: 1.5; }
.rchart__cursor line { stroke: var(--rc-cursor, rgba(255, 255, 255, 0.35)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rchart__cursor .rchart__dot { stroke-width: 9; stroke-linecap: round; }
.rchart__cursor .rchart__dot--mk { stroke: var(--rc-market, var(--accent)); }
.rchart__cursor .rchart__dot--ami { stroke: var(--text); stroke-width: 6; }
.rchart__cursor .rchart__dot--ami80 { stroke-opacity: var(--rc-ami80); }
.rchart__cursor .rchart__dot--ami60 { stroke-opacity: var(--rc-ami60); }
.rchart__cursor .rchart__dot--ami40 { stroke-opacity: var(--rc-ami40); }
.rchart__cursor .rchart__dot--ami.is-on { stroke-opacity: 1; stroke-width: 9; }
.rchart__cursor .rchart__dot[hidden] { display: none; }
.rchart__axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--rc-small); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rchart__src { margin-top: 8px; font-size: var(--rc-small); color: var(--text-3); }
.rchart__src a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.2em; }

/* the draw: the lines trace in once, when the chart scrolls into view (chart.js adds .is-armed, then .is-drawn) */
/* the dash is 3 path-lengths long: with non-scaling-stroke on a stretched SVG the dash is
   measured on screen, so a dash of exactly 1 stops short when the chart is drawn wider
   than its viewBox; 3 covers the line at any width this layout uses */
.rchart.is-armed .rchart__line { stroke-dasharray: 3; stroke-dashoffset: 3; }
.rchart.is-armed .rchart__gap, .rchart.is-armed .rchart__cursor, .rchart.is-armed .rchart__tags { opacity: 0; }
.rchart.is-drawn .rchart__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms cubic-bezier(0.16, 1, 0.3, 1); }
.rchart.is-drawn .rchart__line--ami { transition-delay: 160ms; }
.rchart.is-drawn .rchart__gap, .rchart.is-drawn .rchart__cursor, .rchart.is-drawn .rchart__tags { opacity: 1; transition: opacity 600ms ease 900ms; }
@media (prefers-reduced-motion: reduce) {
  .rchart.is-armed .rchart__line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .rchart.is-armed .rchart__gap, .rchart.is-armed .rchart__cursor, .rchart.is-armed .rchart__tags { opacity: 1; }
  .rchart.is-drawn .rchart__line, .rchart.is-drawn .rchart__gap, .rchart.is-drawn .rchart__cursor, .rchart.is-drawn .rchart__tags { transition: none; }
}
/* QA sweep (Oct 25 2026): each band button is a 44 x 44 tap target on a phone. 3px either
   side keeps the neighbours' hit areas apart; the ::after carries the height. */
.rchart__band { position: relative; padding: 0 3px; }
.rchart__band::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }