:root {
  color-scheme: dark;
  --bg: #dfe6ea; --panel: #edf2f4; --panel-2: #e5ecef; --ink: #1b2a31; --muted: #667882; --line: #c5d1d7;
  --accent: #0f766e; --accent-2: #2563eb; --danger: #b42318; --ok: #16803c; --hour: #f59e0b; --minute: #dc2626;
  --clock-face: #edf2f4; --clock-mark: #6b7b86; --clock-hour: #d88906; --clock-minute: #0f766e;
  --shadow: 0 8px 22px rgba(23, 32, 38, 0.07); --plot-bg: #eaf0f2; --console-bg: #10181d; --console-ink: #cceee7;
}
body.dark {
  color-scheme: dark;
  --bg: #121212; --panel: #1e1e1e; --panel-2: #242424; --ink: #e8eef2; --muted: #9dafba; --line: #3a444a;
  --accent: #2dd4bf; --accent-2: #60a5fa; --danger: #f87171; --ok: #4ade80;
  --clock-face: #10181d; --clock-mark: #9dafba; --clock-hour: #60a5fa; --clock-minute: #2dd4bf;
  --shadow: none; --plot-bg: #15181a; --console-bg: #0d0f10; --console-ink: #bff7ec;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; overflow-x: clip; overflow-y: auto; background: var(--bg); }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); transition: background 220ms ease, color 220ms ease; }

.app { display: grid; grid-template-rows: auto minmax(0, 1fr) clamp(140px, 16vh, 190px); gap: clamp(6px, 0.9vw, 10px); width: 100%; min-height: 100dvh; height: 100dvh; min-width: 0; padding: clamp(6px, 0.9vw, 10px); background: var(--bg); }
header, section { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); min-height: 0; overflow: hidden; transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 14px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
h1 { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 760; line-height: 1; }
h2 { margin: 0; font-size: 13px; letter-spacing: 0; }

.clock-logo { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--clock-minute); background: var(--clock-face); position: relative; box-shadow: 0 0 18px color-mix(in srgb, var(--clock-minute) 35%, transparent); flex: 0 0 auto; }
.clock-logo::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--clock-mark) 0 2deg, transparent 2deg 30deg); opacity: 0.7; }
.clock-logo .hand { position: absolute; left: 50%; bottom: 50%; width: 2px; border-radius: 999px; transform-origin: 50% 100%; z-index: 2; }
.clock-logo .hour-hand { height: 10px; background: var(--clock-hour); animation: clockHour 24s linear infinite; }
.clock-logo .minute-hand { height: 14px; background: var(--clock-minute); animation: clockMinute 4s linear infinite; }
.clock-logo .pin { position: absolute; width: 6px; height: 6px; left: calc(50% - 3px); top: calc(50% - 3px); border-radius: 50%; background: var(--clock-hour); z-index: 3; }
@keyframes clockMinute { to { transform: rotate(360deg); } }
@keyframes clockHour { to { transform: rotate(360deg); } }

.toolbar { display: flex; gap: clamp(5px, 0.8vw, 8px); flex-wrap: wrap; align-items: center; min-width: 0; }
.toolbar.nowrap { flex-wrap: nowrap; }
.header-actions { justify-content: flex-end; min-width: 0; }
label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 700; }
input, select { width: 100%; min-width: 0; min-height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; color: var(--ink); background: var(--panel-2); }
button { min-width: 0; min-height: 32px; border: 1px solid var(--accent); border-radius: 6px; padding: 6px 10px; font: inherit; font-weight: 750; color: white; background: var(--accent); cursor: pointer; white-space: nowrap; transition: transform 120ms ease, box-shadow 180ms ease, filter 180ms ease; }
button.secondary { color: var(--accent); background: transparent; }
button.danger { border-color: var(--danger); background: var(--danger); color: white; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.serial-disabled { opacity: 0.45; filter: grayscale(1); }
.serial-disabled input,
.serial-disabled select,
.serial-disabled button { cursor: not-allowed; }
button.flash { animation: buttonGlow 620ms ease; }
button.mode-on { background: var(--accent); border-color: var(--accent); color: #071312; box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); }
body:not(.dark) button.mode-on { color: white; }
.led-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.led-actions button { width: 100%; }
@keyframes buttonGlow { 45% { transform: translateY(-1px); box-shadow: 0 0 22px rgba(45, 212, 191, 0.75); } }
.icon-button { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.toggle-button { width: 150px; white-space: normal; line-height: 1.1; overflow-wrap: anywhere; }
.port-select { width: 154px; }
.access-select { width: 126px; }
.is-hidden { display: none !important; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(4, 8, 10, 0.68); backdrop-filter: blur(6px); }
.modal { width: min(420px, 100%); border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32); padding: 16px; display: grid; gap: 14px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h2 { font-size: 16px; }
.modal-close { position: relative; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, var(--line)); }
.modal-close:hover,
.modal-close:focus-visible { background: var(--accent); color: #071312; border-color: var(--accent); }
body:not(.dark) .modal-close:hover,
body:not(.dark) .modal-close:focus-visible { color: white; }
.modal-close::before,
.modal-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; }
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-form { display: grid; gap: 10px; }
.modal-form label { color: var(--ink); font-size: 12px; }
.modal-form input { min-height: 36px; }
.remember-row { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; color: var(--muted) !important; }
.remember-row input { width: 16px; min-width: 16px; min-height: 16px; height: 16px; padding: 0; accent-color: var(--accent); }
.modal-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.modal-status { min-height: 18px; color: var(--muted); font: 12px/1.3 Consolas, monospace; overflow-wrap: anywhere; }

.metrics-band { padding: clamp(6px, 0.8vw, 9px) clamp(8px, 1.2vw, 12px); }
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 0.9vw, 10px); height: auto; align-items: stretch; }
.metric, .i2c-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: clamp(6px, 0.9vw, 8px) clamp(7px, 1vw, 10px); display: grid; align-content: center; gap: 3px; min-width: 0; min-height: 0; transition: background 220ms ease, border-color 220ms ease; }
.metric .label { color: var(--muted); font-size: clamp(12px, 0.9vw, 14px); font-weight: 800; }
.metric .value { font-size: clamp(19px, 1.65vw, 26px); font-weight: 850; line-height: 1; }
.metric .sub { color: var(--muted); font-size: clamp(12px, 0.85vw, 13px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.work-band { display: grid; grid-template-columns: minmax(390px, 36%) minmax(0, 64%); gap: clamp(6px, 1vw, 10px); min-height: 0; width: 100%; }
.control-stack { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(6px, 1vw, 10px); min-height: 0; }
.control-stack section, .plot-stack section, .output-section { padding: clamp(6px, 1vw, 10px); }
.plot-stack { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1vw, 10px); min-height: 0; }
.plot-card { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 7px; min-width: 0; min-height: 0; }
.plot-head { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(190px, 1.2fr) minmax(190px, 1fr); gap: 8px; align-items: center; min-height: 28px; }
.plot-title { display: grid; gap: 1px; }
.plot-title strong { font-size: 13px; }
.plot-title span { color: var(--muted); font-size: 11px; }
.legend { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.legend button { min-height: 22px; padding: 2px 6px; font-size: 11px; color: var(--ink); background: var(--panel-2); border-color: var(--line); }
.legend button.off { opacity: 0.42; }
.plot-measurements, .plot-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.plot-measurements { justify-content: center; }
.plot-controls { justify-content: flex-end; }
.plot-stats, .plot-cursor { min-height: 24px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--muted); font: 12px/1.25 Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(100%, 430px); }
.plot-cursor { display: none; }
.cursor-float { pointer-events: none; }
.vbatt-controls { gap: 8px; }
.plot-burst-control { margin-right: 14px; min-height: 22px; padding: 2px 8px; font-size: 11px; color: white; background: #16a34a; border-color: #16a34a; }
.plot-burst-control.mode-on { background: #dc2626; border-color: #dc2626; box-shadow: 0 0 12px color-mix(in srgb, #dc2626 42%, transparent); }
.scale-toggle { min-height: 22px; padding: 2px 7px; font-size: 11px; color: var(--accent); background: transparent; border-color: var(--line); }
.scale-toggle.mode-on { color: #071312; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent); }
body:not(.dark) .scale-toggle.mode-on { color: white; }
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
canvas { width: 100%; height: 100%; display: block; border: 1px solid var(--line); border-radius: 6px; background: var(--plot-bg); cursor: crosshair; }

.i2c-card { grid-column: 1 / -1; align-content: stretch; grid-template-rows: auto auto; gap: 6px; }
.i2c-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.8fr); gap: 8px; min-height: 0; align-items: stretch; }
.i2c-controls { display: grid; grid-template-rows: repeat(2, auto); gap: 6px; min-width: 0; align-content: center; }
.i2c-row { display: grid; gap: 6px; align-items: end; justify-items: stretch; min-width: 0; }
.i2c-row.read-row { grid-template-columns: minmax(120px, 1.4fr) minmax(130px, 1.4fr) minmax(64px, 0.7fr) minmax(58px, 0.7fr); }
.i2c-row.write-row { grid-template-columns: minmax(0, 1fr) minmax(58px, 0.7fr) minmax(72px, 0.8fr); }
.i2c-row > * { width: 100%; align-self: end; }
.i2c-row button { height: 30px; min-height: 30px; padding: 4px 8px; }
.reg-info { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 7px 8px; display: grid; grid-template-rows: auto 1fr; gap: 4px; min-width: 0; transition: background 220ms ease, border-color 220ms ease; }
.reg-info strong { font-size: 12px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; margin: 0; align-content: center; min-width: 0; }
.reg-info dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.reg-info dd { margin: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led-section { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: clamp(6px, 1vw, 8px); height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
.led-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 38%); gap: clamp(8px, 1.2vw, 12px); min-height: 0; align-items: stretch; }
.clock-led-frame { display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; }
.clock-led-face { position: relative; width: min(100%, 36vh, 460px); height: auto; aspect-ratio: 1 / 1; justify-self: center; align-self: center; border-radius: 50%; border: 1px solid var(--line); background: radial-gradient(circle, var(--panel-2) 0 18%, transparent 18.5%), repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--line) 80%, transparent) 0 1deg, transparent 1deg 15deg); min-height: 0; }
.led { --led-size: clamp(24px, 10%, 46px); position: absolute; width: var(--led-size); height: var(--led-size); min-height: 0; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid #8fa0aa; background: var(--panel); color: var(--ink); padding: 0; display: grid; place-items: center; transform: translate(-50%, -50%); font-size: clamp(7px, 0.58vw, 10px); line-height: 1; text-align: center; overflow: hidden; }
.led.activity-led { --led-size: clamp(32px, 13%, 56px); width: var(--led-size); height: var(--led-size); left: 50%; top: 50%; color: transparent; border-color: var(--hour); }
.led.hour.active, .led.hour.pulse { border-color: var(--hour); background: var(--hour); box-shadow: 0 0 18px rgba(245, 158, 11, 0.7); color: white; }
.led.minute.active, .led.minute.pulse { border-color: var(--minute); background: var(--minute); color: white; box-shadow: 0 0 18px rgba(220, 38, 38, 0.7); }
.led.activity-led.on { background: var(--hour); box-shadow: 0 0 18px rgba(245, 158, 11, 0.75); }
.led.locked { pointer-events: none; cursor: default; }
.led.uart-blocked { --clock-led-rest-opacity: 0.32; opacity: 0.32; filter: grayscale(1); border-style: dashed; box-shadow: none; cursor: not-allowed; }
.led.uart-blocked.active, .led.uart-blocked.pulse { background: var(--panel); color: var(--muted); box-shadow: none; }
.clock-led-face.clock-intro {
  animation: clock-frame-intro 900ms cubic-bezier(0.2, 0.82, 0.24, 1) both;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}
.clock-led-face.clock-intro .led {
  --clock-led-rest-opacity: 1;
  opacity: 0;
  will-change: opacity, transform;
}
.clock-led-face.clock-intro .led.uart-blocked { --clock-led-rest-opacity: 0.32; }
.clock-led-face.clock-intro .led.activity-led {
  animation: clock-led-icon-intro 1230ms ease-out 120ms both;
}
.clock-led-face.clock-intro .led.hour {
  animation: clock-led-icon-intro 140ms ease-out var(--clock-intro-delay, 480ms) both;
}
.clock-led-face.clock-intro .led.minute {
  animation: clock-led-icon-intro 200ms ease-out var(--clock-intro-delay, 350ms) both;
}
@keyframes clock-frame-intro {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@keyframes clock-led-icon-intro {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  to { opacity: var(--clock-led-rest-opacity); transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .clock-led-face.clock-intro,
  .clock-led-face.clock-intro .led {
    animation: none;
    opacity: var(--clock-led-rest-opacity, 1);
    transform: none;
  }
  .clock-led-face.clock-intro .led {
    transform: translate(-50%, -50%);
  }
}
.step-panel { display: grid; grid-template-rows: minmax(52px, 0.48fr) minmax(52px, 0.48fr) minmax(46px, 0.42fr) minmax(142px, 1.35fr); gap: 6px; min-height: 0; }
.step-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); padding: clamp(5px, 0.7vw, 8px); display: grid; align-content: center; gap: 3px; min-width: 0; min-height: 0; overflow: hidden; transition: background 220ms ease, border-color 220ms ease; }
.step-card > span { color: var(--muted); font-size: clamp(12px, 0.95vw, 14px); font-weight: 800; }
.step-card strong { font-size: clamp(19px, 1.65vw, 26px); font-weight: 850; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-unit { margin-left: 9px; color: inherit; font: inherit; }
.step-card small { color: var(--muted); font-size: clamp(11px, 0.85vw, 13px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-setter { grid-template-rows: auto minmax(0, 1fr); }
.step-set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.step-set-row input { min-height: 30px; font-size: clamp(15px, 1.05vw, 17px); }
.step-set-row button { width: 48px; min-width: 48px; min-height: 30px; padding: 4px 8px; font-size: clamp(13px, 0.95vw, 15px); }
.haptic-card { align-content: stretch; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.haptic-card.step-card { align-content: stretch; }
.haptic-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.haptic-status { min-width: 48px; min-height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--accent); border-radius: 6px; padding: 4px 8px; color: var(--accent); background: transparent; font-size: 12px; font-weight: 800; line-height: 1; }
.haptic-status.pass { color: white; background: var(--ok); border-color: var(--ok); }
.haptic-status.fail { color: white; background: var(--danger); border-color: var(--danger); }
.haptic-status.busy { color: #071312; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent); }
body:not(.dark) .haptic-status.busy { color: white; }
.haptic-controls { display: grid; grid-template-rows: auto minmax(62px, 1fr) auto; gap: 5px; min-height: 0; }
.haptic-controls label { min-height: 0; gap: 3px; font-size: 11px; line-height: 1.1; }
.haptic-controls .waveform-field { grid-template-rows: auto auto; }
.haptic-controls .description-field { grid-template-rows: auto minmax(0, 1fr); }
.haptic-controls select { min-height: 30px; height: 30px; padding-block: 4px; font-size: 12px; }
.haptic-description { resize: none; min-height: 58px; height: 100%; line-height: 1.25; color: var(--ink); background: var(--panel); border-color: var(--line); }
.haptic-controls button { width: 100%; min-height: 32px; height: 32px; padding-block: 4px; }
.led.pulse, .activity-pulse { animation: pressPulse 520ms ease; }
@keyframes pressPulse { 45% { transform: translate(-50%, -50%) scale(1.08); } }

.output-section { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; }
.output-bar { display: grid; grid-template-columns: minmax(190px, 1.4fr) minmax(112px, 0.75fr) minmax(112px, 0.75fr) repeat(7, minmax(78px, 1fr)); gap: 6px; align-items: stretch; min-width: 0; }
.baud-inline, .stream-inline { display: grid; grid-template-columns: auto minmax(64px, 1fr); gap: 5px; align-items: center; color: var(--muted); font-size: 11px; font-weight: 700; height: 100%; }
.baud-inline select { min-width: 76px; }
.stream-inline select { min-width: 66px; }
.output-bar > button { width: 100%; height: 100%; min-height: 30px; align-self: stretch; display: inline-grid; place-items: center; padding: 4px 7px; font-size: 13px; }
#startAllBtn { font-size: 13px; line-height: 1.05; white-space: normal; }
pre { height: 100%; min-height: 72px; overflow: auto; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--console-bg); color: var(--console-ink); font: 12px/1.35 Consolas, monospace; white-space: pre-wrap; }
.vbatt-card { grid-template-rows: auto minmax(0, 1fr); align-content: center; gap: 5px; }
.vbatt-main { display: grid; gap: 2px; align-content: center; min-width: 0; }

@media (max-height: 860px) and (min-width: 761px) {
  .app { height: 100dvh; min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr) clamp(150px, 18vh, 210px); }
  .work-band, .control-stack { min-height: 0; }
  .led-section { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .led-body { min-height: max-content; padding-bottom: 8px; align-items: start; }
  .step-panel { grid-template-rows: 50px 50px 44px minmax(126px, 1fr); gap: 4px; }
  .step-card { padding: 4px 7px; gap: 1px; }
  .step-card > span { font-size: 10px; line-height: 1.05; }
  .step-card strong { font-size: clamp(12px, 1.05vw, 17px); line-height: 1.05; }
  .step-unit { margin-left: 6px; }
  .step-card small { font-size: 9px; line-height: 1.05; }
  .step-set-row input, .step-set-row button { min-height: 25px; height: 25px; }
  .step-set-row button { width: 44px; min-width: 44px; }
}    @media (max-height: 760px) and (min-width: 761px) {
  .app { gap: 5px; padding: 6px; }
  header { min-height: 42px; padding-block: 4px; }
  .clock-logo { width: 30px; height: 30px; }
  .metrics-band { padding-block: 6px; }
  .control-stack section, .plot-stack section, .output-section { padding: 6px; }
  .led-section { gap: 4px; overflow: auto; overscroll-behavior: contain; }
  .led-actions { gap: 5px; }
  .led-actions button { min-height: 26px; padding-block: 2px; }
  .led-body { grid-template-columns: minmax(0, 1fr) minmax(174px, 0.95fr); gap: 7px; align-items: start; min-height: max-content; }
  .clock-led-face { width: min(100%, 27vh, 330px); min-width: 185px; }
  .step-panel { grid-template-rows: 50px 50px 44px minmax(112px, 1fr); gap: 4px; }
  .step-card { padding: 3px 7px; gap: 1px; }
  .step-card > span { font-size: 10px; line-height: 1.05; }
  .step-card strong { font-size: clamp(12px, 1.05vw, 17px); line-height: 1.05; }
  .step-unit { margin-left: 6px; }
  .step-card small { font-size: 9px; line-height: 1.05; }
  .step-set-row input, .step-set-row button { min-height: 25px; height: 25px; }
  .step-set-row button { width: 44px; min-width: 44px; }
  .haptic-title { gap: 5px; }
  .haptic-status { min-width: 44px; min-height: 25px; padding: 3px 7px; font-size: 11px; }
  .haptic-controls { grid-template-rows: auto minmax(34px, 1fr) auto; gap: 3px; }
  .haptic-controls label { font-size: 10px; gap: 2px; }
  .haptic-controls select { min-height: 24px; height: 24px; padding-block: 2px; font-size: 11px; }
  .haptic-description { min-height: 34px; line-height: 1.15; font-size: 11px; }
  .haptic-controls button { min-height: 24px; height: 24px; padding-block: 2px; }
}
@media (max-width: 1180px) {
  .app { min-height: 0; height: auto; grid-template-rows: auto auto auto; }
  .metric-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-band { min-height: 0; }
  .output-section { height: clamp(170px, 24vh, 240px); }
  .output-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .output-bar > input { grid-column: span 2; }
}


@media (max-width: 1180px) and (min-width: 761px) {
  .app { height: 100dvh; min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr) clamp(170px, 24vh, 240px); }
  .work-band, .control-stack { min-height: 0; }
  .led-section { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .led-body { min-height: max-content; padding-bottom: 8px; }
}

@media (max-width: 1050px) and (min-width: 761px) {
  .led-section { overflow: auto; overscroll-behavior: contain; }
  .led-body { min-height: max-content; }
}

@media (max-width: 1050px) {
  .plot-head { grid-template-columns: minmax(110px, 0.7fr) minmax(160px, 1fr) minmax(150px, 0.9fr); }
  .plot-stats, .plot-cursor { font-size: 11px; max-width: 320px; }
  .work-band { grid-template-columns: minmax(390px, 40%) minmax(0, 1fr); }
  .led-body { grid-template-columns: minmax(0, 1fr) minmax(180px, 40%); }
  .clock-led-face { width: min(100%, 34vh, 430px); }
  .i2c-body { grid-template-columns: minmax(0, 1fr); }
        .i2c-row.read-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i2c-row.write-row { grid-template-columns: minmax(0, 1fr) repeat(2, minmax(88px, 0.7fr)); }
  .reg-info { display: none; }
  .output-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .output-bar > input { grid-column: span 2; }
  #downloadBtn { display: none; }
}


@media (max-height: 760px) and (min-width: 761px) and (max-width: 1050px) {
  .control-stack { grid-template-rows: auto minmax(0, 1fr); gap: 5px; }
  .i2c-card { gap: 4px; }
  .i2c-body { grid-template-columns: minmax(0, 1.15fr) minmax(120px, 0.85fr); gap: 6px; }
  .i2c-controls { gap: 4px; }
  .i2c-row { gap: 4px; }
  .i2c-row.read-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(44px, 0.5fr) minmax(52px, 0.55fr); }
  .i2c-row.write-row { grid-template-columns: minmax(0, 1fr) minmax(58px, 0.6fr) minmax(66px, 0.7fr); }
  .i2c-row button, input, select { min-height: 26px; }
  .reg-info { display: grid; padding: 5px 6px; }
  .reg-info dl { gap: 2px 6px; }
  .reg-info dt { font-size: 9px; }
  .reg-info dd { font-size: 10px; }
  .metric-row { gap: 6px; }
  .metric { padding: 5px 7px; gap: 1px; }
  .metric .label { font-size: 11px; }
  .metric .value { font-size: 19px; }
  .metric .sub { font-size: 10px; }
  #downloadBtn { display: inline-grid; }
}    @media (max-width: 900px) {
  .plot-head { grid-template-columns: minmax(0, 1fr); }
  .plot-measurements { justify-content: center; }
  .plot-controls { justify-content: flex-end; }
  .work-band { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .plot-stack { grid-template-rows: none; min-height: 0; }
  .plot-card { height: clamp(230px, 42vw, 330px); aspect-ratio: auto; }
  .output-section { height: clamp(190px, 28vh, 260px); }
}

@media (max-width: 760px) {
  .app { grid-template-rows: auto auto auto; }
  header { align-items: stretch; flex-direction: column; }
  .header-actions { display: grid; grid-template-columns: minmax(74px, 0.8fr) minmax(0, 2fr); width: 100%; }
  .port-select, .access-select, .toggle-button { width: 100%; }
  #themeToggle { justify-self: start; }
  #accessModeSelect { grid-column: 2; }
  #refreshPortsBtn { grid-column: 1; }
  #connectionBtn { grid-column: 2; }
  .metric-row { grid-template-columns: minmax(0, 1fr); }
  .i2c-row.read-row, .i2c-row.write-row { grid-template-columns: minmax(0, 1fr); }
  .work-band { grid-template-columns: minmax(0, 1fr); }
  .plot-stack { display: grid; grid-template-rows: none; min-height: 0; }
  .plot-card { height: clamp(235px, 72vw, 310px); aspect-ratio: auto; }
  .plot-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; justify-content: normal; }
  .plot-controls .legend { grid-column: 2; justify-content: center; justify-self: center; }
  .plot-controls .scale-toggle { grid-column: 3; justify-self: end; }
  .vbatt-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; align-items: center; }
  .vbatt-controls #vbattLegend { justify-content: center; }
  .output-section { height: clamp(220px, 38vh, 300px); }
  .output-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .output-bar > input, .baud-inline, .stream-inline { grid-column: 1 / -1; }
  .led-actions { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .led-actions button { padding-inline: 4px; font-size: 12px; }
  .led-body { grid-template-columns: minmax(0, 1fr); }
  .clock-led-face { width: min(82vw, 360px); }
  .step-panel { grid-template-rows: repeat(3, minmax(58px, auto)) minmax(168px, auto); }
}

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .app {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: auto auto auto;
    padding: clamp(8px, 2.4vw, 14px);
    gap: clamp(8px, 2vw, 12px);
  }
  header { overflow: visible; }
  section { overflow: hidden; }
  header { position: static; }
  .work-band, .control-stack, .plot-stack {
    min-height: 0;
    height: auto;
  }
  .control-stack, .plot-stack { gap: clamp(8px, 2vw, 12px); }
  .metric-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric, .i2c-card, .step-card { min-height: 64px; }
  .i2c-card { min-height: 0; }
  .i2c-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .reg-info { display: grid; }
  .reg-info dl {
    grid-template-columns: repeat(2, auto minmax(0, 1fr));
    align-items: baseline;
  }
  .plot-card {
    height: clamp(260px, 55vw, 380px);
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .plot-card canvas { min-height: 0; }
  .plot-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .plot-title span,
  .plot-stats,
  .plot-cursor { white-space: normal; }
  .plot-measurements,
  .plot-controls {
    justify-content: flex-start;
  }
  .plot-stats,
  .plot-cursor {
    width: 100%;
    max-width: none;
  }
  .legend {
    flex: 1 1 auto;
    min-width: 0;
  }
  .legend button { white-space: nowrap; }
  .plot-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }
  .plot-controls .legend { justify-content: start; }
  .plot-controls .scale-toggle { justify-self: end; }
  .vbatt-controls {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .plot-burst-control {
    margin-right: 0;
    white-space: normal;
  }
  .output-section {
    height: clamp(300px, 45dvh, 430px);
    min-height: 0;
    max-height: 70dvh;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .output-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .output-bar > input { grid-column: 1 / -1; }
  .baud-inline, .stream-inline {
    grid-template-columns: minmax(0, 1fr);
  }
  .output-bar > button {
    min-height: 36px;
    white-space: normal;
    line-height: 1.1;
  }
  pre {
    min-height: 0;
    height: 100%;
  }
}

@media (max-width: 760px) {
  .app {
    padding: clamp(8px, 3.2vw, 12px);
  }
  header {
    gap: 12px;
    padding: 10px;
  }
  .brand { gap: 8px; }
  h1 {
    font-size: clamp(18px, 5.2vw, 22px);
    line-height: 1.15;
  }
  .clock-logo {
    width: 32px;
    height: 32px;
  }
  .header-actions {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }
  #themeToggle { grid-column: 1; }
  #accessModeSelect { grid-column: 2; }
  #portSelect { grid-column: 2; }
  #refreshPortsBtn { grid-column: 1 / 2; }
  #connectionBtn { grid-column: 2; }
  .header-actions button,
  .header-actions select {
    min-height: 40px;
  }
  .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .i2c-card {
    grid-column: 1 / -1;
    gap: 8px;
  }
  .i2c-controls {
    gap: 8px;
  }
  .i2c-row.read-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #readRegBtn { grid-column: 1 / -1; }
  .i2c-row.write-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .i2c-row.write-row > * { grid-column: 1; }
  .i2c-row button,
  input,
  select {
    min-height: 38px;
  }
  .reg-info dl {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .metric {
    min-height: 82px;
    align-content: start;
  }
  .metric .label,
  .metric .sub {
    white-space: normal;
  }
  .metric .value,
  .step-card strong {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .led-section {
    height: auto;
    max-height: none !important;
    overflow: visible;
  }
  .led-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .led-actions button {
    min-height: 38px;
    white-space: normal;
    line-height: 1.1;
  }
  .led-body {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .clock-led-frame {
    min-height: auto;
    padding-block: 4px;
  }
  .clock-led-face {
    width: min(100%, 82vw, 360px);
    max-width: 360px;
  }
  .led {
    --led-size: clamp(22px, 8.2vw, 38px);
    font-size: clamp(7px, 2.2vw, 10px);
  }
  .led.activity-led {
    --led-size: clamp(30px, 10vw, 48px);
  }
  .step-panel {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .haptic-card {
    grid-column: 1 / -1;
    min-height: 190px;
  }
  .haptic-controls {
    grid-template-rows: auto minmax(76px, 1fr) auto;
  }
  .plot-card {
    height: clamp(280px, 78vw, 360px);
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .plot-title strong {
    font-size: 14px;
  }
  .plot-measurements {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .plot-controls,
  .vbatt-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .plot-controls .legend,
  .vbatt-controls #vbattLegend {
    grid-column: 1;
    justify-content: start;
  }
  .plot-controls .scale-toggle,
  .vbatt-controls #vbattScaleBtn {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
  }
  .vbatt-controls #vbattBurstBtn {
    grid-column: 1;
    justify-self: stretch;
  }
  .scale-toggle,
  .legend button,
  .plot-burst-control {
    min-height: 32px;
    font-size: 12px;
  }
  .output-section {
    height: clamp(360px, 58dvh, 480px);
    min-height: 0;
  }
  .output-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .output-bar > input,
  .baud-inline,
  .stream-inline {
    grid-column: 1 / -1;
  }
  .baud-inline,
  .stream-inline {
    grid-template-columns: auto minmax(0, 1fr);
  }
  pre {
    min-height: 0;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .output-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .output-bar > * {
    grid-column: 1;
  }
}

@media (max-width: 430px) {
  .metric-row,
  .step-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .i2c-row.read-row,
  .i2c-row.write-row,
  .output-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .i2c-row.write-row > *,
  .output-bar > * {
    grid-column: 1 / -1;
  }
  .header-actions {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  #portSelect,
  #accessModeSelect,
  #connectionBtn {
    grid-column: 2;
  }
  .led-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .plot-controls,
  .vbatt-controls {
    grid-template-columns: minmax(0, 1fr);
  }
  .plot-controls .legend,
  .plot-controls .scale-toggle,
  .vbatt-controls #vbattBurstBtn,
  .vbatt-controls #vbattLegend,
  .vbatt-controls #vbattScaleBtn {
    grid-column: 1;
    justify-self: stretch;
  }
  .plot-controls .scale-toggle,
  .vbatt-controls #vbattScaleBtn {
    width: 100%;
  }
  .legend button {
    flex: 1 1 72px;
  }
  .baud-inline,
  .stream-inline {
    grid-template-columns: minmax(0, 1fr);
  }
  .plot-card {
    height: clamp(300px, 86vw, 360px);
  }
  .output-section {
    height: clamp(380px, 60dvh, 500px);
  }
}

/* Responsive QA overrides: keep dense controls readable across narrow and short viewports. */
.step-card strong {
  min-height: 1.15em;
  line-height: 1.15;
}

.step-card small {
  display: block;
  min-height: 1.15em;
  line-height: 1.15;
}

.haptic-card {
  min-height: min(210px, 100%);
}

.step-panel > .step-card:not(.haptic-card) {
  overflow: visible;
}

.step-panel > .step-card:not(.haptic-card):not(.step-setter) {
  min-height: 78px;
}

.step-setter {
  min-height: 58px;
}

.haptic-card {
  min-height: 152px;
}

@media (min-width: 901px) {
  .led-section {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .led-body {
    align-items: start;
  }

  .step-panel {
    min-height: max-content;
  }
}

@media (max-height: 860px) and (min-width: 761px) {
  .step-panel {
    grid-template-rows: minmax(78px, auto) minmax(78px, auto) minmax(50px, auto) minmax(148px, auto);
  }

  .step-panel > .step-card:not(.haptic-card) {
    min-height: 84px;
    overflow: visible;
  }

  .haptic-card {
    min-height: 148px;
  }

  .haptic-controls {
    grid-template-rows: auto minmax(44px, 1fr) auto;
  }

  .haptic-description {
    min-height: 44px;
  }
}

@media (max-width: 900px) {
  .plot-head {
    gap: 6px;
  }

  .plot-title strong,
  .plot-title span {
    overflow-wrap: anywhere;
  }

  .output-section {
    height: auto;
    max-height: none;
    min-height: 300px;
    grid-template-rows: auto minmax(150px, 1fr);
  }

  .output-bar {
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .metric-row {
    gap: 8px;
  }

  .step-card {
    overflow: visible;
  }

  .haptic-card {
    min-height: 188px;
  }

  .haptic-description {
    min-height: 64px;
  }

  .plot-card {
    height: auto;
    min-height: 310px;
  }

  .plot-card canvas {
    min-height: 150px;
  }

  .output-section {
    min-height: 360px;
  }
}

@media (max-width: 430px) {
  .header-actions {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .header-actions button,
  .header-actions select,
  .output-bar > button,
  .baud-inline select,
  .stream-inline select,
  #commandInput {
    min-height: 36px;
  }

  .metric-row,
  .step-panel,
  .output-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .i2c-card,
  .haptic-card,
  .step-setter,
  .output-bar > input,
  .baud-inline,
  .stream-inline {
    grid-column: 1 / -1;
  }

  .output-section {
    height: auto;
    min-height: 430px;
  }

  .output-bar > button {
    grid-column: auto;
  }

  pre {
    min-height: 132px;
  }
}

@media (max-width: 760px) {
  #connectionBtn {
    min-width: 0;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .output-section {
    height: auto;
    min-height: 340px;
    grid-template-rows: auto minmax(96px, 1fr);
  }

  .output-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .output-bar > button {
    grid-column: auto;
    min-height: 34px;
  }

  .output-bar > input,
  .baud-inline,
  .stream-inline {
    grid-column: 1 / -1;
  }

  .baud-inline,
  .stream-inline {
    min-height: 46px;
  }

  pre {
    min-height: 96px;
  }
}

@media (max-width: 560px) {
  .output-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .output-bar > button {
    grid-column: auto;
  }

  .output-bar > input,
  .baud-inline,
  .stream-inline {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .baud-inline {
    grid-column: 1;
  }

  .stream-inline {
    grid-column: 2;
  }
}

@media (min-width: 380px) and (max-width: 760px) {
  .led-section {
    gap: 6px;
  }

  .led-body {
    grid-template-columns: minmax(160px, 0.85fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  .clock-led-frame {
    align-self: start;
    padding-block: 0;
  }

  .clock-led-face {
    width: min(100%, 44vw, 230px);
  }

  .step-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .step-panel > .step-card:not(.haptic-card):not(.step-setter) {
    min-height: 62px;
  }

  .step-setter {
    min-height: 58px;
  }

  .haptic-card {
    min-height: 176px;
  }

  .haptic-description {
    min-height: 52px;
  }
}

@media (max-width: 379px) {
  .led-section {
    gap: 6px;
  }

  .clock-led-frame {
    padding-block: 0;
  }

  .clock-led-face {
    width: min(100%, 78vw, 300px);
  }
}

/* Layout correction pass: plot-height output, centered mobile watch, centered desktop LED body. */
@media (min-width: 761px) {
  .led-body {
    height: 100%;
    align-items: center !important;
    overflow: hidden;
  }

  .clock-led-frame,
  .step-panel {
    align-self: center;
  }

  .clock-led-face {
    width: min(100%, 30vh, 300px);
  }

  .step-panel {
    min-height: 0 !important;
    height: 100%;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .step-panel > .step-card:not(.haptic-card):not(.step-setter) {
    min-height: 62px;
  }

  .step-setter {
    min-height: 56px;
  }

  .haptic-card {
    min-height: 136px;
  }
}

@media (max-width: 760px) {
  button {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background-clip: padding-box;
    touch-action: manipulation;
  }

  button:focus:not(:focus-visible) {
    outline: none;
  }

  button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .icon-button,
  .modal-close,
  .led {
    border-radius: 50%;
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  .plot-card,
  .output-section {
    height: clamp(340px, 86vw, 390px);
    min-height: 0;
    max-height: none;
  }

  .output-section {
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  pre {
    height: 100%;
    min-height: 0;
  }

  .led-body {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    align-items: start;
    gap: 10px;
  }

  .clock-led-frame {
    width: 100%;
    padding-block: 2px;
  }

  .clock-led-face {
    width: min(100%, calc(100vw - 42px), 430px) !important;
    max-width: none;
    justify-self: center;
  }

  .step-panel {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  .step-panel > .step-card:not(.haptic-card):not(.step-setter) {
    min-height: 64px;
  }

  .step-setter,
  .haptic-card {
    grid-column: 1 / -1;
  }
}

/* Header refinement pass: centered mobile title and access controls. */
@media (max-width: 760px) {
  header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px;
    text-align: center;
  }

  .brand {
    width: 100%;
    justify-content: center;
  }

  h1 {
    line-height: 1.15;
    text-align: center;
  }

  .clock-logo {
    width: 38px;
    height: 38px;
  }

  .header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    justify-content: center;
    width: min(100%, 340px);
    margin-inline: auto;
  }

  .header-actions > *,
  #themeToggle,
  #accessModeSelect,
  #portSelect,
  #refreshPortsBtn,
  #connectionBtn {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .header-actions select,
  .header-actions button {
    width: min(100%, 280px);
  }

  #themeToggle {
    width: 40px;
  }
}

/* LED section: one sizing contract for the controls, clock face, and step panel. */
.led-section {
  --led-action-gap: 8px;
  --step-column-width: calc((100% - var(--led-action-gap) - var(--led-action-gap)) / 3);
  scrollbar-gutter: auto;
}

.led-actions {
  width: 100%;
  gap: var(--led-action-gap);
  justify-self: center;
  align-self: center;
  align-items: center;
  justify-content: center;
}

.led-actions button {
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  line-height: 1.2;
}

.clock-led-frame {
  position: relative;
  width: min(100%, 500px);
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  justify-self: center;
  align-self: center;
}

.clock-panel {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-items: center;
  justify-items: start;
}

.clock-led-face {
  grid-area: 1 / 1;
  place-self: stretch;
  width: 100% !important;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
}

.step-panel {
  width: 100%;
  justify-self: end;
  scrollbar-gutter: auto;
}

.step-panel-column {
  width: 100%;
  min-width: 0;
  min-height: 0;
  justify-self: end;
  align-self: center;
}

.step-panel > .step-card {
  grid-column: 1 / -1;
  width: min(calc(100% - 16px), 320px);
  justify-self: end;
  text-align: left;
  justify-items: stretch;
}

.step-panel > .step-card > span,
.step-panel > .step-card > strong,
.step-panel > .step-card > small {
  width: 100%;
  text-align: left;
}

.step-panel .step-set-row,
.step-panel .haptic-title,
.step-panel .haptic-controls {
  width: 100%;
}

.step-panel .haptic-title {
  justify-content: space-between;
}

@media (min-width: 761px) {
  .led-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .led-body {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) var(--step-column-width);
    justify-content: stretch;
    align-items: center !important;
  }

  .clock-led-frame {
    max-width: 550px;
    max-height: 550px;
    justify-self: start;
  }

  .step-panel {
    align-self: center;
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  .led-actions {
    gap: 5px;
  }

  .clock-led-frame {
    width: min(100%, 390px);
  }

  .clock-panel,
  .step-panel-column {
    width: 100%;
  }

  .clock-panel {
    justify-items: center;
  }

  .step-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }

  .step-panel > .step-card {
    width: 100%;
    justify-self: stretch;
  }

  .step-panel > .step-card:not(.step-setter):not(.haptic-card) {
    grid-column: auto;
  }

  .step-panel > .step-setter,
  .step-panel > .haptic-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 761px) and (max-height: 860px) {
  .step-panel {
    grid-template-rows: minmax(84px, auto) minmax(84px, auto) minmax(84px, auto) minmax(148px, auto);
  }
}

@media (min-width: 761px) {
  .led-body {
    padding-bottom: 0;
  }

  .clock-panel,
  .step-panel-column,
  .step-panel {
    height: 100%;
    min-height: 0;
  }

  .clock-panel {
    container-type: size;
    place-items: center;
  }

  .clock-led-frame {
    width: min(100cqw, 100cqh, 550px);
    max-width: 100%;
    max-height: 100%;
    justify-self: center;
    align-self: center;
  }

  .step-panel {
    grid-template-rows: repeat(3, 78px) minmax(148px, 1fr);
    align-content: stretch;
    row-gap: 6px;
  }

  .step-panel > .step-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    justify-self: stretch;
    padding: 4px 8px;
    gap: 2px;
  }

  .step-panel > .step-card.step-setter {
    min-height: 0;
  }

  .step-panel .haptic-controls {
    grid-template-rows: auto minmax(42px, 1fr) auto;
    gap: 4px;
  }

  .step-panel .haptic-description {
    min-height: 42px;
  }
}

/* Compact the metrics band on 1080p-class desktop viewports so LED controls fit without scrolling. */
@media (min-width: 1800px) and (min-height: 1000px) and (max-height: 1150px) {
  .control-stack {
    grid-template-rows: clamp(220px, 21.1vh, 228px) minmax(0, 1fr);
  }

  .control-stack > .metrics-band {
    padding: 6px 8px;
  }

  .metric-row {
    height: 100%;
    grid-template-rows: minmax(0, 1fr) 64px;
    gap: 6px;
  }

  .i2c-card {
    padding: 5px 7px;
    gap: 4px;
  }

  .i2c-card h2 {
    font-size: 12px;
    line-height: 1.1;
  }

  .i2c-body {
    grid-template-columns: minmax(0, 1.35fr) minmax(150px, 0.65fr);
    gap: 6px;
  }

  .i2c-controls,
  .i2c-row {
    gap: 4px;
  }

  .i2c-card label {
    gap: 2px;
    font-size: 10px;
    line-height: 1.1;
  }

  .i2c-row input,
  .i2c-row select,
  .i2c-row button {
    height: 26px;
    min-height: 26px;
    padding: 3px 6px;
    font-size: 11px;
  }

  .reg-info {
    padding: 5px 6px;
    gap: 2px;
  }

  .reg-info strong {
    font-size: 11px;
    line-height: 1.1;
  }

  .reg-info dl {
    gap: 1px 6px;
  }

  .reg-info dt {
    font-size: 9px;
    line-height: 1.1;
  }

  .reg-info dd {
    font-size: 10px;
    line-height: 1.1;
  }

  .metric {
    padding: 5px 7px;
    gap: 1px;
  }

  .metric .label {
    font-size: 11px;
    line-height: 1.1;
  }

  .metric .value {
    font-size: 20px;
  }

  .metric .sub {
    font-size: 10px;
    line-height: 1.1;
  }

  .vbatt-card {
    gap: 2px;
  }

  .step-panel .haptic-description {
    min-height: 0;
  }

  .led-section,
  .step-panel {
    overflow-y: hidden;
  }
}

@media (min-width: 2400px) and (min-height: 1300px) {
  .clock-led-frame {
    width: min(100cqw, 100cqh, 550px);
  }
}

/* Mobile header: keep the centered brand and align the primary connection controls. */
@media (max-width: 760px) {
  header {
    padding-inline: 0;
  }

  header .brand {
    padding-inline: 8px;
  }

  .header-actions {
    width: 100%;
    max-width: none;
    grid-template-columns: 40px repeat(2, minmax(0, 169px));
    justify-content: space-between;
    justify-items: stretch;
    gap: 6px;
    margin-top: 10px;
    padding-inline: 6px;
  }

  .header-actions > *,
  #accessModeSelect,
  #portSelect,
  #refreshPortsBtn,
  #connectionBtn {
    width: 100%;
    justify-self: stretch;
  }

  #themeToggle {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    aspect-ratio: 1 / 1;
    padding: 0;
  }

  #accessModeSelect {
    grid-column: 2;
    grid-row: 1;
  }

  #connectionBtn {
    grid-column: 3;
    grid-row: 1;
  }

  #portSelect {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #refreshPortsBtn {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (min-width: 761px) {
  .modal {
    width: min(620px, calc(100vw - 48px));
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 28px;
    gap: 20px;
  }

  .modal-head h2 {
    font-size: 20px;
  }

  .modal-form {
    gap: 16px;
  }

  .modal-form label {
    font-size: 14px;
  }

  .modal-form input:not([type="checkbox"]) {
    min-height: 48px;
  }

  .modal-actions {
    gap: 16px;
  }

  .modal-status {
    min-height: 20px;
    font-size: 13px;
  }

  #rtdbConnectBtn {
    min-height: 44px;
    padding-inline: 22px;
  }
}