/* ==========================================================================
   EstimationForge Design 2.0 — component layer (fm3-*)
   Plain CSS on top of the --m3-* tokens. No provider, no CSS-in-JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.fm3-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m3-space-2);
  border: none;
  border-radius: var(--m3-shape-full);
  font: var(--m3-type-label-lg);
  font-family: var(--m3-font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--m3-motion-fast), box-shadow var(--m3-motion-fast);
  background: transparent;
  color: var(--m3-primary);
  text-decoration: none;
}
.fm3-button--sm { height: 32px; padding: 0 var(--m3-space-3); font: var(--m3-type-label-md); font-family: var(--m3-font-sans); }
.fm3-button--md { height: 40px; padding: 0 var(--m3-space-5); }
.fm3-button--lg { height: 48px; padding: 0 var(--m3-space-6); font: var(--m3-type-title-md); font-family: var(--m3-font-sans); }

.fm3-button--filled { background: var(--m3-primary); color: var(--m3-on-primary); }
.fm3-button--filled:hover { background: color-mix(in srgb, var(--m3-on-primary) var(--m3-state-hover), var(--m3-primary)); box-shadow: var(--m3-elev-1); }
.fm3-button--filled:active { background: color-mix(in srgb, var(--m3-on-primary) var(--m3-state-pressed), var(--m3-primary)); box-shadow: none; }

.fm3-button--tonal { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
.fm3-button--tonal:hover { background: color-mix(in srgb, var(--m3-on-secondary-container) var(--m3-state-hover), var(--m3-secondary-container)); box-shadow: var(--m3-elev-1); }
.fm3-button--tonal:active { background: color-mix(in srgb, var(--m3-on-secondary-container) var(--m3-state-pressed), var(--m3-secondary-container)); box-shadow: none; }

.fm3-button--outlined { border: 1px solid var(--m3-outline); color: var(--m3-primary); }
.fm3-button--outlined:hover { background: color-mix(in srgb, var(--m3-primary) var(--m3-state-hover), transparent); }
.fm3-button--outlined:active { background: color-mix(in srgb, var(--m3-primary) var(--m3-state-pressed), transparent); }

.fm3-button--text { padding-inline: var(--m3-space-3); }
.fm3-button--text:hover { background: color-mix(in srgb, var(--m3-primary) var(--m3-state-hover), transparent); }
.fm3-button--text:active { background: color-mix(in srgb, var(--m3-primary) var(--m3-state-pressed), transparent); }

.fm3-button--elevated { background: var(--m3-surface-container-low); color: var(--m3-primary); box-shadow: var(--m3-elev-1); }
.fm3-button--elevated:hover { box-shadow: var(--m3-elev-2); background: color-mix(in srgb, var(--m3-primary) var(--m3-state-hover), var(--m3-surface-container-low)); }
.fm3-button--elevated:active { box-shadow: var(--m3-elev-1); }

/* Destructive recolours any variant to the error role */
.fm3-button--destructive.fm3-button--filled { background: var(--m3-error); color: var(--m3-on-error); }
.fm3-button--destructive.fm3-button--filled:hover { background: color-mix(in srgb, var(--m3-on-error) var(--m3-state-hover), var(--m3-error)); }
.fm3-button--destructive.fm3-button--tonal { background: var(--m3-error-container); color: var(--m3-on-error-container); }
.fm3-button--destructive.fm3-button--tonal:hover { background: color-mix(in srgb, var(--m3-on-error-container) var(--m3-state-hover), var(--m3-error-container)); }
.fm3-button--destructive.fm3-button--outlined,
.fm3-button--destructive.fm3-button--text,
.fm3-button--destructive.fm3-button--elevated { color: var(--m3-error); }
.fm3-button--destructive.fm3-button--outlined { border-color: color-mix(in srgb, var(--m3-error) 60%, var(--m3-outline)); }
.fm3-button--destructive.fm3-button--outlined:hover,
.fm3-button--destructive.fm3-button--text:hover { background: color-mix(in srgb, var(--m3-error) var(--m3-state-hover), transparent); }

.fm3-button:disabled {
  cursor: default;
  box-shadow: none;
  background: color-mix(in srgb, var(--m3-on-surface) var(--m3-state-disabled-container), transparent);
  color: color-mix(in srgb, var(--m3-on-surface) var(--m3-state-disabled-content), transparent);
  border-color: transparent;
}
.fm3-button--text:disabled { background: transparent; }
.fm3-button__icon { display: inline-flex; margin-left: -4px; }
.fm3-button--sm .fm3-button__icon svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   IconButton
   -------------------------------------------------------------------------- */
.fm3-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--m3-shape-full);
  background: transparent;
  color: var(--m3-on-surface-variant);
  cursor: pointer;
  transition: background var(--m3-motion-fast);
}
.fm3-icon-button:hover { background: color-mix(in srgb, var(--m3-on-surface-variant) var(--m3-state-hover), transparent); }
.fm3-icon-button:active { background: color-mix(in srgb, var(--m3-on-surface-variant) var(--m3-state-pressed), transparent); }
.fm3-icon-button--filled { background: var(--m3-primary); color: var(--m3-on-primary); }
.fm3-icon-button--filled:hover { background: color-mix(in srgb, var(--m3-on-primary) var(--m3-state-hover), var(--m3-primary)); }
.fm3-icon-button--tonal { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
.fm3-icon-button--tonal:hover { background: color-mix(in srgb, var(--m3-on-secondary-container) var(--m3-state-hover), var(--m3-secondary-container)); }
.fm3-icon-button--outlined { border: 1px solid var(--m3-outline); }
.fm3-icon-button.is-selected { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.fm3-icon-button:disabled { color: color-mix(in srgb, var(--m3-on-surface) var(--m3-state-disabled-content), transparent); background: transparent; cursor: default; }

/* --------------------------------------------------------------------------
   Chip
   -------------------------------------------------------------------------- */
.fm3-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--m3-space-2);
  height: 32px;
  padding: 0 var(--m3-space-4);
  border-radius: var(--m3-shape-sm);
  border: 1px solid var(--m3-outline-variant);
  background: transparent;
  color: var(--m3-on-surface-variant);
  font: var(--m3-type-label-lg);
  font-family: var(--m3-font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--m3-motion-fast), border-color var(--m3-motion-fast);
}
.fm3-chip:hover { background: color-mix(in srgb, var(--m3-on-surface-variant) var(--m3-state-hover), transparent); }
.fm3-chip:active { background: color-mix(in srgb, var(--m3-on-surface-variant) var(--m3-state-pressed), transparent); }
.fm3-chip--assist { color: var(--m3-on-surface); }
.fm3-chip--input { border-radius: var(--m3-shape-sm); }
.fm3-chip.is-selected {
  background: var(--m3-secondary-container);
  border-color: transparent;
  color: var(--m3-on-secondary-container);
}
.fm3-chip.is-selected:hover { background: color-mix(in srgb, var(--m3-on-secondary-container) var(--m3-state-hover), var(--m3-secondary-container)); }
.fm3-chip:disabled { cursor: default; color: color-mix(in srgb, var(--m3-on-surface) var(--m3-state-disabled-content), transparent); background: transparent; }
.fm3-chip__icon { display: inline-flex; margin-left: -6px; }
.fm3-chip__icon svg { width: 18px; height: 18px; }
.fm3-chip__count {
  font: var(--m3-type-data-sm);
  padding: 1px 6px;
  border-radius: var(--m3-shape-full);
  background: color-mix(in srgb, var(--m3-on-surface) 10%, transparent);
}
.fm3-chip.is-selected .fm3-chip__count { background: color-mix(in srgb, var(--m3-on-secondary-container) 14%, transparent); }
.fm3-chip__remove {
  display: inline-flex;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  margin-right: -8px;
  border-radius: var(--m3-shape-full);
}
.fm3-chip__remove:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.fm3-chip__remove svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.fm3-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--m3-shape-full);
  font: var(--m3-type-label-md);
  font-family: var(--m3-font-sans);
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface-variant);
}
.fm3-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fm3-badge--neutral { background: var(--m3-surface-container-high); color: var(--m3-on-surface-variant); }
.fm3-badge--primary { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }
.fm3-badge--info { background: var(--m3-info-container); color: var(--m3-on-info-container); }
.fm3-badge--success { background: var(--m3-success-container); color: var(--m3-on-success-container); }
.fm3-badge--warning { background: var(--m3-warning-container); color: var(--m3-on-warning-container); }
.fm3-badge--error { background: var(--m3-error-container); color: var(--m3-on-error-container); }
.fm3-badge--violet { background: var(--m3-violet-container); color: var(--m3-on-violet-container); }
/* Job pipeline statuses */
.fm3-badge--draft { background: var(--m3-status-draft-bg); color: var(--m3-status-draft-fg); }
.fm3-badge--review { background: var(--m3-status-review-bg); color: var(--m3-status-review-fg); }
.fm3-badge--approved { background: var(--m3-status-approved-bg); color: var(--m3-status-approved-fg); }
.fm3-badge--quote-ready { background: var(--m3-status-quote-ready-bg); color: var(--m3-status-quote-ready-fg); }
.fm3-badge--issued { background: var(--m3-status-issued-bg); color: var(--m3-status-issued-fg); }
.fm3-badge--won { background: var(--m3-status-won-bg); color: var(--m3-status-won-fg); }
.fm3-badge--lost { background: var(--m3-status-lost-bg); color: var(--m3-status-lost-fg); }

/* --------------------------------------------------------------------------
   Card (elevated | filled | outlined) with optional header (old Panel)
   -------------------------------------------------------------------------- */
.fm3-card {
  border-radius: var(--m3-shape-md);
  background: var(--m3-surface-container-lowest);
  overflow: hidden;
}
.fm3-card--elevated { background: var(--m3-surface-container-low); box-shadow: var(--m3-elev-1); }
.fm3-card--filled { background: var(--m3-surface-container); }
.fm3-card--outlined { background: var(--m3-surface-container-lowest); border: 1px solid var(--m3-outline-variant); }
.fm3-card--interactive { cursor: pointer; transition: box-shadow var(--m3-motion-fast), background var(--m3-motion-fast); }
.fm3-card--interactive:hover { box-shadow: var(--m3-elev-2); background: color-mix(in srgb, var(--m3-on-surface) 3%, var(--m3-surface-container-low)); }
.fm3-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--m3-space-4);
  padding: var(--m3-space-5) var(--m3-space-5) var(--m3-space-3);
}
/* Left side of the header: an optional leading icon tile + the title/subtitle block. */
.fm3-card__heading { display: flex; align-items: flex-start; gap: var(--m3-space-3); min-width: 0; }
.fm3-card__lead {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--m3-shape-md);
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}
.fm3-card__title { font: var(--m3-type-title-md); font-family: var(--m3-font-sans); color: var(--m3-on-surface); margin: 0; }
.fm3-card__subtitle { font: var(--m3-type-body-sm); font-family: var(--m3-font-sans); color: var(--m3-on-surface-variant); margin: 2px 0 0; }
.fm3-card__actions { display: flex; align-items: center; gap: var(--m3-space-2); flex-shrink: 0; }
.fm3-card__body { padding: var(--m3-space-5); }
.fm3-card__header + .fm3-card__body { padding-top: var(--m3-space-2); }
.fm3-card__body--flush { padding: 0; }

/* --------------------------------------------------------------------------
   PageHeader
   -------------------------------------------------------------------------- */
.fm3-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--m3-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--m3-space-6);
}
.fm3-page-header__title-row { display: flex; align-items: center; gap: var(--m3-space-3); }
.fm3-page-header__title { font: var(--m3-type-headline-md); font-family: var(--m3-font-sans); color: var(--m3-on-surface); margin: 0; letter-spacing: -0.02em; }
.fm3-page-header__subtitle { font: var(--m3-type-body-md); font-family: var(--m3-font-sans); color: var(--m3-on-surface-variant); margin: var(--m3-space-1) 0 0; }
.fm3-page-header__actions { display: flex; align-items: center; gap: var(--m3-space-2); }

/* --------------------------------------------------------------------------
   Stat
   -------------------------------------------------------------------------- */
.fm3-stat {
  display: flex;
  flex-direction: column;
  gap: var(--m3-space-2);
  padding: var(--m3-space-4) var(--m3-space-5);
  border-radius: var(--m3-shape-md);
  background: var(--m3-surface-container-low);
  box-shadow: var(--m3-elev-1);
  min-width: 0;
}
.fm3-stat--link { cursor: pointer; transition: box-shadow var(--m3-motion-fast), background var(--m3-motion-fast); border: none; text-align: left; font: inherit; color: var(--m3-on-surface); }
.fm3-stat--link:hover { box-shadow: var(--m3-elev-2); background: color-mix(in srgb, var(--m3-on-surface) 3%, var(--m3-surface-container-low)); }
.fm3-stat.is-selected { background: color-mix(in srgb, var(--m3-primary) 6%, var(--m3-surface-container-low)); }
.fm3-stat.is-selected { outline: 2px solid var(--m3-primary); outline-offset: -2px; }
.fm3-stat__head { display: flex; align-items: center; gap: var(--m3-space-2); color: var(--m3-on-surface-variant); }
.fm3-stat__head svg { width: 18px; height: 18px; }
.fm3-stat__label { font: var(--m3-type-label-md); font-family: var(--m3-font-sans); }
.fm3-stat__value {
  font: var(--m3-type-data-lg);
  font-family: var(--m3-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--m3-on-surface);
}
.fm3-stat__foot { font: var(--m3-type-body-sm); font-family: var(--m3-font-sans); color: var(--m3-on-surface-variant); }
.fm3-stat__arrow { margin-left: auto; color: var(--m3-outline); display: inline-flex; }
.fm3-stat__arrow svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   DataTable
   -------------------------------------------------------------------------- */
.fm3-table-wrap { overflow-x: auto; }
.fm3-table { width: 100%; border-collapse: collapse; }
.fm3-table th {
  text-align: left;
  font: var(--m3-type-label-md);
  font-family: var(--m3-font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--m3-on-surface-variant);
  padding: var(--m3-space-3) var(--m3-space-4);
  border-bottom: 1px solid var(--m3-outline-variant);
  background: var(--m3-surface-container);
  white-space: nowrap;
}
.fm3-table td {
  padding: var(--m3-space-3) var(--m3-space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--m3-outline-variant) 55%, transparent);
  font: var(--m3-type-body-md);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface);
  vertical-align: middle;
}
.fm3-table tbody tr { transition: background var(--m3-motion-fast); }
.fm3-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--m3-on-surface) 2%, transparent); }
.fm3-table tbody tr:hover { background: color-mix(in srgb, var(--m3-on-surface) 5%, transparent); }
.fm3-table tbody tr.is-clickable { cursor: pointer; }
.fm3-table tbody tr:last-child td { border-bottom: none; }
.fm3-table th.fm3-table__num,
.fm3-table td.fm3-table__num {
  text-align: right;
  font-family: var(--m3-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.fm3-table th.fm3-table__num { font-family: var(--m3-font-sans); font-weight: 500; }
.fm3-table__primary { font-weight: 600; }
.fm3-table__secondary { font: var(--m3-type-body-sm); font-family: var(--m3-font-sans); color: var(--m3-on-surface-variant); margin-top: 2px; }
.fm3-table__empty { padding: var(--m3-space-8); }

/* --------------------------------------------------------------------------
   Tabs (M3 primary tabs + count chips)
   -------------------------------------------------------------------------- */
.fm3-tabs {
  display: flex;
  gap: var(--m3-space-1);
  border-bottom: 1px solid var(--m3-outline-variant);
  overflow-x: auto;
  /* Allow the strip to shrink below its content width inside a flex/grid parent so its own
     overflow-x scroll engages, instead of forcing the parent to overflow (mobile min-content
     blowout). Grid parents should still give the tabs' track `minmax(0, 1fr)`. */
  min-width: 0;
}
.fm3-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--m3-space-2);
  height: 48px;
  padding: 0 var(--m3-space-4);
  border: none;
  background: none;
  cursor: pointer;
  font: var(--m3-type-title-sm);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface-variant);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-top-left-radius: var(--m3-shape-sm);
  border-top-right-radius: var(--m3-shape-sm);
  transition: background var(--m3-motion-fast), color var(--m3-motion-fast);
  white-space: nowrap;
}
.fm3-tab:hover { background: color-mix(in srgb, var(--m3-on-surface) var(--m3-state-hover), transparent); }
.fm3-tab.is-active { color: var(--m3-primary); border-bottom-color: var(--m3-primary); }
.fm3-tab__count {
  font: var(--m3-type-data-sm);
  padding: 1px 7px;
  border-radius: var(--m3-shape-full);
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface-variant);
}
.fm3-tab.is-active .fm3-tab__count { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }

/* --------------------------------------------------------------------------
   TextField / Select / TextArea — M3 outlined with floating label
   -------------------------------------------------------------------------- */
.fm3-textfield { display: flex; flex-direction: column; gap: var(--m3-space-1); min-width: 0; }
.fm3-textfield__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--m3-space-2);
  border: 1px solid var(--m3-outline);
  border-radius: var(--m3-shape-xs);
  background: transparent;
  padding: 0 var(--m3-space-4);
  min-height: 48px;
  transition: border-color var(--m3-motion-fast), box-shadow var(--m3-motion-fast);
}
.fm3-textfield__box:hover { border-color: var(--m3-on-surface); }
.fm3-textfield__box:focus-within { border-color: var(--m3-primary); box-shadow: inset 0 0 0 1px var(--m3-primary); }
.fm3-textfield--error .fm3-textfield__box { border-color: var(--m3-error); }
.fm3-textfield--error .fm3-textfield__box:focus-within { box-shadow: inset 0 0 0 1px var(--m3-error); }
.fm3-textfield__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--m3-on-surface);
  font: var(--m3-type-body-lg);
  font-family: var(--m3-font-sans);
  padding: var(--m3-space-3) 0;
}
.fm3-textfield__input--mono { font-family: var(--m3-font-mono); font-variant-numeric: tabular-nums; }
.fm3-textfield__label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 4px;
  background: var(--m3-surface);
  color: var(--m3-on-surface-variant);
  font: var(--m3-type-body-lg);
  font-family: var(--m3-font-sans);
  pointer-events: none;
  transition: all var(--m3-motion-fast);
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Cards commonly host fields — match the label knock-out to the card tone */
.fm3-card .fm3-textfield__label { background: var(--m3-surface-container-lowest); }
.fm3-card--elevated .fm3-textfield__label { background: var(--m3-surface-container-low); }
.fm3-card--filled .fm3-textfield__label { background: var(--m3-surface-container); }
.fm3-textfield__box:focus-within .fm3-textfield__label,
.fm3-textfield__input:not(:placeholder-shown) ~ .fm3-textfield__label,
.fm3-textfield__label.is-floated {
  top: 0;
  font: var(--m3-type-body-sm);
  font-family: var(--m3-font-sans);
}
.fm3-textfield__box:focus-within .fm3-textfield__label { color: var(--m3-primary); }
.fm3-textfield--error .fm3-textfield__label { color: var(--m3-error); }
.fm3-textfield__icon { display: inline-flex; color: var(--m3-on-surface-variant); flex-shrink: 0; }
.fm3-textfield__icon svg { width: 20px; height: 20px; }
/* Password-visibility toggle in the trailing slot (TextField `passwordToggle`). */
.fm3-textfield__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  color: var(--m3-on-surface-variant);
  border-radius: var(--m3-shape-full);
}
.fm3-textfield__toggle:hover { color: var(--m3-on-surface); }
.fm3-textfield__toggle svg { width: 20px; height: 20px; }
.fm3-textfield__suffix { color: var(--m3-on-surface-variant); font: var(--m3-type-body-md); font-family: var(--m3-font-mono); }
.fm3-textfield__supporting {
  font: var(--m3-type-body-sm);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface-variant);
  padding: 0 var(--m3-space-4);
}
.fm3-textfield--error .fm3-textfield__supporting { color: var(--m3-error); }
.fm3-textfield--disabled { opacity: 0.55; pointer-events: none; }

.fm3-textfield__input[type='number']::-webkit-outer-spin-button,
.fm3-textfield__input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Select shares the box */
select.fm3-textfield__input { appearance: none; cursor: pointer; }
.fm3-textfield__chevron { position: absolute; right: 12px; color: var(--m3-on-surface-variant); pointer-events: none; display: inline-flex; }
.fm3-textfield__chevron svg { width: 18px; height: 18px; }
.fm3-textfield--select .fm3-textfield__input { padding-right: var(--m3-space-6); }

/* TextArea */
.fm3-textfield--area .fm3-textfield__box { align-items: flex-start; padding-top: 4px; padding-bottom: 4px; }
textarea.fm3-textfield__input { resize: vertical; min-height: 88px; line-height: 22px; }

/* --------------------------------------------------------------------------
   Checkbox
   -------------------------------------------------------------------------- */
.fm3-checkbox { display: inline-flex; align-items: flex-start; gap: var(--m3-space-3); cursor: pointer; position: relative; }
.fm3-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.fm3-checkbox__box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--m3-on-surface-variant);
  border-radius: var(--m3-shape-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--m3-motion-fast), border-color var(--m3-motion-fast);
}
.fm3-checkbox__box svg { width: 14px; height: 14px; }
.fm3-checkbox input:checked + .fm3-checkbox__box { background: var(--m3-primary); border-color: var(--m3-primary); color: var(--m3-on-primary); }
.fm3-checkbox:hover .fm3-checkbox__box { box-shadow: 0 0 0 8px color-mix(in srgb, var(--m3-on-surface) var(--m3-state-hover), transparent); }
.fm3-checkbox input:disabled + .fm3-checkbox__box { border-color: color-mix(in srgb, var(--m3-on-surface) var(--m3-state-disabled-content), transparent); }
.fm3-checkbox--disabled { cursor: default; opacity: 0.6; }
.fm3-checkbox__label { font: var(--m3-type-body-md); font-family: var(--m3-font-sans); color: var(--m3-on-surface); }
.fm3-checkbox__hint { font: var(--m3-type-body-sm); font-family: var(--m3-font-sans); color: var(--m3-on-surface-variant); }

/* --------------------------------------------------------------------------
   ChoiceRow — one option in a short exclusive choice, stating what it does.
   Deliberately NOT the checkbox's shape: a bordered, fillable card is what the
   radio wears, and wearing it made a sub-question read as another option.
   -------------------------------------------------------------------------- */
.fm3-choicerow {
  display: flex;
  align-items: flex-start;
  gap: var(--m3-space-3);
  width: 100%;
  text-align: left;
  padding: var(--m3-space-3) var(--m3-space-4);
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-sm);
  background: var(--m3-surface);
  cursor: pointer;
  font-family: var(--m3-font-sans);
}
.fm3-choicerow--selected { border-color: var(--m3-primary); background: var(--m3-primary-container); }
.fm3-choicerow--disabled { cursor: default; opacity: 0.6; }
.fm3-choicerow__dot {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2px solid var(--m3-outline);
  border-radius: 50%;
}
.fm3-choicerow--selected .fm3-choicerow__dot {
  border-color: var(--m3-primary);
  background: radial-gradient(circle, var(--m3-primary) 0 4px, transparent 5px);
}
.fm3-choicerow__text { display: flex; flex-direction: column; gap: 2px; }
.fm3-choicerow__title { font: var(--m3-type-title-sm); font-family: var(--m3-font-sans); color: var(--m3-on-surface); }
.fm3-choicerow__consequence {
  font: var(--m3-type-body-sm);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface-variant);
}
.fm3-choicerow--selected .fm3-choicerow__title,
.fm3-choicerow--selected .fm3-choicerow__consequence { color: var(--m3-on-primary-container); }

/* --------------------------------------------------------------------------
   Switch (M3)
   -------------------------------------------------------------------------- */
.fm3-switch { display: inline-flex; align-items: center; gap: var(--m3-space-3); cursor: pointer; position: relative; }
.fm3-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fm3-switch__track {
  width: 52px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--m3-shape-full);
  border: 2px solid var(--m3-outline);
  background: var(--m3-surface-container-highest);
  position: relative;
  transition: background var(--m3-motion-fast), border-color var(--m3-motion-fast);
}
.fm3-switch__thumb {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--m3-outline);
  transition: all var(--m3-motion-fast);
}
.fm3-switch input:checked + .fm3-switch__track { background: var(--m3-primary); border-color: var(--m3-primary); }
.fm3-switch input:checked + .fm3-switch__track .fm3-switch__thumb {
  left: 24px;
  width: 24px;
  height: 24px;
  background: var(--m3-on-primary);
}
.fm3-switch input:disabled + .fm3-switch__track { opacity: 0.45; }
.fm3-switch--disabled { cursor: default; }
.fm3-switch__label { font: var(--m3-type-body-md); font-family: var(--m3-font-sans); color: var(--m3-on-surface); }

/* --------------------------------------------------------------------------
   Field (label/hint/error wrapper)
   -------------------------------------------------------------------------- */
.fm3-field { display: flex; flex-direction: column; gap: var(--m3-space-2); min-width: 0; }
.fm3-field__label { font: var(--m3-type-label-lg); font-family: var(--m3-font-sans); color: var(--m3-on-surface); }
.fm3-field__req { color: var(--m3-error); margin-left: 2px; }
.fm3-field__hint { font: var(--m3-type-body-sm); font-family: var(--m3-font-sans); color: var(--m3-on-surface-variant); }
.fm3-field__error { font: var(--m3-type-body-sm); font-family: var(--m3-font-sans); color: var(--m3-error); }

/* --------------------------------------------------------------------------
   Callout (tonal banners)
   -------------------------------------------------------------------------- */
.fm3-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--m3-space-3);
  padding: var(--m3-space-3) var(--m3-space-4);
  border-radius: var(--m3-shape-md);
  font: var(--m3-type-body-md);
  font-family: var(--m3-font-sans);
}
.fm3-callout__icon { display: inline-flex; flex-shrink: 0; margin-top: 1px; }
.fm3-callout__icon svg { width: 18px; height: 18px; }
.fm3-callout__body { flex: 1; min-width: 0; }
.fm3-callout--info { background: var(--m3-info-container); color: var(--m3-on-info-container); }
.fm3-callout--success { background: var(--m3-success-container); color: var(--m3-on-success-container); }
.fm3-callout--warning { background: var(--m3-warning-container); color: var(--m3-on-warning-container); }
.fm3-callout--error { background: var(--m3-error-container); color: var(--m3-on-error-container); }

/* --------------------------------------------------------------------------
   Dialog (M3 basic dialog)
   -------------------------------------------------------------------------- */
.fm3-dialog-scrim {
  position: fixed;
  inset: 0;
  background: var(--m3-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--m3-space-6);
  z-index: var(--m3-z-dialog);
}
.fm3-dialog {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  border-radius: var(--m3-shape-xl);
  background: var(--m3-surface-container-high);
  box-shadow: var(--m3-elev-3);
  overflow: hidden;
}
.fm3-dialog--sm { max-width: 400px; }
.fm3-dialog--lg { max-width: 760px; }
.fm3-dialog__icon { display: flex; justify-content: center; padding: var(--m3-space-6) 0 0; color: var(--m3-secondary); }
.fm3-dialog__headline {
  font: var(--m3-type-headline-sm);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface);
  margin: 0;
  padding: var(--m3-space-6) var(--m3-space-6) 0;
}
.fm3-dialog__icon + .fm3-dialog__headline { text-align: center; padding-top: var(--m3-space-4); }
.fm3-dialog__content {
  padding: var(--m3-space-4) var(--m3-space-6);
  color: var(--m3-on-surface-variant);
  font: var(--m3-type-body-md);
  font-family: var(--m3-font-sans);
  overflow-y: auto;
}
.fm3-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--m3-space-2);
  padding: var(--m3-space-2) var(--m3-space-6) var(--m3-space-6);
}

/* --------------------------------------------------------------------------
   CommandPalette (#153) — the ⌘K search overlay
   -------------------------------------------------------------------------- */
.fm3-palette-scrim {
  position: fixed;
  inset: 0;
  background: var(--m3-scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 88px var(--m3-space-6) var(--m3-space-6);
  z-index: var(--m3-z-dialog);
}
.fm3-palette {
  width: 100%;
  max-width: 680px;
  max-height: 560px;
  display: flex;
  flex-direction: column;
  border-radius: var(--m3-shape-lg);
  border: 1px solid var(--m3-outline-variant);
  /* The lowest surface, not the dialog's `-high`: the palette is a sheet of paper the results are
     printed on, and the rows carry their own containers. */
  background: var(--m3-surface-container-lowest);
  box-shadow: var(--m3-elev-3);
  overflow: hidden;
}
.fm3-palette__query {
  display: flex;
  align-items: center;
  gap: var(--m3-space-4);
  height: 64px;
  flex-shrink: 0;
  padding: 0 var(--m3-space-5);
  border-bottom: 1px solid var(--m3-outline-variant);
  color: var(--m3-on-surface-variant);
}
.fm3-palette__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: var(--m3-type-title-md);
  font-family: var(--m3-font-sans);
  font-weight: 400;
  color: var(--m3-on-surface);
  caret-color: var(--m3-primary);
}
.fm3-palette__input::placeholder { color: color-mix(in srgb, var(--m3-on-surface-variant) 70%, transparent); }

.fm3-palette__results { flex: 1; overflow-y: auto; }
.fm3-palette__empty {
  padding: var(--m3-space-8);
  font: var(--m3-type-body-md);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface-variant);
}
.fm3-palette__heading {
  display: flex;
  justify-content: space-between;
  padding: var(--m3-space-4) var(--m3-space-5) 5px;
  font: var(--m3-type-label-sm);
  font-family: var(--m3-font-sans);
  font-weight: 600;
  letter-spacing: 1.1px;
  color: var(--m3-on-surface-variant);
}
.fm3-palette__count { font: var(--m3-type-data-sm); letter-spacing: normal; }

.fm3-palette__hit {
  display: flex;
  align-items: center;
  gap: var(--m3-space-3);
  padding: 9px var(--m3-space-5) 9px 0;
  cursor: pointer;
  transition: background var(--m3-motion-fast);
}
.fm3-palette__hit:hover { background: color-mix(in srgb, var(--m3-on-surface) var(--m3-state-hover), transparent); }
.fm3-palette__hit.is-selected { background: var(--m3-secondary-container); }
/* A 3px bar rather than fill alone: at a glance the selected row reads from the edge, which is
   what the eye tracks when arrowing down a list. */
.fm3-palette__marker { width: 3px; height: 38px; flex-shrink: 0; background: transparent; }
.fm3-palette__hit.is-selected .fm3-palette__marker { background: var(--m3-primary); }
.fm3-palette__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-left: var(--m3-space-4);
  border-radius: var(--m3-shape-sm);
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface-variant);
}
.fm3-palette__hit.is-selected .fm3-palette__icon { background: var(--m3-surface-container-lowest); }
.fm3-palette__text { flex: 1; min-width: 0; }
.fm3-palette__line { display: flex; align-items: baseline; gap: var(--m3-space-2); min-width: 0; }
.fm3-palette__ref { font: var(--m3-type-data-sm); color: var(--m3-on-surface-variant); flex-shrink: 0; }
.fm3-palette__title {
  font: var(--m3-type-label-lg);
  font-family: var(--m3-font-sans);
  font-weight: 600;
  color: var(--m3-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm3-palette__subtitle {
  display: block;
  font: var(--m3-type-body-sm);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm3-palette__value { font: var(--m3-type-data-sm); color: var(--m3-on-surface); flex-shrink: 0; }
.fm3-palette__value--withheld { color: color-mix(in srgb, var(--m3-on-surface-variant) 65%, transparent); }

.fm3-palette__footer {
  display: flex;
  align-items: center;
  gap: var(--m3-space-5);
  flex-shrink: 0;
  padding: var(--m3-space-3) var(--m3-space-5);
  border-top: 1px solid var(--m3-outline-variant);
}
.fm3-palette__hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: var(--m3-type-body-sm);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface-variant);
}
.fm3-palette__cap {
  border: 1px solid var(--m3-outline-variant);
  border-radius: var(--m3-shape-xs);
  padding: 2px 5px;
  font: var(--m3-type-data-sm);
  color: var(--m3-on-surface-variant);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   SideSheet (drawer)
   -------------------------------------------------------------------------- */
.fm3-sheet-scrim {
  position: fixed;
  inset: 0;
  background: var(--m3-scrim);
  z-index: var(--m3-z-overlay);
}
.fm3-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--m3-surface-container-low);
  border-top-left-radius: var(--m3-shape-lg);
  border-bottom-left-radius: var(--m3-shape-lg);
  box-shadow: var(--m3-elev-3);
  z-index: calc(var(--m3-z-overlay) + 1);
}
.fm3-sheet__header {
  display: flex;
  align-items: flex-start;
  gap: var(--m3-space-3);
  padding: var(--m3-space-5) var(--m3-space-6) var(--m3-space-3);
}
.fm3-sheet__titles { flex: 1; min-width: 0; }
.fm3-sheet__title { font: var(--m3-type-title-lg); font-family: var(--m3-font-sans); color: var(--m3-on-surface); margin: 0; }
.fm3-sheet__subtitle { font: var(--m3-type-body-sm); font-family: var(--m3-font-sans); color: var(--m3-on-surface-variant); margin: 2px 0 0; }
.fm3-sheet__body { flex: 1; overflow-y: auto; padding: var(--m3-space-3) var(--m3-space-6); }
.fm3-sheet__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--m3-space-2);
  padding: var(--m3-space-4) var(--m3-space-6);
  border-top: 1px solid var(--m3-outline-variant);
}

/* --------------------------------------------------------------------------
   EmptyState
   -------------------------------------------------------------------------- */
.fm3-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--m3-space-2);
  padding: var(--m3-space-10) var(--m3-space-6);
}
.fm3-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--m3-shape-lg);
  background: var(--m3-surface-container-high);
  color: var(--m3-on-surface-variant);
  margin-bottom: var(--m3-space-2);
}
.fm3-empty__icon svg { width: 26px; height: 26px; }
.fm3-empty__title { font: var(--m3-type-title-md); font-family: var(--m3-font-sans); color: var(--m3-on-surface); margin: 0; }
.fm3-empty__subtitle { font: var(--m3-type-body-md); font-family: var(--m3-font-sans); color: var(--m3-on-surface-variant); margin: 0; max-width: 420px; }
.fm3-empty__action { margin-top: var(--m3-space-3); }

/* --------------------------------------------------------------------------
   Skeleton (pending-value placeholder, #344)
   -------------------------------------------------------------------------- */
.fm3-skeleton {
  display: inline-block;
  width: 100%;
  border-radius: 6px;
  background: var(--m3-surface-variant);
  animation: fm3-skeleton-breathe 1.4s ease-in-out infinite;
}
@keyframes fm3-skeleton-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

/* --------------------------------------------------------------------------
   Spinner (M3 circular progress)
   -------------------------------------------------------------------------- */
.fm3-spinner { display: inline-block; color: var(--m3-primary); animation: fm3-spin 1s linear infinite; }
.fm3-spinner circle {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 90 160;
  animation: fm3-dash 1.6s ease-in-out infinite;
}
@keyframes fm3-spin { to { transform: rotate(360deg); } }
@keyframes fm3-dash {
  0% { stroke-dasharray: 8 240; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 120 130; stroke-dashoffset: -40; }
  100% { stroke-dasharray: 8 240; stroke-dashoffset: -240; }
}

/* --------------------------------------------------------------------------
   NavRail (app sidebar — deep brand surface in both schemes)

   Collapse/expand is fully animated: width runs 240ms on the M3 emphasized
   curve (--m3-motion-nav); text fades (~140ms) and clips (nowrap + hidden
   overflow — never wraps mid-transition); icons hold a fixed x; numeric
   badges morph into attention dots; the workspace header folds to avatar-only
   and the brand signature to the mark alone.
   `prefers-reduced-motion: reduce` collapses every duration to ~0.
   -------------------------------------------------------------------------- */
.fm3-nav {
  display: flex;
  flex-direction: column;
  width: var(--m3-nav-rail-width);
  min-height: 100vh;
  background: var(--m3-nav-surface);
  color: var(--m3-nav-on-surface);
  border-right: 1px solid var(--m3-nav-border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: var(--m3-z-nav);
  transition: width var(--m3-motion-nav);
}
/* Workspace footer (#146) — the organisation as a button, not the static card it
   replaced. Avatar + name + meta + chevron at 52px above a hairline; folds to the bare
   avatar when collapsed, where it stays an operable switcher. The rail has no header:
   the nav list is the first thing in it. */
.fm3-nav__workspace {
  position: relative;
  padding: var(--m3-space-2) var(--m3-space-3) var(--m3-space-3);
  border-top: 1px solid color-mix(in srgb, #ffffff 8%, transparent);
  transition: padding var(--m3-motion-nav);
}
.fm3-nav--collapsed .fm3-nav__workspace { padding-inline: 14px; }
.fm3-nav__ws {
  display: flex;
  align-items: center;
  gap: var(--m3-space-3);
  width: 100%;
  height: 52px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--m3-shape-lg);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--m3-motion-fast), padding var(--m3-motion-nav);
}
.fm3-nav__ws:hover { background: color-mix(in srgb, #ffffff 9%, transparent); }
.fm3-nav__ws:focus-visible { outline: 2px solid var(--m3-nav-active-fg); outline-offset: 2px; }
/* Nothing to switch to and no settings entry — an identity block, not a button. */
.fm3-nav__ws:disabled { cursor: default; }
.fm3-nav__ws:disabled:hover { background: transparent; }
.fm3-nav--collapsed .fm3-nav__ws { padding: 0; justify-content: center; }
.fm3-nav--collapsed .fm3-nav__ws:hover { background: color-mix(in srgb, #ffffff 10%, transparent); }
.fm3-nav__ws-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--m3-shape-sm);
  background: var(--m3-primary);
  color: #ffffff;
  font: var(--m3-type-label-lg);
  font-family: var(--m3-font-sans);
  font-weight: 600;
}
[data-theme='dark'] .fm3-nav__ws-avatar { background: #17589e; }
.fm3-nav__ws-text { min-width: 0; flex: 1; overflow: hidden; opacity: 1; transition: opacity 0.14s ease; }
.fm3-nav--collapsed .fm3-nav__ws-text { opacity: 0; }
.fm3-nav__ws-name {
  font: var(--m3-type-label-lg);
  font-family: var(--m3-font-sans);
  font-weight: 600;
  color: var(--m3-nav-on-surface-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm3-nav__ws-meta {
  font: var(--m3-type-data-sm);
  font-family: var(--m3-font-mono);
  color: color-mix(in srgb, var(--m3-nav-on-surface) 62%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Points up: the menu opens upward from the foot of the rail. */
.fm3-nav__ws-chevron {
  display: inline-flex;
  transform: rotate(180deg);
  flex-shrink: 0;
  width: 16px;
  overflow: hidden;
  color: color-mix(in srgb, var(--m3-nav-on-surface) 60%, transparent);
  transition: opacity 0.14s ease, width var(--m3-motion-nav);
}
.fm3-nav--collapsed .fm3-nav__ws-chevron { width: 0; opacity: 0; }
.fm3-nav__ws-menu {
  position: absolute;
  z-index: 8;
  bottom: calc(100% - 4px);
  left: var(--m3-space-3);
  min-width: 200px;
  padding: var(--m3-space-2);
  border-radius: var(--m3-shape-md);
  background: color-mix(in srgb, var(--m3-nav-surface) 88%, #ffffff);
  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
  box-shadow: var(--m3-elev-2);
}
.fm3-nav--collapsed .fm3-nav__ws-menu { left: 14px; }
.fm3-nav__ws-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--m3-shape-sm);
  background: none;
  color: var(--m3-nav-on-surface);
  font: var(--m3-type-label-md);
  font-family: var(--m3-font-sans);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.fm3-nav__ws-item:hover { background: color-mix(in srgb, #ffffff var(--m3-state-hover), transparent); color: var(--m3-nav-on-surface-strong); }
.fm3-nav__ws-item:focus-visible { outline: 2px solid var(--m3-nav-active-fg); outline-offset: -2px; }
.fm3-nav__ws-item.is-active { color: var(--m3-nav-active-fg); font-weight: 600; }

/* Control row (#146) — one row above the navigation holding the collapse chevron at its
   right end. The left half is deliberately empty: that is the slot search (#153) fills, so
   search lands later without moving anything below it. Nothing is drawn on the rail's outer
   edge — a mark spanning the rail and the page has no correct palette in either scheme, and in
   the Compose frame it cannot even be painted. */
.fm3-nav__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px var(--m3-space-3) var(--m3-space-2);
  transition: padding var(--m3-motion-nav);
}
.fm3-nav--collapsed .fm3-nav__controls {
  /* At 72px only one control fits per row, so the two stack. `column-reverse` puts the chevron
     on top — it was already the topmost thing — with the folded magnifier beneath it. */
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  padding-inline: 14px;
}
.fm3-nav__controls-spacer { flex: 1; }

/* The palette's entry point (#153): a pill filling the control row's left half, folding to a
   magnifier at 72px so the row keeps a real target instead of a gap. */
.fm3-nav__search {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: var(--m3-space-3);
  height: 38px;
  /* 12px matches the nav row's own inset, so the magnifier sits in the same column as every nav
     icon rather than 3px inside it. */
  padding-inline: var(--m3-space-3);
  border: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
  border-radius: var(--m3-shape-full);
  background: color-mix(in srgb, #ffffff 6%, transparent);
  color: color-mix(in srgb, var(--m3-nav-on-surface) 74%, transparent);
  font: var(--m3-type-label-lg);
  font-family: var(--m3-font-sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--m3-motion-fast), color var(--m3-motion-fast), padding var(--m3-motion-nav);
}
.fm3-nav__search:hover {
  background: color-mix(in srgb, #ffffff 12%, transparent);
  color: var(--m3-nav-on-surface-strong);
}
.fm3-nav__search:focus-visible { outline: 2px solid var(--m3-nav-active-fg); outline-offset: 2px; }
.fm3-nav__search-icon { display: inline-flex; flex-shrink: 0; }
.fm3-nav__search-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--m3-motion-nav);
}
.fm3-nav__search-cap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  border-radius: var(--m3-shape-xs);
  background: color-mix(in srgb, #ffffff 11%, transparent);
  padding: 2px 5px;
  font: var(--m3-type-data-sm);
  transition: opacity var(--m3-motion-nav);
}
/* Folded: the label and the badge go, the magnifier stays centred and the tooltip carries the
   name — the collapsed rail must not lose the target, only its words. */
.fm3-nav--collapsed .fm3-nav__search {
  flex: 0 0 auto;
  width: 44px;
  justify-content: center;
  padding-inline: 0;
  border-color: transparent;
  background: none;
}
.fm3-nav--collapsed .fm3-nav__search:hover { background: color-mix(in srgb, #ffffff var(--m3-state-hover), transparent); }
.fm3-nav--collapsed .fm3-nav__search-label,
.fm3-nav--collapsed .fm3-nav__search-cap { display: none; }

.fm3-nav__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  border-radius: var(--m3-shape-sm);
  background: none;
  color: color-mix(in srgb, var(--m3-nav-on-surface) 76%, transparent);
  cursor: pointer;
  transition: background var(--m3-motion-fast), color var(--m3-motion-fast);
}
.fm3-nav__collapse:hover {
  background: color-mix(in srgb, #ffffff var(--m3-state-hover), transparent);
  color: var(--m3-nav-on-surface-strong);
}
.fm3-nav__collapse:focus-visible { outline: 2px solid var(--m3-nav-active-fg); outline-offset: 2px; }
/* « to collapse, » to expand — the glyph names the direction the rail will move. */
.fm3-nav__collapse svg { transition: transform var(--m3-motion-nav); }
.fm3-nav--collapsed .fm3-nav__collapse svg { transform: rotate(180deg); }

.fm3-nav__scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--m3-space-2) var(--m3-space-3);
  transition: padding var(--m3-motion-nav);
}
/* Collapsed: tips + flyouts must escape the rail; the icon rail is short, so
   trading the scrollbar for visible overflow is safe. */
.fm3-nav--collapsed .fm3-nav__scroll { overflow: visible; padding-inline: 14px; }

/* Group labels hold a fixed height so nothing shifts vertically; collapsed
   they become centered hairline separators. */
.fm3-nav__group-label {
  position: relative;
  height: 40px;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--m3-space-3) var(--m3-space-2);
}
.fm3-nav__group-label-text {
  font: var(--m3-type-label-sm);
  font-family: var(--m3-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  color: color-mix(in srgb, var(--m3-nav-on-surface) 60%, transparent);
  transition: opacity 0.14s ease;
}
.fm3-nav__group-label::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 14px;
  height: 1px;
  background: color-mix(in srgb, #ffffff 14%, transparent);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.fm3-nav--collapsed .fm3-nav__group-label-text { opacity: 0; }
.fm3-nav--collapsed .fm3-nav__group-label::after { opacity: 1; }

.fm3-nav__row + .fm3-nav__row { margin-top: 2px; }
.fm3-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--m3-space-3);
  width: 100%;
  height: 44px;
  padding: 0 var(--m3-space-3);
  border: none;
  border-radius: var(--m3-shape-full);
  background: none;
  color: inherit;
  font: var(--m3-type-label-lg);
  font-family: var(--m3-font-sans);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--m3-motion-fast);
}
.fm3-nav__item:hover { background: color-mix(in srgb, #ffffff var(--m3-state-hover), transparent); }
.fm3-nav__item:focus-visible { outline: 2px solid var(--m3-nav-active-fg); outline-offset: -2px; }
.fm3-nav__item.is-active {
  background: var(--m3-nav-active-bg);
  color: var(--m3-nav-active-fg);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m3-nav-active-fg) 20%, transparent);
}
.fm3-nav__item-icon { display: inline-flex; flex-shrink: 0; }
.fm3-nav__item-icon svg { width: 20px; height: 20px; }
.fm3-nav__item-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.14s ease;
}
.fm3-nav__item:has(.fm3-nav__item-badge) .fm3-nav__item-label { padding-right: 34px; }
.fm3-nav--collapsed .fm3-nav__item-label { opacity: 0; }
.fm3-nav__item-chevron {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  overflow: hidden;
  color: color-mix(in srgb, var(--m3-nav-on-surface) 75%, transparent);
  transform: rotate(-90deg);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), opacity 0.14s ease, width var(--m3-motion-nav);
}
.fm3-nav__item-chevron[data-open='true'] { transform: none; }
.fm3-nav--collapsed .fm3-nav__item-chevron { width: 0; opacity: 0; }

/* Badge is always absolutely positioned so pill → attention dot is a single
   smooth morph (top/right/size/font animate together). */
.fm3-nav__item-badge {
  position: absolute;
  top: 50%;
  right: var(--m3-space-3);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 20px;
  min-width: 20px;
  padding: 1px 6px;
  overflow: hidden;
  font: var(--m3-type-data-sm);
  font-family: var(--m3-font-mono);
  border-radius: var(--m3-shape-full);
  background: var(--m3-primary);
  color: #ffffff;
  transition: top var(--m3-motion-nav), right var(--m3-motion-nav), height var(--m3-motion-nav), min-width var(--m3-motion-nav), padding var(--m3-motion-nav), font-size var(--m3-motion-nav), transform var(--m3-motion-nav), background var(--m3-motion-nav);
}
.fm3-nav--collapsed .fm3-nav__item-badge {
  top: 6px;
  right: 8px;
  transform: none;
  height: 8px;
  min-width: 8px;
  padding: 0;
  font-size: 0px;
  line-height: 0;
  border-radius: 50%;
  background: var(--m3-inverse-primary, #a6c8ff);
}

/* Collapsed-mode tooltip — pure CSS, elevated navy chip beside the rail,
   150ms hover-intent delay. Leaf items only (parents open a flyout). */
.fm3-nav__tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(-4px, -50%);
  padding: 5px 10px;
  border-radius: var(--m3-shape-sm);
  background: color-mix(in srgb, var(--m3-nav-surface) 84%, #ffffff);
  color: var(--m3-nav-on-surface-strong);
  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
  box-shadow: var(--m3-elev-2);
  font: var(--m3-type-label-md);
  font-family: var(--m3-font-sans);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 6;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.fm3-nav--collapsed .fm3-nav__item:hover .fm3-nav__tip,
.fm3-nav--collapsed .fm3-nav__item:focus-visible .fm3-nav__tip,
.fm3-nav--collapsed .fm3-nav__search:hover .fm3-nav__tip,
.fm3-nav--collapsed .fm3-nav__search:focus-visible .fm3-nav__tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 0.15s;
}

/* Sub-navigation — expanded: inline indented list with a tree guide, animated
   open/closed via grid-template-rows. */
.fm3-nav__parent { position: relative; }
.fm3-nav__children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.fm3-nav__children.is-open { grid-template-rows: 1fr; }
.fm3-nav__children-inner { overflow: hidden; min-height: 0; position: relative; }
.fm3-nav__children-inner::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: color-mix(in srgb, #ffffff 14%, transparent);
}
.fm3-nav__subitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--m3-space-2);
  width: 100%;
  height: 34px;
  padding: 0 var(--m3-space-3) 0 44px;
  border: none;
  border-radius: var(--m3-shape-full);
  background: none;
  color: color-mix(in srgb, var(--m3-nav-on-surface) 88%, transparent);
  font: var(--m3-type-label-md);
  font-family: var(--m3-font-sans);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--m3-motion-fast), color var(--m3-motion-fast);
}
.fm3-nav__children .fm3-nav__subitem:first-child { margin-top: 2px; }
.fm3-nav__children .fm3-nav__subitem:last-child { margin-bottom: 4px; }
.fm3-nav__subitem:hover { background: color-mix(in srgb, #ffffff var(--m3-state-hover), transparent); color: var(--m3-nav-on-surface-strong); }
.fm3-nav__subitem:focus-visible { outline: 2px solid var(--m3-nav-active-fg); outline-offset: -2px; }
.fm3-nav__subitem.is-active { background: var(--m3-nav-active-bg); color: var(--m3-nav-active-fg); font-weight: 600; }
.fm3-nav__subitem-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fm3-nav__subitem-badge {
  font: var(--m3-type-data-sm);
  font-family: var(--m3-font-mono);
  min-width: 18px;
  text-align: center;
  padding: 0 5px;
  border-radius: var(--m3-shape-full);
  background: color-mix(in srgb, #ffffff 14%, transparent);
  color: var(--m3-nav-on-surface-strong);
}

/* Sub-navigation — collapsed: flyout menu beside the rail on hover / click
   (.is-pinned) / keyboard focus, with an invisible hover bridge over the gap. */
.fm3-nav__flyout {
  position: absolute;
  left: calc(100% + 10px);
  top: -4px;
  min-width: 200px;
  padding: var(--m3-space-2);
  border-radius: var(--m3-shape-md);
  background: color-mix(in srgb, var(--m3-nav-surface) 88%, #ffffff);
  border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
  box-shadow: var(--m3-elev-3);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  z-index: 6;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.fm3-nav__flyout::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 12px;
}
.fm3-nav__parent:hover .fm3-nav__flyout,
.fm3-nav__parent:focus-within .fm3-nav__flyout,
.fm3-nav__parent.is-pinned .fm3-nav__flyout {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.fm3-nav__flyout-title {
  font: var(--m3-type-label-sm);
  font-family: var(--m3-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--m3-nav-on-surface) 60%, transparent);
  padding: var(--m3-space-1) var(--m3-space-3) var(--m3-space-2);
}
.fm3-nav__flyout .fm3-nav__subitem { padding-left: var(--m3-space-3); }

/* Footer — org switcher folds away; the card morphs to avatar-only. */
/* Collapsed rail — animated (no display:none): width shrinks, text fades and
   clips, icons keep their x-position (constant item padding). */
.fm3-nav--collapsed { width: var(--m3-nav-rail-collapsed); }

@media (prefers-reduced-motion: reduce) {
  .fm3-nav,
  .fm3-nav *,
  .fm3-nav *::before,
  .fm3-nav *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   TopBar
   -------------------------------------------------------------------------- */
.fm3-topbar {
  display: flex;
  align-items: center;
  gap: var(--m3-space-4);
  height: var(--m3-top-bar-height);
  padding: 0 var(--m3-space-6);
  background: var(--m3-surface);
  border-bottom: 1px solid var(--m3-outline-variant);
  position: sticky;
  top: 0;
  z-index: calc(var(--m3-z-nav) - 1);
}
/* M3 top-app-bar leading button — the one back affordance, child destinations only. */
.fm3-topbar__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  background: none; border: none; cursor: pointer;
  border-radius: var(--m3-shape-sm);
  color: var(--m3-on-surface-variant);
  margin-right: var(--m3-space-1);
}
.fm3-topbar__back:hover { background: color-mix(in srgb, var(--m3-on-surface) var(--m3-state-hover), transparent); }
.fm3-topbar__crumbs { display: flex; align-items: center; gap: var(--m3-space-2); flex: 1; min-width: 0; overflow: hidden; }
.fm3-topbar__crumb {
  font: var(--m3-type-label-lg);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface-variant);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--m3-space-1) var(--m3-space-2);
  border-radius: var(--m3-shape-sm);
  white-space: nowrap;
}
.fm3-topbar__crumb:hover { background: color-mix(in srgb, var(--m3-on-surface) var(--m3-state-hover), transparent); }
.fm3-topbar__crumb.is-current { color: var(--m3-on-surface); font-weight: 600; cursor: default; }
.fm3-topbar__crumb.is-current:hover { background: none; }
.fm3-topbar__sep { color: var(--m3-outline); display: inline-flex; }
.fm3-topbar__sep svg { width: 16px; height: 16px; }
.fm3-topbar__actions { display: flex; align-items: center; gap: var(--m3-space-1); }
/* Compact + child: ancestors collapse — the arrow already says where up goes (#594). */
@media (max-width: 599px) {
  .fm3-topbar--has-back .fm3-topbar__crumb:not(.is-current),
  .fm3-topbar--has-back .fm3-topbar__sep { display: none; }
}
.fm3-topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  font: var(--m3-type-label-md);
  font-family: var(--m3-font-sans);
  border: none;
  cursor: pointer;
}

/* ---- SearchSelect (fm3-ssel) — searchable combo menu. Closed field reuses fm3-textfield. ---- */
.fm3-ssel { position: relative; min-width: 0; }
.fm3-ssel .fm3-textfield__box { cursor: pointer; }
.fm3-ssel__value {
  flex: 1; min-width: 0; color: var(--m3-on-surface);
  font: var(--m3-type-body-lg); padding: var(--m3-space-3) 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm3-ssel__value--muted { color: var(--m3-on-surface-variant); }
.fm3-ssel__menu {
  position: absolute; z-index: var(--m3-z-overlay); left: 0; right: 0; top: calc(100% + 4px);
  background: var(--m3-surface-container-high);
  border-radius: var(--m3-shape-xs);
  box-shadow: var(--m3-elev-3);
  overflow: hidden;
}
.fm3-ssel__search {
  display: flex; align-items: center; gap: var(--m3-space-3);
  background: var(--m3-surface-container-highest);
  border-bottom: 1px solid var(--m3-outline-variant);
  padding: var(--m3-space-3) var(--m3-space-4);
  color: var(--m3-on-surface-variant);
}
.fm3-ssel__q {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  color: var(--m3-on-surface); font: var(--m3-type-body-md);
}
.fm3-ssel__q::placeholder { color: var(--m3-on-surface-variant); opacity: 0.7; }
.fm3-ssel__count { font: var(--m3-type-data-sm); color: var(--m3-on-surface-variant); white-space: nowrap; }
.fm3-ssel__list { max-height: 296px; overflow-y: auto; padding: var(--m3-space-1) 0; }
.fm3-ssel__opt {
  display: flex; align-items: center; gap: var(--m3-space-4);
  padding: var(--m3-space-2) var(--m3-space-4);
  cursor: pointer;
}
.fm3-ssel__opt:hover { background: color-mix(in srgb, var(--m3-on-surface) 8%, transparent); }
.fm3-ssel__opt.is-hl { background: var(--m3-secondary-container); }
.fm3-ssel__opt-text { flex: 1; min-width: 0; }
.fm3-ssel__p {
  color: var(--m3-on-surface); font: var(--m3-type-body-lg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm3-ssel__p b { font-weight: 700; }
.fm3-ssel__s {
  color: var(--m3-on-surface-variant); font: var(--m3-type-body-sm); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm3-ssel__tag {
  flex: none; max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--m3-type-data-sm); text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--m3-surface-container-highest); color: var(--m3-on-surface-variant);
  border-radius: var(--m3-shape-xs); padding: 2px 6px;
}
.fm3-ssel__band {
  display: flex; align-items: center; gap: var(--m3-space-2);
  background: var(--m3-surface-container-highest);
  padding: var(--m3-space-2) var(--m3-space-4);
  font: var(--m3-type-data-sm); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--m3-on-surface-variant);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm3-ssel__empty { padding: var(--m3-space-4); font: var(--m3-type-body-md); color: var(--m3-on-surface-variant); }
.fm3-ssel__action {
  display: flex; align-items: center; gap: var(--m3-space-3);
  border-top: 1px solid var(--m3-outline-variant);
  padding: var(--m3-space-3) var(--m3-space-4);
  font: var(--m3-type-label-lg); font-weight: 600; color: var(--m3-primary);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm3-ssel__action:hover { background: color-mix(in srgb, var(--m3-primary) 8%, transparent); }
.fm3-ssel__kbd {
  display: flex; align-items: center; gap: var(--m3-space-4);
  background: var(--m3-surface-container-highest);
  border-top: 1px solid var(--m3-outline-variant);
  padding: var(--m3-space-2) var(--m3-space-4);
}
.fm3-ssel__kbd span { font: var(--m3-type-body-sm); color: var(--m3-on-surface-variant); display: inline-flex; align-items: center; gap: 5px; }
.fm3-ssel__cap {
  font: var(--m3-type-data-sm);
  background: var(--m3-surface-container-lowest);
  border: 1px solid var(--m3-outline-variant);
  border-radius: 3px; padding: 0 4px;
}