/* One shared timeline; separate, explicit physical scales. */
:root {
  --ink:#17231d; --muted:#68766e; --bg:#fff; --surface:#fff;
  --subtle:#f3f7f4; --line:#e3eae5; --line-soft:#edf1ee; --selected:#edf7f0;
  --chart-accent:#009b50; --chart-pressure:#386fda; --chart-halo:#009b5012;
  --chart-pressure-halo:#386fda18; --chart-baseline:#d4ded7;
  --accent-ink:#008448; --control-border:#c9d5cd;
}
@media (prefers-color-scheme:dark) {
  :root {
    --ink:#edf5ef; --muted:#9daa9f; --bg:#0b0e0c; --surface:#0b0e0c;
    --subtle:#141c16; --line:#263329; --line-soft:#1d2820; --selected:#182a1e;
    --chart-accent:#39df7a; --chart-pressure:#77a7ff; --chart-halo:#39df7a15;
    --chart-pressure-halo:#77a7ff20; --chart-baseline:#344339;
    --accent-ink:#39df7a; --control-border:#3b4e40;
  }
}
.workspace:not(.portfolio-open) main {max-width:1160px; padding:30px 44px 64px;}
.workspace:not(.portfolio-open) .page-heading {margin-bottom:8px;}
.workspace:not(.portfolio-open) .page-heading h1 {font-size:1.55rem; font-weight:600; letter-spacing:-.045em;}
.workspace:not(.portfolio-open) .page-heading .eyebrow,
.workspace:not(.portfolio-open) #selection-description {display:none;}
.workspace:not(.portfolio-open) .pump-status {margin-bottom:26px;}
.chart-panel {position:relative; border:0; border-radius:0; overflow:visible; padding:0; background:transparent;}
.chart-heading {display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0;}
.chart-heading h2 {font-size:1rem; font-weight:550; letter-spacing:-.02em;}
.chart-measurement {margin-top:5px; color:var(--muted); font-size:.75rem;}
#chart-resolution:not(:empty)::before {content:'·'; margin:0 6px 0 2px;}
.chart-options {position:relative; z-index:3; flex-shrink:0;}
.chart-options > summary {display:flex; align-items:center; gap:8px; min-height:44px; padding:7px 10px; list-style:none; border:1px solid var(--line); border-radius:24px; font-size:.75rem; color:var(--muted);}
.chart-options > summary::-webkit-details-marker {display:none;}
.chart-options > summary svg {overflow:visible;}
.chart-options > summary circle {fill:var(--surface);}
.chart-options > summary:hover,.chart-options[open] > summary {color:var(--ink); background:var(--subtle);}
.chart-options-body {position:absolute; right:0; top:calc(100% + 8px); width:264px; max-width:calc(100vw - 40px); border:1px solid var(--line); border-radius:16px; padding:20px; background:var(--surface); box-shadow:0 16px 50px var(--shadow);}
.chart-options-body p {font-size:.75rem; color:var(--muted); margin-bottom:8px;}
.chart-options-body p:not(:first-child) {margin-top:18px;}
.chart-options-body .peak-toggle {display:flex; padding:0; min-height:44px; color:var(--ink);}
.chart-options-body small {display:block; margin-top:8px; color:var(--muted); font-size:.6875rem; line-height:1.6;}
.chart-options-body #series {display:grid; grid-template-columns:1fr 1fr; width:100%;}
.chart-options-body #series button {padding-inline:8px;}
.chart-values {display:flex; align-items:flex-start; gap:clamp(32px,7vw,88px); margin-top:26px; font-variant-numeric:tabular-nums;}
.chart-metric {min-width:0;}
.chart-metric-label {display:flex; align-items:center; gap:8px; font-size:.75rem; font-weight:500; color:var(--muted);}
.chart-metric-label i {display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--chart-accent);}
.pressure-metric .chart-metric-label i {background:var(--chart-pressure);}
.chart-metric-number {display:flex; align-items:baseline; gap:8px; margin-top:5px; white-space:nowrap;}
.chart-metric-number output {font-size:clamp(2.5rem,4.3vw,3.5rem); font-weight:500; letter-spacing:-.065em; line-height:1.12;}
.chart-metric-number > span {font-size:1rem; font-weight:400; color:var(--muted);}
.chart-readout {display:flex; flex-wrap:wrap; gap:0 7px; margin:12px 0 0; min-height:38px; color:var(--muted); font-size:.75rem; line-height:1.55; font-variant-numeric:tabular-nums;}
.chart-readout .reading-title,.chart-readout .reading-detail {font-size:inherit; color:inherit;}
.chart-readout .reading-detail:not(:empty)::before {content:'·'; padding-right:7px;}
.chart-panel .chart {height:330px; padding:0; cursor:crosshair;}
.chart-panel .chart svg {display:block; overflow:visible; touch-action:pan-y; user-select:none; -webkit-user-select:none;}
.chart .zero-line {stroke:var(--chart-baseline); stroke-width:1; stroke-dasharray:2 5;}
.chart .scale-label {font-size:10px; fill:var(--muted); font-variant-numeric:tabular-nums;}
.chart .current-scale-label {fill:var(--chart-accent);}
.chart .pressure-scale-label {fill:var(--chart-pressure);}
.chart .average-line {stroke:var(--chart-accent); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.chart .pressure-line {stroke:var(--chart-pressure); stroke-width:2.1; fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.chart .current-area {fill:url(#current-area-fill); stroke:none;}
.chart stop {stop-color:var(--chart-accent);}
.chart .point {fill:var(--chart-accent);}
.chart .pressure-point {fill:var(--chart-pressure);}
.chart .endpoint {stroke:var(--surface); stroke-width:2;}
.chart .peak-line {stroke-width:1.2; stroke-dasharray:3 4; opacity:.8;}
.chart .peak-point {fill:var(--peak);}
.chart .current-range {stroke:none; fill:var(--chart-halo);}
.chart .current-range-line {stroke:var(--chart-accent); opacity:.2;}
.chart .crosshair {stroke:var(--muted); stroke-width:1; stroke-dasharray:none; opacity:.5;}
.chart .inspection-point {fill:var(--chart-accent); stroke:var(--surface); stroke-width:2.5;}
.chart .pressure-inspection-point {fill:var(--chart-pressure); stroke:var(--surface); stroke-width:2.5;}
.chart .inspection-halo {fill:var(--chart-halo);}
.chart .pressure-halo {fill:var(--chart-pressure-halo);}
.chart .label-band {fill:var(--chart-halo); opacity:.55;}
.chart .label-stem {opacity:.2;}
.chart .label-badge {fill:var(--surface); stroke:var(--control-border); stroke-width:1;}
.chart .label-number {fill:var(--muted); font-size:9px; font-weight:600;}
.chart .empty-chart-label {font-size:12px;}
.chart-time-axis {display:flex; justify-content:space-between; overflow:hidden; margin:0 12px; min-height:46px; padding:0 0 12px; color:var(--muted); font-size:.6875rem; line-height:1.5; font-variant-numeric:tabular-nums;}
.time-tick {flex:0 0 0; min-width:0;}
.time-tick time {display:inline-block; white-space:nowrap; text-align:center; transform:translateX(-50%);}
.time-tick:first-child time {text-align:left; transform:none;}
.time-tick:last-child time {text-align:right; transform:translateX(-100%);}
.time-tick span {display:block;}
.time-tick .time-detail,.time-tick .time-zone {font-size:.625rem;}
.chart-panel #ranges {display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; margin:0; padding:0 0 14px; background:none; border-bottom:1px solid var(--line-soft); border-radius:0;}
.chart-panel #ranges button {min-height:44px; min-width:0; border-radius:24px; padding:6px 8px; color:var(--muted); font-weight:550; font-size:.8125rem; transition:background-color .15s,color .15s;}
.chart-panel #ranges button[aria-pressed="true"] {background:var(--chart-accent); color:#fff; box-shadow:none;}
.chart-panel #ranges button:hover:not([aria-pressed="true"]) {color:var(--chart-accent); background:var(--chart-halo);}
.chart-panel .history-feedback {position:absolute; top:-22px; right:0; min-height:20px; margin:0; font-size:.6875rem;}
.chart-panel .history-feedback button {min-height:32px;}
.chart-panel .history-navigation {margin:6px 0 0;}
.chart-panel .history-stepper {display:flex; justify-content:flex-start; flex:0 1 auto; gap:2px;}
.chart-panel .history-stepper span {order:1; font-size:.75rem; margin-right:12px; text-align:left;}
.chart-panel .history-stepper button {order:2; border:0; background:none; font-size:1.4rem; min-width:44px;}
.chart-panel .history-navigation .text-button {font-size:.75rem; margin:0;}
.chart-panel .chart-inspector {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 10px; margin:0; padding:0; min-height:44px; background:none; border-radius:0;}
#inspection-hint {font-size:.6875rem; color:var(--muted);}
.inspection-actions {display:flex; gap:12px; align-items:center;}
.inspection-actions .text-button {font-size:.75rem; min-height:44px; color:var(--accent-ink);}
.inspection-actions button:disabled {cursor:not-allowed;}
.keyboard-inspection {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
.keyboard-inspection:focus-within {position:static; flex-basis:100%; width:100%; height:auto; overflow:visible; clip-path:none; padding:4px;}
.chart-panel .chart-legend {padding:8px 0; margin:0; font-size:.6875rem;}
.chart-panel .legend-line {background:var(--chart-accent);}
.chart-panel .legend-range {background:var(--chart-halo); border-color:var(--chart-accent);}
.chart-panel .chart-caption {display:block; margin:0; padding:4px 0; font-size:.6875rem; color:var(--muted); line-height:1.6;}
.custom-range {margin-inline:0;}
.overview-grid {margin-bottom:30px;}
.chart-enter {animation:chart-appear .22s ease-out;}
@keyframes chart-appear {from{opacity:0;transform:translateY(2px)} to{opacity:1;transform:translateY(0)}}
@media (prefers-color-scheme:dark) {.chart-panel #ranges button[aria-pressed="true"] {color:#0b0e0c;}}
@media(max-width:800px) {
  .workspace:not(.portfolio-open) main {padding:22px 20px 48px;}
  .workspace:not(.portfolio-open) .pump-status {margin-bottom:24px;}
  .chart-heading h2 {font-size:.9375rem;}
  .chart-options > summary {padding:10px;}
  .chart-options > summary span {display:none;}
  .chart-values {gap:34px; margin-top:22px;}
  .chart-metric-number output {font-size:2.55rem;}
  .chart-metric-number > span {font-size:.8125rem;}
  .chart-readout {font-size:.6875rem; min-height:44px; margin-top:10px;}
  .chart-panel .chart {height:280px;}
  .chart-panel #ranges {grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding-bottom:12px;}
  .chart-panel #ranges button {padding-inline:6px; font-size:.75rem;}
  .chart-panel .history-stepper span {font-size:.6875rem; margin-right:4px;}
  .chart-panel .chart-inspector {gap:0 8px;}
  .inspection-actions {gap:8px;}
  .chart-panel .chart-caption {font-size:.625rem;}
  .custom-range {margin-inline:0;}
}
@media(max-width:380px) {
  .chart-values {gap:24px;}
  .chart-metric-number output {font-size:2.2rem;}
  .chart-metric-number {gap:5px;}
  .chart-measurement {font-size:.6875rem;}
}
@media(prefers-reduced-motion:reduce) {.chart-enter {animation:none;} .chart-panel #ranges button {transition:none;}}