actual-css 0.3.1 → 0.4.1

package/dist/optional.css

@@ -1,1048 +0,0 @@
-/*
- * One-time code input with visual cells and one native input.
- *
- * Add one direct span per accepted character. The cells determine the
- * component width; the overlaid input remains the only interactive control.
- *
- * Public hooks:
- * --otp-cell-size
- * --otp-gap
- * --otp-font-size
- *
- * Internal:
- * --otp-cell-border
- * --otp-cell-bg
- */
-.otp {
-  --otp-cell-size: var(--control-size);
-  --otp-gap: var(--space-10);
-  --otp-font-size: 1.5rem;
-  --otp-cell-border: var(--border);
-  --otp-cell-bg: var(--surface);
-
-  position: relative;
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-auto-columns: var(--otp-cell-size);
-  inline-size: fit-content;
-  max-inline-size: 100%;
-  gap: var(--otp-gap);
-  border-radius: var(--radius);
-  direction: ltr;
-}
-
-.otp > span {
-  inline-size: var(--otp-cell-size);
-  block-size: var(--otp-cell-size);
-  border: var(--border-width) solid var(--otp-cell-border);
-  border-radius: var(--radius);
-  background: var(--otp-cell-bg);
-  transition:
-    border-color var(--duration),
-    background-color var(--duration),
-    box-shadow var(--duration);
-}
-
-/* The native input owns focus, selection, autofill, paste, and one-time-code
-   integration. Its spacing aligns monospace glyphs with the visual cells. */
-.otp > input {
-  position: absolute;
-  z-index: 1;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  margin: 0;
-  padding: 0 calc((var(--otp-cell-size) - 1ch) / 2);
-  border: 0;
-  outline: 2px solid transparent;
-  box-shadow: none;
-  background: transparent;
-  color: var(--text);
-  font-family: var(--font-mono);
-  font-size: var(--otp-font-size);
-  font-variant-numeric: tabular-nums;
-  line-height: var(--otp-cell-size);
-  letter-spacing: calc(var(--otp-cell-size) + var(--otp-gap) - 1ch);
-  text-align: start;
-  appearance: none;
-}
-
-.otp:focus-within {
-  box-shadow: var(--focus-ring-shadow);
-}
-
-.otp > input:focus ~ span {
-  --otp-cell-border: var(--focus);
-}
-
-.otp > input[aria-invalid="true"] ~ span,
-.needs-validation.was-validated .otp > input:invalid ~ span {
-  --otp-cell-border: var(--danger);
-}
-
-@supports selector(:user-invalid) {
-  .needs-validation .otp > input:user-invalid ~ span {
-    --otp-cell-border: var(--danger);
-  }
-}
-
-.otp > input:disabled {
-  color: var(--state-disabled);
-  cursor: not-allowed;
-}
-
-.otp > input:disabled ~ span {
-  --otp-cell-bg: var(--surface-subtle);
-
-  opacity: var(--disabled-opacity);
-}
-
-@media (forced-colors: active) {
-  .otp:focus-within {
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-outline-offset);
-    box-shadow: none;
-  }
-
-  .otp > input:focus ~ span {
-    --otp-cell-border: Highlight;
-  }
-
-  .otp > input[aria-invalid="true"] ~ span,
-  .needs-validation.was-validated .otp > input:invalid ~ span {
-    --otp-cell-border: Mark;
-  }
-}
-
-/*
- * Message rows composed from an optional avatar, metadata, and bubble.
- *
- * Public hooks:
- * --chat-gap
- * --chat-max-size
- *
- * Internal:
- * --chat-bubble-bg
- * --chat-bubble-fg
- * --chat-bubble-border
- */
-.chat {
-  --chat-gap: var(--space-30);
-  --chat-max-size: min(85%, 40rem);
-
-  display: grid;
-  grid-auto-rows: min-content;
-  column-gap: var(--chat-gap);
-}
-
-.chat-start {
-  grid-template-columns: auto minmax(0, 1fr);
-  justify-items: start;
-}
-
-.chat-end {
-  grid-template-columns: minmax(0, 1fr) auto;
-  justify-items: end;
-}
-
-.chat-avatar {
-  grid-row: 1 / span 3;
-  align-self: end;
-}
-
-.chat-start > .chat-avatar {
-  grid-column: 1;
-}
-
-.chat-end > .chat-avatar {
-  grid-column: 2;
-}
-
-.chat-header,
-.chat-footer {
-  display: flex;
-  gap: var(--space-10);
-  color: var(--text-muted);
-  font-size: var(--font-size-xs);
-}
-
-.chat-start > :is(.chat-header, .chat-bubble, .chat-footer) {
-  grid-column: 2;
-}
-
-.chat-end > :is(.chat-header, .chat-bubble, .chat-footer) {
-  grid-column: 1;
-}
-
-/* Intent boundary — an outer intent does not tint nested messages. */
-:where(.chat-bubble) {
-  --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-}
-
-.chat-bubble {
-  --chat-bubble-bg: var(--ui-bg, var(--intent, var(--surface-subtle)));
-  --chat-bubble-fg: var(--ui-fg, var(--intent-fg, var(--text)));
-  --chat-bubble-border: var(--ui-border, transparent);
-
-  inline-size: fit-content;
-  max-inline-size: var(--chat-max-size);
-  padding: var(--space-20) var(--space-30);
-  border: var(--border-width) solid var(--chat-bubble-border);
-  border-radius: var(--radius-lg);
-  background: var(--chat-bubble-bg);
-  color: var(--chat-bubble-fg);
-  overflow-wrap: anywhere;
-}
-
-.chat-start > .chat-bubble {
-  border-end-start-radius: var(--radius-sm);
-}
-
-.chat-end > .chat-bubble {
-  border-end-end-radius: var(--radius-sm);
-}
-
-/* Remove the reserved avatar gutter when a message has no avatar. This is a
-   cosmetic enhancement; the two-column baseline remains fully readable. */
-@supports selector(:has(*)) {
-  .chat:not(:has(> .chat-avatar)) {
-    column-gap: 0;
-  }
-}
-
-@media (forced-colors: active) {
-  .chat-bubble {
-    border-color: CanvasText;
-  }
-}
-
-/*
- * Decorative intent-colored frame for one direct child.
- *
- * Public hooks:
- * --aura-color
- * --aura-width
- * --aura-blur
- * --aura-radius
- * --aura-duration
- */
-@property --aura-angle {
-  syntax: "<angle>";
-  inherits: false;
-  initial-value: 0deg;
-}
-
-/* Intent boundary — an outer intent does not tint nested aura frames. */
-:where(.aura) {
-  --intent: initial;
-  --intent-fg: initial;
-}
-
-.aura {
-  --aura-color: var(--intent, var(--primary));
-  --aura-width: 2px;
-  --aura-blur: 0.75rem;
-  --aura-radius: var(--radius-lg);
-  --aura-duration: 6s;
-
-  position: relative;
-  isolation: isolate;
-  display: inline-grid;
-  padding: var(--aura-width);
-  border-radius: calc(var(--aura-radius) + var(--aura-width));
-  background: var(--aura-color);
-  background: conic-gradient(from var(--aura-angle), transparent 0 65%, var(--aura-color));
-}
-
-.aura::before {
-  position: absolute;
-  z-index: -1;
-  inset: 0;
-  border-radius: inherit;
-  background: inherit;
-  filter: blur(var(--aura-blur));
-  opacity: 0.45;
-  pointer-events: none;
-  content: "";
-}
-
-.aura > * {
-  position: relative;
-}
-
-.aura-glow {
-  background: var(--aura-color);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .aura:not(.aura-glow) {
-    animation: aura-rotate var(--aura-duration) linear infinite;
-  }
-}
-
-@keyframes aura-rotate {
-  to {
-    --aura-angle: 360deg;
-  }
-}
-
-@supports selector(:has(*)) {
-  .aura:has(> .btn) {
-    --aura-radius: var(--radius);
-  }
-
-  .aura:has(> :is(.card, .alert)) {
-    --aura-radius: var(--radius-lg);
-  }
-
-  .aura:has(> .badge) {
-    --aura-radius: var(--radius-full);
-  }
-}
-
-@media (forced-colors: active) {
-  .aura {
-    background: CanvasText;
-  }
-
-  .aura::before {
-    display: none;
-  }
-}
-
-/*
- * Fixed floating action placement and a native-details speed dial.
- * Button owns the action's size, shape, and intent; FAB only owns placement.
- *
- * Public hooks:
- * --fab-offset
- * --fab-gap
- */
-.fab {
-  --fab-offset: var(--space-40);
-  --fab-gap: var(--space-20);
-
-  position: fixed;
-  z-index: var(--z-menu);
-  inset-block-end: max(var(--fab-offset), env(safe-area-inset-bottom));
-  inset-inline-end: var(--fab-offset);
-}
-
-.fab > summary {
-  list-style: none;
-  cursor: pointer;
-}
-
-.fab > summary::-webkit-details-marker {
-  display: none;
-}
-
-/* A lone decorative plus can communicate the open/close state without
-   requiring a second icon or JavaScript-managed content. */
-.fab > summary > [aria-hidden="true"]:only-child {
-  display: inline-block;
-  transition: transform var(--duration);
-}
-
-.fab-actions {
-  position: absolute;
-  inset-inline-end: 0;
-  inset-block-end: calc(100% + var(--fab-gap));
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: var(--fab-gap);
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transform: translateY(var(--space-10));
-  transition:
-    opacity var(--duration),
-    transform var(--duration),
-    visibility 0s linear var(--duration);
-}
-
-/* One action is one compact row. Keeping this relationship inside FAB avoids
-   wrapping and prevents labels from becoming visually associated with the
-   preceding or following button. */
-.fab-action {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--fab-gap);
-  inline-size: max-content;
-  max-inline-size: calc(var(--viewport-inline) - var(--fab-offset) - var(--fab-offset));
-}
-
-.fab-label {
-  flex: 0 1 auto;
-  overflow: hidden;
-  max-inline-size: 16rem;
-  padding: var(--space-10) var(--space-20);
-  border-radius: var(--radius);
-  background: var(--surface);
-  color: var(--text);
-  box-shadow: var(--shadow);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-tight);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.fab[open] > .fab-actions {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  transform: translateY(0);
-  transition-delay: 0s;
-}
-
-.fab[open] > summary > [aria-hidden="true"]:only-child {
-  transform: rotate(45deg);
-}
-
-@media (forced-colors: active) {
-  .fab-label {
-    border: var(--border-width) solid CanvasText;
-    box-shadow: none;
-  }
-}
-
-@media print {
-  .fab {
-    display: none;
-  }
-}
-
-/*
- * Floating labels — optional composition over the text controls
- * (.input, .textarea, .select) and .field-label.
- *
- * The cell owns a control plus its label; the label overlays the control and
- * floats to the top when the control is focused or non-empty. Help and error
- * messages stay in the surrounding .field, not inside the cell, so the
- * resting label can center on the control alone.
- *
- * The control must precede the label: the float is driven by the sibling
- * combinator and :placeholder-shown. Every .input/.textarea needs
- * placeholder=" " to expose a reliable empty state — without it the label
- * only reacts to focus.
- *
- * Density flows through --control-size: .sm/.lg shrink the control geometry
- * and the reserved headroom with it, leaving typography untouched.
- *
- * Public hooks:
- * --floating-pad-block-start
- */
-.floating-field {
-  --floating-pad-block-start: calc(var(--control-size) / 2 + var(--space-20));
-
-  /* Grid blockifies the control, removing the inline descender gap a textarea
-     would otherwise leave under itself. */
-  position: relative;
-  display: grid;
-}
-
-.floating-field > :is(.input, .textarea, .select) {
-  /* Headroom for the floated label is always reserved, so the value never
-     jumps when the label floats. Half the control centers the resting label;
-     the extra step clears the floated label's bottom edge. */
-  padding-block-start: var(--floating-pad-block-start);
-  padding-block-end: var(--space-10);
-}
-
-.floating-field > .field-label {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: calc(var(--space-30) + var(--border-width));
-  transform: translateY(-50%);
-  color: var(--text-muted);
-  font-size: var(--control-font-size);
-  font-weight: var(--font-weight);
-  pointer-events: none;
-  transition:
-    inset-block-start var(--duration),
-    transform var(--duration),
-    font-size var(--duration),
-    color var(--duration);
-}
-
-/* A textarea's resting label aligns with the first text line instead of
-   centering in the (tall) control. */
-.floating-field > .textarea + .field-label {
-  inset-block-start: var(--floating-pad-block-start);
-  transform: none;
-}
-
-/* :autofill covers prefilled values before interaction, when the browser may
-   not have propagated the value to the placeholder state yet. */
-.floating-field
-  > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown))
-  + .field-label {
-  inset-block-start: var(--space-10);
-  transform: none;
-  font-size: var(--font-size-xs);
-}
-
-/* Controls without a dependable :placeholder-shown empty state stay floated:
-   select always, and date/time inputs whose placeholder rendering is
-   inconsistent across engines (Firefox shows none). */
-.floating-field
-  > :is(
-    .select,
-    .input[type="date"],
-    .input[type="time"],
-    .input[type="datetime-local"],
-    .input[type="month"],
-    .input[type="week"]
-  )
-  + .field-label {
-  inset-block-start: var(--space-10);
-  transform: none;
-  font-size: var(--font-size-xs);
-}
-
-/*
- * Scroller — optional custom scrollbar styling for overflow regions.
- *
- * Apply to any scroll container (.overflow-auto, sidebars, long tables). Both
- * scrollbar-color (Firefox) and ::-webkit-scrollbar (Safari/Chromium) are
- * styled; the thumb lands as a thin, theme-aware affordance with a hover
- * state.
- *
- * Public hooks:
- * --scroller-size
- * --scroller-padding
- * --scroller-track
- * --scroller-thumb
- * --scroller-thumb-hover
- */
-.scroller {
-  --scroller-size: 0.625rem;
-  --scroller-padding: 0.125rem;
-  --scroller-track: transparent;
-  --scroller-thumb: var(--border);
-  --scroller-thumb-hover: var(--text-muted);
-
-  scrollbar-color: var(--scroller-thumb) var(--scroller-track);
-  scrollbar-width: thin;
-}
-
-/* Opt-in gutter: reserves space so the layout does not shift when
-   the scrollbar appears. Use alongside a known-overflow container. */
-.scroller.stable-gutter {
-  scrollbar-gutter: stable;
-}
-
-.scroller::-webkit-scrollbar {
-  width: var(--scroller-size);
-  height: var(--scroller-size);
-}
-
-.scroller::-webkit-scrollbar-track {
-  background: var(--scroller-track);
-}
-
-.scroller::-webkit-scrollbar-thumb {
-  border: var(--scroller-padding) solid transparent;
-  border-radius: var(--radius-full);
-  background: var(--scroller-thumb);
-  background-clip: content-box;
-}
-
-.scroller::-webkit-scrollbar-thumb:hover {
-  background: var(--scroller-thumb-hover);
-  background-clip: content-box;
-}
-
-.scroller::-webkit-scrollbar-corner {
-  background: var(--scroller-track);
-}
-
-@supports (color: color-mix(in oklch, red, white)) {
-  .scroller {
-    --scroller-thumb: color-mix(in oklch, var(--text-muted), transparent 55%);
-    --scroller-thumb-hover: color-mix(in oklch, var(--text-muted), transparent 30%);
-  }
-}
-
-/*
- * Scroll snap — optional horizontal rails for niche card strips and simple
- * touch-friendly overflow areas.
- *
- * This is not a full carousel. For previous/next controls, pagination,
- * active state, drag behavior, looping, or robust desktop mouse interaction,
- * use a dedicated carousel library.
- *
- * Public hooks:
- * --scroll-snap-gap
- * --scroll-snap-align
- * --scroll-snap-item-size
- * --scroll-snap-padding
- */
-.scroll-snap {
-  --scroll-snap-gap: var(--gap);
-  --scroll-snap-align: start;
-  --scroll-snap-item-size: auto;
-
-  display: flex;
-  gap: var(--scroll-snap-gap);
-  overflow-x: auto;
-}
-
-.scroll-snap > * {
-  flex: 0 0 var(--scroll-snap-item-size);
-}
-
-@supports (scroll-snap-type: x mandatory) {
-  .scroll-snap {
-    overscroll-behavior-inline: contain;
-    scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap));
-    scroll-snap-type: x mandatory;
-  }
-
-  .scroll-snap > * {
-    scroll-snap-align: var(--scroll-snap-align);
-  }
-
-  .scroll-snap[data-snap="center"] {
-    --scroll-snap-align: center;
-  }
-}
-
-@supports (scroll-snap-type: inline mandatory) {
-  .scroll-snap {
-    scroll-snap-type: inline mandatory;
-  }
-}
-
-.scroll-snap[data-scrollbar="hidden"] {
-  scrollbar-width: none;
-}
-
-.scroll-snap[data-scrollbar="hidden"]::-webkit-scrollbar {
-  display: none;
-}
-
-/*
- * Optional fluid typography module.
- *
- * Not imported by actual.css. Import this file manually after actual.css when
- * you need display, title, and lead sizes that scale with the viewport. Typical
- * use cases: marketing pages, landing pages, hero sections, documentation
- * homepages.
- *
- * Do not use this for body text, app UI, or the default prose scale. Fluid
- * sizing is not the foundation of the typography system — it is a small opt-in
- * surface for display text on content-heavy pages.
- *
- * Public API:
- *   --fluid-display, --fluid-title, --fluid-lead  (size tokens, clamp())
- *   .text-display, .text-title, .text-lead        (composed classes)
- *
- * Public hooks:
- * --fluid-display
- * --fluid-title
- * --fluid-lead
- *
- * Values are generated from scripts/rfs.ts over the 360px -> 1440px range.
- */
-:root {
-  --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vw), 4.25rem);
-  --fluid-title: clamp(2rem, calc(1.75rem + 1.111vw), 2.75rem);
-  --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vw), 1.25rem);
-}
-
-@supports (inline-size: 100vi) {
-  :root {
-    --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vi), 4.25rem);
-    --fluid-title: clamp(2rem, calc(1.75rem + 1.111vi), 2.75rem);
-    --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vi), 1.25rem);
-  }
-}
-
-.text-display {
-  font-size: var(--fluid-display);
-  line-height: var(--line-height-tight);
-  text-wrap: balance;
-}
-
-.text-title {
-  font-size: var(--fluid-title);
-  line-height: var(--line-height-tight);
-  text-wrap: balance;
-}
-
-.text-lead {
-  font-size: var(--fluid-lead);
-  line-height: var(--line-height-relaxed);
-}
-
-/*
- * Optional utility helpers.
- *
- * These classes are intentionally not part of the core API.
- * They are escape hatches for layout nudges, not a full atomic scale.
- *
- * Core principle:
- * - .sm / .lg provide local rhythm through --gap and --density-space.
- * - utilities consume the current context instead of defining their own -sm/-lg scale.
- * - optional utilities extend core utilities, they do not re-express them.
- * - follow verbose .{property}-{value} naming.
- *
- * Internal:
- * --cluster-justify (local relay consumed by .cluster)
- */
-
-/* Display */
-.display-block {
-  display: block;
-}
-
-.display-inline {
-  display: inline;
-}
-
-.display-inline-block {
-  display: inline-block;
-}
-
-.display-flex {
-  display: flex;
-}
-
-.display-inline-flex {
-  display: inline-flex;
-}
-
-.display-grid {
-  display: grid;
-}
-
-/* Position */
-.position-relative {
-  position: relative;
-}
-
-.position-absolute {
-  position: absolute;
-}
-
-.position-fixed {
-  position: fixed;
-}
-
-.position-sticky {
-  position: sticky;
-}
-
-/* Sizing */
-.inline-size-full {
-  inline-size: 100%;
-}
-
-.block-size-full {
-  block-size: 100%;
-}
-
-.min-inline-size-0 {
-  min-inline-size: 0;
-}
-
-.min-block-size-0 {
-  min-block-size: 0;
-}
-
-.max-inline-size-none {
-  max-inline-size: none;
-}
-
-/* Flex / alignment */
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-.gap-sm {
-  gap: var(--space-20);
-}
-
-.gap-md {
-  gap: var(--space-40);
-}
-
-.gap-lg {
-  gap: var(--space-50);
-}
-
-.justify-content-start {
-  --cluster-justify: flex-start;
-  justify-content: flex-start;
-}
-
-.justify-content-center {
-  --cluster-justify: center;
-  justify-content: center;
-}
-
-.justify-content-end {
-  --cluster-justify: flex-end;
-  justify-content: flex-end;
-}
-
-.justify-content-space-between {
-  --cluster-justify: space-between;
-  justify-content: space-between;
-}
-
-.align-self-start {
-  align-self: start;
-}
-
-.align-self-center {
-  align-self: center;
-}
-
-.align-self-end {
-  align-self: end;
-}
-
-/* Spacing */
-.padding-context {
-  padding: var(--density-space);
-}
-
-.margin-inline-auto {
-  margin-inline: auto;
-}
-
-.margin-inline-start-auto {
-  margin-inline-start: auto;
-}
-
-.margin-inline-end-auto {
-  margin-inline-end: auto;
-}
-
-.margin-block-start-auto {
-  margin-block-start: auto;
-}
-
-.margin-block-end-auto {
-  margin-block-end: auto;
-}
-
-.gap-context {
-  gap: var(--gap);
-}
-
-.row-gap-context {
-  row-gap: var(--gap);
-}
-
-.column-gap-context {
-  column-gap: var(--gap);
-}
-
-/* Overflow */
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.overflow-clip {
-  overflow: clip;
-}
-
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
-/* Text */
-.white-space-normal {
-  white-space: normal;
-}
-
-.text-break {
-  overflow-wrap: break-word;
-}
-
-.text-uppercase {
-  text-transform: uppercase;
-}
-
-.text-lowercase {
-  text-transform: lowercase;
-}
-
-.text-capitalize {
-  text-transform: capitalize;
-}
-
-.font-weight-normal {
-  font-weight: var(--font-weight);
-}
-
-.font-weight-medium {
-  font-weight: var(--font-weight-medium);
-}
-
-.font-weight-strong {
-  font-weight: var(--font-weight-strong);
-}
-
-.font-weight-bold {
-  font-weight: var(--font-weight-bold);
-}
-
-/* Radius */
-.radius-sm-context {
-  border-radius: var(--radius-sm);
-}
-
-.radius-context {
-  border-radius: var(--radius);
-}
-
-.radius-lg-context {
-  border-radius: var(--radius-lg);
-}
-
-/* Border */
-.border-context {
-  border: var(--border-width) solid var(--border);
-}
-
-.border-block-start {
-  border-block-start: var(--border-width) solid var(--border);
-}
-
-.border-block-end {
-  border-block-end: var(--border-width) solid var(--border);
-}
-
-.border-inline-start {
-  border-inline-start: var(--border-width) solid var(--border);
-}
-
-.border-inline-end {
-  border-inline-end: var(--border-width) solid var(--border);
-}
-
-/* Surface */
-.background-surface {
-  background: var(--surface);
-  color: var(--text);
-}
-
-.background-raised {
-  background: var(--surface-raised);
-  color: var(--text);
-}
-
-.background-subtle {
-  background: var(--surface-subtle);
-  color: var(--text);
-}
-
-/* Shadow */
-.shadow-context {
-  box-shadow: var(--shadow);
-}
-
-.shadow-popout-context {
-  box-shadow: var(--shadow-popout);
-}
-
-/* Interaction */
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.pointer-events-none {
-  pointer-events: none;
-}
-
-.user-select-none {
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-/* Visibility */
-.display-none {
-  display: none;
-}
-
-.visibility-hidden {
-  visibility: hidden;
-}
-
-/*
- * Additional layout primitives not included in the core bundle.
- *
- * Import this file explicitly when a project needs these patterns.
- *
- * Public hooks:
- * --switcher-threshold
- */
-.switcher {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap);
-}
-
-.switcher > * {
-  flex-basis: calc((var(--switcher-threshold, 40rem) - 100%) * 999);
-  flex-grow: 1;
-  min-inline-size: 0;
-}
-
-/*
- * Sticky, frosted top bar shell for app/dashboard shells (persistent
- * sidebar + topbar layouts). Owns positioning, stacking, and the frosted
- * background only — row content (search, breadcrumb, actions) stays local
- * to the page.
- *
- * Not for marketing/editorial site headers — those are one-off visual
- * identity per page; see docs/pages/patterns/overview.md's Header Navigation
- * section. This is for the structural app-shell topbar, which recurs unchanged
- * across app UIs regardless of brand.
- */
-.topbar {
-  position: sticky;
-  inset-block-start: 0;
-  z-index: var(--z-sticky);
-  isolation: isolate;
-  display: flex;
-  align-items: center;
-  gap: var(--gap);
-  padding-block: var(--space-30);
-  padding-inline: var(--space-40);
-  border-block-end: var(--border-width) solid var(--border);
-  background: var(--surface);
-}
-
-/* Both conditions are required: the translucent background contains var(),
-   so a browser with backdrop-filter but not color-mix (e.g. Safari < 16.2)
-   would accept the declaration at parse time, fail it at computed-value
-   time, and lose the background entirely instead of keeping the opaque
-   fallback above. */
-@supports ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) and
-  (background: color-mix(in oklch, red 50%, transparent)) {
-  .topbar {
-    background: color-mix(in oklch, var(--surface) 88%, transparent);
-    backdrop-filter: blur(0.75rem);
-    -webkit-backdrop-filter: blur(0.75rem);
-  }
-}