/* Inter variable font, vendored (assets/fonts, SIL OFL 1.1 — see LICENSE-Inter.txt) so typography is consistent offline. The UI stack falls back to Segoe UI/system-ui while it loads (font-display: swap). */ @font-face { font-family: "Inter"; src: url("./assets/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ========================================================================= Design tokens (DEV-851). Light values live on :root, dark overrides on :root[data-theme="dark"] (set by the theme bootstrap script in and the header toggle). Component rules reference tokens only — adjust colours here, not below. ========================================================================= */ :root { color-scheme: light; /* surfaces */ --bg: #f4f6f8; --card: #ffffff; --surface-2: #fafbfc; --surface-3: #f1f5f6; --surface-inset: #eef1f3; /* text */ --ink: #17232a; --ink-strong: #101c22; --muted: #64747e; --faint: #9aa7ae; /* borders */ --line: #e2e8eb; --line-soft: #eaeff2; --line-strong: #d3dce0; /* brand accent — Pantone Orange 021C (product colour). Pure #fe5000 is max-chroma: fine for thin/small accents (tab underline, badge dots, meters, focus) but a solid button block of it vibrates on white and white text on it is only 3.3:1. So button surfaces use --accent-fill, an "ember" deepened one step for white ink at 4.8:1, and --accent-text is likewise deepened for AA on light surfaces. */ --accent: #fe5000; --accent-fill: #cf3f00; --accent-hover: #b83800; --accent-ink: #ffffff; --accent-text: #c13c00; --accent-soft: #ffede3; --accent-soft-border: #ffcdb3; --accent-2: #17506e; /* controls */ --control-bg: #ffffff; --control-hover: #f2f6f7; /* states */ --warn: #9a5d06; --warn-bg: #fdf6ea; --warn-border: #eed9b4; --danger: #c0392b; --ok: #1e7a1e; --highlight-border: #e0b070; /* log / terminal surfaces (dark in both themes) */ --log-bg: #10161d; --log-ink: #cfdae4; --log-line: #273444; --log-ok: #3ddc84; --log-bad: #ff6b6b; /* Bright amber-orange, tuned to pop on --log-bg like --log-ok/--log-bad (the softer #e5b567 was hard to read on the dark report/log surface). */ --log-warn: #ffb454; --log-tx: #79b8ff; --log-rx: #7ee2a8; --log-dim: #7d8b96; /* the Verisense logo is a white-background JPG; it keeps a constant white chip in both themes until a transparent asset exists */ --logo-chip-bg: #ffffff; /* effects */ --shadow-card: 0 1px 2px rgba(16, 28, 34, 0.05), 0 4px 12px rgba(16, 28, 34, 0.04); --focus-ring: 0 0 0 3px rgba(254, 80, 0, 0.28); --backdrop: rgba(10, 18, 24, 0.5); --font-ui: Inter, "Segoe UI Variable Text", system-ui, "Segoe UI", sans-serif; --font-mono: "Cascadia Code", Consolas, "Courier New", monospace; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0d1117; --card: #151b23; --surface-2: #11161d; --surface-3: #1a212b; --surface-inset: #10151b; --ink: #dbe4ec; --ink-strong: #f0f5f9; --muted: #8b98a5; --faint: #5f6d78; --line: #232c37; --line-soft: #1d2530; --line-strong: #2d3844; /* on dark surfaces the lifted orange doesn't vibrate — fill = accent */ --accent: #ff6a2e; --accent-fill: #ff6a2e; --accent-hover: #ff8049; --accent-ink: #2a0f00; --accent-text: #ff8656; --accent-soft: rgba(255, 106, 46, 0.13); --accent-soft-border: rgba(255, 106, 46, 0.32); --accent-2: #5aa7d0; --control-bg: #1c242e; --control-hover: #232d39; --warn: #e8b04b; --warn-bg: #241d10; --warn-border: #4a3a1c; --danger: #ff6b6b; --ok: #3ddc84; --highlight-border: #6b5327; --log-bg: #0a0e13; --log-line: #1d2632; --shadow-card: none; --focus-ring: 0 0 0 3px rgba(255, 106, 46, 0.35); --backdrop: rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font-ui); min-height: 100vh; } .page { max-width: 1500px; margin: 14px auto; padding: 0 12px 18px; } h1, h2, h3 { margin: 0 0 10px; } h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-strong); } .brand-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .brand-title { min-width: 220px; } .brand-logos { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .brand-logo-link { display: block; line-height: 0; } .brand-logos img { display: block; border: 1px solid var(--line); background: var(--logo-chip-bg); border-radius: 10px; box-shadow: var(--shadow-card); } .logo-verisense { width: 170px; height: auto; padding: 4px 8px; } /* Card headings render as uppercase micro-labels. */ h2 { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } h3 { font-size: 13.5px; font-weight: 600; color: var(--ink); } .muted { color: var(--muted); } /* minmax(0, …) instead of bare fr units: lets cards shrink below their content's min-content width on narrow screens, so wide tables scroll inside their .lookup-table-wrap instead of stretching the page. */ .top { display: grid; /* Current Status (tiles) needs more room than the Connection buttons. */ grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; margin-top: 10px; } .main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; min-height: 68vh; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-card); } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .row:last-child { margin-bottom: 0; } button, input, select { border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; font: inherit; background: var(--control-bg); color: var(--ink); max-width: 100%; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus-ring); } input[type="checkbox"] { accent-color: var(--accent); } input[readonly] { background: var(--surface-inset); color: var(--muted); border-color: var(--line-strong); cursor: not-allowed; } button { padding: 8px 13px; cursor: pointer; font-weight: 600; transition: background 0.12s, border-color 0.12s, color 0.12s; } button:hover:not(:disabled) { background: var(--control-hover); } button.primary { color: var(--accent-ink); border-color: transparent; background: var(--accent-fill); } button.primary:hover:not(:disabled) { background: var(--accent-hover); } button.warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); } button.warn:hover:not(:disabled) { background: var(--warn-bg); border-color: var(--warn); } button:disabled { opacity: 0.45; cursor: not-allowed; } /* Light/dark switch in the brand header. Glyph is set by JS. */ .theme-toggle { width: 34px; height: 34px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: var(--muted); } .theme-toggle:hover:not(:disabled) { color: var(--ink); } label { display: inline-flex; align-items: center; gap: 6px; } .kv { display: grid; grid-template-columns: 125px 1fr; gap: 5px 10px; margin-top: 4px; font-variant-numeric: tabular-nums; } /* Underline-style tabs. */ .tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .tab-btn { border: 0; border-radius: 0; background: none; padding: 8px 12px 10px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-btn:hover:not(:disabled) { background: none; color: var(--ink); } .tab-btn.active { color: var(--accent-text); background: none; border-bottom-color: var(--accent); } .tab { display: none; gap: 10px; align-content: start; } .tab.active { display: block; } .section { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: var(--surface-2); } /* Panels parked with the inert attribute: fully non-interactive (no click, no keyboard focus) and visually dimmed. */ .section[inert] { opacity: 0.45; } .section-disabled-note { font-size: 12px; font-weight: normal; color: var(--faint); } .section:last-child { margin-bottom: 0; } /* Top-level collapsible section (e.g. Live Stream Stats): the whole heading row is the toggle, chevron matches .op-other-section. */ .section-collapsible > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .section-collapsible > summary::-webkit-details-marker { display: none; } .section-collapsible > summary::before { content: "\25B8"; /* ▸ */ flex: 0 0 auto; font-size: 11px; color: var(--faint); } .section-collapsible[open] > summary::before { content: "\25BE"; /* ▾ */ } .section-collapsible > summary h3 { margin: 0; } .section-collapsible[open] > summary { margin-bottom: 10px; } .section-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .section-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .op-all-grid { display: grid; /* min(100%, 300px): columns are 300px wide when there's room, but shrink to fit (never overflow) once the container is narrower than 300px. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; } .op-group { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; overflow: hidden; } .op-group summary { cursor: pointer; list-style: none; padding: 8px 10px; font-weight: 600; color: var(--ink); background: var(--surface-3); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 8px; } .op-group summary::before { content: "+"; width: 16px; height: 16px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); background: var(--card); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; font-weight: 700; flex: 0 0 16px; } .op-group[open] summary::before { content: "-"; } .op-group summary::marker { content: ""; } .op-group summary::-webkit-details-marker { display: none; } .op-group-body { padding: 10px; } /* Collapsible labelled subpanels inside a group (…FieldGroupDefinition.subgroups). Muted palette so they read as nested children, distinct from the parent panels. */ .op-subgroup { border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-2); margin-top: 10px; overflow: hidden; } .op-subgroup-title { cursor: pointer; list-style: none; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-3); display: flex; align-items: center; gap: 7px; } .op-subgroup[open] > .op-subgroup-title { border-bottom: 1px solid var(--line-soft); } .op-subgroup-title::marker { content: ""; } .op-subgroup-title::-webkit-details-marker { display: none; } .op-subgroup-title::before { content: "\25B8"; /* ▸ */ font-size: 10px; color: var(--faint); flex: 0 0 auto; } .op-subgroup[open] > .op-subgroup-title::before { content: "\25BE"; /* ▾ */ } /* Single column that can shrink to 0 so cards never overflow the panel. */ .op-subgroup-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; } /* "Common Schedule" master block: accent tint so it reads as driving the per-schedule subpanels below it. */ .sched-common { border-color: var(--accent-soft-border); background: var(--accent-soft); } .sched-common-title { cursor: default; color: var(--accent-text); background: var(--accent-soft); border-bottom: 1px solid var(--accent-soft-border); } .sched-common-title::before { content: none; } /* "Other options" wrapper: collapsible, visually separated from supported. */ .op-other-section { border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface-2); margin-top: 12px; overflow: hidden; } .op-other-section>summary { cursor: pointer; list-style: none; padding: 8px 10px; font-weight: 600; color: var(--muted); background: var(--surface-3); border-bottom: 1px dashed var(--line-strong); display: flex; align-items: center; gap: 8px; } .op-other-section>summary::-webkit-details-marker { display: none; } .op-other-section>summary::before { content: "\25B8"; /* ▸ */ flex: 0 0 auto; font-size: 11px; color: var(--faint); } .op-other-section[open]>summary::before { content: "\25BE"; /* ▾ */ } .op-other-badge { margin-left: auto; font-weight: 600; font-size: 12px; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-soft-border); border-radius: 999px; padding: 1px 8px; } .op-other-body { padding: 10px; } .op-other-note { color: var(--muted); font-size: 12px; margin: 0 10px 6px; } /* Groups whose sensor is not present on the connected hardware. */ .op-group--unsupported { opacity: 0.72; } .op-group--unsupported>summary { color: var(--muted); background: var(--surface-inset); } .op-all-item { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); padding: 8px; } /* Field differs from the device's last-read value (DEV-851). */ .op-all-item.dirty { border-color: var(--warn); } .op-all-item.dirty > label::after { content: "\25CF"; /* ● */ color: var(--warn); font-size: 9px; margin-left: 6px; vertical-align: 2px; } .op-dirty-pill { padding: 2px 10px; border-radius: 999px; background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); font-weight: 600; font-size: 12px; } .op-all-item label { display: block; font-weight: 600; margin-bottom: 5px; } .op-all-item select, .op-all-item input { width: 100%; } .op-all-desc { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; } /* Inactivity permanent-stop notice (see updateInactivityPermanentStopWarning): amber panel spanning the group grid, shown only while the current settings would permanently disable Logging at the inactive timeout. */ .op-inactivity-warn { display: none; grid-column: 1 / -1; padding: 8px 10px; border: 1px solid var(--warn-border); border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 12px; line-height: 1.4; } .op-inactivity-warn.show { display: block; } /* Disabled operational-config fields: grey out clearly (like the disabled production-config inputs) so it's obvious they can't be edited. */ .op-all-item input:disabled, .op-all-item select:disabled { background: var(--surface-inset); color: var(--faint); cursor: not-allowed; } .op-all-item:has(input:disabled) label, .op-all-item:has(select:disabled) label, .op-all-item:has(input:disabled) .op-all-desc, .op-all-item:has(select:disabled) .op-all-desc { color: var(--faint); } .step-flow { display: grid; gap: 10px; } .step-card { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); padding: 12px; } .step-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-weight: 600; color: var(--ink); } .step-inline-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .step-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); color: var(--accent-text); font-size: 12px; line-height: 1; } .step-copy { margin: 0 0 10px; font-size: 13px; color: var(--muted); } .test-report-dialog { width: min(920px, 96vw); max-height: 88vh; border: 1px solid var(--line); border-radius: 12px; padding: 0; background: var(--card); color: var(--ink); } .test-report-dialog::backdrop { background: var(--backdrop); } .test-report-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); } .test-report-body { margin: 0; padding: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; max-height: calc(88vh - 76px); overflow: auto; background: var(--log-bg); color: var(--log-ink); } .tr-pass { color: var(--log-ok); font-weight: 700; } .tr-fail { color: var(--log-bad); font-weight: 700; } .tr-warn { color: var(--log-warn); font-weight: 700; } .upload-settings { margin-top: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); padding: 8px 10px; } .upload-settings > summary { cursor: pointer; font-weight: 600; color: var(--ink); } .log-box { width: 100%; height: calc(68vh - 128px); border-radius: 10px; border: 1px solid var(--log-line); background: var(--log-bg); color: var(--log-ink); overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; } .log-line { white-space: pre-wrap; word-break: break-word; } .log-sev-err { color: var(--log-bad); } .log-sev-warn { color: var(--log-warn); } .log-sev-tx { color: var(--log-tx); } .log-sev-rx { color: var(--log-rx); } .log-sev-data { color: var(--log-dim); } .log-filter-row input[type="search"] { flex: 1; min-width: 120px; } .log-filter-row #logFilterCount { font-size: 12px; } .mono { font-family: var(--font-mono); font-size: 12px; } .lookup-table-wrap { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } .lookup-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); } .lookup-table th, .lookup-table td { border-bottom: 1px solid var(--line-soft); padding: 6px 8px; text-align: left; white-space: nowrap; } .lookup-table thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; } /* Live stream-stats loss highlighting. */ .loss-warn { color: var(--warn); font-weight: 700; } /* Flash Lookup CRC Check column results. */ .crc-pass { color: var(--ok); font-weight: 600; } .crc-fail { color: var(--danger); font-weight: 700; } .loss-bad { color: var(--danger); font-weight: 700; } /* Out-of-sync warning shown beside the device time in Current Status. Rendered as a borderless inline icon-button so it is keyboard focusable and clickable to write the host time to the sensor. Hidden until needed. */ .device-time-warn { display: none; margin-left: 6px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--warn); cursor: pointer; font: inherit; font-weight: 700; line-height: 1; } .device-time-warn:hover:not(:disabled) { background: none; } .device-time-warn.show { display: inline; } /* Signals that a Current Status label carries an explanatory tooltip on hover. Used for Device Time, whose value is a snapshot from the last read. */ .kv-hint { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; } .stream-stats-table td:nth-child(n + 2) { text-align: right; font-variant-numeric: tabular-nums; } .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; border: 1px solid var(--accent-soft-border); } .status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: none; } .plot-wrap { margin-top: 8px; } .plot-section[hidden] { display: none; } .plot-canvas { width: 100%; height: 170px; background: var(--plot-bg, #111); border-radius: 12px; display: block; border: 1px solid var(--line-soft); } .plot-legend-item { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; white-space: nowrap; } .plot-legend-swatch { width: 11px; height: 11px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.35); } .plot-legend-stats { white-space: nowrap; } @media (max-width: 1100px) { .top, .main, .section-grid-2, .section-grid-3 { grid-template-columns: minmax(0, 1fr); } .brand-header { align-items: flex-start; flex-direction: column; } .brand-logos { justify-content: flex-start; } .log-box { height: 300px; } } /* Compact density (DEV-851): one notch tighter everywhere, for users who want maximum information on screen. Toggled from the header, persisted as localStorage "uiDensity". */ :root[data-density="compact"] body { font-size: 13px; } [data-density="compact"] .card { padding: 10px; } [data-density="compact"] .section { padding: 8px; margin-bottom: 8px; } [data-density="compact"] button, [data-density="compact"] input, [data-density="compact"] select { padding: 5px 9px; } [data-density="compact"] .row { gap: 6px; margin-bottom: 6px; } [data-density="compact"] .kv { gap: 3px 8px; } [data-density="compact"] h2 { margin-bottom: 8px; } [data-density="compact"] .tab-btn { padding: 6px 10px 8px; } [data-density="compact"] .top, [data-density="compact"] .main { gap: 8px; } [data-density="compact"] .op-group-body, [data-density="compact"] .op-subgroup-grid, [data-density="compact"] .op-other-body { padding: 8px; } [data-density="compact"] .op-all-grid { gap: 8px; } [data-density="compact"] .stat-tile { padding: 6px 8px; } [data-density="compact"] .stat-tile-value { font-size: 15px; } /* Phone widths: tighten chrome, keep every control reachable. */ @media (max-width: 520px) { .page { margin-top: 8px; padding: 0 8px 12px; } h1 { font-size: 18px; } .card { padding: 12px; border-radius: 10px; } .kv { grid-template-columns: 100px minmax(0, 1fr); } .logo-verisense { width: 140px; } .calib-grids { gap: 12px; } } /* Shared file drop-target (DFU zip, hub firmware). */ .drop-zone { border: 2px dashed var(--line-strong); border-radius: 10px; padding: 16px 20px; text-align: center; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .drop-zone.hover { background: var(--accent-soft); border-color: var(--accent); } #dfu-drop { padding: 24px 20px; margin-bottom: 10px; } #dfu-icon { fill: var(--muted); display: block; margin: 0 auto 10px; } #dfu-label { cursor: pointer; display: block; } #dfu-label span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } #dfu-select { visibility: hidden; margin-top: 12px; } #hubFwLabel { cursor: pointer; display: block; } #hubFwLabel span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; } /* Unsupported hardware: dim and block the controls but keep the panel visible so the feature (and the reason it is off) stays discoverable. */ #hubFwSection.hub-unsupported #hubFwDrop, #hubFwSection.hub-unsupported .row { opacity: 0.5; pointer-events: none; } #hubFwUnsupportedNote { display: none; font-size: 13px; color: var(--muted); margin-top: 8px; } #hubFwSection.hub-unsupported #hubFwUnsupportedNote { display: block; } #dfu-status-bar { visibility: hidden; height: 24px; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; position: relative; margin-top: 10px; } #dfu-bar { background: var(--accent); width: 0%; height: 100%; } #dfu-transfer { position: absolute; top: 0; left: 0; right: 0; text-align: center; line-height: 24px; font-size: 12px; } #dfu-status-msg { margin-top: 8px; font-size: 13px; min-height: 18px; } .dfu-badge-active { color: var(--ok); font-weight: 600; } .dfu-badge-inactive { color: var(--danger); font-weight: 600; } #dfu-connected-notice { display: none; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--warn); margin-bottom: 10px; } #dfu-update-body.dfu-disabled { opacity: 0.4; pointer-events: none; user-select: none; } /* Calibration tab */ .calib-card { border: 1px solid var(--highlight-border); border-radius: 8px; padding: 10px 14px; margin: 12px 0; } .calib-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .calib-title { font-weight: 600; } .calib-head .calib-ts { margin-left: auto; color: var(--muted); font-size: 12px; } .calib-grids { display: flex; flex-wrap: wrap; gap: 24px; /* Matrices have a fixed intrinsic width; scroll rather than stretch the card on narrow screens. */ overflow-x: auto; } .calib-lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; } table.calib-matrix { border-collapse: collapse; } table.calib-matrix td { padding: 1px; } table.calib-matrix input { width: 72px; text-align: right; } table.calib-matrix input.calib-in-sens { width: 120px; } table.calib-matrix .fixed0 { display: inline-block; width: 72px; text-align: right; color: var(--faint); } /* Slim connection strip that slides in once the Connection card has been scrolled out of view, so device name / link state / battery stay visible deep in the config tabs. Content is mirrored from the Current Status fields by the inline script in index.html. */ .sticky-status { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 7px 16px; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); transform: translateY(-100%); transition: transform 0.15s; font-size: 13px; } .sticky-status.show { transform: none; } .sticky-status .sticky-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Split button: primary action + caret revealing rarer variants. */ .btn-split { position: relative; display: inline-flex; } .btn-split > button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; padding-left: 8px; padding-right: 8px; } .btn-split-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); padding: 6px; min-width: 250px; } .btn-split-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; } .btn-split-menu button:hover:not(:disabled) { background: var(--control-hover); } .btn-split-menu-note { font-size: 11.5px; line-height: 1.4; padding: 2px 10px 6px; } /* At-a-glance status tiles in the Current Status card. */ .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-bottom: 12px; } .stat-tile { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); padding: 8px 10px; } .stat-tile-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; } .stat-tile-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 6px; } .stat-tile-sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; /* Wrap rather than clip: unbroken tokens (advertising names, bank breakdowns) get break opportunities anywhere. */ overflow-wrap: anywhere; } /* Tiles with a title attribute carry their full status-response detail in the tooltip (battery+charger, flash+banks, BLE link parameters). */ .stat-tile[title] { cursor: help; } .stat-tile[title] .stat-tile-sub { text-decoration: underline dotted; text-underline-offset: 2px; } .meter + .stat-tile-sub { margin-top: 5px; } /* Section heading with a right-aligned action (e.g. a download button). */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .section-head h3 { margin: 0; } /* Out-of-sync warning button relocated into the Device Time tile. */ .stat-tile-value .device-time-warn { font-size: 15px; margin-left: 6px; vertical-align: 2px; } .meter { height: 6px; border-radius: 999px; background: var(--surface-inset); border: 1px solid var(--line-soft); overflow: hidden; } .meter-fill { height: 100%; width: 0%; border-radius: 999px; transition: width 0.25s; } .meter-ok { background: var(--ok); } .meter-warn { background: var(--warn); } .meter-bad { background: var(--danger); } /* Toast notifications: bottom-right stack, auto-dismissing. */ .toast-stack { position: fixed; right: 14px; bottom: 14px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 28px)); } .toast { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 10px 14px; font-size: 13px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); cursor: pointer; animation: toast-in 0.16s ease-out; } .toast-ok { border-left-color: var(--ok); } .toast-err { border-left-color: var(--danger); } .toast-warn { border-left-color: var(--warn); } .toast-leaving { opacity: 0; transition: opacity 0.18s; } @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Deploy-stamp footer (version.js): "what version are you running?" is the first support question — keep the answer on screen but out of the way. */ .app-version { margin: 16px 0 10px; text-align: center; font-size: 11px; color: var(--faint); user-select: text; }