:root {
  --ink: #19332e;
  --muted: #66756e;
  --paper: #f2f1ea;
  --panel: #fffdf8;
  --line: #d7ddd3;
  --direct: #d6a82f;
  --shadow: #376579;
  --unknown: #a06487;
  --not-evaluated: #aeb9b4;
  --grid: #dbe6df;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
main { width: min(1500px, calc(100% - 36px)); margin: auto; padding: 38px 0 56px; }
.masthead, .controls, .coverage-strip, .summary-grid, .visual-grid, .panel-heading { display: flex; gap: 20px; }
.masthead { justify-content: space-between; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 26px; }
.eyebrow { color: #74827b; font-size: .68rem; font-weight: 850; letter-spacing: .16em; margin: 0 0 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.06em; margin-bottom: 8px; }
h1 span { color: #668076; font-weight: 400; }
h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.03em; }
h3 { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin: 22px 0 12px; color: #4d625a; }
.subtitle, .header-note, .scenario-description, .panel-heading > p, .map-note { color: var(--muted); }
.header-note { text-align: right; line-height: 1.5; font-size: .86rem; }
.header-note strong { color: var(--ink); }
.planning-setup { background: var(--panel); border: 1px solid var(--line); margin: 20px 0 18px; padding: 17px 19px 14px; }
.planning-heading { align-items: baseline; display: flex; justify-content: space-between; gap: 16px; }
.planning-heading .eyebrow { margin-bottom: 0; }
.planning-disclaimer, .planning-note, .request-status { color: var(--muted); font-size: .76rem; margin: 0; }
.planning-grid { align-items: end; display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(230px, 1fr) minmax(300px, 1.4fr) auto; gap: 18px; margin-top: 13px; }
.planning-datetime, .planning-scenario { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.planning-datetime label, .control-label { color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.planning-datetime input { border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; padding: 8px 9px; }
.planning-datetime input[readonly] { background: #eef2ed; }
.planning-datetime input[type="date"] { min-width: 145px; }
.timezone-label { color: var(--muted); font-size: .78rem; width: 100%; }
.planning-scenario { align-items: flex-start; flex-direction: column; }
.planning-assumptions { border-left: 1px solid var(--line); display: grid; gap: 3px; padding-left: 18px; }
.planning-assumptions strong { font-size: .84rem; }
.planning-assumptions span { color: var(--muted); font-size: .77rem; }
.recalculate-button { background: var(--ink); border: 1px solid var(--ink); border-radius: 4px; color: #fff; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 850; letter-spacing: .08em; padding: 10px 13px; white-space: nowrap; }
.recalculate-button:disabled { cursor: wait; opacity: .55; }
.planning-note { margin-top: 12px; }
.request-status { margin-top: 5px; min-height: 1.15em; }
.request-status[data-state="error"] { color: #8d5361; }
.controls { justify-content: space-between; align-items: center; padding: 22px 0; }
.scenario-selector { display: flex; gap: 7px; }
.scenario-selector button { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-weight: 800; padding: 9px 16px; }
.scenario-selector button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.scenario-description { font-size: .88rem; text-align: right; }
.coverage-strip { background: #e4ece6; border: 1px solid #cbd9d0; padding: 14px 18px; align-items: center; }
.coverage-strip > div { min-width: 180px; }
.coverage-strip > div + div { border-left: 1px solid #c5d3ca; padding-left: 20px; }
.coverage-label, .coverage-strip small, .coverage-note span { display: block; color: var(--muted); font-size: .68rem; letter-spacing: .1em; font-weight: 800; }
.coverage-strip strong { display: block; margin: 3px 0; font-variant-numeric: tabular-nums; }
.coverage-strip small { letter-spacing: 0; font-weight: 500; text-transform: none; }
.coverage-note { flex: 1; }
.summary-grid { margin: 18px 0; }
.summary-card { flex: 1; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid #81998d; padding: 15px 17px; }
.summary-card.direct { border-top-color: var(--direct); }
.summary-card.shadow { border-top-color: var(--shadow); }
.summary-card.neutral { border-top-color: #82978c; }
.summary-card span, .summary-card small { display: block; color: var(--muted); }
.summary-card strong { display: block; font-size: 1.5rem; margin: 6px 0; font-variant-numeric: tabular-nums; }
.visual-grid { align-items: stretch; }
.panel { background: var(--panel); border: 1px solid var(--line); padding: 19px; }
.map-panel { width: 70%; }
.inspector { width: 30%; min-width: 320px; }
.panel-heading { justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.panel-heading > p { font-size: .73rem; margin: 0; text-align: right; }
.map-container { position: relative; width: 100%; height: 560px; background: #e7eee9; overflow: hidden; }
.map-container > svg { width: 100%; height: 100%; display: block; }
.leaflet-container { background: #dce7dc; font: inherit; }
.map-container .solar-route-segment { fill: none !important; }
.map-status { position: absolute; z-index: 1000; top: 12px; left: 50%; max-width: calc(100% - 24px); transform: translateX(-50%); background: rgba(255, 253, 248, .94); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-size: .76rem; padding: 8px 11px; text-align: center; box-shadow: 0 2px 10px rgba(25, 51, 46, .12); }
.map-background { fill: #e7eee9; }
.map-grid { stroke: var(--grid); stroke-width: 1; }
.map-label, .profile-label { fill: #71867e; font-size: 13px; }
.route-segment, .profile-segment { stroke-width: 8; stroke-linecap: round; cursor: pointer; }
.route-segment:hover, .profile-segment:hover { stroke-width: 11; }
.selected-point { fill: #fff; stroke: var(--ink); stroke-width: 3; }
.profile-panel, .events-panel { margin-top: 18px; }
.trail-character-panel { margin-top: 18px; }
.trail-character-lanes { display: grid; gap: 8px; margin: 12px 0 16px; }
.trail-character-lane { align-items: center; display: grid; gap: 10px; grid-template-columns: 100px minmax(220px, 1fr); }
.trail-character-lane > strong { font-size: .76rem; text-transform: uppercase; }
.trail-character-track { background: #eef1ed; display: flex; height: 20px; min-width: 220px; overflow: hidden; }
.trail-character-span { border: 0; cursor: pointer; height: 100%; min-width: 2px; padding: 0; }
.trail-character-span[data-state="UNKNOWN"] { background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255,255,255,.5) 3px 6px) !important; }
.trail-character-span[data-state="UNMATCHED"] { background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255,255,255,.45) 3px 6px) !important; }
.trail-character-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
.trail-character-list { display: grid; gap: 7px; max-height: 360px; overflow: auto; padding-right: 3px; }
.trail-character-item { background: #f7f8f4; border: 1px solid var(--line); border-left: 4px solid #708b7e; color: var(--ink); cursor: pointer; font: inherit; padding: 10px 11px; text-align: left; }
.trail-character-item[data-state="AMBIGUOUS"] { border-left-color: #9b8052; }
.trail-character-item[data-state="UNKNOWN"] { border-left-color: var(--unknown); }
.trail-character-item[data-state="UNMATCHED"] { border-left-color: #806a4e; border-left-style: dashed; }
.trail-character-item strong, .trail-character-item span { display: block; }
.trail-character-item span { color: var(--muted); font-size: .75rem; margin-top: 3px; }
.trail-character-why { background: #f1f4f0; border-left: 3px solid #8ca39a; font-size: .76rem; line-height: 1.45; padding: 13px; }
.trail-character-why h3 { margin-top: 0; }
#elevation-profile { width: 100%; display: block; background: #e7eee9; }
.profile-backdrop { fill: none; stroke: #bdcec3; stroke-width: 2; }
.profile-axis, .profile-selected { stroke: #9aafa3; stroke-width: 1; }
.profile-selected { stroke: var(--ink); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 11px; color: var(--muted); font-size: .73rem; font-weight: 700; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.swatch { width: 10px; height: 10px; display: inline-block; border-radius: 50%; background: var(--not-evaluated); }
.swatch.direct { background: var(--direct); }
.swatch.shadow { background: var(--shadow); }
.swatch.unknown { background: var(--unknown); }
.swatch.twilight { background: #607b83; }
.swatch.night { background: #2f3f49; }
.swatch.not-evaluated { border-radius: 2px; background: repeating-linear-gradient(135deg, var(--not-evaluated) 0 3px, #eef2ee 3px 6px); }
.map-note { font-size: .75rem; line-height: 1.4; margin: 10px 0 0; }
.state-badge { display: inline-block; border: 1px solid var(--line); border-radius: 3px; font-size: .74rem; font-weight: 850; letter-spacing: .08em; padding: 5px 8px; }
.state-badge[data-state="DIRECT"] { background: #f7edc8; border-color: #e2c467; }
.state-badge[data-state="SHADOW"] { background: #e4edf0; border-color: #98b2bd; }
.state-badge[data-state="UNKNOWN"] { background: #f3e7ef; border-color: #d0a7bd; }
.state-badge[data-state="TWILIGHT"] { background: #e3eaeb; border-color: #9aadb1; }
.state-badge[data-state="NIGHT"] { background: #dce3e5; border-color: #71838b; color: #26363d; }
.state-badge[data-state="NOT_EVALUATED"] { background: #edf0ed; color: #65736d; }
.state-badge[data-state="NOT_APPLICABLE"] { background: #e3eaeb; border-color: #9aadb1; }
dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; font-size: .83rem; }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; max-width: 220px; }
.point-note { background: #f0f3ee; border-left: 3px solid #91a99b; color: #53665d; font-size: .78rem; line-height: 1.45; margin-top: 20px; padding: 10px 12px; }
details { margin-top: 20px; font-size: .8rem; }
summary { cursor: pointer; font-weight: 800; }
#provenance { color: var(--muted); line-height: 1.5; margin-top: 10px; }
.event-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.event-card { border: 1px solid var(--line); border-left: 4px solid var(--shadow); background: #f6f7f1; color: var(--ink); cursor: pointer; padding: 12px 13px; text-align: left; font: inherit; }
.event-card:hover { background: #eef3ed; }
.event-card span, .event-card strong { display: block; }
.event-card strong { margin-bottom: 5px; }
.event-card span { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.rci-panel { margin-top: 18px; }
.photographer-panel { margin-top: 18px; }
.snow-panel { margin-top: 18px; }
.history-panel { margin-top: 18px; }
.history-window, .history-notes { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.history-window { margin: -4px 0 14px; }
.history-notes { border-top: 1px solid var(--line); margin-top: 12px; }
.history-notes p { margin: 8px 0 0; }
.history-list { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.history-engine { background: #f7f8f4; border: 1px solid var(--line); border-left: 4px solid #708b7e; padding: 11px 12px; }
.history-engine > strong, .history-engine > span, .history-evidence > b, .history-evidence > span { display: block; }
.history-engine > span, .history-evidence > span, .history-gap { color: var(--muted); font-size: .75rem; line-height: 1.45; margin-top: 3px; }
.history-evidence { border-top: 1px solid #dce4de; margin-top: 9px; padding-top: 8px; }
.history-evidence > b { font-size: .8rem; }
.history-gap { color: #765c68 !important; }
.snow-coverage { color: var(--muted); display: flex; flex-wrap: wrap; font-size: .76rem; gap: 8px; margin: -4px 0 14px; }
.snow-chip { background: #edf1ee; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 750; padding: 4px 8px; }
.snow-chip[data-coverage="PARTIAL"] { background: #f3eee4; border-style: dashed; }
.snow-chip[data-coverage="UNAVAILABLE"] { background: #f0ece9; border-color: #c6bcb4; }
.snow-chip[data-coverage="UNKNOWN"] { background: #f3e7ef; border-color: #d0a7bd; }
.snow-chip[data-coverage="NOT_APPLICABLE"] { background: repeating-linear-gradient(135deg, #e8eeed 0 3px, #f8faf8 3px 6px); }
.snow-list { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.snow-fact { background: #f7f8f4; border: 1px solid var(--line); border-left: 4px solid #7896a5; padding: 11px 12px; }
.snow-fact.depth { border-left-color: #7183a0; }
.snow-fact strong, .snow-fact span { display: block; }
.snow-fact span, .snow-note { color: var(--muted); font-size: .75rem; line-height: 1.45; margin-top: 3px; }
.snow-note { margin-bottom: 0; }
.photographer-coverage { color: var(--muted); display: flex; flex-wrap: wrap; font-size: .76rem; gap: 8px; margin: -4px 0 14px; }
.photographer-chip { background: #edf1ee; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 750; padding: 4px 8px; }
.photographer-chip[data-coverage="PARTIAL"] { background: #f3eee4; border-style: dashed; }
.photographer-chip[data-coverage="UNAVAILABLE"] { background: #f0ece9; border-color: #c6bcb4; }
.photographer-chip[data-coverage="UNKNOWN"] { background: #f3e7ef; border-color: #d0a7bd; }
.photographer-chip[data-coverage="NOT_APPLICABLE"] { background: repeating-linear-gradient(135deg, #e8eeed 0 3px, #f8faf8 3px 6px); }
.photographer-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
.photographer-list { display: grid; gap: 8px; max-height: 520px; overflow: auto; padding-right: 3px; }
.photographer-item { background: #f7f8f4; border: 1px solid var(--line); border-left: 4px solid #9c8650; color: var(--ink); cursor: pointer; font: inherit; padding: 11px 12px; text-align: left; width: 100%; }
.photographer-item.blue_hour { border-left-color: #7183a0; }
.photographer-item.event { border-left-color: #617c91; }
.photographer-item.scope, .photographer-item.route { border-left-color: #708b7e; }
.photographer-item:hover, .photographer-item[aria-pressed="true"] { background: #eaf0ec; }
.photographer-item strong, .photographer-item span { display: block; }
.photographer-item span, .photographer-empty { color: var(--muted); font-size: .75rem; line-height: 1.45; margin-top: 3px; }
.photographer-empty { padding: 12px 2px; }
.photographer-why { background: #f1f4f0; border-left: 3px solid #8ca39a; max-height: 520px; overflow: auto; padding: 13px; }
.photographer-why h3 { margin-top: 0; overflow-wrap: anywhere; }
.photographer-why-group { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 9px; }
.photographer-why-group h4 { font-size: .7rem; letter-spacing: .08em; margin: 0 0 6px; }
.photographer-why-group dl { font-size: .76rem; }
.rci-coverage { color: var(--muted); display: flex; flex-wrap: wrap; font-size: .76rem; gap: 8px; margin: -4px 0 14px; }
.rci-chip { background: #edf1ee; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-weight: 750; padding: 4px 8px; }
.rci-chip[data-coverage="PARTIAL"] { background: #f3eee4; border-style: dashed; }
.rci-chip[data-coverage="UNAVAILABLE"] { background: #f0ece9; border-color: #c6bcb4; }
.rci-chip[data-coverage="UNKNOWN"] { background: #f3e7ef; border-color: #d0a7bd; }
.rci-chip[data-coverage="NOT_APPLICABLE"] { background: repeating-linear-gradient(135deg, #e8eeed 0 3px, #f8faf8 3px 6px); }
.rci-timeline { border: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; padding: 10px; }
.rci-lane { align-items: center; display: grid; gap: 10px; grid-template-columns: minmax(130px, 180px) minmax(420px, 1fr); margin: 5px 0; }
.rci-lane-label { font-size: .75rem; font-weight: 800; overflow-wrap: anywhere; }
.rci-track { background: #eef1ed; height: 21px; min-width: 420px; position: relative; }
.rci-active, .rci-gap, .rci-event-marker { cursor: pointer; position: absolute; }
.rci-active { background: #617c91; border: 1px solid #405e73; height: 100%; min-width: 2px; }
.rci-gap { background: repeating-linear-gradient(135deg, #f8f5ef 0 3px, #a78c67 3px 6px); border: 1px dashed #806a4e; height: 100%; min-width: 2px; }
.rci-event-marker { background: #4f6661; height: 29px; top: -4px; transform: rotate(45deg); width: 8px; }
.rci-track-note { color: var(--muted); font-size: .71rem; margin: 3px 0 8px 190px; }
.rci-state { border: 1px solid var(--line); display: inline-block; font-size: .68rem; font-weight: 800; margin-left: 4px; padding: 1px 4px; }
.rci-state[data-state="TRUE"] { background: #dbe7ec; border-color: #7596a8; }
.rci-state[data-state="FALSE"] { background: #fffdf8; border-color: #8b9690; }
.rci-state[data-state="UNKNOWN"] { background: #f3e7ef; border-color: #a06487; border-style: dotted; }
.rci-state[data-state="NOT_APPLICABLE"] { background: repeating-linear-gradient(135deg, #e8eeed 0 3px, #f8faf8 3px 6px); border-color: #80908a; }
.rci-controls { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.rci-controls button { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; font: inherit; font-size: .76rem; font-weight: 800; padding: 7px 11px; }
.rci-controls button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rci-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); }
.rci-list { display: grid; gap: 8px; max-height: 460px; overflow: auto; padding-right: 3px; }
.rci-item { background: #f7f8f4; border: 1px solid var(--line); border-left: 4px solid #617c91; color: var(--ink); cursor: pointer; font: inherit; padding: 11px 12px; text-align: left; width: 100%; }
.rci-item:hover, .rci-item[aria-pressed="true"] { background: #eaf0ec; }
.rci-item.cluster { border-left-color: #786987; }
.rci-item.event { border-left-color: #4f6661; }
.rci-item strong, .rci-item span { display: block; }
.rci-item span { color: var(--muted); font-size: .75rem; line-height: 1.45; margin-top: 3px; }
.rci-empty { color: var(--muted); font-size: .84rem; line-height: 1.5; padding: 12px 2px; }
.rci-why { background: #f1f4f0; border-left: 3px solid #8ca39a; max-height: 460px; overflow: auto; padding: 13px; }
.rci-why h3 { margin-top: 0; overflow-wrap: anywhere; }
.rci-why-group { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 9px; }
.rci-why-group h4 { font-size: .7rem; letter-spacing: .08em; margin: 0 0 6px; }
.rci-why-value { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.rci-boundary { color: #594f43; font-size: .75rem; line-height: 1.4; margin: 5px 0; }
.rci-overlay { stroke: #18312d; stroke-linecap: round; stroke-width: 14; fill: none; opacity: .75; pointer-events: none; }
.rci-overlay-gap { stroke: #806a4e; stroke-dasharray: 4 5; stroke-linecap: butt; stroke-width: 12; fill: none; opacity: .85; pointer-events: none; }
.rci-event-profile { fill: #4f6661; stroke: #fffdf8; stroke-width: 2; }
.limitations { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.limitations strong { color: var(--ink); }
.limitations p { display: inline; margin-left: 8px; }
.load-error { background: var(--panel); border: 1px solid var(--line); margin: 10vh auto; max-width: 600px; padding: 30px; }

@media (max-width: 900px) {
  main { width: min(100% - 24px, 700px); padding-top: 22px; }
  .masthead, .controls, .visual-grid { display: block; }
  .header-note, .scenario-description { margin-top: 14px; text-align: left; }
  .planning-heading { display: block; }
  .planning-disclaimer { margin-top: 7px; }
  .planning-grid { grid-template-columns: 1fr 1fr; }
  .planning-assumptions { border-left: 0; border-top: 1px solid var(--line); grid-column: 1 / -1; padding: 12px 0 0; }
  .recalculate-button { justify-self: start; }
  .coverage-strip, .summary-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .coverage-strip > div + div { border-left: 0; padding-left: 0; }
  .coverage-note { grid-column: 1 / -1; }
  .map-panel, .inspector { width: 100%; }
  .inspector { margin-top: 18px; }
  .rci-grid { grid-template-columns: 1fr; }
  .trail-character-grid { grid-template-columns: 1fr; }
  .photographer-grid { grid-template-columns: 1fr; }
  .snow-list { grid-template-columns: 1fr; }
  .history-list { grid-template-columns: 1fr; }
  .limitations p { display: block; margin: 5px 0 0; }
}

@media (max-width: 520px) {
  .planning-grid { grid-template-columns: 1fr; }
  .planning-assumptions { grid-column: auto; }
  .coverage-strip, .summary-grid { grid-template-columns: 1fr; }
  .coverage-strip > div { min-width: 0; }
  .coverage-strip > div + div { border-top: 1px solid #c5d3ca; padding-top: 12px; margin-top: 12px; }
  .map-container { height: 440px; }
  .rci-lane { grid-template-columns: 1fr; gap: 4px; }
  .rci-track-note { margin-left: 0; }
}