actual-css 0.7.0 → 0.9.0

package/src/css/components/badge.css

@@ -9,8 +9,10 @@
  * --badge-size
  * --badge-pad-x
  * --badge-font-size
+ * --badge-icon-size
  * --badge-dot-size
  * --badge-radius
+ * --badge-dismiss-icon-size
  *
  * Internal:
  * --badge-default-bg
@@ -26,6 +28,7 @@
 :where(.badge) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -33,10 +36,14 @@
 }
 
 .badge {
-  --badge-size: var(--density-compact-size);
-  --badge-pad-x: 0.55em;
-  --badge-font-size: var(--font-size-xs);
+  --badge-size: 1.5rem;
+  /* A third of the height keeps the pill proportional across local sizes
+     without coupling it to the label typography. */
+  --badge-pad-x: calc(var(--badge-size) / 3);
+  --badge-font-size: var(--font-size-sm);
+  --badge-icon-size: 1em;
   --badge-dot-size: 0.5rem;
+  --badge-dismiss-icon-size: 0.875em;
   --badge-default-bg: var(--surface-subtle);
   --badge-default-fg: var(--intent, var(--text));
   --badge-default-border: var(--border);
@@ -49,7 +56,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  vertical-align: middle;
   gap: 0.35em;
+  /* Content-sized: a flex parent must not squeeze the pill and push its
+     nowrap label outside the background. */
+  flex: none;
   inline-size: fit-content;
   max-inline-size: 100%;
   min-block-size: var(--badge-size);
@@ -59,7 +70,7 @@
   background: var(--badge-bg);
   color: var(--badge-fg);
   font-size: var(--badge-font-size);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-medium);
   line-height: 1;
   text-decoration: none;
   white-space: nowrap;
@@ -70,6 +81,31 @@
     box-shadow var(--duration);
 }
 
+.badge.sm {
+  --badge-size: 1.25rem;
+  --badge-font-size: var(--font-size-xs);
+  --badge-dot-size: 0.375rem;
+}
+
+.badge.lg {
+  --badge-size: 1.875rem;
+  --badge-font-size: var(--font-size-md);
+  --badge-dot-size: 0.625rem;
+}
+
+/* Decorative children follow the badge's optical size. Text and interactive
+   dismiss buttons retain their own boxes. */
+.badge > :where(svg, img, [aria-hidden="true"]:not(.dot)) {
+  flex: none;
+  /* The shared rule maps --badge-icon-size onto font-size. One em is therefore
+     the requested optical size; reusing the em-valued hook here would apply its
+     factor a second time. */
+  inline-size: 1em;
+  block-size: 1em;
+  font-size: var(--badge-icon-size);
+  line-height: 1;
+}
+
 /* Soft by default. Local defaults remain behind --ui-* in the resolution
    chain, so explicit shared treatments compose without selector exclusions. */
 @supports (color: color-mix(in oklch, red, white)) {
@@ -85,10 +121,9 @@
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
-    --badge-default-fg: color-mix(
-      in oklab,
-      var(--text),
-      var(--intent, var(--text)) var(--soft-fg-mix)
+    --badge-default-fg: var(
+      --intent-soft-fg,
+      color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
     /* @sync soft-recipe */
   }
@@ -105,12 +140,22 @@
   block-size: var(--badge-size);
 }
 
+/* The shared .dot separator doubles as a status dot inside a badge.
+   currentColor follows the badge's resolved ink, so the dot matches a soft
+   intent without repeating the intent class on it. */
+.badge > .dot {
+  background-color: currentColor;
+}
+
 .badge > button {
   display: inline-grid;
   place-items: center;
   flex: 0 0 auto;
-  min-inline-size: var(--density-compact-size);
-  min-block-size: var(--density-compact-size);
+  /* WCAG 2.5.8 floors pointer targets at 24 CSS px. Density and local size may
+     keep the badge visually compact through the negative margins, but never
+     shrink its action target below that literal floor. */
+  min-inline-size: max(var(--badge-size), 24px);
+  min-block-size: max(var(--badge-size), 24px);
   margin-block: -0.25rem;
   margin-inline-start: -0.15em;
   margin-inline-end: -0.45em;
@@ -124,6 +169,21 @@
   cursor: pointer;
 }
 
+/* Dismiss mark — an empty dismiss button paints its own X from the shared
+   --icon-close mask, so no icon font or text glyph is required in the markup
+   (same contract as .alert-dismiss and .dialog-close). A mask box is a block
+   box, so place-items centers the ink itself; a text glyph would only center
+   its line box and land the ink low, because a lowercase x has no descender
+   and only x-height of ascent. A button with its own content keeps it. */
+.badge > button:empty::before {
+  content: "";
+  inline-size: var(--badge-dismiss-icon-size);
+  block-size: var(--badge-dismiss-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
+}
+
 .badge > button:not(:disabled):hover {
   background: var(--hover-overlay);
 }
@@ -156,7 +216,14 @@
   background: var(--ui-hover-bg, var(--badge-default-hover-bg));
 }
 
-:where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
+/* Solid and empty badges keep the overlay darkening on hover; soft badges do
+   not — their hover fill (--soft-hover-alpha) is already the state change, and
+   stacking a second darkening drags the soft ink below its resting contrast.
+   Soft here means :not(.solid, .outline, :empty), mirroring the soft hover-bg
+   recipe above. */
+:where(a.badge, button.badge):is(.solid, :empty):not(
+  :where(:disabled, [aria-disabled="true"])
+):hover {
   /* Huge inset spread paints the overlay over the pill radius (see button.css). */
   box-shadow: inset 0 0 0 999px var(--hover-overlay);
 }
@@ -188,6 +255,5 @@ a.badge[aria-disabled="true"] {
 @media print {
   .badge {
     border: var(--border-width) solid CanvasText;
-    break-inside: avoid;
   }
 }

package/src/css/components/breadcrumb.css

@@ -33,8 +33,7 @@
   text-decoration: none;
 }
 
-.breadcrumb a:not([aria-current]):hover,
-.breadcrumb a[aria-current="false"]:hover {
+.breadcrumb a:not([aria-current="page"]):hover {
   color: var(--text);
   text-decoration: underline;
 }
@@ -43,7 +42,7 @@
   border-radius: var(--radius-sm);
 }
 
-.breadcrumb :where(li, a, span):where([aria-current]:not([aria-current="false"])) {
+.breadcrumb :where(li, a, span)[aria-current="page"] {
   color: var(--text);
   font-weight: var(--font-weight-medium);
 }

package/src/css/components/button.css

@@ -39,6 +39,7 @@
 :where(.btn) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -110,13 +111,16 @@
   --ui-border: transparent;
 }
 
-/* Solid/soft get the overlay darkening on hover; outline/ghost/link stay flat.
-   Routed through a variable instead of a :not(.outline, .ghost, .link)
-   exclusion so the hover rule below only has to state the interactive
-   element list once. */
+/* Solid keeps the overlay darkening on hover; soft/outline/ghost/link stay
+   flat. The soft hover is its own fill change (--soft-hover-alpha) — a second
+   overlay on top would double the fill step and drag its ink below the resting
+   contrast on every intent. Routed through a variable instead of a
+   :not(.outline, .ghost, .link) exclusion so the hover rule below only has to
+   state the interactive element list once. */
 .btn.outline,
 .btn.ghost,
-.btn.link {
+.btn.link,
+.btn.soft {
   --btn-hover-overlay: transparent;
 }
 
@@ -239,14 +243,3 @@ a.btn[aria-disabled="true"] {
     border-color: GrayText;
   }
 }
-
-@media print {
-  :is(button, input[type="button"], input[type="submit"], input[type="reset"]).btn {
-    display: none !important;
-  }
-
-  a.btn[href^="http"]::after {
-    content: " (" attr(href) ")";
-    font-size: 0.875em;
-  }
-}

package/src/css/components/card.css

@@ -26,8 +26,15 @@
  * --busy-overlay-bg
  */
 /* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
+   Local intent classes still win because :where() has zero specificity.
+   The intent tokens are reset alongside --ui-*: the shared variants
+   (.soft/.solid/.outline/.surface) read --intent / --intent-fg / --intent-soft-fg
+   when they paint this surface, so an ancestor intent would otherwise leak
+   through a variant that has no local intent class. */
 :where(.card) {
+  --intent: initial;
+  --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -100,7 +107,7 @@
   box-shadow: var(--shadow);
 }
 .card.subtle {
-  background: var(--surface-subtle);
+  --card-bg: var(--surface-subtle);
 }
 .card.compact {
   --card-pad: var(--space-20);

package/src/css/components/chat.css

@@ -62,6 +62,7 @@
 :where(.chat-bubble) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;

package/src/css/components/data-list.css

@@ -18,7 +18,7 @@
 .data-list > dt {
   min-inline-size: 0;
   margin-block-start: 0;
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .data-list > dd {

package/src/css/components/drawer.css

@@ -26,15 +26,24 @@ dialog.drawer {
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
-     A percentage height resolves against the fixed containing viewport, while
-     dynamic viewport units can be stale in embedded previews. */
+
+     The panel reaches both viewport edges, so it has to follow the space that
+     is actually on screen: --viewport-block resolves to 100dvh and tracks a
+     mobile browser's collapsing URL bar. A percentage resolves against the
+     layout viewport instead, which those browsers size as if the bar were
+     hidden — that put the footer below the fold for as long as it showed. The
+     modal pins the small viewport for the opposite reason: it floats, so a
+     stable height beats a panel that breathes while the bar moves.
+
+     An embedded preview that fakes a viewport overrides --viewport-block on
+     its own shell; the component does not degrade to a percentage for it. */
   position: fixed;
   inset-block-start: 0;
 
   inline-size: min(calc(var(--viewport-inline) * 0.9), var(--drawer-size));
-  block-size: 100%;
+  block-size: var(--viewport-block);
   max-inline-size: none;
-  max-block-size: 100%;
+  max-block-size: var(--viewport-block);
   margin: 0;
   padding: var(--drawer-pad);
   border: 0;
@@ -62,8 +71,18 @@ dialog.drawer[open] {
     transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
-/* Backdrop color sourced from components/surface.css so it matches .modal
-   and .surface-backdrop across the dialog family. */
+/* A form is the drawer's content wrapper when actions need method="dialog".
+   Span the drawer tracks so the form can keep the header at the top, let the
+   body absorb the available height, and keep the footer at the bottom. */
+dialog.drawer > form {
+  display: grid;
+  grid-row: 1 / -1;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: var(--space-40);
+  min-block-size: 100%;
+}
+
+/* The shared backdrop token keeps drawer and modal scrims consistent. */
 dialog.drawer::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
@@ -96,10 +115,16 @@ dialog.drawer[open]::backdrop {
   }
 }
 
-/* Scrollable navigation region inside the drawer. */
-dialog.drawer nav {
+/* The body region absorbs the panel's height and scrolls. A drawer is a
+   full-height shell by definition, so it always scrolls its body — unlike the
+   modal, which sizes to its content and opts in with .scrollable. Header and
+   footer keep their own tracks; .drawer-close is named because a generic
+   exclusion list is easier to trust than its `position: absolute`. */
+dialog.drawer > :not(:is(header, footer, form, .drawer-close)),
+dialog.drawer > form > :not(:is(header, footer, .drawer-close)) {
   min-block-size: 0;
-  overflow-y: auto;
+  overflow: auto;
+  overscroll-behavior: contain;
 }
 
 @supports (transition-behavior: allow-discrete) {
@@ -128,33 +153,33 @@ dialog.drawer nav {
 }
 
 /* Safari before 16.4 does not support :dir(); keep the ancestor-attribute
-   path as the Minimal-tier fallback. */
+   path as the Degraded-tier fallback. The :dir() rules are dropped on their
+   own there, so they need no wrapper. :dir() follows inherited HTML
+   directionality and handles nested direction changes; the explicit ltr rules
+   neutralize an outer RTL fallback selector. Each specificity group keeps the
+   fallback before the :dir() rules. */
 [dir="rtl"] dialog.drawer {
   --drawer-closed-translate: 100%;
 }
 
-[dir="rtl"] dialog.drawer[data-side="end"] {
+dialog.drawer:dir(ltr) {
   --drawer-closed-translate: -100%;
 }
 
-/* :dir() follows inherited HTML directionality and handles nested direction
-   changes. Explicit ltr rules neutralize an outer RTL fallback selector. */
-@supports selector(:dir(rtl)) {
-  dialog.drawer:dir(ltr) {
-    --drawer-closed-translate: -100%;
-  }
+dialog.drawer:dir(rtl) {
+  --drawer-closed-translate: 100%;
+}
 
-  dialog.drawer[data-side="end"]:dir(ltr) {
-    --drawer-closed-translate: 100%;
-  }
+[dir="rtl"] dialog.drawer[data-side="end"] {
+  --drawer-closed-translate: -100%;
+}
 
-  dialog.drawer:dir(rtl) {
-    --drawer-closed-translate: 100%;
-  }
+dialog.drawer[data-side="end"]:dir(ltr) {
+  --drawer-closed-translate: 100%;
+}
 
-  dialog.drawer[data-side="end"]:dir(rtl) {
-    --drawer-closed-translate: -100%;
-  }
+dialog.drawer[data-side="end"]:dir(rtl) {
+  --drawer-closed-translate: -100%;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -163,15 +188,59 @@ dialog.drawer nav {
   }
 }
 
-/* The close button shares the modal's interior placement (modal.css): absolute
-   at the panel's top inline-end, out of the content flow. The header reserves
-   inline room so the title never runs under it. */
+/* The header reserves inline room so the title never runs under the close
+   control. */
 dialog.drawer > header,
 dialog.drawer > form > header {
   padding-inline-end: calc(var(--control-size) + var(--space-30));
 }
-@media print {
-  dialog.drawer[open] {
-    display: none !important;
+
+/* Close control, owned here so a drawer-only build does not depend on
+   modal.css. Mirrors the modal's .dialog-close placement: absolute at the
+   panel's top inline-end, out of the content flow. */
+.drawer-close {
+  --drawer-close-icon-size: 1rem;
+
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  cursor: pointer;
+
+  position: absolute;
+  z-index: 1;
+  inset-block-start: var(--space-20);
+  inset-inline-end: var(--space-20);
+
+  inline-size: var(--control-size);
+  block-size: var(--control-size);
+
+  background: var(--surface-subtle);
+}
+
+.drawer-close::before {
+  content: "";
+  inline-size: var(--drawer-close-icon-size);
+  block-size: var(--drawer-close-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
+}
+
+@media (hover: hover) {
+  .drawer-close:hover {
+    box-shadow: inset 0 0 0 999px var(--hover-overlay);
+    color: var(--text);
   }
 }
+
+.drawer-close:active {
+  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+}
+
+.drawer-close:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--focus-ring-shadow);
+}

package/src/css/components/fab.css

@@ -126,9 +126,3 @@
   opacity: 1;
   transform: none;
 }
-
-@media print {
-  .fab {
-    display: none;
-  }
-}

package/src/css/components/flyout.css

@@ -1,14 +1,12 @@
 /*
  * Flyout — floating panel for actions and links.
  *
- * JavaScript owns positioning (position: fixed + left/top), state
- * (hidden + .is-open), focus, and keyboard behavior. CSS owns the surfaced
- * panel appearance, item styles, and animation.
+ * JavaScript promotes the panel to the top layer and chooses viewport or
+ * document coordinates from its anchor. It also owns state (.is-open), focus,
+ * and keyboard behavior. CSS owns the surfaced panel appearance, item styles,
+ * and animation.
  *
- * Runtime markers (managed by surface.js): .is-open marks an open flyout,
- * .is-sheet marks "auto" resolved to bottom-sheet presentation on coarse
- * pointers. Authors opt into mobile behavior with
- * [data-flyout-mobile="sheet|auto|none|anchored"].
+ * Runtime marker (managed by surface.js): .is-open marks an open flyout.
  * --surface-anchor-width is set by surface.js while an open flyout is positioned.
  *
  * Public hooks:
@@ -17,7 +15,7 @@
  *
  * Internal:
  * --menu-item-size (derived from --control-size for menu rows)
- * --available-height (measured by floating.js)
+ * --available-height (measured by the positioner)
  * --surface-anchor-width (measured by surface.js)
  */
 
@@ -44,8 +42,8 @@
   --menu-item-size: var(--control-size);
   z-index: var(--z-menu);
   /* No-JS fallback: below the trigger inside the relative .flyout-trigger.
-     surface.js switches an open flyout to position: fixed with measured
-     coordinates; this only covers a flyout revealed without the runtime. */
+     surface.js replaces this with the anchor's coupled position/coordinate
+     mode; this only covers a flyout revealed without the runtime. */
   position: absolute;
   inset-block-start: calc(100% + var(--space-10));
   inset-inline-start: 0;
@@ -73,101 +71,53 @@
   box-shadow: var(--shadow-popout);
   list-style: none;
   opacity: 1;
-  /* Anchored flyouts fade in and out; scaling around the center would detach
-     the anchored edge from its trigger on wide panels. The sheet presentation
-     below adds its own translate motion. */
+  /* Flyouts fade in and out; scaling around the center would detach the
+     anchored edge from its trigger on wide panels. */
   transition: opacity var(--duration-fast) ease;
 }
 
-/* Native popovers enter the top layer with UA geometry that conflicts with
-   anchored positioning. The reset is gated on real Popover support because an
-   attribute selector matches whether or not the engine implements Popover:
-   without it the UA neither hides nor promotes the element, so an ungated
-   reset would strand a permanently visible panel at inset: auto. Popover is
-   not part of Actual's Minimal contract — engines inside the Minimal range
-   may lack it — so the gate is about the capability, not the floor. Kept
-   scoped to Actual surfaces so bare [popover] elements retain their platform
+/* A popover enters the top layer with UA geometry that conflicts with anchored
+   positioning. surface.js sets popover="manual" on every surface it manages,
+   so this is the transport's own geometry rather than an opt-in. Kept scoped to
+   Actual surfaces so bare [popover] elements retain their platform
    presentation. */
-@supports selector(:popover-open) {
-  .flyout[popover] {
-    position: fixed;
-    inset: auto;
-    margin: 0;
-  }
+.flyout[popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+}
 
-  /* A presentation class may own its *visible* display type, but must not
-     override the platform's hidden state. The UA closes a popover with
-     display: none, and an author declaration beats the UA origin whatever the
-     specificity — so .flyout's own display: grid would leave a closed popover
-     painted at its static position. Restoring both properties here also gives
-     the native path the exit target the runtime path already has in
-     .flyout[hidden]: without an opacity to animate, the overlay/display
-     allow-discrete transition below would hold a fully opaque panel in the top
-     layer and then snap it away. */
-  .flyout[popover]:not(:popover-open) {
-    display: none;
-    opacity: 0;
-  }
+/* A presentation class may own its *visible* display type, but must not
+   override the platform's hidden state. The UA closes a popover with
+   display: none, and an author declaration beats the UA origin whatever the
+   specificity — so .flyout's own display: grid would leave a closed popover
+   painted at its static position. The opacity is the exit target: with nothing
+   to animate, the overlay/display allow-discrete transition below would hold a
+   fully opaque panel in the top layer and then snap it away. */
+.flyout[popover]:not(:popover-open) {
+  display: none;
+  opacity: 0;
 }
 
-/* compat-ok: :popover-open rides in a forgiving :is(), where an engine without
-   Popover discards just that member and .is-open alone keeps driving the open
-   state. This is a property of the forgiving list, not of the pseudo-class: in
-   a plain selector list an unsupported member would invalidate the whole rule.
-   Keep it inside :is()/:where() or gate it. */
-.flyout:is(.is-open, :popover-open):not(.is-sheet) {
+/* Both lifecycles in one rule: .is-open for a surface.js panel, :popover-open
+   for one an author drives natively with popovertarget. */
+.flyout:is(.is-open, :popover-open) {
   inset: auto;
 }
 
-/* compat-ok: forgiving :is() again, and @starting-style is itself unsupported
-   across part of the Minimal range, so the rule simply does not exist there. */
+/* @starting-style is above the floor (Safari 17.5), so where it is missing the
+   entry simply has no animated origin and the panel appears at full opacity. */
 @starting-style {
   .flyout:is(.is-open, :popover-open) {
     opacity: 0;
   }
 }
 
-/* Bottom-sheet presentation. surface.js toggles .is-sheet when the flyout is
-   opened on coarse pointer / narrow viewports. */
-.flyout.is-sheet {
-  --menu-item-size: var(--control-size-lg);
-  position: fixed;
-  inset-inline: 0;
-  inset-block-start: auto;
-  inset-block-end: 0;
-  inline-size: auto;
-  min-inline-size: 0;
-  max-inline-size: none;
-  max-block-size: min(calc(var(--viewport-block) * 0.75), 32rem);
-  overflow: auto;
-  grid-template-columns: 1fr;
-  padding: max(var(--space-30), env(safe-area-inset-top)) var(--space-30)
-    max(var(--space-30), env(safe-area-inset-bottom));
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
-  /* Sheet motion is a directional slide from the viewport edge; it replaces
-     the base fade-only recipe. */
-  transition:
-    opacity var(--duration-fast) ease,
-    translate var(--duration-fast) ease;
-}
-
 .flyout[hidden] {
   display: none;
   opacity: 0;
 }
 
-.flyout.is-sheet[hidden] {
-  translate: 0 var(--space-30);
-}
-
-/* compat-ok: forgiving :is() inside @starting-style, as above. */
-@starting-style {
-  .flyout.is-sheet:is(.is-open, :popover-open) {
-    translate: 0 var(--space-30);
-  }
-}
-
 /* display keeps the exit transition alive for the [hidden] path; overlay does
    the same for the native popover path, where hidePopover() would otherwise
    drop the panel out of the top layer on the first frame and let a parent
@@ -180,14 +130,6 @@
       overlay var(--duration-fast) allow-discrete,
       display var(--duration-fast) allow-discrete;
   }
-
-  .flyout.is-sheet {
-    transition:
-      opacity var(--duration-fast) ease,
-      translate var(--duration-fast) ease,
-      overlay var(--duration-fast) allow-discrete,
-      display var(--duration-fast) allow-discrete;
-  }
 }
 
 .flyout > li {
@@ -203,7 +145,7 @@
   margin: 0;
   color: var(--text-muted);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .flyout > section > ul {
@@ -221,8 +163,3 @@
 /* Vertical dividers — .menu-separator (menu.css) is the canonical way to
    separate menu items. Flyout panels that are not menus use auto grid gap
    declared on .flyout itself. */
-@media print {
-  .flyout {
-    display: none !important;
-  }
-}