/* Seed components. Every value comes from tokens.css; type comes from the type-style classes. */

body { margin: 0; font-family: var(--font-primary); background: var(--bg-primary); color: var(--text-primary); }
.sd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Shared focus treatment: the source halo plus a solid ring that meets 3:1. */
.sd-focus-ring, .sd-btn:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }

/* ---------- Icon ---------- */
.sd-icon { display: inline-block; flex: none; vertical-align: middle; }

/* ---------- Spinner ---------- */
.sd-spinner { display: inline-flex; color: inherit; line-height: 0; }
.sd-spinner .sd-icon { animation: sd-spin 0.8s linear infinite; }
@keyframes sd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sd-spinner .sd-icon { animation-duration: 2.4s; } }

/* ---------- Button ---------- */
.sd-btn {
  font-family: var(--font-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  height: var(--size-4xl); padding: 0 var(--space-base);
  border: 1px solid transparent; border-radius: var(--radius-lg);
  background: transparent; color: var(--text-primary);
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.sd-btn--sm { height: var(--size-3xl); padding: 0 var(--space-sm); border-radius: var(--radius-md); gap: var(--space-xxs); }
.sd-btn--lg { height: var(--size-5xl); padding: 0 var(--space-lg); }
.sd-btn--icon { padding: 0; width: var(--size-4xl); }
.sd-btn--icon.sd-btn--sm { width: var(--size-3xl); }
.sd-btn--icon.sd-btn--lg { width: var(--size-5xl); }
.sd-btn--full { display: flex; width: 100%; }
.sd-btn__icon { display: inline-flex; line-height: 0; }
.sd-btn:disabled { cursor: not-allowed; }

.sd-btn--primary { background: var(--button-primary); color: var(--button-primary-text); }
.sd-btn--primary:hover:not(:disabled) { background: var(--button-primary-hover); color: var(--button-primary-text-hover); }
.sd-btn--primary:focus-visible { box-shadow: var(--button-focus-primary); }

.sd-btn--secondary { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border-primary); box-shadow: var(--elevation-raised); }
.sd-btn--secondary:hover:not(:disabled) { background: var(--bg-primary-hover); }
.sd-btn--secondary:focus-visible { box-shadow: var(--button-focus-secondary); }

.sd-btn--tertiary { background: var(--bg-tertiary); color: var(--text-primary); }
.sd-btn--tertiary:hover:not(:disabled) { background: var(--bg-tertiary-hover); }
.sd-btn--tertiary:focus-visible { box-shadow: var(--button-focus-tertiary); }

.sd-btn--ghost { background: var(--button-ghost); color: var(--text-secondary); }
.sd-btn--ghost:hover:not(:disabled) { background: var(--button-ghost-hover); color: var(--text-primary); }
.sd-btn--ghost:focus-visible { box-shadow: var(--button-focus-ghost); }

.sd-btn--destructive { background: var(--button-destructive); color: var(--button-destructive-text); }
.sd-btn--destructive:hover:not(:disabled) { background: var(--button-destructive-hover); color: var(--button-destructive-text-hover); }
.sd-btn--destructive:focus-visible { box-shadow: var(--button-focus-destructive); outline-color: var(--border-error-primary); }

.sd-btn--success { background: var(--button-success); color: var(--button-success-text); }
.sd-btn--success:hover:not(:disabled) { background: var(--button-success-hover); color: var(--button-success-text-hover); }
.sd-btn--success:focus-visible { box-shadow: var(--button-focus-success); outline-color: var(--border-success-primary); }

.sd-btn--link { height: auto; padding: 0; border: 0; border-radius: var(--radius-sm); color: var(--text-link); font: inherit; }
.sd-btn--link:hover:not(:disabled) { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

.sd-btn--primary:disabled, .sd-btn--destructive:disabled, .sd-btn--success:disabled { background: var(--bg-disabled); color: var(--text-white); }
.sd-btn--secondary:disabled { background: var(--bg-disabled-alt); color: var(--text-disabled); border-color: var(--border-disabled-alt); box-shadow: none; }
.sd-btn--tertiary:disabled { background: var(--bg-disabled-alt); color: var(--text-disabled); }
.sd-btn--ghost:disabled, .sd-btn--link:disabled { color: var(--text-disabled); }
.sd-btn--loading:disabled { cursor: progress; }

/* ---------- Label ---------- */
.sd-label { display: inline-block; color: var(--text-primary); cursor: default; }
.sd-label[for] { cursor: pointer; }
.sd-label--disabled { color: var(--text-disabled); cursor: not-allowed; }
.sd-label__req { color: var(--text-error-primary); }

/* ---------- Input ---------- */
.sd-input {
  display: flex; align-items: center; gap: var(--space-xs);
  height: var(--size-4xl); padding: 0 var(--space-sm); box-sizing: border-box;
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  box-shadow: var(--elevation-raised);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.sd-input--sm { height: var(--size-3xl); padding: 0 var(--space-xs); }
.sd-input--lg { height: var(--size-5xl); padding: 0 var(--space-base); }
.sd-input:hover { border-color: var(--border-primary-solid); }
.sd-input:focus-within { border-color: var(--border-accent-primary); box-shadow: var(--button-focus-primary); }
.sd-input--invalid, .sd-input--invalid:hover { border-color: var(--border-error-primary); }
.sd-input--invalid:focus-within { border-color: var(--border-error-primary); box-shadow: var(--button-focus-destructive); }
.sd-input--disabled, .sd-input--disabled:hover { background: var(--bg-disabled-alt); border-color: var(--border-disabled-alt); box-shadow: none; color: var(--text-disabled); }
.sd-input__icon { display: inline-flex; color: var(--icon-tertiary); line-height: 0; }
.sd-input--disabled .sd-input__icon { color: var(--icon-disabled); }
.sd-input__control {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  color: inherit; font-family: var(--font-primary);
}
.sd-input__control::placeholder { color: var(--text-placeholder); }
.sd-input__control:disabled { cursor: not-allowed; }

/* ---------- Textarea ---------- */
.sd-textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: var(--size-5xl);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-primary);
  border: 1px solid var(--border-primary); border-radius: var(--radius-md); box-shadow: var(--elevation-raised);
  resize: vertical; outline: 0;
}
.sd-textarea--fixed { resize: none; }
.sd-textarea::placeholder { color: var(--text-placeholder); }
.sd-textarea:hover { border-color: var(--border-primary-solid); }
.sd-textarea:focus { border-color: var(--border-accent-primary); box-shadow: var(--button-focus-primary); }
.sd-textarea--invalid, .sd-textarea--invalid:hover { border-color: var(--border-error-primary); }
.sd-textarea--invalid:focus { box-shadow: var(--button-focus-destructive); }
.sd-textarea:disabled { background: var(--bg-disabled-alt); border-color: var(--border-disabled-alt); color: var(--text-disabled); box-shadow: none; cursor: not-allowed; }

/* ---------- Choice row (Checkbox, Radio, Switch with a label) ---------- */
.sd-choice { display: inline-flex; align-items: flex-start; gap: var(--space-xs); }
.sd-choice__text { display: flex; flex-direction: column; gap: var(--space-xxxs); }
.sd-choice__desc { color: var(--text-tertiary); }
.sd-choice--disabled .sd-choice__desc { color: var(--text-disabled); }

/* ---------- Checkbox ---------- */
.sd-checkbox { position: relative; display: inline-flex; flex: none; width: var(--size-lg); height: var(--size-lg); margin-top: var(--space-xxxs); }
.sd-checkbox__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sd-checkbox__box {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box;
  border: 1px solid var(--icon-tertiary); border-radius: var(--radius-sm); background: var(--bg-primary);
  color: var(--icon-white); pointer-events: none;
}
.sd-checkbox__box .sd-icon { opacity: 0; }
.sd-checkbox__input:hover + .sd-checkbox__box { border-color: var(--icon-secondary); }
.sd-checkbox__input:checked + .sd-checkbox__box,
.sd-checkbox__input:indeterminate + .sd-checkbox__box { background: var(--bg-accent-solid); border-color: var(--bg-accent-solid); }
.sd-checkbox__input:checked + .sd-checkbox__box .sd-icon,
.sd-checkbox__input:indeterminate + .sd-checkbox__box .sd-icon { opacity: 1; }
.sd-checkbox__input:focus-visible + .sd-checkbox__box { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.sd-checkbox--invalid .sd-checkbox__box { border-color: var(--border-error-primary); }
.sd-checkbox__input:disabled { cursor: not-allowed; }
.sd-checkbox__input:disabled + .sd-checkbox__box { background: var(--bg-disabled-alt); border-color: var(--border-disabled); color: var(--icon-disabled); }

/* ---------- Radio ---------- */
.sd-radio-group { display: flex; flex-direction: column; gap: var(--space-sm); }
.sd-radio-group--row { flex-direction: row; flex-wrap: wrap; gap: var(--space-lg); }
.sd-radio { position: relative; display: inline-flex; flex: none; width: var(--size-lg); height: var(--size-lg); margin-top: var(--space-xxxs); }
.sd-radio__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sd-radio__dot {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box;
  border: 1px solid var(--icon-tertiary); border-radius: var(--radius-full); background: var(--bg-primary); pointer-events: none;
}
.sd-radio__dot::after { content: ""; width: var(--size-xs); height: var(--size-xs); border-radius: var(--radius-full); background: var(--icon-white); transform: scale(0); transition: transform .12s ease; }
.sd-radio__input:hover + .sd-radio__dot { border-color: var(--icon-secondary); }
.sd-radio__input:checked + .sd-radio__dot { background: var(--bg-accent-solid); border-color: var(--bg-accent-solid); }
.sd-radio__input:checked + .sd-radio__dot::after { transform: scale(1); }
.sd-radio__input:focus-visible + .sd-radio__dot { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.sd-radio--invalid .sd-radio__dot { border-color: var(--border-error-primary); }
.sd-radio__input:disabled { cursor: not-allowed; }
.sd-radio__input:disabled + .sd-radio__dot { background: var(--bg-disabled-alt); border-color: var(--border-disabled); }
.sd-radio__input:disabled + .sd-radio__dot::after { background: var(--icon-disabled); }

/* ---------- Switch ---------- */
.sd-switch { position: relative; display: inline-flex; flex: none; width: var(--size-4xl); height: var(--size-xl); margin-top: var(--space-px); }
.sd-switch--sm { width: var(--size-3xl); height: var(--size-lg); }
.sd-switch__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sd-switch__track {
  position: relative; display: inline-block; width: 100%; height: 100%;
  border-radius: var(--radius-full); background: var(--icon-tertiary); pointer-events: none; transition: background-color .15s ease;
}
.sd-switch__thumb {
  position: absolute; top: var(--space-xxxs); left: var(--space-xxxs);
  width: var(--size-lg); height: var(--size-lg); border-radius: var(--radius-full);
  background: var(--b-w-white); box-shadow: var(--elevation-sm); transition: transform .15s ease;
}
.sd-switch--sm .sd-switch__thumb { width: var(--size-md); height: var(--size-md); }
.sd-switch__input:hover + .sd-switch__track { background: var(--icon-secondary); }
.sd-switch__input:checked + .sd-switch__track { background: var(--bg-accent-solid); }
.sd-switch__input:checked:hover + .sd-switch__track { background: var(--bg-accent-solid-hover); }
.sd-switch__input:checked + .sd-switch__track .sd-switch__thumb { transform: translateX(var(--size-xl)); }
.sd-switch--sm .sd-switch__input:checked + .sd-switch__track .sd-switch__thumb { transform: translateX(var(--size-lg)); }
.sd-switch__input:focus-visible + .sd-switch__track { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.sd-switch__input:disabled { cursor: not-allowed; }
.sd-switch__input:disabled + .sd-switch__track { background: var(--bg-disabled-alt); }
.sd-switch__input:disabled + .sd-switch__track .sd-switch__thumb { background: var(--bg-disabled); box-shadow: none; }

/* ---------- Badge ---------- */
.sd-badge {
  display: inline-flex; align-items: center; gap: var(--space-xxs);
  height: var(--size-2xl); padding: 0 var(--space-xs); box-sizing: border-box;
  border: 1px solid transparent; border-radius: var(--radius-full); white-space: nowrap;
}
.sd-badge__dot { width: var(--size-sm); height: var(--size-sm); border-radius: var(--radius-full); background: currentColor; }
.sd-badge--neutral.sd-badge--soft { background: var(--bg-tertiary); color: var(--text-secondary); }
.sd-badge--neutral.sd-badge--solid { background: var(--bg-black-solid); color: var(--text-on-dark-color); }
.sd-badge--neutral.sd-badge--outline { border-color: var(--border-primary); color: var(--text-secondary); }
.sd-badge--accent.sd-badge--soft { background: var(--bg-accent-primary); color: var(--text-info-primary-hover); }
.sd-badge--accent.sd-badge--solid { background: var(--bg-accent-solid); color: var(--text-white); }
.sd-badge--accent.sd-badge--outline { border-color: var(--border-accent-primary); color: var(--text-info-primary-hover); }
.sd-badge--error.sd-badge--soft { background: var(--bg-error-primary); color: var(--text-error-primary); }
.sd-badge--error.sd-badge--solid { background: var(--bg-error-secondary); color: var(--text-on-dark-color); }
.sd-badge--error.sd-badge--outline { border-color: var(--border-error-primary); color: var(--text-error-primary); }
.sd-badge--success.sd-badge--soft { background: var(--bg-success-primary); color: var(--text-success-primary-hover); }
.sd-badge--success.sd-badge--solid { background: var(--bg-success-secondary); color: var(--text-on-dark-color); }
.sd-badge--success.sd-badge--outline { border-color: var(--border-success-primary); color: var(--text-success-primary-hover); }
.sd-badge--warning.sd-badge--soft { background: var(--bg-warning-primary); color: var(--text-warning-primary-hover); }
.sd-badge--warning.sd-badge--solid { background: var(--bg-warning-secondary); color: var(--text-on-dark-color); }
.sd-badge--warning.sd-badge--outline { border-color: var(--border-warning-primary); color: var(--text-warning-primary-hover); }
.sd-badge--info.sd-badge--soft { background: var(--bg-info-primary); color: var(--text-info-primary-hover); }
.sd-badge--info.sd-badge--solid { background: var(--bg-info-secondary); color: var(--text-on-dark-color); }
.sd-badge--info.sd-badge--outline { border-color: var(--border-info-primary); color: var(--text-info-primary-hover); }
.sd-badge--offer.sd-badge--soft { background: var(--bg-offer-primary); color: var(--text-offer-primary-hover); }
.sd-badge--offer.sd-badge--solid { background: var(--bg-offer-secondary); color: var(--text-on-dark-color); }
.sd-badge--offer.sd-badge--outline { border-color: var(--border-offer-primary); color: var(--text-offer-primary-hover); }

/* ---------- Avatar ---------- */
.sd-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  width: var(--size-3xl); height: var(--size-3xl); border-radius: var(--radius-full);
  background: var(--bg-tertiary); color: var(--text-secondary); user-select: none;
}
.sd-avatar--xs { width: var(--size-2xl); height: var(--size-2xl); }
.sd-avatar--lg { width: var(--size-5xl); height: var(--size-5xl); }
.sd-avatar--md { width: var(--size-4xl); height: var(--size-4xl); }
.sd-avatar--square { border-radius: var(--radius-lg); }
.sd-avatar--xs.sd-avatar--square, .sd-avatar--sm.sd-avatar--square { border-radius: var(--radius-md); }
.sd-avatar__img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kbd ---------- */
.sd-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--size-xl); height: var(--size-xl); padding: 0 var(--space-xxs); box-sizing: border-box;
  font-family: var(--font-mono); color: var(--text-secondary);
  background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md);
  box-shadow: var(--elevation-2xs);
}

/* ---------- Separator ---------- */
.sd-separator { flex: none; height: 1px; width: 100%; background: var(--border-secondary); }
.sd-separator--vertical { width: 1px; height: auto; align-self: stretch; }

/* ---------- Skeleton ---------- */
.sd-skeleton { display: block; height: var(--size-lg); border-radius: var(--radius-md); background: var(--bg-tertiary); animation: sd-pulse 1.6s ease-in-out infinite; }
.sd-skeleton--text { height: var(--size-md); border-radius: var(--radius-sm); }
.sd-skeleton--circle { border-radius: var(--radius-full); }
@keyframes sd-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sd-skeleton { animation: none; } }

/* ---------- Preview scaffolding (cards only) ---------- */
.sd-demo { display: flex; flex-direction: column; gap: var(--space-base); padding: var(--space-base); }
.sd-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.sd-demo__stack { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 320px; }

/* =====================================================================
   COMPOSITES
   ===================================================================== */

/* ---------- Field ---------- */
.sd-field { display: flex; flex-direction: column; gap: var(--space-xxs); min-width: 0; }
.sd-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.sd-field__aside { color: var(--text-tertiary); }
.sd-field__hint { color: var(--text-tertiary); }
.sd-field__error { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-error-primary); }

/* ---------- Select (trigger reuses the Input shell) ---------- */
.sd-select { width: 100%; cursor: pointer; text-align: left; font-family: var(--font-primary); }
.sd-select:hover:not(:disabled) { border-color: var(--border-primary-solid); }
.sd-select:focus-visible, .sd-select--open { outline: 0; border-color: var(--border-accent-primary); box-shadow: var(--button-focus-primary); }
.sd-select.sd-input--invalid:focus-visible { border-color: var(--border-error-primary); box-shadow: var(--button-focus-destructive); }
.sd-select:disabled { cursor: not-allowed; }
.sd-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.sd-select__placeholder { color: var(--text-placeholder); }
.sd-input--disabled .sd-select__value { color: var(--text-disabled); }
.sd-select__chevron { transition: transform .15s ease; }
.sd-select--open .sd-select__chevron { transform: rotate(180deg); }

/* ---------- Floating surfaces: Popover, menus, Select list ---------- */
.sd-popover {
  position: fixed; z-index: 50; box-sizing: border-box; max-width: calc(100vw - 16px);
  padding: var(--space-base); background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); box-shadow: var(--elevation-lg);
  font-family: var(--font-primary);
}
.sd-popover:focus { outline: 0; }
.sd-menu { padding: var(--space-xxs); max-height: 320px; overflow-y: auto; }
.sd-menu__item {
  display: flex; align-items: center; gap: var(--space-xs);
  min-height: var(--size-3xl); padding: var(--space-xxs) var(--space-xs); box-sizing: border-box; border-radius: var(--radius-md);
  color: var(--text-primary); cursor: pointer; user-select: none; outline: 0;
}
.sd-menu__item:focus, .sd-menu__item:hover { background: var(--bg-tertiary); }
.sd-menu__item:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: -2px; }
.sd-menu__item--destructive { color: var(--text-error-primary); }
.sd-menu__item--destructive .sd-menu__icon { color: var(--icon-error-primary); }
.sd-menu__item--destructive:focus, .sd-menu__item--destructive:hover { background: var(--bg-error-primary); }
.sd-menu__item--disabled { color: var(--text-disabled); cursor: not-allowed; }
.sd-menu__item--disabled:hover { background: transparent; }
.sd-menu__icon { display: inline-flex; color: var(--icon-secondary); line-height: 0; }
.sd-menu__item--disabled .sd-menu__icon { color: var(--icon-disabled); }
.sd-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-menu__shortcut { color: var(--text-tertiary); font-family: var(--font-mono); }
.sd-menu__check { display: inline-flex; width: var(--size-lg); color: var(--icon-accent-primary-hover); line-height: 0; }
.sd-menu__sep { margin: var(--space-xxs) calc(-1 * var(--space-xxs)); width: auto; }
.sd-menu__group { padding: var(--space-xs) var(--space-xs) var(--space-xxs); color: var(--text-tertiary); }

/* ---------- Tooltip ---------- */
.sd-tooltip {
  position: fixed; z-index: 60; display: inline-flex; align-items: center; gap: var(--space-xs);
  max-width: 280px; padding: var(--space-xxs) var(--space-xs);
  background: var(--bg-black-solid); color: var(--text-on-dark-color);
  border-radius: var(--radius-md); box-shadow: var(--elevation-md); pointer-events: none;
}
.sd-tooltip__kbd { font-family: var(--font-mono); opacity: .72; }

/* ---------- Card ---------- */
.sd-card {
  display: flex; flex-direction: column; box-sizing: border-box; min-width: 0;
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); box-shadow: var(--elevation-raised);
}
.sd-card--interactive { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.sd-card--interactive:hover { box-shadow: var(--elevation-md); border-color: var(--border-primary); }
.sd-card__header { display: flex; flex-direction: column; gap: var(--space-xxs); padding: var(--space-lg) var(--space-lg) 0; }
.sd-card__title { margin: 0; color: var(--text-primary); }
.sd-card__desc { margin: 0; color: var(--text-secondary); }
.sd-card__content { padding: var(--space-base) var(--space-lg); }
.sd-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); padding: 0 var(--space-lg) var(--space-lg); }

/* ---------- Alert ---------- */
.sd-alert {
  display: flex; align-items: flex-start; gap: var(--space-sm); box-sizing: border-box;
  padding: var(--space-base); border: 1px solid transparent; border-radius: var(--radius-lg);
  color: var(--text-primary);
}
.sd-alert__icon { display: inline-flex; line-height: 0; }
.sd-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xxs); padding-top: var(--space-xxxs); }
.sd-alert__title { margin: 0; color: var(--text-primary); }
.sd-alert__desc { color: var(--text-secondary); }
.sd-alert__action { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.sd-alert__close { margin: calc(-1 * var(--space-xxs)) calc(-1 * var(--space-xxs)) 0 0; }
.sd-alert--neutral { background: var(--bg-secondary); border-color: var(--border-secondary); }
.sd-alert--neutral .sd-alert__icon { color: var(--icon-secondary); }
.sd-alert--accent, .sd-alert--info { background: var(--bg-info-primary); border-color: var(--border-info-secondary); }
.sd-alert--accent .sd-alert__icon, .sd-alert--info .sd-alert__icon { color: var(--icon-info-primary); }
.sd-alert--success { background: var(--bg-success-primary); border-color: var(--border-success-secondary); }
.sd-alert--success .sd-alert__icon { color: var(--icon-success-primary-hover); }
.sd-alert--warning { background: var(--bg-warning-primary); border-color: var(--border-warning-secondary); }
.sd-alert--warning .sd-alert__icon { color: var(--icon-warning-primary-hover); }
.sd-alert--error { background: var(--bg-error-primary); border-color: var(--border-error-secondary); }
.sd-alert--error .sd-alert__icon { color: var(--icon-error-primary); }
.sd-alert--offer { background: var(--bg-offer-primary); border-color: var(--border-offer-secondary); }
.sd-alert--offer .sd-alert__icon { color: var(--icon-offer-primary-hover); }

/* ---------- Tabs ---------- */
.sd-tabs { display: flex; flex-direction: column; gap: var(--space-base); min-width: 0; }
.sd-tablist { display: flex; align-items: center; gap: var(--space-lg); }
.sd-tablist--full .sd-tab { flex: 1; justify-content: center; }
.sd-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  height: var(--size-4xl); padding: 0; border: 0; background: transparent; color: var(--text-tertiary);
  font-family: var(--font-primary); cursor: pointer; white-space: nowrap; position: relative;
}
.sd-tab:hover:not(:disabled) { color: var(--text-primary); }
.sd-tab[aria-selected="true"] { color: var(--text-primary); }
.sd-tab:disabled { color: var(--text-disabled); cursor: not-allowed; }
.sd-tab:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.sd-tablist--line { border-bottom: 1px solid var(--border-secondary); }
.sd-tablist--line .sd-tab { margin-bottom: -1px; border-bottom: 2px solid transparent; }
.sd-tablist--line .sd-tab[aria-selected="true"] { border-bottom-color: var(--text-primary); }
.sd-tablist--pill { gap: var(--space-xxxs); padding: var(--space-xxxs); background: var(--bg-tertiary); border-radius: var(--radius-lg); align-self: flex-start; }
.sd-tablist--pill.sd-tablist--full { align-self: stretch; }
.sd-tablist--pill .sd-tab { height: var(--size-3xl); padding: 0 var(--space-sm); border-radius: var(--radius-md); }
.sd-tablist--pill .sd-tab[aria-selected="true"] { background: var(--bg-primary); box-shadow: var(--elevation-sm); }
.sd-tabpanel:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; border-radius: var(--radius-md); }

/* ---------- Dialog ---------- */
.sd-dialog__overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  padding: var(--space-base); background: var(--bg-overlay-alpha-secondary);
}
.sd-dialog {
  position: relative; display: flex; flex-direction: column; gap: var(--space-base); box-sizing: border-box;
  width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: var(--space-lg);
  background: var(--bg-elevated); color: var(--text-primary); font-family: var(--font-primary);
  border: 1px solid var(--border-secondary); border-radius: var(--radius-2xl); box-shadow: var(--elevation-xl);
}
.sd-dialog:focus { outline: 0; }
.sd-dialog--sm { max-width: 400px; }
.sd-dialog--md { max-width: 520px; }
.sd-dialog--lg { max-width: 680px; }
.sd-dialog__header { display: flex; flex-direction: column; gap: var(--space-xxs); padding-right: var(--space-2xl); }
.sd-dialog__title { margin: 0; }
.sd-dialog__desc { margin: 0; color: var(--text-secondary); }
.sd-dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-xs); }
.sd-dialog__close { position: absolute; top: var(--space-base); right: var(--space-base); }

/* ---------- Toast ---------- */
.sd-toaster { position: fixed; z-index: 70; display: flex; flex-direction: column; gap: var(--space-xs); width: 360px; max-width: calc(100vw - 32px); pointer-events: none; }
.sd-toaster--bottom-right { right: var(--space-base); bottom: var(--space-base); }
.sd-toaster--bottom-left { left: var(--space-base); bottom: var(--space-base); }
.sd-toaster--top-right { right: var(--space-base); top: var(--space-base); }
.sd-toaster--top-center { left: 50%; top: var(--space-base); transform: translateX(-50%); }
.sd-toast {
  display: flex; align-items: flex-start; gap: var(--space-sm); box-sizing: border-box; pointer-events: auto;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-base);
  background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-primary);
  border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); box-shadow: var(--elevation-lg);
  animation: sd-toast-in .18s ease-out;
}
@keyframes sd-toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .sd-toast { animation: none; } }
.sd-toast__icon { display: inline-flex; line-height: 0; padding-top: var(--space-xxs); }
.sd-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xxxs); padding-top: var(--space-xxs); }
.sd-toast__title, .sd-toast__desc { margin: 0; }
.sd-toast__desc { color: var(--text-secondary); }
.sd-toast__action { margin-top: var(--space-xs); }
.sd-toast--success .sd-toast__icon { color: var(--icon-success-primary); }
.sd-toast--error .sd-toast__icon { color: var(--icon-error-primary); }
.sd-toast--warning .sd-toast__icon { color: var(--icon-warning-primary); }
.sd-toast--info .sd-toast__icon { color: var(--icon-info-primary); }

/* =====================================================================
   COMPOSITES, batch 2
   ===================================================================== */

/* menu row additions (Combobox) */
.sd-menu__item--active { background: var(--bg-tertiary); }
.sd-menu__item--active.sd-menu__item--destructive { background: var(--bg-error-primary); }
.sd-menu__desc { display: block; color: var(--text-tertiary); white-space: normal; }
.sd-menu__item:has(.sd-menu__desc) { padding-top: var(--space-xs); padding-bottom: var(--space-xs); align-items: flex-start; }
.sd-menu__item:has(.sd-menu__desc) .sd-menu__icon { padding-top: var(--space-xxxs); }
.sd-menu__none { padding: var(--space-sm) var(--space-xs); color: var(--text-tertiary); }

/* ---------- Combobox (Input + shared list) ---------- */
.sd-combobox .sd-input__icon:last-child { margin-right: calc(-1 * var(--space-xxs)); }
.sd-combobox__clear.sd-btn--sm { width: var(--size-2xl); height: var(--size-2xl); }

/* ---------- Sheet (Dialog placed at an edge) ---------- */
.sd-dialog__overlay--sheet { padding: 0; align-items: stretch; }
.sd-dialog__overlay--right { justify-content: flex-end; }
.sd-dialog__overlay--left { justify-content: flex-start; }
.sd-dialog__overlay--bottom { align-items: flex-end; }
.sd-sheet { max-height: none; border-radius: 0; height: 100%; }
.sd-sheet .sd-dialog__body { flex: 1; overflow: auto; }
.sd-sheet--right, .sd-sheet--left { width: 100%; }
.sd-sheet--right.sd-sheet--sm, .sd-sheet--left.sd-sheet--sm { max-width: 320px; }
.sd-sheet--right.sd-sheet--md, .sd-sheet--left.sd-sheet--md { max-width: 420px; }
.sd-sheet--right.sd-sheet--lg, .sd-sheet--left.sd-sheet--lg { max-width: 560px; }
.sd-sheet--right { border-width: 0 0 0 1px; animation: sd-sheet-r .2s ease-out; }
.sd-sheet--left { border-width: 0 1px 0 0; animation: sd-sheet-l .2s ease-out; }
.sd-sheet--bottom { height: auto; max-height: 85vh; border-width: 1px 0 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; animation: sd-sheet-b .2s ease-out; }
.sd-sheet .sd-dialog__footer { margin-top: auto; padding-top: var(--space-base); border-top: 1px solid var(--border-secondary); }
@keyframes sd-sheet-r { from { transform: translateX(100%); } }
@keyframes sd-sheet-l { from { transform: translateX(-100%); } }
@keyframes sd-sheet-b { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .sd-sheet { animation: none; } }

/* ---------- Progress ---------- */
.sd-progress { display: flex; flex-direction: column; gap: var(--space-xxs); min-width: 0; }
.sd-progress__top { display: flex; justify-content: space-between; gap: var(--space-xs); }
.sd-progress__label { color: var(--text-primary); }
.sd-progress__value { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sd-progress__track { position: relative; height: var(--size-sm); overflow: hidden; border-radius: var(--radius-full); background: var(--bg-tertiary); }
.sd-progress--sm .sd-progress__track { height: var(--size-xs); }
.sd-progress__bar { height: 100%; border-radius: var(--radius-full); background: var(--bg-accent-solid); transition: width .3s ease; }
.sd-progress--success .sd-progress__bar { background: var(--bg-success-secondary); }
.sd-progress--warning .sd-progress__bar { background: var(--bg-warning-secondary); }
.sd-progress--error .sd-progress__bar { background: var(--bg-error-secondary); }
.sd-progress__track--indeterminate .sd-progress__bar { position: absolute; width: 40%; animation: sd-indet 1.4s ease-in-out infinite; }
@keyframes sd-indet { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .sd-progress__track--indeterminate .sd-progress__bar { animation-duration: 4s; } }

/* ---------- EmptyState ---------- */
.sd-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); padding: var(--space-3xl) var(--space-lg); }
.sd-empty--sm { padding: var(--space-lg) var(--space-base); gap: var(--space-xxs); }
.sd-empty__icon {
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-xs);
  width: var(--size-5xl); height: var(--size-5xl); border-radius: var(--radius-full);
  background: var(--bg-tertiary); color: var(--icon-secondary);
}
.sd-empty--sm .sd-empty__icon { width: var(--size-4xl); height: var(--size-4xl); margin-bottom: var(--space-xxs); }
.sd-empty__title { margin: 0; color: var(--text-primary); }
.sd-empty__desc { margin: 0; max-width: 360px; color: var(--text-secondary); }
.sd-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-xs); }

/* ---------- Accordion ---------- */
.sd-accordion { display: flex; flex-direction: column; }
.sd-accordion__item { border-bottom: 1px solid var(--border-secondary); }
.sd-accordion__heading { margin: 0; }
.sd-accordion__trigger {
  display: flex; align-items: center; gap: var(--space-xs); width: 100%; min-height: var(--size-5xl);
  padding: var(--space-sm) 0; border: 0; background: none; color: var(--text-primary); text-align: left; cursor: pointer; font-family: var(--font-primary);
}
.sd-accordion__trigger:hover:not(:disabled) .sd-accordion__title { text-decoration: underline; text-underline-offset: 3px; }
.sd-accordion__trigger:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.sd-accordion__trigger:disabled { color: var(--text-disabled); cursor: not-allowed; }
.sd-accordion__icon { display: inline-flex; color: var(--icon-secondary); line-height: 0; }
.sd-accordion__title { flex: 1; }
.sd-accordion__chevron { display: inline-flex; color: var(--icon-tertiary); line-height: 0; transition: transform .15s ease; }
.sd-accordion__item--open .sd-accordion__chevron { transform: rotate(180deg); }
.sd-accordion__panel { padding: 0 0 var(--space-base); color: var(--text-secondary); }
.sd-accordion__panel[hidden] { padding: 0; }
.sd-accordion--card { gap: var(--space-xs); }
.sd-accordion--card .sd-accordion__item { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-primary); padding: 0 var(--space-base); }
.sd-accordion--card .sd-accordion__item--open { box-shadow: var(--elevation-raised); }

/* ---------- Breadcrumb ---------- */
.sd-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs); margin: 0; padding: 0; list-style: none; }
.sd-breadcrumb__item { display: inline-flex; min-width: 0; }
.sd-breadcrumb__sep { display: inline-flex; color: var(--icon-tertiary); line-height: 0; }
.sd-breadcrumb__link, .sd-breadcrumb__current { display: inline-flex; align-items: center; gap: var(--space-xxs); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-breadcrumb__link { color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); }
a.sd-breadcrumb__link:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
a.sd-breadcrumb__link:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.sd-breadcrumb__current { color: var(--text-primary); }
.sd-breadcrumb__icon { display: inline-flex; color: var(--icon-secondary); line-height: 0; }
.sd-breadcrumb__more.sd-btn--sm { width: var(--size-2xl); height: var(--size-2xl); }

/* ---------- Pagination ---------- */
.sd-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.sd-pagination__pages { display: flex; align-items: center; gap: var(--space-xxs); margin-left: auto; }
.sd-pagination__summary { color: var(--text-secondary); }
.sd-pagination__pos { padding: 0 var(--space-xs); color: var(--text-secondary); }
.sd-pagination__gap { display: inline-flex; align-items: center; justify-content: center; width: var(--size-3xl); color: var(--icon-tertiary); }
.sd-pagination__page[aria-current="page"] { color: var(--text-primary); box-shadow: none; }
.sd-pagination__page { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ---------- Table ---------- */
.sd-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-primary); }
.sd-table { width: 100%; border-collapse: collapse; color: var(--text-primary); }
.sd-table th, .sd-table td { height: var(--size-5xl); padding: 0 var(--space-base); text-align: left; border-bottom: 1px solid var(--border-secondary); }
.sd-table--compact th, .sd-table--compact td { height: var(--size-4xl); padding: 0 var(--space-sm); }
.sd-table tbody tr:last-child td { border-bottom: 0; }
.sd-table__th { height: var(--size-4xl); background: var(--bg-secondary); color: var(--text-secondary); white-space: nowrap; }
.sd-table thead th { height: var(--size-4xl); }
.sd-table--right { text-align: right !important; }
.sd-table--center { text-align: center !important; }
.sd-table__check { width: var(--size-lg); padding-right: 0 !important; }
.sd-table__check .sd-checkbox { margin-top: 0; vertical-align: middle; }
.sd-table tbody tr:hover td { background: var(--bg-primary-hover); }
.sd-table--striped tbody tr:nth-child(even) td { background: var(--bg-secondary); }
.sd-table__row--selected td, .sd-table tbody tr.sd-table__row--selected:hover td { background: var(--bg-selected); }
.sd-table__row--click { cursor: pointer; }
.sd-table__sort.sd-btn { margin: 0 calc(-1 * var(--space-xs)); padding: 0 var(--space-xs); height: var(--size-2xl); color: var(--text-secondary); font: inherit; }
.sd-table__sort .sd-btn__icon { color: var(--icon-tertiary); }
.sd-table__sort--active.sd-btn, .sd-table__sort--active .sd-btn__icon { color: var(--text-primary); }
.sd-table--right .sd-table__sort { flex-direction: row-reverse; }
.sd-table__empty { height: auto !important; padding: 0 !important; }
.sd-table__empty:hover, .sd-table tbody tr:hover .sd-table__empty { background: var(--bg-primary) !important; }
.sd-table__footer { display: flex; align-items: center; padding: var(--space-xs) var(--space-base); border-top: 1px solid var(--border-secondary); }
.sd-table__footer > * { flex: 1; }

/* =====================================================================
   COMPOSITES, batch 3
   ===================================================================== */

/* ---------- Toggle / ToggleGroup ---------- */
.sd-toggle.sd-btn--ghost { color: var(--icon-secondary); }
.sd-toggle.sd-btn--ghost:hover:not(:disabled) { background: var(--bg-secondary-hover); color: var(--icon-primary); }
.sd-toggle--on.sd-btn--ghost, .sd-toggle--on.sd-btn--ghost:hover:not(:disabled) { background: var(--bg-selected); color: var(--text-primary); }
.sd-toggle-group { display: inline-flex; align-items: center; gap: var(--space-xxxs); }
.sd-toggle-group--outline { gap: 0; padding: var(--space-xxxs); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); background: var(--bg-primary); }

/* ---------- Slider ---------- */
.sd-slider { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.sd-slider__input { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: var(--size-xl); margin: 0; background: transparent; cursor: pointer; }
.sd-slider__input::-webkit-slider-runnable-track { height: var(--size-xs); border-radius: var(--radius-full); background: linear-gradient(to right, var(--bg-accent-solid) var(--sd-pct), var(--bg-tertiary-hover) var(--sd-pct)); }
.sd-slider__input::-moz-range-track { height: var(--size-xs); border-radius: var(--radius-full); background: var(--bg-tertiary-hover); }
.sd-slider__input::-moz-range-progress { height: var(--size-xs); border-radius: var(--radius-full); background: var(--bg-accent-solid); }
.sd-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--size-lg); height: var(--size-lg); margin-top: calc((var(--size-xs) - var(--size-lg)) / 2); border-radius: var(--radius-full); background: var(--b-w-white); border: 2px solid var(--bg-accent-solid); box-shadow: var(--elevation-sm); }
.sd-slider__input::-moz-range-thumb { width: var(--size-md); height: var(--size-md); border-radius: var(--radius-full); background: var(--b-w-white); border: 2px solid var(--bg-accent-solid); box-shadow: var(--elevation-sm); }
.sd-slider__input:focus-visible { outline: none; }
.sd-slider__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.sd-slider__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.sd-slider__value { min-width: var(--size-3xl); text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sd-slider--disabled .sd-slider__input { cursor: not-allowed; }
.sd-slider--disabled .sd-slider__input::-webkit-slider-runnable-track { background: var(--bg-disabled-alt); }
.sd-slider--disabled .sd-slider__input::-webkit-slider-thumb { border-color: var(--border-disabled); box-shadow: none; }
.sd-slider--disabled .sd-slider__value { color: var(--text-disabled); }

/* ---------- Calendar / DatePicker ---------- */
.sd-calendar { display: inline-flex; flex-direction: column; gap: var(--space-xs); }
.sd-calendar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.sd-calendar__title { color: var(--text-primary); }
.sd-calendar__grid { border-collapse: collapse; }
.sd-calendar__grid th { width: var(--size-3xl); height: var(--size-2xl); color: var(--text-tertiary); text-align: center; }
.sd-calendar__grid td { padding: var(--space-px) 0; text-align: center; }
.sd-calendar__day.sd-btn--ghost { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sd-calendar__day.sd-btn--ghost:hover:not(:disabled) { background: var(--bg-tertiary); }
.sd-calendar__day--outside.sd-btn--ghost { color: var(--text-tertiary); }
.sd-calendar__day--today { position: relative; }
.sd-calendar__day--today::after { content: ""; position: absolute; bottom: var(--space-xxxs); left: 50%; width: var(--size-xs); height: var(--size-xs); margin-left: calc(var(--size-xs) / -2); border-radius: var(--radius-full); background: var(--bg-accent-solid); }
.sd-calendar__day--today.sd-btn--primary::after { background: var(--b-w-white); }
.sd-calendar__day:disabled.sd-btn--ghost { color: var(--text-disabled); text-decoration: line-through; }
.sd-datepicker__pop { padding: var(--space-sm); }

/* ---------- HoverCard ---------- */
.sd-hovercard { padding: var(--space-base); }

/* ---------- FileUpload ---------- */
.sd-upload { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.sd-upload__zone {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center;
  padding: var(--space-lg) var(--space-base); border: 1px dashed var(--icon-tertiary); border-radius: var(--radius-lg);
  background: var(--bg-secondary); transition: background-color .12s ease, border-color .12s ease;
}
.sd-upload__zone--drag { border-color: var(--border-accent-primary); border-style: solid; background: var(--bg-accent-primary); }
.sd-upload__zone--invalid { border-color: var(--border-error-primary); }
.sd-upload__zone--disabled { background: var(--bg-disabled-alt); border-color: var(--border-disabled); }
.sd-upload__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--size-4xl); height: var(--size-4xl); border-radius: var(--radius-full); background: var(--bg-primary); color: var(--icon-secondary); box-shadow: var(--elevation-raised); }
.sd-upload__title { margin: 0; color: var(--text-primary); }
.sd-upload__hint { margin: 0; color: var(--text-tertiary); }
.sd-upload__list { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.sd-upload__file { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-primary); }
.sd-upload__file--error { border-color: var(--border-error-secondary); background: var(--bg-error-primary); }
.sd-upload__ficon { display: inline-flex; color: var(--icon-secondary); line-height: 0; }
.sd-upload__file--error .sd-upload__ficon { color: var(--icon-error-primary); }
.sd-upload__fbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xxs); }
.sd-upload__frow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.sd-upload__fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.sd-upload__fsize { flex: none; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.sd-upload__ferr { color: var(--text-error-primary); }

/* ---------- Sidebar ---------- */
.sd-sidebar { display: flex; flex-direction: column; box-sizing: border-box; width: 248px; height: 100%; padding: var(--space-sm); gap: var(--space-sm); background: var(--bg-secondary); border-right: 1px solid var(--border-secondary); transition: width .15s ease; }
.sd-sidebar--collapsed { width: calc(var(--size-3xl) + 2 * var(--space-sm) + 2px); }
.sd-sidebar__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: var(--size-3xl); padding-left: var(--space-xxs); }
.sd-sidebar--collapsed .sd-sidebar__header { padding-left: 0; justify-content: center; }
.sd-sidebar__subheader { display: flex; flex-direction: column; min-width: 0; }
.sd-sidebar__nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-base); }
.sd-sidebar ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-xxxs); }
.sd-sidebar__section { margin: 0 0 var(--space-xxs); padding: 0 var(--space-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.sd-sidebar__sep { margin: var(--space-xxs) 0; }
.sd-sidebar__item {
  display: flex; align-items: center; gap: var(--space-xs); width: 100%; box-sizing: border-box;
  height: var(--size-3xl); padding: 0 var(--space-xs); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--text-secondary); text-decoration: none; text-align: left; cursor: pointer; font-family: var(--font-primary);
}
.sd-sidebar__item:hover { background: var(--bg-secondary-hover); color: var(--text-primary); }
.sd-sidebar__item:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: -2px; }
.sd-sidebar__item--active, .sd-sidebar__item--active:hover { background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--elevation-raised); }
.sd-sidebar__item--active .sd-sidebar__icon { color: var(--icon-primary); }
.sd-sidebar__icon { display: inline-flex; color: var(--icon-secondary); line-height: 0; }
.sd-sidebar__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-sidebar__chev { display: inline-flex; color: var(--icon-tertiary); line-height: 0; transition: transform .15s ease; }
.sd-sidebar__chev--open { transform: rotate(180deg); }
.sd-sidebar__sub { margin-left: calc(var(--space-xs) + var(--size-lg) / 2) !important; padding-left: var(--space-xs) !important; border-left: 1px solid var(--border-secondary); margin-top: var(--space-xxxs) !important; }
.sd-sidebar__item--child { height: var(--size-3xl); }
.sd-sidebar--collapsed .sd-sidebar__item { justify-content: center; padding: 0; }
.sd-sidebar__footer { border-top: 1px solid var(--border-secondary); padding-top: var(--space-sm); }

/* ---------- CommandPalette ---------- */
.sd-dialog.sd-command { padding: 0; gap: 0; overflow: hidden; align-self: flex-start; margin-top: 12vh; }
.sd-command .sd-dialog__body { display: flex; flex-direction: column; min-height: 0; }
.sd-command__input.sd-input { border: 0; border-bottom: 1px solid var(--border-secondary); border-radius: 0; box-shadow: none !important; height: var(--size-5xl); padding: 0 var(--space-base); }
.sd-command__list { max-height: 320px; overflow-y: auto; padding: var(--space-xxs); }
.sd-command__keys { display: inline-flex; gap: var(--space-xxxs); }
.sd-command__keys .sd-kbd { min-width: var(--size-lg); height: var(--size-lg); }
.sd-command__foot { display: flex; gap: var(--space-base); padding: var(--space-xs) var(--space-base); border-top: 1px solid var(--border-secondary); background: var(--bg-secondary); color: var(--text-tertiary); }
.sd-command__foot span { display: inline-flex; align-items: center; gap: var(--space-xxxs); }
.sd-command__foot .sd-kbd { min-width: var(--size-lg); height: var(--size-lg); }

/* ---------- RichTextEditor ---------- */
.sd-rte { display: flex; flex-direction: column; min-width: 0; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); box-shadow: var(--elevation-raised); transition: border-color .12s ease, box-shadow .12s ease; }
.sd-rte:hover { border-color: var(--border-primary-solid); }
.sd-rte:focus-within { border-color: var(--border-accent-primary); box-shadow: var(--button-focus-primary); }
.sd-rte--invalid, .sd-rte--invalid:hover { border-color: var(--border-error-primary); }
.sd-rte--invalid:focus-within { border-color: var(--border-error-primary); box-shadow: var(--button-focus-destructive); }
.sd-rte--disabled, .sd-rte--disabled:hover { background: var(--bg-disabled-alt); border-color: var(--border-disabled-alt); box-shadow: none; }
.sd-rte__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxxs); padding: var(--space-xxs); border-bottom: 1px solid var(--border-secondary); background: var(--bg-secondary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.sd-rte__sep.sd-separator--vertical { height: var(--size-xl); align-self: center; margin: 0 var(--space-xxxs); }
.sd-rte__block.sd-btn { min-width: 112px; justify-content: space-between; color: var(--text-primary); }
.sd-rte__content { position: relative; padding: var(--space-sm) var(--space-base); overflow-y: auto; outline: 0; color: var(--text-primary); font-family: var(--font-reading); overflow-wrap: anywhere; }
.sd-rte__content--empty::before { content: attr(data-placeholder); position: absolute; color: var(--text-placeholder); pointer-events: none; }
.sd-rte__content > * { margin: 0 0 var(--space-sm); }
.sd-rte__content > *:last-child { margin-bottom: 0; }
.sd-rte__content h2, .sd-rte__content h3 { margin-top: var(--space-base); color: var(--text-primary); }
.sd-rte__content > h2:first-child, .sd-rte__content > h3:first-child { margin-top: 0; }
.sd-rte__content ul, .sd-rte__content ol { padding-left: var(--space-lg); }
.sd-rte__content li + li { margin-top: var(--space-xxs); }
.sd-rte__content blockquote { padding-left: var(--space-base); border-left: 3px solid var(--border-primary); color: var(--text-secondary); }
.sd-rte__content a { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.sd-rte__content code { padding: 0 var(--space-xxs); border-radius: var(--radius-sm); background: var(--bg-tertiary); font-family: var(--font-mono); font-size: .92em; }
.sd-rte__content pre { padding: var(--space-sm) var(--space-base); border-radius: var(--radius-md); background: var(--bg-tertiary); font-family: var(--font-mono); white-space: pre-wrap; }
.sd-rte__foot { display: flex; justify-content: space-between; padding: var(--space-xxs) var(--space-base); border-top: 1px solid var(--border-secondary); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.sd-rte__over { color: var(--text-error-primary); }
.sd-rte__linkform { display: flex; flex-direction: column; gap: var(--space-sm); }
.sd-rte__linkactions { display: flex; justify-content: space-between; gap: var(--space-xs); }




/* >>> stepper-filetree */
/* ---------- Stepper ---------- */
.sd-stepper { display: flex; margin: 0; padding: 0; list-style: none; font-family: var(--font-primary); }
.sd-stepper--horizontal { align-items: flex-start; gap: var(--space-xs); }
.sd-stepper--horizontal { width: 100%; }
.sd-stepper--horizontal .sd-stepper__step { flex: 1 0 auto; display: flex; align-items: center; gap: var(--space-xs); }
.sd-stepper--horizontal .sd-stepper__step:last-child { flex: none; }
.sd-stepper--horizontal .sd-stepper__btn { flex: none; }
.sd-stepper--horizontal .sd-stepper__desc { white-space: nowrap; }
.sd-stepper--horizontal .sd-stepper__line { align-self: flex-start; margin-top: calc(var(--size-xl) / 2); flex: 1; min-width: var(--space-base); height: 1px; background: var(--border-secondary); }
.sd-stepper--vertical { flex-direction: column; }
.sd-stepper--vertical .sd-stepper__step { position: relative; padding-bottom: var(--space-base); }
.sd-stepper--vertical .sd-stepper__step:last-child { padding-bottom: 0; }
.sd-stepper--vertical .sd-stepper__line { position: absolute; left: calc(var(--size-xl) / 2); top: calc(var(--size-xl) + var(--space-xxs)); bottom: var(--space-xxs); width: 1px; background: var(--border-secondary); }
.sd-stepper__btn { display: inline-flex; align-items: flex-start; gap: var(--space-xs); min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; border-radius: var(--radius-control, 4px); }
button.sd-stepper__btn { cursor: pointer; }
button.sd-stepper__btn:hover .sd-stepper__label { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
button.sd-stepper__btn:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.sd-stepper__marker { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--size-xl); height: var(--size-xl); border-radius: var(--radius-full); border: 1px solid var(--border-primary); background: var(--bg-primary); color: var(--text-tertiary); font: 500 12px/1 var(--font-primary); font-variant-numeric: tabular-nums; }
.sd-stepper__text { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.sd-stepper__label { color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-stepper__desc { color: var(--text-tertiary); }
.sd-stepper__step--current .sd-stepper__marker { border-color: var(--border-accent-primary); color: var(--text-accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-accent-primary) 18%, transparent); }
.sd-stepper__step--current .sd-stepper__label { color: var(--text-primary); }
.sd-stepper__step--done .sd-stepper__marker { border-color: var(--bg-accent-solid); background: var(--bg-accent-solid); color: var(--icon-white); }
.sd-stepper__step--done .sd-stepper__label { color: var(--text-secondary); }
.sd-stepper__step--done .sd-stepper__line { background: var(--bg-accent-solid); }
.sd-stepper__step--error .sd-stepper__marker { border-color: var(--border-error-primary, var(--text-error-primary)); color: var(--text-error-primary); }
.sd-stepper__step--error .sd-stepper__label { color: var(--text-error-primary); }
.sd-stepper--sm .sd-stepper__marker { width: var(--size-lg); height: var(--size-lg); font-size: 11px; }
.sd-stepper--sm .sd-stepper__text { padding-top: 0; }
.sd-stepper--sm.sd-stepper--vertical .sd-stepper__line { left: calc(var(--size-lg) / 2); top: calc(var(--size-lg) + var(--space-xxs)); }

/* ---------- FileTree ---------- */
.sd-tree { display: flex; flex-direction: column; gap: 1px; padding: var(--space-xxs); font-family: var(--font-primary); }
.sd-tree__item { display: flex; align-items: center; gap: var(--space-xxs); min-height: var(--size-3xl); padding-right: var(--space-xs); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; user-select: none; }
.sd-tree__item:hover { background: var(--bg-tertiary-hover, var(--bg-secondary)); color: var(--text-primary); }
.sd-tree__item:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: -2px; }
.sd-tree__item--selected, .sd-tree__item--selected:hover { background: var(--bg-selected, var(--bg-tertiary)); color: var(--text-primary); }
.sd-tree__chev { display: inline-flex; width: 12px; color: var(--icon-tertiary); line-height: 0; }
.sd-tree__icon { display: inline-flex; color: var(--icon-secondary); line-height: 0; }
.sd-tree__item--dir .sd-tree__icon { color: var(--icon-tertiary); }
.sd-tree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-tree__meta { flex: none; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* OtpInput */
.sd-otp { display: inline-flex; align-items: center; gap: var(--space-xs); }
.sd-otp__cell { width: var(--size-4xl); height: calc(var(--size-4xl) + var(--space-xs)); padding: 0; box-sizing: border-box; text-align: center; border: 1px solid var(--border-primary); border-radius: var(--radius-control); background: var(--bg-primary); color: var(--text-primary); caret-color: var(--border-accent-primary); font-variant-numeric: tabular-nums; transition: border-color .12s ease, box-shadow .12s ease; }
.sd-otp__cell:hover:not(:disabled) { border-color: var(--border-accent-secondary, var(--border-primary)); }
.sd-otp__cell:focus { outline: none; border-color: var(--border-accent-primary); box-shadow: var(--button-focus-ghost, 0 0 0 3px color-mix(in srgb, var(--border-accent-primary) 25%, transparent)); }
.sd-otp__cell:disabled { background: var(--bg-tertiary); color: var(--text-disabled); }
.sd-otp--invalid .sd-otp__cell { border-color: var(--border-error-primary); }
.sd-otp__sep { width: var(--space-xs); height: 2px; border-radius: 1px; background: var(--border-primary); }
/* <<< stepper-filetree */

/* =====================================================================
   PERSONALITY: shape, voice and motion. Personality never comes from new
   hues in the chrome: it comes from shape, mono spec details, the Domine
   display face for a few moments, and motion. See README "Personality".
   ===================================================================== */

/* Shape: controls share one small, even radius */
.sd-btn, .sd-btn--sm, .sd-input, .sd-textarea, .sd-toggle, .sd-badge, .sd-sidebar__item,
.sd-tablist--pill .sd-tab { border-radius: var(--radius-control); }
.sd-toggle-group--outline, .sd-tablist--pill { border-radius: calc(var(--radius-control) + 2px); }
/* Shape: petal containers, one tight corner from the Fenly mark */
.sd-table-wrap, .sd-alert, .sd-popover { border-radius: var(--radius-petal-tip) var(--radius-petal) var(--radius-petal) var(--radius-petal); }

/* Voice: mono spec labels */
.sd-sidebar__section, .sd-table__th {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.sd-table__th { color: var(--text-tertiary); }
.sd-table__th .sd-table__sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.sd-sidebar .sd-badge { padding: 0; background: transparent; border-color: transparent; color: var(--text-tertiary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Voice: Domine for empty-state headlines (md size only) */
.sd-empty--md .sd-empty__title { font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }

/* Motion: things grow from where they start */
.sd-popover { animation: sd-grow var(--duration-slow) var(--easing-spring); transform-origin: top center; }
.sd-dialog:not(.sd-sheet) { animation: sd-grow var(--duration-slow) var(--easing-spring); }
.sd-toast { animation: sd-grow var(--duration-slow) var(--easing-spring); transform-origin: bottom right; }
.sd-table tbody tr { animation: sd-rise var(--duration-slow) var(--easing-out) backwards; }
.sd-table tbody tr:nth-child(2) { animation-delay: 22ms; } .sd-table tbody tr:nth-child(3) { animation-delay: 44ms; }
.sd-table tbody tr:nth-child(4) { animation-delay: 66ms; } .sd-table tbody tr:nth-child(5) { animation-delay: 88ms; }
.sd-table tbody tr:nth-child(6) { animation-delay: 110ms; } .sd-table tbody tr:nth-child(7) { animation-delay: 132ms; }
.sd-table tbody tr:nth-child(8) { animation-delay: 154ms; } .sd-table tbody tr:nth-child(n+9) { animation-delay: 176ms; }
.sd-sidebar__item { transition: background-color var(--duration-base) var(--easing-out), color var(--duration-base) var(--easing-out); }
.sd-btn:active:not(:disabled) { transform: scale(.97); transition: transform var(--duration-fast) var(--easing-out); }
@keyframes sd-grow { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sd-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sd-popover, .sd-dialog:not(.sd-sheet), .sd-toast, .sd-table tbody tr { animation: none; }
  .sd-btn:active:not(:disabled) { transform: none; }
}
/* ===================== end of Seed UI (vendored, edit in Seed) ===================== */


/* =====================================================================
   FENLY PATTERNS. Built on Seed: Seed tokens only, Seed components inside.
   ===================================================================== */

.fl-muted { color: var(--text-tertiary); }
.fl-ai-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--size-3xl); height: var(--size-3xl); border-radius: var(--radius-full);
  background: var(--bg-accent-solid); color: var(--icon-white);
}
.fl-ai-avatar--sm { width: var(--size-2xl); height: var(--size-2xl); }
.fl-spin-icon .sd-icon { animation: sd-spin 1s linear infinite; }

/* ---------- TokenSwatch ---------- */
.fl-swatch { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0; vertical-align: middle; }
.fl-swatch__chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--size-2xl); height: var(--size-2xl); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--alpha-light-10); color: var(--icon-tertiary);
}
.fl-swatch--sm .fl-swatch__chip { width: var(--size-lg); height: var(--size-lg); border-radius: var(--radius-sm); }
.fl-swatch--lg .fl-swatch__chip { width: var(--size-4xl); height: var(--size-4xl); border-radius: var(--radius-lg); }
.fl-swatch__chip--dim { background: var(--bg-tertiary); }
[data-theme="dark"] .fl-swatch__chip { box-shadow: inset 0 0 0 1px var(--alpha-dark-15); }
.fl-swatch__text { display: inline-flex; flex-direction: column; min-width: 0; }
.fl-swatch--sm .fl-swatch__text { flex-direction: row; align-items: baseline; gap: var(--space-xxs); }
.fl-swatch__name { color: var(--text-primary); font-family: var(--font-mono); }
.fl-swatch__value { color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; }
.fl-swatch__alias { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-xxxs); color: var(--text-tertiary); font-family: var(--font-mono); }

/* ---------- DiffView ---------- */
.fl-diff { min-width: 0; }
.fl-diff__rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); overflow: hidden; }
.fl-diff__row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-secondary); background: var(--bg-primary); }
.fl-diff__row:last-child { border-bottom: 0; }
/* Compact (in chat): the kind is a small icon, values sit on the same line as the name */
.fl-diff--compact .fl-diff__row { grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs); }
.fl-diff__kindicon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-control, 4px); background: var(--bg-info-primary); color: var(--text-info-primary); }
.fl-diff__kindicon--added { background: var(--bg-success-primary); color: var(--text-success-primary); }
.fl-diff__kindicon--removed { background: var(--bg-error-primary); color: var(--text-error-primary); }
.fl-diff__kindicon--renamed { background: var(--bg-warning-primary); color: var(--text-warning-primary); }
.fl-diff__kindicon:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 1px; }
.fl-diff--compact .fl-diff__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.fl-diff--compact .fl-diff__vals { gap: var(--space-xxs); }
.fl-diff--compact .fl-diff__vals .fl-swatch__alias { display: none; }
.fl-diff__kind { justify-self: start; }
.fl-diff__target { display: flex; flex-direction: column; min-width: 0; }
.fl-diff__name { font-family: var(--font-mono); color: var(--text-primary); overflow-wrap: anywhere; }
.fl-diff__mode { color: var(--text-tertiary); }
.fl-diff__vals { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-tertiary); }
.fl-diff__row--removed .fl-swatch__value { text-decoration: line-through; }
.fl-diff__arrow { color: var(--icon-tertiary); }
.fl-diff__none { color: var(--text-tertiary); font-style: italic; }
.fl-diff__more { margin: var(--space-xs) 0 0; color: var(--text-tertiary); }
.fl-diff--code { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); }
.fl-diff__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--bg-secondary); border-bottom: 1px solid var(--border-secondary); }
.fl-diff__file { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-secondary); font-family: var(--font-mono); }
.fl-diff__plus { color: var(--text-success-primary-hover); }
.fl-diff__minus { color: var(--text-error-primary); }
.fl-diff__scroll { overflow-x: auto; }
.fl-diff__code { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.fl-diff__code td { padding: 0 var(--space-xs); white-space: pre; vertical-align: top; font-family: var(--font-mono); }
.fl-diff__ln { width: 1%; color: var(--text-tertiary); text-align: right; user-select: none; }
.fl-diff__sign { width: 1%; user-select: none; color: var(--text-tertiary); }
.fl-diff__line { color: var(--text-primary); }
.fl-diff__add td { background: var(--bg-success-primary); }
.fl-diff__add .fl-diff__sign { color: var(--text-success-primary-hover); }
.fl-diff__del td { background: var(--bg-error-primary); }
.fl-diff__del .fl-diff__sign { color: var(--text-error-primary); }

/* ---------- ChangeProposal ---------- */
.fl-proposal { overflow: hidden; }
.fl-proposal__head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-base) var(--space-lg) 0; }
.fl-proposal__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl-proposal__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg) var(--space-base); }
.fl-proposal__title { margin: 0; color: var(--text-primary); }
.fl-proposal__summary { margin: 0; color: var(--text-secondary); }
.fl-proposal__impact { display: flex; flex-wrap: wrap; gap: var(--space-xxs); }
.fl-proposal__more { align-self: flex-start; }
.fl-proposal__why .sd-accordion__item { border-bottom: 0; border-top: 1px solid var(--border-secondary); }
.fl-proposal__why .sd-accordion__trigger { min-height: var(--size-4xl); }
.fl-proposal__foot { padding: var(--space-sm) var(--space-lg); border-top: 1px solid var(--border-secondary); background: var(--bg-secondary); }
.fl-proposal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); }
.fl-proposal__wait { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); color: var(--text-secondary); }
.fl-proposal__by { margin: 0; color: var(--text-tertiary); }
.fl-proposal--rejected .fl-proposal__title, .fl-proposal--rejected .fl-diff__rows { opacity: .6; }

/* ---------- Chat ---------- */
.fl-thread { display: flex; flex-direction: column; gap: var(--space-lg); overflow-y: auto; min-height: 0; }
.fl-msg { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.fl-msg--user { align-items: flex-end; }
.fl-msg__text { color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.fl-msg--user .fl-msg__text { max-width: 85%; padding: var(--space-xs) var(--space-sm); background: color-mix(in srgb, var(--text-primary) 6%, transparent); border-radius: var(--radius-xl); }
.fl-msg--user .fl-msg__attach { justify-content: flex-end; }
.fl-msg__footer { display: flex; align-items: center; gap: var(--space-xs); min-height: 24px; margin-left: -6px; opacity: 0; transition: opacity var(--duration-base) var(--easing-out); }
.fl-msg:hover .fl-msg__footer, .fl-msg:has(:focus-visible) .fl-msg__footer { opacity: 1; }
@media (hover: none) and (pointer: coarse) { .fl-msg__footer { opacity: 1; } }
.fl-msg__actions { display: flex; align-items: center; gap: 2px; }
.fl-msg--user .fl-msg__footer { margin-left: 0; margin-right: -6px; justify-content: flex-end; }
.fl-msg__actions .sd-btn { color: var(--text-tertiary); width: 24px; height: 24px; min-width: 24px; padding: 0; }
.fl-msg__actions .sd-btn .sd-icon { width: 13px; height: 13px; }
.fl-msg__actions .sd-btn:hover { color: var(--text-primary); }
.fl-msg__actions .fl-msg__vote--on { color: var(--text-primary); }
.fl-msg__vote--on .sd-icon path { fill: currentColor; fill-opacity: .15; }
.fl-msg__meta { color: var(--text-tertiary); font-family: var(--font-primary); font-variant-numeric: tabular-nums; }
/* Rich content inside Pluto's answers */
.fl-rich { display: flex; flex-direction: column; gap: var(--space-sm); }
.fl-rich__p { display: block; white-space: pre-wrap; }
.fl-rich strong { font-weight: 600; }
.fl-rich__code { white-space: normal; }
.fl-icode { padding: 1px 5px; border-radius: var(--radius-control, 4px); background: color-mix(in srgb, var(--text-primary) 6%, transparent); font-family: var(--font-mono); font-size: .9em; color: var(--text-primary); white-space: nowrap; }
.fl-colorchip { display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline; margin: 0 1px; padding: 1px 6px 1px 3px; border: 1px solid var(--border-secondary); border-radius: var(--radius-control, 4px); background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-mono); font-size: .9em; line-height: 1.4; cursor: pointer; white-space: nowrap; transition: border-color var(--duration-fast) var(--easing-out); }
.fl-colorchip:hover { border-color: var(--border-primary); }
.fl-colorchip:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 1px; }
.fl-colorchip__dot { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--alpha-dark-15, rgba(0,0,0,.15)); color: #fff; }
.fl-colorchip__dot .sd-icon { filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); }
.fl-colorchip__value { font-variant-numeric: tabular-nums; }
.fl-composer__cost { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.fl-msg__working { display: inline-flex; color: var(--pluto-2); line-height: 0; }
.fl-msg__working .sd-icon { animation: fl-spin 2.4s linear infinite; }
.fl-msg__attach { display: flex; flex-wrap: wrap; gap: var(--space-xxs); }
.fl-proposal__why .sd-accordion__heading, .fl-proposal__why .sd-accordion__trigger { font: inherit; }
.fl-msg__steps { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.fl-msg__stepsbtn { display: inline-flex; align-items: center; gap: var(--space-xxs); padding: 0; border: 0; background: none; color: var(--text-tertiary); cursor: pointer; font-family: var(--font-primary); text-align: left; transition: color var(--duration-fast) var(--easing-out); }
.fl-msg__stepsbtn:hover { color: var(--text-secondary); }
.fl-msg__stepsbtn:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.fl-msg__stepschev { flex: none; transition: transform var(--duration-base) var(--easing-out); }
.fl-msg__stepschev--open { transform: rotate(90deg); }
.fl-msg__stepsbtn--running .fl-msg__stepslabel {
  background: linear-gradient(90deg, var(--text-tertiary) 0%, var(--text-tertiary) 40%, var(--text-primary) 50%, var(--text-tertiary) 60%, var(--text-tertiary) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fl-shimmer 1.8s linear infinite;
}
@keyframes fl-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .fl-msg__stepsbtn--running .fl-msg__stepslabel { animation: none; color: var(--text-tertiary); background: none; } }
.fl-steps { margin: 0 0 0 var(--space-xxs); padding: var(--space-xxs) 0 var(--space-xxs) var(--space-sm); list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); border-left: 1px solid var(--border-secondary); }
.fl-steps__item { display: flex; align-items: center; gap: var(--space-xs); color: var(--text-tertiary); }
.fl-steps__item--done .sd-icon { color: var(--icon-success-primary-hover); }
.fl-steps__item--error .sd-icon { color: var(--icon-error-primary); }
.fl-steps__item--pending { color: var(--text-tertiary); }
.fl-steps__detail { margin-left: var(--space-xs); padding: 0 var(--space-xxs); border-radius: var(--radius-sm); background: var(--bg-tertiary); font-family: var(--font-mono); font-size: .92em; }
.fl-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: var(--space-xxxs); vertical-align: text-bottom; background: var(--bg-accent-solid); animation: fl-blink 1s steps(2) infinite; }
@keyframes fl-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fl-caret { animation: none; } }

/* ---------- Composer ---------- */
.fl-composer {
  position: relative; display: flex; flex-direction: column; gap: var(--space-xxs);
  padding: var(--space-sm) var(--space-sm) var(--space-xs); background: var(--bg-primary);
  border: 1px solid var(--border-primary); border-radius: var(--radius-xl); box-shadow: var(--elevation-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.fl-composer:focus-within { border-color: var(--border-accent-primary); box-shadow: var(--button-focus-primary), var(--elevation-sm); }
.fl-composer--disabled { background: var(--bg-disabled-alt); }
.fl-composer__input {
  width: 100%; min-height: var(--size-2xl); max-height: 200px; padding: 0 var(--space-xxs); border: 0; outline: 0; resize: none;
  background: transparent; color: var(--text-primary); font-family: var(--font-primary);
}
.fl-composer__input::placeholder { color: var(--text-placeholder); }
.fl-composer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.fl-composer__tools, .fl-composer__send { display: flex; align-items: center; gap: var(--space-xxs); }
.fl-composer__hint, .fl-composer__cost { color: var(--text-tertiary); display: inline-flex; align-items: center; gap: var(--space-xxxs); }
.fl-composer__send .sd-btn--icon { border-radius: var(--radius-full); }
/* Stop: the same round slot as Send, with a small filled square, like Claude */
.fl-composer__stop .sd-icon { width: 12px; height: 12px; }
.fl-composer__stop .sd-icon rect { fill: currentColor; }
.fl-composer-wrap { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.fl-composer__chips { display: flex; flex-wrap: wrap; gap: var(--space-xxs); }
.fl-composer__chip { display: inline-flex; align-items: center; gap: var(--space-xxs); padding: 3px var(--space-xs); border: 1px solid var(--border-secondary); border-radius: var(--radius-full); background: var(--bg-primary); color: var(--text-secondary); font-family: var(--font-primary); cursor: pointer; text-align: left; transition: border-color var(--duration-fast) var(--easing-out), color var(--duration-fast) var(--easing-out); }
.fl-composer__chip:hover { border-color: var(--border-primary); color: var(--text-primary); }
.fl-composer__chip:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 1px; }
.fl-composer__suggest { position: absolute; left: 0; bottom: calc(100% + var(--space-xxs)); width: min(320px, 100%); }

/* ---------- TokenTable ---------- */
.fl-tt { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.fl-tt__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.fl-tt__search { width: 240px; max-width: 100%; }
.fl-tt__bar > :last-child:not(.sd-toggle-group):not(.fl-tt__search) { margin-left: auto; }
.fl-tt__name { display: flex; flex-direction: column; min-width: 0; }
.fl-tt__name code { font-family: var(--font-mono); color: var(--text-primary); }

/* ---------- CodeBlock ---------- */
.fl-code { min-width: 0; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-inset); overflow: hidden; }
.fl-code__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: var(--size-4xl); padding: 0 var(--space-xxs) 0 var(--space-sm); border-bottom: 1px solid var(--border-secondary); background: var(--bg-primary); }
.fl-code__file { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-secondary); font-family: var(--font-mono); }
.fl-code__tabs { gap: 0; }
.fl-code__tabs .sd-tablist--line { border-bottom: 0; gap: var(--space-base); }
.fl-code__tabs .sd-tab { height: var(--size-4xl); }
.fl-code__pre { margin: 0; padding: var(--space-sm) 0; overflow: auto; color: var(--text-primary); }
.fl-code__pre, .fl-code__pre code { font-family: var(--font-mono); }
.fl-code__pre:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: -2px; }
.fl-code__line { display: block; padding: 0 var(--space-base); }
.fl-code__line--hl { background: var(--bg-accent-primary); box-shadow: inset 2px 0 0 var(--border-accent-primary); }
.fl-code__ln { display: inline-block; width: 2.5em; margin-right: var(--space-sm); color: var(--text-tertiary); text-align: right; user-select: none; }
.fl-code__k { color: var(--text-info-primary-hover); }
.fl-code__s { color: var(--text-success-primary-hover); }
.fl-code__n { color: var(--text-warning-primary-hover); }
.fl-code__c { color: var(--text-tertiary); font-style: italic; }
.fl-code__p { color: var(--text-offer-primary-hover); }
.fl-code__t { color: var(--text-error-primary); }

/* ---------- Playground ---------- */
.fl-play { display: grid; grid-template-columns: minmax(0, 1fr) 280px; border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-primary); min-width: 0; }
@media (max-width: 720px) { .fl-play { grid-template-columns: minmax(0, 1fr); } }
.fl-play__stage { display: flex; flex-direction: column; min-width: 0; }
.fl-play__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xxs) var(--space-xs) var(--space-xxs) var(--space-base); border-bottom: 1px solid var(--border-secondary); }
.fl-play__title { color: var(--text-primary); }
.fl-play__tools { display: flex; align-items: center; gap: var(--space-xxxs); }
.fl-play__sep.sd-separator--vertical { height: var(--size-xl); align-self: center; margin: 0 var(--space-xxs); }
.fl-play__canvas { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 200px; padding: var(--space-2xl) var(--space-base); background: var(--bg-stage); color: var(--text-primary); transition: background-color .15s ease; }
.fl-play__canvas--grid { background-color: var(--bg-stage); background-image: radial-gradient(var(--bg-stage-pattern) 1px, transparent 1px); background-size: 16px 16px; }
.fl-play__frame { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; }
.fl-play__frame--mobile { width: 375px; max-width: 100%; padding: var(--space-base); border: 1px dashed var(--border-primary); border-radius: var(--radius-lg); }
.fl-play__code { border-radius: 0; border-width: 1px 0 0; }
.fl-play__panel { display: flex; flex-direction: column; border-left: 1px solid var(--border-secondary); background: var(--bg-secondary); min-width: 0; }
@media (max-width: 720px) { .fl-play__panel { border-left: 0; border-top: 1px solid var(--border-secondary); } }
.fl-play__panelhead { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xxs) var(--space-xs) var(--space-xxs) var(--space-base); border-bottom: 1px solid var(--border-secondary); min-height: var(--size-4xl); box-sizing: border-box; }
.fl-play__fields { display: flex; flex-direction: column; gap: var(--space-base); padding: var(--space-base); overflow-y: auto; }

/* ---------- SyncStatus ---------- */
.fl-sync__trigger.sd-btn { gap: var(--space-xs); }
.fl-sync__trigger .sd-btn__label { display: inline-flex; align-items: center; gap: var(--space-xs); }
.fl-sync__src { display: inline-flex; color: var(--icon-secondary); line-height: 0; }
.fl-sync__dot { display: inline-block; width: var(--size-sm); height: var(--size-sm); border-radius: var(--radius-full); background: var(--icon-tertiary); flex: none; }
.fl-sync__dot--success { background: var(--icon-success-primary); }
.fl-sync__dot--warning { background: var(--icon-warning-primary); }
.fl-sync__dot--info { background: var(--icon-info-primary); }
.fl-sync__dot--error { background: var(--icon-error-primary); }
.fl-sync__dot--pulse { animation: sd-pulse 1.2s ease-in-out infinite; }
.fl-sync__pop { display: flex; flex-direction: column; gap: var(--space-sm); }
.fl-sync__row { display: flex; align-items: center; gap: var(--space-sm); }
.fl-sync__bigicon { display: inline-flex; align-items: center; justify-content: center; width: var(--size-4xl); height: var(--size-4xl); border-radius: var(--radius-lg); background: var(--bg-tertiary); color: var(--icon-secondary); flex: none; }
.fl-sync__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl-sync__note { margin: 0; }
.fl-sync__actions { display: flex; justify-content: space-between; gap: var(--space-xs); }

/* ---------- CreditMeter ---------- */
.fl-credits__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.fl-credits__alert { margin-top: var(--space-sm); }
.fl-credits--compact { display: flex; flex-direction: column; gap: var(--space-xxs); padding: var(--space-xs); border-radius: var(--radius-md); }
.fl-credits__top { display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary); }
.fl-credits__top .label-label-3-medium { display: inline-flex; align-items: center; gap: var(--space-xxxs); }
.fl-credits__num { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fl-credits__num--warning { color: var(--text-warning-primary-hover); }
.fl-credits__num--error { color: var(--text-error-primary); }
.fl-credits__link.sd-btn { align-self: flex-start; }

/* ---------- shared ---------- */
.fl-chip { display: inline-flex; align-items: center; padding: 0 var(--space-xxs); border-radius: var(--radius-sm); background: var(--bg-tertiary); color: var(--text-secondary); font-family: var(--font-mono); }
.fl-mono-input .sd-input__control { font-family: var(--font-mono); }
.fl-copy.sd-btn--sm { width: var(--size-2xl); height: var(--size-2xl); }

/* ---------- HealthScore ---------- */
.fl-health { padding: var(--space-lg); gap: var(--space-base); }
.fl-health--sm { padding: 0; display: inline-flex; }
.fl-health__top { display: flex; align-items: center; gap: var(--space-lg); }
.fl-health__ring { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fl-health__ring svg { position: absolute; inset: 0; }
.fl-health__track { stroke: var(--border-secondary); }
.fl-health__value { transition: stroke-dashoffset .6s ease; }
.fl-health__value--good { stroke: var(--icon-success-primary); }
.fl-health__value--fair { stroke: var(--icon-warning-primary); }
.fl-health__value--poor { stroke: var(--icon-error-primary); }
.fl-health__num { position: relative; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.fl-health__sum { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xxs); min-width: 0; }
.fl-health__badges { display: flex; flex-wrap: wrap; gap: var(--space-xxs); }
.fl-health__audit { margin-top: var(--space-xxs); }
.fl-health__rows { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-base); border-top: 1px solid var(--border-secondary); }
@media (prefers-reduced-motion: reduce) { .fl-health__value { transition: none; } }

/* ---------- IssueList ---------- */
.fl-issues { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.fl-issues__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.fl-issues__list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-primary); }
.fl-issue { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: start; padding: var(--space-sm) var(--space-base); border-bottom: 1px solid var(--border-secondary); }
.fl-issue:last-child { border-bottom: 0; }
.fl-issue__icon { display: inline-flex; padding-top: var(--space-xxxs); line-height: 0; }
.fl-issue--error .fl-issue__icon { color: var(--icon-error-primary); }
.fl-issue--warning .fl-issue__icon { color: var(--icon-warning-primary); }
.fl-issue--info .fl-issue__icon { color: var(--icon-info-primary); }
.fl-issue__body { display: flex; flex-direction: column; gap: var(--space-xxs); min-width: 0; }
.fl-issue__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); color: var(--text-primary); }
.fl-issue__rule { color: var(--text-tertiary); font-family: var(--font-mono); }
.fl-issue__detail { margin: 0; color: var(--text-secondary); }
.fl-issue__targets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs); }
.fl-issue__actions { display: flex; align-items: center; gap: var(--space-xxs); }
/* IssueList adapts to its own width, not the window, so it holds up next to a docked Pluto */
.fl-issues { container-type: inline-size; }
.fl-issues__bar > .sd-toggle-group { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fl-issues__bar > .sd-toggle-group::-webkit-scrollbar { display: none; }
.fl-issue .fl-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 560px) {
  .fl-issue { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-xs); padding: var(--space-sm); }
  .fl-issue__actions { grid-column: 2; }
  .fl-issues__bar > .sd-btn { order: -1; }
}

/* ---------- ConflictResolver ---------- */
.fl-conflicts { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.fl-conflicts__bar, .fl-conflicts__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.fl-conflicts__bulk { display: flex; gap: var(--space-xxs); }
.fl-conflicts__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
.fl-conflict { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) var(--space-base); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-primary); }
.fl-conflict__head { display: flex; align-items: baseline; gap: var(--space-xs); }
.fl-conflict__name { font-family: var(--font-mono); color: var(--text-primary); }
.fl-conflict__choices.sd-radio-group--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
.fl-conflict__choices .sd-choice { padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); background: var(--bg-secondary); }
.fl-conflict__choices .sd-choice:has(:checked) { border-color: var(--border-accent-primary); background: var(--bg-accent-primary); }
.fl-conflict__choices .sd-label { display: block; width: 100%; }
.fl-conflict__side { display: flex; flex-direction: column; gap: var(--space-xxxs); }
.fl-conflict__src { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-secondary); }
.fl-conflict__val { font-family: var(--font-mono); color: var(--text-primary); }
@media (max-width: 560px) { .fl-conflict__choices.sd-radio-group--row { grid-template-columns: 1fr; } }

/* ---------- IntegrationCard / MCPEndpointCard ---------- */
.fl-integration { padding: var(--space-base); gap: var(--space-sm); }
.fl-integration__top { display: flex; align-items: flex-start; gap: var(--space-sm); }
.fl-mcp__head { display: flex; align-items: center; gap: var(--space-sm); }
.fl-integration__account { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-integration__status { align-self: flex-start; margin-top: var(--space-xxs); }
.fl-integration__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--size-4xl); height: var(--size-4xl); border-radius: var(--radius-lg); background: var(--bg-tertiary); color: var(--icon-primary); }
.fl-integration__name { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text-primary); }
.fl-integration__text { margin: 0; color: var(--text-secondary); }
.fl-integration__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: auto; }
.fl-mcp__body { display: flex; flex-direction: column; gap: var(--space-base); }
.fl-mcp__keyacts { display: inline-flex; gap: var(--space-xxxs); }
.fl-mcp__keyacts .sd-btn--sm { width: var(--size-2xl); height: var(--size-2xl); }
.fl-mcp__tools .sd-accordion__heading, .fl-mcp__tools .sd-accordion__trigger { font: inherit; }
.fl-mcp__tools .sd-accordion__item { border: 1px solid var(--border-secondary); border-radius: var(--radius-md); padding: 0 var(--space-sm); }
.fl-mcp__tools .sd-accordion__trigger { min-height: var(--size-4xl); }
.fl-mcp__toollist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
.fl-mcp__toollist li { display: flex; flex-direction: column; }
.fl-mcp__toollist code { font-family: var(--font-mono); color: var(--text-primary); }

/* ---------- MemberRow ---------- */
.fl-member { display: grid; grid-template-columns: auto minmax(0, 1fr) 140px var(--size-3xl); align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-base); border-bottom: 1px solid var(--border-secondary); }
.fl-member:last-child { border-bottom: 0; }
.fl-member__who { display: flex; flex-direction: column; min-width: 0; }
.fl-member__name { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-primary); }
.fl-member__tag { flex: none; }
.fl-member__role { padding-left: var(--space-xs); color: var(--text-secondary); }
.fl-member--invited .sd-avatar { opacity: .6; }
.fl-member__spacer { width: var(--size-3xl); }

/* ---------- VersionHistory ---------- */
.fl-history { display: flex; flex-direction: column; gap: var(--space-base); }
.fl-history__date { margin: 0 0 var(--space-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.fl-history__list { margin: 0; padding: 0; list-style: none; }
.fl-event { position: relative; display: grid; grid-template-columns: var(--size-2xl) minmax(0, 1fr) auto; gap: var(--space-sm); align-items: start; padding-bottom: var(--space-base); }
.fl-event__rail { position: absolute; left: calc(var(--size-2xl) / 2); top: var(--size-2xl); bottom: 0; width: 1px; background: var(--border-secondary); }
.fl-event:last-child .fl-event__rail { display: none; }
.fl-event__avatar { position: relative; display: inline-flex; }
.fl-event__body { display: flex; flex-direction: column; gap: var(--space-xxxs); min-width: 0; padding-top: var(--space-xxxs); }
.fl-event__text { margin: 0; color: var(--text-secondary); }
.fl-event__title { color: var(--text-primary); }
.fl-event__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); color: var(--text-tertiary); }

/* ---------- SystemSwitcher ---------- */
.fl-switch.sd-btn { height: auto; min-height: var(--size-4xl); padding: var(--space-xxs) var(--space-xs); gap: var(--space-xs); justify-content: flex-start; color: var(--text-primary); width: 100%; max-width: 100%; }
.fl-switch .sd-btn__label { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; width: 100%; }
.fl-switch__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; }
.fl-switch__text > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-switch__chev { color: var(--icon-tertiary); }
.fl-switch__logo { object-fit: contain; border-radius: var(--radius-md); }
.fl-switch__logo--sm { width: var(--size-3xl); height: var(--size-3xl); }
.fl-switch__logo--xs { width: var(--size-2xl); height: var(--size-2xl); }

/* Narrow containers (side panels): stack the diff row and keep token names whole */
.fl-diff { container-type: inline-size; }
@container (max-width: 440px) {
  .fl-diff:not(.fl-diff--compact) .fl-diff__row { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-xxs); }
  .fl-diff:not(.fl-diff--compact) .fl-diff__vals { grid-column: 1 / -1; flex-wrap: wrap; }
  .fl-diff__vals .fl-swatch__alias { display: none; }
  .fl-diff:not(.fl-diff--compact) .fl-diff__name { overflow-wrap: break-word; }
}
/* Compact only stacks when there's truly no room */
@container (max-width: 300px) {
  .fl-diff--compact .fl-diff__row { grid-template-columns: 20px minmax(0, 1fr); row-gap: var(--space-xxs); }
  .fl-diff--compact .fl-diff__vals { grid-column: 2; flex-wrap: wrap; }
}
.fl-tt { container-type: inline-size; }
.fl-tt__name code { white-space: nowrap; }
@container (max-width: 640px) {
  .fl-tt__name .fl-muted { display: none; }
}

/* PlutoPanel */
.fl-pluto { display: flex; flex-direction: column; box-sizing: border-box; background: var(--bg-primary); color: var(--text-primary); min-height: 0; }
.fl-pluto--floating { background: var(--bg-elevated); --fl-avatar-ring: var(--bg-elevated); }
/* Pluto sits above the page (30) but under Seed dialogs (40), popovers and menus (50) and toasts (70), so a dialog opened from a proposal covers it. */
.fl-pluto--floating { position: fixed; right: var(--space-base); bottom: var(--space-base); z-index: 30; width: 450px; height: min(680px, calc(100vh - 2 * var(--space-base))); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); box-shadow: var(--elevation-xl); overflow: hidden; transform-origin: bottom right; animation: fl-pluto-in .18s ease-out; }
.fl-pluto--docked { flex: none; width: 450px; height: 100%; border-left: 1px solid var(--border-secondary); animation: fl-pluto-dock .18s ease-out; }
@keyframes fl-pluto-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fl-pluto-dock { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fl-pluto, .fl-pluto-launcher { animation: none !important; transition: none !important; } }
@media (max-width: 520px) { .fl-pluto--floating { left: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs); width: auto; height: calc(100vh - 2 * var(--space-xs)); } }
.fl-pluto__head { flex: none; display: flex; align-items: center; gap: var(--space-xxs); min-height: 52px; padding: 0 var(--space-xs) 0 var(--space-sm); border-bottom: 1px solid var(--border-secondary); }
.fl-pluto__head > .fl-ai-avatar { margin-right: var(--space-xxs); }
.fl-pluto__title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl-pluto__title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-pluto__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fl-pluto__body > .fl-thread { flex: 1; padding: var(--space-base); }
.fl-pluto__foot { flex: none; padding: var(--space-xs) var(--space-sm) var(--space-sm); }
.fl-pluto-launcher { position: fixed; right: var(--space-base); bottom: var(--space-base); z-index: 30; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-accent-solid); color: var(--icon-white); box-shadow: var(--elevation-lg); cursor: pointer; transition: transform .15s ease, background .15s ease; }
.fl-pluto-launcher:hover { background: var(--bg-accent-solid-hover); transform: translateY(-1px); }
.fl-pluto-launcher:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.fl-pluto-launcher__dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-warning-primary); box-shadow: 0 0 0 2px var(--bg-primary); }

/* =====================================================================
   Personality in Fenly: the page hero, and Pluto as the only colored,
   living thing on screen (pluto-1 to pluto-4, the blues of the mark).
   ===================================================================== */

/* PageHero */
.fl-hero {
  --fl-hero-pad-x: var(--space-lg);
  position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-base); flex-wrap: wrap;
  padding: calc(var(--space-2xl) + 8px) var(--fl-hero-pad-x) var(--space-xl);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-secondary) 40%, var(--bg-primary)), var(--bg-primary) 85%);
}
.fl-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--border-secondary) 1px, transparent 1.3px);
  background-size: 12px 12px; background-position: 6px 14px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 45%, transparent 90%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 45%, transparent 90%);
}
.fl-hero__main { flex: 1 1 320px; min-width: 0; }
.fl-hero__eyebrow { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-xs); text-transform: uppercase; color: var(--text-tertiary); }
.fl-hero__eyebrow span + span::before { content: "\00b7"; margin-right: var(--space-sm); color: var(--border-primary); }
.fl-hero__eyebrow b, .fl-hero__eyebrow strong { font-weight: 600; color: var(--text-secondary); }
.fl-hero__title { margin: 0; color: var(--text-primary); text-wrap: balance; }
.fl-hero__desc { margin: var(--space-xxs) 0 0; color: var(--text-secondary); max-width: 72ch; }
.fl-hero__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

/* PlutoGreeting */
.fl-greet { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); margin: auto 0; padding: var(--space-xl) var(--space-sm); }
.fl-greet__title { margin: var(--space-xs) 0 0; color: var(--text-primary); text-wrap: balance; }
.fl-greet__desc { margin: 0; color: var(--text-secondary); max-width: 34ch; }
.fl-greet__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin-top: var(--space-sm); }

/* Pluto: color and life */
.fl-ai-avatar {
  background: radial-gradient(circle at 30% 25%, var(--pluto-3), var(--pluto-2) 35%, var(--pluto-1) 75%);
  box-shadow: 0 0 0 2px var(--fl-avatar-ring, var(--bg-primary)), 0 0 0 3px color-mix(in srgb, var(--pluto-2) 45%, transparent);
}
.fl-pluto-launcher {
  background: radial-gradient(circle at 30% 25%, var(--pluto-3), var(--pluto-2) 35%, var(--pluto-1) 75%);
  box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 4px color-mix(in srgb, var(--pluto-2) 50%, transparent), var(--elevation-lg);
}
.fl-pluto-launcher:hover { background: radial-gradient(circle at 30% 25%, var(--pluto-3), var(--pluto-2) 45%, var(--pluto-1) 85%); }
.fl-pluto-launcher svg { transition: transform var(--duration-slow) var(--easing-spring); }
.fl-pluto-launcher:hover svg { transform: rotate(60deg); }
.fl-pluto--floating { animation: fl-pluto-grow var(--duration-slow) var(--easing-spring); }
@property --fl-orbit { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.fl-proposal--pending {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
    conic-gradient(from var(--fl-orbit), var(--border-secondary) 0deg 200deg, var(--pluto-4) 250deg, var(--pluto-2) 300deg, var(--pluto-1) 335deg, var(--border-secondary) 360deg) border-box;
  animation: fl-orbit 6s linear infinite;
}
.fl-proposal--applied { animation: fl-settle 520ms var(--easing-spring); }
.fl-msg { animation: fl-rise var(--duration-slow) var(--easing-out) backwards; }
.fl-health:not(.fl-health--sm) .fl-health__num { letter-spacing: -.02em; }
@keyframes fl-spin { to { transform: rotate(360deg); } }
@keyframes fl-orbit { to { --fl-orbit: 360deg; } }
@keyframes fl-pluto-grow { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fl-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fl-settle { 0% { transform: scale(.985); } 60% { transform: scale(1.006); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fl-msg, .fl-proposal--pending, .fl-proposal--applied, .fl-pluto--floating, .fl-msg__working .sd-icon { animation: none !important; }
  .fl-pluto-launcher svg { transition: none; }
}

.fl-brand--ink { color: var(--text-primary); }

/* ChangeProposal, compact: automatic inside a ChatThread (or compact prop). Tighter padding,
   small buttons, a 16px title, no avatar, and a lighter "why" line. */
.fl-proposal--compact .fl-proposal__head { gap: var(--space-xs); padding: var(--space-sm) var(--space-sm) 0; }
.fl-proposal--compact .fl-proposal__body { gap: var(--space-xs); padding: var(--space-xs) var(--space-sm) var(--space-sm); }
.fl-proposal--compact .fl-proposal__foot { padding: var(--space-xs) var(--space-sm); }
.fl-proposal--compact .fl-proposal__why .sd-accordion__trigger { min-height: var(--size-3xl); color: var(--text-secondary); }
.fl-proposal--compact .fl-proposal__why .sd-accordion__trigger:hover { color: var(--text-primary); }
.fl-proposal--compact .fl-proposal__why .sd-accordion__panel { padding-bottom: var(--space-sm); }

/* FenlyLogo */
.fl-logo { display: block; flex: none; color: var(--text-primary); }

/* >>> phase patterns */
/* ---------- shared ---------- */
.fl-m0 { margin: 0; }

/* ---------- AuthCard ---------- */
.fl-auth { display: flex; flex-direction: column; gap: var(--space-lg); width: 100%; max-width: 400px; box-sizing: border-box; }
.fl-auth__head { display: flex; flex-direction: column; gap: var(--space-xs); }
.fl-auth__title { margin: 0; color: var(--text-primary); }
.fl-auth__desc { margin: 0; color: var(--text-secondary); }
.fl-auth__providers { display: flex; flex-direction: column; gap: var(--space-sm); }
.fl-auth__legal { margin: 0; color: var(--text-tertiary); }
.fl-auth__switch { margin: 0; color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-xxs); }

/* ---------- OnboardingSteps ---------- */
.fl-onb { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; background: var(--bg-primary); }
.fl-onb--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fl-onb__main { display: flex; flex-direction: column; gap: var(--space-xl); padding: var(--space-xl) var(--space-2xl); min-width: 0; container-type: inline-size; }
.fl-onb__top { display: flex; align-items: center; gap: var(--space-xl); flex-wrap: wrap; }
.fl-onb__stepper { flex: 1; min-width: 0; max-width: 640px; }
/* In a narrow column only the current step keeps its words; the others stay readable to screen readers */
@container (max-width: 720px) {
  .fl-onb__top { flex-direction: column; align-items: flex-start; gap: var(--space-base); }
  .fl-onb__stepper { width: 100%; }
  .fl-onb__stepper .sd-stepper__step:not(.sd-stepper__step--current) .sd-stepper__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.fl-onb__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; max-width: 560px; margin-top: var(--space-lg); }
.fl-onb__eyebrow { margin: 0; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .1em; }
.fl-onb__title { margin: 0; color: var(--text-primary); text-wrap: balance; }
.fl-onb__desc { margin: 0; color: var(--text-secondary); }
.fl-onb__content { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-base); }
.fl-onb__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); max-width: 560px; padding-top: var(--space-base); border-top: 1px solid var(--border-secondary); }
.fl-onb__next { display: flex; gap: var(--space-xs); }
.fl-onb__aside { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; padding: var(--space-xl); background: var(--bg-secondary); border-left: 1px solid var(--border-secondary); overflow: hidden; }
.fl-onb__aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--border-secondary) 1px, transparent 1.3px); background-size: 12px 12px; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%); }
@media (max-width: 900px) { .fl-onb--aside { grid-template-columns: minmax(0, 1fr); } .fl-onb__aside { display: none; } .fl-onb__main { padding: var(--space-lg); } }

/* ---------- SystemBrief ---------- */
.fl-brief { display: flex; flex-direction: column; gap: var(--space-base); }
.fl-brief__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.fl-brief__field { display: flex; flex-direction: column; gap: var(--space-xs); }
.fl-brief__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.fl-brief__label { color: var(--text-primary); padding: 0; }
.fl-brief__colors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.fl-brief__swatch { display: inline-flex; align-items: center; justify-content: center; width: var(--size-3xl); height: var(--size-3xl); padding: 0; border: 0; border-radius: var(--radius-full); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-secondary); transition: transform var(--duration-fast) var(--easing-out); }
.fl-brief__swatch:hover { transform: scale(1.08); }
.fl-brief__swatch:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.fl-brief__swatch--on { box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--border-primary); }
.fl-brief__hex { width: 120px; font-family: var(--font-mono); }
.fl-brief__dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.fl-brief__checks { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-base); }
.fl-brief__cost { margin: 0; display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-tertiary); }
@media (max-width: 560px) { .fl-brief__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- BuildProgress ---------- */
.fl-build { padding: var(--space-base); display: flex; flex-direction: column; gap: var(--space-base); }
.fl-build__head { display: flex; align-items: center; gap: var(--space-sm); }
.fl-build__titles { flex: 1; min-width: 0; }
.fl-build__orb { display: inline-flex; border-radius: 50%; }
.fl-build__orb--live .sd-icon { animation: fl-spin 2.4s linear infinite; }
.fl-build__counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.fl-build__count { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-xs); align-items: center; padding: var(--space-sm); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); color: var(--icon-tertiary); }
.fl-build__count .sd-icon { grid-row: 1 / 3; }
.fl-build__num { color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.fl-build__swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.fl-build__sw { width: 20px; height: 20px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); animation: fl-sw-in var(--duration-slow) var(--easing-spring) backwards; }
@keyframes fl-sw-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.fl-build__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
.fl-build__step { display: flex; align-items: center; gap: var(--space-xs); color: var(--text-primary); }
.fl-build__step .sd-icon { flex: none; }
.fl-build__step--done .sd-icon { color: var(--icon-success-primary); }
.fl-build__step--pending { color: var(--text-tertiary); }
.fl-build__step--pending .sd-icon { color: var(--icon-tertiary); }
.fl-build__step--error .sd-icon { color: var(--icon-error-primary); }
.fl-build__detail { margin-left: auto; font-variant-numeric: tabular-nums; }
.fl-build__foot { display: flex; justify-content: flex-end; gap: var(--space-xs); }
@media (prefers-reduced-motion: reduce) { .fl-build__sw, .fl-build__orb--live .sd-icon { animation: none; } }

/* ---------- FigmaImportMapper ---------- */
.fl-fim { display: flex; flex-direction: column; gap: var(--space-base); }
.fl-fim__file { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-secondary); }
.fl-fim__filename { display: flex; flex-direction: column; min-width: 0; }
.fl-fim__table { display: flex; flex-direction: column; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); overflow: hidden; }
.fl-fim__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(160px, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-secondary); }
.fl-fim__row:last-child { border-bottom: 0; }
.fl-fim__row--head { background: var(--bg-secondary); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .1em; padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.fl-fim__col { display: flex; flex-direction: column; min-width: 0; }
.fl-fim__found { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.fl-fim__found > .mono-label-medium { text-transform: uppercase; letter-spacing: .1em; }
.fl-fim__chips { display: flex; flex-wrap: wrap; gap: var(--space-xxs); }
.fl-fim__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.fl-fim__left { color: var(--text-warning-primary); }

/* ---------- ActivityFeed ---------- */
.fl-feed { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.fl-feed__day { margin: var(--space-xs) 0 0; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .1em; }
.fl-feed__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.fl-feed__row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-xs); align-items: start; width: 100%; padding: var(--space-xs) 0; border: 0; background: none; color: var(--text-secondary); font: inherit; text-align: left; }
button.fl-feed__row { cursor: pointer; border-radius: var(--radius-md); padding-left: var(--space-xxs); padding-right: var(--space-xxs); margin: 0 calc(-1 * var(--space-xxs)); width: calc(100% + 2 * var(--space-xxs)); }
button.fl-feed__row:hover { background: var(--bg-secondary); }
button.fl-feed__row:focus-visible { outline: 2px solid var(--border-accent-primary); }
.fl-feed__mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-tertiary); color: var(--icon-secondary); }
.fl-feed__row .fl-ai-avatar, .fl-feed__row .sd-avatar { width: 24px; height: 24px; }
.fl-feed__text { padding-top: 2px; min-width: 0; overflow-wrap: anywhere; }
.fl-feed__who { font-weight: 600; color: var(--text-primary); }
.fl-feed__target { font-family: var(--font-mono); font-size: .9em; padding: 0 4px; border-radius: var(--radius-control, 4px); background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary); }
.fl-feed__time { padding-top: 3px; color: var(--text-tertiary); white-space: nowrap; }
.fl-feed--compact .fl-feed__row { padding: var(--space-xxs) 0; }
.fl-feed__empty { margin: 0; color: var(--text-tertiary); }
.fl-feed__all { align-self: flex-start; }

/* ---------- TokenEditor ---------- */
.fl-tedit { padding: var(--space-base); display: flex; flex-direction: column; gap: var(--space-base); }
.fl-tedit__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.fl-tedit__name { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.fl-tedit__code { font-family: var(--font-mono); font-weight: 500; overflow-wrap: anywhere; }
.fl-tedit__modes { display: flex; flex-direction: column; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); }
.fl-tedit__mode { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 72px; gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-secondary); }
.fl-tedit__mode:last-child { border-bottom: 0; }
.fl-tedit__mode > .sd-badge { justify-self: end; }
.fl-tedit__mlabel { color: var(--text-secondary); }
.fl-tedit__alias { font-family: var(--font-mono); color: var(--text-primary); }
.fl-tedit__opt { display: inline-block; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.fl-tedit__list { margin: var(--space-sm) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
.fl-tedit__list li { display: flex; align-items: center; gap: var(--space-xs); color: var(--icon-tertiary); }
.fl-tedit__list code { color: var(--text-primary); font-family: var(--font-mono); }
.fl-tedit__tabs .fl-feed { margin-top: var(--space-xs); }
.fl-tedit__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding-top: var(--space-sm); border-top: 1px solid var(--border-secondary); }
.fl-tedit__actions { display: flex; gap: var(--space-xs); }
.fl-tedit__delete { color: var(--text-error-primary); }

/* ---------- ComponentCard ---------- */
.fl-ccard { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--bg-primary); color: inherit; font: inherit; text-align: left; overflow: hidden; }
.fl-ccard--link { cursor: pointer; transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out); }
.fl-ccard--link:hover { border-color: var(--border-primary); box-shadow: var(--elevation-sm); }
.fl-ccard--link:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.fl-ccard--selected { border-color: var(--border-accent-primary); }
.fl-ccard__stage { display: flex; align-items: center; justify-content: center; height: 132px; padding: var(--space-base); background: var(--bg-secondary); border-bottom: 1px solid var(--border-secondary); background-image: radial-gradient(var(--border-secondary) 1px, transparent 1.3px); background-size: 12px 12px; color: var(--icon-tertiary); overflow: hidden; }
.fl-ccard__preview { pointer-events: none; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.fl-ccard__info { display: flex; flex-direction: column; gap: var(--space-xxs); padding: var(--space-sm) var(--space-base) var(--space-base); }
.fl-ccard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.fl-ccard__name { color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-ccard__desc { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fl-ccard__meta { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xxs); }
.fl-ccard__time { margin-left: auto; }

/* ---------- Docs blocks ---------- */
.fl-doc { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.fl-doc--edit { padding: var(--space-sm); margin: 0 calc(-1 * var(--space-sm)); border: 1px solid transparent; border-radius: var(--radius-lg); cursor: default; transition: border-color var(--duration-fast) var(--easing-out); }
.fl-doc--edit:hover { border-color: var(--border-secondary); }
.fl-doc--selected, .fl-doc--selected:hover { border-color: var(--border-accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-accent-primary) 14%, transparent); }
.fl-doc__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 28px; opacity: 0; transition: opacity var(--duration-fast) var(--easing-out); }
.fl-doc--edit:hover .fl-doc__bar, .fl-doc--selected .fl-doc__bar, .fl-doc--edit:focus-within .fl-doc__bar { opacity: 1; }
.fl-doc__kind { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .1em; }
.fl-doc__tools { display: flex; gap: 2px; }
.fl-doc__tools .sd-btn { width: 24px; height: 24px; min-width: 24px; padding: 0; color: var(--text-tertiary); }
.fl-doc__title { margin: 0; color: var(--text-primary); }
.fl-doc__desc { margin: 0; color: var(--text-secondary); max-width: 68ch; }
.fl-doc__prop { font-family: var(--font-mono); color: var(--text-primary); }
.fl-doc__req { color: var(--text-error-primary); margin-left: 2px; }
.fl-doc__type { font-family: var(--font-mono); color: var(--text-accent-primary); overflow-wrap: anywhere; }
.fl-dodont { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-base); }
@media (max-width: 640px) { .fl-dodont { grid-template-columns: minmax(0, 1fr); } }
.fl-dodont__item { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); overflow: hidden; }
.fl-dodont__stage { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 120px; padding: var(--space-base); background: var(--bg-secondary); }
.fl-dodont__cap { display: flex; flex-direction: column; gap: var(--space-xxs); padding: var(--space-sm); border-top: 3px solid var(--icon-success-primary); color: var(--text-secondary); }
.fl-dodont__item--dont .fl-dodont__cap { border-top-color: var(--icon-error-primary); }
.fl-dodont__tag { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-success-primary); }
.fl-dodont__item--dont .fl-dodont__tag { color: var(--text-error-primary); }
.fl-anat { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-base); align-items: center; }
@media (max-width: 640px) { .fl-anat { grid-template-columns: minmax(0, 1fr); } }
.fl-anat__stage { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 64px var(--space-xl); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-secondary); }
.fl-anat__frame { position: relative; display: inline-flex; outline: 1px dashed var(--border-primary); outline-offset: 6px; }
.fl-anat__pin, .fl-anat__num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pluto-1, var(--bg-accent-solid)); color: #fff; font: 600 11px/1 var(--font-primary); }
.fl-anat__pin { position: absolute; transform: translateX(-50%); box-shadow: 0 0 0 2px var(--bg-secondary); }
.fl-anat__pin--top { top: -40px; }
.fl-anat__pin--bottom { bottom: -40px; }
.fl-anat__pin::after { content: ""; position: absolute; left: 50%; width: 1px; height: 14px; background: var(--pluto-1, var(--bg-accent-solid)); }
.fl-anat__pin--top::after { top: 100%; margin-top: 2px; }
.fl-anat__pin--bottom::after { bottom: 100%; margin-bottom: 2px; }
.fl-anat__legend { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.fl-anat__legend li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.fl-anat__num { flex: none; }
.fl-anat__txt { display: flex; flex-direction: column; }
.fl-doctok { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); }
.fl-doctok__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-secondary); }
.fl-doctok__row:last-child { border-bottom: 0; }
.fl-figframe { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); overflow: hidden; }
.fl-figframe__stage { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: var(--space-lg); background: var(--bg-inset); }
.fl-figframe__empty { opacity: .5; }
.fl-figframe__bar { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-top: 1px solid var(--border-secondary); color: var(--icon-secondary); }
.fl-figframe__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl-vgrid { display: grid; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); overflow: hidden; }
.fl-vgrid > * { border-bottom: 1px solid var(--border-secondary); }
.fl-vgrid__corner, .fl-vgrid__head { background: var(--bg-secondary); }
.fl-vgrid__head, .fl-vgrid__rowhead { display: flex; align-items: center; padding: var(--space-xs) var(--space-sm); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .1em; }
.fl-vgrid__head { justify-content: center; }
.fl-vgrid__cell { display: flex; align-items: center; justify-content: center; padding: var(--space-base) var(--space-sm); min-height: 64px; }

/* ---------- ChangeRequestList ---------- */
.fl-crl { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; container-type: inline-size; }
.fl-crl__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); flex-wrap: wrap; }
.fl-crl__bar > .sd-toggle-group { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fl-crl__src { width: 160px; }
.fl-crl__list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-primary); overflow: hidden; }
.fl-crl__list > li { border-bottom: 1px solid var(--border-secondary); }
.fl-crl__list > li:last-child { border-bottom: 0; }
.fl-cr { display: grid; grid-template-columns: minmax(0, 1fr) 150px 132px 88px; gap: var(--space-sm); align-items: center; width: 100%; padding: var(--space-sm) var(--space-base); border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.fl-cr { cursor: pointer; }
button.fl-cr:hover { background: var(--bg-secondary); }
button.fl-cr:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: -2px; }
.fl-cr > .sd-badge { justify-self: start; }
.fl-cr__main { display: flex; flex-direction: column; min-width: 0; }
.fl-cr__title { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-cr--open .fl-cr__title { font-weight: 600; }
.fl-cr__id { font-family: var(--font-mono); }
.fl-cr__src { display: inline-flex; align-items: center; gap: var(--space-xs); min-width: 0; color: var(--text-secondary); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fl-cr__src .fl-ai-avatar, .fl-cr__src .sd-avatar { width: 20px; height: 20px; flex: none; }
.fl-cr__brand { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-tertiary); color: var(--icon-secondary); flex: none; }
.fl-cr__time { text-align: right; white-space: nowrap; }
@container (max-width: 620px) {
  .fl-cr { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xxs); }
  .fl-cr__src { grid-column: 1; grid-row: 2; }
  .fl-cr > .sd-badge { grid-column: 2; grid-row: 1; justify-self: end; }
  .fl-cr__time { grid-column: 2; grid-row: 2; }
}

/* ---------- ExportPreview ---------- */
.fl-export { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; container-type: inline-size; }
.fl-export__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.fl-export__bar .sd-tabs { min-width: 0; max-width: 100%; overflow-x: auto; }
.fl-export__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.fl-export__files { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-primary); }
@container (max-width: 600px) { .fl-export__body { grid-template-columns: minmax(0, 1fr); } }

/* ---------- PlanCard, CreditPackPicker ---------- */
.fl-plan { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.fl-plan--highlight { border-color: var(--border-accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-accent-primary) 12%, transparent); }
.fl-plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.fl-plan__price { margin: 0; display: flex; align-items: baseline; gap: var(--space-xxs); color: var(--text-primary); }
.fl-plan__credits { margin: 0; display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-secondary); }
.fl-plan__credits b { color: var(--text-primary); font-weight: 600; }
.fl-plan__feats { margin: 0 0 var(--space-xs); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.fl-plan__feats li { display: flex; gap: var(--space-xs); align-items: flex-start; color: var(--text-secondary); }
.fl-plan__feats .sd-icon { flex: none; margin-top: 2px; color: var(--icon-success-primary); }
.fl-packs { display: flex; flex-direction: column; gap: var(--space-sm); }
.fl-packs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-xs); }
.fl-pack { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--space-sm) var(--space-base); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-primary); cursor: pointer; transition: border-color var(--duration-fast) var(--easing-out); }
.fl-pack:hover { border-color: var(--border-primary); }
.fl-pack--on, .fl-pack--on:hover { border-color: var(--border-accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-accent-primary) 14%, transparent); }
.fl-pack:has(input:focus-visible) { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
.fl-pack__credits { color: var(--text-primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fl-pack__price { margin-top: var(--space-xs); color: var(--text-primary); }
.fl-pack__save { position: absolute; bottom: var(--space-sm); right: var(--space-sm); }

/* ---------- Notifications ---------- */
.fl-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.fl-note__btn { display: grid; grid-template-columns: 28px minmax(0, 1fr) 8px; gap: var(--space-sm); align-items: start; width: 100%; padding: var(--space-sm); border: 0; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fl-note__btn:hover { background: var(--bg-secondary); }
.fl-note__btn:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: -2px; }
.fl-note__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-tertiary); color: var(--icon-secondary); }
.fl-note__icon .fl-ai-avatar { width: 28px; height: 28px; }
.fl-note__icon--error { background: var(--bg-error-primary); color: var(--text-error-primary); }
.fl-note__icon--warning { background: var(--bg-warning-primary); color: var(--text-warning-primary); }
.fl-note__icon--success { background: var(--bg-success-primary); color: var(--text-success-primary); }
.fl-note__icon--info { background: var(--bg-info-primary); color: var(--text-info-primary); }
.fl-note__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text-primary); }
.fl-note__time { color: var(--text-tertiary); }
.fl-note--unread .fl-note__text > .label-label-2-medium { font-weight: 600; }
.fl-note__dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--pluto-2, var(--bg-accent-solid)); }
.fl-bell__wrap { position: relative; display: inline-flex; }
.fl-bell__count { position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: var(--radius-full); background: var(--pluto-1, var(--bg-accent-solid)); color: #fff; font: 600 10px/15px var(--font-primary); text-align: center; pointer-events: none; box-shadow: 0 0 0 2px var(--bg-primary); }
.fl-bell__pop.sd-popover { padding: var(--space-xs); }
.fl-bell__panel { display: flex; flex-direction: column; gap: var(--space-xxs); max-height: 460px; overflow-y: auto; }
.fl-bell__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xxs) var(--space-xs); }

/* UserMenu: the account row at the bottom of the sidebar */
.fl-user.sd-btn { height: auto; min-height: var(--size-4xl); padding: var(--space-xxs) var(--space-xs); gap: var(--space-xs); justify-content: flex-start; color: var(--text-primary); width: 100%; max-width: 100%; }
.fl-user .sd-btn__label { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; width: 100%; }
.fl-user__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1; text-align: left; }
.fl-user__text > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-user__chev { color: var(--icon-tertiary); }
.fl-user--icon.sd-btn { width: auto; min-height: 0; padding: var(--space-xxxs); border-radius: var(--radius-full); }
/* An account menu never hides Sign out behind a scroll: it can grow to the viewport */
.sd-menu.fl-user-menu { max-height: calc(100vh - 32px); }

/* SystemSwitcher and UserMenu read as one framed control, not loose ghost text */
.fl-switch.sd-btn, .fl-user.sd-btn:not(.fl-user--icon) { border: 1px solid var(--border-secondary); background: var(--bg-primary); }
.fl-switch.sd-btn:hover, .fl-user.sd-btn:not(.fl-user--icon):hover { border-color: var(--border-primary); background: var(--bg-secondary-hover); }
.fl-switch.sd-btn[aria-expanded="true"], .fl-user.sd-btn[aria-expanded="true"]:not(.fl-user--icon) { border-color: var(--border-primary); background: var(--bg-selected); }

/* AuthCard: email and password under the providers */
.fl-m0 { margin: 0; }
.fl-auth__or { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-tertiary); }
.fl-auth__or::before, .fl-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--border-secondary); }
.fl-auth__form { display: flex; flex-direction: column; gap: var(--space-base); }
.fl-auth__forgot { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--space-xs)); }

/* VerifyDevice */
.fl-verify__device { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-base); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); background: var(--bg-secondary); color: var(--icon-secondary); }
.fl-verify__devtext { display: flex; flex-direction: column; gap: 2px; color: var(--text-primary); }
.fl-verify__method { display: inline-flex; align-items: center; gap: var(--space-xxs); text-transform: uppercase; }
.fl-verify__pk { display: flex; flex-direction: column; align-items: center; gap: var(--space-base); text-align: center; padding: var(--space-base) 0; }
.fl-verify__pkicon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--bg-accent-primary); color: var(--text-accent-primary); }
.fl-verify__code { display: flex; flex-direction: column; gap: var(--space-base); }
.fl-verify__code .sd-otp { width: 100%; justify-content: space-between; }
.fl-verify__resend { text-align: center; }
.fl-verify__others { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-base); border-top: 1px solid var(--border-secondary); }
.fl-verify__others > .sd-btn--link { align-self: center; }

/* ---------- PlutoCharacter ---------- */
.fl-pc { display: block; flex: none; overflow: visible; }
.fl-pc .fl-pc__whole { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.fl-pc .fl-pc__squash { transform-box: fill-box; transform-origin: 50% 100%; }
.fl-pc .fl-pc__look { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.fl-pc .fl-pc__lid { transform-box: fill-box; transform-origin: center; }
/* Pointing Pluto at something: a parent sets --pc-gx / --pc-gy between -1 and 1. */
.fl-pc .fl-pc__lean { transform-box: view-box; transform-origin: 100px 170px; transform: translateX(calc(var(--pc-gx, 0) * 4px)) rotate(calc(var(--pc-gx, 0) * 5deg)); transition: transform .5s cubic-bezier(.25, 1, .4, 1); }
.fl-pc .fl-pc__gaze { transform: translate(calc(var(--pc-gx, 0) * 12px), calc(var(--pc-gy, 0) * 9px)); transition: transform .22s cubic-bezier(.25, 1, .4, 1); }
.fl-pc .fl-pc__eyes { transition: opacity .15s; }
.fl-pc .fl-pc__eye { fill: var(--icon-white); transition: opacity .15s; }
.fl-pc .fl-pc__happy, .fl-pc .fl-pc__closed, .fl-pc .fl-pc__wink { fill: none; stroke: var(--icon-white); stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity .15s; }
.fl-pc--small .fl-pc__happy, .fl-pc--small .fl-pc__closed, .fl-pc--small .fl-pc__wink { stroke-width: 10; }
.fl-pc .fl-pc__shadow { fill: color-mix(in srgb, var(--pluto-1) 18%, transparent); }
.fl-pc .fl-pc__zzz text { font: 600 24px/1 var(--font-mono); fill: var(--pluto-3); opacity: 0; }

@keyframes fl-pc-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .975); } }
@keyframes fl-pc-breathe-deep { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.035, .955); } }
@keyframes fl-pc-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes fl-pc-scan { 0%, 18% { transform: translate(-8px, -12px); } 30%, 55% { transform: translate(9px, -12px); } 68%, 85% { transform: translate(2px, -15px); } 100% { transform: translate(-8px, -12px); } }
@keyframes fl-pc-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes fl-pc-wave { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-8deg); } 35% { transform: rotate(7deg); } 55% { transform: rotate(-5deg); } 70% { transform: rotate(0); } }
@keyframes fl-pc-hop { 0%, 55%, 100% { transform: translateY(0) scale(1, 1); } 8% { transform: translateY(0) scale(1.08, .9); } 24% { transform: translateY(-26px) scale(.95, 1.06); } 40% { transform: translateY(0) scale(1.06, .94); } }
@keyframes fl-pc-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(2px) scale(1.03, .97); } }
@keyframes fl-pc-pop { 0% { transform: scale(1, 1); } 25% { transform: translateY(-10px) scale(.94, 1.1); } 55% { transform: scale(1.04, .97); } 100% { transform: scale(1, 1); } }
@keyframes fl-pc-zz { 0% { opacity: 0; transform: translate(0, 6px); } 30%, 70% { opacity: .9; } 100% { opacity: 0; transform: translate(8px, -10px); } }

.fl-pc .fl-pc__squash { animation: fl-pc-breathe 3.4s ease-in-out infinite; }
.fl-pc .fl-pc__lid { animation: fl-pc-blink 4.8s infinite; }

.fl-pc[data-state="greeting"] .fl-pc__whole { animation: fl-pc-wave 2.4s ease-in-out infinite; }
.fl-pc[data-state="greeting"] .fl-pc__eye--r { opacity: 0; }
.fl-pc[data-state="greeting"] .fl-pc__wink { opacity: 1; }

.fl-pc[data-state="listening"] .fl-pc__look { transform: translate(-7px, 7px); }
.fl-pc[data-state="listening"] .fl-pc__whole { transform: rotate(-6deg); }
.fl-pc[data-state="listening"] .fl-pc__lid { animation-duration: 3.2s; }

.fl-pc[data-state="thinking"] .fl-pc__look { animation: fl-pc-scan 2.6s ease-in-out infinite; }
.fl-pc[data-state="thinking"] .fl-pc__whole { animation: fl-pc-sway 2.6s ease-in-out infinite; }
.fl-pc[data-state="thinking"] .fl-pc__squash { animation-duration: 1.6s; }

.fl-pc[data-state="working"] .fl-pc__look { transform: translate(0, 9px) scale(.92); }
.fl-pc[data-state="working"] .fl-pc__squash { animation: fl-pc-bob .52s ease-in-out infinite; }

.fl-pc[data-state="proposing"] .fl-pc__look { transform: translate(9px, 12px); }
.fl-pc[data-state="proposing"] .fl-pc__whole { transform: rotate(5deg); }

.fl-pc[data-state="celebrating"] .fl-pc__eyes { opacity: 0; }
.fl-pc[data-state="celebrating"] .fl-pc__happy { opacity: 1; }
.fl-pc[data-state="celebrating"] .fl-pc__look { transform: translate(0, -4px); }
.fl-pc[data-state="celebrating"] .fl-pc__squash { animation: fl-pc-hop 1.6s ease-in-out infinite; }

.fl-pc[data-state="happy"] .fl-pc__eyes { opacity: 0; }
.fl-pc[data-state="happy"] .fl-pc__happy { opacity: 1; }
.fl-pc[data-state="happy"] .fl-pc__look { transform: translate(0, -3px); }
.fl-pc[data-state="happy"] .fl-pc__squash { animation: fl-pc-breathe-deep 1.4s ease-in-out infinite; }

/* meditating: eyes closed, slow deep breath, floating a little; the hero's sage */
/* a slow float: rises, drifts a little side to side and tilts, like it is weightless */
@keyframes fl-pc-levitate { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 25% { transform: translate(3px, -9px) rotate(0deg); } 50% { transform: translate(0, -16px) rotate(2deg); } 75% { transform: translate(-3px, -8px) rotate(0deg); } }
.fl-pc[data-state="meditating"] .fl-pc__eyes { opacity: 0; }
.fl-pc[data-state="meditating"] .fl-pc__closed { opacity: 1; }
.fl-pc[data-state="meditating"] .fl-pc__lid { animation: none; }
.fl-pc[data-state="meditating"] .fl-pc__look { transform: translate(0, 2px); }
.fl-pc[data-state="meditating"] .fl-pc__squash { animation: fl-pc-breathe-deep 4s ease-in-out infinite; }
.fl-pc[data-state="meditating"] .fl-pc__whole { animation: fl-pc-levitate 8s ease-in-out infinite; }

.fl-pc[data-state="rejected"] .fl-pc__look { transform: translate(0, 14px) scale(.88); }
.fl-pc[data-state="rejected"] .fl-pc__whole { transform: translateY(3px) scale(.96); }
.fl-pc[data-state="rejected"] .fl-pc__squash { animation-duration: 4.6s; }

.fl-pc[data-state="error"] .fl-pc__look { transform: translate(-6px, 14px) scale(.85); }
.fl-pc[data-state="error"] .fl-pc__whole { transform: rotate(-6deg) translateY(2px); }
.fl-pc[data-state="error"] .fl-pc__squash { animation-duration: 5s; }

@keyframes fl-pc-sigh { 0%, 62%, 100% { transform: scale(1, 1); } 74% { transform: scale(1.045, .93); } 86% { transform: scale(.985, 1.02); } }
@keyframes fl-pc-tear { 0%, 30% { opacity: 0; transform: translateY(-4px) scale(.4); } 42% { opacity: .9; transform: translateY(0) scale(1); } 58% { opacity: .9; transform: translateY(2px) scale(1); } 88% { opacity: 0; transform: translateY(30px) scale(.8); } 100% { opacity: 0; transform: translateY(30px) scale(.8); } }
.fl-pc .fl-pc__tear { fill: var(--icon-white); opacity: 0; transform-box: fill-box; transform-origin: 50% 0; }
.fl-pc[data-state="sad"] .fl-pc__look { transform: translate(0, 12px); }
.fl-pc[data-state="sad"] .fl-pc__whole { transform: translateY(4px) scale(.95); }
.fl-pc[data-state="sad"] .fl-pc__squash { animation: fl-pc-sigh 4.2s ease-in-out infinite; }
.fl-pc[data-state="sad"] .fl-pc__lid { animation-duration: 6s; }
.fl-pc[data-state="sad"] .fl-pc__tear { animation: fl-pc-tear 4.2s ease-in infinite; }

/* reading: the eyes follow four lines left to right, glance up, and loop without a jump */
@keyframes fl-pc-read {
  0% { transform: translate(-7px, 5px); animation-timing-function: linear; }
  18.52% { transform: translate(7px, 5px); animation-timing-function: ease-in-out; }
  21.6% { transform: translate(-7px, 6.6px); animation-timing-function: linear; }
  40.12% { transform: translate(7px, 6.6px); animation-timing-function: ease-in-out; }
  43.21% { transform: translate(-7px, 8.2px); animation-timing-function: linear; }
  61.73% { transform: translate(7px, 8.2px); animation-timing-function: ease-in-out; }
  64.81% { transform: translate(-7px, 9.8px); animation-timing-function: linear; }
  83.33% { transform: translate(7px, 9.8px); animation-timing-function: ease-in-out; }
  86.42% { transform: translate(-7px, 11.4px); animation-timing-function: ease-in-out; }
  93.21% { transform: translate(-1px, 1.2px); animation-timing-function: ease-in-out; }
  100% { transform: translate(-7px, 5px); }
}
@keyframes fl-pc-read-nod {
  0%, 86.42%, 100% { transform: translateY(2px) rotate(0); }
  21.6% { transform: translateY(2.4px) rotate(.6deg); }
  64.81% { transform: translateY(1.6px) rotate(-.6deg); }
  93.21% { transform: translateY(.6px) rotate(-.4deg); }
}
.fl-pc[data-state="reading"] .fl-pc__look { transform: translate(0, 7px); animation: fl-pc-read 8.1s infinite; }
.fl-pc[data-state="reading"] .fl-pc__whole { animation: fl-pc-read-nod 8.1s ease-in-out infinite; }

.fl-pc[data-state="surprised"] .fl-pc__look { transform: translate(0, -6px) scale(1.22); }
.fl-pc[data-state="surprised"] .fl-pc__squash { animation: fl-pc-pop .6s cubic-bezier(.3, 1.4, .5, 1) 1 both; }
.fl-pc[data-state="surprised"] .fl-pc__lid { animation: none; }

.fl-pc[data-state="sleeping"] .fl-pc__eyes { opacity: 0; }
.fl-pc[data-state="sleeping"] .fl-pc__closed { opacity: 1; }
.fl-pc[data-state="sleeping"] .fl-pc__look { transform: translate(0, 6px); }
.fl-pc[data-state="sleeping"] .fl-pc__squash { animation: fl-pc-breathe-deep 5s ease-in-out infinite; }
.fl-pc[data-state="sleeping"] .fl-pc__zzz text { animation: fl-pc-zz 3s ease-in-out infinite; }
.fl-pc[data-state="sleeping"] .fl-pc__zzz text + text { animation-delay: 1.5s; }
.fl-pc--small .fl-pc__zzz { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fl-pc, .fl-pc * { animation: none !important; transition: none !important; }
  .fl-pc[data-state="sleeping"] .fl-pc__zzz text { opacity: .9; }
  .fl-pc[data-state="sad"] .fl-pc__tear { opacity: 1; }
}

/* Pluto's avatar and launcher are now the character itself */
.fl-ai-avatar { background: none !important; box-shadow: none !important; overflow: visible; }
.fl-ai-avatar .fl-pc { width: 100%; height: 100%; }
.fl-pluto-launcher { background: transparent !important; box-shadow: none !important; width: 56px; height: 56px; }
.fl-pluto-launcher .fl-pc { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--pluto-1) 35%, transparent)); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.fl-pluto-launcher:hover { background: transparent !important; }
.fl-pluto-launcher:hover svg { transform: none; }
.fl-pluto-launcher:hover .fl-pc { transform: translateY(-3px) scale(1.06); }
.fl-pluto-launcher__dot { top: 4px; right: 4px; }
.fl-msg__working .fl-pc { width: 22px; height: 22px; }
.fl-msg__working { color: inherit; }
/* <<< phase patterns */

/* ===================================================================
   Fenly Marketing. Website patterns on Seed tokens.
   Layout responds to the width of each pattern (container queries),
   so a pattern behaves the same in a page, a card preview or a column.
   =================================================================== */

.fm-page { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-primary); }
.fm-page main { display: block; }
.fm-page a:not([class]), .fm-sh__lead a { color: var(--text-link); text-underline-offset: 3px; }
.fm-page a:not([class]):hover, .fm-sh__lead a:hover { color: var(--text-link-hover); }

:root {
  /* Layout sizes for the website patterns only. Everything else is a Seed token. */
  --fm-page-max: 1280px;
  --fm-measure: 720px;
  --fm-header: 72px;
  --fm-form: 540px;
  --fm-orbit: 500px;
  --fm-orbit-scene: 520px;
  --fm-chat: 360px;
  --fm-chat-wide: 440px;
  --fm-frame: 420px;
  --fm-sidebar: 208px;
  --fm-sync: 520px;
  --fm-sync-h: 380px;
  --fm-hub: 176px;
  --fm-6xl: 64px;
  --fm-split-intro: 440px;
  --fm-media: 460px;
  --fm-cta: 384px;
}

/* ---------- Page width and sections ---------- */
.fm-container { box-sizing: border-box; width: 100%; max-width: calc(var(--fm-page-max) + 2 * var(--space-3xl)); margin: 0 auto; padding-inline: var(--space-3xl); }
.fm-container--narrow { max-width: calc(var(--fm-measure) + 2 * var(--space-3xl)); }
.fm-section { container: fm-section / inline-size; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-primary); }
/* Spinning orbits and bleeding product shots never widen the page (clip keeps sticky children working). */
.fm-section { overflow-x: clip; }
.fm-section--subtle { background: var(--bg-secondary); }
.fm-section--inverse { background: var(--bg-primary); }
.fm-section--md > .fm-container { padding-block: var(--space-8xl); }
.fm-section--sm > .fm-container { padding-block: var(--space-4xl); }
.fm-section--hero > .fm-container { padding-block: var(--space-5xl) 0; }
.fm-section--div-top, .fm-section--div-both { border-top: 1px solid var(--border-secondary); }
.fm-section--div-bottom, .fm-section--div-both { border-bottom: 1px solid var(--border-secondary); }
.fm-section > .fm-container > .fm-sh + * { margin-top: var(--space-5xl); }
@container fm-section (max-width: 640px) {
  .fm-container { padding-inline: var(--space-base); }
  .fm-section--md > .fm-container { padding-block: var(--space-5xl); }
  .fm-section--sm > .fm-container { padding-block: var(--space-2xl); }
  .fm-section--hero > .fm-container { padding-block: var(--space-2xl) 0; }
  .fm-section > .fm-container > .fm-sh + * { margin-top: var(--space-3xl); }
}

/* ---------- Eyebrow ---------- */
.fm-eyebrow { display: inline-flex; align-items: center; gap: var(--space-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); }
.fm-eyebrow--accent { color: var(--text-accent-primary); }
.fm-eyebrow__dot { flex: none; width: var(--size-sm); height: var(--size-sm); border-radius: var(--radius-full); background: var(--pluto-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pluto-2) 18%, transparent); }
.fm-mark { display: inline-flex; flex: none; line-height: 0; }
.fm-mark--pluto { margin-block: -2px; }

/* ---------- Section header ---------- */
.fm-sh { display: flex; flex-direction: column; gap: var(--space-base); }
.fm-sh--center { align-items: center; text-align: center; }
.fm-sh--center .fm-sh__title { max-width: 18em; }
.fm-sh--center .fm-sh__lead { max-width: 36em; }
.fm-sh--start { align-items: flex-start; }
.fm-sh__title { margin: 0; color: var(--text-primary); text-wrap: balance; }
.fm-sh__lead { margin: 0; color: var(--text-secondary); text-wrap: pretty; }
.fm-sh--start .fm-sh__lead { max-width: 34em; }
.fm-sh .fm-eyebrow + .fm-sh__title { margin-top: var(--space-xxs); }
@container (max-width: 560px) {
  /* Smaller screens step down one marketing style (same values as the style named). */
  .fm-title--xl { font-size: 44px; line-height: 52px; letter-spacing: -0.02em; }   /* marketing-display-3 */
  .fm-title--lg { font-size: 36px; line-height: 44px; }                               /* marketing-display-4 */
  .fm-title--md { font-size: 36px; line-height: 44px; }                               /* marketing-display-4 */
  .fm-sh__lead.marketing-lead-1 { font-size: 18px; line-height: 28px; }               /* marketing-lead-2 */
}

/* ---------- Site header ---------- */
.fm-header { container: fm-header / inline-size; background: var(--bg-primary); color: var(--text-primary); border-bottom: 1px solid var(--border-secondary); font-family: var(--font-primary); }
.fm-header--sticky { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg-primary) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); }
.fm-header__inner { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-3xl); height: var(--fm-header); max-width: calc(var(--fm-page-max) + 2 * var(--space-3xl)); margin: 0 auto; padding-inline: var(--space-3xl); }
.fm-header__home { display: inline-flex; color: var(--text-primary); border-radius: var(--radius-md); }
.fm-header__nav { flex: 1; display: flex; justify-content: center; gap: var(--space-xl); }
.fm-header__link { color: var(--text-secondary); text-decoration: none; padding: var(--space-xxs) 0; border-radius: var(--radius-sm); }
.fm-header__link:hover, .fm-header__link[aria-current="page"] { color: var(--text-primary); }
.fm-header__end { display: flex; align-items: center; gap: var(--space-xs); }
.fm-header__menu { display: none; }
.fm-header a:focus-visible, .fm-footer a:focus-visible, .fm-menu__link:focus-visible { outline: 2px solid var(--border-accent-primary); outline-offset: 2px; }
@container fm-header (max-width: 760px) {
  .fm-header__inner { gap: var(--space-base); padding-inline: var(--space-base); }
  .fm-header__nav { display: none; }
  .fm-header__end { margin-left: auto; }
  .fm-header__menu { display: inline-flex; }
}
@container fm-header (max-width: 400px) { .fm-header__cta { display: none; } }
.fm-menu__nav { display: flex; flex-direction: column; margin-bottom: var(--space-lg); }
.fm-menu__link { color: var(--text-primary); text-decoration: none; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-secondary); }

/* ---------- Site footer ---------- */
.fm-footer { container: fm-footer / inline-size; background: var(--bg-secondary); color: var(--text-primary); border-top: 1px solid var(--border-secondary); font-family: var(--font-primary); padding-block: var(--space-4xl) var(--space-2xl); }
.fm-footer__top { display: flex; align-items: center; gap: var(--space-4xl); padding-bottom: var(--space-2xl); }
.fm-footer__brand { flex: 1; display: flex; align-items: center; gap: var(--space-md); color: var(--text-primary); }
.fm-footer__tagline { color: var(--text-secondary); }
.fm-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-xl); }
.fm-footer__link { color: var(--text-secondary); text-decoration: none; }
.fm-footer__link:hover, .fm-footer__legal:hover { color: var(--text-primary); }
.fm-footer__bottom { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-secondary); }
.fm-footer__copy { flex: 1; color: var(--text-tertiary); }
.fm-footer__copy:has(+ .fm-footer__social) { flex: 0 1 auto; }
.fm-footer__social { flex: 1; display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.fm-footer__social-link--icon { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.fm-footer__social-icon { display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.fm-footer__legal { color: var(--text-tertiary); text-decoration: none; }
.fm-footer__cta { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-link); text-decoration: none; }
.fm-footer__cta:hover { color: var(--text-link-hover); }
@container fm-footer (max-width: 640px) { .fm-container { padding-inline: var(--space-base); } }
@container fm-footer (max-width: 760px) {
  .fm-footer__top { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
  .fm-footer__brand { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .fm-footer__copy { flex-basis: 100%; order: 2; }
  .fm-footer__social { flex-basis: 100%; order: 1; }
}

/* ---------- Waitlist form ---------- */
.fm-wl { container: fm-wl / inline-size; display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; max-width: var(--fm-form); }
.fm-wl .sd-label { color: var(--text-primary); }
.fm-wl__row { display: flex; gap: var(--space-xs); }
.fm-wl__input { flex: 1; min-width: 0; }
.fm-wl__btn { flex: none; }
.fm-wl__msg { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-tertiary); }
.fm-wl__msg--error { color: var(--text-error-primary); }
@container fm-wl (max-width: 440px) {
  .fm-wl__row { flex-direction: column; }
  .fm-wl__input { flex: none; }
  .fm-wl__btn { width: 100%; }
}
.fm-wl-done { box-sizing: border-box; display: flex; gap: var(--space-sm); align-items: flex-start; width: 100%; max-width: var(--fm-form); padding: var(--space-md) var(--space-md); border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--pluto-2) 40%, transparent); background: var(--bg-accent-primary); color: var(--text-primary); }
.fm-wl-done__text { display: flex; flex-direction: column; gap: var(--space-xxs); }
.fm-wl-done__sub { color: var(--text-secondary); overflow-wrap: anywhere; }

/* ---------- Hero ---------- */
.fm-hero { container: fm-hero / inline-size; }
.fm-hero__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4xl); align-items: center; }
.fm-hero--solo .fm-hero__in { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.fm-hero__text { display: flex; flex-direction: column; gap: var(--space-xl); align-items: flex-start; }
.fm-hero--solo .fm-hero__text { align-items: center; }
.fm-hero__action { width: 100%; display: flex; }
.fm-hero__text > .fm-sh, .fm-frow__text > .fm-sh, .fm-split__intro > .fm-sh { align-self: stretch; }
.fm-hero--solo .fm-hero__action { justify-content: center; }
@container fm-hero (max-width: 900px) {
  .fm-hero__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
}
.fm-hero-frame { margin-top: var(--space-2xl); }

/* ---------- Pluto orbit ---------- */
@keyframes fm-orbit-spin { to { transform: rotate(360deg); } }
.fm-orbit { container: fm-orbit / inline-size; overflow-x: clip; } /* a spinning ring's box grows ~20% at 45 degrees; never let it widen the page */
.fm-orbit__in { position: relative; min-height: var(--fm-orbit-scene); display: flex; align-items: center; justify-content: flex-end; }
.fm-orbit__stage { position: relative; width: min(var(--fm-orbit), 100%); aspect-ratio: 1; margin-right: var(--space-3xl); }
.fm-orbit:not(.fm-orbit--card) .fm-orbit__in { justify-content: center; }
.fm-orbit:not(.fm-orbit--card) .fm-orbit__stage { margin-right: 0; }
.fm-orbit__ring { position: absolute; inset: 0; margin: auto; border-radius: var(--radius-full); border: 1px solid color-mix(in srgb, var(--pluto-2) 28%, transparent); animation: fm-orbit-spin linear infinite; }
.fm-orbit__ring--1 { width: 100%; height: 100%; animation-duration: 60s; }
.fm-orbit__ring--2 { width: 72%; height: 72%; animation-duration: 38s; animation-direction: reverse; }
.fm-orbit__ring--3 { width: 44%; height: 44%; animation-duration: 22s; }
.fm-orbit__moon { position: absolute; top: -6px; left: 50%; width: var(--size-md); height: var(--size-md); margin-left: -6px; border-radius: var(--radius-full); }
.fm-orbit__ring--1 .fm-orbit__moon { background: var(--pluto-4); }
.fm-orbit__ring--2 .fm-orbit__moon { background: var(--pluto-3); }
.fm-orbit__ring--3 .fm-orbit__moon { background: var(--pluto-2); }
.fm-orbit__core { position: absolute; inset: 0; margin: auto; width: 30%; aspect-ratio: 1; height: auto; border-radius: var(--radius-full); background: radial-gradient(closest-side, color-mix(in srgb, var(--pluto-1) 12%, transparent), transparent); display: flex; align-items: center; justify-content: center; }
.fm-orbit__core svg { width: 100%; height: auto; }
/* A slow aura behind a meditating Pluto, breathing with it. */
.fm-orbit__core { isolation: isolate; }
.fm-orbit__core::before { content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: var(--radius-full); background: radial-gradient(closest-side, color-mix(in srgb, var(--pluto-2) 26%, transparent), color-mix(in srgb, var(--pluto-3) 8%, transparent) 60%, transparent); opacity: 0; transition: opacity .6s; }
.fm-orbit__core:has(.fl-pc[data-state="meditating"])::before { opacity: 1; animation: fm-aura 6s ease-in-out infinite; }
@keyframes fm-aura { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fm-orbit__core::before { animation: none !important; } }
/* Knowledge motes: tiny dots spiralling in and fading as they reach a meditating Pluto. Barely there on purpose. */
.fm-orbit__stage { container-type: inline-size; }
.fm-orbit__motes { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.fm-orbit__stage:has(.fl-pc[data-state="meditating"]) .fm-orbit__motes { opacity: 1; }
.fm-orbit__mote { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: var(--radius-full); background: var(--pluto-3); opacity: 0; animation: fm-mote var(--t) cubic-bezier(.45, 0, .7, 1) var(--d) infinite; }
.fm-orbit__mote:nth-child(3n) { background: var(--pluto-2); width: 2px; height: 2px; margin: -1px 0 0 -1px; }
@keyframes fm-mote {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--r) * 1cqi)); }
  25% { opacity: var(--o); }
  80% { opacity: calc(var(--o) * .7); }
  100% { opacity: 0; transform: rotate(calc(var(--a) + 80deg)) translateX(11cqi) scale(.3); }
}
.fm-orbit--still .fm-orbit__motes { display: none; }
@media (prefers-reduced-motion: reduce) { .fm-orbit__motes { display: none; } }
/* With a card pinned bottom left, the card drops a little so Pluto stays centered in its orbits and the card never covers it. Keep the card compact here. */
.fm-orbit--card .fm-orbit__core { width: 26%; }
/* The card's left edge sits just inside the outer orbit, its bottom just below it. */
.fm-orbit--card .fm-orbit__card { left: calc(100% - min(var(--fm-orbit), 100%) - var(--space-3xl) + var(--space-lg)); bottom: calc(var(--space-xs) * -1); }
.fm-wl-done .fm-mark--pluto { margin: -6px 0; padding: 2px; border-radius: var(--radius-full); background: var(--bg-primary); }
.fm-orbit--still .fm-orbit__ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .fm-orbit__ring { animation: none; } }
.fm-orbit__chips { position: absolute; right: 0; top: var(--space-lg); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }
.fm-chip { padding: 6px var(--space-sm); border-radius: var(--radius-full); border: 1px solid var(--border-secondary); background: var(--bg-primary); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.fm-chip--active { color: var(--text-accent-primary); border-color: color-mix(in srgb, var(--pluto-2) 40%, transparent); }
.fm-orbit__card { position: absolute; left: 0; bottom: var(--space-xs); width: min(var(--fm-chat), 100%); }
@container fm-orbit (max-width: 560px) {
  .fm-orbit__in { min-height: 0; flex-direction: column; align-items: stretch; gap: var(--space-lg); }
  .fm-orbit__stage { align-self: center; width: min(320px, 80%); margin-right: 0; }
  .fm-orbit__chips { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; order: -1; }
  .fm-orbit__card { position: static; width: 100%; }
  .fm-orbit--card .fm-orbit__core { width: 30%; }
}

/* ---------- Pluto chat preview ---------- */
.fm-chat { box-sizing: border-box; margin: 0; width: 100%; max-width: var(--fm-chat); padding: var(--space-base); border-radius: var(--radius-xl); background: var(--bg-elevated); border: 1px solid var(--border-secondary); box-shadow: var(--elevation-xl); display: flex; flex-direction: column; gap: var(--space-sm); color: var(--text-primary); text-align: left; }
.fm-chat--wide { max-width: var(--fm-chat-wide); padding: var(--space-md); }
.fm-chat__ask { margin: 0; align-self: flex-end; max-width: 85%; background: var(--bg-tertiary); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-xl); }
.fm-chat__reply { margin: 0; color: var(--text-primary); }
/* compact: placeholder bars instead of chat copy, tighter card */
.fm-chat--compact { --fm-chat: 288px; padding: var(--space-sm); gap: var(--space-xs); }
.fm-chat__bars { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.fm-chat__bar { display: block; height: 7px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.fm-chat__ask--dummy { padding: var(--space-xs) var(--space-sm); }
.fm-chat__ask--dummy .fm-chat__bars { align-items: flex-end; }
.fm-chat__ask--dummy .fm-chat__bar { background: color-mix(in srgb, var(--text-primary) 18%, transparent); }
.fm-chat__line { display: flex; gap: var(--space-xs); align-items: center; }
.fm-chat__line .fl-pc { flex: none; }
.fm-chat--compact .fm-chat__proposal { padding: var(--space-xs) var(--space-sm); gap: var(--space-xxs); }
.fm-chat--compact .fm-chat__actions { margin-top: var(--space-xxs); }
.fm-chat__proposal { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pluto-2) 35%, transparent); }
.fm-chat--wide .fm-chat__proposal { order: -1; }
.fm-chat__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); }
.fm-chat__diff { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; color: var(--text-secondary); }
.fm-chat__sw { width: var(--size-md); height: var(--size-md); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .25); }
.fm-chat__rows { border: 1px solid var(--border-secondary); border-radius: var(--radius-lg); overflow: hidden; }
.fm-chat__row { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); }
.fm-chat__row + .fm-chat__row { border-top: 1px solid var(--border-secondary); }
.fm-chat__val { color: var(--text-secondary); }
.fm-chat__val--added { color: var(--text-success-primary); }
.fm-chat__checks { display: flex; flex-wrap: wrap; gap: var(--space-xxs); }
.fm-chat__actions { display: flex; justify-content: flex-end; gap: var(--space-xs); pointer-events: none; }

/* ---------- Stage, product frame, sync diagram ---------- */
.fm-stage { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: var(--space-2xl); border-radius: var(--radius-2xl); border: 1px solid var(--border-secondary); background-color: var(--bg-stage); background-image: radial-gradient(var(--bg-stage-pattern) 1px, transparent 1px); background-size: 16px 16px; overflow: hidden; }
.fm-stage--cut { border-bottom: 0; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; align-items: flex-end; padding: var(--space-3xl) var(--space-6xl) 0; }
.fm-frame { container: fm-frame / inline-size; }
.fm-frame__win { width: 100%; min-height: var(--fm-frame); display: flex; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border: 1px solid var(--border-secondary); border-bottom: 0; background: var(--bg-primary); box-shadow: var(--elevation-xl); overflow: hidden; text-align: left; }
.fm-frame__side { width: var(--fm-sidebar); flex: none; box-sizing: border-box; background: var(--bg-secondary); border-right: 1px solid var(--border-secondary); padding: var(--space-base) var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xxs); color: var(--text-primary); }
.fm-frame__side > svg { margin: var(--space-xxs) var(--space-xs) var(--space-base); }
.fm-frame__nav { padding: var(--space-xs); border-radius: var(--radius-control); color: var(--text-secondary); }
.fm-frame__nav--on { background: var(--bg-selected); color: var(--text-primary); }
.fm-frame__main { flex: 1; min-width: 0; padding: var(--space-xl) var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-base); }
.fm-frame__crumb { text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); }
.fm-frame__title { font-family: var(--font-display); color: var(--text-primary); }
@container fm-frame (max-width: 760px) {
  .fm-stage--cut { padding: var(--space-lg) var(--space-lg) 0; }
  .fm-frame__side { display: none; }
  .fm-frame__main { padding: var(--space-lg) var(--space-base); }
}
.fm-sync__map { position: relative; width: 100%; max-width: var(--fm-sync); height: var(--fm-sync-h); }
.fm-sync__line { position: absolute; left: 50%; top: 50%; background: var(--border-primary); }
.fm-sync__line--h { width: 80%; height: 2px; transform: translate(-50%, -50%); }
.fm-sync__line--v { width: 2px; height: 80%; transform: translate(-50%, -50%); }
.fm-sync__node { position: absolute; height: var(--size-4xl); box-sizing: border-box; padding: 0 var(--space-base); border-radius: var(--radius-xl); background: var(--bg-primary); border: 1px solid var(--border-secondary); display: flex; align-items: center; color: var(--text-primary); white-space: nowrap; }
.fm-sync__node--top { left: 50%; top: 0; transform: translateX(-50%); }
.fm-sync__node--bottom { left: 50%; bottom: 0; transform: translateX(-50%); }
.fm-sync__node--left { left: 0; top: 50%; transform: translateY(-50%); }
.fm-sync__node--right { right: 0; top: 50%; transform: translateY(-50%); }
.fm-sync__hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--fm-hub); height: var(--fm-6xl); border-radius: var(--radius-xl); background: var(--bg-primary); border: 1px solid color-mix(in srgb, var(--pluto-2) 50%, transparent); box-shadow: var(--elevation-lg), 0 0 0 6px color-mix(in srgb, var(--pluto-1) 8%, transparent); display: flex; align-items: center; justify-content: center; color: var(--text-primary); }

/* ---------- Audience strip ---------- */
.fm-aud { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
.fm-aud__list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-lg); }
.fm-aud__item { min-height: var(--fm-6xl); box-sizing: border-box; padding: var(--space-sm) var(--space-base); display: flex; align-items: center; justify-content: center; gap: var(--space-sm); text-align: center; border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--bg-secondary); color: var(--text-primary); }
.fm-aud__n { color: var(--text-accent-primary); }

/* ---------- Features ---------- */
.fm-fgrid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 280px), calc((100% - 2 * var(--space-lg)) / 3)), 1fr)); }
.fm-fgrid--2 { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 360px), calc((100% - var(--space-lg)) / 2)), 1fr)); }
.fm-fcard { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--bg-primary); color: var(--text-primary); }
.fm-fcard__icon { width: var(--size-4xl); height: var(--size-4xl); border-radius: var(--radius-lg); background: var(--bg-accent-primary); color: var(--icon-accent-primary); display: flex; align-items: center; justify-content: center; }
.fm-fcard__title { margin: 0; }
.fm-fcard__text { margin: 0; color: var(--text-secondary); }

.fm-rows { display: flex; flex-direction: column; gap: var(--space-9xl); }
@container fm-section (max-width: 640px) { .fm-rows { gap: var(--space-5xl); } }
.fm-frow { container: fm-frow / inline-size; }
.fm-frow__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7xl); align-items: center; }
.fm-frow--reverse .fm-frow__media { order: -1; }
.fm-frow__text { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }
.fm-frow__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); color: var(--text-primary); }
.fm-frow__list li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.fm-frow__check { flex: none; color: var(--icon-success-primary); margin-top: 2px; }
.fm-frow__link { display: inline-flex; align-items: center; gap: var(--space-xxs); color: var(--text-link); text-decoration: none; }
.fm-frow__link:hover { color: var(--text-link-hover); }
.fm-frow__media > .fm-stage { min-height: var(--fm-media); }
@container fm-frow (max-width: 900px) {
  .fm-frow__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
  .fm-frow--reverse .fm-frow__media { order: 0; }
  .fm-frow__media > .fm-stage { min-height: 0; }
}
@container fm-frow (max-width: 520px) {
  .fm-sync__node { padding: 0 var(--space-xs); font-size: 12px; }
  .fm-stage { padding: var(--space-base); }
}

/* ---------- Steps ---------- */
.fm-steps { container: fm-steps / inline-size; }
.fm-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-step { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); color: var(--text-primary); }
.fm-step__title { margin: 0; }
.fm-step__text { margin: 0; color: var(--text-secondary); }
.fm-step__n { color: var(--text-accent-primary); }
.fm-steps--timeline .fm-steps__list { gap: var(--space-4xl); }
.fm-steps--timeline .fm-step { align-items: center; text-align: center; }
.fm-steps--timeline .fm-step__text { max-width: 20em; }
.fm-steps--timeline .fm-step__n { position: relative; z-index: 1; width: var(--size-5xl); height: var(--size-5xl); box-sizing: border-box; border-radius: var(--radius-full); background: var(--bg-primary); border: 1px solid color-mix(in srgb, var(--pluto-2) 50%, transparent); box-shadow: 0 0 0 6px var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.fm-steps--timeline .fm-step + .fm-step::before { content: ""; position: absolute; top: calc(var(--size-5xl) / 2); right: calc(50% + var(--size-5xl) / 2); width: calc(100% + var(--space-4xl) - var(--size-5xl)); height: 1px; background: var(--border-primary); }
.fm-steps--cards .fm-steps__list { gap: var(--space-md); }
.fm-steps--cards .fm-step { padding: var(--space-xl); border: 1px solid var(--border-secondary); border-radius: var(--radius-xl); background: var(--bg-secondary); }
@container fm-steps (max-width: 600px) {
  .fm-steps__list { grid-template-columns: minmax(0, 1fr); }
  .fm-steps--timeline .fm-steps__list { gap: var(--space-2xl); }
  .fm-steps--timeline .fm-step { display: grid; grid-template-columns: var(--size-5xl) minmax(0, 1fr); column-gap: var(--space-base); row-gap: var(--space-xxs); align-items: start; text-align: left; }
  .fm-steps--timeline .fm-step__n { grid-row: span 2; }
  .fm-steps--timeline .fm-step__title { padding-top: var(--space-sm); }
  .fm-steps--timeline .fm-step + .fm-step::before { top: calc(-1 * var(--space-2xl)); left: calc(var(--size-5xl) / 2); right: auto; width: 1px; height: var(--space-2xl); }
}

/* ---------- Split section ---------- */
.fm-split { container: fm-split / inline-size; }
.fm-split__in { display: grid; grid-template-columns: var(--fm-split-intro) minmax(0, 1fr); gap: var(--space-7xl); align-items: start; }
.fm-split__intro { display: flex; flex-direction: column; gap: var(--space-lg); align-items: flex-start; position: sticky; top: var(--space-3xl); }
@container fm-split (max-width: 900px) {
  .fm-split__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
  .fm-split__intro { position: static; }
}

/* ---------- FAQ (Seed Accordion with a plus/minus marker) ---------- */
.fm-faq { border-top: 1px solid var(--border-secondary); }
.fm-faq .sd-accordion__trigger { padding-block: var(--space-md); gap: var(--space-base); text-align: left; font-weight: 600; }
.fm-faq .sd-accordion__chevron { position: relative; flex: none; width: 28px; height: 28px; box-sizing: border-box; border-radius: var(--radius-full); border: 1px solid var(--border-primary); color: var(--icon-secondary); transform: none !important; transition: border-color .15s ease; }
.fm-faq .sd-accordion__chevron > svg { display: none; }
.fm-faq .sd-accordion__chevron::before, .fm-faq .sd-accordion__chevron::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .15s ease; }
.fm-faq .sd-accordion__chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
.fm-faq .sd-accordion__item--open .sd-accordion__chevron::after { transform: translate(-50%, -50%) rotate(0deg); }
.fm-faq .sd-accordion__trigger:hover .sd-accordion__chevron { border-color: var(--border-accent-primary); color: var(--icon-accent-primary); }
.fm-faq__a { margin: 0; max-width: 42em; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) { .fm-faq .sd-accordion__chevron::after { transition: none; } }

/* ---------- CTA banner (always Dark) ---------- */
.fm-cta { container: fm-cta / inline-size; }
.fm-cta__panel { position: relative; box-sizing: border-box; overflow: hidden; border-radius: var(--radius-3xl); background: var(--bg-canvas); border: 1px solid var(--border-secondary); color: var(--text-primary); font-family: var(--font-primary); padding: var(--space-5xl) var(--space-6xl); min-height: var(--fm-cta); display: flex; align-items: center; }
.fm-cta__body { position: relative; display: flex; flex-direction: column; gap: var(--space-md); max-width: var(--fm-measure); }
.fm-cta__title { margin: 0; color: var(--text-primary); text-wrap: balance; }
.fm-cta__text { margin: 0; color: var(--text-secondary); max-width: 32em; }
.fm-cta__body > .fm-wl, .fm-cta__body > .fm-wl-done { margin-top: var(--space-xxs); }
.fm-cta__deco { position: absolute; right: -120px; top: 50%; width: 560px; height: 560px; transform: translateY(-50%); pointer-events: none; }
.fm-cta__ring { position: absolute; border-radius: var(--radius-full); border: 1px solid color-mix(in srgb, var(--pluto-3) 26%, transparent); }
.fm-cta__ring--1 { inset: 0; }
.fm-cta__ring--2 { inset: 140px 0 140px 140px; width: 280px; height: 280px; border-color: color-mix(in srgb, var(--pluto-3) 32%, transparent); }
.fm-cta__moon { position: absolute; left: 274px; top: 134px; width: var(--size-md); height: var(--size-md); border-radius: var(--radius-full); background: var(--pluto-3); }
.fm-cta__core { position: absolute; left: 220px; top: 220px; width: 120px; height: 120px; border-radius: var(--radius-full); background: radial-gradient(closest-side, color-mix(in srgb, var(--pluto-2) 18%, transparent), transparent); display: flex; align-items: center; justify-content: center; }
@container fm-cta (max-width: 900px) { .fm-cta__deco { opacity: .35; right: -260px; } }
@container fm-cta (max-width: 560px) {
  .fm-cta__panel { padding: var(--space-3xl) var(--space-lg); border-radius: var(--radius-2xl); min-height: 0; }
  .fm-cta__deco { display: none; }
}

/* =====================================================================
   PlutoLive and PlutoShowcase
   ===================================================================== */
.fm-live { position: relative; display: inline-flex; flex-direction: column; align-items: center; padding-top: 36px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.fm-live .fl-pc { width: var(--fm-live-size); height: auto; cursor: pointer; filter: drop-shadow(0 18px 28px color-mix(in srgb, var(--pluto-1) 22%, transparent)); }
.fm-live__say { position: absolute; top: calc(var(--fm-live-size) * .06); left: 50%; transform: translate(-50%, 8px) scale(.96); white-space: nowrap; max-width: min(320px, 90vw); overflow: hidden; text-overflow: ellipsis; padding: var(--space-xxs) var(--space-sm); border-radius: var(--radius-full); background: var(--bg-elevated); z-index: 1; border: 1px solid var(--border-secondary); box-shadow: var(--elevation-sm); color: var(--text-secondary); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.fm-live__say::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; background: inherit; border-right: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); transform: rotate(45deg); }
.fm-live__say--on { opacity: 1; transform: translate(-50%, 0) scale(1); }
@media (prefers-reduced-motion: reduce) { .fm-live__say { transition: none; } }

.fm-showcase { overflow: hidden; }
.fm-showcase__in { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); }
.fm-showcase__card { width: min(var(--fm-chat-wide), 100%); }
.fm-showcase__card > .fm-chat { max-width: none; }