/* Ocean stations: the map filter box and the station panel. Dark glass, from the approved prototype:
   Manrope text, Oxanium titles. */
.os-ctl, .os-panel { font-family: Manrope, system-ui, sans-serif; }
/* The box sits in the left panel under DO Forecast, in the same glass as its card (oxy_forecast.css #oxy_container,
   itself the farm card's), so the panel's two read as one set: an Oxanium title (as the farm and station panels'
   titles) with the switch at its right; then the three selects, quiet boxes that light in the brand's blue while one
   filters the map (is-set), the platforms' one showing their map colours. No drop shadow (as DO Forecast's card). */
.os-ctl.glass-panel {
    margin-bottom: 12px;
    padding: 14px 16px 16px;
    border-radius: 14px;
    background: var(--bc-glass-bg);
    -webkit-backdrop-filter: var(--bc-glass-blur);
    backdrop-filter: var(--bc-glass-blur);
    border: var(--bc-glass-border);
    box-shadow: var(--bc-glass-edge);
    font-size: 13px;
    line-height: 1.45;
}
.os-ctl .os-ctl-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.os-ctl .os-ctl-title { font-family: Oxanium, Manrope, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; color: #f8fafc; white-space: nowrap; }
.os-ctl-body { margin-top: 12px; max-height: 900px; overflow: hidden; transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease; }
.os-off .os-ctl-body { max-height: 0; opacity: 0; margin-top: 0; }
.os-ctl.os-off .os-ctl-title { color: rgba(226, 232, 240, 0.6); }

/* The global <button> (navy fill, padding) is switched off for every control in the box. */
.os-ctl button { isolation: auto; overflow: visible; line-height: inherit; background: none; color: inherit; font: inherit; }
.os-ctl button:hover { color: inherit; }
.os-ctl button:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; }

.os-sel { width: 100%; padding: 5px 6px; border-radius: 8px; font: inherit; font-size: 12px;
          border: 1px solid rgba(255, 255, 255, .18); background: #1e293b; color: #e2e8f0; }
/* The platform, operator and measures selects: the list opens in place, under its button (or upwards, where there isn't
   the room under it: below), and scrolls when long. */
.os-ctl .os-sel { padding: 8px 10px 8px 12px; border-radius: 10px; border-color: rgba(148, 163, 184, .16); background: rgba(2, 10, 24, .5);
                  font-size: 12.5px; font-weight: 600; color: #e2e8f0; }
.os-ctl .os-pick-btn { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; background: rgba(2, 10, 24, .5);
                       transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.os-ctl .os-pick-btn:hover { border-color: rgba(96, 165, 250, .45); background: rgba(46, 142, 255, .08); color: #f8fafc; }
.os-ctl .os-pick.open .os-pick-btn { border-color: rgba(96, 165, 250, .6); }
.os-ctl .os-pick.is-set .os-pick-btn { border-color: rgba(46, 142, 255, .55); background: rgba(46, 142, 255, .14); color: #dbeafe; }
.os-pick-btn > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-pick-btn > i { margin-left: auto; font-size: 10px; color: #94a3b8; transition: transform .2s; }
.os-pick.open .os-pick-btn > i { transform: rotate(180deg); }
/* The platforms' colours, as their dots on the map, at the platforms select's right: an unticked one faint. */
.os-dots { display: inline-flex; margin-left: auto; padding-left: 4px; }
.os-dots + i { margin-left: 0; }
.os-dots > i { width: 8px; height: 8px; margin-left: -2px; border-radius: 50%; border: 1px solid rgba(3, 15, 32, .9); transition: opacity .15s ease; }
.os-dots > i.off { opacity: .2; }
.os-pick-menu { display: none; max-height: 240px; overflow-y: auto; margin-top: 6px; padding: 4px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 10px;
                background: rgba(6, 18, 38, .96); box-shadow: 0 10px 24px rgba(0, 8, 22, .45); }
.os-pick.open .os-pick-menu { display: block; }
/* Where the panel hasn't the room under its button (layer.js place()), the list opens upwards instead, over the selects
   and cards above it: above the buttons' labels (app.css lifts every button's first span to z-index 10), its shadow
   cast upwards, and the box's body no longer clipping it (it clips only to fold away when the layer is off). */
.os-pick { position: relative; }
.os-pick--up .os-pick-menu { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 20; margin: 0 0 6px; box-shadow: 0 -10px 24px rgba(0, 8, 22, .45); }
.os-ctl-body:has(.os-pick--up) { overflow: visible; }
.os-ctl .os-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; font-size: 12.5px; text-align: left; cursor: pointer; }
.os-ctl .os-opt:hover { background: rgba(96, 165, 250, .12); }
.os-opt > i:first-child { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); }
.os-opt small { margin-left: auto; font-size: 11px; color: rgba(148, 163, 184, .85); font-variant-numeric: tabular-nums; }
.os-opt .fa-check { width: 12px; font-size: 10px; color: #60a5fa; }
.os-opt.off { color: #64748b; }
.os-opt.off > i:first-child { opacity: .4; }
.os-opt.off .fa-check { visibility: hidden; }
.os-opt > .os-nodot { display: none; }
/* Operators and measures: nothing ticked means no filter, so unticked rows stay bright and only picked rows show a tick. */
.os-pick--any .os-opt:not(.picked) .fa-check { visibility: hidden; }
.os-pick + .os-pick { margin-top: 8px; }
.os-pick[hidden], .os-opt[hidden] { display: none; }   /* a select with one option or none on offer; an option none offer */
/* A select with one possible value (the client's access allows only that one) shows it as text, in the same box. */
.os-fixed { display: flex; align-items: center; gap: 8px; cursor: default; }
.os-fixed > i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); }
.os-fixed > .os-nodot { display: none; }
/* Reset on the left; the note, then Save for next login, pushed right. */
.os-acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 11px; }
.os-ctl .os-act { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; font-size: 11px; font-weight: 700; color: #94a3b8; cursor: pointer; }
.os-ctl .os-act:hover { color: #e2e8f0; }
.os-ctl .os-act--save { color: #60a5fa; }
.os-ctl .os-act--save:hover { color: #93c5fd; }
.os-ctl .os-act:disabled { opacity: .5; cursor: default; }
.os-note { margin-left: auto; color: #94a3b8; }
.os-note:empty { display: none; }
.os-note:empty + .os-act--save { margin-left: auto; }
.os-ctl .os-acts[hidden], .os-ctl .os-act[hidden] { display: none; }

/* The switch, in the brand's blue (glowing) while the layer shows. */
.os-ctl .os-switch { flex: none; margin: 0 0 0 auto; position: relative; width: 34px; height: 20px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
                     background: #2e8eff; box-shadow: inset 0 1px 2px rgba(0, 8, 22, .3), 0 0 10px rgba(46, 142, 255, .35); transition: background-color .15s ease, box-shadow .15s ease; }
.os-switch::before { content: ""; position: absolute; top: 3px; left: 17px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 8, 22, .4); transition: left .15s; }
.os-ctl.os-off .os-switch { background: rgba(148, 163, 184, .3); box-shadow: inset 0 1px 2px rgba(0, 8, 22, .3); }
.os-off .os-switch::before { left: 3px; }

/* The station panel: docked right, over .right-panel, in the same glass. The body scrolls; × stays put. */
.os-panel { box-sizing: border-box; position: fixed; top: 100px; right: 16px; bottom: 16px; width: 550px; max-width: calc(100vw - 32px); z-index: 1001;
            display: flex; flex-direction: column; border-radius: 12px; background: rgba(15, 23, 42, .86);
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .08);
            box-shadow: 0 8px 30px rgba(0, 0, 0, .25); color: #e2e8f0; font-size: 13px; line-height: 1.45; }
.os-panel[hidden] { display: none; }
.os-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px 14px; display: flex; flex-direction: column; }
.os-panel-body::-webkit-scrollbar { width: 4px; }
.os-panel-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 2px; }

/* The global <button> (navy fill, padding) is switched off here too. */
.os-panel button { isolation: auto; overflow: visible; padding: 0; border: 0; line-height: inherit; background: none; color: inherit; font: inherit; cursor: pointer; }
.os-panel button:hover { color: inherit; }
/* The panel's icon buttons, as the date card's collapse chevron (app.css .date-display .left-panel-toggle): a quiet
   28 px square, 8 px corners; back a double chevron, close its ×. */
.os-panel .os-close { position: absolute; top: 8px; right: 10px; z-index: 1; width: 28px; height: 28px; border-radius: 8px; font-size: 20px; line-height: 28px; color: rgba(226, 232, 240, .65); transition: background-color .15s ease, color .15s ease; }
.os-panel .os-close:hover { background: rgba(255, 255, 255, .1); color: #ffffff; }
.os-panel button:focus-visible, .os-list li:focus-visible { outline: 2px solid #38bdf8; outline-offset: -2px; }
.os-panel .os-h2 { margin: 0; font-family: Oxanium, sans-serif; font-size: 19px; font-weight: 600; line-height: 1.25; color: #f8fafc; overflow-wrap: anywhere; }
.os-panel .os-meta { margin: 3px 0 0; font-size: 12px; color: #94a3b8; }
.os-panel .os-note { margin: 10px 0 0; font-size: 12px; color: #94a3b8; }

/* Station view, chart first: ‹ name, platform · km with a freshness chip, the operator, the picked reading
   as a big number over its chart, a chip per reading, and a two-line footer at the bottom. */
.os-top { display: flex; align-items: center; gap: 6px; padding-right: 26px; }
.os-panel .os-back { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 8px; color: rgba(226, 232, 240, .65); transition: background-color .15s ease, color .15s ease; }
.os-panel .os-back i { font-size: 13px; line-height: 1; }
.os-panel .os-back:hover { background: rgba(255, 255, 255, .1); color: #ffffff; }
.os-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: #94a3b8; }
.os-sub > i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.os-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-op { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 0 17px; font-size: 12px; color: #94a3b8; }   /* under the platform, past the dot */
.os-op-name { min-width: 0; overflow-wrap: anywhere; }
/* Drifting or moored, at the operator row's right end: a quiet chip, the drifting one in the station blue. */
.os-motion { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06);
             color: #cbd5e1; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: help; }
.os-motion i { font-size: 10px; color: #94a3b8; }
.os-motion.moving { background: rgba(56, 189, 248, .12); color: #7dd3fc; }
.os-motion.moving i { color: #38bdf8; }
.os-age { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px;
          background: rgba(255, 255, 255, .06); color: #94a3b8; font-size: 11px; font-weight: 700; white-space: nowrap; }
.os-age::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.os-age.stale { background: rgba(251, 191, 36, .12); color: #fcd34d; }
.os-age.stale::before { background: currentColor; }
.os-hero { margin-top: 16px; }
.os-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.os-big { font-size: 40px; font-weight: 700; line-height: 1; color: #f8fafc; font-variant-numeric: tabular-nums; }
.os-big small { margin-left: 4px; font-size: 16px; font-weight: 600; color: #94a3b8; }
.os-hero-name { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 600; }
.os-tag { flex: none; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #94a3b8; font-size: 10.5px; font-weight: 700; }
.os-tag[hidden] { display: none; }
.os-panel .os-add { flex: none; margin-left: auto; font-size: 12px; font-weight: 700; color: #38bdf8; white-space: nowrap; }
.os-panel .os-add:hover { color: #7dd3fc; }
.os-seg { display: inline-flex; margin-bottom: 6px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; overflow: hidden; }
.os-panel .os-seg button { padding: 1px 9px; font-size: 10.5px; font-weight: 700; color: #94a3b8; white-space: nowrap; }
.os-panel .os-seg button.on { background: rgba(56, 189, 248, .2); color: #f8fafc; }
.os-charts { margin-top: 10px; }
.os-chart { position: relative; height: 280px; }
.os-chart--profile { height: 360px; }
.os-cap { margin-top: 4px; font-size: 11px; color: #64748b; }
.os-rds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.os-panel .os-rd { display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .14);
                   border-radius: 999px; font-size: 11.5px; }
.os-panel .os-rd:hover { border-color: rgba(56, 189, 248, .6); }
.os-panel .os-rd.on { border-color: #38bdf8; background: rgba(56, 189, 248, .14); }
.os-rd span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-rd b { flex: none; color: #f8fafc; white-space: nowrap; }
.os-foot { margin-top: auto; padding-top: 16px; font-size: 10.5px; line-height: 1.5; color: #64748b; }

/* A wave buoy (waves.js): the sea state card (height, compass, period tiles), then Chart | Table over the 7 days:
   three lanes on one time axis (height, period, direction arrows) or every reading as rows, then Add to my chart. */
.os-wv { margin-top: 16px; }
.os-wv-now { padding: 14px 14px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .03); }
/* The card's backdrop: the buoy modal's animated water (.buoy-back-waves / .buoy-water-gradient / .buoy-front-wave,
   app.css), same fills and timings, the waterline under the height and compass so the tiles sit in the water. The
   text stays above every layer, and the whole sea is dimmed so it reads as backdrop. */
.os-wv-now { position: relative; overflow: hidden; }
.os-wv-now > .os-wv-head, .os-wv-now > .os-wv-tiles { position: relative; z-index: 1; }
.os-wv-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 41%; transform: translateY(25%); pointer-events: none; opacity: .6; }   /* a quarter of it below the card's edge */
.os-wv-sea svg { position: absolute; left: 0; top: 0; width: 100%; height: 30px; }
.os-wv-sea-water { position: absolute; left: 0; right: 0; top: 30px; bottom: 0;
                   background: linear-gradient(180deg, rgba(52, 97, 193, 1) 0%, rgba(52, 97, 193, .1) 50%, rgba(45, 85, 170, .1) 45%, rgba(37, 33, 33, .34) 100%); }
.os-wv-sea-back use:nth-child(1) { fill: rgba(52, 97, 193, .8); animation: os-wv-wave 15s linear -2s infinite; }
.os-wv-sea-back use:nth-child(2) { fill: rgba(45, 85, 170, .9); animation: os-wv-wave 18s linear -4s infinite; }
.os-wv-sea-front use { fill: rgba(69, 121, 226, .55); animation: os-wv-wave 9s linear -12s infinite; }
@keyframes os-wv-wave { 0% { transform: translate(-90px, 0); } 100% { transform: translate(85px, 0); } }
@media (prefers-reduced-motion: reduce) {
    .os-wv-sea use { animation: none; }
    .os-ctl-body, .os-ctl .os-pick-btn, .os-pick-btn > i, .os-dots > i, .os-ctl .os-switch, .os-switch::before { transition: none; }
}
.os-wv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.os-wv-hs { min-width: 0; }
.os-wv-big { display: block; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.5px; color: #f8fafc; }
.os-wv-big small { margin-left: 5px; font-size: 17px; font-weight: 600; letter-spacing: 0; color: #94a3b8; }
.os-wv-name { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; font-weight: 600; }
.os-wv-when { margin-top: 3px; font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; }
.os-wv-when.on { color: #e2e8f0; }   /* scrubbing: the time the card shows */
.os-wv-dir { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.os-wv-rose { display: block; overflow: visible; }
.os-wv-ring { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.os-wv-tick { stroke: rgba(255, 255, 255, .3); stroke-width: 1; }
.os-wv-cardinal { fill: #64748b; font: 700 8.5px Manrope, system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; }
.os-wv-wedge { fill: rgba(57, 135, 229, .3); }
.os-wv-needle line { stroke: #3987e5; stroke-width: 2.5; stroke-linecap: round; }
.os-wv-needle path { fill: #3987e5; }
.os-wv-hub { fill: #f1f5f9; }
.os-wv-from { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.os-wv-from b { color: #f1f5f9; font-weight: 700; }
.os-wv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; margin-top: 12px; padding-top: 11px; }
.os-wv-tile { min-width: 0; }
/* A measurement's name opens its popup: dotted underline, as on the buoy readings' labels (.buoy-status-label). */
.os-panel .os-wv-term { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; cursor: pointer;
                        text-decoration: underline dotted rgba(203, 213, 225, .5); text-decoration-thickness: 1px; text-underline-offset: 3px;
                        transition: color .15s ease, text-decoration-color .15s ease; }
.os-panel .os-wv-term:hover { color: #fff; text-decoration-color: #fff; }
.os-wv-tile .os-wv-term { display: block; font-size: 10.5px; color: #94a3b8; }
.os-wv-tile b { display: block; margin-top: 1px; font-size: 14px; font-weight: 700; color: #f1f5f9; white-space: nowrap; }
.os-wv-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.os-wv-bar .os-seg { margin-bottom: 0; }
.os-wv-loading { opacity: .5; transition: opacity .2s ease; }   /* a new span loading: the last one held, dimmed */
.os-wv-lanes > div[hidden], .os-wv-lanes > .os-note[hidden] { display: none; }
.os-wv-lanes { margin-top: 12px; border-radius: 8px; outline: none; touch-action: pan-y; }
.os-wv-lanes:focus-visible { box-shadow: 0 0 0 2px rgba(56, 189, 248, .7); }
.os-wv-lanes[hidden], .os-wv-table[hidden] { display: none; }
/* Under each lane's plot: its legend at the right (the unit is on the axis, the title faded in the plot). */
.os-wv-lane { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 12px; min-height: 14px; margin: 4px 0 12px;
              font-size: 10.5px; color: #94a3b8; }
.os-wv-lane--bare { min-height: 0; margin-top: 0; }   /* a single series: no legend, only the gap */
.os-wv-lane:last-child { margin-bottom: 0; }
.os-wv-lane-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.os-wv-key { display: inline-flex; align-items: center; gap: 5px; }
.os-wv-key-line { width: 12px; height: 2px; border-radius: 1px; }
.os-wv-key-arrow { font-style: normal; font-size: 12px; line-height: 1; }
.os-wv-chart { position: relative; }
.os-wv-chart--height { height: 132px; }
.os-wv-chart--period { height: 92px; }
.os-wv-chart--dir { height: 48px; }   /* the arrows, then the time labels */
.os-wv-table { margin-top: 8px; max-height: 340px; overflow: auto; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); }
/* The panel's scrolling lists (the readings table, the selects' option lists) in the chart palette: a slim rounded
   thumb in the lanes' blue on a faint track. Chrome and Safari take the ::-webkit-scrollbar rules; Firefox, which
   has none, the standard properties (set only there, as Chrome ignores the webkit rules wherever they are set). */
.os-wv-table::-webkit-scrollbar, .os-pick-menu::-webkit-scrollbar { width: 8px; height: 8px; }
.os-wv-table::-webkit-scrollbar-track, .os-pick-menu::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
.os-wv-table::-webkit-scrollbar-thumb, .os-pick-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent; border-radius: 999px; background: rgba(57, 135, 229, .45) padding-box; }
.os-wv-table::-webkit-scrollbar-thumb:hover, .os-pick-menu::-webkit-scrollbar-thumb:hover { background-color: rgba(57, 135, 229, .8); }
.os-wv-table::-webkit-scrollbar-corner, .os-pick-menu::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
    .os-wv-table, .os-pick-menu { scrollbar-width: thin; scrollbar-color: rgba(57, 135, 229, .55) rgba(255, 255, 255, .03); }
}
.os-wv-table table { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.os-wv-table th { position: sticky; top: 0; padding: 6px 6px 5px; background: #111a2e; text-align: right; font-weight: 700; color: #cbd5e1; white-space: nowrap; }
.os-wv-table th small { display: block; font-size: 9.5px; font-weight: 600; color: #64748b; }
.os-wv-table td { padding: 4px 6px; border-top: 1px solid rgba(255, 255, 255, .05); text-align: right; color: #e2e8f0; white-space: nowrap; }
.os-wv-table th:first-child, .os-wv-table td:first-child { text-align: left; color: #94a3b8; }
/* A row scrubs the sea state card: the hovered or stepped-to row lifts in the lanes' blue. Stepping keeps it clear
   of the sticky header. */
.os-wv-table:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(56, 189, 248, .7); }
.os-wv-table tbody tr { scroll-margin-top: 42px; }
.os-wv-table tbody tr.on td { background: rgba(57, 135, 229, .16); color: #f8fafc; }
.os-wv-table tbody tr.on td:first-child { color: #e2e8f0; }
.os-wv-add { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 14px; font-size: 11px; color: #64748b; }
.os-wv-add > span { width: 100%; }
.os-panel .os-wv-addbtn { padding: 2px 9px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; font-size: 11px; color: #cbd5e1; }
.os-panel .os-wv-addbtn:hover { border-color: rgba(56, 189, 248, .6); color: #f8fafc; }

/* A fixed station read at several depths: the shared depth charts, dark, picked by chip. */
.os-panel .bcdp { --bcdp-ink: #e2e8f0; --bcdp-muted: #94a3b8; --bcdp-axis: #94a3b8; --bcdp-grid: rgba(255, 255, 255, .08);
                  --bcdp-shallow: #a5f3fc; --bcdp-deep: #3b82f6; --bcdp-font: Manrope, system-ui, sans-serif; gap: 6px; }
.os-panel .bcdp-controls { display: none; }
.os-panel .bcdp-status:empty { display: none; }
.os-panel .bcdp-title { margin: 4px 0 2px; font-size: 10.5px; }
.os-panel .bcdp-canvas { height: 200px; }
.os-panel .bcdp-canvas--heat { height: 104px; }

.os-list { margin: 8px 0 0; padding: 0; list-style: none; }
.os-list li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); cursor: pointer; }
.os-list li:hover { background: rgba(255, 255, 255, .04); }
.os-list li i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.os-list small { display: block; font-size: 11px; font-weight: 500; color: #94a3b8; }
.os-li-name { overflow-wrap: anywhere; }

/* Phones (app.css's 768px breakpoint): the panel keeps a 12px gutter instead of sitting off-screen. */
@media (max-width: 768px) {
    .os-panel { left: 12px; right: 12px; width: auto; max-width: none; }
}

/* Chart-workspace station picker (picker.js), inside the Add series popover. */
.os-pk { color: #94a3b8; font-size: 12px; }
:where(.os-pk) button { isolation: auto; overflow: visible; line-height: inherit; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.os-pk button:hover { color: inherit; }
.os-pk-search { display: block; box-sizing: border-box; width: calc(100% - 24px); margin: 6px 12px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .35); color: #e2e8f0; font: inherit; }
.os-pk-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 12px 6px; }
.os-pk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); font-size: 11px; }
.os-pk-chip i, .os-pk-stn i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.os-pk-chip.on { border-color: rgba(45, 212, 191, .6); background: rgba(45, 212, 191, .12); color: #e2e8f0; }
.os-pk-recency { padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #94a3b8; font: inherit; font-size: 11px; color-scheme: dark; }
.os-pk-lab { margin: 6px 12px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.os-pk-stn { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 4px 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.os-pk-stn i { width: 9px; height: 9px; }
.os-pk-stn .os-pk-name { color: #e2e8f0; font-weight: 600; }
.os-pk-stn small { display: block; color: #64748b; font-size: 11px; }
.os-pk-stn.on { background: rgba(45, 212, 191, .08); }
.os-pk-fam { padding: 4px 12px 2px 30px; color: #94a3b8; font-weight: 700; border-top: 1px solid rgba(255, 255, 255, .08); }
.os-pk-row { display: flex; width: 100%; box-sizing: border-box; padding: 3px 12px 3px 30px; font-weight: 600; }
.os-pk-row:hover:not([aria-disabled="true"]) { background: rgba(45, 212, 191, .1); }
.os-pk-row[aria-disabled="true"] { opacity: .45; cursor: default; }
.os-pk-val, .os-pk-why { margin-left: auto; padding-left: 8px; color: #e2e8f0; }
.os-pk-why { color: #64748b; font-size: 10.5px; font-weight: 500; }
.os-pk-why:empty { display: none; }
.os-pk-row[data-tooltip] .os-pk-why { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }   /* the row's hover explains it */
.os-pk-row[aria-disabled="true"] .os-pk-val { display: none; }
.os-pk-note { margin: 6px 12px; color: #64748b; }