:root {
  --muted-color: #5a574f;
  --border-color: #9a9387;
  --grid-color: #b4ad9f;
  --below-color: #176481;
  --above-color: #8b4f0c;
  --marker-color: #67437c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --muted-color: #b1c3c8;
    --border-color: #52717a;
    --grid-color: #345560;
    --below-color: #76c2df;
    --above-color: #e2b46f;
    --marker-color: #c5a8e3;
    color-scheme: dark;
  }
}
.quick-scenarios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; font-size: 0.9em; }
.quick-scenarios a { margin: 0; padding: 5px 9px; border: 1px solid currentColor; background: transparent; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--border-color); }
.legend { display: flex; flex-wrap: wrap; gap: 24px; padding: 0; list-style: none; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 5px; }
.swatch { display: inline-block; width: 20px; height: 3px; margin-right: 3px; }
.cool { background: var(--below-color); }
.warm { background: var(--above-color); }
#chart { margin-top: 24px; }
#chart svg { display: block; width: 100%; height: auto; }
#chart text { fill: var(--muted-color); font: 12px var(--font-secondary); }
.hover-guide { stroke: var(--border-color); }
.probability-threshold { stroke-opacity: 0.5; stroke-width: 2.5; stroke-dasharray: 5 4; pointer-events: none; }
.hover-leader { stroke-width: 1; }
#chart .hover-value { paint-order: stroke; stroke: var(--background-color); stroke-width: 4px; font-weight: 600; }
#chart .value-below { fill: var(--below-color); }
#chart .value-above { fill: var(--above-color); }
.crossover circle { fill: var(--background-color); stroke: var(--marker-color); stroke-width: 2; }
#chart .crossover text { fill: var(--marker-color); paint-order: stroke; stroke: var(--background-color); stroke-width: 4px; }
.grid { stroke: var(--grid-color); }
.daily-bar { opacity: 0.35; }
.series { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.below { stroke: var(--below-color); }
.above { stroke: var(--above-color); }
.point-below { fill: var(--below-color); }
.point-above { fill: var(--above-color); }
.muted { color: var(--muted-color); font-size: 13px; }
button { font: inherit; padding: 5px 12px; margin: 0; cursor: pointer; }
form { margin: 18px 0; line-height: 2.6; }
#location-form { display: inline-block; position: relative; width: 18rem; max-width: 100%; line-height: 1.6; vertical-align: middle; }
#location-search { width: 100%; }
#location-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 2; padding: 0; margin: 4px 0; list-style: none; background: var(--background-color); }
#location-results button { display: block; width: 100%; padding: 7px; text-align: left; }
#location-status { position: absolute; top: 100%; left: 0; z-index: 2; margin: 4px 0; padding: 4px; width: 100%; background: var(--background-color); }
#location-status:empty { display: none; }
.htmx-indicator { display: none; }
.htmx-request.htmx-indicator { display: block; }
input, select { font: inherit; padding: 5px; height: 2.2em; box-sizing: border-box; vertical-align: middle; }
input, select, button { color: var(--text-color); background-color: var(--background-color); border: 1px solid var(--border-color); border-radius: 2px; }
input { width: 5rem; box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--link-color); outline-offset: 3px; }
[hidden] { display: none !important; }