/* CityBuilder v0.4 – Time navigator and same-year visual comparison. */
.time-rail{padding:12px 16px 11px;background:linear-gradient(108deg,var(--theme-highlight),var(--theme-panel-bottom));border-bottom:1px solid var(--theme-border);color:#eaf3f6}
.time-rail-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.time-rail-top>div{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.time-rail-label,.parallel-section-header .eyebrow{font-size:10px;letter-spacing:.14em;color:var(--theme-muted);font-weight:800}
#viewingYear{font-size:23px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--theme-accent-light)}
.time-mode{font-size:10px;letter-spacing:.05em;background:var(--theme-select);border:1px solid var(--theme-border);border-radius:5px;padding:4px 7px;color:var(--theme-accent-light);font-weight:850}
.time-mode.historical{color:#f0d69c;border-color:#ad8742;background:#4a3826}
.time-compare,.time-actions button{cursor:pointer;border-radius:7px;font-weight:800;font-size:11px;border:1px solid var(--theme-border);background:var(--theme-button);color:#e6f1f3;min-height:35px;padding:6px 11px;transition:background .12s ease,border-color .12s ease}
.time-compare{border-color:var(--theme-accent);color:var(--theme-accent-light)}
.time-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.time-actions button:hover:not(:disabled),.time-compare:hover{background:var(--theme-highlight);border-color:var(--theme-accent)}
.time-actions button:focus-visible,.time-compare:focus-visible,.parallel-select:focus-visible{outline:2px solid var(--theme-accent-light);outline-offset:2px}
.time-actions button:disabled{opacity:.42;cursor:not-allowed}
.time-actions #yearLatest{color:var(--theme-accent-light);border-color:var(--theme-accent)}
.time-scrub{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:10px;font-weight:750;color:var(--theme-muted)}
.time-scrub input{flex:1;min-width:0;accent-color:var(--theme-accent);cursor:pointer}
.time-message{color:var(--theme-muted);margin-top:5px;font-size:11px;line-height:1.45}
.parallel-panel{margin-top:16px;padding:22px}
.parallel-section-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.parallel-section-header h2{font-size:24px;margin:5px 0 3px;color:#eaf4f7;line-height:1.15}
.parallel-section-header p{font-size:12px;line-height:1.55;color:var(--theme-muted);max-width:760px}
.parallel-year-indicator{border:1px solid var(--theme-border);border-radius:8px;padding:9px 15px;text-align:right;background:var(--theme-card);display:flex;flex-direction:column;min-width:110px}
.parallel-year-indicator small{font-size:9px;letter-spacing:.12em;color:var(--theme-muted);font-weight:800}
.parallel-year-indicator strong{font-size:24px;color:var(--theme-accent-light)}
.parallel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.parallel-card{min-width:0;overflow:hidden;border:1px solid var(--theme-border);border-top:4px solid var(--parallel-accent);border-radius:12px;background:var(--theme-card)}
.parallel-card.selected{box-shadow:inset 0 0 0 1px var(--theme-accent)}
.parallel-heading{padding:12px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.parallel-heading small{text-transform:uppercase;letter-spacing:.13em;font-weight:800;font-size:9px;color:var(--parallel-accent)}
.parallel-heading h3{font-size:16px;font-weight:850;color:#f1f6f6;margin-top:4px}
.parallel-year{padding:5px 7px;font-size:12px;font-weight:800;color:var(--theme-accent-light);font-variant-numeric:tabular-nums}
.parallel-canvas{display:block;width:100%;height:auto;aspect-ratio:460/245;background:#112838}
.parallel-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--theme-border);border-top:1px solid var(--theme-border);border-bottom:1px solid var(--theme-border)}
.parallel-metrics>div{background:var(--theme-card);padding:10px 12px;min-width:0;display:flex;flex-direction:column;gap:2px}
.parallel-metrics small{color:var(--theme-muted);font-size:10px}
.parallel-metrics strong{font-size:16px;letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:#eef4f3}
.parallel-select{display:block;width:calc(100% - 22px);margin:10px 11px 12px;cursor:pointer;background:var(--theme-select);border:1px solid var(--theme-border);border-radius:6px;color:var(--theme-accent-light);padding:9px 10px;min-height:39px;font-weight:800;font-size:11px;text-align:center}
.parallel-select:hover{border-color:var(--parallel-accent)}
.parallel-unavailable{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;min-height:210px;color:#d0dfe5;background:#142b38;padding:16px;line-height:1.7;font-size:13px}
.parallel-unavailable span{color:#94aab2;font-size:11px}
.parallel-note{font-size:11px;color:var(--theme-muted);margin-top:13px;line-height:1.55}
button[data-history-locked="1"],select[data-history-locked="1"],input[data-history-locked="1"]{cursor:not-allowed!important;opacity:.5!important}
@media(max-width:1000px){.parallel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.parallel-grid{grid-template-columns:minmax(0,1fr)}.parallel-panel{padding:14px}.time-rail{padding:11px}.time-actions button{flex:1;min-width:72px;font-size:11px}.parallel-canvas{max-height:260px;object-fit:contain}.parallel-section-header h2{font-size:21px}}
