/* Rating-conversion dashboard: house tokens (the reference palette the Openings page uses).
   Light only, like the site theme (ember.scss / litera). The drawing code reads these
   variables by name, so they keep the names the page was first written with. */
:root {
  --color-fg: #0b0b0b;
  --color-fg-muted: #52514e;
  --color-bg: #ffffff;
  --color-panel: #f6f5f1;
  --color-border-line: #e1e0d9;
  --color-ok: #006300;
  --color-warn: #9a5b00;
  --color-bad: #d03b3b;
  --cds-text-secondary: #52514e;
  --cds-chart-grid: #e1e0d9;
  --cds-chart-axis: #c3c2b7;
  --cds-chart-reference: #898781;
  --cds-chart-muted: #b5b3ab;
  --cds-surface-popover: #ffffff;
  --cds-border: #e1e0d9;
  --cds-shadow-popover: 0 4px 14px rgba(11, 11, 11, 0.12);
  --cds-font-size-caption: 0.8rem;
  --cds-font-size-body: 1rem;
  --cds-font-size-heading: 1.15rem;
  --cds-font-size-title: 1.6rem;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 0.25rem;
  --cds-gap-sm: 0.5rem;
  --cds-gap-md: 0.75rem;
  --cds-gap-lg: 1.25rem;
  --cds-gap-xl: 2rem;
  --cds-pad-xs: 0.25rem;
  --cds-pad-sm: 0.5rem;
  --cds-pad-md: 0.75rem;
  --cds-pad-lg: 1rem;
  --cds-radius: 6px;
  --cds-dur-slow: 0.3s;
}

/* Quarto page frame: as on the Openings page, cap the width and let wide tables scroll. */
main.content { max-width: 1180px; margin: 0 auto; width: 100%; min-width: 0; }
.rc h2, .rc h3 { border: none; padding: 0; }
.rc table { margin: 0; }
.rc-month-label { min-width: 7.5em; font-variant-numeric: tabular-nums; color: var(--color-fg); }
.rc input[type="range"] { accent-color: var(--color-fg); }
.dash-skeleton { background: linear-gradient(90deg, var(--color-panel) 25%, #ecebe5 50%, var(--color-panel) 75%); background-size: 200% 100%; border-radius: var(--cds-radius); }
@media (prefers-reduced-motion: no-preference) {
  .dash-skeleton { animation: rc-shimmer 1.4s linear infinite; }
  @keyframes rc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}

.rc { font-family: inherit; display: flex; flex-direction: column; gap: var(--cds-gap-lg); }
.rc p { margin: 0; }
.rc-head { display: flex; flex-direction: column; gap: var(--cds-gap-xs); }
.rc-head h1 { margin: 0; font-weight: 700; font-size: var(--cds-font-size-title); text-wrap: balance; }
.rc-lede { color: var(--color-fg-muted); max-width: 70ch; }
.rc-tabs { display: flex; flex-wrap: wrap; gap: var(--cds-gap-xs); border-bottom: 1px solid var(--color-border-line); }
.rc-tabs button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: var(--cds-pad-sm) var(--cds-pad-md); font: inherit; color: var(--color-fg-muted); cursor: pointer; }
.rc-tabs button:hover { color: var(--color-fg); }
.rc-tabs button[aria-selected="true"] { color: var(--color-fg); border-bottom-color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }
.rc-tabs button:focus-visible, .rc button:focus-visible, .rc select:focus-visible, .rc input:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.rc-page { display: flex; flex-direction: column; gap: var(--cds-gap-lg); }
.rc-controls { display: flex; flex-wrap: wrap; gap: var(--cds-gap-md); align-items: flex-end; }
.rc-field { display: flex; flex-direction: column; gap: var(--cds-gap-xs); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); min-width: 0; }
.rc-field select, .rc-field input[type="number"], .rc-swap { font: inherit; font-size: var(--cds-font-size-body); color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-xs) var(--cds-pad-sm); max-width: 100%; }
.rc-field input[type="number"] { width: 6.5em; font-variant-numeric: tabular-nums; }
.rc-swap { cursor: pointer; line-height: 1.4; }
.rc-rating { display: flex; align-items: center; gap: var(--cds-gap-sm); }
.rc-rating input[type="range"] { width: min(16rem, 50vw); accent-color: var(--color-fg); }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--cds-gap-md); }
.rc-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-sm); min-width: 0; }
.rc-wide { grid-column: 1 / -1; }
.rc-card h2, .rc-card h3 { margin: 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); text-wrap: balance; }
.rc-note { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); max-width: 80ch; }
.rc-chart { position: relative; min-height: 220px; }
.rc-chart-tall { min-height: 360px; }
.rc-svg { display: block; overflow: visible; }
.rc-svg .rc-tick { fill: var(--color-fg-muted); font-size: var(--cds-font-size-caption); font-family: inherit; font-variant-numeric: tabular-nums; }
.rc-svg .rc-lab { fill: var(--color-fg); font-size: var(--cds-font-size-caption); font-family: inherit; }
.rc-svg .rc-hit { cursor: pointer; }
.rc-tip { position: absolute; z-index: 2; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); display: flex; flex-direction: column; gap: 2px; min-width: 10rem; max-width: 18rem; }
.rc-tip-head { color: var(--cds-text-secondary); }
.rc-tip-row { display: flex; align-items: center; gap: var(--cds-gap-xs); }
.rc-tip-row b { margin-left: auto; padding-left: var(--cds-gap-sm); font-variant-numeric: tabular-nums; font-weight: var(--cds-font-weight-medium); }
.rc-sw { width: 0.6rem; height: 0.6rem; border-radius: 2px; flex: none; display: inline-block; }
.rc-sw-line { height: 2px; width: 0.9rem; border-radius: 1px; }
.rc-sw-dash { height: 0; width: 0.9rem; border-top: 2px dashed currentColor; background: none !important; }
.rc-sw-ring { width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid var(--color-fg-muted); background: none !important; }
.rc-sw-dot { border-radius: 50%; }
.rc-sw-diamond { width: 0.5rem; height: 0.5rem; transform: rotate(45deg); border-radius: 1px; }
.rc-legend { display: flex; flex-wrap: wrap; gap: var(--cds-gap-xs) var(--cds-gap-md); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); list-style: none; margin: 0; padding: 0; }
.rc-legend li { display: flex; align-items: center; gap: var(--cds-gap-xs); }
.rc-empty { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); min-height: inherit; display: flex; align-items: center; justify-content: center; text-align: center; }
.rc-failed { min-height: inherit; display: flex; align-items: center; justify-content: center; gap: var(--cds-gap-xs); color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.rc-failed::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--color-bad); }
.rc-answer { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--cds-gap-sm) var(--cds-gap-xl); align-items: end; }
.rc-answer-main { display: flex; flex-direction: column; gap: var(--cds-gap-xs); }
.rc-eyebrow { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.rc-big { font-weight: 700; font-size: calc(var(--cds-font-size-title) * 2.2); line-height: 1; font-variant-numeric: tabular-nums; }
.rc-big-unit { font-family: inherit; font-size: var(--cds-font-size-body); color: var(--color-fg-muted); }
.rc-sub { color: var(--color-fg-muted); max-width: 46ch; }
.rc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--cds-gap-sm) var(--cds-gap-md); margin: 0; }
.rc-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-stats dt { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.rc-stats dd { margin: 0; font-variant-numeric: tabular-nums; font-size: var(--cds-font-size-body); }
.rc .rc-stats b, .rc .rc-ask b, .rc .rc-note b { font-weight: var(--cds-font-weight-medium); }
.rc-q2-answer { gap: var(--cds-gap-md); }
.rc-lead { font-size: var(--cds-font-size-heading); max-width: 60ch; text-wrap: balance; }
.rc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--cds-gap-md); min-height: 6rem; }
.rc-tile { display: flex; flex-direction: column; gap: var(--cds-gap-xs); padding: var(--cds-pad-md); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); background: var(--color-bg); min-width: 0; }
.rc-tile-tc { display: flex; align-items: center; gap: var(--cds-gap-xs); font-weight: var(--cds-font-weight-medium); }
.rc-tile-big { font-weight: 700; font-size: calc(var(--cds-font-size-title) * 1.6); line-height: 1; font-variant-numeric: tabular-nums; }
.rc-tile-delta { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.rc-tile-delta.rc-up { color: var(--color-ok); }
.rc-tile-delta.rc-down { color: var(--color-warn); }
.rc-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--cds-gap-sm); max-width: 80ch; line-height: 1.5; }
.rc-warn { color: var(--color-warn); font-size: var(--cds-font-size-caption); grid-column: 1 / -1; }
@media (max-width: 40rem) { .rc-answer { grid-template-columns: minmax(0, 1fr); } }
.rc-table-box { max-height: 28rem; overflow: auto; border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); }
.rc-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: var(--cds-font-size-caption); }
.rc-table th, .rc-table td { padding: var(--cds-pad-xs) var(--cds-pad-sm); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--color-border-line); }
.rc-table th:first-child, .rc-table td:first-child { text-align: left; }
.rc-table thead th { position: sticky; top: 0; background: var(--color-panel); color: var(--color-fg-muted); font-weight: var(--cds-font-weight-medium); z-index: 1; }
.rc-table tbody tr { cursor: pointer; }
.rc-table tbody tr:hover td { background: var(--cds-chart-grid); }
.rc-table .rc-col-on { color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }
.rc-table td.rc-rough { color: var(--color-fg-muted); font-style: italic; }
.rc-table tr.rc-row-on td { background: var(--cds-chart-grid); font-weight: var(--cds-font-weight-medium); }
.rc-prose { display: flex; flex-direction: column; gap: var(--cds-gap-md); max-width: 72ch; line-height: 1.55; }
.rc-prose h2 { margin: var(--cds-gap-sm) 0 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); }
.rc-prose ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--cds-gap-xs); }
[data-dash-source-state="refreshing"] { opacity: .5; transition: opacity var(--cds-dur-slow); }
[data-dash-source-state="empty"] { color: transparent; }