@frontpanel/css 0.2.0 → 0.4.0

package/components.css

@@ -29,6 +29,19 @@
     }
   }
 
+  /* A menu dropping open from its button: a short slide down as it fades in. */
+  @keyframes fp-menu-drop {
+    from {
+      opacity: 0;
+      translate: 0 -4px;
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
   /** Redraws an LCD line left to right in four steps, as when its value changes. */
   .fp-lcd-redraw {
     animation: fp-lcd-redraw 160ms steps(4, end);
@@ -91,6 +104,11 @@
       overflow: clip;
       border-radius: 26px;
     }
+
+    /* Forced colours drop the chrome: an outline keeps the device's edge. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+    }
   }
 
   /** Molded body plastic the modules sit on. */
@@ -195,6 +213,35 @@
     &:disabled {
       opacity: 0.45;
     }
+
+    /*
+     * Forced colours drop the chrome and its shadows: an outline keeps the button's edge, the system's
+     * selected colours show it pressed, and GrayText, not a fade, shows it disabled.
+     */
+    @media (forced-colors: active) {
+      outline: 1px solid ButtonText;
+      outline-offset: -1px;
+
+      &[aria-pressed="true"],
+      &[aria-expanded="true"],
+      &[aria-current="page"] {
+        forced-color-adjust: none;
+        background: SelectedItem;
+        box-shadow: none;
+        color: SelectedItemText;
+
+        /* Opted out, its focus ring would keep the skin's colour: the system's text colour shows on any ground. */
+        &:focus-visible {
+          outline-color: CanvasText;
+        }
+      }
+
+      &:disabled {
+        opacity: 1;
+        color: GrayText;
+        outline-color: GrayText;
+      }
+    }
   }
 
   /**
@@ -258,6 +305,46 @@
     &:disabled {
       opacity: 0.45;
     }
+
+    /* Forced colours drop the gel and its shadows: an outline keeps its edge, and GrayText, not a fade, shows it disabled. */
+    @media (forced-colors: active) {
+      outline: 1px solid ButtonText;
+      outline-offset: -1px;
+
+      &:disabled {
+        opacity: 1;
+        color: GrayText;
+        outline-color: GrayText;
+      }
+    }
+  }
+
+  /**
+   * Chrome buttons joined side by side into one bezel, as on a transport row: fp-chrome-btn children
+   * share their seams, and only the outer corners stay round. Give it `role="group"` and a name.
+   */
+  .fp-button-group {
+    display: inline-flex;
+    align-items: stretch;
+
+    /* The 1 px edge round each button falls in the gap, so neighbours share one seam. */
+    gap: 1px;
+
+    & > .fp-chrome-btn:not(:first-child) {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    & > .fp-chrome-btn:not(:last-child) {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    /* A focused button's ring goes over its neighbours, not under them. */
+    & > .fp-chrome-btn:focus-visible {
+      position: relative;
+      z-index: 1;
+    }
   }
 
   /**
@@ -330,6 +417,34 @@
     &:disabled {
       opacity: 0.5;
     }
+
+    /*
+     * Forced colours drop the plastic and its ring: an outline keeps the cap's edge, the system's
+     * selected colours show it selected, and GrayText, not a fade, shows it disabled.
+     */
+    @media (forced-colors: active) {
+      outline: 1px solid ButtonText;
+      outline-offset: -1px;
+
+      &[aria-pressed="true"],
+      &[aria-checked="true"] {
+        forced-color-adjust: none;
+        background: SelectedItem;
+        box-shadow: none;
+        color: SelectedItemText;
+
+        /* Opted out, its focus ring would keep the skin's colour: the system's text colour shows on any ground. */
+        &:focus-visible {
+          outline-color: CanvasText;
+        }
+      }
+
+      &:disabled {
+        opacity: 1;
+        color: GrayText;
+        outline-color: GrayText;
+      }
+    }
   }
 
   /** Blue plastic for an fp-cap, with its own label colour. */
@@ -357,14 +472,21 @@
   }
 
   /**
-   * A control with its silkscreen label under it: a knob, fader or meter and an fp-silk. A length
-   * set here, such as `--fp-fader-length`, reaches the control inside.
+   * A control with its silkscreen label under it: a knob, fader, meter or switch and then an fp-silk.
+   * With `data-label-placement="start"` the label sits level with the control, before it in the
+   * line. A length set here, such as `--fp-fader-length`, reaches the control inside.
    */
   .fp-unit {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     gap: 0.375rem;
+
+    /* Reversed, so the markup stays control then label either way. */
+    &[data-label-placement="start"] {
+      flex-direction: row-reverse;
+      gap: 0.5rem;
+    }
   }
 
   /**
@@ -423,6 +545,15 @@
       opacity: 0.45;
       cursor: not-allowed;
     }
+
+    /* Forced colours drop the knurling, the dome and their shadows: outlines draw the skirt and the cap. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+
+      &::before {
+        outline: 1px solid CanvasText;
+      }
+    }
   }
 
   /** The pointer line on a knob's cap. Turn it with `rotate`: -135deg at the minimum, 135deg at the maximum. */
@@ -442,6 +573,14 @@
       border-radius: 2px;
       background-color: var(--fp-color-ink);
     }
+
+    /* Forced colours would paint the line in the page colour, on the page colour. */
+    @media (forced-colors: active) {
+      &::after {
+        forced-color-adjust: none;
+        background-color: CanvasText;
+      }
+    }
   }
 
   /**
@@ -498,6 +637,13 @@
       height: 6px;
       translate: 0 -50%;
     }
+
+    /* Forced colours: the slot as a solid line, so the cap's travel shows. */
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+      box-shadow: none;
+    }
   }
 
   /**
@@ -560,6 +706,344 @@
       outline-offset: 2px;
       filter: drop-shadow(0 0 3px var(--fp-color-focus));
     }
+
+    /* Forced colours: a cap in the page colour hides the slot under it; an outline and the grip draw it. */
+    @media (forced-colors: active) {
+      background-color: Canvas;
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+
+      &::after {
+        forced-color-adjust: none;
+        background-color: CanvasText;
+      }
+    }
+  }
+
+  /**
+   * Illuminated rocker switch: a lamp-lit paddle in a dark bezel, marked I at the top and O at the
+   * bottom. Off, the O half is pressed in; on, the I half is, and the lamp behind the lens lights.
+   * Put it on a button with `role="switch"` and `aria-checked`, holding an fp-switch-rocker. The
+   * lamp is red; colour it with fp-led-green or fp-led-amber. 44 x 56 px, 36 x 46 px with a mouse,
+   * trackpad or pen. With `data-orientation="horizontal"` it lies on its side, 56 x 44 px (46 x 36),
+   * O on the left and I on the right. After an illuminated rocker pen by ykadosh (CodePen, MIT), rebuilt on the kit's
+   * tokens.
+   */
+  .fp-switch {
+    --fp-switch-lamp: var(--fp-led, var(--fp-color-led-red));
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    width: 2.75rem;
+    height: 3.5rem;
+    padding: 5px;
+    border: 0;
+    border-radius: 4px;
+    background-color: color-mix(in srgb, var(--fp-color-housing) 40%, black);
+    box-shadow:
+      0 0 0 1px var(--fp-color-edge),
+      inset 1px 1px 0 rgb(255 255 255 / 0.25),
+      inset 0 0 1px 3px var(--fp-color-housing),
+      inset 0 0 1px 5px color-mix(in srgb, var(--fp-color-housing) 40%, black),
+      1px 2px 0 var(--fp-color-cast);
+    perspective: 216px;
+    cursor: pointer;
+
+    @media (pointer: fine) {
+      width: 2.25rem;
+      height: 2.875rem;
+      padding: 4px;
+    }
+
+    /* On: the I half goes in, the shine comes up, the shading goes, and the lamp lights as it lands. */
+    &[aria-checked="true"] .fp-switch-rocker {
+      transform: translateZ(6px) rotateX(25deg);
+      box-shadow: 0 -3px 6px var(--fp-switch-lamp);
+    }
+
+    &[aria-checked="true"] .fp-switch-face::before {
+      opacity: 1;
+    }
+
+    &[aria-checked="true"] .fp-switch-face::after {
+      opacity: 0;
+    }
+
+    &[aria-checked="true"] .fp-switch-lamp {
+      opacity: 1;
+      transition-duration: 60ms;
+      transition-timing-function: linear;
+      transition-delay: 250ms;
+    }
+
+    /*
+     * On its side the paddle tips across instead, and the marks stay upright. With the light at the
+     * top left, the right end is now the one in shade that casts the shadow, and the left end is lit.
+     */
+    &[data-orientation="horizontal"] {
+      width: 3.5rem;
+      height: 2.75rem;
+
+      @media (pointer: fine) {
+        width: 2.875rem;
+        height: 2.25rem;
+      }
+
+      & .fp-switch-rocker {
+        transform: translateZ(6px) rotateY(-25deg);
+        background: linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--fp-switch-lamp) 60%, black) 0%,
+          color-mix(in srgb, var(--fp-switch-lamp) 44%, black) 30%,
+          color-mix(in srgb, var(--fp-switch-lamp) 44%, black) 70%,
+          color-mix(in srgb, var(--fp-switch-lamp) 60%, black) 100%
+        );
+      }
+
+      /* The right end, in shade, with the shadow the paddle casts into the bezel. */
+      & .fp-switch-rocker::before {
+        left: auto;
+        right: 0;
+        width: 15px;
+        height: 100%;
+        transform-origin: right;
+        transform: rotateY(-90deg);
+        background: linear-gradient(
+          270deg,
+          color-mix(in srgb, var(--fp-switch-lamp) 40%, black),
+          color-mix(in srgb, var(--fp-switch-lamp) 20%, black)
+        );
+        box-shadow:
+          -15px 0 3px 0 black,
+          -24px 0 6px 0 rgb(0 0 0 / 0.5);
+      }
+
+      /* The left end, lit from the left while it stands proud. */
+      & .fp-switch-rocker::after {
+        top: 0;
+        bottom: auto;
+        width: 15px;
+        height: 100%;
+        transform-origin: right;
+        transform: translateX(-15px) rotateY(-90deg);
+        background:
+          linear-gradient(
+              270deg,
+              rgb(255 255 255 / 0.8) 10%,
+              rgb(255 255 255 / 0.3) 30%,
+              color-mix(in srgb, var(--fp-switch-lamp) 40%, black) 75%,
+              color-mix(in srgb, var(--fp-switch-lamp) 20%, black)
+            )
+            50% 50% / 97% 97% no-repeat,
+          color-mix(in srgb, var(--fp-switch-lamp) 70%, black);
+        box-shadow: none;
+      }
+
+      & .fp-switch-face {
+        background:
+          linear-gradient(#fff, #fff) 78% 50% / max(2px, 4%) 28% no-repeat,
+          radial-gradient(circle, transparent 50%, #fff 52%, #fff 70%, transparent 72%) 22% 50% / 25% 33% no-repeat,
+          radial-gradient(transparent 30%, color-mix(in srgb, color-mix(in srgb, var(--fp-switch-lamp) 40%, black) 70%, transparent) 70%) 0 0 / 3px 3px;
+      }
+
+      & .fp-switch-face::before {
+        background:
+          linear-gradient(#fff, transparent 3%) 50% 50% / 97% 97% no-repeat,
+          linear-gradient(270deg, rgb(255 255 255 / 0.5), transparent 50%, transparent 80%, rgb(255 255 255 / 0.5)) 50% 50% / 97% 97% no-repeat;
+      }
+
+      & .fp-switch-face::after {
+        background-image: linear-gradient(270deg, transparent 70%, rgb(0 0 0 / 0.8));
+      }
+
+      &[aria-checked="true"] .fp-switch-rocker {
+        transform: translateZ(6px) rotateY(25deg);
+        box-shadow: 3px 0 6px var(--fp-switch-lamp);
+      }
+    }
+
+    /* A solid ring with a glow outside it: the glow alone fails non-text contrast on light chrome. */
+    &:focus-visible {
+      outline: 2px solid var(--fp-color-focus-ring);
+      outline-offset: 2px;
+      filter: drop-shadow(0 0 3px var(--fp-color-focus));
+    }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+
+    /*
+     * Forced colours drop the paddle's paint: an outline keeps the bezel's edge, and the rocker fills
+     * when on, as a lit LED does, so the state reads by shape as well as by the tilt.
+     */
+    @media (forced-colors: active) {
+      outline: 1px solid ButtonText;
+
+      &[data-orientation="horizontal"] .fp-switch-rocker {
+        background: Canvas;
+      }
+
+      &[aria-checked="true"] .fp-switch-rocker,
+      &[data-orientation="horizontal"][aria-checked="true"] .fp-switch-rocker {
+        background: CanvasText;
+        box-shadow: none;
+      }
+
+      &:disabled,
+      &[aria-disabled="true"] {
+        opacity: 1;
+        outline-color: GrayText;
+      }
+    }
+  }
+
+  /**
+   * The paddle of an fp-switch, tilted in 3D. It holds an fp-switch-lamp and then an fp-switch-face;
+   * its top and bottom ends show as it tips.
+   */
+  .fp-switch-rocker {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    transform-origin: 50% 50% -6px;
+    transform: translateZ(6px) rotateX(-25deg);
+    transform-style: preserve-3d;
+    background: linear-gradient(
+      color-mix(in srgb, var(--fp-switch-lamp) 60%, black) 0%,
+      color-mix(in srgb, var(--fp-switch-lamp) 44%, black) 30%,
+      color-mix(in srgb, var(--fp-switch-lamp) 44%, black) 70%,
+      color-mix(in srgb, var(--fp-switch-lamp) 60%, black) 100%
+    );
+
+    /* Snaps over at the end of its travel, as a rocker's spring does. */
+    transition: transform 300ms cubic-bezier(1, 0, 1, 1), box-shadow 300ms cubic-bezier(1, 0, 1, 1);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+
+    /* The top end, lit from above while it stands proud. */
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 15px;
+      transform-origin: top;
+      transform: rotateX(-90deg);
+      background:
+        linear-gradient(
+            rgb(255 255 255 / 0.8) 10%,
+            rgb(255 255 255 / 0.3) 30%,
+            color-mix(in srgb, var(--fp-switch-lamp) 40%, black) 75%,
+            color-mix(in srgb, var(--fp-switch-lamp) 20%, black)
+          )
+          50% 50% / 97% 97% no-repeat,
+        color-mix(in srgb, var(--fp-switch-lamp) 70%, black);
+    }
+
+    /* The bottom end, in shadow, with the shadow the paddle casts into the bezel. */
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 15px;
+      transform-origin: top;
+      transform: translateY(15px) rotateX(-90deg);
+      background-image: linear-gradient(
+        color-mix(in srgb, var(--fp-switch-lamp) 40%, black),
+        color-mix(in srgb, var(--fp-switch-lamp) 20%, black)
+      );
+      box-shadow:
+        0 15px 3px 0 black,
+        0 24px 6px 0 rgb(0 0 0 / 0.5);
+    }
+
+    /* Forced colours: a plain paddle in the system's colours; fp-switch fills it when on. */
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background: Canvas;
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+
+      &::before,
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  /** The lamp behind an fp-switch's lens: lit when the switch is on, and slow to fade, like a filament cooling. */
+  .fp-switch-lamp {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    background-image: radial-gradient(
+      color-mix(in srgb, var(--fp-switch-lamp) 35%, #fff2c8),
+      var(--fp-switch-lamp) 40%,
+      transparent 70%
+    );
+    transition: opacity 600ms ease-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
+
+    /* Forced colours: the rocker's fill shows the state instead. */
+    @media (forced-colors: active) {
+      display: none;
+    }
+  }
+
+  /**
+   * The front of an fp-switch's paddle: the dotted lens over the lamp, the I and O marks, and the
+   * shine that comes up on the pressed-in half. Decorative; the switch says its state.
+   */
+  .fp-switch-face {
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(#fff, #fff) 50% 20% / max(2px, 5%) 20% no-repeat,
+      radial-gradient(circle, transparent 50%, #fff 52%, #fff 70%, transparent 72%) 50% 80% / 33% 25% no-repeat,
+      radial-gradient(transparent 30%, color-mix(in srgb, color-mix(in srgb, var(--fp-switch-lamp) 40%, black) 70%, transparent) 70%) 0 0 / 3px 3px;
+
+    /* The shine: faint while the I half stands out, full once it is pressed in. */
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      transition: opacity 300ms cubic-bezier(1, 0, 1, 1);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition-duration: 0ms;
+      }
+    }
+
+    &::before {
+      opacity: 0.3;
+      background:
+        linear-gradient(#fff, transparent 3%) 50% 50% / 97% 97% no-repeat,
+        linear-gradient(rgb(255 255 255 / 0.5), transparent 50%, transparent 80%, rgb(255 255 255 / 0.5)) 50% 50% / 97% 97% no-repeat;
+    }
+
+    /* The shading on the O half while it is pressed in. */
+    &::after {
+      opacity: 1;
+      background-image: linear-gradient(transparent 70%, rgb(0 0 0 / 0.8));
+    }
+
+    /* Forced colours: no lens or marks; the rocker's fill shows the state. */
+    @media (forced-colors: active) {
+      display: none;
+    }
   }
 
   /**
@@ -867,6 +1351,11 @@
       inset 1px 1px 0 var(--fp-color-bevel-hi),
       inset -1px -1px 0 var(--fp-color-bevel-lo),
       2px 3px 0 var(--fp-color-cast);
+
+    /* Forced colours drop the shadow that draws its edge: an outline keeps it. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+    }
   }
 
   /** A module's own little title bar, in brushed chrome. */
@@ -921,6 +1410,130 @@
     padding: 0.75rem;
   }
 
+  /**
+   * Faceplate menu: a small brushed-chrome plate that drops from the button that opens it, holding
+   * fp-menu-item rows and fp-menu-separator grooves. Placing it is up to you, or to Reka's
+   * DropdownMenu, which also sets the `data-state="open"` it drops in on.
+   */
+  .fp-menu {
+    color-scheme: var(--fp-scheme);
+    z-index: 50;
+    box-sizing: border-box;
+    min-width: 10rem;
+    overflow-y: auto;
+    padding: 0.25rem;
+    border-radius: 6px;
+    color: var(--fp-color-ink);
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--fp-color-chrome-hi) 60%, var(--fp-color-chrome-100)) 0%,
+      var(--fp-color-chrome-100) 40%,
+      var(--fp-color-chrome-300) 100%
+    );
+    box-shadow:
+      0 0 0 1px var(--fp-color-edge),
+      inset 1px 1px 0 var(--fp-color-bevel-hi),
+      inset -1px -1px 0 var(--fp-color-bevel-lo),
+      2px 3px 0 var(--fp-color-cast),
+      0 12px 18px -8px var(--fp-color-cast);
+
+    /* The plate takes focus when a pointer opens it; its rows show where the keys are. */
+    outline: none;
+
+    &[data-state="open"] {
+      animation: fp-menu-drop 90ms ease-out;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &[data-state="open"] {
+        animation: none;
+      }
+    }
+
+    /* Forced colours drop the chrome and its shadows: an outline keeps the plate's edge. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+    }
+  }
+
+  /**
+   * A row on an fp-menu: a silkscreened label, with an fp-icon before it if you like. The highlighted
+   * row presses into the plate; Reka sets `data-highlighted` on the row under the pointer or the
+   * arrow keys, and `data-disabled` on one that can't be chosen. 44 px tall, 36 px with a mouse,
+   * trackpad or pen.
+   */
+  .fp-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 2.75rem;
+    padding-inline: 0.625rem;
+    border-radius: 4px;
+    color: var(--fp-color-ink);
+    font-family: var(--fp-font-display);
+    font-size: 11px;
+    line-height: 1.3;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: default;
+    user-select: none;
+    outline: none;
+
+    @media (pointer: fine) {
+      min-height: 2.25rem;
+    }
+
+    &[data-highlighted] {
+      background-color: var(--fp-color-chrome-300);
+      box-shadow:
+        inset 1px 1px 3px var(--fp-color-bevel-lo),
+        inset -1px -1px 0 var(--fp-color-bevel-hi);
+    }
+
+    /* The keyboard's row also gets the ring every focused control has, inside the row. */
+    &:focus-visible {
+      outline: 2px solid var(--fp-color-focus-ring);
+      outline-offset: -2px;
+    }
+
+    &[data-disabled] {
+      opacity: 0.45;
+    }
+
+    /*
+     * Forced colours drop the pressed-in shading: the system's highlight colours show the highlighted
+     * row, and GrayText, not a fade, shows a disabled one.
+     */
+    @media (forced-colors: active) {
+      &[data-highlighted] {
+        forced-color-adjust: none;
+        background: Highlight;
+        box-shadow: none;
+        color: HighlightText;
+
+        /* Opted out, its focus ring would keep the skin's colour: the system's text colour shows on any ground. */
+        &:focus-visible {
+          outline-color: HighlightText;
+        }
+      }
+
+      &[data-disabled] {
+        opacity: 1;
+        color: GrayText;
+      }
+    }
+  }
+
+  /** A groove between groups of rows on an fp-menu, cut into the plate: shaded above, lit below. */
+  .fp-menu-separator {
+    height: 0;
+    margin: 0.25rem 0.375rem;
+    border-top: 1px solid var(--fp-color-bevel-lo);
+    border-bottom: 1px solid var(--fp-color-bevel-hi);
+  }
+
   /** Recessed well inside a matte panel, for secondary content or an empty slot. */
   .fp-well {
     color-scheme: var(--fp-scheme);
@@ -929,6 +1542,11 @@
     box-shadow:
       inset 1px 1px 2px var(--fp-color-bevel-lo),
       inset -1px -1px 0 var(--fp-color-bevel-hi);
+
+    /* Forced colours drop the shading that recesses it: an outline keeps an empty well in view. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+    }
   }
 
   /** Silkscreened hardware label. */
@@ -951,6 +1569,11 @@
       0 0 0 2px var(--fp-color-chrome-800),
       inset 2px 2px 4px rgb(0 0 0 / 0.35),
       inset -1px -1px 0 rgb(255 255 255 / 0.2);
+
+    /* Forced colours drop the chrome bezel: an outline frames the glass. */
+    @media (forced-colors: active) {
+      outline: 2px solid CanvasText;
+    }
   }
 
   /** One line of LCD text. Cells of fp-lcd-ghost stacked behind it show the unlit segments, as on real glass. */
@@ -968,6 +1591,11 @@
   /** The unlit segments behind an LCD line. Decorative: give it aria-hidden="true". */
   .fp-lcd-ghost {
     color: var(--fp-color-lcd-ghost);
+
+    /* Forced colours would draw the unlit segments as solid as the text over them. */
+    @media (forced-colors: active) {
+      visibility: hidden;
+    }
   }
 
   /** Dark housing that LEDs and small readouts sit in. */
@@ -984,6 +1612,11 @@
     box-shadow:
       inset 1px 1px 2px rgb(0 0 0 / 0.5),
       0 1px 0 var(--fp-color-bevel-hi);
+
+    /* Forced colours turn the dark housing into the page colour: an outline keeps it in view. */
+    @media (forced-colors: active) {
+      outline: 1px solid CanvasText;
+    }
   }
 
   /** An LED with its own dark bezel ring, so a lit one reads on light chrome too. Unlit by default. */