/* ============================================================
   Eligibility (shared transparency) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--outline from elements.css.

   SHARED page: desk staff (light) and participants (citizen dark) render
   the same markup. This stylesheet only references --t-* semantic tokens,
   which app/theme.css rebinds per theme, so the page reskins without any
   role-specific color rules here. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  .eligibility__intro { display: grid; gap: var(--mea-space-1); }
  .eligibility__content { display: grid; gap: var(--mea-space-4); }

  /* Participant: empty state — friendly, centred. */
  .eligibility-empty { display: grid; gap: var(--mea-space-3); justify-items: center;
                       text-align: center; padding: var(--mea-space-8) var(--mea-space-4);
                       border-radius: var(--mea-radius-2xl); }
  .eligibility-empty__icon, .eligibility-empty__title, .eligibility-empty__hint { margin: 0; }

  /* Participant: outcome banner — icon beside the verdict. */
  .eligibility-outcome { display: grid; grid-template-columns: auto 1fr; align-items: center;
                         gap: var(--mea-space-4); padding: var(--mea-space-5);
                         border-radius: var(--mea-radius-xl); }
  .eligibility-outcome__icon { display: inline-flex; align-items: center; justify-content: center;
                               inline-size: 3rem; block-size: 3rem; margin: 0;
                               border-radius: var(--mea-radius-circle); }
  .eligibility-outcome__body { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .eligibility-outcome__title, .eligibility-outcome__desc { margin: 0; }

  /* Participant: "What was checked" — a vertical list of checks. */
  .eligibility-checks { display: grid; gap: var(--mea-space-4);
                        padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .eligibility-checks__title { margin: 0; }
  .check-list { display: grid; gap: var(--mea-space-4); margin: 0; padding: 0; list-style: none; }
  .check { display: grid; grid-template-columns: auto 1fr; gap: var(--mea-space-3); align-items: start; }
  .check__marker { display: inline-flex; align-items: center; justify-content: center;
                   inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--mea-radius-circle); }
  .check__body { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .check__text, .check__time { margin: 0; }

  /* Participant: "What this means" — explanatory prose. */
  .eligibility-meaning { display: grid; gap: var(--mea-space-2);
                         padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .eligibility-meaning__title, .eligibility-meaning__body { margin: 0; }

  /* Participant: public defender contact (D6). */
  .eligibility-contact { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
                         gap: var(--mea-space-4); padding: var(--mea-space-5);
                         border-radius: var(--mea-radius-xl); }
  .eligibility-contact__icon { display: inline-flex; align-items: center; justify-content: center;
                               inline-size: 2.5rem; block-size: 2.5rem; margin: 0;
                               border-radius: var(--mea-radius-circle); }
  .eligibility-contact__body { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .eligibility-contact__title, .eligibility-contact__desc { margin: 0; }
  .eligibility-contact__action { flex-shrink: 0; text-decoration: none; white-space: nowrap; }
  @container (max-width: 32rem) {
    .eligibility-contact { grid-template-columns: auto 1fr; }
    .eligibility-contact__action { grid-column: 1 / -1; }
  }

  /* Staff: decision summary — title + badge, then three stats. */
  .eligibility-decision { display: grid; gap: var(--mea-space-4);
                          padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .eligibility-decision__header { display: flex; flex-wrap: wrap; align-items: center;
                                  gap: var(--mea-space-3); }
  .eligibility-decision__title { margin: 0; }
  .decision-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mea-space-4); margin: 0; }
  .decision-stat { display: grid; gap: var(--mea-space-1); }
  .decision-stat__label, .decision-stat__value { margin: 0; }
  @container (max-width: 34rem) { .decision-stats { grid-template-columns: 1fr; } }

  /* Staff: rule-set metadata — a label/value definition grid. */
  .eligibility-ruleset { display: grid; gap: var(--mea-space-3);
                         padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .eligibility-ruleset__title { margin: 0; }
  .ruleset-facts { display: grid; grid-template-columns: auto 1fr;
                   gap: var(--mea-space-2) var(--mea-space-4); margin: 0; align-items: baseline; }
  .ruleset-facts__label, .ruleset-facts__value { margin: 0; min-inline-size: 0; }
  .ruleset-facts__code { display: inline-block; max-inline-size: 100%; }
  .ruleset-facts__code--hash { word-break: break-all; }

  /* Staff: full rule evaluation trace — one card per rule. */
  .eligibility-trace { display: grid; gap: var(--mea-space-4);
                       padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .eligibility-trace__header { display: flex; flex-wrap: wrap; align-items: baseline;
                               justify-content: space-between; gap: var(--mea-space-2); }
  .eligibility-trace__title, .eligibility-trace__count, .eligibility-trace__empty { margin: 0; }
  .rule-trace-list { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .rule-trace { display: grid; gap: var(--mea-space-3);
                padding: var(--mea-space-4); border-radius: var(--mea-radius-lg); }
  .rule-trace__header { display: flex; flex-wrap: wrap; align-items: center;
                        justify-content: space-between; gap: var(--mea-space-2); }
  .rule-trace__name, .rule-trace__status { margin: 0; }
  .rule-trace__facts { display: grid; grid-template-columns: auto 1fr;
                       gap: var(--mea-space-1) var(--mea-space-3); margin: 0; align-items: baseline; }
  .rule-trace__label, .rule-trace__value { margin: 0; min-inline-size: 0; }
  .rule-trace__code { display: inline-block; max-inline-size: 100%; word-break: break-word; }
  .rule-trace__explanation { margin: 0; }
}

@layer design {
  .eligibility__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                        font-weight: var(--mea-w-bold); color: var(--t-text); }
  .eligibility__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  /* Participant: empty state. */
  .eligibility-empty { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                       box-shadow: var(--mea-shadow-sm); }
  .eligibility-empty__icon { font-size: var(--mea-text-3xl); line-height: 1; }
  .eligibility-empty__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                              font-weight: var(--mea-w-semibold); color: var(--t-text-secondary);
                              line-height: var(--mea-lh-relaxed); }
  .eligibility-empty__hint { font-size: var(--mea-text-md); color: var(--t-text-muted); }

  /* Participant: outcome banner. State classes recolour the icon only. */
  .eligibility-outcome { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                         box-shadow: var(--mea-shadow-sm); }
  .eligibility-outcome__icon { font-size: var(--mea-text-xl); font-weight: var(--mea-w-bold);
                               color: var(--t-accent-text); }
  .eligibility-outcome--eligible .eligibility-outcome__icon { background: var(--t-success); }
  .eligibility-outcome--review .eligibility-outcome__icon { background: var(--t-warning); }
  .eligibility-outcome--ineligible .eligibility-outcome__icon { background: var(--t-error); }
  .eligibility-outcome__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                                font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .eligibility-outcome__desc { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                               line-height: var(--mea-lh-normal); }

  /* Participant: "What was checked" list. */
  .eligibility-checks { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                        box-shadow: var(--mea-shadow-sm); }
  .eligibility-checks__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                               font-weight: var(--mea-w-bold); color: var(--t-text); }
  .check__marker { font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold);
                   color: var(--t-accent-text); }
  .check--pass .check__marker { background: var(--t-success); }
  .check--fail .check__marker { background: var(--t-error); }
  .check__text { font-size: var(--mea-text-md); color: var(--t-text); line-height: var(--mea-lh-snug); }
  .check__time { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  /* Participant: "What this means". */
  .eligibility-meaning { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                         box-shadow: var(--mea-shadow-sm); }
  .eligibility-meaning__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-md);
                                font-weight: var(--mea-w-bold); color: var(--t-text); }
  .eligibility-meaning__body { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                               line-height: var(--mea-lh-normal); }

  /* Participant: public defender contact. */
  .eligibility-contact { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                         box-shadow: var(--mea-shadow-sm); }
  .eligibility-contact__icon { background: var(--t-accent); color: var(--t-accent-text);
                               font-size: var(--mea-text-lg); }
  .eligibility-contact__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-md);
                                font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .eligibility-contact__desc { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                               line-height: var(--mea-lh-snug); }

  /* Staff: decision summary. */
  .eligibility-decision { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                          box-shadow: var(--mea-shadow-sm); }
  .eligibility-decision__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                                 font-weight: var(--mea-w-bold); color: var(--t-text); }
  .decision-stat__label { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                          color: var(--t-text-muted); text-transform: uppercase;
                          letter-spacing: var(--mea-ls-wide); }
  .decision-stat__value { font-size: var(--mea-text-xl); font-weight: var(--mea-w-bold);
                          color: var(--t-text); }
  .decision-stat__value--count { color: var(--t-accent); }
  .decision-stat__value--date { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); }

  /* Staff: rule-set metadata. */
  .eligibility-ruleset { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                         box-shadow: var(--mea-shadow-sm); }
  .eligibility-ruleset__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                                font-weight: var(--mea-w-bold); color: var(--t-text); }
  .ruleset-facts__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                          color: var(--t-text-muted); }
  .ruleset-facts__value { font-size: var(--mea-text-sm); color: var(--t-text); }
  .ruleset-facts__code { font-family: var(--mea-font-mono); font-size: var(--mea-text-xs);
                         color: var(--t-text); }

  /* Staff: full rule evaluation trace. */
  .eligibility-trace { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                       box-shadow: var(--mea-shadow-sm); }
  .eligibility-trace__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                              font-weight: var(--mea-w-bold); color: var(--t-text); }
  .eligibility-trace__count { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .eligibility-trace__empty { font-size: var(--mea-text-md); color: var(--t-text-muted); }

  .rule-trace { background: var(--t-bg-recessed); border: 1px solid var(--t-border); }
  .rule-trace__name { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold);
                      color: var(--t-text); }
  .rule-trace__status { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); }
  .rule-trace--pass .rule-trace__status { color: var(--t-success-text); }
  .rule-trace--fail .rule-trace__status { color: var(--t-error-text); }
  .rule-trace__label { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .rule-trace__value { font-size: var(--mea-text-sm); color: var(--t-text); }
  .rule-trace__code { font-family: var(--mea-font-mono); color: var(--t-text); }
  .rule-trace--pass .rule-trace__code--actual { color: var(--t-success-text); font-weight: var(--mea-w-semibold); }
  .rule-trace--fail .rule-trace__code--actual { color: var(--t-error-text); font-weight: var(--mea-w-semibold); }
  .rule-trace__explanation { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                             line-height: var(--mea-lh-relaxed); }
}