/* fudge3d components.css - every component from design doc section 7.
   Token references only; no literal hex values in this file. */

/* ============ 7.1 Buttons ============ */
[hidden] { display: none !important; }

/* Canonical Lucide icon system. */
.f3-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--f3-text-secondary);
  vertical-align: -0.15em;
}
.f3-icon--16 { width: 16px; height: 16px; }
.f3-icon--20 { width: 20px; height: 20px; }
.f3-icon--24 { width: 24px; height: 24px; }
.f3-icon--32 { width: 32px; height: 32px; }
.f3-icon--neutral { color: var(--f3-text-secondary); }
.f3-icon--accent { color: var(--f3-accent-text); }
.f3-icon--success { color: var(--f3-success); }
.f3-icon--warning { color: var(--f3-warning); }
.f3-icon--danger { color: var(--f3-danger); }
.f3-icon--info { color: var(--f3-info); }

.f3-icon-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin-bottom: var(--f3-space-3);
  border-radius: var(--f3-radius-md);
  background: var(--f3-surface-sunken);
  color: var(--f3-text-secondary);
}
.f3-icon-plate .f3-icon { color: inherit; }
.f3-icon-plate--accent { background: transparent; color: var(--f3-accent-text); }
.f3-icon-plate--success { background: var(--f3-success-tint); color: var(--f3-success); }
.f3-icon-plate--warning { background: var(--f3-warning-tint); color: var(--f3-warning); }
.f3-icon-plate--danger { background: var(--f3-danger-tint); color: var(--f3-danger); }
.f3-icon-plate--info { background: var(--f3-info-tint); color: var(--f3-info); }

.f3-icon-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--f3-space-3);
  width: 100%;
  text-align: left;
}
.f3-icon-heading > .f3-icon-plate,
.f3-icon-heading > .f3-icon { flex-shrink: 0; margin: 0; }
.f3-card > .f3-icon-heading > .f3-icon:not(.f3-icon--accent) { color: var(--f3-caramel-800); }
.f3-card > .f3-icon-plate:first-child,
.f3-step > .f3-icon-plate:first-child { margin-top: 0; }
.f3-card--compact-icon { align-items: center; gap: var(--f3-space-2); }
.f3-card--compact-icon > .f3-icon { color: var(--f3-text-secondary); }
.f3-btn .f3-icon { color: currentColor; }
.f3-icon--spin { animation: f3-spin 700ms linear infinite; }

.f3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f3-space-2);
  font-family: var(--f3-font-interface);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  border-radius: var(--f3-radius-md);
  border: none;
  height: 44px;
  padding: 0 var(--f3-space-5);
  transition: background-color var(--f3-dur-fast) var(--f3-ease),
              border-color var(--f3-dur-fast) var(--f3-ease),
              transform var(--f3-dur-fast) var(--f3-ease);
  text-decoration: none;
  white-space: nowrap;
}
.f3-btn--app { height: 36px; padding: 0 var(--f3-space-4); font-size: 13px; line-height: 18px; }
.f3-btn--compact { height: 32px; padding: 0 var(--f3-space-3); font-size: 13px; line-height: 18px; }
.f3-btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.f3-btn--primary {
  background: var(--f3-accent-fill);
  color: var(--f3-on-accent);
}
.f3-btn--primary:hover:not(:disabled) { background: var(--f3-accent-hover); }
.f3-btn--primary:active:not(:disabled) { background: var(--f3-accent-active); transform: scale(0.98); }
.f3-btn--primary:disabled { background: var(--f3-surface-sunken); color: var(--f3-text-disabled); cursor: not-allowed; }

.f3-btn--secondary {
  background: transparent;
  color: var(--f3-text-primary);
  border: 1px solid var(--f3-border-strong);
}
.f3-btn--secondary:hover:not(:disabled) { background: var(--f3-surface-panel); }
.f3-btn--secondary:active:not(:disabled) { background: var(--f3-surface-sunken); }
.f3-btn--secondary:disabled { background: transparent; border-color: var(--f3-border-default); color: var(--f3-text-disabled); cursor: not-allowed; }

.f3-btn--ghost {
  background: transparent;
  color: var(--f3-text-secondary);
}
.f3-btn--ghost:hover:not(:disabled) { background: var(--f3-surface-panel); }
.f3-btn--ghost:active:not(:disabled) { background: var(--f3-surface-sunken); }
.f3-btn--ghost:disabled { color: var(--f3-text-disabled); cursor: not-allowed; }

.f3-btn--danger {
  background: var(--f3-danger-fill);
  color: var(--f3-on-danger);
}
.f3-btn--danger:hover:not(:disabled) { filter: brightness(1.08); }
.f3-btn--danger:active:not(:disabled) { filter: brightness(0.94); transform: scale(0.98); }
.f3-btn--danger:disabled { background: var(--f3-surface-sunken); color: var(--f3-text-disabled); cursor: not-allowed; }

.f3-btn:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }

.f3-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.f3-btn--loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: currentColor;
  animation: f3-spin 700ms linear infinite;
}
.f3-btn--primary.f3-btn--loading::after,
.f3-btn--danger.f3-btn--loading::after { color: var(--f3-on-accent); }
.f3-btn--danger.f3-btn--loading::after { color: var(--f3-on-danger); }
.f3-btn--secondary.f3-btn--loading::after,
.f3-btn--ghost.f3-btn--loading::after { color: var(--f3-text-primary); }
@keyframes f3-spin { to { transform: rotate(360deg); } }

/* ============ 7.2 Text input / textarea ============ */
.f3-field { display: flex; flex-direction: column; gap: var(--f3-space-1); }
.f3-field__label-row { display: flex; align-items: baseline; gap: var(--f3-space-2); margin-bottom: 2px; }
.f3-field__required { font-size: 11px; color: var(--f3-text-muted); }

.f3-input,
.f3-textarea {
  /* width:100% + min-width:0 -- without these, a bare <input> ignores
     flex/grid shrinking: browsers give text inputs a ~170-200px default
     intrinsic content width that's independent of the placeholder/value,
     and flex/grid items use that as an implicit min-width:auto floor.
     Found via the profile page's date-of-birth row (an .f3-onboard-dob-row
     grid) overflowing the viewport by 158px on a 390px-wide screen --
     .f3-select__trigger next to it shrank fine because it's a <button>,
     which doesn't carry that same default. */
  width: 100%;
  min-width: 0;
  font-family: var(--f3-font-interface);
  font-size: 13px;
  line-height: 18px;
  color: var(--f3-text-primary);
  background: var(--f3-surface-raised);
  border: 1px solid var(--f3-border-strong);
  border-radius: var(--f3-radius-xs);
  padding: 0 var(--f3-space-3);
  height: 36px;
  transition: border-color var(--f3-dur-fast) var(--f3-ease);
}
.f3-textarea { height: auto; min-height: 88px; padding: var(--f3-space-3); resize: vertical; }
.f3-input::placeholder,
.f3-textarea::placeholder { color: var(--f3-text-muted); }
.f3-input:hover:not(:disabled):not(:focus),
.f3-textarea:hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--f3-accent-text) 40%, var(--f3-border-strong)); cursor: text; }
.f3-input:focus,
.f3-textarea:focus {
  border: 2px solid var(--f3-accent-fill);
  outline: 2px solid var(--f3-focus-ring);
  outline-offset: 2px;
  padding: 0 calc(var(--f3-space-3) - 1px);
}
.f3-textarea:focus { padding: calc(var(--f3-space-3) - 1px); }
.f3-input:disabled,
.f3-textarea:disabled {
  background: var(--f3-surface-sunken);
  border-color: var(--f3-border-default);
  color: var(--f3-text-disabled);
  cursor: not-allowed;
}
.f3-input[readonly],
.f3-textarea[readonly] {
  background: var(--f3-surface-sunken);
  border-color: transparent;
  color: var(--f3-text-secondary);
  user-select: text;
}
.f3-field--error .f3-input,
.f3-field--error .f3-textarea {
  background: var(--f3-danger-tint);
  border-color: var(--f3-danger);
}
.f3-field__helper { font-size: 11px; color: var(--f3-text-muted); }
.f3-field__error { font-size: 11px; color: var(--f3-danger); display: flex; align-items: center; gap: var(--f3-space-1); }

/* ============ 7.3 Dropdown / select (custom, never native) ============ */
.f3-select { position: relative; }
.f3-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f3-font-interface);
  font-size: 13px;
  color: var(--f3-text-primary);
  background: var(--f3-surface-raised);
  border: 1px solid var(--f3-border-strong);
  border-radius: var(--f3-radius-xs);
  height: 36px;
  padding: 0 var(--f3-space-3);
  cursor: pointer;
}
.f3-select__chevron { width: 16px; height: 16px; color: var(--f3-text-muted); transition: transform var(--f3-dur-fast) var(--f3-ease); flex-shrink: 0; }
.f3-select--open .f3-select__trigger { border: 2px solid var(--f3-accent-fill); padding: 0 calc(var(--f3-space-3) - 1px); }
.f3-select--open .f3-select__chevron { transform: rotate(180deg); }
.f3-select__trigger:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }

.f3-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--f3-surface-overlay);
  border-radius: var(--f3-radius-md);
  box-shadow: var(--f3-shadow-md);
  border: 1px solid var(--f3-border-default);
  padding: var(--f3-space-1);
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.f3-select--open .f3-select__menu { display: block; }
.f3-select__item {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--f3-space-3);
  border-radius: var(--f3-radius-xs);
  font-size: 13px;
  color: var(--f3-text-primary);
  cursor: pointer;
}
.f3-select__item:hover,
.f3-select__item.f3-select__item--active { background: var(--f3-surface-panel); }
[data-theme="dark"] .f3-select__item:hover,
[data-theme="dark"] .f3-select__item.f3-select__item--active { background: var(--f3-surface-raised); }
.f3-select__item[aria-selected="true"] { background: var(--f3-accent-tint); color: var(--f3-accent-text); }
.f3-select__item[aria-selected="true"] .f3-select__check { display: inline-block; }
.f3-select__check { width: 16px; height: 16px; display: none; color: var(--f3-accent-text); }
.f3-select__item[aria-disabled="true"] { color: var(--f3-text-disabled); pointer-events: none; }
.f3-select__group-heading { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--f3-text-muted); padding: var(--f3-space-2) var(--f3-space-3) 4px; }
.f3-select__separator { height: 1px; background: var(--f3-border-default); margin: var(--f3-space-1) var(--f3-space-2); }
.f3-select__search { margin: 0 0 var(--f3-space-1); }

/* ============ 7.4 Checkbox ============ */
.f3-checkbox { display: inline-flex; align-items: center; gap: var(--f3-space-2); cursor: pointer; }
.f3-checkbox input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.f3-checkbox__box {
  width: 16px; height: 16px;
  border-radius: var(--f3-radius-xs);
  border: 1.5px solid var(--f3-border-strong);
  background: var(--f3-surface-raised);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--f3-dur-fast) var(--f3-ease), border-color var(--f3-dur-fast) var(--f3-ease);
}
.f3-checkbox__box svg { width: 12px; height: 12px; color: var(--f3-on-accent); display: none; }
.f3-checkbox:hover input:not(:checked):not(:disabled) ~ .f3-checkbox__box { border-color: var(--f3-accent-fill); background: var(--f3-surface-panel); }
.f3-checkbox input:checked ~ .f3-checkbox__box { background: var(--f3-accent-fill); border: none; }
.f3-checkbox input:checked ~ .f3-checkbox__box svg { display: block; }
.f3-checkbox:hover input:checked:not(:disabled) ~ .f3-checkbox__box { background: var(--f3-accent-hover); }
.f3-checkbox input:indeterminate ~ .f3-checkbox__box { background: var(--f3-accent-fill); border: none; }
.f3-checkbox input:indeterminate ~ .f3-checkbox__box .f3-checkbox__dash { display: block; }
.f3-checkbox__box .f3-checkbox__dash { width: 8px; height: 2px; background: var(--f3-on-accent); display: none; }
.f3-checkbox input:focus-visible ~ .f3-checkbox__box { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.f3-checkbox input:disabled ~ .f3-checkbox__box { background: var(--f3-surface-sunken); border-color: var(--f3-border-default); }
.f3-checkbox input:disabled ~ .f3-checkbox__box svg,
.f3-checkbox input:disabled ~ .f3-checkbox__box .f3-checkbox__dash { color: var(--f3-text-disabled); background: var(--f3-text-disabled); }
.f3-checkbox:has(input:disabled) { cursor: not-allowed; }
.f3-checkbox:has(input:disabled) .f3-checkbox__label { color: var(--f3-text-disabled); }
.f3-checkbox-group { display: flex; flex-direction: column; gap: var(--f3-space-3); }

/* ============ 7.5 Radio ============ */
.f3-radio { display: inline-flex; align-items: center; gap: var(--f3-space-2); cursor: pointer; }
.f3-radio input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.f3-radio__circle {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--f3-border-strong);
  background: var(--f3-surface-raised);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.f3-radio:hover input:not(:disabled) ~ .f3-radio__circle { border-color: var(--f3-accent-fill); }
.f3-radio input:checked ~ .f3-radio__circle { border: 2px solid var(--f3-accent-fill); }
.f3-radio__circle::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--f3-accent-fill); display: none; }
.f3-radio input:checked ~ .f3-radio__circle::after { display: block; }
.f3-radio input:focus-visible ~ .f3-radio__circle { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.f3-radio input:disabled ~ .f3-radio__circle { border-color: var(--f3-border-default); background: var(--f3-surface-sunken); }
.f3-radio input:disabled ~ .f3-radio__circle::after { background: var(--f3-text-disabled); }
.f3-radio:has(input:disabled) { cursor: not-allowed; }
.f3-radio:has(input:disabled) .f3-radio__label { color: var(--f3-text-disabled); }
.f3-radio-group { display: flex; flex-direction: column; gap: var(--f3-space-3); }
.f3-radio-group--horizontal { flex-direction: row; gap: var(--f3-space-5); }

/* ============ 7.6 Toggle switch ============ */
.f3-toggle { display: inline-flex; align-items: center; gap: var(--f3-space-2); cursor: pointer; }
.f3-toggle input { position: absolute; opacity: 0; width: 36px; height: 20px; margin: 0; cursor: pointer; }
.f3-toggle__track {
  width: 36px; height: 20px;
  border-radius: var(--f3-radius-pill);
  background: var(--f3-border-strong);
  position: relative;
  flex-shrink: 0;
  transition: background-color var(--f3-dur-fast) var(--f3-ease);
}
.f3-toggle:hover input:not(:checked):not(:disabled) ~ .f3-toggle__track { filter: brightness(0.92); }
.f3-toggle__knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--f3-surface-raised);
  box-shadow: var(--f3-shadow-sm);
  transition: transform var(--f3-dur-fast) var(--f3-ease);
}
.f3-toggle input:checked ~ .f3-toggle__track { background: var(--f3-accent-fill); }
.f3-toggle input:checked ~ .f3-toggle__track .f3-toggle__knob { transform: translateX(16px); }
.f3-toggle input:focus-visible ~ .f3-toggle__track { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.f3-toggle input:disabled ~ .f3-toggle__track { background: var(--f3-surface-sunken); }
.f3-toggle input:disabled ~ .f3-toggle__track .f3-toggle__knob { background: var(--f3-surface-panel); box-shadow: none; }
.f3-toggle:has(input:disabled) { cursor: not-allowed; }

/* ============ 7.7 Slider ============ */
.f3-slider { display: flex; flex-direction: column; gap: var(--f3-space-2); }
.f3-slider__readout { align-self: flex-end; }
.f3-slider__row { display: flex; align-items: center; gap: var(--f3-space-3); }
.f3-slider__track-wrap { position: relative; flex: 1; height: 16px; display: flex; align-items: center; }
.f3-slider__track { position: absolute; left: 0; right: 0; height: 4px; border-radius: var(--f3-radius-pill); background: var(--f3-surface-sunken); }
.f3-slider__fill { position: absolute; left: 0; height: 4px; border-radius: var(--f3-radius-pill); background: var(--f3-accent-fill); }
.f3-slider__ticks { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.f3-slider__ticks span { width: 2px; height: 2px; background: var(--f3-border-strong); }
.f3-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 100%;
  height: 16px;
  background: transparent;
  margin: 0;
}
.f3-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--f3-accent-fill);
  border: 2px solid var(--f3-surface-raised);
  box-shadow: var(--f3-shadow-sm);
  cursor: pointer;
  transition: width var(--f3-dur-fast) var(--f3-ease), height var(--f3-dur-fast) var(--f3-ease);
}
.f3-slider input[type="range"]:hover::-webkit-slider-thumb { width: 18px; height: 18px; }
.f3-slider input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--f3-accent-fill);
  border: 2px solid var(--f3-surface-raised);
  box-shadow: var(--f3-shadow-sm);
  cursor: pointer;
}
.f3-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--f3-focus-ring); outline-offset: 3px; }
.f3-slider input[type="range"]:disabled { pointer-events: none; }
.f3-slider--disabled .f3-slider__track { background: var(--f3-surface-sunken); }
.f3-slider--disabled .f3-slider__fill { background: var(--f3-border-strong); }
.f3-slider__numeric { width: 64px; text-align: right; }

/* ============ 7.8 Tabs ============ */
.f3-tabs { display: flex; gap: var(--f3-space-5); border-bottom: 1px solid var(--f3-border-default); }
.f3-tab {
  font-family: var(--f3-font-interface);
  font-weight: 500;
  font-size: 13px;
  color: var(--f3-text-secondary);
  background: none;
  padding: var(--f3-space-3) var(--f3-space-2);
  border-radius: var(--f3-radius-sm) var(--f3-radius-sm) 0 0;
  position: relative;
  cursor: pointer;
}
.f3-tab:hover { background: var(--f3-surface-panel); }
.f3-tab[aria-selected="true"] {
  color: var(--f3-text-primary);
  box-shadow: inset 0 -2px 0 0 var(--f3-accent-fill);
}
.f3-tab:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }

/* Cards */
.f3-card {
  background: var(--f3-surface-raised);
  border: 1px solid var(--f3-border-default);
  border-radius: var(--f3-radius-md);
  padding: var(--f3-space-4);
}
/* base.css zeroes every heading/paragraph margin, so a card's own title
   and body sit flush against each other unless the card supplies the gap
   itself; icon-led cards get the same gap below the icon. */
.f3-card > .f3-icon { margin-bottom: var(--f3-space-3); }
.f3-card > h2, .f3-card > h3 { margin-bottom: var(--f3-space-2); }
.f3-card--web {
  position: relative;
  isolation: isolate;
  border-radius: var(--f3-radius-lg);
  padding: var(--f3-space-5);
  box-shadow: var(--f3-shadow-sm);
  transition: box-shadow var(--f3-dur-base) var(--f3-ease), transform var(--f3-dur-base) var(--f3-ease);
}
.f3-card--web::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc(var(--f3-space-2) * -1);
  border-radius: inherit;
  background: radial-gradient(circle at 50% 65%, var(--f3-card-ambient-glow), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--f3-dur-base) var(--f3-ease);
}
.f3-card--web:hover,
.f3-card--web:focus-within { box-shadow: var(--f3-shadow-md); transform: translateY(-2px); }
.f3-card--web:hover::before,
.f3-card--web:focus-within::before { opacity: 1; }
.f3-card--web:active { transform: translateY(0); }
.f3-card--featured { border: 2px solid var(--f3-accent-fill); position: relative; }

/* Badges / chips */
.f3-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--f3-radius-sm);
  padding: var(--f3-space-1) 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--f3-surface-sunken);
  color: var(--f3-text-secondary);
}
.f3-badge--accent { background: var(--f3-accent-tint); color: var(--f3-accent-text); }
.f3-badge--success { background: var(--f3-success-tint); color: var(--f3-success); }
.f3-badge--warning { background: var(--f3-warning-tint); color: var(--f3-warning); }
.f3-badge--danger { background: var(--f3-danger-tint); color: var(--f3-danger); }
.f3-badge--info { background: var(--f3-info-tint); color: var(--f3-info); }
.f3-badge--popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }

/* Tooltip */
.f3-tooltip-target { position: relative; display: inline-flex; }
.f3-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--f3-surface-overlay);
  color: var(--f3-text-primary);
  border: 1px solid var(--f3-border-default);
  border-radius: var(--f3-radius-sm);
  box-shadow: var(--f3-shadow-md);
  padding: var(--f3-space-2) 10px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--f3-dur-fast) var(--f3-ease);
}
.f3-tooltip-target.f3-tooltip--visible .f3-tooltip { opacity: 1; visibility: visible; }

/* Modal */
.f3-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(43, 27, 21, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--f3-space-5);
}
.f3-modal-scrim.f3-modal-scrim--open { display: flex; }
.f3-modal {
  background: var(--f3-surface-raised);
  border-radius: var(--f3-radius-lg);
  box-shadow: var(--f3-shadow-lg);
  max-width: 520px;
  width: 100%;
  padding: var(--f3-space-5);
}
.f3-modal--form { max-width: 720px; }
.f3-modal__actions { display: flex; justify-content: flex-end; gap: var(--f3-space-3); margin-top: var(--f3-space-5); }

/* Toast */
.f3-toast-region { position: fixed; bottom: var(--f3-space-5); right: var(--f3-space-5); display: flex; flex-direction: column; gap: var(--f3-space-3); z-index: 200; }
.f3-toast {
  background: var(--f3-surface-overlay);
  border-radius: var(--f3-radius-md);
  box-shadow: var(--f3-shadow-md);
  padding: var(--f3-space-4);
  padding-left: 12px;
  border-left: 4px solid var(--f3-text-secondary);
  min-width: 280px;
  max-width: 360px;
  color: var(--f3-text-primary);
  font-size: 13px;
}
.f3-toast--success { border-left-color: var(--f3-success); }
.f3-toast--warning { border-left-color: var(--f3-warning); }
.f3-toast--danger { border-left-color: var(--f3-danger); }
.f3-toast--info { border-left-color: var(--f3-info); }

/* Progress bar */
.f3-progress { height: 4px; border-radius: var(--f3-radius-pill); background: var(--f3-surface-sunken); overflow: hidden; position: relative; }
.f3-progress__fill { height: 100%; background: var(--f3-accent-fill); border-radius: var(--f3-radius-pill); }
.f3-progress--indeterminate .f3-progress__fill { position: absolute; width: 30%; animation: f3-progress-indeterminate 1.4s linear infinite; }
@keyframes f3-progress-indeterminate {
  0% { left: -30%; }
  100% { left: 100%; }
}

/* Table.
   Wide tables (the downloads version history carries a 64-char SHA-256)
   cannot shrink below their content width, which pushed the whole page
   into horizontal scroll at 360px. Wrapping in .f3-table-wrap keeps the
   overflow inside the card: the table scrolls, the page never does.
   -webkit-overflow-scrolling keeps momentum scrolling on iOS Safari. */
.f3-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.f3-table { width: 100%; border-collapse: collapse; }
.f3-table thead th {
  background: var(--f3-surface-sunken);
  font-family: var(--f3-font-interface);
  font-weight: 600;
  font-size: 13px;
  color: var(--f3-text-secondary);
  text-align: left;
  padding: var(--f3-space-3);
}
.f3-table tbody td { background: var(--f3-surface-raised); padding: var(--f3-space-3); border-bottom: 1px solid var(--f3-border-default); font-size: 13px; color: var(--f3-text-primary); }
.f3-table tbody tr:hover td { background: var(--f3-surface-panel); }
.f3-table tbody tr[aria-selected="true"] td { background: var(--f3-accent-tint); }
.f3-table td.f3-table__num,
.f3-table th.f3-table__num { text-align: right; }

/* Link */
.f3-link { color: var(--f3-accent-text); text-decoration: none; }
.f3-link:hover { text-decoration: underline; }
.f3-link:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.web-body .f3-link,
.f3-link--body { text-decoration: underline; }

/* Empty state */
.f3-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--f3-space-3); padding: var(--f3-space-8) var(--f3-space-5); }
.f3-empty-state__icon { width: 32px; height: 32px; color: var(--f3-text-muted); }

/* Custom scrollbar (Windows/macOS parity) */
.f3-scroll { scrollbar-width: thin; scrollbar-color: var(--f3-border-strong) transparent; }
.f3-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.f3-scroll::-webkit-scrollbar-track { background: transparent; }
.f3-scroll::-webkit-scrollbar-thumb { background: var(--f3-border-strong); border-radius: var(--f3-radius-pill); }
.f3-scroll::-webkit-scrollbar-thumb:hover { background: var(--f3-text-muted); }

/* ============ Header / footer partials (design doc 9.1) ============ */
.f3-header {
  position: fixed;
  /* 0 unless the founder-offer strip is showing above it, in which case
     pricing-init.js publishes that strip's measured height here - see
     .f3-offer-banner in marketing.css. */
  top: var(--f3-offer-banner-h, 0px); left: 0; right: 0;
  height: 64px;
  padding: 0 var(--f3-space-6);
  background: transparent;
  box-shadow: none;
  z-index: 60;
  transition: background-color var(--f3-dur-base) var(--f3-ease), box-shadow var(--f3-dur-base) var(--f3-ease);
}
.f3-header--raised { background: var(--f3-surface-raised); box-shadow: var(--f3-shadow-sm); }
/* Same two-layer recipe as the footer immediately below (outer padding,
   then an inner max-width:1440px auto-centred box with no padding of its
   own) rather than .f3-section-inner's single-layer one (max-width AND
   padding on the same element) -- with the same var(--f3-space-6) outer
   gutter both already used, this is what makes the header's content and
   the footer's content land at the exact same inset from the viewport
   edge instead of merely close. Before this the header had no inner
   layer at all: its content hugged the true edge at 32px while the
   footer, capped at 1440px and centred, sat inset far more on anything
   wider than ~1504px. */
.f3-header__inner {
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.f3-header__logo { display: flex; align-items: center; text-decoration: none; }
.f3-header__logo img { height: 28px; width: auto; }
.f3-mobile-nav__wordmark { height: 28px; width: auto; }
.f3-header__nav-wrap { display: flex; }
.f3-header__nav { display: flex; align-items: center; gap: var(--f3-space-5); list-style: none; }
.f3-header__nav a { font-family: var(--f3-font-interface); font-weight: 500; font-size: 15px; color: var(--f3-chocolate-800); text-decoration: none; }
.f3-header__nav a[aria-current="page"] { color: var(--f3-accent-text); font-weight: 600; }
.f3-header__nav [data-active-section="true"] { color: var(--f3-accent-text); font-weight: 600; }
.f3-header__actions { display: flex; align-items: center; gap: var(--f3-space-3); }
/* Reserves room for the longer "Dashboard" label so
   initHeaderSessionSwap() (Plan 14) swapping it in for "Sign in" never
   shifts the header's layout, in either direction. */
.f3-header__signin { min-width: 132px; }

/* Header dropdowns - Features/Use cases mega-menu (Plan 8 §4.2). Modeled
   on the .f3-select interaction (click-outside/Escape/keyboard) but as a
   <nav> disclosure rather than a form control; also opens on hover for
   pointer:fine devices, wired by initHeaderDropdown() in components.js. */
.f3-header__dropdown { position: relative; }
.f3-header__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: var(--f3-font-interface);
  font-weight: 500;
  font-size: 15px;
  color: var(--f3-chocolate-800);
  cursor: pointer;
  padding: var(--f3-space-2) 0;
}
.f3-header__dropdown-chevron { width: 16px; height: 16px; transition: transform var(--f3-dur-fast) var(--f3-ease); }
.f3-header__dropdown--open .f3-header__dropdown-chevron { transform: rotate(180deg); }
.f3-header__dropdown-trigger:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; border-radius: var(--f3-radius-xs); }
.f3-header__dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  z-index: 40;
  background: var(--f3-surface-overlay);
  border-radius: var(--f3-radius-md);
  box-shadow: var(--f3-shadow-md);
  border: 1px solid var(--f3-border-default);
  padding: var(--f3-space-2);
  display: none;
  flex-direction: column;
}
.f3-header__dropdown--open .f3-header__dropdown-menu { display: flex; }
.f3-header__dropdown-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--f3-space-2) var(--f3-space-3);
  border-radius: var(--f3-radius-sm);
  text-decoration: none;
}
.f3-header__dropdown-menu a:hover,
.f3-header__dropdown-menu a:focus-visible { background: var(--f3-surface-panel); }
.f3-header__dropdown-menu a:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: -2px; }
.f3-header__dropdown-menu a strong { font-family: var(--f3-font-interface); font-weight: 600; font-size: 14px; color: var(--f3-text-primary); }
.f3-header__dropdown-menu a span { font-size: 12px; color: var(--f3-text-secondary); }
.f3-header__dropdown-menu a.f3-header__dropdown-all {
  margin-top: var(--f3-space-1);
  padding-top: var(--f3-space-3);
  border-top: 1px solid var(--f3-border-default);
  font-weight: 600;
  font-size: 13px;
  color: var(--f3-accent-text);
}

/* Mobile drawer accordion groups (native <details>, no extra JS). */
.f3-mobile-nav__group > details > summary {
  font-family: var(--f3-font-brand);
  font-weight: 700;
  font-size: 24px;
  color: var(--f3-chocolate-800);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.f3-mobile-nav__group > details > summary::-webkit-details-marker { display: none; }
.f3-mobile-nav__group > details > summary > .f3-icon {
  color: currentColor;
  transition: transform var(--f3-dur-fast) var(--f3-ease);
}
.f3-mobile-nav__group > details[open] > summary > .f3-icon { transform: rotate(180deg); }
.f3-mobile-nav__group > details > summary:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.f3-mobile-nav__group ul { list-style: none; display: flex; flex-direction: column; gap: var(--f3-space-4); margin-top: var(--f3-space-4); padding-left: var(--f3-space-4); }
.f3-mobile-nav__group ul a { font-family: var(--f3-font-interface); font-weight: 500; font-size: 17px; color: var(--f3-chocolate-600); text-decoration: none; }
.f3-mobile-nav__group ul a:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }

@media (max-width: 899px) { .f3-header__dropdown-menu { display: none !important; } }

/* Mobile nav (R1): centre links + Sign in collapse behind a 44x44 hamburger
   below 900px; Download stays visible. Panel is a focus-trapped, full-width
   overlay opened/closed by initMobileNav in components.js. */
.f3-header__hamburger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--f3-chocolate-800);
  border-radius: var(--f3-radius-md);
}
.f3-header__hamburger:hover { background: var(--f3-cream-100); }
.f3-header__hamburger:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.f3-header__hamburger svg { width: 24px; height: 24px; }

@media (max-width: 899px) {
  .f3-header__nav-wrap,
  .f3-header__signin { display: none; }
  .f3-header__hamburger { display: flex; }
}

.f3-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: var(--f3-space-5);
  background: var(--f3-surface-raised);
  box-shadow: var(--f3-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--f3-dur-base) var(--f3-ease),
              transform var(--f3-dur-base) var(--f3-ease),
              visibility 0s linear var(--f3-dur-base);
}
.f3-mobile-nav--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--f3-dur-base) var(--f3-ease),
              transform var(--f3-dur-base) var(--f3-ease),
              visibility 0s linear 0s;
}
.f3-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--f3-space-7); }
.f3-mobile-nav__close {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--f3-chocolate-800);
  border-radius: var(--f3-radius-md);
}
.f3-mobile-nav__close:hover { background: var(--f3-cream-100); }
.f3-mobile-nav__close:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
.f3-mobile-nav__close svg { width: 24px; height: 24px; }
.f3-mobile-nav__links { display: flex; flex-direction: column; gap: var(--f3-space-6); }
.f3-mobile-nav__links a { font-family: var(--f3-font-brand); font-weight: 700; font-size: 24px; color: var(--f3-chocolate-800); text-decoration: none; }
.f3-mobile-nav__links a[aria-current="page"] { color: var(--f3-accent-text); }
.f3-mobile-nav__links [data-active-section="true"] { color: var(--f3-accent-text); }
.f3-mobile-nav__links a:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; }
@media (min-width: 900px) { .f3-mobile-nav { display: none; } }

.f3-footer {
  background: var(--f3-chocolate-800);
  color: var(--f3-cream-50);
  padding: 72px var(--f3-space-6) 52px;
}
.f3-footer a { color: var(--f3-caramel-300); text-decoration: none; }
.f3-footer a:hover { text-decoration: underline; }
.f3-footer a:focus-visible { outline: 2px solid var(--f3-focus-ring); outline-offset: 2px; border-radius: var(--f3-radius-xs); }

/* Brand on the left, link columns to its right. The brand column is
   fixed at BRAND_W so the wordmark can be sized to exactly the width of
   the tagline beneath it (see the img rule below). */
.f3-footer__top {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--f3-space-7);
}
@media (min-width: 1024px) {
  .f3-footer__top { grid-template-columns: 220px 1fr; gap: var(--f3-space-8); }
}
/* Keep the brand block bounded so font and zoom differences cannot push
   its copy into the adjacent navigation columns. */
.f3-footer__brand {
  min-width: 0;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--f3-space-1);
}
.f3-footer__brand p {
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* Wordmark fills the brand column, so it lines up with the tagline
   below it. width/height stay on the <img> at the file's true 256x60
   so the aspect ratio is reserved before the image loads (no CLS). */
.f3-footer__brand img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--f3-space-3);
}
.f3-footer__brand p { color: var(--f3-cream-100); }
.f3-footer__social { display: flex; flex-direction: column; gap: var(--f3-space-2); margin-top: var(--f3-space-4); }
.f3-footer__social .web-label { color: var(--f3-cream-50); }
.f3-footer__social-links { display: flex; flex-wrap: wrap; gap: var(--f3-space-2); }
.f3-footer__social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--f3-caramel-300);
  border: 1px solid rgba(250, 243, 232, 0.25);
  border-radius: var(--f3-radius-md);
}
.f3-footer__social-links a:hover { color: var(--f3-cream-50); background: rgba(250, 243, 232, 0.08); text-decoration: none; }

/* Columns pack left at their own content width instead of stretching to
   equal fractions of the remaining space (claude.ai/login's footer is
   the reference this was matched to). The previous grid-template-
   columns: repeat(N, 1fr) forced "Compare" (5 short links) to the same
   width as "Features" (6 longer ones), leaving a wide dead gap next to
   the short columns that read as "spread equidistantly" rather than
   deliberately laid out -- this holds at any viewport, including very
   wide ones, since flex content-sizing never stretches a column wider
   than its own longest link regardless of how much free space is left
   in the row.
   As a grid item in .f3-footer__top's own 220px/1fr split (below), this
   flex container already stretches to fill that whole 1fr cell by
   default -- justify-content:flex-end (added at the 1024px breakpoint
   where that side-by-side split actually applies, see below) packs the
   columns against the cell's own right edge instead of its left, so the
   nav block sits flush with the footer's right boundary the way
   claude.ai's does, with the brand block anchoring the left and a
   flexible gap between that grows with viewport width. Left as the
   default (flex-start) below 1024px, where .f3-footer__top stacks brand
   above nav instead of beside it -- right-packing a full-width stacked
   block would just strand it against an empty left margin. */
.f3-footer__grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--f3-space-8);
  row-gap: var(--f3-space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .f3-footer__grid { justify-content: flex-end; }
}
.f3-footer__col { display: flex; flex-direction: column; gap: var(--f3-space-6); flex: 0 0 auto; min-width: 0; }
/* Below the point where two content-sized columns might or might not
   both fit per row (a wrap point that depends on which columns happen
   to be short that page), force one full-width column per row instead
   -- a footer that sometimes shows two columns and sometimes one,
   depending on link length, reads as unplanned rather than responsive. */
@media (max-width: 639px) {
  .f3-footer__grid { flex-direction: column; }
  .f3-footer__col { width: 100%; }
}
.f3-footer__group { display: flex; flex-direction: column; gap: var(--f3-space-2); }
.f3-footer__group .web-label { color: var(--f3-cream-50); margin-bottom: var(--f3-space-1); }
.f3-footer__group a { font-size: 14px; line-height: 20px; }

/* Bottom bar: copyright left, legal links right, on one rule-separated
   row that wraps to two lines on narrow screens. */
.f3-footer__bar {
  max-width: 1440px;
  margin: var(--f3-space-7) auto 0;
  padding-top: var(--f3-space-5);
  border-top: 1px solid rgba(250, 243, 232, 0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--f3-space-3) var(--f3-space-5);
}
.f3-footer__bar-links { display: flex; flex-wrap: wrap; align-items: center; list-style: none; }
.f3-footer__bar-links li + li {
  margin-left: var(--f3-space-4);
  padding-left: var(--f3-space-4);
  border-left: 1px solid rgba(250, 243, 232, 0.25);
}
.f3-footer__bar-links a,
.f3-footer__bar-links button,
.f3-footer__legal { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.f3-footer__bar-links button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--f3-caramel-300);
  line-height: inherit;
}
.f3-footer__bar-links button:hover { color: var(--f3-cream-50); text-decoration: underline; }
.f3-footer__legal { color: var(--f3-cream-100); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .f3-icon--spin { animation: none; }
  .f3-header__dropdown-chevron,
  .f3-mobile-nav__group > details > summary > .f3-icon { transition: none; }
  .f3-card--web,
  .f3-card--web::before { transition: none; }
  .f3-card--web:hover,
  .f3-card--web:focus-within,
  .f3-card--web:active { transform: none; }
}


/* ============================================================
   Use-case card (PLAN-11 §3.4) - the single card component used
   on /use-cases/, the home-page strip and the features-page strip.
   Deliberately NOT the features-page reveal card: there the caption
   is hidden and revealed on hover; here the text is always visible
   and only the image responds ("the image highlights on hover").
   Stretched-link pattern (not a wrapping <a>) so there is exactly
   one tab stop per card and the accessible name is the title alone.

   Dormant modes (build now, do not enable - PLAN-11 §3.9):
   1. Category grouping: wrap cards in <div class="f3-uc-group"> with
      an <h3> band heading inside a grid whose section carries
      data-mode="grouped" instead of "flat". Switch on at 10+ pages.
   2. Sub-links: a `.f3-uc-card__sublinks` row below the tags,
      position:relative; z-index:2 so it sits above the stretched
      link and stays independently clickable. Ship no markup yet.
   ============================================================ */
.f3-uc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--f3-space-4);
  grid-auto-rows: 1fr;
  margin-top: var(--f3-space-6);
}
@media (min-width: 640px) { .f3-uc-grid { grid-template-columns: repeat(2, 1fr); gap: var(--f3-space-5); } }
@media (min-width: 1024px) { .f3-uc-grid { grid-template-columns: repeat(3, 1fr); } }

.f3-uc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--f3-surface-raised);
  border: 1px solid var(--f3-border-default);
  border-radius: var(--f3-radius-md);
  box-shadow: var(--f3-shadow-sm);
  transition: box-shadow var(--f3-dur-slow) ease-out, border-color var(--f3-dur-slow) ease-out, transform var(--f3-dur-slow) ease-out;
}
.f3-uc-card:has(:hover),
.f3-uc-card:has(:focus-visible) {
  box-shadow: var(--f3-shadow-lg);
  border-color: var(--f3-border-strong);
  transform: translateY(-4px);
}
.f3-uc-card:has(:active) { box-shadow: var(--f3-shadow-sm); transform: translateY(-1px); }
.f3-uc-card:has(:focus-visible) { outline: 2px solid var(--f3-caramel-700); outline-offset: 3px; }

.f3-uc-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--f3-radius-md) var(--f3-radius-md) 0 0;
  background: var(--f3-surface-sunken);
}
.f3-uc-card__media img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  padding: var(--f3-space-3);
  transform: scale(1);
  filter: saturate(.94) brightness(.97);
  transition: transform 620ms cubic-bezier(.2,.6,.2,1), filter 260ms ease-out;
}
.f3-uc-card:has(:hover) .f3-uc-card__media img,
.f3-uc-card:has(:focus-visible) .f3-uc-card__media img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.f3-uc-card:has(:active) .f3-uc-card__media img { transform: scale(1.03); }
.f3-uc-card__wash {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--f3-caramel-300) 55%, transparent), transparent 70%);
  transition: opacity 260ms ease-out;
}
.f3-uc-card:has(:hover) .f3-uc-card__wash,
.f3-uc-card:has(:focus-visible) .f3-uc-card__wash { opacity: 1; }

.f3-uc-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--f3-space-5); }
.f3-uc-card__title {
  font-family: var(--f3-font-brand); font-weight: 600; font-size: 1.1875rem; line-height: 1.3;
  margin: 0 0 var(--f3-space-2);
}
.f3-uc-card__link {
  color: var(--f3-text-primary); text-decoration: none;
  transition: color 260ms ease-out;
}
.f3-uc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.f3-uc-card__link:focus-visible { outline: none; }
.f3-uc-card:has(:hover) .f3-uc-card__link,
.f3-uc-card:has(:focus-visible) .f3-uc-card__link { color: var(--f3-caramel-800); }
.f3-uc-card__desc {
  font-family: var(--f3-font-interface); font-weight: 400; font-size: 0.9375rem; line-height: 1.55;
  color: var(--f3-text-secondary); margin: 0 0 var(--f3-space-4);
}
.f3-uc-card__tags {
  display: flex; flex-wrap: wrap; gap: var(--f3-space-2);
  list-style: none; margin: auto 0 0; padding: 0;
}
.f3-uc-card__tags li {
  font-family: var(--f3-font-interface); font-weight: 500; font-size: 0.75rem;
  color: var(--f3-text-muted); border: 1px solid var(--f3-border-default);
  border-radius: var(--f3-radius-pill); padding: 3px var(--f3-space-3);
}
.f3-uc-card__cue {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--f3-space-3);
  font-family: var(--f3-font-interface); font-weight: 600; font-size: 14px; color: var(--f3-caramel-800);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.f3-uc-card__cue svg { width: 16px; height: 16px; }
.f3-uc-card:has(:hover) .f3-uc-card__cue,
.f3-uc-card:has(:focus-visible) .f3-uc-card__cue { opacity: 1; transform: translateX(0); }

/* Sub-links (dormant - §3.9.2): ship above the stretched-link overlay
   the day a card needs them. */
.f3-uc-card__sublinks { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--f3-space-2); margin-top: var(--f3-space-3); }

@media (hover: none) {
  .f3-uc-card__media img { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .f3-uc-card,
  .f3-uc-card__media img,
  .f3-uc-card__cue { transition-duration: 1ms !important; }
  .f3-uc-card:has(:hover),
  .f3-uc-card:has(:focus-visible),
  .f3-uc-card:has(:active) { transform: none; }
  .f3-uc-card:has(:hover) .f3-uc-card__media img,
  .f3-uc-card:has(:focus-visible) .f3-uc-card__media img,
  .f3-uc-card:has(:active) .f3-uc-card__media img { transform: none; }
}

/* Grouped mode (dormant - §3.9.1): document-only until 10+ use-case pages exist. */
.f3-uc-group + .f3-uc-group { margin-top: var(--f3-space-7); }
.f3-uc-group__heading { margin-bottom: var(--f3-space-4); }