/* ================================================================
   fraimora-nav.css — styling for the History / Storage / Automate /
   Test / Admin feature set.

   Purely additive: styles.css and designguides/tokens.css are never
   edited. Two tokens that tokens.css defines but styles.css never
   loaded (--fx-pad-card, --fx-gap) are (re)declared here, at the
   values tokens.css specifies, scoped to :root so both files agree.

   Every colour/radius/spacing/motion value below is one of:
     - an --fx-* token already defined in styles.css, or
     - one of the two tokens re-declared immediately below, or
     - a small structural pixel (control heights, gaps, borders)
       matching the precedent already set by styles.css's own
       component CSS (e.g. .seg's 3px padding / 2px gap) — the same
       category of value the existing file itself does not tokenize.
   No hex color is introduced anywhere in this file.
   ================================================================ */

:root {
  --fx-pad-card: 18px;
  --fx-gap: 16px;
}

/* ----------------------------------------------------------------
   Utility
   ---------------------------------------------------------------- */
.fx-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Simulated data" badge — every screen rendering seeded rows shows one. */
.fx-sim-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fx-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fx-accent-text);
  background: var(--fx-accent-tint);
  border: 1px solid var(--fx-accent-tint-2);
  border-radius: var(--fx-r-xs);
  padding: 3px 7px;
}
.fx-sim-badge svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ----------------------------------------------------------------
   Nav: lock icon on disabled rows (registry-driven, replaces the
   old ad-hoc "Soon" chip with the state the Admin spec describes).
   ---------------------------------------------------------------- */
.nav-lock {
  margin-left: auto;
  width: 13px; height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  opacity: 0.7;
}
.sidebar.sidebar--collapsed .nav-lock {
  opacity: 0;
  width: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Keyboard focus on the newly-focusable nav rows (tabindex="0"). */
.nav-item[tabindex]:focus-visible,
.nav-subitem[tabindex]:focus-visible {
  outline: 2px solid var(--fx-accent);
  outline-offset: -2px;
}

/* ----------------------------------------------------------------
   Segmented control: 3rd state. The base .seg/.seg-btn component
   (styles.css) ships a hardcoded 2-slot sliding indicator; rather
   than fight its calc() geometry for a 3rd slot, .seg--3 turns the
   slide off and marks the active slot with a flat surface fill —
   still every color/radius from the token set, still the same
   .seg-btn markup and hover/focus/disabled rules.
   ---------------------------------------------------------------- */
.seg--3 { grid-template-columns: repeat(3, minmax(64px, 1fr)); }
.seg--3::before { content: none; }
.seg--3 .seg-btn--active {
  background: var(--fx-surface);
  box-shadow: var(--fx-shadow-thumb);
}
.seg--3 .seg-btn[data-fx-admin-state="hidden"].seg-btn--active { color: var(--fx-text-faint); }
.seg--3 .seg-btn[data-fx-admin-state="disabled"].seg-btn--active { color: var(--fx-warn-fg); }
.seg--3 .seg-btn[data-fx-admin-state="active"].seg-btn--active { color: var(--fx-ok-fg); }
.seg--3 .seg-btn:focus-visible { outline: 2px solid var(--fx-accent); outline-offset: 1px; }

/* ----------------------------------------------------------------
   Admin screen
   ---------------------------------------------------------------- */
.fx-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--fx-gap);
  align-items: start;
  padding-bottom: 40px;
}
@media (max-width: 1080px) {
  .fx-admin-grid { grid-template-columns: 1fr; }
}

.fx-admin-card { padding: var(--fx-pad-card); }

.fx-admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.fx-admin-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--fx-text);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.fx-admin-card-sub {
  font-size: 12.5px;
  color: var(--fx-text-muted);
  margin: 0;
  max-width: 46ch;
}

.fx-admin-card--access { grid-column: 1 / -1; }
.fx-admin-client-select {
  min-width: 150px;
  height: var(--fx-h-control);
  padding: 0 10px;
  border: 1px solid var(--fx-border-control);
  border-radius: var(--fx-r-btn);
  color: var(--fx-text);
  background: var(--fx-surface);
  font: inherit;
}
.fx-admin-client-select:focus-visible {
  outline: none;
  border-color: var(--fx-accent);
  box-shadow: var(--fx-focus-ring);
}
.fx-admin-access-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: 12px;
}
.fx-admin-access-section {
  border: 1px solid var(--fx-border-hair);
  border-radius: var(--fx-r-md);
  background: var(--fx-surface-2);
  padding: 12px;
}
.fx-admin-access-section h3 {
  margin: 0 0 10px;
  font-family: var(--fx-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-text-faint);
}
.fx-admin-access-list {
  display: grid;
  gap: 6px;
}
.fx-admin-access-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  padding: 5px 7px;
  border-radius: var(--fx-r-sm);
  color: var(--fx-text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.fx-admin-access-toggle:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-admin-access-toggle input { accent-color: var(--fx-accent); }
@media (max-width: 1080px) {
  .fx-admin-access-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   Settings screen
   ---------------------------------------------------------------- */
.fx-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  gap: var(--fx-gap);
  align-items: start;
}
.fx-settings-card { padding: var(--fx-pad-card); }
.fx-settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.fx-settings-card-head h2 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--fx-text);
  margin: 0 0 4px;
}
.fx-settings-card-head p {
  font-size: 12.5px;
  color: var(--fx-text-muted);
  margin: 0;
  max-width: 48ch;
}
.fx-settings-language {
  display: grid;
  gap: 8px;
}
.fx-settings-language-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-md);
  background: var(--fx-surface);
  cursor: pointer;
}
.fx-settings-language-option:hover {
  background: var(--fx-surface-2);
  border-color: var(--fx-border-strong);
}
.fx-settings-language-option input { accent-color: var(--fx-accent); }
.fx-settings-language-option span { display: grid; gap: 2px; }
.fx-settings-language-option b {
  font-size: 13.5px;
  color: var(--fx-text);
}
.fx-settings-language-option small {
  font-size: 12px;
  color: var(--fx-text-muted);
}

.fx-admin-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fx-border-hair);
  border-radius: var(--fx-r-md);
  overflow: hidden;
}
.fx-admin-row {
  display: grid;
  grid-template-columns: 1fr 110px 216px;
  align-items: center;
  gap: 10px;
  padding: 9px var(--fx-pad-card);
  min-height: var(--fx-h-row);
  border-bottom: 1px solid var(--fx-border-hair);
}
.fx-admin-row:last-child { border-bottom: none; }
.fx-admin-row--head {
  background: var(--fx-surface-2);
  font-family: var(--fx-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-text-faint);
  min-height: 32px;
  padding-block: 8px;
}
.fx-admin-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fx-text);
}
.fx-admin-row--sub .fx-admin-row-label { color: var(--fx-text-2); font-weight: 500; padding-left: 8px; }
.fx-admin-row-group {
  font-family: var(--fx-mono);
  font-size: 11px;
  color: var(--fx-text-faint);
}
.fx-admin-locked-tag {
  display: inline-block;
  font-family: var(--fx-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-text-faint);
  background: var(--fx-surface-sunken);
  border-radius: var(--fx-r-xs);
  padding: 2px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

.fx-admin-account { display: flex; flex-direction: column; gap: var(--fx-gap); }
.fx-admin-avatar-row { display: flex; align-items: center; gap: 14px; }
.fx-admin-avatar-preview {
  width: 48px; height: 48px;
  flex: 0 0 48px;
  font-size: 15px;
  border-radius: var(--fx-r-round);
}
.fx-admin-avatar-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fx-admin-hint { font-size: 11px; color: var(--fx-text-faint); }

/* ----------------------------------------------------------------
   History screen
   ---------------------------------------------------------------- */
.fx-history-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: var(--fx-pad-card);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-lg);
  margin-bottom: var(--fx-gap);
}
.fx-history-search {
  flex: 1 1 220px;
  min-width: 180px;
  height: var(--fx-h-control);
  padding: 0 12px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-btn);
  font-size: 13px;
  color: var(--fx-text);
  background: var(--fx-surface);
}
.fx-history-search:focus-visible { outline: none; border-color: var(--fx-accent); box-shadow: var(--fx-focus-ring); }
.fx-history-range-select {
  height: var(--fx-h-control);
  padding: 0 10px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-btn);
  font-size: 13px;
  color: var(--fx-text);
  background: var(--fx-surface);
}
.fx-history-date-input {
  height: var(--fx-h-control);
  padding: 0 8px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-btn);
  font-size: 12.5px;
  color: var(--fx-text);
  background: var(--fx-surface);
}

.fx-msel { position: relative; display: inline-flex; }
.fx-msel-count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: var(--fx-r-round);
  background: var(--fx-accent);
  color: var(--fx-cta-fg);
  font-size: 10px;
  font-weight: 700;
}
.fx-msel-menu {
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fx-msel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.fx-msel-row input[type="checkbox"] { accent-color: var(--fx-accent); }
.fx-msel-empty { padding: 10px; font-size: 12px; color: var(--fx-text-faint); }

.fx-history-chiprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  min-height: 26px;
}
.fx-history-clearall {
  font-size: 12px;
  font-weight: 600;
  color: var(--fx-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
}
.fx-history-clearall:hover { color: var(--fx-text); text-decoration: underline; }

.fx-history-resultcount {
  font-family: var(--fx-mono);
  font-size: 11.5px;
  color: var(--fx-text-faint);
  margin-bottom: 10px;
}

.fx-history-daygroup { margin-bottom: 22px; }
.fx-history-day-label {
  font-family: var(--fx-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fx-text-faint);
  padding: 4px 0 8px;
  position: sticky;
  top: 0;
  background: var(--fx-canvas);
  z-index: 1;
}

.fx-history-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto 28px;
  align-items: center;
  gap: 14px;
  padding: 10px var(--fx-pad-card);
  margin-bottom: 6px;
  cursor: pointer;
}
.fx-history-row:hover { border-color: var(--fx-border-strong); background: var(--fx-surface-2); }
.fx-history-row--unresolvable { cursor: default; }
.fx-history-thumb {
  width: 56px; height: 34px;
  border-radius: var(--fx-r-sm);
  border: 1px solid var(--fx-border-hair);
  background: var(--fx-surface-sunken) center/cover no-repeat;
  flex-shrink: 0;
}
.fx-history-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fx-history-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-history-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: var(--fx-text-muted);
}
.fx-history-tag {
  font-family: var(--fx-mono);
  font-size: 10.5px;
  color: var(--fx-text-faint);
  background: var(--fx-surface-sunken);
  border-radius: var(--fx-r-xs);
  padding: 1px 6px;
}
.fx-history-inputs {
  font-family: var(--fx-mono);
  font-size: 11px;
  color: var(--fx-text-faint);
  white-space: nowrap;
}
.fx-history-time {
  font-family: var(--fx-mono);
  font-size: 11.5px;
  color: var(--fx-text-faint);
  white-space: nowrap;
}
.fx-history-overflow-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--fx-r-sm);
  background: transparent;
  color: var(--fx-text-muted);
  cursor: pointer;
}
.fx-history-overflow-btn:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-history-overflow-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }

.fx-history-empty { padding: 60px 0; }

/* ----------------------------------------------------------------
   Storage screen — 3-pane cascade (Miller-style). Left rail and
   middle column are always visible; switching folder never requires
   moving up the hierarchy first, so any leaf is reachable from any
   other leaf in <=2 clicks (rail, then a pane-2 row).
   ---------------------------------------------------------------- */
.fx-storage-shell {
  display: grid;
  grid-template-columns: 168px 260px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-lg);
  background: var(--fx-surface);
  overflow: hidden;
  height: calc(100vh - 160px);
  min-height: 480px;
}

.fx-storage-rail {
  border-right: 1px solid var(--fx-border-hair);
  background: var(--fx-surface-2);
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fx-storage-rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: var(--fx-h-row);
  padding: 8px 10px;
  border: none;
  border-radius: var(--fx-r-sm);
  background: transparent;
  color: var(--fx-text-2);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.fx-storage-rail-item:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-storage-rail-item--active { background: var(--fx-accent-tint); color: var(--fx-accent-text); }
.fx-storage-rail-count {
  font-family: var(--fx-mono);
  font-size: 10.5px;
  color: var(--fx-text-faint);
}
.fx-storage-rail-item--active .fx-storage-rail-count { color: var(--fx-accent-text); }

.fx-storage-pane2 {
  border-right: 1px solid var(--fx-border-hair);
  overflow-y: auto;
  padding-bottom: 8px;
}
.fx-storage-pane2-group-label {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--fx-surface-2);
  border-bottom: 1px solid var(--fx-border-hair);
  font-family: var(--fx-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-text-faint);
  padding: 8px 14px;
}
.fx-storage-pane2-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 7px 14px 7px 20px;
  border: none;
  background: transparent;
  color: var(--fx-text-2);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.fx-storage-pane2-item:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-storage-pane2-item--active { background: var(--fx-accent-tint); color: var(--fx-accent-text); font-weight: 600; }
.fx-storage-pane2-count { font-family: var(--fx-mono); font-size: 10.5px; color: var(--fx-text-faint); }
.fx-storage-pane2-item--active .fx-storage-pane2-count { color: var(--fx-accent-text); }
.fx-storage-pane2--slide { animation: fxStorageSlide var(--fx-dur-slow) var(--fx-ease-slide); }
@keyframes fxStorageSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.fx-storage-main { display: flex; flex-direction: column; min-width: 0; }
.fx-storage-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px var(--fx-pad-card);
  border-bottom: 1px solid var(--fx-border-hair);
  flex-shrink: 0;
}
.fx-storage-breadcrumb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.fx-storage-crumb {
  position: relative;
  display: inline-flex;
}
.fx-storage-crumb-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  color: var(--fx-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 4px 6px;
  border-radius: var(--fx-r-sm);
  cursor: pointer;
}
.fx-storage-crumb-btn:hover { background: var(--fx-surface-sunken); }
.fx-storage-crumb-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; opacity: 0.6; }
.fx-storage-crumb-sep { color: var(--fx-border-strong); font-size: 14px; }
.fx-storage-crumb-menu { min-width: 200px; max-height: 260px; overflow-y: auto; }

.fx-storage-search {
  flex: 1 1 200px;
  min-width: 140px;
  height: var(--fx-h-control);
  padding: 0 12px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-btn);
  font-size: 13px;
  background: var(--fx-surface);
  color: var(--fx-text);
  margin-left: auto;
}
.fx-storage-search:focus-visible { outline: none; border-color: var(--fx-accent); box-shadow: var(--fx-focus-ring); }

.fx-storage-sort-select {
  height: var(--fx-h-control);
  padding: 0 8px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-btn);
  font-size: 12.5px;
  background: var(--fx-surface);
  color: var(--fx-text);
}
.fx-storage-density-toggle { display: inline-flex; border: 1px solid var(--fx-border); border-radius: var(--fx-r-btn); overflow: hidden; }
.fx-storage-density-btn {
  width: 32px; height: var(--fx-h-control);
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  background: var(--fx-surface);
  color: var(--fx-text-muted);
  cursor: pointer;
}
.fx-storage-density-btn + .fx-storage-density-btn { border-left: 1px solid var(--fx-border); }
.fx-storage-density-btn:hover { background: var(--fx-surface-sunken); }
.fx-storage-density-btn--active { background: var(--fx-accent-tint); color: var(--fx-accent-text); }
.fx-storage-density-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }

.fx-storage-resultcount {
  font-family: var(--fx-mono);
  font-size: 11.5px;
  color: var(--fx-text-faint);
  padding: 10px var(--fx-pad-card) 0;
}

.fx-storage-cardscroll { flex: 1; overflow-y: auto; padding: var(--fx-pad-card); }

.fx-storage-cards--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--fx-gap);
}
.fx-storage-cards--list { display: flex; flex-direction: column; gap: 8px; }

.fx-storage-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  animation: fxStorageCardIn var(--fx-dur-slow) var(--fx-ease-slide) backwards;
}
@keyframes fxStorageCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fx-storage-cards--list .fx-storage-card { flex-direction: row; align-items: center; }

.fx-storage-card-thumb {
  width: 100%; height: 108px;
  background: var(--fx-surface-sunken) center/cover no-repeat;
  border-bottom: 1px solid var(--fx-border-hair);
  flex-shrink: 0;
  position: relative;
}
.fx-storage-cards--list .fx-storage-card-thumb { width: 72px; height: 44px; border-bottom: none; border-right: 1px solid var(--fx-border-hair); }
.fx-storage-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.fx-storage-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-storage-card-meta {
  font-size: 11px;
  color: var(--fx-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.fx-storage-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-storage-card-versions {
  font-family: var(--fx-mono);
  font-size: 10px;
  color: var(--fx-text-faint);
}
.fx-storage-card-actions {
  display: flex;
  gap: 3px;
  padding: 6px 8px;
  border-top: 1px solid var(--fx-border-hair);
  opacity: 0;
  transition: opacity var(--fx-dur) var(--fx-ease);
}
.fx-storage-card:hover .fx-storage-card-actions,
.fx-storage-card:focus-within .fx-storage-card-actions { opacity: 1; }
.fx-storage-cards--list .fx-storage-card-actions { border-top: none; border-left: 1px solid var(--fx-border-hair); margin-left: auto; }
.fx-storage-card-action-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--fx-r-sm);
  background: transparent;
  color: var(--fx-text-muted);
  cursor: pointer;
}
.fx-storage-card-action-btn:hover:not(:disabled) { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-storage-card-action-btn:disabled { color: var(--fx-text-faint); opacity: 0.45; cursor: not-allowed; }
.fx-storage-card-action-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.fx-storage-card-action-btn--danger:hover:not(:disabled) { background: var(--fx-err-bg); color: var(--fx-err-fg); }

.fx-storage-search-results { padding: var(--fx-pad-card); display: flex; flex-direction: column; gap: 4px; }
.fx-storage-search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: var(--fx-r-sm);
  cursor: pointer;
}
.fx-storage-search-result:hover { background: var(--fx-surface-sunken); }
.fx-storage-search-result-title { font-size: 13px; font-weight: 600; color: var(--fx-text); }
.fx-storage-search-result-path { font-family: var(--fx-mono); font-size: 10.5px; color: var(--fx-text-faint); }

@media (max-width: 1080px) {
  .fx-storage-shell { grid-template-columns: 140px 220px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-storage-pane2--slide,
  .fx-storage-card {
    animation-duration: 0ms !important;
    animation-delay: 0s !important;
  }
}

/* ----------------------------------------------------------------
   Test landing
   ---------------------------------------------------------------- */
.hub-card--locked {
  opacity: 0.62;
  cursor: not-allowed;
  background: var(--fx-surface-sunken);
}
.hub-card--locked:hover { border-color: var(--fx-border); box-shadow: none; }
.hub-card--locked .hub-card-title { display: flex; align-items: center; gap: 6px; }
.fx-test-lock-icon { width: 15px; height: 15px; stroke: var(--fx-text-faint); fill: none; flex-shrink: 0; }
.fx-test-lock-badge {
  display: inline-block;
  font-family: var(--fx-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fx-text-faint);
  background: var(--fx-surface);
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-xs);
  padding: 3px 7px;
  margin-bottom: 10px;
}
.fx-test-notify-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--fx-text-muted);
}
.fx-test-notify-row input[type="checkbox"] { accent-color: var(--fx-accent); }

.fx-test-wizard { max-width: 720px; margin: 0 auto; }
.ows-stepper--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-test-hint { font-size: 12px; color: var(--fx-text-muted); margin: 0 0 10px; }

.fx-test-picker-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-md);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 16px;
}
.fx-test-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--fx-surface);
  border-bottom: 1px solid var(--fx-border-hair);
  cursor: pointer;
}
.fx-test-picker-item:last-child { border-bottom: none; }
.fx-test-picker-item:hover { background: var(--fx-surface-2); }
.fx-test-picker-item input[type="checkbox"] { accent-color: var(--fx-accent); flex-shrink: 0; }
.fx-test-picker-thumb {
  width: 40px; height: 26px;
  border-radius: var(--fx-r-xs);
  background: var(--fx-surface-sunken) center/cover no-repeat;
  flex-shrink: 0;
  border: 1px solid var(--fx-border-hair);
}
.fx-test-picker-title { font-size: 13px; font-weight: 600; color: var(--fx-text); flex: 1; min-width: 0; }
.fx-test-picker-path { font-family: var(--fx-mono); font-size: 10.5px; color: var(--fx-text-faint); }
.fx-test-picker-empty { padding: 30px; text-align: center; color: var(--fx-text-muted); font-size: 13px; }

.fx-test-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.fx-test-questions-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.fx-test-question-row { display: flex; gap: 6px; align-items: center; }
.fx-test-question-row input { flex: 1; }

.fx-test-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-btn);
  background: var(--fx-surface-2);
  font-family: var(--fx-mono);
  font-size: 12.5px;
  color: var(--fx-text-2);
  margin-bottom: 10px;
}
.fx-test-link-box input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: inherit; color: inherit; }
.fx-test-link-box input:focus-visible { outline: none; }
.fx-test-link-note { font-size: 12px; color: var(--fx-text-muted); margin-bottom: 20px; }

.fx-test-wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--fx-border-hair);
}
.fx-test-summary-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.fx-test-summary-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--fx-border-hair); }
.fx-test-summary-row span:first-child { color: var(--fx-text-muted); }
.fx-test-summary-row span:last-child { color: var(--fx-text); font-weight: 600; }
/* ===== v13 · client consoles ===== */
.fx-std-actions,.fx-std-add,.fx-std-levels,.fx-std-steps{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0}
.fx-std-levels label,.fx-std-add label,.fx-client-admin label,[data-console-settings] label{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.fx-std-templates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px 0}
.fx-std-templates button{min-height:100px}
.fx-std-wizard{padding:24px}.fx-std-node{display:flex;gap:12px;margin:8px 0}.fx-std-node input{flex:1;min-width:0}
.fx-std-browser{display:grid;grid-template-columns:170px 220px minmax(0,1fr);gap:20px;margin-top:24px}
.fx-std-browser nav{display:flex;flex-direction:column;gap:8px;align-items:stretch}.fx-std-browser nav button{text-align:left;white-space:normal}
.fx-std-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.fx-std-card{overflow:hidden;padding:16px}.fx-std-card img,.fx-std-no-image{width:100%;height:160px;object-fit:contain;background:var(--fx-surface-2);border-radius:8px}
.fx-std-no-image{display:flex;align-items:center;justify-content:center;color:var(--fx-text-muted)}
.fx-std-card h3{margin:16px 0 8px}.fx-std-card p{color:var(--fx-text-muted);font-size:12px}
.fx-std-dialog{border:1px solid var(--fx-border);border-radius:16px;padding:24px;min-width:320px;background:var(--fx-surface);color:var(--fx-text)}
.fx-std-dialog select{max-width:500px;width:100%}
.fx-admin-approval-banner{padding:24px;border:1px solid var(--fx-warn-bd);background:var(--fx-warn-bg);border-radius:12px;margin:24px 0;font-size:18px}
.fx-admin-approval-banner strong{font-size:32px;margin-right:12px}.fx-admin-approval-item{padding:20px;margin:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:center}
.fx-nav-badge{border-radius:12px;background:var(--fx-warn-bg);color:var(--fx-warn-fg);font-size:11px;padding:2px 7px;margin-left:auto}
.fx-admin-account-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.fx-client-admin section.card{padding:24px;margin:20px 0}
.fx-console-table{overflow:auto;margin:16px 0}.fx-console-table table{width:100%;border-collapse:collapse;font-size:12px}.fx-console-table th,.fx-console-table td{padding:12px;text-align:left;border-bottom:1px solid var(--fx-border);vertical-align:top}.fx-console-table th{color:var(--fx-text-muted);font-weight:500}
.fx-standards input,.fx-standards select,.fx-client-admin input,.fx-client-admin select,#md-console select,#md-console input,[data-console-settings] select{border:1px solid var(--fx-border-control);border-radius:8px;background:var(--fx-surface);color:var(--fx-text);padding:8px;font:inherit}
.fx-std-actions [aria-pressed=true],.fx-std-browser [aria-pressed=true]{outline:2px solid var(--fx-accent);outline-offset:1px}
@media(max-width:900px){.fx-std-browser{grid-template-columns:1fr}.fx-std-browser nav{flex-direction:row;flex-wrap:wrap}.fx-admin-account-grid{grid-template-columns:1fr}.fx-admin-approval-item{align-items:stretch;flex-direction:column}}

/* ==================================================================
   v13 · console UI kit
   ------------------------------------------------------------------
   One component vocabulary shared by Admin, Master Data and Standards,
   ported from the three console concepts. Tokens only — no literals.
   Graphite acts, purple marks state, peach labels data.
   ================================================================== */

/* --- page frame ------------------------------------------------- */
.fx-topbar-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fx-topbar-desc { font-size: 11.5px; color: var(--fx-text-faint); }
.fx-view { padding: 22px 28px 40px; }
.fx-view-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fx-view-head h2 { font-size: var(--fx-fs-h1); font-weight: var(--fx-fw-h1); letter-spacing: var(--fx-ls-h1); }
.fx-view-head p { font-size: var(--fx-fs-small); color: var(--fx-text-muted); margin-top: 4px; max-width: 66ch; line-height: 1.6; }
.fx-section-label {
  font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: var(--fx-fw-label);
  letter-spacing: var(--fx-ls-label); text-transform: uppercase; color: var(--fx-text-faint);
  margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fx-section-label:first-child { margin-top: 0; }
.fx-section-label .fx-count { color: var(--fx-text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.fx-empty {
  border: 1px dashed var(--fx-border-strong); border-radius: var(--fx-r-md);
  padding: 28px; text-align: center; color: var(--fx-text-muted); font-size: var(--fx-fs-small);
}

/* --- segmented view switch -------------------------------------- */
.fx-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--fx-surface-sunken);
          border: 1px solid var(--fx-border); border-radius: var(--fx-r-btn); }
.fx-seg-btn {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--fx-font); font-size: 12.5px; font-weight: 600; color: var(--fx-text-muted);
  padding: 6px 13px; border-radius: 6px; white-space: nowrap;
  transition: background var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease);
}
.fx-seg-btn:hover:not(.fx-seg-btn--active) { color: var(--fx-text-2); }
.fx-seg-btn--active { background: var(--fx-surface); color: var(--fx-text); box-shadow: var(--fx-shadow-thumb); }
.fx-seg-btn:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
.fx-seg-btn:disabled { color: var(--fx-text-faint); opacity: .55; cursor: not-allowed; }
.fx-seg-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 4px; margin-left: 5px;
  border-radius: var(--fx-r-round); background: var(--fx-warn-solid); color: var(--fx-on-accent);
  font-family: var(--fx-mono); font-size: 9px; font-weight: 700;
}

.fx-md-tabs { display: flex; align-items: center; gap: 14px; padding: 0 0 20px; }
.fx-switch-label {
  font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: var(--fx-fw-label);
  letter-spacing: var(--fx-ls-label); text-transform: uppercase; color: var(--fx-text-faint);
}
/* Master Data detail: the upload slots sit side by side on the full-width
   page instead of stacking down a 420px drawer. */
.fx-md-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.fx-md-slots .md-slot { margin: 0; }
.fx-md-detail .fx-view { padding-top: 18px; }
.fx-std-dialog { border-radius: var(--fx-r-lg); box-shadow: var(--fx-shadow-pop); }
.fx-std-dialog .fx-input { max-width: none; margin-bottom: 4px; }

/* --- status dot inside app-chip --------------------------------- */
.fx-dot { width: 5px; height: 5px; border-radius: var(--fx-r-round); background: currentColor; flex: none; }
.app-chip--dim { background: transparent; border-color: var(--fx-border-hair); color: var(--fx-text-faint); }

/* --- tables ------------------------------------------------------ */
.fx-tbl-wrap { overflow-x: auto; border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); background: var(--fx-surface); }
.fx-tbl { width: 100%; border-collapse: collapse; font-size: var(--fx-fs-small); }
.fx-tbl th {
  font-family: var(--fx-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fx-text-faint); text-align: left;
  padding: 9px 14px; border-bottom: 1px solid var(--fx-border); background: var(--fx-surface-2); white-space: nowrap;
}
.fx-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--fx-border-hair); vertical-align: middle; }
.fx-tbl tbody tr:last-child td { border-bottom: none; }
.fx-mono { font-family: var(--fx-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fx-faint { color: var(--fx-text-faint); }

/* --- filter pills ------------------------------------------------ */
.fx-pillrow { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.fx-pill {
  border: 1px solid var(--fx-border-control); background: var(--fx-surface);
  border-radius: var(--fx-r-round); height: 28px; padding: 0 13px; cursor: pointer;
  font-family: var(--fx-font); font-size: 11.5px; font-weight: 600; color: var(--fx-text-2);
  transition: background var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease);
}
.fx-pill:hover:not(.fx-pill--active) { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-pill--active { background: var(--fx-cta-bg); border-color: var(--fx-cta-bg); color: var(--fx-cta-fg); }
.fx-pill:focus-visible { outline: var(--fx-focus-outline); outline-offset: 2px; }

/* --- approvals --------------------------------------------------- */
.fx-approval-banner {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; margin-bottom: 20px;
  border: 1px solid var(--fx-warn-bd); background: var(--fx-warn-bg); border-radius: var(--fx-r-lg);
}
.fx-approval-banner .fx-n { font-family: var(--fx-mono); font-size: 30px; font-weight: 800; color: var(--fx-warn-fg); letter-spacing: -.02em; }
.fx-approval-banner .fx-l { font-size: 13.5px; font-weight: 700; color: var(--fx-warn-fg); }
.fx-approval-list { display: flex; flex-direction: column; gap: 10px; }
.fx-approval-item {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px;
  border: 1px solid var(--fx-warn-bd); border-left: 4px solid var(--fx-warn-solid);
  border-radius: var(--fx-r-md); background: var(--fx-surface);
}
.fx-approval-body { flex: 1; min-width: 220px; }
.fx-approval-title { font-size: 13px; font-weight: 700; }
.fx-approval-meta { font-size: 11.5px; color: var(--fx-text-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fx-approval-actions { display: flex; gap: 8px; flex: none; margin-left: auto; }

/* --- account, plan, team ---------------------------------------- */
.fx-acct-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
.fx-acctcard { display: flex; align-items: center; gap: 16px; border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); padding: 16px; background: var(--fx-surface); }
.fx-avatar-chip {
  width: 44px; height: 44px; border-radius: var(--fx-r-round); flex: none;
  background: var(--fx-accent); color: var(--fx-on-accent);
  display: grid; place-items: center; font-family: var(--fx-mono); font-weight: 700; font-size: 14px;
  background-size: cover; background-position: center;
}
.fx-acct-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fx-acct-fields label:not(.btn) {
  display: block; font-size: var(--fx-fs-label); font-weight: 600; color: var(--fx-text-faint);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.fx-input {
  width: 100%; max-width: 320px; height: var(--fx-h-control); padding: 0 11px;
  border: 1px solid var(--fx-border-control); border-radius: var(--fx-r-btn);
  font-family: var(--fx-font); font-size: 13px; color: var(--fx-text); background: var(--fx-surface);
}
.fx-input:focus-visible { outline: none; border-color: var(--fx-accent); box-shadow: var(--fx-focus-ring); }
.fx-input:disabled { background: var(--fx-surface-sunken); color: var(--fx-text-muted); cursor: not-allowed; }
.fx-plancard { border: 1px solid var(--fx-border); background: var(--fx-surface); border-radius: var(--fx-r-lg); padding: 16px 18px; }
.fx-plancard--full { border-color: var(--fx-warn-bd); background: var(--fx-warn-bg); }
.fx-plancard-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.fx-plancard-name { font-size: 15px; font-weight: 800; }
.fx-plancard-name span { font-size: 12px; font-weight: 500; color: var(--fx-text-2); }
.fx-seatbar { display: flex; gap: 6px; margin: 13px 0 11px; }
.fx-seat { width: 30px; height: 8px; border-radius: var(--fx-r-round); background: var(--fx-surface-sunken); border: 1px solid var(--fx-border); }
.fx-seat--used { background: var(--fx-accent); border-color: var(--fx-accent); }
.fx-plancard--full .fx-seat--used { background: var(--fx-warn-solid); border-color: var(--fx-warn-solid); }
.fx-plancard-note { font-size: 12px; color: var(--fx-text-2); line-height: 1.6; max-width: 68ch; }
.fx-who-cell { display: flex; align-items: center; gap: 9px; }
.fx-who-avatar {
  width: 24px; height: 24px; border-radius: var(--fx-r-round); flex: none;
  background: var(--fx-accent-tint-2); color: var(--fx-accent-text);
  display: grid; place-items: center; font-family: var(--fx-mono); font-size: 9.5px; font-weight: 700;
}
.fx-invite-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.fx-invite-row label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fx-fs-label);
  font-weight: 600; color: var(--fx-text-faint); text-transform: uppercase; letter-spacing: .06em; }
.fx-invite-row .fx-input { min-width: 190px; }
.fx-note { font-size: 11.5px; color: var(--fx-text-muted); margin-top: 12px; line-height: 1.6; max-width: 72ch; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.fx-acct-fields .fx-row-actions { justify-content: flex-start; }

/* --- version timeline -------------------------------------------- */
.fx-timeline { display: flex; flex-direction: column; border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); background: var(--fx-surface); padding: 0 16px; }
.fx-tl-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--fx-border-hair); align-items: center; }
.fx-tl-row:last-child { border-bottom: none; }
.fx-tl-v { font-family: var(--fx-mono); font-size: 13px; font-weight: 700; color: var(--fx-text); }
.fx-tl-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-tl-meta .fx-who { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fx-tl-meta .fx-when { font-size: 11.5px; color: var(--fx-text-faint); }
.fx-tl-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* --- diff -------------------------------------------------------- */
.fx-diffpanel { border: 1px solid var(--fx-accent-tint-2); background: var(--fx-accent-tint); border-radius: var(--fx-r-lg); padding: 18px 20px; margin-top: 16px; }
.fx-diffpanel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.fx-diffpanel-head h4 { font-size: 13.5px; font-weight: 700; color: var(--fx-accent-text); }
.fx-diffpanel-head span { font-size: 11.5px; color: var(--fx-text-muted); }
.fx-diffstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.fx-diffstat { background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); padding: 12px 14px; }
.fx-diffstat .fx-n { font-family: var(--fx-mono); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.fx-diffstat .fx-l { font-family: var(--fx-mono); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fx-text-faint); margin-top: 2px; }
.fx-diffstat--add .fx-n { color: var(--fx-ok-fg); }
.fx-diffstat--rem .fx-n { color: var(--fx-err-fg); }
.fx-diffstat--chg .fx-n { color: var(--fx-accent-text); }
.fx-valchange { display: inline-flex; align-items: center; gap: 6px; font-family: var(--fx-mono); font-size: 11.5px; }
.fx-valchange .fx-old { color: var(--fx-err-fg); text-decoration: line-through; opacity: .75; }
.fx-valchange .fx-new { color: var(--fx-ok-fg); font-weight: 600; }
.fx-valchange .fx-arrow { color: var(--fx-text-faint); }

/* --- scoped row fixes -------------------------------------------- */
.fx-fixpanel { background: var(--fx-surface); border: 1px solid var(--fx-warn-bd); border-radius: var(--fx-r-md); padding: 14px 16px; margin-top: 16px; }
.fx-fixpanel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.fx-fixpanel-head b { font-size: 12.5px; font-weight: 700; }
.fx-fixrow { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--fx-border-hair); }
.fx-fixrow:last-child { border-bottom: none; }
.fx-fixrow .fx-sku { font-family: var(--fx-mono); font-size: 11.5px; color: var(--fx-text-2); }
.fx-fixrow .fx-reason { font-size: 11.5px; color: var(--fx-warn-fg); }
.fx-fixrow input[type=text] { height: 28px; padding: 0 9px; border: 1px solid var(--fx-border-control);
  border-radius: var(--fx-r-sm); font-family: var(--fx-mono); font-size: 12px; width: 100%;
  background: var(--fx-surface); color: var(--fx-text); }
.fx-fixrow label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fx-text-2); white-space: nowrap; }

/* --- image pack --------------------------------------------------- */
.fx-imgpack { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: var(--fx-surface-2);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); padding: 14px 16px; margin-bottom: 22px; }
.fx-imgpack-head { flex: 1 1 240px; min-width: 200px; }
.fx-imgpack-head h3 { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-imgpack-head p { font-size: 11.5px; color: var(--fx-text-muted); margin-top: 4px; line-height: 1.55; }
.fx-imgpack-stats { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--fx-mono); font-size: 11.5px; color: var(--fx-text-2); }
.fx-imgpack-stats b { color: var(--fx-text); font-weight: 700; }
.fx-imgpack-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* --- data quality -------------------------------------------------- */
.fx-qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.fx-qcard { border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); padding: 16px; background: var(--fx-surface); }
.fx-qcard .fx-qlabel { font-family: var(--fx-mono); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fx-text-faint); }
.fx-qcard .fx-qval { font-family: var(--fx-mono); font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin: 8px 0 10px; }
.fx-qcard--ok .fx-qval { color: var(--fx-ok-fg); }
.fx-qcard--warn .fx-qval { color: var(--fx-warn-fg); }
.fx-qcard--err .fx-qval { color: var(--fx-err-fg); }
.fx-qbar { height: 5px; border-radius: var(--fx-r-round); background: var(--fx-surface-sunken); overflow: hidden; }
.fx-qbar i { display: block; height: 100%; border-radius: var(--fx-r-round); background: var(--fx-ok-solid); }
.fx-qbar--warn i { background: var(--fx-warn-solid); }
.fx-qbar--err i { background: var(--fx-err-solid); }
.fx-fillbar { display: flex; align-items: center; gap: 8px; }
.fx-fillbar .fx-track { flex: 1; height: 5px; border-radius: var(--fx-r-round); background: var(--fx-surface-sunken); overflow: hidden; max-width: 140px; }
.fx-fillbar .fx-track i { display: block; height: 100%; background: var(--fx-accent); border-radius: var(--fx-r-round); }
.fx-fillbar .fx-track--warn i { background: var(--fx-warn-solid); }
.fx-fillbar .fx-track--err i { background: var(--fx-err-solid); }
.fx-fillbar .fx-pct { font-family: var(--fx-mono); font-size: 11px; color: var(--fx-text-muted); width: 52px; text-align: right; }

/* --- governance toggle --------------------------------------------- */
.fx-gov-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); padding: 14px 16px; margin-bottom: 20px; background: var(--fx-surface); }
.fx-gov-toggle b { font-size: 12.5px; font-weight: 700; display: block; }
.fx-gov-toggle span { font-size: 11.5px; color: var(--fx-text-muted); }
.fx-switch { position: relative; width: 40px; height: 22px; border-radius: var(--fx-r-round);
  background: var(--fx-border-strong); flex: none; border: none; cursor: pointer; padding: 0;
  transition: background var(--fx-dur) var(--fx-ease); }
.fx-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: var(--fx-r-round); background: var(--fx-surface); box-shadow: var(--fx-shadow-thumb);
  transition: transform var(--fx-dur) var(--fx-ease); }
.fx-switch[aria-pressed="true"] { background: var(--fx-accent); }
.fx-switch[aria-pressed="true"]::after { transform: translateX(18px); }
.fx-switch:disabled { opacity: .45; cursor: not-allowed; }
.fx-switch:focus-visible { outline: var(--fx-focus-outline); outline-offset: 2px; }
/* Checkbox-backed variant: the real control stays a checkbox so the existing
   change handler and keyboard behaviour are untouched. */
.fx-switch-wrap { display: inline-flex; flex: none; cursor: pointer; }
.fx-switch-wrap input:checked + .fx-switch { background: var(--fx-accent); }
.fx-switch-wrap input:checked + .fx-switch::after { transform: translateX(18px); }
.fx-switch-wrap input:disabled + .fx-switch { opacity: .45; cursor: not-allowed; }
.fx-switch-wrap input:focus-visible + .fx-switch { outline: var(--fx-focus-outline); outline-offset: 2px; }

/* --- standards · wizard --------------------------------------------- */
.fx-stepper { display: flex; gap: 0; margin-bottom: 26px; border-bottom: 1px solid var(--fx-border-hair); }
.fx-step-tab { flex: 1; padding: 10px 4px 12px; border-bottom: 2px solid transparent; text-align: left; }
.fx-step-tab .fx-n { display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: var(--fx-r-round); background: var(--fx-surface-sunken); color: var(--fx-text-muted);
  font-family: var(--fx-mono); font-size: 10.5px; font-weight: 700; margin-right: 8px; }
.fx-step-tab--done .fx-n { background: var(--fx-ok-bg); color: var(--fx-ok-fg); }
.fx-step-tab--active { border-bottom-color: var(--fx-accent); }
.fx-step-tab--active .fx-n { background: var(--fx-accent); color: var(--fx-on-accent); }
.fx-step-tab b { font-size: 12.5px; font-weight: 700; }
.fx-step-tab span { display: block; font-size: 11px; color: var(--fx-text-faint); margin-top: 2px; }
.fx-tmpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.fx-tmpl-card { border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); padding: 14px; cursor: pointer;
  background: var(--fx-surface); text-align: left; font-family: var(--fx-font);
  transition: border-color var(--fx-dur) var(--fx-ease), background var(--fx-dur) var(--fx-ease); }
.fx-tmpl-card:hover:not(.fx-tmpl-card--selected) { border-color: var(--fx-border-strong); }
.fx-tmpl-card--selected { border-color: var(--fx-accent); background: var(--fx-accent-tint); }
.fx-tmpl-card h4 { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.fx-tmpl-tree { font-family: var(--fx-mono); font-size: 10.5px; color: var(--fx-text-muted); line-height: 1.7; white-space: pre-line; }
.fx-tmpl-card--selected .fx-tmpl-tree { color: var(--fx-accent-text); }
.fx-builder-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
.fx-level-row { border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); padding: 16px; margin-bottom: 14px; background: var(--fx-surface); }
.fx-level-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.fx-level-badge { font-family: var(--fx-mono); font-size: 10px; color: var(--fx-text-faint);
  background: var(--fx-surface-sunken); padding: 2px 7px; border-radius: var(--fx-r-xs); white-space: nowrap; }
.fx-level-name { font-family: var(--fx-font); font-size: 13.5px; font-weight: 700; border: none;
  background: transparent; color: var(--fx-text); border-bottom: 1px solid var(--fx-border); padding: 2px 0; min-width: 90px; }
.fx-level-name:focus { outline: none; border-bottom-color: var(--fx-accent); }
.fx-chip-list { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.fx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 6px 2px 11px;
  border-radius: var(--fx-r-round); background: var(--fx-surface-sunken); border: 1px solid var(--fx-border);
  font-size: 12px; font-weight: 600; color: var(--fx-text-2); }
.fx-chip input { border: none; background: transparent; font: inherit; color: inherit;
  field-sizing: content; min-width: 5ch; max-width: 22ch; width: 11ch; }
@supports (field-sizing: content) { .fx-chip input { width: auto; } }
.fx-chip-group { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--fx-border-hair); }
.fx-chip-group:first-child { border-top: none; padding-top: 0; }
.fx-chip-group-label { font-family: var(--fx-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fx-text-faint); flex: none; width: 96px; padding-top: 8px; }
.fx-chip-group .fx-chip-list { flex: 1; min-width: 0; }
.fx-chip input:focus-visible { outline: none; border-bottom: 1px solid var(--fx-accent); }
.fx-chip-x { width: 18px; height: 18px; border: none; border-radius: var(--fx-r-round); background: transparent;
  color: var(--fx-text-faint); cursor: pointer; display: grid; place-items: center; font-size: 14px; line-height: 1; }
.fx-chip-x:hover { background: var(--fx-border); color: var(--fx-text); }
.fx-chip-add { min-height: 28px; padding: 0 12px; border-radius: var(--fx-r-round); border: 1px dashed var(--fx-border-control);
  background: transparent; color: var(--fx-text-muted); font-family: var(--fx-font); font-size: 12px; font-weight: 600; cursor: pointer; }
.fx-chip-add:hover { border-color: var(--fx-accent); color: var(--fx-accent-text); }
.fx-add-level-btn { width: 100%; min-height: 40px; border: 1px dashed var(--fx-border-control); border-radius: var(--fx-r-md);
  background: transparent; color: var(--fx-text-muted); font-family: var(--fx-font); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fx-add-level-btn:hover:not(:disabled) { border-color: var(--fx-accent); color: var(--fx-accent-text); }
.fx-add-level-btn:disabled { opacity: .5; cursor: not-allowed; }
.fx-level-actions { display: flex; gap: 10px; align-items: stretch; }
.fx-level-actions .fx-add-level-btn { flex: 1; }
.fx-preview-panel { border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); background: var(--fx-surface-2);
  padding: 16px; position: sticky; top: 80px; }
.fx-preview-panel h4 { font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: var(--fx-fw-label);
  letter-spacing: var(--fx-ls-label); text-transform: uppercase; color: var(--fx-text-faint); margin-bottom: 12px; }
.fx-tree { font-size: 12.5px; max-height: 340px; overflow: auto; }
.fx-tree-node { padding: 5px 0; display: flex; align-items: center; gap: 6px; color: var(--fx-text-2); }
.fx-tree-node--l0 { font-weight: 700; color: var(--fx-text); }
.fx-tree-node--l1 { padding-left: 18px; }
.fx-tree-node--l2 { padding-left: 36px; color: var(--fx-text-muted); }
.fx-tree-node .fx-cnt { margin-left: auto; font-family: var(--fx-mono); font-size: 10.5px; color: var(--fx-text-faint); }
.fx-review-box { border: 1px solid var(--fx-accent-tint-2); background: var(--fx-accent-tint); border-radius: var(--fx-r-md); padding: 16px; }
.fx-review-box b { font-size: 13px; font-weight: 700; color: var(--fx-accent-text); display: block; margin-bottom: 6px; }
.fx-review-box ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fx-review-box li { font-size: 12px; color: var(--fx-text-2); display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; }
.fx-review-box li::before { content: "\2713"; color: var(--fx-ok-solid); font-weight: 700; flex: none; }
.fx-wizard-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* --- standards · library -------------------------------------------- */
.fx-lib-shell { display: grid; grid-template-columns: 160px 200px minmax(0, 1fr);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); overflow: hidden; min-height: 420px; background: var(--fx-surface); }
.fx-lib-rail { background: var(--fx-surface-2); border-right: 1px solid var(--fx-border); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.fx-lib-pane2 { background: var(--fx-surface); border-right: 1px solid var(--fx-border); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.fx-rail-item, .fx-pane2-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  min-height: 34px; padding: 6px 10px; border: none; background: transparent; border-radius: var(--fx-r-sm);
  font-family: var(--fx-font); font-size: 12.5px; color: var(--fx-text-2); text-align: left; cursor: pointer;
}
.fx-rail-item { font-weight: 600; min-height: 36px; }
.fx-rail-item:hover, .fx-pane2-item:hover { background: var(--fx-surface-sunken); }
.fx-rail-item--active, .fx-rail-item--active:hover { background: var(--fx-accent-tint); color: var(--fx-accent-text); }
.fx-pane2-item--active, .fx-pane2-item--active:hover { background: var(--fx-surface-sunken); color: var(--fx-text); font-weight: 600; }
.fx-rail-item .fx-c, .fx-pane2-item .fx-c { font-family: var(--fx-mono); font-size: 10.5px; color: var(--fx-text-faint); flex: none; }
.fx-lib-main { padding: 18px 20px; overflow: auto; min-width: 0; }
.fx-lib-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }

.fx-gallery-group { margin-bottom: 32px; }
.fx-gallery-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--fx-border-hair); }
.fx-gallery-group-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.fx-gallery-group-head span { font-size: 11.5px; color: var(--fx-text-faint); }
.fx-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.fx-std-tile { border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); overflow: hidden; background: var(--fx-surface);
  display: flex; flex-direction: column; transition: border-color var(--fx-dur) var(--fx-ease); }
.fx-std-tile:hover { border-color: var(--fx-border-strong); }
.fx-std-thumb { height: 150px; position: relative; background: var(--fx-surface-2); border-bottom: 1px solid var(--fx-border-hair); }
.fx-std-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fx-std-thumb .fx-std-status { position: absolute; top: 10px; left: 10px; }
.fx-std-noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--fx-text-faint); font-size: 11.5px; }
.fx-std-body { padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fx-std-body h3 { font-size: 13px; font-weight: 700; letter-spacing: -.015em; }
.fx-std-body .fx-meta { font-size: 11px; color: var(--fx-text-muted); display: flex; justify-content: space-between; gap: 8px; }
.fx-std-body .fx-row-actions { margin-top: auto; padding-top: 8px; justify-content: flex-start; }

@media (max-width: 1000px) {
  .fx-builder-grid { grid-template-columns: 1fr; }
  .fx-preview-panel { position: static; }
  .fx-acct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .fx-lib-shell { grid-template-columns: 1fr; }
  .fx-lib-rail, .fx-lib-pane2 { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--fx-border); }
  .fx-rail-item, .fx-pane2-item { width: auto; }
  .fx-approval-actions { margin-left: 0; width: 100%; }
  .fx-approval-actions .btn { flex: 1; }
  .fx-fixrow { grid-template-columns: 1fr; }
  .fx-tl-row { grid-template-columns: 44px minmax(0, 1fr); }
  .fx-tl-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .fx-view { padding: 18px 16px 40px; }
}

/* ==================================================================
   v13.1 · History — kit frame, cards view, filter-menu search
   ================================================================== */
/* ==================================================================
   _part-history.css — History screen, console UI kit adoption
   ------------------------------------------------------------------
   Appended to fraimora-nav.css (after its existing rules, so it wins
   on equal specificity). Tokens only — no hex/rgb literals. Covers:
     - the app-topbar / fx-view page frame + List/Cards view switch
       (.fx-seg / .fx-seg-btn and .fx-view itself are already styled
       by the v13 console UI kit block in fraimora-nav.css — nothing
       to add there)
     - the filter bar's new padding
     - the multi-select menu's search box + per-dimension Clear
     - the Cards view's fx-std-tile tweaks (fx-card-grid/
       fx-gallery-group are already styled by the console UI kit)
   ================================================================== */

/* --- filter bar: card padding tightened to the kit's convention -- */
.fx-history .fx-history-filterbar {
  padding: 14px 16px;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- multi-select menu: search box + Clear header, scrollable rows */
.fx-msel-menu {
  min-width: 240px;
  max-height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}
.fx-msel-menu-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 8px;
  flex: none;
  border-bottom: 1px solid var(--fx-border-hair);
}
.fx-msel-search {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--fx-h-control-sm);
  padding: 0 10px;
  border: 1px solid var(--fx-border-control);
  border-radius: var(--fx-r-btn);
  background: var(--fx-surface);
  color: var(--fx-text);
  font-family: var(--fx-font);
  font-size: 12.5px;
}
.fx-msel-search::placeholder { color: var(--fx-text-faint); }
.fx-msel-search:focus-visible {
  outline: none;
  border-color: var(--fx-accent);
  box-shadow: var(--fx-focus-ring);
}
.fx-msel-clear {
  flex: none;
  height: var(--fx-h-control-sm);
  padding: 0 8px;
  border: none;
  border-radius: var(--fx-r-sm);
  background: transparent;
  color: var(--fx-text-muted);
  font-family: var(--fx-font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fx-msel-clear:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-msel-clear:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
.fx-msel-rows {
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.fx-msel-empty.fx-msel-nomatch { padding: 10px; text-align: center; }

/* --- Cards view: fx-std-tile reused for a history event ---------- */
.fx-history-tile { cursor: pointer; }
.fx-history-tile:hover { border-color: var(--fx-border-strong); }
.fx-history-tile:focus-visible { outline: var(--fx-focus-outline); outline-offset: 2px; }
.fx-history-tile .fx-std-thumb { background-size: contain; }
.fx-history-tile .fx-std-thumb img { object-fit: contain; }
.fx-history-tile .fx-std-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 20px);
}
.fx-history-tile--unresolvable { cursor: default; }
.fx-history-tile--unresolvable:hover { border-color: var(--fx-border); }
.fx-history-tile--unresolvable .fx-std-thumb { opacity: .55; }

.fx-history-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.fx-history-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.fx-history-tile-foot .fx-history-inputs {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-history-tile-foot .tb-menu-wrap { flex: none; }

@media (max-width: 640px) {
  .fx-history .fx-history-filterbar { padding: 12px; }
}

/* ==================================================================
   v13.1 · Storage — kit frame, cards density, gallery, folder filter
   ================================================================== */
/* ==================================================================
   _part-storage.css — Storage screen, "Standards Studio" pass.
   ------------------------------------------------------------------
   Appended to fraimora-nav.css after both the pre-existing
   `fx-storage-*` block and the `v13 · console UI kit` block, so any
   selector here wins ties on equal specificity. Storage's structured
   view keeps every existing fx-storage-* class (and id / data-fx-*
   attribute) and now carries the matching fx-lib-*/fx-rail-item/
   fx-pane2-item/fx-std-tile kit classes alongside them; the rules
   below tune the combination and add the few genuinely new bits
   (folder filter input, gallery layout, card-grid tile look) that
   the kit has no ready-made class for.
   Tokens only — no literals.
   ================================================================== */

/* --- page frame: let the shell fill the view, panes scroll on their
   own instead of the whole page ------------------------------------ */
.fx-storage .fx-view {
  padding-top: 18px;
}
.fx-storage-shell.fx-lib-shell {
  height: calc(100vh - 140px);
  min-height: calc(100vh - 140px);
}
.fx-storage-rail.fx-lib-rail,
.fx-storage-pane2.fx-lib-pane2 {
  overflow-y: auto;
  min-height: 0;
}

/* --- pane2 folder filter ------------------------------------------ */
.fx-storage-folder-search {
  display: block;
  width: calc(100% - 20px);
  margin: 10px 10px 8px;
  height: var(--fx-h-control-sm);
  padding: 0 10px;
  border: 1px solid var(--fx-border-control);
  border-radius: var(--fx-r-btn);
  background: var(--fx-surface);
  color: var(--fx-text);
  font-family: var(--fx-font);
  font-size: 12.5px;
}
.fx-storage-folder-search::placeholder { color: var(--fx-text-faint); }
.fx-storage-folder-search:focus-visible {
  outline: none;
  border-color: var(--fx-accent);
  box-shadow: var(--fx-focus-ring);
}

/* --- gallery toolbar: no breadcrumb precedes the search box here,
   so drop the margin-left:auto that pushes it flush right when a
   breadcrumb is present in Structured. -------------------------- */
.fx-storage-toolbar--gallery .fx-storage-search {
  margin-left: 0;
}
#fx-storage-gallery {
  padding: 0 var(--fx-pad-card) var(--fx-pad-card);
}
.fx-storage-gallery-wrap .fx-storage-resultcount {
  padding-bottom: 4px;
}

/* --- density switch: "Cards" / "List" now carry a label next to the
   icon, so the old fixed 32px icon-only button width has to go, and
   the active state moves off accent (accent is reserved for the rail
   / the one indicator already using it) onto the kit's neutral
   graphite-on-surface fill. ----------------------------------------- */
.fx-storage-density-btn.fx-seg-btn {
  width: auto;
  height: auto;
  gap: 6px;
  padding: 6px 12px;
}
.fx-storage-density-btn.fx-seg-btn svg { width: 14px; height: 14px; flex: none; }
.fx-storage-density-btn--active.fx-seg-btn--active {
  background: var(--fx-surface);
  color: var(--fx-text);
  box-shadow: var(--fx-shadow-thumb);
}

/* --- cards (grid) density and Gallery: the vertical fx-std-tile card,
   reusing the kit's card-grid tile shape. Actions stay pinned to the
   bottom of the card and — unlike the old wide row, where six icon
   buttons floating mid-row needed a hover reveal to stay legible —
   are always visible, matching the Standards tile. ------------------ */
.fx-storage-cards--grid.fx-card-grid {
  align-items: stretch;
}
.fx-std-tile.fx-storage-card {
  cursor: pointer;
}
.fx-std-tile.fx-storage-card .fx-storage-card-actions {
  opacity: 1;
  border-top: 1px solid var(--fx-border-hair);
  margin-top: auto;
  padding: 8px 0 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.fx-storage-card-path {
  font-size: 10.5px;
  color: var(--fx-text-faint);
}
.fx-std-tile .fx-storage-card-tags {
  margin-top: 2px;
}

/* --- list density: unchanged compact horizontal row, just confirming
   the thumb/action proportions called out in the brief. ------------- */
.fx-storage-cards--list .fx-storage-card-thumb {
  width: 56px;
  height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .fx-storage-shell.fx-lib-shell,
  .fx-storage-rail.fx-lib-rail,
  .fx-storage-pane2.fx-lib-pane2 {
    scroll-behavior: auto;
  }
}

/* ==================================================================
   v13.1 · controls — design-system dropdowns + in-place filters
   (fx/controls.js upgrades every native <select> to the fxPicker popover)
   ================================================================== */
.fxp--auto { display: block; width: 100%; min-width: 0; }
.fxp--auto .fxp-trigger { font-size: 13px; }
.fxp-trigger:disabled { opacity: .45; cursor: not-allowed; background: var(--fx-surface-sunken); }
/* Inline toolbars keep the control as wide as its label. */
.fx-storage-toolbar .fxp--auto, .fx-history-filterbar .fxp--auto,
.app-topbar .fxp--auto, .fx-admin-client-bar .fxp--auto { display: inline-block; width: auto; flex: none; }
.fx-storage-toolbar .fxp--auto .fxp-trigger, .fx-history-filterbar .fxp--auto .fxp-trigger,
.app-topbar .fxp--auto .fxp-trigger { width: auto; min-width: 128px; height: var(--fx-h-control); }
.accessory-row .fxp--auto, .equip-shelf-map-row .fxp--auto { flex: 1; width: auto; }
.fxp--auto:has(> .ows-select) { min-width: 260px; }
.fx-invite-row .fxp--auto { min-width: 190px; }
.fx-std-dialog .fxp--auto { margin-bottom: 4px; }

/* Plain popover: one line per option, the selected one marked. */
.fxp-pop--plain .fxp-row { padding: 7px 10px; }
.fxp-pop--plain .fxp-name { font-weight: 500; font-size: 13px; }
.fxp-pop--plain .fxp-row[aria-selected="true"] { background: var(--fx-surface-sunken); }
.fxp-pop--plain .fxp-row[aria-selected="true"] .fxp-name { font-weight: 700; }
.fxp-pop--plain .fxp-list { max-height: 300px; }
.fxp-pop--plain .fxp-search { margin-bottom: var(--fx-space-2); }
.fxp-pop .fxp-search[hidden] { display: none; }
.fxp-pop:focus { outline: none; }

/* In-place filters: [hidden] must beat component display rules. */
[data-fx-filter-item][hidden], [data-fx-filter-empty][hidden] { display: none !important; }
.fx-gallery-group:not(:has(.fx-std-tile:not([hidden]))) { display: none; }
.fx-search, .fx-view input.fx-search {
  height: var(--fx-h-control); min-width: 220px; flex: 0 1 300px; padding: 0 12px;
  border: 1px solid var(--fx-border-control); border-radius: var(--fx-r-btn);
  background: var(--fx-surface); color: var(--fx-text);
  font: 500 12.5px/1 var(--fx-font);
}
.fx-search::placeholder { color: var(--fx-text-faint); }
.fx-search:focus-visible { outline: none; border-color: var(--fx-accent); box-shadow: var(--fx-focus-ring); }
.fx-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fx-filterbar .fx-pillrow { margin-bottom: 0; }
.fx-filterbar .fx-search { margin-left: auto; }
.fx-filterbar .fx-count, .fx-lib-toolbar .fx-count { font-family: var(--fx-mono); font-size: 11px; color: var(--fx-text-faint); }
.fx-lib-toolbar .fx-empty[data-fx-filter-empty], .fx-lib-main > .fx-empty[data-fx-filter-empty] { margin-top: 16px; }

/* ==================================================================
   v13.1 · console polish (Admin, Master Data, Standards)
   ================================================================== */
/* Compact actions inside console views, as in the concepts (26px). */
.fx-view .btn-sm, .fx-tbl .btn-sm, .fx-std-dialog .btn-sm {
  min-height: 0; height: 26px; padding: 0 10px; font-size: 11.5px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.fx-invite-row > .btn { height: var(--fx-h-control); }
.fx-invite-row label { margin: 0; }
.fx-tbl td .fx-row-actions { flex-wrap: nowrap; }

/* Master Data detail: title → view switch → source → versions → compare.
   Each block's first label keeps its top rhythm. */
.fx-md-detail .fx-view-head { margin-bottom: 14px; }
.fx-md-tabs { padding: 0 0 18px; margin-bottom: 4px; border-bottom: 1px solid var(--fx-border-hair); }
#md-console-top > .fx-section-label:first-child,
[data-md-base] > .fx-section-label:first-child,
#md-console > .fx-section-label:first-child { margin-top: 26px; }
#md-console-top .fx-note { margin-top: 0; }
#md-console-top .fx-imgpack { margin-bottom: 0; }
.fx-md-detail .md-slot { background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); padding: 16px; }
.fx-md-detail .md-slot h4 { font-size: 13px; font-weight: 700; }

/* v13.1 · fixes found in review */
.fx-storage-folder-search { flex: none; }
.fx-storage-toolbar:not(.fx-storage-toolbar--gallery) .fx-storage-breadcrumb { flex: 1 0 100%; }
.fx-storage-toolbar .fx-storage-search { flex: 1 1 220px; margin-left: 0; }
[data-console-settings] .fx-settings-toggle-row { flex-direction: row; align-items: center; gap: 10px; margin: 14px 0 0; }
[data-console-settings] .fx-settings-toggle-row input[type="checkbox"] { padding: 0; margin: 0; flex: none; }
.fx-fixpanel-head .fx-search { margin-left: auto; height: var(--fx-h-control-sm); }
#md-fixes { max-height: 460px; overflow-y: auto; }
#md-console input.fx-search { font: 500 12.5px/1 var(--fx-font); padding: 0 12px; }
#md-console .fx-fixrow input[type=text] { font: 12px/1 var(--fx-mono); padding: 0 9px; height: 28px; }

/* v13.2 · merged Standards + step numbers ---------------------------- */
.fx-seg-btn { display: inline-flex; align-items: center; gap: 7px; }
.fx-seg-n { display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: var(--fx-r-round);
  border: 1px solid currentColor; font-family: var(--fx-mono); font-size: 8.5px; font-weight: 600; line-height: 1; letter-spacing: 0; opacity: .8; }
.fx-seg-btn--active .fx-seg-n { background: var(--fx-cta-bg); border-color: var(--fx-cta-bg); color: var(--fx-cta-fg); opacity: 1; }
.fx-std-thumb .fx-std-status { display: flex; gap: 4px; flex-wrap: wrap; }
.fx-std-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-std-tag { font-family: var(--fx-mono); font-size: 10px; font-weight: 600; color: var(--fx-text-muted); background: var(--fx-surface-sunken);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-round); padding: 1px 7px; }
.fx-std-body .fx-row-actions { align-items: center; }
.fx-std-body .tb-menu-wrap { position: relative; margin-left: auto; }
.fx-std-body .tb-menu-wrap .tb-menu { right: 0; left: auto; bottom: calc(100% + 4px); top: auto; min-width: 190px; }
.fx-std-tile:has(.tb-menu:not(.hidden)) { overflow: visible; position: relative; z-index: 5; }
.fx-std-tile:has(.tb-menu:not(.hidden)) .fx-std-thumb { border-radius: var(--fx-r-lg) var(--fx-r-lg) 0 0; overflow: hidden; }

/* v13.3 · assign-folder dialog centering (native <dialog> loses UA margin:auto to the site-wide *{margin:0} reset) */
.fx-std-dialog[open] { margin: auto; }
.tb-menu .menu-row:disabled { opacity: .45; cursor: not-allowed; background: transparent; }

/* ==================================================================
   2026-09 · v14 Agent — Ask Fraimora chat thread + composer + run/
   review cards (fx/screen-agent.js). Tokens only, no hex literals.
   Reuses .card/.btn/.app-chip/.fx-tbl from styles.css and the topbar
   pattern (.app-topbar/.fx-view) already used by the console screens.
   ================================================================== */
.ag-view { max-width: 880px; margin-left: var(--fx-sidebar-w, 236px); margin-right: auto; padding: 24px 24px 0; display: flex; flex-direction: column; min-height: calc(100vh - 56px); transition: margin-left var(--fx-dur-slow, 220ms) var(--fx-ease, ease); }
body.sidebar-collapsed .ag-view { margin-left: var(--fx-sidebar-w-collapsed, 64px); }
.ag-thread { flex: 1; padding-bottom: 16px; }
.ag-hello { text-align: center; padding: 48px 0 28px; color: var(--fx-text-muted); }
.ag-hello h1 { margin: 10px 0 6px; font-size: var(--fx-fs-h1); color: var(--fx-text); }
.ag-sugs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.ag-msg { display: flex; gap: 10px; margin: 0 0 16px; align-items: flex-start; }
.ag-msg--user { flex-direction: row-reverse; }
.ag-msg--user .ag-bubble { background: var(--fx-accent-tint); color: var(--fx-text); }
.ag-avatar { flex: none; width: 28px; height: 28px; border-radius: var(--fx-r-round); background: var(--fx-surface-sunken);
  display: grid; place-items: center; color: var(--fx-accent); }
.ag-bubble { background: var(--fx-surface); border: 1px solid var(--fx-border-hair); border-radius: var(--fx-r-lg); padding: 12px 14px; max-width: 100%; flex: 1; min-width: 0; }
.ag-bubble.card { padding: var(--fx-pad-card); }
/* Agent mark: filling facing bars. Only element on the whole app that
   idles in motion — the invariant is "chrome never idles"; this glyph
   lives on the agent screen only and freezes under reduced motion. */
.ag-dock { position: sticky; bottom: 0; background: var(--fx-canvas); padding: 10px 0 22px; }
.ag-composer { border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); background: var(--fx-surface); padding: 10px; }
.ag-composer:focus-within { border-color: var(--fx-accent); box-shadow: var(--fx-focus-ring); }
.ag-input { width: 100%; min-height: 44px; max-height: 160px; border: 0; outline: none; resize: vertical;
  font: 500 14px/1.5 var(--fx-font); color: var(--fx-text); background: transparent; }
.ag-input:focus { border-color: transparent; box-shadow: none; outline: none; }
.ag-bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ag-rec { display: flex; align-items: center; gap: 10px; flex: 1; color: var(--fx-err-fg); font-family: var(--fx-mono); font-size: var(--fx-fs-small); }
.ag-rec-dot { width: 8px; height: 8px; border-radius: var(--fx-r-round); background: var(--fx-err-solid); animation: ag-rec-pulse var(--fx-dur-pulse) ease-in-out infinite; }
@keyframes ag-rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ag-rec-dot { animation: none; } }
.ag-hint { font-size: var(--fx-fs-small); color: var(--fx-text-faint); margin: 8px 2px 0; }
.ag-field { display: grid; grid-template-columns: 108px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--fx-border-hair); align-items: start; }
.ag-field:last-child { border-bottom: 0; }
.ag-field-label { font-size: var(--fx-fs-label); letter-spacing: var(--fx-ls-label); font-weight: var(--fx-fw-label);
  color: var(--fx-text-faint); text-transform: uppercase; padding-top: 6px; }
.ag-field-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag-chk { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--fx-border-control); border-radius: var(--fx-r-round);
  padding: 4px 11px 4px 8px; font-size: 12.5px; font-weight: 600; color: var(--fx-text-2); background: var(--fx-surface); cursor: pointer; }
.ag-chk input { margin: 0; }
.ag-errs { list-style: none; margin: 10px 0 0; padding: 8px 10px; background: var(--fx-err-bg); border: 1px solid var(--fx-err-bd);
  border-radius: var(--fx-r-md); color: var(--fx-err-fg); font-size: var(--fx-fs-small); }
.ag-errs li + li { margin-top: 3px; }
.ag-step { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--fx-border-hair); }
.ag-step:last-child { border-bottom: 0; }
.ag-step-mk { flex: none; width: 20px; height: 20px; border-radius: var(--fx-r-round); border: 1.5px solid var(--fx-border-control);
  display: grid; place-items: center; margin-top: 1px; color: var(--fx-text-faint); }
.ag-step--done .ag-step-mk { background: var(--fx-ok-bg); border-color: var(--fx-ok-bd); color: var(--fx-ok-solid); }
.ag-step--err .ag-step-mk { background: var(--fx-err-bg); border-color: var(--fx-err-bd); color: var(--fx-err-solid); }
.ag-step-body { flex: 1; min-width: 0; }
.ag-step-title { font-size: 13.5px; font-weight: 650; color: var(--fx-text); }
.ag-step-meta { font-size: var(--fx-fs-small); color: var(--fx-text-faint); margin-top: 2px; }
.ag-step-link { background: none; border: 0; padding: 0; margin-top: 4px; font: inherit; font-size: var(--fx-fs-small);
  font-weight: 650; color: var(--fx-accent-text); cursor: pointer; }
.ag-pgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
.ag-pg { border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); padding: 11px 12px; background: var(--fx-surface); }
.ag-pg-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.ag-pg-name { font-size: 12.5px; font-weight: 650; color: var(--fx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-pg-rows { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--fx-text-muted); }
.ag-deliv { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--fx-border-hair); }
.ag-deliv:last-child { border-bottom: 0; }
.fx-step-tab .fx-n { width: 18px; height: 18px; font-size: 9.5px; }

/* v13.4 · Standards rework ------------------------------------------- */
/* A · toast with one action ("Open in Standards") */
.toast { display: flex; align-items: center; gap: 14px; }
.toast-action { flex: none; background: transparent; border: 1px solid currentColor; border-radius: var(--fx-r-btn);
  color: inherit; font: 600 12px/1 var(--fx-font); height: var(--fx-h-control-sm); padding: 0 10px; cursor: pointer; }
.toast-action:hover { background: var(--fx-surface); }
.toast-action:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
/* B · one browse screen: folder-tree rail + body toolbar, gear, wizard panel */
.fx-std-shell.fx-lib-shell { grid-template-columns: 220px minmax(0, 1fr); }
.fx-std-shell .fx-rail-item--d1 { padding-left: 22px; font-weight: 500; }
.fx-std-shell .fx-rail-item--d2 { padding-left: 34px; font-weight: 500; }
.fx-std-shell .fx-rail-item--d3 { padding-left: 46px; font-weight: 500; }
.fx-std-shell .fx-rail-item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-rail-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px; border-top: 1px solid var(--fx-border-hair); }
.fx-icon-btn { display: inline-grid; place-items: center; flex: none; width: var(--fx-h-control-sm); height: var(--fx-h-control-sm); padding: 0;
  border: 1px solid transparent; border-radius: var(--fx-r-btn); background: transparent; color: var(--fx-text-muted); cursor: pointer;
  transition: background var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease); }
.fx-icon-btn svg { width: 16px; height: 16px; }
.fx-icon-btn:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-icon-btn:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
.fx-icon-btn--on, .fx-icon-btn--on:hover { background: var(--fx-surface); border-color: var(--fx-border); color: var(--fx-text); box-shadow: var(--fx-shadow-thumb); }
.fx-std-viewtoggle { display: inline-flex; gap: 2px; padding: 2px; margin-left: auto; border-radius: var(--fx-r-btn); background: var(--fx-surface-sunken); }
.fx-std-viewtoggle .fx-icon-btn { width: 26px; height: 24px; }
.fx-std-list td { padding-top: 6px; padding-bottom: 6px; }
.fx-std-list .fx-std-list-thumb { width: 52px; }
.fx-std-list .fx-std-list-thumb img { width: 40px; height: 40px; object-fit: contain; display: block; border: 1px solid var(--fx-border-hair);
  border-radius: var(--fx-r-xs); background: var(--fx-surface-2); }
.fx-std-list .tb-menu-wrap { position: relative; }
.fx-std-list .tb-menu-wrap .tb-menu { right: 0; left: auto; top: calc(100% + 4px); min-width: 190px; }
.fx-wizard-panel { border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); background: var(--fx-surface); padding: 16px 20px 18px; }
.fx-wizard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fx-wizard-head h2 { flex: 1; font-size: var(--fx-fs-h2); font-weight: var(--fx-fw-h2); letter-spacing: var(--fx-ls-h2); }
@media (max-width: 900px) { .fx-std-shell.fx-lib-shell { grid-template-columns: 1fr; } }
/* C · wizard steps: pick-then-Next, inline chips, review tree + diagram */
.fx-tmpl-card { position: relative; }
.fx-tmpl-check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: var(--fx-r-round); background: var(--fx-accent); color: var(--fx-on-accent); font-size: 10px; font-weight: 700; }
.fx-chip .fx-chip-input { border: 1px solid transparent; border-radius: var(--fx-r-xs); padding: 1px 3px; margin: -2px 0; cursor: text; }
.fx-chip .fx-chip-input:hover { text-decoration: underline; text-decoration-color: var(--fx-border-control); text-underline-offset: 3px; }
.fx-chip .fx-chip-input:focus, .fx-chip .fx-chip-input:focus-visible { outline: none; text-decoration: none; border-color: var(--fx-accent); background: var(--fx-surface); }
.fx-chip--adding { position: relative; padding-right: 8px; background: var(--fx-surface); border-style: dashed; }
.fx-chip--adding .fx-chip-input[aria-invalid="true"] { border-color: var(--fx-err-solid); }
.fx-chip-error { position: absolute; left: 8px; top: calc(100% + 3px); z-index: 2; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--fx-err-fg); }
.fx-chip-list:has(.fx-chip-error) { padding-bottom: 18px; }
.fx-std-review-sum { margin: 4px 0 14px; font-family: var(--fx-mono); font-size: 11px; }
.fx-std-review { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr); gap: 24px; align-items: start; }
/* repo-style tree: one vertical line per depth, an elbow into each node, the last child closes the line */
.fx-rtree { font-size: var(--fx-fs-small); }
.fx-rtree-list { list-style: none; margin: 0; padding: 0; }
.fx-rtree-list .fx-rtree-list { padding-left: 18px; }
.fx-rtree-list li { position: relative; }
.fx-rtree-list .fx-rtree-list > li::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; border-left: 1px solid var(--fx-border-hair); }
.fx-rtree-list .fx-rtree-list > li:last-child::before { bottom: auto; height: 15px; }
.fx-rtree-list .fx-rtree-list > li > .fx-rtree-node::before { content: ""; position: absolute; left: -10px; top: 15px; width: 8px; border-top: 1px solid var(--fx-border-hair); }
.fx-rtree-node { position: relative; display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 3px 8px; border-radius: var(--fx-r-sm);
  cursor: default; transition: background var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease); }
.fx-rtree-node:focus-visible { outline: var(--fx-focus-outline); outline-offset: -2px; }
.fx-rtree-name { font-weight: 600; color: var(--fx-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-rtree-level { font-family: var(--fx-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fx-text-faint); }
.fx-rtree-node .fx-count, .fx-sd-card .fx-count { margin-left: auto; font-family: var(--fx-mono); font-size: 10.5px; color: var(--fx-text-muted);
  background: var(--fx-surface-sunken); border-radius: var(--fx-r-round); padding: 1px 7px; }
.fx-rtree-node--unsorted { margin-top: 8px; border-top: 1px solid var(--fx-border-hair); border-radius: 0; }
.fx-rtree-node.is-hot, .fx-sd-card.is-hot { background: var(--fx-accent-tint); }
.fx-rtree-node.is-hot .fx-rtree-name { color: var(--fx-accent-text); }
.fx-sdiagram { position: relative; overflow-x: auto; }
.fx-sd-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.fx-sd-edges path { fill: none; stroke: var(--fx-border-strong); stroke-width: 1; transition: stroke var(--fx-dur) var(--fx-ease); }
.fx-sd-edges path.is-hot { stroke: var(--fx-accent); stroke-width: 1.5; }
.fx-sd-cols { position: relative; display: flex; gap: 48px; align-items: flex-start; }
.fx-sd-col { display: flex; flex-direction: column; gap: 8px; min-width: 150px; flex: 1 1 0; }
.fx-sd-level { font-family: var(--fx-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-text-faint); margin-bottom: 2px; }
.fx-sd-card { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 8px 10px; background: var(--fx-surface);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); font-size: 12px; cursor: default;
  transition: border-color var(--fx-dur) var(--fx-ease), background var(--fx-dur) var(--fx-ease); }
.fx-sd-card b { font-weight: 700; color: var(--fx-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-sd-card.is-hot { border-color: var(--fx-accent); }
.fx-sd-card:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
.fx-sd-split { flex-basis: 100%; font-size: 11px; color: var(--fx-text-muted); }
@media (max-width: 900px) { .fx-std-review { grid-template-columns: 1fr; } }
/* D · cards open as a whole; one kebab (≤ 6 rows) with a Send submenu */
.fx-std-tile[data-std="card-open"] { cursor: pointer; }
.fx-std-tile[data-std="card-open"]:focus-visible { outline: var(--fx-focus-outline); outline-offset: 2px; }
.fx-std-tile:not(:has([data-std-menu]:not(.hidden))) { overflow: hidden; z-index: auto; }
.fx-std-titlerow { display: flex; align-items: flex-start; gap: 6px; }
.fx-std-titlerow h3 { flex: 1; min-width: 0; }
.fx-std-titlerow .tb-menu-wrap { margin: -4px -6px 0 auto; }
.fx-std-titlerow .tb-menu-wrap .tb-menu[data-std-menu] { top: calc(100% + 4px); bottom: auto; right: 0; left: auto; }
.fx-std-list tr[data-std="card-open"] { cursor: pointer; transition: background var(--fx-dur) var(--fx-ease); }
.fx-std-list tr[data-std="card-open"]:hover { background: var(--fx-surface-2); }
.fx-std-list tr[data-std="card-open"]:focus-visible { outline: var(--fx-focus-outline); outline-offset: -2px; }
.fx-submenu-wrap { position: relative; }
.menu-row.menu-row--sub { justify-content: space-between; }
.menu-row-chev { color: var(--fx-text-faint); font-size: 14px; line-height: 1; }
.tb-menu-wrap .fx-submenu-wrap > .tb-menu.fx-submenu { display: none; top: -5px; bottom: auto; left: 100%; right: auto; min-width: 150px; }
.tb-menu-wrap .fx-submenu-wrap.fx-submenu-wrap--left > .tb-menu.fx-submenu { left: auto; right: 100%; }
.fx-submenu-wrap:hover > .tb-menu.fx-submenu, .fx-submenu-wrap:focus-within > .tb-menu.fx-submenu,
.fx-submenu-wrap.is-open > .tb-menu.fx-submenu { display: block; }
.fx-submenu-wrap:hover > .menu-row--sub, .fx-submenu-wrap.is-open > .menu-row--sub { background: var(--fx-surface-sunken); }
/* E · library-wide search: magnifier inside the field, clear x */
.fx-search-wrap { position: relative; display: inline-flex; align-items: center; flex: 0 1 320px; min-width: 220px; }
.fx-search-wrap > svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--fx-text-faint); pointer-events: none; }
.fx-view .fx-search-wrap input.fx-search { flex: 1 1 auto; min-width: 0; width: 100%; padding-left: 32px; padding-right: 30px; }
.fx-search-wrap input.fx-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fx-search-clear { position: absolute; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: none; border-radius: var(--fx-r-round); background: transparent; color: var(--fx-text-faint); font-size: 15px; line-height: 1; cursor: pointer; }
.fx-search-clear:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-search-clear:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
/* F · motion and polish — every duration is a token, so reduced motion zeroes it */
.fx-progress { list-style: none; display: flex; max-width: 420px; margin: 0 0 20px; padding: 0; }
.fx-progress-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.fx-progress-step:last-child { flex: none; }
.fx-progress-dot { position: relative; z-index: 1; box-sizing: border-box; display: grid; place-items: center; width: 12px; height: 12px;
  border-radius: var(--fx-r-round); background: var(--fx-surface); border: 1px solid var(--fx-border-strong);
  transition: background var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease); }
.fx-progress-step--current .fx-progress-dot { border: 2px solid var(--fx-accent); }
.fx-progress-step--done .fx-progress-dot { background: var(--fx-accent); border-color: var(--fx-accent); }
.fx-progress-dot svg { width: 10px; height: 10px; fill: none; stroke: var(--fx-on-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-progress-label { font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--fx-text-faint); white-space: nowrap; }
.fx-progress-step--current .fx-progress-label { color: var(--fx-text); }
.fx-progress-step--done .fx-progress-label { color: var(--fx-text-2); }
.fx-progress-seg { position: absolute; top: 5px; left: 18px; right: 6px; height: 2px; border-radius: var(--fx-r-round); background: var(--fx-border-hair); overflow: hidden; }
.fx-progress-fill { display: block; height: 100%; background: var(--fx-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--fx-dur-slide) var(--fx-ease-slide); }
.fx-progress-fill.is-filled { transform: scaleX(1); }

@keyframes fx-pop-in { from { opacity: 0; transform: translateY(-2px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fx-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-2px) scale(.96); } }
@keyframes fx-pop-sub { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
.fx-pop-in { animation: fx-pop-in var(--fx-dur) var(--fx-ease) both; }
.fx-pop-out { animation: fx-pop-out var(--fx-dur-tick) var(--fx-ease) both; pointer-events: none; }
.fx-submenu-wrap:hover > .tb-menu.fx-submenu, .fx-submenu-wrap:focus-within > .tb-menu.fx-submenu,
.fx-submenu-wrap.is-open > .tb-menu.fx-submenu { animation: fx-pop-sub var(--fx-dur) var(--fx-ease) both; }
.fx-fade { animation: fx-fade-in var(--fx-dur) var(--fx-ease) both; }

.fx-seg { position: relative; }
.fx-seg-thumb { position: absolute; top: 0; left: 0; border-radius: var(--fx-r-sm); background: var(--fx-surface); box-shadow: var(--fx-shadow-thumb);
  pointer-events: none; transition: transform var(--fx-dur-slide) var(--fx-ease-slide), width var(--fx-dur-slide) var(--fx-ease-slide),
  height var(--fx-dur-slide) var(--fx-ease-slide), opacity var(--fx-dur) var(--fx-ease); }
.fx-seg--thumbed .fx-seg-btn { position: relative; z-index: 1; }
.fx-seg--thumbed .fx-seg-btn--active { background: transparent; box-shadow: none; }

.fx-std-tile { transition: border-color var(--fx-dur) var(--fx-ease); }
.fx-std-tile .fx-std-thumb { overflow: hidden; }
.fx-std-tile .fx-std-thumb img { transition: transform var(--fx-dur) var(--fx-ease); }
.fx-std-tile:hover .fx-std-thumb img { transform: scale(1.015); }
::view-transition-group(std-open) { animation-duration: var(--fx-dur-slow); animation-timing-function: var(--fx-ease-slide); }

@media (prefers-reduced-motion: reduce) {
  .fx-pop-in, .fx-pop-out, .fx-fade, .fx-submenu-wrap .tb-menu.fx-submenu { animation: none; }
  .fx-std-tile:hover .fx-std-thumb img { transform: none; }
}

/* Standards · collapsible folder trees (rail + Review) and brighter starting-point cards */
.fx-tw { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: var(--fx-r-xs);
  color: var(--fx-text-faint); cursor: pointer; transition: transform var(--fx-dur) var(--fx-ease), background var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease); }
.fx-tw svg { width: 10px; height: 10px; }
.fx-tw:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-tw--open { transform: rotate(90deg); }
.fx-tw--none { visibility: hidden; cursor: default; }
.fx-rail-lbl { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fx-rail-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-rtree-node .fx-tw { margin-right: -4px; }
.fx-rtree-list li.is-shut > .fx-rtree-list { display: none; }
.fx-tmpl-card { transition: border-color var(--fx-dur) var(--fx-ease), background var(--fx-dur) var(--fx-ease), box-shadow var(--fx-dur) var(--fx-ease), transform var(--fx-dur-tick) var(--fx-ease); }
.fx-tmpl-card:hover:not(.fx-tmpl-card--selected) { border-color: var(--fx-accent-tint-2); background: var(--fx-accent-tint); box-shadow: var(--fx-shadow-thumb); }
.fx-tmpl-card:hover:not(.fx-tmpl-card--selected) h4 { color: var(--fx-accent-text); }
.fx-tmpl-card:active { transform: scale(.99); }
.fx-tmpl-card--selected { border-color: var(--fx-accent); background: var(--fx-accent-tint); box-shadow: 0 0 0 1px var(--fx-accent); }
.fx-tmpl-card--selected h4 { color: var(--fx-accent-text); }
/* ===== v14 · Agent screen redesign + sidebar polish (2026-09-20) =====
   Appended last, same convention as "PASS 2" in styles.css: override
   without editing the earlier rules, so the diff stays reviewable. */

/* --- Sidebar: account row and collapse toggle carry no resting
       stroke; background appears only on hovering the control itself. */
.sidebar-account { border-color: transparent; background: transparent; }
.sidebar-account:hover { background: var(--fx-surface-sunken); border-color: transparent; }
.sidebar-toggle:hover { border-color: transparent; }
.sidebar.sidebar--collapsed .sidebar-toggle { background: transparent; border-color: transparent; }
/* Collapsed account row: avatar-only:kill the flex gap the (now
   zero-width) text/chevron were still opening, which pushed the
   avatar off-centre. */
.sidebar.sidebar--collapsed .sidebar-account { gap: 0; }

/* --- Agent composer: neutral edges, no brand-colour fill on chrome
       (accent stays reserved for focus/active/logo per the design
       system rule). --- */
.ag-composer:focus-within, .ag-composer:hover { border-color: var(--fx-border-strong); box-shadow: none; }
.ag-msg--user .ag-bubble { background: var(--fx-surface-2); }

/* Bar: + (left, checks integrations) ... mic, send (right). Icon-only,
   circular, minimal — no boxed buttons, no text label on Send. */
.ag-bar { justify-content: flex-start; }
.ag-bar-spacer { flex: 1; }
.ag-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; padding: 0;
  border-radius: var(--fx-r-round); border: 1px solid transparent;
  background: transparent; color: var(--fx-text-muted); cursor: pointer;
  transition: background var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease);
}
.ag-icon-btn svg { width: 16px; height: 16px; }
.ag-icon-btn:hover:not(:disabled) { background: var(--fx-surface-sunken); color: var(--fx-text); }
.ag-icon-btn:disabled { color: var(--fx-text-faint); cursor: not-allowed; }
.ag-send { background: var(--fx-text); color: var(--fx-canvas); border-color: var(--fx-text); }
.ag-send:hover:not(:disabled) { background: var(--fx-text); opacity: .82; color: var(--fx-canvas); }
.ag-send:disabled { background: var(--fx-surface-sunken); color: var(--fx-text-faint); border-color: transparent; }

/* --- Agent mark: a filled, brand-coloured halo — an alive presence dot,
       not a placeholder outline ring or an animated skeleton grid. */
.ag-mark { color: var(--fx-accent); flex-shrink: 0; }

/* --- Below-chat panels: integrations check, then Runs history —
       replaces the separate, unadapted "Runs" screen. No card: these
       sit directly on the tab's own background, no fill, no stroke.
       Only the chat composer above keeps a boxed look. */
.ag-panels { display: flex; flex-direction: column; gap: 28px; padding: 10px 0 32px; }
.ag-panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ag-panel-title { font-size: 12.5px; font-weight: 650; color: var(--fx-text); }
.ag-panel-link {
  margin-left: auto; background: none; border: 0; padding: 0; font: inherit;
  font-size: var(--fx-fs-small); color: var(--fx-accent-text); cursor: pointer;
}
.ag-panel-link:hover { text-decoration: underline; }
.ag-panel-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag-panel-body .app-chip svg { width: 12px; height: 12px; flex: none; }
.ag-panel-body .fx-tbl-wrap { width: 100%; border: 0; border-radius: 0; background: transparent; }
.ag-panel-body button.app-chip { appearance: none; -webkit-appearance: none; margin: 0; font: inherit; cursor: pointer; }
.ag-panel-body button.app-chip:hover { border-color: var(--fx-border-strong); }


/* ===== v14.1 · Agent + Integrations polish (2026-09-22) =====
   Appended last; overrides the v14 rules above without editing them.
   Tokens only. Category tints reuse the muted zone ramps:
   AI = zone-4, storage = zone-3, channels = zone-5, unavailable = zone-6. */

/* --- Agent mark: a stocked shelf, static at rest. Work in progress is
       shown by the processing pill (v14.2 block), never by this mark. */
.ag-mark { display: block; color: var(--fx-accent); flex-shrink: 0; }
.ag-mark .ag-fr { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ag-mark .ag-f { fill: currentColor; }

/* --- Hello: one centred block, mark on a quiet tile, three starters. */
.ag-hello { padding: clamp(28px, 8vh, 72px) 0 22px; text-align: center; }
.ag-hello-mark { width: 52px; height: 52px; margin: 0 auto; display: grid; place-items: center;
  border-radius: var(--fx-r-lg); background: var(--fx-surface); border: 1px solid var(--fx-border); }
.ag-hello h1 { margin: 16px 0 6px; font-size: clamp(24px, 2.4vw, 30px); font-weight: var(--fx-fw-display);
  letter-spacing: var(--fx-ls-display); line-height: var(--fx-lh-display); color: var(--fx-text); text-wrap: balance; }
.ag-hello p { max-width: 520px; margin: 0 auto; color: var(--fx-text-muted); font-size: var(--fx-fs-body); }
.ag-sugs { margin-top: 20px; }

/* --- Composer: mark + text on top, tools on a hairline-separated bar. */
.ag-composer { padding: 12px 12px 8px; }
.ag-cmp-top { display: flex; gap: 10px; align-items: flex-start; }
.ag-cmp-mark { padding-top: 3px; }
.ag-input { resize: none; min-height: 48px; font-size: 14.5px; line-height: 1.5; padding: 2px 0; }
.ag-bar { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fx-border-hair); }
.ag-icon-btn { width: 34px; height: 34px; }
.ag-mic { border-color: var(--fx-border); }
.ag-mic:hover:not(:disabled) { border-color: var(--fx-border-strong); }
.ag-send { background: var(--fx-cta-bg); border-color: var(--fx-cta-bg); color: var(--fx-cta-fg); }
.ag-send:hover:not(:disabled) { background: var(--fx-cta-hover); border-color: var(--fx-cta-hover); color: var(--fx-cta-fg); opacity: 1; }
.ag-src { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin: 0; font: inherit;
  font-size: var(--fx-fs-small); color: var(--fx-text-2); background: var(--fx-surface); border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-round); cursor: pointer; transition: border-color var(--fx-dur) var(--fx-ease); }
.ag-src:hover { border-color: var(--fx-border-strong); }
.ag-src .ico { width: 14px; height: 14px; color: var(--fx-text-faint); }
.ag-dot { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: var(--fx-r-round); background: var(--fx-border-strong); }
.ag-dot--ok { background: var(--fx-ok-solid); }
.ag-dot--warn { background: var(--fx-warn-solid); }
.ag-dot--err { background: var(--fx-err-solid); }

/* Recording lives inside the composer: dot, live waveform, timer. */
.ag-composer--rec .ag-rec { min-height: 48px; gap: 12px; color: var(--fx-text-2); }
.ag-wave { display: flex; align-items: center; gap: 2px; height: 26px; flex: 1; min-width: 0; overflow: hidden; }
.ag-wave i { display: block; width: 3px; flex: none; border-radius: var(--fx-r-round); background: var(--fx-accent);
  opacity: .8; transform-origin: center; animation: ag-wave var(--fx-dur-pulse) var(--fx-ease-settle) infinite; }
@keyframes ag-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.ag-rec-time { font-family: var(--fx-mono); font-size: var(--fx-fs-small); color: var(--fx-text-faint); font-variant-numeric: tabular-nums; }
.ag-rec-label { font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
@media (prefers-reduced-motion: reduce) { .ag-wave i { animation: none; } }

/* --- Connections strip under the chat. */
.ag-panel-note { font-size: var(--fx-fs-small); color: var(--fx-text-faint); }
.ag-conn-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; width: 100%; }
.ag-conn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0; font: inherit; text-align: left;
  background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); cursor: pointer;
  transition: border-color var(--fx-dur) var(--fx-ease); }
.ag-conn:hover { border-color: var(--fx-border-strong); }
.ag-conn-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-conn-name { font-size: 13px; font-weight: 650; color: var(--fx-text); }
.ag-conn-state { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fx-text-muted); }

/* --- Category tiles, shared by the strip and the Integrations screen. */
.ag-conn-ico, .fx-int-ico { flex: none; display: grid; place-items: center; border: 1px solid; }
.ag-conn-ico { width: 32px; height: 32px; border-radius: var(--fx-r-md); }
.ag-conn-ico svg { width: 16px; height: 16px; }
.fx-int-ico { width: 44px; height: 44px; border-radius: var(--fx-r-lg); }
.fx-int-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ag-conn-ico--ai, .fx-int-ico--ai { background: var(--fx-zone-4); border-color: var(--fx-zone-4-bd); color: var(--fx-zone-4-ink); }
.ag-conn-ico--storage, .fx-int-ico--storage { background: var(--fx-zone-3); border-color: var(--fx-zone-3-bd); color: var(--fx-zone-3-ink); }
.ag-conn-ico--channel, .fx-int-ico--channel { background: var(--fx-zone-5); border-color: var(--fx-zone-5-bd); color: var(--fx-zone-5-ink); }
.fx-int-ico--off { background: var(--fx-zone-6); border-color: var(--fx-zone-6-bd); color: var(--fx-text-faint); }

/* --- Integrations screen: solid cards; "needs setup" says exactly what. */
.fx-int-view { display: flex; flex-direction: column; gap: 28px; }
.fx-int-section .md-section-head { margin-bottom: 12px; }
.fx-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fx-int { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--fx-surface);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); }
.fx-int--off { background: var(--fx-surface-2); }
.fx-int--off .fx-int-name { color: var(--fx-text-muted); }
.fx-int-head { display: flex; gap: 12px; align-items: flex-start; }
.fx-int-head .app-chip { flex: none; }
.fx-int-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fx-int-name { font-size: var(--fx-fs-h2); font-weight: var(--fx-fw-h2); letter-spacing: var(--fx-ls-h2); color: var(--fx-text); }
.fx-int-desc { font-size: 13px; line-height: 1.45; color: var(--fx-text-muted); }
.fx-int-need { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px;
  background: var(--fx-warn-bg); border: 1px solid var(--fx-warn-bd); border-radius: var(--fx-r-md); }
.fx-int-need-label { font-size: var(--fx-fs-label); letter-spacing: var(--fx-ls-label); font-weight: var(--fx-fw-label);
  text-transform: uppercase; color: var(--fx-warn-fg); margin-right: 2px; }
.fx-int-need code { font-family: var(--fx-mono); font-size: 11px; color: var(--fx-warn-fg); background: var(--fx-surface);
  border: 1px solid var(--fx-warn-bd); border-radius: var(--fx-r-xs); padding: 2px 6px; }
.fx-int-code { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--fx-surface-2);
  border: 1px solid var(--fx-border-strong); border-radius: var(--fx-r-md); }
.fx-int-code .fx-int-need-label { color: var(--fx-text-faint); }
.fx-int-code-val { font-family: var(--fx-mono); font-size: 24px; font-weight: 600; letter-spacing: .14em; color: var(--fx-text); }
.fx-int-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
.fx-int-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--fx-border-hair); min-height: 32px; }
.fx-int-meta { flex: 1; min-width: 0; font-family: var(--fx-mono); font-size: 11px; color: var(--fx-text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-int-meta b { color: var(--fx-text-2); font-weight: 600; }

/* v14.1 · brief card: heading row + readable inputs */
.ag-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ag-card-title { font-size: var(--fx-fs-h3); font-weight: var(--fx-fw-h3); letter-spacing: var(--fx-ls-h3); color: var(--fx-text); }
input.ag-sel { height: var(--fx-h-control-sm); min-width: 160px; padding: 0 10px; font: inherit; font-size: var(--fx-fs-small);
  color: var(--fx-text); background: var(--fx-surface); border: 1px solid var(--fx-border-control); border-radius: var(--fx-r-btn); }
input.ag-sel:focus { outline: var(--fx-focus-outline); outline-offset: 1px; }

/* ===== v14.2 · Agent + Integrations on the design system (2026-09-23) =====
   Appended last. Tokens only. Rules: lines not shadows, nothing loops at
   rest, one processing pattern, stroke icons, one graphite primary. */

/* --- Icons: Phosphor Regular geometry via fxGlyph(); 14px in controls. */
.fx-glyph { width: 14px; height: 14px; flex: none; }
.ag-icon-btn .fx-glyph, .ag-src .fx-glyph { width: 14px; height: 14px; }
.ag-src .fx-glyph { color: var(--fx-text-faint); }
.ag-conn-ico .fx-glyph { width: 16px; height: 16px; }
.ag-voice { display: inline-flex; align-items: center; gap: 6px; color: var(--fx-text-2); }

/* --- Processing: 3x3 mark, emphasis chases clockwise (8 cells x 220ms),
       docked as an inline pill; the status line fades in where it stands. */
.fx-proc { display: inline-flex; align-items: center; gap: 10px; height: var(--fx-h-control); padding: 0 14px 0 10px;
  background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-r-round); max-width: 100%; }
.fx-proc-mark { display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px); gap: 2px; flex: none; }
.fx-proc-mark i { display: block; width: 4px; height: 4px; border-radius: 1px; background: var(--fx-surface-sunken); }
.fx-proc-mark i.r { animation: fx-chase var(--fx-dur-chase) steps(1) infinite; animation-delay: calc(var(--c) * var(--fx-dur-slow)); }
@keyframes fx-chase { 0% { background: var(--fx-accent); } 12.5%, 100% { background: var(--fx-surface-sunken); } }
.fx-proc-status { font-size: var(--fx-fs-small); color: var(--fx-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: fx-proc-in var(--fx-dur) var(--fx-ease); }
@keyframes fx-proc-in { from { opacity: 0; } to { opacity: 1; } }
.ag-bubble .fx-proc { border: 0; padding: 0; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .fx-proc-mark i.r { animation: none; }
  .fx-proc-mark i.r[style="--c:0"] { background: var(--fx-accent); }
  .fx-proc-status { animation: none; }
}

/* --- Steps: 40px rows; state = word + icon change + weight. */
.ag-step { min-height: var(--fx-h-row); }
.ag-step-mk .fx-glyph { width: 12px; height: 12px; }
.ag-step--run .ag-step-mk { border-color: transparent; }
.ag-step--run .ag-step-title { font-weight: 700; }
.ag-step--run .ag-step-meta { color: var(--fx-text-2); }
.ag-deliv { min-height: var(--fx-h-row); }
.ag-pg { padding: 12px; }
.ag-chk { min-height: var(--fx-h-control-sm); padding: 0 12px 0 8px; }

/* --- Lines, not shadows: chat cards sit in the flow. */
.ag-bubble.card, .ag-bubble.card:hover { box-shadow: none; }

/* --- One graphite primary: Send turns graphite only when there is text. */
.ag-send { background: var(--fx-surface); border-color: var(--fx-border-control); color: var(--fx-text-muted); }
.ag-send:hover:not(:disabled) { background: var(--fx-surface-sunken); border-color: var(--fx-border-control); color: var(--fx-text); opacity: 1; }
.ag-send.ag-send--ready { background: var(--fx-cta-bg); border-color: var(--fx-cta-bg); color: var(--fx-cta-fg); }
.ag-send.ag-send--ready:hover:not(:disabled) { background: var(--fx-cta-hover); border-color: var(--fx-cta-hover); color: var(--fx-cta-fg); }
.ag-send:disabled { background: var(--fx-surface-sunken); border-color: transparent; color: var(--fx-text-faint); }

/* --- Hover = colour only, press = scale, focus = 2px accent outline. */
.ag-icon-btn, .ag-src, .ag-conn, .ag-step-link, .ag-panel-link {
  transition: background var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease),
              color var(--fx-dur) var(--fx-ease), transform var(--fx-dur-tick) var(--fx-ease); }
.ag-icon-btn:active:not(:disabled), .ag-src:active, .ag-conn:active { transform: scale(var(--fx-press-scale)); transition-duration: var(--fx-dur-press); }
.ag-panel-link:hover { text-decoration: none; color: var(--fx-accent-hover); }
.ag-step-link:hover { color: var(--fx-accent-hover); }
.ag-icon-btn:focus-visible, .ag-src:focus-visible, .ag-conn:focus-visible, .ag-step-link:focus-visible,
.ag-panel-link:focus-visible, .ag-chk:focus-within { outline: var(--fx-focus-outline); outline-offset: 2px; }

/* --- Planogram: a facing whose image file is missing shows an outlined slot. */
.facing-missing { display: block; width: var(--facing-image-width, 40px); max-width: 100%; aspect-ratio: 3 / 4; margin: auto;
  border: 1px dashed var(--fx-border-control); border-radius: var(--fx-r-xs); background: var(--fx-surface-2); }

/* ===== v14.4 · Connectors: catalog, accounts, folders, connect flow (2026-09-23) =====
   Integrations reads as three lists (Connected, Sources, Delivery) plus AI
   services; a side sheet holds accounts, folders and the 3-step connect.
   Brand marks from /static/brand/<key>.svg sit in a neutral tile; until the
   file exists a monogram stands in. Tokens only. */

/* --- Brand tile */
.fx-logo { --logo: 28px; width: var(--logo); height: var(--logo); flex: none; display: grid; place-items: center; overflow: hidden;
  border-radius: calc(var(--logo) * .24); border: 1px solid var(--fx-border); background: var(--fx-surface-sunken);
  color: var(--fx-text-2); font-weight: 700; font-size: calc(var(--logo) * .44); line-height: 1; }
.fx-logo--img { background: var(--fx-surface); }
.fx-logo--img img { width: 72%; height: 72%; object-fit: contain; display: block; }
.fx-logo--glyph .fx-glyph { width: 50%; height: 50%; color: var(--fx-text-muted); }

/* --- Page */
.fx-integrations .app-topbar-actions { gap: 8px; }
.fx-search { display: inline-flex; align-items: center; gap: 6px; height: var(--fx-h-control); padding: 0 10px; min-width: 240px;
  background: var(--fx-surface); border: 1px solid var(--fx-border-control); border-radius: var(--fx-r-btn); color: var(--fx-text-faint); }
.fx-search:focus-within { outline: var(--fx-focus-outline); outline-offset: 1px; }
.fx-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fx-fs-small); color: var(--fx-text); width: 100%; }
.fx-int-view { max-width: 880px; gap: 32px; }
.fx-int-block-head { margin-bottom: 10px; }
.fx-int-block-head h2 { margin: 0; font-size: var(--fx-fs-h2); font-weight: var(--fx-fw-h2); letter-spacing: var(--fx-ls-h2); color: var(--fx-text);
  display: flex; align-items: center; gap: 8px; }
.fx-int-block-head p { margin: 3px 0 0; font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
.fx-int-note { margin: 0; font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
.fx-int-note--err { color: var(--fx-err-fg); }
.fx-list { border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); background: var(--fx-surface); overflow: hidden; }
.fx-conn-row, .fx-cat-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px; margin: 0;
  background: var(--fx-surface); border: 0; border-bottom: 1px solid var(--fx-border-hair); font: inherit; text-align: left; color: inherit; }
.fx-list > :last-child { border-bottom: 0; }
.fx-conn-row { cursor: pointer; transition: background var(--fx-dur) var(--fx-ease); }
.fx-conn-row:hover { background: var(--fx-surface-2); }
.fx-conn-row:focus-visible { outline: var(--fx-focus-outline); outline-offset: -2px; }
.fx-cat-row--soon .fx-logo { opacity: .6; }
.fx-cat-row--soon .fx-conn-name { color: var(--fx-text-2); }
.fx-conn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-conn-name { font-size: 13.5px; font-weight: 650; color: var(--fx-text); display: flex; align-items: center; gap: 6px; }
.fx-conn-vendor { font-weight: 500; font-size: var(--fx-fs-small); color: var(--fx-text-faint); }
.fx-conn-sub { font-size: 12px; color: var(--fx-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-conn-res { display: inline-flex; align-items: center; gap: 6px; max-width: 34%; font-size: 12px; color: var(--fx-text-2); }
.fx-conn-res span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-conn-res .fx-glyph { color: var(--fx-text-faint); }
.fx-conn-go { color: var(--fx-text-faint); display: inline-flex; }
.fx-status { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 600; color: var(--fx-text-muted); white-space: nowrap; }
.fx-status--ok { color: var(--fx-ok-fg); } .fx-status--warn { color: var(--fx-warn-fg); } .fx-status--err { color: var(--fx-err-fg); }
.fx-status--ok .fx-dot { background: var(--fx-ok-solid); } .fx-status--warn .fx-dot { background: var(--fx-warn-solid); }
.fx-status--err .fx-dot { background: var(--fx-err-solid); } .fx-status--dim .fx-dot { background: var(--fx-border-control); }
.fx-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid var(--fx-border); border-radius: var(--fx-r-xs);
  background: var(--fx-surface-sunken); font-family: var(--fx-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fx-text-faint); }

/* --- Side sheet (floats: the one place here with a shadow) */
.fx-sheet-scrim { position: fixed; inset: 0; z-index: 80; background: var(--fx-scrim-soft); }
.fx-sheet { position: fixed; z-index: 81; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); display: flex; flex-direction: column;
  background: var(--fx-surface); border-left: 1px solid var(--fx-border); box-shadow: var(--fx-shadow-pop); animation: fx-sheet-in var(--fx-dur-slow) var(--fx-ease-slide); }
@keyframes fx-sheet-in { from { transform: translateX(16px); opacity: 0; } }
.fx-sheet-head { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--fx-border-hair); }
.fx-sheet-title { font-size: var(--fx-fs-h2); font-weight: 700; color: var(--fx-text); }
.fx-sheet-body { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.fx-sheet-lead { margin: 0; font-size: 13px; color: var(--fx-text-2); }
.fx-sheet-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.fx-acct { border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); }
.fx-acct-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--fx-border-hair); }
.fx-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--fx-r-round);
  background: var(--fx-ink); color: var(--fx-on-ink); font-size: 12px; font-weight: 700; }
.fx-acct-body { padding: 6px 8px 8px; display: flex; flex-direction: column; }
.fx-acct-body > .fx-int-note { padding: 8px 6px; }
.fx-folder { display: flex; align-items: center; gap: 10px; min-height: var(--fx-h-row); padding: 6px; border-radius: var(--fx-r-sm); }
.fx-folder:hover { background: var(--fx-surface-2); }
.fx-folder > .fx-glyph { color: var(--fx-text-faint); }
.fx-folder-name { font-size: 13px; font-weight: 600; color: var(--fx-text); display: flex; align-items: center; gap: 6px; }
.fx-radio { width: 16px; height: 16px; flex: none; padding: 0; border-radius: var(--fx-r-round); border: 1.5px solid var(--fx-border-control); background: var(--fx-surface); cursor: pointer; }
.fx-radio[aria-checked="true"] { border: 5px solid var(--fx-accent); }
.fx-radio:disabled { cursor: default; }
.fx-radio:focus-visible { outline: var(--fx-focus-outline); outline-offset: 2px; }
.fx-add { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: var(--fx-h-control-sm); margin: 4px 6px 0; padding: 0 8px;
  border: 0; background: none; border-radius: var(--fx-r-btn); font: inherit; font-size: var(--fx-fs-small); font-weight: 600; color: var(--fx-text-2); cursor: pointer; }
.fx-add:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-need { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; font-size: var(--fx-fs-small); color: var(--fx-warn-fg);
  background: var(--fx-warn-bg); border: 1px solid var(--fx-warn-bd); border-radius: var(--fx-r-md); }
.fx-need-label { width: 100%; font-size: var(--fx-fs-label); letter-spacing: var(--fx-ls-label); font-weight: var(--fx-fw-label); text-transform: uppercase; }
.fx-need code { font-family: var(--fx-mono); font-size: 11px; background: var(--fx-surface); border: 1px solid var(--fx-warn-bd); border-radius: var(--fx-r-xs); padding: 2px 6px; }
.fx-perm { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: 12px; color: var(--fx-text-muted); }
.fx-perm .fx-glyph { margin-top: 1px; color: var(--fx-text-faint); }

/* --- Connect wizard */
.fx-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fx-steps li { flex: 1; display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 2px solid var(--fx-border-hair);
  font-size: 12px; font-weight: 600; color: var(--fx-text-faint); }
.fx-steps li span { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: var(--fx-r-round);
  border: 1px solid var(--fx-border-control); font-size: 10.5px; font-family: var(--fx-mono); }
.fx-steps li.now { color: var(--fx-text); border-bottom-color: var(--fx-accent); }
.fx-steps li.now span { border-color: var(--fx-accent); color: var(--fx-accent-text); }
.fx-steps li.done { color: var(--fx-text-2); }
.fx-steps li.done span { border-color: var(--fx-ok-bd); background: var(--fx-ok-bg); color: var(--fx-ok-solid); }
.fx-steps .fx-glyph { width: 11px; height: 11px; }
.fx-wz { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--fx-text-2); }
.fx-wz p { margin: 0; }
.fx-wz-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-wz-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.fx-code { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px;
  border: 1px solid var(--fx-border-strong); border-radius: var(--fx-r-md); background: var(--fx-surface-2); }
.fx-code-val { font-family: var(--fx-mono); font-size: 24px; font-weight: 600; letter-spacing: .16em; color: var(--fx-text); }
.fx-picker { border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); overflow: hidden; }
.fx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--fx-border-hair);
  background: var(--fx-surface-2); font-size: 12px; color: var(--fx-text-faint); }
.fx-crumb { border: 0; background: none; padding: 2px 4px; border-radius: var(--fx-r-xs); font: inherit; color: var(--fx-text-2); cursor: pointer; }
.fx-crumb:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-picker-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--fx-h-row); padding: 0 12px; border: 0;
  border-bottom: 1px solid var(--fx-border-hair); background: var(--fx-surface); font: inherit; font-size: 13px; color: var(--fx-text); text-align: left; cursor: pointer; }
.fx-picker-row:last-child { border-bottom: 0; }
.fx-picker-row:hover { background: var(--fx-surface-2); }
.fx-picker-row.is-selected { background: var(--fx-accent-tint); color: var(--fx-accent-text); font-weight: 600; }
.fx-picker-row .fx-glyph { color: var(--fx-text-faint); }
.fx-picker-row span:nth-of-type(1) { flex: 1; }
.fx-picker-empty { padding: 16px 12px; font-size: 12.5px; color: var(--fx-text-muted); }
.fx-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fx-checks li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.fx-checks li.ok { color: var(--fx-ok-fg); } .fx-checks li.warn { color: var(--fx-warn-fg); }
.fx-check-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fx-text-2); }

/* --- Agent: "+" menu, source chip, connection chips */
.ag-menu-anchor { position: relative; display: inline-flex; }
.ag-icon-btn.is-open { background: var(--fx-surface-sunken); color: var(--fx-text); }
.ag-menu { position: absolute; z-index: 40; left: 0; bottom: calc(100% + 8px); width: 300px; padding: 6px;
  background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); box-shadow: var(--fx-shadow-pop);
  animation: fx-proc-in var(--fx-dur) var(--fx-ease); }
.ag-menu-label { padding: 8px 8px 4px; font-family: var(--fx-mono); font-size: var(--fx-fs-label); letter-spacing: var(--fx-ls-label);
  font-weight: var(--fx-fw-label); text-transform: uppercase; color: var(--fx-text-faint); }
.ag-menu-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 4px 8px; border: 0; border-radius: var(--fx-r-sm);
  background: none; font: inherit; font-size: 13px; color: var(--fx-text); text-align: left; cursor: pointer; }
.ag-menu-row:hover { background: var(--fx-surface-sunken); }
.ag-menu-row:focus-visible { outline: var(--fx-focus-outline); outline-offset: -2px; }
.ag-menu-row > .fx-glyph { color: var(--fx-text-muted); }
.ag-menu-row > .fx-glyph:last-child { margin-left: auto; }
.ag-menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-menu-text span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-menu-sub { font-size: 11.5px; color: var(--fx-text-faint); }
.ag-menu-sep { height: 1px; margin: 6px 4px; background: var(--fx-border-hair); }
.ag-switch { position: relative; width: 30px; height: 18px; flex: none; border-radius: var(--fx-r-round); background: var(--fx-border-strong);
  transition: background var(--fx-dur) var(--fx-ease); }
.ag-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--fx-r-round); background: var(--fx-surface);
  transition: transform var(--fx-dur) var(--fx-ease); }
.ag-switch.is-on { background: var(--fx-cta-bg); }
.ag-switch.is-on i { transform: translateX(12px); }
.ag-switch.is-off { opacity: .45; }
.ag-src .fx-logo { border-radius: 4px; }
.ag-src--static { cursor: default; }
.ag-conn .fx-logo { border-radius: 6px; }
.ag-conn--off .ag-conn-name { color: var(--fx-text-2); }
@media (prefers-reduced-motion: reduce) { .fx-sheet, .ag-menu { animation: none; } .ag-switch, .ag-switch i { transition: none; } }
@media (max-width: 720px) { .fx-conn-res { display: none; } .fx-search { min-width: 0; } }
/* Ghost button (design system: transparent, muted label; for repeatable, low-stakes actions). */
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--fx-text-muted); }
.btn-ghost:not(:disabled):hover { background: var(--fx-surface-sunken); color: var(--fx-text); border-color: transparent; }

/* ===== v15 · sidebar chrome ===== */
/* Collapse toggle: never a stroke; hover/press fill one step darker than the old sunken grey. */
.sidebar-toggle,
.sidebar-toggle:hover,
.sidebar-toggle:active,
.sidebar.sidebar--collapsed .sidebar-toggle { border-color: transparent; }
.sidebar.sidebar--collapsed .sidebar-toggle { background: transparent; }
.sidebar-toggle:hover,
.sidebar.sidebar--collapsed .sidebar-header:hover .sidebar-toggle { background: var(--fx-surface-sunken); color: var(--fx-text); }
.sidebar-toggle:active,
.sidebar.sidebar--collapsed .sidebar-toggle:active { background: var(--fx-border); }
/* Account row: no stroke, no fill in any state; avatar sits on the
   footer icon column: Admin/Help/Settings icons centre at 31px = 12px + 6px pad + 13px; text starts with their labels at 50px. */
.sidebar-account,
.sidebar-account:hover,
.sidebar-account:active,
.sidebar.sidebar--collapsed .sidebar-account { border: 0; background: transparent; box-shadow: none; }
.sidebar-account { padding: 4px 6px; gap: 6px; margin-top: 4px; }
.sidebar-account:hover .sidebar-account-org { color: var(--fx-text); }
.sidebar.sidebar--collapsed .sidebar-account { padding-inline: 0; justify-content: center; gap: 0; }

/* ===== v16 · campaigns ===== */
/* Standards: campaign folders, the approval status line, the Owner tick, bulk approve.
   Tokens only. Purple marks selection, never a fill; peach marks the campaign. */
.fx-camp-dot { width: 6px; height: 6px; border-radius: var(--fx-r-round); background: var(--fx-data-emphasis); flex: none; }

/* One status line per card: a dot and a word, then the exception. */
.fx-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--fx-text-2); white-space: nowrap; }
.fx-st .fx-dot { width: 7px; height: 7px; color: var(--fx-border-strong); }
.fx-st--ok .fx-dot { color: var(--fx-ok-solid); }
.fx-st--warn .fx-dot { color: var(--fx-warn-solid); }
.fx-st-ex { font-size: 12px; font-weight: 600; white-space: nowrap; }
.fx-st-ex--warn { color: var(--fx-warn-fg); }
.fx-st-ex--err { color: var(--fx-err-fg); }
.fx-st-row { display: inline-flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.fx-std-appr { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; min-height: 36px; border-top: 1px solid var(--fx-border-hair); }
.fx-std-list .fx-st-row { flex-wrap: nowrap; }

/* Owner tick: dashed while blocked, solid when the planogram can be approved. */
.fx-ack svg, .fx-selbox svg, .fx-bulk svg, .fx-lock-note svg, .fx-disc svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.fx-ack { width: 28px; height: 28px; padding: 0; flex: none; display: inline-grid; place-items: center; border-radius: var(--fx-r-round);
  border: 1.5px dashed var(--fx-border-control); background: var(--fx-surface); color: var(--fx-text-faint); cursor: pointer;
  transition: border-color var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease), background var(--fx-dur) var(--fx-ease); }
.fx-ack svg { width: 15px; height: 15px; stroke-width: 2.2; }
.fx-ack--ready { border-style: solid; }
.fx-ack--ready:hover { border-color: var(--fx-ok-solid); color: var(--fx-ok-solid); background: var(--fx-ok-bg); }
.fx-ack:disabled { cursor: not-allowed; opacity: .6; }
.fx-ack:focus-visible, .fx-selbox:focus-visible, .fx-disc:focus-visible { outline: var(--fx-focus-outline); outline-offset: 2px; }

/* Select box and MASTER tag sit on the thumbnail. */
.fx-std-thumb .fx-std-status { align-items: center; }
.fx-selbox { width: 22px; height: 22px; padding: 0; display: inline-grid; place-items: center; border: 1px solid var(--fx-border-control);
  border-radius: var(--fx-r-xs); background: var(--fx-surface); color: var(--fx-cta-fg); box-shadow: var(--fx-shadow-thumb); cursor: pointer; }
.fx-selbox svg { width: 13px; height: 13px; stroke-width: 2.4; }
.fx-selbox--on { background: var(--fx-cta-bg); border-color: var(--fx-cta-bg); }
.fx-std-tile[data-picked="true"] { border-color: var(--fx-accent); box-shadow: var(--fx-focus-ring); }
.fx-master-tag { font: 600 9.5px var(--fx-mono); letter-spacing: .1em; padding: 3px 6px; border-radius: var(--fx-r-xs); background: var(--fx-cta-bg); color: var(--fx-cta-fg); }

/* Kebab: a locked Send row stays in place and says why. */
.fx-standards .menu-row:disabled { opacity: .45; cursor: not-allowed; }
.fx-standards .menu-row:disabled:hover { background: none; }
.fx-menu-note { margin: 6px 10px 4px; font-size: 11.5px; line-height: 1.4; color: var(--fx-text-muted); max-width: 220px; white-space: normal; }

/* Campaign folder header: title, period, rules disclosure, progress, one primary action. */
.fx-camp { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; margin-bottom: 14px; border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-lg); background: var(--fx-surface); }
.fx-camp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.fx-camp-title { min-width: 0; }
.fx-camp .fx-section-label { margin: 0; }
.fx-camp h2 { margin: 4px 0; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.fx-camp-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--fx-text-muted); }
.fx-camp-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-lock-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fx-text-muted); }
.fx-lock-note svg { width: 13px; height: 13px; stroke-width: 1.6; }
.fx-disc { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: 600 12.5px var(--fx-font);
  color: var(--fx-text-2); cursor: pointer; text-align: left; }
.fx-disc:hover { color: var(--fx-text); }
.fx-disc .fx-faint { font-weight: 500; }
.fx-disc-caret { width: 13px; height: 13px; stroke-width: 1.8; flex: none; transition: transform var(--fx-dur) var(--fx-ease); }
.fx-disc[aria-expanded="true"] .fx-disc-caret { transform: rotate(180deg); }
.fx-camp-prog { display: flex; align-items: center; gap: 12px; }
.fx-camp-prog .fx-mono { font-size: 12px; color: var(--fx-text-muted); white-space: nowrap; }
.fx-pbar { flex: 1; display: flex; height: 6px; min-width: 80px; border-radius: var(--fx-r-round); overflow: hidden; background: var(--fx-surface-sunken); }
.fx-pbar i { display: block; height: 100%; transition: width var(--fx-dur-slide) var(--fx-ease-settle); }
.fx-pbar-ok { background: var(--fx-ok-solid); }
.fx-pbar-warn { background: var(--fx-warn-solid); }
.fx-camp-rules { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--fx-border-hair); }
.fx-camp-skus, .fx-rule-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fx-rule-line .fx-note { margin: 0; }
.fx-sku-pill { display: inline-flex; flex-direction: column; min-width: 0; padding: 5px 12px; border: 1px solid var(--fx-data-emphasis-bd);
  border-radius: var(--fx-r-md); background: var(--fx-data-emphasis-surface); }
.fx-sku-pill b { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.fx-sku-pill .fx-mono { font-size: 10.5px; color: var(--fx-text-muted); }
.app-chip--data { background: var(--fx-data-emphasis-tint); border-color: var(--fx-data-emphasis-bd); color: var(--fx-text); }
.fx-camp + .fx-empty b, .fx-bulk + .fx-empty b { color: var(--fx-text); }

/* Bulk bar: appears while awaiting planograms are ticked. */
.fx-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 14px; border-radius: var(--fx-r-md);
  background: var(--fx-cta-bg); color: var(--fx-cta-fg); }
.fx-bulk-n { font: 600 12.5px var(--fx-mono); margin-right: 4px; }
.fx-bulk-why { font-size: 11.5px; color: color-mix(in srgb, var(--fx-cta-fg) 75%, transparent); }
.fx-bulk svg { width: 14px; height: 14px; stroke-width: 2.2; }
.fx-bulk .tb-btn { height: 28px; background: color-mix(in srgb, var(--fx-cta-fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--fx-cta-fg) 22%, transparent); color: var(--fx-cta-fg); }
.fx-bulk .tb-btn:hover { background: color-mix(in srgb, var(--fx-cta-fg) 16%, transparent); }
.fx-bulk .tb-btn:disabled { opacity: .4; }
.fx-bulk .fx-bulk-ok { background: var(--fx-ok-solid); border-color: var(--fx-ok-solid); }
.fx-bulk .fx-bulk-ok:hover { background: var(--fx-ok-fg); border-color: var(--fx-ok-fg); }
.fx-bulk .tb-btn--ghost { margin-left: auto; border-color: transparent; background: none; }
@media (max-width: 900px) { .fx-camp-prog { flex-wrap: wrap; } .fx-camp-prog .fx-mono { white-space: normal; } }

/* Multiply wizard: Rules → Targets → Dry run → Build. */
.fx-mul-dialog { width: min(1080px, 94vw); max-height: 92vh; padding: 20px 22px; overflow: auto; }
.fx-mul-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.fx-mul-head .fx-section-label { margin: 0; }
.fx-mul-head h2 { margin: 2px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.fx-mul-progress { max-width: 520px; }
.fx-mul-body { display: flex; flex-direction: column; gap: 12px; min-height: 260px; }
.fx-mul-body .fx-note { margin: 0; }
.fx-mul-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.fx-mul-grid--tight { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fx-mul-switch { margin: 2px 0; }
.fx-mul-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-mul-bar .tb-btn { height: 28px; font-size: 12.5px; }
.fx-mul-list { max-height: 46vh; overflow: auto; }
.fx-mul-list th { position: sticky; top: 0; z-index: 1; }
.fx-mul-list input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--fx-cta-bg); }
.fx-mul-layout { height: 28px; padding: 0 8px; font-size: 12.5px; width: auto; }
.fx-mul-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-mul-add .fx-note { flex: 1 1 260px; }
.fx-mul-add .fx-input { width: 110px; }
.fx-mul-controls { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fx-mul-controls .fx-camp-field { min-width: 130px; }
.fx-mul-controls .fx-camp-field:first-child { flex: 1 1 260px; }
.fx-mul-controls .fx-input { width: 110px; }
.fx-mul-counts { display: inline-flex; gap: 14px; margin-left: auto; padding-bottom: 6px; }
.fx-mul-table .app-chip { margin-left: 6px; }
.fx-mul-table td.fx-mono { white-space: nowrap; }
.fx-st--err .fx-dot { color: var(--fx-err-solid); }
.fx-mul-reason { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--fx-text-muted); max-width: 320px; white-space: normal; }
.fx-mul-fix { margin-top: 6px; height: 26px; font-size: 12px; }
.fx-mul-row[data-status="blocked"] td { background: var(--fx-surface-2); }
.fx-mul-row--open .fx-disc-caret { transform: rotate(180deg); }
.fx-mul-row .fx-disc-caret { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.fx-mul-detail td { background: var(--fx-surface-2); }
.fx-mul-detail > td { display: table-cell; }
.fx-mul-detail > td > * + * { margin-top: 12px; }
.fx-mul-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fx-mul-thumbs figure { margin: 0; }
.fx-mul-thumbs figcaption { margin-bottom: 6px; font: 600 10.5px var(--fx-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fx-text-faint); }
.fx-mul-thumbs img, .fx-mul-thumbs .fx-std-noimg { width: 100%; height: 150px; object-fit: contain; display: grid; border: 1px solid var(--fx-border-hair); border-radius: var(--fx-r-md); background: var(--fx-surface); }
.fx-mul-trims { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--fx-text-2); }
.fx-mul-done h3 { margin: 12px 0 4px; font-size: 18px; letter-spacing: -.02em; }
.fx-mul-foot { align-items: center; margin-top: 16px; }
.fx-mul-wide { grid-column: 1 / -1; }
.fx-camp-cta .tb-btn { height: 30px; font-size: 12.5px; }
@media (max-width: 900px) { .fx-mul-grid, .fx-mul-grid--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-mul-thumbs { grid-template-columns: minmax(0, 1fr); } .fx-mul-counts { margin-left: 0; } }

/* Admin › Approvals: planograms awaiting the Owner tick, one group per folder. */
.fx-approval-group { margin-top: 14px; }
.fx-approval-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fx-approval-group-head h3 { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.015em; }
.fx-approval-group-head .btn { margin-left: auto; }
.fx-approval-errors { margin: 8px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--fx-err-fg); }

/* Settings: a category the current demo client has no access to. */
.fx-settings-option--off { opacity: .55; cursor: not-allowed; }

/* ===== v17 · accounts ===== */
/* Tokens only. Staff dock and console: rendered only when the server runs with FRAIMORA_STAFF=1. */
.fx-staff-dock { position: fixed; left: 50%; bottom: var(--fx-space-4); transform: translateX(-50%); z-index: var(--fx-z-popover);
  display: flex; align-items: center; gap: var(--fx-space-3); padding: var(--fx-space-2) var(--fx-space-3);
  background: var(--fx-surface); border: 1px solid var(--fx-border-control); border-radius: 12px; box-shadow: var(--fx-shadow-pop);
  font-size: 12px; color: var(--fx-text); white-space: nowrap; max-width: calc(100vw - 32px); overflow-x: auto; }
.fx-staff-dock[hidden] { display: none; }
.fx-staff-dock label { display: flex; align-items: center; gap: var(--fx-space-2); color: var(--fx-text-muted); }
.fx-staff-dock select { border: 1px solid var(--fx-border-control); border-radius: 8px; background: var(--fx-surface); color: var(--fx-text); padding: 4px 8px; font: inherit; }
.fx-staff-dock select:disabled { background: var(--fx-surface-sunken); color: var(--fx-text-muted); }
.fx-staff-label { color: var(--fx-text-muted); }
.fx-staff-close { border: 0; background: transparent; color: var(--fx-text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.fx-staff-close:hover { color: var(--fx-text); }
.fx-staff-console .fx-view { display: flex; flex-direction: column; gap: var(--fx-space-4); }
.fx-staff-console .fx-settings-grid { margin: 0; }
.fx-staff-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-4); margin: var(--fx-space-4) 0; }
.fx-staff-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fx-staff-field > span { font-weight: 600; }
.fx-staff-field small { color: var(--fx-text-muted); }
.fx-staff-field .fx-input, .fx-staff-console .fx-tbl .fx-input { max-width: none; width: 100%; }
@media (max-width: 900px) { .fx-staff-form { grid-template-columns: 1fr; } }

/* v17 · Team account: one page. Profile | approvals, members | rules (accordion), activity. */
.fx-acct-page { display: flex; flex-direction: column; gap: var(--fx-space-5); }
.fx-acct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-5); align-items: stretch; }
.fx-acct-row--loose { align-items: start; }
.fx-acct-block { border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); background: var(--fx-surface); padding: var(--fx-space-5); min-width: 0; }
.fx-acct-block > .fx-section-label:first-child { margin-top: 0; }
.fx-acct-block .fx-acctcard { border: 0; padding: 0; margin-bottom: var(--fx-space-4); }
.fx-acct-block .fx-plancard { background: var(--fx-surface-sunken); border: 0; }
.fx-acct-cats { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fx-space-2); margin-top: var(--fx-space-3); font-size: 12px; }
/* Approvals take the height of the profile block next to them; the list scrolls inside. */
.fx-acct-row--top > [data-block="approvals"] { display: flex; flex-direction: column; height: 0; min-height: 100%; }
.fx-acct-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: calc(var(--fx-space-2) * -1); padding-right: var(--fx-space-2); }
.fx-acct-scroll .fx-empty { height: 100%; display: flex; align-items: center; justify-content: center; }
.fx-acct-scroll .fx-approval-list { gap: 0; }
.fx-acct-scroll .fx-approval-item { border: 0; border-top: 1px solid var(--fx-border); border-radius: 0; background: transparent; padding: var(--fx-space-3) 0; }
.fx-acct-scroll .fx-approval-list > .fx-approval-item:first-child { border-top: 0; padding-top: 0; }
.fx-acct-scroll .fx-approval-group { margin-top: var(--fx-space-3); }
.fx-acct-scroll > .fx-section-label { margin-top: var(--fx-space-4); }
.fx-acct-scroll > .fx-section-label:first-child { margin-top: 0; }
/* Accordion blocks */
.fx-acct-fold { display: flex; flex-direction: column; }
.fx-acct-fold-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-3); width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fx-acct-fold-head .fx-section-label { margin: 0; }
.fx-acct-fold-head:focus-visible { outline: var(--fx-focus-outline); outline-offset: 4px; border-radius: var(--fx-r-md); }
.fx-acct-fold-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--fx-text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fx-dur) var(--fx-ease); }
.fx-acct-fold--closed .fx-acct-fold-chev { transform: rotate(-90deg); }
.fx-acct-fold-body { margin-top: var(--fx-space-4); display: flex; flex-direction: column; flex: 1 1 auto; }
.fx-acct-fold-body .fx-invite-row { margin-top: 0; }
.fx-acct-fold-body .fx-note { margin-top: auto; padding-top: var(--fx-space-3); }
.fx-who-cell small { display: block; font-size: 11px; }
.fx-rules { display: flex; flex-direction: column; }
.fx-rule { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-4); padding: var(--fx-space-3) 0; border-top: 1px solid var(--fx-border); }
.fx-rule:first-child { border-top: 0; padding-top: 0; }
.fx-rule b { display: block; font-size: 13px; font-weight: 600; }
.fx-rule span:not(.app-chip):not(.fx-switch) { font-size: 12px; color: var(--fx-text-muted); }
.fx-rule--fixed b { font-weight: 500; }
/* Activity: one row of filters in the house controls, one aligned pager row */
.fx-acct-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fx-space-3); margin: var(--fx-space-3) 0 var(--fx-space-4); }
.fx-client-admin .fx-acct-search { position: relative; flex: 1 1 260px; max-width: 360px; display: flex; flex-direction: row; align-items: center; margin: 0; }
.fx-acct-search svg { position: absolute; left: 10px; width: 15px; height: 15px; fill: none; stroke: var(--fx-text-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.fx-client-admin .fx-acct-search input.fx-search { width: 100%; height: 36px; padding-left: 32px; margin-left: 0; }
.fx-client-admin .fx-acct-filters .fxp-trigger, .fx-client-admin .fx-pager .fxp-trigger { height: 36px; font-family: inherit; font-size: 13px; }
.fx-client-admin .fx-acct-filters .fxp { width: auto; flex: 0 0 auto; min-width: 160px; }
.fx-client-admin .fx-pager .fxp { width: auto; flex: 0 0 auto; min-width: 76px; }
.fx-client-admin input.fx-acct-date { height: 36px; padding: 0 10px; font: inherit; font-size: 13px; }
.fx-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-4); margin-top: var(--fx-space-4); }
.fx-pager-count { font-family: var(--fx-mono); font-size: 12px; color: var(--fx-text-muted); }
.fx-pager-controls { display: flex; align-items: center; gap: var(--fx-space-2); }
.fx-pager-controls .btn { height: 36px; }
.fx-pager-label { font-size: 12px; color: var(--fx-text-muted); }
/* Account popover and the avatar in the sidebar */
.fx-menu-label { padding: 6px 12px 2px; font-size: 11px; color: var(--fx-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.menu-row--checked { font-weight: 600; }
.menu-row--checked::after { content: "✓"; margin-left: auto; color: var(--fx-accent); }
.sidebar-account-menu .menu-row[hidden] { display: none; }
.sidebar-account-menu .menu-row .fx-nav-badge { margin-left: auto; }
.sidebar-account { position: relative; }
/* Pending approvals: a red dot on the avatar, no number. */
.fx-avatar-badge { position: absolute; top: 4px; left: 25px; width: 10px; height: 10px; border-radius: 50%; box-sizing: content-box;
  background: var(--fx-err-solid); border: 2px solid var(--fx-surface); pointer-events: none; }
.sidebar.sidebar--collapsed .fx-avatar-badge { left: auto; right: 4px; }
@media (max-width: 1100px) {
  .fx-acct-row { grid-template-columns: 1fr; }
  .fx-acct-row--top > [data-block="approvals"] { height: auto; min-height: 0; }
  .fx-acct-scroll { max-height: 420px; }
}
/* v17 · Settings: My profile */
.fx-settings-profile { display: flex; align-items: center; gap: var(--fx-space-4); }
.fx-settings-profile > div { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.fx-settings-profile b { font-size: 14px; font-weight: 600; }
.fx-settings-profile .fx-mono { font-size: 12px; color: var(--fx-text-muted); }
.fx-settings-card .fx-settings-card-head { gap: var(--fx-space-3); }
/* v17 · Team account: the approvals block while something waits, and icon buttons on its rows. */
.fx-acct-block--alert { border-color: var(--fx-err-bd); background: var(--fx-err-bg); }
.fx-acct-block--alert > .fx-section-label { color: var(--fx-err-fg); }
.fx-acct-block--alert > .fx-section-label .fx-count { background: var(--fx-err-solid); color: var(--fx-surface); border-radius: 10px; padding: 1px 8px; font-weight: 700; }
.fx-acct-block--alert .fx-approval-item { border-top-color: var(--fx-err-bd); }
.fx-acct-scroll .fx-approval-actions { gap: var(--fx-space-2); flex-wrap: nowrap; }
.fx-acct-scroll .fx-approval-actions .btn, .fx-acct-scroll .fx-approval-group-head .btn { gap: 6px; padding-inline: 10px; white-space: nowrap; }
.fx-acct-scroll [data-console="plano-open"]::before, .fx-acct-scroll [data-console="plano-approve"]::before,
.fx-acct-scroll [data-console="plano-approve-all"]::before, .fx-acct-scroll [data-console="decision"]::before,
.fx-acct-scroll [data-console="team"]::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--fx-acct-icon) center / contain no-repeat; mask: var(--fx-acct-icon) center / contain no-repeat; }
.fx-acct-scroll [data-console="plano-open"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.fx-acct-scroll [data-console="plano-approve"], .fx-acct-scroll [data-decision="approve"], .fx-acct-scroll [data-action="approve"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.fx-acct-scroll [data-console="plano-approve-all"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 12.5 4 4 8-9'/%3E%3Cpath d='m12 16.5 1 1 9-10'/%3E%3C/svg%3E"); }
.fx-acct-scroll [data-decision="reject"], .fx-acct-scroll [data-action="reject"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
/* v17 · Help */
.fx-help-page { display: flex; flex-direction: column; gap: var(--fx-space-5); max-width: 980px; }
.fx-help-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fx-space-3); }
.fx-help .fx-acct-search { position: relative; flex: 1 1 260px; max-width: 360px; display: flex; align-items: center; margin: 0; }
.fx-help .fx-acct-search input.fx-search { width: 100%; height: 36px; padding-left: 32px; margin-left: 0; }
.fx-help-toc { display: flex; flex-wrap: wrap; gap: var(--fx-space-1); }
.fx-help-section[hidden], .fx-help-item[hidden] { display: none; }
.fx-help-section > .fx-section-label { margin-top: 0; }
.fx-help-note { font-size: 13px; color: var(--fx-text-muted); margin: 0 0 var(--fx-space-3); }
.fx-help-item > .fx-help-note { margin-bottom: 0; color: var(--fx-text); }
.fx-help-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--fx-space-4); }
.fx-help-steps li { display: flex; gap: var(--fx-space-3); align-items: flex-start; }
.fx-help-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fx-mono); font-size: 12px; font-weight: 700; background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-help-steps b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.fx-help-steps p, .fx-help-faq p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fx-text-muted); }
.fx-help-faq details { border-top: 1px solid var(--fx-border); padding: var(--fx-space-3) 0; }
.fx-help-faq details:first-child { border-top: 0; padding-top: 0; }
.fx-help-faq summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.fx-help-faq summary:focus-visible { outline: var(--fx-focus-outline); outline-offset: 2px; }
.fx-help-faq details p { margin-top: var(--fx-space-2); max-width: 760px; }
.fx-help-glossary { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--fx-space-3) var(--fx-space-5); }
.fx-help-glossary dt { font-size: 13px; font-weight: 600; }
.fx-help-glossary dd { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--fx-text-muted); }
/* v17 · Team account: the members table fits its half-width block without a scrollbar. */
.fx-acct-fold-body .fx-tbl th, .fx-acct-fold-body .fx-tbl td { padding-inline: 8px; }
.fx-acct-fold-body .fx-tbl td:last-child { width: 1%; }
.fx-acct-fold-body .fx-row-actions { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.fx-acct-fold-body .fx-row-actions .btn { padding-inline: 8px; white-space: nowrap; }
.fx-acct-fold-body .fx-who-cell { min-width: 0; }
.fx-acct-fold-body .fx-who-cell small { overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
/* v17 · staff console: Engine tab (concept) */
.fx-engine-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--fx-space-4); align-items: start; }
.fx-engine-side { display: flex; flex-direction: column; gap: var(--fx-space-4); position: sticky; top: var(--fx-space-4); }
.fx-engine-group + .fx-engine-group { margin-top: var(--fx-space-5); }
.fx-engine-group > .fx-section-label { margin-top: 0; }
.fx-engine-knob { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-4); padding: var(--fx-space-3) 0; border-top: 1px solid var(--fx-border); }
.fx-engine-knob-text b { display: block; font-size: 13px; font-weight: 600; }
.fx-engine-knob-text span { font-size: 12px; color: var(--fx-text-muted); }
.fx-engine-knob-control { display: flex; align-items: center; gap: var(--fx-space-2); flex: none; }
.fx-engine-knob-control input.fx-input[type="number"] { width: 92px; }
.fx-engine-knob-control input.fx-input[type="text"] { width: 240px; }
.fx-engine-knob--changed { background: var(--fx-surface-sunken); margin-inline: calc(var(--fx-space-3) * -1); padding-inline: var(--fx-space-3); border-radius: var(--fx-r-md); }
.fx-engine-knob--changed .fx-engine-knob-text b::after { content: " · changed"; font-weight: 500; color: var(--fx-warn-fg); }
.fx-engine-knob--locked .fx-engine-knob-text b { font-weight: 500; }
.fx-engine-fixed { font-size: 12px; color: var(--fx-text-muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-engine-metrics { display: grid; grid-template-columns: 1fr; gap: var(--fx-space-2); margin-top: var(--fx-space-3); }
.fx-engine-metrics div { display: flex; justify-content: space-between; font-size: 12px; color: var(--fx-text-muted); border-top: 1px solid var(--fx-border); padding-top: var(--fx-space-2); }
.fx-engine-json { margin: 0 0 var(--fx-space-3); padding: var(--fx-space-3); background: var(--fx-surface-sunken); border-radius: var(--fx-r-md); font-size: 12px; max-height: 240px; overflow: auto; white-space: pre-wrap; }
.fx-staff-console .fx-settings-card-head h2 .app-chip { margin-left: var(--fx-space-2); vertical-align: middle; }
@media (max-width: 1100px) { .fx-engine-cols { grid-template-columns: 1fr; } .fx-engine-side { position: static; } }

/* ===== v18 · client ===== */
/* Rules for this block (tests/test_design_guard_v18.py): colours, type sizes, radii, shadows and
   durations come from tokens.css only; spacing is a token or a multiple of 4px; no !important. */

/* Category switch under the logo (fx/client.js categoryRows). */
.sidebar-category { padding: var(--fx-space-2) var(--fx-space-3) var(--fx-space-1); }
.sidebar-category[hidden] { display: none; }
.sidebar-category-label { margin: 0 0 var(--fx-space-1); }
.sidebar-category-seg { display: flex; width: 100%; }
.sidebar-category-seg .fx-seg-btn { flex: 1; justify-content: center; }
.sidebar.sidebar--collapsed .sidebar-category { display: none; }

/* Sign-in, invitation and reset card (fx/auth.js). */
.fx-signin.auth-card { display: flex; flex-direction: column; gap: var(--fx-space-3); max-width: 400px; padding: var(--fx-space-6);
  text-align: left; background: var(--fx-surface); border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); box-shadow: none; }
.fx-signin-logo { width: 132px; height: auto; margin-bottom: var(--fx-space-4); }
.fx-signin-tagline { font-size: var(--fx-fs-small); color: var(--fx-text-muted); margin-bottom: var(--fx-space-4); }
.fx-signin-title { margin: 0; font-size: var(--fx-fs-h1); font-weight: var(--fx-fw-h1); line-height: var(--fx-lh-h1); letter-spacing: var(--fx-ls-h1); color: var(--fx-text); }
.fx-signin-note { margin: 0; font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-signin-form { display: flex; flex-direction: column; gap: var(--fx-space-3); margin-top: var(--fx-space-2); }
.fx-signin-field { display: flex; flex-direction: column; gap: var(--fx-space-1); font-size: var(--fx-fs-small); font-weight: 600; color: var(--fx-text-2); }
.fx-signin-field .fx-input[readonly] { background: var(--fx-surface-2); color: var(--fx-text-muted); }
.fx-signin-hint { margin: 0; font-family: var(--fx-mono); font-size: var(--fx-fs-label); color: var(--fx-text-faint); }
.fx-signin-error { margin: 0; font-size: var(--fx-fs-small); color: var(--fx-err-fg); }
.fx-signin-error:empty { display: none; }
.fx-signin-foot { margin: var(--fx-space-2) 0 0; font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
.sidebar-category .fxp--auto, .sidebar-category-select { width: 100%; }

/* Team account (fx/console.js): members on levels 1–3, invitation links, the level matrix. */
.fx-acct-row--full { grid-template-columns: minmax(0, 1fr); }
.fx-acct-row--levels { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.fx-client-admin .fx-invite-row .fxp--auto { min-width: 204px; }
.fx-team-row--off td { color: var(--fx-text-muted); }
.fx-team-row--off .fx-who-avatar { opacity: .5; }
.fx-team-you { margin-left: var(--fx-space-1); font-family: var(--fx-mono); font-size: var(--fx-fs-label); letter-spacing: var(--fx-ls-label);
  text-transform: uppercase; color: var(--fx-text-faint); }
.fx-team-status { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--fx-space-1); }
.fx-team-sub { font-family: var(--fx-mono); font-size: var(--fx-fs-label); color: var(--fx-text-faint); white-space: nowrap; }
.fx-team-when { font-size: var(--fx-fs-small); color: var(--fx-text-2); white-space: nowrap; }
.fx-client-admin .fx-team-row .fxp--auto { width: 212px; min-width: 0; }
.fx-client-admin .fx-team-row .fxp-trigger { min-height: var(--fx-h-control-sm); height: var(--fx-h-control-sm); padding-block: 0; font-size: var(--fx-fs-small); }
.fx-team-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 1.2fr) auto auto; align-items: center; gap: var(--fx-space-3);
  margin: 0 0 var(--fx-space-4); padding: var(--fx-space-3) var(--fx-space-4); border: 1px solid var(--fx-ok-bd); border-radius: var(--fx-r-md); background: var(--fx-ok-bg); }
.fx-team-link-text { display: flex; flex-direction: column; gap: var(--fx-space-1); min-width: 0; }
.fx-team-link-text b { font-size: var(--fx-fs-small); font-weight: 700; color: var(--fx-ok-fg); }
.fx-team-link-text span { font-size: var(--fx-fs-small); color: var(--fx-text-2); }
.fx-team-link .fx-team-link-url { width: 100%; height: var(--fx-h-control-sm); font-family: var(--fx-mono); font-size: var(--fx-fs-small); background: var(--fx-surface); }
.fx-team-link .btn { height: var(--fx-h-control-sm); }
.fx-lvl-matrix th.fx-lvl-col, .fx-lvl-matrix td.fx-lvl-cell, .fx-lvl-matrix .fx-lvl-foot td { width: 112px; text-align: center; }
.fx-lvl-matrix .fx-lvl-foot td:first-child { width: auto; }
.fx-lvl-matrix th.fx-lvl-col { white-space: normal; }
.fx-lvl-col span { display: block; }
.fx-lvl-num { color: var(--fx-text-faint); }
.fx-lvl-name { margin-top: var(--fx-space-1); font-family: var(--fx-font); font-size: var(--fx-fs-small); font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--fx-text); }
.fx-lvl-count { font-family: var(--fx-font); font-size: var(--fx-fs-label); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--fx-text-muted); }
.fx-lvl-area td { padding-top: var(--fx-space-3); padding-bottom: var(--fx-space-1); font-family: var(--fx-mono); font-size: var(--fx-fs-label);
  font-weight: 600; letter-spacing: var(--fx-ls-label); text-transform: uppercase; color: var(--fx-text-faint); border-bottom: 0; }
.fx-lvl-cell { position: relative; }
.fx-lvl-check { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--fx-cta-bg); cursor: pointer; }
.fx-lvl-check:disabled { cursor: default; }
.fx-lvl-cell--changed::after { content: ""; position: absolute; top: 50%; margin-top: -12px; margin-left: 12px; width: 6px; height: 6px;
  border-radius: var(--fx-r-round); background: var(--fx-text-muted); }
.fx-lvl-foot td { border-bottom: 0; padding-top: var(--fx-space-2); }
.fx-client-admin [data-console="invite"]::before, .fx-client-admin [data-console="team-link"]::before, .fx-client-admin [data-console="team-revoke"]::before,
.fx-client-admin [data-console="team-disable"]::before, .fx-client-admin [data-console="team-enable"]::before,
.fx-client-admin [data-console="team-copy"]::before, .fx-client-admin [data-console="lvl-reset"]::before {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--fx-acct-icon) center / contain no-repeat; mask: var(--fx-acct-icon) center / contain no-repeat; }
.fx-client-admin [data-console="invite"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21v-1a7 7 0 0 1 14 0v1'/%3E%3Cpath d='M19 8v6M16 11h6'/%3E%3C/svg%3E"); }
.fx-client-admin [data-console="team-link"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5'/%3E%3C/svg%3E"); }
.fx-client-admin [data-console="team-revoke"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.fx-client-admin [data-console="team-disable"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m5.6 5.6 12.8 12.8'/%3E%3C/svg%3E"); }
.fx-client-admin [data-console="team-enable"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E"); }
.fx-client-admin [data-console="team-copy"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E"); }
.fx-client-admin [data-console="lvl-reset"] { --fx-acct-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E"); }
@media (max-width: 1100px) {
  .fx-acct-row--levels { grid-template-columns: minmax(0, 1fr); }
  .fx-team-link { grid-template-columns: minmax(0, 1fr) auto auto; }
  .fx-team-link-text { grid-column: 1 / -1; }
}
.fx-acct-fold-body .fx-lvl-matrix td:last-child { width: 112px; }
.fx-path-title { margin: 0 0 var(--fx-space-3); font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: 600;
  letter-spacing: var(--fx-ls-label); text-transform: uppercase; color: var(--fx-text-faint); }
.fx-paths { display: flex; flex-direction: column; gap: var(--fx-space-3); margin-bottom: var(--fx-space-5); }
.fx-path { display: flex; flex-direction: column; gap: var(--fx-space-2); padding: var(--fx-space-3); border: 1px solid var(--fx-border-hair); border-radius: var(--fx-r-md); background: var(--fx-surface-2); }
.fx-path-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-2); }
.fx-path-head b { font-size: var(--fx-fs-small); font-weight: 700; color: var(--fx-text); }
.fx-path-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-1) 0; margin: 0; padding: 0; list-style: none; }
.fx-path-step { display: inline-flex; align-items: center; gap: var(--fx-space-1); font-size: var(--fx-fs-small); color: var(--fx-text-2); }
.fx-path-step:not(:last-child)::after { content: ""; width: 16px; height: 1px; margin: 0 var(--fx-space-2); background: var(--fx-border-strong); }
.fx-path-lvl { padding: 0 var(--fx-space-1); border-radius: var(--fx-r-xs); font-family: var(--fx-mono); font-size: var(--fx-fs-label); color: var(--fx-text-muted); background: var(--fx-surface-sunken); }
.fx-acct-fold-body .fx-team-row .fx-who-cell small { max-width: 240px; }
.fx-signin-field .fx-input { width: 100%; max-width: none; box-sizing: border-box; }
.fx-settings-password { display: flex; flex-direction: column; gap: var(--fx-space-3); max-width: 360px; }

/* Campaign cockpit (fx/cockpit.js, MULTIPLY_v18.md): a full-screen dialog with the seven steps and one action per step. */
.fx-std-dialog.fx-ck { width: min(1280px, calc(100vw - 48px)); height: min(880px, calc(100vh - 48px)); max-width: none; max-height: none;
  padding: 0; overflow: hidden; }
.fx-ck[open] { display: flex; flex-direction: column; }
.fx-ck-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fx-space-4); padding: var(--fx-space-5) var(--fx-space-6) var(--fx-space-3); }
.fx-ck-title { display: flex; flex-direction: column; gap: var(--fx-space-1); min-width: 0; }
.fx-ck-title .fx-section-label { margin: 0; }
.fx-ck-title h2 { margin: 0; font-size: var(--fx-fs-h1); font-weight: var(--fx-fw-h1); line-height: var(--fx-lh-h1); letter-spacing: var(--fx-ls-h1); color: var(--fx-text); }
.fx-ck-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-3); font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
.fx-ck-head .fx-icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* the stepper: seven steps, the open one underlined */
.fx-ck-steps { padding: 0 var(--fx-space-6); border-bottom: 1px solid var(--fx-border); }
.fx-ck-steps ol { display: flex; margin: 0; padding: 0; list-style: none; }
.fx-ck-step { position: relative; flex: 1 1 0; min-width: 0; }
.fx-ck-step:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: 36px; right: var(--fx-space-2); height: 1px; background: var(--fx-border); }
.fx-ck-step button { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: var(--fx-space-2); width: 100%; padding: var(--fx-space-3) var(--fx-space-2) var(--fx-space-3) 0;
  border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fx-ck-step.is-open button { border-bottom-color: var(--fx-text); }
.fx-ck-step button:focus-visible { outline: var(--fx-focus-outline); outline-offset: -2px; }
.fx-ck-dot { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-r-round);
  background: var(--fx-surface); font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: 600; color: var(--fx-text-muted); }
.fx-ck-dot svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-ck-step--done .fx-ck-dot { border-color: var(--fx-cta-bg); background: var(--fx-cta-bg); color: var(--fx-cta-fg); }
.fx-ck-step--current .fx-ck-dot { border: 2px solid var(--fx-accent); color: var(--fx-accent-text); }
.fx-ck-step-text { display: flex; flex-direction: column; gap: 0; min-width: 0; padding-top: var(--fx-space-1); }
.fx-ck-step-text b { font-size: var(--fx-fs-small); font-weight: 700; color: var(--fx-text-2); white-space: nowrap; }
.fx-ck-step--current .fx-ck-step-text b, .fx-ck-step.is-open .fx-ck-step-text b { color: var(--fx-text); }
.fx-ck-step-text small { overflow: hidden; font-size: var(--fx-fs-label); color: var(--fx-text-faint); white-space: nowrap; text-overflow: ellipsis; }

/* body and footer */
.fx-ck-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--fx-space-5) var(--fx-space-6); background: var(--fx-surface-2); }
.fx-ck-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-4); padding: var(--fx-space-3) var(--fx-space-6);
  border-top: 1px solid var(--fx-border); background: var(--fx-surface); }
.fx-ck-foot-info { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fx-space-2) var(--fx-space-4); min-width: 0; }
.fx-ck-foot-info .fx-note { margin: 0; }
.fx-ck-foot-actions { display: flex; align-items: center; flex: none; gap: var(--fx-space-2); }
.fx-ck-confirm { font-size: var(--fx-fs-small); font-weight: 600; color: var(--fx-text); }
.fx-st--err .fx-dot { color: var(--fx-err-solid); }

/* layout pieces */
.fx-ck-grid { display: grid; gap: var(--fx-space-4); align-items: start; }
.fx-ck-grid--brief { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fx-ck-grid--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fx-ck-grid--multiply { grid-template-columns: 300px minmax(0, 1fr); }
.fx-ck-stack { display: flex; flex-direction: column; gap: var(--fx-space-4); min-width: 0; }
.fx-ck-card { display: flex; flex-direction: column; gap: var(--fx-space-3); min-width: 0; padding: var(--fx-space-4); border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); background: var(--fx-surface); }
.fx-ck-card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-3); }
.fx-ck-card-head h3 { margin: 0; font-size: var(--fx-fs-h3); font-weight: var(--fx-fw-h3); line-height: var(--fx-lh-h3); letter-spacing: var(--fx-ls-h3); color: var(--fx-text); }
.fx-ck-card-head .fx-note, .fx-ck-card > .fx-note, .fx-ck-lead { margin: 0; }
.fx-ck-lead { margin-bottom: var(--fx-space-3); }
.fx-ck-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fx-space-3); }
.fx-ck-pair--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-ck-pair .fx-input { width: 100%; min-width: 0; box-sizing: border-box; }
.fx-ck-num { width: 72px; font-family: var(--fx-mono); }
.fx-ck-nowrap { white-space: nowrap; }
.fx-ck-warn { color: var(--fx-warn-fg); }
.fx-ck-sub { display: block; margin: 0; font-size: var(--fx-fs-label); color: var(--fx-text-faint); }
.fx-ck-text { margin: 0; font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-ck-chips, .fx-ck-pills { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); }
.fx-ck-pills .fx-pill { margin: 0; }
.fx-ck-seg { align-self: flex-start; }
.fx-ck-seg .fx-seg-btn { white-space: nowrap; }
.fx-ck-card .fx-range { width: 100%; }
.fx-ck-card .fx-range input { flex: 1; min-width: 0; }
.fx-ck-card .fx-range output { min-width: 40px; text-align: right; font-size: var(--fx-fs-small); color: var(--fx-text); }

/* campaign SKUs: one letter and one colour each, the same in the brief, the rules and the block diagram */
.fx-ck-sku { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--fx-viz-1); border-radius: var(--fx-r-xs);
  background: var(--fx-zone-1); font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: 700; color: var(--fx-text); }
.fx-ck-sku--1 { border-color: var(--fx-viz-2); background: var(--fx-zone-2); }
.fx-ck-sku--2 { border-color: var(--fx-viz-3); background: var(--fx-zone-3); }
.fx-ck-sku--3 { border-color: var(--fx-viz-4); background: var(--fx-zone-4); }
.fx-ck-sku--4 { border-color: var(--fx-viz-5); background: var(--fx-zone-5); }
.fx-ck-sku--5 { border-color: var(--fx-viz-6); background: var(--fx-zone-6); }
.fx-ck-skus td:first-child { width: 20px; padding-right: 0; }
.fx-ck-skus td b { font-weight: 600; color: var(--fx-text); }
.fx-ck-rules { display: flex; flex-direction: column; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; }
.fx-ck-rules li { display: flex; align-items: center; gap: var(--fx-space-1); font-size: var(--fx-fs-small); color: var(--fx-text-2); }
.fx-ck-rules li span:last-child { margin-left: var(--fx-space-1); }

/* master and approval */
.fx-ck-master { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--fx-space-5); align-items: start; }
.fx-std-dialog.fx-ck:focus, .fx-std-dialog.fx-ck:focus-visible { outline: none; }
.fx-ck-thumb { margin: 0; padding: var(--fx-space-3); border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); background: var(--fx-surface); }
.fx-ck-thumb .fx-std-noimg { display: grid; height: 320px; }
.fx-ck-rackbox { overflow: hidden; }
.shelf-rack.fx-ck-rack { width: 1040px; max-width: none; pointer-events: none; transform-origin: 0 0; }
.fx-ck-rack .fx-ck-lto { outline: 2px solid var(--fx-data-emphasis); outline-offset: -2px; border-radius: var(--fx-r-xs); }
.fx-ck-rack .fx-ck-donor { outline: 1px dashed var(--fx-border-control); outline-offset: -1px; }
.fx-ck-master-text { display: flex; flex-direction: column; gap: var(--fx-space-2); }
.fx-ck-master-text h3 { margin: 0; font-size: var(--fx-fs-h2); font-weight: var(--fx-fw-h2); line-height: var(--fx-lh-h2); letter-spacing: var(--fx-ls-h2); }
.fx-ck-master-text .fx-section-label { margin: 0; }
.fx-ck-empty { display: flex; flex-direction: column; gap: var(--fx-space-2); max-width: 560px; margin: var(--fx-space-6) auto; padding: var(--fx-space-6);
  border: 1px dashed var(--fx-border-strong); border-radius: var(--fx-r-lg); background: var(--fx-surface); }
.fx-ck-empty h3 { margin: 0; font-size: var(--fx-fs-h2); font-weight: var(--fx-fw-h2); }
.fx-ck-empty p { margin: 0; font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-ck-howto { display: flex; flex-direction: column; gap: var(--fx-space-1); margin: var(--fx-space-2) 0 0; padding-left: var(--fx-space-5);
  font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-ck-flow { margin-bottom: var(--fx-space-1); }
.fx-ck-people { display: flex; flex-direction: column; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; }
.fx-ck-people li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fx-space-3); font-size: var(--fx-fs-small); }
.fx-ck-people .fx-mono { font-size: var(--fx-fs-label); color: var(--fx-text-faint); }

/* multiply: rules, scope matrix, result */
.fx-ck-rulecard { position: sticky; top: 0; gap: var(--fx-space-4); }
.fx-ck-rule { display: flex; flex-direction: column; gap: var(--fx-space-2); }
.fx-ck-rule p { margin: 0; font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-ck-rule-k { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-2); font-family: var(--fx-mono); font-size: var(--fx-fs-label);
  font-weight: var(--fx-fw-label); letter-spacing: var(--fx-ls-label); text-transform: uppercase; color: var(--fx-text-faint); }
.fx-ck-from { font-family: var(--fx-font); font-size: var(--fx-fs-label); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--fx-text-faint); }
.fx-ck-from--run { color: var(--fx-data-emphasis-ink); }
.fx-ck-list { display: flex; flex-direction: column; gap: var(--fx-space-2); margin: 0; padding: 0; list-style: none; }
.fx-ck-list li { display: flex; align-items: flex-start; gap: var(--fx-space-2); }
.fx-ck-li-text { display: flex; flex-direction: column; min-width: 0; font-size: var(--fx-fs-small); }
.fx-ck-li-text b { font-weight: 600; color: var(--fx-text); }
.fx-ck-li-text small { font-size: var(--fx-fs-label); color: var(--fx-text-muted); }
.fx-ck-matrix th, .fx-ck-matrix td { text-align: center; white-space: nowrap; }
.fx-ck-matrix th:first-child, .fx-ck-matrix tbody th { text-align: left; }
.fx-ck-matrix tbody th { font-family: var(--fx-font); font-size: var(--fx-fs-small); font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--fx-text); }
.fx-ck-cell { padding: var(--fx-space-1); }
.fx-ck-cell--none { color: var(--fx-text-faint); }
.fx-ck-cellbtn { display: inline-flex; align-items: baseline; justify-content: center; gap: 0; min-width: 48px; height: var(--fx-h-control-sm); padding: 0 var(--fx-space-2);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-sm); background: var(--fx-surface); font: inherit; color: var(--fx-text-faint); cursor: pointer;
  transition: background var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease); }
.fx-ck-cellbtn b { font-size: var(--fx-fs-small); font-weight: 600; line-height: 26px; }
.fx-ck-cellbtn span { font-size: var(--fx-fs-label); }
.fx-ck-cellbtn:hover { border-color: var(--fx-border-strong); }
.fx-ck-cellbtn.is-on { border-color: var(--fx-accent-tint-2); background: var(--fx-accent-tint); color: var(--fx-accent-text); }
.fx-ck-cellbtn.is-part { border-style: dashed; border-color: var(--fx-accent-tint-2); color: var(--fx-accent-text); }
.fx-ck-cellbtn:focus-visible, .fx-ck-rowbtn:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
.fx-ck-rowbtn { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--fx-text); cursor: pointer; }
.fx-ck-results td { vertical-align: top; }
.fx-ck-results td:first-child { width: 20px; padding-right: 0; }
.fx-ck-results td:last-child { width: 32px; text-align: right; }
.fx-ck-results td b { font-weight: 600; color: var(--fx-text); }
.fx-ck-results .app-chip { margin-top: var(--fx-space-1); }
.fx-ck-row.is-off td { color: var(--fx-text-faint); }
.fx-ck-row.is-off td b { color: var(--fx-text-muted); }
.fx-ck-reason { display: block; max-width: 280px; margin-top: var(--fx-space-1); font-size: var(--fx-fs-label); line-height: var(--fx-lh-small); color: var(--fx-text-muted); white-space: normal; }
.fx-ck-caret svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--fx-dur) var(--fx-ease); }
.fx-ck-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.fx-ck-results .fx-ck-detail > td { width: auto; padding: var(--fx-space-4); text-align: left; background: var(--fx-surface-2); }
.fx-ck-detail-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fx-space-4); margin-top: var(--fx-space-4); }
.fx-ck-detail-col { display: flex; flex-direction: column; gap: var(--fx-space-3); min-width: 0; }
.fx-ck-pics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--fx-space-3); }
.fx-ck-pics figure { margin: 0; }
.fx-ck-pics figcaption { margin-bottom: var(--fx-space-1); font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: 600; letter-spacing: var(--fx-ls-label);
  text-transform: uppercase; color: var(--fx-text-faint); }
.fx-ck-pics .fx-ck-rackbox { padding: var(--fx-space-2); border: 1px solid var(--fx-border-hair); border-radius: var(--fx-r-md); background: var(--fx-surface); box-sizing: content-box; }
.fx-ck-pics .fx-std-noimg { display: grid; height: 200px; }
.fx-ck-arr { display: flex; flex-direction: column; gap: var(--fx-space-1); }
.fx-ck-arr-row { display: flex; align-items: center; gap: var(--fx-space-2); }
.fx-ck-arr-n { flex: none; width: 24px; font-size: var(--fx-fs-label); color: var(--fx-text-faint); }
.fx-ck-arr-cells { display: flex; flex: 1; gap: var(--fx-space-1); }
.fx-ck-arr-cell { display: grid; place-items: center; flex-basis: 0; height: 24px; border: 1px solid var(--fx-viz-1); border-radius: var(--fx-r-xs); background: var(--fx-zone-1);
  font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: 600; color: var(--fx-text); white-space: nowrap; }
.fx-ck-arr-cell.fx-ck-sku--1 { border-color: var(--fx-viz-2); background: var(--fx-zone-2); }
.fx-ck-arr-cell.fx-ck-sku--2 { border-color: var(--fx-viz-3); background: var(--fx-zone-3); }
.fx-ck-arr-cell.fx-ck-sku--3 { border-color: var(--fx-viz-4); background: var(--fx-zone-4); }
.fx-ck-small { margin: 0; padding-left: var(--fx-space-4); font-size: var(--fx-fs-small); font-weight: 500; line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-ck-over { gap: var(--fx-space-2); }
.fx-ck-over .fx-ck-num { width: 100%; }
.fx-ck-over .tb-btn { align-self: flex-start; }
.fx-ck-loading { display: flex; align-items: center; gap: var(--fx-space-2); padding: var(--fx-space-6) 0; justify-content: center; font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
.fx-ck-loading--inline { padding: 0; }
.fx-ck-spin { width: 14px; height: 14px; border: 2px solid var(--fx-border); border-top-color: var(--fx-text-muted); border-radius: var(--fx-r-round); animation: fx-ck-spin var(--fx-dur-slide) linear infinite; }
@keyframes fx-ck-spin { to { transform: rotate(360deg); } }

/* copies, release, end */
.fx-ck-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fx-space-3); margin-bottom: var(--fx-space-3); }
.fx-ck-kpi { display: flex; flex-direction: column; gap: var(--fx-space-1); padding: var(--fx-space-3) var(--fx-space-4); border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); background: var(--fx-surface); }
.fx-ck-kpi b { font-size: var(--fx-fs-num); font-weight: var(--fx-fw-num); letter-spacing: var(--fx-ls-num); color: var(--fx-text); }
.fx-ck-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-3); margin-bottom: var(--fx-space-3); padding: var(--fx-space-3) var(--fx-space-4);
  border: 1px solid var(--fx-warn-bd); border-radius: var(--fx-r-md); background: var(--fx-warn-bg); font-size: var(--fx-fs-small); color: var(--fx-warn-fg); }
.fx-ck-copies td { vertical-align: top; }
.fx-ck-copies td b { font-weight: 600; color: var(--fx-text); }
.fx-ck-actions { width: 1%; white-space: nowrap; text-align: right; }
.fx-ck-actions .tb-btn + .tb-btn { margin-left: var(--fx-space-2); }
.fx-ck-chains { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--fx-space-4); margin-bottom: var(--fx-space-4); }
.fx-ck-picklist { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--fx-border-hair); }
.fx-ck-picklist li { border-bottom: 1px solid var(--fx-border-hair); }
.fx-ck-picklist label { display: flex; align-items: center; gap: var(--fx-space-2); padding: var(--fx-space-2) 0; font-size: var(--fx-fs-small); color: var(--fx-text); cursor: pointer; }
.fx-ck-picklist label span:nth-child(2) { flex: 1; min-width: 0; }
.fx-ck-picklist .fx-mono { font-size: var(--fx-fs-label); color: var(--fx-text-faint); }
.fx-ck-chain-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
.fx-ck-chain-actions .btn { display: inline-flex; align-items: center; gap: var(--fx-space-2); }
.fx-ck-chain-actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fx-ck-menuwrap { position: relative; }
.fx-ck-menu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: var(--fx-z-menu); display: flex; flex-direction: column; min-width: 180px; padding: var(--fx-space-1);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); background: var(--fx-surface); box-shadow: var(--fx-shadow-pop); }
.fx-ck-menu button { padding: var(--fx-space-2) var(--fx-space-3); border: 0; border-radius: var(--fx-r-sm); background: transparent; font: inherit; font-size: var(--fx-fs-small);
  text-align: left; color: var(--fx-text); cursor: pointer; }
.fx-ck-menu button:hover, .fx-ck-menu button:focus-visible { background: var(--fx-surface-sunken); outline: none; }
.fx-ck-endcard .fx-section-label { margin: 0; }
.fx-ck-big { margin: 0; font-size: var(--fx-fs-kpi); font-weight: var(--fx-fw-num); letter-spacing: var(--fx-ls-kpi); color: var(--fx-text); }
.fx-ck-back { display: flex; flex-direction: column; gap: var(--fx-space-1); padding: var(--fx-space-2) 0; border-top: 1px solid var(--fx-border-hair); }
.fx-ck-back:first-of-type { border-top: 0; }
.fx-ck-back b { font-size: var(--fx-fs-small); font-weight: 700; }

/* the campaign folder header in Standards: the cockpit in one line */
.fx-ck-mini { display: flex; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-4); margin: 0; padding: var(--fx-space-3) 0 0; list-style: none; border-top: 1px solid var(--fx-border-hair); }
.fx-ck-mini-step button { display: inline-flex; align-items: center; gap: var(--fx-space-2); padding: 0; border: 0; background: transparent; font: inherit;
  font-size: var(--fx-fs-small); font-weight: 600; line-height: 20px; color: var(--fx-text-muted); cursor: pointer; }
.fx-ck-mini-step button:hover { color: var(--fx-text); }
.fx-ck-mini-step.fx-ck-step--current button { color: var(--fx-text); }
.fx-ck-mini .fx-ck-dot { width: 20px; height: 20px; }
.fx-ck-mini .fx-ck-dot svg { width: 10px; height: 10px; }
.fx-ck-head-card .fx-camp-sub { gap: var(--fx-space-3); }
@media (max-width: 1100px) {
  .fx-ck-grid--brief, .fx-ck-grid--two, .fx-ck-grid--multiply, .fx-ck-master, .fx-ck-detail-info { grid-template-columns: minmax(0, 1fr); }
  .fx-ck-rulecard { position: static; }
  .fx-ck-step-text small { display: none; }
}

/* AL, 7 Oct: a label never wraps word by word (tools/layout_probe.js). The Automate metrics tables keep one line per
   cell; a long name ends in an ellipsis and its full text is the cell's title. */
.ext-split-table { table-layout: fixed; }
.ext-split-table th, .ext-split-table td { padding: var(--fx-space-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ext-split-table th:first-child, .ext-split-table td:first-child { padding-left: var(--fx-space-3); }
.ext-split-table th:nth-child(2), .ext-split-table td:nth-child(2) { width: 56px; }
.ext-split-table th:nth-child(3), .ext-split-table td:nth-child(3) { width: 64px; padding-right: var(--fx-space-3); }

/* Master Data · impact on planograms and activation by Level 3 (fx/console.js impactPanel). */
.fx-impact { display: flex; flex-direction: column; gap: var(--fx-space-3); margin: var(--fx-space-4) 0; padding: var(--fx-space-4);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg); background: var(--fx-surface); }
.fx-impact > .fx-note { margin: 0; }
.fx-impact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fx-space-4); }
.fx-impact-head h4 { margin: 0 0 var(--fx-space-1); font-size: var(--fx-fs-h3); font-weight: var(--fx-fw-h3); color: var(--fx-text); }
.fx-impact-head span { font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
.fx-impact-act { display: flex; flex: none; align-items: center; gap: var(--fx-space-2); }
.fx-impact-line { margin: 0; font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-impact-line b { margin-right: var(--fx-space-2); font-weight: 700; color: var(--fx-text); }
.fx-impact-line .fx-note { display: inline; margin: 0; }
.fx-impact-sub { display: block; margin-top: var(--fx-space-1); font-size: var(--fx-fs-label); color: var(--fx-text-faint); }
.fx-impact-list { margin: var(--fx-space-1) 0 0; padding-left: var(--fx-space-4); font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-impact-err { color: var(--fx-err-fg); }
.fx-impact-warn { color: var(--fx-warn-fg); }
.fx-impact-dim { color: var(--fx-text-muted); }
.fx-impact .fx-tbl td { vertical-align: top; }
.fx-impact .fx-tbl td:last-child { width: 1%; white-space: nowrap; }
.fx-impact .app-chip { margin-top: var(--fx-space-1); }
.fx-impact td .app-chip { display: flex; width: fit-content; }

/* AL, 7 Oct: no value wraps word by word. The Automate KPI row is two rows of three (money and faces, then the
   top subline, price group and flavour); a name stays on one line and its full text is the card's title. */
.ext-top-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ext-top-grid .ext-card--summary { min-width: 0; }
.ext-card-value--text { font-size: var(--fx-fs-h2); line-height: var(--fx-lh-h2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fx-md-eqlist { margin-top: var(--fx-space-6); }

/* Customize stage: a slim rack photo keeps a readable height (it filled 640 px of width and ran 3000 px down). */
.equip-stage { width: min(100%, 640px, calc(1100px * var(--equip-ar, 0.5))); }

/* Master Data · equipment intake: a list + rack and POSM photos, shelves found on the photo (fx/intake.js). */
.fx-ik-host { margin: var(--fx-space-6) 0; }
.fx-ik-drop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--fx-space-4);
  padding: var(--fx-space-5); border: 1px dashed var(--fx-border-strong); border-radius: var(--fx-r-lg); background: var(--fx-surface);
  transition: border-color var(--fx-dur) var(--fx-ease), background var(--fx-dur) var(--fx-ease); }
.fx-ik-drop--over { border-color: var(--fx-accent); background: var(--fx-accent-tint); }
.fx-ik-drop--locked { border-style: solid; background: var(--fx-surface-2); }
.fx-ik-drop-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--fx-r-round); background: var(--fx-accent-tint); }
.fx-ik-drop-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--fx-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fx-ik-drop-text { display: flex; flex-direction: column; gap: var(--fx-space-1); min-width: 0; }
.fx-ik-drop-text b { font-size: var(--fx-fs-h3); font-weight: var(--fx-fw-h3); line-height: var(--fx-lh-h3); color: var(--fx-text); }
.fx-ik-drop-text span { font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-muted); }
.fx-ik-drop-actions { display: flex; align-items: center; gap: var(--fx-space-2); }
.fx-ik-drop-actions .btn, .fx-ik-bar .btn, .fx-ik-top .btn, .fx-ik-done .btn { white-space: nowrap; }
.fx-ik-template { display: inline-flex; align-items: center; gap: var(--fx-space-2); text-decoration: none; }
.fx-ik-template svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fx-ik-error { margin: var(--fx-space-2) 0 0; font-size: var(--fx-fs-small); color: var(--fx-err-fg); }
.fx-ik { display: flex; flex-direction: column; gap: var(--fx-space-3); padding: var(--fx-space-5); border: 1px solid var(--fx-border);
  border-radius: var(--fx-r-lg); background: var(--fx-surface-2); }
.fx-ik .fx-section-label { margin: var(--fx-space-2) 0 0; }
.fx-ik-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fx-space-3) var(--fx-space-4); }
.fx-ik-top h3 { margin: 0 0 var(--fx-space-1); font-size: var(--fx-fs-h2); font-weight: var(--fx-fw-h2); line-height: var(--fx-lh-h2); color: var(--fx-text); }
.fx-ik-top .fx-note { margin: 0; }
.fx-ik-title { min-width: 0; }
.fx-ik-sum { display: flex; flex: 1; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--fx-space-2) var(--fx-space-4); }
.fx-ik-sum-item { display: inline-flex; align-items: center; gap: var(--fx-space-2); font-size: var(--fx-fs-small); color: var(--fx-text-muted); white-space: nowrap; }
.fx-ik-sum-item b { font-size: var(--fx-fs-body); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fx-text); }
.fx-ik-sum-item i { width: 8px; height: 8px; border-radius: var(--fx-r-round); background: var(--fx-border-strong); }
.fx-ik-sum-item--ok i { background: var(--fx-ok-solid); }
.fx-ik-sum-item--warn i { background: var(--fx-warn-solid); }
.fx-ik-sum-item--err i { background: var(--fx-err-solid); }
.fx-ik-sum-item--dim i { background: var(--fx-text-faint); }
.fx-ik-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); gap: var(--fx-space-4); }
.fx-ik-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--fx-border); border-radius: var(--fx-r-lg);
  background: var(--fx-surface); transition: border-color var(--fx-dur) var(--fx-ease); }
.fx-ik-card--on { border-color: var(--fx-border-strong); }
.fx-ik-media { display: flex; align-items: center; justify-content: center; height: 320px; padding: var(--fx-space-3);
  background: var(--fx-surface-sunken); border-bottom: 1px solid var(--fx-border); }
.fx-ik-media--posm { height: 160px; background-color: var(--fx-surface);
  background-image: linear-gradient(45deg, var(--fx-surface-sunken) 25%, transparent 25%), linear-gradient(-45deg, var(--fx-surface-sunken) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--fx-surface-sunken) 75%), linear-gradient(-45deg, transparent 75%, var(--fx-surface-sunken) 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.fx-ik-media--posm img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fx-ik-empty { display: flex; flex-direction: column; align-items: center; gap: var(--fx-space-2); max-width: 100%; text-align: center; }
.fx-ik-empty svg { width: 28px; height: 28px; fill: none; stroke: var(--fx-text-faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fx-ik-empty b { font-size: var(--fx-fs-small); font-weight: 600; color: var(--fx-text-muted); }
.fx-ik-empty span { max-width: 100%; font-family: var(--fx-mono); font-size: var(--fx-fs-label); color: var(--fx-text-faint); overflow-wrap: anywhere; }
.fx-ik-media--empty.fx-ik-media--posm { background-image: none; background-color: var(--fx-surface-sunken); }
.fx-ik-fig { position: relative; height: 100%; max-width: 100%; }
.fx-ik-fig img { display: block; width: 100%; height: 100%; border-radius: var(--fx-r-xs); }
.fx-ik-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-ik-ov-zone { fill: var(--fx-data-emphasis); fill-opacity: .16; }
.fx-ik-ov-zone:hover { fill-opacity: .32; }
.fx-ik-ov-base { stroke: var(--fx-data-emphasis); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fx-ik-ov-head { fill: var(--fx-media-shade); fill-opacity: .42; stroke: var(--fx-on-media); stroke-opacity: .7; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.fx-ik-tag { position: absolute; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 var(--fx-space-1); transform: translate(-50%, -50%);
  border-radius: var(--fx-r-round); background: var(--fx-data-emphasis); color: var(--fx-on-emphasis); font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: 700; pointer-events: none; }
.fx-ik-body { display: flex; flex: 1; flex-direction: column; gap: var(--fx-space-3); padding: var(--fx-space-4); }
.fx-ik-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fx-space-3); }
.fx-ik-head > div { min-width: 0; }
.fx-ik-head h4 { margin: 0 0 var(--fx-space-1); font-size: var(--fx-fs-body); font-weight: 700; line-height: var(--fx-lh-body); color: var(--fx-text); }
.fx-ik-head .app-chip { flex: none; white-space: nowrap; }
.fx-ik-id { display: block; font-family: var(--fx-mono); font-size: var(--fx-fs-label); color: var(--fx-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-ik-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fx-space-2) var(--fx-space-3); margin: 0; }
.fx-ik-facts div { min-width: 0; }
.fx-ik-facts dt { font-family: var(--fx-mono); font-size: var(--fx-fs-label); letter-spacing: var(--fx-ls-label); text-transform: uppercase; color: var(--fx-text-faint); white-space: nowrap; }
.fx-ik-facts dd { margin: 0; font-size: var(--fx-fs-small); font-variant-numeric: tabular-nums; color: var(--fx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-ik-finds { display: flex; flex-direction: column; gap: var(--fx-space-1); margin: 0; padding: 0; list-style: none; }
.fx-ik-find { position: relative; padding-left: var(--fx-space-4); font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-ik-find::before { content: ''; position: absolute; left: var(--fx-space-1); top: 8px; width: 6px; height: 6px; border-radius: var(--fx-r-round); background: var(--fx-text-faint); }
.fx-ik-find--warn::before { background: var(--fx-warn-solid); }
.fx-ik-find--err { color: var(--fx-err-fg); }
.fx-ik-find--err::before { background: var(--fx-err-solid); }
.fx-ik-choice { display: flex; flex-direction: column; gap: var(--fx-space-2); }
.fx-ik-choice > span { font-size: var(--fx-fs-small); font-weight: 600; color: var(--fx-text-2); white-space: nowrap; }
.fx-ik-choice .fx-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-ik-choice .fx-seg-btn { justify-content: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-ik-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-3); margin-top: auto; padding-top: var(--fx-space-3); border-top: 1px solid var(--fx-border-hair); }
.fx-ik-foot .fx-toggle span { white-space: nowrap; }
.fx-ik-fix { flex: 1; min-width: 0; margin: 0; font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
.fx-ik-foot .fx-ik-file { max-width: 40%; }
.fx-ik-file { min-width: 0; font-family: var(--fx-mono); font-size: var(--fx-fs-label); color: var(--fx-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-ik-stray { display: flex; flex-direction: column; gap: var(--fx-space-2); margin: 0; padding: var(--fx-space-3) var(--fx-space-4); list-style: none;
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); background: var(--fx-surface); }
.fx-ik-stray li { display: flex; align-items: baseline; gap: var(--fx-space-3); font-size: var(--fx-fs-small); color: var(--fx-text-2); }
.fx-ik-stray .fx-ik-file { flex: none; max-width: 40%; color: var(--fx-text); }
.fx-ik-bar { position: sticky; bottom: 0; z-index: var(--fx-z-sticky); display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-4);
  margin-top: var(--fx-space-2); padding: var(--fx-space-3) var(--fx-space-4); border: 1px solid var(--fx-border); border-radius: var(--fx-r-md);
  background: var(--fx-surface); box-shadow: var(--fx-shadow-pop); }
.fx-ik-bar > div { display: flex; flex-direction: column; gap: var(--fx-space-1); min-width: 0; }
.fx-ik-bar b { font-size: var(--fx-fs-body); font-weight: 700; color: var(--fx-text); }
.fx-ik-bar span { font-size: var(--fx-fs-small); color: var(--fx-text-muted); }
.fx-ik-done { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--fx-space-4); padding: var(--fx-space-4) var(--fx-space-5);
  border: 1px solid var(--fx-ok-bd); border-radius: var(--fx-r-lg); background: var(--fx-ok-bg); }
.fx-ik-done--wait { border-color: var(--fx-warn-bd); background: var(--fx-warn-bg); }
.fx-ik-done > div { display: flex; flex-direction: column; gap: var(--fx-space-1); }
.fx-ik-done b { font-size: var(--fx-fs-h3); font-weight: var(--fx-fw-h3); color: var(--fx-text); }
.fx-ik-done span { font-size: var(--fx-fs-small); color: var(--fx-text-2); }
.fx-ik-done-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--fx-r-round); background: var(--fx-ok-solid); }
.fx-ik-done--wait .fx-ik-done-icon { background: var(--fx-warn-solid); }
.fx-ik-done-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--fx-on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* v18 · equipment from photos alone (fx/intake.js): the rack card's inputs and stepper, the faint edges, the reason a rack waits. */
.fx-ik-grid--racks { grid-template-columns: repeat(auto-fill, minmax(432px, 1fr)); }
.fx-ik-head h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-ik-ov-edge { stroke: var(--fx-on-media); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.fx-ik-fields { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) auto; align-items: end; gap: var(--fx-space-2); }
.fx-ik-field { min-width: 0; }
.fx-ik-field > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-ik-field .fx-input { width: 100%; max-width: none; min-width: 0; box-sizing: border-box; }
.fx-ik-step { display: flex; align-items: center; gap: var(--fx-space-1); height: var(--fx-h-control); }
.fx-ik-step .btn { width: var(--fx-h-control); height: var(--fx-h-control); padding: 0; justify-content: center; }
.fx-ik-count { min-width: var(--fx-space-5); text-align: center; font-family: var(--fx-mono); font-size: var(--fx-fs-body); font-variant-numeric: tabular-nums; color: var(--fx-text); }
.fx-ik-calc { display: flex; justify-content: flex-end; }
.fx-ik-calc .btn { white-space: nowrap; }
.fx-ik-body > .fx-ik-fix { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-ik-foot .fx-toggle input:disabled, .fx-ik-foot .fx-toggle input:disabled + span { opacity: .55; cursor: not-allowed; }

/* Agent · the four intents (fx/agent-intents.js): the intent switch, answers, campaign launch, Master Data update. */
.ix-head { flex-wrap: wrap; row-gap: var(--fx-space-2); }
.ix-head .fx-seg { margin-left: auto; flex-wrap: wrap; }
.ix-head .fx-seg-btn, .ix-queries .fx-seg-btn, .ag-field-body .fx-seg-btn { white-space: nowrap; }
.ix-queries { margin: var(--fx-space-3) 0; }
.ix-queries .fx-seg { flex-wrap: wrap; }
.ix-answer { margin: 0 0 var(--fx-space-3); font-size: var(--fx-fs-body); line-height: var(--fx-lh-body); color: var(--fx-text); }
.ix-tbl { margin: 0 0 var(--fx-space-2); }
.ix-tbl td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-tbl td .app-chip { white-space: nowrap; }
.ix-tbl .ix-num { text-align: right; font-variant-numeric: tabular-nums; }
.ix-tbl .ix-why-cell { max-width: 360px; color: var(--fx-text-2); }
.ix-tbl--why table { table-layout: fixed; }
.ix-tbl--why th:nth-child(1) { width: 32%; }
.ix-tbl--why th:nth-child(2) { width: 14%; }
.ix-tbl--why th:nth-child(3) { width: 132px; }
.ix-tbl--why td { max-width: none; }
.ix-links { flex-wrap: wrap; margin-top: var(--fx-space-3); }
.ix-links .btn, .ix-bar .btn { white-space: nowrap; }
.ix-bar { flex-wrap: wrap; margin-top: var(--fx-space-3); }
.ix-why { margin: 0; }
.ix-err { margin: var(--fx-space-2) 0 0; font-size: var(--fx-fs-small); color: var(--fx-err-fg); }
.ix-sku { display: inline-flex; align-items: center; gap: var(--fx-space-1); height: var(--fx-h-control-sm); padding: 0 var(--fx-space-1) 0 var(--fx-space-3);
  border: 1px solid var(--fx-border-control); border-radius: var(--fx-r-round); background: var(--fx-surface);
  font-size: var(--fx-fs-small); font-weight: 600; color: var(--fx-text); white-space: nowrap; }
.ix-x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--fx-r-round);
  background: transparent; color: var(--fx-text-faint); font-size: var(--fx-fs-body); line-height: 1; cursor: pointer; }
.ix-x:hover { background: var(--fx-surface-sunken); color: var(--fx-text); }
.ix-x:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
.ag-field-body .fxp--auto:has(select.ix-add) { max-width: 280px; }
select.ag-sel.ix-add { height: var(--fx-h-control-sm); max-width: 240px; padding: 0 var(--fx-space-2); font: inherit; font-size: var(--fx-fs-small);
  color: var(--fx-text-2); background: var(--fx-surface); border: 1px dashed var(--fx-border-control); border-radius: var(--fx-r-btn); }
input.ag-sel.ix-name { width: 100%; max-width: 420px; }
.ix-base { font-size: var(--fx-fs-small); font-weight: 600; color: var(--fx-text); }
.ix-inline { margin: 0; }
.ix-notes { margin: var(--fx-space-2) 0 0; padding: var(--fx-space-2) var(--fx-space-3) var(--fx-space-2) var(--fx-space-6); border-radius: var(--fx-r-md);
  background: var(--fx-surface-2); font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.ix-plan { margin: var(--fx-space-3) 0 0; padding-left: var(--fx-space-5); font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.ix-plan li + li { margin-top: var(--fx-space-1); }
.ix-file { font-family: var(--fx-mono); font-size: var(--fx-fs-small); color: var(--fx-text); }
.ix-pick { display: inline-flex; align-items: center; cursor: pointer; }
.ix-line { margin: 0 0 var(--fx-space-2); font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.ix-line b { margin-right: var(--fx-space-2); font-weight: 700; color: var(--fx-text); }

/* v18 fix · KPI tiles in one row (as in v17), kept on Create, Edit and Customize; TTL closes each split table. */
.ext-top-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--fx-space-2); }
.ext-top-grid .ext-card { min-width: 0; padding: var(--fx-space-3); }
.ext-top-grid .ext-card--summary { min-height: 0; }
.ext-top-grid .ext-card-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0; font-size: var(--fx-fs-label); }
.ext-top-grid .ext-card-value { font-size: var(--fx-fs-num); letter-spacing: var(--fx-ls-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-top-grid .ext-card-value--text { font-size: var(--fx-fs-h2); line-height: var(--fx-lh-h2); }
.ext-top-grid .ext-card-meta { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: var(--fx-fs-label); }
.ext-split-row--total td { border-top: 1px solid var(--fx-border); font-weight: 700; color: var(--fx-text); }
.ext-split-table tbody .ext-split-row--total td { border-bottom: none; }
@media (max-width: 900px) { .ext-top-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* v18 fix · every icon is Phosphor Regular path data (MIT) drawn as a fill. Older stroke rules on the host
   elements must not turn those paths back into outlines; the repeated class outranks them without !important. */
svg.ph.ph.ph.ph { fill: currentColor; stroke: none; }

/* v18 fix · the rack size line reads as a label of the rack: same voice as the KPI titles, a hairline runs to the edge. */
.fx-rack-head { flex-wrap: nowrap; align-items: center; gap: var(--fx-space-3); padding: 0 0 var(--fx-space-2); }
.fx-rack-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--fx-space-2); font-family: var(--font-tech); font-size: var(--fx-fs-label);
  font-weight: var(--fx-fw-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fx-text-muted); white-space: nowrap; }
.fx-rack-title svg { width: 14px; height: 14px; flex: none; }
.fx-rack-title::after { content: ''; flex: 1; height: 1px; background: var(--fx-border); }
.fx-rack-head .fx-stats { flex: none; }

/* v18 fix · a placed library POSM shows its picture and name inside the zone. */
.posm-block img { max-width: 80%; max-height: 55%; object-fit: contain; pointer-events: none; }
.posm-block span { max-width: 100%; padding: 0 var(--fx-space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v18 fix · the sign-in card: one centre line for logo, title, tabs and text; the card sits in the middle of the window, a little above it. */
.auth-screen.screen--active { box-sizing: border-box; padding: var(--fx-space-5) var(--fx-space-4) 8vh; }
.fx-signin.auth-card { width: 100%; max-width: 420px; align-items: stretch; text-align: center; padding: var(--fx-space-6) var(--fx-space-6) var(--fx-space-5); }
.fx-signin-logo { align-self: center; width: 148px; margin-bottom: var(--fx-space-2); }
.fx-signin-tagline { margin-bottom: var(--fx-space-2); }
.fx-signin .fx-section-label { margin: 0; text-align: center; }
.fx-signin-tabs { display: flex; width: 100%; }
.fx-signin-tabs .fx-seg-btn { flex: 1; justify-content: center; }
.fx-signin-form, .fx-signin-field, .fx-signin-hint { text-align: left; }
.fx-signin-foot { text-align: center; }

/* v18 fix · an icon inside a .btn reads at text size (the Create wand, the Analyze arrow). */
.btn .ico { width: 16px; height: 16px; flex: none; }

/* v18 · client fixes (AL, 11 Oct 2026) */
/* KPI tiles of Create, Edit and Customize stay in view under the two sticky bars (topbar 60 + subbar 52). */
.ext-metrics-top { position: sticky; top: 112px; z-index: calc(var(--fx-z-sticky) - 2); padding-bottom: var(--fx-space-3); margin-bottom: 0; background: var(--fx-canvas); }
.generate-preview { overflow-x: clip; }
/* The Send row of the Standards card menu keeps its icon beside the label. */
.menu-row--sub > .fx-menu-lbl { display: inline-flex; align-items: center; gap: var(--fx-space-2); }

/* v18 · lane B · Agent and Integrations in a client demo (tokens only). */
/* The newest Agent card scrolls into view above the sticky composer (screen-agent.js scrollEnd). */
.ag-msg { scroll-margin-bottom: 176px; }
/* A card's example pills sit left, under its sentence. */
.ag-sugs--card { justify-content: flex-start; margin-top: var(--fx-space-3); }
/* Stored PDFs of a run: one download row each; a long list scrolls inside the card. */
.ag-dl { max-height: 192px; overflow-y: auto; margin-top: var(--fx-space-2); }
/* A menu row that cannot be used stays visible and reads as off; its reason is the sub line. */
.ag-menu-row:disabled { cursor: not-allowed; opacity: .6; }
.ag-menu-row:disabled:hover { background: transparent; }
/* The Integrations sheet takes focus so Esc closes it; the sheet itself shows no ring. */
.fx-sheet:focus { outline: none; }
/* An empty search names the next step. */
.fx-empty .btn { margin-top: var(--fx-space-3); }
/* ===== v18 · Master Data validation (lane D, step 3) ===== */
/* A long name or file name stays on one line; the full text is in its title. */
.md-clip { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The result of the last upload stays in its slot until it is closed. */
.md-result { display: flex; flex-direction: column; gap: var(--fx-space-2); margin-top: var(--fx-space-3); padding: var(--fx-space-3) var(--fx-space-4);
  border: 1px solid var(--fx-border); border-radius: var(--fx-r-md); background: var(--fx-surface-2); }
.md-result--err { border-color: var(--fx-err-bd); background: var(--fx-err-bg); }
.md-result--warn { border-color: var(--fx-warn-bd); background: var(--fx-warn-bg); }
.md-result--ok { border-color: var(--fx-ok-bd); background: var(--fx-ok-bg); }
.md-result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fx-space-3); }
.md-result-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fx-fs-small); font-weight: 700; color: var(--fx-text); }
.md-result-head .btn { flex: none; }
.md-result p { margin: 0; color: var(--fx-text-2); }
.md-result .md-issues { margin: 0; }
/* A dropzone without the level to upload stays on the page, quiet, with its reason. */
.md-dropzone--off { cursor: not-allowed; opacity: 0.6; }
.md-dropzone--off:hover { background: var(--fx-surface-sunken); }
.md-slot-tools { display: flex; margin-top: var(--fx-space-2); }
.md-template { text-decoration: none; }
/* Every error, warning and note of a version sits under its timeline row. */
.fx-tl-find { grid-column: 1 / -1; min-width: 0; }
.fx-tl-find > summary { cursor: pointer; font-size: var(--fx-fs-small); color: var(--fx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-tl-find .md-issues { margin-top: var(--fx-space-2); }
/* The delete button waits for a second click. */
.btn.btn-secondary.md-armed { border-color: var(--fx-err-bd); background: var(--fx-err-bg); color: var(--fx-err-fg); }
/* Why a switch is off sits on its own line under the helper text. */
.fx-gov-toggle .fx-lock-note { display: flex; margin-top: var(--fx-space-1); }

/* ===== v18 · client polish ===== */
/* Equipment intake, rack card: the four inputs take two rows of two, so "Outer width, cm" and its Russian twin read in full. */
.fx-ik-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== lane C2 · two categories in one workspace: the category rows in the account menu (fx/client.js menuRows) ===== */
.fx-menu-cat-label { margin: 0; padding: var(--fx-space-2) var(--fx-space-3) var(--fx-space-1); }
.fx-menu-cat { gap: var(--fx-space-2); }
.fx-menu-cat-mark { display: inline-flex; flex: none; width: var(--fx-icon); height: var(--fx-icon); color: var(--fx-text); }
.fx-menu-cat .fx-menu-cat-mark .ph { width: var(--fx-icon); height: var(--fx-icon); }
.fx-menu-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-menu-cat[aria-checked="true"] { font-weight: 600; }
.fx-menu-cat:focus-visible { outline: var(--fx-focus-outline); outline-offset: -2px; }

/* ===== v18 · lane G · Agent: presence, voice, the run and the dates (DESIGN.md section 8, Agent) =====
   Tokens only, the 4px grid, nothing forced. The orb is gone: the agent is the shelf icon, still at rest. */

/* Presence: a purple tile with three white lines. The lines scan one after another only while a run works. */
.ag-pres { --ag-pres: var(--fx-h-control-sm); display: inline-flex; flex-direction: column; justify-content: center; gap: var(--fx-space-1);
  width: var(--ag-pres); height: var(--ag-pres); padding: 0 var(--fx-space-2); box-sizing: border-box; flex: none;
  border-radius: var(--fx-r-btn); background: var(--fx-brand-bg); }
.ag-pres i { display: block; height: calc(var(--fx-space-1) / 2); border-radius: var(--fx-r-round); background: var(--fx-brand-fg); }
.ag-pres--lg { --ag-pres: calc(var(--fx-h-row) + var(--fx-space-4)); gap: var(--fx-space-2); padding: 0 var(--fx-space-4); border-radius: var(--fx-r-lg); }
.ag-pres--lg i { height: var(--fx-space-1); }
.ag-hello .ag-pres { display: flex; margin: 0 auto; }
.ag-pres--work i { animation: ag-scan calc(var(--fx-dur-pop-in) * 3) linear infinite backwards; }
.ag-pres--work i:nth-child(2) { animation-delay: var(--fx-dur-pop-in); }
.ag-pres--work i:nth-child(3) { animation-delay: calc(var(--fx-dur-pop-in) * 2); }
@keyframes ag-scan { 0% { opacity: .4; } 10%, 30% { opacity: 1; } 40%, 100% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .ag-pres--work i { animation: none; } }
.ag-msg > .ag-avatar { background: transparent; border-radius: var(--fx-r-btn); }

/* Voice: the mic grows into the level strip over the bar while recording; transcribing lays the bars flat. */
.ag-composer .ag-bar { position: relative; }
.ag-strip { position: absolute; z-index: 1; top: var(--fx-space-2); bottom: 0; right: calc(var(--fx-h-control) + var(--fx-space-2)); width: var(--fx-h-control);
  display: flex; align-items: center; gap: var(--fx-space-2); padding: 0 var(--fx-space-1); box-sizing: border-box; overflow: hidden;
  border: 1px solid var(--fx-border-control); border-radius: var(--fx-r-round); background: var(--fx-surface);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: right var(--fx-dur-move) var(--fx-ease-settle), width var(--fx-dur-move) var(--fx-ease-settle), opacity var(--fx-dur-swap) var(--fx-ease-settle), visibility var(--fx-dur-move); }
.ag-composer:not([data-rec="idle"]) .ag-strip { right: 0; width: 100%; visibility: visible; opacity: 1; pointer-events: auto;
  transition: right var(--fx-dur-move) var(--fx-ease-settle), width var(--fx-dur-move) var(--fx-ease-settle), opacity var(--fx-dur-swap) var(--fx-ease-settle), visibility var(--fx-dur-move); }
.ag-composer:not([data-rec="idle"]) .ag-bar > :not(.ag-strip) { visibility: hidden; transition: visibility var(--fx-dur-move); }
.ag-strip .ag-icon-btn { width: var(--fx-h-control-sm); height: var(--fx-h-control-sm); }
.ag-strip .ag-meter { flex: 1; min-width: 0; height: var(--fx-space-5); display: flex; align-items: center; justify-content: flex-end; gap: var(--fx-space-1); overflow: hidden; }
.ag-strip .ag-meter i { display: block; flex: none; width: var(--fx-space-1); height: calc(var(--fx-space-1) / 2); border-radius: var(--fx-r-round); background: var(--fx-border-control);
  transition: height var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease); }
.ag-strip .ag-meter i.on { background: var(--fx-text-2); }
.ag-composer[data-rec="transcribing"] .ag-meter i { transition: height var(--fx-dur-move) var(--fx-ease-settle), background-color var(--fx-dur-move) var(--fx-ease-settle); }
.ag-strip .ag-rec-time { flex: none; white-space: nowrap; }
.ag-input.ag-drop { animation: ag-drop var(--fx-dur-page) var(--fx-ease-settle); }
@keyframes ag-drop { from { opacity: 0; transform: translateY(calc(var(--fx-space-2) * -1)); } to { opacity: 1; transform: none; } }

/* Icons from the sprite, 14px, in the places the old glyphs stood. */
.ag-icon-btn .ph, .ag-src .ph { width: var(--fx-icon); height: var(--fx-icon); }
.ag-src .ph { color: var(--fx-text-faint); }
.ag-menu-row > .ph { color: var(--fx-text-muted); }
.ag-menu-row > .ph:last-child { margin-left: auto; }

/* The run: a done step is an ink node with a check that draws itself once; a finished step shows its quantity. */
.ag-step--done .ag-step-mk { background: var(--fx-ink); border-color: var(--fx-ink); color: var(--fx-on-ink); }
.ag-step-mk .ph, .ag-step-mk .ag-check { display: block; width: var(--fx-icon-tag); height: var(--fx-icon-tag); }
.ag-step-qty { flex: none; align-self: center; font-family: var(--fx-mono); font-size: var(--fx-fs-body); font-weight: var(--fx-fw-num); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fx-text); }
.ag-step-qty span { color: var(--fx-text-faint); font-weight: var(--fx-fw-small); }

/* The campaign dates: one trigger, the kit's date range opens from it. */
.ix-dates { max-width: 100%; }
.ix-dates .ix-dates-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== v18 · themes (lane T) ===== */
/* Rules for this block (tests/test_design_guard_v18.py): tokens only, the 4px grid, nothing forced. */

/* Settings, Appearance: Light, Dark, System in the house segmented control (fx/screen-settings.js). */
.fx-settings-theme { display: flex; width: 100%; }
.fx-settings-theme .fx-seg-btn { flex: 1; justify-content: center; min-width: 0; }

/* The dark walk. A raster logo and a background SVG cannot read tokens, so dark swaps their source:
   the logo with the light wordmark (expanded sidebar and sign-in card) and the rack skins drawn in the dark ink. */
:root[data-theme="dark"] .sidebar:not(.sidebar--collapsed) .sidebar-logo img,
:root[data-theme="dark"] .fx-signin-logo { content: url("/designguides/logo_black_theme.png"); }
:root[data-theme="dark"] .shelf-rack.rack--wire_rack { background-image: url(/static/equipment/wire_rack.dark.svg); }
:root[data-theme="dark"] .shelf-rack.rack--gondola_bay { background-image: url(/static/equipment/gondola_bay.dark.svg); }
:root[data-theme="dark"] .shelf-rack.rack--floor_stand { background-image: url(/static/equipment/floor_stand.dark.svg); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .sidebar:not(.sidebar--collapsed) .sidebar-logo img,
  :root[data-theme="system"] .fx-signin-logo { content: url("/designguides/logo_black_theme.png"); }
  :root[data-theme="system"] .shelf-rack.rack--wire_rack { background-image: url(/static/equipment/wire_rack.dark.svg); }
  :root[data-theme="system"] .shelf-rack.rack--gondola_bay { background-image: url(/static/equipment/gondola_bay.dark.svg); }
  :root[data-theme="system"] .shelf-rack.rack--floor_stand { background-image: url(/static/equipment/floor_stand.dark.svg); }
}

/* Shelf hint popover: the icon is a mask over the status solid, so it takes the status ink in both themes
   (a data URI cannot read a token). The chip behind it keeps the status tint (styles.css). */
.shelf-hint-popover::after { content: ""; position: absolute; left: 16px; top: 16px; width: var(--fx-icon); height: var(--fx-icon);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.shelf-hint-popover--info::after { background-color: var(--fx-warn-solid);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.shelf-hint-popover--block::after { background-color: var(--fx-err-solid);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }

/* Pack and product shots keep their colours on a tile (DESIGN.md section 4): a dark pack on a dark shelf would vanish.
   --fx-pack-tile is transparent in light, so light does not change, and the pack-6 tile in dark. */
.facing-images img, .facing-item img, .accessory-slot img, .sku-card-thumb, .fxp-thumb, .fxp-trigger-thumb, .fxp-pv-img img { background: var(--fx-pack-tile); }
/* The hover card shows the pack larger on the same tile: --fx-pack-6 is the light value it had (--fx-surface-sunken). */
.sku-popover-image { background: var(--fx-pack-6); }

/* ===== v18 · design system v2 · lane P · campaign cockpit (fx/cockpit.js) ===== */
/* Campaign flow (DESIGN.md §8), in the cockpit and in the Standards header: a bar (Step n of N, the mini progress, Hide steps), then one
   column per step: node, connector, name, hint. Done is an ink node with a drawn check, the current step has the purple ring, a step
   to come shows its number. Below 620px the columns stack. */
.fx-ck-steps { display: flex; flex: none; flex-direction: column; }
.fx-ck-steps--inline { padding: 0; border-bottom: 0; }
.fx-ck-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fx-space-2) var(--fx-space-3); min-width: 0; padding: var(--fx-space-2) 0 0; }
.fx-ck-steps--inline .fx-ck-bar { padding-top: 0; }
.fx-ck-sum { display: inline-flex; align-items: baseline; gap: var(--fx-space-2); min-width: 0; font-size: var(--fx-fs-small); color: var(--fx-text-muted); white-space: nowrap; }
.fx-ck-sum b { font-weight: 700; color: var(--fx-text); }
.fx-ck-sum span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fx-ck-prog { flex: 0 1 96px; height: var(--fx-space-1); border-radius: var(--fx-r-round); background: var(--fx-surface-sunken); overflow: hidden; }
.fx-ck-prog i { display: block; height: 100%; border-radius: var(--fx-r-round); background: var(--fx-ink); transition: width var(--fx-dur-move) var(--fx-ease-settle); }
.fx-ck-fold-btn { margin-left: auto; }
.fx-ck-fold-btn .ph { transition: transform var(--fx-dur-swap) var(--fx-ease-settle); }
.fx-ck-fold-btn[aria-expanded="true"] .ph { transform: rotate(180deg); }
.fx-ck-fold { min-width: 0; }
.fx-ck-step:not(:last-child)::after { content: none; }
.fx-ck-step button { flex-direction: column; align-items: stretch; gap: var(--fx-space-1); padding: var(--fx-space-3) var(--fx-space-2) var(--fx-space-3) 0; }
.fx-ck-node { display: flex; align-items: center; gap: var(--fx-space-2); }
.fx-ck-link { flex: 1; min-width: var(--fx-space-4); height: 2px; border-radius: var(--fx-r-round); background: var(--fx-border-strong); transition: background-color var(--fx-dur-move) var(--fx-ease-settle); }
.fx-ck-step:last-child .fx-ck-link { display: none; }
.fx-ck-step--done .fx-ck-dot { border-color: var(--fx-ink); background: var(--fx-ink); color: var(--fx-on-ink); }
.fx-ck-step--done .fx-ck-link { background: var(--fx-ink); }
.fx-ck-step--current .fx-ck-dot { background: var(--fx-surface); }
.fx-ck-tick { display: block; width: var(--fx-icon); height: var(--fx-icon); }
.fx-ck-step-text { padding-top: 0; }
.fx-ck-step-text b { overflow: hidden; text-overflow: ellipsis; }
.fx-ck-step-text small { display: block; }
.fx-ck-step button:hover .fx-ck-step-text b { color: var(--fx-text); }
@media (max-width: 620px) {
  .fx-ck-steps { padding-right: var(--fx-space-4); padding-left: var(--fx-space-4); }
  .fx-ck-steps--inline { padding: 0; }
  .fx-ck-flow { flex-direction: column; }
  .fx-ck-step button, .fx-ck-step.is-open button { flex-direction: row; gap: var(--fx-space-3); padding: 0; border-bottom: 0; }
  .fx-ck-node { flex-direction: column; gap: var(--fx-space-1); }
  .fx-ck-link { flex: 1; width: 2px; min-width: 0; height: auto; min-height: var(--fx-space-4); }
  .fx-ck-step-text { flex: 1; justify-content: center; padding: var(--fx-space-1) 0 var(--fx-space-3); }
  .fx-ck-step:last-child .fx-ck-step-text { padding-bottom: 0; }
}
/* The dialog is modal and sits in the top layer: popovers, menus, confirms and toasts are born in this layer, inside it. */
.fx-ck-layer { display: contents; }
/* Phosphor icons (fxUI.icon) where the cockpit drew its own glyphs: filled, no outline, the token size. */
.fx-ck-head .fx-icon-btn .ph, .fx-ck-caret .ph, .fx-ck-chain-actions .ph, .tb-btn .ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
.fx-ck-actions .btn ~ .btn { margin-left: var(--fx-space-2); }
/* The brief's dates: one trigger for the whole range, on one line, in mono like every date of a table. */
.fx-ck-dates { width: 100%; height: var(--fx-h-control); padding: 0 var(--fx-space-3); justify-content: flex-start; font-size: var(--fx-fs-small); font-weight: 500; }
.fx-ck-dates-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--fx-mono); }
.fx-ck-dates:disabled { cursor: not-allowed; }
/* The brand Build button is a .tb-btn: it takes the states of fxUI.statusButton (ui.css draws them for .btn). */
.tb-btn.fx-sb { gap: 0; transition: background-color var(--fx-dur-swap) var(--fx-ease-settle), border-color var(--fx-dur-swap) var(--fx-ease-settle), color var(--fx-dur-swap) var(--fx-ease-settle), transform var(--fx-dur-tick) var(--fx-ease); }
.tb-btn--accent.fx-sb[data-status="success"], .tb-btn--accent.fx-sb[data-status="success"]:hover { background-color: var(--fx-ok-strong); border-color: var(--fx-ok-strong); color: var(--fx-ok-strong-fg); }
.tb-btn--accent.fx-sb[data-status="error"], .tb-btn--accent.fx-sb[data-status="error"]:hover { background-color: var(--fx-err-bg); border-color: var(--fx-err-bd); color: var(--fx-err-fg); }

/* ===== Design system v2 · lane S · Standards and History ===== */
/* Standards: the Cards / List switch is the app's .fx-seg, at the right end of the toolbar. */
.fx-lib-toolbar > .fx-seg { margin-left: auto; }
/* Standards cards: the "⋯" button is the trigger of an fxUI.menu; its icon is the sprite dots, filled, 14px. */
.fx-history-overflow-btn .ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
.fx-history-overflow-btn[aria-expanded="true"] { background: var(--fx-surface-sunken); color: var(--fx-text); }
.fx-history-overflow-btn:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
/* History: the date range is one tb-btn that opens fxUI.dateRange; its label keeps to one line with the full text in the title. */
.fx-history-filterbar .tb-btn .ph { width: var(--fx-icon); height: var(--fx-icon); }
.fx-history-dates .fx-history-dates-lbl { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-history-dates[aria-expanded="true"] { background: var(--fx-surface-sunken); border-color: var(--fx-border-strong); }
/* Standards: sprite icons in controls that were drawn as strokes stay solid; the add-level button lays its icon and label in a row. */
.fx-bulk .ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
.fx-add-level-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fx-space-2); }
/* Lane S fixes: the wizard's "Add" chip lays its plus and its label in a row (the remove chips of the wizard and of History draw the sprite cross). */
.fx-chip-add { display: inline-flex; align-items: center; gap: var(--fx-space-1); }

/* ===== v18 · design system v2 · lane A: approvals (card, inbox, count badges, activity dates) ===== */
/* Tokens only, the 4px grid, nothing forced (tests/test_design_guard_v18.py). DESIGN.md section 8: Approval card, Approvals inbox. */

/* Approval card, side panel of Automate (fx/campaigns.js approvalHtml): segment bar, "Step n of 3 · Draft", what comes next, one status button. */
.fx-appr { display: flex; flex-direction: column; }
.fx-appr-card { display: flex; flex-direction: column; gap: var(--fx-space-2); padding: var(--fx-space-1); margin: calc(var(--fx-space-1) * -1); }
.fx-appr-done:not([hidden]) + [data-fold] > .fx-appr-card { padding-top: var(--fx-space-3); }
.fx-appr-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fx-space-1); margin: 0; padding: 0; list-style: none; }
.fx-appr-seg-i { height: var(--fx-space-1); border-radius: var(--fx-r-round); background: var(--fx-surface-sunken); transition: background-color var(--fx-dur-swap) var(--fx-ease-settle); }
.fx-appr-seg-i--done { background: var(--fx-ink); }
.fx-appr-seg-i--cur { background: linear-gradient(to right, var(--fx-ink) 50%, var(--fx-surface-sunken) 50%); }
.fx-appr-step, .fx-appr-next { margin: 0; font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); }
.fx-appr-step { color: var(--fx-text-2); }
.fx-appr-step b { font-weight: 700; color: var(--fx-text); }
.fx-appr-next { color: var(--fx-text-muted); }
.fx-appr-done { display: flex; align-items: center; gap: var(--fx-space-2); min-width: 0; margin: 0; font-size: var(--fx-fs-small); font-weight: 600; color: var(--fx-text-2); }
.fx-appr-done[hidden] { display: none; }
.fx-appr-done-ic { flex: none; width: var(--fx-icon); height: var(--fx-icon); color: var(--fx-ok-solid); }
.fx-appr-done-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-appr-done-text .fx-mono { font-weight: 500; }

/* Approvals inbox, Team account: one white panel; red only on the count. Panel 16/700, group 13.5/700, item 13/600, meta mono, overline mono caps.
   The type tokens have no 13.5 and 13: the group takes --fx-fs-h3 (14) and the item --fx-fs-small (12.5). */
.fx-appr-head { display: flex; align-items: center; gap: var(--fx-space-2); margin-bottom: var(--fx-space-3); }
.fx-appr-title { margin: 0; min-width: 0; font-size: var(--fx-fs-h2); font-weight: var(--fx-fw-h2); line-height: var(--fx-lh-h2); letter-spacing: var(--fx-ls-h2); color: var(--fx-text); }
.fx-appr-head .fx-count { flex: none; min-width: 20px; height: 20px; padding: 0 var(--fx-space-2); border-radius: var(--fx-r-round); background: var(--fx-badge-bg); color: var(--fx-badge-fg);
  font-family: var(--fx-mono); font-size: var(--fx-fs-small); font-weight: 600; line-height: 20px; text-align: center; }
.fx-approval-group-head { min-height: var(--fx-h-row); margin-bottom: 0; }
.fx-approval-group-head .ph { color: var(--fx-text-muted); }
.fx-approval-group-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fx-fs-h3); font-weight: var(--fx-fw-h3); letter-spacing: var(--fx-ls-h3); color: var(--fx-text); }
.fx-approval-group-head .app-chip { flex: none; }
.fx-approval-group-head .fx-count { flex: none; font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: 600; color: var(--fx-text-muted); }
.fx-approval-group-head .btn { flex: none; }
.fx-approval-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fx-space-1) var(--fx-space-2); font-size: var(--fx-fs-small); font-weight: 600; color: var(--fx-text); }
.fx-approval-name { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-approval-title .app-chip { flex: none; }
.fx-approval-meta { display: flex; flex-wrap: wrap; gap: 0 var(--fx-space-2); margin-top: var(--fx-space-1); font-family: var(--fx-mono); font-size: var(--fx-fs-label); color: var(--fx-text-faint); }
.fx-approval-meta span + span::before { content: "·"; margin-right: var(--fx-space-2); }
.fx-acct-scroll .fx-approval-list > .fx-approval-row:first-child .fx-approval-item { border-top: 0; padding-top: 0; }
/* A fold clips what is inside it, a focus ring included: the content takes a small margin back so the ring stays whole. */
.fx-approval-row > div, .fx-approval-fold > div { padding: var(--fx-space-1); margin: calc(var(--fx-space-1) * -1); }
/* The row buttons carry sprite icons now; the masks of the earlier blocks would draw a second one. A status button keeps its own gap (its icon slot). */
.fx-acct-scroll [data-console]::before, .fx-client-admin [data-console]::before { content: none; }
.fx-acct-scroll .fx-approval-actions .btn.fx-sb, .fx-acct-fold-body .fx-row-actions .btn.fx-sb, .fx-invite-row .btn.fx-sb { gap: 0; }

/* Count of what waits: a red badge on the "Team account" row of the account menu and on the account block; a red dot on the avatar while the sidebar is collapsed. */
.fx-nav-badge { min-width: 20px; height: 20px; padding: 0 var(--fx-space-2); border-radius: var(--fx-r-round); background: var(--fx-badge-bg); color: var(--fx-badge-fg);
  font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: 600; line-height: 20px; text-align: center; }
.fx-account-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 var(--fx-space-2);
  border-radius: var(--fx-r-round); background: var(--fx-badge-bg); color: var(--fx-badge-fg); font-family: var(--fx-mono); font-size: var(--fx-fs-label); font-weight: 600; line-height: 20px; }
.fx-account-badge + .sidebar-account-chevron { margin-left: 0; }
.sidebar.sidebar--collapsed .fx-account-badge { position: absolute; top: var(--fx-space-1); left: calc(50% + var(--fx-space-2)); min-width: 0; width: 10px; height: 10px; margin: 0; padding: 0;
  box-sizing: content-box; border: 2px solid var(--fx-surface); pointer-events: none; }
.sidebar.sidebar--collapsed .fx-account-badge .n { display: none; }

/* Activity: the date range is one trigger (fxUI.dateRange), with a way back to all time. */
.fx-acct-filters [hidden] { display: none; }
.fx-act-dates { height: 36px; max-width: 100%; }
.fx-act-dates .ph { color: var(--fx-text-muted); }
.fx-act-dates-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-acct-search .ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; color: var(--fx-text-muted); }
/* The fold chevron of the Team account blocks is the sprite's caret now. */
.fx-acct-fold-chev.ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; color: var(--fx-text-muted); transition: transform var(--fx-dur-slow) var(--fx-ease-settle); }

/* ===== v18 · design system v2 · lane F: shell and client screens on the sprite (nav-registry, integrations, auth, settings, help) ===== */
/* Tokens only, the 4px grid, nothing forced (tests/test_design_guard_v18.py). */

/* Sidebar rows: the holder keeps today's 18 x 16 box; it carries a Regular and a Fill glyph, the active row shows the Fill one (no re-render). */
.nav-ic { position: relative; flex: none; width: calc(var(--fx-space-4) + var(--fx-space-1) / 2); height: var(--fx-space-4); }
.nav-ic .ph { position: absolute; inset: 0; margin: auto; fill: currentColor; stroke: none; transition: opacity var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease); }
.nav-ic .f { opacity: 0; }
.nav-item--active .nav-ic .r { opacity: 0; }
.nav-item--active .nav-ic .f { opacity: 1; color: var(--fx-accent); }
.sidebar.sidebar--collapsed .nav-parent:has(.nav-subitem--active) > .nav-item--parent .nav-ic .r { opacity: 0; }
.sidebar.sidebar--collapsed .nav-parent:has(.nav-subitem--active) > .nav-item--parent .nav-ic .f { opacity: 1; color: var(--fx-accent); }
/* The chevron and the lock were stroke icons; the sprite glyphs are filled paths at --fx-icon. */
.nav-chevron.ph, .nav-lock.ph { stroke: none; fill: currentColor; width: var(--fx-icon); height: var(--fx-icon); }

/* A sprite glyph is a filled path. Older rules on these containers drew stroke icons (fill none, a stroke, a size); each is answered here. */
.fxp-trigger .ph { fill: currentColor; stroke: none; }
.fx-history-empty .empty-state-icon .ph { fill: currentColor; stroke: none; width: var(--fx-icon-empty); height: var(--fx-icon-empty); }
.fx-progress-dot .ph { fill: var(--fx-on-accent); stroke: none; width: calc(var(--fx-icon-tag) - var(--fx-space-1) / 2); height: calc(var(--fx-icon-tag) - var(--fx-space-1) / 2); }
.fx-ack .ph { fill: currentColor; stroke: none; width: var(--fx-icon); height: var(--fx-icon); }
.fx-selbox .ph, .fx-lock-note .ph { fill: currentColor; stroke: none; width: var(--fx-icon-tag); height: var(--fx-icon-tag); }
.fx-disc-caret.ph, .fx-mul-row .fx-disc-caret.ph { fill: currentColor; stroke: none; width: var(--fx-icon-tag); height: var(--fx-icon-tag); }

/* ===== v18 · design system v2 · AL's notes of 13 Oct: Settings rows, folds that move, centred sprite icons ===== */
/* Settings: one Appearance section; a row is .fx-rule (label and note on the left, the control on the right). */
.fx-settings-grid { grid-template-columns: minmax(0, 720px); }
.fx-settings-card .fx-rule > div:first-child { min-width: 0; }
.fx-rule .fx-settings-theme, .fx-rule .fx-settings-language { display: inline-flex; width: auto; flex: none; }
.fx-rule .fx-settings-theme .fx-seg-btn, .fx-rule .fx-settings-language .fx-seg-btn { flex: none; white-space: nowrap; }
/* Team account: an accordion body sits in a kit fold. The inner box clips while it moves; 4px of room keeps focus rings whole. */
.fx-acct-fold-wrap { flex: 1 1 auto; min-height: 0; }
.fx-acct-fold-wrap > div { display: flex; flex-direction: column; padding: 0 var(--fx-space-1) var(--fx-space-1); margin: 0 calc(-1 * var(--fx-space-1)) calc(-1 * var(--fx-space-1)); }
/* Sidebar: a submenu opens and closes with the fold timing (expanded sidebar; the collapsed flyout keeps its own rules). */
.sidebar:not(.sidebar--collapsed) .nav-sub { display: flex; max-height: 240px; overflow: hidden;
  transition: max-height var(--fx-dur-fold) var(--fx-ease-settle), margin var(--fx-dur-fold) var(--fx-ease-settle), opacity var(--fx-dur-swap) var(--fx-ease-settle), visibility var(--fx-dur-fold); }
.sidebar:not(.sidebar--collapsed) .nav-parent:not(.nav-parent--open) > .nav-sub { max-height: 0; margin-block: 0; opacity: 0; visibility: hidden; }
/* A sprite icon is a block: where the old drawing was centred by text-align, the icon centres itself. */
.dropzone-icon .ph { margin: 0 auto; width: var(--fx-icon-empty); height: var(--fx-icon-empty); }

/* ===== v18 · design system v2 · one-line labels and narrow screens ===== */
/* DESIGN.md rule 7: a tag, a chip and a counter stay on one line. Checked with tools/layout_probe.js at 390 px, light and dark, EN and RU. */
.fx-history-tag, .ag-src, .fx-pager-count { white-space: nowrap; }
.fx-settings-profile > div { min-width: 0; }
.fx-settings-profile .fx-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A label drawn as a button (Upload avatar) keeps its icon beside its text: the form rule for labels stacks them. */
.fx-client-admin label.btn, [data-console-settings] label.btn, .fx-std-levels label.btn, .fx-std-add label.btn { flex-direction: row; }
/* Below 720 px the sidebar collapses by itself (app.js), a History row keeps its picture, its name and its menu (sizes and the time stay on wider screens),
   and a table scrolls inside its frame at the column widths it needs. */
@media (max-width: 720px) {
  .fx-history-row { grid-template-columns: 56px minmax(0, 1fr) 28px; }
  .fx-history-row .fx-history-inputs, .fx-history-row .fx-history-time { display: none; }
  .fx-settings-card .fx-rule { flex-wrap: wrap; }
  .fx-pager, .fx-pager-controls { flex-wrap: wrap; }
  .fx-settings-card .fx-rule > div:first-child { flex: 1 1 100%; }
  .fx-tbl-wrap > .fx-tbl { min-width: 640px; }
}
/* A table of six or more columns keeps its column widths and scrolls inside its frame, at any width (1024 px: the activity log). */
.fx-tbl-wrap > .fx-tbl:has(th:nth-child(6)) { min-width: 960px; }
/* A screen-reader line (a status button's live region) sits at the corner of its box: placed where its button is, inside a
   table that scrolls in its frame, it would widen the whole page. */
.fx-sr { top: 0; left: 0; }

/* ===== Design system v2 · lane K · campaigns and equipment intake ===== */
/* Sprite icons (fxUI.icon) where these screens drew their own. A sprite icon is a filled path: the older rules on these containers drew outlines and set sizes. */
.fx-lock-note .ph, .fx-ik-template .ph, .fx-ik-done-icon .ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
.fx-cs-dot .ph { width: var(--fx-icon-tag); height: var(--fx-icon-tag); fill: currentColor; stroke: none; }
.fx-progress-dot .ph { width: 100%; height: 100%; fill: currentColor; stroke: none; color: var(--fx-on-accent); }
.fx-disc-caret.ph, .fx-mul-row .fx-disc-caret.ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
.fx-mul-head .fx-icon-btn .ph, .fx-mul-table .fx-icon-btn .ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
.fx-ik-drop-icon .ph { width: var(--fx-icon-empty); height: var(--fx-icon-empty); fill: currentColor; stroke: none; color: var(--fx-accent-text); }
.fx-ik-empty .ph { width: var(--fx-icon-empty); height: var(--fx-icon-empty); fill: currentColor; stroke: none; color: var(--fx-text-faint); }
.fx-ik-done-icon .ph { color: var(--fx-on-accent); }
/* "All steps" is a toggle: its caret turns when the steps are open. */
.fx-cs-toggle .ph { transition: transform var(--fx-dur-swap) var(--fx-ease-settle); }
.fx-cstep--open .fx-cs-toggle .ph { transform: rotate(180deg); }
/* A toolbar button that runs on fxUI.statusButton takes the states ui.css draws for .btn: graphite turns ok-strong, the others take the ok tint, a refusal the err tint. */
.tb-btn.fx-sb--soft[data-status="success"], .tb-btn.fx-sb--soft[data-status="success"]:hover { background-color: var(--fx-ok-bg); border-color: var(--fx-ok-bd); color: var(--fx-ok-fg); }
.tb-btn--solid.fx-sb[data-status="success"], .tb-btn--solid.fx-sb[data-status="success"]:hover { background-color: var(--fx-ok-strong); border-color: var(--fx-ok-strong); color: var(--fx-ok-strong-fg); }
.tb-btn.fx-sb[data-status="error"], .tb-btn.fx-sb[data-status="error"]:hover { background-color: var(--fx-err-bg); border-color: var(--fx-err-bd); color: var(--fx-err-fg); }

/* Lane M · index.html static markup: the buttons, tiles and rows carry Phosphor sprite icons (filled paths).
   Older rules on these containers drew outlines or fixed sizes of 13 to 17px; the sprite icon reads at --fx-icon. */
.sidebar-toggle .ph, .sidebar-account-menu .menu-row .ph, .hub-pill-icons .ph, .seg-btn .ph, .md-tile-icon .ph, .md-tile-cta .ph,
.add-element-icon .ph, .add-element-back .ph, .test-add-slot .ph { fill: currentColor; stroke: none; width: var(--fx-icon); height: var(--fx-icon); }
/* The account menu opens upward: the sprite has no caret-up, so the caret-down turns over. */
.sidebar-account-chevron.ph { transform: rotate(180deg); }

/* ===== Design system v2 · lane J · app.js and grow.js: sprite icons, status buttons, [hidden] ===== */
/* Every icon the two scripts draw is fxUI.icon: a filled path at --fx-icon. Older rules on the containers below drew outlines or
   sizes of 13 to 17px; the overrides here are tokens only, 4px grid, nothing forced. */
/* The sidebar toggle mirrors while the sidebar is collapsed, so the panel edge points where the sidebar goes. */
.sidebar.sidebar--collapsed .sidebar-toggle .ph { transform: scaleX(-1); }
/* Menu rows of the top bar (Export, Share, Save), the caret of the three triggers. */
.menu-row .ph, .tb-menu-wrap .tb-btn-caret { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
.tb-menu-wrap .tb-btn-caret { opacity: .75; margin-left: 0; }
.tb-menu-wrap .tb-btn.fx-sb .tb-btn-caret { margin-left: var(--fx-space-2); }   /* the status button has no flex gap: its icon slot and the caret carry the space */
/* The equipment card without a photo draws the cube, small and centred. */
.equipment-card .eq-icon .ph { width: var(--fx-icon-empty); height: var(--fx-icon-empty); opacity: 1; color: var(--fx-text-muted); }
/* Customize: the fit refusal, the change button, the notes and the shelf map. */
.equip-fit-error-title { display: flex; align-items: center; gap: var(--fx-space-1); }
.equip-height-note--ic { display: flex; align-items: flex-start; gap: var(--fx-space-1); }
.equip-height-note--ic .ph { margin-top: var(--fx-space-1); color: var(--fx-text-muted); }
.equip-warning-icon { display: inline-flex; align-items: center; margin-top: var(--fx-space-1); }
.equip-map-arrow { display: inline-flex; color: var(--fx-text-faint); }
/* POSM and rack: the remove marks, "+ Shelf". */
.posm-remove, .rack-icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.posm-remove .ph, .rack-icon-btn .ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
.rack-add-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--fx-space-1); }
.filter-tag button .ph { width: var(--fx-icon-tag); height: var(--fx-icon-tag); }
.fxp-pv-action { display: inline-flex; align-items: center; justify-content: center; gap: var(--fx-space-2); }
/* The facings stepper of the SKU detail. */
.detail-facings button { display: inline-flex; align-items: center; justify-content: center; }
/* Master Data: the drop zone mark and the requirements drawer mark are the sprite at the empty-state size; the row buttons keep the 14px icon. */
.dropzone-icon, .md-panel-icon { display: flex; align-items: center; justify-content: center; }
.dropzone-icon .ph, .md-panel-icon .ph { width: var(--fx-icon-empty); height: var(--fx-icon-empty); fill: currentColor; stroke: none; }
/* Test: the source buttons and their small text buttons. */
.test-source-action .ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
.test-remove-slot, .test-clear-slot { display: inline-flex; align-items: center; gap: var(--fx-space-1); }
.test-remove-slot .ph, .test-clear-slot .ph { width: var(--fx-icon); height: var(--fx-icon); fill: currentColor; stroke: none; }
/* Validation status and the capacity blocker carry one mark inside their circle. */
.validation-status-icon .ph, .capacity-blocker-icon .ph { width: var(--fx-icon-empty); height: var(--fx-icon-empty); fill: currentColor; stroke: none; }
/* Grow: the arrow of a finding's action and the arrow inside a line of text. */
.ows-dx-act { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fx-space-1); }
.ows-dx-act .ph { color: var(--fx-text-faint); }
.ows-inline-ic { display: inline-block; vertical-align: text-bottom; color: var(--fx-text-faint); }
/* Show and hide through the hidden attribute (J2): the classes below set their own display. */
.equipment-grid[hidden], .sku-popover-image[hidden] { display: none; }
/* The Save, Export and Share buttons of the top bar are tb-btn status buttons (fxUI.statusButton): they take the same states as a .btn. */
.tb-btn.fx-sb--soft:not(.tb-btn--solid):not(.tb-btn--accent)[data-status="success"], .tb-btn.fx-sb--soft:not(.tb-btn--solid):not(.tb-btn--accent)[data-status="success"]:hover { background-color: var(--fx-ok-bg); border-color: var(--fx-ok-bd); color: var(--fx-ok-fg); }
.tb-btn--solid.fx-sb[data-status="success"], .tb-btn--solid.fx-sb[data-status="success"]:hover { background-color: var(--fx-ok-strong); border-color: var(--fx-ok-strong); color: var(--fx-ok-strong-fg); }
.tb-btn.fx-sb[data-status="error"], .tb-btn.fx-sb[data-status="error"]:hover { background-color: var(--fx-err-bg); border-color: var(--fx-err-bd); color: var(--fx-err-fg); }
.tb-btn.fx-sb[aria-busy] { cursor: progress; }

/* ===== v18 · design system v2 · danger button ===== */
/* fxUI.confirm and the Delete level of fxUI.menu draw their button as .btn-danger; static/design/base.css styles it only for
   pages without the app's styles.css. Status colour on the mark (the label), the surface stays the surface. */
.btn.btn-danger { background: var(--fx-surface); color: var(--fx-err-fg); border-color: var(--fx-border-control); }
.btn.btn-danger:not(:disabled):hover { background: var(--fx-err-bg); border-color: var(--fx-err-solid); }

/* ===== v18 · design system v2 · review of lanes M and J ===== */
/* An image hidden by its onerror keeps hidden: img { display: block } in styles.css would otherwise win over [hidden]. */
img[hidden] { display: none; }
/* The rack editor's Add bay and Fill uniformly wrap in RU instead of pushing the 244px panel sideways. */
.custom-rack-editor { grid-template-columns: minmax(0, 1fr); }
.custom-rack-editor .filter-inline { flex-wrap: wrap; }
/* Faint carets: a sprite icon is filled, so the colour comes from color. */
.add-element-caret.ph, .sidebar-account-chevron.ph { color: var(--fx-text-faint); }
/* At phone width the Create / Edit / Customize tabs keep their words and drop their icons. */
@media (max-width: 420px) { .seg .seg-btn .ph { display: none; } }

/* ===== v18 · AL's notes of 15 Oct: sidebar icons ===== */
/* The Planograms parent takes its Fill glyph while Automate or Grow is the open screen, the way Main and Master Data do,
   in the open sidebar as well as the collapsed one. The child row keeps the selection; the parent row gets no fill. */
.nav-parent:has(.nav-subitem--active) > .nav-item--parent .nav-ic .r { opacity: 0; }
.nav-parent:has(.nav-subitem--active) > .nav-item--parent .nav-ic .f { opacity: 1; color: var(--fx-accent); }

/* ===== v18 · AL's notes of 15 Oct: a POSM on a regular shelf is placed like on the photo rack ===== */
/* Its places take the photo slots' look (.equip-slot in styles.css: dashed accent, accent tint) over the shelf rows. */
.zone-posm-hint { display: flex; align-items: center; gap: var(--fx-space-2); margin: 0 0 var(--fx-space-2); }
.zone-posm-hint[hidden] { display: none; }
.shelf-rack .zone-slot { top: var(--fx-space-1); bottom: var(--fx-space-1); z-index: 8; }
.shelf-rack .zone-slot--part { opacity: 0; pointer-events: none; }
.shelf-rack .zone-slot.is-hover { opacity: 1; z-index: 9; background: color-mix(in srgb, var(--fx-accent) 38%, transparent); border-style: solid; }
.shelf-rack .zone-slot[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.shelf-rack .zone-slot:focus-visible { outline: var(--fx-focus-outline); outline-offset: 2px; }
.shelf-rack.shelf-rack--placing .facing-item, .shelf-rack.shelf-rack--placing .posm-block--editor { pointer-events: none; }
.zone-slot-cost { position: absolute; top: var(--fx-space-1); right: var(--fx-space-1); padding: 0 var(--fx-space-1); border-radius: var(--fx-r-xs); font-family: var(--fx-mono); font-size: var(--fx-fs-label); line-height: 1.5; color: var(--fx-warn-fg); background: var(--fx-warn-bg); opacity: 0; transition: opacity var(--fx-dur) var(--fx-ease); }
/* what a place costs shows on the place under the pointer or the keyboard, not on all of them at once */
.shelf-rack .zone-slot.is-hover .zone-slot-cost { opacity: 1; }

/* ===== v18 · AL's notes of 15 Oct: tobacco paths on the interaction layer ===== */
/* The photo rack's own controls (Change equipment, the slots, the remove cross) press and show keyboard focus like the house buttons. */
.equip-change-btn, .posm-remove, .posm-cancel, .equip-slot {
  transition: background-color var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease), transform var(--fx-dur-tick) var(--fx-ease);
}
.equip-change-btn:active, .posm-remove:active, .posm-cancel:active, .equip-slot:active:not([aria-disabled="true"]) {
  transform: scale(var(--fx-press-scale));
  transition-duration: var(--fx-dur-press);
}
.equip-change-btn:focus-visible, .posm-remove:focus-visible, .posm-cancel:focus-visible, .equip-slot:focus-visible {
  outline: var(--fx-focus-outline);
  outline-offset: 2px;
}
.equip-slot:focus-visible { border-style: solid; }
/* The placing hint on the photo rack reads like the one on a regular shelf (.zone-posm-hint): text, then a ghost Cancel. */
.posm-hint { display: flex; align-items: center; gap: var(--fx-space-2); }
/* Customize panel, photo rack: the two layer headings sit on the 4px grid. */
.equip-layer-label { margin-bottom: var(--fx-space-2); }
.equip-layer-label--next { margin-top: var(--fx-space-4); }
/* Artwork whose proportion disagrees with its declared size is stretched; the mark says so. */
.equip-posm--stretched { outline: 1.5px solid var(--fx-warn-solid); }
/* Master Data > Equipment & POSM: the loaded-equipment table. */
.md-equip-name { font-weight: var(--fx-fw-label); }
.md-equip-dot { display: inline-block; margin-right: var(--fx-space-1); }

/* ===== v18 · AL's notes of 15 Oct: Grow step 1 shows a thumbnail per shelf card (the Standards thumbnail, fxThumbs) ===== */
.ows-card-thumb-wrap { display: block; pointer-events: none; }
.ows-card-thumb { display: block; width: 100%; aspect-ratio: 240 / 140; object-fit: cover; border-radius: var(--fx-r-sm); background: var(--fx-surface-2); }
.ows-card-thumb[hidden] { display: none; }
/* styles.css gives .ows-card-mini display: block, which would beat the hidden attribute of the waiting line */
.ows-card-thumb-wrap .ows-card-mini[hidden] { display: none; }

/* QA 16 Oct · group F */
/* The approver's note for the author in the approval card (fx/campaigns.js approvalHtml), above the ghost Request changes. */
.fx-appr-note { display: block; width: 100%; min-height: calc(var(--fx-space-6) + var(--fx-space-4)); padding: var(--fx-space-2); resize: vertical; font: inherit; font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); }
/* QA 16 Oct · group A2 */
/* Product details: the facings stepper is one line, a 28px button either side of a narrow number field. */
.detail-row.detail-facings { align-items: center; gap: var(--fx-space-2); }
.detail-row.detail-facings .detail-label { flex: none; white-space: nowrap; }
.detail-row.detail-facings .detail-value { display: inline-flex; flex: none; align-items: center; gap: var(--fx-space-1); }
.detail-facings .detail-value button { width: var(--fx-h-control-sm); height: var(--fx-h-control-sm); padding: 0; border: 1px solid var(--fx-border-control);
  border-radius: var(--fx-r-btn); background: var(--fx-surface); color: var(--fx-text); cursor: pointer; transition: border-color var(--fx-dur) var(--fx-ease); }
.detail-facings .detail-value button:hover { border-color: var(--fx-text-muted); }
.detail-facings .detail-value input[type="number"] { width: 48px; height: var(--fx-h-control-sm); padding: 0 var(--fx-space-1); text-align: center;
  font-family: var(--fx-mono); font-size: var(--fx-fs-small); appearance: textfield; -moz-appearance: textfield; }
.detail-facings .detail-value input[type="number"]::-webkit-inner-spin-button,
.detail-facings .detail-value input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Editor packs: the first facing's label spans the product (app.js sets --facing-label-w). The name has its own line with an
   ellipsis and the full name in title; price and status share the second line and stay above the shelf edge. */
.shelf-row--editor .facing-label { flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-self: flex-start; gap: 0; width: var(--facing-label-w, 100%); }
.shelf-row--editor .facing-label .product-name { display: block; min-width: 0; }
.shelf-row--editor .facing-meta { display: flex; align-items: center; gap: var(--fx-space-1); min-width: 0; }
.shelf-row--editor .facing-meta .shelf-price { flex: none; }
.shelf-row--editor .facing-meta .status-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The red violations count is a button: it opens the list of what is wrong. */
.app-chip.app-chip--btn { cursor: pointer; transition: border-color var(--fx-dur) var(--fx-ease); }
.app-chip.app-chip--btn:hover { border-color: var(--fx-err-fg); }
.app-chip.app-chip--btn:focus-visible { outline: var(--fx-focus-outline); outline-offset: 1px; }
.app-chip.app-chip--btn .ph { width: var(--fx-icon-tag); height: var(--fx-icon-tag); }
.fx-pop.fx-viol-pop { max-width: 360px; padding: var(--fx-space-3); }
.fx-viol-pop b { display: block; margin-bottom: var(--fx-space-2); font-size: var(--fx-fs-small); font-weight: 700; color: var(--fx-text); }
.fx-viol-pop ul { margin: 0; padding-left: var(--fx-space-4); font-size: var(--fx-fs-small); line-height: var(--fx-lh-small); color: var(--fx-text-2); }
.fx-viol-pop ul:focus { outline: none; }
.fx-viol-pop li + li { margin-top: var(--fx-space-1); }
.fx-viol-pop p { margin: var(--fx-space-2) 0 0; font-size: var(--fx-fs-small); color: var(--fx-text-muted); }

/* Topbar menus are as wide as their rows: a row label stays on one line ("Save to Standards"), its note may wrap. */
.app-topbar-actions .tb-menu { width: max-content; max-width: 360px; }
.app-topbar-actions .menu-row--explained > span { white-space: nowrap; }
.app-topbar-actions .menu-row--explained small { white-space: normal; }

/* Split tables: the % column holds "100.0%"; four tables share a row only when each keeps room for its names. */
.ext-split-table th:nth-child(2), .ext-split-table td:nth-child(2) { width: 64px; }
.ext-metrics-tables { container-type: inline-size; }
@container (max-width: 1039px) { .ext-table-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 519px) { .ext-table-grid { grid-template-columns: minmax(0, 1fr); } }

/* Corporate laptops (1366 px and below): the six KPI tiles wrap to two rows of three, so a header keeps its words.
   Up to 1280 px: Automate's breadcrumb keeps its last crumb, the members table fits its frame without the sign-in column. */
@media (max-width: 1366px) { .ext-top-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 721px) { .fx-tbl-wrap > .fx-tbl:has(tr.fx-team-row) { min-width: 0; } }   /* below 721 px it scrolls in its frame like every table */
@media (max-width: 1280px) {
  :is([id="screen-upload"], [id="screen-plano"]) .app-crumb--link,
  :is([id="screen-upload"], [id="screen-plano"]) .app-crumb-sep { display: none; }
  :is([id="screen-upload"], [id="screen-plano"]) .app-crumb--current { min-width: 96px; }
  .fx-tbl:has(tr.fx-team-row) th:nth-child(5), .fx-tbl:has(tr.fx-team-row) td:nth-child(5) { display: none; }
  .fx-client-admin .fx-team-row .fxp--auto { width: 160px; }
  .fx-tbl .fx-team-row td .fx-row-actions { flex-wrap: wrap; }
}
/* QA 16 Oct · group B */
/* The Save to Standards step (app.js askSaveDetails): a label over each field, both on one line. */
.fx-save-step { width: min(440px, calc(100vw - var(--fx-space-6))); }
.fx-save-step-row { display: grid; gap: var(--fx-space-1); margin-top: var(--fx-space-3); }
.fx-save-step-row > span { font-size: var(--fx-fs-small); color: var(--fx-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-save-step .fx-input { width: 100%; max-width: none; }
.fx-save-step .fx-note { margin-top: var(--fx-space-3); }
/* QA 16 Oct · group C */
/* Standards wizard: a folder chip reads as editable. A pencil (a label of the name field) follows the name; hover frames the field. */
.fx-chip .fx-chip-pen { display: inline-flex; align-items: center; color: var(--fx-text-faint); cursor: text; transition: color var(--fx-dur) var(--fx-ease); }
.fx-chip:hover .fx-chip-pen, .fx-chip:focus-within .fx-chip-pen { color: var(--fx-text); }
.fx-chip:hover .fx-chip-input:not(:focus) { border-color: var(--fx-border-control); background: var(--fx-surface); text-decoration: none; }
/* A row or a button the member's level cannot run stays, at 45% with its reason as the tooltip (DESIGN.md section 9). */
.fx-mi[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.fx-icon-btn:disabled, .fx-icon-btn:disabled:hover { opacity: .45; cursor: not-allowed; background: transparent; color: var(--fx-text-muted); }
/* QA 16 Oct · group D */
/* The campaign matrix keeps its natural width (six formats fit the cockpit at 1440 px) and scrolls inside its frame when wider. */
.fx-tbl-wrap > .fx-ck-matrix:has(th:nth-child(6)) { min-width: 0; }
.fx-ck-matrix th, .fx-ck-matrix td { padding-left: var(--fx-space-2); padding-right: var(--fx-space-2); }
/* QA 16 Oct · group E */
/* Rejected Master Data uploads below the newest fold into one line of the version timeline */
.fx-tl-rejected { padding: var(--fx-space-3) 0; }
.fx-tl-rejected[open] > summary { margin-bottom: var(--fx-space-1); }