/* Only rules Bootstrap 5.3 cannot express live here (hard rule #2). */

/* Bootstrap has no max-height utility. The simulator log needs a fixed scroll
   viewport so it never grows taller than the register table beside it; a
   vertical scrollbar appears once the log exceeds this height. */
#sim-log {
  max-height: 220px;
}

/* Bootstrap has no fixed square-sizing utility; the app's Connect button is a
   large circular FAB, so it needs explicit equal width/height + a big icon. */
.connect-fab {
  width: 9.5rem;
  height: 9.5rem;
  font-size: 3.75rem;
  line-height: 1;
}

/* The device shell (screens/DeviceInfoScreen.js) shows a fixed-bottom tab bar on
   mobile only; reserve space so content clears it when scrolled. On desktop the
   bar is replaced by a sidebar, so no bottom padding is needed there. Bootstrap
   has no height-matched padding utility. */
@media (max-width: 991.98px) {
  .pb-bottomnav { padding-bottom: 5rem; }
}

/* Desktop sidebar for the device shell: a fixed-width, self-scrolling rail that
   sticks below the navbar. Bootstrap has no fixed-width sidebar utility, and
   `position-sticky` alone can't cap its height/scroll. */
.slx-sidebar {
  width: 13rem;
  position: sticky;
  top: 1rem;
  align-self: flex-start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* Flex children default to min-width:auto, which lets the wide terminal grid
   push the content column past the viewport instead of shrinking. Bootstrap 5.3
   ships no min-width-0 utility. */
.min-w-0 { min-width: 0; }

/* The device shell's content column has a fixed reading width so screens don't
   stretch edge-to-edge on wide monitors. Bootstrap's container widths are
   step-based and tied to breakpoints; a single flat cap reads cleaner here. */
.slx-content { max-width: 60rem; }

/* RS-485/232 consoles keep a FIXED height (not max-height) so the send box below
   them stays put instead of creeping down as lines arrive. Bootstrap has no
   fixed-height utility. */
.slx-con { height: 12rem; }

/* Every log/console box (shared LogView + each protocol's logs) gets a FIXED
   height, not max-height: it scrolls inside instead of growing as lines arrive,
   so nothing below it (send boxes, tables) shifts down. Bootstrap has no
   fixed-height utility. */
.log-view {
  height: 14rem;
}

/* ============================================================================
   Landing identity — "three channels, one cable"
   The product multiplexes one USB cable into three live channels. The accent
   system is those three channels' colours (the same blue/teal/orange the hero
   diagram already used), promoted to reusable tokens. Bootstrap has no
   channel-colour concept and no per-channel utilities, so they live here.
   ========================================================================== */
:root {
  --slx-web:  var(--bs-primary);   /* Channel A — WebUSB  (browser GUI)     */
  --slx-cdc0: #20c997;             /* Channel B — CDC0    (PLC / terminal)  */
  --slx-cdc1: #fd7e14;             /* Channel C — CDC1    (second serial)   */
}
.slx-web  { color: var(--slx-web); }
.slx-cdc0 { color: var(--slx-cdc0); }
.slx-cdc1 { color: var(--slx-cdc1); }

/* A cooler, deeper enclosure background in dark mode than Bootstrap's stock
   grey — reads as instrument metal, not a generic dark theme. Utilities cannot
   set the theme's body/tertiary/border background variables. */
[data-bs-theme="dark"] {
  --bs-body-bg: #0e141d;
  --bs-body-bg-rgb: 14, 20, 29;
  --bs-tertiary-bg: #131b26;
  --bs-border-color: #26313f;
}

/* Tightened display headline: Bootstrap's display-* keep default tracking and
   line-height; the hero wants condensed, deliberate spacing utilities can't set. */
.slx-display { letter-spacing: -0.02em; line-height: 1.03; }

/* Monospace eyebrow: wide tracking on an uppercase label. No letter-spacing
   utility exists in Bootstrap. */
.slx-eyebrow { letter-spacing: 0.14em; }

/* Channel-readout signature (hero). Each lane carries one channel out of the
   mux; the left rail is the channel colour (via currentColor). A faint scan
   sweep + a blinking caret give the "live instrument" read — pure motion
   Bootstrap cannot express. Both are disabled for reduced-motion users below. */
.slx-lane { border-left: 3px solid currentColor; }
.slx-readout { position: relative; overflow: hidden; }
/* Sweep colour is theme-aware: a white sheen is invisible on a light panel, so
   the light theme sweeps with a grey tint instead (overridden below). */
.slx-readout {
  --slx-sweep: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="light"] .slx-readout {
  --slx-sweep: rgba(0, 0, 0, 0.06);
}
.slx-readout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 42%, var(--slx-sweep) 50%, transparent 58%);
  transform: translateX(-100%);
  animation: slx-sweep 7s linear infinite;
  pointer-events: none;
}
@keyframes slx-sweep { to { transform: translateX(100%); } }
.slx-caret { animation: slx-blink 1.1s steps(1) infinite; }
@keyframes slx-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .slx-readout::after,
  .slx-caret { animation: none; }
}


/* The promo video is a vertical YouTube Shorts (9:16). Bootstrap's .ratio
   helper ships only 1x1/4x3/16x9/21x9; a custom ratio needs this variable,
   and inline styles are banned. */
.ratio-9x16 { --bs-aspect-ratio: 177.78%; }

/* ---- Phase 2v: panel designer + designed panels ---------------------------
   The drag-and-drop device designer (js/components/FormDesigner.js) and the
   panels it produces (js/device/apps/DesignerRuntime.js). Bootstrap has no
   drag-state, drop-target or free-width-bar utilities, and inline styles are
   banned, so these four ideas need real rules. */

/* Palette items are draggable sources; only a cursor tells the user so. */
.dsgn-pal { cursor: grab; }

/* The dragged widget stays visible but recedes — Bootstrap's opacity utilities
   are static classes, and this state is toggled from dragstart/dragend. */
.dsgn-drag { opacity: .5; }

/* Drop targets: an empty dashed slot, highlighted while a widget hovers it.
   Bootstrap's border utilities have no dashed variant. */
.dsgn-dz {
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.dsgn-over { outline: 2px dashed var(--bs-primary); }

/* An empty canvas must still be a droppable area. */
.dsgn-canvas { min-height: 12rem; }

/* Live progress bars need a free percentage. Bootstrap ships only w-25/50/75/
   100 and inline styles are banned, so DesignerRuntime snaps the bar to this
   5 % ladder (.w-pct-0 … .w-pct-100). */
.w-pct-0   { width: 0; }
.w-pct-5   { width: 5%; }
.w-pct-10  { width: 10%; }
.w-pct-15  { width: 15%; }
.w-pct-20  { width: 20%; }
.w-pct-25  { width: 25%; }
.w-pct-30  { width: 30%; }
.w-pct-35  { width: 35%; }
.w-pct-40  { width: 40%; }
.w-pct-45  { width: 45%; }
.w-pct-50  { width: 50%; }
.w-pct-55  { width: 55%; }
.w-pct-60  { width: 60%; }
.w-pct-65  { width: 65%; }
.w-pct-70  { width: 70%; }
.w-pct-75  { width: 75%; }
.w-pct-80  { width: 80%; }
.w-pct-85  { width: 85%; }
.w-pct-90  { width: 90%; }
.w-pct-95  { width: 95%; }
.w-pct-100 { width: 100%; }