/* The Calibration page on the Explore frame: left-pane controls, search, legend, slice points and labels, the
   "Your slice" pane and the Contribute modal. */
.calibration-page { --updates-width: 340px; --cal-teal: #2bb3a3; --cal-blue: #1462d1; --cal-orange: #f28c18; }

/* Left pane */
.calibration-page .cal-label { display: block; margin: 12px 0 6px; font-size: 13px; color: #dbe6f1; }
.calibration-page .cal-select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #c7d5e2; border-radius: 5px; background: #fff; color: #1f2d3d; font: 14px/1.4 "Fira Sans", Arial, Helvetica, sans-serif; }
.calibration-page .explore-pane .cal-check { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 14px; color: #fff; }
/* Each map layer's symbol beside its switch, on a light chip so dark lines show on the pane. */
.calibration-page .cal-swatch { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 16px; border-radius: 3px; background: #f4f7fa; }
.calibration-page .cal-swatch .cal-key { width: 18px; }
.calibration-page .cal-swatch.is-ramp { background: linear-gradient(90deg, var(--ramp, #c7e3a2, #1b6b3a)); box-shadow: inset 0 0 0 1px #ffffff80; }
.calibration-page .cal-swatch.is-blank { background: transparent; }
.calibration-page .cal-check-hint { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.3; color: #c4d6ea; }
.calibration-page .explore-pane .cal-check input { width: 18px; height: 18px; accent-color: #2bb3a3; }
/* Scope tabs: Global, Continent, Region */
.calibration-page .cal-scope { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 16px 0 4px; padding: 3px; border-radius: 7px; background: #ffffff1f; }
.calibration-page .cal-scope button { min-height: 34px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent; color: #dbe6f1; font: 14px "Fira Sans", Arial, Helvetica, sans-serif; cursor: pointer; }
.calibration-page .cal-scope button:hover { background: #ffffff1a; color: #fff; }
.calibration-page .cal-scope button[aria-selected="true"] { background: #fff; color: #10233a; font-weight: 600; }
.calibration-page .cal-scope button:focus-visible { outline: 2px solid var(--cal-teal); outline-offset: 1px; }
.calibration-page .cal-scope-panel { padding-top: 4px; }
.calibration-page .cal-scope-panel[hidden] { display: none; }
.calibration-page .cal-region-list { margin: 10px 0 0; padding: 0; list-style: none; max-height: 260px; overflow-y: auto; }
.calibration-page .cal-region-link { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: #fff; font: 14px "Fira Sans", Arial, Helvetica, sans-serif; text-align: left; cursor: pointer; }
.calibration-page .cal-region-link:hover, .calibration-page .cal-region-link:focus-visible { background: #ffffff26; }
.calibration-page .cal-combo { position: relative; }
.calibration-page .cal-region-options { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px 0; border: 1px solid #d5e0ea; border-radius: 6px; background: #fff; box-shadow: 0 10px 28px #13253a33; list-style: none; max-height: 300px; overflow-y: auto; }
.calibration-page .cal-region-options li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 14px; color: #1f2d3d; cursor: pointer; }
.calibration-page .cal-region-options li[aria-selected="true"], .calibration-page .cal-region-options li:hover { background: #eef3f8; }
.calibration-page .cal-region-meta { color: #6b7783; font-size: 12px; }
.calibration-page .cal-tools { display: grid; gap: 6px; margin-top: 6px; }
.calibration-page .cal-tool { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #fff; font: 14px "Fira Sans", Arial, Helvetica, sans-serif; text-align: left; cursor: pointer; }
.calibration-page .cal-tool:hover, .calibration-page .cal-tool[aria-pressed="true"] { background: #ffffff26; }
.calibration-page .cal-tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.calibration-page .cal-tool-icon { width: 18px; height: 18px; flex: none; }
.calibration-page .cal-tool-icon.is-outlet { border: 2px solid #fff; border-radius: 50%; box-shadow: inset 0 0 0 3px #1d3b5a, inset 0 0 0 9px #fff; }
.calibration-page .cal-tool-icon.is-inlet { background: var(--cal-orange); border-radius: 2px; }

/* Map overlays */
.calibration-page .cal-search { position: absolute; z-index: 800; top: 20px; left: 16px; right: 70px; max-width: 920px; }
.calibration-page .cal-search svg { position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; fill: none; stroke: #4b5563; stroke-width: 1.8; pointer-events: none; }
.calibration-page .cal-search input { width: 100%; min-height: 44px; padding: 10px 14px 10px 44px; border: 1px solid #c7d5e2; border-radius: 6px; background: #fff; box-shadow: 0 4px 14px #0f223a26; font: 15px "Fira Sans", Arial, Helvetica, sans-serif; color: #1f2d3d; }
.calibration-page .cal-search-results { position: absolute; left: 0; right: 0; top: 48px; margin: 0; padding: 4px 0; border: 1px solid #d5e0ea; border-radius: 6px; background: #fff; box-shadow: 0 10px 28px #13253a33; list-style: none; max-height: 320px; overflow-y: auto; }
.calibration-page .cal-search-results li { padding: 9px 14px; font-size: 14px; color: #1f2d3d; cursor: pointer; }
.calibration-page .cal-search-results li:hover { background: #eef3f8; }
.calibration-page .cal-search-results li[aria-disabled] { color: #6b7783; cursor: default; }
.calibration-page .cal-legend { position: absolute; z-index: 800; left: 12px; bottom: 24px; max-width: min(240px, calc(100% - 24px)); border: 1px solid #d5e0ea; border-radius: 6px; background: #fffffff2; box-shadow: 0 4px 14px #0f223a1f; }
.calibration-page .cal-legend[hidden] { display: none; }
.calibration-page .cal-legend-toggle { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 6px; background: none; color: #10233a; font: 600 12.5px "Fira Sans", Arial, Helvetica, sans-serif; cursor: pointer; }
.calibration-page .cal-legend-toggle svg { width: 12px; height: 12px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .15s; }
.calibration-page .cal-legend-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.calibration-page .cal-legend-toggle:focus-visible { outline: 2px solid var(--cal-teal); outline-offset: 1px; }
.calibration-page .cal-legend-body { padding: 0 10px 6px; }
.calibration-page .cal-legend-body[hidden] { display: none; }
.calibration-page .cal-legend p { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12.5px; line-height: 1.3; color: #1f2d3d; cursor: default; }
.calibration-page .cal-key { flex: none; width: 22px; height: 12px; }
.cal-key.is-outlet { width: 14px; height: 14px; border-radius: 50%; background: var(--cal-blue); margin: 0 4px; }
.cal-key.is-inlet { width: 13px; height: 13px; background: var(--cal-orange); margin: 0 4px; }
.cal-key.is-slice { background: #7fd3c9; border: 1px solid #0f766e; }
.cal-key.is-excluded { border: 1px solid #64748b; background: repeating-linear-gradient(45deg, #e2e8f0 0 3px, #64748b 3px 4.5px); }
.cal-key.is-subregion { height: 0; border-top: 2px solid #1f2937; }
.cal-key.is-region { height: 0; border-top: 2px solid #7a1fa2; }
.cal-key.is-lsu { height: 0; border-top: 1px solid #8b9aaa; }
.cal-key.is-channel { height: 0; border-top: 2px solid #1d6fd8; }
.cal-key.is-country { height: 0; border-top: 1px dashed #4f6478; }
.calibration-page #explore-map[data-tool="inlet"] .leaflet-interactive { cursor: crosshair; }
.cal-point span { display: block; width: 14px; height: 14px; }
.cal-point.is-outlet span { border: 2px solid #fff; border-radius: 50%; background: var(--cal-blue); box-shadow: 0 0 0 1px #1462d1; }
.cal-point.is-inlet span { border: 2px solid #fff; background: var(--cal-orange); box-shadow: 0 0 0 1px #b45309; }
.cal-point b { position: absolute; left: 20px; top: -6px; padding: 3px 8px; border: 1px solid #d5e0ea; border-radius: 4px; background: #fff; color: #10233a; font: 600 13px "Fira Sans", Arial, Helvetica, sans-serif; white-space: nowrap; box-shadow: 0 2px 6px #0f223a26; }
.cal-subregion-label { color: #6d1b8f; font: 700 13px "Fira Sans", Arial, Helvetica, sans-serif; text-align: center; text-shadow: 0 0 3px #fff, 0 0 3px #fff; white-space: nowrap; transform: translate(-50%, -50%); text-transform: capitalize; }

/* Your slice */
.calibration-page .cal-pane .updates-heading h2 { font-size: 26px; }
.calibration-page .cal-summary { padding: 4px 22px 20px; color: #10233a; }
.calibration-page .cal-facts { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #ffffff99; }
.calibration-page .cal-facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 5px 0; font-size: 14px; }
.calibration-page .cal-facts dt { color: #3d5670; }
.calibration-page .cal-facts dd { margin: 0; overflow-wrap: anywhere; }
.calibration-page .cal-objects h3, .calibration-page .cal-period h3, .calibration-page .cal-eval h3 { margin: 6px 0 10px; font-size: 16px; }
.calibration-page .cal-counts { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.calibration-page .cal-counts p { margin: 0; padding: 4px 0; border-left: 1px solid #ffffff99; }
.calibration-page .cal-counts p:first-child { border-left: 0; }
.calibration-page .cal-counts strong { display: block; font-size: 22px; }
.calibration-page .cal-counts span { font-size: 13px; color: #3d5670; }
/* Model performance: medians for the region or the slice, and the slice's gauges. */
.calibration-page .cal-eval { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #ffffff99; }
.calibration-page .cal-eval-scope { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: #10233a; }
.calibration-page .cal-eval-medians strong { font-size: 19px; }
.calibration-page .cal-eval-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: #3d5670; }
.calibration-page .cal-gauges { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; color: #10233a; }
.calibration-page .cal-gauges th, .calibration-page .cal-gauges td { padding: 5px 4px; border-bottom: 1px solid #ffffff80; text-align: right; font-weight: 400; white-space: nowrap; }
.calibration-page .cal-gauges thead th { font-size: 12px; font-weight: 600; color: #3d5670; }
.calibration-page .cal-gauges th:first-child { text-align: left; white-space: normal; }
.calibration-page .cal-gauges tbody th { overflow-wrap: anywhere; }
.calibration-page .cal-gauge-name { display: block; font-weight: 600; }
.calibration-page .cal-gauges small { display: block; color: #3d5670; }
.calibration-page .cal-gauges tbody tr:hover { background: #ffffff59; }
.calibration-page .cal-gauge-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1px solid #fff; border-radius: 50%; vertical-align: 0; }
.calibration-page .cal-area { display: flex; justify-content: space-between; margin: 12px 0 14px; padding-bottom: 14px; border-bottom: 1px solid #ffffff99; font-size: 14px; }
.calibration-page .cal-period-text { margin: 8px 0 12px; font-size: 13px; color: #24425f; }
.calibration-page .cal-note { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border: 1px solid #ffffffaa; border-radius: 6px; background: #ffffff55; font-size: 13px; }
.calibration-page .cal-note svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.calibration-page .cal-error { margin: 10px 0; padding: 10px 12px; border: 1px solid #e3a6a6; border-radius: 6px; background: #fbeeedee; color: #7a1b15; font-size: 13px; }
.calibration-page .cal-prepare { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; margin: 12px 0 8px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--cal-blue); color: #fff; font: 700 15px "Fira Sans", Arial, Helvetica, sans-serif; text-decoration: none; cursor: pointer; }
.calibration-page .cal-prepare:hover:not(:disabled) { background: #0f50ab; color: #fff; }
.calibration-page .cal-prepare:disabled { background: #7a9cc9; cursor: not-allowed; }
.calibration-page .cal-prepare svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.calibration-page .cal-prepare.is-inline { width: auto; display: inline-flex; margin: 0; }
.calibration-page .cal-help { margin: 6px 0; font-size: 13px; line-height: 1.5; color: #24425f; }
.calibration-page .cal-links { display: grid; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff99; }
.calibration-page .cal-links a, .calibration-page .cal-links button { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0; border: 0; background: none; color: #10233a; font: 600 15px "Fira Sans", Arial, Helvetica, sans-serif; text-decoration: none; cursor: pointer; }
.calibration-page .cal-links svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Contribute modal */
.cal-dialog { width: min(940px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 10px; box-shadow: 0 20px 60px #0f223a66; color: #10233a; }
.cal-dialog::backdrop { background: #0f223a88; }
.cal-dialog-head { position: relative; padding: 22px 56px 8px; text-align: center; }
.cal-dialog-head h2 { margin: 0; font-size: 28px; }
.cal-dialog-head p { margin: 4px 0 0; color: #3d5670; }
.cal-dialog-close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; background: none; font-size: 28px; color: #10233a; cursor: pointer; }
.cal-dialog-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; padding: 12px 20px 20px; }
.cal-dialog-form { display: grid; gap: 10px; min-width: 0; }
.cal-step { margin: 0; padding: 12px 14px; border: 0; border-radius: 8px; background: #f1f6fb; min-inline-size: 0; }
.cal-step[hidden] { display: none; }
.cal-step legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font: 700 16px "Fira Sans", Arial, Helvetica, sans-serif; }
.cal-step .cal-label { color: #10233a; margin: 8px 0 4px; }
.cal-step textarea, .cal-step input[type=file] { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #c7d5e2; border-radius: 5px; background: #fff; font: 14px "Fira Sans", Arial, Helvetica, sans-serif; }
.cal-radio, .cal-step .cal-check { display: inline-flex; align-items: center; gap: 8px; margin: 4px 22px 4px 0; font-size: 14px; color: #10233a; }
.cal-slice-card { margin-top: 10px; padding: 10px 12px; border: 1px solid #d5e0ea; border-radius: 6px; background: #fff; font-size: 13px; }
.cal-slice-card p { margin: 3px 0; }
.cal-slice-card span { display: inline-block; min-width: 86px; color: #3d5670; }
.cal-slice-card p:first-child span { display: block; }
.cal-dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cal-secondary { min-height: 46px; padding: 0 22px; border: 1px solid #1462d1; border-radius: 6px; background: #fff; color: #1462d1; font: 700 15px "Fira Sans", Arial, Helvetica, sans-serif; cursor: pointer; }
.cal-dialog-side { padding: 16px 18px; border-radius: 8px; background: #f1f6fb; }
.cal-dialog-side h3 { margin: 0 0 10px; font-size: 22px; }
.cal-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.cal-steps li { position: relative; margin: 12px 0; padding-left: 46px; font-size: 13px; line-height: 1.5; color: #24425f; counter-increment: step; }
.cal-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cal-blue); color: #fff; font-weight: 700; }
.cal-steps strong { display: block; font-size: 15px; color: #10233a; }
.cal-callout { margin: 10px 0; padding: 10px 12px; border: 1px solid #c9d8ea; border-radius: 6px; background: #fff; font-size: 13px; line-height: 1.5; color: #24425f; }
.cal-callout strong { display: block; color: #10233a; }
.cal-dialog .cal-help { color: #24425f; }
.cal-dialog .cal-error { margin: 0; }

@media (max-width: 860px) {
  .cal-dialog-body { grid-template-columns: minmax(0, 1fr); }
  .calibration-page .cal-legend { bottom: calc(var(--explore-sheet-height, 0px) + 10px); }
  .calibration-page .cal-search { right: 56px; }
}
.calibration-page .cal-inlet-line { display: block; }
.cal-dialog .cal-help a, .calibration-page .cal-help a { color: #1462d1; text-decoration: underline; text-underline-offset: 3px; }
.cal-point.is-inlet b { left: auto; right: 20px; }
/* Inlets at one confluence sit close together: every other inlet's label goes to the right and a little lower. */
.cal-point.is-inlet.is-alternate b { right: auto; left: 20px; top: 12px; }
.calibration-page .cal-recall { margin: -6px 0 14px; padding: 8px 10px; border: 1px solid #9cc0ee; border-radius: 6px; background: #ffffff66; font-size: 13px; line-height: 1.5; color: #10233a; }

/* Phones (under 760 px): calibration-mobile.js and Kieran's "CoSWAT Mobile Calibration" frames. The scope tabs are a
   card at the top of the map, and the "Your slice" pane is a bottom sheet (body[data-cal-sheet]: peek, slice,
   performance or layers). Nothing here applies from 760 px up. */
.cal-m { display: none; }

@media (max-width: 759px) {
  .calibration-page { --explore-sidebar-width: 0px; --cal-peek: 104px; }
  .calibration-page .explore-pane { display: none; }
  .calibration-page .map-workspace { inset: 0; }
  .calibration-page .updates-reopen, .calibration-page .updates-heading, .calibration-page .site-footer { display: none !important; }
  /* Below the scope card: --cal-top-h is its height (calibration-mobile.js). */
  .calibration-page { --cal-below-top: calc(12px + var(--cal-top-h, 64px) + 10px); }

  /* Scope card and the map's own buttons. */
  .calibration-page .cal-m-top { position: absolute; z-index: 1001; top: 12px; left: 12px; right: 12px; display: block; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 2px 12px #0f2c4d29; }
  .calibration-page .cal-m-top .cal-scope { margin: 0; padding: 4px; border-radius: 10px; background: #eef3f8; }
  .calibration-page .cal-m-top .cal-scope button { min-height: 40px; color: #10233a; font-size: 15px; }
  .calibration-page .cal-m-top .cal-scope button[aria-selected="true"] { background: #fff; color: #1462d1; box-shadow: 0 1px 4px #0f2c4d1f; }
  /* Below the card: the legend chip on the left, "Change region" on the right, the layers button under it. */
  body:not([data-cal-browse]) .cal-m-change:not([hidden]) { position: absolute; z-index: 1000; top: var(--cal-below-top); right: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 12px; border: 0; border-radius: 12px; background: #fff; color: #10233a; font: 600 14px "Fira Sans", Arial, Helvetica, sans-serif; box-shadow: 0 2px 10px #0f2c4d26; cursor: pointer; }
  .calibration-page .cal-m-change svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .calibration-page .cal-m-change svg:last-child { width: 16px; height: 16px; }
  body:not([data-cal-browse]) .calibration-page, body:not([data-cal-browse]).calibration-page { --cal-layers-top: calc(var(--cal-below-top) + 54px); }
  .calibration-page .cal-m-layers-button { position: absolute; z-index: 1000; top: var(--cal-layers-top, var(--cal-below-top)); right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: #fff; color: #0f2c4d; box-shadow: 0 2px 10px #0f2c4d26; cursor: pointer; }
  .calibration-page .cal-m-layers-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
  .calibration-page .leaflet-top.leaflet-right { top: calc(var(--cal-layers-top, var(--cal-below-top)) + 44px); right: 2px; }
  .calibration-page .leaflet-control-zoom { border: 0 !important; border-radius: 10px !important; box-shadow: 0 2px 10px #0f2c4d26 !important; overflow: hidden; }
  .calibration-page .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; color: #0f2c4d !important; }
  .calibration-page .leaflet-bottom { bottom: calc(var(--cal-peek) + 6px); }
  body[data-cal-sheet="peek"]:has(.cal-m-tools:not([hidden])) .leaflet-bottom { bottom: calc(var(--cal-peek) + 70px); }
  /* The selection tools above the peek (Kieran's map frame): Outlet, Add inlet, Undo. */
  body[data-cal-sheet="peek"] .cal-m-tools:not([hidden]) { position: absolute; z-index: 1000; left: 12px; right: 12px; bottom: calc(var(--cal-peek) + 10px); display: flex; gap: 8px; }
  .calibration-page .cal-m-tools button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 10px; border: 0; border-radius: 12px; background: #fff; color: #10233a; font: 600 14px "Fira Sans", Arial, Helvetica, sans-serif; box-shadow: 0 2px 10px #0f2c4d26; cursor: pointer; }
  .calibration-page .cal-m-tools button[aria-pressed="true"] { background: #1462d1; color: #fff; }
  .calibration-page .cal-m-tools button:disabled { opacity: .5; cursor: default; }
  .calibration-page .cal-m-tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .calibration-page .leaflet-control-attribution, .calibration-page .leaflet-control-scale-line { font-size: 12px; }
  .calibration-page .cal-legend { top: var(--cal-below-top); bottom: auto; left: 12px; border: 0; border-radius: 12px; box-shadow: 0 2px 10px #0f2c4d26; }
  .calibration-page .cal-legend-toggle { min-height: 44px; padding: 0 12px; font-size: 14px; }
  /* Folded, the chip shows the two keys (Kieran's "Outlet · Inlet" chip). */
  .calibration-page .cal-legend-toggle[aria-expanded="false"] .cal-m-legend-keys { display: inline-flex; align-items: center; gap: 6px; }
  .calibration-page .cal-m-legend-keys .cal-key { margin: 0 0 0 4px; }
  .calibration-page .cal-m-legend-keys .cal-key:first-child { margin-left: 0; }
  .calibration-page .cal-legend-toggle[aria-expanded="false"] .cal-legend-word, .calibration-page .cal-legend-toggle[aria-expanded="false"] > svg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  /* The sheet. */
  .calibration-page .cal-pane.cal-pane { position: absolute; z-index: 900; inset: auto 0 0 0; width: auto; max-width: none; height: var(--cal-peek); max-height: none; display: flex; flex-direction: column; border-radius: 18px 18px 0 0; background: #fff; color: #10233a; box-shadow: 0 -4px 18px #0f2c4d26; transition: height .2s ease; }
  body[data-cal-sheet="slice"] .cal-pane.cal-pane { height: min(62%, 560px); }
  body[data-cal-sheet="performance"] .cal-pane.cal-pane, body[data-cal-sheet="layers"] .cal-pane.cal-pane { height: calc(100% - 84px); }
  .calibration-page .cal-pane::before { display: none; }
  .calibration-page .cal-m-handle { display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 2px; border-radius: 2px; background: #c3cfdb; }
  .calibration-page .cal-pane .details-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .calibration-page .cal-pane .details-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 0; color: #10233a; }

  /* Browsing: the sheet fits its list (Global: "Find a model to calibrate"; Continent: the continent's regions). */
  body[data-cal-browse][data-cal-sheet="peek"] .cal-pane.cal-pane { height: auto; max-height: 55%; }
  body[data-cal-browse][data-cal-sheet="peek"] .cal-m-peek { display: none !important; }
  body[data-cal-browse][data-cal-sheet="peek"] .cal-m-browse { display: flex; flex-direction: column; min-height: 0; padding: 2px 16px 16px; overflow-y: auto; }
  .calibration-page .cal-m-browse h2 { margin: 2px 0 0; padding: 0; font-size: 21px; color: #10233a; }
  .calibration-page .cal-m-browse-head p { margin: 2px 0 10px; color: #3d5670; font-size: 13.5px; }
  .calibration-page .cal-m-continent select { min-height: 44px; margin-top: 2px; padding: 0 10px; border: 1px solid #d5e0ea; border-radius: 10px; background: #fff; color: #10233a; font: 700 19px "Fira Sans", Arial, Helvetica, sans-serif; }
  .calibration-page .cal-m-browse-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #eef3f8; color: #3d5670; font-size: 14px; line-height: 1.45; }
  .calibration-page .cal-m-browse-note[hidden] { display: none; }
  .calibration-page .cal-m-browse-list { margin: 0; padding: 0; list-style: none; }
  .calibration-page .cal-m-browse-list button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 6px 4px; border: 0; border-bottom: 1px solid #e4e8ee; background: none; color: #10233a; font: 15px "Fira Sans", Arial, Helvetica, sans-serif; text-align: left; cursor: pointer; }
  .calibration-page .cal-m-browse-list button span { display: grid; flex: 1; }
  .calibration-page .cal-m-browse-list small { color: #3d5670; font-size: 13px; }
  .calibration-page .cal-m-browse-list svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .calibration-page .cal-m-browse-list button svg:last-child { width: 18px; height: 18px; stroke: #5b6b7c; }
  .calibration-page .cal-m-browse-list.is-buttons li + li { margin-top: 8px; }
  .calibration-page .cal-m-browse-list.is-buttons button { justify-content: center; min-height: 48px; border: 0; border-radius: 12px; background: #1462d1; color: #fff; font-weight: 600; }
  .calibration-page .cal-m-browse-list.is-buttons button span { flex: none; }
  .calibration-page .cal-m-browse-empty { color: #3d5670; font-size: 14px; }

  /* Peek. */
  body[data-cal-sheet="peek"] .cal-pane .details-content, body[data-cal-sheet="peek"] .cal-m-head { display: none; }
  body[data-cal-sheet="peek"] .cal-m-peek { display: flex; align-items: center; gap: 12px; padding: 4px 16px 12px; }
  .calibration-page .cal-m-peek-text { display: grid; flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: #10233a; font: inherit; text-align: left; cursor: pointer; }
  .calibration-page .cal-m-peek-text strong { font-size: 20px; line-height: 1.25; }
  .calibration-page .cal-m-peek-text span { overflow: hidden; color: #3d5670; font-size: 13.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
  .calibration-page .cal-m-peek-summary { color: #10233a !important; }
  .calibration-page .cal-m-review { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 10px; background: #1462d1; color: #fff; font: 600 15px "Fira Sans", Arial, Helvetica, sans-serif; cursor: pointer; }
  .calibration-page .cal-m-review[hidden] { display: none; }
  .calibration-page .cal-m-review svg, .calibration-page .cal-m-close svg, .calibration-page .cal-m-back svg, .calibration-page .cal-m-row svg, .calibration-page .cal-m-filter svg, .calibration-page .cal-m-gauge-link svg, .calibration-page .cal-m-pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* Sheet heading (slice, performance, layers). */
  body:not([data-cal-sheet="peek"]) .cal-m-head { display: flex; align-items: flex-start; gap: 8px; padding: 4px 8px 6px 16px; }
  .calibration-page .cal-m-head div { flex: 1; min-width: 0; }
  .calibration-page .cal-m-head h2 { margin: 2px 0 0; font-size: 21px; color: #10233a; }
  .calibration-page .cal-m-head p { margin: 2px 0 0; overflow: hidden; color: #3d5670; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
  .calibration-page .cal-m-chart:not([hidden]) { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #10233a; cursor: pointer; }
  .calibration-page .cal-m-chart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .calibration-page .cal-m-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #10233a; cursor: pointer; }

  /* Slice. */
  body[data-cal-sheet="slice"] :is(.cal-m-model, .cal-m-points) { display: flex; }
  .calibration-page .cal-m-model { align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; font-size: 14px; }
  .calibration-page .cal-m-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #e6f4ec; color: #1a6b3f; font-size: 13px; font-weight: 600; }
  .calibration-page .cal-m-pill svg { width: 15px; height: 15px; }
  .calibration-page .cal-m-pill.is-muted { background: #eef1f5; color: #5b6b7c; }
  .calibration-page .cal-m-points { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; padding: 6px; border-radius: 12px; background: #eef3f8; }
  .calibration-page .cal-m-points button { display: inline-flex; flex: 1; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #10233a; font: 14px "Fira Sans", Arial, Helvetica, sans-serif; cursor: pointer; }
  .calibration-page .cal-m-points button[aria-pressed="true"] { border-color: #c7d5e2; background: #fff; }
  .calibration-page .cal-m-points .cal-m-clear { flex: none; color: #1462d1; }
  .calibration-page .cal-m-points b { margin-left: auto; }
  .calibration-page .cal-m-points .cal-key.is-outlet, .calibration-page .cal-m-points .cal-key.is-inlet { margin: 0; }
  body[data-cal-sheet] .cal-pane .cal-facts, body[data-cal-sheet] .cal-pane .cal-note, body[data-cal-sheet] .cal-pane .cal-objects h3 { display: none; }
  .calibration-page .cal-pane .cal-counts { gap: 8px; }
  .calibration-page .cal-pane .cal-objects .cal-counts p { padding: 10px 12px; border: 0; border-radius: 10px; background: #eef3f8; text-align: left; }
  .calibration-page .cal-pane .cal-objects .cal-counts strong { font-size: 20px; }
  .calibration-page .cal-pane .cal-area { margin: 10px 0 12px; padding-bottom: 12px; border-color: #e4e8ee; }
  body[data-cal-sheet="slice"] .cal-m-row:not([hidden]) { display: flex; }
  .calibration-page .cal-m-row { align-items: center; gap: 10px; width: 100%; min-height: 56px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid #d5e0ea; border-radius: 12px; background: #fff; color: #10233a; font: inherit; text-align: left; cursor: pointer; }
  .calibration-page .cal-m-row span { display: grid; flex: 1; }
  .calibration-page .cal-m-row small { color: #3d5670; font-size: 13px; }
  .calibration-page .cal-pane .cal-period h3 { margin: 4px 0 8px; font-size: 15px; }
  .calibration-page .cal-pane .cal-select { min-height: 48px; font-size: 16px; }
  .calibration-page .cal-pane .cal-prepare { position: sticky; bottom: 0; z-index: 1; min-height: 52px; margin-top: 14px; box-shadow: 0 -10px 12px #fff; }
  .calibration-page .cal-pane .cal-help { font-size: 13px; }
  .calibration-page .cal-pane .cal-links a, .calibration-page .cal-pane .cal-links button { min-height: 48px; }

  /* Performance: the evaluation section alone, its table as cards. */
  body[data-cal-sheet="performance"] .cal-pane .details-scroll > :not(.cal-eval):not(.cal-m-back) { display: none; }
  body:not([data-cal-sheet="performance"]) .cal-pane .cal-eval { display: none; }
  body[data-cal-sheet="performance"] .cal-pane .cal-eval { margin: 0; padding: 0; border: 0; }
  body[data-cal-sheet="performance"] .cal-pane .cal-eval > h3, body[data-cal-sheet="performance"] .cal-pane .cal-gauges, body[data-cal-sheet="performance"] .cal-pane .cal-eval-note { display: none; }
  .calibration-page .cal-pane .cal-eval-scope { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: #eef3f8; font-size: 14px; }
  .calibration-page .cal-pane .cal-eval-medians { gap: 8px; }
  .calibration-page .cal-pane .cal-eval-medians p { padding: 10px 12px; border: 0; border-radius: 10px; background: #eef3f8; text-align: left; }
  body[data-cal-sheet="performance"] .cal-m-gauges { display: block; margin-top: 14px; }
  .calibration-page .cal-m-gauges-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .calibration-page .cal-m-gauges-head h3 { margin: 0; font-size: 17px; }
  .calibration-page .cal-m-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #d5e0ea; border-radius: 10px; background: #fff; color: #10233a; font: 15px "Fira Sans", Arial, Helvetica, sans-serif; cursor: pointer; }
  .calibration-page .cal-m-filter[aria-expanded="true"] { background: #eef3f8; }
  .calibration-page .cal-m-filter-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: #eef3f8; }
  .calibration-page .cal-m-filter-menu[hidden] { display: none; }
  .calibration-page .cal-m-filter-menu fieldset { margin: 0; padding: 0; border: 0; }
  .calibration-page .cal-m-filter-menu legend { margin-bottom: 4px; color: #3d5670; font-size: 13px; }
  .calibration-page .cal-m-filter-menu label { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; }
  .calibration-page .cal-m-gauge-list { margin: 0; padding: 0; list-style: none; }
  .calibration-page .cal-m-gauge { margin-bottom: 10px; padding: 12px 14px 6px; border: 1px solid #d5e0ea; border-radius: 14px; background: #fff; }
  .calibration-page .cal-m-gauge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .calibration-page .cal-m-gauge h4 { margin: 0; font-size: 16px; }
  .calibration-page .cal-m-gauge-meta { margin: 4px 0 10px; color: #3d5670; font-size: 13px; }
  .calibration-page .cal-m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .calibration-page .cal-m-tile { margin: 0; padding: 8px 10px; border-radius: 10px; background: #eef3f8; }
  .calibration-page .cal-m-tile strong { display: block; font-size: 18px; }
  .calibration-page .cal-m-tile span { color: #3d5670; font-size: 12px; }
  .calibration-page .cal-m-gauge-link { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; color: #10233a; font-weight: 600; text-decoration: none; }
  body[data-cal-sheet="performance"] .cal-m-back { display: flex; position: sticky; bottom: 0; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 6px 0 10px; border: 1px solid #d5e0ea; border-radius: 12px; background: #eef3f8; color: #10233a; font: 600 15px "Fira Sans", Arial, Helvetica, sans-serif; box-shadow: 0 -10px 12px #fff; cursor: pointer; }

  /* Layers: the map layer switches and the selection tools from the left pane. */
  body[data-cal-sheet="layers"] .cal-pane .details-scroll > :not(.cal-m-layers) { display: none; }
  body[data-cal-sheet="layers"] .cal-m-layers { display: block; }
  .calibration-page .cal-m-layers .cal-check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 4px 0; color: #10233a; font-size: 15px; }
  .calibration-page .cal-m-layers .cal-check input { flex: none; width: 20px; height: 20px; accent-color: #1462d1; }
  .calibration-page .cal-m-layers .cal-check-hint { color: #3d5670; font-size: 12px; }
  .calibration-page .cal-m-layers .cal-swatch { box-shadow: inset 0 0 0 1px #d5e0ea; }
  .calibration-page .cal-m-layers #pane-tools { margin-top: 12px; padding-top: 8px; border-top: 1px solid #e4e8ee; }
  .calibration-page .cal-m-layers .cal-tool { min-height: 48px; color: #10233a; }
  .calibration-page .cal-m-layers .cal-tool:hover, .calibration-page .cal-m-layers .cal-tool[aria-pressed="true"] { background: #eef3f8; }
  .calibration-page .cal-m-layers .cal-tool-icon.is-outlet { border-color: #1462d1; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px #1462d1; }
  .calibration-page .cal-m-layers .pane-hint { color: #3d5670; font-size: 13px; }
}