/* The rental arbitrage calculator (/rental-arbitrage-calculator/): the calculator's own styles, loaded on that page only,
   after ra.css (the hero, the page switcher, buttons, the FAQ and the closing sections shared by the three pages).
   Only site tokens are used, so the light and dark themes both work. Blues, whites and grays only; --err is reserved
   for input errors. */

/* ---------- Calculator shell ---------- */
/* Anchor jumps: html's scroll-padding-top already clears the sticky header, so no extra scroll-margin here. */
.ra-calc {
  --ra-pad: clamp(16px, 2.2vw, 24px);
  padding-block: clamp(14px, 2vw, 24px) clamp(36px, 5vw, 64px);
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
  font-family: var(--font-sans);
}
@media (max-width: 639px) { .ra-tabs { margin-bottom: 10px; } }
.ra-noscript { margin-bottom: 16px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 0.9375rem; }

/* Tabs: a segmented control. Without JavaScript all three models are shown one after another instead. */
.ra-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--paper-3); }
html:not(.js) .ra-tabs { display: none; }
.ra-tab { display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 48px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; text-align: center; cursor: pointer; transition: background-color 0.15s var(--ease), color 0.15s var(--ease); }
.ra-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
/* The selected tab is marked by shape as well as color: an accent bar along its bottom edge (well over 3:1 against
   the bar in both themes), plus a lifted background that is lighter than the bar in dark mode too. */
.ra-tabs { --ra-tab-on: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ra-tabs { --ra-tab-on: color-mix(in srgb, var(--accent) 16%, var(--surface)); } }
:root[data-theme="dark"] .ra-tabs { --ra-tab-on: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.ra-tab[aria-selected="true"] { background: var(--ra-tab-on); color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent), inset 0 0 0 1px var(--rule-strong), 0 1px 2px rgba(14, 23, 38, 0.1); }
.ra-tab[aria-selected="true"] .ra-tab__name { color: var(--accent); }
.ra-tab[aria-selected="true"] .ra-tab__hint { color: var(--ink-2); } /* AA on the lifted background in both themes */
.ra-tab:focus-visible { outline-offset: -2px; }
.ra-tab__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.ra-tab__short { display: none; }
.ra-tab__hint { font-size: 0.75rem; color: var(--ink-3); line-height: 1.3; }
/* Phones: short names at a readable size (only one name is displayed, so it is also the tab's accessible name). */
@media (max-width: 559px) {
  .ra-tabs { gap: 3px; padding: 3px; }
  .ra-tab { min-height: 46px; padding: 5px 4px 7px; }
  .ra-tab__long { display: none; }
  .ra-tab__short { display: inline; }
  .ra-tab__name { font-size: 0.875rem; line-height: 1.2; }
  .ra-tab__hint { display: none; }
}

.ra-panel__title { margin-bottom: 14px; font-size: 1.5rem; }
.js .ra-panel__title { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.js .ra-calc:not(.is-ready) .ra-panel:not(.is-active) { display: none; }
html:not(.js) .ra-panel + .ra-panel { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--rule-strong); }

/* Layout: one column in DOM order (essentials → results → more → details); two columns from 1024px. */
.ra-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.2vw, 28px); }
@media (min-width: 1024px) {
  .ra-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 416px); grid-template-areas: "main results" "more results" "detail detail"; align-items: start; }
  .ra-main { grid-area: main; }
  /* The grid item stretches over the inputs and "more" rows; the card inside it sticks within that area only
     (a sticky grid item itself would be allowed to slide over the detail blocks below). The card is never a scroll
     box: when all of it does not fit on screen (short windows, a long list of input problems), app.js adds
     .is-static and it scrolls with the page, so the disclaimer and the Print and CSV buttons are always reachable. */
  .ra-results { grid-area: results; align-self: stretch; }
  .ra-card--sticky { position: sticky; top: calc(var(--header-h) + 16px); }
  .ra-card--sticky.is-static, html:not(.js) .ra-card--sticky { position: static; }
  .ra-more { grid-area: more; }
  .ra-detail { grid-area: detail; }
}

/* ---------- Inputs card ---------- */
.ra-main { min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
/* The message keeps at least 20rem (320px) of width. Where the buttons beside it would leave less (phones, mid-size
   windows once Undo shows, the 1024px two-column layout), they wrap onto their own row under the full-width message
   instead of squeezing it into a narrow column. */
.ra-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 9px var(--ra-pad); border-bottom: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--accent-soft); }
.ra-status:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.ra-status__text { flex: 1 1 20rem; min-width: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); }
.ra-status__text strong { color: var(--ink); font-weight: 600; }
.ra-status__actions { flex: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ra-status__actions .ra-btn { gap: 0; }
@media (max-width: 479.98px) {
  .ra-status { gap: 5px 14px; padding-block: 7px; }
  .ra-status__actions .ra-btn--quiet { min-height: 32px; }
}
/* Phones show "Reset" / "Clear"; the rest of each name stays available to assistive technology. */
@media (max-width: 639px) { .ra-wide { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }

.ra-fs { min-width: 0; margin: 0; padding: 12px var(--ra-pad) 2px; border: 0; }
.ra-fs + .ra-fs { border-top: 1px solid var(--rule); }
.ra-fs__legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ra-fs__legend + * { clear: both; }
.ra-fs__intro { margin-bottom: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }

/* Fields: a grid whose rows (label / input / help / message) line up across columns (subgrid). */
.ra-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); column-gap: 14px; }
@media (min-width: 640px) { .ra-fields { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); column-gap: 20px; } }
.ra-field { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; align-content: start; min-width: 0; margin-bottom: 16px; }
.ra-field__label { align-self: end; font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
@media (max-width: 639px) { .ra-field__label { font-size: 0.8125rem; } }
.ra-field__help { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); }
/* Phones: an essential field's help appears once the field is focused (app.js marks it .is-helped) and then stays, so
   a result is a short scroll away and nothing below a field moves when it loses focus (a tap on the next control
   lands where it was aimed). It stays the input's accessible description (aria-describedby) either way. Without
   JavaScript every help text is shown. */
@media (max-width: 639px) {
  .js .ra-main .ra-field__help { display: none; }
  .js .ra-main .ra-field.is-helped .ra-field__help, .js .ra-main .ra-field:focus-within .ra-field__help { display: block; }
}
.ra-field__msg { font-size: 0.8125rem; line-height: 1.45; font-weight: 500; }
.ra-field__msg::before { content: "!"; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin-right: 6px; border-radius: 50%; font-size: 0.75rem; font-weight: 700; vertical-align: 0.05em; }
.ra-field.is-error .ra-field__msg, [data-msg-for] { color: var(--err); }
.ra-field.is-error .ra-field__msg::before { background: var(--err); color: var(--surface); }
.ra-field.is-warn .ra-field__msg { color: var(--ink-2); }
.ra-field.is-warn .ra-field__msg::before { background: var(--accent); color: var(--accent-ink); }
[data-msg-for] { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 500; }

/* Input edges: at least 3:1 against the card in both themes (WCAG 1.4.11). */
.ra-calc { --ra-edge: color-mix(in srgb, var(--ink-3) 70%, var(--rule-strong)); }
.ra-input { display: flex; align-items: stretch; min-height: 44px; border: 1px solid var(--ra-edge); border-radius: var(--radius); background: var(--paper); transition: border-color 0.15s, box-shadow 0.15s; }
.ra-input:hover { border-color: var(--ink-2); }
.ra-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.ra-field.is-error .ra-input { border-color: var(--err); }
.ra-field.is-error .ra-input:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 22%, transparent); }
.ra-field.is-warn .ra-input { border-color: var(--accent); }
.ra-input__affix { display: flex; align-items: center; padding-left: 12px; font-size: 0.9375rem; color: var(--ink-3); white-space: nowrap; user-select: none; }
.ra-input__affix--end { padding: 0 12px 0 4px; font-size: 0.8125rem; }
.ra-input__control { flex: 1 1 auto; width: 100%; min-width: 0; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; outline: none; }
.has-pre .ra-input__control { padding-left: 3px; }
.ra-field--label .ra-input__control { font-variant-numeric: normal; } /* words: tabular figures widen hyphens in Inter */
.ra-input__control::placeholder { color: var(--ink-3); opacity: 1; }

.ra-select-wrap { position: relative; }
.ra-select-wrap::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.ra-select { width: 100%; min-height: 44px; padding: 0 32px 0 12px; border: 1px solid var(--ra-edge); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.ra-select:hover { border-color: var(--ink-2); }
.ra-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }

.ra-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; color: var(--ink); line-height: 1.4; }
.ra-field--select { min-width: 0; }
@media (max-width: 639px) { .ra-field--select:not(.ra-field--cell) { grid-column: 1 / -1; } }
.ra-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.ra-check label { cursor: pointer; }
.ra-field .ra-check { grid-row: span 2; align-self: center; }

.ra-notice { margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--accent-soft); font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.ra-notice strong { color: var(--ink); }
.ra-note { margin-top: 2px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }

/* Calculator buttons (the base .ra-btn is in ra.css: the guide uses it too) */
.ra-btn--quiet { min-height: 34px; padding: 0 11px; font-size: 0.8125rem; }
.ra-btn--add { border-style: dashed; color: var(--accent); }
.ra-btn--add:hover { border-color: var(--accent); }
.ra-linkbtn { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.ra-linkbtn:hover { color: var(--accent-hover); }

/* Rent roll editor */
/* Sized by the editor's own width (container queries), not the window: the inputs column is narrow beside the results
   on 1024–1200px screens. Four fields per row only when each has room for its figures. */
.ra-rooms { list-style: none; display: grid; gap: 10px; margin: 12px 0 0; padding: 0; container-type: inline-size; }
.ra-room__set { position: relative; min-width: 0; margin: 0; padding: 10px 14px 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); }
.ra-room__legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.ra-room__fields { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
@container (min-width: 600px) { .ra-room__fields { grid-template-columns: 1.35fr 1fr 0.8fr 0.95fr; } }
@container (max-width: 380px) { .ra-room__fields > .ra-field--label, .ra-room__fields > .ra-field--collectionLoss { grid-column: 1 / -1; } }
.ra-room__fields .ra-field { margin-bottom: 12px; }
/* "Describe the room, not the person" is shown once, under the first room; later rooms keep it as the field's
   accessible description only (visually hidden, so it takes no row). */
.ra-room + .ra-room .ra-field--label .ra-field__help, .js .ra-main .ra-room + .ra-room .ra-field--label.is-helped .ra-field__help { display: block; position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ra-room__fields .ra-field__label { font-size: 0.8125rem; }
.ra-room__remove { position: absolute; top: 6px; right: 8px; min-height: 30px; padding: 0 8px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-3); font: inherit; font-size: 0.8125rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.ra-room__remove:hover { color: var(--ink); }
.ra-room__remove:disabled { visibility: hidden; }
/* After a room is removed, "Removed Room 3. Undo" takes its place in the list (app.js), right where the reader tapped:
   on a phone the status line's Undo is far above, off screen. A room brought back from there takes focus, so it is
   outlined where it reappears. */
.ra-room-gone { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; min-width: 0; min-height: 44px; padding: 4px 8px 4px 14px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--rule)); border-radius: var(--radius); background: var(--accent-soft); font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
.ra-room-gone .ra-linkbtn { padding-inline: 6px; font-weight: 600; }
.ra-room__set:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.ra-rooms__actions { margin: 12px 0 16px; }

/* ---------- Results card ---------- */
.ra-results { min-width: 0; }
.ra-card { overflow: hidden; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.ra-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; padding: 9px 20px 0; background: var(--navy); }
.ra-card__title { padding: 4px 0; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; color: var(--navy-ink-2); }
/* Jumps to the notes on return, payback and break-even under the inputs. */
.ra-card__explain { display: inline-flex; align-items: center; min-height: 24px; font-size: 0.75rem; font-weight: 600; color: var(--navy-accent); text-decoration: underline; text-underline-offset: 0.18em; }
.ra-card__explain:hover { color: var(--navy-ink); }
.ra-card__explain:focus-visible { outline-color: var(--navy-accent); }
.ra-headline { padding: 4px 20px 16px; background: var(--navy); color: var(--navy-ink); }
.ra-headline__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.ra-headline__label span { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--navy-ink-2); }
.ra-headline__value { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: clamp(2.125rem, 1.8rem + 1.1vw, 2.5rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.ra-headline__value > [data-out] { white-space: nowrap; }
.ra-headline__value.is-long { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.ra-headline__value.is-xlong { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.ra-headline__value.is-xlong > [data-out] { white-space: normal; }
.ra-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--navy-ink-2); border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: var(--navy-ink); white-space: nowrap; }
.ra-tag--warn { border-color: var(--navy-accent); background: color-mix(in srgb, var(--navy-accent) 16%, transparent); }
/* Input errors: the figures use corrected values, so they are dimmed and tagged until the inputs are fixed. */
.ra-headline.is-provisional [data-out] { opacity: 0.62; }
.ra-kpis.is-provisional .ra-kpi__value { color: var(--ink-3); }
.ra-headline__note { margin-top: 6px; font-size: 0.8125rem; color: var(--navy-ink-2); }

.ra-issues { padding: 12px 20px; border-top: 1px solid var(--rule); font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.ra-issues--error { border-left: 4px solid var(--err); background: color-mix(in srgb, var(--err) 7%, var(--surface)); }
.ra-issues--warn { border-left: 4px solid var(--accent); background: var(--accent-soft); }
.ra-issues__title { font-weight: 700; color: var(--ink); }
.ra-issues--error .ra-issues__title { color: var(--err); }
.ra-issues ul { margin-top: 4px; padding-left: 1.1em; }
.ra-issues li + li { margin-top: 6px; }
/* Each issue links to its field: at least 24px tall (WCAG 2.2 target size). */
.ra-issues a { display: block; padding-block: 3px; color: var(--ink); } /* block, so the bullet stays on its first line */

.ra-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.ra-kpi { min-width: 0; padding: 10px 12px 11px 20px; border-top: 1px solid var(--rule); }
.ra-kpi:nth-child(even) { padding-left: 16px; }
.ra-kpi:nth-child(odd) { border-right: 1px solid var(--rule); }
.ra-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.ra-kpi dt { font-size: 0.75rem; font-weight: 500; line-height: 1.3; color: var(--ink-3); }
.ra-kpi dd { margin: 3px 0 0; }
.ra-kpi__value { display: block; font-size: 1.125rem; font-weight: 650; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
/* Very large figures: smaller, and they wrap only after a thousands comma (<wbr>), never after the minus sign.
   Amounts (app.js .is-amount) never split mid-number: up to 13 characters stay on one line (they fit a 320px phone at
   these sizes), and from 14 characters (.is-xlong) they may wrap only after a comma. */
.ra-kpi__value.is-long { font-size: 1rem; }
.ra-kpi__value.is-xlong { font-size: 0.875rem; overflow-wrap: normal; }
.ra-kpi__value.is-amount { overflow-wrap: normal; white-space: nowrap; }
.ra-kpi__value.is-amount.is-xlong { white-space: normal; }
.ra-kpi__sub { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); overflow-wrap: anywhere; }
.ra-kpi__flag { display: block; margin-top: 3px; }
.ra-link { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
.ra-kpi__sub .ra-link { display: inline-flex; align-items: center; min-height: 24px; }
.ra-flag { display: inline; font-weight: 600; color: var(--ink); }
.ra-flag::before { content: "!"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: 5px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 0.6875rem; font-weight: 700; vertical-align: 0.08em; }
.ra-kpi.is-flag { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
@media (max-width: 380px) { .ra-kpi { padding-left: 14px; } .ra-kpi__value { font-size: 1rem; } .ra-kpi__value.is-long { font-size: 0.9375rem; } .ra-kpi__value.is-amount.is-long { font-size: 0.875rem; } .ra-kpi__value.is-xlong { font-size: 0.8125rem; } }

.ra-disclaimer { padding: 11px 20px; border-top: 1px solid var(--rule); font-size: 0.75rem; line-height: 1.5; color: var(--ink-3); }
.ra-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 20px 14px; border-top: 1px solid var(--rule); background: var(--paper-2); }
.ra-main__foot { padding: 14px var(--ra-pad) 16px; border-top: 1px solid var(--rule); background: var(--paper-2); }
@media (min-width: 1024px) { .ra-main__foot { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } }
.ra-main__foot .ra-check { font-size: 0.9375rem; font-weight: 500; }
.ra-save__status { margin: 4px 0 0 30px; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); }
.ra-main__foot .ra-linkbtn { margin: 2px 0 0 30px; }

/* ---------- More assumptions (collapsed groups) ---------- */
.ra-more { min-width: 0; }
.ra-more__title { font-size: 1.25rem; }
.ra-more__intro { margin: 4px 0 12px; font-size: 0.875rem; color: var(--ink-3); }
.ra-group { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.ra-group + .ra-group { margin-top: 8px; }
.ra-group__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "title badge icon" "value value icon"; align-items: center; gap: 3px 10px; padding: 13px 16px 13px var(--ra-pad); cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.ra-group__summary::-webkit-details-marker { display: none; }
.ra-group__summary:hover .ra-group__title { color: var(--accent); }
.ra-group__summary:focus-visible { outline-offset: -2px; }
.ra-group__title { grid-area: title; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ra-group__value { grid-area: value; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-3); }
.ra-group__badge { grid-area: badge; padding: 1px 8px; border-radius: 999px; background: var(--err); color: var(--surface); font-size: 0.6875rem; font-weight: 700; }
.ra-group__summary .icon { grid-area: icon; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.ra-group[open] > .ra-group__summary .icon { transform: rotate(180deg); }
.ra-group[open] > .ra-group__summary { border-bottom: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ra-group__body { padding: 16px var(--ra-pad) 4px; }
.ra-group__intro { margin-bottom: 14px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.ra-group__body > .ra-group__intro:last-child { margin: 0 0 16px; }
.ra-subset { min-width: 0; margin: 0 0 4px; padding: 0; border: 0; }
.ra-subset legend { padding: 0; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.ra-group .ra-note { margin: -4px 0 16px; }

/* Seasonality table */
.ra-season { margin-top: 4px; }
.ra-season__t td { min-width: 104px; }
.ra-season__t th[scope="row"] { vertical-align: middle; }

/* ---------- Detailed results ---------- */
/* One column of folded sections under the results card: each summary shows the section's title and key figure
   (app.js "fold-…" views); links into a closed section open it first. */
.ra-detail { display: grid; gap: 8px; min-width: 0; }
.ra-detail__title { font-size: 1.25rem; }
.ra-detail__intro { margin: -4px 0 4px; font-size: 0.875rem; color: var(--ink-3); }
.ra-block { min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.ra-block__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title icon" "meta icon"; align-items: center; gap: 2px 14px; padding: 13px 16px 13px var(--ra-pad); cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.ra-block__summary::-webkit-details-marker { display: none; }
.ra-block__summary:focus-visible { outline-offset: -2px; }
.ra-block__title { grid-area: title; margin: 0; font-family: var(--font-serif); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); font-weight: 500; line-height: 1.25; color: var(--ink); }
.ra-block__summary:hover .ra-block__title { color: var(--accent); }
.ra-block__meta { grid-area: meta; min-width: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-3); }
.ra-block__summary > .icon { grid-area: icon; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.ra-block[open] > .ra-block__summary { border-bottom: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.ra-block[open] > .ra-block__summary > .icon { transform: rotate(180deg); }
.ra-block__body { padding: 16px var(--ra-pad) var(--ra-pad); }
/* Result sections look like results, not like the "More assumptions" input groups above them: a tint of the
   results card's accent, an accent bar on the left, and the key figure in darker text. Opened, the content sits on
   the plain card background. */
.ra-detail .ra-block { border-color: color-mix(in srgb, var(--accent) 28%, var(--rule)); background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
.ra-detail .ra-block__summary { box-shadow: inset 4px 0 0 var(--accent); }
.ra-detail .ra-block__meta { color: var(--ink-2); font-weight: 500; }
.ra-detail .ra-block__body { border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface); }
.ra-detail__title::before { content: ""; display: inline-block; width: 4px; height: 0.8em; margin-right: 10px; border-radius: 2px; background: var(--accent); vertical-align: -0.04em; }
/* Wide screens: money tables keep their figures near their labels instead of spreading over the full width. The
   month-by-month schedule and the scenario table have more columns and get more room. */
.ra-block__body .ra-t--money { max-width: 46rem; }
.ra-block__body .ra-t--scenarios, .ra-block__body .ra-t--schedule { max-width: 60rem; }
@media (min-width: 760px) {
  .ra-block__summary { grid-template-columns: minmax(12rem, 1fr) minmax(0, auto) auto; grid-template-areas: "title meta icon"; }
  .ra-block__meta { font-size: 0.875rem; text-align: right; }
}
/* Without JavaScript a link into a folded section ("What these numbers mean", #ra-<mode>-<key>) targets its body, so
   the browser opens it; this margin (added to html's scroll-padding, which clears the header) keeps the section's
   summary row, its title and key figure, in view above the body. Sized to the tallest summary at each width: the key
   figure wraps on phones and between 760 and 1023px. With JavaScript, app.js points those links at the title. */
html:not(.js) .ra-block__body { scroll-margin-top: 5.5rem; }
@media (max-width: 379.98px) { html:not(.js) .ra-block__body { scroll-margin-top: 8.5rem; } }
@media (min-width: 760px) { html:not(.js) .ra-block__body { scroll-margin-top: 4.75rem; } }
@media (min-width: 1024px) { html:not(.js) .ra-block__body { scroll-margin-top: 3.5rem; } }
.ra-block__lede { margin-bottom: 14px; max-width: 80ch; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.ra-block__lede strong { color: var(--ink); font-weight: 600; }
.ra-block__note { margin-top: 10px; max-width: 90ch; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.ra-block__note p + p, .ra-block__note p + ul { margin-top: 6px; }
.ra-block__note strong { color: var(--ink-2); }

.ra-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* positioned, so visually hidden labels inside are clipped too */
.ra-table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Scroll box around a wide table: a hint and a right-edge fade while more columns are off to the side
   (app.js sets .is-scrollable / .is-end). The row labels stay put (sticky) while the numbers scroll. */
.ra-scroll { --ra-fade: var(--surface); position: relative; min-width: 0; }
.ra-scroll + .ra-scroll { margin-top: 14px; }
.ra-scroll__hint { display: none; height: 18px; margin: 0 0 6px; font-size: 0.75rem; font-weight: 500; line-height: 18px; color: var(--ink-3); text-align: right; }
.ra-scroll.is-scrollable > .ra-scroll__hint { display: block; }
.ra-scroll.is-scrollable.is-end > .ra-scroll__hint { visibility: hidden; }
.ra-scroll::after { content: ""; position: absolute; top: 24px; right: 0; bottom: 0; width: 28px; background: linear-gradient(to right, transparent, var(--ra-fade)); pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.ra-scroll.is-scrollable:not(.is-end)::after { opacity: 1; }
.ra-prose .ra-scroll { --ra-fade: var(--paper); }
.ra-table-wrap .ra-t tbody th[scope="row"], .ra-table-wrap .ra-t thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.ra-scroll.is-scrollable .ra-t tbody th[scope="row"] { box-shadow: inset -1px 0 0 var(--rule); }
.ra-t__group th > span { position: sticky; left: 0; }
/* Tabular figures only where figures line up (data cells). Inter's tabular forms also widen hyphens, so labels, word
   cells (.ra-tx) and notes keep proportional text ("Master-lease rent", "Pre-opening"). */
.ra-t { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.4; font-variant-numeric: lining-nums; }
.ra-t td { font-variant-numeric: tabular-nums lining-nums; }
.ra-t td.ra-tx, .ra-t tfoot td, .ra-t td .ra-t__d, .ra-t td .ra-flag { font-variant-numeric: lining-nums; }
.ra-t th, .ra-t td { padding: 7px 10px; border-bottom: 1px solid var(--rule); text-align: right; vertical-align: top; white-space: nowrap; }
.ra-t th:first-child, .ra-t td:first-child { padding-left: 0; }
.ra-t th:last-child, .ra-t td:last-child { padding-right: 0; }
.ra-t thead th { font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--ink-3); border-bottom: 1px solid var(--rule-strong); vertical-align: bottom; white-space: normal; }
.ra-t th[scope="row"], .ra-t thead th:first-child { text-align: left; white-space: normal; }
.ra-t th[scope="row"] { font-weight: 500; color: var(--ink-2); min-width: 9em; }
.ra-t th[scope="row"] span, .ra-t__d { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-3); }
.ra-t__v { display: block; }
/* Phones: secondary columns (.ra-col--opt) fold into a line under the row label (.ra-t__alt). */
.ra-t .ra-t__alt, .ra-t th[scope="row"] .ra-t__alt { display: none; }
@media (max-width: 639px) {
  .ra-t th, .ra-t td { padding: 6px 7px; }
  .ra-t th[scope="row"] { min-width: 7.5em; }
  .ra-t .ra-col--opt { display: none; }
  .ra-t .ra-t__alt, .ra-t th[scope="row"] .ra-t__alt { display: block; }
  .ra-t td .ra-t__alt { font-size: 0.75rem; font-weight: 400; color: var(--ink-3); }
  .ra-season__t td { min-width: 84px; }
}
@media (max-width: 360px) {
  .ra-t { font-size: 0.8125rem; }
  .ra-t th, .ra-t td { padding: 5px 4px; }
  .ra-t th[scope="row"] { min-width: 6.5em; hyphens: auto; }
}
.ra-t__group th { white-space: normal; padding-top: 16px; font-size: 0.6875rem !important; font-weight: 600 !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3) !important; text-align: left; }
.ra-t tbody:first-of-type .ra-t__group th { padding-top: 10px; }
.ra-t__total th, .ra-t__total td { font-weight: 650; color: var(--ink); border-bottom-color: var(--rule-strong); }
.ra-t__total th[scope="row"] { font-weight: 650; color: var(--ink); }
.ra-t__sub th[scope="row"] { padding-left: 16px; font-weight: 400; color: var(--ink-3); }
.ra-t__sub td { color: var(--ink-3); }
.ra-t__key th, .ra-t__key td, .ra-table-wrap .ra-t tr.ra-t__key th[scope="row"] { font-weight: 700; color: var(--ink); background: var(--accent-soft); border-bottom: 0; }
.ra-t__key th[scope="row"] { padding-left: 10px; font-weight: 700; color: var(--ink); border-radius: var(--radius) 0 0 var(--radius); }
.ra-t__key td:last-child { padding-right: 10px; border-radius: 0 var(--radius) var(--radius) 0; }
.ra-t__key th span { color: var(--ink-2); }

.ra-t--grid th, .ra-t--grid td { text-align: center; padding: 8px 6px; }
.ra-t--grid th[scope="row"], .ra-t--grid thead th:first-child { text-align: left; padding-left: 0; min-width: 6.5em; }
.ra-t--grid td { min-width: 4.6em; border: 2px solid var(--surface); border-radius: 4px; font-weight: 600; }
.ra-t--grid td.is-pos { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--ink); font-weight: 650; }
.ra-t--grid td.is-zero { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.ra-t--grid td.is-neg { background: var(--paper-2); color: var(--ink-2); font-weight: 450; }
.ra-t--grid td.is-na { color: var(--ink-3); font-weight: 400; }
.ra-t--grid td.is-base { box-shadow: inset 0 0 0 2px var(--accent); color: var(--ink); font-weight: 700; }

.ra-t--schedule th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 4em; background: var(--surface); text-align: center; padding-right: 10px; }
.ra-t--schedule tr.is-pre th, .ra-t--schedule tr.is-pre td, .ra-table-wrap .ra-t--schedule tr.is-pre th[scope="row"] { background: var(--paper-2); }
.ra-t--schedule td.is-neg { color: var(--ink); font-weight: 600; }

.ra-t--scenarios th[scope="row"] { min-width: 12em; font-weight: 600; color: var(--ink); }
.ra-t--scenarios tr.is-base th, .ra-t--scenarios tr.is-base td, .ra-table-wrap .ra-t--scenarios tr.is-base th[scope="row"] { background: var(--paper-2); }
.ra-t--scenarios .ra-flag { display: block; font-size: 0.75rem; font-weight: 500; white-space: normal; }
.ra-t--scenarios td:last-child { white-space: normal; min-width: 7.5em; }
@media (max-width: 639px) {
  .ra-t--scenarios th[scope="row"] { min-width: 8em; }
  .ra-t td .ra-t__alt { white-space: normal; }
}
.ra-t--uses td:nth-child(2), .ra-t--uses thead th:nth-child(2) { text-align: left; }
.ra-t--uses td:nth-child(2) { white-space: normal; color: var(--ink-3); font-size: 0.8125rem; }

.ra-t--adj { width: auto; }
.ra-t--adj th, .ra-t--adj td { vertical-align: middle; }
.ra-t--adj td { width: 150px; min-width: 120px; }
.ra-t--adj th[scope="row"] { min-width: 7.5em; padding-right: 16px; }
.ra-t tfoot td { padding-top: 10px; border-bottom: 0; text-align: left; white-space: normal; font-size: 0.75rem; color: var(--ink-3); }
.ra-field--cell { display: block; margin: 0; }
.ra-field--cell .ra-input { min-height: 38px; }
.ra-field--cell .ra-input__control { font-size: 0.9375rem; padding-inline: 8px; }
.ra-field--cell .ra-field__msg { margin-top: 4px; white-space: normal; text-align: left; }

.ra-notes { margin: 0; }
.ra-notes__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; padding: 11px 0; border-top: 1px solid var(--rule); }
.ra-notes__item:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 760px) { .ra-notes__item { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); } }
.ra-notes dt { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.ra-notes dd { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.ra-notes dd strong { margin-right: 6px; color: var(--ink); font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }

.ra-timing__msg { padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); font-size: 0.875rem; line-height: 1.5; color: var(--ink); border-radius: 0 var(--radius) var(--radius) 0; }
.ra-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px 20px; margin: 14px 0 0; }
.ra-stats dt { font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); }
.ra-stats dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

.ra-fold { margin-top: 16px; border-top: 1px solid var(--rule); }
.ra-fold__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.ra-fold__summary::-webkit-details-marker { display: none; }
.ra-fold__summary .icon { margin-left: auto; color: var(--ink-3); transition: transform 0.2s var(--ease); }
.ra-fold[open] > .ra-fold__summary .icon { transform: rotate(180deg); }
.ra-fold__meta { font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.ra-fold > .ra-block__note { margin: 0 0 12px; }

.ra-assume { display: grid; gap: 20px 40px; }
@media (min-width: 900px) { .ra-assume { grid-template-columns: 1fr 1fr; } }
.ra-assume__title { margin: 0 0 8px; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ra-bullets { padding-left: 1.1em; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.ra-bullets li + li { margin-top: 6px; }
.ra-bullets li::marker { color: var(--ink-3); }

/* ---------- Calculator page: below the tool ---------- */
.ra-reading__wrap { max-width: 800px; }
.ra-reading__wrap .h2 { margin: 12px 0 clamp(16px, 2.4vw, 24px); }
.ra-examples .h2 { margin-top: 12px; }
.ra-examples__intro { margin-top: 12px; max-width: 70ch; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.ra-xcards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: clamp(20px, 3vw, 28px); }
.ra-xcard { display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 16px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); }
.ra-xcard__kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.ra-xcard__title { margin-top: 6px; font-size: 1.1875rem; line-height: 1.25; }
.ra-xcard__summary { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.ra-xcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: auto; padding-top: 14px; }
.ra-xcard__link { display: inline-flex; align-items: center; min-height: 32px; font-size: 0.875rem; font-weight: 600; color: var(--link); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ra-tab, .ra-input, .ra-group__summary .icon, .ra-fold__summary .icon, .ra-block__summary > .icon, .ra-scroll::after { transition: none; }
}

/* ---------- Print ---------- */
.ra-print { display: none; }
@media print {
  /* Ordinary printing of the page: drop the controls. */
  .ra-tabs, .ra-tools, .ra-status__actions, .ra-rooms__actions, .ra-room__remove, .ra-room-gone, .ra-noscript { display: none !important; }
  .ra-results { position: static !important; max-height: none !important; overflow: visible !important; }
  .ra-scroll__hint, .ra-scroll::after { display: none !important; }
  .ra-calc, .ra-block, .ra-main, .ra-card, .ra-group { box-shadow: none !important; }

  /* "Print summary": only the generated report. */
  html.ra-printing main > :not(#ra-print) { display: none !important; }
  html.ra-printing .ra-print { display: block !important; }
  html.ra-printing body { background: #fff !important; }
  .ra-print, .ra-print * { color: #000 !important; background: transparent !important; box-shadow: none !important; border-color: #b9b9b9 !important; }
  .ra-print { font-family: var(--font-sans); font-size: 10pt; line-height: 1.4; }
  .ra-print__brand { font-size: 8.5pt; letter-spacing: 0.08em; text-transform: uppercase; }
  .ra-print h2 { margin: 4pt 0 2pt; font-size: 17pt; }
  .ra-print h3 { margin: 14pt 0 5pt; font-size: 12.5pt; break-after: avoid; }
  .ra-print h4 { margin: 8pt 0 3pt; font-family: var(--font-sans); font-size: 10pt; font-weight: 700; break-after: avoid; }
  .ra-print__meta { font-size: 9pt; }
  .ra-print__url { word-break: break-all; }
  .ra-print__note { margin-top: 6pt; padding: 6pt 8pt; border: 1px solid #b9b9b9; }
  .ra-print .ra-headline { padding: 0; }
  .ra-print .ra-headline__value { font-size: 20pt; }
  .ra-print .ra-tag { border: 1px solid #000; }
  .ra-print .ra-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ra-print .ra-kpi, .ra-print .ra-kpi:nth-child(even) { padding: 5pt 6pt; border-right: 0; border-top: 1px solid #b9b9b9; }
  .ra-print .ra-kpi:last-child:nth-child(odd) { grid-column: auto; }
  .ra-print .ra-issues { padding: 5pt 0; border-left: 0; }
  .ra-print table { width: 100%; border-collapse: collapse; font-size: 9pt; break-inside: auto; }
  .ra-print tr { break-inside: avoid; }
  .ra-print .ra-t th, .ra-print .ra-t td, .ra-print__inputs th, .ra-print__inputs td { padding: 2.5pt 5pt; border-bottom: 1px solid #d0d0d0; white-space: normal; }
  .ra-print__inputs th { width: 60%; text-align: left; font-weight: 400; }
  .ra-print__inputs td { text-align: right; }
  .ra-print .ra-notes__item { display: block; padding: 4pt 0; }
  .ra-print tfoot { display: table-row-group; }
  .ra-print .ra-bullets { padding-left: 14pt; font-size: 9pt; }
  .ra-print .ra-flag::before { border: 1px solid #000; }
  /* Sub-lines (fixed-cost items, setup items) stay indented and lighter so they don't read as extra costs. */
  .ra-print .ra-t__sub th[scope="row"] { padding-left: 14pt !important; color: #444 !important; font-style: italic; }
  .ra-print .ra-t__sub td { color: #444 !important; }
  .ra-print .ra-t__alt { display: none !important; }
  .ra-print .ra-col--opt { display: table-cell !important; }
  .ra-print .ra-notes__item, .ra-print__group, .ra-print__sec.is-keep, .ra-print .ra-kpi { break-inside: avoid; }
  .ra-print h3, .ra-print h4 { break-after: avoid; }
  .ra-print__small { font-size: 8.5pt; }
  .ra-print .ra-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4pt 10pt; margin-top: 6pt; }
  .ra-print .ra-stats dd { margin: 0; font-weight: 700; }
  .ra-print .ra-timing__msg { padding: 4pt 0; border: 0; }
  .ra-print .ra-t--grid td { border: 1px solid #d0d0d0 !important; }
  .ra-print .ra-headline.is-provisional [data-out] { opacity: 1; }
}

/* Phones and tablets: a slim bar pinned to the bottom of the inputs card keeps the headline in view while typing.
   scroll-padding-bottom makes the browser stop short of it when it scrolls a focused field into view, so the bar never
   covers the field being typed in (WCAG 2.4.11). */
@media (max-width: 1023.98px) { html { scroll-padding-bottom: 84px; } }
/* A very long figure wraps the "See results" link onto its own line instead of running under it. */
.ra-peek { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px var(--ra-pad); border-top: 1px solid var(--navy-rule); border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--navy); color: var(--navy-ink); text-decoration: none; box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, 0.45); }
.ra-peek:hover { color: var(--navy-ink); }
.ra-peek__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.ra-peek__label { font-size: 0.8125rem; color: var(--navy-ink-2); }
.ra-peek__value { min-width: 0; font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.ra-peek__value.is-long { font-size: 1rem; }
.ra-peek__value.is-xlong { font-size: 0.9375rem; }
.ra-peek__issue { font-size: 0.75rem; color: var(--navy-ink-2); }
.ra-peek__go { flex: none; margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--navy-accent); }
.ra-peek:focus-visible { outline-offset: -3px; outline-color: var(--navy-accent); }
.ra-main__foot + .ra-peek, .ra-main__foot[hidden] + .ra-peek { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
/* Small phones: the label sits over the figure, so "See results" stays on the same row and the bar stays short. */
@media (max-width: 360px) {
  .ra-peek { flex-wrap: nowrap; padding-block: 7px; }
  .ra-peek__body { flex-direction: column; align-items: flex-start; gap: 0; }
  .ra-peek__label { font-size: 0.75rem; line-height: 1.3; }
  .ra-peek__value { line-height: 1.25; }
}
@media (min-width: 1024px) { .ra-peek { display: none; } }
@media print { .ra-peek, .ra-mini { display: none !important; } }

/* Wide screens: the results card scrolls with the page when it is too tall to stay in view (app.js .is-static). Then
   .ra-mini, a compact copy of the headline at the foot of the results column, is pinned to the bottom of the window
   while the card's own headline is scrolled away (.is-mini), so the cash flow stays beside the inputs being edited.
   Its space is reserved whenever the card is static (.has-mini), so showing it never moves anything. */
.ra-mini { display: none; }
@media (min-width: 1024px) {
  html { scroll-padding-bottom: 80px; } /* a focused control is never left under the pinned headline */
  .ra-results { display: flex; flex-direction: column; }
  .ra-results.has-mini .ra-mini { display: flex; }
  .ra-mini { position: sticky; bottom: 16px; z-index: 4; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; margin-top: auto; padding: 10px 16px 10px 20px; border-radius: var(--radius-lg); background: var(--navy); color: var(--navy-ink); text-decoration: none; box-shadow: var(--shadow-md), 0 0 0 1px var(--navy-rule); visibility: hidden; opacity: 0; transition: opacity 0.15s var(--ease), visibility 0s linear 0.15s; }
  .ra-results.is-mini .ra-mini { visibility: visible; opacity: 1; transition: opacity 0.15s var(--ease); }
  .ra-mini:hover { color: var(--navy-ink); }
  .ra-mini:hover .ra-peek__go { text-decoration: underline; }
  .ra-mini:focus-visible { outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .ra-mini, .ra-results.is-mini .ra-mini { transition: none; } }

/* Laptop-height windows (kept last so it overrides the card rules above): a tighter results card, so it still fits,
   and stays in view, beside the inputs on an 800px-tall window. */
@media screen and (min-width: 1024px) and (max-height: 940px) {
  .ra-card__top { padding-top: 6px; }
  .ra-headline { padding-bottom: 11px; }
  .ra-headline__label span { display: inline; }
  .ra-headline__value { margin-top: 3px; font-size: 2.125rem; }
  .ra-headline__note { margin-top: 3px; }
  .ra-kpi { padding-top: 7px; padding-bottom: 8px; }
  .ra-kpi dd { margin-top: 2px; }
  .ra-disclaimer { padding-block: 8px; }
  .ra-tools { padding-block: 9px 10px; }
  .ra-tools .ra-btn { min-height: 36px; }
}