/*
  FWF Apps Design System — Components
  Layout-neutral brand controls + primitives: button, icon-button, badge, status,
  note, card/panel, field/input, table, tabs, modal, toast, link, avatar, skeleton,
  empty-state, plus type and layout primitives (kicker/title/subtitle, page
  header, section, toolbar, stack/cluster/grid/split/container). Compose into
  any layout. Requires foundation. This file implements
  docs/fwfa-component-contract.md; add reusable classes here before adding
  product-local CSS.
*/
@layer fwfa.components {
.fwfa-container {
  width: min(100%, var(--fwfa-content-max));
  margin-inline: auto;
}

.fwfa-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fwfa-space-4);
  margin-bottom: var(--fwfa-space-5);
}

.fwfa-page-header-actions,
.fwfa-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fwfa-space-2);
}

.fwfa-section {
  display: grid;
  gap: var(--fwfa-space-4);
}

.fwfa-section + .fwfa-section {
  margin-top: var(--fwfa-space-6);
}

.fwfa-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--fwfa-space-3);
}

.fwfa-stack {
  display: flex;
  flex-direction: column;
  gap: var(--fwfa-stack-gap, var(--fwfa-space-4));
}

.fwfa-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fwfa-cluster-gap, var(--fwfa-space-3));
}

.fwfa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--fwfa-grid-min, 16rem)), 1fr));
  gap: var(--fwfa-grid-gap, var(--fwfa-space-4));
}

.fwfa-split {
  display: grid;
  grid-template-columns: minmax(0, var(--fwfa-split-main, 1fr)) minmax(min(100%, var(--fwfa-split-side-min, 16rem)), var(--fwfa-split-side, 22rem));
  gap: var(--fwfa-grid-gap, var(--fwfa-space-4));
  align-items: start;
}

.fwfa-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fwfa-space-3);
  padding: var(--fwfa-space-3);
  border: 1px solid var(--fwfa-border);
  border-radius: var(--fwfa-radius-md);
  background: var(--fwfa-surface);
}

.fwfa-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fwfa-space-2);
}

.fwfa-kicker {
  margin: 0;
  color: var(--fwfa-text-muted);
  font-family: var(--fwfa-font-mono);
  font-size: var(--fwfa-type-micro);
  font-weight: var(--fwfa-weight-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fwfa-title {
  margin: 0;
  color: var(--fwfa-text);
  font-family: var(--fwfa-font-display);
  font-size: var(--fwfa-type-h1);
  /* Display font is Ubuntu (300/400/500/700 — no 600); titles stay bold at 700. */
  font-weight: 700;
  line-height: var(--fwfa-leading-tight);
  letter-spacing: 0;
}

.fwfa-subtitle {
  max-width: 68ch;
  margin: 0;
  color: var(--fwfa-text-soft);
  font-size: var(--fwfa-type-body);
}

.fwfa-title--section {
  font-size: var(--fwfa-type-h2);
}

.fwfa-title--component {
  font-size: var(--fwfa-type-h3);
}

/* Card / panel — flat tonal grouping. Use cards only for repeated items,
   specimens, and overlays that need a real frame; otherwise group with space. */
.fwfa-popover {
  border: 1px solid var(--fwfa-border);
  border-radius: var(--fwfa-radius-md);
  background: var(--fwfa-surface);
  color: var(--fwfa-text);
}

/* Menu — the open dropdown / listbox panel: the floating list a select trigger,
   command menu, or row action opens. A solid floated frame (so it reads above
   arbitrary content) holding quiet item rows that warm on hover; the current
   choice carries a sky tick, never the spent yellow. In a real app this is
   positioned (fixed / anchored to its trigger via the popover or native APIs) and
   toggled; the showcase renders it open. Give the trigger aria-expanded + the menu
   role="listbox"/"menu" and items role="option"/"menuitem" in markup. */
.fwfa-menu {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 12rem;
  padding: var(--fwfa-space-1);
  border: 1px solid var(--fwfa-border-strong);
  border-radius: var(--fwfa-radius-md);
  background: var(--fwfa-shell-bg);
  box-shadow: var(--fwfa-shadow-float);
}

.fwfa-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fwfa-space-3);
  width: 100%;
  min-height: var(--fwfa-control);
  border: 0;
  border-radius: var(--fwfa-radius-sm);
  padding: var(--fwfa-space-2) var(--fwfa-space-3);
  background: transparent;
  color: var(--fwfa-text-soft);
  font: inherit;
  font-size: var(--fwfa-type-sm);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--fwfa-dur-fast) var(--fwfa-ease),
    color var(--fwfa-dur-fast) var(--fwfa-ease);
}

.fwfa-menu-item:hover {
  background: var(--fwfa-surface-hover);
  color: var(--fwfa-text);
}

/* Current selection — the label firms and a sky tick appears in the trailing slot
   (the calm structural mark beside the choice, matching the link/focus accent). */
.fwfa-menu-item[aria-selected="true"],
.fwfa-menu-item[aria-checked="true"] {
  color: var(--fwfa-text);
}

.fwfa-menu-item[aria-selected="true"]::after,
.fwfa-menu-item[aria-checked="true"]::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: var(--fwfa-accent-calm);
  -webkit-mask: var(--fwfa-icon-check) center / 1rem no-repeat;
  mask: var(--fwfa-icon-check) center / 1rem no-repeat;
}

/* A muted leading hint (shortcut, count, group). Pushes the tick to the far edge. */
.fwfa-menu-item .fwfa-menu-item-meta {
  margin-left: auto;
  color: var(--fwfa-text-faint);
  font-family: var(--fwfa-font-mono);
  font-size: var(--fwfa-type-xs);
}

.fwfa-menu-item[aria-selected="true"] .fwfa-menu-item-meta,
.fwfa-menu-item[aria-checked="true"] .fwfa-menu-item-meta {
  margin-left: auto;
}

.fwfa-menu-separator {
  height: 1px;
  margin: var(--fwfa-space-1) 0;
  background: var(--fwfa-border-faint);
}

.fwfa-panel {
  border: 1px solid var(--fwfa-border);
  border-radius: var(--fwfa-radius-md);
  padding: var(--fwfa-space-5);
  color: var(--fwfa-text);
  background: var(--fwfa-surface);
}

.fwfa-card {
  border: 1px solid var(--fwfa-border);
  border-radius: var(--fwfa-radius-md);
  padding: var(--fwfa-space-4);
  color: var(--fwfa-text);
  background: var(--fwfa-surface);
  transition:
    transform var(--fwfa-dur-base) var(--fwfa-ease),
    background var(--fwfa-dur-base) var(--fwfa-ease),
    border-color var(--fwfa-dur-base) var(--fwfa-ease);
}

.fwfa-card[href],
.fwfa-card[role="button"],
.fwfa-card--interactive {
  cursor: pointer;
}

/* Interactive cards move by state and strengthen the existing border. */
.fwfa-card[href]:hover,
.fwfa-card[role="button"]:hover,
.fwfa-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--fwfa-border-strong);
  background: var(--fwfa-surface-hover);
}

.fwfa-button,
.fwfa-icon-button {
  min-width: var(--fwfa-control);
  min-height: var(--fwfa-control);
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.fwfa-button {
  /* The variant's label colour, named so the spinner and selected overlay can
     track it while the loading state sets `color: transparent` (mirrors the core
     system's --btn-ink). */
  --fwfa-btn-ink: var(--fwfa-text);
  /* Consistency floor for the standard text button (the compact variant below and
     .fwfa-icon-button keep their own smaller square floors). */
  min-width: var(--fwfa-button-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fwfa-space-2);
  border-radius: var(--fwfa-radius-sm);
  padding: 0 var(--fwfa-space-3);
  font-size: var(--fwfa-type-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  /* All channels at dur-fast, matching the core system's button transition. */
  transition:
    background-color var(--fwfa-dur-fast) var(--fwfa-ease),
    border-color var(--fwfa-dur-fast) var(--fwfa-ease),
    color var(--fwfa-dur-fast) var(--fwfa-ease),
    box-shadow var(--fwfa-dur-fast) var(--fwfa-ease),
    transform var(--fwfa-dur-fast) var(--fwfa-ease);
}

.fwfa-root .fwfa-button {
  font-size: var(--fwfa-type-sm);
}

.fwfa-button:hover {
  transform: translateY(-1px);
}

.fwfa-button:active {
  transform: translateY(0);
}

.fwfa-button--compact {
  min-width: var(--fwfa-control-compact);
  min-height: var(--fwfa-control-compact);
  padding: 0 var(--fwfa-space-3);
}

.fwfa-root .fwfa-button--compact {
  font-size: var(--fwfa-type-xs);
}

/* Primary — a neutral solid, never a brand fill. Dark: white block, dark label.
   Light: navy block, white label (a white-on-white block would collapse into the
   ghost). Hover/active deepen the fill a neutral step and lift — no hue change, since
   all blue is reserved for links and focus, per the core system. */
.fwfa-button--primary {
  --fwfa-btn-ink: var(--fwfa-app-navy-950);
  border: 1px solid var(--fwfa-text);
  background: var(--fwfa-text);
  color: var(--fwfa-app-navy-950);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.fwfa-button--primary:hover {
  background: var(--fwfa-primary-hover);
  border-color: var(--fwfa-primary-hover);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fwfa-button--primary:active {
  background: var(--fwfa-primary-active);
  border-color: var(--fwfa-primary-active);
  box-shadow: none;
}

[data-fwf-app-theme="light"] .fwfa-button--primary {
  --fwfa-btn-ink: #ffffff;
  color: #ffffff;
}

/* Light theme takes its navy fill steps from the --fwfa-primary-* tokens; only the
   shadow tint differs from the dark default, so that's all this override carries. */
[data-fwf-app-theme="light"] .fwfa-button--primary:hover {
  box-shadow: 0 6px 16px rgba(8, 27, 51, 0.22), 0 1px 3px rgba(8, 27, 51, 0.18);
}

.fwfa-button--secondary {
  border: 1px solid var(--fwfa-border);
  background: var(--fwfa-surface);
  color: var(--fwfa-text);
}

/* Secondary interaction — surface lifts and the border firms on hover, deepening
   on press (mirrors the core system's base button), so it gives the same colour
   feedback as primary and ghost rather than only the shared translateY. */
.fwfa-button--secondary:hover {
  background: var(--fwfa-surface-hover);
  border-color: var(--fwfa-border-strong);
}

.fwfa-button--secondary:active {
  background: var(--fwfa-surface-strong);
}

.fwfa-button--ghost {
  background: transparent;
  color: var(--fwfa-text-soft);
}

.fwfa-button--ghost:hover {
  background: var(--fwfa-surface-hover);
  color: var(--fwfa-text);
}

/* Danger — the destructive variant. (Catalyst models destructive as color="red";
   FWF has no red, so danger is orange.) Outline-first, matching the system's
   restraint: orange border + orange label on transparent, filling to a soft orange
   tint as intent grows on hover/press rather than shouting at rest. Destructive is a
   *variant*, not a transient button state — a failed action surfaces as a toast, and
   selection lives in the segmented control, so the button keeps no is-error /
   is-selected modifier. */
.fwfa-button--danger {
  /* Neutral label, orange frame. A saturated #fe5100 can't be legible as small text
     on the dark shell (~3.3:1), so the danger is carried by the orange border and a
     tint that ignites on hover — not by colouring the label, which keeps the text
     crisp and high-contrast and avoids a lighter-label / deeper-border mismatch.
     Quiet at rest, alarms on intent: the FWF restraint thesis applied to destruction. */
  --fwfa-btn-ink: var(--fwfa-text);
  border: 1px solid var(--fwfa-danger);
  background: transparent;
  color: var(--fwfa-text-soft);
}

.fwfa-button--danger:hover {
  border-color: var(--fwfa-danger);
  background: color-mix(in srgb, var(--fwfa-danger) 16%, transparent);
  color: var(--fwfa-text);
}

.fwfa-button--danger:active {
  background: color-mix(in srgb, var(--fwfa-danger) 24%, transparent);
}

/* Light theme — the label flips to the dark ink; the orange border holds the danger
   read (a 1px border needs only 3:1, which the orange clears on white). */
[data-fwf-app-theme="light"] .fwfa-button--danger {
  --fwfa-btn-ink: var(--fwfa-text);
  color: var(--fwfa-text-soft);
}

/* Loading — label hides, a spinner rides on top. The spinner tracks the variant's
   label via --fwfa-btn-ink (currentColor goes transparent with the label). */
.fwfa-button.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.fwfa-button.is-loading::after {
  content: "";
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--fwfa-btn-ink);
  border-right-color: transparent;
  border-radius: 50%;
  animation: fwfa-spin 0.7s linear infinite;
}

@keyframes fwfa-spin {
  to {
    transform: rotate(360deg);
  }
}

.fwfa-button:disabled,
.fwfa-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
  transform: none;
}

.fwfa-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fwfa-radius-sm);
  background: transparent;
  color: var(--fwfa-text-muted);
  transition:
    background-color var(--fwfa-dur-base) var(--fwfa-ease),
    color var(--fwfa-dur-base) var(--fwfa-ease),
    transform var(--fwfa-dur-fast) var(--fwfa-ease);
}

.fwfa-icon-button:hover {
  background: var(--fwfa-surface-hover);
  color: var(--fwfa-text);
  transform: translateY(-1px);
}

/* Status — dot + label, never a pill: a read-only status must not look like a
   button. Mirrors the core FWF `.status--dot`. The calm default keeps the label
   neutral (--fwfa-text-soft) and the dot static; the alert variant is the one row
   that pulls the eye, bolding and colouring the label. */
.fwfa-status {
  display: inline-flex;
  align-items: center;
  gap: var(--fwfa-space-2);
  color: var(--fwfa-text-soft);
  font-size: var(--fwfa-type-sm);
  font-weight: 500;
}

.fwfa-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: var(--fwfa-radius-pill);
  background: var(--fwfa-status-colour, var(--fwfa-text-muted));
}

.fwfa-status--live .fwfa-status-dot,
.fwfa-status[data-live="true"] .fwfa-status-dot,
.fwfa-status-dot--live {
  animation: fwfa-status-glow 2.6s ease-in-out infinite;
}

/* Tone sets the dot colour; the label stays calm unless the status is an alert. */
.fwfa-status[data-tone="success"] { --fwfa-status-colour: var(--fwfa-success); }
.fwfa-status[data-tone="info"]    { --fwfa-status-colour: var(--fwfa-info); }
.fwfa-status[data-tone="warning"] { --fwfa-status-colour: var(--fwfa-warning); }
.fwfa-status[data-tone="danger"]  { --fwfa-status-colour: var(--fwfa-danger); }

/* Alert — the standout. Label bolds and takes the tone colour (readable mixes on
   the dark shell); on the calm default these same hues stay in the dot only. */
.fwfa-status--alert { font-weight: 600; }
.fwfa-status--alert[data-tone="success"] { color: color-mix(in srgb, var(--fwfa-success) 76%, white); }
.fwfa-status--alert[data-tone="info"]    { color: color-mix(in srgb, var(--fwfa-info) 76%, white); }
.fwfa-status--alert[data-tone="warning"] { color: var(--fwfa-accent); }
.fwfa-status--alert[data-tone="danger"]  { color: color-mix(in srgb, var(--fwfa-danger) 72%, white); }

/* The opt-in glow: a soft halo in the dot's own colour, breathing slowly. Use it
   only for changing/live state. Honoured by the global reduced-motion override. */
@keyframes fwfa-status-glow {
  0%, 100% { box-shadow: 0 0 2px 0 color-mix(in srgb, var(--fwfa-status-colour, var(--fwfa-text-muted)) 35%, transparent); }
  50%      { box-shadow: 0 0 8px 1px color-mix(in srgb, var(--fwfa-status-colour, var(--fwfa-text-muted)) 70%, transparent); }
}

/* Type label — names *what a block is* (an author, a section, a message kind),
   as opposed to .fwfa-status which signals *state*. Quiet regular-case metadata
   that recedes: never uppercase-tracked (that eyebrow weight is for section
   kickers, not repeated row labels) and never a status tone, so the coloured
   status dot stays the one true-state signal beside it. Pair the soft modifier
   for a secondary descriptor; its leading middot keeps the two from reading as
   one phrase. */
.fwfa-type-label {
  margin: 0; /* safe on inline spans; lets the label stand in for a kicker as a block heading without inheriting default <p> margins */
  color: var(--fwfa-text-muted);
  font-size: var(--fwfa-type-xs);
  font-weight: 500;
}

.fwfa-type-label--soft {
  color: var(--fwfa-text-faint);
  font-weight: 400;
}

.fwfa-type-label--soft::before {
  content: "·";
  margin-right: var(--fwfa-space-2);
}

.fwfa-field {
  display: grid;
  gap: var(--fwfa-space-2);
}

.fwfa-label {
  color: var(--fwfa-text-muted);
  font-family: var(--fwfa-font-mono);
  font-size: var(--fwfa-type-micro);
  font-weight: var(--fwfa-weight-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fwfa-input,
.fwfa-select,
.fwfa-textarea {
  width: 100%;
  min-height: var(--fwfa-tap);
  border: 1px solid var(--fwfa-border);
  border-radius: var(--fwfa-radius-sm);
  background: color-mix(in srgb, var(--fwfa-shell-bg) 82%, black);
  color: var(--fwfa-text);
  padding: 0 var(--fwfa-space-3);
  transition:
    border-color var(--fwfa-dur-base) var(--fwfa-ease),
    box-shadow var(--fwfa-dur-base) var(--fwfa-ease),
    background-color var(--fwfa-dur-base) var(--fwfa-ease);
}

.fwfa-textarea {
  min-height: 7rem;
  padding-block: var(--fwfa-space-3);
  resize: vertical;
}

/* Select — the shared field skin plus a custom chevron and reserved room for it.
   appearance:none drops the platform arrow (which crowds the right edge and varies
   by OS); the chevron is a themed data-URI background so the control matches the
   form vocabulary, while the popup itself stays the native, accessible one. The
   right padding reserves the chevron's lane so long option text never runs under
   it. */
.fwfa-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--fwfa-space-3) + 1.1rem + var(--fwfa-space-2));
  background-image: var(--fwfa-icon-chevron);
  background-repeat: no-repeat;
  background-position: right var(--fwfa-space-3) center;
  background-size: 1.1rem;
}

.fwfa-input::placeholder,
.fwfa-textarea::placeholder {
  color: var(--fwfa-text-faint);
}

.fwfa-input:hover,
.fwfa-select:hover,
.fwfa-textarea:hover {
  border-color: var(--fwfa-border-strong);
}

.fwfa-input:focus,
.fwfa-select:focus,
.fwfa-textarea:focus {
  border-color: var(--fwfa-accent-calm);
  background: var(--fwfa-shell-bg);
}

/* Text fields take an inset hairline in the calm focus colour rather than the
   offset outline — matching the core system, which reserves the offset ring for
   buttons, links, cards, and tabs (focus-visible fires on click for inputs). */
.fwfa-input:focus-visible,
.fwfa-select:focus-visible,
.fwfa-textarea:focus-visible {
  outline: none;
  border-color: var(--fwfa-accent-calm);
  box-shadow: inset 0 0 0 1px var(--fwfa-accent-calm);
}

.fwfa-input:disabled,
.fwfa-select:disabled,
.fwfa-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.fwfa-input.is-error,
.fwfa-select.is-error,
.fwfa-textarea.is-error {
  border-color: var(--fwfa-danger);
  box-shadow: inset 0 0 0 1px var(--fwfa-danger);
}

/* Helper / validation text under a field. */
.fwfa-helper {
  color: var(--fwfa-text-muted);
  font-size: var(--fwfa-type-xs);
  line-height: 1.4;
}

.fwfa-helper--error {
  color: color-mix(in srgb, var(--fwfa-danger) 72%, white);
}

.fwfa-empty-state {
  display: grid;
  justify-items: center;
  gap: var(--fwfa-space-3);
  padding: var(--fwfa-space-7) var(--fwfa-space-4);
  text-align: center;
  color: var(--fwfa-text-muted);
}

.fwfa-empty-state h2,
.fwfa-empty-state h3 {
  margin: 0;
  color: var(--fwfa-text);
  font-family: var(--fwfa-font-display);
}

.fwfa-skeleton {
  display: block;
  min-height: 1rem;
  border-radius: var(--fwfa-radius-sm);
  background: linear-gradient(90deg, var(--fwfa-surface) 0%, var(--fwfa-surface-strong) 48%, var(--fwfa-surface) 100%);
  background-size: 220% 100%;
  animation: fwfa-skeleton 1.4s var(--fwfa-ease) infinite;
}

@keyframes fwfa-skeleton {
  to {
    background-position-x: -220%;
  }
}

/* Link — sky text with a soft underline that firms up on hover. Sky (the 30%
   calm role), never yellow: links are structural, not the one spent accent. */
.fwfa-link {
  color: var(--fwfa-accent-calm);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--fwfa-accent-calm) 45%, transparent);
  transition:
    color var(--fwfa-dur-fast) var(--fwfa-ease),
    border-color var(--fwfa-dur-fast) var(--fwfa-ease);
}

.fwfa-link:hover {
  color: color-mix(in srgb, var(--fwfa-accent-calm) 80%, white);
  border-bottom-color: currentColor;
}

/* Keyboard key — a single keycap for documenting a shortcut. Quiet by default: a
   mono glyph on a faint surface with a hairline border and a 1px inner base shadow
   so it reads as a physical key without shouting. Compose in a cluster for chords
   (⌘ then K). This is the *token an app renders its shortcut hints with* — the
   accelerator behaviour itself (command palette, slash menu, key handlers) belongs
   to the consuming app, not the design system. */
.fwfa-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--fwfa-space-2);
  border: 1px solid var(--fwfa-border-strong);
  border-radius: var(--fwfa-radius-sm);
  background: var(--fwfa-surface);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  color: var(--fwfa-text-soft);
  font-family: var(--fwfa-font-mono);
  font-size: var(--fwfa-type-xs);
  font-weight: 600;
  line-height: 1;
}

/* Callout / note — tinted surface block with a bare leading icon (no icon
   background, no coloured side bar). Info = sky, tip = sky, warn = yellow. */
.fwfa-note {
  position: relative;
  border: 1px solid var(--fwfa-border);
  border-radius: var(--fwfa-radius-md);
  background: var(--fwfa-surface);
  color: var(--fwfa-text-soft);
  font-size: var(--fwfa-type-sm);
  line-height: var(--fwfa-leading-body);
  padding: var(--fwfa-space-3) var(--fwfa-space-4);
  padding-left: calc(var(--fwfa-space-4) + 1.25rem + var(--fwfa-space-3));
}

.fwfa-note::before {
  content: "";
  position: absolute;
  left: var(--fwfa-space-4);
  /* Box spans exactly the first text line (padding-top + one line-height) and
     centres a fixed-size glyph within it, so the icon's optical centre tracks
     the text — no magic offset to re-tune if the type scale or leading change. */
  top: var(--fwfa-space-3);
  width: 1.25rem;
  height: calc(var(--fwfa-type-sm) * var(--fwfa-leading-body));
  background-color: var(--fwfa-info);
  -webkit-mask: var(--fwfa-icon-info) center / 1.25rem no-repeat;
  mask: var(--fwfa-icon-info) center / 1.25rem no-repeat;
}

.fwfa-note strong {
  color: var(--fwfa-text);
  font-weight: 600;
}

.fwfa-note--tip::before {
  background-color: var(--fwfa-accent-calm);
  -webkit-mask-image: var(--fwfa-icon-tip);
  mask-image: var(--fwfa-icon-tip);
}

.fwfa-note--warn::before {
  background-color: var(--fwfa-accent);
  -webkit-mask-image: var(--fwfa-icon-warn);
  mask-image: var(--fwfa-icon-warn);
}

/* Badge / tag — the core FWF `.badge` recipe, re-tokenised for app surfaces:
   uppercase tracked stamp, outline-first, rounded-rect (never a pill, so it never
   borrows the CTA affordance). Padding (--s-1/--s-3), radius (0.375rem), the
   softened 85% outline, and the type ramp mirror the overarching system so this
   reads as the same component — not a new one. */
.fwfa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fwfa-space-2);
  border: 1px solid color-mix(in srgb, var(--fwfa-text) 85%, transparent);
  border-radius: var(--fwfa-radius-md);
  padding: var(--fwfa-space-1) var(--fwfa-space-3);
  background: transparent;
  color: var(--fwfa-text);
  font-size: var(--fwfa-type-micro);
  font-weight: var(--fwfa-weight-label);
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Solid — the one high-emphasis filled exception: ink fill, substrate-colour label. */
.fwfa-badge--solid {
  border-color: var(--fwfa-text);
  background: var(--fwfa-text);
  color: var(--fwfa-app-navy-950);
}

/* Soft — quiet register for low-stress meta (counts, versions): neutral divider
   outline + soft text, still fill-free. */
.fwfa-badge--soft {
  border-color: var(--fwfa-border);
  color: var(--fwfa-text-soft);
}

/* Accent — outline only, the mark colour on border + text. The single standout chip. */
.fwfa-badge--accent {
  border-color: var(--fwfa-accent);
  color: var(--fwfa-accent);
}

/* Avatar — a round identity chip (initials or image), ported from the universal
   showcase to fwfa roles. Default 3rem; --sm / --lg for the dense and feature
   sizes. An image fills and clips to the circle. */
.fwfa-avatar {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--fwfa-border);
  border-radius: var(--fwfa-radius-pill);
  background: var(--fwfa-surface-strong);
  color: var(--fwfa-text-soft);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fwfa-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.fwfa-avatar--sm { width: 2rem; height: 2rem; font-size: var(--fwfa-type-xs); }
.fwfa-avatar--lg { width: 4rem; height: 4rem; font-size: var(--fwfa-type-h3); }

/* Avatar group — an overlapping stack; each chip takes a ring in the chrome
   colour so it punches cleanly out of the one behind it. */
.fwfa-avatar-group {
  display: inline-flex;
}

.fwfa-avatar-group .fwfa-avatar {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--fwfa-shell-bg);
}

.fwfa-avatar-group .fwfa-avatar + .fwfa-avatar {
  margin-left: -0.7rem;
}

/* Table — quiet rows under a mono header. Scroll-wrap on small screens. */
.fwfa-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fwfa-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--fwfa-type-sm);
}

.fwfa-table th,
.fwfa-table td {
  text-align: left;
  padding: var(--fwfa-space-3);
  border-bottom: 1px solid var(--fwfa-border);
}

.fwfa-table th {
  color: var(--fwfa-text-muted);
  font-family: var(--fwfa-font-mono);
  font-size: var(--fwfa-type-xs);
  font-weight: var(--fwfa-weight-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fwfa-border-strong);
}

.fwfa-table td {
  color: var(--fwfa-text-soft);
}

.fwfa-table td.fwfa-table-mono {
  font-family: var(--fwfa-font-mono);
  font-size: var(--fwfa-type-xs);
  color: var(--fwfa-text-muted);
}

.fwfa-table tbody tr:hover td {
  background: var(--fwfa-shell-bg-muted);
}

/* Tabs — underline indicator in sky (structural mark, not the spent yellow). */
.fwfa-tabs {
  display: flex;
  gap: var(--fwfa-space-2);
  border-bottom: 1px solid var(--fwfa-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fwfa-tab {
  min-height: var(--fwfa-tap);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--fwfa-space-3) var(--fwfa-space-4);
  background: none;
  color: var(--fwfa-text-muted);
  font-size: var(--fwfa-type-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--fwfa-dur-fast) var(--fwfa-ease),
    border-color var(--fwfa-dur-fast) var(--fwfa-ease);
}

.fwfa-tab:hover {
  color: var(--fwfa-text);
}

.fwfa-tab[aria-selected="true"],
.fwfa-tab[aria-pressed="true"] {
  color: var(--fwfa-text);
  border-bottom-color: var(--fwfa-accent-calm);
}

/* Modal — scrim + dialog. The scrim is fixed in real use; the showcase renders
   the dialog inline. */
.fwfa-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--fwfa-space-4);
  background: rgba(2, 8, 13, 0.6);
  backdrop-filter: blur(4px);
}

.fwfa-modal {
  width: min(100%, 30rem);
  border: 1px solid var(--fwfa-border-strong);
  border-radius: var(--fwfa-radius-md);
  background: var(--fwfa-shell-bg);
  box-shadow: var(--fwfa-shadow-float);
  padding: var(--fwfa-space-5);
  color: var(--fwfa-text-soft);
}

.fwfa-modal h2,
.fwfa-modal h3 {
  margin: 0 0 var(--fwfa-space-2);
  color: var(--fwfa-text);
  font-family: var(--fwfa-font-display);
  font-size: var(--fwfa-type-h3);
}

.fwfa-modal p {
  margin: 0;
}

.fwfa-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--fwfa-space-2);
  margin-top: var(--fwfa-space-4);
}

/* Toast — a transient, elevated notification; stacks in a corner region. Solid
   surface so it reads above arbitrary content; the intent rides the border and a
   leading glyph (outline-first, no loud fill), matching the note/badge language.
   Ported from the universal showcase. Announce the stack via aria-live in markup. */
.fwfa-toast-stack {
  display: flex;
  flex-direction: column;
  gap: var(--fwfa-space-3);
  width: 100%;
  max-width: 22rem;
}

.fwfa-toast {
  --fwfa-toast-accent: var(--fwfa-info);
  --fwfa-toast-glyph: var(--fwfa-icon-info);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--fwfa-space-3);
  align-items: start;
  border: 1px solid var(--fwfa-toast-accent);
  border-radius: var(--fwfa-radius-md);
  padding: var(--fwfa-space-3) var(--fwfa-space-4);
  background: var(--fwfa-surface);
  color: var(--fwfa-text-soft);
  font-size: var(--fwfa-type-sm);
  line-height: var(--fwfa-leading-body);
  box-shadow: var(--fwfa-shadow-soft);
}

/* Leading intent glyph — a mask tinted by the tone accent, so it themes for free.
   Sized to the first text line so it tracks the type, like the note callout. */
.fwfa-toast::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: calc(var(--fwfa-type-sm) * var(--fwfa-leading-body));
  background-color: var(--fwfa-toast-accent);
  -webkit-mask: var(--fwfa-toast-glyph) center / 1.25rem no-repeat;
  mask: var(--fwfa-toast-glyph) center / 1.25rem no-repeat;
}

.fwfa-toast-body {
  min-width: 0;
}

.fwfa-toast-body strong {
  display: block;
  color: var(--fwfa-text);
  font-weight: 600;
}

/* Trailing slot — an action (text button) and/or a dismiss control, kept in the
   one trailing grid column and centred against the body. */
.fwfa-toast-action {
  display: flex;
  align-items: center;
  gap: var(--fwfa-space-2);
  align-self: center;
}

.fwfa-toast--info    { --fwfa-toast-accent: var(--fwfa-info);    --fwfa-toast-glyph: var(--fwfa-icon-info); }
.fwfa-toast--success { --fwfa-toast-accent: var(--fwfa-success); --fwfa-toast-glyph: var(--fwfa-icon-success); }
.fwfa-toast--warning { --fwfa-toast-accent: var(--fwfa-warning); --fwfa-toast-glyph: var(--fwfa-icon-warn); }
.fwfa-toast--danger  { --fwfa-toast-accent: var(--fwfa-danger);  --fwfa-toast-glyph: var(--fwfa-icon-danger); }

/* Gradient accent bar — the one brand signature device. Once per artefact. */
.fwfa-accent-bar {
  height: 2px;
  border-radius: var(--fwfa-radius-pill);
  background: linear-gradient(90deg, var(--fwfa-accent-strong), var(--fwfa-accent));
}

@media (max-width: 47.99em) {
  .fwfa-page-header,
  .fwfa-section-header,
  .fwfa-toolbar {
    align-items: stretch;
  }

  .fwfa-split {
    grid-template-columns: 1fr;
  }

  /* Touch-target floor on small screens — controls grow to 44px (the denser
     2.25rem control height is a pointer-device affordance only). */
  .fwfa-button,
  .fwfa-icon-button {
    min-height: var(--fwfa-tap);
  }
}
}