/* Define the reusable colours, spacing, and shadows for every application state. */
:root {
  color-scheme: light;
  --navy-950: #071a2c;
  --navy-900: #102a43;
  --navy-800: #173f5f;
  --blue-600: #1379c5;
  --blue-100: #dff1ff;
  --green-700: #147d42;
  --green-600: #1b9a52;
  --green-100: #ddf7e8;
  --amber-700: #9a5b00;
  --amber-100: #fff2cf;
  --red-700: #b42318;
  --red-100: #fee4e2;
  --slate-900: #152536;
  --slate-700: #415466;
  --slate-500: #6e8091;
  --slate-300: #c9d4de;
  --slate-200: #dee6ed;
  --slate-100: #eef3f7;
  --surface: #ffffff;
  --canvas: #f3f7fa;
  --shadow: 0 18px 45px rgba(15, 42, 66, 0.10);
  --radius-large: 24px;
  --radius-medium: 16px;
  --radius-small: 11px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--canvas);
  color: var(--slate-900);
}

/* Include borders and padding inside declared dimensions such as the 40 px I/O boxes. */
* {
  box-sizing: border-box;
}

/* Remove browser margins and paint a subtle technical background. */
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 100% 0%, rgba(19, 121, 197, 0.13), transparent 28rem),
    linear-gradient(180deg, #f8fbfd 0%, var(--canvas) 100%);
}

/* Keep navigation and application content in one adaptive page frame. */
.app-layout {
  min-height: 100vh;
}

/* Prevent the page behind an open compact menu from scrolling. */
body.menu-open {
  overflow: hidden;
}

/* Cover the complete phone screen with a white, black-text navigation panel. */
.main-menu {
  position: fixed;
  z-index: 220;
  inset: 0 0 0 auto;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-left: 1px solid #dedede;
  background: #ffffff;
  color: #000000;
  box-shadow: -18px 0 48px rgba(7, 26, 44, 0.18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 220ms ease, visibility 220ms step-end;
}

/* Keep navigation absent—including on desktop—until a CAN device is connected. */
.main-menu[hidden],
.menu-toggle[hidden] {
  display: none !important;
}

/* Slide compact navigation into view without moving the active device screen. */
.main-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 220ms ease, visibility 0ms step-start;
}

/* Separate the menu title and close action from scrollable navigation groups. */
.main-menu-header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 86px;
  border-bottom: 1px solid #dedede;
  background: #ffffff;
  padding: max(18px, env(safe-area-inset-top)) 22px 18px;
}

/* Use a quiet context label while preserving the requested black menu title. */
.main-menu-eyebrow {
  margin: 0 0 3px;
  color: #555555;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Override the shared h2 scale inside the compact menu header. */
.main-menu-title {
  margin: 0;
  color: #000000;
  font-size: 25px;
  line-height: 1.1;
}

/* Keep the close control simple and clearly visible against white. */
.menu-close {
  width: 46px;
  min-width: 46px;
  padding: 0;
  border: 1px solid #d1d1d1;
  border-radius: 50%;
  background: #ffffff;
  color: #000000;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

/* Stack every main destination in the exact requested order. */
.main-menu-groups {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Divide expandable main destinations without using tab-sized targets. */
.main-menu-group {
  border-bottom: 1px solid #e5e5e5;
  background: #ffffff;
}

/* Make every main destination a large black-text touch target. */
.main-menu-group summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  color: #000000;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

/* Remove the browser's duplicate details marker before drawing one consistent icon. */
.main-menu-group summary::-webkit-details-marker {
  display: none;
}

/* Use the requested compact > / x indicator without requiring image assets. */
.main-menu-group summary::after {
  content: ">";
  flex: 0 0 auto;
  color: #333333;
  font-size: 15px;
  font-weight: 750;
}

.main-menu-group[open] summary::after {
  content: "x";
}

/* Give keyboard users an unmistakable focus position in the menu. */
.main-menu-group summary:focus-visible,
.main-submenu button:focus-visible,
.menu-close:focus-visible,
.menu-toggle:focus-visible {
  outline: 3px solid rgba(19, 121, 197, 0.35);
  outline-offset: -3px;
}

/* Visually nest configured submenu destinations below their main item. */
.main-submenu {
  display: grid;
  gap: 3px;
  border-top: 1px solid #ededed;
  background: #f7f7f7;
  padding: 8px 12px 12px;
}

/* Keep submenu text black and allow long future labels to wrap. */
.main-submenu button {
  width: 100%;
  min-height: 48px;
  border-radius: 9px;
  background: transparent;
  color: #000000;
  padding: 11px 18px 11px 30px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}

.main-submenu button:hover,
.main-submenu button.is-active {
  background: #e9f3fb;
}

/* Make not-yet-defined submenu groups honest without inventing page names. */
.main-submenu-empty {
  margin: 0;
  border-top: 1px solid #ededed;
  background: #f7f7f7;
  color: #666666;
  padding: 14px 22px 17px 30px;
  font-size: 13px;
  line-height: 1.4;
}

/* Dim the current content behind an open tablet menu. */
.menu-scrim {
  position: fixed;
  z-index: 210;
  inset: 0;
  min-height: 0;
  border-radius: 0;
  background: rgba(7, 26, 44, 0.46);
  padding: 0;
}

.menu-scrim[hidden] {
  display: none;
}

/* Reveal the keyboard skip link only when it receives focus. */
.skip-link {
  position: fixed;
  top: -80px;
  left: 12px;
  z-index: 100;
  border-radius: 8px;
  background: var(--navy-950);
  color: white;
  padding: 10px 14px;
}

/* Move the skip link on screen for keyboard navigation. */
.skip-link:focus {
  top: 12px;
}

/* Keep the app readable on tablets without stretching cards indefinitely. */
.app-shell {
  width: min(760px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
}

/* Align identity, transport status, and the top-right menu action. */
.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 0 2px 14px;
}

/* Keep the brand mark aligned with its two text lines. */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Display the supplied brand artwork without stretching its original proportions. */
.brand-logo {
  width: 102px;
  height: 68px;
  flex: 0 0 102px;
  margin-top: -7px;
  object-fit: contain;
}

/* Style the small uppercase context label. */
.eyebrow {
  margin: 0 0 3px;
  color: var(--blue-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Keep the product title compact on narrow phone screens. */
h1 {
  margin: 0;
  color: var(--navy-950);
  font-size: clamp(20px, 5.7vw, 28px);
  line-height: 1.05;
}

/* Show the selected API source as a compact header badge. */
/* Draw the requested three white hamburger bars inside a stable dark target. */
.menu-toggle {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 5px;
  border-radius: 13px;
  background: var(--navy-900);
  padding: 0 13px;
  box-shadow: 0 8px 20px rgba(16, 42, 67, 0.22);
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: #ffffff;
}

/* Reserve a clean content area beneath the stable header. */
.screen {
  outline: none;
}

/* Apply the shared elevated surface to state, list, and telemetry cards. */
.card {
  border: 1px solid rgba(201, 212, 222, 0.85);
  border-radius: var(--radius-large);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* Keep central connection states visually calm and focused. */
.state-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Provide a consistent circular state icon. */
.state-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-600);
  font-size: 30px;
  font-weight: 900;
}

/* Use red only for actionable error states. */
.state-icon.error {
  background: var(--red-100);
  color: var(--red-700);
}

/* Animate the connecting icon without moving surrounding layout. */
.spinner {
  width: 30px;
  height: 30px;
  border: 4px solid rgba(19, 121, 197, 0.20);
  border-top-color: var(--blue-600);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

/* Rotate the spinner continuously during native and CAN connection work. */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Style all screen-level headings consistently. */
h2 {
  margin: 0;
  color: var(--navy-950);
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1.12;
}

/* Give explanatory copy comfortable measure and contrast. */
.state-copy,
.section-copy {
  max-width: 560px;
  margin: 11px 0 0;
  color: var(--slate-700);
  line-height: 1.55;
}

/* Present technical details separately from the friendly error message. */
.technical-detail {
  width: 100%;
  margin-top: 18px;
  border-radius: var(--radius-small);
  background: var(--slate-100);
  color: var(--slate-700);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: left;
}

/* Place buttons in a wrapping row that becomes full-width on phones. */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
}

/* Give all buttons a consistent accessible hit target. */
button {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

/* Provide a visible keyboard focus indicator. */
button:focus-visible,
.device-card:focus-visible {
  outline: 3px solid rgba(19, 121, 197, 0.28);
  outline-offset: 3px;
}

/* Add subtle physical feedback for pointer input. */
button:active:not(:disabled) {
  transform: translateY(1px);
}

/* Explain unavailable actions without hiding their position. */
button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

/* Use blue for normal primary workflow actions. */
.button-primary {
  background: var(--blue-600);
  color: white;
  box-shadow: 0 8px 18px rgba(19, 121, 197, 0.22);
}

/* Reserve green for the deliberate device Connect action. */
.button-connect {
  width: 100%;
  margin-top: 16px;
  background: var(--green-600);
  color: white;
  box-shadow: 0 8px 18px rgba(27, 154, 82, 0.22);
}

/* Use a neutral surface for secondary actions. */
.button-secondary {
  border: 1px solid var(--slate-300);
  background: white;
  color: var(--navy-900);
}

/* BTN_* visual classes control appearance only; JavaScript does not depend on these sizes. */
.BTN_Small,
.BTN_Medium,
.BTN_Large {
  border: 1px solid var(--blue-600);
  background: var(--blue-600);
  color: white;
  box-shadow: 0 8px 18px rgba(19, 121, 197, 0.22);
}

/* Provide a compact reusable button appearance. */
.BTN_Small {
  min-height: 38px;
  padding: 8px 13px;
  font-size: 13px;
}

/* Provide the default reusable button appearance used by the Phase 5 example. */
.BTN_Medium {
  min-height: 46px;
  padding: 11px 18px;
  font-size: 15px;
}

/* Provide a prominent reusable button appearance without changing its behavior. */
.BTN_Large {
  min-height: 54px;
  padding: 14px 23px;
  font-size: 17px;
}

/* Dim any functional control while its write owns or waits for the serial queue. */
.device-control-pending {
  cursor: wait;
  opacity: 0.62;
}

/* Confirm a completed command without replacing the visual class's base colour. */
.device-control-success {
  outline: 3px solid rgba(27, 154, 82, 0.28);
  outline-offset: 2px;
}

/* Make invalid configuration and failed writes visible while allowing a retry. */
.device-control-error {
  outline: 3px solid rgba(180, 35, 24, 0.32);
  outline-offset: 2px;
}

/* Let a valid data-change-color mapping override only the button's state colour. */
.device-control-mapped-color {
  border-color: var(--device-control-state-color);
  background: var(--device-control-state-color);
}

/* Apply the most readable configured text candidate without changing visual button classes. */
.device-control-auto-text-color {
  color: var(--device-control-text-color);
}

/* Distinguish a temporary read issue from a write failure. */
.device-control-read-warning {
  box-shadow: 0 0 0 3px rgba(154, 91, 0, 0.24);
}

/* Mark a repeatedly unreadable button state while preserving its last mapped colour. */
.device-control-read-stale {
  outline: 3px dashed var(--amber-700);
  outline-offset: 2px;
}

/* Report invalid color entries without disabling otherwise valid read/write behavior. */
.device-control-config-warning {
  text-decoration: underline dotted currentColor 2px;
  text-underline-offset: 4px;
}

/* Place write feedback directly beside the reusable control that produced it. */
.device-control-status {
  flex-basis: 100%;
  color: var(--slate-700);
  font-size: 12px;
  line-height: 1.45;
}

.device-control-error + .device-control-status {
  color: var(--red-700);
}

/* Value_* visual classes control text appearance independently of read behavior. */
.Value_Small,
.Value_Medium,
.Value_Large {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.Value_Small {
  font-size: 13px;
}

.Value_Medium {
  font-size: 18px;
}

.Value_Large {
  font-size: 30px;
}

/* Keep an unread value visually quiet while its first command is pending. */
.device-value-loading {
  opacity: 0.58;
}

/* Retain the last good value while signalling a temporary read problem. */
.device-value-warning {
  text-decoration: underline dotted var(--amber-700) 2px;
  text-underline-offset: 5px;
}

/* Make repeated failures clearly stale without replacing the last useful value. */
.device-value-stale {
  color: var(--amber-700);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Reserve the red state for invalid element configuration. */
.device-value-error {
  color: var(--red-700);
}

/* Display configuration or stale information next to its exact reusable value. */
.device-value-status {
  display: block;
  margin-top: 7px;
  color: inherit;
  font-size: 11px;
  line-height: 1.4;
}

/* Ensure generated status elements remain absent until they contain useful feedback. */
.device-control-status[hidden],
.device-value-status[hidden] {
  display: none;
}

/* Create the progress track used by the Node 1 through 127 scan. */
.progress-track {
  width: min(430px, 100%);
  height: 10px;
  margin-top: 25px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--slate-200);
}

/* JavaScript changes this width as each node completes. */
.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-600), #23a6d5);
  transition: width 140ms ease;
}

/* Separate progress text from the main scan message. */
.progress-label {
  margin-top: 11px;
  color: var(--slate-500);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Align a section title with its contextual action. */
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

/* Keep device cards in a simple one-column mobile list. */
.device-list {
  display: grid;
  gap: 12px;
}

/* Make an entire discovered-device card act as one accessible selection control. */
.device-card {
  width: 100%;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  border: 2px solid var(--slate-200);
  border-radius: var(--radius-medium);
  background: white;
  padding: 14px;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

/* Highlight exactly one selected device without shifting the layout. */
.device-card.selected {
  border-color: var(--green-600);
  background: var(--green-100);
}

/* Reserve a fixed visual area for a future product image. */
.product-placeholder {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--slate-300);
  border-radius: 14px;
  background: var(--slate-100);
  color: var(--slate-500);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

/* Prevent long raw identifiers from breaking the card layout. */
.device-details {
  min-width: 0;
}

/* Emphasize the resolved product name. */
.device-product {
  margin: 0;
  color: var(--navy-950);
  font-size: 17px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

/* Display vendor and serial information as supporting metadata. */
.device-meta {
  margin: 4px 0 0;
  color: var(--slate-700);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Display the Node ID as a compact technical badge. */
.node-badge {
  border-radius: 999px;
  background: var(--navy-900);
  color: white;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Keep the Auto Setup connection summary compact at every screen width. */
.main-device-header.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 11px 13px;
  border-radius: 17px;
}

.main-device-identity {
  min-width: 0;
}

.main-device-header .eyebrow {
  margin-bottom: 2px;
}

.main-device-header h2 {
  margin: 0;
  overflow: hidden;
  font-size: clamp(20px, 4.6vw, 26px);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-device-header .button-secondary {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 13px;
  white-space: nowrap;
}

/* Give every newly prepared menu destination one consistent blank page surface. */
.device-page {
  min-height: clamp(240px, 42vh, 440px);
  min-width: 0;
  max-width: 100%;
}

.device-page h2 {
  margin: 0;
}

/* Stack reusable device-parameter presets into a calm settings list. */
.parameter-list {
  display: grid;
  gap: 22px;
  margin-top: 18px;
}

.parameter-section {
  min-width: 0;
  max-width: 100%;
}

.parameter-section-title {
  margin: 0 0 9px;
  border-bottom: 1px solid var(--slate-200);
  padding: 0 2px 7px;
  color: var(--blue-700);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parameter-section-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

/* Parameter_Row controls appearance; parameter_read_write owns behavior. */
.Parameter_Row {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  background: #f8fafc;
  padding: 15px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.parameter-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
}

.parameter-heading h4 {
  margin: 0;
  color: var(--navy-900);
  font-size: 16px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.parameter-heading code {
  color: var(--slate-500);
  font-size: 11px;
  white-space: nowrap;
}

.parameter-editor {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.parameter-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.parameter-field-label {
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.parameter-current-field strong {
  min-height: 42px;
  display: flex;
  align-items: center;
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  background: white;
  padding: 8px 11px;
  color: var(--navy-900);
  font-size: 14px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.parameter-field input,
.parameter-field select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  border: 1px solid var(--slate-300);
  border-radius: 10px;
  background: white;
  color: var(--navy-900);
  padding: 8px 10px;
  font: inherit;
}

.parameter-field input:focus,
.parameter-field select:focus {
  border-color: var(--blue-600);
  outline: 3px solid rgba(19, 121, 197, 0.14);
}

.parameter-actions {
  display: flex;
  gap: 7px;
}

.parameter-set-button {
  min-height: 42px;
  background: var(--green-600);
  color: white;
  padding: 8px 17px;
}

.parameter-info-button {
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--slate-300);
  border-radius: 50%;
  background: white;
  color: var(--blue-600);
  padding: 0;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 800;
}

.parameter-info-panel {
  margin-top: 13px;
  border-top: 1px solid var(--slate-200);
  padding-top: 12px;
  color: var(--slate-700);
  font-size: 13px;
  line-height: 1.5;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.parameter-info-panel p {
  margin: 0;
}

.parameter-choice-help {
  margin-top: 7px !important;
  color: var(--slate-500);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.parameter-source-warning {
  border-left: 3px solid #d99a23;
  padding-left: 9px;
  color: #75520d;
}

.parameter-readonly-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.parameter-readonly-info {
  display: grid;
  justify-items: end;
}

.parameter-readonly-info summary {
  display: grid;
  place-items: center;
  cursor: pointer;
  list-style: none;
}

.parameter-readonly-info summary::-webkit-details-marker {
  display: none;
}

.parameter-readonly-info[open] {
  grid-column: 1 / -1;
  width: 100%;
}

.parameter-readonly-info .parameter-info-panel {
  width: 100%;
  text-align: left;
}

.parameter-status {
  margin: 10px 0 0;
  color: var(--slate-600);
  font-size: 12px;
}

.parameter-write-pending {
  border-color: rgba(19, 121, 197, 0.55);
}

.parameter-write-success {
  border-color: rgba(27, 154, 82, 0.62);
  box-shadow: 0 0 0 3px rgba(27, 154, 82, 0.08);
}

.parameter-write-error,
.parameter-configuration-error,
.parameter-read-stale {
  border-color: rgba(196, 53, 53, 0.58);
}

.parameter-write-error .parameter-status,
.parameter-configuration-error .parameter-status,
.parameter-read-stale .parameter-status {
  color: var(--red-600, #c43535);
}

@media (max-width: 650px) {
  .parameter-editor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .parameter-actions {
    grid-column: 1 / -1;
  }

  .parameter-set-button {
    flex: 1 1 auto;
  }
}

@media (max-width: 420px) {
  .parameter-list {
    gap: 17px;
    margin-top: 12px;
  }

  .parameter-section-list {
    gap: 8px;
  }

  .Parameter_Row {
    border-radius: 13px;
    padding: 11px;
  }

  .parameter-heading {
    flex-wrap: wrap;
    gap: 3px 8px;
    margin-bottom: 9px;
  }

  /*
   * Keep the current and new values beside one another in phone portrait
   * instead of stacking both fields into separate full-width rows.
   */
  .parameter-editor {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 8px;
  }

  .parameter-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 6px;
  }

  .parameter-current-field strong,
  .parameter-field input,
  .parameter-field select {
    min-height: 38px;
    padding: 7px 8px;
    font-size: 13px;
  }

  .parameter-set-button {
    min-height: 38px;
    padding: 7px 13px;
  }

  .parameter-info-button {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
  }
}

/* Arrange timer and status cards responsively. */
.telemetry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* Separate reusable controls from read-only telemetry on the connected screen. */
.device-control-panel {
  margin-top: 14px;
}

.device-control-panel h3 {
  margin: 8px 0 0;
  color: var(--navy-950);
  font-size: 19px;
}

.device-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

/* Arrange parameter choices consistently while leaving their button visuals reusable. */
.device-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.device-control-grid .BTN_Small,
.device-control-grid .BTN_Medium,
.device-control-grid .BTN_Large {
  width: 100%;
}

@media (min-width: 580px) {
  .device-control-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Use a stronger navy treatment for the primary timer value. */
.timer-card {
  background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
  color: white;
}

/* Label telemetry values consistently. */
.telemetry-label {
  margin: 0;
  color: inherit;
  opacity: 0.72;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Keep changing numeric timer values stable and readable. */
.timer-value {
  margin: 9px 0 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(25px, 8vw, 38px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Place all eight digital indicators in a wrapping row. */
.io-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* Keep one label attached to each exact 40 by 40 pixel indicator. */
.io-channel {
  display: grid;
  justify-items: center;
  gap: 6px;
}

/* Satisfy the requested 40 px square, black border, and inactive gray state. */
.io-box {
  width: 40px;
  height: 40px;
  border: 2px solid #000000;
  border-radius: 5px;
  background: #9ca3af;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}

/* Turn an active bit green while preserving the same border and dimensions. */
.io-box.active {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

/* Label the eight physical positions clearly. */
.io-label {
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 800;
}

/* Show temporary communication failures without replacing healthy telemetry immediately. */
.warning-banner {
  margin-bottom: 14px;
  border: 1px solid #f3c969;
  border-radius: var(--radius-small);
  background: var(--amber-100);
  color: var(--amber-700);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
}

/* Keep footer transport information quiet but visible. */
.app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 20px 8px 0;
  color: var(--slate-500);
  font-size: 11px;
}

/* Use a small green dot as a neutral transport indicator. */
.footer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
}

/* Hide accessibility-only content visually while keeping it in the document. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Use exactly half the viewport for the slide-over menu on tablet widths. */
@media (min-width: 600px) and (max-width: 1099px) {
  .main-menu {
    width: 50vw;
  }
}

/* Replace the hamburger with an always-visible two-row desktop top menu. */
@media (min-width: 1100px) {
  body.menu-open {
    overflow: auto;
  }

  .app-layout {
    display: block;
  }

  .main-menu {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 94px;
    overflow: visible;
    transform: none;
    visibility: visible;
    border-left: 0;
    border-bottom: 1px solid #cfcfcf;
    box-shadow: 0 8px 24px rgba(7, 26, 44, 0.09);
    transition: none;
  }

  .main-menu-header {
    display: none;
  }

  .main-menu-groups {
    position: relative;
    height: 94px;
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow: visible;
    padding: 0 16px;
  }

  .main-menu-group {
    position: static;
    flex: 0 0 auto;
    border-right: 1px solid #dedede;
    border-bottom: 0;
  }

  .main-menu-group:first-child {
    border-left: 1px solid #dedede;
  }

  .main-menu-group summary {
    min-height: 46px;
    height: 46px;
    gap: 7px;
    border-bottom: 1px solid #d5d5d5;
    padding: 9px 11px;
    font-size: 13px;
    white-space: nowrap;
  }

  .main-menu-group[open] summary {
    background: #e9f3fb;
    box-shadow: inset 0 -3px 0 var(--blue-600);
  }

  /* Desktop submenus are permanently represented by the second row. */
  .main-menu-group summary::after {
    display: none;
  }

  .main-submenu,
  .main-submenu-empty {
    position: absolute;
    top: 46px;
    right: 0;
    left: 0;
    min-height: 48px;
    border-top: 0;
    border-bottom: 1px solid #d5d5d5;
    background: #f7f7f7;
  }

  .main-submenu {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 4px 16px;
  }

  .main-submenu button {
    width: auto;
    min-height: 38px;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  .main-submenu-empty {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 10px 20px;
    font-size: 12px;
  }

  .menu-close,
  .menu-toggle,
  .menu-scrim {
    display: none !important;
  }

  .app-shell {
    width: min(1180px, 100%);
  }
}

/* Keep the hamburger at the top right when a phone header needs two rows. */
@media (max-width: 700px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .menu-toggle {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Stack complex rows on very narrow phones. */
@media (max-width: 520px) {
  .card {
    padding: 18px;
    border-radius: 20px;
  }

  .state-card {
    min-height: 330px;
  }

  .section-heading {
    display: block;
  }

  .section-heading button {
    width: 100%;
    margin-top: 14px;
  }

  .device-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .product-placeholder {
    width: 58px;
    height: 58px;
  }

  .node-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .actions button {
    width: 100%;
  }
}

/* Respect users who ask the operating system to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}