/*
 * Cards (README "Cards"): surface, radius 28px, padding 24–28px, 16px internal gap.
 * Plus stat tiles (16px radius) and the compliance meter used by Site cards and dashboards.
 */
@layer components {
  .card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-text);
  }
  .card--lg { padding: 28px; }
  .card--flush { padding: 8px 22px; }
  .card--tight { padding: 14px; gap: 12px; }
  .card--on-surface { background: var(--color-bg); }
  .card--sticky { position: sticky; top: 16px; }

  .card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .card__aside { font-size: 13px; color: var(--color-neutral-700); }
  .card__body { font-size: 14px; line-height: 1.55; color: var(--color-neutral-800); }

  /* Statement box ("Official statement") */
  .statement {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 20px;
    background: var(--color-bg);
  }
  .statement__label {
    color: var(--color-neutral-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .statement__text { font-size: 14.5px; line-height: 1.55; }

  /* Numbered step badge (A-07 sections) */
  .step-badge {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-2-200);
    color: var(--color-accent-2-900);
    font-size: 13px;
    font-weight: 700;
  }

  /* Stat tiles --------------------------------------------------------------------------- */
  .stat-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .stat-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--radius-tile);
    background: var(--color-bg);
  }
  .stat-tile__value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .stat-tile__value--err { color: var(--color-err-text); }
  .stat-tile__value--warn { color: var(--color-warn-text); }
  .stat-tile__label {
    color: var(--color-neutral-700);
    font-size: 11.5px;
    font-weight: 700;
  }

  /* Meter (8px): >= 90 sage, >= 80 blue, else amber. Uses <progress>, no inline widths. */
  .meter { display: flex; flex-direction: column; gap: 6px; }
  .meter__head {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 700;
  }
  .meter__bar {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-200);
    appearance: none;
    color: var(--meter-color, var(--color-accent-2-600));
  }
  .meter__bar::-webkit-progress-bar { background: var(--color-neutral-200); border-radius: var(--radius-pill); }
  .meter__bar::-webkit-progress-value { background: var(--meter-color, var(--color-accent-2-600)); border-radius: var(--radius-pill); }
  .meter__bar::-moz-progress-bar { background: var(--meter-color, var(--color-accent-2-600)); border-radius: var(--radius-pill); }
  .meter--ok { --meter-color: var(--color-accent-2-600); }
  .meter--blue { --meter-color: var(--color-blue); }
  .meter--warn { --meter-color: var(--color-warn); }
}