/* =====================================================================
   components.css - buttons, cards, tables, accordion, badges, forms,
   status sign, stepper, alerts, share row, comments
   ===================================================================== */

/* --- Buttons (section 3.4) --------------------------------------------- */
.btn-primary,
.btn-outline {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  line-height: 1.4;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: 0;
}
.btn-primary:hover { background: #222222; }
.btn-outline {
  background: transparent;
  color: var(--color-btn-outline-border);
  border: 1px solid var(--color-btn-outline-border);
}
.btn-outline:hover { background: var(--color-table-stripe); }
.btn-danger {
  background: var(--color-danger);
  color: #ffffff;
  border: 0;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.btn-danger[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 6px 12px; font-size: 0.875rem; }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* --- Info cards (section 3.5) ------------------------------------------ */
.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.info-card:hover { box-shadow: var(--shadow-card); border-color: #c7ccd1; }
.info-card__media {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-2);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-badge-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-card__media img { width: 100%; height: 100%; object-fit: cover; }
.info-card__title {
  display: block;
  color: var(--color-nav-link);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: var(--space-1);
}
.info-card__meta { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; }

/* --- Bordered heading card (home welcome block) ------------------------- */
.bordered-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  margin: var(--space-3) 0;
}
.bordered-card h1 { margin: 0; }

/* --- Stat row ----------------------------------------------------------- */
.stat-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-3) 0 var(--space-5);
}
.stat-row__item {
  flex: 1 1 240px;
  background: var(--color-accent-tan);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}
.stat-row__item a { color: var(--color-nav-link); font-weight: 500; }
.stat-row__value { font-size: 1.75rem; font-weight: 700; display: block; }

/* --- Data tables (section 3.6) ------------------------------------------ */
.table-scroll { overflow-x: auto; margin: var(--space-3) 0 var(--space-4); }
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.data-table th,
.data-table td {
  border: 1px solid var(--color-border);
  padding: 12px 15px;
  text-align: left;
  vertical-align: top;
}
.data-table th {
  background: var(--color-accent-tan);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}
.data-table tbody tr:nth-child(even) { background: var(--color-table-stripe); }
.data-table a { color: var(--color-link); }
.data-table--kv th { width: 34%; }
.data-table--kv { min-width: 0; }
.data-table__caption {
  background: var(--color-accent-tan);
  font-weight: 700;
  text-align: center;
  padding: 10px 15px;
  border: 1px solid var(--color-border);
  border-bottom: 0;
}

/* Small category chip used inside the "Scheme Type" table cell. */
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px 6px 2px 0;
  font-size: 0.875rem;
}
.type-chip img { width: 18px; height: 18px; }

/* --- Badges -------------------------------------------------------------- */
.badge {
  display: inline-block;
  background: var(--color-badge-bg);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8125rem;
  color: var(--color-text);
}
.badge--success { background: #e6f4e7; color: var(--color-success); }
.badge--danger { background: #fbe9e9; color: var(--color-danger); }
.badge--muted { background: var(--color-badge-bg); color: var(--color-text-muted); }

/* --- Status sign (section 3.7) -------------------------------------------
   A small hanging sign: two thin strings converging on a dot, with a slightly
   rotated board below them. Pure CSS plus one inline SVG for the strings.
   ------------------------------------------------------------------------ */
.status-sign {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}
.status-sign__strings { width: 60px; height: 26px; display: block; }
.status-sign__board {
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: 10px 20px;
  font-weight: 700;
  text-align: center;
  font-size: 0.9rem;
  transform: rotate(-3deg);
}
.status-sign--open .status-sign__board { border: 2px solid var(--color-success); color: var(--color-success); }
.status-sign--closed .status-sign__board { border: 2px solid var(--color-danger); color: var(--color-danger); }
.status-sign--open .status-sign__strings { stroke: var(--color-success); fill: var(--color-success); }
.status-sign--closed .status-sign__strings { stroke: var(--color-danger); fill: var(--color-danger); }

/* --- Checkmark bullet lists ---------------------------------------------- */
.check-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--space-2);
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-success);
}
.check-list li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Numbered checkmark list used by "Steps to Apply". */
.step-list { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--space-3); }
.step-list li {
  position: relative;
  padding-left: 40px;
  margin-bottom: var(--space-2);
  counter-increment: step;
}
.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-success);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plain-list { padding-left: 20px; margin-bottom: var(--space-3); }
.plain-list li { margin-bottom: var(--space-1); }

/* --- Accordion (section 7.3) ---------------------------------------------- */
.accordion { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.accordion-item + .accordion-item { border-top: 1px solid var(--color-border); }
.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent-tan);
  border: 0;
  padding: 12px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 1rem;
}
.accordion-header:hover { background: var(--color-accent-tan-hover); }
.accordion-header__number {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--color-text-muted);
}
.accordion-header__text { flex: 1; }
.accordion-header__chevron {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
  width: 14px;
  height: 14px;
}
.accordion-header[aria-expanded="true"] .accordion-header__chevron { transform: rotate(180deg); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: var(--color-surface);
}
.accordion-body__inner { padding: var(--space-3) 15px; }

/* --- Stepper (section 7.4) ------------------------------------------------ */
.stepper { display: flex; margin: var(--space-3) 0 var(--space-5); }
.stepper__step {
  flex: 1;
  min-width: 0;          /* without this the label's min-content width wins and the row overflows */
  text-align: center;
  position: relative;
  padding-top: 4px;
}
.stepper__step::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.stepper__step:first-child::before { display: none; }
.stepper__circle {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  margin: 0 auto var(--space-1);
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.stepper__label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  display: block;
  padding: 0 4px;
  overflow-wrap: anywhere;
}
.stepper__step--done .stepper__circle { background: var(--color-btn-bg); border-color: var(--color-btn-bg); color: #ffffff; }
.stepper__step--current .stepper__circle { background: var(--color-link); border-color: var(--color-link); color: #ffffff; }
.stepper__step--current .stepper__label { color: var(--color-text); font-weight: 500; }

@media (max-width: 575px) {
  .stepper__circle { width: 26px; height: 26px; font-size: 0.75rem; }
  .stepper__step::before { top: 16px; }
  .stepper__label { font-size: 0.6875rem; }
}

/* --- Forms ---------------------------------------------------------------- */
.form { max-width: 640px; }
.form--wide { max-width: none; }
.form-group { margin-bottom: var(--space-3); }
.form-group > label,
.form-label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.form-control:focus { border-color: var(--color-link); }
textarea.form-control { min-height: 130px; resize: vertical; }
select[multiple].form-control { min-height: 190px; }
.form-hint { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 4px; }
.form-error { font-size: 0.875rem; color: var(--color-danger); margin-top: 4px; }
.form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.form-row > .form-group { flex: 1 1 240px; }
.form-check { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); }
.form-check input { margin-top: 5px; }
.form-check label { font-weight: 400; }
.captcha-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--color-table-stripe);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.captcha-box strong { font-size: 1.1rem; }
.captcha-box input { width: 90px; }

/* --- Alerts --------------------------------------------------------------- */
.alert {
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  margin-bottom: var(--space-3);
  border: 1px solid transparent;
}
.alert--success { background: #e6f4e7; border-color: #bcdfc0; color: #1d5c21; }
.alert--error { background: #fbe9e9; border-color: #f0c4c4; color: #8f1d1d; }
.alert--info { background: var(--color-badge-bg); border-color: var(--color-border); color: var(--color-text); }
.alert ul { margin: var(--space-1) 0 0; padding-left: 20px; }

/* --- Share row ------------------------------------------------------------ */
.share-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; flex-wrap: wrap; }
.share-row__label { font-size: 0.875rem; color: var(--color-text-muted); }
.share-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-nav-link);
}
.share-row a:hover { background: var(--color-table-stripe); }
.share-row svg { width: 18px; height: 18px; }

/* --- Favourite heart ------------------------------------------------------ */
.fav-button {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--color-nav-link);
}
.fav-button svg { width: 18px; height: 18px; fill: none; stroke: var(--color-danger); stroke-width: 2; }
.fav-button.is-active svg { fill: var(--color-danger); }

/* --- Comments ------------------------------------------------------------- */
.comment {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.comment__meta { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: var(--space-1); }
.comment__subject { font-weight: 500; margin-bottom: var(--space-1); }
.comment__body { margin: 0; white-space: pre-line; }
.comment-preview {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--color-table-stripe);
  white-space: pre-line;
}

/* --- Callout -------------------------------------------------------------- */
.callout {
  background: var(--color-accent-tan);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  margin: var(--space-5) 0;
}
.callout h3 { margin-top: 0; }

/* --- App promo card (section 5.8) ----------------------------------------- */
.app-promo {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  margin: var(--space-4) 0;
}
.app-promo__ribbon {
  position: absolute;
  top: 14px;
  right: -34px;
  transform: rotate(45deg);
  background: var(--color-success);
  color: #ffffff;
  font-size: 0.75rem;
  padding: 4px 44px;
}
.app-promo__icon { width: 72px; height: 72px; border-radius: var(--radius-md); background: var(--color-badge-bg); }
.app-promo__body { flex: 1 1 260px; }
.app-promo__pills { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0 var(--space-3); }

/* --- Pagination (admin lists) --------------------------------------------- */
.pagination { display: flex; gap: 6px; list-style: none; padding: 0; margin: var(--space-3) 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-nav-link);
  font-size: 0.875rem;
}
.pagination .is-current { background: var(--color-btn-bg); color: var(--color-btn-text); border-color: var(--color-btn-bg); }

/* --- Empty state ----------------------------------------------------------- */
.empty-state {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

/* =====================================================================
   Polish layer.
   Appended rather than rewritten, so the specified structure above stays
   readable and every override here is visible in one place.
   ===================================================================== */

/* --- Buttons --------------------------------------------------------- */
.btn-primary,
.btn-outline,
.btn-danger {
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
  font-weight: 500;
  letter-spacing: 0.005em;
  border-radius: var(--radius-sm);
  line-height: 1.45;
}
.btn-primary { box-shadow: var(--shadow-card); }
.btn-primary:hover { background: #1f1f1f; box-shadow: var(--shadow-hover); }
.btn-primary:active,
.btn-outline:active,
.btn-danger:active { transform: translateY(1px); box-shadow: none; }
.btn-outline:hover { background: var(--color-text); color: #ffffff; border-color: var(--color-text); }
.btn-danger:hover { background: #a81f1f; }

/* A button that is really a link should not pick up link colouring. */
a.btn-primary, a.btn-primary:hover { color: var(--color-btn-text); text-decoration: none; }
a.btn-outline:hover { color: #ffffff; text-decoration: none; }

/* --- Cards ------------------------------------------------------------ */
.info-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.info-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}
.info-card__title { font-size: 1.02rem; line-height: 1.35; }
.info-card:hover .info-card__title { color: var(--color-link); }
.info-card__media {
  box-shadow: inset 0 0 0 1px var(--color-border-soft);
  background: var(--color-surface-sunken);
}

/* The whole card is the click target. The title stays the only anchor, so
   each card still announces as one link; its ::after simply stretches that
   link over the card box. Anything else interactive inside a card (the
   favourites "Remove" form) is lifted back above the overlay. */
.info-card { position: relative; cursor: pointer; }
.info-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.info-card form,
.info-card button,
.info-card a:not(.info-card__title) { position: relative; z-index: 1; }
.info-card:focus-within {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-border-strong);
}
.info-card:focus-within .info-card__title { color: var(--color-link); }
.info-card__title:focus-visible { outline: none; }
.info-card__title:focus-visible::after {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.bordered-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* --- Stat row --------------------------------------------------------- */
.stat-row__item {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.stat-row__item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.stat-row__value { line-height: 1.15; margin-bottom: 2px; letter-spacing: -0.02em; }

/* --- Tables ----------------------------------------------------------- */
.table-scroll {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}
/* The wrapper draws the frame now, so cells only need inner hairlines. */
.data-table { border-collapse: separate; border-spacing: 0; }
.data-table th,
.data-table td {
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);
  padding: 13px 16px;
}
.data-table thead th {
  border-bottom: 1px solid var(--color-accent-tan-hover);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background-color var(--speed) var(--ease); }
.data-table tbody tr:hover { background: #f4f7fb; }
.data-table--kv th {
  background: var(--color-surface-sunken);
  border-right: 1px solid var(--color-border-soft);
  font-weight: 500;
}
.data-table__caption { border: 0; border-bottom: 1px solid var(--color-accent-tan-hover); letter-spacing: 0.01em; }
.type-chip { color: var(--color-link); }

/* --- Forms ------------------------------------------------------------ */
.form-control {
  border-radius: var(--radius-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  background: var(--color-surface);
}
.form-control:hover { border-color: var(--color-border-strong); }
.form-control:focus {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 16%, transparent);
  outline: none;
}
.form-control::placeholder { color: #9aa1a9; }
.form-group > label, .form-label { color: var(--color-text); letter-spacing: 0.003em; }
.form-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--color-link); }
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}
select[multiple].form-control { background-image: none; padding-right: 12px; }
.captcha-box { border-radius: var(--radius-md); }

/* --- Alerts ------------------------------------------------------------ */
.alert {
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  box-shadow: var(--shadow-card);
}
.alert::before {
  content: "";
  flex: 0 0 4px;
  align-self: stretch;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.5;
}

/* --- Badges ------------------------------------------------------------- */
.badge { font-weight: 500; letter-spacing: 0.01em; padding: 4px 11px; }

/* --- Accordion ---------------------------------------------------------- */
.accordion { border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.accordion-header { transition: background-color var(--speed) var(--ease); gap: var(--space-3); }
.accordion-header__text { font-weight: 500; }
.accordion-header__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.75);
  color: var(--color-text);
  font-size: 0.8125rem;
}
.accordion-body__inner { color: var(--color-text); }
.accordion-body__inner > p:last-child { margin-bottom: 0; }

/* --- Share row and favourite ------------------------------------------- */
.share-row a {
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.share-row a:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.fav-button { transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.fav-button:hover { background: #fdf2f2; border-color: var(--color-danger); }

/* --- Comments ------------------------------------------------------------ */
.comment {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border-color: var(--color-border-soft);
}
.comment__subject { font-size: 1.02rem; }

/* --- Callout -------------------------------------------------------------- */
.callout { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* --- Scheme disclaimer card ----------------------------------------------
   Closes the scheme article. It is deliberately quieter than an .alert: the
   scheme is not in trouble, the reader is simply being told to check the
   official source before acting. The accent rule down the left edge ties it
   to the rest of the site without shouting. */
.disclaimer-card {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent-tan);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.disclaimer-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  color: var(--color-text);
}
.disclaimer-card__icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--color-accent-tan-hover); }
.disclaimer-card__lead { margin: 0 0 var(--space-2); color: var(--color-text); }
.disclaimer-card__lead strong { font-weight: 600; }
.disclaimer-card__body {
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.disclaimer-card__body:last-child { margin-bottom: 0; }

/* --- Empty state ---------------------------------------------------------- */
.empty-state { border-radius: var(--radius-lg); background: var(--color-surface-sunken); }

/* --- Stepper -------------------------------------------------------------- */
.stepper__circle { transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.stepper__step--current .stepper__circle {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-link) 15%, transparent);
}
.stepper__step--done::before,
.stepper__step--current::before { background: var(--color-btn-bg); }

/* --- Status sign ----------------------------------------------------------- */
.status-sign__board { box-shadow: var(--shadow-card); letter-spacing: 0.01em; }

/* --- Pagination ------------------------------------------------------------ */
.pagination a { transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease); }
.pagination a:hover { background: var(--color-surface-sunken); border-color: var(--color-border-strong); }

/* --- State portraits ---------------------------------------------------
   A real photograph gets a soft ring and fills its circle. The silhouette
   placeholder is inset instead, so a state with no photo reads as "none
   set" rather than as a badly cropped picture. */
.info-card__media--photo {
  box-shadow: 0 0 0 1px var(--color-border-soft), 0 0 0 4px #ffffff, var(--shadow-card);
  background: var(--color-surface);
}
.info-card__media--photo img { object-position: center top; }
.info-card__media:not(.info-card__media--photo) img {
  width: 74%;
  height: 74%;
  margin: auto;
  opacity: 0.85;
}
.info-card__leader {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
  line-height: 1.35;
}
.info-card__meta strong { font-weight: 500; color: var(--color-text); }

/* Same treatment for the portrait at the top of a state listing page. */
.listing-head__icon--photo {
  box-shadow: 0 0 0 1px var(--color-border-soft), 0 0 0 4px #ffffff, var(--shadow-hover);
}
.listing-head__icon--photo img { object-position: center top; }
.listing-head__icon:not(.listing-head__icon--photo) img {
  width: 74%;
  height: 74%;
  margin: auto;
  opacity: 0.85;
}

/* Small portrait used in the "matching schemes" tables. */
.row-portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--color-surface-sunken);
  box-shadow: 0 0 0 1px var(--color-border-soft);
}

/* --- Accent surfaces with the new orange --------------------------------
   Table headers, FAQ headers, callouts and the quick-view header all sit on
   the accent, so they take the dark on-accent text colour too. */
.data-table th,
.data-table__caption,
.accordion-header,
.callout,
.quickview-modal__head,
.stat-row__item { color: var(--color-on-accent); }

.stat-row__item a { color: var(--color-on-accent); }
.stat-row__item a:hover { color: #000000; }

.accordion-header__number { background: rgba(255, 255, 255, 0.55); color: var(--color-on-accent); }
.data-table thead th { border-bottom-color: rgba(33, 17, 6, 0.22); }
.data-table__caption { border-bottom-color: rgba(33, 17, 6, 0.22); }
.accordion-header:hover { background: var(--color-accent-tan-hover); }

/* The callout holds a primary button; keep its heading readable on orange. */
.callout h3 { color: var(--color-on-accent); }

/* Language switcher tab rides the same accent. */
.lang-switcher__tab { color: var(--color-on-accent); border-color: rgba(33, 17, 6, 0.2); }

/* The dashboard sidebar marks the current page with the accent. */
.dashboard__nav a[aria-current="page"] { color: var(--color-on-accent); }