/* ========================================================================== MCRUSH PE · hydraulics cockpit top bar Loads AFTER premium.css and cockpit-navigation.css and overrides them for #hydroTopbar only. Nothing outside the bar is styled here. Contract - bar height stays 52px (6px vertical padding + 40px content box; controls are 36px and centred), at every width. - one radius (2px, the app's control architecture from premium.css), one type scale (12.5px/600 control text, 10px/700 uppercase labels), one control family: 1px var(--line) border on var(--bg), hover/active/focus states shared by every button and field. - theme-safe: only --ink / --muted / --line / --bg / --card / --blue / --green / --amber / --red / --shadow tokens, so all nine data-theme palettes work. - collapse steps (what folds where) are in section 5; the Analyze tools row beneath the bar (icon scale + dock launcher) is section 6. ========================================================================== */ html body #hydroTopbar.hydro-topbar{ --ht-h:36px; --ht-r:2px; --ht-fs:12.5px; --ht-fs-l:10px; --ht-ic:16px; --ht-caret:12px; --ht-fill:var(--bg); --ht-line:var(--line); --ht-line-hover:color-mix(in srgb,var(--blue) 45%,var(--line)); --ht-fill-hover:color-mix(in srgb,var(--blue) 6%,var(--bg)); --ht-fill-active:color-mix(in srgb,var(--blue) 12%,var(--bg)); --ht-focus:color-mix(in srgb,var(--blue) 78%,#fff); gap:8px!important; padding:6px 12px!important; font-size:var(--ht-fs); line-height:1; } /* Every visible top-level child is a 36px control or a group of them: identical vertical geometry, so the row reads as one line. */ html body #hydroTopbar.hydro-topbar>*{align-self:center} html body #hydroTopbar>.ht-crumb,html body #hydroTopbar>.ht-ctx,html body #hydroTopbar>.ht-proj-wrap,html body #hydroTopbar>.ht-actions{height:auto!important; min-height:0!important; max-height:none!important; padding:0!important} /* ---- The control family ------------------------------------------------- */ html body #hydroTopbar .ht-exit, html body #hydroTopbar .ht-field, html body #hydroTopbar .ht-proj, html body #hydroTopbar .ht-menu, html body #hydroTopbar .ht-viewmenu>summary, html body #hydroTopbar #hwOpenFullWell{ box-sizing:border-box!important; height:var(--ht-h)!important; min-height:var(--ht-h)!important; max-height:var(--ht-h)!important; border:1px solid var(--ht-line)!important; border-radius:var(--ht-r)!important; background:var(--ht-fill)!important; color:var(--ink)!important; font-family:inherit!important; font-size:var(--ht-fs)!important; font-weight:600!important; line-height:1!important; letter-spacing:-.005em; box-shadow:none!important; text-shadow:none; cursor:pointer; margin:0!important; } html body #hydroTopbar .ht-exit:hover, html body #hydroTopbar .ht-proj:hover, html body #hydroTopbar .ht-menu:hover, html body #hydroTopbar .ht-viewmenu>summary:hover, html body #hydroTopbar .ht-viewmenu[open]>summary{ border-color:var(--ht-line-hover)!important; background:var(--ht-fill-hover)!important; color:var(--ink)!important; } html body #hydroTopbar .ht-exit:active, html body #hydroTopbar .ht-proj:active, html body #hydroTopbar .ht-menu:active, html body #hydroTopbar .ht-viewmenu>summary:active{background:var(--ht-fill-active)!important} /* Keyboard focus: the app's own ring (2px accent, 2px offset). Mouse clicks do not show it. */ html body #hydroTopbar .ht-exit:focus-visible, html body #hydroTopbar .ht-proj:focus-visible, html body #hydroTopbar .ht-menu:focus-visible, html body #hydroTopbar .ht-viewmenu>summary:focus-visible, html body #hydroTopbar #hwOpenFullWell:focus-visible, html body #hydroTopbar .ht-vm-item:focus-visible, html body #hydroTopbar .ht-vm-b:focus-visible, html body #hydroTopbar .hw-recalc-banner:focus-visible{outline:2px solid var(--ht-focus)!important; outline-offset:2px!important} html body #hydroTopbar .ht-exit:focus:not(:focus-visible), html body #hydroTopbar .ht-proj:focus:not(:focus-visible), html body #hydroTopbar .ht-menu:focus:not(:focus-visible), html body #hydroTopbar .ht-viewmenu>summary:focus:not(:focus-visible){outline:none!important} html body #hydroTopbar .ico,html body #hydroTopbar svg.ico{width:var(--ht-ic)!important; height:var(--ht-ic)!important; flex:none} /* 16px glyphs; disclosure carets are 12px (below) */ /* ---- 1. Exit crumb ‹ Well Library --------------------------------------- */ html body #hydroTopbar>.ht-crumb{flex:0 0 auto!important; max-width:none!important; gap:0!important} html body #hydroTopbar .ht-exit{display:inline-flex!important; align-items:center; gap:5px; padding:0 11px 0 7px!important; width:auto!important; min-width:var(--ht-h)!important; white-space:nowrap; justify-content:center} html body #hydroTopbar .ht-exit .ico{color:var(--muted)} html body #hydroTopbar .ht-exit:hover .ico{color:var(--ink)} /* ---- 2 + 3. The nameplate ------------------------------------------------ One centred field: ● well › SECTION [value] › SCENARIO [value] › ● READINESS 97 Exit leads, actions trail, the slack splits evenly on both sides of the nameplate. Inside the field every segment is 34px on a 36px bordered box; the two selects are transparent and fill their segment (no inner box). */ html body #hydroTopbar>.ht-proj-wrap{display:none!important} html body #hydroTopbar>.ht-ctx{order:2!important; flex:0 1 auto!important; min-width:0!important; gap:8px!important; justify-content:center!important; align-items:center!important} /* True centring: the leading and trailing groups share the slack equally, so the nameplate sits on the bar's centre line whatever the two groups weigh. */ @media (min-width:701px){ html body #hydroTopbar>.ht-crumb{flex:1 1 0!important; min-width:max-content!important; justify-content:flex-start!important} html body #hydroTopbar>.ht-actions{flex:1 1 0!important; min-width:max-content!important; justify-content:flex-end!important} } /* In the bar the group is invisible chrome. (The phone sheet styling of .ht-ctx applies only once hydroPhoneContextToggle() portals it to .) */ html body #hydroTopbar>.ht-ctx{border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; padding:0!important; margin:0!important; width:auto!important; animation:none!important} html body #hydroTopbar .ht-field{display:inline-flex; align-items:stretch; flex:0 1 auto; min-width:0; max-width:min(980px,100%); height:var(--ht-h); box-sizing:border-box; border:1px solid var(--ht-line); border-radius:var(--ht-r); background:var(--ht-fill); overflow:hidden} html body #hydroTopbar .ht-field:hover{border-color:var(--ht-line-hover)} html body #hydroTopbar .ht-field>*{box-sizing:border-box!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important} html body #hydroTopbar .ht-field>*+*{border-left:1px solid var(--ht-line)!important} html body #hydroTopbar .ht-field>.ht-proj:hover,html body #hydroTopbar .ht-field>.ht-ready:hover,html body #hydroTopbar .ht-field>.ht-pill:hover{background:var(--ht-fill-hover)!important} html body #hydroTopbar .ht-field>.ht-proj:active,html body #hydroTopbar .ht-field>.ht-ready:active{background:var(--ht-fill-active)!important} html body #hydroTopbar .ht-field>.ht-proj:focus-visible,html body #hydroTopbar .ht-field>.ht-ready:focus-visible{outline:2px solid var(--ht-focus)!important; outline-offset:-3px!important} /* well segment */ html body #hydroTopbar .ht-field>.ht-proj{display:inline-flex!important; align-items:center; gap:7px; flex:0 0 auto!important; width:auto!important; min-width:0!important; max-width:260px!important; padding:0 9px 0 10px!important; white-space:nowrap; cursor:pointer; color:var(--ink)!important; font-family:inherit!important; font-size:var(--ht-fs)!important; font-weight:600!important; line-height:1!important} html body #hydroTopbar .ht-proj-dot{width:7px!important; height:7px!important; border-radius:50%; flex:none; background:var(--muted)} html body #hydroTopbar .ht-proj-dot.ok,html body #hydroTopbar .ht-ready.ok .ht-ready-dot{background:var(--green)!important} html body #hydroTopbar .ht-proj-dot.warn,html body #hydroTopbar .ht-proj-dot.inc,html body #hydroTopbar .ht-ready.warn .ht-ready-dot,html body #hydroTopbar .ht-ready.inc .ht-ready-dot{background:var(--amber)!important} html body #hydroTopbar .ht-proj-dot.bad,html body #hydroTopbar .ht-ready.bad .ht-ready-dot{background:var(--red)!important} html body #hydroTopbar .ht-proj-n{display:block!important; font:inherit!important; font-weight:700!important; color:var(--ink)!important; max-width:160px!important; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.005em} html body #hydroTopbar .ht-proj-ct{width:var(--ht-caret)!important; height:var(--ht-caret)!important; color:var(--muted)!important; opacity:1!important; flex:none} /* section / scenario segments */ html body #hydroTopbar .ht-field>.ht-pill{position:relative!important; display:inline-flex!important; align-items:center!important; flex:0 1 auto!important; width:auto!important; min-width:0!important; padding:0 26px 0 10px!important; gap:8px!important; overflow:hidden!important; cursor:pointer; font-family:inherit!important; font-size:var(--ht-fs)!important; line-height:1!important; color:var(--ink)!important} html body #hydroTopbar .ht-field>.ht-pill:nth-of-type(1){min-width:150px!important; max-width:520px!important} html body #hydroTopbar .ht-field>.ht-pill:nth-of-type(2){min-width:110px!important; max-width:360px!important} html body #hydroTopbar .ht-field>.ht-pill:focus-within{background:var(--ht-fill-hover)!important; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--blue) 45%,transparent)!important} html body #hydroTopbar .ht-ctx .ht-pill-l{ flex:none; font-family:inherit; font-size:var(--ht-fs-l)!important; font-weight:700!important; letter-spacing:.08em!important; text-transform:uppercase!important; color:var(--muted)!important; line-height:1; white-space:nowrap; padding-top:1px; /* optical: caps sit high */ } html body #hydroTopbar .ht-ctx select.ht-dd{ appearance:none!important; -webkit-appearance:none!important; flex:1 1 auto!important; width:auto!important; min-width:0!important; max-width:100%!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; outline:none!important; font-family:inherit!important; font-size:13px!important; font-weight:600!important; line-height:34px!important; letter-spacing:-.005em; color:var(--ink)!important; text-align:left!important; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; cursor:pointer; } html body #hydroTopbar .ht-ctx select.ht-dd option{background:var(--card); color:var(--ink); font-weight:500} /* one 12px disclosure chevron per select, drawn in the current muted colour so it is right in every theme */ html body #hydroTopbar .ht-field>.ht-pill::after{ content:""; position:absolute; right:9px; top:50%; width:12px; height:12px; margin-top:-6px; pointer-events:none; background:var(--muted); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; } html body #hydroTopbar .ht-field>.ht-pill:hover::after,html body #hydroTopbar .ht-field>.ht-pill:focus-within::after{background:var(--ink)} /* readiness segment: ● READINESS 97 (state colour on the dot) */ html body #hydroTopbar .ht-field>.ht-ready{display:inline-flex!important; flex-direction:row!important; align-items:center!important; gap:7px; flex:0 0 auto!important; width:auto!important; min-width:0!important; padding:0 10px!important; cursor:pointer; color:var(--ink)!important; font-family:inherit!important; font-size:var(--ht-fs)!important; font-weight:700!important; line-height:1!important; white-space:nowrap; overflow:visible!important} html body #hydroTopbar .ht-field>.ht-ready b{font:inherit!important; font-weight:700!important; color:var(--ink)!important; font-variant-numeric:tabular-nums} html body #hydroTopbar .ht-ready-dot{width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none} /* window-state chip (non-Analyze views only; hydroTopbarWinChip renders nothing in charts) */ html body #hydroTopbar .ht-win{display:inline-flex; flex:0 0 auto; align-items:center; height:var(--ht-h); min-width:0} html body #hydroTopbar .ht-win:empty{display:none} html body #hydroTopbar .ht-win-chip{display:inline-flex; align-items:center; gap:7px; height:var(--ht-h); box-sizing:border-box; padding:0 11px 0 10px; border:1px solid var(--ht-line); border-radius:var(--ht-r); background:var(--ht-fill); color:var(--ink); font-family:inherit; font-size:var(--ht-fs); font-weight:600; line-height:1; white-space:nowrap; margin:0} html body #hydroTopbar .ht-win-chip b{font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase} html body #hydroTopbar .ht-win-chip em{font-style:normal; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums} html body #hydroTopbar .ht-win-chip small{font-size:inherit; font-weight:600; color:var(--ink); margin-left:-3px} html body #hydroTopbar .ht-win-dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none} html body #hydroTopbar .ht-win-chip.ok{color:var(--green)} html body #hydroTopbar .ht-win-chip.warn,html body #hydroTopbar .ht-win-chip.stale{color:var(--amber)} html body #hydroTopbar .ht-win-chip.bad{color:var(--red)} html body #hydroTopbar .ht-win-chip.unknown{color:var(--muted)} html body #hydroTopbar .ht-win-chip.busy{color:var(--blue)} html body #hydroTopbar .ht-win-chip.stale{cursor:pointer} html body #hydroTopbar .ht-win-chip.stale:hover{border-color:color-mix(in srgb,var(--amber) 55%,var(--line)); background:color-mix(in srgb,var(--amber) 8%,var(--bg))} html body #hydroTopbar .ht-win-chip:focus-visible{outline:2px solid var(--ht-focus); outline-offset:2px} /* ---- 4. Actions (right-aligned group) ----------------------------------- */ html body #hydroTopbar>.ht-actions{order:3!important; margin-left:auto!important; gap:6px!important} /* "Open full well": a secondary, outlined action in the app accent — the canvas stays the loudest thing on screen. */ html body #hydroTopbar #hwOpenFullWell.btn, html body #hydroTopbar #hwOpenFullWell{ padding:0 12px!important; white-space:nowrap; color:var(--blue)!important; border-color:color-mix(in srgb,var(--blue) 45%,var(--line))!important; background:color-mix(in srgb,var(--blue) 7%,var(--bg))!important; background-image:none!important; transform:none!important; text-transform:none; } html body #hydroTopbar #hwOpenFullWell:hover{color:var(--blue)!important; border-color:color-mix(in srgb,var(--blue) 70%,var(--line))!important; background:color-mix(in srgb,var(--blue) 13%,var(--bg))!important; transform:none!important; box-shadow:none!important} html body #hydroTopbar #hwOpenFullWell:active{background:color-mix(in srgb,var(--blue) 20%,var(--bg))!important} /* Tools ⌄ : a menu button, not a paragraph. */ html body #hydroTopbar .ht-viewmenu{display:inline-flex!important; align-items:center; height:var(--ht-h)!important; min-height:var(--ht-h)!important; max-height:var(--ht-h)!important; width:auto!important; padding:0!important; margin:0!important} html body #hydroTopbar .ht-viewmenu>summary{display:inline-flex!important; align-items:center; justify-content:center; gap:4px; width:auto!important; min-width:var(--ht-h)!important; padding:0 8px 0 11px!important; white-space:nowrap; list-style:none; user-select:none; -webkit-user-select:none} html body #hydroTopbar .ht-viewmenu>summary::-webkit-details-marker{display:none} html body #hydroTopbar .ht-viewmenu>summary::marker{content:""} html body #hydroTopbar .ht-viewmenu>summary .ico{width:var(--ht-caret)!important; height:var(--ht-caret)!important; color:var(--muted)} html body #hydroTopbar .ht-viewmenu[open]>summary .ico,html body #hydroTopbar .ht-viewmenu>summary:hover .ico{color:var(--ink)} /* the menu itself: same tokens, one step larger radius */ html body #hydroTopbar .ht-viewmenu-pop{ top:calc(100% + 6px)!important; border:1px solid var(--line)!important; border-radius:4px!important; background:var(--card)!important; box-shadow:var(--shadow,0 16px 40px rgba(0,0,0,.35))!important; padding:6px!important; gap:2px!important; font-size:13px; color:var(--ink); } html body #hydroTopbar .ht-viewmenu-pop .ht-vm-item{border-radius:var(--ht-r); font-family:inherit; font-size:13px; font-weight:600; min-height:38px} html body #hydroTopbar .ht-viewmenu-pop .ht-vm-h{padding:8px 9px 2px; font-size:var(--ht-fs-l); letter-spacing:.08em} html body #hydroTopbar .ht-viewmenu-pop label{font-family:inherit; font-size:var(--ht-fs-l); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:8px 9px 4px} html body #hydroTopbar .ht-viewmenu-pop select{font-family:inherit; font-size:13px; font-weight:600; color:var(--ink); border-radius:var(--ht-r)!important; border:1px solid var(--line)!important; background:var(--bg)!important; min-height:36px; text-transform:none; letter-spacing:0} html body #hydroTopbar .ht-viewmenu-pop .ht-vm-seg{border-radius:var(--ht-r); background:var(--bg); border-color:var(--line); gap:2px; padding:2px} html body #hydroTopbar .ht-viewmenu-pop .ht-vm-b{border-radius:var(--ht-r); font-family:inherit; font-weight:600; font-size:13px} html body #hydroTopbar .ht-viewmenu-pop .ht-vm-b.on{background:color-mix(in srgb,var(--blue) 12%,transparent); color:var(--blue); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 45%,transparent)} /* ⋮ kebab: same family as the other icon buttons */ html body #hydroTopbar .ht-menu{display:inline-flex!important; align-items:center; justify-content:center; width:var(--ht-h)!important; min-width:var(--ht-h)!important; padding:0!important; color:var(--ink)!important} html body #hydroTopbar .ht-menu .ico{width:var(--ht-ic)!important; height:var(--ht-ic)!important} /* Solve-awareness slot (only shown when results are stale/busy/synced): align it to the row without changing its own colour language. */ html body #hydroTopbar .hw-recalc-banner{border-radius:var(--ht-r)!important; height:var(--ht-h)!important; min-height:var(--ht-h)!important; max-height:var(--ht-h)!important; align-self:center} /* ---- 5. Collapse steps ------------------------------------------------------ ≥1600 ‹ Well Library ·· [● well › SECTION [..] › SCENARIO [..] › ● READINESS 97] [● IN WINDOW · +x.xx ppg …]* ·· Open full well · Tools ⌄ · ⋮ 1400–1599 READINESS word dropped (● 97), well name capped at 130px; with the chip* the SECTION/SCENARIO words drop too and the chip shortens to ● IN WINDOW · +1.27 ppg 1320–1399 chip hidden, full nameplate 1024–1319 exit icon-only (‹); SECTION / SCENARIO / READINESS words dropped (values keep full width) 900–1023 + well and readiness segments fold into Tools (Project · … / Readiness · …) 768–899 + Open full well folds into Tools (its 2nd item) ≤700 + ⋮ menu folds (as before), Tools loses its caret, section:scenario share the row 3:2 * the chip exists only in views without the Modeled MPD response instrument (never in Analyze). Everything hidden is still in the Tools menu (Gas & Influx, Open full well, Project, Readiness, Save & sync, Interface, Canvas layout, Settings, Snapshot). */ @media (max-width:1399px){ html body #hydroTopbar .ht-win{display:none!important} } @media (max-width:1599px){ /* keep the nameplate short enough to stay centred beside a 226px action group */ html body #hydroTopbar .ht-field>.ht-proj{max-width:190px!important} html body #hydroTopbar .ht-proj-n{max-width:130px!important} html body #hydroTopbar .ht-field>.ht-ready .ht-pill-l{display:none!important} html body #hydroTopbar .ht-win-chip small{display:none} } @media (min-width:1400px) and (max-width:1599px){ html body #hydroTopbar:has(.ht-win:not(:empty)) .ht-ctx .ht-pill-l{display:none!important} } @media (max-width:1319px){ html body #hydroTopbar .ht-exit-l{display:none!important} html body #hydroTopbar .ht-exit{width:var(--ht-h)!important; min-width:var(--ht-h)!important; padding:0!important; gap:0} html body #hydroTopbar .ht-field>.ht-proj{max-width:190px!important} html body #hydroTopbar .ht-proj-n{max-width:130px!important} html body #hydroTopbar .ht-ctx .ht-pill-l{display:none!important} } @media (max-width:1023px){ html body #hydroTopbar .ht-field>.ht-proj,html body #hydroTopbar .ht-field>.ht-ready{display:none!important} } @media (max-width:899px){ html body #hydroTopbar #hwOpenFullWell{display:none!important} } @media (max-width:700px){ html body #hydroTopbar.hydro-topbar{gap:6px!important; padding:6px 8px!important} html body #hydroTopbar .ht-menu{display:none!important} html body #hydroTopbar>.ht-ctx{flex:1 1 0!important; gap:6px!important} html body #hydroTopbar .ht-field{flex:1 1 0; max-width:none; min-width:0} html body #hydroTopbar .ht-field>.ht-pill{padding:0 22px 0 8px!important} html body #hydroTopbar .ht-field>.ht-pill::after{right:6px} html body #hydroTopbar .ht-field>.ht-pill:nth-of-type(1){flex:3 1 0!important; min-width:0!important; max-width:none!important} html body #hydroTopbar .ht-field>.ht-pill:nth-of-type(2){flex:2 1 0!important; min-width:0!important; max-width:none!important} html body #hydroTopbar .ht-viewmenu>summary{padding:0 10px!important} html body #hydroTopbar .ht-viewmenu>summary .ico{display:none} html body #hydroTopbar>.ht-actions{gap:6px!important} } /* iOS zooms the page when a focused select is under 16px; keep the app's existing 16px on real touch phones. */ @media (max-width:700px){ html body.is-touch #hydroTopbar .ht-ctx select.ht-dd{font-size:16px!important} } /* ---- 6. The row beneath (Analyze tools row) — same icon scale, quiet dock launcher ---- Scoped to .hw-anhead-tools inside the charts-mode cockpit only. 16px glyphs in 32px controls, 2px radius. The Engineering Dock launcher loses its gradient, glow rings, mark drop-shadow and the static green dot (nothing toggles it); the owner's orbit mark stays, 18px, in currentColor; open = accent border. */ html body .hydro-app.charts-mode .hw-anhead-tools>*, html body .hydro-app.charts-mode .hw-anhead-tools .hw-workhub>summary, html body .hydro-app.charts-mode .hw-anhead-tools .hw-well-toggle-clear, html body .hydro-app.charts-mode .hw-anhead-tools .hw-presetbar, html body .hydro-app.charts-mode .hw-anhead-tools .hw-ac>summary{height:32px!important; min-height:32px!important; max-height:32px!important; border-radius:2px!important; box-shadow:none!important} html body .hydro-app.charts-mode .hw-anhead-tools .cpk-i, html body .hydro-app.charts-mode .hw-anhead-tools .ico{width:16px!important; height:16px!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-well-toggle-clear{font-size:12.5px!important; font-weight:600!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-fpbar, html body.hydro-focus .hydro-app.charts-mode .hw-anhead-tools .hw-fpbar, html body.hydro-easy .hydro-app.charts-mode .hw-anhead-tools .hw-fpbar{display:flex!important; width:32px!important; height:32px!important; min-height:32px!important; max-height:32px!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch{width:32px!important; min-width:32px!important; height:32px!important; min-height:32px!important; max-height:32px!important; padding:0!important; border-radius:2px!important; border:1px solid var(--line)!important; background:var(--bg)!important; background-image:none!important; box-shadow:none!important; color:var(--ink)!important; overflow:hidden!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line))!important; background:color-mix(in srgb,var(--blue) 6%,var(--bg))!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-panelhub[open]>.hw-dock-launch{border-color:var(--blue)!important; color:var(--blue)!important; box-shadow:none!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch:focus-visible{outline:2px solid color-mix(in srgb,var(--blue) 78%,#fff)!important; outline-offset:2px!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch .hw-dock-mark{width:18px!important; height:18px!important; color:inherit!important; filter:none!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch .hw-dock-mark .orbit, html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch .hw-dock-mark .signal{stroke:currentColor!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch .hw-dock-mark .node, html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch .hw-dock-mark .core{fill:currentColor!important} html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch .hw-launch-dot, html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch .hw-launch-star, html body .hydro-app.charts-mode .hw-anhead-tools .hw-dock-launch .hw-dock-launch-copy{display:none!important} /* An open Tools menu belongs above the page it serves. The bar is its own stacking context at z-index 12, while the phone inputs strip sits at 242, so on a phone the menu's first item - the only phone entry to Gas & Influx - was under that strip and could not be tapped. Raised only while the menu is open, so the bar never covers page overlays otherwise. */ html body #hydroTopbar:has(.ht-viewmenu[open]){z-index:400}