:root { --ink:#292929; --muted:#6e665b; --accent:#7a6040; --border:#ded4c3; }
body { font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.bslib-page-title { background:#252525; color:#fff; padding:16px 25px !important; margin:0 !important; border-bottom:1px solid #393939; }
.brand { display:flex; align-items:center; gap:13px; width:100%; background:#252525; color:#fff; padding:16px 25px; flex-shrink:0; border-bottom:1px solid #393939; }
.brand-mark { display:grid; place-items:center; width:43px; height:43px; background:#363636; color:#e9e5db; border:1px solid #51504c; border-radius:13px; font-size:22px; }
.brand-name { font-size:21px; font-weight:700; line-height:1.25; letter-spacing:-.5px; }
.brand-subtitle { font-size:10px; letter-spacing:2px; font-weight:500; color:#bcb9b2; margin-top:4px; }
.brand-home { margin-left:auto; font-size:12px; color:#dedbd4; text-decoration:none; display:flex; align-items:center; gap:9px; }
.brand-home:hover { color:white; }
.bslib-sidebar-layout { border:0; border-radius:0; }
.bslib-sidebar-layout > .sidebar { background:#f5f4f1; border-right:1px solid var(--border); }
.bslib-sidebar-layout > .sidebar > .sidebar-content { padding:25px 20px 20px; gap:18px; }
.bslib-sidebar-layout > .main { padding:0 !important; gap:0; overflow:hidden; position:relative; z-index:0; }
.bslib-sidebar-layout > .collapse-toggle { z-index:2 !important; }
.sidebar-intro { padding:0 4px 2px; }
.eyebrow { font-size:10px; font-weight:750; letter-spacing:2px; color:var(--accent); }
.sidebar-intro h2 { font-size:25px; font-weight:720; letter-spacing:-.8px; margin:7px 0 9px; }
.sidebar-intro p,.control-hint { font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:0; }
.card { background:#fffdf8; border:1px solid var(--border); border-radius:14px; box-shadow:0 3px 12px #24242405; overflow:visible; }
.card-header { border-bottom:1px solid #e9e0d0; background:#fffdf8; padding:14px 17px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:10px; border-radius:14px 14px 0 0 !important; }
.step-number { color:var(--accent); background:#efe6d5; border-radius:7px; padding:4px 7px; font-size:10px; letter-spacing:.5px; }
.card-body { padding:17px; gap:8px; }
.form-group { margin-bottom:13px; }
.control-label { font-size:12px; font-weight:650; color:#5d503f; margin-bottom:6px; }
.form-control,.selectize-input { border:1px solid #d7cbb7; border-radius:8px; box-shadow:none; min-height:38px; font-size:13px; }
.selectize-input.focus,.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px #7a604018; }
.selectize-dropdown { z-index:1100; font-size:13px; border-radius:8px; box-shadow:0 8px 20px #29292914; }
.selectize-dropdown .active { color:var(--ink); background:#efe6d5; }
.btn { border-radius:8px; font-size:12px; font-weight:650; padding:9px 13px; }
.btn-primary { background:var(--accent); border-color:var(--accent); }
.control-hint { margin-bottom:13px; }
.irs--shiny .irs-bar,.irs--shiny .irs-single { background:var(--accent); border-color:var(--accent); }
.irs--shiny .irs-handle { border-color:var(--accent); }
.status-chip { display:flex; align-items:center; gap:7px; background:#f2ebde; border-radius:7px; padding:8px 10px; font-size:11px; color:#6a5d4b; }
.empty-state { padding:20px 22px; border:1px dashed #d3cec5; border-radius:14px; text-align:center; color:var(--muted); }
.empty-state > .fa-solid { display:block; color:var(--accent); margin-bottom:10px; font-size:19px; }
.empty-state strong { display:block; color:var(--ink); font-size:13px; margin-bottom:6px; }
.empty-state p { margin:0; font-size:12px; line-height:1.65; }
.sidebar-footer { padding:2px 5px; font-size:10px; color:#77736c; line-height:1.9; }
.sidebar-footer a { color:#6c6860; text-decoration:none; }
.map-workspace { position:relative; min-height:0; height:100%; background:#e8e5de; }
#output_plot { flex:1 1 auto; min-height:0; z-index:0; }
.map-toolbar { position:absolute; top:20px; left:24px; right:20px; z-index:500; display:flex; align-items:flex-start; gap:12px; pointer-events:none; }
.map-toolbar > * { pointer-events:auto; }
.map-caption { background:#fff; border:1px solid #ded4c3; border-radius:10px; padding:11px 14px; box-shadow:0 3px 16px #24242414; font-size:12px; font-weight:650; display:flex; align-items:center; gap:9px; max-width:calc(100% - 90px); }
.live-dot { width:7px; height:7px; flex-shrink:0; border-radius:50%; background:var(--accent); }
.caption-detail { font-weight:400; color:var(--muted); display:block; margin-top:3px; font-size:11px; }
.btn-map { background:#fff; border:1px solid #d7cbb7; color:var(--ink); box-shadow:0 3px 16px #24242414; }
.btn-map:hover { background:#f3f1eb; border-color:#b7a283; }
.map-toolbar .btn-map { margin-left:auto; white-space:nowrap; }
.reset-map { position:absolute; bottom:108px; right:10px; z-index:500; }
.leaflet-control-attribution { font-size:10px; background:#fffffff0 !important; }
.leaflet-control-zoom { border:1px solid #d7cbb7 !important; border-radius:9px !important; overflow:hidden; box-shadow:0 3px 16px #24242414 !important; }
.leaflet-control-layers { border:1px solid #d7cbb7 !important; border-radius:9px !important; box-shadow:0 3px 16px #24242414 !important; }
.leaflet-top.leaflet-right { top:82px; }
.leaflet .legend { background:#fffffff5; padding:13px 16px; border:1px solid #ded4c3; border-radius:10px; box-shadow:0 3px 16px #24242414; font-size:11px; line-height:19px; }
.legend > strong { font-size:11px; color:var(--ink); }
.leaflet-popup-content { font-family:inherit; font-size:12px; line-height:1.8; }
.leaflet-popup-content-wrapper { border-radius:12px; }
.coords-display { font-size:12px; color:var(--muted); background:#f5f4f1; padding:9px; border-radius:8px; text-align:center; margin-bottom:12px; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:13px; }
.summary-metric { padding:12px; border:1px solid #e5e2dc; border-radius:9px; background:#fbf8f1; }
.summary-metric span { font-size:10px; color:var(--muted); display:block; }
.summary-metric strong { font-size:19px; letter-spacing:-.5px; color:var(--ink); display:block; margin-top:3px; }
.summary-note { grid-column:1/-1; font-size:10px; color:var(--muted); line-height:1.6; }
.accordion-item { border:1px solid var(--border); border-radius:8px !important; overflow:hidden; margin-bottom:8px; }
.accordion-button { font-size:12px; font-weight:600; padding:12px; }
.accordion-button:not(.collapsed) { color:var(--accent); background:#f0e7d8; box-shadow:none; }
.accordion-body { padding:12px; }
.analysis-plots { margin-top:14px; min-width:0; }
.analysis-plots .nav-tabs { display:flex; flex-wrap:wrap; gap:3px; border:0; padding:4px; background:#eee6d9; border-radius:9px; margin-bottom:15px; }
.analysis-plots .nav-tabs .nav-link { border:0; border-radius:6px; padding:7px 9px; font-size:11px; color:#6a5d4b; }
.analysis-plots .nav-tabs .nav-link.active { background:#fff; color:var(--accent); font-weight:700; box-shadow:0 1px 4px #29292910; }
.analysis-plots .plotly,.analysis-plots .shiny-plot-output { width:100% !important; min-width:0; }
.analysis-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.analysis-actions .btn { flex:1; white-space:nowrap; font-size:11px; }
.validation-msg { display:block; font-size:11px; margin-top:7px; }
.shiny-notification { background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 6px 28px #2929291a; font-size:12px; padding:14px; }
#tile-status { position:absolute; bottom:42px; left:20px; right:120px; z-index:500; background:#fff7df; border:1px solid #e1ca84; padding:10px 14px; border-radius:8px; font-size:12px; }
.modal-content { border:0; border-radius:16px; font-size:14px; line-height:1.7; }
.modal-title { font-weight:700; }
@media(max-width:767px) {
  .brand { padding:12px 15px; }
  .bslib-page-title { padding:12px 15px !important; }
  .brand-name { font-size:17px; }
  .brand-subtitle { font-size:8px; letter-spacing:1.4px; }
  .brand-mark { width:36px; height:36px; font-size:18px; }
  .brand-home { font-size:10px; }
  .bslib-sidebar-layout { min-height:calc(100dvh - 72px); }
  .bslib-sidebar-layout > .sidebar { max-width:calc(100vw - 35px); }
  .bslib-sidebar-layout > .sidebar > .sidebar-content { padding:20px 14px; }
  .map-toolbar { left:60px; right:12px; top:16px; gap:8px; }
  .bslib-sidebar-layout > .collapse-toggle { top:16px; left:12px !important; width:36px; height:36px; background:#fff; border:1px solid #d7cbb7; border-radius:8px; box-shadow:0 3px 16px #24242414; }
  .bslib-sidebar-layout > .sidebar > .sidebar-content { padding-top:60px; }
  .map-caption { padding:9px 11px; font-size:11px; }
  .caption-detail { font-size:10px; }
  .brand-home svg { display:none; }
  .leaflet .legend { max-width:180px; padding:9px 11px; }
}

/* A location gets a full analysis workspace; the sidebar stays for map controls. */
.sidebar-intro p { margin-top:8px; font-size:13px; color:#5d503f; }
.map-instruction { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:450; padding:10px 15px; border:1px solid #d7cbb7; border-radius:8px; background:#fffffff2; color:#5d503f; font-size:12px; white-space:nowrap; pointer-events:none; box-shadow:0 3px 16px #24242412; }
.map-instruction i { margin-right:7px; }
.location-analysis .modal-dialog { width:calc(100vw - 64px); max-width:1320px; margin:24px auto; min-height:calc(100% - 48px); }
.location-analysis .modal-content { max-height:calc(100dvh - 48px); border:1px solid #d7cbb7; border-radius:14px; box-shadow:0 20px 90px #0005; }
.location-analysis .modal-header { padding:20px 28px 15px; align-items:flex-start; border-bottom:1px solid #e5dbc9; }
.location-analysis .modal-title { font-size:23px; font-weight:650; letter-spacing:-.5px; }
.analysis-context { font-size:13px; color:#6e665b; margin-top:5px; }
.analysis-close { border:1px solid #ded4c3; border-radius:8px; width:35px; height:35px; color:#5d503f; background:#fbf8f1; flex-shrink:0; }
.analysis-close:hover { background:#efe6d5; }
.location-analysis .modal-body { padding:18px 28px 6px; overflow-y:auto; }
.location-analysis .coords-display { background:transparent; padding:0; margin-bottom:12px; font-size:12px; text-align:left; }
.location-analysis .summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.location-analysis .summary-metric { padding:12px 16px; }
.location-analysis .summary-metric strong { font-size:24px; font-weight:650; }
.location-analysis .summary-metric span { font-size:12px; }
.location-analysis .summary-note { font-size:11px; margin-top:0; }
#analysis_period_accordion { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
/* Each panel is a separate grid card; restore Bootstrap's suppressed top border. */
#analysis_period_accordion .accordion-item { margin:0; border:1px solid #b7a88e; }
.location-analysis .analysis-plots { margin-top:18px; }
.location-analysis .analysis-plots .nav-tabs { gap:4px; margin-bottom:16px; }
.location-analysis .analysis-plots .nav-tabs .nav-link { font-size:13px; padding:10px 15px; }
.location-analysis .analysis-plots .plotly,.location-analysis .analysis-plots .shiny-plot-output { height:clamp(360px,46vh,560px) !important; }
.location-analysis #monthly_trend_plot { height:clamp(480px,55vh,650px) !important; }
.location-analysis .analysis-actions { padding:12px 28px; margin:0; border-top:1px solid #e5dbc9; gap:9px; }
.location-analysis .analysis-actions .btn { flex:0 1 auto; font-size:12px; }
.location-analysis .analysis-actions .btn-primary { margin-left:auto; }
.modal-backdrop.show { opacity:.45; }
.air-datepicker-global-container { z-index:1080; }
@media(min-width:768px) and (max-width:1100px) {
  .location-analysis .modal-dialog { width:calc(100vw - 32px); }
  .location-analysis .analysis-plots .nav-tabs .nav-link { padding:9px 11px; font-size:12px; }
}
@media(max-width:767px) {
  .location-analysis { padding:0 !important; }
  .location-analysis .modal-dialog { width:100%; max-width:none; height:100%; min-height:100%; margin:0; }
  .location-analysis .modal-content { height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .location-analysis .modal-header { padding:18px 16px 13px; }
  .location-analysis .modal-title { font-size:21px; }
  .analysis-context { font-size:11px; padding-right:12px; }
  .location-analysis .modal-body { padding:14px 12px 4px; }
  .location-analysis .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .location-analysis .summary-metric { padding:9px 11px; }
  .location-analysis .summary-metric:nth-child(3) { grid-column:1/-1; }
  .location-analysis .summary-metric strong { font-size:21px; }
  .location-analysis .summary-metric span { font-size:11px; }
  #analysis_period_accordion { grid-template-columns:1fr; gap:8px; }
  .location-analysis .analysis-plots .nav-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; padding:4px; }
  .location-analysis .analysis-plots .nav-tabs .nav-link { white-space:nowrap; padding:9px 10px; font-size:12px; }
  .location-analysis .analysis-plots .plotly,.location-analysis .analysis-plots .shiny-plot-output { height:390px !important; }
  .location-analysis #monthly_trend_plot { height:1100px !important; }
  .location-analysis .analysis-actions { padding:10px 12px; gap:6px; }
  .location-analysis .analysis-actions .btn { font-size:11px; padding:9px 10px; }
  .map-instruction { bottom:112px; max-width:210px; white-space:normal; text-align:center; font-size:11px; }
}

@media(max-width:767px) {
  .location-analysis .analysis-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .location-analysis .analysis-actions .btn { width:100%; margin:0 !important; font-size:10px; padding:10px 3px; }
}

/* The shared site header occupies its own row above the explorer. */
.bslib-page-sidebar > .site-header { width:100%; }
.period-comparison-controls { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:14px; }
.period-comparison-controls > div { border:1px solid #d7cbb7; padding:14px; border-radius:9px; background:#fbf8f1; min-width:0; }
.period-comparison-controls h3 { font-size:14px; margin:0 0 12px; font-weight:650; }
.share-analysis { border:1px solid #d7cbb7; border-radius:8px; padding:10px 12px; margin-top:14px; font-size:12px; }
.share-analysis summary { cursor:pointer; font-weight:600; }
.share-analysis p { color:#6e665b; margin:8px 0; font-size:12px; }
.share-link-row { display:flex; gap:8px; }
.share-link-row input { min-width:0; }
.share-link-row button { flex:0 0 auto; }
#share-link-status { display:block; color:#5d503f; margin-top:4px; min-height:1em; }
.map-reference-controls { border-left:2px solid #b7a88e; padding-left:12px; margin-bottom:14px; }
@media(max-width:767px) {
 .bslib-sidebar-layout { min-height:calc(100dvh - 69px); }
 .period-comparison-controls { grid-template-columns:1fr; gap:10px; }
}

.period-comparison-controls .form-group { margin-bottom:0; }
.period-comparison-controls .row > div { width:50%; }

/* Keep the sidebar handle separate from the selected-map caption. */
.bslib-sidebar-layout > .collapse-toggle {
  width:38px; height:38px; top:20px; color:#7a6040; background:#fff;
  border:1px solid #b7a283; border-radius:8px;
  box-shadow:0 3px 12px #24242420;
}
.bslib-sidebar-layout > .collapse-toggle:hover { background:#efe6d5; border-color:#8c877d; }
.bslib-sidebar-layout > .collapse-toggle:focus-visible { outline:2px solid #745a3b; outline-offset:3px; }
.bslib-sidebar-layout.sidebar-collapsed > .collapse-toggle { left:12px !important; }
.bslib-sidebar-layout.sidebar-collapsed > .main .map-toolbar { left:66px; }
/* Calm selected, keyboard-focused and searched options, including native text selection. */
.selectize-dropdown .option.selected,.selectize-dropdown .option.active,.selectize-dropdown .option:hover {
  background:#efe6d5 !important; color:#292929 !important;
}
.selectize-dropdown .highlight { background:#d9c6a7 !important; color:#252525 !important; border-radius:2px; }
.selectize-input .item.active { background:#e3d5bf !important; color:#252525 !important; }
.sidebar ::selection,.location-analysis ::selection { background:#d9c6a7; color:#252525; }
.air-datepicker {
  --adp-accent-color:#745a3b; --adp-color-current-date:#745a3b;
  --adp-cell-background-color-selected:#745a3b;
  --adp-cell-background-color-selected-hover:#876b49;
  --adp-cell-background-color-in-range:#efe6d5;
  --adp-cell-background-color-in-range-hover:#e7d9c1;
  --adp-cell-border-color-in-range:#b7a283;
}
.rainfall-scale-hint { font-size:11px; margin-top:-3px; margin-bottom:14px; }
@media(max-width:767px) {
  .bslib-sidebar-layout > .collapse-toggle { top:16px; width:38px; height:38px; }
  .map-toolbar { left:66px; }
}

.air-datepicker-cell.-selected-,.air-datepicker-cell.-selected-.-current- { background:#745a3b !important; color:#fff !important; }
.air-datepicker-cell.-selected-:hover { background:#876b49 !important; }
.air-datepicker-cell.-current- { color:#745a3b; }
.air-datepicker-cell.-in-range- { background:#efe6d5; }
.air-datepicker-body--day-name,.air-datepicker-button { color:#876b49; }

.sidebar,.location-analysis { accent-color:#745a3b; }

/* Quiet actions keep Bootstrap's default/hover colours out of these controls. */
.btn.btn-quiet { color:#745a3b; background:#efe6d5; border:1px solid #c6b495; }
.btn.btn-quiet:hover,.btn.btn-quiet:focus-visible { color:#292929; background:#e3d5bf; border-color:#ad9470; }
.btn.btn-quiet:focus-visible { box-shadow:0 0 0 3px #745a3b30; outline:2px solid #7a6040; outline-offset:2px; }
.btn.btn-quiet:active,.btn.btn-quiet.active { color:#292929; background:#d7c3a3; border-color:#9a7d55; }
.btn.btn-quiet:disabled,.btn.btn-quiet.disabled { color:#858078; background:#f0eee9; border-color:#d8d2c7; }

.btn.btn-map:hover,.btn.btn-map:focus-visible { color:#292929; background:#efe6d5; border-color:#b7a283; }
.btn.btn-primary:hover,.btn.btn-primary:focus-visible { color:#fff; background:#745a3b; border-color:#745a3b; }
.source-note {font-size:12px;line-height:1.6;color:#6a5d4b;border-left:2px solid #c5bfae;padding:8px 12px;margin:6px 0 16px;}
.sidebar-intro .preview-note {margin-top:12px;padding:10px 12px;background:#ebe7dd;border:1px solid #d6cebc;border-radius:8px;font-size:11px;color:#5f594c;}

/* Dataset navigation stays compact and follows the selected site theme. */
.sidebar-intro-heading { padding-right:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.generation-switch { display:inline-flex; flex-shrink:0; gap:3px; padding:3px; border:1px solid var(--border); border-radius:10px; }
.generation-switch a { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:5px 9px; border-radius:7px; color:var(--muted); font-size:11px; font-weight:650; line-height:1.2; text-decoration:none; }
.generation-switch a:hover { color:var(--accent); }
.generation-switch a[aria-current="page"] { background:var(--accent); color:#fff; }
.generation-switch a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.city-credit { font-size:10px; color:var(--muted); line-height:1.6; margin:-5px 0 14px; }
.city-credit a { color:inherit; text-underline-offset:2px; }
/* Selection stays visible on the map and in the analysis workspace. */
:root { --selection-color:#7a6040; --selection-background:#f3eadb; }
html[data-theme="modern"] { --selection-color:#267357; --selection-background:#edf6f0; }
.map-context { display:flex; flex-direction:column; gap:8px; min-width:0; max-width:calc(100% - 90px); }
.map-context .map-caption { max-width:100%; }
#selected_location_map:empty { display:none; }
.selection-card { padding:10px 13px; background:var(--white,#fffdf8); border:1px solid var(--border); border-left:3px solid var(--selection-color); border-radius:9px; box-shadow:0 3px 16px #24242412; }
.selection-kicker { display:block; font-size:9px; letter-spacing:1.2px; color:var(--muted); margin-bottom:3px; }
.selection-title { display:block; color:var(--ink); font-size:13px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
.selection-coordinates { display:block; color:var(--selection-color); font-size:12px; font-weight:600; line-height:1.7; font-variant-numeric:tabular-nums; }
.analysis-selected-location { border-left:3px solid var(--selection-color); background:var(--selection-background); padding:9px 13px; border-radius:7px; }
.analysis-selected-location .selection-title { font-size:14px; }
.selection-detail { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
#manual_lat,#manual_lon { color:var(--selection-color); font-weight:600; }
.selected-location-marker { stroke-opacity:1; filter:drop-shadow(0 1px 3px #0008); }
@media(max-width:767px) {
  .selection-card { padding:8px 10px; }
  .selection-card .selection-title { font-size:12px; }
  .selection-card .selection-coordinates { font-size:11px; }
}