/* Run Goal Planner (140). Site tokens only, plus one goal colour; the site is dark. */
.rg-tool { --rg-run: var(--color-link); --rg-goal: #e9b44c; --rg-curve: var(--color-link); max-width: 980px; }
.tool-ui .rg-lede { color: var(--color-muted); font-size: .92rem; line-height: 1.4; margin: -.5rem 0 .75rem; }
.rg-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rg-top { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: .6rem; max-width: 560px; }
.rg-top > div { min-width: 0; }
.rg-top label { font-size: .85rem; color: var(--color-muted); }
.rg-top select, .rg-top input { margin: .15rem 0 0; min-height: 44px; }
.tool-ui .rg-example { color: var(--color-muted); margin: 1.25rem 0 .75rem; }
.rg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.rg-fields fieldset { background: var(--color-surface); border: 1px solid var(--line); border-radius: 7px; padding: .75rem 1rem; margin: 0; min-width: 0; }
.rg-fields legend { font-weight: 700; padding: 0 .35rem; }
.rg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 0 .75rem; }
.rg-grid > div { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.rg-grid.rg-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rg-goals > .rg-goal { justify-content: flex-start; }
.rg-grid input, .rg-grid select { margin-bottom: .6rem; min-height: 44px; }
.rg-goal { border-top: 1px solid var(--line); padding-top: .5rem; }
.rg-goal > div { display: flex; flex-direction: column; }
.rg-goal-when { margin: 0 0 .25rem; color: var(--rg-goal); font-weight: 700; }
.rg-status:empty { display: none; }
.rg-status { color: var(--rg-goal); }
.rg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: .75rem 0; }
.rg-stat { background: var(--color-surface); border: 1px solid var(--line); border-radius: 7px; padding: .5rem .75rem; min-width: 0; }
.rg-stat b { display: block; font-size: 1.45rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rg-stat span { display: block; color: var(--color-muted); font-size: .85rem; line-height: 1.3; }
.rg-stat-run b { color: var(--rg-run); }
.rg-figure { margin: 0; background: var(--color-surface); border: 1px solid var(--line); border-radius: 7px; padding: .5rem; }
.tool-ui .rg-figure h2 { font-size: 1.05rem; letter-spacing: 0; margin: .15rem .25rem .25rem; }
.rg-own-figure { margin: 0; }
#rg-chart { width: 100%; min-height: 200px; }
#rg-chart .rg-hit { fill: transparent; pointer-events: all; cursor: ew-resize; touch-action: none; }
#rg-chart.rg-dragging svg { touch-action: none; cursor: ew-resize; }
#rg-chart.rg-dragging .rg-hit { cursor: ew-resize; }
#rg-chart svg { display: block; width: 100%; height: auto; }
#rg-chart text { fill: var(--color-muted); font: 12px var(--font-body); }
#rg-chart .rg-band-label { fill: var(--color-text); }
.rg-band-0 { fill: rgb(245 242 235 / .035); }
.rg-band-1 { fill: rgb(245 242 235 / .08); }
.rg-band-edge { stroke: var(--line); stroke-dasharray: 3 3; }
.rg-area { fill: rgb(159 180 255 / .16); }
.rg-curve { fill: none; stroke: var(--rg-curve); stroke-width: 2; }
.rg-axis { stroke: var(--color-muted); }
.rg-median { stroke: var(--rg-curve); stroke-width: 1; }
.rg-lead { stroke-width: 1; }
.rg-lead.rg-run { stroke: var(--rg-run); }
.rg-lead.rg-goal { stroke: var(--rg-goal); stroke-dasharray: 2 2; }
.rg-dot.rg-run { fill: var(--rg-run); }
.rg-dot.rg-goal { fill: var(--rg-goal); }
.rg-dot.rg-cool { fill: var(--color-surface); stroke: var(--rg-run); stroke-width: 2; }
#rg-chart .rg-mark { font-weight: 700; paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; }
#rg-chart .rg-mark.rg-run { fill: var(--rg-run); }
#rg-chart .rg-mark.rg-goal { fill: var(--rg-goal); }
.rg-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--color-muted); font-size: .85rem; margin: .25rem .25rem 0; }
.rg-legend-hint { margin-left: auto; }
.tool-ui .rg-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .25rem 1rem; align-items: end; background: none; border: 0; padding: 0; margin: .5rem 0 0; min-width: 0; }
.rg-slider { min-width: 0; }
.rg-slider label { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--color-muted); }
.rg-slider output { color: var(--rg-goal); font-weight: 700; font-variant-numeric: tabular-nums; }
.rg-slider-run output { color: var(--rg-run); }
.tool-ui .rg-slider input[type=range] { display: block; width: 100%; max-width: none; min-height: 36px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--rg-goal); }
.tool-ui .rg-slider-run input[type=range] { accent-color: var(--rg-run); }
.tool-ui .rg-reset { min-height: 40px; max-width: 100%; padding: .4rem .6rem; font-size: .85rem; justify-self: start; align-self: end; white-space: nowrap; border: 1px solid var(--line); background: var(--color-surface-raised); color: var(--color-text); font-weight: 600; }
.tool-ui .rg-reset:hover { background: var(--line); }
.rg-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.rg-key-run { background: var(--rg-run); }
.rg-key-cool { border: 2px solid var(--rg-run); }
.rg-key-goal { background: var(--rg-goal); }
.rg-table-wrap { overflow-x: auto; margin: 1rem 0; background: var(--color-surface); border: 1px solid var(--line); border-radius: 7px; }
.rg-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.rg-table th, .rg-table td { padding: .5rem .65rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rg-table thead th { color: var(--color-muted); font-size: .85rem; }
.rg-table tbody tr:last-child > * { border-bottom: 0; }
.rg-change { color: var(--color-muted); }
.rg-change.rg-up { color: var(--rg-goal); }
.rg-sources li { margin-bottom: .4rem; }
@media (max-width: 699px) {
  .tool-ui h1 { margin-bottom: 12px; }
  .tool-ui .rg-lede { font-size: .85rem; margin: -.25rem 0 .5rem; }
  .rg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: .5rem 0; }
  .rg-stat { padding: .35rem .6rem; }
  .rg-stat b { font-size: 1.2rem; }
  .rg-stat span { font-size: .78rem; }
  .rg-figure { padding: .35rem .25rem; }
  .rg-legend { font-size: .78rem; gap: .2rem .75rem; }
}