/* Telemetry chart workspace (telemetry/chart/workspace.js), in the buoy modal's language (buoy_modal.css): the
   modal's mini chart (.bmc) grown to the whole screen. Look only: what it shows and does is workspace.js's. Every
   class is .tcw-prefixed so nothing here touches the v1 chart or the rest of the app.

   - The panel: the panels' glass (app.css --bc-glass-*) at the modal's 18 px corners, lit edge and shadow, floating
     over the dimmed map with a 14 px margin, as the modal's own full-screen chart once did.
   - Its head: the chart in an icon chip; the tabs as the modal's group strip (a dark trough, the tab shown its pick,
     the brand blue ringed), each naming its buoy in Oxanium and its measurement in the quiet meta tone, its series'
     colours as dots; + and close the header's quiet 28 px icon buttons.
   - The commands: the periods and the comparison as the mini chart's segmented control, grown; the tools as troughs
     that take the pick while on, each with a sample of the line it draws; Export a quiet icon trough.
   - The chart on a stage: a reading tile's glass, titled with its range in Oxanium (Back to now beside it) and when it
     was updated at its right; the loading bar on its top edge; previous / next as handles in its side gutters. The
     plot is the mini chart's: quiet Manrope ticks, faint grid, no axis lines, a crosshair and a ringed dot under the
     pointer; the tooltip, menus and popovers the glass lifted (a little lighter, ringed dark, shadowed).
   - The series as reading tiles: each led by its colour as a legend key, tinted faintly by it, its newest value in
     Oxanium, min / max / mean in a small trough. Add series the brand's blue (+ in the player's blue disc).
   - The picker: the Settings menu's look (quiet group heads that fold, rows that light, values in Oxanium).
   Focus shows a 2 px brand-blue ring; motion stops for prefers-reduced-motion. */

/* ── Shared with the buoy modal's Profile tab ──────────────────────────────────────────────────────────────────
   .bcdp--menus (shared/depth-profile.js) borrows the workspace's buttons and menus (.tcw-btn, .tcw-seg, .tcw-menu,
   .tcw-mi), so it shares these variables, the button reset and the focus ring; the workspace's own look of those
   classes is :where(.tcw)-scoped below, and the Profile tab keeps the one it was built on (:where(.bcdp--menus)),
   each at the class's own weight, so depth-profile.css and buoy_modal.css still override as before. */
.tcw, .bcdp--menus {
    --tcw-panel: rgba(255, 255, 255, 0.035);
    --tcw-line: rgba(255, 255, 255, 0.08);
    --tcw-text: #e2e8f0;
    --tcw-dim: #94a3b8;
    --tcw-blue: #60a5fa;
    --tcw-pop-bg: rgba(15, 20, 32, 0.97);
    --tcw-pop-line: rgba(255, 255, 255, 0.12);
}
/* :where keeps the reset at zero specificity, so single-class rules win. */
:where(.tcw, .bcdp--menus) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.tcw, .bcdp--menus) button:disabled { cursor: default; }
/* On hover a button's label lifts to the text colour. The :where keeps this below every per-class hover colour. */
:where(.tcw, .bcdp--menus) button:hover { color: var(--tcw-text); }
.tcw-btn > .text, .tcw-card-add > .text { display: inline-flex; align-items: center; gap: 6px; }
.tcw-pr > .text, .tcw-mi > .text, .tcw-pg-hd > .text { display: flex; align-items: center; flex: 1; min-width: 0; }
.tcw-pr > .text { gap: 9px; }
.tcw-mi > .text { gap: 8px; }
.tcw-pg-hd > .text { justify-content: space-between; gap: 8px; }
.tcw button:focus-visible, .tcw select:focus-visible, .tcw input:focus-visible,
.bcdp--menus button:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; }
/* The Profile tab's own: the buttons, the switch and the menus it was built on. */
:where(.bcdp--menus) .tcw-btn { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--tcw-line); background: var(--tcw-panel); color: var(--tcw-dim); font-weight: 600; white-space: nowrap; }
:where(.bcdp--menus) .tcw-btn:hover { color: var(--tcw-text); }
:where(.bcdp--menus) .tcw-seg { display: inline-flex; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--tcw-line); border-radius: 999px; padding: 3px; gap: 2px; }
:where(.bcdp--menus) .tcw-seg button { padding: 5px 11px; border-radius: 999px; color: var(--tcw-dim); font-weight: 600; white-space: nowrap; }
:where(.bcdp--menus) .tcw-seg button:hover { color: var(--tcw-text); }
:where(.bcdp--menus) .tcw-seg button.on { background: rgba(96, 165, 250, 0.16); color: var(--tcw-blue); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35); }
:where(.bcdp--menus) .tcw-menu { min-width: 220px; padding: 4px 0; background: var(--tcw-pop-bg); border: 1px solid var(--tcw-pop-line); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
:where(.bcdp--menus) .tcw-mi { display: flex; width: 100%; align-items: center; padding: 7px 12px; color: var(--tcw-dim); font-weight: 600; text-align: left; }
:where(.bcdp--menus) .tcw-mi:hover, :where(.bcdp--menus) .tcw-mi.on { background: rgba(96, 165, 250, 0.1); color: var(--tcw-text); }
:where(.bcdp--menus) .tcw-mi-value { margin-left: auto; color: var(--tcw-text); }

/* ── The window: the dimmed map, and the glass panel floating over it ──────────────────────────────────────── */
.tcw {
    /* the plot's own colours: workspace.js reads --tcw-cross and --tcw-ring for what it draws on the canvas (and
       --bc-glass-bottom for a PNG's background) */
    --tcw-cross: rgba(226, 232, 240, 0.42);
    --tcw-ring: var(--bc-glass-top);
    --tcw-ink: #f8fafc;
    --tcw-meta: rgba(203, 213, 225, 0.72);
    --tcw-quiet: rgba(203, 213, 225, 0.62);
    --tcw-trough: rgba(2, 10, 24, 0.5);
    --tcw-hair: rgba(148, 163, 184, 0.12);
    --tcw-pick: rgba(46, 142, 255, 0.22);
    --tcw-pick-ring: rgba(96, 165, 250, 0.5);
    --tcw-primary: radial-gradient(circle at 50% 0%, #5aa8ff, #2e8eff 60%, #1f6fd6);
    --tcw-primary-hover: radial-gradient(circle at 50% 0%, #74b6ff, #4b9dff 60%, #2e8eff);
    position: fixed;
    inset: 0;
    z-index: 2500;                    /* above .modal-overlay (2000) */
    display: flex;
    padding: 14px;
    background: rgba(2, 6, 14, 0.6);
    color: var(--tcw-text);
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 12px;
}
.tcw:focus { outline: none; }         /* the dialog takes focus on opening; its controls show the ring */
/* Every button in it: none of app.css's global button (clipped, isolated, 15 px line); each sets its own. */
:where(.tcw) button { isolation: auto; overflow: visible; line-height: 1.2; text-shadow: none; }
:where(.tcw) button > span:empty { display: none; }   /* the app buttons' empty second span */
.tcw-panel {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    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), 0 18px 44px rgba(0, 8, 22, 0.55);
    animation: tcw-rise 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes tcw-rise { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
.tcw-range, .tcw-card-big, .tcw-card-stats b, .tcw-tip-value, .tcw-tip-title, .tcw-pr-value, .tcw-mi-value, .tcw-cpop-range,
.tcw-tab-buoy, .tcw-cpop-title, .tcw-tpop-title, .tcw-card-delta, .tcw-tip-delta {
    font-family: 'Oxanium', 'Manrope', monospace;
    font-variant-numeric: tabular-nums;
}

/* The quiet icon button (the buoy modal header's): a 28 px square, lighting under the pointer. */
.tcw-newtab, .tcw-close, .tcw-refresh {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: rgba(226, 232, 240, 0.65);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.tcw-newtab:hover, .tcw-close:hover, .tcw-refresh:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.tcw-newtab i, .tcw-close i { font-size: 13px; }
.tcw-refresh i { font-size: 11px; }

/* ── The head: the chip, the tabs as the group strip, + and close ──────────────────────────────────────────── */
.tcw-tabbar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 14px 14px 0 16px; }
.tcw-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    font-size: 14px;
}
/* overflow-x: auto alone computes overflow-y to auto too; the tabs scroll sideways (trackpad / wheel) with no bar. */
.tcw-tablist {
    display: flex;
    gap: 2px;
    min-width: 0;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border-radius: 12px;
    background: var(--tcw-trough);
    box-shadow: inset 0 0 0 1px var(--tcw-hair);
}
.tcw-tablist::-webkit-scrollbar { display: none; }
.tcw-tab {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 5px 0 11px;
    border-radius: 8px;
    color: rgba(226, 232, 240, 0.62);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.tcw-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--tcw-ink); }
.tcw-tab-on, .tcw-tab-on:hover { background: var(--tcw-pick); box-shadow: inset 0 0 0 1px var(--tcw-pick-ring); color: #ffffff; }
.tcw-tab:focus-visible { outline: 2px solid #2e8eff; outline-offset: 1px; }
.tcw-tab-dots { display: flex; gap: 3px; }
.tcw-tab-dots:empty { display: none; }
.tcw-dot { display: block; width: 7px; height: 7px; border-radius: 50%; }
.tcw-tab-buoy { font-size: 13px; font-weight: 700; letter-spacing: 0.2px; }
.tcw-tab-meas { margin-left: -4px; font-size: 12px; font-weight: 600; color: var(--tcw-quiet); }
.tcw-tab-on .tcw-tab-meas { color: rgba(219, 234, 254, 0.78); }
.tcw-tab-meas:empty { display: none; }
.tcw-tab-x {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: rgba(203, 213, 225, 0.45);
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.tcw-tab-x:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.tcw-tab-on .tcw-tab-x { color: rgba(219, 234, 254, 0.7); }
.tcw-close { margin-left: auto; }

/* ── The commands: periods, comparison, and the tools ──────────────────────────────────────────────────────── */
.tcw-main { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }
.tcw-main::-webkit-scrollbar { width: 4px; }
.tcw-main::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }
.tcw-is-empty .tcw-main { display: none; }
.tcw-cmd { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px 12px; }
/* The segmented control: the mini chart's periods (the group strip in small), a size up. */
:where(.tcw) .tcw-seg {
    display: inline-flex;
    gap: 2px;
    height: 34px;
    padding: 3px;
    border-radius: 11px;
    background: var(--tcw-trough);
    box-shadow: inset 0 0 0 1px var(--tcw-hair);
}
:where(.tcw) .tcw-seg button {
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    color: rgba(226, 232, 240, 0.62);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
:where(.tcw) .tcw-seg button:hover { background: rgba(255, 255, 255, 0.06); color: var(--tcw-ink); }
:where(.tcw) .tcw-seg button.on { background: var(--tcw-pick); box-shadow: inset 0 0 0 1px var(--tcw-pick-ring); color: #ffffff; }
:where(.tcw) .tcw-seg button:focus-visible { outline-offset: 1px; }
/* A trough button (the Profile tab's menus): the tools, Export, and what the chart says in place of a reading. */
:where(.tcw) .tcw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 13px;
    border-radius: 11px;
    background: var(--tcw-trough);
    box-shadow: inset 0 0 0 1px var(--tcw-hair);
    color: rgba(226, 232, 240, 0.8);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
:where(.tcw) .tcw-btn:hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45); color: #ffffff; }
:where(.tcw) .tcw-btn.on { background: var(--tcw-pick); box-shadow: inset 0 0 0 1px var(--tcw-pick-ring); color: #ffffff; }
:where(.tcw) .tcw-btn > .text { gap: 8px; }
.tcw-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.tcw-tools [data-tool="export"] { width: 34px; padding: 0; }
.tcw-tools [data-tool="export"] i { font-size: 12px; color: #93c5fd; }
/* Each tool's sample of the line it draws (config.js OVERLAY), the thresholds' dashed. */
.tcw-sw { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.tcw-sw-trend { background: #fb923c; }
.tcw-sw-ma { background: #a78bfa; }
.tcw-sw-thr { background: repeating-linear-gradient(90deg, #ef4444 0 4px, transparent 4px 7px); }

/* ── The stage: the chart on a reading tile's glass, titled by its range ───────────────────────────────────── */
.tcw-stage {
    position: relative;
    flex: 1;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    margin: 0 16px;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px var(--tcw-hair);
}
.tcw-stagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 28px; padding: 13px 12px 0 18px; }
.tcw-rangepill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.tcw-range { font-size: 15px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; color: var(--tcw-ink); }
/* Back to now: a small pill in the brand blue (shown while an earlier window is). */
.tcw-now {
    display: none;
    height: 24px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(46, 142, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45);
    color: #bfdbfe;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 24px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
:where(.tcw) .tcw-now:hover { background: rgba(46, 142, 255, 0.28); color: #ffffff; }
.tcw-fresh { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--tcw-quiet); font-size: 11px; font-weight: 600; white-space: nowrap; }
/* The loading bar: the brand blue, sweeping along the stage's top edge. */
.tcw-progress { position: absolute; left: 16px; right: 16px; top: 0; height: 2px; overflow: hidden; display: none; border-radius: 0 0 2px 2px; }
.tcw-stage:has(.tcw-loading) .tcw-progress { display: block; }
.tcw-progress::after { content: ''; position: absolute; top: 0; bottom: 0; width: 30%; border-radius: 2px; background: linear-gradient(90deg, rgba(46, 142, 255, 0), #5aa8ff, rgba(46, 142, 255, 0)); box-shadow: 0 0 8px rgba(46, 142, 255, 0.55); animation: tcw-slide 1.1s ease-in-out infinite; }
@keyframes tcw-slide { from { left: -30%; } to { left: 100%; } }

/* ── The chart: the plot, its handles either side, and what lies over it ───────────────────────────────────── */
.tcw-chartwrap { position: relative; flex: 1; min-height: 240px; padding: 4px 50px 12px; }
.tcw-canvas { width: 100% !important; height: 100% !important; transition: opacity 0.15s; }
.tcw-loading .tcw-canvas { opacity: 0.45; }
/* Previous / next: slim handles in the stage's gutters, the trough and hairline, ringed blue under the pointer. */
.tcw-edge {
    position: absolute;
    top: calc(50% - 28px);
    width: 30px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--tcw-trough);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    color: rgba(226, 232, 240, 0.72);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.tcw-edge i { font-size: 12px; }
:where(.tcw) .tcw-edge:hover:not(:disabled) { background: rgba(46, 142, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5); color: #ffffff; }
.tcw-edge:disabled { opacity: 0.28; }
.tcw-edge-l { left: 10px; }
.tcw-edge-r { right: 10px; }
/* Reset zoom: a pill at the top of the plot, in its middle (clear of either axis), in the brand blue. */
.tcw-reset-zoom {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: none;
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(46, 142, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5), 0 4px 12px rgba(0, 8, 22, 0.35);
    color: #dbeafe;
    font-size: 11px;
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.2px;
}
.tcw-reset-zoom > .text { display: inline-flex; align-items: center; gap: 6px; }
.tcw-reset-zoom i { font-size: 10px; }
:where(.tcw) .tcw-reset-zoom:hover { background: rgba(46, 142, 255, 0.3); color: #ffffff; }
/* What the plot says in place of a chart: loading, no readings (the chart in an icon chip), or a failure (a warning
   in a red one, over the plot dimmed); its action the brand's blue. */
.tcw-state {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    color: rgba(226, 232, 240, 0.78);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
}
.tcw-state[data-mode] { display: flex; }
.tcw-state[data-mode="empty"]::before,
.tcw-state[data-mode="error"]::before {
    content: "\f201";   /* fa-chart-line */
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    font-family: "Font Awesome 6 Free";
    font-size: 17px;
    font-weight: 900;
}
.tcw-state[data-mode="error"] { background: color-mix(in srgb, var(--bc-glass-top) 72%, transparent); color: #fca5a5; }
.tcw-state[data-mode="error"]::before { content: "\f071"; background: rgba(239, 68, 68, 0.14); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.32); color: #f87171; }   /* fa-triangle-exclamation */
.tcw-state[data-mode="placeholder"] { color: var(--tcw-quiet); }
.tcw-state-text { max-width: 360px; margin: 0; }
.tcw-state-action { pointer-events: auto; }
:where(.tcw) .tcw-btn.tcw-state-action { height: 36px; padding: 0 16px; border-radius: 12px; background: var(--tcw-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(46, 142, 255, 0.3); color: #ffffff; font-size: 13px; }
:where(.tcw) .tcw-btn.tcw-state-action:hover { background: var(--tcw-primary-hover); }
/* The tooltip: the glass lifted, its time in Oxanium over a hairline, a row per line (its sample, name, value). */
.tcw-tip {
    position: absolute;
    top: 12px;
    z-index: 3;
    display: none;
    min-width: 230px;
    max-width: 360px;
    padding: 10px 12px 9px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)), var(--bc-glass-bg);
    box-shadow: var(--bc-glass-edge), inset 0 0 0 1px rgba(148, 163, 184, 0.16), 0 0 0 1px rgba(2, 6, 16, 0.5), 0 14px 34px rgba(0, 8, 22, 0.6);
    font-size: 11.5px;
    pointer-events: none;
}
.tcw-tip-title { margin-bottom: 6px; padding-bottom: 7px; border-bottom: 1px solid rgba(148, 163, 184, 0.14); font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: var(--tcw-ink); }
.tcw-tip-row { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.tcw-tip-sw { flex-shrink: 0; width: 14px; height: 0; border-top: 2px solid; border-radius: 1px; }
.tcw-tip-label { min-width: 0; font-weight: 600; color: rgba(203, 213, 225, 0.8); }
.tcw-tip-compare .tcw-tip-label { color: var(--tcw-quiet); }
.tcw-tip-compare .tcw-tip-sw { border-top-style: dashed; opacity: 0.75; }
.tcw-tip-trend .tcw-tip-label, .tcw-tip-ma .tcw-tip-label { color: var(--tcw-quiet); }
.tcw-tip-value { margin-left: auto; padding-left: 10px; font-size: 12.5px; font-weight: 700; color: var(--tcw-ink); white-space: nowrap; }
.tcw-tip-delta { font-size: 11px; font-weight: 700; color: #fbbf24; white-space: nowrap; }
.tcw-tip-delta:empty { display: none; }
.tcw-tip-row.tcw-down .tcw-tip-delta { color: #38bdf8; }

/* ── The series: reading tiles, each led by its colour ─────────────────────────────────────────────────────── */
.tcw-cards { flex-shrink: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; padding: 12px 16px 16px; }
.tcw-card {
    position: relative;
    min-width: 0;
    padding: 11px 10px 12px 14px;
    border-radius: 14px;
    /* its colour, faint, from the corner its key sits in, over a reading tile's glass */
    background:
        radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--c, #2e8eff) 13%, transparent), transparent 62%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px var(--tcw-hair);
    text-align: left;
    transition: opacity 0.15s ease;
}
.tcw-card-hd { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 24px; color: #e2e8f0; font-size: 12.5px; font-weight: 700; }
/* The legend key, leading the name: a short line in the series' colour (dashed for a station's, as its line is). */
.tcw-card-hd::before { content: ''; flex: none; width: 14px; height: 3px; margin-right: 2px; border-radius: 2px; background: var(--c, #2e8eff); }
/* One line: a long name, then its buoy or station, cut short with an ellipsis (the buoy first). */
.tcw-card-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcw-card-buoy { flex: 0 1000 auto; min-width: 0; font-size: 12px; font-weight: 600; color: var(--tcw-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcw-card-buoy:empty { display: none; }
/* A CMEMS station series (ocean_stations module): dashed like its line, with a teal tag, so it never reads as the
   client's own buoy. */
.tcw-card-station .tcw-card-hd::before { background: repeating-linear-gradient(90deg, var(--c, #2e8eff) 0 4px, transparent 4px 7px); }
.tcw-card-tag { flex: none; padding: 2px 7px 3px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; color: #2dd4bf; background: rgba(45, 212, 191, 0.12); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.4); }
.tcw-card-ctrls { flex: none; margin-left: auto; display: flex; gap: 2px; }
.tcw-card-ctrls button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: rgba(203, 213, 225, 0.5);
    font-size: 11px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.tcw-card-ctrls button:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.tcw-card-big { display: flex; align-items: baseline; margin: 6px 0 0; font-size: 24px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.15; color: var(--tcw-ink); }
.tcw-card-unit { margin-left: 4px; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0; color: rgba(148, 163, 184, 0.9); }
/* Zoomed in: the stats are the zoomed range's, said at the value's right. */
.tcw-card-zoomed .tcw-card-big::after { content: 'zoomed range'; align-self: center; margin-left: auto; padding: 2px 8px 3px; border-radius: 999px; font-family: 'Manrope', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; color: #bfdbfe; background: rgba(46, 142, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4); }
/* min / max / mean: three cells in a small trough, each its name over its value. */
.tcw-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; border-radius: 10px; background: rgba(2, 10, 24, 0.4); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.1); }
.tcw-card-stats > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 10px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.3; color: rgba(148, 163, 184, 0.85); }
.tcw-card-stats > span + span { box-shadow: -1px 0 0 rgba(148, 163, 184, 0.1); }
.tcw-card-stats b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: 0.2px; color: rgba(241, 245, 249, 0.92); }
.tcw-card-cmp { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--tcw-quiet); }
.tcw-card-delta { margin-left: 5px; font-weight: 700; color: #fbbf24; }
.tcw-card-cmp.tcw-down .tcw-card-delta { color: #38bdf8; }
.tcw-card-err { display: none; margin-top: 8px; color: #fca5a5; font-size: 11px; font-weight: 600; }
.tcw-card-failed .tcw-card-err { display: block; }
:where(.tcw) .tcw-card-retry { margin-left: 4px; color: #93c5fd; font-weight: 700; }
:where(.tcw) .tcw-card-retry:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.tcw-card-hidden { opacity: 0.45; }
.tcw-card-hidden .tcw-card-eye i::before { content: '\f070'; }   /* fa-eye-slash */
/* Add series: the brand's blue, dashed, + in the player's blue disc. */
.tcw-card-add { display: flex; align-items: center; justify-content: center; min-height: 112px; border: 1px dashed; border-color: rgba(96, 165, 250, 0.5); background: rgba(96, 165, 250, 0.12); box-shadow: none; color: #dbeafe; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; transition: background-color 0.15s ease, border-color 0.15s ease; }
.tcw-card-add:hover { background: rgba(96, 165, 250, 0.2); border-color: rgba(147, 197, 253, 0.75); color: #ffffff; }
.tcw-card-add > .text { flex-direction: column; gap: 9px; }
.tcw-card-add i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tcw-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 14px rgba(46, 142, 255, 0.35); color: #ffffff; font-size: 12px; }

/* ── The series picker: in an empty tab, and as Add series' popover ────────────────────────────────────────── */
/* In an empty tab it stands in the panel's middle, lit faintly from behind in the brand blue. */
.tcw-pickerhost { display: none; flex: 1; align-items: flex-start; justify-content: center; padding: 9vh 16px 24px; overflow: auto; background: radial-gradient(640px 360px at 50% calc(9vh + 120px), rgba(46, 142, 255, 0.09), rgba(46, 142, 255, 0) 70%); }
.tcw-is-empty .tcw-pickerhost { display: flex; }
.tcw-picker { width: min(380px, 100%); padding: 6px; }
.tcw-pickerhost .tcw-picker { width: min(420px, 100%); border-radius: 16px; }
.tcw-picker [hidden] { display: none; }
/* Buoys / Ocean stations: the group strip across the top. */
.tcw-picker-switch { display: flex; gap: 2px; height: 34px; margin-bottom: 6px; padding: 3px; border-radius: 11px; background: var(--tcw-trough); box-shadow: inset 0 0 0 1px var(--tcw-hair); }
.tcw-picker-switch button { flex: 1; padding: 0 12px; border-radius: 8px; color: rgba(226, 232, 240, 0.62); font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.tcw-picker-switch button:hover { background: rgba(255, 255, 255, 0.06); color: var(--tcw-ink); }
.tcw-picker-switch button.on { background: var(--tcw-pick); box-shadow: inset 0 0 0 1px var(--tcw-pick-ring); color: #ffffff; }
.tcw-picker-switch button > .text { display: block; }
/* From: the buoy, in a trough menu drawing its own chevron. */
.tcw-picker-from { display: flex; align-items: center; gap: 10px; margin: 2px 4px 6px 6px; color: var(--tcw-meta); font-size: 12px; font-weight: 600; }
.tcw-picker-buoy {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 32px 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--tcw-trough) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    box-shadow: inset 0 0 0 1px var(--tcw-hair);
    color: var(--tcw-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    color-scheme: dark;
    transition: box-shadow 0.15s ease;
}
.tcw-picker-buoy:hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45); }
.tcw-picker-buoy option { background: #171411; color: #e2e8f0; }
/* The groups: a list scrolling on its own, each under a quiet head that folds it (an open one's × closes it). */
.tcw-picker-groups, .tcw-picker-stations { max-height: 50vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; color-scheme: dark; }
.tcw-picker-groups::-webkit-scrollbar, .tcw-picker-stations::-webkit-scrollbar { width: 4px; }
.tcw-picker-groups::-webkit-scrollbar-thumb, .tcw-picker-stations::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }
.tcw-picker-stations[data-note] { padding: 12px 10px; color: var(--tcw-quiet); font-weight: 600; }
.tcw-pg + .tcw-pg { margin-top: 2px; padding-top: 2px; box-shadow: 0 -1px 0 rgba(148, 163, 184, 0.1); }
.tcw-pg-hd {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 9px 8px 8px 10px;
    border-radius: 8px;
    color: rgba(148, 163, 184, 0.9);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}
:where(.tcw) .tcw-pg-hd:hover { background: rgba(255, 255, 255, 0.04); color: var(--tcw-ink); }
.tcw-pg-open .tcw-pg-hd { color: #93c5fd; }
.tcw-pg-chev { font-size: 9px; color: rgba(148, 163, 184, 0.6); transform: rotate(-90deg); }
.tcw-pg-x { display: none; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: rgba(203, 213, 225, 0.55); font-size: 10px; transition: background-color 0.15s ease, color 0.15s ease; }
.tcw-pg-x:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.tcw-pg-open .tcw-pg-chev { display: none; }
.tcw-pg-open .tcw-pg-x { display: grid; }
.tcw-pg-rows { display: none; padding: 0 0 4px; }
.tcw-pg-open .tcw-pg-rows { display: block; }
.tcw-pr {
    display: flex;
    width: 100%;
    align-items: center;
    min-height: 32px;
    margin: 1px 0;
    padding: 6px 10px 6px 14px;
    border-radius: 8px;
    color: rgba(226, 232, 240, 0.78);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}
:where(.tcw) .tcw-pr:hover:not([aria-disabled="true"]) { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.tcw-pr[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.tcw-pr-name { min-width: 0; }
.tcw-pr-value { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--tcw-ink); white-space: nowrap; }
/* Why it can't join (✓ on chart, Axes full, 4 series max): a quiet pill at the right. */
.tcw-pr-why { margin-left: auto; padding: 2px 8px 3px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); color: rgba(226, 232, 240, 0.78); font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; }
.tcw-pr-why:empty { display: none; }
.tcw-pr[data-tooltip] .tcw-pr-why { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }   /* the row's hover (or a click) explains it */
.tcw-pr[aria-disabled="true"] .tcw-pr-value { display: none; }
.tcw-picker-foot { margin-top: 4px; padding: 9px 8px 4px; border-top: 1px solid rgba(148, 163, 184, 0.12); color: var(--tcw-quiet); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The Ocean stations side (ocean_stations/picker.js): its search a trough field, its sizes the picker's. */
.tcw-picker .os-pk-search { width: calc(100% - 8px); height: 34px; margin: 2px 4px 8px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--tcw-trough); box-shadow: inset 0 0 0 1px var(--tcw-hair); font-size: 12.5px; font-weight: 600; }
.tcw-picker .os-pk-search:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5), 0 0 0 3px rgba(46, 142, 255, 0.18); }
.tcw-picker .os-pk-lab { margin: 8px 8px 4px; font-size: 10.5px; letter-spacing: 0.3px; text-transform: none; color: rgba(148, 163, 184, 0.9); }
.tcw-picker .os-pk-chips { margin: 0 4px 6px; }
.tcw-picker .os-pk-stn { padding: 6px 8px; border-top-color: rgba(148, 163, 184, 0.1); }
.tcw-picker .os-pk-chip, .tcw-picker .os-pk-recency { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--tcw-trough); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16); color: rgba(226, 232, 240, 0.8); font-weight: 700; }
.tcw-picker .os-pk-chip:hover, .tcw-picker .os-pk-recency:hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45); color: #ffffff; }
.tcw-picker .os-pk-chip.on { background: rgba(45, 212, 191, 0.12); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.5); color: #e2e8f0; }   /* the stations' teal, as their tag */

/* ── Popovers: the menus, the comparison's date, a threshold ───────────────────────────────────────────────── */
.tcw-pop { position: absolute; z-index: 5; display: none; }
/* The glass lifted: a little lighter than the panel, ringed dark to part it, and shadowed; it rises into place. */
.tcw-pop > *, .tcw-pickerhost .tcw-picker {
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)), var(--bc-glass-bg);
    box-shadow: var(--bc-glass-edge), inset 0 0 0 1px rgba(148, 163, 184, 0.16), 0 0 0 1px rgba(2, 6, 16, 0.5), 0 18px 44px rgba(0, 8, 22, 0.6), 0 3px 10px rgba(0, 0, 0, 0.35);
    animation: tcw-pop-in 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes tcw-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.985); } }
:where(.tcw) .tcw-menu { min-width: 220px; padding: 4px; }
.tcw-mi-title { padding: 8px 10px 4px; color: rgba(148, 163, 184, 0.85); font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; }
:where(.tcw) .tcw-mi {
    display: flex;
    width: 100%;
    align-items: center;
    min-height: 32px;
    padding: 7px 10px;
    border-radius: 8px;
    color: rgba(226, 232, 240, 0.85);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
:where(.tcw) .tcw-mi:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
:where(.tcw) .tcw-mi.on { background: var(--tcw-pick); box-shadow: inset 0 0 0 1px var(--tcw-pick-ring); color: #ffffff; }
.tcw .tcw-mi:focus-visible { outline-offset: -2px; }   /* inside the menu */
.tcw-mi-value { margin-left: auto; padding-left: 14px; color: rgba(241, 245, 249, 0.9); font-size: 12.5px; font-weight: 700; }
:where(.tcw) .tcw-mi-danger { color: #fca5a5; }
:where(.tcw) .tcw-mi-danger:hover { background: rgba(239, 68, 68, 0.14); color: #fecaca; }
.tcw-mi-sep { height: 1px; margin: 4px 6px; background: rgba(148, 163, 184, 0.12); }
.tcw-cpop, .tcw-tpop { width: 304px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
/* The title: Oxanium, as the panels' (Compare with the week starting, Thresholds · Temperature (°C)). */
.tcw-cpop-title, .tcw-tpop-title { font-size: 14px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.3; color: var(--tcw-ink); }
.tcw-cpop input, .tcw-tpop input {
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--tcw-trough);
    box-shadow: inset 0 0 0 1px var(--tcw-hair);
    color: var(--tcw-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color-scheme: dark;
    transition: box-shadow 0.15s ease;
}
.tcw-cpop input:hover, .tcw-tpop input:hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4); }
.tcw .tcw-cpop input:focus, .tcw .tcw-tpop input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.55), 0 0 0 3px rgba(46, 142, 255, 0.18); }
.tcw-cpop input::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }
.tcw-tpop input { width: 150px; -moz-appearance: textfield; appearance: textfield; }
.tcw-tpop input::-webkit-inner-spin-button, .tcw-tpop input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tcw-tpop label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: #e2e8f0; font-size: 12.5px; font-weight: 600; }
.tcw-cpop-range { margin-top: -2px; color: var(--tcw-meta); font-size: 12px; font-weight: 600; }
.tcw-cpop-range:empty { display: none; }
/* Quick picks (1 week ago, 1 year ago): small trough pills. */
.tcw-cpop-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.tcw-chip { height: 26px; padding: 0 10px; border-radius: 999px; background: var(--tcw-trough); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16); color: rgba(226, 232, 240, 0.8); font-size: 11px; font-weight: 700; transition: box-shadow 0.15s ease, color 0.15s ease; }
:where(.tcw) .tcw-chip:hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5); color: #ffffff; }
/* Cancel a quiet trough, Clear red as it is hovered, the one that does it (Compare, Save) the brand's blue. */
.tcw-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.12); }
.tcw-pop-actions button { height: 32px; padding: 0 14px; border-radius: 10px; background: var(--tcw-trough); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16); color: #e2e8f0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; }
:where(.tcw) .tcw-pop-actions button:hover { box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45); color: #ffffff; }
.tcw-pop-actions .tcw-pop-clear { margin-right: auto; background: transparent; box-shadow: none; color: rgba(252, 165, 165, 0.85); }
:where(.tcw) .tcw-pop-actions .tcw-pop-clear:hover { background: rgba(239, 68, 68, 0.14); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45); color: #fecaca; }
.tcw-pop-actions .tcw-pop-ok { background: var(--tcw-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 14px rgba(46, 142, 255, 0.26); color: #ffffff; }
:where(.tcw) .tcw-pop-actions .tcw-pop-ok:hover { background: var(--tcw-primary-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 6px 18px rgba(46, 142, 255, 0.36); }

/* ── Narrow screens: the panel closer to the edges, the commands stacked, the handles over the plot ───────── */
@media (max-width: 700px) {
    .tcw { padding: 6px; }
    .tcw-panel { border-radius: 14px; }
    .tcw-tabbar { gap: 6px; padding: 10px 8px 0 10px; }
    .tcw-mark { display: none; }
    .tcw-cmd { gap: 8px; padding: 10px 10px 10px; }
    .tcw-cmd > .tcw-seg { display: flex; width: 100%; }
    .tcw-cmd > .tcw-seg button { flex: 1 1 0; min-width: 0; padding: 0 6px; }
    /* the comparison's long names wrap in their thirds */
    .tcw-compare { height: auto; min-height: 34px; }
    .tcw-compare button { padding: 5px 6px; white-space: normal; line-height: 1.2; }
    .tcw-tools { width: 100%; margin-left: 0; }
    .tcw-stage { margin: 0 10px; min-height: 300px; }
    .tcw-stagehead { padding: 11px 8px 0 12px; }
    .tcw-range { font-size: 13px; }
    .tcw-chartwrap { padding: 8px 6px 10px; min-height: 230px; }
    .tcw-progress { left: 10px; right: 10px; }
    /* previous / next leave the plot to its readings: a pair at the left of the line saying when it was updated */
    .tcw-fresh { flex: 1 0 100%; justify-content: flex-end; min-height: 28px; }
    .tcw-edge { top: -28px; width: 28px; height: 28px; border-radius: 8px; }
    .tcw-edge-l { left: 12px; }
    .tcw-edge-r { left: 44px; right: auto; }
    .tcw-cards { grid-template-columns: 1fr; padding: 10px 10px 12px; }
    .tcw-card-add { min-height: 64px; }
    .tcw-card-add > .text { flex-direction: row; gap: 10px; }
    .tcw-pickerhost { padding: 16px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .tcw-panel, .tcw-pop > *, .tcw-pickerhost .tcw-picker { animation: none; }
    .tcw-progress::after { animation: none; left: 0; width: 100%; opacity: 0.5; }
    .tcw-newtab, .tcw-close, .tcw-refresh, .tcw-tab, .tcw-tab-x, .tcw .tcw-seg button, .tcw .tcw-btn, .tcw-now, .tcw-edge, .tcw-card,
    .tcw-card-ctrls button, .tcw-card-add, .tcw-picker-switch button, .tcw-picker-buoy, .tcw-pg-hd, .tcw-pg-x, .tcw-pr, .tcw .tcw-mi,
    .tcw-cpop input, .tcw-tpop input, .tcw-chip, .tcw-pop-actions button, .tcw-canvas { transition: none; }
}