/* ==========================================================================
PRC CONTROL DECK — design system for Parametric Robot Control
A custom, dependency-free UI: full-bleed viewport, floating glass panels,
amber accent. Themes are driven by the data-theme attribute on .
NOTE: verbatim copy of Server/wwwroot/css/prc.css (source of truth).
Keep changes there and re-copy; portal-only styles live in portal.css.
========================================================================== */
/* ---------- Fonts (local, offline-safe) ---------- */
@font-face {
font-display: swap;
font-family: 'Manrope';
font-style: normal;
font-weight: 400;
src: url('../fonts/manrope-v20-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Sora';
font-style: normal;
font-weight: 300;
src: url('../fonts/sora-v17-latin-300.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
src: url('../fonts/jetbrains-mono-regular.woff2') format('woff2');
}
/* ---------- Design tokens ---------- */
:root {
--font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
--font-display: 'Sora', 'Manrope', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'SF Mono', Consolas, monospace;
--acc: #ffa726;
--acc-strong: #f57c00;
--acc-soft: rgba(255, 167, 38, 0.14);
--acc-glow: rgba(255, 167, 38, 0.35);
--acc-glow-btn: rgba(255, 167, 38, 0.245); /* button glow, 70% of --acc-glow */
--grad-acc: linear-gradient(135deg, #ffc06b 0%, #f59838 100%);
/* Solid brand amber for filled accent controls (buttons, dock, slider fill,
dials). Matches the top-bar wordmark exactly (#ffa726) and is intentionally
NOT dimmed in the light theme the way --acc is — fills carry their own dark
text, so they should read as the full brand amber, while --acc stays
theme-aware for legible accent *text/icons* on light surfaces. */
--acc-fill: #ffa726;
--ok: #3ddc84;
--warn: #ffb300;
--err: #ff5252;
--info: #57b2ff;
--r-lg: 18px;
--r-md: 12px;
--r-sm: 8px;
--topbar-h: 58px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Dark cockpit (default) */
:root,
html[data-theme="dark"] {
color-scheme: dark;
--bg: #0d1017;
--bg-glow-1: rgba(255, 145, 30, 0.20);
--bg-glow-2: rgba(70, 110, 180, 0.24);
--grid-dot: rgba(255, 255, 255, 0.18);
--glass: rgba(15, 18, 25, 0.68);
--glass-strong: rgba(13, 16, 22, 0.86);
--glass-soft: rgba(255, 255, 255, 0.06);
--edge: rgba(255, 255, 255, 0.08);
--edge-strong: rgba(255, 255, 255, 0.16);
--shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
--text: #e9ecf2;
--text-dim: #99a1b3;
--text-faint: #5d6577;
--field-bg: rgba(255, 255, 255, 0.045);
--field-edge: rgba(255, 255, 255, 0.11);
--track: rgba(255, 255, 255, 0.12);
--row-hover: rgba(255, 255, 255, 0.035);
}
html[data-theme="light"] {
color-scheme: light;
--bg: #eef0f4;
--bg-glow-1: rgba(245, 124, 0, 0.07);
--bg-glow-2: rgba(90, 130, 200, 0.10);
--grid-dot: rgba(20, 30, 50, 0.09);
--glass: rgba(255, 255, 255, 0.72);
--glass-strong: rgba(255, 255, 255, 0.92);
--glass-soft: rgba(15, 20, 30, 0.035);
--edge: rgba(15, 20, 30, 0.10);
--edge-strong: rgba(15, 20, 30, 0.22);
--shadow: 0 14px 44px rgba(30, 40, 60, 0.16);
--text: #1a1d24;
--text-dim: #565e6e;
--text-faint: #9098a8;
--acc: #e8820c;
--acc-soft: rgba(232, 130, 12, 0.12);
--acc-glow: rgba(232, 130, 12, 0.30);
--acc-glow-btn: rgba(232, 130, 12, 0.21);
--field-bg: rgba(15, 20, 30, 0.04);
--field-edge: rgba(15, 20, 30, 0.14);
--track: rgba(15, 20, 30, 0.14);
--row-hover: rgba(15, 20, 30, 0.04);
}
/* ---------- Base ---------- */
* {
box-sizing: border-box;
}
/* Always reserve the scrollbar gutter so the fixed, right-aligned top bar
doesn't shift when navigating between short (no scrollbar) and tall
(scrollbar) pages — noticeable with classic/non-overlay scrollbars. */
html {
scrollbar-gutter: stable;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.55;
color: var(--text);
background: var(--bg);
/* clip (not hidden) so body doesn't become its own scroll container,
keeping the single scrollbar — and its reserved gutter — on . */
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--acc);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
::selection {
background: var(--acc-soft);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--track);
border-radius: 6px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-faint);
border: 2px solid transparent;
background-clip: content-box;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 300;
margin: 0;
}
/* FocusOnNavigate targets h1 — keep keyboard focus but drop the visible ring */
h1:focus {
outline: none;
}
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.muted {
color: var(--text-dim);
}
.overline {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
}
/* Light-first line-art images (black strokes, alpha-antialiased): flip black<->white in
dark mode. invert(1) maps every antialiased gray proportionally and leaves alpha
untouched; hue-rotate(180deg) re-flips the hues so colored accents keep their color
(approximately — CSS hue-rotate is a linear-RGB matrix). Opt-in per image; do not
apply to photos. */
html[data-theme="dark"] .theme-flip {
filter: invert(1) hue-rotate(180deg);
}
/* ---------- App shell & ambient backdrop ---------- */
.prc-app {
min-height: 100vh;
}
.prc-backdrop {
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(900px 600px at 12% -10%, var(--bg-glow-1), transparent 60%),
radial-gradient(1100px 700px at 95% 110%, var(--bg-glow-2), transparent 60%),
var(--bg);
}
.prc-backdrop::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.4px);
background-size: 26px 26px;
mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
}
/* The Babylon viewport fills the window behind the floating glass UI on the
Visual page. z-index 0 (not -1) keeps it above the empty page background so it
receives pointer events for camera control; the top bar (z 50), dock (z 40)
and loading overlay (z 60) still float above it, and the ambient backdrop
(z -2) shows through the transparent canvas. */
#renderCanvas {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 0;
display: block;
outline: none;
touch-action: none;
}
/* Robot-model loading overlay (shown by babylon.blazorInterop.js while link
meshes stream in — the server may be remote, so the transfer can take a
moment). Purely informational: never traps pointer events. */
.robot-loading {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.robot-loading.show {
opacity: 1;
visibility: visible;
}
.robot-loading .spinner {
width: 46px;
height: 46px;
border-radius: 50%;
border: 3px solid var(--edge-strong);
border-top-color: var(--acc-fill);
animation: robot-spin 0.9s linear infinite;
}
.robot-loading .robot-loading-text {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.06em;
color: var(--text-dim);
padding: 7px 16px;
border-radius: 999px;
background: var(--glass);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid var(--edge);
box-shadow: var(--shadow);
}
@keyframes robot-spin {
to { transform: rotate(360deg); }
}
/* Generic spinner (same visual language as the robot loader) for inline waits,
e.g. the license-activation progress dialog. */
.prc-spinner {
width: 38px;
height: 38px;
border-radius: 50%;
border: 3px solid var(--edge-strong);
border-top-color: var(--acc-fill);
animation: robot-spin 0.9s linear infinite;
}
/* App-shell boot splash (App.razor). Prerendering is off, so until the circuit's
first interactive render the body contains only this static div. Once
MainLayout's .prc-app renders (or the Blazor error bar shows), it disappears;
the 0.25s animation delay keeps fast loads from flashing a spinner. */
#prc-splash {
position: fixed;
inset: 0;
z-index: 70;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
pointer-events: none;
opacity: 0;
animation: splash-in 0.3s var(--ease) 0.25s forwards;
}
#prc-splash .splash-text {
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.06em;
color: var(--text-dim);
padding: 7px 16px;
border-radius: 999px;
background: var(--glass);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid var(--edge);
box-shadow: var(--shadow);
}
body:has(.prc-app) #prc-splash,
body:has(#blazor-error-ui[style*="block"]) #prc-splash {
display: none;
}
@keyframes splash-in {
to { opacity: 1; }
}
/* ---------- Top command bar ---------- */
.prc-topbar {
position: fixed;
top: 14px;
left: 14px;
right: 14px;
z-index: 50;
height: var(--topbar-h);
display: flex;
align-items: center;
gap: 14px;
padding: 0 16px 0 14px;
border-radius: var(--r-lg);
background: var(--glass);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--edge);
box-shadow: var(--shadow);
}
.brand {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
user-select: none;
}
.brand-logo-link {
display: flex;
flex: 0 0 auto;
border-radius: 8px;
transition: opacity 0.18s var(--ease);
}
.brand-logo-link:hover {
opacity: 0.78;
}
.brand-logo {
width: 30px;
height: 30px;
flex: 0 0 auto;
display: block;
}
.brand-wordmark {
height: 34px;
width: auto;
display: block;
flex: 0 0 auto;
}
/* Robot selector pill */
.robot-pill {
display: flex;
align-items: center;
gap: 9px;
height: 36px;
padding: 0 6px 0 12px;
border-radius: 999px;
background: var(--glass-soft);
border: 1px solid var(--edge);
flex: 0 1 auto;
min-width: 0;
}
.robot-pill select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
outline: none;
color: var(--text);
font-family: var(--font-mono);
font-size: 12.5px;
letter-spacing: 0.04em;
padding: 4px 22px 4px 2px;
cursor: pointer;
max-width: 220px;
text-overflow: ellipsis;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
}
.robot-pill select option {
background: var(--glass-strong);
color: var(--text);
}
.robot-pill .pill-label {
font-size: 12.5px;
color: var(--text-dim);
font-family: var(--font-mono);
letter-spacing: 0.04em;
padding-right: 8px;
white-space: nowrap;
}
/* Status LEDs */
.led {
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--text-faint);
}
.led.ok {
background: var(--ok);
box-shadow: 0 0 8px var(--ok);
animation: led-breathe 2.6s ease-in-out infinite;
}
.led.warn {
background: var(--warn);
box-shadow: 0 0 8px var(--warn);
}
.led.err {
background: var(--err);
box-shadow: 0 0 8px var(--err);
animation: led-blink 1.4s steps(1) infinite;
}
@keyframes led-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
@keyframes led-blink {
0%, 60% { opacity: 1; }
61%, 100% { opacity: 0.35; }
}
/* Navigation */
.prc-nav {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
height: 100%;
}
.nav-link {
position: relative;
display: flex;
align-items: center;
gap: 7px;
height: 100%;
padding: 0 13px;
color: var(--text-dim);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
text-decoration: none;
transition: color 0.18s var(--ease);
white-space: nowrap;
}
.nav-link svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.nav-link:hover {
color: var(--text);
text-decoration: none;
}
.nav-link.active {
color: var(--acc);
}
.nav-link.active::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 6px;
height: 2px;
border-radius: 2px;
background: var(--grad-acc);
box-shadow: 0 0 10px var(--acc-glow);
}
.nav-link .nav-dot {
position: absolute;
top: 13px;
right: 7px;
width: 7px;
height: 7px;
border-radius: 50%;
}
.nav-link .nav-dot.warn {
background: var(--warn);
box-shadow: 0 0 7px var(--warn);
}
.nav-link .nav-dot.err {
background: var(--err);
box-shadow: 0 0 7px var(--err);
}
.topbar-actions {
display: flex;
align-items: center;
gap: 4px;
padding-left: 10px;
border-left: 1px solid var(--edge);
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--text-dim);
cursor: pointer;
transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.icon-btn:hover {
background: var(--glass-soft);
color: var(--text);
}
.icon-btn svg {
width: 17px;
height: 17px;
}
/* ---------- Page scaffold ---------- */
.prc-main {
min-height: 100vh;
}
.prc-page {
max-width: 1160px;
margin: 0 auto;
padding: calc(var(--topbar-h) + 40px) 22px 40px;
animation: page-in 0.45s var(--ease) both;
}
.prc-page.wide {
max-width: 1400px;
}
@keyframes page-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
.page-head {
margin-bottom: 26px;
}
.page-head h1 {
font-size: 30px;
letter-spacing: 0.01em;
margin-top: 6px;
}
/* Glass panel */
.glass {
background: var(--glass);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--edge);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
}
.panel-pad {
padding: 26px 28px;
}
/* ---------- Buttons ---------- */
.prc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 38px;
padding: 0 20px;
border-radius: var(--r-md);
border: 1px solid transparent;
background: var(--acc-fill);
color: #14100a;
font-family: var(--font-body);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s;
box-shadow: 0 0 18px var(--acc-glow-btn);
white-space: nowrap;
}
.prc-btn:hover {
filter: brightness(1.07);
transform: translateY(-1px);
box-shadow: 0 0 24px var(--acc-glow-btn);
}
.prc-btn:active {
transform: translateY(0);
}
.prc-btn svg {
width: 15px;
height: 15px;
}
.prc-btn.ghost {
background: var(--glass-soft);
border-color: var(--edge-strong);
color: var(--text);
box-shadow: none;
}
.prc-btn.ghost:hover {
border-color: var(--acc);
color: var(--acc);
box-shadow: 0 0 14px var(--acc-glow-btn);
}
.prc-btn.danger {
background: #e53935;
color: #fff;
box-shadow: 0 0 18px rgba(244, 67, 54, 0.245);
}
.prc-btn.small {
height: 30px;
padding: 0 13px;
font-size: 10.5px;
border-radius: var(--r-sm);
}
.prc-btn:disabled {
opacity: 0.45;
pointer-events: none;
}
/* ---------- Form fields ---------- */
.prc-input {
width: 100%;
height: 36px;
padding: 0 11px;
border-radius: 10px;
border: 1px solid var(--field-edge);
background: var(--field-bg);
color: var(--text);
font-family: var(--font-mono);
font-size: 13px;
outline: none;
transition: border-color 0.18s, box-shadow 0.18s;
}
textarea.prc-input {
height: auto;
min-height: 72px;
padding: 9px 11px;
resize: vertical;
line-height: 1.45;
}
.prc-input:focus {
border-color: var(--acc);
box-shadow: 0 0 0 3px var(--acc-soft);
}
.prc-select {
position: relative;
width: 100%;
}
.prc-select select {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 36px;
padding: 0 30px 0 11px;
border-radius: 10px;
border: 1px solid var(--field-edge);
background: var(--field-bg);
color: var(--text);
font-family: var(--font-mono);
font-size: 13px;
outline: none;
cursor: pointer;
transition: border-color 0.18s, box-shadow 0.18s;
}
.prc-select select:focus {
border-color: var(--acc);
box-shadow: 0 0 0 3px var(--acc-soft);
}
.prc-select select option {
background: var(--glass-strong);
color: var(--text);
}
.prc-select::after {
content: "";
position: absolute;
right: 11px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid var(--text-faint);
border-bottom: 2px solid var(--text-faint);
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
/* Toggle switch */
.prc-switch {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
flex: 0 0 auto;
}
.prc-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.prc-switch .knob {
position: absolute;
inset: 0;
border-radius: 999px;
background: var(--track);
border: 1px solid var(--edge);
cursor: pointer;
transition: background 0.2s var(--ease), box-shadow 0.2s;
}
.prc-switch .knob::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--text-dim);
transition: transform 0.2s var(--ease), background 0.2s;
}
.prc-switch input:checked + .knob {
background: var(--acc-soft);
border-color: var(--acc);
box-shadow: 0 0 10px var(--acc-glow);
}
.prc-switch input:checked + .knob::before {
transform: translateX(18px);
background: var(--acc-fill);
}
.prc-switch input:focus-visible + .knob {
box-shadow: 0 0 0 3px var(--acc-soft);
}
/* Radio chips */
.prc-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.prc-chips label {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid var(--field-edge);
background: var(--field-bg);
color: var(--text-dim);
font-size: 12px;
cursor: pointer;
transition: all 0.15s var(--ease);
user-select: none;
}
.prc-chips input {
display: none;
}
.prc-chips label:hover {
color: var(--text);
border-color: var(--edge-strong);
}
.prc-chips label.on {
background: var(--acc-soft);
border-color: var(--acc);
color: var(--acc);
font-weight: 700;
}
/* Range slider — fill driven by --p (0–100%) */
.prc-slider {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 22px;
background: transparent;
cursor: pointer;
--p: 0%;
}
.prc-slider::-webkit-slider-runnable-track {
height: 5px;
border-radius: 4px;
background: linear-gradient(to right, var(--acc-fill) var(--p), var(--track) var(--p));
}
.prc-slider::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin-top: -5.5px;
border-radius: 50%;
background: var(--text);
border: 2.5px solid var(--acc-fill);
box-shadow: 0 0 9px var(--acc-glow);
transition: transform 0.15s var(--ease);
}
.prc-slider::-webkit-slider-thumb:hover {
transform: scale(1.18);
}
.prc-slider::-moz-range-track {
height: 5px;
border-radius: 4px;
background: var(--track);
}
.prc-slider::-moz-range-progress {
height: 5px;
border-radius: 4px;
background: var(--acc-fill);
}
.prc-slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--text);
border: 2.5px solid var(--acc-fill);
box-shadow: 0 0 9px var(--acc-glow);
}
/* Thin progress hairline */
.prc-progress {
position: relative;
height: 4px;
border-radius: 3px;
background: var(--track);
overflow: hidden;
}
.prc-progress > span {
position: absolute;
inset: 0 auto 0 0;
border-radius: 3px;
background: var(--grad-acc);
box-shadow: 0 0 8px var(--acc-glow);
transition: width 0.12s linear;
}
/* ---------- Tables ---------- */
.prc-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.prc-table th {
text-align: left;
padding: 10px 14px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faint);
border-bottom: 1px solid var(--edge-strong);
white-space: nowrap;
}
.prc-table td {
padding: 9px 14px;
border-bottom: 1px solid var(--edge);
color: var(--text);
vertical-align: top;
}
.prc-table tbody tr:hover td {
background: var(--row-hover);
}
.prc-table td.mono,
.prc-table .mono td {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.table-empty {
padding: 34px 14px;
text-align: center;
color: var(--text-faint);
font-size: 13px;
}
/* Repeat counter for grouped log messages ("×12" after the message) */
.log-count {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
border: 1px solid var(--edge-strong);
border-radius: 999px;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 11px;
font-weight: 700;
color: var(--acc);
white-space: nowrap;
cursor: default;
}
/* ---------- Transport dock (Control page) ---------- */
.dock-wrap {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
z-index: 40;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: min(1060px, calc(100vw - 36px));
animation: dock-in 0.5s var(--ease) both;
}
@keyframes dock-in {
from {
opacity: 0;
transform: translate(-50%, 22px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
.dock {
display: flex;
align-items: center;
gap: 18px;
width: 100%;
padding: 13px 20px;
border-radius: var(--r-lg);
background: var(--glass);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--edge);
box-shadow: var(--shadow);
}
.dock-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex: 0 0 auto;
border-radius: 50%;
border: none;
background: var(--acc-fill);
color: #14100a;
cursor: pointer;
box-shadow: 0 4px 20px var(--acc-glow);
transition: transform 0.15s var(--ease), filter 0.15s;
}
.dock-btn:hover {
filter: brightness(1.08);
transform: scale(1.06);
}
.dock-btn svg {
width: 19px;
height: 19px;
}
.dock-toggle {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
flex: 0 0 auto;
}
.dock-toggle .overline {
font-size: 9px;
}
.dock-timeline {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 120px;
}
.dock-timeline .timeline-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
}
/* Axis telemetry strip */
.axis-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.axis-chip {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 13px 7px 9px;
border-radius: 999px;
background: var(--glass);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid var(--edge);
box-shadow: var(--shadow);
}
.axis-chip.out-of-range {
/* Axis value beyond the robot's joint limit: the whole pill goes red. */
background: rgba(255, 82, 82, 0.5);
border-color: var(--err);
box-shadow: 0 0 0 1px var(--err), 0 0 14px rgba(255, 82, 82, 0.45);
}
/* ...and the dial turns red too — but it keeps showing the actual fill: solid red up
to --p, with a faint red track for the remainder so the ring stays legible even
when --p clamps to 0% (value below the joint min). Alarms at an in-range position
(collision, unreachable target) thus still read the true dial value. The inner
glass disc keeps the "A#" label readable — the label follows the theme text colour
(NOT hardcoded white: the disc is near-white in the light theme). */
.axis-chip.out-of-range .ring {
background:
radial-gradient(closest-side, var(--glass-strong) 72%, transparent 73% 100%),
conic-gradient(var(--err) var(--p), rgba(255, 82, 82, 0.28) 0);
color: var(--text);
}
.axis-chip.out-of-range .axis-val {
color: var(--text);
}
.axis-chip .ring {
--p: 50%;
width: 26px;
height: 26px;
border-radius: 50%;
background:
radial-gradient(closest-side, var(--glass-strong) 72%, transparent 73% 100%),
conic-gradient(var(--acc-fill) var(--p), var(--track) 0);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 8.5px;
color: var(--text-dim);
}
.axis-chip .axis-val {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 12.5px;
color: var(--text);
min-width: 58px;
text-align: right;
}
/* ---------- Empty state hero (no robot) ---------- */
.hero-empty {
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--topbar-h) + 30px) 20px 60px;
}
.hero-card {
max-width: 560px;
width: 100%;
text-align: center;
padding: 48px 42px 38px;
}
.radar {
position: relative;
width: 110px;
height: 110px;
margin: 0 auto 26px;
}
.radar .ring-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid var(--acc);
opacity: 0;
animation: radar-pulse 2.8s var(--ease) infinite;
}
.radar .ring-pulse:nth-child(2) {
animation-delay: 0.9s;
}
.radar .ring-pulse:nth-child(3) {
animation-delay: 1.8s;
}
.radar .radar-core {
position: absolute;
inset: 38px;
border-radius: 50%;
background: var(--acc-soft);
border: 1px solid var(--acc);
display: flex;
align-items: center;
justify-content: center;
color: var(--acc);
}
.radar .radar-core svg {
width: 17px;
height: 17px;
}
@keyframes radar-pulse {
0% {
transform: scale(0.4);
opacity: 0.85;
}
100% {
transform: scale(1.25);
opacity: 0;
}
}
.hero-card h2 {
font-size: 24px;
margin: 8px 0 10px;
}
.conn-block {
margin: 26px 0 22px;
padding: 16px 18px;
border-radius: var(--r-md);
background: var(--glass-soft);
border: 1px solid var(--edge);
text-align: left;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.8;
color: var(--text-dim);
white-space: pre-line;
overflow-wrap: anywhere;
}
.conn-block b {
color: var(--acc);
font-weight: 500;
}
/* ---------- Settings ---------- */
/* No overflow:hidden here — the image tooltips (.tip-pop) pop above the section's top
edge and must not be clipped. Corner rounding is handled on the summary itself. */
.settings-section {
margin-bottom: 20px;
}
.settings-section > summary {
list-style: none;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
cursor: pointer;
user-select: none;
font-family: var(--font-display);
font-size: 16px;
color: var(--text);
border-left: 3px solid var(--acc);
border-radius: calc(var(--r-lg) - 1px);
transition: background 0.15s;
}
.settings-section[open] > summary {
border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.settings-section > summary::-webkit-details-marker {
display: none;
}
.settings-section > summary:hover {
background: var(--row-hover);
}
.settings-section > summary .chev {
margin-left: auto;
transition: transform 0.25s var(--ease);
color: var(--text-faint);
display: flex;
}
.settings-section > summary .chev svg {
width: 16px;
height: 16px;
}
.settings-section[open] > summary .chev {
transform: rotate(180deg);
}
.settings-body {
padding: 8px 24px 24px;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-start;
}
.settings-group {
flex: 1 1 100%;
border: 1px solid var(--edge);
border-radius: var(--r-md);
padding: 14px 16px 16px;
background: var(--glass-soft);
}
.settings-group .group-label {
margin-bottom: 12px;
}
.settings-group .group-items {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-start;
}
/* Individual setting field */
.prc-field {
display: flex;
flex-direction: column;
gap: 6px;
width: 150px;
}
.prc-field.wide {
width: 250px;
}
/* Field that fills its container (grid cell / flex column) instead of the fixed settings-page width */
.prc-field.fluid {
width: 100%;
min-width: 0;
}
.prc-field .field-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-dim);
min-height: 16px;
}
.prc-field .field-control {
display: flex;
align-items: center;
gap: 7px;
}
.prc-field .field-unit {
font-size: 11.5px;
color: var(--text-faint);
font-family: var(--font-mono);
white-space: nowrap;
}
/* Frame wrapper around a help image. The frame (glass bg + border) lives on the
wrapper so the dark-mode .theme-flip filter only inverts the artwork inside. */
.field-img {
display: inline-flex;
width: 44px;
height: 44px;
border-radius: var(--r-sm);
background: var(--glass-soft);
border: 1px solid var(--edge);
padding: 4px;
}
.field-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.field-path {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
overflow-wrap: anywhere;
}
/* Sticky apply bar */
.apply-bar {
position: sticky;
bottom: 18px;
z-index: 30;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 26px;
padding: 13px 14px 13px 22px;
border-radius: var(--r-lg);
background: var(--glass-strong);
backdrop-filter: blur(22px) saturate(1.5);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
border: 1px solid var(--edge-strong);
box-shadow: var(--shadow);
}
/* ---------- Tooltip ---------- */
.prc-tip {
position: relative;
display: inline-flex;
}
.prc-tip > .tip-trigger {
display: inline-flex;
align-items: center;
color: var(--text-faint);
cursor: help;
}
.prc-tip > .tip-trigger svg {
width: 13px;
height: 13px;
}
.prc-tip .tip-pop {
position: absolute;
bottom: calc(100% + 9px);
left: 50%;
transform: translateX(-50%) translateY(4px);
z-index: 80;
width: max-content;
max-width: 290px;
padding: 9px 12px;
border-radius: 10px;
background: var(--glass-strong);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--edge-strong);
box-shadow: var(--shadow);
color: var(--text);
font-size: 12px;
font-weight: 400;
line-height: 1.5;
text-transform: none;
letter-spacing: normal;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s var(--ease) 0s, transform 0.18s var(--ease) 0s, visibility 0s 0.2s;
}
.prc-tip:hover .tip-pop,
.prc-tip:focus-within .tip-pop {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0.35s, 0.35s, 0.35s;
}
.prc-tip .tip-pop img {
max-width: 100%;
border-radius: 6px;
display: block;
margin: 0 auto 6px;
}
/* ---------- Modal ---------- */
.prc-modal-backdrop {
position: fixed;
inset: 0;
z-index: 90;
background: rgba(4, 6, 10, 0.55);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: fade-in 0.2s var(--ease) both;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.prc-modal {
width: min(560px, 100%);
max-height: min(78vh, 760px);
display: flex;
flex-direction: column;
border-radius: var(--r-lg);
background: var(--glass-strong);
backdrop-filter: blur(24px) saturate(1.5);
-webkit-backdrop-filter: blur(24px) saturate(1.5);
border: 1px solid var(--edge-strong);
box-shadow: var(--shadow);
animation: modal-in 0.28s var(--ease) both;
}
@keyframes modal-in {
from {
opacity: 0;
transform: translateY(16px) scale(0.97);
}
to {
opacity: 1;
transform: none;
}
}
.prc-modal .modal-head {
display: flex;
align-items: center;
gap: 12px;
padding: 17px 22px 13px;
border-bottom: 1px solid var(--edge);
}
.prc-modal .modal-head h3 {
font-size: 16px;
flex: 1;
}
.prc-modal .modal-body {
padding: 18px 22px;
overflow-y: auto;
font-size: 13.5px;
}
.prc-modal .modal-foot {
display: flex;
justify-content: flex-end;
gap: 9px;
padding: 13px 22px 17px;
border-top: 1px solid var(--edge);
}
/* ---------- File tree ---------- */
.prc-tree {
max-height: 320px;
overflow: auto;
border: 1px solid var(--edge);
border-radius: var(--r-md);
background: var(--glass-soft);
padding: 8px 6px;
font-family: var(--font-mono);
font-size: 12.5px;
}
.prc-tree ul {
list-style: none;
margin: 0;
padding-left: 17px;
}
.prc-tree > ul {
padding-left: 2px;
}
.tree-node {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 7px;
cursor: pointer;
color: var(--text-dim);
white-space: nowrap;
user-select: none;
}
.tree-node:hover {
background: var(--row-hover);
color: var(--text);
}
.tree-node.selected {
background: var(--acc-soft);
color: var(--acc);
}
.tree-node svg {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
.tree-node .tw {
display: flex;
width: 12px;
flex: 0 0 auto;
color: var(--text-faint);
transition: transform 0.18s var(--ease);
}
.tree-node .tw.open {
transform: rotate(90deg);
}
.tree-node .tw svg {
width: 11px;
height: 11px;
}
.tree-hint {
padding: 2px 8px 2px 26px;
color: var(--text-faint);
font-style: italic;
user-select: none;
}
/* ---------- File/folder picker dialog ---------- */
.quick-locs {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 10px;
}
.newfolder-row {
display: flex;
align-items: center;
gap: 7px;
margin-top: 10px;
}
.path-input {
font-family: var(--font-mono);
font-size: 12.5px;
}
.field-hint {
font-size: 11.5px;
color: var(--text-faint);
margin-top: 4px;
}
.field-hint.warn {
color: var(--warn);
}
.modal-foot .push-left {
margin-right: auto;
}
/* ---------- Toasts ---------- */
.prc-toasts {
position: fixed;
top: calc(var(--topbar-h) + 26px);
right: 18px;
z-index: 120;
display: flex;
flex-direction: column;
gap: 10px;
width: min(380px, calc(100vw - 36px));
}
.prc-toast {
display: flex;
gap: 12px;
padding: 13px 15px;
border-radius: var(--r-md);
background: var(--glass-strong);
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--edge-strong);
border-left-width: 3px;
box-shadow: var(--shadow);
animation: toast-in 0.3s var(--ease) both;
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateX(26px);
}
to {
opacity: 1;
transform: none;
}
}
.prc-toast.ok { border-left-color: var(--ok); }
.prc-toast.info { border-left-color: var(--info); }
.prc-toast.warn { border-left-color: var(--warn); }
.prc-toast.err { border-left-color: var(--err); }
.prc-toast .toast-icon {
flex: 0 0 auto;
margin-top: 1px;
}
.prc-toast .toast-icon svg {
width: 16px;
height: 16px;
}
.prc-toast.ok .toast-icon { color: var(--ok); }
.prc-toast.info .toast-icon { color: var(--info); }
.prc-toast.warn .toast-icon { color: var(--warn); }
.prc-toast.err .toast-icon { color: var(--err); }
.prc-toast .toast-text {
flex: 1 1 auto;
min-width: 0;
}
.prc-toast .toast-title {
font-size: 13px;
font-weight: 800;
letter-spacing: 0.03em;
}
.prc-toast .toast-detail {
font-size: 12.5px;
color: var(--text-dim);
margin-top: 2px;
overflow-wrap: anywhere;
}
.prc-toast .toast-close {
flex: 0 0 auto;
align-self: flex-start;
background: none;
border: none;
color: var(--text-faint);
cursor: pointer;
padding: 2px;
border-radius: 6px;
}
.prc-toast .toast-close:hover {
color: var(--text);
}
.prc-toast .toast-close svg {
width: 13px;
height: 13px;
}
/* ---------- License page ---------- */
.license-hero {
display: flex;
align-items: center;
gap: 22px;
padding: 24px 28px;
margin-bottom: 20px;
}
.license-hero .big-led {
width: 56px;
height: 56px;
flex: 0 0 auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.license-hero .big-led svg {
width: 24px;
height: 24px;
}
.license-hero .big-led.ok {
background: rgba(61, 220, 132, 0.12);
border: 1px solid var(--ok);
color: var(--ok);
box-shadow: 0 0 22px rgba(61, 220, 132, 0.3);
}
.license-hero .big-led.warn {
background: rgba(255, 179, 0, 0.12);
border: 1px solid var(--warn);
color: var(--warn);
box-shadow: 0 0 22px rgba(255, 179, 0, 0.3);
}
.license-hero .big-led.err {
background: rgba(255, 82, 82, 0.12);
border: 1px solid var(--err);
color: var(--err);
box-shadow: 0 0 22px rgba(255, 82, 82, 0.3);
}
.kv-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 7px 26px;
font-size: 13.5px;
}
.kv-grid dt {
color: var(--text-faint);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
align-self: center;
}
.kv-grid dd {
margin: 0;
font-family: var(--font-mono);
color: var(--text);
}
.note-warn { color: var(--warn); }
.note-err { color: var(--err); }
.note-ok { color: var(--ok); }
/* ---------- Footer ---------- */
/* In normal flow at the end of each content page (rendered via ). */
.prc-footer {
margin-top: 44px;
padding-top: 18px;
border-top: 1px solid var(--edge);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--text-faint);
line-height: 1.7;
text-align: center;
user-select: none;
}
.prc-footer .tag {
color: var(--acc);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 700;
}
/* ---------- Blazor error UI ---------- */
#blazor-error-ui {
display: none;
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
z-index: 200;
width: min(620px, calc(100vw - 32px));
padding: 14px 44px 14px 18px;
border-radius: var(--r-md);
background: var(--glass-strong);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--err);
border-left-width: 3px;
box-shadow: var(--shadow);
color: var(--text);
font-size: 13px;
}
#blazor-error-ui .reload {
color: var(--acc);
font-weight: 700;
margin-left: 8px;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 12px;
top: 10px;
color: var(--text-dim);
}
.blazor-error-boundary {
padding: 1rem;
border-radius: var(--r-md);
background: rgba(255, 82, 82, 0.12);
border: 1px solid var(--err);
color: var(--text);
}
.blazor-error-boundary::after {
content: "An error has occurred.";
}
/* ---------- Chart container ---------- */
.chart-shell {
padding: 18px 16px 8px;
}
.chart-shell .apexcharts-canvas {
margin: 0 auto;
}
html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-menu {
background: var(--glass-strong) !important;
border: 1px solid var(--edge-strong) !important;
color: var(--text) !important;
}
/* ---------- Analysis page ---------- */
/* Issue-kind color coding, shared by tiles, chart bands, ribbon lanes and badges:
collision red, out-of-reach orange, singularity amber, near-limit blue. */
.an-k-collision {
--kc: #ff5252;
--kc-soft: rgba(255, 82, 82, 0.16);
}
.an-k-reach {
--kc: #ff9800;
--kc-soft: rgba(255, 152, 0, 0.16);
}
.an-k-singularity {
--kc: #ffc107;
--kc-soft: rgba(255, 193, 7, 0.18);
}
.an-k-nearlimit {
--kc: #57b2ff;
--kc-soft: rgba(87, 178, 255, 0.16);
}
/* Amber reads as white-on-white in the light theme. */
html[data-theme="light"] .an-k-singularity {
--kc: #c79100;
--kc-soft: rgba(199, 145, 0, 0.14);
}
html[data-theme="light"] .an-k-reach {
--kc: #e07c00;
}
/* Compact head: title + verdict on one row, tightened so the chart starts as
high as possible (small/embedded viewports, e.g. next to Grasshopper). */
.an-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.an-head h1 {
margin-top: 0;
}
/* Robot + sample-count + reduction line below the tiles. */
.an-info {
margin: 12px 2px 0;
font-size: 12.5px;
}
.an-verdict {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--edge-strong);
background: var(--glass);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.an-verdict svg {
width: 15px;
height: 15px;
}
.an-verdict.ok {
color: var(--ok);
border-color: rgba(61, 220, 132, 0.4);
}
.an-verdict.warn {
color: var(--warn);
border-color: rgba(255, 179, 0, 0.4);
}
.an-verdict.err {
color: var(--err);
border-color: rgba(255, 82, 82, 0.45);
box-shadow: 0 0 14px rgba(255, 82, 82, 0.25);
}
/* Health tiles (below the graph and the issue map) */
.an-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin-top: 14px;
}
.an-tile {
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 15px;
border-radius: var(--r-md);
border: 1px solid var(--edge);
border-left: 3px solid var(--kc);
background: var(--glass);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
text-align: left;
font-family: var(--font-body);
color: var(--text);
cursor: pointer;
transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.an-tile:not(:disabled):hover {
transform: translateY(-1px);
border-color: var(--kc);
box-shadow: 0 0 16px var(--kc-soft);
}
.an-tile:disabled {
cursor: default;
}
.an-tile.quiet {
border-left-color: var(--edge-strong);
}
.an-tile.quiet .an-tile-value {
color: var(--text-faint);
}
.an-tile .an-tile-label {
color: var(--text-dim);
}
.an-tile .an-tile-value {
font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
color: var(--kc);
}
.an-tile.quiet .an-tile-label {
color: var(--text-faint);
}
.an-tile .an-tile-sub {
font-size: 11px;
color: var(--text-dim);
min-height: 14px;
}
/* Chart header row */
.an-chart-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 2px 6px 10px;
}
.an-modes label.disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Readout group right of the mode chips. flex-wrap + normal-wrapping pose text:
on narrow windows the readout breaks onto extra lines instead of overflowing
the chart card. */
.an-chart-meta {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 1 auto;
flex-wrap: wrap;
gap: 4px 12px;
min-width: 0;
}
.an-cursor {
font-size: 12px;
white-space: nowrap;
}
/* Cartesian pose of the cursor sample + vendor-format selector. Label/value
pairs are NBSP-joined in code, so wrapping only happens between pairs. */
.an-pose {
font-size: 12px;
text-align: right;
min-width: 0;
color: var(--text);
}
.an-pose-select {
appearance: none;
-webkit-appearance: none;
height: 26px;
padding: 0 22px 0 9px;
border-radius: var(--r-sm);
border: 1px solid var(--field-edge);
background: var(--field-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23888f9f'/%3E%3C/svg%3E") no-repeat right 8px center;
color: var(--text);
font-family: var(--font-mono);
font-size: 11px;
outline: none;
cursor: pointer;
}
.an-pose-select:focus {
border-color: var(--acc);
box-shadow: 0 0 0 3px var(--acc-soft);
}
.an-pose-select option {
background: var(--glass-strong);
color: var(--text);
}
/* Full-toolpath issue map */
.an-ribbon {
margin-top: 14px;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 7px;
}
.an-lane {
display: grid;
grid-template-columns: 92px 1fr;
align-items: center;
gap: 12px;
}
.an-lane-label {
font-size: 9px;
text-align: right;
white-space: nowrap;
}
.an-lane-track {
position: relative;
height: 14px;
border-radius: 4px;
background: var(--track);
overflow: hidden;
}
.an-seg {
position: absolute;
top: 0;
bottom: 0;
min-width: 2px;
border: none;
border-radius: 2px;
background: var(--kc);
opacity: 0.85;
cursor: pointer;
padding: 0;
transition: opacity 0.15s var(--ease);
}
.an-seg:hover {
opacity: 1;
box-shadow: 0 0 8px var(--kc);
}
.an-viewport {
position: absolute;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.12);
border-left: 1px solid var(--edge-strong);
border-right: 1px solid var(--edge-strong);
pointer-events: none;
}
html[data-theme="light"] .an-viewport {
background: rgba(15, 20, 30, 0.10);
}
.an-ribbon-cursor {
position: absolute;
top: -1px;
bottom: -1px;
width: 2px;
margin-left: -1px;
background: var(--acc-fill);
box-shadow: 0 0 6px var(--acc-glow);
pointer-events: none;
}
/* Findings + envelope cards */
.an-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
margin-top: 16px;
align-items: start;
}
.an-card {
padding: 20px 22px;
}
.an-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 13px;
}
.an-card-note {
font-size: 11.5px;
}
.an-clear {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 6px;
color: var(--ok);
}
.an-clear svg {
width: 22px;
height: 22px;
flex: 0 0 auto;
}
.an-clear p {
margin: 0;
font-size: 13px;
color: var(--text-dim);
}
.an-scroll {
max-height: 360px;
overflow-y: auto;
overflow-x: auto;
}
.an-findings th {
position: sticky;
top: 0;
background: var(--glass-strong);
z-index: 1;
}
.an-finding {
cursor: pointer;
}
.an-badge {
display: inline-block;
padding: 2px 9px;
border-radius: 999px;
background: var(--kc-soft);
color: var(--kc);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.an-cmd {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.an-more {
margin: 10px 2px 0;
font-size: 11.5px;
}
/* Axis envelope rows */
.an-axes {
display: flex;
flex-direction: column;
}
.an-axis-row {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 86px 118px 84px;
align-items: center;
gap: 12px;
padding: 7px 2px;
border-bottom: 1px solid var(--edge);
}
.an-axis-row:last-child {
border-bottom: none;
}
.an-axes-head {
padding-bottom: 4px;
}
.an-axes-head .overline {
font-size: 9px;
}
.an-axis-name {
font-size: 12.5px;
color: var(--text);
}
.an-env-track {
position: relative;
height: 8px;
border-radius: 4px;
background: var(--track);
overflow: hidden;
}
.an-env-used {
position: absolute;
top: 0;
bottom: 0;
border-radius: 4px;
background: var(--text-faint);
}
.an-env-track.ok .an-env-used {
background: var(--ok);
}
.an-env-track.warn .an-env-used {
background: var(--warn);
}
.an-env-track.err .an-env-used {
background: var(--err);
box-shadow: 0 0 8px rgba(255, 82, 82, 0.5);
}
.an-env-meta {
margin-top: 3px;
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.an-axis-margin {
font-size: 11.5px;
text-align: right;
color: var(--text-dim);
}
.an-axis-margin.warn {
color: var(--warn);
font-weight: 700;
}
.an-axis-margin.err {
color: var(--err);
font-weight: 700;
}
.an-axis-speed {
display: flex;
align-items: center;
gap: 8px;
}
.an-speed-bar {
position: relative;
flex: 1 1 auto;
height: 5px;
border-radius: 3px;
background: var(--track);
overflow: hidden;
}
.an-speed-bar > span {
position: absolute;
inset: 0 auto 0 0;
border-radius: 3px;
background: var(--acc-fill);
}
.an-speed-bar.warn > span {
background: var(--warn);
}
.an-speed-bar.err > span {
background: var(--err);
}
.an-speed-val {
font-size: 11px;
color: var(--text-dim);
min-width: 34px;
text-align: right;
}
.an-speed-val.warn {
color: var(--warn);
}
.an-speed-val.err {
color: var(--err);
}
.an-axis-flags {
font-size: 10.5px;
color: var(--text-dim);
text-align: right;
white-space: nowrap;
}
@media (max-width: 1150px) {
.an-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.an-axis-row {
grid-template-columns: 30px minmax(0, 1fr) 74px;
}
.an-axis-speed,
.an-axis-flags,
.an-axes-head span:nth-child(4),
.an-axes-head span:nth-child(5) {
display: none;
}
.an-lane {
grid-template-columns: 70px 1fr;
}
}
/* ---------- Responsive ---------- */
/* Collapse nav labels to icons before the labelled nav outgrows the row and
slides over the robot pill. Full labels need ~1330px of layout; below that
the brand can't shrink and the pill collapses, so the nav overlaps the
dropdown. Keep this above that fit point (was 1080, which left a 1080-1350
overlap band). */
@media (max-width: 1350px) {
.nav-link span.nav-text {
display: none;
}
.nav-link {
padding: 0 11px;
}
.nav-link.active::after {
left: 9px;
right: 9px;
}
}
/* Top-bar element priority as the window narrows: the decorative brand gives
up space before the functional robot selector.
wordmark (940) -> RIA logo / brand (840) -> robot pill (700). */
@media (max-width: 940px) {
.brand-wordmark {
display: none;
}
.prc-topbar {
gap: 10px;
}
}
@media (max-width: 840px) {
.brand {
display: none;
}
.prc-topbar {
gap: 8px;
padding: 0 10px;
}
}
@media (max-width: 700px) {
.robot-pill {
display: none;
}
}
/* Page content layout on small screens. */
@media (max-width: 760px) {
.dock {
flex-wrap: wrap;
gap: 12px;
}
.panel-pad {
padding: 20px 18px;
}
.license-hero {
flex-direction: column;
text-align: center;
}
.kv-grid {
grid-template-columns: 1fr;
gap: 2px;
}
.kv-grid dt {
margin-top: 9px;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}