/*
 * Creditcrest Research — "What drives credit and house prices" and its method
 * page: their own styles, on top of /style.css and its research styles. A file rather than a <style> block,
 * because the site's content-security-policy (style-src 'self') refuses
 * inline styles; for the same reason the charts are coloured by these
 * classes, never by attributes.
 *
 * Light by default, as the whole site is. The dark values apply when the
 * reader has chosen dark (data-theme="dark" on <html>), never because the
 * operating system is dark: the founder's rule for every Creditcrest page.
 * Chart colours were checked with the dataviz palette validator: cobalt and
 * orange on white, and a lighter cobalt with a deeper orange on midnight,
 * pass the lightness, chroma, colour-blind separation and contrast checks.
 */

.rs {
  --rs-s1: #2457FF;
  --rs-s2: #EB6834;
  --rs-ink: var(--midnight);
  --rs-body: var(--text);
  --rs-muted: var(--muted);
  --rs-grid: #E3E8F3;
  --rs-surface: #FFFFFF;
  --rs-band: #F2F5FC;
  --rs-line: var(--line);
}
:root[data-theme="dark"] .rs-page { background: var(--midnight-2); }
:root[data-theme="dark"] .rs-page h1, :root[data-theme="dark"] .rs-page .section-lede, :root[data-theme="dark"] .rs-page .kicker { color: #FFFFFF; }
:root[data-theme="dark"] .rs {
  --rs-s1: #5A7CF5;
  --rs-s2: #D95926;
  --rs-ink: #FFFFFF;
  --rs-body: var(--on-dark);
  --rs-muted: var(--on-dark-dim);
  --rs-grid: var(--line-dark);
  --rs-surface: var(--midnight-2);
  --rs-band: var(--midnight-3);
  --rs-line: var(--line-dark);
  color: var(--rs-body);
}
:root[data-theme="dark"] .rs h2, :root[data-theme="dark"] .rs h3, :root[data-theme="dark"] .rs strong, :root[data-theme="dark"] .rs th { color: var(--rs-ink); }
:root[data-theme="dark"] .rs p, :root[data-theme="dark"] .rs li, :root[data-theme="dark"] .rs td { color: var(--rs-body); }
:root[data-theme="dark"] .rs a { color: var(--ice); }

.rs h3 { font-size: 19px; margin: 28px 0 10px; color: var(--rs-ink); }
.rs .rs-meta { font-size: 15px; color: var(--rs-muted); margin: 0 0 8px; }
.rs .rs-meta strong { color: var(--rs-ink); font-weight: 600; }
.rs .rs-small, .rs .rs-small li { font-size: 15px; line-height: 1.55; color: var(--rs-muted); }
.rs .rs-sub { display: block; font-size: 13px; font-weight: 400; color: var(--rs-muted); }
/* A suburb's role under its name: a line of its own, not the pill /style.css gives a span in a row heading. */
.rs-table tbody th .rs-sub { margin: 2px 0 0; padding: 0; border-radius: 0; background: none; line-height: 1.4; vertical-align: baseline; }

/* The first screen: what matters most, numbered. */
.rs-most { margin: 0 0 8px; padding-left: 22px; }
.rs-most li { margin: 0 0 12px; }
.rs-most li::marker { color: var(--rs-s1); font-weight: 600; }

.rs .rs-callout { border: 1px solid var(--border); background: var(--rs-band); border-radius: var(--r-card); padding: 14px 18px; }
:root[data-theme="dark"] .rs .rs-callout { border-color: var(--rs-line); }
.rs-refs li { margin: 0 0 12px; }
/* A file name or an address in a list of sources breaks rather than widening a phone screen. */
.rs .rs-sources li { overflow-wrap: anywhere; }

/* Tables: rows on a desktop; on a phone each row a block, each cell with its label. */
.rs-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.rs-table th, .rs-table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rs-line); line-height: 1.45; }
.rs-table thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-muted); font-weight: 600; border-bottom-color: var(--border); }
.rs-table tbody th { color: var(--rs-ink); font-weight: 600; }
.rs-table td { color: var(--rs-body); font-variant-numeric: tabular-nums; }
.rs-verdicts tbody th { width: 30%; }
.rs-verdicts td:nth-child(2) { width: 1%; white-space: nowrap; }
.rs-fc td:nth-child(3), .rs-fc td:nth-child(4) { white-space: nowrap; }
.rs-events td:nth-child(2), .rs-events td:nth-child(3), .rs-events td:nth-child(4), .rs-events td:nth-child(5) { white-space: nowrap; }

/* A verdict is a word first; the pill only groups it. */
.rs-v { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--rs-ink); background: var(--rs-surface); }
.rs-v-held { background: #E8EEFF; border-color: #C4D2FF; color: #1A45D8; }
.rs-v-partly { background: var(--rs-band); }
.rs-v-not-shown { border-style: dashed; color: var(--rs-muted); }
.rs-v-did-not-hold { background: var(--rs-ink); border-color: var(--rs-ink); color: var(--rs-surface); }
:root[data-theme="dark"] .rs-v-held { background: #15224A; border-color: #2E4796; color: var(--ice); }
/* Found in the data: the factors nobody named, set apart from the founder's assumptions by an orange rule and pill. */
.rs-v-found { background: #FFF1EA; border-color: #F3C2AC; color: #A63F16; }
:root[data-theme="dark"] .rs-v-found { background: #3A1C10; border-color: #7A3A20; color: #FFB394; }
.rs-found .rs-group th { padding: 22px 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #A63F16; border-bottom: 2px solid var(--rs-s2); width: auto; }
:root[data-theme="dark"] .rs-found .rs-group th { color: #FFB394; }
.rs-warn td:nth-child(4) { white-space: nowrap; }
.rs-else li::marker { color: var(--rs-s2); }
/* The method page's long tables: a little smaller, so seven columns fit a laptop. */
.rs-wide { font-size: 14px; }
.rs-wide th, .rs-wide td { padding-right: 10px; }

/* Charts. */
.rs-fig { margin: 24px 0 28px; max-width: 560px; }
.rs-chart { width: 100%; height: auto; font-family: var(--font); overflow: visible; }
.rs-chart text { font-family: var(--font); }
.rs-tick, .rs-tag { fill: var(--rs-muted); font-size: 12px; }
.rs-label { fill: var(--rs-ink); font-size: 13.5px; font-weight: 500; }
.rs-label .rs-sub { fill: var(--rs-muted); font-weight: 400; font-size: 12px; }
.rs-value { fill: var(--rs-body); font-size: 13px; font-variant-numeric: tabular-nums; }
.rs-key text { fill: var(--rs-body); font-size: 12.5px; }
.rs-grid { stroke: var(--rs-grid); stroke-width: 1; }
.rs-zero, .rs-axis { stroke: var(--rs-muted); stroke-width: 1; }
.rs-test { fill: var(--rs-band); }
.rs-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rs-dash { stroke-dasharray: 5 4; }
.rs-line.rs-s1, .rs-range.rs-s1 { stroke: var(--rs-s1); }
.rs-line.rs-s2, .rs-range.rs-s2 { stroke: var(--rs-s2); }
.rs-hbar.rs-s1 { fill: var(--rs-s1); }
.rs-range { stroke-width: 8; stroke-linecap: round; fill: none; }
.rs-band { stroke: none; fill-opacity: .14; }
.rs-band.rs-s1 { fill: var(--rs-s1); }
.rs-band.rs-s2 { fill: var(--rs-s2); }
:root[data-theme="dark"] .rs-band { fill-opacity: .24; }
.rs-mid { fill: var(--rs-surface); stroke: var(--rs-ink); stroke-width: 2; }
.rs-hit { fill: transparent; }
.rs-hit:hover { fill: var(--rs-s1); fill-opacity: .25; }
.rs-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--rs-muted); }

.rs-figures { margin-top: 8px; }
.rs-figures summary { cursor: pointer; color: var(--cobalt); font-weight: 500; font-size: 14px; }
:root[data-theme="dark"] .rs-figures summary { color: var(--ice); }
.rs-figures .rs-table { margin-top: 8px; font-size: 14px; }

@media (max-width: 620px) {
  .rs-table thead { display: none; }
  .rs-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--rs-line); }
  .rs-table th, .rs-table td { display: block; border: 0; padding: 2px 0; width: auto !important; white-space: normal !important; }
  .rs-table td[data-label]::before { content: attr(data-label); display: block; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-muted); }
  .rs-fig { margin: 18px 0 22px; }
  .rs-found tr.rs-group { border-bottom: 0; padding-bottom: 0; }
  .rs h3 { font-size: 18px; }
}

@media print {
  .rs-figures { display: block; }
  .rs-hit { display: none; }
}