/* ==========================================================================
   ForemanCalc — components.css
   Load after base.css. Naming: fc-block__element--modifier.
   States use ARIA attributes where they exist (aria-pressed, aria-expanded,
   aria-current, aria-invalid, aria-disabled) so JS only toggles attributes.
   ========================================================================== */


/* ==========================================================================
   1. Skip link and notice bar
   ========================================================================== */
.fc-skip {
  position: absolute;
  left: -9999px;
  top: var(--fc-s-2);
  z-index: var(--fc-z-skip);
  display: flex;
  align-items: center;
  min-height: var(--fc-tap);
  padding: 0 var(--fc-s-4);
  background: var(--fc-surface);
  border: 1px solid var(--fc-text);
  border-radius: var(--fc-radius-control);
  color: var(--fc-text);
}
.fc-skip:focus { left: var(--fc-s-4); }

.fc-notice {
  padding: var(--fc-s-2) var(--fc-page-x);
  background: var(--fc-text);
  color: var(--fc-text-inverse);
  font-size: var(--fc-fs-13);
  line-height: var(--fc-lh-body);
  text-align: center;
}


/* ==========================================================================
   2. Header, desktop nav, mega menu, mobile menu
   ========================================================================== */
.fc-header {
  position: relative;
  z-index: var(--fc-z-header);
  background: var(--fc-surface);
  border-bottom: 1px solid var(--fc-border);
}
.fc-header__inner {
  display: flex;
  align-items: center;
  gap: var(--fc-s-4);
  min-height: var(--fc-header-h);
}

/* Logo */
.fc-logo {
  display: flex;
  align-items: center;
  gap: var(--fc-s-2);
  flex: none;
  min-height: var(--fc-tap);
  color: var(--fc-text);
  text-decoration: none;
}
.fc-logo:hover { color: var(--fc-text); }
.fc-logo__mark { width: 32px; height: 32px; }
.fc-logo__word { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-22); line-height: var(--fc-lh-head); }
.fc-logo__word span { color: var(--fc-accent-text); }

/* Desktop nav (>=1024) */
.fc-nav { display: flex; align-items: center; gap: var(--fc-s-2); flex: none; }
.fc-nav__link {
  display: flex;
  align-items: center;
  gap: var(--fc-s-1);
  min-height: var(--fc-tap);
  padding: 0 var(--fc-s-3);
  border-radius: var(--fc-radius-control);
  color: var(--fc-text);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-medium);
  text-decoration: none;
}
.fc-nav__link:hover { background: var(--fc-bg); color: var(--fc-text); }
.fc-nav__link[aria-current="page"],
.fc-nav__link--current { box-shadow: inset 0 -2px 0 var(--fc-accent); }
.fc-nav__link .fc-icon { width: 16px; height: 16px; transition: transform 0.15s ease; }
.fc-nav__link[aria-expanded="true"] .fc-icon { transform: rotate(180deg); }

.fc-header__search { flex: 1; min-width: 0; max-width: 320px; margin-left: auto; }
.fc-header__actions { display: flex; align-items: center; gap: var(--fc-s-2); margin-left: auto; } /* mobile */
.fc-header__browse { flex: none; white-space: nowrap; }

/* Project button + count badge */
.fc-project-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-s-2);
  flex: none;
  min-width: var(--fc-tap);
  min-height: var(--fc-tap);
  padding: 0 var(--fc-s-3);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-control);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-medium);
}
.fc-project-btn:hover { border-color: var(--fc-text); }
@media (max-width: 1023.98px) { .fc-project-btn { gap: var(--fc-s-1); padding: 0 var(--fc-s-2); } }
.fc-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--fc-s-1);
  border-radius: 12px;
  background: var(--fc-text);
  color: var(--fc-text-inverse);
  font-size: var(--fc-fs-12);
  font-weight: var(--fc-fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* Square icon button (menu toggle, drawer close, remove item) */
.fc-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--fc-tap);
  height: var(--fc-tap);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-control);
  color: var(--fc-text);
}
.fc-icon-btn:hover { border-color: var(--fc-text); }
.fc-icon-btn--danger:hover { border-color: var(--fc-error); color: var(--fc-error); }
/* Menu toggle swaps icon by state */
.fc-menu-toggle .fc-menu-toggle__close { display: none; }
.fc-menu-toggle[aria-expanded="true"] .fc-menu-toggle__open { display: none; }
.fc-menu-toggle[aria-expanded="true"] .fc-menu-toggle__close { display: block; }

/* Mega menu (desktop "Calculators" dropdown) */
.fc-megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--fc-surface);
  border-top: 1px solid var(--fc-border);
  border-bottom: 1px solid var(--fc-border);
  box-shadow: var(--fc-shadow-menu);
}
.fc-megamenu__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--fc-s-6);
  padding-top: var(--fc-s-6);
  padding-bottom: var(--fc-s-6);
}
.fc-megamenu__col { min-width: 0; }
.fc-megamenu__heading {
  display: flex;
  align-items: center;
  gap: var(--fc-s-2);
  min-height: var(--fc-tap);
  color: var(--fc-text);
  font-family: var(--fc-font-head);
  font-weight: var(--fc-fw-semibold);
  font-size: var(--fc-fs-18);
  line-height: var(--fc-lh-head);
  text-decoration: none;
}
.fc-megamenu__heading:hover { color: var(--fc-accent-text); }
.fc-megamenu__list { display: flex; flex-direction: column; margin-top: var(--fc-s-1); border-top: 1px solid var(--fc-border); }
.fc-megamenu__link {
  display: flex;
  align-items: center;
  min-height: var(--fc-tap);
  color: var(--fc-text);
  font-size: var(--fc-fs-15);
  line-height: var(--fc-lh-ui);
  text-decoration: none;
}
.fc-megamenu__link:hover { color: var(--fc-accent-text); text-decoration: underline; }
.fc-megamenu__all {
  display: flex;
  align-items: center;
  min-height: var(--fc-tap);
  color: var(--fc-accent-text);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-semibold);
}
@media (max-width: 1023.98px) { .fc-megamenu { display: none !important; } }

/* Mobile menu (<1024): opens in flow below the header */
.fc-mobile-menu { border-top: 1px solid var(--fc-border); background: var(--fc-surface); }
.fc-mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--fc-s-4);
  padding-top: var(--fc-s-4);
  padding-bottom: var(--fc-s-6);
}
.fc-mobile-menu__list { display: flex; flex-direction: column; margin-top: var(--fc-s-1); }
.fc-mobile-menu__list--nav { margin-top: 0; }
.fc-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-s-3);
  min-height: var(--fc-tap-lg);
  border-bottom: 1px solid var(--fc-border);
  color: var(--fc-text);
  font-weight: var(--fc-fw-medium);
  text-decoration: none;
}
.fc-mobile-menu__link:hover { color: var(--fc-accent-text); }
.fc-mobile-menu__count { font-size: var(--fc-fs-14); font-weight: var(--fc-fw-regular); color: var(--fc-text-muted); font-variant-numeric: tabular-nums; }
.fc-mobile-menu__label { font-size: var(--fc-fs-13); font-weight: var(--fc-fw-semibold); color: var(--fc-text-muted); }
@media (min-width: 1024px) { .fc-mobile-menu { display: none !important; } }


/* ==========================================================================
   3. Search box
   ========================================================================== */
.fc-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.fc-search__icon { position: absolute; left: var(--fc-s-3); width: 20px; height: 20px; color: var(--fc-text-muted); pointer-events: none; }
.fc-search__input {
  width: 100%;
  height: var(--fc-input-h);
  padding: 0 var(--fc-s-3) 0 40px;
  background: var(--fc-surface);
  border: 1px solid var(--fc-border-field);
  border-radius: var(--fc-radius-control);
  font-size: var(--fc-fs-16);
}
.fc-search__input:focus { border-color: var(--fc-text); }
.fc-search__input::-webkit-search-cancel-button { cursor: pointer; }
/* Header variant: 44px, tinted, "/" shortcut hint */
.fc-search--header .fc-search__input { height: var(--fc-tap); padding-right: var(--fc-s-12); background: var(--fc-bg); }
.fc-search--header .fc-search__input:focus { background: var(--fc-surface); }
.fc-search--tinted .fc-search__input { background: var(--fc-bg); }
.fc-search--tinted .fc-search__input:focus { background: var(--fc-surface); }
.fc-search__kbd {
  position: absolute;
  right: var(--fc-s-3);
  padding: 0 var(--fc-s-2);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-kbd);
  color: var(--fc-text-muted);
  font-family: inherit;
  font-size: var(--fc-fs-12);
  line-height: var(--fc-lh-body);
  pointer-events: none;
}
/* Hero variant: 56px */
.fc-search--lg .fc-search__icon { left: var(--fc-s-4); }
.fc-search--lg .fc-search__input { height: 56px; padding: 0 var(--fc-s-4) 0 var(--fc-s-12); }

/* Search form row: field + submit */
.fc-search-form { display: flex; gap: var(--fc-s-2); }
.fc-search-form--hero { max-width: 560px; }
.fc-search-form--page { max-width: 640px; }


/* ==========================================================================
   4. Chips (filter buttons and link pills)
   ========================================================================== */
.fc-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fc-s-2); }
.fc-chip-row__label { margin-right: var(--fc-s-1); font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-chip {
  display: flex;
  align-items: center;
  gap: var(--fc-s-2);
  flex: none;
  min-height: var(--fc-tap);
  padding: 0 var(--fc-s-4);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-pill);
  color: var(--fc-text);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-medium);
  white-space: nowrap;
  text-decoration: none;
}
.fc-chip:hover { border-color: var(--fc-text); color: var(--fc-text); }
.fc-chip__count { font-size: var(--fc-fs-13); color: var(--fc-text-muted); font-variant-numeric: tabular-nums; }
.fc-chip[aria-pressed="true"],
.fc-chip[aria-current="page"] { background: var(--fc-text); border-color: var(--fc-text); color: var(--fc-text-inverse); }
.fc-chip[aria-pressed="true"] .fc-chip__count,
.fc-chip[aria-current="page"] .fc-chip__count { color: var(--fc-text-inverse); }


/* ==========================================================================
   5. Buttons
   ========================================================================== */
.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-s-2);
  min-height: var(--fc-tap);
  padding: 0 var(--fc-s-4);
  border: 1px solid transparent;
  border-radius: var(--fc-radius-control);
  font-size: var(--fc-fs-16);
  font-weight: var(--fc-fw-semibold);
  line-height: var(--fc-lh-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.fc-btn--lg { min-height: var(--fc-tap-lg); }
.fc-btn--xl { min-height: 56px; }
.fc-btn--wide { padding: 0 var(--fc-s-6); }
.fc-btn--sm-text { font-size: var(--fc-fs-15); }
.fc-btn--block { display: flex; width: 100%; }

.fc-btn--primary { background: var(--fc-accent); color: var(--fc-text); }
.fc-btn--primary:hover { background: var(--fc-accent-hover); color: var(--fc-text); }
.fc-btn--primary:active { background: var(--fc-accent-active); }

.fc-btn--secondary { background: var(--fc-surface); border-color: var(--fc-border); color: var(--fc-text); }
.fc-btn--secondary:hover { border-color: var(--fc-text); color: var(--fc-text); }
.fc-btn--secondary:active { background: var(--fc-bg); }

.fc-btn--dark { background: var(--fc-text); color: var(--fc-text-inverse); }
.fc-btn--dark:hover { background: var(--fc-charcoal-hover); color: var(--fc-text-inverse); }

.fc-btn--ghost { min-height: var(--fc-tap); padding: 0; color: var(--fc-accent-text); text-decoration: underline; }

.fc-btn:disabled,
.fc-btn[aria-disabled="true"] {
  background: var(--fc-bg);
  border-color: var(--fc-border);
  color: var(--fc-text-muted);
  cursor: not-allowed;
}
.fc-btn:focus-visible { outline: var(--fc-focus-width) solid var(--fc-focus-color); outline-offset: var(--fc-focus-offset); }

.fc-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fc-s-2); }


/* ==========================================================================
   6. Form fields, unit toggle, checkbox
   ========================================================================== */
.fc-field { display: flex; flex-direction: column; gap: var(--fc-s-label); min-width: 0; }
.fc-field__label { font-size: var(--fc-fs-15); font-weight: var(--fc-fw-semibold); line-height: var(--fc-lh-ui); }
.fc-field__label--sm { font-size: var(--fc-fs-14); }
.fc-field__optional { font-weight: var(--fc-fw-regular); color: var(--fc-text-muted); }
.fc-field__row { display: flex; gap: var(--fc-s-2); min-width: 0; }
.fc-field__suffix-wrap { position: relative; display: flex; align-items: center; }
.fc-field__suffix { position: absolute; right: var(--fc-s-3); font-size: var(--fc-fs-14); color: var(--fc-text-muted); pointer-events: none; }
.fc-field__help { font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-field__error { display: flex; align-items: flex-start; gap: var(--fc-s-2); font-size: var(--fc-fs-14); color: var(--fc-error); }
.fc-field__error .fc-icon { width: 16px; height: 16px; margin-top: var(--fc-s-1); }

.fc-input,
.fc-select,
.fc-textarea {
  width: 100%;
  height: var(--fc-input-h);
  padding: 0 var(--fc-s-3);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border-field);
  border-radius: var(--fc-radius-control);
  font-size: var(--fc-fs-16);
  font-variant-numeric: tabular-nums;
}
.fc-input--suffix { padding-right: 40px; }
.fc-input--sm { height: var(--fc-tap); width: 128px; }
.fc-field__row .fc-input { flex: 1; min-width: 0; width: auto; }
.fc-select { padding: 0 var(--fc-s-2); }
.fc-select--unit { flex: none; width: 88px; }
.fc-textarea { height: auto; min-height: 160px; padding: var(--fc-s-3); line-height: var(--fc-lh-body); resize: vertical; }
.fc-input:focus, .fc-select:focus, .fc-textarea:focus { border-color: var(--fc-text); }
/* Error state */
.fc-input[aria-invalid="true"],
.fc-select[aria-invalid="true"],
.fc-textarea[aria-invalid="true"] { border-color: var(--fc-error); background: var(--fc-error-tint); }
.fc-field__suffix-wrap .fc-input[aria-invalid="true"] { background: var(--fc-surface); }

/* Checkbox row */
.fc-check { display: flex; align-items: center; gap: var(--fc-s-3); min-height: var(--fc-tap); font-size: var(--fc-fs-15); cursor: pointer; }
.fc-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--fc-text); }

/* Unit toggle (segmented control) */
.fc-segmented {
  display: flex;
  gap: var(--fc-s-2);
  padding: var(--fc-s-1);
  background: var(--fc-bg);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-control);
}
.fc-segmented__btn {
  min-height: var(--fc-tap);
  padding: 0 var(--fc-s-3);
  border-radius: var(--fc-radius-segment);
  background: transparent;
  color: var(--fc-text);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-semibold);
}
.fc-segmented__btn:hover { background: var(--fc-surface); }
.fc-segmented__btn[aria-pressed="true"] { background: var(--fc-text); color: var(--fc-text-inverse); }


/* ==========================================================================
   7. Tags and icon tiles
   ========================================================================== */
.fc-tag {
  align-self: flex-start;
  padding: 0 var(--fc-s-2);
  background: var(--fc-bg);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-pill);
  color: var(--fc-text-muted);
  font-size: var(--fc-fs-13);
  line-height: var(--fc-lh-body);
  white-space: nowrap;
}
.fc-tag--strong { color: var(--fc-text); font-weight: var(--fc-fw-semibold); }
.fc-tag--dark { background: var(--fc-text); border-color: var(--fc-text); color: var(--fc-text-inverse); font-weight: var(--fc-fw-semibold); }

.fc-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--fc-radius-control);
  background: var(--fc-accent-tint);
  color: var(--fc-accent-text);
}
.fc-icon-tile--sm { width: 32px; height: 32px; border-radius: var(--fc-radius-segment); }
.fc-icon-tile--sm .fc-icon { width: 18px; height: 18px; }
.fc-icon-tile--neutral { background: var(--fc-bg); border: 1px solid var(--fc-border); color: var(--fc-text); }
.fc-icon-tile--accent { background: var(--fc-accent); color: var(--fc-text); }


/* ==========================================================================
   8. Result card (tool page) and quick calc (home)
   States: .fc-result__state--loaded / --empty / --error. Show one with [hidden].
   ========================================================================== */
.fc-result {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fc-s-4);
  padding: var(--fc-card-pad);
  background: var(--fc-bg);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-control);
}
.fc-result__state { display: flex; flex-direction: column; gap: var(--fc-s-4); }
.fc-result__label { font-size: var(--fc-fs-15); font-weight: var(--fc-fw-semibold); }
.fc-result__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--fc-s-2); margin-top: var(--fc-s-1); }
.fc-result__num {
  min-width: 0;
  font-family: var(--fc-font-head);
  font-weight: var(--fc-fw-semibold);
  font-size: var(--fc-fs-result);
  line-height: var(--fc-lh-result);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.fc-result__sym { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-24); }
.fc-result__waste {
  display: flex;
  align-items: flex-start;
  gap: var(--fc-s-2);
  padding: var(--fc-s-2) var(--fc-s-3);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-control);
  font-size: var(--fc-fs-15);
}
.fc-result__waste .fc-icon { width: 16px; height: 16px; margin-top: var(--fc-s-1); color: var(--fc-success); }
.fc-result__waste span { min-width: 0; overflow-wrap: anywhere; }
.fc-result__waste strong { font-variant-numeric: tabular-nums; }
.fc-result__conversions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fc-s-3); }
.fc-result__conv { min-width: 0; padding: var(--fc-s-3); background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-control); }
.fc-result__conv dt { font-size: var(--fc-fs-13); color: var(--fc-text-muted); }
.fc-result__conv dd { font-size: var(--fc-fs-20); font-weight: var(--fc-fw-semibold); line-height: var(--fc-lh-ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fc-result__formula { padding-top: var(--fc-s-3); border-top: 1px solid var(--fc-border); font-size: var(--fc-fs-14); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fc-result__formula-title { font-weight: var(--fc-fw-semibold); }
.fc-result__actions { display: flex; flex-direction: column; gap: var(--fc-s-2); }
.fc-result__action-row { display: flex; flex-wrap: wrap; gap: var(--fc-s-2); }
.fc-result__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-s-2);
  flex: 1 1 auto;
  min-height: var(--fc-tap);
  padding: 0 var(--fc-s-3);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-control);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-medium);
  white-space: nowrap;
}
.fc-result__action:hover { border-color: var(--fc-text); }
.fc-result__action .fc-icon { width: 18px; height: 18px; }
.fc-result__add { min-height: var(--fc-tap-lg); }
.fc-result__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fc-s-2); font-size: var(--fc-fs-14); color: var(--fc-success-text); }
.fc-result__status a, .fc-result__status button { min-height: var(--fc-tap); color: var(--fc-accent-text); font-weight: var(--fc-fw-semibold); text-decoration: underline; }
/* Empty */
.fc-result__state--empty { gap: var(--fc-s-2); }
.fc-result__dash { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-48); line-height: var(--fc-lh-result); color: var(--fc-text-muted); }
.fc-result__hint { font-size: var(--fc-fs-15); color: var(--fc-text-muted); }
/* Error */
.fc-result__state--error { flex-direction: row; align-items: flex-start; gap: var(--fc-s-2); color: var(--fc-error); font-size: var(--fc-fs-15); }
.fc-result__state--error .fc-icon { width: 16px; height: 16px; margin-top: var(--fc-s-1); }

/* Home quick calc */
.fc-quick {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fc-s-4);
  padding: var(--fc-card-pad);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-card);
}
.fc-quick__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fc-s-2) var(--fc-s-3); }
.fc-quick__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fc-s-3); }
@media (min-width: 360px) { .fc-quick__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fc-quick__result { display: flex; flex-direction: column; gap: var(--fc-s-1); min-width: 0; padding: var(--fc-s-4); background: var(--fc-bg); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-control); }
.fc-quick__label { font-size: var(--fc-fs-14); font-weight: var(--fc-fw-semibold); color: var(--fc-text-muted); }
.fc-quick__num { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-quick-result); line-height: var(--fc-lh-result); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fc-quick__sub { font-size: var(--fc-fs-14); color: var(--fc-text-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fc-quick__link { align-self: flex-start; }


/* ==========================================================================
   9. Cards: tool card, category card, how-it-works item, guide card
   The whole card is one link.
   ========================================================================== */
.fc-card-link {
  display: flex;
  flex-direction: column;
  gap: var(--fc-s-3);
  min-width: 0;
  padding: var(--fc-card-pad);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-card);
  color: var(--fc-text);
  text-decoration: none;
}
.fc-card-link:hover { border-color: var(--fc-text); color: var(--fc-text); }

.fc-tool-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--fc-s-3); }
.fc-tool-card__title { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-21); line-height: var(--fc-lh-head); overflow-wrap: anywhere; }
.fc-tool-card__desc { font-size: var(--fc-fs-15); color: var(--fc-text-muted); }
.fc-tool-card__cta { margin-top: auto; display: flex; align-items: center; gap: var(--fc-s-1); font-size: var(--fc-fs-15); font-weight: var(--fc-fw-semibold); color: var(--fc-accent-text); }
.fc-tool-card__cta .fc-icon { width: 16px; height: 16px; }

.fc-cat-card__title { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-20); line-height: var(--fc-lh-head); }
.fc-cat-card__desc { font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-cat-card__count { margin-top: auto; font-size: var(--fc-fs-14); font-weight: var(--fc-fw-semibold); color: var(--fc-accent-text); font-variant-numeric: tabular-nums; }

.fc-guide-card__meta { font-size: var(--fc-fs-13); color: var(--fc-text-muted); }
.fc-guide-card__title { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-20); line-height: var(--fc-lh-head); }
.fc-guide-card__cta { margin-top: auto; font-size: var(--fc-fs-15); font-weight: var(--fc-fw-semibold); color: var(--fc-accent-text); }

.fc-how { display: flex; flex-direction: column; gap: var(--fc-s-3); min-width: 0; }
.fc-how__title { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-20); line-height: var(--fc-lh-head); }
.fc-how__text { max-width: var(--fc-measure); font-size: var(--fc-fs-15); color: var(--fc-text-muted); }

/* Plain surface card (quick answer, formula, contact aside, FAQ aside) */
.fc-card { min-width: 0; padding: var(--fc-card-pad); background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-card); }
.fc-card--stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fc-s-3); }
.fc-card__text { font-size: var(--fc-fs-15); color: var(--fc-text-muted); }


/* ==========================================================================
   10. Post cards (blog archive, related posts) and pagination
   ========================================================================== */
.fc-post-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-card);
  color: var(--fc-text);
  text-decoration: none;
}
.fc-post-card:hover { border-color: var(--fc-text); color: var(--fc-text); }
.fc-post-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--fc-placeholder-fill);
  border-bottom: 1px solid var(--fc-border);
  color: var(--fc-text-muted);
}
.fc-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fc-post-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--fc-s-3); min-width: 0; padding: var(--fc-card-pad); }
.fc-post-card__tags { display: flex; flex-wrap: wrap; gap: var(--fc-s-2); }
.fc-post-card__title { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-21); line-height: var(--fc-lh-head); overflow-wrap: anywhere; }
.fc-post-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 48px; /* 2 x 15px x 1.6 */
  font-size: var(--fc-fs-15);
  line-height: var(--fc-lh-body);
  color: var(--fc-text-muted);
}
.fc-post-card__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-s-1) var(--fc-s-3);
  font-size: var(--fc-fs-13);
  color: var(--fc-text-muted);
}
/* Featured */
.fc-post-card--featured { display: grid; grid-template-columns: minmax(0, 1fr); }
.fc-post-card--featured .fc-post-card__media { border-bottom: 0; }
.fc-post-card--featured .fc-post-card__body { justify-content: center; }
.fc-post-card--featured .fc-post-card__title { font-size: var(--fc-fs-featured); text-wrap: balance; }
.fc-post-card--featured .fc-post-card__excerpt { display: block; max-height: none; max-width: 60ch; font-size: var(--fc-fs-16); }
.fc-post-card--featured .fc-post-card__meta { margin-top: 0; font-size: var(--fc-fs-14); }
@media (min-width: 1024px) {
  .fc-post-card--featured { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .fc-post-card--featured .fc-post-card__media { aspect-ratio: auto; min-height: 320px; }
  .fc-post-card--featured .fc-post-card__body { padding: var(--fc-s-8); }
}

.fc-pagination { margin-top: var(--fc-s-8); }
.fc-pagination__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--fc-s-2); }
.fc-pagination__item { display: flex; }
.fc-pagination__step,
.fc-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-s-1);
  min-width: var(--fc-tap);
  min-height: var(--fc-tap);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-control);
  color: var(--fc-text);
  font-size: var(--fc-fs-15);
  text-decoration: none;
}
.fc-pagination__step { padding: 0 var(--fc-s-3); font-weight: var(--fc-fw-medium); }
.fc-pagination__page { width: var(--fc-tap); font-weight: var(--fc-fw-semibold); font-variant-numeric: tabular-nums; }
.fc-pagination__step:hover,
.fc-pagination__page:hover { border-color: var(--fc-text); color: var(--fc-text); }
.fc-pagination__page[aria-current="page"] { background: var(--fc-text); border-color: var(--fc-text); color: var(--fc-text-inverse); }
.fc-pagination__step[aria-disabled="true"] { background: var(--fc-bg); color: var(--fc-text-muted); }
.fc-pagination__step .fc-icon { width: 16px; height: 16px; }
.fc-pagination__status { display: flex; align-items: center; min-height: var(--fc-tap); padding: 0 var(--fc-s-2); font-size: var(--fc-fs-15); font-variant-numeric: tabular-nums; }
/* <640: icon-only steps, "Page 1 of 4" replaces numbers */
@media (max-width: 639.98px) {
  .fc-pagination__step-label, .fc-pagination__num { display: none; }
}
@media (min-width: 640px) { .fc-pagination__status { display: none; } }


/* ==========================================================================
   11. Accordion (FAQ)
   ========================================================================== */
.fc-accordion { min-width: 0; padding: 0 var(--fc-card-pad); background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-card); }
.fc-accordion__item + .fc-accordion__item { border-top: 1px solid var(--fc-border); }
.fc-accordion__heading { font-size: var(--fc-fs-16); line-height: var(--fc-lh-ui); }
.fc-accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-s-4);
  width: 100%;
  min-height: 56px;
  padding: var(--fc-s-3) 0;
  font-weight: var(--fc-fw-semibold);
  text-align: left;
}
.fc-accordion__btn:hover { color: var(--fc-accent-text); }
.fc-accordion__icon { width: 20px; height: 20px; }
.fc-accordion__btn[aria-expanded="true"] .fc-accordion__icon-v { display: none; }
.fc-accordion__panel { padding: 0 0 var(--fc-s-4); }
.fc-accordion__panel p { max-width: var(--fc-measure); font-size: var(--fc-fs-15); color: var(--fc-text-muted); }


/* ==========================================================================
   12. Breadcrumb
   Full trail >=640; single back link <640 (.fc-breadcrumb--compact).
   On pages with both, add .fc-hide-sm to the full trail.
   ========================================================================== */
.fc-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--fc-s-2); font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-breadcrumb__item { display: flex; align-items: center; gap: var(--fc-s-2); }
.fc-breadcrumb__item[aria-current="page"] { min-height: var(--fc-tap); }
.fc-breadcrumb__link { display: flex; align-items: center; justify-content: center; min-height: var(--fc-tap); min-width: var(--fc-tap); padding: 0 var(--fc-s-1); }
.fc-breadcrumb__back { display: inline-flex; align-items: center; gap: var(--fc-s-1); min-height: var(--fc-tap); font-size: var(--fc-fs-14); }
.fc-breadcrumb__back .fc-icon { width: 16px; height: 16px; }
@media (min-width: 640px) { .fc-breadcrumb--compact { display: none; } }


/* ==========================================================================
   13. Data table + scroll container
   ========================================================================== */
.fc-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-card);
  /* Scrolling shadows: two covers scroll with content, two shades stay put. */
  background:
    linear-gradient(to right, var(--fc-surface) 30%, var(--fc-surface-fade)) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--fc-surface) 30%, var(--fc-surface-fade)) right center / 48px 100% no-repeat local,
    linear-gradient(to right, var(--fc-scroll-shade), rgba(31, 35, 40, 0)) left center / 16px 100% no-repeat scroll,
    linear-gradient(to left, var(--fc-scroll-shade), rgba(31, 35, 40, 0)) right center / 16px 100% no-repeat scroll,
    var(--fc-surface);
}
.fc-table { width: 100%; min-width: 600px; font-size: var(--fc-fs-15); font-variant-numeric: tabular-nums; }
.fc-table__caption { caption-side: top; padding: var(--fc-s-3) var(--fc-s-4) 0; font-weight: var(--fc-fw-semibold); text-align: left; }
.fc-table th, .fc-table td { padding: var(--fc-s-3) var(--fc-s-4); }
.fc-table th { font-weight: var(--fc-fw-semibold); }
.fc-table tbody tr { border-top: 1px solid var(--fc-border); }
.fc-table thead tr { border-bottom: 1px solid var(--fc-border); }
.fc-table-hint { margin-top: var(--fc-s-2); display: flex; align-items: center; gap: var(--fc-s-1); font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-table-hint .fc-icon { width: 16px; height: 16px; }
@media (min-width: 640px) { .fc-table-hint { display: none; } }


/* ==========================================================================
   14. Ad slot (render only when ads are on; height is reserved, no shift)
   ========================================================================== */
.fc-ad-slot {
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fc-s-1);
  padding: var(--fc-s-4);
  text-align: center;
  border: 1px dashed var(--fc-border-strong);
  border-radius: var(--fc-radius-card);
  background: repeating-linear-gradient(135deg, var(--fc-bg) 0 8px, var(--fc-placeholder-fill) 8px 16px);
}
.fc-ad-slot__title { font-size: var(--fc-fs-13); font-weight: var(--fc-fw-semibold); letter-spacing: 0.04em; color: var(--fc-text-muted); }
.fc-ad-slot__meta { font-size: var(--fc-fs-13); color: var(--fc-text-muted); }


/* ==========================================================================
   15. "On this page" TOC
   Desktop: sticky card in the sidebar. Mobile: collapsible card above the body.
   ========================================================================== */
.fc-toc { background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-card); }
.fc-toc--sidebar { padding: var(--fc-card-pad); }
.fc-toc__title { font-size: var(--fc-fs-14); font-weight: var(--fc-fw-semibold); line-height: var(--fc-lh-ui); color: var(--fc-text-muted); }
.fc-toc__list { margin-top: var(--fc-s-2); }
.fc-toc__link {
  display: flex;
  align-items: center;
  gap: var(--fc-s-3);
  min-height: var(--fc-tap);
  padding: var(--fc-s-2) 0;
  border-top: 1px solid var(--fc-border);
  color: var(--fc-text);
  font-size: var(--fc-fs-15);
  line-height: var(--fc-lh-ui);
  text-decoration: none;
}
.fc-toc__link:hover, .fc-toc__link[aria-current="true"] { color: var(--fc-accent-text); }
.fc-toc__link[aria-current="true"] { font-weight: var(--fc-fw-semibold); }
.fc-toc__n { flex: none; width: 16px; font-size: var(--fc-fs-13); color: var(--fc-text-muted); font-variant-numeric: tabular-nums; }
.fc-toc--collapsible { margin-bottom: var(--fc-s-6); padding: 0 var(--fc-card-pad); }
.fc-toc--collapsible .fc-toc__title { font-size: var(--fc-fs-16); color: var(--fc-text); }
.fc-toc__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--fc-s-4); width: 100%; min-height: 56px; font-weight: var(--fc-fw-semibold); text-align: left; }
.fc-toc__toggle[aria-expanded="true"] .fc-accordion__icon-v { display: none; }
.fc-toc--collapsible .fc-toc__list { margin-top: 0; padding-bottom: var(--fc-s-2); }


/* ==========================================================================
   16. Author line, author bio box, avatar
   ========================================================================== */
.fc-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--fc-placeholder-fill);
  border: 1px solid var(--fc-border);
  color: var(--fc-text-muted);
}
.fc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fc-avatar .fc-icon { width: 20px; height: 20px; }
.fc-avatar--lg { width: 96px; height: 96px; }
.fc-avatar--lg .fc-icon { width: 40px; height: 40px; }

.fc-byline { margin-top: var(--fc-s-4); display: flex; align-items: center; gap: var(--fc-s-3); }
.fc-byline__text { min-width: 0; font-size: var(--fc-fs-14); }
.fc-byline__dates { display: flex; flex-wrap: wrap; gap: 0 var(--fc-s-2); color: var(--fc-text-muted); }

.fc-author-bio {
  margin-top: var(--fc-s-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-s-4);
  padding: var(--fc-card-pad);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-card);
}
@media (min-width: 640px) { .fc-author-bio { flex-direction: row; } }
.fc-author-bio__body { min-width: 0; font-size: var(--fc-fs-16); }
.fc-author-bio__name { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-22); line-height: var(--fc-lh-head); }
.fc-author-bio__role { font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-author-bio__text { margin-top: var(--fc-s-2); max-width: 65ch; }


/* ==========================================================================
   17. Share buttons
   ========================================================================== */
.fc-share { margin-top: var(--fc-s-8); padding-top: var(--fc-s-6); border-top: 1px solid var(--fc-border); display: flex; flex-wrap: wrap; align-items: center; gap: var(--fc-s-3) var(--fc-s-4); }
.fc-share__label { font-size: var(--fc-fs-15); font-weight: var(--fc-fw-semibold); }
.fc-share__list { display: flex; flex-wrap: wrap; gap: var(--fc-s-2); }
.fc-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-s-2);
  min-width: var(--fc-tap);
  min-height: var(--fc-tap);
  padding: 0 var(--fc-s-4);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-control);
  color: var(--fc-text);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-medium);
  text-decoration: none;
}
.fc-share__btn:hover { border-color: var(--fc-text); color: var(--fc-text); }
.fc-share__btn .fc-icon { width: 18px; height: 18px; }


/* ==========================================================================
   18. Article pieces: callout, figure, try-the-calculator card, notes, lists
   ========================================================================== */
.fc-callout { margin-top: var(--fc-s-6); display: flex; align-items: flex-start; gap: var(--fc-s-3); max-width: var(--fc-measure); padding: var(--fc-s-4); background: var(--fc-accent-tint); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-card); }
.fc-callout > .fc-icon { width: 20px; height: 20px; margin-top: var(--fc-s-1); color: var(--fc-accent-text); }
.fc-callout__body { min-width: 0; }
.fc-callout__title { font-weight: var(--fc-fw-semibold); }
.fc-callout__text { margin-top: var(--fc-s-1); font-size: var(--fc-fs-16); }

.fc-figure { margin-top: var(--fc-s-6); }
.fc-figure__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fc-placeholder-fill); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-card); color: var(--fc-text-muted); }
.fc-figure__media img { width: 100%; height: 100%; object-fit: cover; }
.fc-figure__caption { margin-top: var(--fc-s-2); font-size: var(--fc-fs-14); color: var(--fc-text-muted); }

.fc-try { margin-top: var(--fc-s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--fc-s-4); padding: var(--fc-card-pad); background: var(--fc-text); border-radius: var(--fc-radius-card); color: var(--fc-text-inverse); }
.fc-try__body { flex: 1 1 240px; min-width: 0; }
.fc-try__eyebrow { font-size: var(--fc-fs-13); font-weight: var(--fc-fw-semibold); }
.fc-try__title { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-22); line-height: var(--fc-lh-head); }
.fc-try__text { margin-top: var(--fc-s-1); font-size: var(--fc-fs-15); }
.fc-try__cta { flex: none; }
.fc-try__cta .fc-icon { width: 16px; height: 16px; }

.fc-note { display: flex; align-items: flex-start; gap: var(--fc-s-3); padding: var(--fc-s-4); background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-card); font-size: var(--fc-fs-15); }
.fc-note .fc-icon { width: 16px; height: 16px; margin-top: var(--fc-s-1); color: var(--fc-warning); }

.fc-steps { display: flex; flex-direction: column; gap: var(--fc-s-3); }
.fc-steps__item { display: flex; align-items: flex-start; gap: var(--fc-s-3); }
.fc-steps__n { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px; background: var(--fc-text); color: var(--fc-text-inverse); font-size: var(--fc-fs-13); font-weight: var(--fc-fw-semibold); }
.fc-steps__text { max-width: var(--fc-measure); }

.fc-example { margin-top: var(--fc-s-3); display: flex; flex-direction: column; gap: var(--fc-s-2); font-variant-numeric: tabular-nums; }
.fc-example__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--fc-s-3); }
.fc-example__n { font-weight: var(--fc-fw-semibold); color: var(--fc-text-muted); }

.fc-formula { display: flex; flex-direction: column; gap: var(--fc-s-2); font-size: var(--fc-fs-17); font-variant-numeric: tabular-nums; }
.fc-formula__note { font-size: var(--fc-fs-15); color: var(--fc-text-muted); }

.fc-icon-list { display: flex; flex-direction: column; gap: var(--fc-s-3); }
.fc-icon-list--tight { gap: var(--fc-s-2); }
.fc-icon-list__item { display: flex; align-items: flex-start; gap: var(--fc-s-3); }
.fc-icon-list__item > .fc-icon { width: 20px; height: 20px; margin-top: var(--fc-s-1); }
.fc-icon-list__item--warn > .fc-icon { color: var(--fc-warning); }
.fc-icon-list__item--ok > .fc-icon { color: var(--fc-success); }
.fc-icon-list__text { max-width: var(--fc-measure); }

/* Sidebar link list (related tools) */
.fc-link-list__link {
  display: flex;
  align-items: center;
  gap: var(--fc-s-3);
  min-height: var(--fc-tap-lg);
  padding: var(--fc-s-2) 0;
  border-top: 1px solid var(--fc-border);
  color: var(--fc-text);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-medium);
  text-decoration: none;
}
.fc-link-list__link:hover { color: var(--fc-accent-text); }
.fc-link-list__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fc-link-list__link > .fc-icon { width: 16px; height: 16px; }


/* ==========================================================================
   19. Search result card and empty state
   ========================================================================== */
.fc-results { margin-top: var(--fc-s-4); max-width: 840px; display: flex; flex-direction: column; gap: var(--fc-s-3); }
.fc-result-card { gap: var(--fc-s-2); }
.fc-result-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fc-s-1) var(--fc-s-2); }
.fc-result-card__path { min-width: 0; font-size: var(--fc-fs-13); color: var(--fc-text-muted); overflow-wrap: anywhere; }
.fc-result-card__title { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-21); line-height: var(--fc-lh-head); overflow-wrap: anywhere; }
.fc-result-card__desc { max-width: var(--fc-measure); font-size: var(--fc-fs-15); color: var(--fc-text-muted); }
.fc-result-count { margin-top: var(--fc-s-6); font-size: var(--fc-fs-15); font-weight: var(--fc-fw-semibold); overflow-wrap: anywhere; }

.fc-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-s-4);
  padding: var(--fc-card-pad);
  background: var(--fc-surface);
  border: 1px dashed var(--fc-border-strong);
  border-radius: var(--fc-radius-card);
}
.fc-empty--inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--fc-s-2) var(--fc-s-4); }
.fc-empty__title { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-24); line-height: var(--fc-lh-head); overflow-wrap: anywhere; }
.fc-empty__tips { list-style: disc; padding-left: var(--fc-s-6); display: flex; flex-direction: column; gap: var(--fc-s-1); font-size: var(--fc-fs-15); }
.fc-empty__label { font-size: var(--fc-fs-14); font-weight: var(--fc-fw-semibold); color: var(--fc-text-muted); }


/* ==========================================================================
   20. Footer
   ========================================================================== */
.fc-footer { background: var(--fc-surface); border-top: 1px solid var(--fc-border); }
.fc-footer__inner { padding-top: var(--fc-section-y); padding-bottom: var(--fc-s-6); }
.fc-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fc-grid-gap) var(--fc-s-6); }
.fc-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--fc-s-3); min-width: 0; max-width: 360px; }
.fc-footer__brand .fc-logo { align-self: flex-start; }
.fc-footer__tagline { font-size: var(--fc-fs-15); color: var(--fc-text-muted); }
.fc-footer__col { min-width: 0; }
.fc-footer__heading { font-size: var(--fc-fs-14); font-weight: var(--fc-fw-semibold); line-height: var(--fc-lh-ui); color: var(--fc-text-muted); }
.fc-footer__list { margin-top: var(--fc-s-1); }
.fc-footer__link { display: flex; align-items: center; min-height: var(--fc-tap); color: var(--fc-text); font-size: var(--fc-fs-15); line-height: var(--fc-lh-ui); text-decoration: none; }
.fc-footer__link:hover { color: var(--fc-accent-text); text-decoration: underline; }
.fc-footer__bottom { margin-top: var(--fc-s-8); padding-top: var(--fc-s-4); border-top: 1px solid var(--fc-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--fc-s-2) var(--fc-s-6); font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-footer__bottom p:first-child { max-width: var(--fc-measure); }
.fc-footer__bottom strong { color: var(--fc-text); }
@media (min-width: 640px) { .fc-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .fc-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .fc-footer__brand { grid-column: auto; }
}


/* ==========================================================================
   21. Project drawer, toast, mobile sticky action bar
   ========================================================================== */
.fc-drawer { position: fixed; inset: 0; z-index: var(--fc-z-drawer); display: flex; justify-content: flex-end; }
.fc-drawer__overlay { position: absolute; inset: 0; background: var(--fc-overlay); }
.fc-drawer__panel { position: relative; width: 100%; max-width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--fc-bg); border-left: 1px solid var(--fc-border); }
@media (min-width: 640px) { .fc-drawer__panel { width: var(--fc-drawer-w); } }
.fc-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-s-3);
  padding: var(--fc-s-3) var(--fc-card-pad);
  padding-top: max(var(--fc-s-3), env(safe-area-inset-top));
  background: var(--fc-surface);
  border-bottom: 1px solid var(--fc-border);
}
.fc-drawer__title { font-family: var(--fc-font-head); font-weight: var(--fc-fw-semibold); font-size: var(--fc-fs-24); line-height: var(--fc-lh-head); }
.fc-drawer__sub { font-size: var(--fc-fs-14); color: var(--fc-text-muted); }
.fc-drawer__body { flex: 1; overflow-y: auto; padding: var(--fc-card-pad); display: flex; flex-direction: column; gap: var(--fc-s-4); }
.fc-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--fc-s-4);
  padding: var(--fc-card-pad);
  padding-bottom: max(var(--fc-card-pad), env(safe-area-inset-bottom));
  background: var(--fc-surface);
  border-top: 1px solid var(--fc-border);
}
.fc-drawer__actions { display: flex; flex-wrap: wrap; gap: var(--fc-s-2); }
.fc-drawer__actions .fc-btn--primary { flex: 1 1 180px; }
.fc-drawer__actions .fc-btn--secondary { flex: 0 1 auto; }

.fc-proj-list { display: flex; flex-direction: column; gap: var(--fc-s-3); }
.fc-proj-item { display: flex; flex-direction: column; gap: var(--fc-s-3); padding: var(--fc-s-4); background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-card); }
.fc-proj-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fc-s-3); }
.fc-proj-item__name { font-weight: var(--fc-fw-semibold); line-height: var(--fc-lh-ui); overflow-wrap: anywhere; }
.fc-proj-item__detail { font-size: var(--fc-fs-14); color: var(--fc-text-muted); overflow-wrap: anywhere; }
.fc-proj-item__qty { display: flex; align-items: center; gap: var(--fc-s-2); }
.fc-proj-item__unit { font-size: var(--fc-fs-15); color: var(--fc-text-muted); }
.fc-proj-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fc-s-3); padding: var(--fc-s-6) var(--fc-s-4); background: var(--fc-surface); border: 1px dashed var(--fc-border-strong); border-radius: var(--fc-radius-card); }

.fc-totals__title { font-size: var(--fc-fs-15); font-weight: var(--fc-fw-semibold); }
.fc-totals__list { margin-top: var(--fc-s-1); display: flex; flex-direction: column; }
.fc-totals__row { display: flex; justify-content: space-between; gap: var(--fc-s-3); padding: var(--fc-s-1) 0; font-size: var(--fc-fs-15); font-variant-numeric: tabular-nums; }
.fc-totals__row dt { color: var(--fc-text-muted); }
.fc-totals__row dd { font-weight: var(--fc-fw-semibold); text-align: right; }
.fc-totals__note { margin-top: var(--fc-s-1); font-size: var(--fc-fs-13); color: var(--fc-text-muted); }

/* Toast: the live region is always in the DOM; JS fills it. */
.fc-toast-region { position: fixed; left: var(--fc-s-4); right: var(--fc-s-4); bottom: var(--fc-s-4); z-index: var(--fc-z-toast); display: flex; justify-content: center; pointer-events: none; }
.fc-toast-region--above-bar { bottom: 80px; } /* while the sticky bar shows */
.fc-toast {
  display: flex;
  align-items: center;
  gap: var(--fc-s-3);
  max-width: 100%;
  padding: var(--fc-s-3) var(--fc-s-4);
  border-radius: var(--fc-radius-control);
  background: var(--fc-text);
  color: var(--fc-text-inverse);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-medium);
  box-shadow: var(--fc-shadow-toast);
}
.fc-toast .fc-icon { width: 18px; height: 18px; }
.fc-toast--inline { box-shadow: none; } /* inside the drawer footer */

/* Mobile sticky result bar (<1024 only; JS removes [hidden] after Calculate) */
.fc-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--fc-z-sticky-bar);
  display: flex;
  gap: var(--fc-s-2);
  padding: var(--fc-s-2) max(var(--fc-s-4), env(safe-area-inset-right)) calc(var(--fc-s-2) + env(safe-area-inset-bottom)) max(var(--fc-s-4), env(safe-area-inset-left));
  background: var(--fc-surface);
  border-top: 1px solid var(--fc-border);
  box-shadow: var(--fc-shadow-bar);
}
.fc-sticky-bar__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-s-2);
  min-height: var(--fc-tap);
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-control);
  font-size: var(--fc-fs-15);
  font-weight: var(--fc-fw-semibold);
}
.fc-sticky-bar__btn--add { flex: 1.6; background: var(--fc-text); border-color: var(--fc-text); color: var(--fc-text-inverse); }
.fc-sticky-bar__btn .fc-icon { width: 16px; height: 16px; }
.fc-sticky-spacer { height: 64px; }
@media (min-width: 1024px) { .fc-sticky-bar, .fc-sticky-spacer { display: none !important; } }