/* Vessel view (SVG built by js/vessels.js). Colours come from tokens.css. */
.pp-vessels { position: relative; display: flex; flex-direction: column; gap: var(--space-2); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pp-row { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; touch-action: pan-x pan-y; }
.pp-row-svg { display: block; }
.pp-vessel { cursor: grab; outline: none; scroll-snap-align: start; }
.pp-vessel:focus-visible .pp-glass { stroke: var(--c-focus); stroke-width: 3; }
.pp-glass-fill { fill: var(--c-surface); }
.pp-glass { fill: none; stroke: var(--c-glass); stroke-width: 1.5; }
.pp-selected .pp-glass { stroke: var(--c-primary); stroke-width: 3; }
.pp-soft-crossed .pp-glass { stroke: var(--c-soft); stroke-width: 2.5; }
.pp-target .pp-glass { stroke: var(--c-primary); stroke-width: 2.5; }
.pp-fixed { cursor: default; }
.pp-fixed .pp-glass-fill { fill: var(--c-frosted); }
.pp-shine { fill: #ffffff; opacity: 0.35; pointer-events: none; }
.pp-divider { stroke: var(--c-glass); stroke-width: 0.8; stroke-dasharray: 2 3; opacity: 0.7; }
.pp-start { stroke: var(--c-tick); stroke-width: 0.8; stroke-dasharray: 3 3; pointer-events: none; }
.pp-line { stroke-width: 2; pointer-events: none; }
.pp-hardMin, .pp-hardMax { stroke: var(--c-hard); }
.pp-softMin, .pp-softMax { stroke: var(--c-soft); stroke-dasharray: 4 2; }
.pp-compare { stroke: var(--c-compare); stroke-dasharray: 6 3; opacity: 0.8; }
.pp-label, .pp-amount, .pp-badge, .pp-bracket text, .pp-toggle text { font: var(--font-small) var(--font); fill: var(--c-text); }
.pp-amount { fill: var(--c-muted); }
.pp-badge.up { fill: var(--c-up); }
.pp-badge.down { fill: var(--c-down); }
.pp-toggle, .pp-bracket-close { cursor: pointer; outline: none; }
.pp-toggle text, .pp-bracket-close text { fill: var(--c-primary); }
.pp-bracket-close:focus-visible text { text-decoration: underline; }
.pp-bracket path { fill: none; stroke: var(--c-primary); stroke-width: 1.2; }
.pp-lifted { transform: translateY(-4px); transition: transform 120ms; }
.pp-flash { animation: pp-flash 0.7s ease-out; }
@keyframes pp-flash { 0%, 60%, 100% { opacity: 1; } 30%, 80% { opacity: 0.2; } }
.pp-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pp-stream { fill: none; stroke: var(--c-water-spending-top); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 6; opacity: 0.9; animation: pp-flow 0.6s linear infinite; }
@keyframes pp-flow { to { stroke-dashoffset: -16; } }
.pp-pour-badge rect { fill: var(--c-primary); }
.pp-pour-badge text { fill: var(--c-primary-text); font: var(--font-small) var(--font); }
.pp-handle { cursor: ns-resize; outline: none; touch-action: none; }
.pp-handle-pill { fill: var(--c-primary); }
.pp-handle:focus-visible .pp-handle-pill { stroke: var(--c-focus); stroke-width: 3; }
.pp-handle-hit { fill: transparent; touch-action: none; }
.pp-fps { position: absolute; top: 0; right: 0; padding: 2px 6px; font: 12px monospace; background: var(--c-surface); border: 1px solid var(--c-border); }
.pp-stream-still { animation: none; stroke-dasharray: none; }

.pp-handle-message { font: var(--font-small) var(--font); fill: var(--c-warning); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .pp-stream, .pp-flash { animation: none; }
  .pp-lifted { transition: none; }
}