@lcars-gui/federation 0.0.0-stage → 0.1.0

package/dist/ui.css

@@ -0,0 +1,959 @@
+/* AUTO-GENERATED FROM tokens/ + css/*.css — DO NOT EDIT */
+
+:root {
+  --colors-text1: #000000;
+  --colors-text2: #FFFFFF;
+  --colors-background: #000000;
+  --padding-btn-std: 0em 1em;
+  --width-xs: 2em;
+  --width-s: 3em;
+  --width-m: 6em;
+  --width-l: 8em;
+  --width-xl: 10em;
+  --height-btn-std: 1.5em;
+  --fontSize-xs: 0.75vw;
+  --fontSize-s: 1.0vw;
+  --fontSize-m: 1.25vw;
+  --fontSize-l: 1.75vw;
+  --fontSize-xl: 2.5vw;
+  --radius-btn-std: 10rem;
+  --frame-gap: 0.3rem;
+  --frame-sidebar-width: 9rem;
+  --frame-bar-height: 1.5rem;
+  --frame-segment-height: 3.5rem;
+  --frame-elbow-height: 5rem;
+  --frame-elbow-radius: 4rem;
+  --frame-elbow-inner-radius: 1.75rem;
+  --frame-label-size: 1.1rem;
+  --frame-title-size: 2.2rem;
+  --status-ok: #99CC66;
+  --status-warn: #FFCC33;
+  --status-error: #FF4444;
+  --status-off: #555555;
+  --alert-red: #FF3333;
+  --alert-yellow: #FFCC00;
+  --colors-color1: #EA9D3C;
+  --colors-color1hover: #EFB46B;
+  --colors-color2: #B96C69;
+  --colors-color2hover: #C98F8D;
+  --colors-color3: #EA9D6F;
+  --colors-color3hover: #F4CB9A;
+  --colors-color4: #F1CC9F;
+  --colors-color4hover: #F7E3C9;
+  --colors-color5: #FDFEE3;
+  --colors-color5hover: #FFFFFF;
+  --colors-color6: #9C9DF7;
+  --colors-color6hover: #CBCCFB;
+  --colors-color7: #C29DC9;
+  --colors-color7hover: #D6BDDB;
+}
+
+/* Colors */
+[data-color="1"] { --lcar-bg: var(--colors-color1); --lcar-bg-hover: var(--colors-color1hover); }
+[data-color="2"] { --lcar-bg: var(--colors-color2); --lcar-bg-hover: var(--colors-color2hover); }
+[data-color="3"] { --lcar-bg: var(--colors-color3); --lcar-bg-hover: var(--colors-color3hover); }
+[data-color="4"] { --lcar-bg: var(--colors-color4); --lcar-bg-hover: var(--colors-color4hover); }
+[data-color="5"] { --lcar-bg: var(--colors-color5); --lcar-bg-hover: var(--colors-color5hover); }
+[data-color="6"] { --lcar-bg: var(--colors-color6); --lcar-bg-hover: var(--colors-color6hover); }
+[data-color="7"] { --lcar-bg: var(--colors-color7); --lcar-bg-hover: var(--colors-color7hover); }
+
+/* Themes */
+[data-theme="ds9"] {
+  --colors-color1: #5B8DD9;
+  --colors-color1hover: color-mix(in srgb, #5B8DD9 65%, white);
+  --colors-color2: #8FAADC;
+  --colors-color2hover: color-mix(in srgb, #8FAADC 65%, white);
+  --colors-color3: #C9A86A;
+  --colors-color3hover: color-mix(in srgb, #C9A86A 65%, white);
+  --colors-color4: #E3C38F;
+  --colors-color4hover: color-mix(in srgb, #E3C38F 65%, white);
+  --colors-color5: #DDE6F5;
+  --colors-color5hover: color-mix(in srgb, #DDE6F5 65%, white);
+  --colors-color6: #6E6EC4;
+  --colors-color6hover: color-mix(in srgb, #6E6EC4 65%, white);
+  --colors-color7: #A88BC7;
+  --colors-color7hover: color-mix(in srgb, #A88BC7 65%, white);
+}
+[data-theme="picard"] {
+  --colors-color1: #FF9900;
+  --colors-color1hover: color-mix(in srgb, #FF9900 65%, white);
+  --colors-color2: #CC6666;
+  --colors-color2hover: color-mix(in srgb, #CC6666 65%, white);
+  --colors-color3: #FFAA90;
+  --colors-color3hover: color-mix(in srgb, #FFAA90 65%, white);
+  --colors-color4: #FFCC99;
+  --colors-color4hover: color-mix(in srgb, #FFCC99 65%, white);
+  --colors-color5: #FFF1D9;
+  --colors-color5hover: color-mix(in srgb, #FFF1D9 65%, white);
+  --colors-color6: #5599FF;
+  --colors-color6hover: color-mix(in srgb, #5599FF 65%, white);
+  --colors-color7: #CC88FF;
+  --colors-color7hover: color-mix(in srgb, #CC88FF 65%, white);
+}
+[data-theme="tng"] {
+  --colors-color1: #EA9D3C;
+  --colors-color1hover: #EFB46B;
+  --colors-color2: #B96C69;
+  --colors-color2hover: #C98F8D;
+  --colors-color3: #EA9D6F;
+  --colors-color3hover: #F4CB9A;
+  --colors-color4: #F1CC9F;
+  --colors-color4hover: #F7E3C9;
+  --colors-color5: #FDFEE3;
+  --colors-color5hover: #FFFFFF;
+  --colors-color6: #9C9DF7;
+  --colors-color6hover: #CBCCFB;
+  --colors-color7: #C29DC9;
+  --colors-color7hover: #D6BDDB;
+}
+
+/* Alert palettes */
+[data-alert="red"] {
+  --colors-color1: #CC3333;
+  --colors-color1hover: color-mix(in srgb, #CC3333 65%, white);
+  --colors-color2: #FF5555;
+  --colors-color2hover: color-mix(in srgb, #FF5555 65%, white);
+  --colors-color3: #E06666;
+  --colors-color3hover: color-mix(in srgb, #E06666 65%, white);
+  --colors-color4: #FF8080;
+  --colors-color4hover: color-mix(in srgb, #FF8080 65%, white);
+  --colors-color5: #FFC0C0;
+  --colors-color5hover: color-mix(in srgb, #FFC0C0 65%, white);
+  --colors-color6: #B32020;
+  --colors-color6hover: color-mix(in srgb, #B32020 65%, white);
+  --colors-color7: #FF3B3B;
+  --colors-color7hover: color-mix(in srgb, #FF3B3B 65%, white);
+}
+[data-alert="yellow"] {
+  --colors-color1: #E6B800;
+  --colors-color1hover: color-mix(in srgb, #E6B800 65%, white);
+  --colors-color2: #FFCC33;
+  --colors-color2hover: color-mix(in srgb, #FFCC33 65%, white);
+  --colors-color3: #F2C14E;
+  --colors-color3hover: color-mix(in srgb, #F2C14E 65%, white);
+  --colors-color4: #FFE08A;
+  --colors-color4hover: color-mix(in srgb, #FFE08A 65%, white);
+  --colors-color5: #FFF4CC;
+  --colors-color5hover: color-mix(in srgb, #FFF4CC 65%, white);
+  --colors-color6: #CC9900;
+  --colors-color6hover: color-mix(in srgb, #CC9900 65%, white);
+  --colors-color7: #FFD24D;
+  --colors-color7hover: color-mix(in srgb, #FFD24D 65%, white);
+}
+
+/* ==================== 00-base.css ==================== */
+
+/* Antonio (SIL Open Font License 1.1, siehe fonts/Antonio/OFL.txt) – variable Schrift 100–700 */
+@font-face {
+  font-family: 'Antonio';
+  src: url('./fonts/Antonio/Antonio-latin.woff2') format('woff2');
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Antonio';
+  src: url('./fonts/Antonio/Antonio-latin-ext.woff2') format('woff2');
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: swap;
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+[class*="lcar-"] {
+  box-sizing: border-box;
+}
+
+.lcar-btn-std, .lcar-elbow, .lcar-bar, .lcar-block, .lcar-title, .lcar-number,
+.lcar-tab, .lcar-field, .lcar-input, .lcar-keypad-display, .lcar-cascade,
+.lcar-readout, .lcar-gauge, .lcar-status, .lcar-alert {
+  font-family: 'Antonio', 'Arial Narrow', sans-serif;
+  text-transform: uppercase;
+  line-height: 1;
+}
+
+@keyframes lcar-pulse {
+  from { opacity: 1; }
+  to   { opacity: 0.45; }
+}
+
+@keyframes lcar-blink {
+  0%, 49%   { opacity: 1; }
+  50%, 100% { opacity: 0.15; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [class*="lcar-"], [class*="lcar-"]::before, [class*="lcar-"]::after {
+    animation: none !important;
+  }
+}
+
+/* ==================== 10-button.css ==================== */
+
+/* #################### CAPSULE #################### */
+
+/* Base style */
+.lcar-btn-std {
+  background: var(--lcar-bg, var(--colors-color1));
+  border-radius: var(--radius-btn-std);
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  transition: background 0.2s ease;
+  color: var(--colors-text1);
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: none;
+}
+
+.lcar-btn-std:hover {
+  background: var(--lcar-bg-hover, var(--colors-color1hover));
+}
+
+.lcar-btn-std:focus-visible {
+  outline: 2px solid var(--colors-color5);
+  outline-offset: 2px;
+}
+
+.lcar-btn-std:disabled {
+  cursor: default;
+  opacity: 0.4;
+  background: var(--lcar-bg, var(--colors-color1));
+}
+
+/* Size Variants */
+.lcar-btn-std[data-size="xs"]  { height: var(--height-btn-std); padding: var(--padding-btn-std); font-size: var(--fontSize-xs); }
+.lcar-btn-std[data-size="s"]  { height: var(--height-btn-std); padding: var(--padding-btn-std); font-size: var(--fontSize-s); }
+.lcar-btn-std[data-size="m"]  { height: var(--height-btn-std); padding: var(--padding-btn-std); font-size: var(--fontSize-m); }
+.lcar-btn-std[data-size="l"]  { height: var(--height-btn-std); padding: var(--padding-btn-std); font-size: var(--fontSize-l); }
+.lcar-btn-std[data-size="xl"] { height: var(--height-btn-std); padding: var(--padding-btn-std); font-size: var(--fontSize-xl); }
+
+/* Length Variants */
+.lcar-btn-std[data-length="xs"]  { width: var(--width-xs); }
+.lcar-btn-std[data-length="s"]  { width: var(--width-s); }
+.lcar-btn-std[data-length="m"]  { width: var(--width-m); }
+.lcar-btn-std[data-length="l"]  { width: var(--width-l); }
+.lcar-btn-std[data-length="xl"] { width: var(--width-xl); }
+
+/* Shape Variants (default: capsule) */
+.lcar-btn-std[data-shape="rect"]      { border-radius: 0; }
+.lcar-btn-std[data-shape="cap-left"]  { border-radius: var(--radius-btn-std) 0 0 var(--radius-btn-std); }
+.lcar-btn-std[data-shape="cap-right"] { border-radius: 0 var(--radius-btn-std) var(--radius-btn-std) 0; }
+
+/* Label bottom-right (TNG style) */
+.lcar-btn-std[data-align="br"] {
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 0 0.5em 0.3em;
+}
+
+/* Toggle: aria-pressed */
+.lcar-btn-std[aria-pressed="false"] {
+  background: color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 45%, black);
+}
+.lcar-btn-std[aria-pressed="false"]:hover {
+  background: color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 70%, black);
+}
+.lcar-btn-std[aria-pressed="true"] {
+  background: var(--lcar-bg-hover, var(--colors-color1hover));
+  box-shadow: inset 0.5em 0 0 var(--colors-color5);
+}
+
+/* ==================== 20-frame.css ==================== */
+
+/* #################### ELBOW #################### */
+
+.lcar-elbow {
+  position: relative;
+  flex: none;
+  display: flex;
+  width: calc(var(--frame-sidebar-width) + var(--frame-elbow-inner-radius));
+  height: var(--frame-elbow-height);
+  background: var(--lcar-bg, var(--colors-color1));
+  color: var(--colors-text1);
+  font-size: var(--frame-label-size);
+}
+
+/* Inner curve: a quarter circle in surface color */
+.lcar-elbow::after {
+  content: "";
+  position: absolute;
+  width: var(--frame-elbow-inner-radius);
+  height: calc(100% - var(--frame-bar-height));
+  background: var(--lcar-surface, var(--colors-background));
+}
+
+.lcar-elbow[data-corner="tl"], .lcar-elbow:not([data-corner]) {
+  border-top-left-radius: var(--frame-elbow-radius);
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 0.3em calc(var(--frame-elbow-inner-radius) + 0.5em) 0.3em 0.5em;
+}
+.lcar-elbow[data-corner="tl"]::after, .lcar-elbow:not([data-corner])::after {
+  right: 0; bottom: 0;
+  border-top-left-radius: var(--frame-elbow-inner-radius);
+}
+
+.lcar-elbow[data-corner="tr"] {
+  border-top-right-radius: var(--frame-elbow-radius);
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: 0.3em 0.5em 0.3em calc(var(--frame-elbow-inner-radius) + 0.5em);
+}
+.lcar-elbow[data-corner="tr"]::after {
+  left: 0; bottom: 0;
+  border-top-right-radius: var(--frame-elbow-inner-radius);
+}
+
+.lcar-elbow[data-corner="bl"] {
+  border-bottom-left-radius: var(--frame-elbow-radius);
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: 0.3em calc(var(--frame-elbow-inner-radius) + 0.5em) 0.3em 0.5em;
+}
+.lcar-elbow[data-corner="bl"]::after {
+  right: 0; top: 0;
+  border-bottom-left-radius: var(--frame-elbow-inner-radius);
+}
+
+.lcar-elbow[data-corner="br"] {
+  border-bottom-right-radius: var(--frame-elbow-radius);
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0.3em 0.5em 0.3em calc(var(--frame-elbow-inner-radius) + 0.5em);
+}
+.lcar-elbow[data-corner="br"]::after {
+  left: 0; top: 0;
+  border-bottom-right-radius: var(--frame-elbow-inner-radius);
+}
+
+/* #################### BAR / END CAP #################### */
+
+.lcar-bar {
+  flex: 1 1 0;
+  height: var(--frame-bar-height);
+  background: var(--lcar-bg, var(--colors-color1));
+}
+
+.lcar-bar[data-length="xs"] { flex: none; width: var(--width-xs); }
+.lcar-bar[data-length="s"]  { flex: none; width: var(--width-s); }
+.lcar-bar[data-length="m"]  { flex: none; width: var(--width-m); }
+.lcar-bar[data-length="l"]  { flex: none; width: var(--width-l); }
+.lcar-bar[data-length="xl"] { flex: none; width: var(--width-xl); }
+
+.lcar-bar[data-cap="left"]  { border-radius: var(--frame-bar-height) 0 0 var(--frame-bar-height); }
+.lcar-bar[data-cap="right"] { border-radius: 0 var(--frame-bar-height) var(--frame-bar-height) 0; }
+.lcar-bar[data-cap="both"]  { border-radius: var(--frame-bar-height); }
+
+/* #################### TITLE / NUMBER #################### */
+
+.lcar-title {
+  flex: none;
+  color: var(--lcar-bg, var(--colors-color1));
+  font-size: var(--frame-title-size);
+  height: var(--frame-bar-height);
+  line-height: var(--frame-bar-height);
+  white-space: nowrap;
+  margin: 0;
+  font-weight: normal;
+}
+
+.lcar-number {
+  color: var(--lcar-bg, var(--colors-color4));
+  font-size: var(--frame-label-size);
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+/* #################### DIVIDER #################### */
+
+.lcar-divider {
+  height: 0.35rem;
+  margin: 1rem 0;
+  border: none;
+  background: linear-gradient(90deg,
+    var(--colors-color1) 0 18%, transparent 0 calc(18% + var(--frame-gap)),
+    var(--colors-color4) 0 55%, transparent 0 calc(55% + var(--frame-gap)),
+    var(--colors-color6) 0 80%, transparent 0 calc(80% + var(--frame-gap)),
+    var(--colors-color2) 0);
+}
+
+.lcar-divider[data-color] { background: var(--lcar-bg); }
+
+/* #################### BLOCK / STACK / GRID #################### */
+
+.lcar-block {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  min-height: var(--frame-segment-height);
+  padding: 0 0.5em 0.3em;
+  background: var(--lcar-bg, var(--colors-color1));
+  color: var(--colors-text1);
+  font-size: var(--frame-label-size);
+}
+
+.lcar-block[data-fill] { flex: 1 1 auto; }
+
+.lcar-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--frame-gap);
+  width: var(--frame-sidebar-width);
+}
+
+.lcar-stack > * { width: 100%; }
+
+.lcar-stack > .lcar-btn-std {
+  height: var(--frame-segment-height);
+  font-size: var(--frame-label-size);
+}
+
+/* Button grid: like a bridge console */
+.lcar-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
+  gap: var(--frame-gap);
+}
+
+.lcar-grid > .lcar-btn-std {
+  width: 100%;
+  height: var(--frame-segment-height);
+  font-size: var(--frame-label-size);
+}
+
+/* #################### FRAME #################### */
+
+.lcar-frame {
+  display: grid;
+  grid-template-columns: var(--frame-sidebar-width) minmax(0, 1fr);
+  grid-template-rows: auto 1fr auto;
+  gap: var(--frame-gap);
+  min-height: 100%;
+}
+
+.lcar-frame-top, .lcar-frame-bottom {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: var(--frame-gap);
+}
+.lcar-frame-top    { align-items: flex-start; }
+.lcar-frame-bottom { align-items: flex-end; }
+
+.lcar-frame-content {
+  min-width: 0;
+  padding: 0.5rem calc(var(--frame-elbow-inner-radius) + 0.5rem);
+  color: var(--colors-text2);
+}
+
+/* Split layout (TNG main screen): upper panel, divider elbows, lower panel.
+   Order: stack, content, frame-bottom, frame-top, stack, content */
+.lcar-frame[data-layout="split"] {
+  grid-template-rows: auto auto auto 1fr;
+}
+
+.lcar-frame[data-layout="split"] > .lcar-frame-top {
+  margin-top: calc(var(--frame-gap) * 2);
+}
+
+.lcar-frame-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.lcar-frame-header > .lcar-title {
+  height: auto;
+  line-height: 1;
+}
+
+/* ==================== 30-controls.css ==================== */
+
+/* #################### TABS #################### */
+
+.lcar-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.lcar-tabs > .lcar-bar {
+  flex: none;
+  width: 100%;
+}
+
+.lcar-tablist {
+  display: flex;
+  gap: var(--frame-gap);
+}
+
+.lcar-tab {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  min-width: 7rem;
+  height: 2.5rem;
+  margin-bottom: var(--frame-gap);
+  padding: 0 0.6em 0.3em;
+  border: none;
+  cursor: pointer;
+  font-size: var(--frame-label-size);
+  color: var(--colors-text1);
+  background: color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 45%, black);
+}
+
+.lcar-tab:first-child { border-top-left-radius: 1.25rem; }
+
+.lcar-tab:hover {
+  background: color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 70%, black);
+}
+
+/* Active tab flows into the bar below */
+.lcar-tab[aria-selected="true"] {
+  background: var(--lcar-bg, var(--colors-color1));
+  margin-bottom: 0;
+  height: calc(2.5rem + var(--frame-gap));
+}
+
+.lcar-tab:focus-visible {
+  outline: 2px solid var(--colors-color5);
+  outline-offset: 2px;
+}
+
+.lcar-tabpanel {
+  padding: 1rem 0;
+  color: var(--colors-text2);
+}
+
+/* #################### INPUT #################### */
+
+.lcar-field {
+  display: flex;
+  gap: var(--frame-gap);
+  height: 2.4rem;
+  font-size: var(--frame-label-size);
+}
+
+.lcar-field-label {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  min-width: 6rem;
+  padding: 0 0.6em 0.3em 1.2em;
+  border-radius: 1.2rem 0 0 1.2rem;
+  background: var(--lcar-bg, var(--colors-color1));
+  color: var(--colors-text1);
+}
+
+.lcar-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 1.2em 0 0.6em;
+  border: 0.2rem solid var(--lcar-bg, var(--colors-color1));
+  border-radius: 0 1.2rem 1.2rem 0;
+  background: transparent;
+  color: var(--lcar-bg-hover, var(--colors-color1hover));
+  font-size: 1.4em;
+  outline: none;
+}
+
+.lcar-input::placeholder {
+  color: color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 50%, black);
+}
+
+.lcar-input:focus {
+  border-color: var(--lcar-bg-hover, var(--colors-color1hover));
+  box-shadow: 0 0 0.6rem color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 50%, transparent);
+}
+
+/* #################### SLIDER (native range) #################### */
+
+.lcar-range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: calc(var(--frame-bar-height) * 1.6);
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.lcar-range::-webkit-slider-runnable-track {
+  height: var(--frame-bar-height);
+  border-radius: var(--frame-bar-height);
+  background: color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 35%, black);
+}
+.lcar-range::-moz-range-track {
+  height: var(--frame-bar-height);
+  border-radius: var(--frame-bar-height);
+  background: color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 35%, black);
+}
+.lcar-range::-moz-range-progress {
+  height: var(--frame-bar-height);
+  border-radius: var(--frame-bar-height) 0 0 var(--frame-bar-height);
+  background: var(--lcar-bg, var(--colors-color1));
+}
+
+.lcar-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 2.5rem;
+  height: calc(var(--frame-bar-height) * 1.6);
+  margin-top: calc(var(--frame-bar-height) * -0.3);
+  border: 0.25rem solid var(--colors-background);
+  border-radius: 0.4rem;
+  background: var(--lcar-bg-hover, var(--colors-color1hover));
+}
+.lcar-range::-moz-range-thumb {
+  width: 2.5rem;
+  height: calc(var(--frame-bar-height) * 1.6);
+  border: 0.25rem solid var(--colors-background);
+  border-radius: 0.4rem;
+  background: var(--lcar-bg-hover, var(--colors-color1hover));
+}
+
+.lcar-range:focus-visible {
+  outline: 2px solid var(--colors-color5);
+  outline-offset: 2px;
+}
+
+/* #################### KEYPAD #################### */
+
+.lcar-keypad {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--frame-gap);
+  width: 15rem;
+}
+
+.lcar-keypad > .lcar-btn-std {
+  width: 100%;
+  height: 3rem;
+  font-size: calc(var(--frame-label-size) * 1.3);
+}
+
+.lcar-keypad-display {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 3rem;
+  margin-bottom: var(--frame-gap);
+  padding: 0 1.2rem;
+  border: 0.2rem solid var(--lcar-bg, var(--colors-color1));
+  border-radius: 1.5rem;
+  color: var(--colors-color5);
+  font-size: 1.8rem;
+  letter-spacing: 0.25em;
+}
+
+.lcar-keypad-display[data-state="ok"]    { border-color: var(--status-ok);    color: var(--status-ok); }
+.lcar-keypad-display[data-state="error"] { border-color: var(--status-error); color: var(--status-error); }
+
+/* ==================== 40-display.css ==================== */
+
+/* #################### DATA CASCADE #################### */
+
+.lcar-cascade {
+  display: flex;
+  max-width: 100%;
+  overflow: hidden;
+  gap: 1.2em;
+  font-size: var(--frame-label-size);
+  font-variant-numeric: tabular-nums;
+  color: var(--colors-color4);
+}
+
+.lcar-cascade-col {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+  text-align: right;
+}
+
+.lcar-cascade-col:nth-child(3n + 2) { color: var(--colors-color6); }
+.lcar-cascade-col:nth-child(3n + 3) { color: var(--colors-color3); }
+
+/* each cell sets --i (stagger index) */
+.lcar-cascade-col > span {
+  animation: lcar-cascade 4s steps(1) infinite;
+  animation-delay: calc(var(--i, 0) * 110ms);
+}
+
+@keyframes lcar-cascade {
+  0%  { color: var(--colors-color5); }
+  6%  { color: var(--colors-color1); }
+  45% { color: inherit; }
+}
+
+/* #################### READOUT #################### */
+
+.lcar-readout {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: start;
+  gap: 0.35em 2em;
+  margin: 0;
+  font-size: var(--frame-label-size);
+}
+
+.lcar-readout dt {
+  color: var(--lcar-bg, var(--colors-color3));
+}
+
+.lcar-readout dd {
+  margin: 0;
+  text-align: right;
+  color: var(--colors-color5);
+  font-variant-numeric: tabular-nums;
+}
+
+/* #################### LEVEL BAR #################### */
+
+.lcar-level {
+  display: flex;
+  gap: 0.2rem;
+  height: var(--frame-bar-height);
+}
+
+.lcar-level > span {
+  flex: 1 1 0;
+  background: color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 25%, black);
+}
+
+.lcar-level > span[data-on] {
+  background: var(--lcar-bg, var(--colors-color1));
+}
+
+.lcar-level > span:first-child { border-radius: var(--frame-bar-height) 0 0 var(--frame-bar-height); }
+.lcar-level > span:last-child  { border-radius: 0 var(--frame-bar-height) var(--frame-bar-height) 0; }
+
+.lcar-level[data-orientation="vertical"] {
+  flex-direction: column-reverse;
+  width: calc(var(--frame-bar-height) * 1.5);
+  height: 9rem;
+}
+.lcar-level[data-orientation="vertical"] > span:first-child { border-radius: 0 0 0.75rem 0.75rem; }
+.lcar-level[data-orientation="vertical"] > span:last-child  { border-radius: 0.75rem 0.75rem 0 0; }
+
+/* #################### GAUGE (set --value 0–100) #################### */
+
+.lcar-gauge {
+  --value: 0;
+  --segments: 12;
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  width: 12rem;
+  aspect-ratio: 2;
+  font-size: 2.4rem;
+  color: var(--colors-color5);
+}
+
+.lcar-gauge::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: conic-gradient(from -90deg at 50% 100%,
+    var(--lcar-bg, var(--colors-color1)) calc(var(--value) * 1.8deg),
+    color-mix(in srgb, var(--lcar-bg, var(--colors-color1)) 22%, black) 0 180deg,
+    transparent 0);
+  -webkit-mask:
+    radial-gradient(circle farthest-side at 50% 100%, transparent 58%, #000 calc(58% + 1px) 100%, transparent 0),
+    repeating-conic-gradient(from -90deg at 50% 100%, #000 0 calc(180deg / var(--segments) - 2deg), transparent 0 calc(180deg / var(--segments)));
+  -webkit-mask-composite: source-in;
+  mask:
+    radial-gradient(circle farthest-side at 50% 100%, transparent 58%, #000 calc(58% + 1px) 100%, transparent 0),
+    repeating-conic-gradient(from -90deg at 50% 100%, #000 0 calc(180deg / var(--segments) - 2deg), transparent 0 calc(180deg / var(--segments)));
+  mask-composite: intersect;
+}
+
+.lcar-gauge > * { position: relative; }
+
+.lcar-gauge > small {
+  font-size: 0.4em;
+  color: var(--lcar-bg, var(--colors-color1));
+}
+
+/* #################### SENSOR / BLIP / SCAN #################### */
+
+.lcar-sensor {
+  --lcar-line: var(--lcar-bg, var(--colors-color6));
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  border: 0.2rem solid var(--lcar-line);
+  border-radius: 1.5rem;
+  background:
+    linear-gradient(var(--lcar-line), var(--lcar-line)) center / 1px 100% no-repeat,
+    linear-gradient(var(--lcar-line), var(--lcar-line)) center / 100% 1px no-repeat,
+    repeating-linear-gradient(0deg, color-mix(in srgb, var(--lcar-line) 25%, transparent) 0 1px, transparent 1px 2rem),
+    repeating-linear-gradient(90deg, color-mix(in srgb, var(--lcar-line) 25%, transparent) 0 1px, transparent 1px 2rem);
+}
+
+/* --x / --y: position in percent (0–100) */
+.lcar-blip {
+  position: absolute;
+  left: calc(var(--x, 50) * 1%);
+  top: calc(var(--y, 50) * 1%);
+  width: 0.7rem;
+  height: 0.7rem;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: var(--lcar-bg);
+  box-shadow: 0 0 0.6rem var(--lcar-bg);
+  animation: lcar-pulse 0.9s ease-in-out infinite alternate;
+}
+
+.lcar-blip:not([data-color]) { --lcar-bg: var(--colors-color5); }
+
+.lcar-scan {
+  position: relative;
+  overflow: hidden;
+}
+
+.lcar-scan::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4rem;
+  width: 4rem;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--colors-color5) 45%, transparent));
+  animation: lcar-scan 3s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes lcar-scan {
+  to { left: 100%; }
+}
+
+/* #################### STATUS INDICATOR #################### */
+
+.lcar-status {
+  --lcar-status: var(--status-off);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  font-size: var(--frame-label-size);
+  color: var(--colors-color5);
+}
+
+.lcar-status::before {
+  content: "";
+  width: 0.8em;
+  height: 0.8em;
+  border-radius: 50%;
+  background: var(--lcar-status);
+  box-shadow: 0 0 0.5em var(--lcar-status);
+}
+
+.lcar-status[data-status="ok"]    { --lcar-status: var(--status-ok); }
+.lcar-status[data-status="warn"]  { --lcar-status: var(--status-warn); }
+.lcar-status[data-status="error"] { --lcar-status: var(--status-error); }
+.lcar-status[data-status="off"]   { --lcar-status: var(--status-off); }
+.lcar-status[data-status="off"]::before { box-shadow: none; }
+
+.lcar-status[data-blink]::before {
+  animation: lcar-blink 1s infinite;
+}
+
+/* #################### ALERT #################### */
+
+.lcar-alert {
+  --lcar-bg: var(--alert-red);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 1rem 3rem;
+  border: 0.45rem solid var(--lcar-bg);
+  border-radius: 3rem;
+  outline: 0.45rem solid var(--lcar-bg);
+  outline-offset: 0.45rem;
+  color: var(--lcar-bg);
+  animation: lcar-blink 1.2s infinite;
+}
+
+.lcar-alert[data-level="yellow"] { --lcar-bg: var(--alert-yellow); }
+
+.lcar-alert-title {
+  font-size: 4rem;
+  letter-spacing: 0.15em;
+}
+
+.lcar-alert-text {
+  font-size: 1.4rem;
+  letter-spacing: 0.1em;
+}
+
+/* Alert mode on any container: palette comes from the theme section,
+   frame elements pulse */
+[data-alert] :is(.lcar-bar, .lcar-elbow, .lcar-block) {
+  animation: lcar-pulse 1.4s ease-in-out infinite alternate;
+}
+
+[data-alert="red"] :is(.lcar-bar, .lcar-elbow, .lcar-block) {
+  animation-duration: 0.7s;
+}
+
+/* ==================== 90-responsive.css ==================== */
+
+/* #################### RESPONSIVE #################### */
+
+/* Narrow screens: sidebar becomes a row of buttons above the content */
+@media (max-width: 720px) {
+  .lcar-frame {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .lcar-stack {
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: auto;
+  }
+
+  .lcar-stack > * {
+    width: auto;
+    flex: 1 1 5rem;
+  }
+
+  .lcar-stack > .lcar-btn-std,
+  .lcar-stack > .lcar-block {
+    height: calc(var(--frame-segment-height) * 0.7);
+    min-height: 0;
+  }
+
+  .lcar-stack > .lcar-block[data-fill] {
+    display: none;
+  }
+
+  .lcar-elbow {
+    width: calc(var(--frame-elbow-radius) + var(--frame-elbow-inner-radius));
+    height: calc(var(--frame-bar-height) + var(--frame-elbow-inner-radius) * 1.5);
+    font-size: 0;
+  }
+
+  .lcar-frame-content {
+    padding: 0.5rem 0;
+  }
+
+  .lcar-title {
+    font-size: calc(var(--frame-title-size) * 0.7);
+  }
+
+  .lcar-grid {
+    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+  }
+
+  .lcar-alert-title {
+    font-size: 2.5rem;
+  }
+}