/* =========================================================================
   M-Convert · components.css
   -------------------------------------------------------------------------
   Purpose : Reusable UI components — buttons, cards, inputs, selects,
             tables, chips, alerts, FAQ accordion, search combobox,
             badges, dividers, empty states.
   Order   : Fourth — after layout.css, before converter.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h-md);
  padding: 0 var(--btn-px-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: var(--focus-ring-o);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ---- Primary ---------------------------------------------------------- */
.btn--primary {
  background: var(--c-accent);
  color: var(--c-text-invert);
  border-color: var(--c-accent);
  box-shadow: var(--sh-xs);
}

.btn--primary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  text-decoration: none;
  color: var(--c-text-invert);
}

.btn--primary:active {
  background: var(--c-accent-active);
  border-color: var(--c-accent-active);
  transform: translateY(1px);
}

/* ---- Secondary -------------------------------------------------------- */
.btn--secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-input);
  box-shadow: var(--sh-xs);
}

.btn--secondary:hover {
  background: var(--c-bg-alt);
  border-color: var(--c-border-strong);
  color: var(--c-accent);
  text-decoration: none;
}

.btn--secondary:active {
  transform: translateY(1px);
}

/* ---- Ghost ------------------------------------------------------------ */
.btn--ghost {
  background: transparent;
  color: var(--c-text-muted);
  border-color: transparent;
}

.btn--ghost:hover {
  background: var(--c-bg-alt);
  color: var(--c-text);
  text-decoration: none;
}

/* ---- Outline ---------------------------------------------------------- */
.btn--outline {
  background: transparent;
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.btn--outline:hover {
  background: var(--c-accent-tint);
  text-decoration: none;
}

/* ---- Sizes ------------------------------------------------------------ */
.btn--sm {
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-px-sm);
  font-size: var(--fs-xs);
  border-radius: var(--r-sm);
}

.btn--lg {
  min-height: var(--btn-h-lg);
  padding: 0 var(--btn-px-lg);
  font-size: var(--fs-md);
}

.btn--block {
  width: 100%;
  display: flex;
}

/* ---- Icon-only -------------------------------------------------------- */
.btn--icon {
  width: var(--btn-h-md);
  min-width: var(--btn-h-md);
  padding: 0;
  flex-shrink: 0;
}

.btn--icon.btn--sm {
  width: var(--btn-h-sm);
  min-width: var(--btn-h-sm);
}

/* -------------------------------------------------------------------------
   2. INPUTS & FIELD GROUPS
   ------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field + .field {
  margin-top: var(--sp-4);
}

.field__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-strong);
  letter-spacing: var(--ls-normal);
}

.field__label-optional {
  font-weight: var(--fw-regular);
  color: var(--c-text-subtle);
  font-size: var(--fs-xs);
  margin-left: var(--sp-1);
}

.field__hint {
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
  line-height: 1.5;
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-error);
  font-weight: var(--fw-medium);
  line-height: 1.45;
}

.field__error::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: var(--r-circle);
  background: var(--c-error);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1.5A6.5 6.5 0 1 0 8 14.5A6.5 6.5 0 0 0 8 1.5zM7.25 4.5h1.5v5h-1.5zm0 6h1.5v1.5h-1.5z' fill='black' fill-rule='evenodd'/></svg>");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1.5A6.5 6.5 0 1 0 8 14.5A6.5 6.5 0 0 0 8 1.5zM7.25 4.5h1.5v5h-1.5zm0 6h1.5v1.5h-1.5z' fill='black' fill-rule='evenodd'/></svg>");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ---- Input with adornment (prefix / suffix) --------------------------- */
.input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}

.input-wrap__adornment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-3);
  background: var(--c-bg-sunken);
  border: var(--bd-input);
  border-right: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-top-left-radius: var(--input-radius);
  border-bottom-left-radius: var(--input-radius);
  white-space: nowrap;
  user-select: none;
}

.input-wrap__adornment--suffix {
  border-left: 0;
  border-right: var(--bd-input);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--input-radius);
  border-bottom-right-radius: var(--input-radius);
}

.input-wrap > input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-wrap > input:last-child {
  border-top-right-radius: var(--input-radius);
  border-bottom-right-radius: var(--input-radius);
}

/* ---- Error state (colour + border + icon, never colour alone) -------- */
.input--error,
.input--error:hover,
.input--error:focus-visible {
  border-color: var(--c-error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18);
  background: var(--c-error-tint);
}

/* ---- Success state ---------------------------------------------------- */
.input--success,
.input--success:hover,
.input--success:focus-visible {
  border-color: var(--c-success);
  box-shadow: 0 0 0 3px rgba(20, 108, 67, 0.15);
}

/* -------------------------------------------------------------------------
   3. SELECT
   ------------------------------------------------------------------------- */
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%2352657a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 16px 16px;
  padding-right: calc(var(--sp-3) * 2 + 16px);
}

.select--sm {
  height: var(--btn-h-sm);
  font-size: var(--fs-sm);
}

/* -------------------------------------------------------------------------
   4. CARDS
   ------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--card-pad);
  background: var(--c-surface);
  border: var(--bd-hairline);
  border-radius: var(--card-radius);
  box-shadow: var(--sh-xs);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.card:hover {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-md);
}

.card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.card--link:hover {
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.card--link:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: var(--focus-ring-o);
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.card__badge-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.card__subtitle {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-accent);
  letter-spacing: 0;
}

.card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: var(--bd-hairline);
  font-size: var(--fs-xs);
  color: var(--c-text-subtle);
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-accent);
  text-decoration: none;
}

.card__cta::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-out);
}

.card--link:hover .card__cta::after {
  transform: translateX(3px);
}

/* ---- Tool-card variant (used on homepage) ----------------------------- */
.tool-card {
  padding: var(--card-pad-lg);
  gap: var(--sp-4);
}

.tool-card__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-accent-tint);
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   5. BADGES / CHIPS / PILLS
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 22px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--c-bg-sunken);
  color: var(--c-text-muted);
  white-space: nowrap;
  line-height: 1;
}

.badge--accent {
  background: var(--c-accent-tint);
  color: var(--c-accent);
}

.badge--success {
  background: var(--c-success-tint);
  color: var(--c-success);
}

.badge--info {
  background: var(--c-info-tint);
  color: var(--c-info);
}

.badge--new {
  background: var(--c-accent);
  color: var(--c-text-invert);
}

/* -------------------------------------------------------------------------
   6. ALERTS / NOTICES
   ------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.alert__body {
  flex: 1 1 auto;
}

.alert__title {
  display: block;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-1);
  color: inherit;
}

.alert--info {
  background: var(--c-info-tint);
  border-color: #b9d7e8;
  color: var(--c-info);
}

.alert--success {
  background: var(--c-success-tint);
  border-color: var(--c-success-border);
  color: var(--c-success);
}

.alert--warning {
  background: var(--c-warning-tint);
  border-color: #f0d29b;
  color: var(--c-warning);
}

.alert--error {
  background: var(--c-error-tint);
  border-color: var(--c-error-border);
  color: var(--c-error);
}

/* -------------------------------------------------------------------------
   7. TABLES
   ------------------------------------------------------------------------- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--bd-hairline);
  border-radius: var(--r-md);
  background: var(--c-surface);
  margin-top: var(--sp-4);
}

.table-wrap:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: var(--focus-ring-o);
}

.data-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.data-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  border-bottom: var(--bd-hairline);
  background: var(--c-bg-alt);
}

.data-table thead th {
  background: var(--c-bg-sunken);
  color: var(--c-text-strong);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-align: left;
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 2px solid var(--c-border-strong);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.data-table thead th[scope="col"]:first-child {
  border-top-left-radius: var(--r-md);
}

.data-table thead th[scope="col"]:last-child {
  border-top-right-radius: var(--r-md);
}

.data-table tbody th {
  font-weight: var(--fw-semibold);
  color: var(--c-brand);
  text-align: left;
  background: var(--c-bg-alt);
}

.data-table tbody td {
  color: var(--c-text);
}

.data-table th,
.data-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:nth-child(even) th,
.data-table tbody tr:nth-child(even) td {
  background: var(--c-bg-alt);
}

.data-table tbody tr:nth-child(even) th {
  background: var(--c-bg-sunken);
}

.data-table tbody tr:hover th,
.data-table tbody tr:hover td {
  background: var(--c-accent-tint);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.data-table__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.data-table--compact th,
.data-table--compact td {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
}

/* -------------------------------------------------------------------------
   8. FAQ ACCORDION (native <details>)
   ------------------------------------------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.faq__item {
  background: var(--c-surface);
  border: var(--bd-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.faq__item[open] {
  border-color: var(--c-border-strong);
  box-shadow: var(--sh-sm);
}

.faq__item:hover {
  border-color: var(--c-border-strong);
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-text-strong);
  cursor: pointer;
  list-style: none;
  line-height: var(--lh-snug);
  transition: background-color var(--dur-fast) var(--ease-out);
  min-height: 56px;
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary:hover {
  background: var(--c-bg-alt);
}

.faq__summary:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: -3px;
}

.faq__summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
  margin-top: -4px;
}

.faq__item[open] .faq__summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}

.faq__answer {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-4);
}

.faq__answer > * + * {
  margin-top: var(--sp-3);
}

.faq__answer strong {
  color: var(--c-text-strong);
}

.faq__short {
  font-weight: var(--fw-semibold);
  color: var(--c-brand);
}

/* -------------------------------------------------------------------------
   9. SEARCH COMBOBOX
   ------------------------------------------------------------------------- */
.search {
  position: relative;
  width: 100%;
}

.search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search__icon {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--c-text-subtle);
  pointer-events: none;
}

.search__input {
  width: 100%;
  height: 56px;
  padding-left: calc(var(--sp-4) + 18px + var(--sp-3));
  padding-right: var(--sp-4);
  font-size: var(--fs-md);
  border-radius: var(--r-lg);
  border: var(--bd-input);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}

.search__input:focus-visible {
  border-color: var(--c-accent);
  box-shadow: var(--sh-focus), var(--sh-sm);
}

.search__clear {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-subtle);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.search__clear:hover {
  background: var(--c-bg-sunken);
  color: var(--c-text);
}

.search__clear:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: 2px;
}

.search__clear[hidden] {
  display: none;
}

.search__listbox {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  max-height: 380px;
  overflow-y: auto;
  background: var(--c-surface);
  border: var(--bd-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: var(--sp-2);
  list-style: none;
  margin: 0;
  animation: mc-fade-in var(--dur-fast) var(--ease-out);
}

.search__listbox[hidden] {
  display: none;
}

.search__option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  min-height: 52px;
  color: var(--c-text);
  text-decoration: none;
}

.search__option:hover,
.search__option[data-active="true"] {
  background: var(--c-accent-tint);
  text-decoration: none;
  color: var(--c-text);
}

.search__option:focus {
  outline: none;
}

.search__option-glyph {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent-tint);
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.search__option-body {
  flex: 1 1 auto;
  min-width: 0;
}

.search__option-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-strong);
  line-height: 1.3;
}

.search__option-sub {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  line-height: 1.3;
  margin-top: 1px;
}

.search__empty {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.search__empty strong {
  color: var(--c-text-strong);
  display: block;
  margin-bottom: var(--sp-1);
}

.search__empty-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-3);
  list-style: none;
  padding: 0;
}

.search__empty-links a {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  background: var(--c-bg-sunken);
  border-radius: var(--r-pill);
  color: var(--c-accent);
  text-decoration: none;
}

.search__empty-links a:hover {
  background: var(--c-accent-tint);
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   10. DIVIDERS
   ------------------------------------------------------------------------- */
.divider {
  height: 1px;
  background: var(--c-border);
  border: 0;
  margin: var(--sp-8) 0;
}

.divider--labelled {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
  color: var(--c-text-subtle);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-weight: var(--fw-semibold);
}

.divider--labelled::before,
.divider--labelled::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-border);
}

/* -------------------------------------------------------------------------
   11. EMPTY STATE
   ------------------------------------------------------------------------- */
.empty-state {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-bg-alt);
}

.empty-state strong {
  display: block;
  color: var(--c-text-strong);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-1);
}

/* -------------------------------------------------------------------------
   12. STEP LIST (numbered instructions)
   ------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps__item {
  position: relative;
  padding-left: 48px;
  counter-increment: step;
  line-height: var(--lh-normal);
  color: var(--c-text);
  min-height: 32px;
}

.steps__item::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-circle);
  background: var(--c-accent);
  color: var(--c-text-invert);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
}

.steps__item strong {
  display: block;
  color: var(--c-text-strong);
  margin-bottom: 2px;
}

/* -------------------------------------------------------------------------
   13. FEATURE BULLETS
   ------------------------------------------------------------------------- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  line-height: var(--lh-normal);
}

.feature-list__item::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: var(--r-circle);
  background: var(--c-accent-tint);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%230b6e7d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

/* -------------------------------------------------------------------------
   14. TAG LIST (use cases)
   ------------------------------------------------------------------------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-list__item {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-brand);
  background: var(--c-bg-sunken);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   15. INLINE CODE / FORMULA CHIP
   ------------------------------------------------------------------------- */
.formula-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-weight: var(--fw-semibold);
  color: var(--c-brand);
  background: var(--c-accent-tint);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  border: 1px solid var(--c-accent-tint-2);
}

/* -------------------------------------------------------------------------
   16. TOAST / NOTIFICATION
   ------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-brand);
  color: var(--c-text-invert);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-xl);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  max-width: calc(100vw - var(--sp-8));
}

.toast[data-show="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -------------------------------------------------------------------------
   17. LINK LISTS (compact)
   ------------------------------------------------------------------------- */
.link-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.link-list__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  color: var(--c-accent);
  text-decoration: none;
  border-radius: var(--r-xs);
  min-height: 32px;
  transition: color var(--dur-fast) var(--ease-out);
}

.link-list__link:hover {
  color: var(--c-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-list__link::before {
  content: "→";
  color: var(--c-border-strong);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.link-list__link:hover::before {
  color: var(--c-accent);
  transform: translateX(2px);
}

.link-list__link:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   18. SECTION HEADING WITH ANCHOR
   ------------------------------------------------------------------------- */
.heading-anchor {
  position: relative;
  display: inline-block;
  padding-right: 28px;
}

.heading-anchor__link {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-subtle);
  text-decoration: none;
  border-radius: var(--r-sm);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.heading-anchor:hover .heading-anchor__link,
.heading-anchor__link:focus-visible {
  opacity: 1;
}

.heading-anchor__link::before {
  content: "#";
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: var(--fw-regular);
}

.heading-anchor__link:hover {
  color: var(--c-accent);
  text-decoration: none;
}

.heading-anchor__link:focus-visible {
  outline: var(--focus-ring-w) solid var(--c-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   19. MINI STAT / VALUE ROW
   ------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
}

@media (min-width: 560px) {
  .stat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--c-bg-alt);
  border: var(--bd-hairline);
  border-radius: var(--r-md);
}

.stat__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.stat__value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stat__note {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   20. TABULAR NUMBER HELPERS
   ------------------------------------------------------------------------- */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* -------------------------------------------------------------------------
   21. LOADING / PROGRESS BAR (documented, unused by converters)
   -------------------------------------------------------------------------
   The converters never show a loading indicator. This component exists for
   any future async content and is intentionally minimal.
   ------------------------------------------------------------------------- */
.progress {
  width: 100%;
  height: 3px;
  background: var(--c-bg-sunken);
  overflow: hidden;
  border-radius: var(--r-pill);
}

.progress__bar {
  height: 100%;
  width: 30%;
  background: var(--c-accent);
  animation: mc-progress 1.4s infinite var(--ease-inout);
}

@keyframes mc-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
  .progress__bar {
    animation: none;
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   22. SCROLL SHADOW HELPER (progressive, harmless if unused)
   ------------------------------------------------------------------------- */
.has-scroll {
  background:
    linear-gradient(var(--c-surface) 30%, rgba(255,255,255,0)) center top,
    linear-gradient(rgba(255,255,255,0), var(--c-surface) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0, rgba(11,34,57,0.12), rgba(0,0,0,0)) center top,
    radial-gradient(farthest-side at 50% 100%, rgba(11,34,57,0.12), rgba(0,0,0,0)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 24px, 100% 24px, 100% 8px, 100% 8px;
  background-attachment: local, local, scroll, scroll;
}

/* -------------------------------------------------------------------------
   23. PRINT
   ------------------------------------------------------------------------- */
@media print {
  .btn,
  .toast,
  .search__listbox,
  .search__clear {
    display: none !important;
  }

  .card,
  .faq__item,
  .alert,
  .data-table {
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }
}